@hitachivantara/uikit-react-core 5.6.0 → 5.7.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fields.styles.cjs","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,YAAAA,MAAMC,YAAYC;AAAAA,IAC9BC,aAAaH,YAAAA,MAAMC,YAAYG;AAAAA,EACjC;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAUN,YAAAA,MAAMC,YAAYM;AAAAA,IAC5BC,aAAaR,YAAAA,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,YAAAA,MAAMC,YAAYW;AAAAA,IAC5BC,cAAcb,YAAAA,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;;"}

package/dist/cjs/components/ColorPicker/Fields/fieldsClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../../utils/classes.cjs");
+const classKeys = ["double", "fields", "single"];
+const colorPickerFieldsClasses = classes.getClasses(classKeys, "HvColorPicker-Fields");
+const colorPickerFieldsClasses$1 = colorPickerFieldsClasses;
+exports.default = colorPickerFieldsClasses$1;
+//# sourceMappingURL=fieldsClasses.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldsClasses.cjs","sources":["../../../../../src/components/ColorPicker/Fields/fieldsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerFieldsClasses {\n  fields?: string;\n  double?: string;\n  single?: string;\n}\n\nconst classKeys: (keyof HvColorPickerFieldsClasses)[] = [\n  \"double\",\n  \"fields\",\n  \"single\",\n];\n\nconst colorPickerFieldsClasses = getClasses(classKeys, \"HvColorPicker-Fields\");\n\nexport default colorPickerFieldsClasses;\n"],"names":["classKeys","colorPickerFieldsClasses","getClasses"],"mappings":";;;AAQA,MAAMA,YAAkD,CACtD,UACA,UACA,QAAQ;AAGV,MAAMC,2BAA2BC,QAAWF,WAAAA,WAAW,sBAAsB;AAE7E,MAAA,6BAAeC;;"}

package/dist/cjs/components/ColorPicker/Picker/Picker.cjs

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("@emotion/react");
+const React = require("react");
+const common = require("react-color/lib/components/common");
+const reactColor = require("react-color");
+const Picker_styles = require("./Picker.styles.cjs");
+const pickerClasses = require("./pickerClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Fields = require("../Fields/Fields.cjs");
+const useTheme = require("../../../hooks/useTheme.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const Picker = ({
+  onChange,
+  rgb,
+  hsl,
+  hsv,
+  hex,
+  title,
+  classes
+}) => {
+  const {
+    activeTheme
+  } = useTheme.useTheme();
+  const SaturationPointer = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: cx(pickerClasses.default.saturationPointer, css(Picker_styles.styles.saturationPointer), classes == null ? void 0 : classes.saturationPointer)
+    })
+  }), []);
+  const HueSlider = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: cx(pickerClasses.default.hueSlider, css(Picker_styles.styles.hueSlider), classes == null ? void 0 : classes.hueSlider)
+    })
+  }), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+        className: cx(pickerClasses.default.title, css(Picker_styles.styles.title), classes == null ? void 0 : classes.title),
+        variant: "caption1",
+        children: title
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: cx(pickerClasses.default.pickers, css(Picker_styles.styles.pickers), classes == null ? void 0 : classes.pickers),
+        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: cx(pickerClasses.default.saturation, css(Picker_styles.styles.saturation), classes == null ? void 0 : classes.saturation),
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, {
+            hsl,
+            hsv,
+            onChange,
+            pointer: SaturationPointer
+          })
+        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: cx(pickerClasses.default.hue, css(Picker_styles.styles.hue), classes == null ? void 0 : classes.hue),
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, {
+            direction: activeTheme == null ? void 0 : activeTheme.colorPicker.hueDirection,
+            hsl,
+            onChange,
+            pointer: HueSlider
+          })
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsx(Fields.Fields, {
+        className: cx(pickerClasses.default.fields, classes == null ? void 0 : classes.fields),
+        rgb,
+        hex,
+        onChange
+      })]
+    })
+  });
+};
+const Picker$1 = reactColor.CustomPicker(Picker);
+exports.Picker = Picker;
+exports.default = Picker$1;
+//# sourceMappingURL=Picker.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.cjs","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,SAAA;AAElC,QAAMC,oBAAoBC,MAAAA,YACxB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBC,QAAAA,mBACzBJ,IAAIK,cAAAA,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBAAiB;AAAA,IAAA,CAC1B;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,QAAME,YAAYV,MAAAA,YAChB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBI,QAAAA,WACzBP,IAAIK,cAAAA,OAAOE,SAAS,GACpBf,mCAASe,SAAS;AAAA,IAAA,CAClB;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,wCACGT,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACPO,WAAAA,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,2BAAAA,IAACY,yBAAY;AAAA,QACXP,WAAWD,GACTE,cAAyBZ,QAAAA,OACzBS,IAAIK,cAAAA,OAAOd,KAAK,GAChBC,mCAASD,KAAK;AAAA,QAEhBmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CAAK,GAGVoB,2BAAAA,KAAA,OAAA;AAAA,QACET,WAAWD,GACTE,cAAyBS,QAAAA,SACzBZ,IAAIK,cAAAA,OAAOO,OAAO,GAClBpB,mCAASoB,OAAO;AAAA,QAChBb,WAEFF,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBU,QAAAA,YACzBb,IAAIK,cAAAA,OAAOQ,UAAU,GACrBrB,mCAASqB,UAAU;AAAA,UACnBd,yCAEDe,mBAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CAAkB;AAAA,QAAA,CAC3B,GAEJE,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBa,QAAAA,KACzBhB,IAAIK,cAAAA,OAAOW,GAAG,GACdxB,mCAASwB,GAAG;AAAA,UACZjB,yCAEDkB,YAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CAAU;AAAA,QAAA,CAEjB,CAAA;AAAA,MAAA,CACF,GACNT,2BAAAA,IAACwB,eAAM;AAAA,QACLnB,WAAWD,GAAGE,cAAAA,QAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;AAEA,MAAeqC,WAAAA,WAAAA,aAAatC,MAAM;;;"}

