@foxford/ui 2.48.1-beta-5f7af17-20241016 → 2.49.0-beta-2ccaa67-20241021

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/components/Dropdown/Dropdown.js +1 -1
  2. package/components/Dropdown/Dropdown.js.map +1 -1
  3. package/components/Dropdown/Dropdown.mjs +1 -1
  4. package/components/Dropdown/Dropdown.mjs.map +1 -1
  5. package/components/Dropdown/DropdownMenuNoOptions.js +1 -1
  6. package/components/Dropdown/DropdownMenuNoOptions.js.map +1 -1
  7. package/components/Dropdown/DropdownMenuNoOptions.mjs +1 -1
  8. package/components/Dropdown/DropdownMenuNoOptions.mjs.map +1 -1
  9. package/components/Dropdown/constants.js +1 -1
  10. package/components/Dropdown/constants.js.map +1 -1
  11. package/components/Dropdown/constants.mjs +1 -1
  12. package/components/Dropdown/constants.mjs.map +1 -1
  13. package/components/Dropdown/style.js +1 -1
  14. package/components/Dropdown/style.js.map +1 -1
  15. package/components/Dropdown/style.mjs +1 -1
  16. package/components/Dropdown/style.mjs.map +1 -1
  17. package/components/Dropdown/utils.js +1 -1
  18. package/components/Dropdown/utils.js.map +1 -1
  19. package/components/Dropdown/utils.mjs +1 -1
  20. package/components/Dropdown/utils.mjs.map +1 -1
  21. package/components/FormInput/style.js +1 -1
  22. package/components/FormInput/style.js.map +1 -1
  23. package/components/FormInput/style.mjs +1 -1
  24. package/components/FormInput/style.mjs.map +1 -1
  25. package/components/FormInputLabel/style.js +1 -1
  26. package/components/FormInputLabel/style.js.map +1 -1
  27. package/components/FormInputLabel/style.mjs +1 -1
  28. package/components/FormInputLabel/style.mjs.map +1 -1
  29. package/components/MenuList/MenuList.js +1 -1
  30. package/components/MenuList/MenuList.js.map +1 -1
  31. package/components/MenuList/MenuList.mjs +1 -1
  32. package/components/MenuList/MenuList.mjs.map +1 -1
  33. package/dts/index.d.ts +9 -2
  34. package/external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/Close/index.js +1 -1
  35. package/external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/CloseCirlceFill/index.js +1 -1
  36. package/package.json +1 -1
package/components/Dropdown/DropdownMenuNoOptions.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenuNoOptions.mjs","sources":["../../../../src/components/Dropdown/DropdownMenuNoOptions.tsx"],"sourcesContent":["import { MenuContainer } from 'components/MenuContainer'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport * as Styled from './style'\n\nimport type { DropdownMenuNoOptionsProps } from './types'\n\nconst DropdownMenuNoOptions = (props: DropdownMenuNoOptionsProps) => {\n const {\n loadingIcon = <Styled.LoadingIconAnimated />,\n emptyIcon = 'redo',\n loadingIconProps = {},\n emptyIconProps = {},\n loading,\n loadingMessage,\n emptyMessage,\n } = props\n\n return (\n <MenuContainer>\n <Styled.IconContainer>\n {loading ? (\n <Icon\n {...loadingIconProps}\n preset='brand'\n name={typeof loadingIcon === 'string' ? loadingIcon : undefined}\n icon={typeof loadingIcon !== 'string' ? loadingIcon : undefined}\n />\n ) : (\n <Icon\n {...emptyIconProps}\n preset='brand'\n name={typeof emptyIcon === 'string' ? emptyIcon : undefined}\n icon={typeof emptyIcon !== 'string' ? emptyIcon : undefined}\n />\n )}\n </Styled.IconContainer>\n {loading && loadingMessage && (\n <Text\n as='p'\n appearance='body'\n size='inherit'\n color='inherit'\n textAlign='center'\n wordBreak='break-word'\n marginRight={12}\n marginBottom={12}\n marginLeft={12}\n >\n {loadingMessage}\n </Text>\n )}\n {!loading && emptyMessage && (\n <Text\n as='p'\n appearance='body'\n size='inherit'\n color='inherit'\n textAlign='center'\n wordBreak='break-word'\n marginRight={12}\n marginBottom={12}\n marginLeft={12}\n >\n {emptyMessage}\n </Text>\n )}\n </MenuContainer>\n )\n}\n\nexport { DropdownMenuNoOptions }\n"],"names":["DropdownMenuNoOptions","props","loadingIcon","_jsx","Styled","emptyIcon","loadingIconProps","emptyIconProps","loading","loadingMessage","emptyMessage","_jsxs","MenuContainer","children","Icon","preset","name","undefined","icon","Text","as","appearance","size","color","textAlign","wordBreak","marginRight","marginBottom","marginLeft"],"mappings":"uOAOMA,MAAAA,sBAAyBC,IAC7B,MAAMC,YACJA,EAAcC,IAACC,wBAA6BC,UAC5CA,EAAY,OAAMC,iBAClBA,EAAmB,CAAE,EAAAC,eACrBA,EAAiB,CAAE,EAAAC,QACnBA,EAAOC,eACPA,EAAcC,aACdA,GACET,EAEJ,OACEU,KAACC,cAAa,CAAAC,SACZV,CAAAA,IAACC,cAAoB,CAAAS,SAEjBV,IAACW,KADFN,EACM,IACCF,EACJS,OAAO,QACPC,YAAad,GAAgB,SAAWA,OAAce,EACtDC,YAAahB,GAAgB,SAAWA,OAAce,GAGnD,IACCV,EACJQ,OAAO,QACPC,YAAaX,GAAc,SAAWA,OAAYY,EAClDC,YAAab,GAAc,SAAWA,OAAYY,MAIvDT,GAAWC,GACVN,IAACgB,KAAI,CACHC,GAAG,IACHC,WAAW,OACXC,KAAK,UACLC,MAAM,UACNC,UAAU,SACVC,UAAU,aACVC,YAAa,GACbC,aAAc,GACdC,WAAY,GAAGf,SAEdJ,KAGHD,GAAWE,GACXP,IAACgB,KAAI,CACHC,GAAG,IACHC,WAAW,OACXC,KAAK,UACLC,MAAM,UACNC,UAAU,SACVC,UAAU,aACVC,YAAa,GACbC,aAAc,GACdC,WAAY,GAAGf,SAEdH,MAGS"}
1
+ {"version":3,"file":"DropdownMenuNoOptions.mjs","sources":["../../../../src/components/Dropdown/DropdownMenuNoOptions.tsx"],"sourcesContent":["import { MenuContainer } from 'components/MenuContainer'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport * as Styled from './style'\n\nimport type { DropdownMenuNoOptionsProps } from './types'\n\nconst DropdownMenuNoOptions = (props: DropdownMenuNoOptionsProps) => {\n const {\n loadingIcon = <Styled.LoadingIconAnimated />,\n emptyIcon = 'redo',\n loadingIconProps = {},\n emptyIconProps = {},\n loading,\n loadingMessage,\n emptyMessage,\n } = props\n\n return (\n <MenuContainer>\n <Styled.IconContainer>\n {loading ? (\n <Icon\n preset='brand'\n name={typeof loadingIcon === 'string' ? loadingIcon : undefined}\n icon={typeof loadingIcon !== 'string' ? loadingIcon : undefined}\n {...loadingIconProps}\n />\n ) : (\n <Icon\n preset='brand'\n name={typeof emptyIcon === 'string' ? emptyIcon : undefined}\n icon={typeof emptyIcon !== 'string' ? emptyIcon : undefined}\n {...emptyIconProps}\n />\n )}\n </Styled.IconContainer>\n {loading && loadingMessage && (\n <Text\n as='p'\n appearance='body'\n size='inherit'\n color='inherit'\n textAlign='center'\n wordBreak='break-word'\n marginRight={12}\n marginBottom={12}\n marginLeft={12}\n >\n {loadingMessage}\n </Text>\n )}\n {!loading && emptyMessage && (\n <Text\n as='p'\n appearance='body'\n size='inherit'\n color='inherit'\n textAlign='center'\n wordBreak='break-word'\n marginRight={12}\n marginBottom={12}\n marginLeft={12}\n >\n {emptyMessage}\n </Text>\n )}\n </MenuContainer>\n )\n}\n\nexport { DropdownMenuNoOptions }\n"],"names":["DropdownMenuNoOptions","props","loadingIcon","_jsx","Styled","emptyIcon","loadingIconProps","emptyIconProps","loading","loadingMessage","emptyMessage","_jsxs","MenuContainer","children","Icon","preset","name","undefined","icon","Text","as","appearance","size","color","textAlign","wordBreak","marginRight","marginBottom","marginLeft"],"mappings":"uOAOMA,MAAAA,sBAAyBC,IAC7B,MAAMC,YACJA,EAAcC,IAACC,wBAA6BC,UAC5CA,EAAY,OAAMC,iBAClBA,EAAmB,CAAE,EAAAC,eACrBA,EAAiB,CAAE,EAAAC,QACnBA,EAAOC,eACPA,EAAcC,aACdA,GACET,EAEJ,OACEU,KAACC,cAAa,CAAAC,SACZV,CAAAA,IAACC,cAAoB,CAAAS,SAEjBV,IAACW,KADFN,EACM,CACHO,OAAO,QACPC,YAAad,GAAgB,SAAWA,OAAce,EACtDC,YAAahB,GAAgB,SAAWA,OAAce,KAClDX,GAGD,CACHS,OAAO,QACPC,YAAaX,GAAc,SAAWA,OAAYY,EAClDC,YAAab,GAAc,SAAWA,OAAYY,KAC9CV,MAITC,GAAWC,GACVN,IAACgB,KAAI,CACHC,GAAG,IACHC,WAAW,OACXC,KAAK,UACLC,MAAM,UACNC,UAAU,SACVC,UAAU,aACVC,YAAa,GACbC,aAAc,GACdC,WAAY,GAAGf,SAEdJ,KAGHD,GAAWE,GACXP,IAACgB,KAAI,CACHC,GAAG,IACHC,WAAW,OACXC,KAAK,UACLC,MAAM,UACNC,UAAU,SACVC,UAAU,aACVC,YAAa,GACbC,aAAc,GACdC,WAAY,GAAGf,SAEdH,MAGS"}
package/components/Dropdown/constants.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var constants=require('../FormInputLabel/constants.js');var constants$1=require('../InputCheckbox/constants.js');const SIZES={l:constants.SIZES.l,m:constants.SIZES.m,s:constants.SIZES.s};const SIZES_CHECKBOX={l:constants$1.SIZES.m,m:constants$1.SIZES.s,s:constants$1.SIZES.xs};exports.FuseSearchKeys={text:'text',tags:'tags'},exports.SIZES=SIZES,exports.SIZES_CHECKBOX=SIZES_CHECKBOX,exports.SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}};
1
+ 'use strict';var constants=require('../FormInputLabel/constants.js');var constants$1=require('../InputCheckbox/constants.js');const SIZES={l:constants.SIZES.l,m:constants.SIZES.m,s:constants.SIZES.s};const SIZES_CHECKBOX={l:constants$1.SIZES.m,m:constants$1.SIZES.s,s:constants$1.SIZES.xs};exports.FuseSearchKeys={text:'text',label:'label',tags:'tags'},exports.SIZES=SIZES,exports.SIZES_CHECKBOX=SIZES_CHECKBOX,exports.SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20}},exports.SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}};
2
2
  //# sourceMappingURL=constants.js.map
