@hitachivantara/uikit-react-core 5.6.0 → 5.7.1

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

@@ -0,0 +1,81 @@
+import { ClassNames } from "@emotion/react";
+import { useCallback } from "react";
+import { Saturation, Hue } from "react-color/lib/components/common";
+import { CustomPicker } from "react-color";
+import { styles } from "./Picker.styles.js";
+import colorPickerPickerClasses from "./pickerClasses.js";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { Fields } from "../Fields/Fields.js";
+import { useTheme } from "../../../hooks/useTheme.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const Picker = ({
+  onChange,
+  rgb,
+  hsl,
+  hsv,
+  hex,
+  title,
+  classes
+}) => {
+  const {
+    activeTheme
+  } = useTheme();
+  const SaturationPointer = useCallback(() => /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsx("div", {
+      className: cx(colorPickerPickerClasses.saturationPointer, css(styles.saturationPointer), classes == null ? void 0 : classes.saturationPointer)
+    })
+  }), []);
+  const HueSlider = useCallback(() => /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsx("div", {
+      className: cx(colorPickerPickerClasses.hueSlider, css(styles.hueSlider), classes == null ? void 0 : classes.hueSlider)
+    })
+  }), []);
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxs(Fragment, {
+      children: [title && /* @__PURE__ */ jsx(HvTypography, {
+        className: cx(colorPickerPickerClasses.title, css(styles.title), classes == null ? void 0 : classes.title),
+        variant: "caption1",
+        children: title
+      }), /* @__PURE__ */ jsxs("div", {
+        className: cx(colorPickerPickerClasses.pickers, css(styles.pickers), classes == null ? void 0 : classes.pickers),
+        children: [/* @__PURE__ */ jsx("div", {
+          className: cx(colorPickerPickerClasses.saturation, css(styles.saturation), classes == null ? void 0 : classes.saturation),
+          children: /* @__PURE__ */ jsx(Saturation, {
+            hsl,
+            hsv,
+            onChange,
+            pointer: SaturationPointer
+          })
+        }), /* @__PURE__ */ jsx("div", {
+          className: cx(colorPickerPickerClasses.hue, css(styles.hue), classes == null ? void 0 : classes.hue),
+          children: /* @__PURE__ */ jsx(Hue, {
+            direction: activeTheme == null ? void 0 : activeTheme.colorPicker.hueDirection,
+            hsl,
+            onChange,
+            pointer: HueSlider
+          })
+        })]
+      }), /* @__PURE__ */ jsx(Fields, {
+        className: cx(colorPickerPickerClasses.fields, classes == null ? void 0 : classes.fields),
+        rgb,
+        hex,
+        onChange
+      })]
+    })
+  });
+};
+const Picker$1 = CustomPicker(Picker);
+export {
+  Picker,
+  Picker$1 as default
+};
+//# sourceMappingURL=Picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useCallback } from \"react\";\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { styles } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\nimport { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport colorPickerPickerClasses, {\n  HvColorPickerPickerClasses,\n} from \"./pickerClasses\";\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes,\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\n  const SaturationPointer = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.saturationPointer,\n              css(styles.saturationPointer),\n              classes?.saturationPointer\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  const HueSlider = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.hueSlider,\n              css(styles.hueSlider),\n              classes?.hueSlider\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPickerClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPickerClasses.pickers,\n              css(styles.pickers),\n              classes?.pickers\n            )}\n          >\n            <div\n              className={cx(\n                colorPickerPickerClasses.saturation,\n                css(styles.saturation),\n                classes?.saturation\n              )}\n            >\n              <Saturation\n                hsl={hsl}\n                hsv={hsv}\n                onChange={onChange}\n                pointer={SaturationPointer}\n              />\n            </div>\n            <div\n              className={cx(\n                colorPickerPickerClasses.hue,\n                css(styles.hue),\n                classes?.hue\n              )}\n            >\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={cx(colorPickerPickerClasses.fields, classes?.fields)}\n            rgb={rgb}\n            hex={hex}\n            onChange={onChange}\n          />\n        </>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","activeTheme","useTheme","SaturationPointer","useCallback","_jsx","ClassNames","children","css","cx","className","colorPickerPickerClasses","saturationPointer","styles","HueSlider","hueSlider","_Fragment","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;AAkBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAYF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU;AAElC,QAAMC,oBAAoBC,YACxB,MACEC,oBAACC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,yBAAyBC,mBACzBJ,IAAIK,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBAAiB;AAAA,IAAA,CAC1B;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,QAAME,YAAYV,YAChB,MACEC,oBAACC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,yBAAyBI,WACzBP,IAAIK,OAAOE,SAAS,GACpBf,mCAASe,SAAS;AAAA,IAAA,CAClB;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,6BACGT,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACPO,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,oBAACY,cAAY;AAAA,QACXP,WAAWD,GACTE,yBAAyBZ,OACzBS,IAAIK,OAAOd,KAAK,GAChBC,mCAASD,KAAK;AAAA,QAEhBmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CAAK,GAGVoB,qBAAA,OAAA;AAAA,QACET,WAAWD,GACTE,yBAAyBS,SACzBZ,IAAIK,OAAOO,OAAO,GAClBpB,mCAASoB,OAAO;AAAA,QAChBb,WAEFF,oBAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,yBAAyBU,YACzBb,IAAIK,OAAOQ,UAAU,GACrBrB,mCAASqB,UAAU;AAAA,UACnBd,8BAEDe,YAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CAAkB;AAAA,QAAA,CAC3B,GAEJE,oBAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,yBAAyBa,KACzBhB,IAAIK,OAAOW,GAAG,GACdxB,mCAASwB,GAAG;AAAA,UACZjB,8BAEDkB,KAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CAAU;AAAA,QAAA,CAEjB,CAAA;AAAA,MAAA,CACF,GACNT,oBAACwB,QAAM;AAAA,QACLnB,WAAWD,GAAGE,yBAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;AAEA,MAAeqC,WAAAA,aAAatC,MAAM;"}

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

