@hitachivantara/uikit-react-core 5.23.0 → 5.24.0

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

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const setId = require("../../utils/setId.cjs");
 const multiSelectionEventHandler = require("../../utils/multiSelectionEventHandler.cjs");
 const CheckBoxGroup_styles = require("./CheckBoxGroup.styles.cjs");
-const checkBoxGroupClasses = require("./checkBoxGroupClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
 const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const computeSelectAllState = (selected, total) => {
@@ -34,7 +34,7 @@ const getValueFromSelectedChildren = (children) => {
 const HvCheckBoxGroup = (props) => {
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     children,
     name,
@@ -58,6 +58,10 @@ const HvCheckBoxGroup = (props) => {
     onChange,
     ...others
   } = useDefaultProps.useDefaultProps("HvCheckBoxGroup", props);
+  const {
+    classes,
+    cx
+  } = CheckBoxGroup_styles.useClasses(classesProp);
   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
@@ -141,22 +145,22 @@ const HvCheckBoxGroup = (props) => {
   });
   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, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
     id,
     name,
     status: validationState,
     disabled,
     required,
     readOnly,
-    className: clsx.clsx(className, classes == null ? void 0 : classes.root, checkBoxGroupClasses.default.root),
-    children: [label && /* @__PURE__ */ jsxRuntime.jsx(CheckBoxGroup_styles.StyledLabel, {
+    className: cx(classes.root, className),
+    children: [label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
       id: setId.setId(elementId, "label"),
       label,
-      className: clsx.clsx(classes == null ? void 0 : classes.label, checkBoxGroupClasses.default.label)
+      className: classes.label
     }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
       id: setId.setId(elementId, "description"),
       children: description
-    }), /* @__PURE__ */ jsxRuntime.jsxs(CheckBoxGroup_styles.StyledGroupContainer, {
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       role: "group",
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0,
@@ -164,10 +168,11 @@ const HvCheckBoxGroup = (props) => {
       "aria-invalid": validationState === "invalid" ? true : void 0,
       "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
       "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-      className: clsx.clsx(classes == null ? void 0 : classes.group, checkBoxGroupClasses.default.group, orientation === "vertical" && clsx.clsx(classes == null ? void 0 : classes.vertical, checkBoxGroupClasses.default.vertical), orientation === "horizontal" && clsx.clsx(classes == null ? void 0 : classes.horizontal, checkBoxGroupClasses.default.horizontal), validationState === "invalid" && clsx.clsx(classes == null ? void 0 : classes.invalid, checkBoxGroupClasses.default.invalid)),
-      $vertical: orientation === "vertical",
-      $horizontal: orientation === "horizontal",
-      $invalid: validationState === "invalid",
+      className: cx(classes.group, {
+        [classes.vertical]: orientation === "vertical",
+        [classes.horizontal]: orientation === "horizontal",
+        [classes.invalid]: validationState === "invalid"
+      }),
       ...others,
       children: [showSelectAll && /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, {
         checked: selectAllState === "all",
@@ -175,16 +180,17 @@ const HvCheckBoxGroup = (props) => {
         label: selectAllLabelComponent,
         disabled,
         readOnly,
-        className: clsx.clsx(classes == null ? void 0 : classes.selectAll, checkBoxGroupClasses.default.selectAll),
+        className: classes.selectAll,
         onChange: handleSelectAll
       }), modifiedChildren]
     }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
       id: setId.setId(elementId, "error"),
       disableBorder: true,
-      className: clsx.clsx(classes == null ? void 0 : classes.error, checkBoxGroupClasses.default.error),
+      className: classes.error,
       children: validationMessage
     })]
   });
 };
