@hitachivantara/uikit-react-core 5.17.0 → 5.18.0

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

@@ -1,8 +1,7 @@
-import { ClassNames } from "@emotion/react";
 import { Checkbox, ColorPicker } from "@hitachivantara/uikit-react-icons";
-import { styles } from "./ColorPicker.styles.js";
-import colorPickerClasses from "./colorPickerClasses.js";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./ColorPicker.styles.js";
+import { staticClasses } from "./ColorPicker.styles.js";
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../hooks/useUniqueId.js";
 import { PresetColors } from "./PresetColors/PresetColors.js";
 import Picker from "./Picker/Picker.js";
@@ -32,7 +31,7 @@ const HvColorPicker = ({
   description,
   "aria-describedby": ariaDescribedBy,
   className,
-  classes,
+  classes: classesProp,
   value,
   onChange,
   defaultValue = "",
@@ -53,6 +52,11 @@ const HvColorPicker = ({
   onSavedColorRemoved,
   deleteSavedColorButtonArialLabel = "Delete saved color"
 }) => {
+  const {
+    classes,
+    css,
+    cx
+  } = useClasses(classesProp);
   const {
     activeTheme
   } = useTheme();
@@ -89,94 +93,94 @@ const HvColorPicker = ({
       inputs[0].focus();
     }
   };
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxs(HvFormElement, {
-      id,
-      name,
-      disabled,
-      required,
-      className: cx(colorPickerClasses.root, className, classes == null ? void 0 : classes.root),
-      children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
-        className: cx(colorPickerClasses.labelContainer, css(styles.labelContainer), classes == null ? void 0 : classes.labelContainer),
-        children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
-          id: setId(elementId, "label"),
-          label,
-          className: cx(colorPickerClasses.label, css(styles.label), classes == null ? void 0 : classes.label)
-        }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
-          id: setId(elementId, "description"),
-          className: cx(colorPickerClasses.description, classes == null ? void 0 : classes.description),
-          children: description
-        })]
-      }), /* @__PURE__ */ jsx(HvBaseDropdown, {
-        variableWidth: true,
-        className,
-        expanded: isOpen,
-        onToggle: handleToggle,
-        onContainerCreation: setFocusToContent,
-        classes: {
-          root: iconOnly ? cx(colorPickerClasses.dropdownRootIconOnly, css(styles.dropdownRootIconOnly), classes == null ? void 0 : classes.dropdownRootIconOnly) : void 0,
-          selection: cx(iconOnly && css({
-            padding: 0
-          }))
-        },
-        adornment: iconOnly && color ? /* @__PURE__ */ jsx(Checkbox, {
-          className: cx(colorPickerClasses.headerColorIconOnly, css(styles.headerColorIconOnly), classes == null ? void 0 : classes.headerColorIconOnly),
+  return /* @__PURE__ */ jsxs(HvFormElement, {
+    id,
+    name,
+    disabled,
+    required,
+    className: cx(className, classes.root),
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
+        id: setId(elementId, "label"),
+        label,
+        className: classes.label
+      }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
+        id: setId(elementId, "description"),
+        className: classes.description,
+        children: description
+      })]
+    }), /* @__PURE__ */ jsx(HvBaseDropdown, {
+      variableWidth: true,
+      className,
+      expanded: isOpen,
+      onToggle: handleToggle,
+      onContainerCreation: setFocusToContent,
+      classes: {
+        root: cx({
+          [classes.dropdownRootIconOnly]: iconOnly
+        }),
+        selection: cx(iconOnly && css({
+          padding: 0
+        }))
+      },
+      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"]
-        }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, {
-          className: cx(colorPickerClasses.colorPickerIcon, css(styles.colorPickerIcon), classes == null ? void 0 : classes.colorPickerIcon)
-        }) : void 0,
-        placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(Checkbox, {
-            className: cx(colorPickerClasses.headerColorIcon, css(styles.headerColorIcon), classes == null ? void 0 : classes.headerColorIcon),
-            color: [color, "transparent"]
-          }), /* @__PURE__ */ jsx(HvTypography, {
-            className: cx(colorPickerClasses.headerColorValue, css(styles.headerColorValue), classes == null ? void 0 : classes.headerColorValue),
-            variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant,
-            children: color
+        }), /* @__PURE__ */ jsx(HvTypography, {
+          className: classes.headerColorValue,
+          variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant,
+          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
+          }), showCustomColors && /* @__PURE__ */ jsx(Picker, {
+            classes: {
+              fields: cx({
+                [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
+              })
+            },
+            title: showLabels ? labels == null ? void 0 : labels.customColorsLabel : void 0,
+            color,
+            onChange: handleSelect
+          }), showSavedColors && /* @__PURE__ */ jsx(SavedColors, {
+            colors: savedColors,
+            onAddColor: handleAddColor,
+            onClickColor: handleSelect,
+            onRemoveColor: handleRemoveColor,
+            deleteButtonArialLabel: deleteSavedColorButtonArialLabel
+          }), recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(PresetColors, {
+            colors: recommendedColors,
+            onClick: handleSelect,
+            title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0
           })]
