@hitachivantara/uikit-react-core 5.0.0-next.11 → 5.0.0-next.14

package/dist/cjs/components/CheckBox/CheckBox.cjs

@@ -1,10 +1,10 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const clsx = require("clsx");
 const React = require("react");
 const CheckBox_styles = require("./CheckBox.styles.cjs");
 const checkBoxClasses = require("./checkBoxClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
@@ -72,21 +72,60 @@ const HvCheckBox = ({
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   }
-  const checkbox = /* @__PURE__ */ jsxRuntime.jsx(CheckBox_styles.StyledBaseCheckBox, { id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"), name, className: clsx__default.default(checkBoxClasses.default.checkbox, classes == null ? void 0 : classes.checkbox, isStateInvalid && clsx__default.default(checkBoxClasses.default.invalidCheckbox, classes == null ? void 0 : classes.invalidCheckbox)), $invalid: isStateInvalid, disabled, readOnly, required, onChange: onChangeCallback, value, checked: isChecked, indeterminate: isIndeterminate, semantic, inputProps: {
-    "aria-invalid": isStateInvalid ? true : void 0,
-    "aria-errormessage": errorMessageId,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    ...inputProps
-  }, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
-  return /* @__PURE__ */ jsxRuntime.jsxs(CheckBox_styles.StyledFormElement, { id, name, status: validationState, disabled, required, readOnly, className: clsx__default.default(className, checkBoxClasses.default.root, classes == null ? void 0 : classes.root, !!(focusVisible && label) && clsx__default.default(checkBoxClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible)), $focusVisible: !!(focusVisible && label), children: [
-    hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(CheckBox_styles.StyledLabelContainer, { className: clsx__default.default(checkBoxClasses.default.container, classes == null ? void 0 : classes.container, disabled && clsx__default.default(checkBoxClasses.default.disabled, classes == null ? void 0 : classes.disabled), isStateInvalid && clsx__default.default(checkBoxClasses.default.invalidContainer, classes == null ? void 0 : classes.invalidContainer)), $disabled: disabled, $invalid: isStateInvalid, children: [
-      checkbox,
-      /* @__PURE__ */ jsxRuntime.jsx(CheckBox_styles.StyledLabel, { id: setId.setId(elementId, "label"), htmlFor: setId.setId(elementId, "input"), label, className: clsx__default.default(checkBoxClasses.default.label, classes == null ? void 0 : classes.label), $disabled: disabled, ...labelProps })
-    ] }) : checkbox,
-    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableAdornment: !hasLabel, hideText: !hasLabel, disableBorder: true, children: validationMessage })
-  ] });
+  const checkbox = /* @__PURE__ */ jsxRuntime.jsx(CheckBox_styles.StyledBaseCheckBox, {
+    id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"),
+    name,
+    className: clsx__default.default(checkBoxClasses.default.checkbox, classes == null ? void 0 : classes.checkbox, isStateInvalid && clsx__default.default(checkBoxClasses.default.invalidCheckbox, classes == null ? void 0 : classes.invalidCheckbox)),
+    $invalid: isStateInvalid,
+    disabled,
+    readOnly,
+    required,
+    onChange: onChangeCallback,
+    value,
+    checked: isChecked,
+    indeterminate: isIndeterminate,
+    semantic,
+    inputProps: {
+      "aria-invalid": isStateInvalid ? true : void 0,
+      "aria-errormessage": errorMessageId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...inputProps
+    },
+    onFocusVisible: onFocusVisibleCallback,
+    onBlur: onBlurCallback,
+    ...others
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(CheckBox_styles.StyledFormElement, {
+    id,
+    name,
+    status: validationState,
+    disabled,
+    required,
+    readOnly,
+    className: clsx__default.default(className, checkBoxClasses.default.root, classes == null ? void 0 : classes.root, !!(focusVisible && label) && clsx__default.default(checkBoxClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible)),
+    $focusVisible: !!(focusVisible && label),
+    children: [hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(CheckBox_styles.StyledLabelContainer, {
+      className: clsx__default.default(checkBoxClasses.default.container, classes == null ? void 0 : classes.container, disabled && clsx__default.default(checkBoxClasses.default.disabled, classes == null ? void 0 : classes.disabled), isStateInvalid && clsx__default.default(checkBoxClasses.default.invalidContainer, classes == null ? void 0 : classes.invalidContainer)),
+      $disabled: disabled,
+      $invalid: isStateInvalid,
+      children: [checkbox, /* @__PURE__ */ jsxRuntime.jsx(CheckBox_styles.StyledLabel, {
+        id: setId.setId(elementId, "label"),
+        htmlFor: setId.setId(elementId, "input"),
+        label,
+        className: clsx__default.default(checkBoxClasses.default.label, classes == null ? void 0 : classes.label),
+        $disabled: disabled,
+        ...labelProps
+      })]
+    }) : checkbox, canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
+      id: setId.setId(elementId, "error"),
+      disableAdornment: !hasLabel,
+      hideText: !hasLabel,
+      disableBorder: true,
+      children: validationMessage
+    })]
+  });
 };
 exports.HvCheckBox = HvCheckBox;
 //# sourceMappingURL=CheckBox.cjs.map