package/components/Dropdown/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../src/components/Dropdown/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { DropdownSize } from './types'\n\nexport const FuseSearchKeys = {\n text: 'text',\n tags: 'tags',\n} as const\n\nexport const SIZES: Record<DropdownSize, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n}\n\nexport const SIZES_CHECKBOX: Record<DropdownSize, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n"],"names":["SIZES","l","SIZES_FORM_INPUT_LABEL","m","s","SIZES_CHECKBOX","SIZES_INPUT_CHECKBOX","xs","text","tags","width","minWidth","maxWidth","fluid"],"mappings":"8HAWO,MAAMA,MAA6C,CACxDC,EAAGC,UAAsBF,MAACC,EAC1BE,EAAGD,UAAsBF,MAACG,EAC1BC,EAAGF,UAAsBF,MAACI,GAGrB,MAAMC,eAAsD,CACjEJ,EAAGK,YAAoBN,MAACG,EACxBA,EAAGG,YAAoBN,MAACI,EACxBA,EAAGE,YAAoBN,MAACO,2BAdI,CAC5BC,KAAM,OACNC,KAAM,qFAe4D,CAClER,EAAG,CACDS,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZT,EAAG,CACDO,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZR,EAAG,CACDM,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/Dropdown/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { DropdownSize } from './types'\n\nexport const FuseSearchKeys = {\n text: 'text',\n label: 'label',\n tags: 'tags',\n} as const\n\nexport const SIZES: Record<DropdownSize, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n}\n\nexport const SIZES_CHECKBOX: Record<DropdownSize, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n\nexport const SIZES_ICON: Record<DropdownSize, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n}\n"],"names":["SIZES","l","SIZES_FORM_INPUT_LABEL","m","s","SIZES_CHECKBOX","SIZES_INPUT_CHECKBOX","xs","text","label","tags","fontSize","width","minWidth","maxWidth","fluid"],"mappings":"8HAYO,MAAMA,MAA6C,CACxDC,EAAGC,UAAsBF,MAACC,EAC1BE,EAAGD,UAAsBF,MAACG,EAC1BC,EAAGF,UAAsBF,MAACI,GAGrB,MAAMC,eAAsD,CACjEJ,EAAGK,YAAoBN,MAACG,EACxBA,EAAGG,YAAoBN,MAACI,EACxBA,EAAGE,YAAoBN,MAACO,2BAfI,CAC5BC,KAAM,OACNC,MAAO,QACPC,KAAM,qFAsCuD,CAC7DT,EAAG,CAAEU,SAAU,IACfR,EAAG,CAAEQ,SAAU,IACfP,EAAG,CAAEO,SAAU,wBA1BmD,CAClEV,EAAG,CACDW,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZX,EAAG,CACDS,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZV,EAAG,CACDQ,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU"}
package/components/Dropdown/constants.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import{SIZES as SIZES$1}from'../FormInputLabel/constants.mjs';import{SIZES as SIZES$2}from'../InputCheckbox/constants.mjs';const FuseSearchKeys={text:'text',tags:'tags'};const SIZES={l:SIZES$1.l,m:SIZES$1.m,s:SIZES$1.s};const SIZES_CHECKBOX={l:SIZES$2.m,m:SIZES$2.s,s:SIZES$2.xs};const SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}};export{FuseSearchKeys,SIZES,SIZES_CHECKBOX,SIZES_MENU};
1
+ import{SIZES as SIZES$1}from'../FormInputLabel/constants.mjs';import{SIZES as SIZES$2}from'../InputCheckbox/constants.mjs';const FuseSearchKeys={text:'text',label:'label',tags:'tags'};const SIZES={l:SIZES$1.l,m:SIZES$1.m,s:SIZES$1.s};const SIZES_CHECKBOX={l:SIZES$2.m,m:SIZES$2.s,s:SIZES$2.xs};const SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}};const SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20}};export{FuseSearchKeys,SIZES,SIZES_CHECKBOX,SIZES_ICON,SIZES_MENU};
2
2
  //# sourceMappingURL=constants.mjs.map
package/components/Dropdown/constants.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.mjs","sources":["../../../../src/components/Dropdown/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { DropdownSize } from './types'\n\nexport const FuseSearchKeys = {\n text: 'text',\n tags: 'tags',\n} as const\n\nexport const SIZES: Record<DropdownSize, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n}\n\nexport const SIZES_CHECKBOX: Record<DropdownSize, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n"],"names":["FuseSearchKeys","text","tags","SIZES","l","SIZES_FORM_INPUT_LABEL","m","s","SIZES_CHECKBOX","SIZES_INPUT_CHECKBOX","xs","SIZES_MENU","width","minWidth","maxWidth","fluid"],"mappings":"2HAMO,MAAMA,eAAiB,CAC5BC,KAAM,OACNC,KAAM,QAGD,MAAMC,MAA6C,CACxDC,EAAGC,QAAuBD,EAC1BE,EAAGD,QAAuBC,EAC1BC,EAAGF,QAAuBE,GAGrB,MAAMC,eAAsD,CACjEJ,EAAGK,QAAqBH,EACxBA,EAAGG,QAAqBF,EACxBA,EAAGE,QAAqBC,IAGnB,MAAMC,WAAuD,CAClEP,EAAG,CACDQ,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZR,EAAG,CACDM,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZP,EAAG,CACDK,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU"}
1
+ {"version":3,"file":"constants.mjs","sources":["../../../../src/components/Dropdown/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { DropdownSize } from './types'\n\nexport const FuseSearchKeys = {\n text: 'text',\n label: 'label',\n tags: 'tags',\n} as const\n\nexport const SIZES: Record<DropdownSize, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n}\n\nexport const SIZES_CHECKBOX: Record<DropdownSize, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n\nexport const SIZES_ICON: Record<DropdownSize, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n}\n"],"names":["FuseSearchKeys","text","label","tags","SIZES","l","SIZES_FORM_INPUT_LABEL","m","s","SIZES_CHECKBOX","SIZES_INPUT_CHECKBOX","xs","SIZES_MENU","width","minWidth","maxWidth","fluid","SIZES_ICON","fontSize"],"mappings":"2HAMO,MAAMA,eAAiB,CAC5BC,KAAM,OACNC,MAAO,QACPC,KAAM,QAGD,MAAMC,MAA6C,CACxDC,EAAGC,QAAuBD,EAC1BE,EAAGD,QAAuBC,EAC1BC,EAAGF,QAAuBE,GAGrB,MAAMC,eAAsD,CACjEJ,EAAGK,QAAqBH,EACxBA,EAAGG,QAAqBF,EACxBA,EAAGE,QAAqBC,IAGnB,MAAMC,WAAuD,CAClEP,EAAG,CACDQ,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZR,EAAG,CACDM,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZP,EAAG,CACDK,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU,SAIP,MAAME,WAAkD,CAC7DZ,EAAG,CAAEa,SAAU,IACfX,EAAG,CAAEW,SAAU,IACfV,EAAG,CAAEU,SAAU"}
package/components/Dropdown/style.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var MenuComponent=require('../MenuComponent/MenuComponent.js');var index=require('../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/ChevronDown/index.js');var index$1=require('../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/LoaderFill/index.js');function _interopDefault(n){return n&&n.__esModule?n:{default:n}}var styled__default=_interopDefault(styled);const PositionedMenuComponent=styled__default.default(MenuComponent.MenuComponent).withConfig({shouldForwardProp:n=>!['expanseDirectionLeft'].includes(n)}).withConfig({displayName:"Dropdown__PositionedMenuComponent",componentId:"ui__sc-519mcg-0"})(["position:absolute;",""],(n=>`\n top: 0;\n left: ${n.expanseDirectionLeft?'auto':0};\n right: ${n.expanseDirectionLeft?0:'auto'}; \n `));const spinAnimation=styled.keyframes(["100%{transform:rotate(360deg);}"]);const IconContainer=styled__default.default.div.withConfig({displayName:"Dropdown__IconContainer",componentId:"ui__sc-519mcg-1"})(["box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:12px 0;"]);const ChevronIcon=styled__default.default(index.ChevronDown).withConfig({shouldForwardProp:n=>n!=='up'}).withConfig({displayName:"Dropdown__ChevronIcon",componentId:"ui__sc-519mcg-2"})(["",""],(n=>`\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${n.up?180:0}deg);\n `));const LoadingIconAnimated=styled__default.default(index$1.LoaderFill).withConfig({displayName:"Dropdown__LoadingIconAnimated",componentId:"ui__sc-519mcg-3"})(["transform-origin:center;animation:"," 1600ms infinite linear;"],spinAnimation);exports.ChevronIcon=ChevronIcon,exports.IconContainer=IconContainer,exports.LoadingIconAnimated=LoadingIconAnimated,exports.PositionedMenuComponent=PositionedMenuComponent;
1
+ 'use strict';var styled=require('styled-components');var MenuComponent=require('../MenuComponent/MenuComponent.js');var index=require('../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/ChevronDown/index.js');var index$1=require('../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/LoaderFill/index.js');function _interopDefault(n){return n&&n.__esModule?n:{default:n}}var styled__default=_interopDefault(styled);const PositionedMenuComponent=styled__default.default(MenuComponent.MenuComponent).withConfig({shouldForwardProp:n=>!['expanseDirectionLeft'].includes(n)}).withConfig({displayName:"Dropdown__PositionedMenuComponent",componentId:"ui__sc-519mcg-0"})(["position:absolute;",""],(n=>`\n top: 0;\n left: ${n.expanseDirectionLeft?'auto':0};\n right: ${n.expanseDirectionLeft?0:'auto'}; \n `));const spinAnimation=styled.keyframes(["100%{transform:rotate(360deg);}"]);const IconContainer=styled__default.default.div.withConfig({displayName:"Dropdown__IconContainer",componentId:"ui__sc-519mcg-1"})(["box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:12px 0;"]);const ChevronIcon=styled__default.default(index.ChevronDown).withConfig({shouldForwardProp:n=>n!=='up'}).withConfig({displayName:"Dropdown__ChevronIcon",componentId:"ui__sc-519mcg-2"})(["",""],(n=>`\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${n.up?180:0}deg);\n `));const LoadingIconAnimated=styled__default.default(index$1.LoaderFill).withConfig({displayName:"Dropdown__LoadingIconAnimated",componentId:"ui__sc-519mcg-3"})(["transform-origin:center;animation:"," 1600ms infinite linear;"],spinAnimation);const InputMimic=styled__default.default.input.withConfig({displayName:"Dropdown__InputMimic",componentId:"ui__sc-519mcg-4"})(["box-sizing:border-box;position:absolute;top:0;left:0;appearance:none;border:none;padding:0;margin:0;background-color:transparent;width:100%;height:100%;opacity:0;&:focus{outline:none;}"]);exports.ChevronIcon=ChevronIcon,exports.IconContainer=IconContainer,exports.InputMimic=InputMimic,exports.LoadingIconAnimated=LoadingIconAnimated,exports.PositionedMenuComponent=PositionedMenuComponent;
2
2
  //# sourceMappingURL=style.js.map
