@leafygreen-ui/form-field - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

CHANGELOG.md

 # @leafygreen-ui/form-field
 
+## 1.2.4
+
+### Patch Changes
+
+- c95b81376: [LG-4409](https://jira.mongodb.org/browse/LG-4409): `contentEnd` slot prop now passes the `disabled` prop into the cloned element
+
 ## 1.2.3
@@ -4,0 +10,0 @@

dist/constants.d.ts

 export declare const LGIDS_FORM_FIELD: {
     readonly root: "lg-form_field";
+    readonly contentEnd: "lg-form_field-content_end";
     readonly description: "lg-form_field-description";
@@ -4,0 +5,0 @@ readonly errorMessage: "lg-form_field-error_message";

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useContext as n,forwardRef as r}from"react";import{css as t,cx as i}from"@leafygreen-ui/emotion";import a,{useDarkMode as o}from"@leafygreen-ui/leafygreen-provider";import{Size as l,spacing as s,typeScales as d,Variant as c,color as u,fontFamilies as p,fontWeights as f,transitionDuration as b,focusRing as m,hoverRing as g}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as h,Error as y,Body as v,Label as x,Description as w}from"@leafygreen-ui/typography";import O from"@leafygreen-ui/icon";import{useIdAllocator as k}from"@leafygreen-ui/hooks";import{createUniqueClassName as E,Theme as z}from"@leafygreen-ui/lib";import{palette as N}from"@leafygreen-ui/palette";var j="lg-form_field",S={root:j,description:"".concat(j,"-description"),errorMessage:"".concat(j,"-error_message"),feedback:"".concat(j,"-feedback"),input:"".concat(j,"-input"),label:"".concat(j,"-label"),optional:"".concat(j,"-optional"),successMessage:"".concat(j,"-success_message")},P={error:"This input needs your attention",success:"Success"};function F(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function M(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?F(Object(r),!0).forEach((function(n){I(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):F(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,r){return(n=D(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function H(){return H=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},H.apply(this,arguments)}function V(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function L(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var _,C,T,W,X,q,A,B,G,J,K={None:"none",Error:"error",Valid:"valid"},Q={disabled:!1,size:l.Default,state:K.None},R=e.createContext(Q),U=function(n){var r=n.value,t=n.children;return e.createElement(R.Provider,{value:r},t)},Y=function(){return n(R)},Z=function(e){var n=e.baseFontSize,r=e.size;return r===l.XSmall||r===l.Small?t(_||(_=L(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),d.body1.fontSize,d.body1.lineHeight):r===l.Default?t(C||(C=L(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),n,d.body1.lineHeight):r===l.Large?t(T||(T=L(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),d.large.fontSize,d.large.lineHeight):void 0},$=function(e){return e===K.Error?c.Error:e===K.Valid?c.Success:c.Primary},ee=t(W||(W=L(["\n  display: flex;\n  flex-direction: column;\n"]))),ne=t(X||(X=L(["\n  margin-bottom: ","px;\n"])),s[100]),re=t(q||(q=L(["\n  display: flex;\n  gap: ","px;\n"])),s[100]),te=t(A||(A=L(["\n  padding-top: ","px;\n"])),s[100]),ie=t(B||(B=L(["\n  opacity: 0;\n"]))),ae=t(G||(G=L(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),oe=function(e){return t(J||(J=L(["\n    height: ","px;\n  "])),e===l.Large?d.large.lineHeight:d.body1.lineHeight)},le=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],se=function(n){var r=n.baseFontSize,t=n.disabled,a=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,d=n.id,c=n.size,p=n.state,f=n.successMessage,b=V(n,le),m=o().theme,g=h(r),x=Z({baseFontSize:g,size:c}),w=p===K.Error,k=(w||p===K.Valid)&&!t,E=k?{glyph:w?"Warning":"Checkmark",fill:u[m].icon[$(p)].default,title:w?"Error":"Valid"}:void 0;return e.createElement("div",H({id:d,"data-lgid":S.feedback,"data-testid":S.feedback,className:i(re,I(I({},te,k),ie,s)),"aria-live":"polite","aria-relevant":"all"},b),k&&e.createElement(e.Fragment,null,E&&e.createElement("div",{className:i(ae,oe(c))},e.createElement(O,H({},E,{"aria-hidden":!0}))),w?e.createElement(y,{"data-lgid":S.errorMessage,"data-testid":S.errorMessage,className:x},a):e.createElement(v,{"data-lgid":S.successMessage,"data-testid":S.successMessage,className:x},f)))};se.displayName="FormFieldFeedback";var de,ce,ue,pe,fe,be,me,ge,he,ye,ve,xe,we,Oe,ke,Ee,ze=["label","description","state","id","disabled"],Ne=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],je=r((function(n,r){var t=n.label,o=n.description,s=n.children,d=n.baseFontSize,c=n.state,u=void 0===c?K.None:c,p=n.size,f=void 0===p?l.Default:p,b=n.disabled,m=void 0!==b&&b,g=n.errorMessage,y=void 0===g?P.error:g,v=n.successMessage,O=void 0===v?P.success:v,E=n.className,z=n.darkMode,N=n.optional,j=n.id,F=V(n,Ne),D=h(d),L=Z({baseFontSize:D,size:f}),_=function(e){var n,r=e.label,t=e.description,i=e.state,a=e.id,o=e.disabled,l=V(e,ze),s=k({prefix:S.label}),d=k({prefix:S.description}),c=k({prefix:S.feedback}),u=k({prefix:S.input}),p=null!=a?a:u,f=i===K.Error,b=i!==K.None,m=r?s:l["aria-labelledby"],g=r||m?void 0:l["aria-label"],h="".concat(t?d:""," ").concat(b?c:"").trim(),y=null!==(n=l["aria-invalid"])&&void 0!==n?n:f;return{labelId:s,descriptionId:d,feedbackId:c,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":h,"aria-label":g,"aria-disabled":o,readOnly:l.readOnly?l.readOnly:o,"aria-invalid":y}}}(M({label:t,description:o,state:u,id:j,disabled:m},F)),C=_.labelId,T=_.descriptionId,W=_.feedbackId,X=_.inputId,q=_.inputProps,A={baseFontSize:D,disabled:m,errorMessage:y,id:W,size:f,state:u,successMessage:O};return e.createElement(a,{darkMode:z},e.createElement(U,{value:{disabled:m,size:f,state:u,inputProps:q,optional:N}},e.createElement("div",H({className:i(L,E),ref:r},F),e.createElement("div",{className:i(ee,I({},ne,!(!t&&!o)))},t&&e.createElement(x,{"data-testid":S.label,className:L,htmlFor:X,id:C,disabled:m},t),o&&e.createElement(w,{"data-testid":S.description,className:L,id:T,disabled:m},o)),s,e.createElement(se,A))))}));je.displayName="FormField";var Se=E("form-field-input"),Pe=E("form-field-icon"),Fe=function(e){return"0 0 0 100px ".concat(e," inset")},Me=t(de||(de=L(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-size: inherit;\n  line-height: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n  z-index: 0;\n\n  & ."," {\n    font-family: ",";\n    color: inherit;\n    background-color: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    outline: none;\n    border: none;\n  }\n\n  & ."," svg,\n  & svg {\n    min-height: 16px;\n    min-width: 16px;\n  }\n"])),s[1],p.default,f.regular,b.default,Se,p.default,Pe),De=function(e){return t(ue||(ue=L(["\n  @supports selector(:has(a, b)) {\n    &:focus-within:not(:has(.",":focus)) {\n      ",'\n    }\n  }\n\n  /* Fallback for when "has" is unsupported */\n  @supports not selector(:has(a, b)) {\n    &:focus-within {\n      ',"\n    }\n  }\n"])),Pe,e,e)},Ie=I(I({},z.Light,De("\n     {\n      box-shadow: ".concat(m.light.input,";\n      border-color: ").concat(N.white,";\n    }\n  "))),z.Dark,De("\n     {\n      box-shadow: ".concat(m.dark.input,";\n      border-color: ").concat(N.gray.dark4,";\n    }\n  "))),He="&:has(button.".concat(Pe,")"),Ve=I(I(I(I({},l.XSmall,t(pe||(pe=L(["\n    height: 22px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[200],He,s[100])),l.Small,t(fe||(fe=L(["\n    height: 28px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[200],He,s[100])),l.Default,t(be||(be=L(["\n    height: 36px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[300],He,s[150])),l.Large,t(me||(me=L(["\n    height: 48px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[300],He,s[200]));function Le(e){var n=e.disabled,r=e.size,a=e.state,o=e.theme;return i(Me,function(e){var n=e===z.Dark?N.gray.dark4:u.light.background.primary.default;return t(ce||(ce=L(["\n    color: ",";\n    background: ",";\n    border: 1px solid;\n\n    & ."," {\n      &:-webkit-autofill {\n        color: ",";\n        background: ",";\n        border: 1px solid ",";\n        -webkit-text-fill-color: ",";\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n\n      &::placeholder {\n        font-weight: ",";\n        color: ",";\n      }\n    }\n  "])),u[e].text.primary.default,n,Se,u[e].text.primary.default,n,u[e].border.primary.default,u[e].text.primary.default,Fe(n),Fe(n),m[e].input,u[e].border.primary.focus,Fe(n),g[e].gray,f.regular,u[e].text.placeholder.default)}(o),Ve[r],I(I({},i(function(e){var n=e.theme,r=e.state;return I(I(I({},K.Error,t(ge||(ge=L(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),u[n].border.error.default,g[n].red)),K.None,t(he||(he=L(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),u[n].border.primary.default,g[n].gray)),K.Valid,t(ye||(ye=L(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),u[n].border.success.default,g[n].green))[r]}({theme:o,state:a}),Ie[o]),!n),function(e){return t(ve||(ve=L(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n\n    &:hover,\n    &:active {\n      &:not(:focus) {\n        box-shadow: inherit;\n      }\n    }\n\n    & ."," {\n      cursor: not-allowed;\n      pointer-events: none;\n      color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: inherit;\n        }\n      }\n    }\n  "])),u[e].text.disabled.default,u[e].background.disabled.default,u[e].border.disabled.default,Se,u[e].text.disabled.default,u[e].border.disabled.hover,u[e].text.disabled.hover,Fe(u[e].background.disabled.hover))}(o),n))}var _e=t(xe||(xe=L(["\n  width: 100%;\n"]))),Ce=t(we||(we=L(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n"])),s[100]),Te=function(e){return t(Oe||(Oe=L(["\n    color: ",";\n  "])),u[e].icon.disabled.default)},We=function(e){return t(ke||(ke=L(["\n    color: ",";\n  "])),u[e].icon.secondary.default)},Xe=function(e){return t(Ee||(Ee=L(["\n    color: ",";\n\n    font-size: 12px;\n    line-height: 12px;\n    font-style: italic;\n    font-weight: ",";\n    display: flex;\n    align-items: center;\n    > p {\n      margin: 0;\n    }\n  "])),u[e].text.secondary.default,f.regular)},qe=["contentEnd","className","children"],Ae=r((function(n,r){var t=n.contentEnd,a=n.className,s=n.children,d=V(n,qe),c=o().theme,u=Y(),p=u.disabled,f=u.size,b=u.state,m=u.inputProps,g=u.optional,h=Le({disabled:p,size:null!=f?f:l.Default,state:b,theme:c}),y=e.cloneElement(s,M(M({},m),{},{className:i(Se,s.props.className)})),v=b===K.None&&!p&&g,x=v||t;return e.createElement("div",H({},d,{ref:r,className:i(h,a)}),e.createElement("div",{className:_e},y),x&&e.createElement("div",{className:Ce},v&&e.createElement("div",{"data-lgid":S.optional,className:Xe(c)},e.createElement("p",null,"Optional")),t&&e.cloneElement(t,{className:i(Pe,We(c),I({},Te(c),p),t.props.className)})))}));Ae.displayName="FormFieldInputWrapper";export{P as DEFAULT_MESSAGES,je as FormField,R as FormFieldContext,se as FormFieldFeedback,Ae as FormFieldInputContainer,U as FormFieldProvider,K as FormFieldState,S as LGIDS_FORM_FIELD,Q as defaultFormFieldContext,Y as useFormFieldContext};
+import e,{useContext as n,forwardRef as t}from"react";import{css as r,cx as a}from"@leafygreen-ui/emotion";import i,{useDarkMode as o}from"@leafygreen-ui/leafygreen-provider";import{Size as l,spacing as s,typeScales as d,Variant as c,color as u,fontFamilies as p,fontWeights as f,transitionDuration as b,focusRing as m,hoverRing as g}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as h,Error as v,Body as y,Label as x,Description as w}from"@leafygreen-ui/typography";import E from"@leafygreen-ui/icon";import{useIdAllocator as O}from"@leafygreen-ui/hooks";import{createUniqueClassName as k,Theme as z}from"@leafygreen-ui/lib";import{palette as N}from"@leafygreen-ui/palette";var j="lg-form_field",S={root:j,contentEnd:"".concat(j,"-content_end"),description:"".concat(j,"-description"),errorMessage:"".concat(j,"-error_message"),feedback:"".concat(j,"-feedback"),input:"".concat(j,"-input"),label:"".concat(j,"-label"),optional:"".concat(j,"-optional"),successMessage:"".concat(j,"-success_message")},P={error:"This input needs your attention",success:"Success"};function F(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function M(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?F(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):F(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,t){return(n=D(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function H(){return H=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},H.apply(this,arguments)}function V(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function L(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var _,C,T,W,X,q,A,B,G,J,K={None:"none",Error:"error",Valid:"valid"},Q={disabled:!1,size:l.Default,state:K.None},R=e.createContext(Q),U=function(n){var t=n.value,r=n.children;return e.createElement(R.Provider,{value:t},r)},Y=function(){return n(R)},Z=function(e){var n=e.baseFontSize,t=e.size;return t===l.XSmall||t===l.Small?r(_||(_=L(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),d.body1.fontSize,d.body1.lineHeight):t===l.Default?r(C||(C=L(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),n,d.body1.lineHeight):t===l.Large?r(T||(T=L(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),d.large.fontSize,d.large.lineHeight):void 0},$=function(e){return e===K.Error?c.Error:e===K.Valid?c.Success:c.Primary},ee=r(W||(W=L(["\n  display: flex;\n  flex-direction: column;\n"]))),ne=r(X||(X=L(["\n  margin-bottom: ","px;\n"])),s[100]),te=r(q||(q=L(["\n  display: flex;\n  gap: ","px;\n"])),s[100]),re=r(A||(A=L(["\n  padding-top: ","px;\n"])),s[100]),ae=r(B||(B=L(["\n  opacity: 0;\n"]))),ie=r(G||(G=L(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),oe=function(e){return r(J||(J=L(["\n    height: ","px;\n  "])),e===l.Large?d.large.lineHeight:d.body1.lineHeight)},le=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],se=function(n){var t=n.baseFontSize,r=n.disabled,i=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,d=n.id,c=n.size,p=n.state,f=n.successMessage,b=V(n,le),m=o().theme,g=h(t),x=Z({baseFontSize:g,size:c}),w=p===K.Error,O=(w||p===K.Valid)&&!r,k=O?{glyph:w?"Warning":"Checkmark",fill:u[m].icon[$(p)].default,title:w?"Error":"Valid"}:void 0;return e.createElement("div",H({id:d,"data-lgid":S.feedback,"data-testid":S.feedback,className:a(te,I(I({},re,O),ae,s)),"aria-live":"polite","aria-relevant":"all"},b),O&&e.createElement(e.Fragment,null,k&&e.createElement("div",{className:a(ie,oe(c))},e.createElement(E,H({},k,{"aria-hidden":!0}))),w?e.createElement(v,{"data-lgid":S.errorMessage,"data-testid":S.errorMessage,className:x},i):e.createElement(y,{"data-lgid":S.successMessage,"data-testid":S.successMessage,className:x},f)))};se.displayName="FormFieldFeedback";var de,ce,ue,pe,fe,be,me,ge,he,ve,ye,xe,we,Ee,Oe,ke,ze=["label","description","state","id","disabled"],Ne=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],je=t((function(n,t){var r=n.label,o=n.description,s=n.children,d=n.baseFontSize,c=n.state,u=void 0===c?K.None:c,p=n.size,f=void 0===p?l.Default:p,b=n.disabled,m=void 0!==b&&b,g=n.errorMessage,v=void 0===g?P.error:g,y=n.successMessage,E=void 0===y?P.success:y,k=n.className,z=n.darkMode,N=n.optional,j=n.id,F=V(n,Ne),D=h(d),L=Z({baseFontSize:D,size:f}),_=function(e){var n,t=e.label,r=e.description,a=e.state,i=e.id,o=e.disabled,l=V(e,ze),s=O({prefix:S.label}),d=O({prefix:S.description}),c=O({prefix:S.feedback}),u=O({prefix:S.input}),p=null!=i?i:u,f=a===K.Error,b=a!==K.None,m=t?s:l["aria-labelledby"],g=t||m?void 0:l["aria-label"],h="".concat(r?d:""," ").concat(b?c:"").trim(),v=null!==(n=l["aria-invalid"])&&void 0!==n?n:f;return{labelId:s,descriptionId:d,feedbackId:c,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":h,"aria-label":g,"aria-disabled":o,readOnly:l.readOnly?l.readOnly:o,"aria-invalid":v}}}(M({label:r,description:o,state:u,id:j,disabled:m},F)),C=_.labelId,T=_.descriptionId,W=_.feedbackId,X=_.inputId,q=_.inputProps,A={baseFontSize:D,disabled:m,errorMessage:v,id:W,size:f,state:u,successMessage:E};return e.createElement(i,{darkMode:z},e.createElement(U,{value:{disabled:m,size:f,state:u,inputProps:q,optional:N}},e.createElement("div",H({className:a(L,k),ref:t},F),e.createElement("div",{className:a(ee,I({},ne,!(!r&&!o)))},r&&e.createElement(x,{"data-testid":S.label,className:L,htmlFor:X,id:C,disabled:m},r),o&&e.createElement(w,{"data-testid":S.description,className:L,id:T,disabled:m},o)),s,e.createElement(se,A))))}));je.displayName="FormField";var Se=k("form-field-input"),Pe=k("form-field-icon"),Fe=function(e){return"0 0 0 100px ".concat(e," inset")},Me=r(de||(de=L(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-size: inherit;\n  line-height: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n  z-index: 0;\n\n  & ."," {\n    font-family: ",";\n    color: inherit;\n    background-color: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    outline: none;\n    border: none;\n  }\n\n  & ."," svg,\n  & svg {\n    min-height: 16px;\n    min-width: 16px;\n  }\n"])),s[1],p.default,f.regular,b.default,Se,p.default,Pe),De=function(e){return r(ue||(ue=L(["\n  @supports selector(:has(a, b)) {\n    &:focus-within:not(:has(.",":focus)) {\n      ",'\n    }\n  }\n\n  /* Fallback for when "has" is unsupported */\n  @supports not selector(:has(a, b)) {\n    &:focus-within {\n      ',"\n    }\n  }\n"])),Pe,e,e)},Ie=I(I({},z.Light,De("\n     {\n      box-shadow: ".concat(m.light.input,";\n      border-color: ").concat(N.white,";\n    }\n  "))),z.Dark,De("\n     {\n      box-shadow: ".concat(m.dark.input,";\n      border-color: ").concat(N.gray.dark4,";\n    }\n  "))),He="&:has(button.".concat(Pe,")"),Ve=I(I(I(I({},l.XSmall,r(pe||(pe=L(["\n    height: 22px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[200],He,s[100])),l.Small,r(fe||(fe=L(["\n    height: 28px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[200],He,s[100])),l.Default,r(be||(be=L(["\n    height: 36px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[300],He,s[150])),l.Large,r(me||(me=L(["\n    height: 48px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),s[300],He,s[200])),Le=function(e){var n=e.disabled,t=e.size,i=e.state,o=e.theme,l=e.className;return a(Me,function(e){var n=e===z.Dark?N.gray.dark4:u.light.background.primary.default;return r(ce||(ce=L(["\n    color: ",";\n    background: ",";\n    border: 1px solid;\n\n    & ."," {\n      &:-webkit-autofill {\n        color: ",";\n        background: ",";\n        border: 1px solid ",";\n        -webkit-text-fill-color: ",";\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n\n      &::placeholder {\n        font-weight: ",";\n        color: ",";\n      }\n    }\n  "])),u[e].text.primary.default,n,Se,u[e].text.primary.default,n,u[e].border.primary.default,u[e].text.primary.default,Fe(n),Fe(n),m[e].input,u[e].border.primary.focus,Fe(n),g[e].gray,f.regular,u[e].text.placeholder.default)}(o),Ve[t],I(I({},a(function(e){var n=e.theme,t=e.state;return I(I(I({},K.Error,r(ge||(ge=L(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),u[n].border.error.default,g[n].red)),K.None,r(he||(he=L(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),u[n].border.primary.default,g[n].gray)),K.Valid,r(ve||(ve=L(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),u[n].border.success.default,g[n].green))[t]}({theme:o,state:i}),Ie[o]),!n),function(e){return r(ye||(ye=L(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n\n    &:hover,\n    &:active {\n      &:not(:focus) {\n        box-shadow: inherit;\n      }\n    }\n\n    & ."," {\n      cursor: not-allowed;\n      pointer-events: none;\n      color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: inherit;\n        }\n      }\n    }\n  "])),u[e].text.disabled.default,u[e].background.disabled.default,u[e].border.disabled.default,Se,u[e].text.disabled.default,u[e].border.disabled.hover,u[e].text.disabled.hover,Fe(u[e].background.disabled.hover))}(o),n),l)},_e=r(xe||(xe=L(["\n  width: 100%;\n"]))),Ce=function(e){return a(Se,e)},Te=r(we||(we=L(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n"])),s[100]),We=function(e){return r(Ee||(Ee=L(["\n    color: ",";\n\n    font-size: 12px;\n    line-height: 12px;\n    font-style: italic;\n    font-weight: ",";\n    display: flex;\n    align-items: center;\n    > p {\n      margin: 0;\n    }\n  "])),u[e].text.secondary.default,f.regular)},Xe=function(e,n,t){return a(Pe,function(e){return r(Oe||(Oe=L(["\n    color: ",";\n  "])),u[e].icon.secondary.default)}(e),I({},function(e){return r(ke||(ke=L(["\n    color: ",";\n\n    &:active,\n    &:hover {\n      color: ",";\n    }\n\n    &:focus {\n      color: ",";\n    }\n  "])),u[e].icon.disabled.default,u[e].icon.disabled.hover,u[e].icon.disabled.focus)}(e),n),t)},qe=["contentEnd","className","children"],Ae=t((function(n,t){var r=n.contentEnd,a=n.className,i=n.children,s=V(n,qe),d=o().theme,c=Y(),u=c.disabled,p=c.size,f=c.state,b=c.inputProps,m=c.optional,g=e.cloneElement(i,M(M({},b),{},{className:Ce(i.props.className)})),h=f===K.None&&!u&&m,v=h||r;return e.createElement("div",H({},s,{ref:t,className:Le({disabled:u,size:null!=p?p:l.Default,state:f,theme:d,className:a})}),e.createElement("div",{className:_e},g),v&&e.createElement("div",{className:Te},h&&e.createElement("div",{"data-lgid":S.optional,"data-testid":S.optional,className:We(d)},e.createElement("p",null,"Optional")),r&&e.cloneElement(r,I(I({className:Xe(d,u,r.props.className),disabled:u},"data-lgid",S.contentEnd),"data-testid",S.contentEnd))))}));Ae.displayName="FormFieldInputWrapper";export{P as DEFAULT_MESSAGES,je as FormField,R as FormFieldContext,se as FormFieldFeedback,Ae as FormFieldInputContainer,U as FormFieldProvider,K as FormFieldState,S as LGIDS_FORM_FIELD,Q as defaultFormFieldContext,Y as useFormFieldContext};
 //# sourceMappingURL=index.js.map

dist/FormFieldInputContainer/FormFieldInputContainer.styles.d.ts

 import { Theme } from '@leafygreen-ui/lib';
-import { Size } from '@leafygreen-ui/tokens';
-import { FormFieldState } from '../FormField/FormField.types';
 import { FormFieldContextProps } from '../FormFieldContext';
-export declare const inputElementClassName: string;
-export declare const iconClassName: string;
-export declare const inputWrapperBaseStyles: string;
-export declare const getInputWrapperModeStyles: (theme: Theme) => string;
-export declare const inputWrapperFocusStyles: Record<Theme, string>;
-export declare const inputWrapperSizeStyles: Record<Size, string>;
-export declare const getInputWrapperStateStyles: ({ theme, state, }: {
+export declare const getInputWrapperStyles: ({ disabled, size: sizeProp, state, theme, className, }: Pick<FormFieldContextProps, "state" | "size" | "disabled"> & {
     theme: Theme;
-    state: FormFieldState;
+    className?: string | undefined;
 }) => string;
-export declare const getInputWrapperDisabledThemeStyles: (theme: Theme) => string;
-export declare function getInputWrapperStyles({ disabled, size: sizeProp, state, theme, }: Required<Pick<FormFieldContextProps, 'disabled' | 'size' | 'state'> & {
-    theme: Theme;
-}>): string;
 export declare const childrenWrapperStyles: string;
+export declare const getChildrenStyles: (className?: string) => string;
 export declare const additionalChildrenWrapperStyles: string;
-export declare const getIconDisabledThemeStyles: (theme: Theme) => string;
-export declare const getIconThemeStyles: (theme: Theme) => string;
 export declare const getOptionalTextStyle: (theme: Theme) => string;
+export declare const getContentEndStyles: (theme: Theme, disabled: boolean, className?: string) => string;
 //# sourceMappingURL=FormFieldInputContainer.styles.d.ts.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","@leafygreen-ui/icon","@leafygreen-ui/hooks","@leafygreen-ui/lib","@leafygreen-ui/palette"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/form-field"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,n,r,t,a,i,o,l,s,c){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(n),f=d(t),p=d(o),g="lg-form_field",b={root:g,description:"".concat(g,"-description"),errorMessage:"".concat(g,"-error_message"),feedback:"".concat(g,"-feedback"),input:"".concat(g,"-input"),label:"".concat(g,"-label"),optional:"".concat(g,"-optional"),successMessage:"".concat(g,"-success_message")},h={error:"This input needs your attention",success:"Success"};function m(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function y(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?m(Object(r),!0).forEach((function(n){v(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function x(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function v(e,n,r){return(n=x(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function S(){return S=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},S.apply(this,arguments)}function z(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},i=Object.keys(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function F(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var k,w,E,O,N,j,M,P,D,I,q={None:"none",Error:"error",Valid:"valid"},R={disabled:!1,size:a.Size.Default,state:q.None},C=u.default.createContext(R),L=function(e){var n=e.value,r=e.children;return u.default.createElement(C.Provider,{value:n},r)},T=function(){return n.useContext(C)},V=function(e){var n=e.baseFontSize,t=e.size;return t===a.Size.XSmall||t===a.Size.Small?r.css(k||(k=F(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),a.typeScales.body1.fontSize,a.typeScales.body1.lineHeight):t===a.Size.Default?r.css(w||(w=F(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),n,a.typeScales.body1.lineHeight):t===a.Size.Large?r.css(E||(E=F(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),a.typeScales.large.fontSize,a.typeScales.large.lineHeight):void 0},A=function(e){return e===q.Error?a.Variant.Error:e===q.Valid?a.Variant.Success:a.Variant.Primary},_=r.css(O||(O=F(["\n  display: flex;\n  flex-direction: column;\n"]))),H=r.css(N||(N=F(["\n  margin-bottom: ","px;\n"])),a.spacing[100]),U=r.css(j||(j=F(["\n  display: flex;\n  gap: ","px;\n"])),a.spacing[100]),W=r.css(M||(M=F(["\n  padding-top: ","px;\n"])),a.spacing[100]),B=r.css(P||(P=F(["\n  opacity: 0;\n"]))),G=r.css(D||(D=F(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),X=function(e){return r.css(I||(I=F(["\n    height: ","px;\n  "])),e===a.Size.Large?a.typeScales.large.lineHeight:a.typeScales.body1.lineHeight)},J=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],K=function(e){var n=e.baseFontSize,o=e.disabled,l=e.errorMessage,s=e.hideFeedback,c=void 0!==s&&s,d=e.id,f=e.size,g=e.state,h=e.successMessage,m=z(e,J),y=t.useDarkMode().theme,x=i.useUpdatedBaseFontSize(n),F=V({baseFontSize:x,size:f}),k=g===q.Error,w=(k||g===q.Valid)&&!o,E=w?{glyph:k?"Warning":"Checkmark",fill:a.color[y].icon[A(g)].default,title:k?"Error":"Valid"}:void 0;return u.default.createElement("div",S({id:d,"data-lgid":b.feedback,"data-testid":b.feedback,className:r.cx(U,v(v({},W,w),B,c)),"aria-live":"polite","aria-relevant":"all"},m),w&&u.default.createElement(u.default.Fragment,null,E&&u.default.createElement("div",{className:r.cx(G,X(f))},u.default.createElement(p.default,S({},E,{"aria-hidden":!0}))),k?u.default.createElement(i.Error,{"data-lgid":b.errorMessage,"data-testid":b.errorMessage,className:F},l):u.default.createElement(i.Body,{"data-lgid":b.successMessage,"data-testid":b.successMessage,className:F},h)))};K.displayName="FormFieldFeedback";var Q,Y,Z,$,ee,ne,re,te,ae,ie,oe,le,se,ce,de,ue,fe=["label","description","state","id","disabled"],pe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],ge=n.forwardRef((function(e,n){var t=e.label,o=e.description,s=e.children,c=e.baseFontSize,d=e.state,p=void 0===d?q.None:d,g=e.size,m=void 0===g?a.Size.Default:g,x=e.disabled,F=void 0!==x&&x,k=e.errorMessage,w=void 0===k?h.error:k,E=e.successMessage,O=void 0===E?h.success:E,N=e.className,j=e.darkMode,M=e.optional,P=e.id,D=z(e,pe),I=i.useUpdatedBaseFontSize(c),R=V({baseFontSize:I,size:m}),C=function(e){var n,r=e.label,t=e.description,a=e.state,i=e.id,o=e.disabled,s=z(e,fe),c=l.useIdAllocator({prefix:b.label}),d=l.useIdAllocator({prefix:b.description}),u=l.useIdAllocator({prefix:b.feedback}),f=l.useIdAllocator({prefix:b.input}),p=null!=i?i:f,g=a===q.Error,h=a!==q.None,m=r?c:s["aria-labelledby"],y=r||m?void 0:s["aria-label"],x="".concat(t?d:""," ").concat(h?u:"").trim(),v=null!==(n=s["aria-invalid"])&&void 0!==n?n:g;return{labelId:c,descriptionId:d,feedbackId:u,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":x,"aria-label":y,"aria-disabled":o,readOnly:s.readOnly?s.readOnly:o,"aria-invalid":v}}}(y({label:t,description:o,state:p,id:P,disabled:F},D)),T=C.labelId,A=C.descriptionId,U=C.feedbackId,W=C.inputId,B=C.inputProps,G={baseFontSize:I,disabled:F,errorMessage:w,id:U,size:m,state:p,successMessage:O};return u.default.createElement(f.default,{darkMode:j},u.default.createElement(L,{value:{disabled:F,size:m,state:p,inputProps:B,optional:M}},u.default.createElement("div",S({className:r.cx(R,N),ref:n},D),u.default.createElement("div",{className:r.cx(_,v({},H,!(!t&&!o)))},t&&u.default.createElement(i.Label,{"data-testid":b.label,className:R,htmlFor:W,id:T,disabled:F},t),o&&u.default.createElement(i.Description,{"data-testid":b.description,className:R,id:A,disabled:F},o)),s,u.default.createElement(K,G))))}));ge.displayName="FormField";var be=s.createUniqueClassName("form-field-input"),he=s.createUniqueClassName("form-field-icon"),me=function(e){return"0 0 0 100px ".concat(e," inset")},ye=r.css(Q||(Q=F(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-size: inherit;\n  line-height: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n  z-index: 0;\n\n  & ."," {\n    font-family: ",";\n    color: inherit;\n    background-color: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    outline: none;\n    border: none;\n  }\n\n  & ."," svg,\n  & svg {\n    min-height: 16px;\n    min-width: 16px;\n  }\n"])),a.spacing[1],a.fontFamilies.default,a.fontWeights.regular,a.transitionDuration.default,be,a.fontFamilies.default,he),xe=function(e){return r.css(Z||(Z=F(["\n  @supports selector(:has(a, b)) {\n    &:focus-within:not(:has(.",":focus)) {\n      ",'\n    }\n  }\n\n  /* Fallback for when "has" is unsupported */\n  @supports not selector(:has(a, b)) {\n    &:focus-within {\n      ',"\n    }\n  }\n"])),he,e,e)},ve=v(v({},s.Theme.Light,xe("\n     {\n      box-shadow: ".concat(a.focusRing.light.input,";\n      border-color: ").concat(c.palette.white,";\n    }\n  "))),s.Theme.Dark,xe("\n     {\n      box-shadow: ".concat(a.focusRing.dark.input,";\n      border-color: ").concat(c.palette.gray.dark4,";\n    }\n  "))),Se="&:has(button.".concat(he,")"),ze=v(v(v(v({},a.Size.XSmall,r.css($||($=F(["\n    height: 22px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[200],Se,a.spacing[100])),a.Size.Small,r.css(ee||(ee=F(["\n    height: 28px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[200],Se,a.spacing[100])),a.Size.Default,r.css(ne||(ne=F(["\n    height: 36px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[300],Se,a.spacing[150])),a.Size.Large,r.css(re||(re=F(["\n    height: 48px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[300],Se,a.spacing[200]));function Fe(e){var n=e.disabled,t=e.size,i=e.state,o=e.theme;return r.cx(ye,function(e){var n=e===s.Theme.Dark?c.palette.gray.dark4:a.color.light.background.primary.default;return r.css(Y||(Y=F(["\n    color: ",";\n    background: ",";\n    border: 1px solid;\n\n    & ."," {\n      &:-webkit-autofill {\n        color: ",";\n        background: ",";\n        border: 1px solid ",";\n        -webkit-text-fill-color: ",";\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n\n      &::placeholder {\n        font-weight: ",";\n        color: ",";\n      }\n    }\n  "])),a.color[e].text.primary.default,n,be,a.color[e].text.primary.default,n,a.color[e].border.primary.default,a.color[e].text.primary.default,me(n),me(n),a.focusRing[e].input,a.color[e].border.primary.focus,me(n),a.hoverRing[e].gray,a.fontWeights.regular,a.color[e].text.placeholder.default)}(o),ze[t],v(v({},r.cx(function(e){var n=e.theme,t=e.state;return v(v(v({},q.Error,r.css(te||(te=F(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),a.color[n].border.error.default,a.hoverRing[n].red)),q.None,r.css(ae||(ae=F(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),a.color[n].border.primary.default,a.hoverRing[n].gray)),q.Valid,r.css(ie||(ie=F(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),a.color[n].border.success.default,a.hoverRing[n].green))[t]}({theme:o,state:i}),ve[o]),!n),function(e){return r.css(oe||(oe=F(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n\n    &:hover,\n    &:active {\n      &:not(:focus) {\n        box-shadow: inherit;\n      }\n    }\n\n    & ."," {\n      cursor: not-allowed;\n      pointer-events: none;\n      color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: inherit;\n        }\n      }\n    }\n  "])),a.color[e].text.disabled.default,a.color[e].background.disabled.default,a.color[e].border.disabled.default,be,a.color[e].text.disabled.default,a.color[e].border.disabled.hover,a.color[e].text.disabled.hover,me(a.color[e].background.disabled.hover))}(o),n))}var ke=r.css(le||(le=F(["\n  width: 100%;\n"]))),we=r.css(se||(se=F(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n"])),a.spacing[100]),Ee=function(e){return r.css(ce||(ce=F(["\n    color: ",";\n  "])),a.color[e].icon.disabled.default)},Oe=function(e){return r.css(de||(de=F(["\n    color: ",";\n  "])),a.color[e].icon.secondary.default)},Ne=function(e){return r.css(ue||(ue=F(["\n    color: ",";\n\n    font-size: 12px;\n    line-height: 12px;\n    font-style: italic;\n    font-weight: ",";\n    display: flex;\n    align-items: center;\n    > p {\n      margin: 0;\n    }\n  "])),a.color[e].text.secondary.default,a.fontWeights.regular)},je=["contentEnd","className","children"],Me=n.forwardRef((function(e,n){var i=e.contentEnd,o=e.className,l=e.children,s=z(e,je),c=t.useDarkMode().theme,d=T(),f=d.disabled,p=d.size,g=d.state,h=d.inputProps,m=d.optional,x=Fe({disabled:f,size:null!=p?p:a.Size.Default,state:g,theme:c}),F=u.default.cloneElement(l,y(y({},h),{},{className:r.cx(be,l.props.className)})),k=g===q.None&&!f&&m,w=k||i;return u.default.createElement("div",S({},s,{ref:n,className:r.cx(x,o)}),u.default.createElement("div",{className:ke},F),w&&u.default.createElement("div",{className:we},k&&u.default.createElement("div",{"data-lgid":b.optional,className:Ne(c)},u.default.createElement("p",null,"Optional")),i&&u.default.cloneElement(i,{className:r.cx(he,Oe(c),v({},Ee(c),f),i.props.className)})))}));Me.displayName="FormFieldInputWrapper",e.DEFAULT_MESSAGES=h,e.FormField=ge,e.FormFieldContext=C,e.FormFieldFeedback=K,e.FormFieldInputContainer=Me,e.FormFieldProvider=L,e.FormFieldState=q,e.LGIDS_FORM_FIELD=b,e.defaultFormFieldContext=R,e.useFormFieldContext=T}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","@leafygreen-ui/icon","@leafygreen-ui/hooks","@leafygreen-ui/lib","@leafygreen-ui/palette"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/form-field"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,n,t,r,a,i,o,l,s,c){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(n),f=d(r),p=d(o),g="lg-form_field",b={root:g,contentEnd:"".concat(g,"-content_end"),description:"".concat(g,"-description"),errorMessage:"".concat(g,"-error_message"),feedback:"".concat(g,"-feedback"),input:"".concat(g,"-input"),label:"".concat(g,"-label"),optional:"".concat(g,"-optional"),successMessage:"".concat(g,"-success_message")},h={error:"This input needs your attention",success:"Success"};function m(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function y(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?m(Object(t),!0).forEach((function(n){x(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):m(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function v(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function x(e,n,t){return(n=v(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function S(){return S=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},S.apply(this,arguments)}function z(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function F(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var k,w,E,O,N,j,M,P,D,I,q={None:"none",Error:"error",Valid:"valid"},R={disabled:!1,size:a.Size.Default,state:q.None},C=u.default.createContext(R),L=function(e){var n=e.value,t=e.children;return u.default.createElement(C.Provider,{value:n},t)},T=function(){return n.useContext(C)},V=function(e){var n=e.baseFontSize,r=e.size;return r===a.Size.XSmall||r===a.Size.Small?t.css(k||(k=F(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),a.typeScales.body1.fontSize,a.typeScales.body1.lineHeight):r===a.Size.Default?t.css(w||(w=F(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),n,a.typeScales.body1.lineHeight):r===a.Size.Large?t.css(E||(E=F(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),a.typeScales.large.fontSize,a.typeScales.large.lineHeight):void 0},_=function(e){return e===q.Error?a.Variant.Error:e===q.Valid?a.Variant.Success:a.Variant.Primary},A=t.css(O||(O=F(["\n  display: flex;\n  flex-direction: column;\n"]))),H=t.css(N||(N=F(["\n  margin-bottom: ","px;\n"])),a.spacing[100]),U=t.css(j||(j=F(["\n  display: flex;\n  gap: ","px;\n"])),a.spacing[100]),W=t.css(M||(M=F(["\n  padding-top: ","px;\n"])),a.spacing[100]),B=t.css(P||(P=F(["\n  opacity: 0;\n"]))),G=t.css(D||(D=F(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),X=function(e){return t.css(I||(I=F(["\n    height: ","px;\n  "])),e===a.Size.Large?a.typeScales.large.lineHeight:a.typeScales.body1.lineHeight)},J=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],K=function(e){var n=e.baseFontSize,o=e.disabled,l=e.errorMessage,s=e.hideFeedback,c=void 0!==s&&s,d=e.id,f=e.size,g=e.state,h=e.successMessage,m=z(e,J),y=r.useDarkMode().theme,v=i.useUpdatedBaseFontSize(n),F=V({baseFontSize:v,size:f}),k=g===q.Error,w=(k||g===q.Valid)&&!o,E=w?{glyph:k?"Warning":"Checkmark",fill:a.color[y].icon[_(g)].default,title:k?"Error":"Valid"}:void 0;return u.default.createElement("div",S({id:d,"data-lgid":b.feedback,"data-testid":b.feedback,className:t.cx(U,x(x({},W,w),B,c)),"aria-live":"polite","aria-relevant":"all"},m),w&&u.default.createElement(u.default.Fragment,null,E&&u.default.createElement("div",{className:t.cx(G,X(f))},u.default.createElement(p.default,S({},E,{"aria-hidden":!0}))),k?u.default.createElement(i.Error,{"data-lgid":b.errorMessage,"data-testid":b.errorMessage,className:F},l):u.default.createElement(i.Body,{"data-lgid":b.successMessage,"data-testid":b.successMessage,className:F},h)))};K.displayName="FormFieldFeedback";var Q,Y,Z,$,ee,ne,te,re,ae,ie,oe,le,se,ce,de,ue,fe=["label","description","state","id","disabled"],pe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],ge=n.forwardRef((function(e,n){var r=e.label,o=e.description,s=e.children,c=e.baseFontSize,d=e.state,p=void 0===d?q.None:d,g=e.size,m=void 0===g?a.Size.Default:g,v=e.disabled,F=void 0!==v&&v,k=e.errorMessage,w=void 0===k?h.error:k,E=e.successMessage,O=void 0===E?h.success:E,N=e.className,j=e.darkMode,M=e.optional,P=e.id,D=z(e,pe),I=i.useUpdatedBaseFontSize(c),R=V({baseFontSize:I,size:m}),C=function(e){var n,t=e.label,r=e.description,a=e.state,i=e.id,o=e.disabled,s=z(e,fe),c=l.useIdAllocator({prefix:b.label}),d=l.useIdAllocator({prefix:b.description}),u=l.useIdAllocator({prefix:b.feedback}),f=l.useIdAllocator({prefix:b.input}),p=null!=i?i:f,g=a===q.Error,h=a!==q.None,m=t?c:s["aria-labelledby"],y=t||m?void 0:s["aria-label"],v="".concat(r?d:""," ").concat(h?u:"").trim(),x=null!==(n=s["aria-invalid"])&&void 0!==n?n:g;return{labelId:c,descriptionId:d,feedbackId:u,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":v,"aria-label":y,"aria-disabled":o,readOnly:s.readOnly?s.readOnly:o,"aria-invalid":x}}}(y({label:r,description:o,state:p,id:P,disabled:F},D)),T=C.labelId,_=C.descriptionId,U=C.feedbackId,W=C.inputId,B=C.inputProps,G={baseFontSize:I,disabled:F,errorMessage:w,id:U,size:m,state:p,successMessage:O};return u.default.createElement(f.default,{darkMode:j},u.default.createElement(L,{value:{disabled:F,size:m,state:p,inputProps:B,optional:M}},u.default.createElement("div",S({className:t.cx(R,N),ref:n},D),u.default.createElement("div",{className:t.cx(A,x({},H,!(!r&&!o)))},r&&u.default.createElement(i.Label,{"data-testid":b.label,className:R,htmlFor:W,id:T,disabled:F},r),o&&u.default.createElement(i.Description,{"data-testid":b.description,className:R,id:_,disabled:F},o)),s,u.default.createElement(K,G))))}));ge.displayName="FormField";var be=s.createUniqueClassName("form-field-input"),he=s.createUniqueClassName("form-field-icon"),me=function(e){return"0 0 0 100px ".concat(e," inset")},ye=t.css(Q||(Q=F(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-size: inherit;\n  line-height: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n  z-index: 0;\n\n  & ."," {\n    font-family: ",";\n    color: inherit;\n    background-color: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    outline: none;\n    border: none;\n  }\n\n  & ."," svg,\n  & svg {\n    min-height: 16px;\n    min-width: 16px;\n  }\n"])),a.spacing[1],a.fontFamilies.default,a.fontWeights.regular,a.transitionDuration.default,be,a.fontFamilies.default,he),ve=function(e){return t.css(Z||(Z=F(["\n  @supports selector(:has(a, b)) {\n    &:focus-within:not(:has(.",":focus)) {\n      ",'\n    }\n  }\n\n  /* Fallback for when "has" is unsupported */\n  @supports not selector(:has(a, b)) {\n    &:focus-within {\n      ',"\n    }\n  }\n"])),he,e,e)},xe=x(x({},s.Theme.Light,ve("\n     {\n      box-shadow: ".concat(a.focusRing.light.input,";\n      border-color: ").concat(c.palette.white,";\n    }\n  "))),s.Theme.Dark,ve("\n     {\n      box-shadow: ".concat(a.focusRing.dark.input,";\n      border-color: ").concat(c.palette.gray.dark4,";\n    }\n  "))),Se="&:has(button.".concat(he,")"),ze=x(x(x(x({},a.Size.XSmall,t.css($||($=F(["\n    height: 22px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[200],Se,a.spacing[100])),a.Size.Small,t.css(ee||(ee=F(["\n    height: 28px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[200],Se,a.spacing[100])),a.Size.Default,t.css(ne||(ne=F(["\n    height: 36px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[300],Se,a.spacing[150])),a.Size.Large,t.css(te||(te=F(["\n    height: 48px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),a.spacing[300],Se,a.spacing[200])),Fe=function(e){var n=e.disabled,r=e.size,i=e.state,o=e.theme,l=e.className;return t.cx(ye,function(e){var n=e===s.Theme.Dark?c.palette.gray.dark4:a.color.light.background.primary.default;return t.css(Y||(Y=F(["\n    color: ",";\n    background: ",";\n    border: 1px solid;\n\n    & ."," {\n      &:-webkit-autofill {\n        color: ",";\n        background: ",";\n        border: 1px solid ",";\n        -webkit-text-fill-color: ",";\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n\n      &::placeholder {\n        font-weight: ",";\n        color: ",";\n      }\n    }\n  "])),a.color[e].text.primary.default,n,be,a.color[e].text.primary.default,n,a.color[e].border.primary.default,a.color[e].text.primary.default,me(n),me(n),a.focusRing[e].input,a.color[e].border.primary.focus,me(n),a.hoverRing[e].gray,a.fontWeights.regular,a.color[e].text.placeholder.default)}(o),ze[r],x(x({},t.cx(function(e){var n=e.theme,r=e.state;return x(x(x({},q.Error,t.css(re||(re=F(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),a.color[n].border.error.default,a.hoverRing[n].red)),q.None,t.css(ae||(ae=F(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),a.color[n].border.primary.default,a.hoverRing[n].gray)),q.Valid,t.css(ie||(ie=F(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),a.color[n].border.success.default,a.hoverRing[n].green))[r]}({theme:o,state:i}),xe[o]),!n),function(e){return t.css(oe||(oe=F(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n\n    &:hover,\n    &:active {\n      &:not(:focus) {\n        box-shadow: inherit;\n      }\n    }\n\n    & ."," {\n      cursor: not-allowed;\n      pointer-events: none;\n      color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: inherit;\n        }\n      }\n    }\n  "])),a.color[e].text.disabled.default,a.color[e].background.disabled.default,a.color[e].border.disabled.default,be,a.color[e].text.disabled.default,a.color[e].border.disabled.hover,a.color[e].text.disabled.hover,me(a.color[e].background.disabled.hover))}(o),n),l)},ke=t.css(le||(le=F(["\n  width: 100%;\n"]))),we=function(e){return t.cx(be,e)},Ee=t.css(se||(se=F(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n"])),a.spacing[100]),Oe=function(e){return t.css(ce||(ce=F(["\n    color: ",";\n\n    font-size: 12px;\n    line-height: 12px;\n    font-style: italic;\n    font-weight: ",";\n    display: flex;\n    align-items: center;\n    > p {\n      margin: 0;\n    }\n  "])),a.color[e].text.secondary.default,a.fontWeights.regular)},Ne=function(e,n,r){return t.cx(he,function(e){return t.css(de||(de=F(["\n    color: ",";\n  "])),a.color[e].icon.secondary.default)}(e),x({},function(e){return t.css(ue||(ue=F(["\n    color: ",";\n\n    &:active,\n    &:hover {\n      color: ",";\n    }\n\n    &:focus {\n      color: ",";\n    }\n  "])),a.color[e].icon.disabled.default,a.color[e].icon.disabled.hover,a.color[e].icon.disabled.focus)}(e),n),r)},je=["contentEnd","className","children"],Me=n.forwardRef((function(e,n){var t=e.contentEnd,i=e.className,o=e.children,l=z(e,je),s=r.useDarkMode().theme,c=T(),d=c.disabled,f=c.size,p=c.state,g=c.inputProps,h=c.optional,m=u.default.cloneElement(o,y(y({},g),{},{className:we(o.props.className)})),v=p===q.None&&!d&&h,F=v||t;return u.default.createElement("div",S({},l,{ref:n,className:Fe({disabled:d,size:null!=f?f:a.Size.Default,state:p,theme:s,className:i})}),u.default.createElement("div",{className:ke},m),F&&u.default.createElement("div",{className:Ee},v&&u.default.createElement("div",{"data-lgid":b.optional,"data-testid":b.optional,className:Oe(s)},u.default.createElement("p",null,"Optional")),t&&u.default.cloneElement(t,x(x({className:Ne(s,d,t.props.className),disabled:d},"data-lgid",b.contentEnd),"data-testid",b.contentEnd))))}));Me.displayName="FormFieldInputWrapper",e.DEFAULT_MESSAGES=h,e.FormField=ge,e.FormFieldContext=C,e.FormFieldFeedback=K,e.FormFieldInputContainer=Me,e.FormFieldProvider=L,e.FormFieldState=q,e.LGIDS_FORM_FIELD=b,e.defaultFormFieldContext=R,e.useFormFieldContext=T}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/form-field",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "LeafyGreen UI Kit Form Field",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/constants.ts

@@ -5,2 +5,3 @@ const LGID_ROOT = 'lg-form_field';
   root: LGID_ROOT,
+  contentEnd: `${LGID_ROOT}-content_end`,
   description: `${LGID_ROOT}-description`,
@@ -7,0 +8,0 @@ errorMessage: `${LGID_ROOT}-error_message`,

src/FormFieldInputContainer/FormFieldInputContainer.styles.ts

@@ -18,7 +18,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 
-export const inputElementClassName = createUniqueClassName('form-field-input');
-export const iconClassName = createUniqueClassName('form-field-icon');
+const inputElementClassName = createUniqueClassName('form-field-input');
+const iconClassName = createUniqueClassName('form-field-icon');
 const autofillShadowOverride = (color: string) => `0 0 0 100px ${color} inset`;
 
-export const inputWrapperBaseStyles = css`
+const inputWrapperBaseStyles = css`
   display: flex;
@@ -58,3 +58,3 @@ align-items: center;
 
-export const getInputWrapperModeStyles = (theme: Theme) => {
+const getInputWrapperModeStyles = (theme: Theme) => {
   const isDarkMode = theme === Theme.Dark;
@@ -114,3 +114,3 @@ /** token exceptions: background-color value was designated prior to token system */
 
-export const inputWrapperFocusStyles: Record<Theme, string> = {
+const inputWrapperFocusStyles: Record<Theme, string> = {
   [Theme.Light]: focusSelector(`
@@ -133,3 +133,3 @@ {
 
-export const inputWrapperSizeStyles: Record<Size, string> = {
+const inputWrapperSizeStyles: Record<Size, string> = {
   [Size.XSmall]: css`
@@ -169,3 +169,3 @@ height: 22px;
 
-export const getInputWrapperStateStyles = ({
+const getInputWrapperStateStyles = ({
   theme,
@@ -213,3 +213,3 @@ state,
 
-export const getInputWrapperDisabledThemeStyles = (theme: Theme) => {
+const getInputWrapperDisabledThemeStyles = (theme: Theme) => {
   return css`
@@ -258,3 +258,3 @@ cursor: not-allowed;
 
-export function getInputWrapperStyles({
+export const getInputWrapperStyles = ({
   disabled,
@@ -264,6 +264,8 @@ size: sizeProp,
   theme,
-}: Required<
-  Pick<FormFieldContextProps, 'disabled' | 'size' | 'state'> & { theme: Theme }
->) {
-  return cx(
+  className,
+}: Pick<FormFieldContextProps, 'disabled' | 'size' | 'state'> & {
+  theme: Theme;
+  className?: string;
+}) =>
+  cx(
     inputWrapperBaseStyles,
@@ -279,4 +281,4 @@ getInputWrapperModeStyles(theme),
     },
+    className,
   );
-}
 
@@ -287,2 +289,5 @@ export const childrenWrapperStyles = css`
 
+export const getChildrenStyles = (className?: string) =>
+  cx(inputElementClassName, className);
+
 export const additionalChildrenWrapperStyles = css`
@@ -294,14 +299,2 @@ display: flex;
 
-export const getIconDisabledThemeStyles = (theme: Theme) => {
-  return css`
-    color: ${color[theme].icon.disabled.default};
-  `;
-};
-
-export const getIconThemeStyles = (theme: Theme) => {
-  return css`
-    color: ${color[theme].icon.secondary.default};
-  `;
-};
-
 export const getOptionalTextStyle = (theme: Theme) => {
@@ -322,1 +315,34 @@ return css`
 };
+
+const getIconThemeStyles = (theme: Theme) => {
+  return css`
+    color: ${color[theme].icon.secondary.default};
+  `;
+};
+
+const getIconDisabledThemeStyles = (theme: Theme) => {
+  return css`
+    color: ${color[theme].icon.disabled.default};
+
+    &:active,
+    &:hover {
+      color: ${color[theme].icon.disabled.hover};
+    }
+
+    &:focus {
+      color: ${color[theme].icon.disabled.focus};
+    }
+  `;
+};
+
+export const getContentEndStyles = (
+  theme: Theme,
+  disabled: boolean,
+  className?: string,
+) =>
+  cx(
+    iconClassName,
+    getIconThemeStyles(theme),
+    { [getIconDisabledThemeStyles(theme)]: disabled },
+    className,
+  );

stories.js

@@ -1,1 +0,1 @@
-import e,{useContext as n,forwardRef as t}from"react";import r from"@leafygreen-ui/button";import{css as a,cx as i}from"@leafygreen-ui/emotion";import o,{glyphs as l}from"@leafygreen-ui/icon";import s from"@leafygreen-ui/icon-button";import c,{useDarkMode as d}from"@leafygreen-ui/leafygreen-provider";import{Size as p,spacing as u,typeScales as b,Variant as f,color as m,fontFamilies as g,fontWeights as h,transitionDuration as y,focusRing as v,hoverRing as x}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as E,Error as z,Body as k,Label as w,Description as O}from"@leafygreen-ui/typography";import{useIdAllocator as N}from"@leafygreen-ui/hooks";import{createUniqueClassName as S,Theme as j}from"@leafygreen-ui/lib";import{palette as M}from"@leafygreen-ui/palette";function F(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function P(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?F(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):F(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,t){return(n=D(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function C(){return C=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},C.apply(this,arguments)}function L(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function H(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var V,X,T,W,_,A,B,G,q,J,K="lg-form_field",Q={root:K,description:"".concat(K,"-description"),errorMessage:"".concat(K,"-error_message"),feedback:"".concat(K,"-feedback"),input:"".concat(K,"-input"),label:"".concat(K,"-label"),optional:"".concat(K,"-optional"),successMessage:"".concat(K,"-success_message")},R="This input needs your attention",U="Success",Y={None:"none",Error:"error",Valid:"valid"},Z={disabled:!1,size:p.Default,state:Y.None},$=e.createContext(Z),ee=function(n){var t=n.value,r=n.children;return e.createElement($.Provider,{value:t},r)},ne=function(){return n($)},te=function(e){var n=e.baseFontSize,t=e.size;return t===p.XSmall||t===p.Small?a(V||(V=H(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),b.body1.fontSize,b.body1.lineHeight):t===p.Default?a(X||(X=H(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),n,b.body1.lineHeight):t===p.Large?a(T||(T=H(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),b.large.fontSize,b.large.lineHeight):void 0},re=function(e){return e===Y.Error?f.Error:e===Y.Valid?f.Success:f.Primary},ae=a(W||(W=H(["\n  display: flex;\n  flex-direction: column;\n"]))),ie=a(_||(_=H(["\n  margin-bottom: ","px;\n"])),u[100]),oe=a(A||(A=H(["\n  display: flex;\n  gap: ","px;\n"])),u[100]),le=a(B||(B=H(["\n  padding-top: ","px;\n"])),u[100]),se=a(G||(G=H(["\n  opacity: 0;\n"]))),ce=a(q||(q=H(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),de=function(e){return a(J||(J=H(["\n    height: ","px;\n  "])),e===p.Large?b.large.lineHeight:b.body1.lineHeight)},pe=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],ue=function(n){var t=n.baseFontSize,r=n.disabled,a=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,c=n.id,p=n.size,u=n.state,b=n.successMessage,f=L(n,pe),g=d().theme,h=E(t),y=te({baseFontSize:h,size:p}),v=u===Y.Error,x=(v||u===Y.Valid)&&!r,w=x?{glyph:v?"Warning":"Checkmark",fill:m[g].icon[re(u)].default,title:v?"Error":"Valid"}:void 0;return e.createElement("div",C({id:c,"data-lgid":Q.feedback,"data-testid":Q.feedback,className:i(oe,I(I({},le,x),se,s)),"aria-live":"polite","aria-relevant":"all"},f),x&&e.createElement(e.Fragment,null,w&&e.createElement("div",{className:i(ce,de(p))},e.createElement(o,C({},w,{"aria-hidden":!0}))),v?e.createElement(z,{"data-lgid":Q.errorMessage,"data-testid":Q.errorMessage,className:y},a):e.createElement(k,{"data-lgid":Q.successMessage,"data-testid":Q.successMessage,className:y},b)))};ue.displayName="FormFieldFeedback";var be,fe,me,ge,he,ye,ve,xe,Ee,ze,ke,we,Oe,Ne,Se,je,Me=["label","description","state","id","disabled"],Fe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],Pe=t((function(n,t){var r=n.label,a=n.description,o=n.children,l=n.baseFontSize,s=n.state,d=void 0===s?Y.None:s,u=n.size,b=void 0===u?p.Default:u,f=n.disabled,m=void 0!==f&&f,g=n.errorMessage,h=void 0===g?R:g,y=n.successMessage,v=void 0===y?U:y,x=n.className,z=n.darkMode,k=n.optional,S=n.id,j=L(n,Fe),M=E(l),F=te({baseFontSize:M,size:b}),D=function(e){var n,t=e.label,r=e.description,a=e.state,i=e.id,o=e.disabled,l=L(e,Me),s=N({prefix:Q.label}),c=N({prefix:Q.description}),d=N({prefix:Q.feedback}),p=N({prefix:Q.input}),u=null!=i?i:p,b=a===Y.Error,f=a!==Y.None,m=t?s:l["aria-labelledby"],g=t||m?void 0:l["aria-label"],h="".concat(r?c:""," ").concat(f?d:"").trim(),y=null!==(n=l["aria-invalid"])&&void 0!==n?n:b;return{labelId:s,descriptionId:c,feedbackId:d,inputId:u,inputProps:{id:u,"aria-labelledby":m,"aria-describedby":h,"aria-label":g,"aria-disabled":o,readOnly:l.readOnly?l.readOnly:o,"aria-invalid":y}}}(P({label:r,description:a,state:d,id:S,disabled:m},j)),H=D.labelId,V=D.descriptionId,X=D.feedbackId,T=D.inputId,W=D.inputProps,_={baseFontSize:M,disabled:m,errorMessage:h,id:X,size:b,state:d,successMessage:v};return e.createElement(c,{darkMode:z},e.createElement(ee,{value:{disabled:m,size:b,state:d,inputProps:W,optional:k}},e.createElement("div",C({className:i(F,x),ref:t},j),e.createElement("div",{className:i(ae,I({},ie,!(!r&&!a)))},r&&e.createElement(w,{"data-testid":Q.label,className:F,htmlFor:T,id:H,disabled:m},r),a&&e.createElement(O,{"data-testid":Q.description,className:F,id:V,disabled:m},a)),o,e.createElement(ue,_))))}));Pe.displayName="FormField";var De=S("form-field-input"),Ie=S("form-field-icon"),Ce=function(e){return"0 0 0 100px ".concat(e," inset")},Le=a(be||(be=H(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-size: inherit;\n  line-height: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n  z-index: 0;\n\n  & ."," {\n    font-family: ",";\n    color: inherit;\n    background-color: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    outline: none;\n    border: none;\n  }\n\n  & ."," svg,\n  & svg {\n    min-height: 16px;\n    min-width: 16px;\n  }\n"])),u[1],g.default,h.regular,y.default,De,g.default,Ie),He=function(e){return a(me||(me=H(["\n  @supports selector(:has(a, b)) {\n    &:focus-within:not(:has(.",":focus)) {\n      ",'\n    }\n  }\n\n  /* Fallback for when "has" is unsupported */\n  @supports not selector(:has(a, b)) {\n    &:focus-within {\n      ',"\n    }\n  }\n"])),Ie,e,e)},Ve=I(I({},j.Light,He("\n     {\n      box-shadow: ".concat(v.light.input,";\n      border-color: ").concat(M.white,";\n    }\n  "))),j.Dark,He("\n     {\n      box-shadow: ".concat(v.dark.input,";\n      border-color: ").concat(M.gray.dark4,";\n    }\n  "))),Xe="&:has(button.".concat(Ie,")"),Te=I(I(I(I({},p.XSmall,a(ge||(ge=H(["\n    height: 22px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),u[200],Xe,u[100])),p.Small,a(he||(he=H(["\n    height: 28px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),u[200],Xe,u[100])),p.Default,a(ye||(ye=H(["\n    height: 36px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),u[300],Xe,u[150])),p.Large,a(ve||(ve=H(["\n    height: 48px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),u[300],Xe,u[200]));function We(e){var n=e.disabled,t=e.size,r=e.state,o=e.theme;return i(Le,function(e){var n=e===j.Dark?M.gray.dark4:m.light.background.primary.default;return a(fe||(fe=H(["\n    color: ",";\n    background: ",";\n    border: 1px solid;\n\n    & ."," {\n      &:-webkit-autofill {\n        color: ",";\n        background: ",";\n        border: 1px solid ",";\n        -webkit-text-fill-color: ",";\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n\n      &::placeholder {\n        font-weight: ",";\n        color: ",";\n      }\n    }\n  "])),m[e].text.primary.default,n,De,m[e].text.primary.default,n,m[e].border.primary.default,m[e].text.primary.default,Ce(n),Ce(n),v[e].input,m[e].border.primary.focus,Ce(n),x[e].gray,h.regular,m[e].text.placeholder.default)}(o),Te[t],I(I({},i(function(e){var n=e.theme,t=e.state;return I(I(I({},Y.Error,a(xe||(xe=H(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),m[n].border.error.default,x[n].red)),Y.None,a(Ee||(Ee=H(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),m[n].border.primary.default,x[n].gray)),Y.Valid,a(ze||(ze=H(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),m[n].border.success.default,x[n].green))[t]}({theme:o,state:r}),Ve[o]),!n),function(e){return a(ke||(ke=H(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n\n    &:hover,\n    &:active {\n      &:not(:focus) {\n        box-shadow: inherit;\n      }\n    }\n\n    & ."," {\n      cursor: not-allowed;\n      pointer-events: none;\n      color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: inherit;\n        }\n      }\n    }\n  "])),m[e].text.disabled.default,m[e].background.disabled.default,m[e].border.disabled.default,De,m[e].text.disabled.default,m[e].border.disabled.hover,m[e].text.disabled.hover,Ce(m[e].background.disabled.hover))}(o),n))}var _e,Ae=a(we||(we=H(["\n  width: 100%;\n"]))),Be=a(Oe||(Oe=H(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n"])),u[100]),Ge=function(e){return a(Ne||(Ne=H(["\n    color: ",";\n  "])),m[e].icon.disabled.default)},qe=function(e){return a(Se||(Se=H(["\n    color: ",";\n  "])),m[e].icon.secondary.default)},Je=function(e){return a(je||(je=H(["\n    color: ",";\n\n    font-size: 12px;\n    line-height: 12px;\n    font-style: italic;\n    font-weight: ",";\n    display: flex;\n    align-items: center;\n    > p {\n      margin: 0;\n    }\n  "])),m[e].text.secondary.default,h.regular)},Ke=["contentEnd","className","children"],Qe=t((function(n,t){var r=n.contentEnd,a=n.className,o=n.children,l=L(n,Ke),s=d().theme,c=ne(),u=c.disabled,b=c.size,f=c.state,m=c.inputProps,g=c.optional,h=We({disabled:u,size:null!=b?b:p.Default,state:f,theme:s}),y=e.cloneElement(o,P(P({},m),{},{className:i(De,o.props.className)})),v=f===Y.None&&!u&&g,x=v||r;return e.createElement("div",C({},l,{ref:t,className:i(h,a)}),e.createElement("div",{className:Ae},y),x&&e.createElement("div",{className:Be},v&&e.createElement("div",{"data-lgid":Q.optional,className:Je(s)},e.createElement("p",null,"Optional")),r&&e.cloneElement(r,{className:i(Ie,qe(s),I({},Ge(s),u),r.props.className)})))}));Qe.displayName="FormFieldInputWrapper";var Re=["label","description","state","size","disabled","glyph"],Ue=["label","description","state","size","disabled","glyph"],Ye=["glyph"],Ze={title:"Components/FormField",component:Pe,parameters:{default:"LiveExample",generate:{storyNames:["LargeSize","DefaultSize","SmallSize","XSmallSize"],combineArgs:{darkMode:[!1,!0],optional:[!1,!0],description:[void 0,"Description"],contentEnd:[void 0,e.createElement(o,{glyph:"Cloud",key:""})],state:Object.values(Y),disabled:[!1,!0]},excludeCombinations:[{disabled:!0,state:Y.Error}],args:{children:e.createElement("input",{placeholder:"placeholder"})},decorator:function(n,t){return e.createElement(c,{darkMode:null==t?void 0:t.args.darkMode},e.createElement(n,null,e.createElement(Qe,{contentEnd:null==t?void 0:t.args.contentEnd},null==t?void 0:t.args.children)))}}},args:{label:"Label",description:"Description",errorMessage:"This is a notification",successMessage:"Success",size:p.Default,state:Y.None,glyph:"Beaker"},argTypes:{darkMode:{control:"boolean"},label:{control:"text"},description:{control:"text"},errorMessage:{control:"text"},successMessage:{control:"text"},size:{control:"select",options:Object.values(p)},state:{control:"select",options:Object.values(Y)},glyph:{control:"select",options:Object.keys(l)}}},$e=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,s=n.glyph,c=L(n,Re);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},c),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(o,{glyph:s})},e.createElement("input",{placeholder:"placeholder"})))},en=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,c=n.glyph,d=L(n,Ue);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},d),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:c}))},e.createElement("input",{placeholder:"placeholder"})))},nn=function(n){n.glyph;var t=L(n,Ye);return e.createElement(Pe,t,e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement("span",{className:a(_e||(_e=H(["\n            display: flex;\n            align-items: center;\n            gap: 0;\n          "])))},e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:"XWithCircle"})),e.createElement(o,{glyph:"CaretDown"}))},e.createElement("input",{placeholder:"placeholder"})))},tn=function(n){var t=ne().inputProps;return e.createElement(r,{rightGlyph:e.createElement(o,C({glyph:n.glyph},t))},"Click Me")},rn=function(n){return e.createElement(Pe,n,e.createElement(tn,n))},an=function(){return e.createElement(e.Fragment,null)};an.parameters={generate:{args:{size:p.Large}}};var on=function(){return e.createElement(e.Fragment,null)};on.parameters={generate:{args:{size:p.Default}}};var ln=function(){return e.createElement(e.Fragment,null)};ln.parameters={generate:{args:{size:p.Small}}};var sn=function(){return e.createElement(e.Fragment,null)};sn.parameters={generate:{args:{size:p.XSmall}}};export{rn as Custom_ButtonInput,nn as Custom_TwoIcons,on as DefaultSize,an as LargeSize,$e as LiveExample,ln as SmallSize,en as WithIconButton,sn as XSmallSize,Ze as default};
+import e,{useContext as n,forwardRef as t}from"react";import r from"@leafygreen-ui/button";import{css as a,cx as i}from"@leafygreen-ui/emotion";import o,{glyphs as l}from"@leafygreen-ui/icon";import s from"@leafygreen-ui/icon-button";import c,{useDarkMode as d}from"@leafygreen-ui/leafygreen-provider";import{Size as u,spacing as p,typeScales as b,Variant as f,color as m,fontFamilies as g,fontWeights as h,transitionDuration as y,focusRing as v,hoverRing as x}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as E,Error as z,Body as k,Label as w,Description as O}from"@leafygreen-ui/typography";import{useIdAllocator as N}from"@leafygreen-ui/hooks";import{createUniqueClassName as S,Theme as j}from"@leafygreen-ui/lib";import{palette as M}from"@leafygreen-ui/palette";function F(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function P(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?F(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):F(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,t){return(n=D(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function C(){return C=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},C.apply(this,arguments)}function L(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function H(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var V,X,T,_,W,A,B,G,q,J,K="lg-form_field",Q={root:K,contentEnd:"".concat(K,"-content_end"),description:"".concat(K,"-description"),errorMessage:"".concat(K,"-error_message"),feedback:"".concat(K,"-feedback"),input:"".concat(K,"-input"),label:"".concat(K,"-label"),optional:"".concat(K,"-optional"),successMessage:"".concat(K,"-success_message")},R="This input needs your attention",U="Success",Y={None:"none",Error:"error",Valid:"valid"},Z={disabled:!1,size:u.Default,state:Y.None},$=e.createContext(Z),ee=function(n){var t=n.value,r=n.children;return e.createElement($.Provider,{value:t},r)},ne=function(){return n($)},te=function(e){var n=e.baseFontSize,t=e.size;return t===u.XSmall||t===u.Small?a(V||(V=H(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),b.body1.fontSize,b.body1.lineHeight):t===u.Default?a(X||(X=H(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),n,b.body1.lineHeight):t===u.Large?a(T||(T=H(["\n      font-size: ","px;\n      line-height: ","px;\n    "])),b.large.fontSize,b.large.lineHeight):void 0},re=function(e){return e===Y.Error?f.Error:e===Y.Valid?f.Success:f.Primary},ae=a(_||(_=H(["\n  display: flex;\n  flex-direction: column;\n"]))),ie=a(W||(W=H(["\n  margin-bottom: ","px;\n"])),p[100]),oe=a(A||(A=H(["\n  display: flex;\n  gap: ","px;\n"])),p[100]),le=a(B||(B=H(["\n  padding-top: ","px;\n"])),p[100]),se=a(G||(G=H(["\n  opacity: 0;\n"]))),ce=a(q||(q=H(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),de=function(e){return a(J||(J=H(["\n    height: ","px;\n  "])),e===u.Large?b.large.lineHeight:b.body1.lineHeight)},ue=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],pe=function(n){var t=n.baseFontSize,r=n.disabled,a=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,c=n.id,u=n.size,p=n.state,b=n.successMessage,f=L(n,ue),g=d().theme,h=E(t),y=te({baseFontSize:h,size:u}),v=p===Y.Error,x=(v||p===Y.Valid)&&!r,w=x?{glyph:v?"Warning":"Checkmark",fill:m[g].icon[re(p)].default,title:v?"Error":"Valid"}:void 0;return e.createElement("div",C({id:c,"data-lgid":Q.feedback,"data-testid":Q.feedback,className:i(oe,I(I({},le,x),se,s)),"aria-live":"polite","aria-relevant":"all"},f),x&&e.createElement(e.Fragment,null,w&&e.createElement("div",{className:i(ce,de(u))},e.createElement(o,C({},w,{"aria-hidden":!0}))),v?e.createElement(z,{"data-lgid":Q.errorMessage,"data-testid":Q.errorMessage,className:y},a):e.createElement(k,{"data-lgid":Q.successMessage,"data-testid":Q.successMessage,className:y},b)))};pe.displayName="FormFieldFeedback";var be,fe,me,ge,he,ye,ve,xe,Ee,ze,ke,we,Oe,Ne,Se,je,Me=["label","description","state","id","disabled"],Fe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],Pe=t((function(n,t){var r=n.label,a=n.description,o=n.children,l=n.baseFontSize,s=n.state,d=void 0===s?Y.None:s,p=n.size,b=void 0===p?u.Default:p,f=n.disabled,m=void 0!==f&&f,g=n.errorMessage,h=void 0===g?R:g,y=n.successMessage,v=void 0===y?U:y,x=n.className,z=n.darkMode,k=n.optional,S=n.id,j=L(n,Fe),M=E(l),F=te({baseFontSize:M,size:b}),D=function(e){var n,t=e.label,r=e.description,a=e.state,i=e.id,o=e.disabled,l=L(e,Me),s=N({prefix:Q.label}),c=N({prefix:Q.description}),d=N({prefix:Q.feedback}),u=N({prefix:Q.input}),p=null!=i?i:u,b=a===Y.Error,f=a!==Y.None,m=t?s:l["aria-labelledby"],g=t||m?void 0:l["aria-label"],h="".concat(r?c:""," ").concat(f?d:"").trim(),y=null!==(n=l["aria-invalid"])&&void 0!==n?n:b;return{labelId:s,descriptionId:c,feedbackId:d,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":h,"aria-label":g,"aria-disabled":o,readOnly:l.readOnly?l.readOnly:o,"aria-invalid":y}}}(P({label:r,description:a,state:d,id:S,disabled:m},j)),H=D.labelId,V=D.descriptionId,X=D.feedbackId,T=D.inputId,_=D.inputProps,W={baseFontSize:M,disabled:m,errorMessage:h,id:X,size:b,state:d,successMessage:v};return e.createElement(c,{darkMode:z},e.createElement(ee,{value:{disabled:m,size:b,state:d,inputProps:_,optional:k}},e.createElement("div",C({className:i(F,x),ref:t},j),e.createElement("div",{className:i(ae,I({},ie,!(!r&&!a)))},r&&e.createElement(w,{"data-testid":Q.label,className:F,htmlFor:T,id:H,disabled:m},r),a&&e.createElement(O,{"data-testid":Q.description,className:F,id:V,disabled:m},a)),o,e.createElement(pe,W))))}));Pe.displayName="FormField";var De,Ie=S("form-field-input"),Ce=S("form-field-icon"),Le=function(e){return"0 0 0 100px ".concat(e," inset")},He=a(be||(be=H(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  font-size: inherit;\n  line-height: inherit;\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n  z-index: 0;\n\n  & ."," {\n    font-family: ",";\n    color: inherit;\n    background-color: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    outline: none;\n    border: none;\n  }\n\n  & ."," svg,\n  & svg {\n    min-height: 16px;\n    min-width: 16px;\n  }\n"])),p[1],g.default,h.regular,y.default,Ie,g.default,Ce),Ve=function(e){return a(me||(me=H(["\n  @supports selector(:has(a, b)) {\n    &:focus-within:not(:has(.",":focus)) {\n      ",'\n    }\n  }\n\n  /* Fallback for when "has" is unsupported */\n  @supports not selector(:has(a, b)) {\n    &:focus-within {\n      ',"\n    }\n  }\n"])),Ce,e,e)},Xe=I(I({},j.Light,Ve("\n     {\n      box-shadow: ".concat(v.light.input,";\n      border-color: ").concat(M.white,";\n    }\n  "))),j.Dark,Ve("\n     {\n      box-shadow: ".concat(v.dark.input,";\n      border-color: ").concat(M.gray.dark4,";\n    }\n  "))),Te="&:has(button.".concat(Ce,")"),_e=I(I(I(I({},u.XSmall,a(ge||(ge=H(["\n    height: 22px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),p[200],Te,p[100])),u.Small,a(he||(he=H(["\n    height: 28px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),p[200],Te,p[100])),u.Default,a(ye||(ye=H(["\n    height: 36px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),p[300],Te,p[150])),u.Large,a(ve||(ve=H(["\n    height: 48px;\n    padding-inline: ","px;\n\n    "," {\n      padding-inline-end: ","px;\n    }\n  "])),p[300],Te,p[200])),We=function(e){var n=e.disabled,t=e.size,r=e.state,o=e.theme,l=e.className;return i(He,function(e){var n=e===j.Dark?M.gray.dark4:m.light.background.primary.default;return a(fe||(fe=H(["\n    color: ",";\n    background: ",";\n    border: 1px solid;\n\n    & ."," {\n      &:-webkit-autofill {\n        color: ",";\n        background: ",";\n        border: 1px solid ",";\n        -webkit-text-fill-color: ",";\n        box-shadow: ",";\n\n        &:focus {\n          box-shadow: ",",\n            ",";\n          border-color: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: ",",\n            ",";\n        }\n      }\n\n      &::placeholder {\n        font-weight: ",";\n        color: ",";\n      }\n    }\n  "])),m[e].text.primary.default,n,Ie,m[e].text.primary.default,n,m[e].border.primary.default,m[e].text.primary.default,Le(n),Le(n),v[e].input,m[e].border.primary.focus,Le(n),x[e].gray,h.regular,m[e].text.placeholder.default)}(o),_e[t],I(I({},i(function(e){var n=e.theme,t=e.state;return I(I(I({},Y.Error,a(xe||(xe=H(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),m[n].border.error.default,x[n].red)),Y.None,a(Ee||(Ee=H(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),m[n].border.primary.default,x[n].gray)),Y.Valid,a(ze||(ze=H(["\n      border-color: ",";\n\n      &:hover,\n      &:active {\n        &:not(:focus) {\n          box-shadow: ",";\n        }\n      }\n    "])),m[n].border.success.default,x[n].green))[t]}({theme:o,state:r}),Xe[o]),!n),function(e){return a(ke||(ke=H(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n\n    &:hover,\n    &:active {\n      &:not(:focus) {\n        box-shadow: inherit;\n      }\n    }\n\n    & ."," {\n      cursor: not-allowed;\n      pointer-events: none;\n      color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n\n        &:hover:not(:focus) {\n          box-shadow: inherit;\n        }\n      }\n    }\n  "])),m[e].text.disabled.default,m[e].background.disabled.default,m[e].border.disabled.default,Ie,m[e].text.disabled.default,m[e].border.disabled.hover,m[e].text.disabled.hover,Le(m[e].background.disabled.hover))}(o),n),l)},Ae=a(we||(we=H(["\n  width: 100%;\n"]))),Be=function(e){return i(Ie,e)},Ge=a(Oe||(Oe=H(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n"])),p[100]),qe=function(e){return a(Ne||(Ne=H(["\n    color: ",";\n\n    font-size: 12px;\n    line-height: 12px;\n    font-style: italic;\n    font-weight: ",";\n    display: flex;\n    align-items: center;\n    > p {\n      margin: 0;\n    }\n  "])),m[e].text.secondary.default,h.regular)},Je=function(e,n,t){return i(Ce,function(e){return a(Se||(Se=H(["\n    color: ",";\n  "])),m[e].icon.secondary.default)}(e),I({},function(e){return a(je||(je=H(["\n    color: ",";\n\n    &:active,\n    &:hover {\n      color: ",";\n    }\n\n    &:focus {\n      color: ",";\n    }\n  "])),m[e].icon.disabled.default,m[e].icon.disabled.hover,m[e].icon.disabled.focus)}(e),n),t)},Ke=["contentEnd","className","children"],Qe=t((function(n,t){var r=n.contentEnd,a=n.className,i=n.children,o=L(n,Ke),l=d().theme,s=ne(),c=s.disabled,p=s.size,b=s.state,f=s.inputProps,m=s.optional,g=e.cloneElement(i,P(P({},f),{},{className:Be(i.props.className)})),h=b===Y.None&&!c&&m,y=h||r;return e.createElement("div",C({},o,{ref:t,className:We({disabled:c,size:null!=p?p:u.Default,state:b,theme:l,className:a})}),e.createElement("div",{className:Ae},g),y&&e.createElement("div",{className:Ge},h&&e.createElement("div",{"data-lgid":Q.optional,"data-testid":Q.optional,className:qe(l)},e.createElement("p",null,"Optional")),r&&e.cloneElement(r,I(I({className:Je(l,c,r.props.className),disabled:c},"data-lgid",Q.contentEnd),"data-testid",Q.contentEnd))))}));Qe.displayName="FormFieldInputWrapper";var Re=["label","description","state","size","disabled","glyph"],Ue=["label","description","state","size","disabled","glyph"],Ye=["glyph"],Ze={title:"Components/FormField",component:Pe,parameters:{default:"LiveExample",generate:{storyNames:["LargeSize","DefaultSize","SmallSize","XSmallSize"],combineArgs:{darkMode:[!1,!0],optional:[!1,!0],description:[void 0,"Description"],contentEnd:[void 0,e.createElement(o,{glyph:"Cloud",key:""})],state:Object.values(Y),disabled:[!1,!0]},excludeCombinations:[{disabled:!0,state:Y.Error}],args:{children:e.createElement("input",{placeholder:"placeholder"})},decorator:function(n,t){return e.createElement(c,{darkMode:null==t?void 0:t.args.darkMode},e.createElement(n,null,e.createElement(Qe,{contentEnd:null==t?void 0:t.args.contentEnd},null==t?void 0:t.args.children)))}}},args:{label:"Label",description:"Description",errorMessage:"This is a notification",successMessage:"Success",size:u.Default,state:Y.None,glyph:"Beaker"},argTypes:{darkMode:{control:"boolean"},label:{control:"text"},description:{control:"text"},errorMessage:{control:"text"},successMessage:{control:"text"},size:{control:"select",options:Object.values(u)},state:{control:"select",options:Object.values(Y)},glyph:{control:"select",options:Object.keys(l)}}},$e=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,s=n.glyph,c=L(n,Re);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},c),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(o,{glyph:s})},e.createElement("input",{placeholder:"placeholder"})))},en=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,c=n.glyph,d=L(n,Ue);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},d),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:c}))},e.createElement("input",{placeholder:"placeholder"})))},nn=function(n){n.glyph;var t=L(n,Ye);return e.createElement(Pe,t,e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement("span",{className:a(De||(De=H(["\n            display: flex;\n            align-items: center;\n            gap: 0;\n          "])))},e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:"XWithCircle"})),e.createElement(o,{glyph:"CaretDown"}))},e.createElement("input",{placeholder:"placeholder"})))},tn=function(n){var t=ne().inputProps;return e.createElement(r,{rightGlyph:e.createElement(o,C({glyph:n.glyph},t))},"Click Me")},rn=function(n){return e.createElement(Pe,n,e.createElement(tn,n))},an=function(){return e.createElement(e.Fragment,null)};an.parameters={generate:{args:{size:u.Large}}};var on=function(){return e.createElement(e.Fragment,null)};on.parameters={generate:{args:{size:u.Default}}};var ln=function(){return e.createElement(e.Fragment,null)};ln.parameters={generate:{args:{size:u.Small}}};var sn=function(){return e.createElement(e.Fragment,null)};sn.parameters={generate:{args:{size:u.XSmall}}};export{rn as Custom_ButtonInput,nn as Custom_TwoIcons,on as DefaultSize,an as LargeSize,$e as LiveExample,ln as SmallSize,en as WithIconButton,sn as XSmallSize,Ze as default};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

224025

increased by2.07%

Lines of code

2915

increased by2.79%

No dependency changes