@@ -0,0 +1,59 @@
+import { theme } from "@hitachivantara/uikit-styles";
+const styles = {
+  pickers: {
+    display: "flex",
+    flexDirection: theme.colorPicker.pickersFlexDirection
+  },
+  saturation: {
+    width: theme.colorPicker.saturationWidth,
+    height: theme.colorPicker.saturationHeight,
+    marginRight: theme.colorPicker.saturationMarginRight,
+    position: "relative",
+    overflow: "visible",
+    "& > div": {
+      borderRadius: theme.colorPicker.saturationBorderRadius,
+      "& .saturation-white": {
+        borderRadius: theme.colorPicker.saturationBorderRadius,
+        "& .saturation-black": {
+          borderRadius: theme.colorPicker.saturationBorderRadius
+        }
+      }
+    }
+  },
+  saturationPointer: {
+    width: theme.colorPicker.saturationPointerWidth,
+    height: theme.colorPicker.saturationPointerHeight,
+    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,
+    position: "relative",
+    overflow: "visible",
+    marginTop: theme.colorPicker.hueMarginTop,
+    "& .hue-horizontal": {
+      borderRadius: theme.colorPicker.hueBorderRadius
+    }
+  },
+  hueSlider: {
+    width: theme.colorPicker.hueSliderWidth,
+    height: theme.colorPicker.hueSliderHeight,
+    background: theme.colorPicker.hueSliderBackground,
+    boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
+    marginLeft: theme.colorPicker.hueSliderMarginLeft,
+    border: theme.colorPicker.hueSliderBorder,
+    borderRadius: theme.colorPicker.hueSliderBorderRadius,
+    transform: "translate(0, -2px)"
+  },
+  title: {
+    fontWeight: theme.fontWeights.semibold,
+    marginBottom: 8
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=Picker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.styles.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { HvColorPickerPickerClasses } from \"./pickerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerPickerClasses, CSSInterpolation>\n> = {\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};\n"],"names":["styles","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"],"mappings":";AAKO,MAAMA,SAET;AAAA,EACFC,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;AACF;"}

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

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["hue", "hueSlider", "pickers", "saturation", "saturationPointer", "title", "fields"];
+const colorPickerPickerClasses = getClasses(classKeys, "HvColorPicker-Picker");
+const colorPickerPickerClasses$1 = colorPickerPickerClasses;
+export {
+  colorPickerPickerClasses$1 as default
+};
+//# sourceMappingURL=pickerClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pickerClasses.js","sources":["../../../../../src/components/ColorPicker/Picker/pickerClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerPickerClasses {\n  pickers?: string;\n  saturation?: string;\n  saturationPointer?: string;\n  hue?: string;\n  hueSlider?: string;\n  title?: string;\n  fields?: string;\n}\n\nconst classKeys: (keyof HvColorPickerPickerClasses)[] = [\n  \"hue\",\n  \"hueSlider\",\n  \"pickers\",\n  \"saturation\",\n  \"saturationPointer\",\n  \"title\",\n  \"fields\",\n];\n\nconst colorPickerPickerClasses = getClasses(classKeys, \"HvColorPicker-Picker\");\n\nexport default colorPickerPickerClasses;\n"],"names":["classKeys","colorPickerPickerClasses","getClasses"],"mappings":";AAYA,MAAMA,YAAkD,CACtD,OACA,aACA,WACA,cACA,qBACA,SACA,QAAQ;AAGV,MAAMC,2BAA2BC,WAAWF,WAAW,sBAAsB;AAE7E,MAAA,6BAAeC;"}

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