package/dist/cjs/components/CheckBox/CheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.cjs","sources":["../../../../src/components/CheckBox/CheckBox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { useCallback, useState } from \"react\";\nimport { setId } from \"utils\";\nimport { HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport { HvLabelProps, HvFormStatus, HvWarningText, isInvalid } from \"../Forms\";\nimport {\n  StyledBaseCheckBox,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n} from \"./CheckBox.styles\";\nimport checkBoxClasses, { HvCheckBoxClasses } from \"./checkBoxClasses\";\n\nexport type HvCheckBoxProps = Omit<HvBaseCheckBoxProps, \"classes\"> & {\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\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?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n};\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = ({\n  id,\n  classes,\n  className,\n  name,\n  checked,\n  status,\n  indeterminate,\n  statusMessage,\n  label,\n  labelProps,\n  inputProps,\n  value = \"on\",\n  required = false,\n  readOnly = false,\n  disabled = false,\n  semantic = false,\n  defaultChecked = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  onFocusVisible,\n  onBlur,\n  ...others\n}: HvCheckBoxProps) => {\n  const elementId = useUniqueId(id, \"hvcheckbox\");\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const [isIndeterminate, setIsIndeterminate] = useControlled(\n    checked !== undefined ? indeterminate : undefined,\n    Boolean(indeterminate)\n  );\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const onChangeCallback = useCallback(\n    (event, newChecked) => {\n      setIsChecked(() => {\n        // This will only run if uncontrolled\n        setIsIndeterminate(false);\n\n        if (required && !newChecked) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newChecked;\n      });\n\n      onChange?.(event, newChecked, value);\n    },\n    [\n      onChange,\n      required,\n      setIsChecked,\n      setIsIndeterminate,\n      setValidationState,\n      value,\n    ]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\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 hasLabel = label != null;\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const checkbox = (\n    <StyledBaseCheckBox\n      id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={clsx(\n        checkBoxClasses.checkbox,\n        classes?.checkbox,\n        isStateInvalid &&\n          clsx(checkBoxClasses.invalidCheckbox, classes?.invalidCheckbox)\n      )}\n      $invalid={isStateInvalid}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      onChange={onChangeCallback}\n      value={value}\n      checked={isChecked}\n      indeterminate={isIndeterminate}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\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(\n        className,\n        checkBoxClasses.root,\n        classes?.root,\n        !!(focusVisible && label) &&\n          clsx(checkBoxClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={!!(focusVisible && label)}\n    >\n      {hasLabel ? (\n        <StyledLabelContainer\n          className={clsx(\n            checkBoxClasses.container,\n            classes?.container,\n            disabled && clsx(checkBoxClasses.disabled, classes?.disabled),\n            isStateInvalid &&\n              clsx(checkBoxClasses.invalidContainer, classes?.invalidContainer)\n          )}\n          $disabled={disabled}\n          $invalid={isStateInvalid}\n        >\n          {checkbox}\n          <StyledLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={clsx(checkBoxClasses.label, classes?.label)}\n            $disabled={disabled}\n            {...labelProps}\n          />\n        </StyledLabelContainer>\n      ) : (\n        checkbox\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableAdornment={!hasLabel}\n          hideText={!hasLabel}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvCheckBox","id","classes","className","name","checked","status","indeterminate","statusMessage","label","labelProps","inputProps","value","required","readOnly","disabled","semantic","defaultChecked","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","onFocusVisible","onBlur","others","elementId","useUniqueId","focusVisible","setFocusVisible","useState","validationState","setValidationState","useControlled","validationMessage","isChecked","setIsChecked","Boolean","isIndeterminate","setIsIndeterminate","undefined","isStateInvalid","isInvalid","onChangeCallback","useCallback","event","newChecked","onFocusVisibleCallback","onBlurCallback","canShowError","hasLabel","errorMessageId","setId","checkbox","jsx","StyledBaseCheckBox","clsx","checkBoxClasses","invalidCheckbox","jsxs","StyledFormElement","root","StyledLabelContainer","container","invalidContainer","StyledLabel","HvWarningText"],"mappings":";;;;;;;;;;;;;;AAwDO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,iBAAiB;AAAA,EACjB,cAAcC;AAAAA,EACd,mBAAmBC;AAAAA,EACnB,oBAAoBC;AAAAA,EACpB,qBAAqBC;AAAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACY,MAAM;AACfC,QAAAA,YAAYC,YAAAA,QAAY1B,IAAI,YAAY;AAE9C,QAAM,CAAC2B,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIC,cAAAA,cAC5C3B,QACA,SAAS;AAGX,QAAM,CAAC4B,iBAAiB,IAAID,cAAAA,cAAczB,eAAe,UAAU;AAE7D,QAAA,CAAC2B,WAAWC,YAAY,IAAIH,cAAAA,cAChC5B,SACAgC,QAAQpB,cAAc,CAAC;AAGnB,QAAA,CAACqB,iBAAiBC,kBAAkB,IAAIN,cAAAA,cAC5C5B,YAAYmC,SAAYjC,gBAAgBiC,QACxCH,QAAQ9B,aAAa,CAAC;AAGlBkC,QAAAA,iBAAiBC,2BAAUX,eAAe;AAEhD,QAAMY,mBAAmBC,MAAAA,YACvB,CAACC,OAAOC,eAAe;AACrBV,iBAAa,MAAM;AAEjBG,yBAAmB,KAAK;AAEpB1B,UAAAA,YAAY,CAACiC,YAAY;AAC3Bd,2BAAmB,SAAS;AAAA,MAAA,OACvB;AACLA,2BAAmB,OAAO;AAAA,MAC5B;AAEOc,aAAAA;AAAAA,IAAAA,CACR;AAEUD,yCAAAA,OAAOC,YAAYlC;AAAAA,EAAK,GAErC,CACEU,UACAT,UACAuB,cACAG,oBACAP,oBACApB,KAAK,CACN;AAGGmC,QAAAA,yBAAyBH,kBAC5BC,CAAU,UAAA;AACThB,oBAAgB,IAAI;AACpBN,qDAAiBsB;AAAAA,EAAK,GAExB,CAACtB,cAAc,CAAC;AAGZyB,QAAAA,iBAAiBJ,kBACpBC,CAAU,UAAA;AACThB,oBAAgB,KAAK;AACrBL,qCAASqB;AAAAA,EAAK,GAEhB,CAACrB,MAAM,CAAC;AAOJyB,QAAAA,eACJ5B,oBAAoB,SAClBf,WAAWkC,UAAahC,kBAAkBgC,UACzClC,WAAWkC,UAAa3B;AAE7B,QAAMqC,WAAWzC,SAAS;AAEtB0C,MAAAA;AACJ,MAAIV,gBAAgB;AAClBU,qBAAiBF,eACbG,MAAAA,MAAM1B,WAAW,OAAO,IACxBL;AAAAA,EACN;AAEA,QAAMgC,WACHC,2BAAA,IAAAC,oCAAA,EACC,IAAIL,WAAWE,MAAAA,MAAM1B,WAAW,OAAO,IAAI0B,MAAMnD,MAAAA,IAAI,OAAO,GAC5D,MACA,WAAWuD,cAAAA,QACTC,gBAAAA,QAAgBJ,UAChBnD,mCAASmD,UACTZ,kBACEe,sBAAKC,gBAAAA,QAAgBC,iBAAiBxD,mCAASwD,eAAe,CAAC,GAEnE,UAAUjB,gBACV,UACA,UACA,UACA,UAAUE,kBACV,OACA,SAASR,WACT,eAAeG,iBACf,UACA,YAAY;AAAA,IACV,gBAAgBG,iBAAiB,OAAOD;AAAAA,IACxC,qBAAqBW;AAAAA,IACrB,cAAcjC;AAAAA,IACd,mBAAmBC;AAAAA,IACnB,oBAAoBC;AAAAA,IACpB,GAAGT;AAAAA,EAAAA,GAEL,gBAAgBoC,wBAChB,QAAQC,gBACJvB,GAAAA,OAEP,CAAA;AAED,SACGkC,2BAAAA,KAAAC,gBAAAA,mBAAA,EACC,IACA,MACA,QAAQ7B,iBACR,UACA,UACA,UACA,WAAWyB,cACTrD,QAAAA,WACAsD,wBAAgBI,MAChB3D,mCAAS2D,MACT,CAAC,EAAEjC,gBAAgBnB,UACjB+C,cAAAA,QAAKC,wBAAgB7B,cAAc1B,mCAAS0B,YAAY,CAAC,GAE7D,eAAe,CAAC,EAAEA,gBAAgBnB,QAEjCyC,UAAAA;AAAAA,IACC,WAAAS,2BAAAA,KAACG,gBAAAA,sBACC,EAAA,WAAWN,cAAAA,QACTC,gBAAAA,QAAgBM,WAChB7D,mCAAS6D,WACThD,YAAYyC,cAAKC,QAAAA,gBAAAA,QAAgB1C,UAAUb,mCAASa,QAAQ,GAC5D0B,kBACEe,cAAKC,QAAAA,gBAAAA,QAAgBO,kBAAkB9D,mCAAS8D,gBAAgB,CAAC,GAErE,WAAWjD,UACX,UAAU0B,gBAETY,UAAAA;AAAAA,MAAAA;AAAAA,MACDC,2BAAAA,IAACW,+BACC,IAAIb,YAAM1B,WAAW,OAAO,GAC5B,SAAS0B,YAAM1B,WAAW,OAAO,GACjC,OACA,WAAW8B,cAAAA,QAAKC,gBAAAA,QAAgBhD,OAAOP,mCAASO,KAAK,GACrD,WAAWM,UACPL,GAAAA,WAAW,CAAA;AAAA,IAAA,EAAA,CAEnB,IAEA2C;AAAAA,IAEDJ,gBACEK,2BAAA,IAAAY,2BAAA,EACC,IAAId,YAAM1B,WAAW,OAAO,GAC5B,kBAAkB,CAACwB,UACnB,UAAU,CAACA,UACX,eAAa,MAEZhB,UACH,mBAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"CheckBox.cjs","sources":["../../../../src/components/CheckBox/CheckBox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { useCallback, useState } from \"react\";\nimport { setId } from \"utils\";\nimport { HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport { HvLabelProps, HvFormStatus, HvWarningText, isInvalid } from \"../Forms\";\nimport {\n  StyledBaseCheckBox,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n} from \"./CheckBox.styles\";\nimport checkBoxClasses, { HvCheckBoxClasses } from \"./checkBoxClasses\";\n\nexport type HvCheckBoxProps = Omit<HvBaseCheckBoxProps, \"classes\"> & {\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\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?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n};\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = ({\n  id,\n  classes,\n  className,\n  name,\n  checked,\n  status,\n  indeterminate,\n  statusMessage,\n  label,\n  labelProps,\n  inputProps,\n  value = \"on\",\n  required = false,\n  readOnly = false,\n  disabled = false,\n  semantic = false,\n  defaultChecked = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  onFocusVisible,\n  onBlur,\n  ...others\n}: HvCheckBoxProps) => {\n  const elementId = useUniqueId(id, \"hvcheckbox\");\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const [isIndeterminate, setIsIndeterminate] = useControlled(\n    checked !== undefined ? indeterminate : undefined,\n    Boolean(indeterminate)\n  );\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const onChangeCallback = useCallback(\n    (event, newChecked) => {\n      setIsChecked(() => {\n        // This will only run if uncontrolled\n        setIsIndeterminate(false);\n\n        if (required && !newChecked) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newChecked;\n      });\n\n      onChange?.(event, newChecked, value);\n    },\n    [\n      onChange,\n      required,\n      setIsChecked,\n      setIsIndeterminate,\n      setValidationState,\n      value,\n    ]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\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 hasLabel = label != null;\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const checkbox = (\n    <StyledBaseCheckBox\n      id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={clsx(\n        checkBoxClasses.checkbox,\n        classes?.checkbox,\n        isStateInvalid &&\n          clsx(checkBoxClasses.invalidCheckbox, classes?.invalidCheckbox)\n      )}\n      $invalid={isStateInvalid}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      onChange={onChangeCallback}\n      value={value}\n      checked={isChecked}\n      indeterminate={isIndeterminate}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\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(\n        className,\n        checkBoxClasses.root,\n        classes?.root,\n        !!(focusVisible && label) &&\n          clsx(checkBoxClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={!!(focusVisible && label)}\n    >\n      {hasLabel ? (\n        <StyledLabelContainer\n          className={clsx(\n            checkBoxClasses.container,\n            classes?.container,\n            disabled && clsx(checkBoxClasses.disabled, classes?.disabled),\n            isStateInvalid &&\n              clsx(checkBoxClasses.invalidContainer, classes?.invalidContainer)\n          )}\n          $disabled={disabled}\n          $invalid={isStateInvalid}\n        >\n          {checkbox}\n          <StyledLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={clsx(checkBoxClasses.label, classes?.label)}\n            $disabled={disabled}\n            {...labelProps}\n          />\n        </StyledLabelContainer>\n      ) : (\n        checkbox\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableAdornment={!hasLabel}\n          hideText={!hasLabel}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvCheckBox","id","classes","className","name","checked","status","indeterminate","statusMessage","label","labelProps","inputProps","value","required","readOnly","disabled","semantic","defaultChecked","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","onFocusVisible","onBlur","others","elementId","useUniqueId","focusVisible","setFocusVisible","useState","validationState","setValidationState","useControlled","validationMessage","isChecked","setIsChecked","Boolean","isIndeterminate","setIsIndeterminate","undefined","isStateInvalid","isInvalid","onChangeCallback","useCallback","event","newChecked","onFocusVisibleCallback","onBlurCallback","canShowError","hasLabel","errorMessageId","setId","checkbox","StyledBaseCheckBox","clsx","checkBoxClasses","invalidCheckbox","$invalid","StyledFormElement","root","$focusVisible","children","_jsxs","StyledLabelContainer","container","invalidContainer","$disabled","_jsx","StyledLabel","htmlFor","HvWarningText","disableAdornment","hideText","disableBorder"],"mappings":"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"}