package/dist/cjs/components/ColorPicker/Picker/Picker.styles.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.styles.cjs","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,YAAAA,MAAMC,YAClBC;AAAAA,EACL;AAAA,EACAC,YAAY;AAAA,IACVC,OAAOJ,YAAAA,MAAMC,YAAYI;AAAAA,IACzBC,QAAQN,YAAAA,MAAMC,YAAYM;AAAAA,IAC1BC,aAAaR,YAAAA,MAAMC,YAAYQ;AAAAA,IAC/BC,UAAU;AAAA,IACVC,UAAU;AAAA,IAEV,WAAW;AAAA,MACTC,cAAcZ,YAAAA,MAAMC,YAAYY;AAAAA,MAEhC,uBAAuB;AAAA,QACrBD,cAAcZ,YAAAA,MAAMC,YAAYY;AAAAA,QAEhC,uBAAuB;AAAA,UACrBD,cAAcZ,YAAAA,MAAMC,YAAYY;AAAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBV,OAAOJ,YAAAA,MAAMC,YAAYc;AAAAA,IACzBT,QAAQN,YAAAA,MAAMC,YAAYe;AAAAA,IAC1BC,WAAY;AAAA;AAAA,IAEZL,cAAc;AAAA,IACdM,WAAW;AAAA,EACb;AAAA,EACAC,KAAK;AAAA,IACHb,QAAQN,YAAAA,MAAMC,YAAYmB;AAAAA,IAC1BhB,OAAOJ,YAAAA,MAAMC,YAAYoB;AAAAA,IACzBX,UAAU;AAAA,IACVC,UAAU;AAAA,IACVW,WAAWtB,YAAAA,MAAMC,YAAYsB;AAAAA,IAE7B,qBAAqB;AAAA,MACnBX,cAAcZ,YAAAA,MAAMC,YAAYuB;AAAAA,IAClC;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTrB,OAAOJ,YAAAA,MAAMC,YAAYyB;AAAAA,IACzBpB,QAAQN,YAAAA,MAAMC,YAAY0B;AAAAA,IAC1BC,YAAY5B,YAAAA,MAAMC,YAAY4B;AAAAA,IAC9BZ,WAAW;AAAA,IACXa,YAAY9B,YAAAA,MAAMC,YAAY8B;AAAAA,IAC9BC,QAAQhC,YAAAA,MAAMC,YAAYgC;AAAAA,IAC1BrB,cAAcZ,YAAAA,MAAMC,YAAYiC;AAAAA,IAChChB,WAAW;AAAA,EACb;AAAA,EACAiB,OAAO;AAAA,IACLC,YAAYpC,YAAAA,MAAMqC,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AACF;;"}