@@ -0,0 +1,51 @@
+import { ClassNames } from "@emotion/react";
+import { styles } from "./PresetColors.styles.js";
+import colorPickerPresetColorsClasses from "./presetColorsClasses.js";
+import { Swatch } from "react-color/lib/components/common";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../../Typography/Typography.js";
+const PresetColors = ({
+  onClick,
+  colors,
+  title,
+  className,
+  classes
+}) => {
+  const handleClick = (hex) => {
+    onClick({
+      hex,
+      source: "hex"
+    });
+  };
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxs("div", {
+      className: cx(colorPickerPresetColorsClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
+      children: [title && /* @__PURE__ */ jsx(HvTypography, {
+        className: cx(colorPickerPresetColorsClasses.title, css(styles.title), classes == null ? void 0 : classes.title),
+        variant: "caption1",
+        children: title
+      }), /* @__PURE__ */ jsx("div", {
+        className: cx(colorPickerPresetColorsClasses.colors, css(styles.colors), classes == null ? void 0 : classes.colors),
+        children: colors.map((color, index) => {
+          return /* @__PURE__ */ jsx("div", {
+            className: cx(colorPickerPresetColorsClasses.swatchWrap, css(styles.swatchWrap), classes == null ? void 0 : classes.swatchWrap),
+            children: /* @__PURE__ */ jsx(Swatch, {
+              color,
+              onClick: handleClick,
+              focusStyle: {
+                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
+              }
+            })
+          }, `recommended-color-${color}-${index}`);
+        })
+      })]
+    })
+  });
+};
+export {
+  PresetColors
+};
+//# sourceMappingURL=PresetColors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./PresetColors.styles\";\nimport { HvTypography } from \"@core/components\";\nimport colorPickerPresetColorsClasses, {\n  HvColorPickerPresetColorsClasses,\n} from \"./presetColorsClasses\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\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,\n}: PresetColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerPresetColorsClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPresetColorsClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPresetColorsClasses.colors,\n              css(styles.colors),\n              classes?.colors\n            )}\n          >\n            {colors.map((color, index) => {\n              return (\n                <div\n                  key={`recommended-color-${color}-${index}`}\n                  className={cx(\n                    colorPickerPresetColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\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            })}\n          </div>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","handleClick","hex","source","ClassNames","children","css","cx","colorPickerPresetColorsClasses","root","styles","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;AAmBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACP,OAAA;AAAA,MACER,WAAWQ,GACTC,+BAA+BC,MAC/BH,IAAII,OAAOD,IAAI,GACfV,WACAC,mCAASS,IAAI;AAAA,MACbJ,UAEDP,CAAAA,SACCa,oBAACC,cAAY;AAAA,QACXb,WAAWQ,GACTC,+BAA+BV,OAC/BQ,IAAII,OAAOZ,KAAK,GAChBE,mCAASF,KAAK;AAAA,QAEhBe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CAAK,GAGVa,oBAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,+BAA+BX,QAC/BS,IAAII,OAAOb,MAAM,GACjBG,mCAASH,MAAM;AAAA,QACfQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,qCACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,+BAA+BS,YAC/BX,IAAII,OAAOO,UAAU,GACrBjB,mCAASiB,UAAU;AAAA,YACnBZ,8BAEDa,QAAM;AAAA,cACLH;AAAAA,cACAnB,SAASK;AAAAA,cACTkB,YAAY;AAAA,gBACVC,WAAY,4CAA2CL;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,GAZE,qBAAoBA,SAASC,OAAO;AAAA,QAAA,CAgB/C;AAAA,MAAA,CACG,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGC;AAEjB;"}

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