package/components/Dropdown/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Dropdown/style.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { LoaderFill, ChevronDown } from '@foxford/icon-pack'\nimport { MenuComponent } from 'components/MenuComponent'\nimport type { DropdownMenuProps, StyledChevronIconProps } from './types'\n\nexport const PositionedMenuComponent = styled(MenuComponent).withConfig<DropdownMenuProps>({\n shouldForwardProp: (propKey) => !['expanseDirectionLeft'].includes(propKey),\n})`\n position: absolute;\n\n ${(props) => `\n top: 0;\n left: ${props.expanseDirectionLeft ? 'auto' : 0};\n right: ${props.expanseDirectionLeft ? 0 : 'auto'}; \n `}\n`\n\nconst spinAnimation = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nexport const IconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 12px 0;\n`\n\nexport const ChevronIcon = styled(ChevronDown).withConfig<StyledChevronIconProps>({\n shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n ${(props) => `\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${props.up ? 180 : 0}deg);\n `}\n`\n\nexport const LoadingIconAnimated = styled(LoaderFill)`\n transform-origin: center;\n animation: ${spinAnimation} 1600ms infinite linear;\n`\n"],"names":["PositionedMenuComponent","styled","default","MenuComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","expanseDirectionLeft","spinAnimation","keyframes","IconContainer","div","ChevronIcon","ChevronDown","up","LoadingIconAnimated","LoaderFill"],"mappings":"sjBAKO,MAAMA,wBAA0BC,gBAAMC,QAACC,6BAAeC,WAA8B,CACzFC,kBAAoBC,IAAa,CAAC,wBAAwBC,SAASD,KACnEF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,mBAFqCR,CAErC,CAAA,qBAAA,KAGGS,GAAU,4BAEHA,EAAMC,qBAAuB,OAAS,kBACrCD,EAAMC,qBAAuB,EAAI,kBAI9C,MAAMC,cAAgBC,OAASA,UAI9B,CAAA,0CAEYC,cAAgBb,gBAAAA,QAAOc,IAAGX,WAAA,CAAAI,YAAA,0BAAAC,YAAA,mBAAVR,CAM5B,CAAA,gGAEM,MAAMe,YAAcf,gBAAMC,QAACe,mBAAab,WAAmC,CAChFC,kBAAoBC,GAAYA,IAAY,OAC5CF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,mBAFyBR,CAEzB,CAAA,GAAA,KACGS,GAAU,gIAISA,EAAMQ,GAAK,IAAM,eAIlC,MAAMC,oBAAsBlB,gBAAMC,QAACkB,oBAAWhB,WAAA,CAAAI,YAAA,gCAAAC,YAAA,mBAAlBR,CAAkB,CAAA,qCAAA,4BAEtCW"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Dropdown/style.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { LoaderFill, ChevronDown } from '@foxford/icon-pack'\nimport { MenuComponent } from 'components/MenuComponent'\nimport type { DropdownMenuProps, StyledChevronIconProps } from './types'\n\nexport const PositionedMenuComponent = styled(MenuComponent).withConfig<DropdownMenuProps>({\n shouldForwardProp: (propKey) => !['expanseDirectionLeft'].includes(propKey),\n})`\n position: absolute;\n\n ${(props) => `\n top: 0;\n left: ${props.expanseDirectionLeft ? 'auto' : 0};\n right: ${props.expanseDirectionLeft ? 0 : 'auto'}; \n `}\n`\n\nconst spinAnimation = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nexport const IconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 12px 0;\n`\n\nexport const ChevronIcon = styled(ChevronDown).withConfig<StyledChevronIconProps>({\n shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n ${(props) => `\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${props.up ? 180 : 0}deg);\n `}\n`\n\nexport const LoadingIconAnimated = styled(LoaderFill)`\n transform-origin: center;\n animation: ${spinAnimation} 1600ms infinite linear;\n`\n\nexport const InputMimic = styled.input`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n appearance: none;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n width: 100%;\n height: 100%;\n opacity: 0;\n &:focus {\n outline: none;\n }\n`\n"],"names":["PositionedMenuComponent","styled","default","MenuComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","expanseDirectionLeft","spinAnimation","keyframes","IconContainer","div","ChevronIcon","ChevronDown","up","LoadingIconAnimated","LoaderFill","InputMimic","input"],"mappings":"sjBAKO,MAAMA,wBAA0BC,gBAAMC,QAACC,6BAAeC,WAA8B,CACzFC,kBAAoBC,IAAa,CAAC,wBAAwBC,SAASD,KACnEF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,mBAFqCR,CAErC,CAAA,qBAAA,KAGGS,GAAU,4BAEHA,EAAMC,qBAAuB,OAAS,kBACrCD,EAAMC,qBAAuB,EAAI,kBAI9C,MAAMC,cAAgBC,OAASA,UAI9B,CAAA,0CAEYC,cAAgBb,gBAAAA,QAAOc,IAAGX,WAAA,CAAAI,YAAA,0BAAAC,YAAA,mBAAVR,CAM5B,CAAA,gGAEM,MAAMe,YAAcf,gBAAMC,QAACe,mBAAab,WAAmC,CAChFC,kBAAoBC,GAAYA,IAAY,OAC5CF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,mBAFyBR,CAEzB,CAAA,GAAA,KACGS,GAAU,gIAISA,EAAMQ,GAAK,IAAM,eAIlC,MAAMC,oBAAsBlB,gBAAMC,QAACkB,oBAAWhB,WAAA,CAAAI,YAAA,gCAAAC,YAAA,mBAAlBR,CAAkB,CAAA,qCAAA,4BAEtCW,qBAGFS,WAAapB,gBAAAA,QAAOqB,MAAKlB,WAAA,CAAAI,YAAA,uBAAAC,YAAA,mBAAZR,CAgBzB,CAAA"}
package/components/Dropdown/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled,{keyframes}from'styled-components';import{MenuComponent}from'../MenuComponent/MenuComponent.mjs';import{ChevronDown as ChevronDown_2}from'../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/ChevronDown/index.mjs';import{LoaderFill as LoaderFill_2}from'../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/LoaderFill/index.mjs';const PositionedMenuComponent=styled(MenuComponent).withConfig({shouldForwardProp:n=>!['expanseDirectionLeft'].includes(n)}).withConfig({displayName:"Dropdown__PositionedMenuComponent",componentId:"ui__sc-519mcg-0"})(["position:absolute;",""],(n=>`\n top: 0;\n left: ${n.expanseDirectionLeft?'auto':0};\n right: ${n.expanseDirectionLeft?0:'auto'}; \n `));const spinAnimation=keyframes(["100%{transform:rotate(360deg);}"]);const IconContainer=styled.div.withConfig({displayName:"Dropdown__IconContainer",componentId:"ui__sc-519mcg-1"})(["box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:12px 0;"]);const ChevronIcon=styled(ChevronDown_2).withConfig({shouldForwardProp:n=>n!=='up'}).withConfig({displayName:"Dropdown__ChevronIcon",componentId:"ui__sc-519mcg-2"})(["",""],(n=>`\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${n.up?180:0}deg);\n `));const LoadingIconAnimated=styled(LoaderFill_2).withConfig({displayName:"Dropdown__LoadingIconAnimated",componentId:"ui__sc-519mcg-3"})(["transform-origin:center;animation:"," 1600ms infinite linear;"],spinAnimation);export{ChevronIcon,IconContainer,LoadingIconAnimated,PositionedMenuComponent};
1
+ import styled,{keyframes}from'styled-components';import{MenuComponent}from'../MenuComponent/MenuComponent.mjs';import{ChevronDown as ChevronDown_2}from'../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/ChevronDown/index.mjs';import{LoaderFill as LoaderFill_2}from'../../external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/LoaderFill/index.mjs';const PositionedMenuComponent=styled(MenuComponent).withConfig({shouldForwardProp:n=>!['expanseDirectionLeft'].includes(n)}).withConfig({displayName:"Dropdown__PositionedMenuComponent",componentId:"ui__sc-519mcg-0"})(["position:absolute;",""],(n=>`\n top: 0;\n left: ${n.expanseDirectionLeft?'auto':0};\n right: ${n.expanseDirectionLeft?0:'auto'}; \n `));const spinAnimation=keyframes(["100%{transform:rotate(360deg);}"]);const IconContainer=styled.div.withConfig({displayName:"Dropdown__IconContainer",componentId:"ui__sc-519mcg-1"})(["box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:12px 0;"]);const ChevronIcon=styled(ChevronDown_2).withConfig({shouldForwardProp:n=>n!=='up'}).withConfig({displayName:"Dropdown__ChevronIcon",componentId:"ui__sc-519mcg-2"})(["",""],(n=>`\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${n.up?180:0}deg);\n `));const LoadingIconAnimated=styled(LoaderFill_2).withConfig({displayName:"Dropdown__LoadingIconAnimated",componentId:"ui__sc-519mcg-3"})(["transform-origin:center;animation:"," 1600ms infinite linear;"],spinAnimation);const InputMimic=styled.input.withConfig({displayName:"Dropdown__InputMimic",componentId:"ui__sc-519mcg-4"})(["box-sizing:border-box;position:absolute;top:0;left:0;appearance:none;border:none;padding:0;margin:0;background-color:transparent;width:100%;height:100%;opacity:0;&:focus{outline:none;}"]);export{ChevronIcon,IconContainer,InputMimic,LoadingIconAnimated,PositionedMenuComponent};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/Dropdown/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Dropdown/style.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { LoaderFill, ChevronDown } from '@foxford/icon-pack'\nimport { MenuComponent } from 'components/MenuComponent'\nimport type { DropdownMenuProps, StyledChevronIconProps } from './types'\n\nexport const PositionedMenuComponent = styled(MenuComponent).withConfig<DropdownMenuProps>({\n shouldForwardProp: (propKey) => !['expanseDirectionLeft'].includes(propKey),\n})`\n position: absolute;\n\n ${(props) => `\n top: 0;\n left: ${props.expanseDirectionLeft ? 'auto' : 0};\n right: ${props.expanseDirectionLeft ? 0 : 'auto'}; \n `}\n`\n\nconst spinAnimation = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nexport const IconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 12px 0;\n`\n\nexport const ChevronIcon = styled(ChevronDown).withConfig<StyledChevronIconProps>({\n shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n ${(props) => `\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${props.up ? 180 : 0}deg);\n `}\n`\n\nexport const LoadingIconAnimated = styled(LoaderFill)`\n transform-origin: center;\n animation: ${spinAnimation} 1600ms infinite linear;\n`\n"],"names":["PositionedMenuComponent","styled","MenuComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","expanseDirectionLeft","spinAnimation","keyframes","IconContainer","div","ChevronIcon","ChevronDown","up","LoadingIconAnimated","LoaderFill"],"mappings":"4eAKO,MAAMA,wBAA0BC,OAAOC,eAAeC,WAA8B,CACzFC,kBAAoBC,IAAa,CAAC,wBAAwBC,SAASD,KACnEF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,mBAFqCP,CAErC,CAAA,qBAAA,KAGGQ,GAAU,4BAEHA,EAAMC,qBAAuB,OAAS,kBACrCD,EAAMC,qBAAuB,EAAI,kBAI9C,MAAMC,cAAgBC,UAIrB,CAAA,0CAEYC,cAAgBZ,OAAOa,IAAGX,WAAA,CAAAI,YAAA,0BAAAC,YAAA,mBAAVP,CAM5B,CAAA,gGAEM,MAAMc,YAAcd,OAAOe,eAAab,WAAmC,CAChFC,kBAAoBC,GAAYA,IAAY,OAC5CF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,mBAFyBP,CAEzB,CAAA,GAAA,KACGQ,GAAU,gIAISA,EAAMQ,GAAK,IAAM,eAIlC,MAAMC,oBAAsBjB,OAAOkB,cAAWhB,WAAA,CAAAI,YAAA,gCAAAC,YAAA,mBAAlBP,CAAkB,CAAA,qCAAA,4BAEtCU"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Dropdown/style.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { LoaderFill, ChevronDown } from '@foxford/icon-pack'\nimport { MenuComponent } from 'components/MenuComponent'\nimport type { DropdownMenuProps, StyledChevronIconProps } from './types'\n\nexport const PositionedMenuComponent = styled(MenuComponent).withConfig<DropdownMenuProps>({\n shouldForwardProp: (propKey) => !['expanseDirectionLeft'].includes(propKey),\n})`\n position: absolute;\n\n ${(props) => `\n top: 0;\n left: ${props.expanseDirectionLeft ? 'auto' : 0};\n right: ${props.expanseDirectionLeft ? 0 : 'auto'}; \n `}\n`\n\nconst spinAnimation = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nexport const IconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 12px 0;\n`\n\nexport const ChevronIcon = styled(ChevronDown).withConfig<StyledChevronIconProps>({\n shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n ${(props) => `\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${props.up ? 180 : 0}deg);\n `}\n`\n\nexport const LoadingIconAnimated = styled(LoaderFill)`\n transform-origin: center;\n animation: ${spinAnimation} 1600ms infinite linear;\n`\n\nexport const InputMimic = styled.input`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n appearance: none;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n width: 100%;\n height: 100%;\n opacity: 0;\n &:focus {\n outline: none;\n }\n`\n"],"names":["PositionedMenuComponent","styled","MenuComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","expanseDirectionLeft","spinAnimation","keyframes","IconContainer","div","ChevronIcon","ChevronDown","up","LoadingIconAnimated","LoaderFill","InputMimic","input"],"mappings":"4eAKO,MAAMA,wBAA0BC,OAAOC,eAAeC,WAA8B,CACzFC,kBAAoBC,IAAa,CAAC,wBAAwBC,SAASD,KACnEF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,mBAFqCP,CAErC,CAAA,qBAAA,KAGGQ,GAAU,4BAEHA,EAAMC,qBAAuB,OAAS,kBACrCD,EAAMC,qBAAuB,EAAI,kBAI9C,MAAMC,cAAgBC,UAIrB,CAAA,0CAEYC,cAAgBZ,OAAOa,IAAGX,WAAA,CAAAI,YAAA,0BAAAC,YAAA,mBAAVP,CAM5B,CAAA,gGAEM,MAAMc,YAAcd,OAAOe,eAAab,WAAmC,CAChFC,kBAAoBC,GAAYA,IAAY,OAC5CF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,mBAFyBP,CAEzB,CAAA,GAAA,KACGQ,GAAU,gIAISA,EAAMQ,GAAK,IAAM,eAIlC,MAAMC,oBAAsBjB,OAAOkB,cAAWhB,WAAA,CAAAI,YAAA,gCAAAC,YAAA,mBAAlBP,CAAkB,CAAA,qCAAA,4BAEtCU,qBAGFS,WAAanB,OAAOoB,MAAKlB,WAAA,CAAAI,YAAA,uBAAAC,YAAA,mBAAZP,CAgBzB,CAAA"}
package/components/Dropdown/utils.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';exports.getDropdownInputMultipleValue=r=>r?Array.isArray(r)?r.map((r=>r.value)):[r.value]:[],exports.getDropdownInputText=r=>r?Array.isArray(r)?r[0]?r[0].text:'':r.text:'',exports.getDropdownInputValue=r=>r?Array.isArray(r)?r[0]?r[0].value:'':r.value:'',exports.groupDropdownOptions=(r,e)=>r.reduce(((r,t)=>(r[e.includes(t.value)?0:1].push(t),r)),[[],[]]);
1
+ 'use strict';exports.getDropdownInputText=(r,e)=>!r||e||Array.isArray(r)&&!r[0]?'':Array.isArray(r)?r[0].label||r[0].text:r.label||r.text,exports.getDropdownSelectedOption=(r,e)=>r?Array.isArray(r)?e?[...r]:r.slice(0,1):[r]:[],exports.groupDropdownOptions=(r,e)=>r.reduce(((r,t)=>(r[e.find((r=>r.value===t.value))?0:1].push(t),r)),[[],[]]);
2
2
  //# sourceMappingURL=utils.js.map