+exports.checkBoxGroupClasses = CheckBoxGroup_styles.staticClasses;
 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 { Children, cloneElement, useCallback, useMemo, useRef } 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 { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n  HvFormStatus,\n  HvInfoMessage,\n  HvWarningText,\n} from \"@core/components/Forms\";\n\nimport {\n  StyledFormElement,\n  StyledGroupContainer,\n  StyledLabel,\n} from \"./CheckBoxGroup.styles\";\nimport checkBoxGroupClasses, {\n  HvCheckBoxGroupClasses,\n} from \"./checkBoxGroupClasses\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\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 interface HvCheckBoxGroupProps\n  extends 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 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 = (props: HvCheckBoxGroupProps) => {\n  const {\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  } = useDefaultProps(\"HvCheckBoxGroup\", props);\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)\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    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  // 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","useDefaultProps","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","_jsxs","_Fragment","_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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"}
+{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { Children, cloneElement, useCallback, useMemo, useRef } 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 { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\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 { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends 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 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 = (props: HvCheckBoxGroupProps) => {\n  const {\n    id,\n    classes: classesProp,\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  } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n  const { classes, cx } = useClasses(classesProp);\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)\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    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  // 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    <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\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <div\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={cx(classes.group, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\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={classes.selectAll}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </div>\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":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","classesProp","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","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","_jsxs","_Fragment","_jsx","canShowError","errorMessageId","setId","HvFormElement","root","HvLabel","HvInfoMessage","role","join","trim","group","vertical","horizontal","invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}

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

@@ -1,66 +1,25 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const FormElement = require("../Forms/FormElement/FormElement.cjs");
-const Label = require("../Forms/Label/Label.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledFormElement = /* @__PURE__ */ _styled__default.default((props) => /* @__PURE__ */ jsxRuntime.jsx(FormElement.HvFormElement, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1pxeedd2"
-} : {
-  target: "e1pxeedd2",
-  label: "StyledFormElement"
-})(process.env.NODE_ENV === "production" ? {
-  name: "14xf287",
-  styles: "display:inline-block;padding:0;margin:0;overflow:hidden;vertical-align:top"
-} : {
-  name: "14xf287",
-  styles: "display:inline-block;padding:0;margin:0;overflow:hidden;vertical-align:top",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2hlY2tCb3hHcm91cC9DaGVja0JveEdyb3VwLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV2lDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2hlY2tCb3hHcm91cC9DaGVja0JveEdyb3VwLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQge1xuICBIdkZvcm1FbGVtZW50LFxuICBIdkZvcm1FbGVtZW50UHJvcHMsXG4gIEh2TGFiZWwsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0Zvcm1zXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZvcm1FbGVtZW50ID0gc3R5bGVkKChwcm9wczogSHZGb3JtRWxlbWVudFByb3BzKSA9PiAoXG4gIDxIdkZvcm1FbGVtZW50IHsuLi5wcm9wc30gLz5cbikpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtYmxvY2tcIixcbiAgcGFkZGluZzogMCxcbiAgbWFyZ2luOiAwLFxuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgdmVydGljYWxBbGlnbjogXCJ0b3BcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQoSHZMYWJlbCkoe1xuICBtYXJnaW5Cb3R0b206IHRoZW1lLnNwYWNlLnhzLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcm91cENvbnRhaW5lciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkdmVydGljYWwsXG4gICAgJGhvcml6b250YWwsXG4gICAgJGludmFsaWQsXG4gIH06IHtcbiAgICAkdmVydGljYWw6IGJvb2xlYW47XG4gICAgJGhvcml6b250YWw6IGJvb2xlYW47XG4gICAgJGludmFsaWQ6IGJvb2xlYW47XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG5cbiAgICAuLi4oJHZlcnRpY2FsICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIC8vIFByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgXCImPipcIjoge1xuICAgICAgICB6SW5kZXg6IDAsXG4gICAgICB9LFxuICAgICAgXCImPio6Zm9jdXMtd2l0aGluXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgfSxcbiAgICAgIC8vIElFIGZhbGxiYWNrIGNvZGUgKHVzaW5nIGZvY3VzLXdpdGhpbi1wb2x5ZmlsbClcbiAgICAgIFwiJj4qLmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJGhvcml6b250YWwgJiYge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIGZsZXhXcmFwOiBcIndyYXBcIixcblxuICAgICAgXCImPio6bm90KDpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICAgIG1hcmdpbkxlZnQ6IHRoZW1lLnNwYWNlLnNtLFxuICAgICAgfSxcbiAgICB9KSxcblxuICAgIC4uLigkaW52YWxpZCAmJiB7XG4gICAgICBwYWRkaW5nQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5uZWdhdGl2ZX1gLFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledLabel = /* @__PURE__ */ _styled__default.default(Label.HvLabel, process.env.NODE_ENV === "production" ? {
-  target: "e1pxeedd1"
-} : {
-  target: "e1pxeedd1",
-  label: "StyledLabel"
-})({
-  marginBottom: uikitStyles.theme.space.xs
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2hlY2tCb3hHcm91cC9DaGVja0JveEdyb3VwLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUIyQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NoZWNrQm94R3JvdXAvQ2hlY2tCb3hHcm91cC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxuICBIdkxhYmVsLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtRWxlbWVudCA9IHN0eWxlZCgocHJvcHM6IEh2Rm9ybUVsZW1lbnRQcm9wcykgPT4gKFxuICA8SHZGb3JtRWxlbWVudCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gIHBhZGRpbmc6IDAsXG4gIG1hcmdpbjogMCxcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIHZlcnRpY2FsQWxpZ246IFwidG9wXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKEh2TGFiZWwpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkR3JvdXBDb250YWluZXIgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZlcnRpY2FsLFxuICAgICRob3Jpem9udGFsLFxuICAgICRpbnZhbGlkLFxuICB9OiB7XG4gICAgJHZlcnRpY2FsOiBib29sZWFuO1xuICAgICRob3Jpem9udGFsOiBib29sZWFuO1xuICAgICRpbnZhbGlkOiBib29sZWFuO1xuICB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuXG4gICAgLi4uKCR2ZXJ0aWNhbCAmJiB7XG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuXG4gICAgICAvLyBQcmV2ZW50IHRoZSBmb2N1cyByaW5nIHRvIGJlIGhpZGRlbiBieSBzaWJsaW5nIGhvdmVyIGJhY2tncm91bmRcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgekluZGV4OiAwLFxuICAgICAgfSxcbiAgICAgIFwiJj4qOmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgICAvLyBJRSBmYWxsYmFjayBjb2RlICh1c2luZyBmb2N1cy13aXRoaW4tcG9seWZpbGwpXG4gICAgICBcIiY+Ki5mb2N1cy13aXRoaW5cIjoge1xuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICB9LFxuICAgIH0pLFxuXG4gICAgLi4uKCRob3Jpem9udGFsICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gICAgICBmbGV4V3JhcDogXCJ3cmFwXCIsXG5cbiAgICAgIFwiJj4qOm5vdCg6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS5zbSxcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJGludmFsaWQgJiYge1xuICAgICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-const StyledGroupContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1pxeedd0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1pxeedd0",
-  label: "StyledGroupContainer"
-}, transientOptions.transientOptions))(({
-  $vertical,
-  $horizontal,
-  $invalid
-}) => ({
-  display: "flex",
-  ...$vertical && {
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvCheckBoxGroup", {
+  root: {
+    display: "inline-block",
+    padding: 0,
+    margin: 0,
+    overflow: "hidden",
+    verticalAlign: "top"
+  },
+  label: {
+    marginBottom: uikitStyles.theme.space.xs
+  },
+  group: {
+    display: "flex"
+  },
+  vertical: {
     flexDirection: "column",
     // Prevent the focus ring to be hidden by sibling hover background
     "&>*": {
@@ -74,19 +33,20 @@ const StyledGroupContainer = /* @__PURE__ */ _styled__default.default("div", pro
       zIndex: 1
     }
   },
-  ...$horizontal && {
+  horizontal: {
     flexDirection: "row",
     flexWrap: "wrap",
     "&>*:not(:first-of-type)": {
       marginLeft: uikitStyles.theme.space.sm
     }
   },
-  ...$invalid && {
+  invalid: {
     paddingBottom: uikitStyles.theme.space.xs,
     borderBottom: `1px solid ${uikitStyles.theme.colors.negative}`
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2hlY2tCb3hHcm91cC9DaGVja0JveEdyb3VwLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJvQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NoZWNrQm94R3JvdXAvQ2hlY2tCb3hHcm91cC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudCxcbiAgSHZGb3JtRWxlbWVudFByb3BzLFxuICBIdkxhYmVsLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Gb3Jtc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtRWxlbWVudCA9IHN0eWxlZCgocHJvcHM6IEh2Rm9ybUVsZW1lbnRQcm9wcykgPT4gKFxuICA8SHZGb3JtRWxlbWVudCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gIHBhZGRpbmc6IDAsXG4gIG1hcmdpbjogMCxcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIHZlcnRpY2FsQWxpZ246IFwidG9wXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKEh2TGFiZWwpKHtcbiAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkR3JvdXBDb250YWluZXIgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZlcnRpY2FsLFxuICAgICRob3Jpem9udGFsLFxuICAgICRpbnZhbGlkLFxuICB9OiB7XG4gICAgJHZlcnRpY2FsOiBib29sZWFuO1xuICAgICRob3Jpem9udGFsOiBib29sZWFuO1xuICAgICRpbnZhbGlkOiBib29sZWFuO1xuICB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuXG4gICAgLi4uKCR2ZXJ0aWNhbCAmJiB7XG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuXG4gICAgICAvLyBQcmV2ZW50IHRoZSBmb2N1cyByaW5nIHRvIGJlIGhpZGRlbiBieSBzaWJsaW5nIGhvdmVyIGJhY2tncm91bmRcbiAgICAgIFwiJj4qXCI6IHtcbiAgICAgICAgekluZGV4OiAwLFxuICAgICAgfSxcbiAgICAgIFwiJj4qOmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgIH0sXG4gICAgICAvLyBJRSBmYWxsYmFjayBjb2RlICh1c2luZyBmb2N1cy13aXRoaW4tcG9seWZpbGwpXG4gICAgICBcIiY+Ki5mb2N1cy13aXRoaW5cIjoge1xuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICB9LFxuICAgIH0pLFxuXG4gICAgLi4uKCRob3Jpem9udGFsICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gICAgICBmbGV4V3JhcDogXCJ3cmFwXCIsXG5cbiAgICAgIFwiJj4qOm5vdCg6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS5zbSxcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJGludmFsaWQgJiYge1xuICAgICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2UueHMsXG4gICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-exports.StyledFormElement = StyledFormElement;
-exports.StyledGroupContainer = StyledGroupContainer;
-exports.StyledLabel = StyledLabel;
+  },
+  selectAll: {},
+  error: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=CheckBoxGroup.styles.cjs.map

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\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvLabel,\n} from \"@core/components/Forms\";\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  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.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","StyledGroupContainer","_extends","transientOptions","$vertical","$horizontal","$invalid","display","flexDirection","zIndex","flexWrap","marginLeft","sm","paddingBottom","borderBottom","colors","negative"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,oBAAoBC,iCAAAA,QAAO,CAACC,yCACtCC,YAAAA,eAAa;AAAA,EAAA,GAAKD;AAAK,CAAG,GAC5BE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAMD;AAEM,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,q/EAAA;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,CAClB,EACE,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,shFACJ;;;;"}
+{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\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\n    \"&>*:not(:first-of-type)\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n  selectAll: {},\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","invalid","paddingBottom","borderBottom","colors","negative","selectAll","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO;AAAA,IAAEV,SAAS;AAAA,EAAO;AAAA,EACzBW,UAAU;AAAA,IACRC,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVF,eAAe;AAAA,IACfG,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzBC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA,IAC1B;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPC,eAAeZ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3BW,cAAe,aAAYb,YAAAA,MAAMc,OAAOC;AAAAA,EAC1C;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,OAAO,CAAC;AACV,CAAC;;;"}

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

@@ -1,39 +1,66 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles = require("@mui/material/styles");
-const clsx = require("clsx");
 const React = require("react");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = require("@mui/material/styles");
+const MuiContainer = require("@mui/material/Container");
+const useMediaQuery = require("@mui/material/useMediaQuery");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Container_styles = require("./Container.styles.cjs");
-const containerClasses = require("./containerClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiContainer__default = /* @__PURE__ */ _interopDefault(MuiContainer);
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const HvContainer = React.forwardRef((props, ref) => {
   const {
     maxWidth = false,
-    classes,
+    classes: classesProp,
     className,
     fixed,
+    disableGutters,
     ...others
   } = useDefaultProps.useDefaultProps("HvContainer", props);
+  const {
+    classes,
+    cx,
+    css
+  } = Container_styles.useClasses(classesProp);
   const muiTheme = styles.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(Container_styles.StyledRoot, {
-    className,
+  const upMd = useMediaQuery__default.default(muiTheme.breakpoints.up("md"));
+  const gutters = upMd ? {
+    // Increases specificity
+    [`&.${Container_styles.staticClasses.root}`]: {
+      paddingLeft: uikitStyles.theme.spacing(4),
+      paddingRight: uikitStyles.theme.spacing(4)
+    }
+  } : {
+    // Increases specificity
+    [`&.${Container_styles.staticClasses.root}`]: {
+      paddingLeft: uikitStyles.theme.space.sm,
+      paddingRight: uikitStyles.theme.space.sm
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiContainer__default.default, {
+    className: cx({
+      [css(gutters)]: !disableGutters
+    }, className),
     classes: {
-      root: clsx.clsx(containerClasses.default.root, classes == null ? void 0 : classes.root),
-      disableGutters: clsx.clsx(containerClasses.default.disableGutters, classes == null ? void 0 : classes.disableGutters),
-      fixed: clsx.clsx(containerClasses.default.fixed, classes == null ? void 0 : classes.fixed),
-      maxWidthXs: clsx.clsx(containerClasses.default.maxWidthXs, classes == null ? void 0 : classes.maxWidthXs),
-      maxWidthSm: clsx.clsx(containerClasses.default.maxWidthSm, classes == null ? void 0 : classes.maxWidthSm),
-      maxWidthMd: clsx.clsx(containerClasses.default.maxWidthMd, classes == null ? void 0 : classes.maxWidthMd),
-      maxWidthLg: clsx.clsx(containerClasses.default.maxWidthLg, classes == null ? void 0 : classes.maxWidthLg),
-      maxWidthXl: clsx.clsx(containerClasses.default.maxWidthXl, classes == null ? void 0 : classes.maxWidthXl)
+      root: classes.root,
+      disableGutters: classes.disableGutters,
+      fixed: classes.fixed,
+      maxWidthXs: classes.maxWidthXs,
+      maxWidthSm: classes.maxWidthSm,
+      maxWidthMd: classes.maxWidthMd,
+      maxWidthLg: classes.maxWidthLg,
+      maxWidthXl: classes.maxWidthXl
     },
-    $breakpoints: muiTheme.breakpoints,
     ref,
     maxWidth,
     fixed,
+    disableGutters,
     ...others
   });
 });
+exports.containerClasses = Container_styles.staticClasses;
 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\";\n\nimport { clsx } from \"clsx\";\n\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\n\nimport { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\n\nexport interface HvContainerProps\n  extends 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  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes,\n      className,\n      fixed,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\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","props","ref","maxWidth","classes","className","fixed","others","useDefaultProps","muiTheme","useTheme","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","$breakpoints","breakpoints"],"mappings":";;;;;;;;;AAyCO,MAAMA,cAAcC,MAAAA,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAeP,KAAK;AACxC,QAAMQ,WAAWC,OAAAA;AACjB,wCACGC,iBAAAA,YAAU;AAAA,IACTN;AAAAA,IACAD,SAAS;AAAA,MACPQ,MAAMC,KAAAA,KAAKC,iBAAAA,QAAiBF,MAAMR,mCAASQ,IAAI;AAAA,MAC/CG,gBAAgBF,KAAAA,KACdC,iBAAAA,QAAiBC,gBACjBX,mCAASW,cACX;AAAA,MACAT,OAAOO,KAAAA,KAAKC,iBAAAA,QAAiBR,OAAOF,mCAASE,KAAK;AAAA,MAClDU,YAAYH,KAAAA,KAAKC,iBAAAA,QAAiBE,YAAYZ,mCAASY,UAAU;AAAA,MACjEC,YAAYJ,KAAAA,KAAKC,iBAAAA,QAAiBG,YAAYb,mCAASa,UAAU;AAAA,MACjEC,YAAYL,KAAAA,KAAKC,iBAAAA,QAAiBI,YAAYd,mCAASc,UAAU;AAAA,MACjEC,YAAYN,KAAAA,KAAKC,iBAAAA,QAAiBK,YAAYf,mCAASe,UAAU;AAAA,MACjEC,YAAYP,KAAAA,KAAKC,iBAAAA,QAAiBM,YAAYhB,mCAASgB,UAAU;AAAA,IACnE;AAAA,IACAC,cAAcZ,SAASa;AAAAA,IACvBpB;AAAAA,IACAC;AAAAA,IACAG;AAAAA,IAAa,GACTC;AAAAA,EAAAA,CACL;AAEL,CACF;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n  ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n  extends 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  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes: classesProp,\n      className,\n      fixed,\n      disableGutters,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const muiTheme = useTheme();\n\n    const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n    const gutters = upMd\n      ? {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n          },\n        }\n      : {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.space.sm,\n            paddingRight: theme.space.sm,\n          },\n        };\n\n    return (\n      <MuiContainer\n        className={cx({ [css(gutters)]: !disableGutters }, className)}\n        classes={{\n          root: classes.root,\n          disableGutters: classes.disableGutters,\n          fixed: classes.fixed,\n          maxWidthXs: classes.maxWidthXs,\n          maxWidthSm: classes.maxWidthSm,\n          maxWidthMd: classes.maxWidthMd,\n          maxWidthLg: classes.maxWidthLg,\n          maxWidthXl: classes.maxWidthXl,\n        }}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        disableGutters={disableGutters}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;;;;;;AA+CO,MAAMA,cAAcC,MAAAA,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,iBAAAA,WAAWR,WAAW;AAEnD,QAAMS,WAAWC,OAAAA;AAEjB,QAAMC,OAAOC,uBAAAA,QAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,+BAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,+BAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,YAAAA,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAGN,wCACGC,sBAAAA,SAAY;AAAA,IACXvB,WAAWK,GAAG;AAAA,MAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,OAAkBF,SAAS;AAAA,IAC5DF,SAAS;AAAA,MACPkB,MAAMlB,QAAQkB;AAAAA,MACdd,gBAAgBJ,QAAQI;AAAAA,MACxBD,OAAOH,QAAQG;AAAAA,MACfuB,YAAY1B,QAAQ0B;AAAAA,MACpBC,YAAY3B,QAAQ2B;AAAAA,MACpBC,YAAY5B,QAAQ4B;AAAAA,MACpBC,YAAY7B,QAAQ6B;AAAAA,MACpBC,YAAY9B,QAAQ8B;AAAAA,IACtB;AAAA,IACAhC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IAA+B,GAC3BC;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}

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

@@ -1,39 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const material = require("@mui/material");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-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];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default(material.Container, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "eq8pv0f0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "eq8pv0f0",
-  label: "StyledRoot"
-}, transientOptions.transientOptions))(({
-  $breakpoints
-}) => ({
-  paddingLeft: uikitStyles.theme.space.sm,
-  paddingRight: uikitStyles.theme.space.sm,
-  [$breakpoints.up("md")]: {
-    paddingLeft: uikitStyles.theme.spacing(4),
-    paddingRight: uikitStyles.theme.spacing(4)
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udGFpbmVyL0NvbnRhaW5lci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVEwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NvbnRhaW5lci9Db250YWluZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHtcbiAgQ29udGFpbmVyIGFzIE11aUNvbnRhaW5lcixcbiAgQnJlYWtwb2ludHMgYXMgTXVpQnJlYWtwb2ludHMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIE11aUNvbnRhaW5lcixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYnJlYWtwb2ludHMgfTogeyAkYnJlYWtwb2ludHM6IE11aUJyZWFrcG9pbnRzIH0pID0+ICh7XG4gIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjZS5zbSxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgWyRicmVha3BvaW50cy51cChcIm1kXCIpXToge1xuICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjaW5nKDQpLFxuICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2luZyg0KSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
-exports.StyledRoot = StyledRoot;
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvContainer", {
+  root: {},
+  disableGutters: {},
+  fixed: {},
+  maxWidthXs: {},
+  maxWidthSm: {},
+  maxWidthMd: {},
+  maxWidthLg: {},
+  maxWidthXl: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Container.styles.cjs.map

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 \"@core/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,CAClB,EAAE,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,yuCAAA;;"}
+{"version":3,"file":"Container.styles.cjs","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvContainer\", {\n  root: {},\n  disableGutters: {},\n  fixed: {},\n  maxWidthXs: {},\n  maxWidthSm: {},\n  maxWidthMd: {},\n  maxWidthLg: {},\n  maxWidthXl: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","disableGutters","fixed","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM,CAAC;AAAA,EACPC,gBAAgB,CAAC;AAAA,EACjBC,OAAO,CAAC;AAAA,EACRC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AACf,CAAC;;;"}

package/dist/cjs/components/Controls/Controls.cjs

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
 const setId = require("../../utils/setId.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const ControlsContext = require("./context/ControlsContext.cjs");
-const controlClasses = require("./controlClasses.cjs");
 const Controls_styles = require("./Controls.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MultiButton = require("../MultiButton/MultiButton.cjs");
@@ -15,7 +13,7 @@ const HvControls = (props) => {
   const {
     id,
     className,
-    classes,
+    classes: classesProp,
     views,
     callbacks,
     selectedView,
@@ -24,6 +22,10 @@ const HvControls = (props) => {
     hideViewSwitcher = false,
     onViewChange
   } = useDefaultProps.useDefaultProps("HvControls", props);
+  const {
+    classes,
+    cx
+  } = Controls_styles.useClasses(classesProp);
   const [currentView, setCurrentView] = useControlled.useControlled(selectedView, defaultView);
   const onViewChangeHandler = (evt, btnId) => {
     setCurrentView(btnId);
@@ -45,19 +47,19 @@ const HvControls = (props) => {
   const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;
   const leftChildren = childrenArray.slice(0, childrenIndexCut);
   const rightChildren = childrenArray.slice(childrenIndexCut, childrenCount || 0);
-  return /* @__PURE__ */ jsxRuntime.jsx(Controls_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     id,
-    className: clsx.clsx(className, controlClasses.default.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     children: /* @__PURE__ */ jsxRuntime.jsxs(ControlsContext.HvControlsContextProvider, {
       value: {
         onSearch: onSearchHandler,
         onSort: onSortHandler
       },
-      children: [/* @__PURE__ */ jsxRuntime.jsx(Controls_styles.StyledSection, {
-        className: clsx.clsx(classes == null ? void 0 : classes.section, controlClasses.default.section, classes == null ? void 0 : classes.leftSection, controlClasses.default.leftSection),
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: cx(classes.section, classes.leftSection),
         children: leftChildren
-      }), /* @__PURE__ */ jsxRuntime.jsxs(Controls_styles.StyledSection, {
-        className: clsx.clsx(classes == null ? void 0 : classes.section, controlClasses.default.section, classes == null ? void 0 : classes.rightSection, controlClasses.default.rightSection),
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: cx(classes.section, classes.rightSection),
         children: [rightChildren, views && !hideViewSwitcher && (views == null ? void 0 : views.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, {
           id: setId.setId(id, "view-multi-button"),
           children: views.map(({
@@ -77,5 +79,6 @@ const HvControls = (props) => {
     })
   });
 };
+exports.controlsClasses = Controls_styles.staticClasses;
 exports.HvControls = HvControls;
 //# sourceMappingURL=Controls.cjs.map