npm - @hitachivantara/uikit-react-core - Versions diffs - 5.24.1 → 5.24.2 - Mend

@hitachivantara/uikit-react-core 5.24.1 → 5.24.2

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 (128) hide show

package/dist/cjs/components/Loading/Loading.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Loading.styles.cjs","sources":["../../../../src/components/Loading/Loading.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\~~nimport styled from \"@emotion/styled\";\~~n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { ~~HvTypography~~ } from \"@core/~~components/Typography\";\nimport { transientOptions } from \"@core/~~utils/~~transientOptions~~\";\n\nconst interval = 0.11;\n\nconst bars = {\n \"&:nth-of-type(1)\": {\n animationDelay: \"0\",\n },\n \"&:nth-of-type(2)\": {\n animationDelay: `${interval * 2}s`,\n },\n \"&:nth-of-type(3)\": {\n animationDelay: `${interval * 4}s`,\n },\n};\n\nconst small = {\n width: \"2px\",\n height: \"18px\",\n margin: \"0px 2px\",\n ...bars,\n};\n\nconst regular = {\n width: \"4px\",\n height: \"30px\",\n margin: \"0 3px\",\n ...bars,\n};\n\nconst regularAnimation = keyframes`\n 0% { \n transform: scale(1);\n background-color: ${theme.colors.brand};\n }\n 50% { \n transform: scale(1, 0.6); \n background-color: ${theme.colors.secondary};\n }\n`;\n\nconst regularColorAnimation = keyframes`\n 0% { \n transform: scale(1);\n }\n 50% { \n transform: scale(1, 0.6); \n }\n`;\n\nconst smallAnimation = keyframes`\n 0% { \n transform: scale(1);\n }\n 50% { \n transform: scale(1, 0.223); \n }\n 100%: {},\n`;\n\nconst smallColorAnimation = keyframes`\n 0% { \n transform: scale(1);\n }\n 50% { \n transform: scale(1, 0.223); \n }\n`;\n\nexport const ~~StyledRoot~~ = ~~styled~~(\"~~div~~\"~~)(({~~ ~~hidden }:~~ { ~~hidden~~: ~~boolean }) => (~~{\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n ~~...(hidden~~ && {\n display: \"~~none~~\",\n ~~}),\~~n~~}));\n~~\~~nexport~~ ~~const StyledBarContainer = styled(~~\"~~div~~\")({\n ~~display~~: \"~~flex~~\",\n}~~);\~~n\~~nexport~~ ~~const StyledLabel = styled(HvTypography)(~~{\n ~~marginTop~~: \"~~15px~~\",\n}~~);\~~n\~~nexport~~ ~~const StyledBar = styled(\~~n ~~\"div\"~~,\n ~~transientOptions\n)(({ $variant }~~: { ~~$variant~~: ~~string~~ }) ~~=> (~~{\n ~~display~~: ~~\"inline-block\"~~,\n\n ~~...($variant~~ ~~===~~ \"~~regular~~\" && {\n animation: `${~~regularAnimation~~} 1s ease-in-out infinite~~`,\n~~ ...~~regular,\n~~ }),\n ~~...($variant~~ ~~=== \"regularColor\" &&~~ {\n animation: `${~~regularColorAnimation~~} 1s ease-in-out infinite`,\n ...regular,\n }),\n ~~...($variant~~ ~~=== \"small\" &&~~ {\n animation: `${~~smallAnimation~~} 1s ease-in-out infinite`,\n ...small,\n }),\n ~~...($variant~~ ~~=== \"smallColor\" &&~~ {\n animation: `${~~smallColorAnimation~~} 1s ease-in-out infinite`,\n ...~~small~~,\n }),\n~~\n \"@keyframes loading-small\": {\n \"0%\": {\n transform: \"scale(1)\",\n~~ }~~,\n \"50%\": {\n transform: \"scale(1,0.223~~)~~\",\n },\n \"100%\": {},\n },\n}))~~;\n"],"names":["interval","bars","animationDelay","small","width","height","margin","regular","regularAnimation","keyframes","theme","colors","brand","secondary","regularColorAnimation","smallAnimation","smallColorAnimation","~~StyledRoot~~","~~_styled~~","~~process~~","~~env~~","~~NODE_ENV","target","label","hidden","~~display","flexDirection","alignItems","justifyContent","~~StyledBarContainer~~","~~name~~","~~styles~~","~~map~~","~~toString~~","~~_EMOTION_STRINGIFIED_CSS_ERROR__~~","~~StyledLabel~~","~~HvTypography~~","~~StyledBar~~","~~_extends~~","~~transientOptions~~"~~,"$variant","animation","transform"~~],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA~~,MAAMA,WAAW;AAEjB,MAAMC,OAAO;AAAA,EACX,oBAAoB;AAAA,IAClBC,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClBA,gBAAiB,GAAEF,WAAW;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClBE,gBAAiB,GAAEF,WAAW;AAAA,EAChC;AACF;AAEA,MAAMG,QAAQ;AAAA,EACZC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACR,GAAGL;AACL;AAEA,MAAMM,UAAU;AAAA,EACdH,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACR,GAAGL;AACL;AAEA,MAAMO,mBAAmBC,MAAAA;AAAAA;AAAAA;AAAAA,wBAGDC,kBAAMC,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA,wBAIbF,kBAAMC,OAAOE;AAAAA;AAAAA;AAIrC,MAAMC,wBAAwBL,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS9B,MAAMM,iBAAiBN,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAUvB,MAAMO,sBAAsBP,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;~~AASrB~~,~~MAAMQ,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAC,QAAA~~;~~AAAA~~,~~IAAA~~;~~AAAA~~,~~EAAAA~~,~~QAAA;AAAA~~,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAAE,CAAC~~;AAAA,~~EAAEC;AAA4B~~,~~OAAO;AAAA,EAC5EC,~~SAAS;AAAA,~~EACTC~~,eAAe;AAAA,~~EACfC~~,YAAY;AAAA,~~EACZC~~,gBAAgB;AAAA,~~EAEhB,GAAIJ,UAAU~~;AAAA,~~IACZC~~,~~SAAS~~;AAAA,~~EACX;AACF~~,~~IAAEN,QAAAC,IAAAC,aAAC,eAAA,KAAA,i4HAAA~~;~~AAEI,MAAMQ,qBAA4BX,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;~~AAAA,~~EAAAC,QAAA~~;AAAA,~~IAAA;AAAA~~,~~EAAAA,QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAACJ,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAS~~,~~MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA~~;AAAA,~~EAAAD~~,~~MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~EAAAC,KAAA~~;AAAA,~~EAAAC~~,~~UAAAC;AAAA~~,~~CAE9C~~;~~AAEM,MAAMC,cAAqBC,iCAAAA,QAAAA,WAAAA,cAAYjB,QAAAC,IAAAC,aAAA,eAAA;~~AAAA,~~EAAAC,QAAA~~;AAAA,~~IAAA~~;AAAA,~~EAAAA~~,~~QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAS~~,~~MAAA;AAAA~~,~~EAAAC,QAAA~~;AAAA,~~IAAA;AAAA~~,~~EAAAD~~,~~MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~EAAAC~~,~~KAAA~~;AAAA,~~EAAAC,UAAAC~~;AAAA,~~CAE9C;AAEYG~~,~~MAAAA,qDACX,OAAKlB,QAAAC,IAAAC,4BAAAiB,SAAA,IAAA;AAAA,EAAAhB,QAAA;AAAA,GACLiB,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAhB,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBgB,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEC;AAA+B,~~OAAO;AAAA,~~EACzCf~~,~~SAAS;AAAA,EAET,GAAIe,aAAa,aAAa;AAAA,IAC5BC,~~WAAY,~~GAAEjC~~;AAAAA,~~IACd~~,~~GAAGD~~;AAAAA,~~EACL~~;AAAA,~~EACA~~,~~GAAIiC,aAAa,kBAAkB~~;AAAA,~~IACjCC~~,WAAY,~~GAAE3B~~;AAAAA,IACd,~~GAAGP~~;AAAAA,EACL;AAAA,~~EACA~~,~~GAAIiC,aAAa,WAAW~~;AAAA,~~IAC1BC~~,WAAY,~~GAAE1B~~;AAAAA,IACd,~~GAAGZ~~;AAAAA,EACL;AAAA,~~EACA~~,~~GAAIqC,aAAa,gBAAgB~~;AAAA,~~IAC/BC~~,WAAY,~~GAAEzB~~;AAAAA,IACd,~~GAAGb~~;AAAAA,EACL;~~AAAA~~,~~EAEA,4BAA4B;AAAA,IAC1B,MAAM;AAAA,MACJuC,WAAW;AAAA,IACb;AAAA,IACA,OAAO;AAAA,MACLA,WAAW;AAAA,IACb;AAAA,IACA,QAAQ,~~CAAC~~;AAAA,EACX;AACF,IAAEvB,QAAAC,IAAAC,aAAC,eAAA,KAAA,i4HAAA;;;;;~~"}
1	+ {"version":3,"file":"Loading.styles.cjs","sources":["../../../../src/components/Loading/Loading.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst interval = 0.11;\n\nconst bars = {\n \"&:nth-of-type(1)\": {\n animationDelay: \"0\",\n },\n \"&:nth-of-type(2)\": {\n animationDelay: `${interval * 2}s`,\n },\n \"&:nth-of-type(3)\": {\n animationDelay: `${interval * 4}s`,\n },\n};\n\nconst small = {\n width: \"2px\",\n height: \"18px\",\n margin: \"0px 2px\",\n ...bars,\n};\n\nconst regular = {\n width: \"4px\",\n height: \"30px\",\n margin: \"0 3px\",\n ...bars,\n};\n\nconst regularAnimation = keyframes`\n 0% { \n transform: scale(1);\n background-color: ${theme.colors.brand};\n }\n 50% { \n transform: scale(1, 0.6); \n background-color: ${theme.colors.secondary};\n }\n`;\n\nconst regularColorAnimation = keyframes`\n 0% { \n transform: scale(1);\n }\n 50% { \n transform: scale(1, 0.6); \n }\n`;\n\nconst smallAnimation = keyframes`\n 0% { \n transform: scale(1);\n }\n 50% { \n transform: scale(1, 0.223); \n }\n 100%: {},\n`;\n\nconst smallColorAnimation = keyframes`\n 0% { \n transform: scale(1);\n }\n 50% { \n transform: scale(1, 0.223); \n }\n`;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n barContainer: { display: \"flex\" },\n loadingBar: {\n display: \"inline-block\",\n\n \"@keyframes loading-small\": {\n \"0%\": {\n transform: \"scale(1)\",\n },\n \"50%\": {\n transform: \"scale(1,0.223)\",\n },\n \"100%\": {},\n },\n },\n label: { marginTop: \"15px\" },\n overlay: {},\n blur: {},\n hidden: { display: \"none\" },\n small: { animation: `${smallAnimation} 1s ease-in-out infinite`, ...small },\n regular: {\n animation: `${regularAnimation} 1s ease-in-out infinite`,\n ...regular,\n },\n smallColor: {\n animation: `${smallColorAnimation} 1s ease-in-out infinite`,\n ...small,\n },\n regularColor: {\n animation: `${regularColorAnimation} 1s ease-in-out infinite`,\n ...regular,\n },\n});\n"],"names":["interval","bars","animationDelay","small","width","height","margin","regular","regularAnimation","keyframes","theme","colors","brand","secondary","regularColorAnimation","smallAnimation","smallColorAnimation","staticClasses","useClasses","createClasses","root","display","flexDirection","alignItems","justifyContent","barContainer","loadingBar","transform","label","marginTop","overlay","blur","hidden","animation","smallColor","regularColor"],"mappings":";;;;;AAMA,MAAMA,WAAW;AAEjB,MAAMC,OAAO;AAAA,EACX,oBAAoB;AAAA,IAClBC,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClBA,gBAAiB,GAAEF,WAAW;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClBE,gBAAiB,GAAEF,WAAW;AAAA,EAChC;AACF;AAEA,MAAMG,QAAQ;AAAA,EACZC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACR,GAAGL;AACL;AAEA,MAAMM,UAAU;AAAA,EACdH,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACR,GAAGL;AACL;AAEA,MAAMO,mBAAmBC,MAAAA;AAAAA;AAAAA;AAAAA,wBAGDC,kBAAMC,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA,wBAIbF,kBAAMC,OAAOE;AAAAA;AAAAA;AAIrC,MAAMC,wBAAwBL,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS9B,MAAMM,iBAAiBN,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAUvB,MAAMO,sBAAsBP,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AASf,MAAA;AAAA,EAAEQ;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,aAAa;AAAA,EACtEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AAAA,EACAC,cAAc;AAAA,IAAEJ,SAAS;AAAA,EAAO;AAAA,EAChCK,YAAY;AAAA,IACVL,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1B,MAAM;AAAA,QACJM,WAAW;AAAA,MACb;AAAA,MACA,OAAO;AAAA,QACLA,WAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC;AAAA,IACX;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEC,WAAW;AAAA,EAAO;AAAA,EAC3BC,SAAS,CAAC;AAAA,EACVC,MAAM,CAAC;AAAA,EACPC,QAAQ;AAAA,IAAEX,SAAS;AAAA,EAAO;AAAA,EAC1BlB,OAAO;AAAA,IAAE8B,WAAY,GAAElB;AAAAA,IAA0C,GAAGZ;AAAAA,EAAM;AAAA,EAC1EI,SAAS;AAAA,IACP0B,WAAY,GAAEzB;AAAAA,IACd,GAAGD;AAAAA,EACL;AAAA,EACA2B,YAAY;AAAA,IACVD,WAAY,GAAEjB;AAAAA,IACd,GAAGb;AAAAA,EACL;AAAA,EACAgC,cAAc;AAAA,IACZF,WAAY,GAAEnB;AAAAA,IACd,GAAGP;AAAAA,EACL;AACF,CAAC;;;"}