package/dist/cjs/components/CheckBox/CheckBox.styles.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const transientOptions = require("../../utils/transientOptions.cjs");

package/dist/cjs/components/CheckBox/CheckBox.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styles.cjs","sources":["../../../../src/components/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"utils\";\nimport { transientOptions } from \"utils/transientOptions\";\nimport { HvBaseCheckBox, HvLabel, HvFormElement } from \"components\";\nimport checkBoxClasses from \"./checkBoxClasses\";\nimport { CSSProperties } from \"react\";\n\nexport const StyledFormElement = styled(\n  HvFormElement,\n  transientOptions\n)(({ $focusVisible }: { $focusVisible: boolean }) => ({\n  display: \"inline-block\",\n\n  ...($focusVisible && {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& .${checkBoxClasses.checkbox} div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  }),\n}));\n\nexport const StyledLabelContainer = styled(\n  \"div\",\n  transientOptions\n)(({ $disabled, $invalid }: { $disabled: boolean; $invalid: boolean }) => ({\n  cursor: \"pointer\",\n  display: \"flex\",\n  height: \"32px\",\n  transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n  \"&:hover\": {\n    backgroundColor: theme.checkbox.hoverColor,\n    borderRadius: theme.checkbox.borderRadius,\n\n    ...($invalid && {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    }),\n  },\n\n  ...($disabled && {\n    cursor: \"not-allowed\",\n  }),\n\n  ...($invalid && {\n    borderBottom: `1px solid ${theme.colors.sema4}`,\n  }),\n}));\n\nexport const StyledLabel = styled(\n  HvLabel,\n  transientOptions\n)(({ $disabled }: { $disabled: boolean }) => ({\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  verticalAlign: \"middle\",\n  paddingRight: theme.space.xs,\n  whiteSpace: \"nowrap\",\n  ...(theme.typography.body as CSSProperties),\n  cursor: \"pointer\",\n  height: \"32px\",\n  lineHeight: \"32px\",\n  width: \"100%\",\n\n  ...($disabled && {\n    color: theme.colors.atmo5,\n    cursor: \"not-allowed\",\n  }),\n}));\n\nexport const StyledBaseCheckBox = styled(\n  HvBaseCheckBox,\n  transientOptions\n)(({ $invalid }: { $invalid: boolean }) => ({\n  height: \"32px\",\n\n  ...($invalid && {\n    borderBottom: `1px solid ${theme.colors.sema4}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  }),\n}));\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","_extends","target","transientOptions","label","$focusVisible","display","outlineStyles","backgroundColor","theme","colors","atmo3","checkBoxClasses","checkbox","outline","boxShadow","StyledLabelContainer","$disabled","$invalid","cursor","height","transition","hoverColor","borderRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","sema4","StyledLabel","HvLabel","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width","color","atmo5","StyledBaseCheckBox","HvBaseCheckBox"],"mappings":"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"}
+{"version":3,"file":"CheckBox.styles.cjs","sources":["../../../../src/components/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"utils\";\nimport { transientOptions } from \"utils/transientOptions\";\nimport { HvBaseCheckBox, HvLabel, HvFormElement } from \"components\";\nimport checkBoxClasses from \"./checkBoxClasses\";\nimport { CSSProperties } from \"react\";\n\nexport const StyledFormElement = styled(\n  HvFormElement,\n  transientOptions\n)(({ $focusVisible }: { $focusVisible: boolean }) => ({\n  display: \"inline-block\",\n\n  ...($focusVisible && {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& .${checkBoxClasses.checkbox} div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  }),\n}));\n\nexport const StyledLabelContainer = styled(\n  \"div\",\n  transientOptions\n)(({ $disabled, $invalid }: { $disabled: boolean; $invalid: boolean }) => ({\n  cursor: \"pointer\",\n  display: \"flex\",\n  height: \"32px\",\n  transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n  \"&:hover\": {\n    backgroundColor: theme.checkbox.hoverColor,\n    borderRadius: theme.checkbox.borderRadius,\n\n    ...($invalid && {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    }),\n  },\n\n  ...($disabled && {\n    cursor: \"not-allowed\",\n  }),\n\n  ...($invalid && {\n    borderBottom: `1px solid ${theme.colors.sema4}`,\n  }),\n}));\n\nexport const StyledLabel = styled(\n  HvLabel,\n  transientOptions\n)(({ $disabled }: { $disabled: boolean }) => ({\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  verticalAlign: \"middle\",\n  paddingRight: theme.space.xs,\n  whiteSpace: \"nowrap\",\n  ...(theme.typography.body as CSSProperties),\n  cursor: \"pointer\",\n  height: \"32px\",\n  lineHeight: \"32px\",\n  width: \"100%\",\n\n  ...($disabled && {\n    color: theme.colors.atmo5,\n    cursor: \"not-allowed\",\n  }),\n}));\n\nexport const StyledBaseCheckBox = styled(\n  HvBaseCheckBox,\n  transientOptions\n)(({ $invalid }: { $invalid: boolean }) => ({\n  height: \"32px\",\n\n  ...($invalid && {\n    borderBottom: `1px solid ${theme.colors.sema4}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  }),\n}));\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","_extends","target","transientOptions","label","$focusVisible","display","outlineStyles","backgroundColor","theme","colors","atmo3","checkBoxClasses","checkbox","outline","boxShadow","StyledLabelContainer","$disabled","$invalid","cursor","height","transition","hoverColor","borderRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","sema4","StyledLabel","HvLabel","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width","color","atmo5","StyledBaseCheckBox","HvBaseCheckBox"],"mappings":"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"}

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.cjs