@@ -0,0 +1,30 @@
+import { theme } from "@hitachivantara/uikit-styles";
+const styles = {
+  root: {
+    width: theme.colorPicker.recommendedColorsRootWidth
+  },
+  colors: {
+    display: "flex",
+    flexWrap: "wrap",
+    position: "relative",
+    width: theme.colorPicker.recommendedColorsWidth,
+    margin: theme.colorPicker.recommendedColorsMargin,
+    padding: 0
+  },
+  title: {
+    fontWeight: theme.fontWeights.semibold,
+    marginBottom: 8
+  },
+  swatchWrap: {
+    width: theme.colorPicker.recommendedColorsSwatchWidth,
+    height: theme.colorPicker.recommendedColorsSwatchHeight,
+    margin: theme.colorPicker.recommendedColorsSwatchMargin,
+    "& > span > div": {
+      borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius
+    }
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=PresetColors.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.styles.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerPresetColorsClasses } from \"./presetColorsClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerPresetColorsClasses, CSSInterpolation>\n> = {\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":["styles","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":";AAIO,MAAMA,SAET;AAAA,EACFC,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;"}

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

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["colors", "root", "swatchWrap", "title"];
+const colorPickerPresetColorsClasses = getClasses(classKeys, "HvColorPicker-PresetColors");
+const colorPickerPresetColorsClasses$1 = colorPickerPresetColorsClasses;
+export {
+  colorPickerPresetColorsClasses$1 as default
+};
+//# sourceMappingURL=presetColorsClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presetColorsClasses.js","sources":["../../../../../src/components/ColorPicker/PresetColors/presetColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerPresetColorsClasses {\n  root?: string;\n  colors?: string;\n  title?: string;\n  swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerPresetColorsClasses)[] = [\n  \"colors\",\n  \"root\",\n  \"swatchWrap\",\n  \"title\",\n];\n\nconst colorPickerPresetColorsClasses = getClasses(\n  classKeys,\n  \"HvColorPicker-PresetColors\"\n);\n\nexport default colorPickerPresetColorsClasses;\n"],"names":["classKeys","colorPickerPresetColorsClasses","getClasses"],"mappings":";AASA,MAAMA,YAAwD,CAC5D,UACA,QACA,cACA,OAAO;AAGT,MAAMC,iCAAiCC,WACrCF,WACA,4BAA4B;AAG9B,MAAA,mCAAeC;"}

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

@@ -0,0 +1,67 @@
+import { ClassNames } from "@emotion/react";
+import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
+import { styles } from "./SavedColors.styles.js";
+import { Swatch } from "react-color/lib/components/common";
+import colorPickerSavedColorsClasses from "./savedColorsClasses.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvButton } from "../../Button/Button.js";
+const SavedColors = ({
+  colors,
+  onClickColor,
+  onAddColor,
+  onRemoveColor,
+  deleteButtonArialLabel,
+  classes
+}) => {
+  const handleClick = (hex) => {
+    onClickColor({
+      hex,
+      source: "hex"
+    });
+  };
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxs("div", {
+      className: cx(colorPickerSavedColorsClasses.root, css(styles.root), classes == null ? void 0 : classes.root),
+      children: [/* @__PURE__ */ jsx(HvButton, {
+        className: cx(colorPickerSavedColorsClasses.addButton, css(styles.addButton), classes == null ? void 0 : classes.addButton),
+        variant: "secondarySubtle",
+        icon: true,
+        onClick: onAddColor,
+        children: /* @__PURE__ */ jsx(Add, {})
+      }), colors.map((color, index) => {
+        return /* @__PURE__ */ jsxs("div", {
+          className: cx(colorPickerSavedColorsClasses.swatchRoot, css(styles.swatchRoot), classes == null ? void 0 : classes.swatchRoot),
+          children: [/* @__PURE__ */ jsx("div", {
+            className: cx(colorPickerSavedColorsClasses.swatchWrap, css(styles.swatchWrap), classes == null ? void 0 : classes.swatchWrap),
+            children: /* @__PURE__ */ jsx(Swatch, {
+              color,
+              onClick: handleClick,
+              focusStyle: {
+                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
+              }
+            })
+          }), /* @__PURE__ */ jsx("div", {
+            className: cx(colorPickerSavedColorsClasses.removeButtonRoot, css(styles.removeButtonRoot), classes == null ? void 0 : classes.removeButtonRoot),
+            children: /* @__PURE__ */ jsx(HvButton, {
+              className: cx(colorPickerSavedColorsClasses.removeButton, css(styles.removeButton), classes == null ? void 0 : classes.removeButton),
+              variant: "secondarySubtle",
+              onClick: () => onRemoveColor(color, index),
+              tabIndex: 0,
+              "aria-label": deleteButtonArialLabel,
+              children: /* @__PURE__ */ jsx(CloseXS, {
+                iconSize: "XS"
+              })
+            })
+          })]
+        }, `saved-color-${color}-${index}`);
+      })]
+    })
+  });
+};
+export {
+  SavedColors
+};
+//# sourceMappingURL=SavedColors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvButton } from \"@core/components\";\nimport { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./SavedColors.styles\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport colorPickerSavedColorsClasses, {\n  HvColorPickerSavedColorsClasses,\n} from \"./savedColorsClasses\";\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  deleteButtonArialLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonArialLabel,\n  classes,\n}: SavedColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerSavedColorsClasses.root,\n            css(styles.root),\n            classes?.root\n          )}\n        >\n          <HvButton\n            className={cx(\n              colorPickerSavedColorsClasses.addButton,\n              css(styles.addButton),\n              classes?.addButton\n            )}\n            variant=\"secondarySubtle\"\n            icon\n            onClick={onAddColor}\n          >\n            <Add />\n          </HvButton>\n          {colors.map((color, index) => {\n            return (\n              <div\n                key={`saved-color-${color}-${index}`}\n                className={cx(\n                  colorPickerSavedColorsClasses.swatchRoot,\n                  css(styles.swatchRoot),\n                  classes?.swatchRoot\n                )}\n              >\n                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\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                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.removeButtonRoot,\n                    css(styles.removeButtonRoot),\n                    classes?.removeButtonRoot\n                  )}\n                >\n                  <HvButton\n                    className={cx(\n                      colorPickerSavedColorsClasses.removeButton,\n                      css(styles.removeButton),\n                      classes?.removeButton\n                    )}\n                    variant=\"secondarySubtle\"\n                    onClick={() => onRemoveColor(color, index)}\n                    tabIndex={0}\n                    aria-label={deleteButtonArialLabel}\n                  >\n                    <CloseXS iconSize=\"XS\" />\n                  </HvButton>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonArialLabel","classes","handleClick","hex","source","ClassNames","children","css","cx","className","colorPickerSavedColorsClasses","root","styles","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;AAqBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChBC,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,8BAA8BC,MAC9BJ,IAAIK,OAAOD,IAAI,GACfV,mCAASU,IAAI;AAAA,MACbL,UAAA,CAEFO,oBAACC,UAAQ;AAAA,QACPL,WAAWD,GACTE,8BAA8BK,WAC9BR,IAAIK,OAAOG,SAAS,GACpBd,mCAASc,SAAS;AAAA,QAEpBC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,oBAACM,KAAG,EAAA;AAAA,MACK,CAAA,GACVvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,oCACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,8BAA8Ba,YAC9BhB,IAAIK,OAAOW,UAAU,GACrBtB,mCAASsB,UAAU;AAAA,UACnBjB,WAEFO,oBAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,8BAA8Bc,YAC9BjB,IAAIK,OAAOY,UAAU,GACrBvB,mCAASuB,UAAU;AAAA,YACnBlB,8BAEDmB,QAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,CACF,GAEJR,oBAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,8BAA8BkB,kBAC9BrB,IAAIK,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBAAgB;AAAA,YACzBtB,8BAEDQ,UAAQ;AAAA,cACPL,WAAWD,GACTE,8BAA8BmB,cAC9BtB,IAAIK,OAAOiB,YAAY,GACvB5B,mCAAS4B,YAAY;AAAA,cAEvBb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,8BAElCyB,SAAO;AAAA,gBAACC,UAAS;AAAA,cAAA,CAAI;AAAA,YAAA,CAAG;AAAA,UAAA,CAEvB,CAAA;AAAA,QAAA,GA1CA,eAAcX,SAASC,OAAO;AAAA,MAAA,CA6CzC,CAAC;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;"}

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