package/components/Dropdown/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../src/components/Dropdown/utils.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\nimport type { DropdownOption } from './types'\n\nexport const getDropdownInputText = (option: Nullable<DropdownOption | DropdownOption[]>): string => {\n if (!option) return ''\n\n if (Array.isArray(option)) return option[0] ? option[0].text : ''\n\n return option.text\n}\n\nexport const getDropdownInputValue = (option: Nullable<DropdownOption | DropdownOption[]>): string => {\n if (!option) return ''\n\n if (Array.isArray(option)) return option[0] ? option[0].value : ''\n\n return option.value\n}\n\nexport const getDropdownInputMultipleValue = (option: Nullable<DropdownOption | DropdownOption[]>): string[] => {\n if (!option) return []\n\n return Array.isArray(option) ? option.map((item) => item.value) : [option.value]\n}\n\nexport const groupDropdownOptions = (\n options: DropdownOption[],\n selectedOptionsValues: string[]\n): [DropdownOption[], DropdownOption[]] => {\n return options.reduce<[DropdownOption[], DropdownOption[]]>(\n (groups, option) => {\n groups[selectedOptionsValues.includes(option.value) ? 0 : 1].push(option)\n return groups\n },\n [[], []]\n )\n}\n"],"names":["option","Array","isArray","map","item","value","text","groupDropdownOptions","options","selectedOptionsValues","reduce","groups","includes","push"],"mappings":"mDAmB8CA,GACvCA,EAEEC,MAAMC,QAAQF,GAAUA,EAAOG,KAAKC,GAASA,EAAKC,QAAS,CAACL,EAAOK,OAFtD,gCAjBeL,GAC9BA,EAEDC,MAAMC,QAAQF,GAAgBA,EAAO,GAAKA,EAAO,GAAGM,KAAO,GAExDN,EAAOM,KAJM,iCAOgBN,GAC/BA,EAEDC,MAAMC,QAAQF,GAAgBA,EAAO,GAAKA,EAAO,GAAGK,MAAQ,GAEzDL,EAAOK,MAJM,gCAacE,CAClCC,EACAC,IAEOD,EAAQE,QACb,CAACC,EAAQX,KACPW,EAAOF,EAAsBG,SAASZ,EAAOK,OAAS,EAAI,GAAGQ,KAAKb,GAC3DW,IAET,CAAC,GAAI"}
1
+ {"version":3,"file":"utils.js","sources":["../../../../src/components/Dropdown/utils.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\nimport type { DropdownOption } from './types'\n\nexport const getDropdownInputText = (\n option: Nullable<DropdownOption | DropdownOption[]>,\n multiple?: boolean\n): string => {\n if (!option || multiple || (Array.isArray(option) && !option[0])) return ''\n\n if (Array.isArray(option)) return option[0].label || option[0].text\n\n return option.label || option.text\n}\n\nexport const getDropdownSelectedOption = (\n option: Nullable<DropdownOption | DropdownOption[]>,\n multiple?: boolean\n): DropdownOption[] => {\n if (!option) return []\n\n if (Array.isArray(option)) {\n return multiple ? [...option] : option.slice(0, 1)\n }\n\n return [option]\n}\n\nexport const groupDropdownOptions = (\n options: DropdownOption[],\n selectedOptions: DropdownOption[]\n): [DropdownOption[], DropdownOption[]] => {\n return options.reduce<[DropdownOption[], DropdownOption[]]>(\n (groups, option) => {\n groups[selectedOptions.find((selected) => selected.value === option.value) ? 0 : 1].push(option)\n return groups\n },\n [[], []]\n )\n}\n"],"names":["getDropdownInputText","option","multiple","Array","isArray","label","text","getDropdownSelectedOption","slice","groupDropdownOptions","options","selectedOptions","reduce","groups","find","selected","value","push"],"mappings":"0CAGoCA,CAClCC,EACAC,KAEKD,GAAUC,GAAaC,MAAMC,QAAQH,KAAYA,EAAO,GAAY,GAErEE,MAAMC,QAAQH,GAAgBA,EAAO,GAAGI,OAASJ,EAAO,GAAGK,KAExDL,EAAOI,OAASJ,EAAOK,uCAGSC,CACvCN,EACAC,IAEKD,EAEDE,MAAMC,QAAQH,GACTC,EAAW,IAAID,GAAUA,EAAOO,MAAM,EAAG,GAG3C,CAACP,GANY,gCAScQ,CAClCC,EACAC,IAEOD,EAAQE,QACb,CAACC,EAAQZ,KACPY,EAAOF,EAAgBG,MAAMC,GAAaA,EAASC,QAAUf,EAAOe,QAAS,EAAI,GAAGC,KAAKhB,GAClFY,IAET,CAAC,GAAI"}
package/components/Dropdown/utils.mjs CHANGED
@@ -1,2 +1,2 @@
1
- const getDropdownInputText=t=>t?Array.isArray(t)?t[0]?t[0].text:'':t.text:'';const getDropdownInputValue=t=>t?Array.isArray(t)?t[0]?t[0].value:'':t.value:'';const getDropdownInputMultipleValue=t=>t?Array.isArray(t)?t.map((t=>t.value)):[t.value]:[];const groupDropdownOptions=(t,e)=>t.reduce(((t,o)=>(t[e.includes(o.value)?0:1].push(o),t)),[[],[]]);export{getDropdownInputMultipleValue,getDropdownInputText,getDropdownInputValue,groupDropdownOptions};
1
+ const getDropdownInputText=(e,o)=>!e||o||Array.isArray(e)&&!e[0]?'':Array.isArray(e)?e[0].label||e[0].text:e.label||e.text;const getDropdownSelectedOption=(e,o)=>e?Array.isArray(e)?o?[...e]:e.slice(0,1):[e]:[];const groupDropdownOptions=(e,o)=>e.reduce(((e,r)=>(e[o.find((e=>e.value===r.value))?0:1].push(r),e)),[[],[]]);export{getDropdownInputText,getDropdownSelectedOption,groupDropdownOptions};
2
2
  //# sourceMappingURL=utils.mjs.map
