{"version":3,"sources":["../../src/Textfield/Textfield.css.ts"],"names":["css","vars","cssVariableMap","inputContainerCSS","inputCSS","__spreadProps","__spreadValues"],"mappings":";6aAAA,OAAS,OAAAA,MAAW,iBACpB,OAAS,QAAAC,MAAY,sBAGd,IAAMC,EAAiB,CAC5B,QAAS,CACP,SAAU,CACR,qBAAsBD,EAAK,SAAS,MAAM,MAC1C,kBAAmBA,EAAK,SAAS,MAAM,MACzC,EACA,OAAQ,CACN,qBAAsBA,EAAK,SAAS,MAAM,SAC1C,kBAAmB,aACrB,EACA,UAAW,CACT,qBAAsBA,EAAK,SAAS,MAAM,SAC1C,kBAAmB,aACrB,CACF,EACA,KAAM,CACJ,OAAQ,CACN,cAAeA,EAAK,QAAQ,CAAC,CAC/B,EACA,MAAO,CACL,cAAeA,EAAK,QAAQ,CAAC,CAC/B,CACF,CACF,EAEaE,EAAoBH,EAAI,CACnC,QAAS,qBAET,gBAAiB,0BAEjB,OAAQ,OACR,aAAcC,EAAK,QAAQ,OAE3B,aAAc,MACd,aAAc,QACd,cAAe,OACf,aAAc,uBAEd,kFAAmF,CACjF,aAAcA,EAAK,SAAS,MAAM,WACpC,EAGA,gCAAiC,CAC/B,gBAAiBA,EAAK,SAAS,MAAM,cACrC,QAAS,OACT,MAAOA,EAAK,SAAS,MAAM,aAC3B,OAAQ,aACV,EAGA,6CAA8C,CAC5C,aAAcA,EAAK,SAAS,MAAM,MAClC,gBAAiBA,EAAK,SAAS,MAAM,QACrC,aAAc,MACd,cAAe,MACjB,EAGA,wDAAyD,CACvD,gBAAiBA,EAAK,SAAS,MAAM,yBACrC,aAAc,cAEd,UAAW,CACT,aAAcA,EAAK,SAAS,MAAM,mBACpC,CACF,EAGA,oBAAqB,CACnB,gBAAiBA,EAAK,SAAS,MAAM,SAErC,QAAS,OACT,OAAQ,SACV,CACF,CAAC,EAEYG,EAAWJ,EAAIK,EAAAC,EAAA,CAC1B,KAAM,EACN,MAAO,OAEP,QAAS,GAAGL,EAAK,QAAQ,EAAI,CAAC,KAE9B,iDAAkDI,EAAAC,EAAA,CAChD,QAAS,GAAGL,EAAK,QAAQ,CAAG,CAAC,MAC1BA,EAAK,SAAS,WAAW,YAAY,GAFQ,CAIhD,iBAAkB,CAChB,SAAUA,EAAK,SAAS,KAC1B,CACF,GAEA,OAAQ,EACR,QAAS,OACT,OAAQ,OACR,WAAYA,EAAK,SAAS,MAAM,MAEhC,UAAW,qBACRA,EAAK,SAAS,WAAW,aAAa,GArBf,CAsB1B,MAAOA,EAAK,SAAS,MAAM,KAC3B,gBAAiB,cACjB,OAAQ,UAER,iBAAkB,CAChB,MAAOA,EAAK,SAAS,MAAM,QAC3B,WAAY,CACd,EAEA,aAAc,CACZ,MAAOA,EAAK,SAAS,MAAM,aAE3B,iBAAkB,CAChB,MAAO,SACT,CACF,EAEA,6BAA8B,CAC5B,MAAOA,EAAK,SAAS,MAAM,OAC7B,EAEA,qBAAsB,CACpB,SAAU,SACV,cAAe,MACf,WAAY,IAEZ,iBAAkBI,EAAAC,EAAA,GACbL,EAAK,SAAS,WAAW,aAAa,GADzB,CAEhB,cAAe,GACjB,EACF,EAEA,6CAA8C,CAC5C,SAAU,SACV,cAAe,MACf,WAAY,GACd,EAEA,4GACE,CACE,QAAS,MACX,EAEF,oGACE,CACE,QAAS,MACX,EAEF,kCAAmC,CACjC,iBAAkB,OAClB,SAAU,WACV,MAAO,OAEP,MAAO,OACP,OAAQ,OAER,WAAY,oWACZ,eAAgB,UAChB,mBAAoB,OACtB,EAEA,6DAA8D,CAC5D,iBAAkB,OAClB,OAAQ,CACV,CACF,EAAC","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CSSProperties } from \"react\";\n\nexport const cssVariableMap = {\n variant: {\n outlined: {\n \"--background-color\": vars.semantic.color.field,\n \"--outline-color\": vars.semantic.color.border,\n } as CSSProperties,\n filled: {\n \"--background-color\": vars.semantic.color.fieldSub,\n \"--outline-color\": \"transparent\",\n } as CSSProperties,\n secondary: {\n \"--background-color\": vars.semantic.color.fieldSub,\n \"--outline-color\": \"transparent\",\n } as CSSProperties,\n },\n size: {\n medium: {\n \"--padding-x\": vars.spacing[3],\n } as CSSProperties,\n large: {\n \"--padding-x\": vars.spacing[4],\n } as CSSProperties,\n },\n};\n\nexport const inputContainerCSS = css({\n padding: \"0 var(--padding-x)\",\n\n backgroundColor: \"var(--background-color)\",\n\n border: \"none\",\n borderRadius: vars.rounded.medium,\n\n outlineWidth: \"1px\",\n outlineStyle: \"solid\",\n outlineOffset: \"-1px\",\n outlineColor: \"var(--outline-color)\",\n\n \"&:not(:where(:has([readonly]), [aria-invalid='true'], :has(input:focus))):hover\": {\n outlineColor: vars.semantic.color.borderHover,\n },\n\n // disabled\n \"&:where(:has(input:disabled))\": {\n backgroundColor: vars.semantic.color.fieldDisabled,\n outline: \"none\",\n color: vars.semantic.color.textDisabled,\n cursor: \"not-allowed\",\n },\n\n // focus\n \"&:where(:has(input:focus:not(:read-only)))\": {\n outlineColor: vars.semantic.color.focus,\n backgroundColor: vars.semantic.color.surface,\n outlineWidth: \"2px\",\n outlineOffset: \"-2px\",\n },\n\n // invalid\n \"&:where(:has([aria-invalid='true']:not(input:focus)))\": {\n backgroundColor: vars.semantic.color.surfaceCriticalSecondary,\n outlineColor: \"transparent\",\n\n \"&:hover\": {\n outlineColor: vars.semantic.color.borderCriticalHover,\n },\n },\n\n // readonly\n \"&:has([readonly])\": {\n backgroundColor: vars.semantic.color.fieldSub,\n\n outline: \"none\",\n cursor: \"default\",\n },\n});\n\nexport const inputCSS = css({\n flex: 1,\n width: \"100%\",\n\n padding: `${vars.spacing[\"25\"]} 0`,\n\n '[data-clay-textfield-container-size=\"large\"] &': {\n padding: `${vars.spacing[\"3\"]} 0`,\n ...vars.semantic.typography[\"body-large\"],\n\n \"&::placeholder\": {\n fontSize: vars.fontSize.small,\n },\n },\n\n margin: 0,\n outline: \"none\",\n border: \"none\",\n caretColor: vars.semantic.color.focus,\n\n textAlign: \"var(--text-align)\" as CSSProperties[\"textAlign\"],\n ...vars.semantic.typography[\"body-medium\"],\n color: vars.semantic.color.text,\n backgroundColor: \"transparent\",\n cursor: \"inherit\",\n\n \"&::placeholder\": {\n color: vars.semantic.color.textSub,\n lineHeight: 1,\n },\n\n \"&:disabled\": {\n color: vars.semantic.color.textDisabled,\n\n \"&::placeholder\": {\n color: \"inherit\",\n },\n },\n\n \"&:not(:disabled):read-only\": {\n color: vars.semantic.color.textSub,\n },\n\n \"&[type='password']\": {\n fontSize: \"19.4px\",\n letterSpacing: \"2px\",\n fontWeight: 900,\n\n \"&::placeholder\": {\n ...vars.semantic.typography[\"body-medium\"],\n letterSpacing: \"0\",\n },\n },\n\n \"&[type='password']:not(:placeholder-shown)\": {\n fontSize: \"19.4px\",\n letterSpacing: \"2px\",\n fontWeight: 900,\n },\n\n \"&:not([type='password']) ~ .clay-textfield-addon-password-button svg.clay-textfield-addon-password-hidden\":\n {\n display: \"none\",\n },\n\n \"&[type='password'] ~ .clay-textfield-addon-password-button svg.clay-textfield-addon-password-show\":\n {\n display: \"none\",\n },\n\n \"&::-webkit-search-cancel-button\": {\n WebkitAppearance: \"none\",\n position: \"relative\",\n right: \"-2px\",\n\n width: \"24px\",\n height: \"20px\",\n\n background: `url('data:image/svg+xml;utf8,'); no-repeat 50% 50%`,\n backgroundSize: \"contain\",\n backgroundPosition: \"right\",\n },\n\n \"&::-webkit-inner-spin-button, &::-webkit-outer-spin-button\": {\n WebkitAppearance: \"none\",\n margin: 0,\n },\n});\n"]}