@@ -0,0 +1,60 @@
+import { theme } from "@hitachivantara/uikit-styles";
+const styles = {
+  addButton: {
+    margin: theme.colorPicker.addSavedColorButtonMargin,
+    width: theme.colorPicker.addSavedColorButtonWidth,
+    height: theme.colorPicker.addSavedColorButtonHeight
+  },
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    position: "relative",
+    alignItems: "center",
+    padding: 0,
+    width: theme.colorPicker.savedColorsWidth,
+    margin: theme.colorPicker.savedColorsMargin
+  },
+  swatchRoot: {
+    position: "relative"
+  },
+  swatchWrap: {
+    width: theme.colorPicker.savedColorsSwatchWidth,
+    height: theme.colorPicker.savedColorsSwatchHeight,
+    margin: theme.colorPicker.savedColorsSwatchMargin,
+    "& > span > div": {
+      borderRadius: theme.colorPicker.savedColorsSwatchBorderRadius
+    }
+  },
+  removeButtonRoot: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 16,
+    width: 16,
+    background: theme.colors.atmo1,
+    borderRadius: theme.radii.base
+  },
+  removeButton: {
+    height: 16,
+    width: 16,
+    minWidth: 16,
+    minHeight: 16,
+    padding: 0,
+    margin: 0,
+    "& div > span": {
+      height: 16,
+      width: 16,
+      "& > div": {
+        height: 16,
+        width: 16
+      }
+    }
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=SavedColors.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SavedColors.styles.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerSavedColorsClasses } from \"./savedColorsClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerSavedColorsClasses, CSSInterpolation>\n> = {\n  addButton: {\n    margin: theme.colorPicker.addSavedColorButtonMargin,\n    width: theme.colorPicker.addSavedColorButtonWidth,\n    height: theme.colorPicker.addSavedColorButtonHeight,\n  },\n  root: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    alignItems: \"center\",\n    padding: 0,\n    width: theme.colorPicker.savedColorsWidth,\n    margin: theme.colorPicker.savedColorsMargin,\n  },\n  swatchRoot: { position: \"relative\" },\n  swatchWrap: {\n    width: theme.colorPicker.savedColorsSwatchWidth,\n    height: theme.colorPicker.savedColorsSwatchHeight,\n    margin: theme.colorPicker.savedColorsSwatchMargin,\n\n    \"& > span > div\": {\n      borderRadius: theme.colorPicker.savedColorsSwatchBorderRadius,\n    },\n  },\n  removeButtonRoot: {\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 16,\n    width: 16,\n    background: theme.colors.atmo1,\n    borderRadius: theme.radii.base,\n  },\n  removeButton: {\n    height: 16,\n    width: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n\n    \"& div > span\": {\n      height: 16,\n      width: 16,\n\n      \"& > div\": { height: 16, width: 16 },\n    },\n  },\n};\n"],"names":["styles","addButton","margin","theme","colorPicker","addSavedColorButtonMargin","width","addSavedColorButtonWidth","height","addSavedColorButtonHeight","root","display","flexWrap","position","alignItems","padding","savedColorsWidth","savedColorsMargin","swatchRoot","swatchWrap","savedColorsSwatchWidth","savedColorsSwatchHeight","savedColorsSwatchMargin","borderRadius","savedColorsSwatchBorderRadius","removeButtonRoot","top","right","justifyContent","background","colors","atmo1","radii","base","removeButton","minWidth","minHeight"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,WAAW;AAAA,IACTC,QAAQC,MAAMC,YAAYC;AAAAA,IAC1BC,OAAOH,MAAMC,YAAYG;AAAAA,IACzBC,QAAQL,MAAMC,YAAYK;AAAAA,EAC5B;AAAA,EACAC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,SAAS;AAAA,IACTT,OAAOH,MAAMC,YAAYY;AAAAA,IACzBd,QAAQC,MAAMC,YAAYa;AAAAA,EAC5B;AAAA,EACAC,YAAY;AAAA,IAAEL,UAAU;AAAA,EAAW;AAAA,EACnCM,YAAY;AAAA,IACVb,OAAOH,MAAMC,YAAYgB;AAAAA,IACzBZ,QAAQL,MAAMC,YAAYiB;AAAAA,IAC1BnB,QAAQC,MAAMC,YAAYkB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcpB,MAAMC,YAAYoB;AAAAA,IAClC;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBZ,UAAU;AAAA,IACVa,KAAK;AAAA,IACLC,OAAO;AAAA,IACPhB,SAAS;AAAA,IACTiB,gBAAgB;AAAA,IAChBd,YAAY;AAAA,IACZN,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPuB,YAAY1B,MAAM2B,OAAOC;AAAAA,IACzBR,cAAcpB,MAAM6B,MAAMC;AAAAA,EAC5B;AAAA,EACAC,cAAc;AAAA,IACZ1B,QAAQ;AAAA,IACRF,OAAO;AAAA,IACP6B,UAAU;AAAA,IACVC,WAAW;AAAA,IACXrB,SAAS;AAAA,IACTb,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACdM,QAAQ;AAAA,MACRF,OAAO;AAAA,MAEP,WAAW;AAAA,QAAEE,QAAQ;AAAA,QAAIF,OAAO;AAAA,MAAG;AAAA,IACrC;AAAA,EACF;AACF;"}

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

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["addButton", "removeButton", "removeButtonRoot", "root", "swatchRoot", "swatchWrap"];
+const colorPickerSavedColorsClasses = getClasses(classKeys, "HvColorPicker-SavedColors");
+const colorPickerSavedColorsClasses$1 = colorPickerSavedColorsClasses;
+export {
+  colorPickerSavedColorsClasses$1 as default
+};
+//# sourceMappingURL=savedColorsClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"savedColorsClasses.js","sources":["../../../../../src/components/ColorPicker/SavedColors/savedColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerSavedColorsClasses {\n  root?: string;\n  addButton?: string;\n  removeButton?: string;\n  swatchRoot?: string;\n  removeButtonRoot?: string;\n  swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerSavedColorsClasses)[] = [\n  \"addButton\",\n  \"removeButton\",\n  \"removeButtonRoot\",\n  \"root\",\n  \"swatchRoot\",\n  \"swatchWrap\",\n];\n\nconst colorPickerSavedColorsClasses = getClasses(\n  classKeys,\n  \"HvColorPicker-SavedColors\"\n);\n\nexport default colorPickerSavedColorsClasses;\n"],"names":["classKeys","colorPickerSavedColorsClasses","getClasses"],"mappings":";AAWA,MAAMA,YAAuD,CAC3D,aACA,gBACA,oBACA,QACA,cACA,YAAY;AAGd,MAAMC,gCAAgCC,WACpCF,WACA,2BAA2B;AAG7B,MAAA,kCAAeC;"}

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

@@ -0,0 +1,8 @@
+import { getClasses } from "../../utils/classes.js";
+const classKeys = ["root", "labelContainer", "label", "description", "headerColorIcon", "headerColorValue", "panel", "colorPicker", "colorPickerIcon", "dropdownRootIconOnly", "headerColorIconOnly", "recommendedColorsRoot", "pickerFields"];
+const colorPickerClasses = getClasses(classKeys, "HvColorPicker");
+const colorPickerClasses$1 = colorPickerClasses;
+export {
+  colorPickerClasses$1 as default
+};
+//# sourceMappingURL=colorPickerClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorPickerClasses.js","sources":["../../../../src/components/ColorPicker/colorPickerClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerClasses {\n  root?: string;\n  labelContainer?: string;\n  label?: string;\n  description?: string;\n  headerColorIcon?: string;\n  headerColorValue?: string;\n  panel?: string;\n  colorPicker?: string;\n  colorPickerIcon?: string;\n  dropdownRootIconOnly?: string;\n  headerColorIconOnly?: string;\n  recommendedColorsRoot?: string;\n  pickerFields?: string;\n}\n\nconst classKeys: (keyof HvColorPickerClasses)[] = [\n  \"root\",\n  \"labelContainer\",\n  \"label\",\n  \"description\",\n  \"headerColorIcon\",\n  \"headerColorValue\",\n  \"panel\",\n  \"colorPicker\",\n  \"colorPickerIcon\",\n  \"dropdownRootIconOnly\",\n  \"headerColorIconOnly\",\n  \"recommendedColorsRoot\",\n  \"pickerFields\",\n];\n\nconst colorPickerClasses = getClasses(classKeys, \"HvColorPicker\");\n\nexport default colorPickerClasses;\n"],"names":["classKeys","colorPickerClasses","getClasses"],"mappings":";AAkBA,MAAMA,YAA4C,CAChD,QACA,kBACA,SACA,eACA,mBACA,oBACA,SACA,eACA,mBACA,wBACA,uBACA,yBACA,cAAc;AAGhB,MAAMC,qBAAqBC,WAAWF,WAAW,eAAe;AAEhE,MAAA,uBAAeC;"}