package/dist/cjs/components/RadioGroup/RadioGroup.styles.cjs CHANGED Viewed

@@ -27,10 +27,6 @@ const {
     },
     "&>*:focus-within": {
       zIndex: 1
-    },
-    // IE fallback code (using focus-within-polyfill)
-    "&>*.focus-within": {
-      zIndex: 1
     }
   },
   horizontal: {

package/dist/cjs/components/RadioGroup/RadioGroup.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.styles.cjs","sources":["../../../../src/components/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n root: {\n display: \"inline-block\",\n padding: 0,\n margin: 0,\n overflow: \"hidden\",\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>\": {\n zIndex: 0,\n },\n \"&>:focus-within\": {\n zIndex: 1,\n },\n ~~// IE fallback code (using focus-within-polyfill)\n \"&>.focus-within\": {\n zIndex: 1,\n },\n~~ },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n \"&>:not(:first-of-type)\": {\n marginLeft: theme.space.sm,\n },\n width: `calc(100% + ${theme.space.sm})`, // Compensate the negative margin left which increases the width\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative}`,\n },\n error: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","overflow","verticalAlign","label","marginBottom","theme","space","xs","group","vertical","flexDirection","zIndex","horizontal","flexWrap","marginLeft","sm","width","invalid","paddingBottom","borderBottom","colors","negative","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO;AAAA,IAAEV,SAAS;AAAA,EAAO;AAAA,EACzBW,UAAU;AAAA,IACRC,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA~~;AAAA~~,~~IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,~~EACF;AAAA,EACAC,YAAY;AAAA,IACVF,eAAe;AAAA,IACfG,UAAU;AAAA,IACV,2BAA2B;AAAA,MACzBC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,IACAC,OAAQ,eAAcX,YAAAA,MAAMC,MAAMS;AAAAA;AAAAA,EACpC;AAAA,EACAE,SAAS;AAAA,IACPC,eAAeb,YAAAA,MAAMC,MAAMC;AAAAA,IAC3BY,cAAe,aAAYd,YAAAA,MAAMe,OAAOC;AAAAA,EAC1C;AAAA,EACAC,OAAO,CAAC;AACV,CAAC;;;"}
1	+ {"version":3,"file":"RadioGroup.styles.cjs","sources":["../../../../src/components/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n root: {\n display: \"inline-block\",\n padding: 0,\n margin: 0,\n overflow: \"hidden\",\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>\": {\n zIndex: 0,\n },\n \"&>:focus-within\": {\n zIndex: 1,\n },\n },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n \"&>*:not(:first-of-type)\": {\n marginLeft: theme.space.sm,\n },\n width: `calc(100% + ${theme.space.sm})`, // Compensate the negative margin left which increases the width\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative}`,\n },\n error: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","overflow","verticalAlign","label","marginBottom","theme","space","xs","group","vertical","flexDirection","zIndex","horizontal","flexWrap","marginLeft","sm","width","invalid","paddingBottom","borderBottom","colors","negative","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO;AAAA,IAAEV,SAAS;AAAA,EAAO;AAAA,EACzBW,UAAU;AAAA,IACRC,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVF,eAAe;AAAA,IACfG,UAAU;AAAA,IACV,2BAA2B;AAAA,MACzBC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,IACAC,OAAQ,eAAcX,YAAAA,MAAMC,MAAMS;AAAAA;AAAAA,EACpC;AAAA,EACAE,SAAS;AAAA,IACPC,eAAeb,YAAAA,MAAMC,MAAMC;AAAAA,IAC3BY,cAAe,aAAYd,YAAAA,MAAMe,OAAOC;AAAAA,EAC1C;AAAA,EACAC,OAAO,CAAC;AACV,CAAC;;;"}

package/dist/cjs/components/SelectionList/SelectionList.cjs CHANGED Viewed

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const multiSelectionEventHandler = require("../../utils/multiSelectionEventHandler.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const SelectionList_styles = require("./SelectionList.styles.cjs");
-const selectionListClasses = require("./selectionListClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
+const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const ListContainer = require("../ListContainer/ListContainer.cjs");
+const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const getValueFromSelectedChildren = (children, multiple) => {
@@ -25,7 +28,7 @@ const getValueFromSelectedChildren = (children, multiple) => {
 const HvSelectionList = (props) => {
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     children,
     name,
@@ -48,6 +51,10 @@ const HvSelectionList = (props) => {
     singleSelectionToggle = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvSelectionList", props);
+  const {
+    classes,
+    cx
+  } = SelectionList_styles.useClasses(classesProp);
   const elementId = useUniqueId.useUniqueId(id, "hvselectionlist");
   const [value, setValue] = useControlled.useControlled(valueProp, defaultValue !== void 0 ? defaultValue : (
     // when uncontrolled and no default value is given,
@@ -129,23 +136,23 @@ const HvSelectionList = (props) => {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   const listId = label && setId.setId(elementId, "listbox") || "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(SelectionList_styles.StyledFormElement, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
     id,
     name,
     status: validationState,
     disabled,
     required,
     readOnly,
-    className: clsx.clsx(className, selectionListClasses.default.root, classes == null ? void 0 : classes.root),
-    children: [label && /* @__PURE__ */ jsxRuntime.jsx(SelectionList_styles.StyledLabel, {
+    className: cx(classes.root, className),
+    children: [label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
       id: setId.setId(elementId, "label"),
       label,
-      className: clsx.clsx(selectionListClasses.default.label, classes == null ? void 0 : classes.label)
-    }), description && /* @__PURE__ */ jsxRuntime.jsx(SelectionList_styles.StyledInfoMessage, {
+      className: classes.label
+    }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
       id: setId.setId(elementId, "description"),
-      className: clsx.clsx(selectionListClasses.default.description, classes == null ? void 0 : classes.description),
+      className: classes.description,
       children: description
-    }), /* @__PURE__ */ jsxRuntime.jsx(SelectionList_styles.StyledListContainer, {
+    }), /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
       id: listId,
       interactive: true,
       condensed: true,
@@ -156,19 +163,22 @@ const HvSelectionList = (props) => {
       "aria-invalid": validationState === "invalid" ? true : void 0,
       "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
       "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-      className: clsx.clsx(classes == null ? void 0 : classes.listbox, selectionListClasses.default.listbox, orientation === "vertical" && clsx.clsx(selectionListClasses.default.vertical, classes == null ? void 0 : classes.vertical), orientation === "horizontal" && clsx.clsx(selectionListClasses.default.horizontal, classes == null ? void 0 : classes.horizontal), validationState === "invalid" && clsx.clsx(selectionListClasses.default.invalid, classes == null ? void 0 : classes.invalid)),
+      className: cx(classes.listbox, {
+        [classes.vertical]: orientation === "vertical",
+        [classes.horizontal]: orientation === "horizontal",
+        [classes.invalid]: validationState === "invalid"
+      }),
       ref: listContainer,
-      $orientation: orientation,
-      $validationState: validationState,
       ...others,
       children: modifiedChildren
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(SelectionList_styles.StyledError, {
+    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
       id: setId.setId(elementId, "error"),
       disableBorder: true,
-      className: clsx.clsx(selectionListClasses.default.error, classes == null ? void 0 : classes.error),
+      className: classes.error,
       children: validationMessage
     })]
   });
 };
+exports.selectionListClasses = SelectionList_styles.staticClasses;
 exports.HvSelectionList = HvSelectionList;
 //# sourceMappingURL=SelectionList.cjs.map

package/dist/cjs/components/SelectionList/SelectionList.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionList.cjs","sources":["../../../../src/components/SelectionList/SelectionList.tsx"],"sourcesContent":["import React, {\n useCallback,\n useMemo,\n useRef,\n useEffect,\n ReactNode,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvFormStatus } from \"@core/components/Forms/FormElement\";\n\nimport {\n StyledListContainer,\n StyledFormElement,\n StyledLabel,\n StyledInfoMessage,\n StyledError,\n} from \"./SelectionList.styles\";\nimport selectionListClasses, {\n HvSelectionListClasses,\n} from \"./selectionListClasses\";\n\nexport interface HvSelectionListProps\n extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n /** The form element name. /\n name?: string;\n /\n The value of the form element. It must be represented in the child list items.\n \n Can either be a single value (when multiple = false) or an\n * array of values (when multiple = true).\n \n When defined the selection list state becomes controlled.\n /\n value?: any \| any[];\n /* When uncontrolled, defines the initial value. /\n defaultValue?: any \| any[];\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that the form element is disabled. If `true` the state is propagated to the children list items. /\n disabled?: boolean;\n /* Indicates that the form element is not editable. /\n readOnly?: boolean;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: string;\n /* Indicates that the user may select more than one item from the current selectable list items. /\n multiple?: boolean;\n /* If `true`, selection can be toggled when single selection. /\n singleSelectionToggle?: boolean;\n /* Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. /\n orientation?: \"vertical\" \| \"horizontal\";\n /* The callback fired when the value changes. /\n onChange?: (event: React.MouseEvent, value: any) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n children: ReactNode,\n multiple: boolean\n) => {\n const selectedValues = React.Children.toArray(children)\n .map((child: any) => {\n const childIsControlled = child?.props?.selected !== undefined;\n const childIsSelected =\n child && childIsControlled\n ? child.props?.selected\n : child.props?.defaultSelected;\n\n return childIsSelected ? child?.props.value : undefined;\n })\n .filter((v) => v !== undefined);\n\n return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/\n Allows the user to select one or more items from a list of choices.\n \n Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = (props: HvSelectionListProps) => {\n const {\n id,\n classes,\n className,\n children,\n name,\n value: valueProp,\n defaultValue,\n required = false,\n readOnly = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n orientation = \"vertical\",\n multiple = false,\n singleSelectionToggle = false,\n ...others\n } = useDefaultProps(\"HvSelectionList\", props);\n\n const elementId = useUniqueId(id, \"hvselectionlist\");\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // when uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children, multiple)\n );\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [allValues, selectedState] = useMemo(() => {\n const childValues: any[] = [];\n const childSelectedState: boolean[] = [];\n\n React.Children.toArray(children).forEach((child: any, i: number) => {\n const childValue = child?.props?.value;\n const childIsSelected = multiple\n ? value.indexOf(childValue) !== -1\n : value === childValue;\n\n childValues[i] = childValue;\n childSelectedState[i] = childIsSelected;\n });\n\n return [childValues, childSelectedState];\n }, [children, multiple, value]);\n\n const selectionAnchor = useRef(undefined);\n\n const listContainer = useRef<any>(null);\n\n useEffect(() => {\n const handleMeta = (event: KeyboardEvent) => {\n const tempArray: any[] = [];\n if (\n (isKey(event, \"ArrowUp\") &&\n event.shiftKey &&\n listContainer.current.contains(event.target)) \|\|\n (isKey(event, \"ArrowDown\") &&\n event.shiftKey &&\n listContainer.current.contains(event.target))\n ) {\n selectedState.forEach((isSelected, i) => {\n if (i === (event.target as any).value - 1) {\n if (!isSelected) {\n tempArray.push(allValues[i]);\n }\n } else if (isSelected) {\n tempArray.push(allValues[i]);\n }\n });\n setValue(tempArray);\n }\n };\n window.addEventListener(\"keyup\", handleMeta);\n\n return () => {\n window.removeEventListener(\"keyup\", handleMeta);\n };\n }, [allValues, selectedState, setValue]);\n\n const onChildChangeInterceptor = useCallback(\n (\n index: number,\n childOnClick: (e: React.MouseEvent) => void,\n evt: React.MouseEvent\n ) => {\n childOnClick?.(evt);\n\n if (!readOnly && !disabled) {\n let newValue: any;\n if (multiple) {\n newValue = multiSelectionEventHandler(\n evt,\n index,\n selectionAnchor,\n allValues,\n selectedState,\n undefined\n );\n } else {\n newValue =\n singleSelectionToggle && selectedState[index]\n ? null\n : allValues[index];\n }\n\n onChange?.(evt, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n }\n },\n [\n allValues,\n disabled,\n multiple,\n onChange,\n readOnly,\n required,\n selectedState,\n setValidationState,\n setValue,\n singleSelectionToggle,\n selectionAnchor,\n ]\n );\n\n const modifiedChildren = useMemo(() => {\n return React.Children.map(children, (child: any, i: number) => {\n const childIsSelected = selectedState[i];\n\n return React.cloneElement(child, {\n role: \"option\",\n selected: childIsSelected,\n onClick: (evt) =>\n onChildChangeInterceptor(i, child?.props?.onClick, evt),\n disabled: disabled \|\| child?.props?.disabled,\n });\n });\n }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n const listId = (label && setId(elementId, \"listbox\")) \|\| \"\";\n\n return (\n <StyledFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={clsx(className, selectionListClasses.root, classes?.root)}\n >\n {label && (\n <StyledLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={clsx(selectionListClasses.label, classes?.label)}\n />\n )}\n {description && (\n <StyledInfoMessage\n id={setId(elementId, \"description\")}\n className={clsx(\n selectionListClasses.description,\n classes?.description\n )}\n >\n {description}\n </StyledInfoMessage>\n )}\n\n <StyledListContainer\n id={listId}\n interactive\n condensed\n role=\"listbox\"\n aria-multiselectable={multiple \|\| undefined}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={validationState === \"invalid\" ? true : undefined}\n aria-errormessage={\n validationState === \"invalid\" ? errorMessageId : undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n className={clsx(\n classes?.listbox,\n selectionListClasses.listbox,\n orientation === \"vertical\" &&\n clsx(selectionListClasses.vertical, classes?.vertical),\n orientation === \"horizontal\" &&\n clsx(selectionListClasses.horizontal, classes?.horizontal),\n validationState === \"invalid\" &&\n clsx(selectionListClasses.invalid, classes?.invalid)\n )}\n ref={listContainer}\n $orientation={orientation}\n $validationState={validationState}\n {...others}\n >\n {modifiedChildren}\n </StyledListContainer>\n\n {canShowError && (\n <StyledError\n id={setId(elementId, \"error\")}\n disableBorder\n className={clsx(selectionListClasses.error, classes?.error)}\n >\n {validationMessage}\n </StyledError>\n )}\n </StyledFormElement>\n );\n};\n"],"names":["getValueFromSelectedChildren","children","multiple","selectedValues","React","Children","toArray","map","child","childIsControlled","props","selected","undefined","childIsSelected","defaultSelected","value","filter","v","HvSelectionList","id","classes","className","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","status","statusMessage","ariaErrorMessage","orientation","singleSelectionToggle","others","useDefaultProps","elementId","useUniqueId","setValue","useControlled","validationState","setValidationState","validationMessage","allValues","selectedState","useMemo","childValues","childSelectedState","forEach","i","childValue","indexOf","selectionAnchor","useRef","listContainer","useEffect","handleMeta","event","tempArray","isKey","shiftKey","current","contains","target","isSelected","push","addEventListener","removeEventListener","onChildChangeInterceptor","useCallback","index","childOnClick","evt","newValue","multiSelectionEventHandler","length","modifiedChildren","cloneElement","role","onClick","canShowError","errorMessageId","setId","listId","StyledFormElement","clsx","selectionListClasses","root","_jsx","StyledLabel","StyledInfoMessage","StyledListContainer","interactive","condensed","join","trim","listbox","vertical","horizontal","invalid","ref","$orientation","$validationState","StyledError","disableBorder","error"],"mappings":"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"}
1	+ {"version":3,"file":"SelectionList.cjs","sources":["../../../../src/components/SelectionList/SelectionList.tsx"],"sourcesContent":["import React, {\n useCallback,\n useMemo,\n useRef,\n useEffect,\n ReactNode,\n} from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n HvFormElement,\n HvFormStatus,\n} from \"@core/components/Forms/FormElement\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvLabel } from \"@core/components/Forms/Label\";\nimport { HvInfoMessage } from \"@core/components/Forms/InfoMessage\";\nimport { HvWarningText } from \"@core/components/Forms/WarningText\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\n\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n /** The form element name. /\n name?: string;\n /\n The value of the form element. It must be represented in the child list items.\n \n Can either be a single value (when multiple = false) or an\n * array of values (when multiple = true).\n \n When defined the selection list state becomes controlled.\n /\n value?: any \| any[];\n /* When uncontrolled, defines the initial value. /\n defaultValue?: any \| any[];\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that the form element is disabled. If `true` the state is propagated to the children list items. /\n disabled?: boolean;\n /* Indicates that the form element is not editable. /\n readOnly?: boolean;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: string;\n /* Indicates that the user may select more than one item from the current selectable list items. /\n multiple?: boolean;\n /* If `true`, selection can be toggled when single selection. /\n singleSelectionToggle?: boolean;\n /* Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. /\n orientation?: \"vertical\" \| \"horizontal\";\n /* The callback fired when the value changes. /\n onChange?: (event: React.MouseEvent, value: any) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n children: ReactNode,\n multiple: boolean\n) => {\n const selectedValues = React.Children.toArray(children)\n .map((child: any) => {\n const childIsControlled = child?.props?.selected !== undefined;\n const childIsSelected =\n child && childIsControlled\n ? child.props?.selected\n : child.props?.defaultSelected;\n\n return childIsSelected ? child?.props.value : undefined;\n })\n .filter((v) => v !== undefined);\n\n return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/\n Allows the user to select one or more items from a list of choices.\n \n Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = (props: HvSelectionListProps) => {\n const {\n id,\n classes: classesProp,\n className,\n children,\n name,\n value: valueProp,\n defaultValue,\n required = false,\n readOnly = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n orientation = \"vertical\",\n multiple = false,\n singleSelectionToggle = false,\n ...others\n } = useDefaultProps(\"HvSelectionList\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvselectionlist\");\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // when uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children, multiple)\n );\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [allValues, selectedState] = useMemo(() => {\n const childValues: any[] = [];\n const childSelectedState: boolean[] = [];\n\n React.Children.toArray(children).forEach((child: any, i: number) => {\n const childValue = child?.props?.value;\n const childIsSelected = multiple\n ? value.indexOf(childValue) !== -1\n : value === childValue;\n\n childValues[i] = childValue;\n childSelectedState[i] = childIsSelected;\n });\n\n return [childValues, childSelectedState];\n }, [children, multiple, value]);\n\n const selectionAnchor = useRef(undefined);\n\n const listContainer = useRef<any>(null);\n\n useEffect(() => {\n const handleMeta = (event: KeyboardEvent) => {\n const tempArray: any[] = [];\n if (\n (isKey(event, \"ArrowUp\") &&\n event.shiftKey &&\n listContainer.current.contains(event.target)) \|\|\n (isKey(event, \"ArrowDown\") &&\n event.shiftKey &&\n listContainer.current.contains(event.target))\n ) {\n selectedState.forEach((isSelected, i) => {\n if (i === (event.target as any).value - 1) {\n if (!isSelected) {\n tempArray.push(allValues[i]);\n }\n } else if (isSelected) {\n tempArray.push(allValues[i]);\n }\n });\n setValue(tempArray);\n }\n };\n window.addEventListener(\"keyup\", handleMeta);\n\n return () => {\n window.removeEventListener(\"keyup\", handleMeta);\n };\n }, [allValues, selectedState, setValue]);\n\n const onChildChangeInterceptor = useCallback(\n (\n index: number,\n childOnClick: (e: React.MouseEvent) => void,\n evt: React.MouseEvent\n ) => {\n childOnClick?.(evt);\n\n if (!readOnly && !disabled) {\n let newValue: any;\n if (multiple) {\n newValue = multiSelectionEventHandler(\n evt,\n index,\n selectionAnchor,\n allValues,\n selectedState,\n undefined\n );\n } else {\n newValue =\n singleSelectionToggle && selectedState[index]\n ? null\n : allValues[index];\n }\n\n onChange?.(evt, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n }\n },\n [\n allValues,\n disabled,\n multiple,\n onChange,\n readOnly,\n required,\n selectedState,\n setValidationState,\n setValue,\n singleSelectionToggle,\n selectionAnchor,\n ]\n );\n\n const modifiedChildren = useMemo(() => {\n return React.Children.map(children, (child: any, i: number) => {\n const childIsSelected = selectedState[i];\n\n return React.cloneElement(child, {\n role: \"option\",\n selected: childIsSelected,\n onClick: (evt) =>\n onChildChangeInterceptor(i, child?.props?.onClick, evt),\n disabled: disabled \|\| child?.props?.disabled,\n });\n });\n }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n const listId = (label && setId(elementId, \"listbox\")) \|\| \"\";\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n {description && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n\n <HvListContainer\n id={listId}\n interactive\n condensed\n role=\"listbox\"\n aria-multiselectable={multiple \|\| undefined}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={validationState === \"invalid\" ? true : undefined}\n aria-errormessage={\n validationState === \"invalid\" ? errorMessageId : undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n className={cx(classes.listbox, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: validationState === \"invalid\",\n })}\n ref={listContainer}\n {...others}\n >\n {modifiedChildren}\n </HvListContainer>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["getValueFromSelectedChildren","children","multiple","selectedValues","React","Children","toArray","map","child","childIsControlled","props","selected","undefined","childIsSelected","defaultSelected","value","filter","v","HvSelectionList","id","classes","classesProp","className","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","status","statusMessage","ariaErrorMessage","orientation","singleSelectionToggle","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","setValue","useControlled","validationState","setValidationState","validationMessage","allValues","selectedState","useMemo","childValues","childSelectedState","forEach","i","childValue","indexOf","selectionAnchor","useRef","listContainer","useEffect","handleMeta","event","tempArray","isKey","shiftKey","current","contains","target","isSelected","push","addEventListener","removeEventListener","onChildChangeInterceptor","useCallback","index","childOnClick","evt","newValue","multiSelectionEventHandler","length","modifiedChildren","cloneElement","role","onClick","canShowError","errorMessageId","setId","listId","HvFormElement","root","_jsx","HvLabel","HvInfoMessage","HvListContainer","interactive","condensed","join","trim","listbox","vertical","horizontal","invalid","ref","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/SelectionList/SelectionList.styles.cjs CHANGED Viewed

@@ -1,107 +1,44 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const FormElement = require("../Forms/FormElement/FormElement.cjs");
-const Label = require("../Forms/Label/Label.cjs");
-const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
-const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const ListContainer = require("../ListContainer/ListContainer.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvSelectionList", {
+  root: {
+    display: "inline-block",
+    padding: 0,
+    margin: 0
+  },
+  error: {
+    width: "100%",
+    float: "left",
+    clear: "both"
+  },
+  listbox: {
+    display: "flex",
+    float: "left",
+    clear: "both",
+    width: "100%",
+    paddingBottom: uikitStyles.theme.space.xs
+  },
+  label: {
+    marginBottom: uikitStyles.theme.space.xs,
+    float: "left"
+  },
+  description: {
+    float: "left"
+  },
+  horizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginLeft: -uikitStyles.theme.space.sm,
+    "&>*": {
+      marginLeft: uikitStyles.theme.space.sm
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledFormElement = /* @__PURE__ */ _styled__default.default((props) => /* @__PURE__ */ jsxRuntime.jsx(FormElement.HvFormElement, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1l81ih64"
-} : {
-  target: "e1l81ih64",
-  label: "StyledFormElement"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1lqvanp",
-  styles: "display:inline-block;padding:0;margin:0"
-} : {
-  name: "1lqvanp",
-  styles: "display:inline-block;padding:0;margin:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2VsZWN0aW9uTGlzdC9TZWxlY3Rpb25MaXN0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JpQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1NlbGVjdGlvbkxpc3QvU2VsZWN0aW9uTGlzdC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtcy9Gb3JtRWxlbWVudFwiO1xuaW1wb3J0IHsgSHZMYWJlbCwgSHZMYWJlbFByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvTGFiZWxcIjtcbmltcG9ydCB7XG4gIEh2SW5mb01lc3NhZ2UsXG4gIEh2SW5mb01lc3NhZ2VQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvSW5mb01lc3NhZ2VcIjtcbmltcG9ydCB7XG4gIEh2V2FybmluZ1RleHQsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHRcIjtcbmltcG9ydCB7IEh2TGlzdENvbnRhaW5lciB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRm9ybUVsZW1lbnQgPSBzdHlsZWQoKHByb3BzOiBIdkZvcm1FbGVtZW50UHJvcHMpID0+IChcbiAgPEh2Rm9ybUVsZW1lbnQgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKChwcm9wczogSHZMYWJlbFByb3BzKSA9PiAoXG4gIDxIdkxhYmVsIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmZvTWVzc2FnZSA9IHN0eWxlZCgocHJvcHM6IEh2SW5mb01lc3NhZ2VQcm9wcykgPT4gKFxuICA8SHZJbmZvTWVzc2FnZSB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRXJyb3IgPSBzdHlsZWQoKHByb3BzOiBIdldhcm5pbmdUZXh0UHJvcHMpID0+IChcbiAgPEh2V2FybmluZ1RleHQgey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgY2xlYXI6IFwiYm90aFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0Q29udGFpbmVyID0gc3R5bGVkKFxuICBIdkxpc3RDb250YWluZXIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJG9yaWVudGF0aW9uLFxuICAgICR2YWxpZGF0aW9uU3RhdGUsXG4gIH06IHtcbiAgICAkb3JpZW50YXRpb246IHN0cmluZztcbiAgICAkdmFsaWRhdGlvblN0YXRlOiBzdHJpbmc7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxvYXQ6IFwibGVmdFwiLFxuICAgIGNsZWFyOiBcImJvdGhcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIC8vIFByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgXCImPipcIjoge1xuICAgICAgICB6SW5kZXg6IDAsXG4gICAgICB9LFxuICAgICAgXCImPio6Zm9jdXMtd2l0aGluXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgfSxcbiAgICAgIC8vIElFIGZhbGxiYWNrIGNvZGUgKHVzaW5nIGZvY3VzLXdpdGhpbi1wb2x5ZmlsbClcbiAgICAgIFwiJj4qLmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJob3Jpem9udGFsXCIgJiYge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICAgIG1hcmdpbkxlZnQ6IC10aGVtZS5zcGFjZS5zbSxcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2Uuc20sXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFsaWRhdGlvblN0YXRlID09PSBcImludmFsaWRcIiAmJiB7XG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledLabel = /* @__PURE__ */ _styled__default.default((props) => /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1l81ih63"
-} : {
-  target: "e1l81ih63",
-  label: "StyledLabel"
-})({
-  marginBottom: uikitStyles.theme.space.xs,
-  float: "left"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2VsZWN0aW9uTGlzdC9TZWxlY3Rpb25MaXN0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEIyQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1NlbGVjdGlvbkxpc3QvU2VsZWN0aW9uTGlzdC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtcy9Gb3JtRWxlbWVudFwiO1xuaW1wb3J0IHsgSHZMYWJlbCwgSHZMYWJlbFByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvTGFiZWxcIjtcbmltcG9ydCB7XG4gIEh2SW5mb01lc3NhZ2UsXG4gIEh2SW5mb01lc3NhZ2VQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvSW5mb01lc3NhZ2VcIjtcbmltcG9ydCB7XG4gIEh2V2FybmluZ1RleHQsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHRcIjtcbmltcG9ydCB7IEh2TGlzdENvbnRhaW5lciB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRm9ybUVsZW1lbnQgPSBzdHlsZWQoKHByb3BzOiBIdkZvcm1FbGVtZW50UHJvcHMpID0+IChcbiAgPEh2Rm9ybUVsZW1lbnQgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKChwcm9wczogSHZMYWJlbFByb3BzKSA9PiAoXG4gIDxIdkxhYmVsIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmZvTWVzc2FnZSA9IHN0eWxlZCgocHJvcHM6IEh2SW5mb01lc3NhZ2VQcm9wcykgPT4gKFxuICA8SHZJbmZvTWVzc2FnZSB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRXJyb3IgPSBzdHlsZWQoKHByb3BzOiBIdldhcm5pbmdUZXh0UHJvcHMpID0+IChcbiAgPEh2V2FybmluZ1RleHQgey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgY2xlYXI6IFwiYm90aFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0Q29udGFpbmVyID0gc3R5bGVkKFxuICBIdkxpc3RDb250YWluZXIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJG9yaWVudGF0aW9uLFxuICAgICR2YWxpZGF0aW9uU3RhdGUsXG4gIH06IHtcbiAgICAkb3JpZW50YXRpb246IHN0cmluZztcbiAgICAkdmFsaWRhdGlvblN0YXRlOiBzdHJpbmc7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxvYXQ6IFwibGVmdFwiLFxuICAgIGNsZWFyOiBcImJvdGhcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIC8vIFByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgXCImPipcIjoge1xuICAgICAgICB6SW5kZXg6IDAsXG4gICAgICB9LFxuICAgICAgXCImPio6Zm9jdXMtd2l0aGluXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgfSxcbiAgICAgIC8vIElFIGZhbGxiYWNrIGNvZGUgKHVzaW5nIGZvY3VzLXdpdGhpbi1wb2x5ZmlsbClcbiAgICAgIFwiJj4qLmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJob3Jpem9udGFsXCIgJiYge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICAgIG1hcmdpbkxlZnQ6IC10aGVtZS5zcGFjZS5zbSxcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2Uuc20sXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFsaWRhdGlvblN0YXRlID09PSBcImludmFsaWRcIiAmJiB7XG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-const StyledInfoMessage = /* @__PURE__ */ _styled__default.default((props) => /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1l81ih62"
-} : {
-  target: "e1l81ih62",
-  label: "StyledInfoMessage"
-})(process.env.NODE_ENV === "production" ? {
-  name: "g0dsyy",
-  styles: "float:left"
-} : {
-  name: "g0dsyy",
-  styles: "float:left",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2VsZWN0aW9uTGlzdC9TZWxlY3Rpb25MaXN0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUNpQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1NlbGVjdGlvbkxpc3QvU2VsZWN0aW9uTGlzdC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtcy9Gb3JtRWxlbWVudFwiO1xuaW1wb3J0IHsgSHZMYWJlbCwgSHZMYWJlbFByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvTGFiZWxcIjtcbmltcG9ydCB7XG4gIEh2SW5mb01lc3NhZ2UsXG4gIEh2SW5mb01lc3NhZ2VQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvSW5mb01lc3NhZ2VcIjtcbmltcG9ydCB7XG4gIEh2V2FybmluZ1RleHQsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHRcIjtcbmltcG9ydCB7IEh2TGlzdENvbnRhaW5lciB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRm9ybUVsZW1lbnQgPSBzdHlsZWQoKHByb3BzOiBIdkZvcm1FbGVtZW50UHJvcHMpID0+IChcbiAgPEh2Rm9ybUVsZW1lbnQgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKChwcm9wczogSHZMYWJlbFByb3BzKSA9PiAoXG4gIDxIdkxhYmVsIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmZvTWVzc2FnZSA9IHN0eWxlZCgocHJvcHM6IEh2SW5mb01lc3NhZ2VQcm9wcykgPT4gKFxuICA8SHZJbmZvTWVzc2FnZSB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRXJyb3IgPSBzdHlsZWQoKHByb3BzOiBIdldhcm5pbmdUZXh0UHJvcHMpID0+IChcbiAgPEh2V2FybmluZ1RleHQgey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgY2xlYXI6IFwiYm90aFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0Q29udGFpbmVyID0gc3R5bGVkKFxuICBIdkxpc3RDb250YWluZXIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJG9yaWVudGF0aW9uLFxuICAgICR2YWxpZGF0aW9uU3RhdGUsXG4gIH06IHtcbiAgICAkb3JpZW50YXRpb246IHN0cmluZztcbiAgICAkdmFsaWRhdGlvblN0YXRlOiBzdHJpbmc7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxvYXQ6IFwibGVmdFwiLFxuICAgIGNsZWFyOiBcImJvdGhcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIC8vIFByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgXCImPipcIjoge1xuICAgICAgICB6SW5kZXg6IDAsXG4gICAgICB9LFxuICAgICAgXCImPio6Zm9jdXMtd2l0aGluXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgfSxcbiAgICAgIC8vIElFIGZhbGxiYWNrIGNvZGUgKHVzaW5nIGZvY3VzLXdpdGhpbi1wb2x5ZmlsbClcbiAgICAgIFwiJj4qLmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJob3Jpem9udGFsXCIgJiYge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICAgIG1hcmdpbkxlZnQ6IC10aGVtZS5zcGFjZS5zbSxcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2Uuc20sXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFsaWRhdGlvblN0YXRlID09PSBcImludmFsaWRcIiAmJiB7XG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledError = /* @__PURE__ */ _styled__default.default((props) => /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1l81ih61"
-} : {
-  target: "e1l81ih61",
-  label: "StyledError"
-})(process.env.NODE_ENV === "production" ? {
-  name: "cethdq",
-  styles: "width:100%;float:left;clear:both"
-} : {
-  name: "cethdq",
-  styles: "width:100%;float:left;clear:both",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2VsZWN0aW9uTGlzdC9TZWxlY3Rpb25MaXN0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUMyQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1NlbGVjdGlvbkxpc3QvU2VsZWN0aW9uTGlzdC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtcy9Gb3JtRWxlbWVudFwiO1xuaW1wb3J0IHsgSHZMYWJlbCwgSHZMYWJlbFByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvTGFiZWxcIjtcbmltcG9ydCB7XG4gIEh2SW5mb01lc3NhZ2UsXG4gIEh2SW5mb01lc3NhZ2VQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvSW5mb01lc3NhZ2VcIjtcbmltcG9ydCB7XG4gIEh2V2FybmluZ1RleHQsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHRcIjtcbmltcG9ydCB7IEh2TGlzdENvbnRhaW5lciB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRm9ybUVsZW1lbnQgPSBzdHlsZWQoKHByb3BzOiBIdkZvcm1FbGVtZW50UHJvcHMpID0+IChcbiAgPEh2Rm9ybUVsZW1lbnQgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKChwcm9wczogSHZMYWJlbFByb3BzKSA9PiAoXG4gIDxIdkxhYmVsIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmZvTWVzc2FnZSA9IHN0eWxlZCgocHJvcHM6IEh2SW5mb01lc3NhZ2VQcm9wcykgPT4gKFxuICA8SHZJbmZvTWVzc2FnZSB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRXJyb3IgPSBzdHlsZWQoKHByb3BzOiBIdldhcm5pbmdUZXh0UHJvcHMpID0+IChcbiAgPEh2V2FybmluZ1RleHQgey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgY2xlYXI6IFwiYm90aFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0Q29udGFpbmVyID0gc3R5bGVkKFxuICBIdkxpc3RDb250YWluZXIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJG9yaWVudGF0aW9uLFxuICAgICR2YWxpZGF0aW9uU3RhdGUsXG4gIH06IHtcbiAgICAkb3JpZW50YXRpb246IHN0cmluZztcbiAgICAkdmFsaWRhdGlvblN0YXRlOiBzdHJpbmc7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxvYXQ6IFwibGVmdFwiLFxuICAgIGNsZWFyOiBcImJvdGhcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIC8vIFByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgXCImPipcIjoge1xuICAgICAgICB6SW5kZXg6IDAsXG4gICAgICB9LFxuICAgICAgXCImPio6Zm9jdXMtd2l0aGluXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgfSxcbiAgICAgIC8vIElFIGZhbGxiYWNrIGNvZGUgKHVzaW5nIGZvY3VzLXdpdGhpbi1wb2x5ZmlsbClcbiAgICAgIFwiJj4qLmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJob3Jpem9udGFsXCIgJiYge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICAgIG1hcmdpbkxlZnQ6IC10aGVtZS5zcGFjZS5zbSxcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2Uuc20sXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFsaWRhdGlvblN0YXRlID09PSBcImludmFsaWRcIiAmJiB7XG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledListContainer = /* @__PURE__ */ _styled__default.default(ListContainer.HvListContainer, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1l81ih60"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1l81ih60",
-  label: "StyledListContainer"
-}, transientOptions.transientOptions))(({
-  $orientation,
-  $validationState
-}) => ({
-  display: "flex",
-  float: "left",
-  clear: "both",
-  width: "100%",
-  paddingBottom: uikitStyles.theme.space.xs,
-  ...$orientation === "vertical" && {
+  },
+  vertical: {
     flexDirection: "column",
     // Prevent the focus ring to be hidden by sibling hover background
     "&>*": {
@@ -109,27 +46,12 @@ const StyledListContainer = /* @__PURE__ */ _styled__default.default(ListContain
     },
     "&>*:focus-within": {
       zIndex: 1
-    },
-    // IE fallback code (using focus-within-polyfill)
-    "&>*.focus-within": {
-      zIndex: 1
-    }
-  },
-  ...$orientation === "horizontal" && {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    marginLeft: -uikitStyles.theme.space.sm,
-    "&>*": {
-      marginLeft: uikitStyles.theme.space.sm
     }
   },
-  ...$validationState === "invalid" && {
+  invalid: {
     borderBottom: `1px solid ${uikitStyles.theme.colors.negative}`
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2VsZWN0aW9uTGlzdC9TZWxlY3Rpb25MaXN0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaURtQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1NlbGVjdGlvbkxpc3QvU2VsZWN0aW9uTGlzdC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtcy9Gb3JtRWxlbWVudFwiO1xuaW1wb3J0IHsgSHZMYWJlbCwgSHZMYWJlbFByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvTGFiZWxcIjtcbmltcG9ydCB7XG4gIEh2SW5mb01lc3NhZ2UsXG4gIEh2SW5mb01lc3NhZ2VQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvSW5mb01lc3NhZ2VcIjtcbmltcG9ydCB7XG4gIEh2V2FybmluZ1RleHQsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHRcIjtcbmltcG9ydCB7IEh2TGlzdENvbnRhaW5lciB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRm9ybUVsZW1lbnQgPSBzdHlsZWQoKHByb3BzOiBIdkZvcm1FbGVtZW50UHJvcHMpID0+IChcbiAgPEh2Rm9ybUVsZW1lbnQgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKChwcm9wczogSHZMYWJlbFByb3BzKSA9PiAoXG4gIDxIdkxhYmVsIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmZvTWVzc2FnZSA9IHN0eWxlZCgocHJvcHM6IEh2SW5mb01lc3NhZ2VQcm9wcykgPT4gKFxuICA8SHZJbmZvTWVzc2FnZSB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRXJyb3IgPSBzdHlsZWQoKHByb3BzOiBIdldhcm5pbmdUZXh0UHJvcHMpID0+IChcbiAgPEh2V2FybmluZ1RleHQgey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgY2xlYXI6IFwiYm90aFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0Q29udGFpbmVyID0gc3R5bGVkKFxuICBIdkxpc3RDb250YWluZXIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJG9yaWVudGF0aW9uLFxuICAgICR2YWxpZGF0aW9uU3RhdGUsXG4gIH06IHtcbiAgICAkb3JpZW50YXRpb246IHN0cmluZztcbiAgICAkdmFsaWRhdGlvblN0YXRlOiBzdHJpbmc7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxvYXQ6IFwibGVmdFwiLFxuICAgIGNsZWFyOiBcImJvdGhcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIC8vIFByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgXCImPipcIjoge1xuICAgICAgICB6SW5kZXg6IDAsXG4gICAgICB9LFxuICAgICAgXCImPio6Zm9jdXMtd2l0aGluXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgfSxcbiAgICAgIC8vIElFIGZhbGxiYWNrIGNvZGUgKHVzaW5nIGZvY3VzLXdpdGhpbi1wb2x5ZmlsbClcbiAgICAgIFwiJj4qLmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJob3Jpem9udGFsXCIgJiYge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICAgIG1hcmdpbkxlZnQ6IC10aGVtZS5zcGFjZS5zbSxcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2Uuc20sXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFsaWRhdGlvblN0YXRlID09PSBcImludmFsaWRcIiAmJiB7XG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-exports.StyledError = StyledError;
-exports.StyledFormElement = StyledFormElement;
-exports.StyledInfoMessage = StyledInfoMessage;
-exports.StyledLabel = StyledLabel;
-exports.StyledListContainer = StyledListContainer;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=SelectionList.styles.cjs.map

package/dist/cjs/components/SelectionList/SelectionList.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionList.styles.cjs","sources":["../../../../src/components/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import ~~styled from \"@emotion/styled\";\n\nimport~~ { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {~~\n HvFormElement,\n HvFormElementProps,\n}~~ ~~from~~ ~~\"@core/components/Forms/FormElement\";\nimport { HvLabel, HvLabelProps~~ } from \"@core/~~components~~/~~Forms/Label~~\";\~~nimport {~~\~~n HvInfoMessage,\n HvInfoMessageProps,\n}~~ ~~from~~ ~~\"@core/components/Forms/InfoMessage\";\nimport~~ {~~\n HvWarningText,\n HvWarningTextProps,\n}~~ ~~from~~ ~~\"@core/components/Forms/WarningText\";\nimport~~ ~~{ HvListContainer~~ } ~~from~~ \"~~@core/components/ListContainer~~\"~~;\nimport~~ { ~~transientOptions } from~~ \~~"@core/utils/transientOptions\";\~~n~~\nexport const StyledFormElement = styled((props~~: ~~HvFormElementProps) => (\n <HvFormElement~~ {~~...props}~~ ~~/>\n))({\n~~ display: \"inline-block\"~~,\n~~ padding: 0~~,\n~~ margin: 0,\n~~});\n\nexport~~ ~~const~~ ~~StyledLabel = styled((props~~: ~~HvLabelProps) => (~~\~~n <HvLabel~~ ~~{...props} />\n))({\n marginBottom: theme.space.xs,\n~~ float: \"left\"~~,\n});\n\nexport~~ ~~const StyledInfoMessage = styled((props~~: ~~HvInfoMessageProps) => (~~\~~n <HvInfoMessage {...props} />\n))({\n float: \~~"~~left~~\",\n~~});\n\nexport const StyledError = styled((props~~: ~~HvWarningTextProps) => (\n <HvWarningText~~ {~~...props} />\n))({~~\n ~~width~~: \"~~100%\~~",\n float: \"left\",\n clear: \"both\",\n~~});\n\nexport~~ ~~const StyledListContainer = styled(~~\~~n HvListContainer~~,\n ~~transientOptions\n)(\n ({\n~~ ~~$orientation~~,\n ~~$validationState~~,\n }: {~~\n $orientation:~~ ~~string;\n $validationState~~: ~~string;\n })~~ ~~=> ({\n display~~: \"~~flex~~\",\n float: \"left\",\n ~~clear~~: \"~~both~~\",\n ~~width~~: \"~~100%\~~",\n ~~paddingBottom~~: theme.space.xs,\n ~~...($orientation ===~~ \"~~vertical\~~" && {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>\": {\n zIndex: 0,\n },\n \"&>:focus-within\": {\n ~~zIndex: 1,\n~~ ~~},\n // IE fallback code (using focus-within-polyfill)\n \"&>.focus-within\": {\n~~ zIndex: 1,\n },\n }),\n ~~...($orientation === \"horizontal\" && {\n flexDirection~~: ~~\"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>\":~~ {~~\n marginLeft:~~ ~~theme.space.sm,\n },\n }),\n ...($validationState === \"invalid\" && {\n~~ borderBottom: `1px solid ${theme.colors.negative}~~`,\n~~ }),\n })~~\n)~~;\n"],"names":["~~StyledFormElement~~","~~_styled~~","~~props~~","~~HvFormElement~~","~~process~~","~~env~~","~~NODE_ENV~~","~~target~~","~~label~~","~~name~~","~~styles~~","~~map~~","~~toString~~","~~_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","HvLabel","marginBottom","~~theme","space","xs","~~float~~","~~StyledInfoMessage~~","~~HvInfoMessage~~","~~StyledError~~","~~HvWarningText~~","~~StyledListContainer~~","~~HvListContainer~~","~~_extends~~","~~transientOptions~~","~~$orientation","$validationState","display","clear","width","paddingBottom","flexDirection","~~zIndex","~~flexWrap~~","~~marginLeft","sm","~~borderBottom","colors","negative"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO~~,~~MAAMA,oBAAoBC,iCAAAA,QAAO,CAACC,yCACtCC,YAAAA,eAAa~~;AAAA,~~EAAA,GAAKD~~;~~AAAK~~,~~CAAG,GAC5BE,QAAAC,IAAAC,aAAA,eAAA~~;~~AAAA~~,~~EAAAC~~,~~QAAA;AAAA~~,~~IAAA;AAAA~~,~~EAAAA,QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAACJ,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAG~~,~~MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA~~;AAAA,~~EAAAD~~,~~MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~EAAAC~~,~~KAAA~~;AAAA,~~EAAAC~~,~~UAAAC~~;AAAA,~~CAID~~;~~AAEM,MAAMC,cAAcb,iCAAAA,QAAO,CAACC,yCAChCa,MAAAA,SAAO;~~AAAA,~~EAAA~~,~~GAAKb~~;~~AAAK,CAAG,GACtBE,QAAAC,IAAAC,aAAA,eAAA;~~AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA;AAAA~~,~~EAAAA,QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAAE~~;AAAA,~~EACDQ~~,~~cAAcC~~,YAAAA,MAAMC,MAAMC;AAAAA,~~EAC1BC,OAAO~~;~~AACT,GAAChB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6gHAAA;AAEK,MAAMe,oBAAoBpB,iCAAAA,QAAO,CAACC,yCACtCoB,YAAAA,eAAa;~~AAAA,~~EAAA~~,~~GAAKpB~~;~~AAAK,CAAG,GAC5BE,QAAAC,IAAAC,aAAA,eAAA;~~AAAA,~~EAAAC~~,~~QAAA;AAAA~~,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAED;AAEM,MAAMU,cAActB,iCAAAA,QAAO,CAACC,yCAChCsB,YAAAA,~~eAAa;AAAA~~,~~EAAA,GAAKtB~~;~~AAAK~~,~~CAAG~~,~~GAC5BE,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAC,QAAA~~;AAAA,~~IAAA;AAAA~~,~~EAAAA,QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAG~~,~~MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA;AAAA~~,~~EAAAD,MAAA~~;AAAA,~~EAAAC~~,~~QAAA;AAAA~~,~~EAAAC~~,~~KAAA;AAAA~~,~~EAAAC,UAAAC~~;~~AAAA~~,~~CAID;AAEYY~~,~~MAAAA,+DACXC,cAAAA,iBAAetB,QAAAC,IAAAC,4BAAAqB,SAAA,IAAA~~;AAAA,~~EAAApB~~,~~QAAA;AAAA~~,~~GACfqB~~,~~iBAAgB~~,~~gBAAA,IAAAD,SAAA,IAAA~~;~~AAAA~~,~~EAAApB,QAAA~~;AAAA,~~EAAAC,OAAA~~;AAAA,~~GAAhBoB,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCC;AAAAA,~~EACAC~~;AAIF~~,~~OAAO~~;AAAA,~~EACLC~~,~~SAAS;AAAA,EACTX,OAAO;AAAA,EACPY,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,eAAejB,YAAAA,MAAMC,MAAMC;AAAAA,EAC3B,GAAIU,iBAAiB,cAAc;AAAA,IACjCM,~~eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,~~MACLC~~,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA~~;AAAA~~,~~IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,~~EACF;AAAA,~~EACA~~,~~GAAIP,iBAAiB,gBAAgB~~;AAAA,~~IACnCM~~,~~eAAe;AAAA,IACfE,UAAU;AAAA,IACVC,YAAY,CAACrB,kBAAMC,MAAMqB;AAAAA,IACzB,OAAO;AAAA,MACLD,YAAYrB,YAAAA,MAAMC,MAAMqB;AAAAA,IAC1B;AAAA,EACF;AAAA,EACA,GAAIT,qBAAqB,aAAa;AAAA,IACpCU,~~cAAe,~~aAAYvB~~,YAAAA,~~MAAMwB~~,OAAOC;AAAAA,~~EAC1C~~;~~AACF~~,~~IAAEtC,QAAAC,IAAAC,8iHACJ;;;;;;~~"}
1	+ {"version":3,"file":"SelectionList.styles.cjs","sources":["../../../../src/components/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n root: { display: \"inline-block\", padding: 0, margin: 0 },\n error: { width: \"100%\", float: \"left\", clear: \"both\" },\n listbox: {\n display: \"flex\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n paddingBottom: theme.space.xs,\n },\n label: { marginBottom: theme.space.xs, float: \"left\" },\n description: { float: \"left\" },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>\": {\n marginLeft: theme.space.sm,\n },\n },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n invalid: { borderBottom: `1px solid ${theme.colors.negative}` },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","padding","margin","error","width","float","clear","listbox","paddingBottom","theme","space","xs","label","marginBottom","description","horizontal","flexDirection","flexWrap","marginLeft","sm","vertical","zIndex","invalid","borderBottom","colors","negative"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAgBC,SAAS;AAAA,IAAGC,QAAQ;AAAA,EAAE;AAAA,EACvDC,OAAO;AAAA,IAAEC,OAAO;AAAA,IAAQC,OAAO;AAAA,IAAQC,OAAO;AAAA,EAAO;AAAA,EACrDC,SAAS;AAAA,IACPP,SAAS;AAAA,IACTK,OAAO;AAAA,IACPC,OAAO;AAAA,IACPF,OAAO;AAAA,IACPI,eAAeC,YAAAA,MAAMC,MAAMC;AAAAA,EAC7B;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcJ,YAAAA,MAAMC,MAAMC;AAAAA,IAAIN,OAAO;AAAA,EAAO;AAAA,EACrDS,aAAa;AAAA,IAAET,OAAO;AAAA,EAAO;AAAA,EAC7BU,YAAY;AAAA,IACVC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,YAAY,CAACT,kBAAMC,MAAMS;AAAAA,IACzB,OAAO;AAAA,MACLD,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRJ,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLK,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IAAEC,cAAe,aAAYd,YAAAA,MAAMe,OAAOC;AAAAA,EAAW;AAChE,CAAC;;;"}

package/dist/cjs/components/Stack/Stack.cjs CHANGED Viewed

@@ -3,13 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const styles = require("@mui/material/styles");
 const MuiDivider = require("@mui/material/Divider");
-const clsx = require("clsx");
 const isString = require("lodash/isString");
 const isBoolean = require("lodash/isBoolean");
 const useWidth = require("../../hooks/useWidth.cjs");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Stack_styles = require("./Stack.styles.cjs");
-const stackClasses = require("./stackClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Focus = require("../Focus/Focus.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -29,7 +27,7 @@ const getDirection = (direction, width, breakpoints) => {
 };
 const HvStack = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     children,
     direction = "column",
@@ -39,6 +37,10 @@ const HvStack = (props) => {
     dividerProps = {},
     ...others
   } = useDefaultProps.useDefaultProps("HvStack", props);
+  const {
+    classes,
+    cx
+  } = Stack_styles.useClasses(classesProp);
   const width = useWidth.useWidth();
   const containerRef = React.useRef(null);
   const {
@@ -56,11 +58,9 @@ const HvStack = (props) => {
     }
     return divider;
   }, [divider, dividerProps, processedDirection]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Stack_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: containerRef,
-    className: clsx.clsx(className, stackClasses.default.root, classes == null ? void 0 : classes.root),
-    $direction: processedDirection,
-    $breakpoint: spacing,
+    className: cx(classes.root, classes[processedDirection], classes[spacing], className),
     ...others,
     children: React__default.default.Children.map(children, (child, i) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -79,5 +79,6 @@ const HvStack = (props) => {
     })
   });
 };
+exports.stackClasses = Stack_styles.staticClasses;
 exports.HvStack = HvStack;
 //# sourceMappingURL=Stack.cjs.map

package/dist/cjs/components/Stack/Stack.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stack.cjs","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React, { useMemo, useRef, useCallback } from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiDivider, {\n DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\n\nimport ~~{ clsx } from \"clsx\";\n\nimport~~ isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\n\nimport { useWidth } from \"@core/hooks/useWidth\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { HvBreakpoints } from \"@core/types/tokens\";\n\nimport { ~~StyledRoot~~ } from \"~~./Stack.styles~~\";\nimport ~~stackClasses~~, { ~~HvStackClasses~~ } from \"./~~stackClasses~~\";\n\nexport type HvStackDirection = \"column\" \| \"row\" \| Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. /\n direction?: HvStackDirection;\n /* The spacing between elements of the stack. /\n spacing?: HvBreakpoints;\n /* The divider component to be used between the stack elements.\n * - If `true` the Material-UI Divider component will be used.\n * - If a React node is passed then the custom divider will be used.\n /\n divider?: boolean \| React.ReactNode;\n /* The properties to pass on to the Material-UI component. /\n dividerProps?: MuiDividerProps;\n /* Sets whether or not there should be arrow navigation between the stack elements. /\n withNavigation?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvStackClasses;\n}\n\n/\n @returns {string} - Returns a direction for the stack: column or row. If the\n * `direction` property is a string and a valid direction then we\n * use it. If it's an object with multiple directions by breakpoint\n * we use the appropriate one or search for the nearest breakpoint\n * smaller than the current one to use.\n /\nconst getDirection = (direction, width, breakpoints) => {\n if (isString(direction)) return direction;\n\n for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n if (direction[breakpoints[i]] !== undefined) {\n return direction[breakpoints[i]];\n }\n }\n return \"column\";\n};\n\n/\n A Stack component allows the organization of its children in a vertical or horizontal layout.\n \n It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n /\nexport const HvStack = (props: HvStackProps) => {\n const {\n classes,\n className,\n children,\n direction = \"column\",\n spacing = \"sm\",\n divider = false,\n withNavigation = false,\n dividerProps = {},\n ...others\n } = useDefaultProps(\"HvStack\", props);\n const width = useWidth();\n const containerRef = useRef(null);\n const { breakpoints } = useTheme();\n\n const processedDirection = useMemo(\n () => getDirection(direction, width, breakpoints.keys),\n [direction, width, breakpoints]\n );\n\n /\n @returns {node} - The divider component to use. If the property `divider` is\n * set to `true` then the Material-UI divider is used, otherwise\n * we use the custom divider the user passed.\n */\n const getDividerComponent = useCallback(() => {\n if (isBoolean(divider) && divider) {\n return (\n <MuiDivider\n orientation={\n processedDirection === \"column\" ? \"horizontal\" : \"vertical\"\n }\n flexItem={processedDirection === \"row\"}\n role=\"separator\"\n {...dividerProps}\n />\n );\n }\n return divider;\n }, [divider, dividerProps, processedDirection]);\n\n return (\n <~~StyledRoot~~\n ref={containerRef}\n className={~~clsx~~(~~className, stackClasses~~.root, classes~~?.root)}\~~n ~~$direction={processedDirection}~~\n ~~$breakpoint={spacing~~}\n {...others}\n >\n {React.Children.map(children, (child, i) => {\n return (\n <>\n {divider && i !== 0 && getDividerComponent()}\n {withNavigation ? (\n <HvFocus\n rootRef={containerRef}\n focusDisabled={false}\n strategy=\"grid\"\n navigationJump={\n processedDirection === \"column\"\n ? 1\n : React.Children.count(children) \|\| 0\n }\n filterClass=\"child\"\n >\n <div className=\"child\">{child}</div>\n </HvFocus>\n ) : (\n child\n )}\n </>\n );\n })}\n </~~StyledRoot~~>\n );\n};\n"],"names":["getDirection","direction","width","breakpoints","isString","i","indexOf","undefined","HvStack","props","classes","className","children","spacing","divider","withNavigation","dividerProps","others","useDefaultProps","useWidth","containerRef","useRef","useTheme","processedDirection","useMemo","keys","getDividerComponent","useCallback","isBoolean","MuiDivider","orientation","flexItem","role","~~StyledRoot","~~ref","~~clsx","stackClasses","~~root","~~$direction","$breakpoint","~~React","Children","map","child","_Fragment","_jsx","HvFocus","rootRef","focusDisabled","strategy","navigationJump","count","filterClass"],"mappings":"~~;;;;;;;;;;;;;;;;;;;AAiDA~~,MAAMA,eAAeA,CAACC,WAAWC,OAAOC,gBAAgB;AACtD,MAAIC,kBAAAA,QAASH,SAAS;AAAUA,WAAAA;AAEvBI,WAAAA,IAAIF,YAAYG,QAAQJ,KAAK,GAAGG,KAAK,GAAGA,KAAK,GAAG;AACvD,QAAIJ,UAAUE,YAAYE,CAAC,CAAC,MAAME,QAAW;AACpCN,aAAAA,UAAUE,YAAYE,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACO,SAAA;AACT;AAOaG,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC;AAAAA,~~IACAC~~;AAAAA,IACAC;AAAAA,~~IACAX~~,YAAY;AAAA,~~IACZY~~,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,iBAAiB;AAAA,IACjBC,eAAe,CAAC;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,~~WAAWT~~,KAAK;~~AACpC~~,~~QAAMP~~,~~QAAQiB~~,SAAAA;AACRC,QAAAA,eAAeC,aAAO,IAAI;AAC1B,QAAA;AAAA,~~IAAElB~~;AAAAA,~~MAAgBmB~~,OAAS,SAAA;AAEjC,QAAMC,qBAAqBC,MAAAA,QACzB,~~MAAMxB~~,aAAaC,WAAWC,OAAOC,~~YAAYsB~~,IAAI,GACrD,~~CAACxB~~,WAAWC,OAAOC,WAAW,CAChC;~~AAOMuB~~,QAAAA,sBAAsBC,MAAAA,YAAY,MAAM;AACxCC,QAAAA,mBAAAA,~~QAAUd~~,OAAO,KAAKA,SAAS;AACjC,~~4CACGe~~,oBAAAA,SAAU;AAAA,QACTC,aACEP,uBAAuB,WAAW,eAAe;AAAA,QAEnDQ,UAAUR,uBAAuB;AAAA,QACjCS,MAAK;AAAA,QAAW,~~GACZhB~~;AAAAA,MAAAA,CACL;AAAA,IAEL;AACOF,WAAAA;AAAAA,EACN,GAAA,CAACA,SAASE,~~cAAcO~~,kBAAkB,CAAC;AAE9C,~~wCACGU~~,~~aAAAA,YAAU~~;AAAA,~~IACTC~~,~~KAAKd~~;AAAAA,~~IACLT~~,~~WAAWwB~~,~~KAAKxB~~,~~KAAAA~~,~~WAAWyB~~,~~aAAaC~~,~~QAAAA~~,~~MAAM3B~~,~~mCAAS2B~~,~~IAAI;AAAA~~,~~IAC3DC~~,~~YAAYf~~;~~AAAAA~~,~~IACZgB~~,~~aAAa1B~~;AAAAA,~~IAAQ,GACjBI;AAAAA,~~IAAML,~~UAET4B~~,eAAMC,QAAAA,SAASC,~~IAAI9B~~,UAAU,~~CAAC+B~~,~~OAAOtC~~,MAAM;AAC1C,~~6CACEuC~~,WAAAA,UAAA;AAAA,~~QAAAhC~~,UACGE,CAAAA,~~WAAWT~~,MAAM,~~KAAKqB~~,~~uBACtBX~~,~~iBACC8B~~,2BAAAA,IAACC,eAAO;AAAA,UACNC,~~SAAS3B~~;AAAAA,~~UACT4B~~,eAAe;AAAA,UACfC,UAAS;AAAA,UACTC,~~gBACE3B~~,uBAAuB,WACnB,~~IACAiB~~,uBAAMC,SAASU,~~MAAMvC~~,QAAQ,KAAK;AAAA,~~UAExCwC~~,aAAY;AAAA,~~UAAOxC~~,yCAEnB,OAAA;AAAA,YAAKD,WAAU;AAAA,YAAOC,~~UAAE+B~~;AAAAA,UAAAA,CAAW;AAAA,QAC5B,CAAA,IAETA,KACD;AAAA,MAAA,CACD;AAAA,IAAA,CAEL;AAAA,EAAA,~~CACS~~;~~AAEhB;;~~"}
1	+ {"version":3,"file":"Stack.cjs","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React, { useMemo, useRef, useCallback } from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiDivider, {\n DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\n\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\n\nimport { useWidth } from \"@core/hooks/useWidth\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { HvBreakpoints } from \"@core/types/tokens\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Stack.styles\";\n\nexport { staticClasses as stackClasses };\n\nexport type HvStackClasses = ExtractNames<typeof useClasses>;\n\nexport type HvStackDirection = \"column\" \| \"row\" \| Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. /\n direction?: HvStackDirection;\n /* The spacing between elements of the stack. /\n spacing?: HvBreakpoints;\n /* The divider component to be used between the stack elements.\n * - If `true` the Material-UI Divider component will be used.\n * - If a React node is passed then the custom divider will be used.\n /\n divider?: boolean \| React.ReactNode;\n /* The properties to pass on to the Material-UI component. /\n dividerProps?: MuiDividerProps;\n /* Sets whether or not there should be arrow navigation between the stack elements. /\n withNavigation?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvStackClasses;\n}\n\n/\n @returns {string} - Returns a direction for the stack: column or row. If the\n * `direction` property is a string and a valid direction then we\n * use it. If it's an object with multiple directions by breakpoint\n * we use the appropriate one or search for the nearest breakpoint\n * smaller than the current one to use.\n /\nconst getDirection = (direction, width, breakpoints) => {\n if (isString(direction)) return direction;\n\n for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n if (direction[breakpoints[i]] !== undefined) {\n return direction[breakpoints[i]];\n }\n }\n return \"column\";\n};\n\n/\n A Stack component allows the organization of its children in a vertical or horizontal layout.\n \n It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n /\nexport const HvStack = (props: HvStackProps) => {\n const {\n classes: classesProp,\n className,\n children,\n direction = \"column\",\n spacing = \"sm\",\n divider = false,\n withNavigation = false,\n dividerProps = {},\n ...others\n } = useDefaultProps(\"HvStack\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const width = useWidth();\n const containerRef = useRef(null);\n const { breakpoints } = useTheme();\n\n const processedDirection = useMemo(\n () => getDirection(direction, width, breakpoints.keys),\n [direction, width, breakpoints]\n );\n\n /\n @returns {node} - The divider component to use. If the property `divider` is\n * set to `true` then the Material-UI divider is used, otherwise\n * we use the custom divider the user passed.\n */\n const getDividerComponent = useCallback(() => {\n if (isBoolean(divider) && divider) {\n return (\n <MuiDivider\n orientation={\n processedDirection === \"column\" ? \"horizontal\" : \"vertical\"\n }\n flexItem={processedDirection === \"row\"}\n role=\"separator\"\n {...dividerProps}\n />\n );\n }\n return divider;\n }, [divider, dividerProps, processedDirection]);\n\n return (\n <div\n ref={containerRef}\n className={cx(\n classes.root,\n classes[processedDirection],\n classes[spacing],\n className\n )}\n {...others}\n >\n {React.Children.map(children, (child, i) => {\n return (\n <>\n {divider && i !== 0 && getDividerComponent()}\n {withNavigation ? (\n <HvFocus\n rootRef={containerRef}\n focusDisabled={false}\n strategy=\"grid\"\n navigationJump={\n processedDirection === \"column\"\n ? 1\n : React.Children.count(children) \|\| 0\n }\n filterClass=\"child\"\n >\n <div className=\"child\">{child}</div>\n </HvFocus>\n ) : (\n child\n )}\n </>\n );\n })}\n </div>\n );\n};\n"],"names":["getDirection","direction","width","breakpoints","isString","i","indexOf","undefined","HvStack","props","classes","classesProp","className","children","spacing","divider","withNavigation","dividerProps","others","useDefaultProps","cx","useClasses","useWidth","containerRef","useRef","useTheme","processedDirection","useMemo","keys","getDividerComponent","useCallback","isBoolean","MuiDivider","orientation","flexItem","role","ref","root","React","Children","map","child","_Fragment","_jsx","HvFocus","rootRef","focusDisabled","strategy","navigationJump","count","filterClass"],"mappings":";;;;;;;;;;;;;;;;;AAmDA,MAAMA,eAAeA,CAACC,WAAWC,OAAOC,gBAAgB;AACtD,MAAIC,kBAAAA,QAASH,SAAS;AAAUA,WAAAA;AAEvBI,WAAAA,IAAIF,YAAYG,QAAQJ,KAAK,GAAGG,KAAK,GAAGA,KAAK,GAAG;AACvD,QAAIJ,UAAUE,YAAYE,CAAC,CAAC,MAAME,QAAW;AACpCN,aAAAA,UAAUE,YAAYE,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACO,SAAA;AACT;AAOaG,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAZ,YAAY;AAAA,IACZa,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,iBAAiB;AAAA,IACjBC,eAAe,CAAC;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,WAAWV,KAAK;AAC9B,QAAA;AAAA,IAAEC;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,aAAAA,WAAWV,WAAW;AAE9C,QAAMT,QAAQoB,SAAAA;AACRC,QAAAA,eAAeC,aAAO,IAAI;AAC1B,QAAA;AAAA,IAAErB;AAAAA,MAAgBsB,OAAS,SAAA;AAEjC,QAAMC,qBAAqBC,MAAAA,QACzB,MAAM3B,aAAaC,WAAWC,OAAOC,YAAYyB,IAAI,GACrD,CAAC3B,WAAWC,OAAOC,WAAW,CAChC;AAOM0B,QAAAA,sBAAsBC,MAAAA,YAAY,MAAM;AACxCC,QAAAA,mBAAAA,QAAUhB,OAAO,KAAKA,SAAS;AACjC,4CACGiB,oBAAAA,SAAU;AAAA,QACTC,aACEP,uBAAuB,WAAW,eAAe;AAAA,QAEnDQ,UAAUR,uBAAuB;AAAA,QACjCS,MAAK;AAAA,QAAW,GACZlB;AAAAA,MAAAA,CACL;AAAA,IAEL;AACOF,WAAAA;AAAAA,EACN,GAAA,CAACA,SAASE,cAAcS,kBAAkB,CAAC;AAE9C,wCACE,OAAA;AAAA,IACEU,KAAKb;AAAAA,IACLX,WAAWQ,GACTV,QAAQ2B,MACR3B,QAAQgB,kBAAkB,GAC1BhB,QAAQI,OAAO,GACfF,SACF;AAAA,IAAE,GACEM;AAAAA,IAAML,UAETyB,eAAMC,QAAAA,SAASC,IAAI3B,UAAU,CAAC4B,OAAOpC,MAAM;AAC1C,6CACEqC,WAAAA,UAAA;AAAA,QAAA7B,UACGE,CAAAA,WAAWV,MAAM,KAAKwB,uBACtBb,iBACC2B,2BAAAA,IAACC,eAAO;AAAA,UACNC,SAAStB;AAAAA,UACTuB,eAAe;AAAA,UACfC,UAAS;AAAA,UACTC,gBACEtB,uBAAuB,WACnB,IACAY,uBAAMC,SAASU,MAAMpC,QAAQ,KAAK;AAAA,UAExCqC,aAAY;AAAA,UAAOrC,yCAEnB,OAAA;AAAA,YAAKD,WAAU;AAAA,YAAOC,UAAE4B;AAAAA,UAAAA,CAAW;AAAA,QAC5B,CAAA,IAETA,KACD;AAAA,MAAA,CACD;AAAA,IAAA,CAEL;AAAA,EAAA,CACE;AAET;;;"}