@@ -1,10 +1,10 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const CheckBoxGroup_styles = require("./CheckBoxGroup.styles.cjs");
 const clsx = require("clsx");
 const React = require("react");
 const checkBoxGroupClasses = require("./checkBoxGroupClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const multiSelectionEventHandler = require("../../utils/multiSelectionEventHandler.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
@@ -58,7 +58,11 @@ const HvCheckBoxGroup = ({
   onChange,
   ...others
 }) => {
-  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue !== void 0 ? defaultValue : () => getValueFromSelectedChildren(children));
+  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue !== void 0 ? defaultValue : (
+    // When uncontrolled and no default value is given,
+    // extract the initial selected values from the children own state
+    () => getValueFromSelectedChildren(children)
+  ));
   const [validationState, setValidationState] = useControlled.useControlled(status, "standBy");
   const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
   const elementId = useUniqueId.default(id, "hvcheckboxgroup");
@@ -126,24 +130,63 @@ const HvCheckBoxGroup = ({
       return newValue;
     });
   };
-  const selectAllLabelComponent = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedCount === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectAllLabel }),
-    ` (${React.Children.toArray(children).length})`
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectedCount }),
-    ` ${selectAllConjunctionLabel} ${React.Children.toArray(children).length}`
-  ] }) });
+  const selectAllLabelComponent = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: selectedCount === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("b", {
+        children: selectAllLabel
+      }), ` (${React.Children.toArray(children).length})`]
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("b", {
+        children: selectedCount
+      }), ` ${selectAllConjunctionLabel} ${React.Children.toArray(children).length}`]
+    })
+  });
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
-  return /* @__PURE__ */ jsxRuntime.jsxs(CheckBoxGroup_styles.StyledFormElement, { id, name, status: validationState, disabled, required, readOnly, className: clsx__default.default(className, classes == null ? void 0 : classes.root, checkBoxGroupClasses.default.root), children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(CheckBoxGroup_styles.StyledLabel, { id: setId.setId(elementId, "label"), label, className: clsx__default.default(classes == null ? void 0 : classes.label, checkBoxGroupClasses.default.label) }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), children: description }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CheckBoxGroup_styles.StyledGroupContainer, { role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0, "aria-disabled": disabled ? true : void 0, "aria-invalid": validationState === "invalid" ? true : void 0, "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, className: clsx__default.default(classes == null ? void 0 : classes.group, checkBoxGroupClasses.default.group, orientation === "vertical" && clsx__default.default(classes == null ? void 0 : classes.vertical, checkBoxGroupClasses.default.vertical), orientation === "horizontal" && clsx__default.default(classes == null ? void 0 : classes.horizontal, checkBoxGroupClasses.default.horizontal), validationState === "invalid" && clsx__default.default(classes == null ? void 0 : classes.invalid, checkBoxGroupClasses.default.invalid)), $vertical: orientation === "vertical", $horizontal: orientation === "horizontal", $invalid: validationState === "invalid", ...others, children: [
-      showSelectAll && /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, { checked: selectAllState === "all", indeterminate: selectAllState === "some", label: selectAllLabelComponent, disabled, readOnly, className: clsx__default.default(classes == null ? void 0 : classes.selectAll, checkBoxGroupClasses.default.selectAll), onChange: handleSelectAll }),
-      modifiedChildren
-    ] }),
-    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, className: clsx__default.default(classes == null ? void 0 : classes.error, checkBoxGroupClasses.default.error), children: validationMessage })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(CheckBoxGroup_styles.StyledFormElement, {
+    id,
+    name,
+    status: validationState,
+    disabled,
+    required,
+    readOnly,
+    className: clsx__default.default(className, classes == null ? void 0 : classes.root, checkBoxGroupClasses.default.root),
+    children: [label && /* @__PURE__ */ jsxRuntime.jsx(CheckBoxGroup_styles.StyledLabel, {
+      id: setId.setId(elementId, "label"),
+      label,
+      className: clsx__default.default(classes == null ? void 0 : classes.label, checkBoxGroupClasses.default.label)
+    }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
+      id: setId.setId(elementId, "description"),
+      children: description
+    }), /* @__PURE__ */ jsxRuntime.jsxs(CheckBoxGroup_styles.StyledGroupContainer, {
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0,
+      "aria-disabled": disabled ? true : void 0,
+      "aria-invalid": validationState === "invalid" ? true : void 0,
+      "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
+      "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+      className: clsx__default.default(classes == null ? void 0 : classes.group, checkBoxGroupClasses.default.group, orientation === "vertical" && clsx__default.default(classes == null ? void 0 : classes.vertical, checkBoxGroupClasses.default.vertical), orientation === "horizontal" && clsx__default.default(classes == null ? void 0 : classes.horizontal, checkBoxGroupClasses.default.horizontal), validationState === "invalid" && clsx__default.default(classes == null ? void 0 : classes.invalid, checkBoxGroupClasses.default.invalid)),
+      $vertical: orientation === "vertical",
+      $horizontal: orientation === "horizontal",
+      $invalid: validationState === "invalid",
+      ...others,
+      children: [showSelectAll && /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, {
+        checked: selectAllState === "all",
+        indeterminate: selectAllState === "some",
+        label: selectAllLabelComponent,
+        disabled,
+        readOnly,
+        className: clsx__default.default(classes == null ? void 0 : classes.selectAll, checkBoxGroupClasses.default.selectAll),
+        onChange: handleSelectAll
+      }), modifiedChildren]
+    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
+      id: setId.setId(elementId, "error"),
+      disableBorder: true,
+      className: clsx__default.default(classes == null ? void 0 : classes.error, checkBoxGroupClasses.default.error),
+      children: validationMessage
+    })]
+  });
 };
 exports.HvCheckBoxGroup = HvCheckBoxGroup;
 //# sourceMappingURL=CheckBoxGroup.cjs.map

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { HvFormStatus } from \"../Forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledFormElement,\n  StyledGroupContainer,\n  StyledLabel,\n} from \"./CheckBoxGroup.styles\";\nimport clsx from \"clsx\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { multiSelectionEventHandler, setId } from \"utils\";\nimport { HvCheckBox, HvInfoMessage, HvWarningText } from \"components\";\nimport { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\nimport checkBoxGroupClasses, {\n  HvCheckBoxGroupClasses,\n} from \"./checkBoxGroupClasses\";\n\nconst computeSelectAllState = (selected, total) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport type HvCheckBoxGroupProps = HvBaseProps<HTMLDivElement, { onChange }> & {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\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?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n};\n\n/**\n * A group of checkboxes.\n *\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  label,\n  description,\n  status,\n  statusMessage,\n  defaultValue,\n  value: valueProp,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  showSelectAll = false,\n  orientation = \"vertical\",\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvCheckBoxGroupProps) => {\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)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n  const selectionAnchor = useRef(undefined);\n\n  const [allValues, selectedState, selectedCount] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n    let childSelectedCounter = 0;\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = value.indexOf(childValue) !== -1;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n\n      if (childIsSelected) {\n        childSelectedCounter += 1;\n      }\n    });\n\n    return [childValues, childSelectedState, childSelectedCounter];\n  }, [children, value]);\n\n  const selectAllState = computeSelectAllState(\n    value.length,\n    selectedState.length\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean\n    ) => {\n      const newValue = multiSelectionEventHandler(\n        event,\n        index,\n        selectionAnchor,\n        allValues,\n        selectedState,\n        isChecked\n      );\n\n      childOnChange?.(event, isChecked);\n\n      onChange?.(event, 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    [allValues, onChange, required, selectedState, setValidationState, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) =>\n          onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    selectedState,\n  ]);\n\n  const handleSelectAll = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    selectAllChecked: boolean\n  ) => {\n    let newValue: any[];\n    if (selectAllChecked) {\n      newValue = [...allValues];\n    } else {\n      newValue = [];\n    }\n\n    onChange?.(event, newValue);\n\n    setValue(() => {\n      // This will only run if uncontrolled\n      if (required && newValue.length === 0) {\n        setValidationState(\"invalid\");\n      } else {\n        setValidationState(\"valid\");\n      }\n\n      return newValue;\n    });\n  };\n\n  const selectAllLabelComponent = (\n    <>\n      {selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      )}\n    </>\n  );\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  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, classes?.root, checkBoxGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, checkBoxGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroupContainer\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-disabled={disabled ? true : undefined}\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?.group,\n          checkBoxGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, checkBoxGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, checkBoxGroupClasses.horizontal),\n          validationState === \"invalid\" &&\n            clsx(classes?.invalid, checkBoxGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={validationState === \"invalid\"}\n        {...others}\n      >\n        {showSelectAll && (\n          <HvCheckBox\n            checked={selectAllState === \"all\"}\n            indeterminate={selectAllState === \"some\"}\n            label={selectAllLabelComponent}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={clsx(classes?.selectAll, checkBoxGroupClasses.selectAll)}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </StyledGroupContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, checkBoxGroupClasses.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","jsx","Fragment","jsxs","canShowError","errorMessageId","setId","StyledFormElement","clsx","root","checkBoxGroupClasses","StyledLabel","HvInfoMessage","StyledGroupContainer","join","trim","group","vertical","horizontal","invalid","HvCheckBox","selectAll","HvWarningText","error"],"mappings":"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"}
+{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { HvFormStatus } from \"../Forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledFormElement,\n  StyledGroupContainer,\n  StyledLabel,\n} from \"./CheckBoxGroup.styles\";\nimport clsx from \"clsx\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { multiSelectionEventHandler, setId } from \"utils\";\nimport { HvCheckBox, HvInfoMessage, HvWarningText } from \"components\";\nimport { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\nimport checkBoxGroupClasses, {\n  HvCheckBoxGroupClasses,\n} from \"./checkBoxGroupClasses\";\n\nconst computeSelectAllState = (selected, total) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport type HvCheckBoxGroupProps = HvBaseProps<HTMLDivElement, { onChange }> & {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\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?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n};\n\n/**\n * A group of checkboxes.\n *\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  label,\n  description,\n  status,\n  statusMessage,\n  defaultValue,\n  value: valueProp,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  showSelectAll = false,\n  orientation = \"vertical\",\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvCheckBoxGroupProps) => {\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)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n  const selectionAnchor = useRef(undefined);\n\n  const [allValues, selectedState, selectedCount] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n    let childSelectedCounter = 0;\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = value.indexOf(childValue) !== -1;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n\n      if (childIsSelected) {\n        childSelectedCounter += 1;\n      }\n    });\n\n    return [childValues, childSelectedState, childSelectedCounter];\n  }, [children, value]);\n\n  const selectAllState = computeSelectAllState(\n    value.length,\n    selectedState.length\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean\n    ) => {\n      const newValue = multiSelectionEventHandler(\n        event,\n        index,\n        selectionAnchor,\n        allValues,\n        selectedState,\n        isChecked\n      );\n\n      childOnChange?.(event, isChecked);\n\n      onChange?.(event, 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    [allValues, onChange, required, selectedState, setValidationState, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) =>\n          onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    selectedState,\n  ]);\n\n  const handleSelectAll = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    selectAllChecked: boolean\n  ) => {\n    let newValue: any[];\n    if (selectAllChecked) {\n      newValue = [...allValues];\n    } else {\n      newValue = [];\n    }\n\n    onChange?.(event, newValue);\n\n    setValue(() => {\n      // This will only run if uncontrolled\n      if (required && newValue.length === 0) {\n        setValidationState(\"invalid\");\n      } else {\n        setValidationState(\"valid\");\n      }\n\n      return newValue;\n    });\n  };\n\n  const selectAllLabelComponent = (\n    <>\n      {selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      )}\n    </>\n  );\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  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, classes?.root, checkBoxGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, checkBoxGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroupContainer\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-disabled={disabled ? true : undefined}\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?.group,\n          checkBoxGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, checkBoxGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, checkBoxGroupClasses.horizontal),\n          validationState === \"invalid\" &&\n            clsx(classes?.invalid, checkBoxGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={validationState === \"invalid\"}\n        {...others}\n      >\n        {showSelectAll && (\n          <HvCheckBox\n            checked={selectAllState === \"all\"}\n            indeterminate={selectAllState === \"some\"}\n            label={selectAllLabelComponent}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={clsx(classes?.selectAll, checkBoxGroupClasses.selectAll)}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </StyledGroupContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, checkBoxGroupClasses.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","_Fragment","_jsxs","_jsx","canShowError","errorMessageId","setId","StyledFormElement","clsx","root","checkBoxGroupClasses","StyledLabel","HvInfoMessage","StyledGroupContainer","role","join","trim","group","vertical","horizontal","invalid","$vertical","$horizontal","$invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.styles.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const transientOptions = require("../../utils/transientOptions.cjs");
@@ -59,12 +59,14 @@ const StyledGroupContainer = /* @__PURE__ */ _styled__default.default("div", pro
   display: "flex",
   ...$vertical && {
     flexDirection: "column",
+    // Prevent the focus ring to be hidden by sibling hover background
     "&>*": {
       zIndex: 0
     },
     "&>*:focus-within": {
       zIndex: 1
     },
+    // IE fallback code (using focus-within-polyfill)
     "&>*.focus-within": {
       zIndex: 1
     }

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFormElement, HvLabel } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledFormElement = styled(HvFormElement)({\n  display: \"inline-block\",\n  padding: 0,\n  margin: 0,\n  overflow: \"hidden\",\n  verticalAlign: \"top\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  marginBottom: theme.space.xs,\n});\n\nexport const StyledGroupContainer = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $vertical,\n    $horizontal,\n    $invalid,\n  }: {\n    $vertical: boolean;\n    $horizontal: boolean;\n    $invalid: boolean;\n  }) => ({\n    display: \"flex\",\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      // IE fallback code (using focus-within-polyfill)\n      \"&>*.focus-within\": {\n        zIndex: 1,\n      },\n    }),\n\n    ...($horizontal && {\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n\n      \"&>*:not(:first-of-type)\": {\n        marginLeft: theme.space.sm,\n      },\n    }),\n\n    ...($invalid && {\n      paddingBottom: theme.space.xs,\n      borderBottom: `1px solid ${theme.colors.sema4}`,\n    }),\n  })\n);\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","HvLabel","marginBottom","theme","space","xs","StyledGroupContainer","_extends","transientOptions","$vertical","$horizontal","$invalid","display","flexDirection","zIndex","flexWrap","marginLeft","sm","paddingBottom","borderBottom","colors","sema4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,oBAA2BC,iCAAAA,QAAAA,YAAAA,eAAaC,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,CAMpD;AAEK,MAAMC,cAAqBC,iCAAAA,QAAAA,MAAAA,SAAOX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCQ,cAAcC,YAAAA,MAAMC,MAAMC;AAC5B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,i2EAAA;AAEWc,MAAAA,gEACX,OAAKhB,QAAAC,IAAAC,4BAAAe,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,GACLe,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBc,iBAAAA,gBAAgB,CACjB,EACC,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,SAAS;AAAA,EAET,GAAIH,aAAa;AAAA,IACfI,eAAe;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,GAAIJ,eAAe;AAAA,IACjBG,eAAe;AAAA,IACfE,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzBC,YAAYb,YAAAA,MAAMC,MAAMa;AAAAA,IAC1B;AAAA,EACF;AAAA,EAEA,GAAIN,YAAY;AAAA,IACdO,eAAef,YAAAA,MAAMC,MAAMC;AAAAA,IAC3Bc,cAAe,aAAYhB,YAAAA,MAAMiB,OAAOC;AAAAA,EAC1C;AACF,IAAE/B,QAAAC,IAAAC,aACH,eAAA,KAAA,i2EAAA;;;;"}
+{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFormElement, HvLabel } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledFormElement = styled(HvFormElement)({\n  display: \"inline-block\",\n  padding: 0,\n  margin: 0,\n  overflow: \"hidden\",\n  verticalAlign: \"top\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  marginBottom: theme.space.xs,\n});\n\nexport const StyledGroupContainer = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $vertical,\n    $horizontal,\n    $invalid,\n  }: {\n    $vertical: boolean;\n    $horizontal: boolean;\n    $invalid: boolean;\n  }) => ({\n    display: \"flex\",\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      // IE fallback code (using focus-within-polyfill)\n      \"&>*.focus-within\": {\n        zIndex: 1,\n      },\n    }),\n\n    ...($horizontal && {\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n\n      \"&>*:not(:first-of-type)\": {\n        marginLeft: theme.space.sm,\n      },\n    }),\n\n    ...($invalid && {\n      paddingBottom: theme.space.xs,\n      borderBottom: `1px solid ${theme.colors.sema4}`,\n    }),\n  })\n);\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","HvLabel","marginBottom","theme","space","xs","StyledGroupContainer","_extends","transientOptions","$vertical","$horizontal","$invalid","display","flexDirection","zIndex","flexWrap","marginLeft","sm","paddingBottom","borderBottom","colors","sema4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,oBAA2BC,iCAAAA,QAAAA,YAAAA,eAAaC,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,CAMpD;AAEK,MAAMC,cAAqBC,iCAAAA,QAAAA,MAAAA,SAAOX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCQ,cAAcC,YAAAA,MAAMC,MAAMC;AAC5B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,i2EAAA;AAEWc,MAAAA,gEACX,OAAKhB,QAAAC,IAAAC,4BAAAe,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,GACLe,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBc,iBAAAA,gBAAgB,CACjB,EACC,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,SAAS;AAAA,EAET,GAAIH,aAAa;AAAA,IACfI,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,EAEA,GAAIJ,eAAe;AAAA,IACjBG,eAAe;AAAA,IACfE,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzBC,YAAYb,YAAAA,MAAMC,MAAMa;AAAAA,IAC1B;AAAA,EACF;AAAA,EAEA,GAAIN,YAAY;AAAA,IACdO,eAAef,YAAAA,MAAMC,MAAMC;AAAAA,IAC3Bc,cAAe,aAAYhB,YAAAA,MAAMiB,OAAOC;AAAAA,EAC1C;AACF,IAAE/B,QAAAC,IAAAC,aACH,eAAA,KAAA,i2EAAA;;;;"}

package/dist/cjs/components/Container/Container.cjs

@@ -1,11 +1,11 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styles = require("@mui/material/styles");
 const React = require("react");
 const Container_styles = require("./Container.styles.cjs");
 const containerClasses = require("./containerClasses.cjs");
 const clsx = require("clsx");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const clsx__default = /* @__PURE__ */ _interopDefault(clsx);
 const HvContainer = React.forwardRef(({
@@ -16,16 +16,24 @@ const HvContainer = React.forwardRef(({
   ...others
 }, ref) => {
   const muiTheme = styles.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(Container_styles.StyledRoot, { className, classes: {
-    root: clsx__default.default(containerClasses.default.root, classes == null ? void 0 : classes.root),
-    disableGutters: clsx__default.default(containerClasses.default.disableGutters, classes == null ? void 0 : classes.disableGutters),
-    fixed: clsx__default.default(containerClasses.default.fixed, classes == null ? void 0 : classes.fixed),
-    maxWidthXs: clsx__default.default(containerClasses.default.maxWidthXs, classes == null ? void 0 : classes.maxWidthXs),
-    maxWidthSm: clsx__default.default(containerClasses.default.maxWidthSm, classes == null ? void 0 : classes.maxWidthSm),
-    maxWidthMd: clsx__default.default(containerClasses.default.maxWidthMd, classes == null ? void 0 : classes.maxWidthMd),
-    maxWidthLg: clsx__default.default(containerClasses.default.maxWidthLg, classes == null ? void 0 : classes.maxWidthLg),
-    maxWidthXl: clsx__default.default(containerClasses.default.maxWidthXl, classes == null ? void 0 : classes.maxWidthXl)
-  }, $breakpoints: muiTheme.breakpoints, ref, maxWidth, fixed, ...others });
+  return /* @__PURE__ */ jsxRuntime.jsx(Container_styles.StyledRoot, {
+    className,
+    classes: {
+      root: clsx__default.default(containerClasses.default.root, classes == null ? void 0 : classes.root),
+      disableGutters: clsx__default.default(containerClasses.default.disableGutters, classes == null ? void 0 : classes.disableGutters),
+      fixed: clsx__default.default(containerClasses.default.fixed, classes == null ? void 0 : classes.fixed),
+      maxWidthXs: clsx__default.default(containerClasses.default.maxWidthXs, classes == null ? void 0 : classes.maxWidthXs),
+      maxWidthSm: clsx__default.default(containerClasses.default.maxWidthSm, classes == null ? void 0 : classes.maxWidthSm),
+      maxWidthMd: clsx__default.default(containerClasses.default.maxWidthMd, classes == null ? void 0 : classes.maxWidthMd),
+      maxWidthLg: clsx__default.default(containerClasses.default.maxWidthLg, classes == null ? void 0 : classes.maxWidthLg),
+      maxWidthXl: clsx__default.default(containerClasses.default.maxWidthXl, classes == null ? void 0 : classes.maxWidthXl)
+    },
+    $breakpoints: muiTheme.breakpoints,
+    ref,
+    maxWidth,
+    fixed,
+    ...others
+  });
 });
 exports.HvContainer = HvContainer;
 //# sourceMappingURL=Container.cjs.map

package/dist/cjs/components/Container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\nimport clsx from \"clsx\";\n\nexport type HvContainerProps = Omit<MuiContainerProps, \"classes\"> &\n  HvBaseProps & {\n    /**\n     * The component used for the root node.\n     * Either a string to use a DOM element or a component.\n     */\n    component?: React.ElementType;\n    /**\n     * Determine the max-width of the container.\n     * The container width grows with the size of the screen.\n     * Set to `false` to disable `maxWidth`.\n     */\n    maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n    /** If `true`, the left and right padding is removed. */\n    disableGutters?: boolean;\n    /**\n     * Set the max-width to match the min-width of the current breakpoint.\n     * This is useful if you'd prefer to design for a fixed set of sizes\n     * instead of trying to accommodate a fully fluid viewport.\n     * It's fluid by default.\n     */\n    fixed?: boolean;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvContainerClasses;\n  };\n\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  ({ maxWidth = false, classes, className, fixed, ...others }, ref) => {\n    const muiTheme = useTheme();\n    return (\n      <StyledRoot\n        className={className}\n        classes={{\n          root: clsx(containerClasses.root, classes?.root),\n          disableGutters: clsx(\n            containerClasses.disableGutters,\n            classes?.disableGutters\n          ),\n          fixed: clsx(containerClasses.fixed, classes?.fixed),\n          maxWidthXs: clsx(containerClasses.maxWidthXs, classes?.maxWidthXs),\n          maxWidthSm: clsx(containerClasses.maxWidthSm, classes?.maxWidthSm),\n          maxWidthMd: clsx(containerClasses.maxWidthMd, classes?.maxWidthMd),\n          maxWidthLg: clsx(containerClasses.maxWidthLg, classes?.maxWidthLg),\n          maxWidthXl: clsx(containerClasses.maxWidthXl, classes?.maxWidthXl),\n        }}\n        $breakpoints={muiTheme.breakpoints}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","maxWidth","classes","className","fixed","others","ref","muiTheme","useTheme","jsx","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","breakpoints"],"mappings":";;;;;;;;;;AAkCaA,MAAAA,cAAcC,iBACzB,CAAC;AAAA,EAAEC,WAAW;AAAA,EAAOC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,KAAUC;AAAO,GAAGC,QAAQ;AACnE,QAAMC,WAAWC,OAAAA;AAEf,SAAAC,+BAACC,iBAAAA,YACC,EAAA,WACA,SAAS;AAAA,IACPC,MAAMC,cAAAA,QAAKC,iBAAAA,QAAiBF,MAAMT,mCAASS,IAAI;AAAA,IAC/CG,gBAAgBF,cAAAA,QACdC,iBAAAA,QAAiBC,gBACjBZ,mCAASY,cAAc;AAAA,IAEzBV,OAAOQ,cAAAA,QAAKC,iBAAAA,QAAiBT,OAAOF,mCAASE,KAAK;AAAA,IAClDW,YAAYH,cAAAA,QAAKC,iBAAAA,QAAiBE,YAAYb,mCAASa,UAAU;AAAA,IACjEC,YAAYJ,cAAAA,QAAKC,iBAAAA,QAAiBG,YAAYd,mCAASc,UAAU;AAAA,IACjEC,YAAYL,cAAAA,QAAKC,iBAAAA,QAAiBI,YAAYf,mCAASe,UAAU;AAAA,IACjEC,YAAYN,cAAAA,QAAKC,iBAAAA,QAAiBK,YAAYhB,mCAASgB,UAAU;AAAA,IACjEC,YAAYP,cAAAA,QAAKC,iBAAAA,QAAiBM,YAAYjB,mCAASiB,UAAU;AAAA,EAAA,GAEnE,cAAcZ,SAASa,aACvB,KACA,UACA,OACIf,GAAAA,OACJ,CAAA;AAEN,CAAC;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\nimport clsx from \"clsx\";\n\nexport type HvContainerProps = Omit<MuiContainerProps, \"classes\"> &\n  HvBaseProps & {\n    /**\n     * The component used for the root node.\n     * Either a string to use a DOM element or a component.\n     */\n    component?: React.ElementType;\n    /**\n     * Determine the max-width of the container.\n     * The container width grows with the size of the screen.\n     * Set to `false` to disable `maxWidth`.\n     */\n    maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n    /** If `true`, the left and right padding is removed. */\n    disableGutters?: boolean;\n    /**\n     * Set the max-width to match the min-width of the current breakpoint.\n     * This is useful if you'd prefer to design for a fixed set of sizes\n     * instead of trying to accommodate a fully fluid viewport.\n     * It's fluid by default.\n     */\n    fixed?: boolean;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvContainerClasses;\n  };\n\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  ({ maxWidth = false, classes, className, fixed, ...others }, ref) => {\n    const muiTheme = useTheme();\n    return (\n      <StyledRoot\n        className={className}\n        classes={{\n          root: clsx(containerClasses.root, classes?.root),\n          disableGutters: clsx(\n            containerClasses.disableGutters,\n            classes?.disableGutters\n          ),\n          fixed: clsx(containerClasses.fixed, classes?.fixed),\n          maxWidthXs: clsx(containerClasses.maxWidthXs, classes?.maxWidthXs),\n          maxWidthSm: clsx(containerClasses.maxWidthSm, classes?.maxWidthSm),\n          maxWidthMd: clsx(containerClasses.maxWidthMd, classes?.maxWidthMd),\n          maxWidthLg: clsx(containerClasses.maxWidthLg, classes?.maxWidthLg),\n          maxWidthXl: clsx(containerClasses.maxWidthXl, classes?.maxWidthXl),\n        }}\n        $breakpoints={muiTheme.breakpoints}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","maxWidth","classes","className","fixed","others","ref","muiTheme","useTheme","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","$breakpoints","breakpoints"],"mappings":";;;;;;;;;;AAkCaA,MAAAA,cAAcC,iBACzB,CAAC;AAAA,EAAEC,WAAW;AAAA,EAAOC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAO,GAAGC;AAAO,GAAGC,QAAQ;AACnE,QAAMC,WAAWC,OAAAA;AACjB,wCACGC,iBAAAA,YAAU;AAAA,IACTN;AAAAA,IACAD,SAAS;AAAA,MACPQ,MAAMC,cAAAA,QAAKC,iBAAAA,QAAiBF,MAAMR,mCAASQ,IAAI;AAAA,MAC/CG,gBAAgBF,cAAAA,QACdC,iBAAAA,QAAiBC,gBACjBX,mCAASW,cAAc;AAAA,MAEzBT,OAAOO,cAAAA,QAAKC,iBAAAA,QAAiBR,OAAOF,mCAASE,KAAK;AAAA,MAClDU,YAAYH,cAAAA,QAAKC,iBAAAA,QAAiBE,YAAYZ,mCAASY,UAAU;AAAA,MACjEC,YAAYJ,cAAAA,QAAKC,iBAAAA,QAAiBG,YAAYb,mCAASa,UAAU;AAAA,MACjEC,YAAYL,cAAAA,QAAKC,iBAAAA,QAAiBI,YAAYd,mCAASc,UAAU;AAAA,MACjEC,YAAYN,cAAAA,QAAKC,iBAAAA,QAAiBK,YAAYf,mCAASe,UAAU;AAAA,MACjEC,YAAYP,cAAAA,QAAKC,iBAAAA,QAAiBM,YAAYhB,mCAASgB,UAAU;AAAA,IACnE;AAAA,IACAC,cAAcZ,SAASa;AAAAA,IACvBd;AAAAA,IACAL;AAAAA,IACAG;AAAAA,IAAa,GACTC;AAAAA,EAAAA,CACJ;AAEN,CAAC;;"}

package/dist/cjs/components/Container/Container.styles.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const material = require("@mui/material");

package/dist/cjs/components/Container/Container.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.styles.cjs","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  Container as MuiContainer,\n  Breakpoints as MuiBreakpoints,\n} from \"@mui/material\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  MuiContainer,\n  transientOptions\n)(({ $breakpoints }: { $breakpoints: MuiBreakpoints }) => ({\n  paddingLeft: theme.space.sm,\n  paddingRight: theme.space.sm,\n  [$breakpoints.up(\"md\")]: {\n    paddingLeft: theme.spacing(4),\n    paddingRight: theme.spacing(4),\n  },\n}));\n"],"names":["StyledRoot","MuiContainer","process","env","NODE_ENV","_extends","target","transientOptions","label","$breakpoints","paddingLeft","theme","space","sm","paddingRight","up","spacing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQaA,MAAAA,sDACXC,SAAAA,WAAYC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAA+C,OAAO;AAAA,EACzDC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EACzBC,cAAcH,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B,CAACJ,aAAaM,GAAG,IAAI,IAAI;AAAA,IACvBL,aAAaC,YAAAA,MAAMK,QAAQ,CAAC;AAAA,IAC5BF,cAAcH,YAAAA,MAAMK,QAAQ,CAAC;AAAA,EAC/B;AACF,IAAEd,QAAAC,IAAAC,aAAC,eAAA,KAAA,iuCAAA;;"}
+{"version":3,"file":"Container.styles.cjs","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  Container as MuiContainer,\n  Breakpoints as MuiBreakpoints,\n} from \"@mui/material\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  MuiContainer,\n  transientOptions\n)(({ $breakpoints }: { $breakpoints: MuiBreakpoints }) => ({\n  paddingLeft: theme.space.sm,\n  paddingRight: theme.space.sm,\n  [$breakpoints.up(\"md\")]: {\n    paddingLeft: theme.spacing(4),\n    paddingRight: theme.spacing(4),\n  },\n}));\n"],"names":["StyledRoot","MuiContainer","process","env","NODE_ENV","_extends","target","transientOptions","label","$breakpoints","paddingLeft","theme","space","sm","paddingRight","up","spacing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQaA,MAAAA,sDACXC,SAAAA,WAAYC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAA+C,OAAO;AAAA,EACzDC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EACzBC,cAAcH,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B,CAACJ,aAAaM,GAAG,IAAI,CAAC,GAAG;AAAA,IACvBL,aAAaC,YAAAA,MAAMK,QAAQ,CAAC;AAAA,IAC5BF,cAAcH,YAAAA,MAAMK,QAAQ,CAAC;AAAA,EAC/B;AACF,IAAEd,QAAAC,IAAAC,aAAC,eAAA,KAAA,iuCAAA;;"}