@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

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/ColorPicker/ColorPicker.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useLabels = require("../../hooks/useLabels.cjs");
@@ -21,38 +22,39 @@ const DEFAULT_LABELS = {
   recommendedColorsLabel: "Recommended colors:",
   customColorsLabel: "Custom colors:"
 };
-const HvColorPicker = ({
-  id,
-  name,
-  required = false,
-  disabled = false,
-  label,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  description,
-  "aria-describedby": ariaDescribedBy,
-  className,
-  classes: classesProp,
-  value,
-  onChange,
-  defaultValue = "",
-  expanded,
-  defaultExpanded = false,
-  recommendedColorsPosition = "top",
-  recommendedColors = ["#95AFE8", "#E89E5D", "#83B8A6", "#70759C", "#C57E7E", "#FADA95", "#ADBFE8", "#E3B386", "#9AC6B7", "#8B90AF", "#CF9797", "#FAE1AA"],
-  showLabels = true,
-  labels: labelsProp,
-  dropdownIcon = "colorPicker",
-  placeholder = "Select color...",
-  iconOnly = false,
-  showSavedColors = true,
-  showCustomColors = true,
-  savedColorsValue,
-  defaultSavedColorsValue = [],
-  onSavedColorAdded,
-  onSavedColorRemoved,
-  deleteSavedColorButtonArialLabel = "Delete saved color"
-}) => {
+const HvColorPicker = (props) => {
+  const {
+    id,
+    name,
+    required = false,
+    disabled = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    className,
+    classes: classesProp,
+    value,
+    onChange,
+    defaultValue = "",
+    expanded,
+    defaultExpanded = false,
+    recommendedColorsPosition = "top",
+    recommendedColors = ["#95AFE8", "#E89E5D", "#83B8A6", "#70759C", "#C57E7E", "#FADA95", "#ADBFE8", "#E3B386", "#9AC6B7", "#8B90AF", "#CF9797", "#FAE1AA"],
+    showLabels = true,
+    labels: labelsProp,
+    dropdownIcon = "colorPicker",
+    placeholder = "Select color...",
+    iconOnly = false,
+    showSavedColors = true,
+    showCustomColors = true,
+    savedColorsValue,
+    defaultSavedColorsValue = [],
+    onSavedColorAdded,
+    onSavedColorRemoved,
+    deleteSavedColorButtonArialLabel = "Delete saved color"
+  } = useDefaultProps.useDefaultProps("HvColorPicker", props);
   const {
     classes,
     css,

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = ({\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  className,\n  classes: classesProp,\n  value,\n  onChange,\n  defaultValue = \"\",\n  expanded,\n  defaultExpanded = false,\n  recommendedColorsPosition = \"top\",\n  recommendedColors = [\n    \"#95AFE8\",\n    \"#E89E5D\",\n    \"#83B8A6\",\n    \"#70759C\",\n    \"#C57E7E\",\n    \"#FADA95\",\n    \"#ADBFE8\",\n    \"#E3B386\",\n    \"#9AC6B7\",\n    \"#8B90AF\",\n    \"#CF9797\",\n    \"#FAE1AA\",\n  ],\n  showLabels = true,\n  labels: labelsProp,\n  dropdownIcon = \"colorPicker\",\n  placeholder = \"Select color...\",\n  iconOnly = false,\n  showSavedColors = true,\n  showCustomColors = true,\n  savedColorsValue,\n  defaultSavedColorsValue = [],\n  onSavedColorAdded,\n  onSavedColorRemoved,\n  deleteSavedColorButtonArialLabel = \"Delete saved color\",\n}: HvColorPickerProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleAddColor = () => {\n    // When no color is provided, react-color sets the picker to #000000.\n    // This is the color that should be added in this case.\n    const colorToAdd = color || \"#000000\";\n\n    onSavedColorAdded?.(colorToAdd);\n    setSavedColors([...savedColors, colorToAdd]);\n  };\n\n  const handleRemoveColor = (val: string, position: number) => {\n    if (savedColors[position] === val) {\n      const sColors = [...savedColors];\n      sColors.splice(position, 1);\n      onSavedColorRemoved?.(val);\n      setSavedColors(sColors);\n    }\n  };\n\n  const setFocusToContent = (containerRef: HTMLElement | null) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      required={required}\n      className={cx(className, classes.root)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        variableWidth\n        className={className}\n        expanded={isOpen}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        classes={{\n          root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n          selection: cx(iconOnly && css({ padding: 0 })),\n        }}\n        adornment={\n          iconOnly && color ? (\n            <Checkbox\n              className={classes.headerColorIconOnly}\n              color={[color, \"transparent\"]}\n            />\n          ) : dropdownIcon === \"colorPicker\" ? (\n            <ColorPicker className={classes.colorPickerIcon} />\n          ) : undefined\n        }\n        placeholder={\n          iconOnly ? undefined : color ? (\n            <>\n              <Checkbox\n                className={classes.headerColorIcon}\n                color={[color, \"transparent\"]}\n              />\n              <HvTypography\n                className={classes.headerColorValue}\n                variant={activeTheme?.colorPicker.inputValueVariant}\n              >\n                {color}\n              </HvTypography>\n            </>\n          ) : (\n            placeholder\n          )\n        }\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n      >\n        <HvPanel className={classes.panel}>\n          <div className={classes.colorPicker}>\n            {recommendedColorsPosition === \"top\" && (\n              <PresetColors\n                className={cx(\n                  (showCustomColors || showSavedColors) &&\n                    css({\n                      paddingBottom:\n                        activeTheme?.colorPicker.recommendedColorsBottomPadding,\n                    }),\n                  classes.recommendedColorsRoot\n                )}\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n            {showCustomColors && (\n              <Picker\n                classes={{\n                  fields: cx({\n                    [classes.pickerFields]:\n                      recommendedColorsPosition === \"bottom\" || showSavedColors,\n                  }),\n                }}\n                title={showLabels ? labels?.customColorsLabel : undefined}\n                color={color}\n                onChange={handleSelect}\n              />\n            )}\n            {showSavedColors && (\n              <SavedColors\n                colors={savedColors}\n                onAddColor={handleAddColor}\n                onClickColor={handleSelect}\n                onRemoveColor={handleRemoveColor}\n                deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n              />\n            )}\n            {recommendedColorsPosition === \"bottom\" && (\n              <PresetColors\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","HvFormElement","root","children","labelContainer","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":";;;;;;;;;;;;;;;;;;;AA6FA,MAAMA,iBAA+C;AAAA,EACnDC,wBAAwB;AAAA,EACxBC,mBAAmB;AACrB;AAMO,MAAMC,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC;AAAAA,EACA,cAAcC;AAAAA,EACd,mBAAmBC;AAAAA,EACnBC;AAAAA,EACA,oBAAoBC;AAAAA,EACpBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,eAAe;AAAA,EACfC;AAAAA,EACAC,kBAAkB;AAAA,EAClBC,4BAA4B;AAAA,EAC5BC,oBAAoB,CAClB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,SAAS;AAAA,EAEXC,aAAa;AAAA,EACbC,QAAQC;AAAAA,EACRC,eAAe;AAAA,EACfC,cAAc;AAAA,EACdC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,mBAAmB;AAAA,EACnBC;AAAAA,EACAC,0BAA0B,CAAE;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC,mCAAmC;AACjB,MAAM;AAClB,QAAA;AAAA,IAAErB;AAAAA,IAASsB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWvB,WAAW;AAC7C,QAAA;AAAA,IAAEwB;AAAAA,MAAgBC,SAAS,SAAA;AAE3BhB,QAAAA,SAASiB,UAAAA,UAAUzC,gBAAgByB,UAAU;AAE7C,QAAA,CAACiB,QAAQC,SAAS,IAAIC,cAAAA,cAAczB,UAAU0B,QAAQzB,eAAe,CAAC;AAC5E,QAAM,CAAC0B,OAAOC,QAAQ,IAAIH,cAAAA,cAAc5B,OAAOE,YAAY;AAC3D,QAAM,CAAC8B,aAAaC,cAAc,IAAIL,cAAAA,cACpCb,kBACAC,uBACF;AACMkB,QAAAA,YAAYC,YAAAA,YAAY/C,IAAI,YAAY;AAC9C,QAAMgD,WAAW5C,SAAS;AAC1B,QAAM6C,iBAAiB1C,eAAe;AAEhC2C,QAAAA,eAA4CA,CAACC,GAAGC,SAAS;AAC7Db,cAAUa,IAAI;AAAA,EAAA;AAGVC,QAAAA,eAAeA,CAACC,QAAsD;AAC1EzC,yCAAWyC,IAAIC;AACfZ,aAASW,IAAIC,GAAG;AAAA,EAAA;AAGlB,QAAMC,iBAAiBA,MAAM;AAG3B,UAAMC,aAAaf,SAAS;AAE5Bb,2DAAoB4B;AACpBZ,mBAAe,CAAC,GAAGD,aAAaa,UAAU,CAAC;AAAA,EAAA;AAGvCC,QAAAA,oBAAoBA,CAACJ,KAAaK,aAAqB;AACvDf,QAAAA,YAAYe,QAAQ,MAAML,KAAK;AAC3BM,YAAAA,UAAU,CAAC,GAAGhB,WAAW;AACvBiB,cAAAA,OAAOF,UAAU,CAAC;AAC1B7B,iEAAsBwB;AACtBT,qBAAee,OAAO;AAAA,IACxB;AAAA,EAAA;AAGIE,QAAAA,oBAAoBA,CAACC,iBAAqC;AACxDC,UAAAA,SAASD,6CAAcE,qBAAqB;AAC9CD,QAAAA,UAAUA,OAAOE,SAAS,GAAG;AACxB,aAAA,CAAC,EAAEC;IACZ;AAAA,EAAA;AAGF,yCACGC,YAAAA,eAAa;AAAA,IACZpE;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAO,WAAWwB,GAAGxB,WAAWC,QAAQ2D,IAAI;AAAA,IAAEC,YAErCtB,YAAYC,mDACZ,OAAA;AAAA,MAAKxC,WAAWC,QAAQ6D;AAAAA,MAAeD,UACpCtB,CAAAA,YACCwB,2BAAAA,IAACC,eAAO;AAAA,QACNzE,IAAI0E,MAAAA,MAAM5B,WAAW,OAAO;AAAA,QAC5B1C;AAAAA,QACAK,WAAWC,QAAQN;AAAAA,MAAAA,CACpB,GAGF6C,kBACCuB,2BAAAA,IAACG,2BAAa;AAAA,QACZ3E,IAAI0E,MAAAA,MAAM5B,WAAW,aAAa;AAAA,QAClCrC,WAAWC,QAAQH;AAAAA,QAAY+D,UAE9B/D;AAAAA,MAAAA,CACY,CAChB;AAAA,IAAA,CACE,GAEPiE,2BAAAA,IAACI,6BAAc;AAAA,MACbC,eAAa;AAAA,MACbpE;AAAAA,MACAM,UAAUuB;AAAAA,MACVwC,UAAU5B;AAAAA,MACV6B,qBAAqBjB;AAAAA,MACrBpD,SAAS;AAAA,QACP2D,MAAMpC,GAAG;AAAA,UAAE,CAACvB,QAAQsE,oBAAoB,GAAGxD;AAAAA,QAAAA,CAAU;AAAA,QACrDyD,WAAWhD,GAAGT,YAAYQ,IAAI;AAAA,UAAEkD,SAAS;AAAA,QAAA,CAAG,CAAC;AAAA,MAC/C;AAAA,MACAC,WACE3D,YAAYkB,QACV8B,2BAAAA,IAACY,gBAAAA,UAAQ;AAAA,QACP3E,WAAWC,QAAQ2E;AAAAA,QACnB3C,OAAO,CAACA,OAAO,aAAa;AAAA,MAC7B,CAAA,IACCpB,iBAAiB,+CAClBgE,gBAAAA,aAAW;AAAA,QAAC7E,WAAWC,QAAQ6E;AAAAA,MAAkB,CAAA,IAChDC;AAAAA,MAENjE,aACEC,WAAWgE,SAAY9C,wCACrB+C,WAAAA,UAAA;AAAA,QAAAnB,UAAA,CACEE,2BAAAA,IAACY,0BAAQ;AAAA,UACP3E,WAAWC,QAAQgF;AAAAA,UACnBhD,OAAO,CAACA,OAAO,aAAa;AAAA,QAAA,CAC7B,GACD8B,2BAAAA,IAACmB,yBAAY;AAAA,UACXlF,WAAWC,QAAQkF;AAAAA,UACnBC,SAAS1D,2CAAa2D,YAAYC;AAAAA,UAAkBzB,UAEnD5B;AAAAA,QAAAA,CACW,CAAC;AAAA,MACf,CAAA,IAEFnB;AAAAA,MAGJ,cAAYlB;AAAAA,MACZ,mBACE,CAACD,SAASsE,YAAM5B,WAAW,OAAO,GAAGxC,cAAc,EAChD0F,KAAK,GAAG,EACRC,UAAUT;AAAAA,MAEf,oBACE,CAACjF,eAAemE,YAAM5B,WAAW,aAAa,GAAGtC,eAAe,EAC7DwF,KAAK,GAAG,EACRC,UAAUT;AAAAA,MACdlB,yCAEA4B,eAAO;AAAA,QAACzF,WAAWC,QAAQyF;AAAAA,QAAM7B,0CAChC,OAAA;AAAA,UAAK7D,WAAWC,QAAQoF;AAAAA,UAAYxB,WACjCrD,8BAA8B,wCAC5BmF,aAAAA,cAAY;AAAA,YACX3F,WAAWwB,IACRP,oBAAoBD,oBACnBO,IAAI;AAAA,cACFqE,eACElE,2CAAa2D,YAAYQ;AAAAA,YAAAA,CAC5B,GACH5F,QAAQ6F,qBACV;AAAA,YACAC,QAAQtF;AAAAA,YACRuF,SAASpD;AAAAA,YACTqD,OAAOvF,aAAaC,iCAAQvB,yBAAyB2F;AAAAA,UAAAA,CACtD,GAEF9D,oBACC8C,2BAAAA,IAACmC,eAAM;AAAA,YACLjG,SAAS;AAAA,cACPkG,QAAQ3E,GAAG;AAAA,gBACT,CAACvB,QAAQmG,YAAY,GACnB5F,8BAA8B,YAAYQ;AAAAA,cAAAA,CAC7C;AAAA,YACH;AAAA,YACAiF,OAAOvF,aAAaC,iCAAQtB,oBAAoB0F;AAAAA,YAChD9C;AAAAA,YACA7B,UAAUwC;AAAAA,UAAAA,CACX,GAEF5B,mBACC+C,2BAAAA,IAACsC,yBAAW;AAAA,YACVN,QAAQ5D;AAAAA,YACRmE,YAAYvD;AAAAA,YACZwD,cAAc3D;AAAAA,YACd4D,eAAevD;AAAAA,YACfwD,wBAAwBnF;AAAAA,UACzB,CAAA,GAEFd,8BAA8B,2CAC5BmF,aAAAA,cAAY;AAAA,YACXI,QAAQtF;AAAAA,YACRuF,SAASpD;AAAAA,YACTqD,OAAOvF,aAAaC,iCAAQvB,yBAAyB2F;AAAAA,UAAAA,CACtD,CACF;AAAA,QAAA,CACE;AAAA,MAAA,CACE;AAAA,IAAA,CACK,CAAC;AAAA,EAAA,CACJ;AAEnB;;;"}
+{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n  const {\n    id,\n    name,\n    required = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    classes: classesProp,\n    value,\n    onChange,\n    defaultValue = \"\",\n    expanded,\n    defaultExpanded = false,\n    recommendedColorsPosition = \"top\",\n    recommendedColors = [\n      \"#95AFE8\",\n      \"#E89E5D\",\n      \"#83B8A6\",\n      \"#70759C\",\n      \"#C57E7E\",\n      \"#FADA95\",\n      \"#ADBFE8\",\n      \"#E3B386\",\n      \"#9AC6B7\",\n      \"#8B90AF\",\n      \"#CF9797\",\n      \"#FAE1AA\",\n    ],\n    showLabels = true,\n    labels: labelsProp,\n    dropdownIcon = \"colorPicker\",\n    placeholder = \"Select color...\",\n    iconOnly = false,\n    showSavedColors = true,\n    showCustomColors = true,\n    savedColorsValue,\n    defaultSavedColorsValue = [],\n    onSavedColorAdded,\n    onSavedColorRemoved,\n    deleteSavedColorButtonArialLabel = \"Delete saved color\",\n  } = useDefaultProps(\"HvColorPicker\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleAddColor = () => {\n    // When no color is provided, react-color sets the picker to #000000.\n    // This is the color that should be added in this case.\n    const colorToAdd = color || \"#000000\";\n\n    onSavedColorAdded?.(colorToAdd);\n    setSavedColors([...savedColors, colorToAdd]);\n  };\n\n  const handleRemoveColor = (val: string, position: number) => {\n    if (savedColors[position] === val) {\n      const sColors = [...savedColors];\n      sColors.splice(position, 1);\n      onSavedColorRemoved?.(val);\n      setSavedColors(sColors);\n    }\n  };\n\n  const setFocusToContent = (containerRef: HTMLElement | null) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      required={required}\n      className={cx(className, classes.root)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        variableWidth\n        className={className}\n        expanded={isOpen}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        classes={{\n          root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n          selection: cx(iconOnly && css({ padding: 0 })),\n        }}\n        adornment={\n          iconOnly && color ? (\n            <Checkbox\n              className={classes.headerColorIconOnly}\n              color={[color, \"transparent\"]}\n            />\n          ) : dropdownIcon === \"colorPicker\" ? (\n            <ColorPicker className={classes.colorPickerIcon} />\n          ) : undefined\n        }\n        placeholder={\n          iconOnly ? undefined : color ? (\n            <>\n              <Checkbox\n                className={classes.headerColorIcon}\n                color={[color, \"transparent\"]}\n              />\n              <HvTypography\n                className={classes.headerColorValue}\n                variant={activeTheme?.colorPicker.inputValueVariant}\n              >\n                {color}\n              </HvTypography>\n            </>\n          ) : (\n            placeholder\n          )\n        }\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n      >\n        <HvPanel className={classes.panel}>\n          <div className={classes.colorPicker}>\n            {recommendedColorsPosition === \"top\" && (\n              <PresetColors\n                className={cx(\n                  (showCustomColors || showSavedColors) &&\n                    css({\n                      paddingBottom:\n                        activeTheme?.colorPicker.recommendedColorsBottomPadding,\n                    }),\n                  classes.recommendedColorsRoot\n                )}\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n            {showCustomColors && (\n              <Picker\n                classes={{\n                  fields: cx({\n                    [classes.pickerFields]:\n                      recommendedColorsPosition === \"bottom\" || showSavedColors,\n                  }),\n                }}\n                title={showLabels ? labels?.customColorsLabel : undefined}\n                color={color}\n                onChange={handleSelect}\n              />\n            )}\n            {showSavedColors && (\n              <SavedColors\n                colors={savedColors}\n                onAddColor={handleAddColor}\n                onClickColor={handleSelect}\n                onRemoveColor={handleRemoveColor}\n                deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n              />\n            )}\n            {recommendedColorsPosition === \"bottom\" && (\n              <PresetColors\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","HvFormElement","root","children","labelContainer","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8FA,MAAMA,iBAA+C;AAAA,EACnDC,wBAAwB;AAAA,EACxBC,mBAAmB;AACrB;AAMaC,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,eAAe;AAAA,IACfC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC,4BAA4B;AAAA,IAC5BC,oBAAoB,CAClB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,SAAS;AAAA,IAEXC,aAAa;AAAA,IACbC,QAAQC;AAAAA,IACRC,eAAe;AAAA,IACfC,cAAc;AAAA,IACdC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC,mBAAmB;AAAA,IACnBC;AAAAA,IACAC,0BAA0B,CAAE;AAAA,IAC5BC;AAAAA,IACAC;AAAAA,IACAC,mCAAmC;AAAA,EAAA,IACjCC,gBAAgB,gBAAA,iBAAiBjC,KAAK;AAEpC,QAAA;AAAA,IAAEW;AAAAA,IAASuB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWxB,WAAW;AAC7C,QAAA;AAAA,IAAEyB;AAAAA,MAAgBC,SAAS,SAAA;AAE3BjB,QAAAA,SAASkB,UAAAA,UAAU3C,gBAAgB0B,UAAU;AAE7C,QAAA,CAACkB,QAAQC,SAAS,IAAIC,cAAAA,cAAc1B,UAAU2B,QAAQ1B,eAAe,CAAC;AAC5E,QAAM,CAAC2B,OAAOC,QAAQ,IAAIH,cAAAA,cAAc7B,OAAOE,YAAY;AAC3D,QAAM,CAAC+B,aAAaC,cAAc,IAAIL,cAAAA,cACpCd,kBACAC,uBACF;AACMmB,QAAAA,YAAYC,YAAAA,YAAYhD,IAAI,YAAY;AAC9C,QAAMiD,WAAW7C,SAAS;AAC1B,QAAM8C,iBAAiB3C,eAAe;AAEhC4C,QAAAA,eAA4CA,CAACC,GAAGC,SAAS;AAC7Db,cAAUa,IAAI;AAAA,EAAA;AAGVC,QAAAA,eAAeA,CAACC,QAAsD;AAC1E1C,yCAAW0C,IAAIC;AACfZ,aAASW,IAAIC,GAAG;AAAA,EAAA;AAGlB,QAAMC,iBAAiBA,MAAM;AAG3B,UAAMC,aAAaf,SAAS;AAE5Bd,2DAAoB6B;AACpBZ,mBAAe,CAAC,GAAGD,aAAaa,UAAU,CAAC;AAAA,EAAA;AAGvCC,QAAAA,oBAAoBA,CAACJ,KAAaK,aAAqB;AACvDf,QAAAA,YAAYe,QAAQ,MAAML,KAAK;AAC3BM,YAAAA,UAAU,CAAC,GAAGhB,WAAW;AACvBiB,cAAAA,OAAOF,UAAU,CAAC;AAC1B9B,iEAAsByB;AACtBT,qBAAee,OAAO;AAAA,IACxB;AAAA,EAAA;AAGIE,QAAAA,oBAAoBA,CAACC,iBAAqC;AACxDC,UAAAA,SAASD,6CAAcE,qBAAqB;AAC9CD,QAAAA,UAAUA,OAAOE,SAAS,GAAG;AACxB,aAAA,CAAC,EAAEC;IACZ;AAAA,EAAA;AAGF,yCACGC,YAAAA,eAAa;AAAA,IACZrE;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAO,WAAWyB,GAAGzB,WAAWC,QAAQ4D,IAAI;AAAA,IAAEC,YAErCtB,YAAYC,mDACZ,OAAA;AAAA,MAAKzC,WAAWC,QAAQ8D;AAAAA,MAAeD,UACpCtB,CAAAA,YACCwB,2BAAAA,IAACC,eAAO;AAAA,QACN1E,IAAI2E,MAAAA,MAAM5B,WAAW,OAAO;AAAA,QAC5B3C;AAAAA,QACAK,WAAWC,QAAQN;AAAAA,MAAAA,CACpB,GAGF8C,kBACCuB,2BAAAA,IAACG,2BAAa;AAAA,QACZ5E,IAAI2E,MAAAA,MAAM5B,WAAW,aAAa;AAAA,QAClCtC,WAAWC,QAAQH;AAAAA,QAAYgE,UAE9BhE;AAAAA,MAAAA,CACY,CAChB;AAAA,IAAA,CACE,GAEPkE,2BAAAA,IAACI,6BAAc;AAAA,MACbC,eAAa;AAAA,MACbrE;AAAAA,MACAM,UAAUwB;AAAAA,MACVwC,UAAU5B;AAAAA,MACV6B,qBAAqBjB;AAAAA,MACrBrD,SAAS;AAAA,QACP4D,MAAMpC,GAAG;AAAA,UAAE,CAACxB,QAAQuE,oBAAoB,GAAGzD;AAAAA,QAAAA,CAAU;AAAA,QACrD0D,WAAWhD,GAAGV,YAAYS,IAAI;AAAA,UAAEkD,SAAS;AAAA,QAAA,CAAG,CAAC;AAAA,MAC/C;AAAA,MACAC,WACE5D,YAAYmB,QACV8B,2BAAAA,IAACY,gBAAAA,UAAQ;AAAA,QACP5E,WAAWC,QAAQ4E;AAAAA,QACnB3C,OAAO,CAACA,OAAO,aAAa;AAAA,MAC7B,CAAA,IACCrB,iBAAiB,+CAClBiE,gBAAAA,aAAW;AAAA,QAAC9E,WAAWC,QAAQ8E;AAAAA,MAAkB,CAAA,IAChDC;AAAAA,MAENlE,aACEC,WAAWiE,SAAY9C,wCACrB+C,WAAAA,UAAA;AAAA,QAAAnB,UAAA,CACEE,2BAAAA,IAACY,0BAAQ;AAAA,UACP5E,WAAWC,QAAQiF;AAAAA,UACnBhD,OAAO,CAACA,OAAO,aAAa;AAAA,QAAA,CAC7B,GACD8B,2BAAAA,IAACmB,yBAAY;AAAA,UACXnF,WAAWC,QAAQmF;AAAAA,UACnBC,SAAS1D,2CAAa2D,YAAYC;AAAAA,UAAkBzB,UAEnD5B;AAAAA,QAAAA,CACW,CAAC;AAAA,MACf,CAAA,IAEFpB;AAAAA,MAGJ,cAAYlB;AAAAA,MACZ,mBACE,CAACD,SAASuE,YAAM5B,WAAW,OAAO,GAAGzC,cAAc,EAChD2F,KAAK,GAAG,EACRC,UAAUT;AAAAA,MAEf,oBACE,CAAClF,eAAeoE,YAAM5B,WAAW,aAAa,GAAGvC,eAAe,EAC7DyF,KAAK,GAAG,EACRC,UAAUT;AAAAA,MACdlB,yCAEA4B,eAAO;AAAA,QAAC1F,WAAWC,QAAQ0F;AAAAA,QAAM7B,0CAChC,OAAA;AAAA,UAAK9D,WAAWC,QAAQqF;AAAAA,UAAYxB,WACjCtD,8BAA8B,wCAC5BoF,aAAAA,cAAY;AAAA,YACX5F,WAAWyB,IACRR,oBAAoBD,oBACnBQ,IAAI;AAAA,cACFqE,eACElE,2CAAa2D,YAAYQ;AAAAA,YAAAA,CAC5B,GACH7F,QAAQ8F,qBACV;AAAA,YACAC,QAAQvF;AAAAA,YACRwF,SAASpD;AAAAA,YACTqD,OAAOxF,aAAaC,iCAAQxB,yBAAyB6F;AAAAA,UAAAA,CACtD,GAEF/D,oBACC+C,2BAAAA,IAACmC,eAAM;AAAA,YACLlG,SAAS;AAAA,cACPmG,QAAQ3E,GAAG;AAAA,gBACT,CAACxB,QAAQoG,YAAY,GACnB7F,8BAA8B,YAAYQ;AAAAA,cAAAA,CAC7C;AAAA,YACH;AAAA,YACAkF,OAAOxF,aAAaC,iCAAQvB,oBAAoB4F;AAAAA,YAChD9C;AAAAA,YACA9B,UAAUyC;AAAAA,UAAAA,CACX,GAEF7B,mBACCgD,2BAAAA,IAACsC,yBAAW;AAAA,YACVN,QAAQ5D;AAAAA,YACRmE,YAAYvD;AAAAA,YACZwD,cAAc3D;AAAAA,YACd4D,eAAevD;AAAAA,YACfwD,wBAAwBpF;AAAAA,UACzB,CAAA,GAEFd,8BAA8B,2CAC5BoF,aAAAA,cAAY;AAAA,YACXI,QAAQvF;AAAAA,YACRwF,SAASpD;AAAAA,YACTqD,OAAOxF,aAAaC,iCAAQxB,yBAAyB6F;AAAAA,UAAAA,CACtD,CACF;AAAA,QAAA,CACE;AAAA,MAAA,CACE;AAAA,IAAA,CACK,CAAC;AAAA,EAAA,CACJ;AAEnB;;;"}

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

@@ -1,37 +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 HvContainer = React.forwardRef(({
-  maxWidth = false,
-  classes,
-  className,
-  fixed,
-  ...others
-}, ref) => {
-  const muiTheme = styles.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(Container_styles.StyledRoot, {
+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: classesProp,
     className,
+    fixed,
+    disableGutters,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvContainer", props);
+  const {
+    classes,
+    cx,
+    css
+  } = Container_styles.useClasses(classesProp);
+  const muiTheme = styles.useTheme();
+  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\";\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  ({ 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":";;;;;;;;AAwCaA,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,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,IACvBd;AAAAA,IACAL;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

@@ -1,27 +1,31 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 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");
 const Button = require("../Button/Button.cjs");
-const HvControls = ({
-  id,
-  className,
-  classes,
-  views,
-  callbacks,
-  selectedView,
-  defaultView,
-  children,
-  hideViewSwitcher = false,
-  onViewChange
-}) => {
+const HvControls = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    views,
+    callbacks,
+    selectedView,
+    defaultView,
+    children,
+    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);
@@ -43,19 +47,19 @@ const HvControls = ({
   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(({
@@ -75,5 +79,6 @@ const HvControls = ({
     })
   });
 };
+exports.controlsClasses = Controls_styles.staticClasses;
 exports.HvControls = HvControls;
 //# sourceMappingURL=Controls.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport controlsClasses, { HvControlsClasses } from \"./controlClasses\";\nimport { StyledRoot, StyledSection } from \"./Controls.styles\";\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = ({\n  id,\n  className,\n  classes,\n  views,\n  callbacks,\n  selectedView,\n  defaultView,\n  children,\n  hideViewSwitcher = false,\n  onViewChange,\n}: HvControlsProps) => {\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, controlsClasses.root, classes?.root)}\n    >\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.leftSection,\n            controlsClasses.leftSection\n          )}\n        >\n          {leftChildren}\n        </StyledSection>\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.rightSection,\n            controlsClasses.rightSection\n          )}\n        >\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </StyledSection>\n      </HvControlsContextProvider>\n    </StyledRoot>\n  );\n};\n"],"names":["HvControls","id","className","classes","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","StyledRoot","clsx","controlsClasses","root","HvControlsContextProvider","onSearch","onSort","_jsx","StyledSection","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;;AAwDO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC;AACe,MAAM;AACrB,QAAM,CAACC,aAAaC,cAAc,IAAIC,cAAAA,cACpCP,cACAC,WACF;AAEMO,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBN,iDAAeK,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAkBA,CAACC,UAAeb;;AAAAA,wDAAWc,oBAAXd,mCAA6Ba;AAAAA;AACrE,QAAME,gBAAgBA,CAACF;;AACrBb,wDAAWgB,cAAXhB,mCAAuB,CACrB;AAAA,MACEJ,IAAIiB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMlB,QAAQ;AACvCmB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQpB,QAAQ;AAE/C,QAAMqB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAEA,wCACGW,gBAAAA,YAAU;AAAA,IACTlC;AAAAA,IACAC,WAAWkC,KAAKlC,KAAAA,WAAWmC,eAAgBC,QAAAA,MAAMnC,mCAASmC,IAAI;AAAA,IAAE9B,0CAE/D+B,2CAAyB;AAAA,MACxBrB,OAAO;AAAA,QACLsB,UAAUvB;AAAAA,QACVwB,QAAQrB;AAAAA,MACV;AAAA,MAAEZ,UAAA,CAEFkC,2BAAAA,IAACC,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS0C,aACTR,eAAAA,QAAgBQ,WAClB;AAAA,QAAErC,UAEDwB;AAAAA,MAAAA,CACY,GACfc,2BAAAA,KAACH,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS4C,cACTV,eAAAA,QAAgBU,YAClB;AAAA,QAAEvC,WAED0B,eACA9B,SAAS,CAACK,qBAAoBL,+BAAO4C,UAAS,KAC7CN,2BAAAA,IAACO,2BAAa;AAAA,UAAChD,IAAIiD,MAAAA,MAAMjD,IAAI,mBAAmB;AAAA,UAAEO,UAC/CJ,MAAM+C,IAAI,CAAC;AAAA,YAAElD,IAAIe;AAAAA,YAAOoC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,qCAC/BC,OAAAA,UAAQ;AAAA,YACPrD,IAAIe;AAAAA,YAEJoC,MAAI;AAAA,YACJG,UAAU5C,gBAAgBK;AAAAA,YAC1BwC,SAAUzC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CqC;AAAAA,YAAM7C,UAET4C;AAAAA,UAAI,GANApC,KAOG,CACX;AAAA,QAAA,CACY,CAChB;AAAA,MAAA,CACY,CAAC;AAAA,IAAA,CACS;AAAA,EAAA,CACjB;AAEhB;;"}
+{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":["HvControls","props","id","className","classes","classesProp","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","useDefaultProps","cx","useClasses","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","root","HvControlsContextProvider","onSearch","onSort","_jsx","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;AA2DaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,cAAcZ,KAAK;AAEjC,QAAA;AAAA,IAAEG;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWV,WAAW;AAE9C,QAAM,CAACW,aAAaC,cAAc,IAAIC,cAAAA,cACpCV,cACAC,WACF;AAEMU,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBT,iDAAeQ,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAkBA,CAACC,UAAehB;;AAAAA,wDAAWiB,oBAAXjB,mCAA6BgB;AAAAA;AACrE,QAAME,gBAAgBA,CAACF;;AACrBhB,wDAAWmB,cAAXnB,mCAAuB,CACrB;AAAA,MACEL,IAAIqB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMrB,QAAQ;AACvCsB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQvB,QAAQ;AAE/C,QAAMwB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAEA,wCACE,OAAA;AAAA,IAAK3B;AAAAA,IAAQC,WAAWW,GAAGV,QAAQoC,MAAMrC,SAAS;AAAA,IAAEO,0CACjD+B,2CAAyB;AAAA,MACxBlB,OAAO;AAAA,QACLmB,UAAUpB;AAAAA,QACVqB,QAAQlB;AAAAA,MACV;AAAA,MAAEf,WAEFkC,2BAAAA,IAAA,OAAA;AAAA,QAAKzC,WAAWW,GAAGV,QAAQyC,SAASzC,QAAQ0C,WAAW;AAAA,QAAEpC,UACtD2B;AAAAA,MAAAA,CACE,GACLU,2BAAAA,KAAA,OAAA;AAAA,QAAK5C,WAAWW,GAAGV,QAAQyC,SAASzC,QAAQ4C,YAAY;AAAA,QAAEtC,WACvD6B,eACAjC,SAAS,CAACK,qBAAoBL,+BAAO2C,UAAS,KAC7CL,2BAAAA,IAACM,2BAAa;AAAA,UAAChD,IAAIiD,MAAAA,MAAMjD,IAAI,mBAAmB;AAAA,UAAEQ,UAC/CJ,MAAM8C,IAAI,CAAC;AAAA,YAAElD,IAAImB;AAAAA,YAAOgC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,qCAC/BC,OAAAA,UAAQ;AAAA,YACPrD,IAAImB;AAAAA,YAEJgC,MAAI;AAAA,YACJG,UAAUxC,gBAAgBK;AAAAA,YAC1BoC,SAAUrC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CiC;AAAAA,YAAM5C,UAET2C;AAAAA,UAAI,GANAhC,KAOG,CACX;AAAA,QAAA,CACY,CAChB;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACmB;AAAA,EAAA,CACxB;AAET;;;"}

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

@@ -1,39 +1,23 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-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).";
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1pt6zdq1"
-} : {
-  target: "e1pt6zdq1",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "eqz57s",
-  styles: "display:inline-flex;width:100%;justify-content:space-between"
-} : {
-  name: "eqz57s",
-  styles: "display:inline-flex;width:100%;justify-content:space-between",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvQ29udHJvbHMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Db250cm9scy9Db250cm9scy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VjdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxuICBnYXA6IDEwLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvControls", {
+  root: {
+    display: "inline-flex",
+    width: "100%",
+    justifyContent: "space-between"
+  },
+  section: {
+    display: "inline-flex",
+    alignItems: "flex-end",
+    gap: 10
+  },
+  rightSection: {},
+  leftSection: {}
 });
-const StyledSection = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1pt6zdq0"
-} : {
-  target: "e1pt6zdq0",
-  label: "StyledSection"
-})(process.env.NODE_ENV === "production" ? {
-  name: "9df6r",
-  styles: "display:inline-flex;align-items:flex-end;gap:10px"
-} : {
-  name: "9df6r",
-  styles: "display:inline-flex;align-items:flex-end;gap:10px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvQ29udHJvbHMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Db250cm9scy9Db250cm9scy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VjdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxuICBnYXA6IDEwLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-exports.StyledRoot = StyledRoot;
-exports.StyledSection = StyledSection;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Controls.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Controls.styles.cjs","sources":["../../../../src/components/Controls/Controls.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  width: \"100%\",\n  justifyContent: \"space-between\",\n});\n\nexport const StyledSection = styled(\"div\")({\n  display: \"inline-flex\",\n  alignItems: \"flex-end\",\n  gap: 10,\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSection"],"mappings":";;;;;;;;AAEO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAItC;AAEM,MAAMC,gBAAuBX,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAIzC;;;"}
+{"version":3,"file":"Controls.styles.cjs","sources":["../../../../src/components/Controls/Controls.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvControls\", {\n  root: {\n    display: \"inline-flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  section: { display: \"inline-flex\", alignItems: \"flex-end\", gap: 10 },\n  rightSection: {},\n  leftSection: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","width","justifyContent","section","alignItems","gap","rightSection","leftSection"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IAAEH,SAAS;AAAA,IAAeI,YAAY;AAAA,IAAYC,KAAK;AAAA,EAAG;AAAA,EACnEC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAChB,CAAC;;;"}