package/components/Dropdown/utils.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.mjs","sources":["../../../../src/components/Dropdown/utils.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\nimport type { DropdownOption } from './types'\n\nexport const getDropdownInputText = (option: Nullable<DropdownOption | DropdownOption[]>): string => {\n if (!option) return ''\n\n if (Array.isArray(option)) return option[0] ? option[0].text : ''\n\n return option.text\n}\n\nexport const getDropdownInputValue = (option: Nullable<DropdownOption | DropdownOption[]>): string => {\n if (!option) return ''\n\n if (Array.isArray(option)) return option[0] ? option[0].value : ''\n\n return option.value\n}\n\nexport const getDropdownInputMultipleValue = (option: Nullable<DropdownOption | DropdownOption[]>): string[] => {\n if (!option) return []\n\n return Array.isArray(option) ? option.map((item) => item.value) : [option.value]\n}\n\nexport const groupDropdownOptions = (\n options: DropdownOption[],\n selectedOptionsValues: string[]\n): [DropdownOption[], DropdownOption[]] => {\n return options.reduce<[DropdownOption[], DropdownOption[]]>(\n (groups, option) => {\n groups[selectedOptionsValues.includes(option.value) ? 0 : 1].push(option)\n return groups\n },\n [[], []]\n )\n}\n"],"names":["getDropdownInputText","option","Array","isArray","text","getDropdownInputValue","value","getDropdownInputMultipleValue","map","item","groupDropdownOptions","options","selectedOptionsValues","reduce","groups","includes","push"],"mappings":"AAGaA,MAAAA,qBAAwBC,GAC9BA,EAEDC,MAAMC,QAAQF,GAAgBA,EAAO,GAAKA,EAAO,GAAGG,KAAO,GAExDH,EAAOG,KAJM,GAOTC,MAAAA,sBAAyBJ,GAC/BA,EAEDC,MAAMC,QAAQF,GAAgBA,EAAO,GAAKA,EAAO,GAAGK,MAAQ,GAEzDL,EAAOK,MAJM,GAOTC,MAAAA,8BAAiCN,GACvCA,EAEEC,MAAMC,QAAQF,GAAUA,EAAOO,KAAKC,GAASA,EAAKH,QAAS,CAACL,EAAOK,OAFtD,SAKTI,qBAAuBA,CAClCC,EACAC,IAEOD,EAAQE,QACb,CAACC,EAAQb,KACPa,EAAOF,EAAsBG,SAASd,EAAOK,OAAS,EAAI,GAAGU,KAAKf,GAC3Da,IAET,CAAC,GAAI"}
1
+ {"version":3,"file":"utils.mjs","sources":["../../../../src/components/Dropdown/utils.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\nimport type { DropdownOption } from './types'\n\nexport const getDropdownInputText = (\n option: Nullable<DropdownOption | DropdownOption[]>,\n multiple?: boolean\n): string => {\n if (!option || multiple || (Array.isArray(option) && !option[0])) return ''\n\n if (Array.isArray(option)) return option[0].label || option[0].text\n\n return option.label || option.text\n}\n\nexport const getDropdownSelectedOption = (\n option: Nullable<DropdownOption | DropdownOption[]>,\n multiple?: boolean\n): DropdownOption[] => {\n if (!option) return []\n\n if (Array.isArray(option)) {\n return multiple ? [...option] : option.slice(0, 1)\n }\n\n return [option]\n}\n\nexport const groupDropdownOptions = (\n options: DropdownOption[],\n selectedOptions: DropdownOption[]\n): [DropdownOption[], DropdownOption[]] => {\n return options.reduce<[DropdownOption[], DropdownOption[]]>(\n (groups, option) => {\n groups[selectedOptions.find((selected) => selected.value === option.value) ? 0 : 1].push(option)\n return groups\n },\n [[], []]\n )\n}\n"],"names":["getDropdownInputText","option","multiple","Array","isArray","label","text","getDropdownSelectedOption","slice","groupDropdownOptions","options","selectedOptions","reduce","groups","find","selected","value","push"],"mappings":"MAGaA,qBAAuBA,CAClCC,EACAC,KAEKD,GAAUC,GAAaC,MAAMC,QAAQH,KAAYA,EAAO,GAAY,GAErEE,MAAMC,QAAQH,GAAgBA,EAAO,GAAGI,OAASJ,EAAO,GAAGK,KAExDL,EAAOI,OAASJ,EAAOK,WAGnBC,0BAA4BA,CACvCN,EACAC,IAEKD,EAEDE,MAAMC,QAAQH,GACTC,EAAW,IAAID,GAAUA,EAAOO,MAAM,EAAG,GAG3C,CAACP,GANY,SASTQ,qBAAuBA,CAClCC,EACAC,IAEOD,EAAQE,QACb,CAACC,EAAQZ,KACPY,EAAOF,EAAgBG,MAAMC,GAAaA,EAASC,QAAUf,EAAOe,QAAS,EAAI,GAAGC,KAAKhB,GAClFY,IAET,CAAC,GAAI"}
package/components/FormInput/style.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');function _interopDefault(n){return n&&n.__esModule?n:{default:n}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);const Root=styled__default.default.span.withConfig({shouldForwardProp:n=>!['fading'].includes(n)}).withConfig({displayName:"FormInput__Root",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${n.fading?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `));const Input=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:n=>!['palette'].includes(n)}).withConfig({displayName:"FormInput__Input",componentId:"ui__sc-1eiwrfu-1"})(["box-sizing:border-box;appearance:textfield;border:none;padding:0;margin:0;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&[type='number']::-webkit-outer-spin-button,&[type='number']::-webkit-inner-spin-button{appearance:none;margin:0;}&:focus{cursor:text;outline:none;}",""],(n=>{return`\n color: ${(e={color:n.theme.colors['content-onmain-primary'],placeholderColor:n.theme.colors['content-onmain-secondary'],colorDisabled:n.theme.colors['content-disabled'],placeholderColorDisabled:n.theme.colors['content-disabled'],...n.palette}).color};\n &:disabled {\n color: ${e.colorDisabled};\n }\n &::placeholder {\n color: ${e.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${e.placeholderColorDisabled};\n }\n`;var e}));exports.Input=Input,exports.Root=Root;
1
+ 'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');function _interopDefault(n){return n&&n.__esModule?n:{default:n}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);const Root=styled__default.default.span.withConfig({shouldForwardProp:n=>!['fading'].includes(n)}).withConfig({displayName:"FormInput__Root",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${n.fading?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `));const Input=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:n=>!['palette'].includes(n)}).withConfig({displayName:"FormInput__Input",componentId:"ui__sc-1eiwrfu-1"})(["box-sizing:border-box;appearance:textfield;border:none;padding:0;margin:0;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&[type='number']::-webkit-outer-spin-button,&[type='number']::-webkit-inner-spin-button{appearance:none;margin:0;}&:focus{outline:none;}&:focus:read-write{cursor:text;}",""],(n=>{return`\n color: ${(e={color:n.theme.colors['content-onmain-primary'],placeholderColor:n.theme.colors['content-onmain-secondary'],colorDisabled:n.theme.colors['content-disabled'],placeholderColorDisabled:n.theme.colors['content-disabled'],...n.palette}).color};\n &:disabled {\n color: ${e.colorDisabled};\n }\n &::placeholder {\n color: ${e.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${e.placeholderColorDisabled};\n }\n`;var e}));exports.Input=Input,exports.Root=Root;
2
2
  //# sourceMappingURL=style.js.map
package/components/FormInput/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport type { StyledFormInputProps, StyledFormInputRootProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.span.withConfig<StyledFormInputRootProps>({\n shouldForwardProp: (propKey) => !['fading'].includes(propKey),\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${props.fading ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `}\n`\n\nexport const Input: React.ComponentType<StyledFormInputProps> = styled(InputMask).withConfig<StyledFormInputProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n &:focus {\n cursor: text;\n outline: none;\n }\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n placeholderColor: props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n"],"names":["Root","styled","span","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","fading","Input","default","InputMask","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled"],"mappings":"8PAiBO,MAAMA,KAAOC,gBAAAA,QAAOC,KAAKC,WAAqC,CACnEC,kBAAoBC,IAAa,CAAC,UAAUC,SAASD,KACrDF,WAAA,CAAAI,YAAA,kBAAAC,YAAA,oBAFkBP,CAElB,CAAA,GAAA,KACGQ,GAAU,0RAcEA,EAAMC,OAAS,EAAI,uSAc7B,MAAMC,MAAmDV,gBAAMW,QAACC,4BAAWV,WAAiC,CACjHC,kBAAoBC,IAAa,CAAC,WAAWC,SAASD,KACtDF,WAAA,CAAAI,YAAA,mBAAAC,YAAA,oBAF8DP,CA2B3DQ,CAAAA,iXAAAA,KAAAA,IACDK,MAxE4C,eAA9BC,EAwEL,CACPC,MAAOP,EAAMQ,MAAMC,OAAO,0BAC1BC,iBAAkBV,EAAMQ,MAAMC,OAAO,4BACrCE,cAAeX,EAAMQ,MAAMC,OAAO,oBAClCG,yBAA0BZ,EAAMQ,MAAMC,OAAO,uBAC1CT,EAAMM,UA5EIC,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCATHN,KA8EZ"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport type { StyledFormInputProps, StyledFormInputRootProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.span.withConfig<StyledFormInputRootProps>({\n shouldForwardProp: (propKey) => !['fading'].includes(propKey),\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${props.fading ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `}\n`\n\nexport const Input: React.ComponentType<StyledFormInputProps> = styled(InputMask).withConfig<StyledFormInputProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n &:focus {\n outline: none;\n }\n\n &:focus:read-write {\n cursor: text;\n }\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n placeholderColor: props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n"],"names":["Root","styled","span","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","fading","Input","default","InputMask","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled"],"mappings":"8PAiBO,MAAMA,KAAOC,gBAAAA,QAAOC,KAAKC,WAAqC,CACnEC,kBAAoBC,IAAa,CAAC,UAAUC,SAASD,KACrDF,WAAA,CAAAI,YAAA,kBAAAC,YAAA,oBAFkBP,CAElB,CAAA,GAAA,KACGQ,GAAU,0RAcEA,EAAMC,OAAS,EAAI,uSAc7B,MAAMC,MAAmDV,gBAAMW,QAACC,4BAAWV,WAAiC,CACjHC,kBAAoBC,IAAa,CAAC,WAAWC,SAASD,KACtDF,WAAA,CAAAI,YAAA,mBAAAC,YAAA,oBAF8DP,CA8B3DQ,CAAAA,qYAAAA,KAAAA,IACDK,MA3E4C,eAA9BC,EA2EL,CACPC,MAAOP,EAAMQ,MAAMC,OAAO,0BAC1BC,iBAAkBV,EAAMQ,MAAMC,OAAO,4BACrCE,cAAeX,EAAMQ,MAAMC,OAAO,oBAClCG,yBAA0BZ,EAAMQ,MAAMC,OAAO,uBAC1CT,EAAMM,UA/EIC,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCATHN,KAiFZ"}
package/components/FormInput/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled from'styled-components';import InputMask from'react-input-mask';const Root=styled.span.withConfig({shouldForwardProp:n=>!['fading'].includes(n)}).withConfig({displayName:"FormInput__Root",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${n.fading?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `));const Input=styled(InputMask).withConfig({shouldForwardProp:n=>!['palette'].includes(n)}).withConfig({displayName:"FormInput__Input",componentId:"ui__sc-1eiwrfu-1"})(["box-sizing:border-box;appearance:textfield;border:none;padding:0;margin:0;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&[type='number']::-webkit-outer-spin-button,&[type='number']::-webkit-inner-spin-button{appearance:none;margin:0;}&:focus{cursor:text;outline:none;}",""],(n=>{return`\n color: ${(o={color:n.theme.colors['content-onmain-primary'],placeholderColor:n.theme.colors['content-onmain-secondary'],colorDisabled:n.theme.colors['content-disabled'],placeholderColorDisabled:n.theme.colors['content-disabled'],...n.palette}).color};\n &:disabled {\n color: ${o.colorDisabled};\n }\n &::placeholder {\n color: ${o.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${o.placeholderColorDisabled};\n }\n`;var o}));export{Input,Root};
1
+ import styled from'styled-components';import InputMask from'react-input-mask';const Root=styled.span.withConfig({shouldForwardProp:n=>!['fading'].includes(n)}).withConfig({displayName:"FormInput__Root",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${n.fading?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `));const Input=styled(InputMask).withConfig({shouldForwardProp:n=>!['palette'].includes(n)}).withConfig({displayName:"FormInput__Input",componentId:"ui__sc-1eiwrfu-1"})(["box-sizing:border-box;appearance:textfield;border:none;padding:0;margin:0;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&[type='number']::-webkit-outer-spin-button,&[type='number']::-webkit-inner-spin-button{appearance:none;margin:0;}&:focus{outline:none;}&:focus:read-write{cursor:text;}",""],(n=>{return`\n color: ${(o={color:n.theme.colors['content-onmain-primary'],placeholderColor:n.theme.colors['content-onmain-secondary'],colorDisabled:n.theme.colors['content-disabled'],placeholderColorDisabled:n.theme.colors['content-disabled'],...n.palette}).color};\n &:disabled {\n color: ${o.colorDisabled};\n }\n &::placeholder {\n color: ${o.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${o.placeholderColorDisabled};\n }\n`;var o}));export{Input,Root};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/FormInput/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport type { StyledFormInputProps, StyledFormInputRootProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.span.withConfig<StyledFormInputRootProps>({\n shouldForwardProp: (propKey) => !['fading'].includes(propKey),\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${props.fading ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `}\n`\n\nexport const Input: React.ComponentType<StyledFormInputProps> = styled(InputMask).withConfig<StyledFormInputProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n &:focus {\n cursor: text;\n outline: none;\n }\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n placeholderColor: props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n"],"names":["Root","styled","span","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","fading","Input","InputMask","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled"],"mappings":"8EAiBO,MAAMA,KAAOC,OAAOC,KAAKC,WAAqC,CACnEC,kBAAoBC,IAAa,CAAC,UAAUC,SAASD,KACrDF,WAAA,CAAAI,YAAA,kBAAAC,YAAA,oBAFkBP,CAElB,CAAA,GAAA,KACGQ,GAAU,0RAcEA,EAAMC,OAAS,EAAI,uSAc7B,MAAMC,MAAmDV,OAAOW,WAAWT,WAAiC,CACjHC,kBAAoBC,IAAa,CAAC,WAAWC,SAASD,KACtDF,WAAA,CAAAI,YAAA,mBAAAC,YAAA,oBAF8DP,CA2B3DQ,CAAAA,iXAAAA,KAAAA,IACDI,MAxE4C,eAA9BC,EAwEL,CACPC,MAAON,EAAMO,MAAMC,OAAO,0BAC1BC,iBAAkBT,EAAMO,MAAMC,OAAO,4BACrCE,cAAeV,EAAMO,MAAMC,OAAO,oBAClCG,yBAA0BX,EAAMO,MAAMC,OAAO,uBAC1CR,EAAMK,UA5EIC,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCATHN,KA8EZ"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport type { StyledFormInputProps, StyledFormInputRootProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.span.withConfig<StyledFormInputRootProps>({\n shouldForwardProp: (propKey) => !['fading'].includes(propKey),\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n position: relative;\n width: 100%;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: ${props.fading ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after,\n &:focus-within::after {\n opacity: 0;\n }\n `}\n`\n\nexport const Input: React.ComponentType<StyledFormInputProps> = styled(InputMask).withConfig<StyledFormInputProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n &:focus {\n outline: none;\n }\n\n &:focus:read-write {\n cursor: text;\n }\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n placeholderColor: props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n"],"names":["Root","styled","span","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","props","fading","Input","InputMask","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled"],"mappings":"8EAiBO,MAAMA,KAAOC,OAAOC,KAAKC,WAAqC,CACnEC,kBAAoBC,IAAa,CAAC,UAAUC,SAASD,KACrDF,WAAA,CAAAI,YAAA,kBAAAC,YAAA,oBAFkBP,CAElB,CAAA,GAAA,KACGQ,GAAU,0RAcEA,EAAMC,OAAS,EAAI,uSAc7B,MAAMC,MAAmDV,OAAOW,WAAWT,WAAiC,CACjHC,kBAAoBC,IAAa,CAAC,WAAWC,SAASD,KACtDF,WAAA,CAAAI,YAAA,mBAAAC,YAAA,oBAF8DP,CA8B3DQ,CAAAA,qYAAAA,KAAAA,IACDI,MA3E4C,eAA9BC,EA2EL,CACPC,MAAON,EAAMO,MAAMC,OAAO,0BAC1BC,iBAAkBT,EAAMO,MAAMC,OAAO,4BACrCE,cAAeV,EAAMO,MAAMC,OAAO,oBAClCG,yBAA0BX,EAAMO,MAAMC,OAAO,uBAC1CR,EAAMK,UA/EIC,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCATHN,KAiFZ"}
package/components/FormInputLabel/style.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardFormInputLabelProp=style.createShouldForwardProp((o=>!['primary','secondary','error','success','disabled','onColored','inline','zIndex'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n &:hover {\n background-color: ${o.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor.default(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled__default.default.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," ",""],(o=>{const e='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${e} solid transparent;\n z-index: ${o.zIndex??'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${e};\n left: -${e};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `}),(o=>{let e=COLOR_SCHEMA.primary;return o.secondary&&(e=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.disabled?e.disabled:o.error?e.error:o.success?e.success:e.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Label=styled__default.default.span.withConfig({displayName:"FormInputLabel__Label",componentId:"ui__sc-1il4atw-2"})(["box-sizing:border-box;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition-property:transform,width;transition-duration:","ms,0ms;transition-delay:0ms,0ms;transition-timing-function:cubic-bezier(0,0,0.48,1);"],125);const InputContainer=styled__default.default.div.withConfig({shouldForwardProp:o=>!['labelPosition','labelActive'].includes(o)}).withConfig({displayName:"FormInputLabel__InputContainer",componentId:"ui__sc-1il4atw-3"})(["box-sizing:border-box;position:relative;display:flex;flex-grow:1;align-self:stretch;cursor:inherit;"," "," ",""],(o=>o.labelPosition==='dynamic'&&`\n padding-top: 0.8em;\n\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n ${o.labelActive&&`& > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }`}\n `),(o=>o.labelPosition==='top'&&`\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }\n `),(o=>o.labelPosition==='center'&&`\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n & > ${Label} {\n opacity: ${o.labelActive?0:1};\n z-index: ${o.labelActive?-1:'auto'};\n }\n `));exports.Dropdown=Dropdown,exports.InputContainer=InputContainer,exports.Label=Label,exports.Root=Root;
1
+ 'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardFormInputLabelProp=style.createShouldForwardProp((o=>!['primary','secondary','error','success','disabled','onColored','inline','zIndex'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n &:hover {\n background-color: ${o.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor.default(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled__default.default.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," ",""],(o=>{const e='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${e} solid transparent;\n z-index: ${o.zIndex??'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${e};\n left: -${e};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `}),(o=>{let e=COLOR_SCHEMA.primary;return o.secondary&&(e=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.disabled?e.disabled:o.error?e.error:o.success?e.success:e.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Label=styled__default.default.span.withConfig({displayName:"FormInputLabel__Label",componentId:"ui__sc-1il4atw-2"})(["box-sizing:border-box;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition-property:transform,width;transition-duration:","ms,0ms;transition-delay:0ms,0ms;transition-timing-function:cubic-bezier(0,0,0.48,1);"],125);const InputContainer=styled__default.default.div.withConfig({shouldForwardProp:o=>!['labelPosition','labelActive'].includes(o)}).withConfig({displayName:"FormInputLabel__InputContainer",componentId:"ui__sc-1il4atw-3"})(["box-sizing:border-box;position:relative;display:flex;flex-grow:1;align-self:stretch;cursor:inherit;"," "," ",""],(o=>o.labelPosition==='dynamic'&&`\n padding-top: 0.8em;\n\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n ${o.labelActive&&`& > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }`}\n `),(o=>o.labelPosition==='top'&&`\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }\n `),(o=>o.labelPosition==='center'&&`\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n & > ${Label} {\n opacity: ${o.labelActive?0:1};\n z-index: ${o.labelActive?-1:'auto'};\n }\n `));exports.Dropdown=Dropdown,exports.InputContainer=InputContainer,exports.Label=Label,exports.Root=Root;
2
2
  //# sourceMappingURL=style.js.map
package/components/FormInputLabel/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledInputContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n !['primary', 'secondary', 'error', 'success', 'disabled', 'onColored', 'inline', 'zIndex'].includes(propKey)\n)\n\nconst labelTransitionMS = 125\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n background-color: ${palette.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Label = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform, width;\n transition-duration: ${labelTransitionMS}ms, 0ms;\n transition-delay: 0ms, 0ms;\n transition-timing-function: cubic-bezier(0, 0, 0.48, 1);\n`\n\nexport const InputContainer = styled.div.withConfig<StyledInputContainerProps>({\n shouldForwardProp: (propKey) => !['labelPosition', 'labelActive'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n\n ${(props) =>\n props.labelPosition === 'dynamic' &&\n `\n padding-top: 0.8em;\n\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n ${\n props.labelActive &&\n `& > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }`\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'top' &&\n `\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'center' &&\n `\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n & > ${Label} {\n opacity: ${props.labelActive ? 0 : 1};\n z-index: ${props.labelActive ? -1 : 'auto'};\n }\n `}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","white","schema","onColored","responsiveSize","responsiveMargin","Label","span","InputContainer","labelPosition","labelActive"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledInputContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n !['primary', 'secondary', 'error', 'success', 'disabled', 'onColored', 'inline', 'zIndex'].includes(propKey)\n)\n\nconst labelTransitionMS = 125\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n background-color: ${palette.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Label = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform, width;\n transition-duration: ${labelTransitionMS}ms, 0ms;\n transition-delay: 0ms, 0ms;\n transition-timing-function: cubic-bezier(0, 0, 0.48, 1);\n`\n\nexport const InputContainer = styled.div.withConfig<StyledInputContainerProps>({\n shouldForwardProp: (propKey) => !['labelPosition', 'labelActive'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n\n ${(props) =>\n props.labelPosition === 'dynamic' &&\n `\n padding-top: 0.8em;\n\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n ${\n props.labelActive &&\n `& > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }`\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'top' &&\n `\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'center' &&\n `\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n & > ${Label} {\n opacity: ${props.labelActive ? 0 : 1};\n z-index: ${props.labelActive ? -1 : 'auto'};\n }\n `}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","white","schema","onColored","responsiveSize","responsiveMargin","Label","span","InputContainer","labelPosition","labelActive"],"mappings":"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"}
package/components/FormInputLabel/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardFormInputLabelProp=createShouldForwardProp((o=>!['primary','secondary','error','success','disabled','onColored','inline','zIndex'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n &:hover {\n background-color: ${o.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," ",""],(o=>{const e='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${e} solid transparent;\n z-index: ${o.zIndex??'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${e};\n left: -${e};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `}),(o=>{let e=COLOR_SCHEMA.primary;return o.secondary&&(e=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.disabled?e.disabled:o.error?e.error:o.success?e.success:e.default}),responsiveSize,responsiveMargin);const Label=styled.span.withConfig({displayName:"FormInputLabel__Label",componentId:"ui__sc-1il4atw-2"})(["box-sizing:border-box;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition-property:transform,width;transition-duration:","ms,0ms;transition-delay:0ms,0ms;transition-timing-function:cubic-bezier(0,0,0.48,1);"],125);const InputContainer=styled.div.withConfig({shouldForwardProp:o=>!['labelPosition','labelActive'].includes(o)}).withConfig({displayName:"FormInputLabel__InputContainer",componentId:"ui__sc-1il4atw-3"})(["box-sizing:border-box;position:relative;display:flex;flex-grow:1;align-self:stretch;cursor:inherit;"," "," ",""],(o=>o.labelPosition==='dynamic'&&`\n padding-top: 0.8em;\n\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n ${o.labelActive&&`& > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }`}\n `),(o=>o.labelPosition==='top'&&`\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }\n `),(o=>o.labelPosition==='center'&&`\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n & > ${Label} {\n opacity: ${o.labelActive?0:1};\n z-index: ${o.labelActive?-1:'auto'};\n }\n `));export{Dropdown,InputContainer,Label,Root};
1
+ import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardFormInputLabelProp=createShouldForwardProp((o=>!['primary','secondary','error','success','disabled','onColored','inline','zIndex'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n &:hover {\n background-color: ${o.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," ",""],(o=>{const e='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${e} solid transparent;\n z-index: ${o.zIndex??'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${e};\n left: -${e};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `}),(o=>{let e=COLOR_SCHEMA.primary;return o.secondary&&(e=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.disabled?e.disabled:o.error?e.error:o.success?e.success:e.default}),responsiveSize,responsiveMargin);const Label=styled.span.withConfig({displayName:"FormInputLabel__Label",componentId:"ui__sc-1il4atw-2"})(["box-sizing:border-box;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition-property:transform,width;transition-duration:","ms,0ms;transition-delay:0ms,0ms;transition-timing-function:cubic-bezier(0,0,0.48,1);"],125);const InputContainer=styled.div.withConfig({shouldForwardProp:o=>!['labelPosition','labelActive'].includes(o)}).withConfig({displayName:"FormInputLabel__InputContainer",componentId:"ui__sc-1il4atw-3"})(["box-sizing:border-box;position:relative;display:flex;flex-grow:1;align-self:stretch;cursor:inherit;"," "," ",""],(o=>o.labelPosition==='dynamic'&&`\n padding-top: 0.8em;\n\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n ${o.labelActive&&`& > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }`}\n `),(o=>o.labelPosition==='top'&&`\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, 125ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }\n `),(o=>o.labelPosition==='center'&&`\n & input {\n opacity: ${o.labelActive?1:0};\n }\n\n & > ${Label} {\n opacity: ${o.labelActive?0:1};\n z-index: ${o.labelActive?-1:'auto'};\n }\n `));export{Dropdown,InputContainer,Label,Root};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/FormInputLabel/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledInputContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n !['primary', 'secondary', 'error', 'success', 'disabled', 'onColored', 'inline', 'zIndex'].includes(propKey)\n)\n\nconst labelTransitionMS = 125\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n background-color: ${palette.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Label = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform, width;\n transition-duration: ${labelTransitionMS}ms, 0ms;\n transition-delay: 0ms, 0ms;\n transition-timing-function: cubic-bezier(0, 0, 0.48, 1);\n`\n\nexport const InputContainer = styled.div.withConfig<StyledInputContainerProps>({\n shouldForwardProp: (propKey) => !['labelPosition', 'labelActive'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n\n ${(props) =>\n props.labelPosition === 'dynamic' &&\n `\n padding-top: 0.8em;\n\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n ${\n props.labelActive &&\n `& > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }`\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'top' &&\n `\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.5%) translateY(-145%);\n width: 130%;\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'center' &&\n `\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n & > ${Label} {\n opacity: ${props.labelActive ? 0 : 1};\n z-index: ${props.labelActive ? -1 : 'auto'};\n }\n `}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","white","schema","onColored","responsiveSize","responsiveMargin","Label","span","InputContainer","labelPosition","labelActive"],"mappings":"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"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledInputContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n !['primary', 'secondary', 'error', 'success', 'disabled', 'onColored', 'inline', 'zIndex'].includes(propKey)\n)\n\nconst labelTransitionMS = 125\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n background-color: ${palette.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-control]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover [data-input-control]::after,\n &:focus-within [data-input-control]::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Label = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform, width;\n transition-duration: ${labelTransitionMS}ms, 0ms;\n transition-delay: 0ms, 0ms;\n transition-timing-function: cubic-bezier(0, 0, 0.48, 1);\n`\n\nexport const InputContainer = styled.div.withConfig<StyledInputContainerProps>({\n shouldForwardProp: (propKey) => !['labelPosition', 'labelActive'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n\n ${(props) =>\n props.labelPosition === 'dynamic' &&\n `\n padding-top: 0.8em;\n\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n ${\n props.labelActive &&\n `& > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }`\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'top' &&\n `\n padding-top: 0.8em;\n\n & > ${Label} {\n transition-delay: 0ms, ${labelTransitionMS}ms;\n transform: scale(0.7) translateX(-21.4%) translateY(-140%);\n width: 130%;\n }\n `}\n\n ${(props) =>\n props.labelPosition === 'center' &&\n `\n & input {\n opacity: ${props.labelActive ? 1 : 0};\n }\n\n & > ${Label} {\n opacity: ${props.labelActive ? 0 : 1};\n z-index: ${props.labelActive ? -1 : 'auto'};\n }\n `}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","white","schema","onColored","responsiveSize","responsiveMargin","Label","span","InputContainer","labelPosition","labelActive"],"mappings":"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"}
package/components/MenuList/MenuList.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var dom=require('../../shared/utils/dom.js');var constants=require('../../shared/constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const HOT_KEYS=[...constants.keyboardKeys.ArrowUp.key,...constants.keyboardKeys.ArrowDown.key];exports.MenuList=React.forwardRef(((e,s)=>{const{role:r="list",gap:t=4,size:i,sizeXXS:n,sizeXS:o,sizeS:c,sizeM:a,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u,...y}=e;const z={size:i,sizeXXS:n,sizeXS:o,sizeS:c,sizeM:a,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u};const h=React.isValidElement(y.children)&&y.children.type===React.Fragment&&typeof y.children.props=='object'&&y.children.props!==null?y.children.props.children:y.children;return require$$0.jsx(style.Root,{...y,role:r,gap:t,onKeyDown:e=>{if(y.onKeyDown&&y.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let r=s.findIndex((s=>s.contains(e.target)));for(;r>=0&&r<s.length;){r=constants.keyboardKeys.ArrowUp.validate(e.key)?--r:++r;const t=s[r];if(t instanceof HTMLElement&&dom.focusFirstFocusable(t))break}}},ref:s,children:React.Children.map(h,((e,s)=>require$$0.jsx("li",React.isValidElement(e)?{children:React.cloneElement(e,{...z,...typeof e.props=='object'&&e.props!==null?e.props:{}})}:{children:e},s)))})}));
1
+ 'use strict';var React=require('react');var dom=require('../../shared/utils/dom.js');var constants=require('../../shared/constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const HOT_KEYS=[...constants.keyboardKeys.ArrowUp.key,...constants.keyboardKeys.ArrowDown.key];exports.MenuList=React.forwardRef(((e,r)=>{const{role:s="list",gap:t=4,size:i,sizeXXS:n,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u,...y}=e;const z={size:i,sizeXXS:n,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u};const h=React.isValidElement(y.children)&&y.children.type===React.Fragment&&typeof y.children.props=='object'&&y.children.props!==null?y.children.props.children:y.children;return require$$0.jsx(style.Root,{...y,role:s,gap:t,onKeyDown:e=>{if(y.onKeyDown&&y.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const r=[...e.currentTarget.children];let s=r.findIndex((r=>r.contains(e.target)));for(;s>=0&&s<r.length;){s=constants.keyboardKeys.ArrowUp.validate(e.key)?--s:++s;const t=r[s];if(t instanceof HTMLElement&&dom.focusFirstFocusable(t))break}}},ref:r,children:React.Children.map(h,((e,r)=>React.isValidElement(e)?require$$0.jsx("li",{children:React.cloneElement(e,{...z,...typeof e.props=='object'&&e.props!==null?e.props:{}})},r):e===null||e===void 0||typeof e=='boolean'?e:require$$0.jsx("li",{children:e},r)))})}));
2
2
  //# sourceMappingURL=MenuList.js.map
package/components/MenuList/MenuList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.js","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n (props, ref) => {\n const {\n role = 'list',\n gap = 4,\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n }\n\n const children =\n isValidElement(restProps.children) &&\n restProps.children.type === Fragment &&\n typeof restProps.children.props === 'object' &&\n restProps.children.props !== null\n ? restProps.children.props.children\n : restProps.children\n\n return (\n <Styled.Root\n {...restProps}\n role={role}\n gap={gap}\n onKeyDown={(evt) => {\n if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n if (HOT_KEYS.includes(evt.key)) {\n evt.preventDefault()\n\n const listItems = [...evt.currentTarget.children]\n let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n while (idx >= 0 && idx < listItems.length) {\n idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n const nextItem = listItems[idx]\n\n if (nextItem instanceof HTMLElement && focusFirstFocusable(nextItem)) {\n break\n }\n }\n }\n }}\n ref={ref}\n >\n {Children.map(children, (child, idx) => {\n if (isValidElement(child)) {\n const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n }\n\n return <li key={idx}>{child}</li>\n })}\n </Styled.Root>\n )\n }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","length","validate","nextItem","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement"],"mappings":"oNAMA,MAAMA,SAAqB,IAAIC,UAAAA,aAAaC,QAAQC,OAAQF,UAAYA,aAACG,UAAUD,sBAYlBE,MAAUA,YACzE,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,MAAAA,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,uBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,WAAAA,IAACC,MAAAA,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC5B,SAAS6B,SAASD,EAAIzB,KAAM,CAC9ByB,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,KAAOJ,GAAO,GAAKA,EAAMF,EAAUO,QAAQ,CACzCL,EAAMhC,UAAAA,aAAaC,QAAQqC,SAASX,EAAIzB,OAAS8B,IAAQA,EAEzD,MAAMO,EAAWT,EAAUE,GAE3B,GAAIO,aAAoBC,aAAeC,IAAmBA,oBAACF,GACzD,KAEJ,CACF,GAEFjC,IAAKA,EAAIc,SAERsB,MAAQA,SAACC,IAAIvB,GAAU,CAACwB,EAAOZ,IAIrBR,WAAAA,IAAA,KAHLH,MAAAA,eAAeuB,GAGV,CAAAxB,SAAeyB,MAAYA,aAACD,EAAO,IAAKzB,YAFrByB,EAAMvC,OAAU,UAAYuC,EAAMvC,QAAU,KAAOuC,EAAMvC,MAAQ,CAAA,KAKtF,CAAAe,SAAewB,GAHJZ,MAKR"}
1
+ {"version":3,"file":"MenuList.js","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n (props, ref) => {\n const {\n role = 'list',\n gap = 4,\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n }\n\n const children =\n isValidElement(restProps.children) &&\n restProps.children.type === Fragment &&\n typeof restProps.children.props === 'object' &&\n restProps.children.props !== null\n ? restProps.children.props.children\n : restProps.children\n\n return (\n <Styled.Root\n {...restProps}\n role={role}\n gap={gap}\n onKeyDown={(evt) => {\n if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n if (HOT_KEYS.includes(evt.key)) {\n evt.preventDefault()\n\n const listItems = [...evt.currentTarget.children]\n let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n while (idx >= 0 && idx < listItems.length) {\n idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n const nextItem = listItems[idx]\n\n if (nextItem instanceof HTMLElement && focusFirstFocusable(nextItem)) {\n break\n }\n }\n }\n }}\n ref={ref}\n >\n {Children.map(children, (child, idx) => {\n if (isValidElement(child)) {\n const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n }\n\n return child === null || child === undefined || typeof child === 'boolean' ? (\n child\n ) : (\n <li key={idx}>{child}</li>\n )\n })}\n </Styled.Root>\n )\n }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","length","validate","nextItem","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement","undefined","jsx"],"mappings":"oNAMA,MAAMA,SAAqB,IAAIC,UAAAA,aAAaC,QAAQC,OAAQF,UAAYA,aAACG,UAAUD,sBAYlBE,MAAUA,YACzE,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,MAAAA,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,uBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,WAAAA,IAACC,MAAAA,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC5B,SAAS6B,SAASD,EAAIzB,KAAM,CAC9ByB,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,KAAOJ,GAAO,GAAKA,EAAMF,EAAUO,QAAQ,CACzCL,EAAMhC,UAAAA,aAAaC,QAAQqC,SAASX,EAAIzB,OAAS8B,IAAQA,EAEzD,MAAMO,EAAWT,EAAUE,GAE3B,GAAIO,aAAoBC,aAAeC,IAAmBA,oBAACF,GACzD,KAEJ,CACF,GAEFjC,IAAKA,EAAIc,SAERsB,MAAQA,SAACC,IAAIvB,GAAU,CAACwB,EAAOZ,IAC1BX,MAAAA,eAAeuB,GAGVpB,WAAAA,IAAA,KAAA,CAAAJ,SAAeyB,MAAYA,aAACD,EAAO,IAAKzB,YAFrByB,EAAMvC,OAAU,UAAYuC,EAAMvC,QAAU,KAAOuC,EAAMvC,MAAQ,CAAA,KAE3E2B,GAGXY,IAAU,MAAQA,SAAUE,UAAoBF,GAAU,UAC/DA,EAEApB,WAAAuB,IAAA,KAAA,CAAA3B,SAAewB,GAANZ,MAGD"}
package/components/MenuList/MenuList.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import{forwardRef,isValidElement,Fragment,Children,cloneElement}from'react';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';const HOT_KEYS=[...keyboardKeys.ArrowUp.key,...keyboardKeys.ArrowDown.key];const MenuList=forwardRef(((e,s)=>{const{role:r="list",gap:o=4,size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m,...f}=e;const y={size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m};const z=isValidElement(f.children)&&f.children.type===Fragment&&typeof f.children.props=='object'&&f.children.props!==null?f.children.props.children:f.children;return jsx(Root,{...f,role:r,gap:o,onKeyDown:e=>{if(f.onKeyDown&&f.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let r=s.findIndex((s=>s.contains(e.target)));for(;r>=0&&r<s.length;){r=keyboardKeys.ArrowUp.validate(e.key)?--r:++r;const o=s[r];if(o instanceof HTMLElement&&focusFirstFocusable(o))break}}},ref:s,children:Children.map(z,((e,s)=>jsx("li",isValidElement(e)?{children:cloneElement(e,{...y,...typeof e.props=='object'&&e.props!==null?e.props:{}})}:{children:e},s)))})}));export{MenuList};
1
+ import{forwardRef,isValidElement,Fragment,Children,cloneElement}from'react';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';const HOT_KEYS=[...keyboardKeys.ArrowUp.key,...keyboardKeys.ArrowDown.key];const MenuList=forwardRef(((e,s)=>{const{role:o="list",gap:r=4,size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m,...f}=e;const y={size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m};const z=isValidElement(f.children)&&f.children.type===Fragment&&typeof f.children.props=='object'&&f.children.props!==null?f.children.props.children:f.children;return jsx(Root,{...f,role:o,gap:r,onKeyDown:e=>{if(f.onKeyDown&&f.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let o=s.findIndex((s=>s.contains(e.target)));for(;o>=0&&o<s.length;){o=keyboardKeys.ArrowUp.validate(e.key)?--o:++o;const r=s[o];if(r instanceof HTMLElement&&focusFirstFocusable(r))break}}},ref:s,children:Children.map(z,((e,s)=>isValidElement(e)?jsx("li",{children:cloneElement(e,{...y,...typeof e.props=='object'&&e.props!==null?e.props:{}})},s):e===null||e===void 0||typeof e=='boolean'?e:jsx("li",{children:e},s)))})}));export{MenuList};
2
2
  //# sourceMappingURL=MenuList.mjs.map
package/components/MenuList/MenuList.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.mjs","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n (props, ref) => {\n const {\n role = 'list',\n gap = 4,\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n }\n\n const children =\n isValidElement(restProps.children) &&\n restProps.children.type === Fragment &&\n typeof restProps.children.props === 'object' &&\n restProps.children.props !== null\n ? restProps.children.props.children\n : restProps.children\n\n return (\n <Styled.Root\n {...restProps}\n role={role}\n gap={gap}\n onKeyDown={(evt) => {\n if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n if (HOT_KEYS.includes(evt.key)) {\n evt.preventDefault()\n\n const listItems = [...evt.currentTarget.children]\n let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n while (idx >= 0 && idx < listItems.length) {\n idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n const nextItem = listItems[idx]\n\n if (nextItem instanceof HTMLElement && focusFirstFocusable(nextItem)) {\n break\n }\n }\n }\n }}\n ref={ref}\n >\n {Children.map(children, (child, idx) => {\n if (isValidElement(child)) {\n const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n }\n\n return <li key={idx}>{child}</li>\n })}\n </Styled.Root>\n )\n }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","MenuList","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","length","validate","nextItem","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement"],"mappings":"8PAMA,MAAMA,SAAqB,IAAIC,aAAaC,QAAQC,OAAQF,aAAaG,UAAUD,KAY7EE,MAAAA,SAA2DC,YAC/D,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,iBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,IAACC,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC7B,SAAS8B,SAASD,EAAI1B,KAAM,CAC9B0B,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,KAAOJ,GAAO,GAAKA,EAAMF,EAAUO,QAAQ,CACzCL,EAAMjC,aAAaC,QAAQsC,SAASX,EAAI1B,OAAS+B,IAAQA,EAEzD,MAAMO,EAAWT,EAAUE,GAE3B,GAAIO,aAAoBC,aAAeC,oBAAoBF,GACzD,KAEJ,CACF,GAEFjC,IAAKA,EAAIc,SAERsB,SAASC,IAAIvB,GAAU,CAACwB,EAAOZ,IAIrBR,IAAA,KAHLH,eAAeuB,GAGV,CAAAxB,SAAeyB,aAAaD,EAAO,IAAKzB,YAFrByB,EAAMvC,OAAU,UAAYuC,EAAMvC,QAAU,KAAOuC,EAAMvC,MAAQ,CAAA,KAKtF,CAAAe,SAAewB,GAHJZ,MAKR"}
1
+ {"version":3,"file":"MenuList.mjs","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n (props, ref) => {\n const {\n role = 'list',\n gap = 4,\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n }\n\n const children =\n isValidElement(restProps.children) &&\n restProps.children.type === Fragment &&\n typeof restProps.children.props === 'object' &&\n restProps.children.props !== null\n ? restProps.children.props.children\n : restProps.children\n\n return (\n <Styled.Root\n {...restProps}\n role={role}\n gap={gap}\n onKeyDown={(evt) => {\n if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n if (HOT_KEYS.includes(evt.key)) {\n evt.preventDefault()\n\n const listItems = [...evt.currentTarget.children]\n let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n while (idx >= 0 && idx < listItems.length) {\n idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n const nextItem = listItems[idx]\n\n if (nextItem instanceof HTMLElement && focusFirstFocusable(nextItem)) {\n break\n }\n }\n }\n }}\n ref={ref}\n >\n {Children.map(children, (child, idx) => {\n if (isValidElement(child)) {\n const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n }\n\n return child === null || child === undefined || typeof child === 'boolean' ? (\n child\n ) : (\n <li key={idx}>{child}</li>\n )\n })}\n </Styled.Root>\n )\n }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","MenuList","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","length","validate","nextItem","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement","undefined"],"mappings":"8PAMA,MAAMA,SAAqB,IAAIC,aAAaC,QAAQC,OAAQF,aAAaG,UAAUD,KAY7EE,MAAAA,SAA2DC,YAC/D,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,iBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,IAACC,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC7B,SAAS8B,SAASD,EAAI1B,KAAM,CAC9B0B,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,KAAOJ,GAAO,GAAKA,EAAMF,EAAUO,QAAQ,CACzCL,EAAMjC,aAAaC,QAAQsC,SAASX,EAAI1B,OAAS+B,IAAQA,EAEzD,MAAMO,EAAWT,EAAUE,GAE3B,GAAIO,aAAoBC,aAAeC,oBAAoBF,GACzD,KAEJ,CACF,GAEFjC,IAAKA,EAAIc,SAERsB,SAASC,IAAIvB,GAAU,CAACwB,EAAOZ,IAC1BX,eAAeuB,GAGVpB,IAAA,KAAA,CAAAJ,SAAeyB,aAAaD,EAAO,IAAKzB,YAFrByB,EAAMvC,OAAU,UAAYuC,EAAMvC,QAAU,KAAOuC,EAAMvC,MAAQ,CAAA,KAE3E2B,GAGXY,IAAU,MAAQA,SAAUE,UAAoBF,GAAU,UAC/DA,EAEApB,IAAA,KAAA,CAAAJ,SAAewB,GAANZ,MAGD"}