@hitachivantara/uikit-react-core 5.28.0 → 5.29.0

package/dist/esm/components/ColorPicker/ColorPicker.js

@@ -4,7 +4,6 @@ import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useLabels } from "../../hooks/useLabels.js";
-import { useTheme } from "../../hooks/useTheme.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./ColorPicker.styles.js";
 import { staticClasses } from "./ColorPicker.styles.js";
@@ -61,9 +60,6 @@ const HvColorPicker = (props) => {
     css,
     cx
   } = useClasses(classesProp);
-  const {
-    activeTheme
-  } = useTheme();
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const [color, setColor] = useControlled(value, defaultValue);
@@ -120,11 +116,9 @@ const HvColorPicker = (props) => {
       }))
     }, adornment: iconOnly && color ? /* @__PURE__ */ jsx(Checkbox, { className: classes.headerColorIconOnly, color: [color, "transparent"] }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, { className: classes.colorPickerIcon }) : void 0, placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Checkbox, { className: classes.headerColorIcon, color: [color, "transparent"] }),
-      /* @__PURE__ */ jsx(HvTypography, { className: classes.headerColorValue, variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant, children: color })
+      /* @__PURE__ */ jsx(HvTypography, { className: classes.headerColorValue, variant: "label", children: color })
     ] }) : placeholder, "aria-label": ariaLabel, "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, children: /* @__PURE__ */ jsx(HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxs("div", { className: classes.colorPicker, children: [