-        }) : 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: cx(colorPickerClasses.panel, css(styles.panel), classes == null ? void 0 : classes.panel),
-          children: /* @__PURE__ */ jsxs("div", {
-            className: cx(colorPickerClasses.colorPicker, css(styles.colorPicker), classes == null ? void 0 : classes.colorPicker),
-            children: [recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, {
-              className: cx(colorPickerClasses.recommendedColorsRoot, (showCustomColors || showSavedColors) && css({
-                paddingBottom: activeTheme == null ? void 0 : activeTheme.colorPicker.recommendedColorsBottomPadding
-              }), classes == null ? void 0 : classes.recommendedColorsRoot),
-              colors: recommendedColors,
-              onClick: handleSelect,
-              title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0
-            }), showCustomColors && /* @__PURE__ */ jsx(Picker, {
-              classes: {
-                fields: recommendedColorsPosition === "bottom" || showSavedColors ? cx(colorPickerClasses.pickerFields, css(styles.pickerFields), classes == null ? void 0 : classes.pickerFields) : void 0
-              },
-              title: showLabels ? labels == null ? void 0 : labels.customColorsLabel : void 0,
-              color,
-              onChange: handleSelect
-            }), showSavedColors && /* @__PURE__ */ jsx(SavedColors, {
-              colors: savedColors,
-              onAddColor: handleAddColor,
-              onClickColor: handleSelect,
-              onRemoveColor: handleRemoveColor,
-              deleteButtonArialLabel: deleteSavedColorButtonArialLabel
-            }), recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(PresetColors, {
-              colors: recommendedColors,
-              onClick: handleSelect,
-              title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0
-            })]
-          })
         })