package/dist/cjs/components/ColorPicker/Picker/pickerClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../../utils/classes.cjs");
+const classKeys = ["hue", "hueSlider", "pickers", "saturation", "saturationPointer", "title", "fields"];
+const colorPickerPickerClasses = classes.getClasses(classKeys, "HvColorPicker-Picker");
+const colorPickerPickerClasses$1 = colorPickerPickerClasses;
+exports.default = colorPickerPickerClasses$1;
+//# sourceMappingURL=pickerClasses.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pickerClasses.cjs","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,QAAWF,WAAAA,WAAW,sBAAsB;AAE7E,MAAA,6BAAeC;;"}

package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const PresetColors_styles = require("./PresetColors.styles.cjs");
+const presetColorsClasses = require("./presetColorsClasses.cjs");
+const common = require("react-color/lib/components/common");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Typography = require("../../Typography/Typography.cjs");
+const PresetColors = ({
+  onClick,
+  colors,
+  title,
+  className,
+  classes
+}) => {
+  const handleClick = (hex) => {
+    onClick({
+      hex,
+      source: "hex"
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx(presetColorsClasses.default.root, css(PresetColors_styles.styles.root), className, classes == null ? void 0 : classes.root),
+      children: [title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+        className: cx(presetColorsClasses.default.title, css(PresetColors_styles.styles.title), classes == null ? void 0 : classes.title),
+        variant: "caption1",
+        children: title
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: cx(presetColorsClasses.default.colors, css(PresetColors_styles.styles.colors), classes == null ? void 0 : classes.colors),
+        children: colors.map((color, index) => {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: cx(presetColorsClasses.default.swatchWrap, css(PresetColors_styles.styles.swatchWrap), classes == null ? void 0 : classes.swatchWrap),
+            children: /* @__PURE__ */ jsxRuntime.jsx(common.Swatch, {
+              color,
+              onClick: handleClick,
+              focusStyle: {
+                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
+              }
+            })
+          }, `recommended-color-${color}-${index}`);
+        })
+      })]
+    })
+  });
+};
+exports.PresetColors = PresetColors;
+//# sourceMappingURL=PresetColors.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.cjs","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,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACER,WAAWQ,GACTC,4BAA+BC,MAC/BH,IAAII,2BAAOD,IAAI,GACfV,WACAC,mCAASS,IAAI;AAAA,MACbJ,UAEDP,CAAAA,SACCa,2BAAAA,IAACC,yBAAY;AAAA,QACXb,WAAWQ,GACTC,oBAA+BV,QAAAA,OAC/BQ,IAAII,oBAAAA,OAAOZ,KAAK,GAChBE,mCAASF,KAAK;AAAA,QAEhBe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CAAK,GAGVa,2BAAAA,IAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,oBAA+BX,QAAAA,QAC/BS,IAAII,oBAAAA,OAAOb,MAAM,GACjBG,mCAASH,MAAM;AAAA,QACfQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,gDACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,oBAA+BS,QAAAA,YAC/BX,IAAII,oBAAAA,OAAOO,UAAU,GACrBjB,mCAASiB,UAAU;AAAA,YACnBZ,yCAEDa,eAAM;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/cjs/components/ColorPicker/PresetColors/PresetColors.styles.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  root: {
+    width: uikitStyles.theme.colorPicker.recommendedColorsRootWidth
+  },
+  colors: {
+    display: "flex",
+    flexWrap: "wrap",
+    position: "relative",
+    width: uikitStyles.theme.colorPicker.recommendedColorsWidth,
+    margin: uikitStyles.theme.colorPicker.recommendedColorsMargin,
+    padding: 0
+  },
+  title: {
+    fontWeight: uikitStyles.theme.fontWeights.semibold,
+    marginBottom: 8
+  },
+  swatchWrap: {
+    width: uikitStyles.theme.colorPicker.recommendedColorsSwatchWidth,
+    height: uikitStyles.theme.colorPicker.recommendedColorsSwatchHeight,
+    margin: uikitStyles.theme.colorPicker.recommendedColorsSwatchMargin,
+    "& > span > div": {
+      borderRadius: uikitStyles.theme.colorPicker.recommendedColorsSwatchBorderRadius
+    }
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=PresetColors.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.styles.cjs","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,YAAAA,MAAMC,YAAYC;AAAAA,EAA2B;AAAA,EAC5DC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVP,OAAOC,YAAAA,MAAMC,YAAYM;AAAAA,IACzBC,QAAQR,YAAAA,MAAMC,YAAYQ;AAAAA,IAC1BC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLC,YAAYZ,YAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,YAAY;AAAA,IACVjB,OAAOC,YAAAA,MAAMC,YAAYgB;AAAAA,IACzBC,QAAQlB,YAAAA,MAAMC,YAAYkB;AAAAA,IAC1BX,QAAQR,YAAAA,MAAMC,YAAYmB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcrB,YAAAA,MAAMC,YAAYqB;AAAAA,IAClC;AAAA,EACF;AACF;;"}

package/dist/cjs/components/ColorPicker/PresetColors/presetColorsClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../../utils/classes.cjs");
+const classKeys = ["colors", "root", "swatchWrap", "title"];
+const colorPickerPresetColorsClasses = classes.getClasses(classKeys, "HvColorPicker-PresetColors");
+const colorPickerPresetColorsClasses$1 = colorPickerPresetColorsClasses;
+exports.default = colorPickerPresetColorsClasses$1;
+//# sourceMappingURL=presetColorsClasses.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presetColorsClasses.cjs","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,QACrCF,WAAAA,WACA,4BAA4B;AAG9B,MAAA,mCAAeC;;"}

package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SavedColors.cjs","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,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,mBAA8BC,QAAAA,MAC9BJ,IAAIK,mBAAAA,OAAOD,IAAI,GACfV,mCAASU,IAAI;AAAA,MACbL,UAAA,CAEFO,2BAAAA,IAACC,iBAAQ;AAAA,QACPL,WAAWD,GACTE,mBAA8BK,QAAAA,WAC9BR,IAAIK,mBAAAA,OAAOG,SAAS,GACpBd,mCAASc,SAAS;AAAA,QAEpBC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,2BAAAA,IAACM,gBAAG,KAAA,EAAA;AAAA,MACK,CAAA,GACVvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,+CACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,mBAA8Ba,QAAAA,YAC9BhB,IAAIK,mBAAAA,OAAOW,UAAU,GACrBtB,mCAASsB,UAAU;AAAA,UACnBjB,WAEFO,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8Bc,QAAAA,YAC9BjB,IAAIK,mBAAAA,OAAOY,UAAU,GACrBvB,mCAASuB,UAAU;AAAA,YACnBlB,yCAEDmB,eAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,CACF,GAEJR,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8BkB,QAAAA,kBAC9BrB,IAAIK,mBAAAA,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBAAgB;AAAA,YACzBtB,yCAEDQ,iBAAQ;AAAA,cACPL,WAAWD,GACTE,mBAA8BmB,QAAAA,cAC9BtB,IAAIK,mBAAAA,OAAOiB,YAAY,GACvB5B,mCAAS4B,YAAY;AAAA,cAEvBb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,yCAElCyB,yBAAO;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/cjs/components/ColorPicker/SavedColors/SavedColors.styles.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  addButton: {
+    margin: uikitStyles.theme.colorPicker.addSavedColorButtonMargin,
+    width: uikitStyles.theme.colorPicker.addSavedColorButtonWidth,
+    height: uikitStyles.theme.colorPicker.addSavedColorButtonHeight
+  },
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    position: "relative",
+    alignItems: "center",
+    padding: 0,
+    width: uikitStyles.theme.colorPicker.savedColorsWidth,
+    margin: uikitStyles.theme.colorPicker.savedColorsMargin
+  },
+  swatchRoot: {
+    position: "relative"
+  },
+  swatchWrap: {
+    width: uikitStyles.theme.colorPicker.savedColorsSwatchWidth,
+    height: uikitStyles.theme.colorPicker.savedColorsSwatchHeight,
+    margin: uikitStyles.theme.colorPicker.savedColorsSwatchMargin,
+    "& > span > div": {
+      borderRadius: uikitStyles.theme.colorPicker.savedColorsSwatchBorderRadius
+    }
+  },
+  removeButtonRoot: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 16,
+    width: 16,
+    background: uikitStyles.theme.colors.atmo1,
+    borderRadius: uikitStyles.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
+      }
+    }
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=SavedColors.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SavedColors.styles.cjs","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,YAAAA,MAAMC,YAAYC;AAAAA,IAC1BC,OAAOH,YAAAA,MAAMC,YAAYG;AAAAA,IACzBC,QAAQL,YAAAA,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,YAAAA,MAAMC,YAAYY;AAAAA,IACzBd,QAAQC,YAAAA,MAAMC,YAAYa;AAAAA,EAC5B;AAAA,EACAC,YAAY;AAAA,IAAEL,UAAU;AAAA,EAAW;AAAA,EACnCM,YAAY;AAAA,IACVb,OAAOH,YAAAA,MAAMC,YAAYgB;AAAAA,IACzBZ,QAAQL,YAAAA,MAAMC,YAAYiB;AAAAA,IAC1BnB,QAAQC,YAAAA,MAAMC,YAAYkB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcpB,YAAAA,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,YAAAA,MAAM2B,OAAOC;AAAAA,IACzBR,cAAcpB,YAAAA,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/cjs/components/ColorPicker/SavedColors/savedColorsClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../../utils/classes.cjs");
+const classKeys = ["addButton", "removeButton", "removeButtonRoot", "root", "swatchRoot", "swatchWrap"];
+const colorPickerSavedColorsClasses = classes.getClasses(classKeys, "HvColorPicker-SavedColors");
+const colorPickerSavedColorsClasses$1 = colorPickerSavedColorsClasses;
+exports.default = colorPickerSavedColorsClasses$1;
+//# sourceMappingURL=savedColorsClasses.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"savedColorsClasses.cjs","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,QACpCF,WAAAA,WACA,2BAA2B;AAG7B,MAAA,kCAAeC;;"}

package/dist/cjs/components/ColorPicker/colorPickerClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../utils/classes.cjs");
+const classKeys = ["root", "labelContainer", "label", "description", "headerColorIcon", "headerColorValue", "panel", "colorPicker", "colorPickerIcon", "dropdownRootIconOnly", "headerColorIconOnly", "recommendedColorsRoot", "pickerFields"];
+const colorPickerClasses = classes.getClasses(classKeys, "HvColorPicker");
+const colorPickerClasses$1 = colorPickerClasses;
+exports.default = colorPickerClasses$1;
+//# sourceMappingURL=colorPickerClasses.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorPickerClasses.cjs","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,QAAWF,WAAAA,WAAW,eAAe;AAEhE,MAAA,uBAAeC;;"}