-      recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, { className: cx((showCustomColors || showSavedColors) && css({
-        paddingBottom: activeTheme == null ? void 0 : activeTheme.colorPicker.recommendedColorsBottomPadding
-      }), classes.recommendedColorsRoot), colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 }),
+      recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, { className: classes.recommendedColorsRoot, colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 }),
       showCustomColors && /* @__PURE__ */ jsx(Picker, { classes: {
         fields: cx({
           [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","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 function to be executed whenever the color change is complete. */\n  onChangeComplete?: (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; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: 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    onChangeComplete,\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    addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\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    onChangeComplete?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleOnChange = (\n    val: ColorState | { hex: string; source: string }\n  ) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleOnChangeComplete = (\n    val: ColorState | { hex: string; source: string }\n  ) => {\n    onChangeComplete?.(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(classes.root, className)}\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={handleOnChange}\n                onChangeComplete={handleOnChangeComplete}\n              />\n            )}\n            {showSavedColors && (\n              <SavedColors\n                colors={savedColors}\n                onAddColor={handleAddColor}\n                onClickColor={handleSelect}\n                onRemoveColor={handleRemoveColor}\n                deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                addButtonAriaLabel={addSavedColorButtonAriaLabel}\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","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","setId","dropdownRootIconOnly","selection","padding","headerColorIconOnly","colorPickerIcon","undefined","headerColorIcon","headerColorValue","colorPicker","inputValueVariant","join","trim","panel","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","fields","pickerFields"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","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 { 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 function to be executed whenever the color change is complete. */\n  onChangeComplete?: (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; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: 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    onChangeComplete,\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    addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n  } = useDefaultProps(\"HvColorPicker\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\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    onChangeComplete?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleOnChange = (\n    val: ColorState | { hex: string; source: string }\n  ) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleOnChangeComplete = (\n    val: ColorState | { hex: string; source: string }\n  ) => {\n    onChangeComplete?.(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(classes.root, className)}\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=\"label\"\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={classes.recommendedColorsRoot}\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={handleOnChange}\n                onChangeComplete={handleOnChangeComplete}\n              />\n            )}\n            {showSavedColors && (\n              <SavedColors\n                colors={savedColors}\n                onAddColor={handleAddColor}\n                onClickColor={handleSelect}\n                onRemoveColor={handleRemoveColor}\n                deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                addButtonAriaLabel={addSavedColorButtonAriaLabel}\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","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","setId","dropdownRootIconOnly","selection","padding","headerColorIconOnly","colorPickerIcon","undefined","headerColorIcon","headerColorValue","join","trim","panel","colorPicker","recommendedColorsRoot","fields","pickerFields"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
 const {
   staticClasses,
@@ -26,16 +25,20 @@ const {
   },
   panel: {
     width: "100%",
-    minWidth: theme.colorPicker.panelMinWidth,
+    minWidth: "266px",
     display: "flex",
     justifyContent: "center",
-    padding: theme.colorPicker.panelPadding
+    padding: "16px"
   },
   colorPicker: {
-    width: theme.colorPicker.colorPickerWidth
+    width: "232px"
   },
   colorPickerIcon: {},
-  recommendedColorsRoot: {},
+  recommendedColorsRoot: {
+    ":not(:only-child)": {
+      paddingBottom: "24px"
+    }
+  },
   dropdownRootIconOnly: {
     width: 32,
     height: 32

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\n  description: {},\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: theme.colorPicker.panelMinWidth,\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.colorPicker.panelPadding,\n  },\n  colorPicker: {\n    width: theme.colorPicker.colorPickerWidth,\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {},\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","labelContainer","display","alignItems","label","paddingBottom","cursor","description","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","theme","colorPicker","panelMinWidth","justifyContent","padding","panelPadding","colorPickerWidth","colorPickerIcon","recommendedColorsRoot","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM,CAAC;AAAA,EACPC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,IACTI,QAAQ;AAAA,EACV;AAAA,EACAC,aAAa,CAAC;AAAA,EACdC,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,UAAUC,MAAMC,YAAYC;AAAAA,IAC5Bf,SAAS;AAAA,IACTgB,gBAAgB;AAAA,IAChBC,SAASJ,MAAMC,YAAYI;AAAAA,EAC7B;AAAA,EACAJ,aAAa;AAAA,IACXL,OAAOI,MAAMC,YAAYK;AAAAA,EAC3B;AAAA,EACAC,iBAAiB,CAAC;AAAA,EAClBC,uBAAuB,CAAC;AAAA,EACxBC,sBAAsB;AAAA,IACpBb,OAAO;AAAA,IACPc,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB,CAAC;AAAA,EACtBC,cAAc;AAAA,IAAEtB,eAAe;AAAA,EAAG;AACpC,CAAC;"}
+{"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\n  description: {},\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: \"266px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"16px\",\n  },\n  colorPicker: {\n    width: \"232px\",\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {\n    \":not(:only-child)\": {\n      paddingBottom: \"24px\",\n    },\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","labelContainer","display","alignItems","label","paddingBottom","cursor","description","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","justifyContent","padding","colorPicker","colorPickerIcon","recommendedColorsRoot","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM,CAAC;AAAA,EACPC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,IACTI,QAAQ;AAAA,EACV;AAAA,EACAC,aAAa,CAAC;AAAA,EACdC,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,UAAU;AAAA,IACVZ,SAAS;AAAA,IACTa,gBAAgB;AAAA,IAChBC,SAAS;AAAA,EACX;AAAA,EACAC,aAAa;AAAA,IACXN,OAAO;AAAA,EACT;AAAA,EACAO,iBAAiB,CAAC;AAAA,EAClBC,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnBd,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAe,sBAAsB;AAAA,IACpBT,OAAO;AAAA,IACPU,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB,CAAC;AAAA,EACtBC,cAAc;AAAA,IAAElB,eAAe;AAAA,EAAG;AACpC,CAAC;"}

package/dist/esm/components/ColorPicker/Fields/Fields.js

@@ -3,14 +3,16 @@ import { useState, useRef, useEffect } from "react";
 import * as color from "react-color/lib/helpers/color";
 import { useClasses } from "./Fields.styles.js";
 import { staticClasses } from "./Fields.styles.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvInput } from "../../Input/Input.js";
-const Fields = ({
-  className,
-  onChange,
-  rgb,
-  hex,
-  classes: classesProp
-}) => {
+const Fields = (props) => {
+  const {
+    className,
+    onChange,
+    rgb,
+    hex,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerFields", props);
   const {
     classes,
     cx

package/dist/esm/components/ColorPicker/Fields/Fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fields.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = ({\n  className,\n  onChange,\n  rgb,\n  hex,\n  classes: classesProp,\n}: FieldsProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb?.r,\n          g: data.g || rgb?.g,\n          b: data.b || rgb?.b,\n          source: \"rgb\",\n        },\n        event\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\"\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","classesProp","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","double","replace","single"],"mappings":"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"}
+{"version":3,"file":"Fields.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb?.r,\n          g: data.g || rgb?.g,\n          b: data.b || rgb?.b,\n          source: \"rgb\",\n        },\n        event\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\"\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":["Fields","props","className","onChange","rgb","hex","classes","classesProp","useDefaultProps","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","double","replace","single"],"mappings":"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"}

package/dist/esm/components/ColorPicker/Fields/Fields.styles.js

@@ -1,4 +1,3 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../../utils/classes.js";
 const name = "HvColorPicker-Fields";
 const {
@@ -8,12 +7,12 @@ const {
   fields: {
     width: "100%",
     display: "flex",
-    paddingTop: theme.colorPicker.fieldsPaddingTop,
-    marginRight: theme.colorPicker.fieldsMarginRight
+    paddingTop: "18px",
+    marginRight: "0px"
   },
   single: {
-    maxWidth: theme.colorPicker.fieldsRgbWidth,
-    paddingLeft: theme.colorPicker.fieldsRgbPaddingLeft,
+    maxWidth: "50px",
+    paddingLeft: "4px",
     "& input": {
       marginLeft: 5,
       marginRight: 5
@@ -23,8 +22,8 @@ const {
     }
   },
   double: {
-    maxWidth: theme.colorPicker.fieldsHexWidth,
-    paddingRight: theme.colorPicker.fieldsHexPaddingRight,
+    maxWidth: "82px",
+    paddingRight: "4px",
     "& input": {
       textTransform: "uppercase",
       marginLeft: 5,

package/dist/esm/components/ColorPicker/Fields/Fields.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fields.styles.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: theme.colorPicker.fieldsPaddingTop,\n    marginRight: theme.colorPicker.fieldsMarginRight,\n  },\n  single: {\n    maxWidth: theme.colorPicker.fieldsRgbWidth,\n    paddingLeft: theme.colorPicker.fieldsRgbPaddingLeft,\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    maxWidth: theme.colorPicker.fieldsHexWidth,\n    paddingRight: theme.colorPicker.fieldsHexPaddingRight,\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","fields","width","display","paddingTop","theme","colorPicker","fieldsPaddingTop","marginRight","fieldsMarginRight","single","maxWidth","fieldsRgbWidth","paddingLeft","fieldsRgbPaddingLeft","marginLeft","double","fieldsHexWidth","paddingRight","fieldsHexPaddingRight","textTransform"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,YAAYC,MAAMC,YAAYC;AAAAA,IAC9BC,aAAaH,MAAMC,YAAYG;AAAAA,EACjC;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAUN,MAAMC,YAAYM;AAAAA,IAC5BC,aAAaR,MAAMC,YAAYQ;AAAAA,IAC/B,WAAW;AAAA,MACTC,YAAY;AAAA,MACZP,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTK,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAG,QAAQ;AAAA,IACNL,UAAUN,MAAMC,YAAYW;AAAAA,IAC5BC,cAAcb,MAAMC,YAAYa;AAAAA,IAChC,WAAW;AAAA,MACTC,eAAe;AAAA,MACfL,YAAY;AAAA,MACZP,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTK,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Fields.styles.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: \"18px\",\n    marginRight: \"0px\",\n  },\n  single: {\n    maxWidth: \"50px\",\n    paddingLeft: \"4px\",\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    maxWidth: \"82px\",\n    paddingRight: \"4px\",\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","fields","width","display","paddingTop","marginRight","single","maxWidth","paddingLeft","marginLeft","double","paddingRight","textTransform"],"mappings":";AAEA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,aAAa;AAAA,EACf;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAU;AAAA,IACVC,aAAa;AAAA,IACb,WAAW;AAAA,MACTC,YAAY;AAAA,MACZJ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTG,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAE,QAAQ;AAAA,IACNH,UAAU;AAAA,IACVI,cAAc;AAAA,IACd,WAAW;AAAA,MACTC,eAAe;AAAA,MACfH,YAAY;AAAA,MACZJ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTG,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ColorPicker/Picker/Picker.js

@@ -6,16 +6,18 @@ import { useTheme } from "../../../hooks/useTheme.js";
 import { useClasses } from "./Picker.styles.js";
 import { staticClasses } from "./Picker.styles.js";
 import { Fields } from "../Fields/Fields.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const Picker = CustomPicker(({
-  onChange,
-  rgb,
-  hsl,
-  hsv,
-  hex,
-  title,
-  classes: classesProp
-}) => {
+const Component = (props) => {
+  const {
+    onChange,
+    rgb,
+    hsl,
+    hsv,
+    hex,
+    title,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerPicker", props);
   const {
     activeTheme
   } = useTheme();
@@ -32,7 +34,8 @@ const Picker = CustomPicker(({
     ] }),
     /* @__PURE__ */ jsx(Fields, { className: classes.fields, rgb, hex, onChange })
   ] });
-});
+};
+const Picker = CustomPicker(Component);
 export {
   Picker,
   staticClasses as colorPickerPickerClasses

package/dist/esm/components/ColorPicker/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\nexport const Picker = CustomPicker(\n  ({\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  }: {\n    classes?: HvColorPickerPickerClasses;\n    title?: string;\n  } & CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  >) => {\n    const { activeTheme } = useTheme();\n    const { classes } = useClasses(classesProp);\n\n    const SaturationPointer = useCallback(\n      () => <div className={classes?.saturationPointer} />,\n      [classes?.saturationPointer]\n    );\n\n    const HueSlider = useCallback(\n      () => <div className={classes?.hueSlider} />,\n      [classes?.hueSlider]\n    );\n\n    return (\n      <>\n        {title && (\n          <HvTypography className={classes.title} variant=\"caption1\">\n            {title}\n          </HvTypography>\n        )}\n        <div className={classes.pickers}>\n          <div className={classes.saturation}>\n            <Saturation\n              hsl={hsl}\n              hsv={hsv}\n              onChange={onChange}\n              pointer={SaturationPointer}\n            />\n          </div>\n          <div className={classes.hue}>\n            <Hue\n              direction={activeTheme?.colorPicker.hueDirection}\n              hsl={hsl}\n              onChange={onChange}\n              pointer={HueSlider}\n            />\n          </div>\n        </div>\n        <Fields\n          className={classes.fields}\n          rgb={rgb}\n          hex={hex}\n          onChange={onChange}\n        />\n      </>\n    );\n  }\n);\n"],"names":["Picker","CustomPicker","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue","colorPicker","hueDirection","fields"],"mappings":";;;;;;;;;AAsBaA,MAAAA,SAASC,aACpB,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,YACxB,MAAM,oBAAC,OAAI,EAAA,WAAWN,mCAASO,kBAAAA,CAAqB,GACpD,CAACP,mCAASO,iBAAiB,CAC7B;AAEA,QAAMC,YAAYF,YAChB,MAAM,oBAAC,OAAI,EAAA,WAAWN,mCAASS,UAAAA,CAAa,GAC5C,CAACT,mCAASS,SAAS,CACrB;AAEA,SAEKV,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWC,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAWC,QAAQU,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWV,QAAQW,YACtB,UAAA,oBAAC,YACC,EAAA,KACA,KACA,UACA,SAASN,kBAAkB,CAAA,GAE/B;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWL,QAAQY,KACtB,UAAC,oBAAA,KAAA,EACC,WAAWV,2CAAaW,YAAYC,cACpC,KACA,UACA,SAASN,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,wBACC,QACC,EAAA,WAAWR,QAAQe,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer]\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider]\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":["Component","props","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","useDefaultProps","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue","colorPicker","hueDirection","fields","Picker","CustomPicker"],"mappings":";;;;;;;;;;AAqCA,MAAMA,YAAYA,CAACC,UAAuB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,uBAAuBT,KAAK;AAC1C,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,WAAWJ,WAAW;AAE1C,QAAMK,oBAAoBC,YACxB,MAAM,oBAAC,OAAI,EAAA,WAAWP,mCAASQ,kBAAAA,CAAqB,GACpD,CAACR,mCAASQ,iBAAiB,CAC7B;AAEA,QAAMC,YAAYF,YAChB,MAAM,oBAAC,OAAI,EAAA,WAAWP,mCAASU,UAAAA,CAAa,GAC5C,CAACV,mCAASU,SAAS,CACrB;AAEA,SAEKX,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWC,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAWC,QAAQW,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWX,QAAQY,YACtB,UAAA,oBAAC,YACC,EAAA,KACA,KACA,UACA,SAASN,kBAAkB,CAAA,GAE/B;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWN,QAAQa,KACtB,UAAC,oBAAA,KAAA,EACC,WAAWV,2CAAaW,YAAYC,cACpC,KACA,UACA,SAASN,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,wBACC,QACC,EAAA,WAAWT,QAAQgB,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ;AAEaC,MAAAA,SAASC,aAAa1B,SAAS;"}

package/dist/esm/components/ColorPicker/Picker/Picker.styles.js

@@ -7,50 +7,50 @@ const {
 } = createClasses(name, {
   pickers: {
     display: "flex",
-    flexDirection: theme.colorPicker.pickersFlexDirection
+    flexDirection: "column"
   },
   saturation: {
-    width: theme.colorPicker.saturationWidth,
-    height: theme.colorPicker.saturationHeight,
-    marginRight: theme.colorPicker.saturationMarginRight,
+    width: "232px",
+    height: "140px",
+    marginRight: "0px",
     position: "relative",
     overflow: "visible",
     "& > div": {
-      borderRadius: theme.colorPicker.saturationBorderRadius,
+      borderRadius: theme.radii.base,
       "& .saturation-white": {
-        borderRadius: theme.colorPicker.saturationBorderRadius,
+        borderRadius: theme.radii.base,
         "& .saturation-black": {
-          borderRadius: theme.colorPicker.saturationBorderRadius
+          borderRadius: theme.radii.base
         }
       }
     }
   },
   saturationPointer: {
-    width: theme.colorPicker.saturationPointerWidth,
-    height: theme.colorPicker.saturationPointerHeight,
+    width: "8px",
+    height: "8px",
     boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
             0 0 1px 2px rgba(0,0,0,.4)`,
     borderRadius: "50%",
     transform: "translate(-3px, -3px)"
   },
   hue: {
-    height: theme.colorPicker.hueHeight,
-    width: theme.colorPicker.hueWidth,
+    height: "8px",
+    width: "232px",
     position: "relative",
     overflow: "visible",
-    marginTop: theme.colorPicker.hueMarginTop,
+    marginTop: "18px",
     "& .hue-horizontal": {
-      borderRadius: theme.colorPicker.hueBorderRadius
+      borderRadius: `calc(2*${theme.radii.base})`
     }
   },
   hueSlider: {
-    width: theme.colorPicker.hueSliderWidth,
-    height: theme.colorPicker.hueSliderHeight,
-    background: theme.colorPicker.hueSliderBackground,
+    width: "12px",
+    height: "12px",
+    background: "transparent",
     boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
-    marginLeft: theme.colorPicker.hueSliderMarginLeft,
-    border: theme.colorPicker.hueSliderBorder,
-    borderRadius: theme.colorPicker.hueSliderBorderRadius,
+    marginLeft: "0px",
+    border: "2px solid #fff",
+    borderRadius: theme.radii.circle,
     transform: "translate(0, -2px)"
   },
   title: {

package/dist/esm/components/ColorPicker/Picker/Picker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.styles.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  pickers: {\n    display: \"flex\",\n    flexDirection: theme.colorPicker\n      .pickersFlexDirection as CSSProperties[\"flexDirection\"],\n  },\n  saturation: {\n    width: theme.colorPicker.saturationWidth,\n    height: theme.colorPicker.saturationHeight,\n    marginRight: theme.colorPicker.saturationMarginRight,\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.colorPicker.saturationBorderRadius,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.colorPicker.saturationBorderRadius,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.colorPicker.saturationBorderRadius,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: theme.colorPicker.saturationPointerWidth,\n    height: theme.colorPicker.saturationPointerHeight,\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: \"50%\",\n    transform: \"translate(-3px, -3px)\",\n  },\n  hue: {\n    height: theme.colorPicker.hueHeight,\n    width: theme.colorPicker.hueWidth,\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: theme.colorPicker.hueMarginTop,\n\n    \"& .hue-horizontal\": {\n      borderRadius: theme.colorPicker.hueBorderRadius,\n    },\n  },\n  hueSlider: {\n    width: theme.colorPicker.hueSliderWidth,\n    height: theme.colorPicker.hueSliderHeight,\n    background: theme.colorPicker.hueSliderBackground,\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: theme.colorPicker.hueSliderMarginLeft,\n    border: theme.colorPicker.hueSliderBorder,\n    borderRadius: theme.colorPicker.hueSliderBorderRadius,\n    transform: \"translate(0, -2px)\",\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  fields: {},\n});\n"],"names":["name","staticClasses","useClasses","createClasses","pickers","display","flexDirection","theme","colorPicker","pickersFlexDirection","saturation","width","saturationWidth","height","saturationHeight","marginRight","saturationMarginRight","position","overflow","borderRadius","saturationBorderRadius","saturationPointer","saturationPointerWidth","saturationPointerHeight","boxShadow","transform","hue","hueHeight","hueWidth","marginTop","hueMarginTop","hueBorderRadius","hueSlider","hueSliderWidth","hueSliderHeight","background","hueSliderBackground","marginLeft","hueSliderMarginLeft","border","hueSliderBorder","hueSliderBorderRadius","title","fontWeight","fontWeights","semibold","marginBottom","fields"],"mappings":";;AAMA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,SAAS;AAAA,IACPC,SAAS;AAAA,IACTC,eAAeC,MAAMC,YAClBC;AAAAA,EACL;AAAA,EACAC,YAAY;AAAA,IACVC,OAAOJ,MAAMC,YAAYI;AAAAA,IACzBC,QAAQN,MAAMC,YAAYM;AAAAA,IAC1BC,aAAaR,MAAMC,YAAYQ;AAAAA,IAC/BC,UAAU;AAAA,IACVC,UAAU;AAAA,IAEV,WAAW;AAAA,MACTC,cAAcZ,MAAMC,YAAYY;AAAAA,MAEhC,uBAAuB;AAAA,QACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAEhC,uBAAuB;AAAA,UACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBV,OAAOJ,MAAMC,YAAYc;AAAAA,IACzBT,QAAQN,MAAMC,YAAYe;AAAAA,IAC1BC,WAAY;AAAA;AAAA,IAEZL,cAAc;AAAA,IACdM,WAAW;AAAA,EACb;AAAA,EACAC,KAAK;AAAA,IACHb,QAAQN,MAAMC,YAAYmB;AAAAA,IAC1BhB,OAAOJ,MAAMC,YAAYoB;AAAAA,IACzBX,UAAU;AAAA,IACVC,UAAU;AAAA,IACVW,WAAWtB,MAAMC,YAAYsB;AAAAA,IAE7B,qBAAqB;AAAA,MACnBX,cAAcZ,MAAMC,YAAYuB;AAAAA,IAClC;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTrB,OAAOJ,MAAMC,YAAYyB;AAAAA,IACzBpB,QAAQN,MAAMC,YAAY0B;AAAAA,IAC1BC,YAAY5B,MAAMC,YAAY4B;AAAAA,IAC9BZ,WAAW;AAAA,IACXa,YAAY9B,MAAMC,YAAY8B;AAAAA,IAC9BC,QAAQhC,MAAMC,YAAYgC;AAAAA,IAC1BrB,cAAcZ,MAAMC,YAAYiC;AAAAA,IAChChB,WAAW;AAAA,EACb;AAAA,EACAiB,OAAO;AAAA,IACLC,YAAYpC,MAAMqC,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ,CAAC;AACX,CAAC;"}
+{"version":3,"file":"Picker.styles.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  pickers: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  saturation: {\n    width: \"232px\",\n    height: \"140px\",\n    marginRight: \"0px\",\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.radii.base,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.radii.base,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.radii.base,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: \"8px\",\n    height: \"8px\",\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: \"50%\",\n    transform: \"translate(-3px, -3px)\",\n  },\n  hue: {\n    height: \"8px\",\n    width: \"232px\",\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: \"18px\",\n\n    \"& .hue-horizontal\": {\n      borderRadius: `calc(2*${theme.radii.base})`,\n    },\n  },\n  hueSlider: {\n    width: \"12px\",\n    height: \"12px\",\n    background: \"transparent\",\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: \"0px\",\n    border: \"2px solid #fff\",\n    borderRadius: theme.radii.circle,\n    transform: \"translate(0, -2px)\",\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  fields: {},\n});\n"],"names":["name","staticClasses","useClasses","createClasses","pickers","display","flexDirection","saturation","width","height","marginRight","position","overflow","borderRadius","theme","radii","base","saturationPointer","boxShadow","transform","hue","marginTop","hueSlider","background","marginLeft","border","circle","title","fontWeight","fontWeights","semibold","marginBottom","fields"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,SAAS;AAAA,IACPC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,YAAY;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,aAAa;AAAA,IACbC,UAAU;AAAA,IACVC,UAAU;AAAA,IAEV,WAAW;AAAA,MACTC,cAAcC,MAAMC,MAAMC;AAAAA,MAE1B,uBAAuB;AAAA,QACrBH,cAAcC,MAAMC,MAAMC;AAAAA,QAE1B,uBAAuB;AAAA,UACrBH,cAAcC,MAAMC,MAAMC;AAAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBT,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRS,WAAY;AAAA;AAAA,IAEZL,cAAc;AAAA,IACdM,WAAW;AAAA,EACb;AAAA,EACAC,KAAK;AAAA,IACHX,QAAQ;AAAA,IACRD,OAAO;AAAA,IACPG,UAAU;AAAA,IACVC,UAAU;AAAA,IACVS,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnBR,cAAe,UAASC,MAAMC,MAAMC,IAAK;AAAA,IAC3C;AAAA,EACF;AAAA,EACAM,WAAW;AAAA,IACTd,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRc,YAAY;AAAA,IACZL,WAAW;AAAA,IACXM,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRZ,cAAcC,MAAMC,MAAMW;AAAAA,IAC1BP,WAAW;AAAA,EACb;AAAA,EACAQ,OAAO;AAAA,IACLC,YAAYd,MAAMe,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ,CAAC;AACX,CAAC;"}

package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js

@@ -2,14 +2,16 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { Swatch } from "react-color/lib/components/common";
 import { useClasses } from "./PresetColors.styles.js";
 import { staticClasses } from "./PresetColors.styles.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const PresetColors = ({
-  onClick,
-  colors,
-  title,
-  className,
-  classes: classesProp
-}) => {
+const PresetColors = (props) => {
+  const {
+    onClick,
+    colors,
+    title,
+    className,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerPresetColors", props);
   const {
     classes,
     cx

package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes: classesProp,\n}: PresetColorsProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\n          >\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","classesProp","cx","useClasses","handleClick","hex","source","root","map","color","index","swatchWrap","boxShadow"],"mappings":";;;;;AAqBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAWJ,GAAGF,QAAQO,MAAMR,SAAS,GACvCD,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWE,QAAQF,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAWE,QAAQH,QACrBA,UAAOW,OAAAA,IAAI,CAACC,OAAOC,8BACjB,OAEC,EAAA,WAAWV,QAAQW,YAEnB,UAAA,oBAAC,UACC,OACA,SAASP,aACT,YAAY;AAAA,MACVQ,WAAY,4CAA2CH,KAAM;AAAA,IAAA,GAC7D,KARE,qBAAoBA,KAAM,IAAGC,KAAM,EAU3C,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = (props: PresetColorsProps) => {\n  const {\n    onClick,\n    colors,\n    title,\n    className,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\n          >\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["PresetColors","props","onClick","colors","title","className","classes","classesProp","useDefaultProps","cx","useClasses","handleClick","hex","source","root","map","color","index","swatchWrap","boxShadow"],"mappings":";;;;;;AAsBaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,6BAA6BP,KAAK;AAChD,QAAA;AAAA,IAAEK;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAWJ,GAAGH,QAAQQ,MAAMT,SAAS,GACvCD,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWE,QAAQF,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAWE,QAAQH,QACrBA,UAAOY,OAAAA,IAAI,CAACC,OAAOC,8BACjB,OAEC,EAAA,WAAWX,QAAQY,YAEnB,UAAA,oBAAC,UACC,OACA,SAASP,aACT,YAAY;AAAA,MACVQ,WAAY,4CAA2CH,KAAM;AAAA,IAAA,GAC7D,KARE,qBAAoBA,KAAM,IAAGC,KAAM,EAU3C,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/ColorPicker/PresetColors/PresetColors.styles.js

@@ -6,14 +6,14 @@ const {
   useClasses
 } = createClasses(name, {
   root: {
-    width: theme.colorPicker.recommendedColorsRootWidth
+    width: "232px"
   },
   colors: {
     display: "flex",
     flexWrap: "wrap",
     position: "relative",
-    width: theme.colorPicker.recommendedColorsWidth,
-    margin: theme.colorPicker.recommendedColorsMargin,
+    width: "calc(100% + 8px)",
+    margin: "-4px -4px",
     padding: 0
   },
   title: {
@@ -21,11 +21,11 @@ const {
     marginBottom: 8
   },
   swatchWrap: {
-    width: theme.colorPicker.recommendedColorsSwatchWidth,
-    height: theme.colorPicker.recommendedColorsSwatchHeight,
-    margin: theme.colorPicker.recommendedColorsSwatchMargin,
+    width: "32px",
+    height: "32px",
+    margin: "4px",
     "& > span > div": {
-      borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius
+      borderRadius: theme.radii.base
     }
   }
 });

package/dist/esm/components/ColorPicker/PresetColors/PresetColors.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.styles.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: { width: theme.colorPicker.recommendedColorsRootWidth },\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: theme.colorPicker.recommendedColorsWidth,\n    margin: theme.colorPicker.recommendedColorsMargin,\n    padding: 0,\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  swatchWrap: {\n    width: theme.colorPicker.recommendedColorsSwatchWidth,\n    height: theme.colorPicker.recommendedColorsSwatchHeight,\n    margin: theme.colorPicker.recommendedColorsSwatchMargin,\n\n    \"& > span > div\": {\n      borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","width","theme","colorPicker","recommendedColorsRootWidth","colors","display","flexWrap","position","recommendedColorsWidth","margin","recommendedColorsMargin","padding","title","fontWeight","fontWeights","semibold","marginBottom","swatchWrap","recommendedColorsSwatchWidth","height","recommendedColorsSwatchHeight","recommendedColorsSwatchMargin","borderRadius","recommendedColorsSwatchBorderRadius"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IAAEC,OAAOC,MAAMC,YAAYC;AAAAA,EAA2B;AAAA,EAC5DC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVP,OAAOC,MAAMC,YAAYM;AAAAA,IACzBC,QAAQR,MAAMC,YAAYQ;AAAAA,IAC1BC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,YAAY;AAAA,IACVjB,OAAOC,MAAMC,YAAYgB;AAAAA,IACzBC,QAAQlB,MAAMC,YAAYkB;AAAAA,IAC1BX,QAAQR,MAAMC,YAAYmB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcrB,MAAMC,YAAYqB;AAAAA,IAClC;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"PresetColors.styles.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: { width: \"232px\" },\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: \"calc(100% + 8px)\",\n    margin: \"-4px -4px\",\n    padding: 0,\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  swatchWrap: {\n    width: \"32px\",\n    height: \"32px\",\n    margin: \"4px\",\n\n    \"& > span > div\": {\n      borderRadius: theme.radii.base,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","width","colors","display","flexWrap","position","margin","padding","title","fontWeight","theme","fontWeights","semibold","marginBottom","swatchWrap","height","borderRadius","radii","base"],"mappings":";;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EACvBC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVJ,OAAO;AAAA,IACPK,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLC,YAAYC,MAAMC,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,YAAY;AAAA,IACVb,OAAO;AAAA,IACPc,QAAQ;AAAA,IACRT,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChBU,cAAcN,MAAMO,MAAMC;AAAAA,IAC5B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js

@@ -4,15 +4,17 @@ import { Swatch } from "react-color/lib/components/common";
 import { useClasses } from "./SavedColors.styles.js";
 import { staticClasses } from "./SavedColors.styles.js";
 import { HvButton } from "../../Button/Button.js";
-const SavedColors = ({
-  colors,
-  onClickColor,
-  onAddColor,
-  onRemoveColor,
-  deleteButtonAriaLabel,
-  addButtonAriaLabel,
-  classes: classesProp
-}) => {
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+const SavedColors = (props) => {
+  const {
+    colors,
+    onClickColor,
+    onAddColor,
+    onRemoveColor,
+    deleteButtonAriaLabel,
+    addButtonAriaLabel,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerSavedColors", props);
   const {
     classes
   } = useClasses(classesProp);

package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonAriaLabel,\n  addButtonAriaLabel,\n  classes: classesProp,\n}: SavedColorsProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useClasses","handleClick","hex","source","root","addButton","map","color","index","swatchRoot","swatchWrap","boxShadow","removeButtonRoot","removeButton"],"mappings":";;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAWL,QAAQM,MACtB,UAAA;AAAA,IAAA,oBAAC,YACC,WAAWN,QAAQO,WACnB,SAAQ,mBACR,MAAI,MACJ,SAASX,YACT,cAAYG,oBAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAA,CAAA,GAClB;AAAA,IACCL,OAAOc,IAAI,CAACC,OAAOC,UACjB,qBAAA,OAAA,EAEC,WAAWV,QAAQW,YAEnB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWX,QAAQY,YACtB,8BAAC,QACC,EAAA,OACA,SAAST,aACT,YAAY;AAAA,QACVU,WAAY,4CAA2CJ,KAAM;AAAA,SAC7D,EAEN,CAAA;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWT,QAAQc,kBACtB,UAAA,oBAAC,UACC,EAAA,WAAWd,QAAQe,cACnB,SAAQ,mBACR,SAAS,MAAMlB,cAAcY,OAAOC,KAAK,GACzC,UAAU,GACV,cAAYZ,uBAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAI,CAAA,EACpC,CAAA,GACF;AAAA,IAAA,EAAA,GAtBM,eAAcW,KAAM,IAAGC,KAAM,EAuBrC,CACD;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n  const {\n    colors,\n    onClickColor,\n    onAddColor,\n    onRemoveColor,\n    deleteButtonAriaLabel,\n    addButtonAriaLabel,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["SavedColors","props","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useDefaultProps","useClasses","handleClick","hex","source","root","addButton","map","color","index","swatchRoot","swatchWrap","boxShadow","removeButtonRoot","removeButton"],"mappings":";;;;;;;AA0BaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,4BAA4BT,KAAK;AAC/C,QAAA;AAAA,IAAEO;AAAAA,EAAAA,IAAYG,WAAWF,WAAW;AAEpCG,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAWN,QAAQO,MACtB,UAAA;AAAA,IAAA,oBAAC,YACC,WAAWP,QAAQQ,WACnB,SAAQ,mBACR,MAAI,MACJ,SAASZ,YACT,cAAYG,oBAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAA,CAAA,GAClB;AAAA,IACCL,OAAOe,IAAI,CAACC,OAAOC,UACjB,qBAAA,OAAA,EAEC,WAAWX,QAAQY,YAEnB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWZ,QAAQa,YACtB,8BAAC,QACC,EAAA,OACA,SAAST,aACT,YAAY;AAAA,QACVU,WAAY,4CAA2CJ,KAAM;AAAA,SAC7D,EAEN,CAAA;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWV,QAAQe,kBACtB,UAAA,oBAAC,UACC,EAAA,WAAWf,QAAQgB,cACnB,SAAQ,mBACR,SAAS,MAAMnB,cAAca,OAAOC,KAAK,GACzC,UAAU,GACV,cAAYb,uBAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAI,CAAA,EACpC,CAAA,GACF;AAAA,IAAA,EAAA,GAtBM,eAAcY,KAAM,IAAGC,KAAM,EAuBrC,CACD;AAAA,EACH,EAAA,CAAA;AAEJ;"}