-      })]
-    })
+      })
+    })]
   });
 };
 export {
-  HvColorPicker
+  HvColorPicker,
+  staticClasses as colorPickerClasses
 };
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { ColorState } from \"react-color\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\nimport { Picker } from \"./Picker\";\nimport { styles } from \"./ColorPicker.styles\";\nimport colorPickerClasses, { HvColorPickerClasses } from \"./colorPickerClasses\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\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,\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 { 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 = (_, open: boolean) => {\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    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          className={cx(colorPickerClasses.root, className, classes?.root)}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                colorPickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    colorPickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    colorPickerClasses.description,\n                    classes?.description\n                  )}\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: iconOnly\n                ? cx(\n                    colorPickerClasses.dropdownRootIconOnly,\n                    css(styles.dropdownRootIconOnly),\n                    classes?.dropdownRootIconOnly\n                  )\n                : undefined,\n              selection: cx(iconOnly && css({ padding: 0 })),\n            }}\n            adornment={\n              iconOnly && color ? (\n                <Checkbox\n                  className={cx(\n                    colorPickerClasses.headerColorIconOnly,\n                    css(styles.headerColorIconOnly),\n                    classes?.headerColorIconOnly\n                  )}\n                  color={[color, \"transparent\"]}\n                />\n              ) : dropdownIcon === \"colorPicker\" ? (\n                <ColorPicker\n                  className={cx(\n                    colorPickerClasses.colorPickerIcon,\n                    css(styles.colorPickerIcon),\n                    classes?.colorPickerIcon\n                  )}\n                />\n              ) : undefined\n            }\n            placeholder={\n              iconOnly ? undefined : color ? (\n                <>\n                  <Checkbox\n                    className={cx(\n                      colorPickerClasses.headerColorIcon,\n                      css(styles.headerColorIcon),\n                      classes?.headerColorIcon\n                    )}\n                    color={[color, \"transparent\"]}\n                  />\n                  <HvTypography\n                    className={cx(\n                      colorPickerClasses.headerColorValue,\n                      css(styles.headerColorValue),\n                      classes?.headerColorValue\n                    )}\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\n              className={cx(\n                colorPickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              )}\n            >\n              <div\n                className={cx(\n                  colorPickerClasses.colorPicker,\n                  css(styles.colorPicker),\n                  classes?.colorPicker\n                )}\n              >\n                {recommendedColorsPosition === \"top\" && (\n                  <PresetColors\n                    className={cx(\n                      colorPickerClasses.recommendedColorsRoot,\n                      (showCustomColors || showSavedColors) &&\n                        css({\n                          paddingBottom:\n                            activeTheme?.colorPicker\n                              .recommendedColorsBottomPadding,\n                        }),\n                      classes?.recommendedColorsRoot\n                    )}\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n                {showCustomColors && (\n                  <Picker\n                    classes={{\n                      fields:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors\n                          ? cx(\n                              colorPickerClasses.pickerFields,\n                              css(styles.pickerFields),\n                              classes?.pickerFields\n                            )\n                          : undefined,\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={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n              </div>\n            </HvPanel>\n          </HvBaseDropdown>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","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","ClassNames","children","css","cx","HvFormElement","colorPickerClasses","root","labelContainer","styles","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","undefined","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","recommendedColorsRoot","paddingBottom","recommendedColorsBottomPadding","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { ColorState } from \"react-color\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, setId } from \"@core/utils\";\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 = (_, open: boolean) => {\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":"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"}

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

@@ -1,5 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvColorPicker", {
+  root: {},
   labelContainer: {
     display: "flex",
     alignItems: "flex-start"
@@ -9,6 +14,7 @@ const styles = {
     display: "block",
     cursor: "pointer"
   },
+  description: {},
   headerColorValue: {
     textTransform: "uppercase"
   },
@@ -29,6 +35,7 @@ const styles = {
     width: theme.colorPicker.colorPickerWidth
   },
   colorPickerIcon: {},
+  recommendedColorsRoot: {},
   dropdownRootIconOnly: {
     width: 32,
     height: 32
@@ -37,8 +44,9 @@ const styles = {
   pickerFields: {
     paddingBottom: 20
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=ColorPicker.styles.js.map

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 { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerClasses } from \"./colorPickerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerClasses, CSSInterpolation>\n> = {\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\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  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n};\n"],"names":["styles","labelContainer","display","alignItems","label","paddingBottom","cursor","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","theme","colorPicker","panelMinWidth","justifyContent","padding","panelPadding","colorPickerWidth","colorPickerIcon","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,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,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,IAC5Bd,SAAS;AAAA,IACTe,gBAAgB;AAAA,IAChBC,SAASJ,MAAMC,YAAYI;AAAAA,EAC7B;AAAA,EACAJ,aAAa;AAAA,IACXL,OAAOI,MAAMC,YAAYK;AAAAA,EAC3B;AAAA,EACAC,iBAAiB,CAAC;AAAA,EAClBC,sBAAsB;AAAA,IACpBZ,OAAO;AAAA,IACPa,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB,CAAC;AAAA,EACtBC,cAAc;AAAA,IAAEpB,eAAe;AAAA,EAAG;AACpC;"}
+{"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\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":";;AAGa,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;"}

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

@@ -1,17 +1,20 @@
-import { ClassNames } from "@emotion/react";
 import { useState, useRef, useEffect } from "react";
 import * as color from "react-color/lib/helpers/color";
-import { styles } from "./Fields.styles.js";
-import colorPickerFieldsClasses from "./fieldsClasses.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./Fields.styles.js";
+import { staticClasses } from "./Fields.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvInput } from "../../Input/Input.js";
 const Fields = ({
   className,
   onChange,
   rgb,
   hex,
-  classes
+  classes: classesProp
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [internalHex, setInternalHex] = useState(hex);
   const [internalRed, setInternalRed] = useState(rgb == null ? void 0 : rgb.r);
   const [internalGreen, setInternalGreen] = useState(rgb == null ? void 0 : rgb.g);
@@ -70,49 +73,45 @@ const Fields = ({
       b: colorPart === "b" ? Number(value) : rgb == null ? void 0 : rgb.b
     }, event);
   };
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxs("div", {
-      className: cx(colorPickerFieldsClasses.fields, css(styles.fields), className, classes == null ? void 0 : classes.fields),
-      children: [/* @__PURE__ */ jsx(HvInput, {
-        inputRef: hexInputRef,
-        className: cx(colorPickerFieldsClasses.double, css(styles.double), classes == null ? void 0 : classes.double),
-        label: "HEX",
-        value: internalHex == null ? void 0 : internalHex.replace("#", ""),
-        onChange: onChangeHex,
-        onBlur: () => setInternalHex(hex),
-        disableClear: true
-      }), /* @__PURE__ */ jsx(HvInput, {
-        inputRef: redInputRef,
-        className: cx(colorPickerFieldsClasses.single, css(styles.single), classes == null ? void 0 : classes.single),
-        label: "R",
-        value: `${internalRed}`,
-        onChange: (event, value) => onChangeRbg(event, value, "r"),
-        onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r),
-        disableClear: true
-      }), /* @__PURE__ */ jsx(HvInput, {
-        inputRef: greenInputRef,
-        className: cx(colorPickerFieldsClasses.single, css(styles.single), classes == null ? void 0 : classes.single),
-        label: "G",
-        value: `${internalGreen}`,
-        onChange: (event, value) => onChangeRbg(event, value, "g"),
-        onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g),
-        disableClear: true
-      }), /* @__PURE__ */ jsx(HvInput, {
-        inputRef: blueInputRef,
-        className: cx(colorPickerFieldsClasses.single, css(styles.single), classes == null ? void 0 : classes.single),
-        label: "B",
-        value: `${internalBlue}`,
-        onChange: (event, value) => onChangeRbg(event, value, "b"),
-        onBlur: () => setInternalBlue(rgb == null ? void 0 : rgb.b),
-        disableClear: true
-      })]
-    })
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(className, classes.fields),
+    children: [/* @__PURE__ */ jsx(HvInput, {
+      inputRef: hexInputRef,
+      className: classes.double,
+      label: "HEX",
+      value: internalHex == null ? void 0 : internalHex.replace("#", ""),
+      onChange: onChangeHex,
+      onBlur: () => setInternalHex(hex),
+      disableClear: true
+    }), /* @__PURE__ */ jsx(HvInput, {
+      inputRef: redInputRef,
+      className: classes.single,
+      label: "R",
+      value: `${internalRed}`,
+      onChange: (event, value) => onChangeRbg(event, value, "r"),
+      onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r),
+      disableClear: true
+    }), /* @__PURE__ */ jsx(HvInput, {
+      inputRef: greenInputRef,
+      className: classes.single,
+      label: "G",
+      value: `${internalGreen}`,
+      onChange: (event, value) => onChangeRbg(event, value, "g"),
+      onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g),
+      disableClear: true
+    }), /* @__PURE__ */ jsx(HvInput, {
+      inputRef: blueInputRef,
+      className: classes.single,
+      label: "B",
+      value: `${internalBlue}`,
+      onChange: (event, value) => onChangeRbg(event, value, "b"),
+      onBlur: () => setInternalBlue(rgb == null ? void 0 : rgb.b),
+      disableClear: true
+    })]
   });
 };
 export {
-  Fields
+  Fields,
+  staticClasses as colorPickerFieldsClasses
 };
 //# sourceMappingURL=Fields.js.map

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 { ClassNames } from \"@emotion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { HvInput } from \"@core/components\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\nimport * as color from \"react-color/lib/helpers/color\";\nimport { styles } from \"./Fields.styles\";\nimport colorPickerFieldsClasses, {\n  HvColorPickerFieldsClasses,\n} from \"./fieldsClasses\";\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,\n}: FieldsProps) => {\n  const [internalHex, setInternalHex] = useState<string | undefined>(hex);\n  const [internalRed, setInternalRed] = useState<number | undefined>(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState<number | undefined>(\n    rgb?.g\n  );\n  const [internalBlue, setInternalBlue] = useState<number | undefined>(rgb?.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\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 = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<HTMLInputElement>,\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    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerFieldsClasses.fields,\n            css(styles.fields),\n            className,\n            classes?.fields\n          )}\n        >\n          <HvInput\n            inputRef={hexInputRef}\n            className={cx(\n              colorPickerFieldsClasses.double,\n              css(styles.double),\n              classes?.double\n            )}\n            label=\"HEX\"\n            value={internalHex?.replace(\"#\", \"\")}\n            onChange={onChangeHex}\n            onBlur={() => setInternalHex(hex)}\n            disableClear\n          />\n          <HvInput\n            inputRef={redInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={greenInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={blueInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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    </ClassNames>\n  );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","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","ClassNames","children","css","cx","colorPickerFieldsClasses","fields","styles","_jsx","HvInput","inputRef","double","label","replace","onBlur","disableClear","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\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\nimport * as color from \"react-color/lib/helpers/color\";\nimport { HvInput } from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\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<string | undefined>(hex);\n  const [internalRed, setInternalRed] = useState<number | undefined>(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState<number | undefined>(\n    rgb?.g\n  );\n  const [internalBlue, setInternalBlue] = useState<number | undefined>(rgb?.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\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 = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<HTMLInputElement>,\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(className, classes.fields)}>\n      <HvInput\n        inputRef={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        inputRef={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        inputRef={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        inputRef={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","children","_jsx","HvInput","inputRef","double","label","replace","onBlur","disableClear","single"],"mappings":";;;;;;AA6BO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACE,MAAM;AACX,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAWF,WAAW;AAC9C,QAAM,CAACG,aAAaC,cAAc,IAAIC,SAA6BP,GAAG;AACtE,QAAM,CAACQ,aAAaC,cAAc,IAAIF,SAA6BR,2BAAKW,CAAC;AACzE,QAAM,CAACC,eAAeC,gBAAgB,IAAIL,SACxCR,2BAAKc,CACP;AACA,QAAM,CAACC,cAAcC,eAAe,IAAIR,SAA6BR,2BAAKiB,CAAC;AAE3E,QAAMC,cAAcC;AACpB,QAAMC,cAAcD;AACpB,QAAME,gBAAgBF;AACtB,QAAMG,eAAeH;AAErBI,YAAU,MAAM;AACVC,QAAAA,SAASC,kBAAkBP,YAAYQ,SAAS;AAClDnB,qBAAeN,GAAG;AAAA,IACpB;AAAA,EAAA,GACC,CAACA,GAAG,CAAC;AAERsB,YAAU,MAAM;AACVC,QAAAA,SAASC,kBAAkBL,YAAYM,SAAS;AAClDhB,qBAAeV,2BAAKW,CAAC;AAAA,IACvB;AAEIa,QAAAA,SAASC,kBAAkBJ,cAAcK,SAAS;AACpDb,uBAAiBb,2BAAKc,CAAC;AAAA,IACzB;AAEIU,QAAAA,SAASC,kBAAkBH,aAAaI,SAAS;AACnDV,sBAAgBhB,2BAAKiB,CAAC;AAAA,IACxB;AAAA,EAAA,GACC,CAACjB,GAAG,CAAC;AAEF2B,QAAAA,eAAeA,CACnBC,MAMAC,UACG;AACH,QAAID,KAAK3B,OAAO6B,MAAMC,WAAWH,KAAK3B,GAAG,GAAG;AAExC,eAAA;AAAA,QACEA,KAAK2B,KAAK3B;AAAAA,QACV+B,QAAQ;AAAA,SAEVH,KACF;AAAA,IAAA,WACSD,KAAKjB,KAAKiB,KAAKd,KAAKc,KAAKX,GAAG;AAEnC,eAAA;AAAA,QACEN,GAAGiB,KAAKjB,MAAKX,2BAAKW;AAAAA,QAClBG,GAAGc,KAAKd,MAAKd,2BAAKc;AAAAA,QAClBG,GAAGW,KAAKX,MAAKjB,2BAAKiB;AAAAA,QAClBe,QAAQ;AAAA,SAEVH,KACF;AAAA,IACF;AAAA,EAAA;AAGII,QAAAA,cAAcA,CAClBJ,OACAK,UACG;AACH3B,mBAAe2B,KAAK;AACP,iBAAA;AAAA,MAAEjC,KAAKiC;AAAAA,OAASL,KAAK;AAAA,EAAA;AAGpC,QAAMM,cAAcA,CAClBN,OACAK,OACAE,cACG;AACH,QAAIA,cAAc;AAAoBC,qBAAAA,OAAOH,KAAK,CAAC;AACnD,QAAIE,cAAc;AAAsBC,uBAAAA,OAAOH,KAAK,CAAC;AACrD,QAAIE,cAAc;AAAqBC,sBAAAA,OAAOH,KAAK,CAAC;AAGlD,iBAAA;AAAA,MACEvB,GAAGyB,cAAc,MAAMC,OAAOH,KAAK,IAAIlC,2BAAKW;AAAAA,MAC5CG,GAAGsB,cAAc,MAAMC,OAAOH,KAAK,IAAIlC,2BAAKc;AAAAA,MAC5CG,GAAGmB,cAAc,MAAMC,OAAOH,KAAK,IAAIlC,2BAAKiB;AAAAA,OAE9CY,KACF;AAAA,EAAA;AAGF,8BACE,OAAA;AAAA,IAAK/B,WAAWM,GAAGN,WAAWI,QAAQoC,MAAM;AAAA,IAAEC,UAAA,CAC5CC,oBAACC,SAAO;AAAA,MACNC,UAAUxB;AAAAA,MACVpB,WAAWI,QAAQyC;AAAAA,MACnBC,OAAM;AAAA,MACNV,OAAO5B,2CAAauC,QAAQ,KAAK;AAAA,MACjC9C,UAAUkC;AAAAA,MACVa,QAAQA,MAAMvC,eAAeN,GAAG;AAAA,MAChC8C,cAAY;AAAA,IAAA,CACb,GACDP,oBAACC,SAAO;AAAA,MACNC,UAAUtB;AAAAA,MACVtB,WAAWI,QAAQ8C;AAAAA,MACnBJ,OAAM;AAAA,MACNV,OAAQ,GAAEzB;AAAAA,MACVV,UAAUA,CAAC8B,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG;AAAA,MACzDY,QAAQA,MAAMpC,eAAeV,2BAAKW,CAAC;AAAA,MACnCoC,cAAY;AAAA,IAAA,CACb,GACDP,oBAACC,SAAO;AAAA,MACNC,UAAUrB;AAAAA,MACVvB,WAAWI,QAAQ8C;AAAAA,MACnBJ,OAAM;AAAA,MACNV,OAAQ,GAAEtB;AAAAA,MACVb,UAAUA,CAAC8B,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG;AAAA,MACzDY,QAAQA,MAAMjC,iBAAiBb,2BAAKc,CAAC;AAAA,MACrCiC,cAAY;AAAA,IAAA,CACb,GACDP,oBAACC,SAAO;AAAA,MACNC,UAAUpB;AAAAA,MACVxB,WAAWI,QAAQ8C;AAAAA,MACnBJ,OAAM;AAAA,MACNV,OAAQ,GAAEnB;AAAAA,MACVhB,UAAUA,CAAC8B,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG;AAAA,MACzDY,QAAQA,MAAM9B,gBAAgBhB,2BAAKiB,CAAC;AAAA,MACpC8B,cAAY;AAAA,IAAA,CACb,CAAC;AAAA,EAAA,CACC;AAET;"}

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

@@ -1,5 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const name = "HvColorPicker-Fields";
+const {
+  staticClasses,
+  useClasses
+} = createClasses(name, {
   fields: {
     width: "100%",
     display: "flex",
@@ -29,8 +34,9 @@ const styles = {
       paddingLeft: 5
     }
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Fields.styles.js.map

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 { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerFieldsClasses } from \"./fieldsClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerFieldsClasses, CSSInterpolation>\n> = {\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":["styles","fields","width","display","paddingTop","theme","colorPicker","fieldsPaddingTop","marginRight","fieldsMarginRight","single","maxWidth","fieldsRgbWidth","paddingLeft","fieldsRgbPaddingLeft","marginLeft","double","fieldsHexWidth","paddingRight","fieldsHexPaddingRight","textTransform"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,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;"}
+{"version":3,"file":"Fields.styles.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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":";;AAGA,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;"}