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

@hitachivantara/uikit-react-core 5.24.1 → 5.24.3

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

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" \| \"fixed\" \| \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToHorizontalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Horizontal scroll to. /\n position?: HvScrollToHorizontalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToHorizontalClasses;\n}\n\n/\n The horizontal scroll to element can be used to quickly navigate in a page.\n /\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <div className={classes.notSelectedRoot}>\n <div className={classes.notSelected} />\n </div>\n );\n }, [classes.notSelectedRoot, classes.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={classes.selected}\n />\n );\n }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ol\n className={cx(\n css({\n width:\n position === \"fixed\" && (upMd \|\| downSm)\n ? `calc(100% - 2${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: hexToRgbA(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n className,\n classes.root,\n {\n [classes.positionSticky]: position === \"sticky\",\n [classes.positionFixed]: position === \"fixed\",\n }\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
1	+ {"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" \| \"fixed\" \| \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToHorizontalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Horizontal scroll to. /\n position?: HvScrollToHorizontalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToHorizontalClasses;\n}\n\n/\n The horizontal scroll to element can be used to quickly navigate in a page.\n /\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <div className={classes.notSelectedRoot}>\n <div className={classes.notSelected} />\n </div>\n );\n }, [classes.notSelectedRoot, classes.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={classes.selected}\n />\n );\n }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ol\n className={cx(\n css({\n width:\n position === \"fixed\" && (upMd \|\| downSm)\n ? `calc(100% - 2${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: hexToRgbA(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n classes.root,\n {\n [classes.positionSticky]: position === \"sticky\",\n [classes.positionFixed]: position === \"fixed\",\n },\n className\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js CHANGED Viewed

@@ -77,10 +77,10 @@ const HvScrollToVertical = (props) => {
   return /* @__PURE__ */ jsx("ol", {
     className: cx(css({
       backgroundColor
-    }), className, classes.root, {
+    }), classes.root, {
       [classes.positionFixed]: position === "fixed",
       [classes.positionAbsolute]: position === "absolute"
-    }),
+    }, className),
     style: {
       top: `calc(50% - ${positionOffset}px)`,
       ...style

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n staticClasses,\n useClasses,\n calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n HvScrollToTooltipPositions,\n HvScrollToVerticalOption,\n HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToVerticalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Vertical scroll to. /\n position?: HvScrollToVerticalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToVerticalClasses;\n}\n\n/\n The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n style,\n ...others\n } = useDefaultProps(\"HvScrollToVertical\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition, false);\n });\n }, [options, tooltipPosition]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvVerticalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n aria-label={option.label}\n />\n );\n });\n\n const positionOffset = calculateOffset(options.length);\n const backgroundColor = hexToRgbA(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n );\n\n return (\n <ol\n className={cx(css({ backgroundColor })~~, className,~~ classes.root, {\n [classes.positionFixed]: position === \"fixed\",\n [classes.positionAbsolute]: position === \"absolute\",\n })}\n style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAEzCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,+BACGY,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,MAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,gBAAgBvC,QAAQwC,MAAM;AAC/CC,QAAAA,kBAAkBC,UACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,6BACE,MAAA;AAAA,IACElD,WAAWW,~~GAAGD~~,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,~~GAAG5C~~,~~WAAWC,~~QAAQkD,~~MAAM~~;AAAA,~~MAC/D~~,CAAClD,QAAQmD,aAAa,GAAG/C,aAAa;AAAA,MACtC,CAACJ,QAAQoD,gBAAgB,GAAGhD,aAAa;AAAA,~~IAAA~~,~~CAC1C~~;AAAA,~~IACDE~~,OAAO;AAAA,MAAE+C,KAAM,cAAab;AAAAA,MAAqB,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM+C,UAETtB;AAAAA,EAAAA,CACC;AAER;"}
1	+ {"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n staticClasses,\n useClasses,\n calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n HvScrollToTooltipPositions,\n HvScrollToVerticalOption,\n HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToVerticalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Vertical scroll to. /\n position?: HvScrollToVerticalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToVerticalClasses;\n}\n\n/\n The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n style,\n ...others\n } = useDefaultProps(\"HvScrollToVertical\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition, false);\n });\n }, [options, tooltipPosition]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvVerticalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n aria-label={option.label}\n />\n );\n });\n\n const positionOffset = calculateOffset(options.length);\n const backgroundColor = hexToRgbA(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n );\n\n return (\n <ol\n className={cx(\n css({ backgroundColor }),\n classes.root,\n {\n [classes.positionFixed]: position === \"fixed\",\n [classes.positionAbsolute]: position === \"absolute\",\n },\n className\n )}\n style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAEzCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,+BACGY,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,MAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,gBAAgBvC,QAAQwC,MAAM;AAC/CC,QAAAA,kBAAkBC,UACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,6BACE,MAAA;AAAA,IACElD,WAAWW,GACTD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GACvB3C,QAAQkD,MACR;AAAA,MACE,CAAClD,QAAQmD,aAAa,GAAG/C,aAAa;AAAA,MACtC,CAACJ,QAAQoD,gBAAgB,GAAGhD,aAAa;AAAA,OAE3CL,SACF;AAAA,IACAO,OAAO;AAAA,MAAE+C,KAAM,cAAab;AAAAA,MAAqB,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM+C,UAETtB;AAAAA,EAAAA,CACC;AAER;"}

