Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@leafygreen-ui/form-field

Package Overview
Dependencies
Maintainers
6
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.3.0 to 0.3.1

11

CHANGELOG.md
# @leafygreen-ui/form-field
## 0.3.1
### Patch Changes
- 54eb3ce8: Replaces with updated tokens
- Updated dependencies [2bceccb1]
- Updated dependencies [2645cd50]
- @leafygreen-ui/hooks@8.1.1
- @leafygreen-ui/lib@13.2.1
- @leafygreen-ui/tokens@2.3.0
## 0.3.0

@@ -4,0 +15,0 @@

2

dist/esm/index.js

@@ -1,2 +0,2 @@

import n,{useContext as e,forwardRef as r}from"react";import{css as t,cx as a}from"@leafygreen-ui/emotion";import o,{useDarkMode as i}from"@leafygreen-ui/leafygreen-provider";import{Size as l,spacing as d,typeScales as s,fontFamilies as c,fontWeights as b,transitionDuration as p,hoverRing as g,focusRing as u}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as f,Label as h,Description as m,Error as y}from"@leafygreen-ui/typography";import{useIdAllocator as x}from"@leafygreen-ui/hooks";import v from"@leafygreen-ui/icon";import{createUniqueClassName as k,Theme as w}from"@leafygreen-ui/lib";import{palette as O}from"@leafygreen-ui/palette";function E(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,t)}return r}function z(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?E(Object(r),!0).forEach((function(e){N(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function N(n,e,r){return(e=function(n){var e=function(n,e){if("object"!=typeof n||null===n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var t=r.call(n,e||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}(n,"string");return"symbol"==typeof e?e:String(e)}(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function j(){return j=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},j.apply(this,arguments)}function P(n,e){if(null==n)return{};var r,t,a=function(n,e){if(null==n)return{};var r,t,a={},o=Object.keys(n);for(t=0;t<o.length;t++)r=o[t],e.indexOf(r)>=0||(a[r]=n[r]);return a}(n,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);for(t=0;t<o.length;t++)r=o[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(a[r]=n[r])}return a}function S(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var D,F,L,I,M,V,_,X,C,H,W,T,q,A,B,G,J,K,Q,R,U,Y,Z,$,nn,en,rn,tn,an,on,ln,dn,sn,cn,bn,pn,gn,un,fn,hn,mn,yn,xn,vn,kn={None:"none",Error:"error",Valid:"valid"},wn={disabled:!1,size:l.Default,state:kn.None},On=n.createContext(wn),En=function(e){var r=e.value,t=e.children;return n.createElement(On.Provider,{value:r},t)},zn=function(){return e(On)},Nn=function(n){var e=n.baseFontSize,r=n.size;return r===l.XSmall||r===l.Small?t(D||(D=S(["\n font-size: ","px;\n line-height: ","px;\n "])),s.body1.fontSize,s.body1.lineHeight):r===l.Default?t(F||(F=S(["\n font-size: ","px;\n line-height: ","px;\n "])),e,s.body1.lineHeight):r===l.Large?t(L||(L=S(["\n font-size: 18px;\n line-height: 24px;\n "]))):void 0},jn=t(I||(I=S(["\n display: flex;\n flex-direction: column;\n margin-bottom: ","px;\n"])),d[1]),Pn=t(M||(M=S(["\n margin-top: ","px;\n"])),d[1]),Sn=["label","description","state","id"],Dn=["label","description","children","baseFontSize","state","size","disabled","errorMessage","className","darkMode","optional","id"],Fn=r((function(e,r){var t=e.label,i=e.description,d=e.children,s=e.baseFontSize,c=e.state,b=void 0===c?kn.None:c,p=e.size,g=void 0===p?l.Default:p,u=e.disabled,v=void 0!==u&&u,k=e.errorMessage,w=e.className,O=e.darkMode,E=e.optional,N=e.id,S=P(e,Dn),D=f(s),F=function(n){var e=n.label,r=n.description,t=n.state,a=n.id,o=P(n,Sn),i=x({prefix:"lg-form-field-label"}),l=x({prefix:"lg-form-field-description"}),d=x({prefix:"lg-form-field-description"}),s=x({prefix:"lg-form-field-input"}),c=null!=a?a:s,b=e?i:o["aria-labelledby"],p=e?"":o["aria-label"];return{labelId:i,descriptionId:l,errorId:d,inputId:c,inputProps:{id:c,"aria-labelledby":b,"aria-describedby":"".concat(r?l:""," ").concat(t===kn.Error?d:"").trim(),"aria-label":p}}}(z({label:t,description:i,state:b,id:N},S)),L=F.labelId,I=F.descriptionId,M=F.errorId,V=F.inputId,_=F.inputProps;return n.createElement(o,{darkMode:O},n.createElement(En,{value:{disabled:v,size:g,state:b,inputProps:_,optional:E}},n.createElement("div",j({className:a(Nn({baseFontSize:D,size:g}),w),ref:r},S),n.createElement("div",{className:jn},t&&n.createElement(h,{"data-testid":"lg-form_field-label",className:Nn({baseFontSize:D,size:g}),htmlFor:V,id:L,disabled:v},t),i&&n.createElement(m,{"data-testid":"lg-form_field-description",className:Nn({baseFontSize:D,size:g}),id:I,disabled:v},i)),d,n.createElement("div",{className:Pn},b===kn.Error&&!v&&n.createElement(y,{"data-testid":"lg-form_field-error_message",className:Nn({baseFontSize:D,size:g}),id:M},k)))))}));Fn.displayName="FormField";var Ln=k("form-field-input"),In=k("form-field-icon"),Mn=function(n){return"0 0 0 100px ".concat(n," inset")},Vn=t(V||(V=S(["\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"])),d[1],c.default,b.regular,p.default,Ln,c.default,In),_n=(N(C={},w.Light,t(_||(_=S(["\n color: ",";\n background: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),O.black,O.white,O.gray.base,g.light.gray,Ln,O.black,O.white,O.gray.base,O.black,Mn(O.white),Mn(O.white),u.light.input,O.white,Mn(O.white),g.light.gray,O.gray.light1,b.regular)),N(C,w.Dark,t(X||(X=S(["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n border: 1px solid ",";\n color: ",";\n background: ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),O.gray.light3,O.gray.dark4,O.gray.base,g.dark.gray,Ln,O.gray.base,O.gray.light3,O.gray.dark4,O.gray.light3,Mn(O.gray.dark4),Mn(O.gray.dark4),u.dark.input,O.blue.light1,Mn(O.gray.dark4),g.dark.gray,O.gray.dark1,b.regular)),C),Xn=function(n){return t(H||(H=S(["\n @supports selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within:not(\n :has(.",":focus)\n ) {\n ","\n }\n }\n\n /* Fallback for when \"has\" is unsupported */\n @supports not selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within {\n ","\n }\n }\n"])),In,n,n)},Cn=(N(W={},w.Light,Xn("\n {\n box-shadow: ".concat(u.light.input,";\n border-color: ").concat(O.white,";\n }\n "))),N(W,w.Dark,Xn("\n {\n box-shadow: ".concat(u.dark.input,";\n border-color: ").concat(O.gray.dark4,";\n }\n "))),W),Hn="&:has(button.".concat(In,")"),Wn=(N(G={},l.XSmall,t(T||(T=S(["\n height: 22px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Hn)),N(G,l.Small,t(q||(q=S(["\n height: 28px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Hn)),N(G,l.Default,t(A||(A=S(["\n height: 36px;\n padding-inline: 12px;\n\n "," {\n padding-inline-end: 6px;\n }\n "])),Hn)),N(G,l.Large,t(B||(B=S(["\n height: 48px;\n padding-inline: 16px;\n\n "," {\n padding-inline-end: 10px;\n }\n "])),Hn)),G),Tn=(N(en={},kn.Error,(N(Q={},w.Light,t(J||(J=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.red.base,g.light.red)),N(Q,w.Dark,t(K||(K=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.red.light1,g.dark.red)),Q)),N(en,kn.None,(N(Y={},w.Light,t(R||(R=S([""])))),N(Y,w.Dark,t(U||(U=S([""])))),Y)),N(en,kn.Valid,(N(nn={},w.Light,t(Z||(Z=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.green.dark1,g.light.green)),N(nn,w.Dark,t($||($=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.green.dark1,g.dark.green)),nn)),en),qn=(N(an={},w.Light,t(rn||(rn=S(["\n cursor: not-allowed;\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),O.gray.light2,O.gray.light1,O.gray.base,O.gray.base,O.gray.base,Mn(O.gray.light2))),N(an,w.Dark,t(tn||(tn=S(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),O.gray.dark2,O.gray.dark3,O.gray.dark2,O.gray.dark2,O.gray.dark1,O.gray.dark1,Mn(O.gray.dark2))),an),An=t(on||(on=S(["\n width: 100%;\n"]))),Bn=function(n){return t(ln||(ln=S(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),n===l.XSmall?d[1]:d[2])},Gn=(N(cn={},w.Light,t(dn||(dn=S(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),O.gray.base,O.gray.light1)),N(cn,w.Dark,t(sn||(sn=S(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),O.gray.base,O.gray.dark2)),cn),Jn=(N(gn={},w.Light,t(bn||(bn=S(["\n color: ",";\n "])),O.green.dark1)),N(gn,w.Dark,t(pn||(pn=S(["\n color: ",";\n "])),O.green.base)),gn),Kn=(N(hn={},w.Light,t(un||(un=S(["\n color: ",";\n "])),O.red.base)),N(hn,w.Dark,t(fn||(fn=S(["\n color: ",";\n "])),O.red.light1)),hn),Qn=t(mn||(mn=S(["\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"])),b.regular),Rn=(N(vn={},w.Light,t(yn||(yn=S(["\n color: ",";\n "])),O.gray.dark1)),N(vn,w.Dark,t(xn||(xn=S(["\n color: ",";\n "])),O.gray.base)),vn),Un=["contentEnd","className","children"],Yn=r((function(e,r){var t=e.contentEnd,o=e.className,d=e.children,s=P(e,Un),c=i().theme,b=zn(),p=b.disabled,g=b.size,u=b.state,f=b.inputProps,h=b.optional,m=n.cloneElement(d,z(z({},f),{},{className:a(Ln,d.props.className)})),y=u===kn.None&&!p&&h;return n.createElement("div",j({},s,{ref:r,"aria-disabled":p,className:a(Vn,_n[c],Wn[null!=g?g:l.Default],Tn[u][c],Cn[c],N({},qn[c],p),o)}),n.createElement("div",{className:An},m),n.createElement("div",{className:Bn(g)},u===kn.Valid&&!p&&n.createElement(v,{role:"presentation",title:"Valid",glyph:"Checkmark",className:Jn[c]}),u===kn.Error&&!p&&n.createElement(v,{role:"presentation",title:"Error",glyph:"Warning",className:Kn[c]}),y&&n.createElement("div",{className:a(Qn,Rn[c])},n.createElement("p",null,"Optional")),t&&n.cloneElement(t,{className:a(In,Gn[c],t.props.className),disabled:p})))}));Yn.displayName="FormFieldInputWrapper";export{Fn as FormField,On as FormFieldContext,Yn as FormFieldInputContainer,En as FormFieldProvider,kn as FormFieldState,wn as defaultFormFieldContext,zn as useFormFieldContext};
import n,{useContext as e,forwardRef as r}from"react";import{css as t,cx as a}from"@leafygreen-ui/emotion";import o,{useDarkMode as i}from"@leafygreen-ui/leafygreen-provider";import{Size as l,spacing as d,typeScales as s,fontFamilies as c,fontWeights as b,transitionDuration as p,hoverRing as g,focusRing as u}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as f,Label as h,Description as m,Error as y}from"@leafygreen-ui/typography";import{useIdAllocator as x}from"@leafygreen-ui/hooks";import v from"@leafygreen-ui/icon";import{createUniqueClassName as k,Theme as w}from"@leafygreen-ui/lib";import{palette as O}from"@leafygreen-ui/palette";function E(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,t)}return r}function z(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?E(Object(r),!0).forEach((function(e){N(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function N(n,e,r){return(e=function(n){var e=function(n,e){if("object"!=typeof n||null===n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var t=r.call(n,e||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}(n,"string");return"symbol"==typeof e?e:String(e)}(e))in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function j(){return j=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},j.apply(this,arguments)}function P(n,e){if(null==n)return{};var r,t,a=function(n,e){if(null==n)return{};var r,t,a={},o=Object.keys(n);for(t=0;t<o.length;t++)r=o[t],e.indexOf(r)>=0||(a[r]=n[r]);return a}(n,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);for(t=0;t<o.length;t++)r=o[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(a[r]=n[r])}return a}function S(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var D,F,L,I,M,V,_,X,C,H,W,T,q,A,B,G,J,K,Q,R,U,Y,Z,$,nn,en,rn,tn,an,on,ln,dn,sn,cn,bn,pn,gn,un,fn,hn,mn,yn,xn,vn,kn={None:"none",Error:"error",Valid:"valid"},wn={disabled:!1,size:l.Default,state:kn.None},On=n.createContext(wn),En=function(e){var r=e.value,t=e.children;return n.createElement(On.Provider,{value:r},t)},zn=function(){return e(On)},Nn=function(n){var e=n.baseFontSize,r=n.size;return r===l.XSmall||r===l.Small?t(D||(D=S(["\n font-size: ","px;\n line-height: ","px;\n "])),s.body1.fontSize,s.body1.lineHeight):r===l.Default?t(F||(F=S(["\n font-size: ","px;\n line-height: ","px;\n "])),e,s.body1.lineHeight):r===l.Large?t(L||(L=S(["\n font-size: 18px;\n line-height: 24px;\n "]))):void 0},jn=t(I||(I=S(["\n display: flex;\n flex-direction: column;\n margin-bottom: ","px;\n"])),d[100]),Pn=t(M||(M=S(["\n margin-top: ","px;\n"])),d[100]),Sn=["label","description","state","id"],Dn=["label","description","children","baseFontSize","state","size","disabled","errorMessage","className","darkMode","optional","id"],Fn=r((function(e,r){var t=e.label,i=e.description,d=e.children,s=e.baseFontSize,c=e.state,b=void 0===c?kn.None:c,p=e.size,g=void 0===p?l.Default:p,u=e.disabled,v=void 0!==u&&u,k=e.errorMessage,w=e.className,O=e.darkMode,E=e.optional,N=e.id,S=P(e,Dn),D=f(s),F=function(n){var e=n.label,r=n.description,t=n.state,a=n.id,o=P(n,Sn),i=x({prefix:"lg-form-field-label"}),l=x({prefix:"lg-form-field-description"}),d=x({prefix:"lg-form-field-description"}),s=x({prefix:"lg-form-field-input"}),c=null!=a?a:s,b=e?i:o["aria-labelledby"],p=e?"":o["aria-label"];return{labelId:i,descriptionId:l,errorId:d,inputId:c,inputProps:{id:c,"aria-labelledby":b,"aria-describedby":"".concat(r?l:""," ").concat(t===kn.Error?d:"").trim(),"aria-label":p}}}(z({label:t,description:i,state:b,id:N},S)),L=F.labelId,I=F.descriptionId,M=F.errorId,V=F.inputId,_=F.inputProps;return n.createElement(o,{darkMode:O},n.createElement(En,{value:{disabled:v,size:g,state:b,inputProps:_,optional:E}},n.createElement("div",j({className:a(Nn({baseFontSize:D,size:g}),w),ref:r},S),n.createElement("div",{className:jn},t&&n.createElement(h,{"data-testid":"lg-form_field-label",className:Nn({baseFontSize:D,size:g}),htmlFor:V,id:L,disabled:v},t),i&&n.createElement(m,{"data-testid":"lg-form_field-description",className:Nn({baseFontSize:D,size:g}),id:I,disabled:v},i)),d,n.createElement("div",{className:Pn},b===kn.Error&&!v&&n.createElement(y,{"data-testid":"lg-form_field-error_message",className:Nn({baseFontSize:D,size:g}),id:M},k)))))}));Fn.displayName="FormField";var Ln=k("form-field-input"),In=k("form-field-icon"),Mn=function(n){return"0 0 0 100px ".concat(n," inset")},Vn=t(V||(V=S(["\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"])),d[1],c.default,b.regular,p.default,Ln,c.default,In),_n=(N(C={},w.Light,t(_||(_=S(["\n color: ",";\n background: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),O.black,O.white,O.gray.base,g.light.gray,Ln,O.black,O.white,O.gray.base,O.black,Mn(O.white),Mn(O.white),u.light.input,O.white,Mn(O.white),g.light.gray,O.gray.light1,b.regular)),N(C,w.Dark,t(X||(X=S(["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n border: 1px solid ",";\n color: ",";\n background: ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),O.gray.light3,O.gray.dark4,O.gray.base,g.dark.gray,Ln,O.gray.base,O.gray.light3,O.gray.dark4,O.gray.light3,Mn(O.gray.dark4),Mn(O.gray.dark4),u.dark.input,O.blue.light1,Mn(O.gray.dark4),g.dark.gray,O.gray.dark1,b.regular)),C),Xn=function(n){return t(H||(H=S(["\n @supports selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within:not(\n :has(.",":focus)\n ) {\n ","\n }\n }\n\n /* Fallback for when \"has\" is unsupported */\n @supports not selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within {\n ","\n }\n }\n"])),In,n,n)},Cn=(N(W={},w.Light,Xn("\n {\n box-shadow: ".concat(u.light.input,";\n border-color: ").concat(O.white,";\n }\n "))),N(W,w.Dark,Xn("\n {\n box-shadow: ".concat(u.dark.input,";\n border-color: ").concat(O.gray.dark4,";\n }\n "))),W),Hn="&:has(button.".concat(In,")"),Wn=(N(G={},l.XSmall,t(T||(T=S(["\n height: 22px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Hn)),N(G,l.Small,t(q||(q=S(["\n height: 28px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Hn)),N(G,l.Default,t(A||(A=S(["\n height: 36px;\n padding-inline: 12px;\n\n "," {\n padding-inline-end: 6px;\n }\n "])),Hn)),N(G,l.Large,t(B||(B=S(["\n height: 48px;\n padding-inline: 16px;\n\n "," {\n padding-inline-end: 10px;\n }\n "])),Hn)),G),Tn=(N(en={},kn.Error,(N(Q={},w.Light,t(J||(J=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.red.base,g.light.red)),N(Q,w.Dark,t(K||(K=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.red.light1,g.dark.red)),Q)),N(en,kn.None,(N(Y={},w.Light,t(R||(R=S([""])))),N(Y,w.Dark,t(U||(U=S([""])))),Y)),N(en,kn.Valid,(N(nn={},w.Light,t(Z||(Z=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.green.dark1,g.light.green)),N(nn,w.Dark,t($||($=S(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),O.green.dark1,g.dark.green)),nn)),en),qn=(N(an={},w.Light,t(rn||(rn=S(["\n cursor: not-allowed;\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),O.gray.light2,O.gray.light1,O.gray.base,O.gray.base,O.gray.base,Mn(O.gray.light2))),N(an,w.Dark,t(tn||(tn=S(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),O.gray.dark2,O.gray.dark3,O.gray.dark2,O.gray.dark2,O.gray.dark1,O.gray.dark1,Mn(O.gray.dark2))),an),An=t(on||(on=S(["\n width: 100%;\n"]))),Bn=function(n){return t(ln||(ln=S(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),n===l.XSmall?d[1]:d[2])},Gn=(N(cn={},w.Light,t(dn||(dn=S(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),O.gray.base,O.gray.light1)),N(cn,w.Dark,t(sn||(sn=S(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),O.gray.base,O.gray.dark2)),cn),Jn=(N(gn={},w.Light,t(bn||(bn=S(["\n color: ",";\n "])),O.green.dark1)),N(gn,w.Dark,t(pn||(pn=S(["\n color: ",";\n "])),O.green.base)),gn),Kn=(N(hn={},w.Light,t(un||(un=S(["\n color: ",";\n "])),O.red.base)),N(hn,w.Dark,t(fn||(fn=S(["\n color: ",";\n "])),O.red.light1)),hn),Qn=t(mn||(mn=S(["\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"])),b.regular),Rn=(N(vn={},w.Light,t(yn||(yn=S(["\n color: ",";\n "])),O.gray.dark1)),N(vn,w.Dark,t(xn||(xn=S(["\n color: ",";\n "])),O.gray.base)),vn),Un=["contentEnd","className","children"],Yn=r((function(e,r){var t=e.contentEnd,o=e.className,d=e.children,s=P(e,Un),c=i().theme,b=zn(),p=b.disabled,g=b.size,u=b.state,f=b.inputProps,h=b.optional,m=n.cloneElement(d,z(z({},f),{},{className:a(Ln,d.props.className)})),y=u===kn.None&&!p&&h;return n.createElement("div",j({},s,{ref:r,"aria-disabled":p,className:a(Vn,_n[c],Wn[null!=g?g:l.Default],Tn[u][c],Cn[c],N({},qn[c],p),o)}),n.createElement("div",{className:An},m),n.createElement("div",{className:Bn(g)},u===kn.Valid&&!p&&n.createElement(v,{role:"presentation",title:"Valid",glyph:"Checkmark",className:Jn[c]}),u===kn.Error&&!p&&n.createElement(v,{role:"presentation",title:"Error",glyph:"Warning",className:Kn[c]}),y&&n.createElement("div",{className:a(Qn,Rn[c])},n.createElement("p",null,"Optional")),t&&n.cloneElement(t,{className:a(In,Gn[c],t.props.className),disabled:p})))}));Yn.displayName="FormFieldInputWrapper";export{Fn as FormField,On as FormFieldContext,Yn as FormFieldInputContainer,En as FormFieldProvider,kn as FormFieldState,wn as defaultFormFieldContext,zn as useFormFieldContext};
//# sourceMappingURL=index.js.map

2

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/hooks"),require("@leafygreen-ui/icon"),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/hooks","@leafygreen-ui/icon","@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/hooks"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,n,t,r,a,i,o,l,s,d){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(n),u=c(r),f=c(l);function g(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 b(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?g(Object(t),!0).forEach((function(n){h(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function h(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function y(){return y=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},y.apply(this,arguments)}function m(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 x(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var v,k,w,z,S,O,E,F,N,j,T,D,P,I,R,L,q,C,M,W,A,V,_,U,X,H,B,G,J,K,Q,Y,Z,$,ee,ne,te,re,ae,ie,oe,le,se,de,ce={None:"none",Error:"error",Valid:"valid"},pe={disabled:!1,size:a.Size.Default,state:ce.None},ue=p.default.createContext(pe),fe=function(e){var n=e.value,t=e.children;return p.default.createElement(ue.Provider,{value:n},t)},ge=function(){return n.useContext(ue)},be=function(e){var n=e.baseFontSize,r=e.size;return r===a.Size.XSmall||r===a.Size.Small?t.css(v||(v=x(["\n font-size: ","px;\n line-height: ","px;\n "])),a.typeScales.body1.fontSize,a.typeScales.body1.lineHeight):r===a.Size.Default?t.css(k||(k=x(["\n font-size: ","px;\n line-height: ","px;\n "])),n,a.typeScales.body1.lineHeight):r===a.Size.Large?t.css(w||(w=x(["\n font-size: 18px;\n line-height: 24px;\n "]))):void 0},he=t.css(z||(z=x(["\n display: flex;\n flex-direction: column;\n margin-bottom: ","px;\n"])),a.spacing[1]),ye=t.css(S||(S=x(["\n margin-top: ","px;\n"])),a.spacing[1]),me=["label","description","state","id"],xe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","className","darkMode","optional","id"],ve=n.forwardRef((function(e,n){var r=e.label,l=e.description,s=e.children,d=e.baseFontSize,c=e.state,f=void 0===c?ce.None:c,g=e.size,h=void 0===g?a.Size.Default:g,x=e.disabled,v=void 0!==x&&x,k=e.errorMessage,w=e.className,z=e.darkMode,S=e.optional,O=e.id,E=m(e,xe),F=i.useUpdatedBaseFontSize(d),N=function(e){var n=e.label,t=e.description,r=e.state,a=e.id,i=m(e,me),l=o.useIdAllocator({prefix:"lg-form-field-label"}),s=o.useIdAllocator({prefix:"lg-form-field-description"}),d=o.useIdAllocator({prefix:"lg-form-field-description"}),c=o.useIdAllocator({prefix:"lg-form-field-input"}),p=null!=a?a:c,u=n?l:i["aria-labelledby"],f=n?"":i["aria-label"];return{labelId:l,descriptionId:s,errorId:d,inputId:p,inputProps:{id:p,"aria-labelledby":u,"aria-describedby":"".concat(t?s:""," ").concat(r===ce.Error?d:"").trim(),"aria-label":f}}}(b({label:r,description:l,state:f,id:O},E)),j=N.labelId,T=N.descriptionId,D=N.errorId,P=N.inputId,I=N.inputProps;return p.default.createElement(u.default,{darkMode:z},p.default.createElement(fe,{value:{disabled:v,size:h,state:f,inputProps:I,optional:S}},p.default.createElement("div",y({className:t.cx(be({baseFontSize:F,size:h}),w),ref:n},E),p.default.createElement("div",{className:he},r&&p.default.createElement(i.Label,{"data-testid":"lg-form_field-label",className:be({baseFontSize:F,size:h}),htmlFor:P,id:j,disabled:v},r),l&&p.default.createElement(i.Description,{"data-testid":"lg-form_field-description",className:be({baseFontSize:F,size:h}),id:T,disabled:v},l)),s,p.default.createElement("div",{className:ye},f===ce.Error&&!v&&p.default.createElement(i.Error,{"data-testid":"lg-form_field-error_message",className:be({baseFontSize:F,size:h}),id:D},k)))))}));ve.displayName="FormField";var ke=s.createUniqueClassName("form-field-input"),we=s.createUniqueClassName("form-field-icon"),ze=function(e){return"0 0 0 100px ".concat(e," inset")},Se=t.css(O||(O=x(["\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,ke,a.fontFamilies.default,we),Oe=(h(N={},s.Theme.Light,t.css(E||(E=x(["\n color: ",";\n background: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),d.palette.black,d.palette.white,d.palette.gray.base,a.hoverRing.light.gray,ke,d.palette.black,d.palette.white,d.palette.gray.base,d.palette.black,ze(d.palette.white),ze(d.palette.white),a.focusRing.light.input,d.palette.white,ze(d.palette.white),a.hoverRing.light.gray,d.palette.gray.light1,a.fontWeights.regular)),h(N,s.Theme.Dark,t.css(F||(F=x(["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n border: 1px solid ",";\n color: ",";\n background: ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),d.palette.gray.light3,d.palette.gray.dark4,d.palette.gray.base,a.hoverRing.dark.gray,ke,d.palette.gray.base,d.palette.gray.light3,d.palette.gray.dark4,d.palette.gray.light3,ze(d.palette.gray.dark4),ze(d.palette.gray.dark4),a.focusRing.dark.input,d.palette.blue.light1,ze(d.palette.gray.dark4),a.hoverRing.dark.gray,d.palette.gray.dark1,a.fontWeights.regular)),N),Ee=function(e){return t.css(j||(j=x(["\n @supports selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within:not(\n :has(.",":focus)\n ) {\n ","\n }\n }\n\n /* Fallback for when \"has\" is unsupported */\n @supports not selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within {\n ","\n }\n }\n"])),we,e,e)},Fe=(h(T={},s.Theme.Light,Ee("\n {\n box-shadow: ".concat(a.focusRing.light.input,";\n border-color: ").concat(d.palette.white,";\n }\n "))),h(T,s.Theme.Dark,Ee("\n {\n box-shadow: ".concat(a.focusRing.dark.input,";\n border-color: ").concat(d.palette.gray.dark4,";\n }\n "))),T),Ne="&:has(button.".concat(we,")"),je=(h(L={},a.Size.XSmall,t.css(D||(D=x(["\n height: 22px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Ne)),h(L,a.Size.Small,t.css(P||(P=x(["\n height: 28px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Ne)),h(L,a.Size.Default,t.css(I||(I=x(["\n height: 36px;\n padding-inline: 12px;\n\n "," {\n padding-inline-end: 6px;\n }\n "])),Ne)),h(L,a.Size.Large,t.css(R||(R=x(["\n height: 48px;\n padding-inline: 16px;\n\n "," {\n padding-inline-end: 10px;\n }\n "])),Ne)),L),Te=(h(H={},ce.Error,(h(M={},s.Theme.Light,t.css(q||(q=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.red.base,a.hoverRing.light.red)),h(M,s.Theme.Dark,t.css(C||(C=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.red.light1,a.hoverRing.dark.red)),M)),h(H,ce.None,(h(V={},s.Theme.Light,t.css(W||(W=x([""])))),h(V,s.Theme.Dark,t.css(A||(A=x([""])))),V)),h(H,ce.Valid,(h(X={},s.Theme.Light,t.css(_||(_=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.green.dark1,a.hoverRing.light.green)),h(X,s.Theme.Dark,t.css(U||(U=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.green.dark1,a.hoverRing.dark.green)),X)),H),De=(h(J={},s.Theme.Light,t.css(B||(B=x(["\n cursor: not-allowed;\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.gray.light2,d.palette.gray.light1,d.palette.gray.base,d.palette.gray.base,d.palette.gray.base,ze(d.palette.gray.light2))),h(J,s.Theme.Dark,t.css(G||(G=x(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.gray.dark2,d.palette.gray.dark3,d.palette.gray.dark2,d.palette.gray.dark2,d.palette.gray.dark1,d.palette.gray.dark1,ze(d.palette.gray.dark2))),J),Pe=t.css(K||(K=x(["\n width: 100%;\n"]))),Ie=function(e){return t.css(Q||(Q=x(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),e===a.Size.XSmall?a.spacing[1]:a.spacing[2])},Re=(h($={},s.Theme.Light,t.css(Y||(Y=x(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),d.palette.gray.base,d.palette.gray.light1)),h($,s.Theme.Dark,t.css(Z||(Z=x(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),d.palette.gray.base,d.palette.gray.dark2)),$),Le=(h(te={},s.Theme.Light,t.css(ee||(ee=x(["\n color: ",";\n "])),d.palette.green.dark1)),h(te,s.Theme.Dark,t.css(ne||(ne=x(["\n color: ",";\n "])),d.palette.green.base)),te),qe=(h(ie={},s.Theme.Light,t.css(re||(re=x(["\n color: ",";\n "])),d.palette.red.base)),h(ie,s.Theme.Dark,t.css(ae||(ae=x(["\n color: ",";\n "])),d.palette.red.light1)),ie),Ce=t.css(oe||(oe=x(["\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.fontWeights.regular),Me=(h(de={},s.Theme.Light,t.css(le||(le=x(["\n color: ",";\n "])),d.palette.gray.dark1)),h(de,s.Theme.Dark,t.css(se||(se=x(["\n color: ",";\n "])),d.palette.gray.base)),de),We=["contentEnd","className","children"],Ae=n.forwardRef((function(e,n){var i=e.contentEnd,o=e.className,l=e.children,s=m(e,We),d=r.useDarkMode().theme,c=ge(),u=c.disabled,g=c.size,x=c.state,v=c.inputProps,k=c.optional,w=p.default.cloneElement(l,b(b({},v),{},{className:t.cx(ke,l.props.className)})),z=x===ce.None&&!u&&k;return p.default.createElement("div",y({},s,{ref:n,"aria-disabled":u,className:t.cx(Se,Oe[d],je[null!=g?g:a.Size.Default],Te[x][d],Fe[d],h({},De[d],u),o)}),p.default.createElement("div",{className:Pe},w),p.default.createElement("div",{className:Ie(g)},x===ce.Valid&&!u&&p.default.createElement(f.default,{role:"presentation",title:"Valid",glyph:"Checkmark",className:Le[d]}),x===ce.Error&&!u&&p.default.createElement(f.default,{role:"presentation",title:"Error",glyph:"Warning",className:qe[d]}),z&&p.default.createElement("div",{className:t.cx(Ce,Me[d])},p.default.createElement("p",null,"Optional")),i&&p.default.cloneElement(i,{className:t.cx(we,Re[d],i.props.className),disabled:u})))}));Ae.displayName="FormFieldInputWrapper",e.FormField=ve,e.FormFieldContext=ue,e.FormFieldInputContainer=Ae,e.FormFieldProvider=fe,e.FormFieldState=ce,e.defaultFormFieldContext=pe,e.useFormFieldContext=ge}));
!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/hooks"),require("@leafygreen-ui/icon"),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/hooks","@leafygreen-ui/icon","@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/hooks"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,n,t,r,a,i,o,l,s,d){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(n),u=c(r),f=c(l);function g(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 b(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?g(Object(t),!0).forEach((function(n){h(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function h(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function y(){return y=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},y.apply(this,arguments)}function m(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 x(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var v,k,w,z,S,O,E,F,N,j,T,D,P,I,R,L,q,C,M,W,A,V,_,U,X,H,B,G,J,K,Q,Y,Z,$,ee,ne,te,re,ae,ie,oe,le,se,de,ce={None:"none",Error:"error",Valid:"valid"},pe={disabled:!1,size:a.Size.Default,state:ce.None},ue=p.default.createContext(pe),fe=function(e){var n=e.value,t=e.children;return p.default.createElement(ue.Provider,{value:n},t)},ge=function(){return n.useContext(ue)},be=function(e){var n=e.baseFontSize,r=e.size;return r===a.Size.XSmall||r===a.Size.Small?t.css(v||(v=x(["\n font-size: ","px;\n line-height: ","px;\n "])),a.typeScales.body1.fontSize,a.typeScales.body1.lineHeight):r===a.Size.Default?t.css(k||(k=x(["\n font-size: ","px;\n line-height: ","px;\n "])),n,a.typeScales.body1.lineHeight):r===a.Size.Large?t.css(w||(w=x(["\n font-size: 18px;\n line-height: 24px;\n "]))):void 0},he=t.css(z||(z=x(["\n display: flex;\n flex-direction: column;\n margin-bottom: ","px;\n"])),a.spacing[100]),ye=t.css(S||(S=x(["\n margin-top: ","px;\n"])),a.spacing[100]),me=["label","description","state","id"],xe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","className","darkMode","optional","id"],ve=n.forwardRef((function(e,n){var r=e.label,l=e.description,s=e.children,d=e.baseFontSize,c=e.state,f=void 0===c?ce.None:c,g=e.size,h=void 0===g?a.Size.Default:g,x=e.disabled,v=void 0!==x&&x,k=e.errorMessage,w=e.className,z=e.darkMode,S=e.optional,O=e.id,E=m(e,xe),F=i.useUpdatedBaseFontSize(d),N=function(e){var n=e.label,t=e.description,r=e.state,a=e.id,i=m(e,me),l=o.useIdAllocator({prefix:"lg-form-field-label"}),s=o.useIdAllocator({prefix:"lg-form-field-description"}),d=o.useIdAllocator({prefix:"lg-form-field-description"}),c=o.useIdAllocator({prefix:"lg-form-field-input"}),p=null!=a?a:c,u=n?l:i["aria-labelledby"],f=n?"":i["aria-label"];return{labelId:l,descriptionId:s,errorId:d,inputId:p,inputProps:{id:p,"aria-labelledby":u,"aria-describedby":"".concat(t?s:""," ").concat(r===ce.Error?d:"").trim(),"aria-label":f}}}(b({label:r,description:l,state:f,id:O},E)),j=N.labelId,T=N.descriptionId,D=N.errorId,P=N.inputId,I=N.inputProps;return p.default.createElement(u.default,{darkMode:z},p.default.createElement(fe,{value:{disabled:v,size:h,state:f,inputProps:I,optional:S}},p.default.createElement("div",y({className:t.cx(be({baseFontSize:F,size:h}),w),ref:n},E),p.default.createElement("div",{className:he},r&&p.default.createElement(i.Label,{"data-testid":"lg-form_field-label",className:be({baseFontSize:F,size:h}),htmlFor:P,id:j,disabled:v},r),l&&p.default.createElement(i.Description,{"data-testid":"lg-form_field-description",className:be({baseFontSize:F,size:h}),id:T,disabled:v},l)),s,p.default.createElement("div",{className:ye},f===ce.Error&&!v&&p.default.createElement(i.Error,{"data-testid":"lg-form_field-error_message",className:be({baseFontSize:F,size:h}),id:D},k)))))}));ve.displayName="FormField";var ke=s.createUniqueClassName("form-field-input"),we=s.createUniqueClassName("form-field-icon"),ze=function(e){return"0 0 0 100px ".concat(e," inset")},Se=t.css(O||(O=x(["\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,ke,a.fontFamilies.default,we),Oe=(h(N={},s.Theme.Light,t.css(E||(E=x(["\n color: ",";\n background: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),d.palette.black,d.palette.white,d.palette.gray.base,a.hoverRing.light.gray,ke,d.palette.black,d.palette.white,d.palette.gray.base,d.palette.black,ze(d.palette.white),ze(d.palette.white),a.focusRing.light.input,d.palette.white,ze(d.palette.white),a.hoverRing.light.gray,d.palette.gray.light1,a.fontWeights.regular)),h(N,s.Theme.Dark,t.css(F||(F=x(["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n\n & ."," {\n &:-webkit-autofill {\n border: 1px solid ",";\n color: ",";\n background: ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:not([aria-disabled='true']):focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:not([aria-disabled='true']):hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n color: ",";\n font-weight: ",";\n }\n }\n "])),d.palette.gray.light3,d.palette.gray.dark4,d.palette.gray.base,a.hoverRing.dark.gray,ke,d.palette.gray.base,d.palette.gray.light3,d.palette.gray.dark4,d.palette.gray.light3,ze(d.palette.gray.dark4),ze(d.palette.gray.dark4),a.focusRing.dark.input,d.palette.blue.light1,ze(d.palette.gray.dark4),a.hoverRing.dark.gray,d.palette.gray.dark1,a.fontWeights.regular)),N),Ee=function(e){return t.css(j||(j=x(["\n @supports selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within:not(\n :has(.",":focus)\n ) {\n ","\n }\n }\n\n /* Fallback for when \"has\" is unsupported */\n @supports not selector(:has(a, b)) {\n &:not([aria-disabled='true']):focus-within {\n ","\n }\n }\n"])),we,e,e)},Fe=(h(T={},s.Theme.Light,Ee("\n {\n box-shadow: ".concat(a.focusRing.light.input,";\n border-color: ").concat(d.palette.white,";\n }\n "))),h(T,s.Theme.Dark,Ee("\n {\n box-shadow: ".concat(a.focusRing.dark.input,";\n border-color: ").concat(d.palette.gray.dark4,";\n }\n "))),T),Ne="&:has(button.".concat(we,")"),je=(h(L={},a.Size.XSmall,t.css(D||(D=x(["\n height: 22px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Ne)),h(L,a.Size.Small,t.css(P||(P=x(["\n height: 28px;\n padding-inline: 6px;\n\n "," {\n padding-inline-end: 4px;\n }\n "])),Ne)),h(L,a.Size.Default,t.css(I||(I=x(["\n height: 36px;\n padding-inline: 12px;\n\n "," {\n padding-inline-end: 6px;\n }\n "])),Ne)),h(L,a.Size.Large,t.css(R||(R=x(["\n height: 48px;\n padding-inline: 16px;\n\n "," {\n padding-inline-end: 10px;\n }\n "])),Ne)),L),Te=(h(H={},ce.Error,(h(M={},s.Theme.Light,t.css(q||(q=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.red.base,a.hoverRing.light.red)),h(M,s.Theme.Dark,t.css(C||(C=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.red.light1,a.hoverRing.dark.red)),M)),h(H,ce.None,(h(V={},s.Theme.Light,t.css(W||(W=x([""])))),h(V,s.Theme.Dark,t.css(A||(A=x([""])))),V)),h(H,ce.Valid,(h(X={},s.Theme.Light,t.css(_||(_=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.green.dark1,a.hoverRing.light.green)),h(X,s.Theme.Dark,t.css(U||(U=x(["\n &:not([aria-disabled='true']) {\n border-color: ",";\n\n &:hover,\n &:active {\n &:not([aria-disabled='true']):not(:focus) {\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.green.dark1,a.hoverRing.dark.green)),X)),H),De=(h(J={},s.Theme.Light,t.css(B||(B=x(["\n cursor: not-allowed;\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.gray.light2,d.palette.gray.light1,d.palette.gray.base,d.palette.gray.base,d.palette.gray.base,ze(d.palette.gray.light2))),h(J,s.Theme.Dark,t.css(G||(G=x(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n & input {\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 border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n }\n }\n "])),d.palette.gray.dark2,d.palette.gray.dark3,d.palette.gray.dark2,d.palette.gray.dark2,d.palette.gray.dark1,d.palette.gray.dark1,ze(d.palette.gray.dark2))),J),Pe=t.css(K||(K=x(["\n width: 100%;\n"]))),Ie=function(e){return t.css(Q||(Q=x(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),e===a.Size.XSmall?a.spacing[1]:a.spacing[2])},Re=(h($={},s.Theme.Light,t.css(Y||(Y=x(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),d.palette.gray.base,d.palette.gray.light1)),h($,s.Theme.Dark,t.css(Z||(Z=x(["\n color: ",";\n\n &[aria-disabled='true'],\n &:disabled {\n color: ",";\n }\n "])),d.palette.gray.base,d.palette.gray.dark2)),$),Le=(h(te={},s.Theme.Light,t.css(ee||(ee=x(["\n color: ",";\n "])),d.palette.green.dark1)),h(te,s.Theme.Dark,t.css(ne||(ne=x(["\n color: ",";\n "])),d.palette.green.base)),te),qe=(h(ie={},s.Theme.Light,t.css(re||(re=x(["\n color: ",";\n "])),d.palette.red.base)),h(ie,s.Theme.Dark,t.css(ae||(ae=x(["\n color: ",";\n "])),d.palette.red.light1)),ie),Ce=t.css(oe||(oe=x(["\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.fontWeights.regular),Me=(h(de={},s.Theme.Light,t.css(le||(le=x(["\n color: ",";\n "])),d.palette.gray.dark1)),h(de,s.Theme.Dark,t.css(se||(se=x(["\n color: ",";\n "])),d.palette.gray.base)),de),We=["contentEnd","className","children"],Ae=n.forwardRef((function(e,n){var i=e.contentEnd,o=e.className,l=e.children,s=m(e,We),d=r.useDarkMode().theme,c=ge(),u=c.disabled,g=c.size,x=c.state,v=c.inputProps,k=c.optional,w=p.default.cloneElement(l,b(b({},v),{},{className:t.cx(ke,l.props.className)})),z=x===ce.None&&!u&&k;return p.default.createElement("div",y({},s,{ref:n,"aria-disabled":u,className:t.cx(Se,Oe[d],je[null!=g?g:a.Size.Default],Te[x][d],Fe[d],h({},De[d],u),o)}),p.default.createElement("div",{className:Pe},w),p.default.createElement("div",{className:Ie(g)},x===ce.Valid&&!u&&p.default.createElement(f.default,{role:"presentation",title:"Valid",glyph:"Checkmark",className:Le[d]}),x===ce.Error&&!u&&p.default.createElement(f.default,{role:"presentation",title:"Error",glyph:"Warning",className:qe[d]}),z&&p.default.createElement("div",{className:t.cx(Ce,Me[d])},p.default.createElement("p",null,"Optional")),i&&p.default.cloneElement(i,{className:t.cx(we,Re[d],i.props.className),disabled:u})))}));Ae.displayName="FormFieldInputWrapper",e.FormField=ve,e.FormFieldContext=ue,e.FormFieldInputContainer=Ae,e.FormFieldProvider=fe,e.FormFieldState=ce,e.defaultFormFieldContext=pe,e.useFormFieldContext=ge}));
//# sourceMappingURL=index.js.map

10

package.json
{
"name": "@leafygreen-ui/form-field",
"version": "0.3.0",
"version": "0.3.1",
"description": "LeafyGreen UI Kit Form Field",

@@ -19,7 +19,7 @@ "main": "./dist/index.js",

"@leafygreen-ui/emotion": "^4.0.7",
"@leafygreen-ui/hooks": "^8.1.0",
"@leafygreen-ui/hooks": "^8.1.1",
"@leafygreen-ui/icon": "^11.27.1",
"@leafygreen-ui/lib": "^13.2.0",
"@leafygreen-ui/lib": "^13.2.1",
"@leafygreen-ui/palette": "^4.0.7",
"@leafygreen-ui/tokens": "^2.2.0",
"@leafygreen-ui/tokens": "^2.3.0",
"@leafygreen-ui/typography": "^18.1.0"

@@ -31,3 +31,3 @@ },

"devDependencies": {
"@leafygreen-ui/button": "^21.0.9",
"@leafygreen-ui/button": "^21.0.12",
"@leafygreen-ui/icon-button": "^15.0.19",

@@ -34,0 +34,0 @@ "lodash": "^4.17.21"

4

src/FormField/FormField.styles.ts

@@ -36,7 +36,7 @@ import { css } from '@leafygreen-ui/emotion';

flex-direction: column;
margin-bottom: ${spacing[1]}px;
margin-bottom: ${spacing[100]}px;
`;
export const errorTextContainerStyle = css`
margin-top: ${spacing[1]}px;
margin-top: ${spacing[100]}px;
`;

2

stories.js

@@ -1,1 +0,1 @@

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

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc