@hitachivantara/uikit-react-core 5.24.1 → 5.24.2

package/dist/esm/components/RadioGroup/RadioGroup.styles.js

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

package/dist/esm/components/RadioGroup/RadioGroup.styles.js.map

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

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

@@ -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

@@ -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":";;;;;;;;;;;AAuFA,MAAMA,+BAA+BA,CACnCC,UACAC,aACG;AACGC,QAAAA,iBAAiBC,eAAMC,SAASC,QAAQL,QAAQ,EACnDM,IAAI,CAACC,UAAe;;AACbC,UAAAA,sBAAoBD,oCAAOE,UAAPF,mBAAcG,cAAaC;AACrD,UAAMC,kBACJL,SAASC,qBACLD,WAAME,UAANF,mBAAaG,YACbH,WAAME,UAANF,mBAAaM;AAEZD,WAAAA,kBAAkBL,+BAAOE,MAAMK,QAAQH;AAAAA,EAAAA,CAC/C,EACAI,OAAQC,CAAAA,MAAMA,MAAML,MAAS;AAEzBV,SAAAA,WAAWC,iBAAiBA,iDAAiB;AACtD;AAQae,MAAAA,kBAAkBA,CAACR,UAAgC;AACxD,QAAA;AAAA,IACJS;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACApB;AAAAA,IACAqB;AAAAA,IACAP,OAAOQ;AAAAA,IACPC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,qBAAqBC;AAAAA,IACrBC,cAAc;AAAA,IACdnC,WAAW;AAAA,IACXoC,wBAAwB;AAAA,IACxB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmB9B,KAAK;AAEtC+B,QAAAA,YAAYC,YAAYvB,IAAI,iBAAiB;AAEnD,QAAM,CAACJ,OAAO4B,QAAQ,IAAIC,cACxBrB,WACAC,iBAAiBZ,SACbY;AAAAA;AAAAA;AAAAA,IAGA,MAAMxB,6BAA6BC,UAAUC,QAAQ;AAAA,GAC3D;AAEA,QAAM,CAAC2C,iBAAiBC,kBAAkB,IAAIF,cAC5CV,QACA,SACF;AAEA,QAAM,CAACa,iBAAiB,IAAIH,cAAcT,eAAe,UAAU;AAEnE,QAAM,CAACa,WAAWC,aAAa,IAAIC,QAAQ,MAAM;AAC/C,UAAMC,cAAqB,CAAA;AAC3B,UAAMC,qBAAgC,CAAA;AAEtChD,mBAAMC,SAASC,QAAQL,QAAQ,EAAEoD,QAAQ,CAAC7C,OAAY8C,MAAc;;AAC5DC,YAAAA,cAAa/C,oCAAOE,UAAPF,mBAAcO;AACjC,YAAMF,kBAAkBX,WACpBa,MAAMyC,QAAQD,UAAU,MAAM,KAC9BxC,UAAUwC;AAEdJ,kBAAYG,CAAC,IAAIC;AACjBH,yBAAmBE,CAAC,IAAIzC;AAAAA,IAAAA,CACzB;AAEM,WAAA,CAACsC,aAAaC,kBAAkB;AAAA,EACtC,GAAA,CAACnD,UAAUC,UAAUa,KAAK,CAAC;AAExB0C,QAAAA,kBAAkBC,OAAO9C,MAAS;AAElC+C,QAAAA,gBAAgBD,OAAY,IAAI;AAEtCE,YAAU,MAAM;AACRC,UAAAA,aAAaA,CAACC,UAAyB;AAC3C,YAAMC,YAAmB,CAAA;AAEtBC,UAAAA,MAAMF,OAAO,SAAS,KACrBA,MAAMG,YACNN,cAAcO,QAAQC,SAASL,MAAMM,MAAM,KAC5CJ,MAAMF,OAAO,WAAW,KACvBA,MAAMG,YACNN,cAAcO,QAAQC,SAASL,MAAMM,MAAM,GAC7C;AACcf,sBAAAA,QAAQ,CAACgB,YAAYf,MAAM;AACvC,cAAIA,MAAOQ,MAAMM,OAAerD,QAAQ,GAAG;AACzC,gBAAI,CAACsD,YAAY;AACLC,wBAAAA,KAAKtB,UAAUM,CAAC,CAAC;AAAA,YAC7B;AAAA,qBACSe,YAAY;AACXC,sBAAAA,KAAKtB,UAAUM,CAAC,CAAC;AAAA,UAC7B;AAAA,QAAA,CACD;AACDX,iBAASoB,SAAS;AAAA,MACpB;AAAA,IAAA;AAEKQ,WAAAA,iBAAiB,SAASV,UAAU;AAE3C,WAAO,MAAM;AACJW,aAAAA,oBAAoB,SAASX,UAAU;AAAA,IAAA;AAAA,EAE/C,GAAA,CAACb,WAAWC,eAAeN,QAAQ,CAAC;AAEvC,QAAM8B,2BAA2BC,YAC/B,CACEC,OACAC,cACAC,QACG;AACHD,iDAAeC;AAEX,QAAA,CAACnD,YAAY,CAACC,UAAU;AACtBmD,UAAAA;AACJ,UAAI5E,UAAU;AACZ4E,mBAAWC,2BACTF,KACAF,OACAlB,iBACAT,WACAC,eACArC,MACF;AAAA,MAAA,OACK;AACLkE,mBACExC,yBAAyBW,cAAc0B,KAAK,IACxC,OACA3B,UAAU2B,KAAK;AAAA,MACvB;AAEA1C,2CAAW4C,KAAKC;AAEhBnC,eAAS,MAAM;AAGTlB,YAAAA,YAAYqD,SAASE,WAAW,GAAG;AACrClC,6BAAmB,SAAS;AAAA,QAAA,OACvB;AACLA,6BAAmB,OAAO;AAAA,QAC5B;AAEOgC,eAAAA;AAAAA,MAAAA,CACR;AAAA,IACH;AAAA,EAEF,GAAA,CACE9B,WACArB,UACAzB,UACA+B,UACAP,UACAD,UACAwB,eACAH,oBACAH,UACAL,uBACAmB,eAAe,CAEnB;AAEMwB,QAAAA,mBAAmB/B,QAAQ,MAAM;AACrC,WAAO9C,eAAMC,SAASE,IAAIN,UAAU,CAACO,OAAY8C,MAAc;;AACvDzC,YAAAA,kBAAkBoC,cAAcK,CAAC;AAEhClD,aAAAA,eAAM8E,aAAa1E,OAAO;AAAA,QAC/B2E,MAAM;AAAA,QACNxE,UAAUE;AAAAA,QACVuE,SAAUP,CACRJ,QAAAA;;AAAAA,0CAAyBnB,IAAG9C,MAAAA,+BAAOE,UAAPF,gBAAAA,IAAc4E,SAASP,GAAG;AAAA;AAAA,QACxDlD,UAAUA,cAAYnB,oCAAOE,UAAPF,mBAAcmB;AAAAA,MAAAA,CACrC;AAAA,IAAA,CACF;AAAA,KACA,CAAC1B,UAAU0B,UAAU8C,0BAA0BxB,aAAa,CAAC;AAM1DoC,QAAAA,eACJjD,oBAAoB,SAClBF,WAAWtB,UAAauB,kBAAkBvB,UACzCsB,WAAWtB,UAAaa;AAE7B,QAAM6D,iBAAiBD,eACnBE,MAAM9C,WAAW,OAAO,IACxBL;AAEJ,QAAMoD,SAAU5D,SAAS2D,MAAM9C,WAAW,SAAS,KAAM;AAEzD,8BACGgD,mBAAiB;AAAA,IAChBtE;AAAAA,IACAG;AAAAA,IACAY,QAAQW;AAAAA,IACRlB;AAAAA,IACAF;AAAAA,IACAC;AAAAA,IACAL,WAAWqE,KAAKrE,WAAWsE,qBAAqBC,MAAMxE,mCAASwE,IAAI;AAAA,IAAE3F,UAEpE2B,CAAAA,SACCiE,oBAACC,aAAW;AAAA,MACV3E,IAAIoE,MAAM9C,WAAW,OAAO;AAAA,MAC5Bb;AAAAA,MACAP,WAAWqE,KAAKC,qBAAqB/D,OAAOR,mCAASQ,KAAK;AAAA,IAAA,CAC3D,GAEFG,eACC8D,oBAACE,mBAAiB;AAAA,MAChB5E,IAAIoE,MAAM9C,WAAW,aAAa;AAAA,MAClCpB,WAAWqE,KACTC,qBAAqB5D,aACrBX,mCAASW,WACX;AAAA,MAAE9B,UAED8B;AAAAA,IAAAA,CACgB,GAGrB8D,oBAACG,qBAAmB;AAAA,MAClB7E,IAAIqE;AAAAA,MACJS,aAAW;AAAA,MACXC,WAAS;AAAA,MACTf,MAAK;AAAA,MACL,wBAAsBjF,YAAYU;AAAAA,MAClC,cAAYiB;AAAAA,MACZ,mBACE,CAACD,SAAS2D,MAAM9C,WAAW,OAAO,GAAGX,cAAc,EAChDqE,KAAK,GAAG,EACRC,UAAUxF;AAAAA,MAEf,gBAAciC,oBAAoB,YAAY,OAAOjC;AAAAA,MACrD,qBACEiC,oBAAoB,YAAYyC,iBAAiB1E;AAAAA,MAEnD,oBACE,CAACmB,eAAewD,MAAM9C,WAAW,aAAa,GAAGT,eAAe,EAC7DmE,KAAK,GAAG,EACRC,UAAUxF;AAAAA,MAEfS,WAAWqE,KACTtE,mCAASiF,SACTV,qBAAqBU,SACrBhE,gBAAgB,cACdqD,KAAKC,qBAAqBW,UAAUlF,mCAASkF,QAAQ,GACvDjE,gBAAgB,gBACdqD,KAAKC,qBAAqBY,YAAYnF,mCAASmF,UAAU,GAC3D1D,oBAAoB,aAClB6C,KAAKC,qBAAqBa,SAASpF,mCAASoF,OAAO,CACvD;AAAA,MACAC,KAAK9C;AAAAA,MACL+C,cAAcrE;AAAAA,MACdsE,kBAAkB9D;AAAAA,MAAgB,GAC9BN;AAAAA,MAAMtC,UAETgF;AAAAA,IAAAA,CACkB,GAEpBI,gBACCQ,oBAACe,aAAW;AAAA,MACVzF,IAAIoE,MAAM9C,WAAW,OAAO;AAAA,MAC5BoE,eAAa;AAAA,MACbxF,WAAWqE,KAAKC,qBAAqBmB,OAAO1F,mCAAS0F,KAAK;AAAA,MAAE7G,UAE3D8C;AAAAA,IAAAA,CACU,CACd;AAAA,EAAA,CACgB;AAEvB;"}
+{"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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

package/dist/esm/components/Stack/Stack.js.map

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