package/dist/esm/components/SelectionList/SelectionList.js CHANGED Viewed

@@ -1,14 +1,18 @@
 import React__default, { useMemo, useRef, useEffect, useCallback } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { clsx } from "clsx";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { multiSelectionEventHandler } from "../../utils/multiSelectionEventHandler.js";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
-import { StyledFormElement, StyledLabel, StyledInfoMessage, StyledListContainer, StyledError } from "./SelectionList.styles.js";
-import selectionListClasses from "./selectionListClasses.js";
+import { useClasses } from "./SelectionList.styles.js";
+import { staticClasses } from "./SelectionList.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvListContainer } from "../ListContainer/ListContainer.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children, multiple) => {
   const selectedValues = React__default.Children.toArray(children).map((child) => {
     var _a, _b, _c;
@@ -21,7 +25,7 @@ const getValueFromSelectedChildren = (children, multiple) => {
 const HvSelectionList = (props) => {
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     children,
     name,
@@ -44,6 +48,10 @@ const HvSelectionList = (props) => {
     singleSelectionToggle = false,
     ...others
   } = useDefaultProps("HvSelectionList", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const elementId = useUniqueId(id, "hvselectionlist");
   const [value, setValue] = useControlled(valueProp, defaultValue !== void 0 ? defaultValue : (
     // when uncontrolled and no default value is given,
@@ -125,23 +133,23 @@ const HvSelectionList = (props) => {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   const listId = label && setId(elementId, "listbox") || "";
-  return /* @__PURE__ */ jsxs(StyledFormElement, {
+  return /* @__PURE__ */ jsxs(HvFormElement, {
     id,
     name,
     status: validationState,
     disabled,
     required,
     readOnly,
-    className: clsx(className, selectionListClasses.root, classes == null ? void 0 : classes.root),
-    children: [label && /* @__PURE__ */ jsx(StyledLabel, {
+    className: cx(classes.root, className),
+    children: [label && /* @__PURE__ */ jsx(HvLabel, {
       id: setId(elementId, "label"),
       label,
-      className: clsx(selectionListClasses.label, classes == null ? void 0 : classes.label)
-    }), description && /* @__PURE__ */ jsx(StyledInfoMessage, {
+      className: classes.label
+    }), description && /* @__PURE__ */ jsx(HvInfoMessage, {
       id: setId(elementId, "description"),
-      className: clsx(selectionListClasses.description, classes == null ? void 0 : classes.description),
+      className: classes.description,
       children: description
-    }), /* @__PURE__ */ jsx(StyledListContainer, {
+    }), /* @__PURE__ */ jsx(HvListContainer, {
       id: listId,
       interactive: true,
       condensed: true,
@@ -152,21 +160,24 @@ const HvSelectionList = (props) => {
       "aria-invalid": validationState === "invalid" ? true : void 0,
       "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
       "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-      className: clsx(classes == null ? void 0 : classes.listbox, selectionListClasses.listbox, orientation === "vertical" && clsx(selectionListClasses.vertical, classes == null ? void 0 : classes.vertical), orientation === "horizontal" && clsx(selectionListClasses.horizontal, classes == null ? void 0 : classes.horizontal), validationState === "invalid" && clsx(selectionListClasses.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__ */ jsx(StyledError, {
+    }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
       id: setId(elementId, "error"),
       disableBorder: true,
-      className: clsx(selectionListClasses.error, classes == null ? void 0 : classes.error),
+      className: classes.error,
       children: validationMessage
     })]
   });
 };
 export {
-  HvSelectionList
+  HvSelectionList,
+  staticClasses as selectionListClasses
 };
 //# sourceMappingURL=SelectionList.js.map

package/dist/esm/components/SelectionList/SelectionList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionList.js","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.js","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/esm/components/SelectionList/SelectionList.styles.js CHANGED Viewed

@@ -1,103 +1,42 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../utils/transientOptions.js";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { HvFormElement } from "../Forms/FormElement/FormElement.js";
-import { HvLabel } from "../Forms/Label/Label.js";
-import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
-import { HvWarningText } from "../Forms/WarningText/WarningText.js";
-import { HvListContainer } from "../ListContainer/ListContainer.js";
-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];
-        }
-      }
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = 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: theme.space.xs
+  },
+  label: {
+    marginBottom: theme.space.xs,
+    float: "left"
+  },
+  description: {
+    float: "left"
+  },
+  horizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginLeft: -theme.space.sm,
+    "&>*": {
+      marginLeft: theme.space.sm
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledFormElement = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(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((props) => /* @__PURE__ */ jsx(HvLabel, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1l81ih63"
-} : {
-  target: "e1l81ih63",
-  label: "StyledLabel"
-})({
-  marginBottom: 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((props) => /* @__PURE__ */ jsx(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((props) => /* @__PURE__ */ jsx(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(HvListContainer, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1l81ih60"
-}, transientOptions) : _extends({}, {
-  target: "e1l81ih60",
-  label: "StyledListContainer"
-}, transientOptions))(({
-  $orientation,
-  $validationState
-}) => ({
-  display: "flex",
-  float: "left",
-  clear: "both",
-  width: "100%",
-  paddingBottom: theme.space.xs,
-  ...$orientation === "vertical" && {
+  },
+  vertical: {
     flexDirection: "column",
     // Prevent the focus ring to be hidden by sibling hover background
     "&>*": {
@@ -105,29 +44,14 @@ const StyledListContainer = /* @__PURE__ */ _styled(HvListContainer, process.env
     },
     "&>*:focus-within": {
       zIndex: 1
-    },
-    // IE fallback code (using focus-within-polyfill)
-    "&>*.focus-within": {
-      zIndex: 1
-    }
-  },
-  ...$orientation === "horizontal" && {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    marginLeft: -theme.space.sm,
-    "&>*": {
-      marginLeft: theme.space.sm
     }
   },
-  ...$validationState === "invalid" && {
+  invalid: {
     borderBottom: `1px solid ${theme.colors.negative}`
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2VsZWN0aW9uTGlzdC9TZWxlY3Rpb25MaXN0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaURtQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1NlbGVjdGlvbkxpc3QvU2VsZWN0aW9uTGlzdC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtcy9Gb3JtRWxlbWVudFwiO1xuaW1wb3J0IHsgSHZMYWJlbCwgSHZMYWJlbFByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvTGFiZWxcIjtcbmltcG9ydCB7XG4gIEh2SW5mb01lc3NhZ2UsXG4gIEh2SW5mb01lc3NhZ2VQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvSW5mb01lc3NhZ2VcIjtcbmltcG9ydCB7XG4gIEh2V2FybmluZ1RleHQsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHRcIjtcbmltcG9ydCB7IEh2TGlzdENvbnRhaW5lciB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRm9ybUVsZW1lbnQgPSBzdHlsZWQoKHByb3BzOiBIdkZvcm1FbGVtZW50UHJvcHMpID0+IChcbiAgPEh2Rm9ybUVsZW1lbnQgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKChwcm9wczogSHZMYWJlbFByb3BzKSA9PiAoXG4gIDxIdkxhYmVsIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmZvTWVzc2FnZSA9IHN0eWxlZCgocHJvcHM6IEh2SW5mb01lc3NhZ2VQcm9wcykgPT4gKFxuICA8SHZJbmZvTWVzc2FnZSB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRXJyb3IgPSBzdHlsZWQoKHByb3BzOiBIdldhcm5pbmdUZXh0UHJvcHMpID0+IChcbiAgPEh2V2FybmluZ1RleHQgey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgY2xlYXI6IFwiYm90aFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0Q29udGFpbmVyID0gc3R5bGVkKFxuICBIdkxpc3RDb250YWluZXIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJG9yaWVudGF0aW9uLFxuICAgICR2YWxpZGF0aW9uU3RhdGUsXG4gIH06IHtcbiAgICAkb3JpZW50YXRpb246IHN0cmluZztcbiAgICAkdmFsaWRhdGlvblN0YXRlOiBzdHJpbmc7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxvYXQ6IFwibGVmdFwiLFxuICAgIGNsZWFyOiBcImJvdGhcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIC8vIFByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgXCImPipcIjoge1xuICAgICAgICB6SW5kZXg6IDAsXG4gICAgICB9LFxuICAgICAgXCImPio6Zm9jdXMtd2l0aGluXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgfSxcbiAgICAgIC8vIElFIGZhbGxiYWNrIGNvZGUgKHVzaW5nIGZvY3VzLXdpdGhpbi1wb2x5ZmlsbClcbiAgICAgIFwiJj4qLmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRvcmllbnRhdGlvbiA9PT0gXCJob3Jpem9udGFsXCIgJiYge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICAgIG1hcmdpbkxlZnQ6IC10aGVtZS5zcGFjZS5zbSxcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2Uuc20sXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkdmFsaWRhdGlvblN0YXRlID09PSBcImludmFsaWRcIiAmJiB7XG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
+});
 export {
-  StyledError,
-  StyledFormElement,
-  StyledInfoMessage,
-  StyledLabel,
-  StyledListContainer
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=SelectionList.styles.js.map

package/dist/esm/components/SelectionList/SelectionList.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionList.styles.js","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,wBAAO,CAACC,8BACtCC,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,wBAAO,CAACC,8BAChCa,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~~,MAAMC,MAAMC;AAAAA,~~EAC1BC,OAAO~~;~~AACT,GAAChB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6gHAAA;AAEK,MAAMe,oBAAoBpB,wBAAO,CAACC,8BACtCoB,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,wBAAO,CAACC,8BAChCsB,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,8CACXC,iBAAetB,QAAAC,IAAAC,4BAAAqB,SAAA,IAAA;AAAA,EAAApB,QAAA;AAAA,GACfqB,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAApB,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBoB,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,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,MAAMC,MAAMqB;AAAAA,IACzB,OAAO;AAAA,MACLD,YAAYrB,MAAMC,MAAMqB;AAAAA,IAC1B;AAAA,EACF;AAAA,EACA,GAAIT,qBAAqB,aAAa;AAAA,IACpCU,~~cAAe,~~aAAYvB~~,~~MAAMwB~~,OAAOC;AAAAA,~~EAC1C~~;~~AACF~~,~~IAAEtC,QAAAC,IAAAC,8iHACJ~~;"}
1	+ {"version":3,"file":"SelectionList.styles.js","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,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,MAAMC,MAAMC;AAAAA,EAC7B;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcJ,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,MAAMC,MAAMS;AAAAA,IACzB,OAAO;AAAA,MACLD,YAAYT,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,MAAMe,OAAOC;AAAAA,EAAW;AAChE,CAAC;"}

package/dist/esm/components/Stack/Stack.js CHANGED Viewed

@@ -1,13 +1,12 @@
 import React__default, { useRef, useMemo, useCallback } from "react";
 import { useTheme } from "@mui/material/styles";
 import MuiDivider from "@mui/material/Divider";
-import { clsx } from "clsx";
 import isString from "lodash/isString";
 import isBoolean from "lodash/isBoolean";
 import { useWidth } from "../../hooks/useWidth.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { StyledRoot } from "./Stack.styles.js";
-import stackClasses from "./stackClasses.js";
+import { useClasses } from "./Stack.styles.js";
+import { staticClasses } from "./Stack.styles.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { HvFocus } from "../Focus/Focus.js";
 const getDirection = (direction, width, breakpoints) => {
@@ -22,7 +21,7 @@ const getDirection = (direction, width, breakpoints) => {
 };
 const HvStack = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     children,
     direction = "column",
@@ -32,6 +31,10 @@ const HvStack = (props) => {
     dividerProps = {},
     ...others
   } = useDefaultProps("HvStack", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const width = useWidth();
   const containerRef = useRef(null);
   const {
@@ -49,11 +52,9 @@ const HvStack = (props) => {
     }
     return divider;
   }, [divider, dividerProps, processedDirection]);
-  return /* @__PURE__ */ jsx(StyledRoot, {
+  return /* @__PURE__ */ jsx("div", {
     ref: containerRef,
-    className: clsx(className, stackClasses.root, classes == null ? void 0 : classes.root),
-    $direction: processedDirection,
-    $breakpoint: spacing,
+    className: cx(classes.root, classes[processedDirection], classes[spacing], className),
     ...others,
     children: React__default.Children.map(children, (child, i) => {
       return /* @__PURE__ */ jsxs(Fragment, {
@@ -73,6 +74,7 @@ const HvStack = (props) => {
   });
 };
 export {
-  HvStack
+  HvStack,
+  staticClasses as stackClasses
 };
 //# sourceMappingURL=Stack.js.map