@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

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

@@ -1,11 +1,9 @@
 "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");
@@ -17,65 +15,54 @@ const Picker = ({
   hsv,
   hex,
   title,
-  classes
+  classes: classesProp
 }) => {
   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 {
+    classes
+  } = Picker_styles.useClasses(classesProp);
+  const SaturationPointer = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: classes == null ? void 0 : classes.saturationPointer
+  }), [classes == null ? void 0 : classes.saturationPointer]);
+  const HueSlider = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: classes == null ? void 0 : classes.hueSlider
+  }), [classes == null ? void 0 : classes.hueSlider]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+      className: classes.title,
+      variant: "caption1",
+      children: title
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.pickers,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.saturation,
+        children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, {
+          hsl,
+          hsv,
+          onChange,
+          pointer: SaturationPointer
+        })
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: 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: classes.fields,
+      rgb,
+      hex,
+      onChange
+    })]
   });
 };
 const Picker$1 = reactColor.CustomPicker(Picker);
+exports.colorPickerPickerClasses = Picker_styles.staticClasses;
 exports.Picker = Picker;
 exports.default = Picker$1;
 //# sourceMappingURL=Picker.cjs.map

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

@@ -1 +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 { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport { styles } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\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,SAAS,SAAA;AAEjC,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,iBACX;AAAA,IAAA,CACD;AAAA,EAAA,CAEO,GAEd,CACF,CAAA;AAEA,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,SACX;AAAA,IAAA,CACD;AAAA,EAAA,CAEO,GAEd,CACF,CAAA;AAEA,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,KACX;AAAA,QACAmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CACW,GAEhBoB,2BAAAA,KAAA,OAAA;AAAA,QACET,WAAWD,GACTE,cAAyBS,QAAAA,SACzBZ,IAAIK,cAAAA,OAAOO,OAAO,GAClBpB,mCAASoB,OACX;AAAA,QAAEb,WAEFF,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBU,QAAAA,YACzBb,IAAIK,cAAAA,OAAOQ,UAAU,GACrBrB,mCAASqB,UACX;AAAA,UAAEd,yCAEDe,mBAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CACV;AAAA,QAAA,CACE,GACLE,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBa,QAAAA,KACzBhB,IAAIK,cAAAA,OAAOW,GAAG,GACdxB,mCAASwB,GACX;AAAA,UAAEjB,yCAEDkB,YAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CACV;AAAA,QAAA,CACE,CAAC;AAAA,MAAA,CACH,GACLT,2BAAAA,IAACwB,eAAM;AAAA,QACLnB,WAAWD,GAAGE,cAAAA,QAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACD,CAAC;AAAA,IAAA,CACF;AAAA,EAAA,CAEM;AAEhB;AAEA,MAAeqC,WAAAA,WAAAA,aAAatC,MAAM;;;"}
+{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { 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 { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes: classesProp,\n}: {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n} & CustomPickerInjectedProps<\n  | HSLColor\n  | HSVColor\n  | RGBColor\n  | {\n      source?: string;\n      hex?: string;\n    }\n>) => {\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer]\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider]\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","_jsx","className","saturationPointer","HueSlider","hueSlider","_Fragment","children","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;AAmBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,cAAAA,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,MAAAA,YACxB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASS;AAAAA,EAAoB,CAAA,GACnD,CAACT,mCAASS,iBAAiB,CAC7B;AAEA,QAAMC,YAAYJ,MAAAA,YAChB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASW;AAAAA,EAAY,CAAA,GAC3C,CAACX,mCAASW,SAAS,CACrB;AAEA,yCACEC,WAAAA,UAAA;AAAA,IAAAC,UACGd,CAAAA,SACCQ,2BAAAA,IAACO,yBAAY;AAAA,MAACN,WAAWR,QAAQD;AAAAA,MAAOgB,SAAQ;AAAA,MAAUF,UACvDd;AAAAA,IAAAA,CACW,GAEhBiB,2BAAAA,KAAA,OAAA;AAAA,MAAKR,WAAWR,QAAQiB;AAAAA,MAAQJ,WAC9BN,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQkB;AAAAA,QAAWL,yCAChCM,mBAAU;AAAA,UACTvB;AAAAA,UACAC;AAAAA,UACAH;AAAAA,UACA0B,SAASf;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,GACLE,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQqB;AAAAA,QAAIR,yCACzBS,YAAG;AAAA,UACFC,WAAWrB,2CAAasB,YAAYC;AAAAA,UACpC7B;AAAAA,UACAF;AAAAA,UACA0B,SAASV;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH,GACLH,2BAAAA,IAACmB,eAAM;AAAA,MACLlB,WAAWR,QAAQ2B;AAAAA,MACnBhC;AAAAA,MACAG;AAAAA,MACAJ;AAAAA,IAAAA,CACD,CAAC;AAAA,EAAA,CACF;AAEN;AAEA,MAAekC,WAAAA,WAAAA,aAAanC,MAAM;;;;"}

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

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const name = "HvColorPicker-Picker";
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses(name, {
   pickers: {
     display: "flex",
     flexDirection: uikitStyles.theme.colorPicker.pickersFlexDirection
@@ -53,7 +58,9 @@ const styles = {
   title: {
     fontWeight: uikitStyles.theme.fontWeights.semibold,
     marginBottom: 8
-  }
-};
-exports.styles = styles;
+  },
+  fields: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Picker.styles.cjs.map

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

@@ -1 +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;;"}
+{"version":3,"file":"Picker.styles.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  pickers: {\n    display: \"flex\",\n    flexDirection: theme.colorPicker\n      .pickersFlexDirection as CSSProperties[\"flexDirection\"],\n  },\n  saturation: {\n    width: theme.colorPicker.saturationWidth,\n    height: theme.colorPicker.saturationHeight,\n    marginRight: theme.colorPicker.saturationMarginRight,\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.colorPicker.saturationBorderRadius,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.colorPicker.saturationBorderRadius,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.colorPicker.saturationBorderRadius,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: theme.colorPicker.saturationPointerWidth,\n    height: theme.colorPicker.saturationPointerHeight,\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: \"50%\",\n    transform: \"translate(-3px, -3px)\",\n  },\n  hue: {\n    height: theme.colorPicker.hueHeight,\n    width: theme.colorPicker.hueWidth,\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: theme.colorPicker.hueMarginTop,\n\n    \"& .hue-horizontal\": {\n      borderRadius: theme.colorPicker.hueBorderRadius,\n    },\n  },\n  hueSlider: {\n    width: theme.colorPicker.hueSliderWidth,\n    height: theme.colorPicker.hueSliderHeight,\n    background: theme.colorPicker.hueSliderBackground,\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: theme.colorPicker.hueSliderMarginLeft,\n    border: theme.colorPicker.hueSliderBorder,\n    borderRadius: theme.colorPicker.hueSliderBorderRadius,\n    transform: \"translate(0, -2px)\",\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  fields: {},\n});\n"],"names":["name","staticClasses","useClasses","createClasses","pickers","display","flexDirection","theme","colorPicker","pickersFlexDirection","saturation","width","saturationWidth","height","saturationHeight","marginRight","saturationMarginRight","position","overflow","borderRadius","saturationBorderRadius","saturationPointer","saturationPointerWidth","saturationPointerHeight","boxShadow","transform","hue","hueHeight","hueWidth","marginTop","hueMarginTop","hueBorderRadius","hueSlider","hueSliderWidth","hueSliderHeight","background","hueSliderBackground","marginLeft","hueSliderMarginLeft","border","hueSliderBorder","hueSliderBorderRadius","title","fontWeight","fontWeights","semibold","marginBottom","fields"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,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;AAAA,EACAC,QAAQ,CAAC;AACX,CAAC;;;"}

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

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
 const common = require("react-color/lib/components/common");
 const PresetColors_styles = require("./PresetColors.styles.cjs");
-const presetColorsClasses = require("./presetColorsClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../Typography/Typography.cjs");
 const PresetColors = ({
@@ -11,41 +9,39 @@ const PresetColors = ({
   colors,
   title,
   className,
-  classes
+  classes: classesProp
 }) => {
+  const {
+    classes,
+    cx
+  } = PresetColors_styles.useClasses(classesProp);
   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}`);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: cx(classes.root, className),
+    children: [title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+      className: classes.title,
+      variant: "caption1",
+      children: title
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.colors,
+      children: colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: 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.colorPickerPresetColorsClasses = PresetColors_styles.staticClasses;
 exports.PresetColors = PresetColors;
 //# sourceMappingURL=PresetColors.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvTypography } from \"@core/components\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./PresetColors.styles\";\nimport colorPickerPresetColorsClasses, {\n  HvColorPickerPresetColorsClasses,\n} from \"./presetColorsClasses\";\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":";;;;;;;;AAkBO,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,IACX;AAAA,MAAEJ,UAEDP,CAAAA,SACCa,2BAAAA,IAACC,yBAAY;AAAA,QACXb,WAAWQ,GACTC,oBAA+BV,QAAAA,OAC/BQ,IAAII,oBAAAA,OAAOZ,KAAK,GAChBE,mCAASF,KACX;AAAA,QACAe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CACW,GAEhBa,2BAAAA,IAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,oBAA+BX,QAAAA,QAC/BS,IAAII,oBAAAA,OAAOb,MAAM,GACjBG,mCAASH,MACX;AAAA,QAAEQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,gDACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,oBAA+BS,QAAAA,YAC/BX,IAAII,oBAAAA,OAAOO,UAAU,GACrBjB,mCAASiB,UACX;AAAA,YAAEZ,yCAEDa,eAAM;AAAA,cACLH;AAAAA,cACAnB,SAASK;AAAAA,cACTkB,YAAY;AAAA,gBACVC,WAAY,4CAA2CL;AAAAA,cACzD;AAAA,YAAA,CACD;AAAA,UAAA,GAbK,qBAAoBA,SAASC,OAchC;AAAA,QAAA,CAER;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CAEG;AAEhB;;"}
+{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { HvTypography } from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes: classesProp,\n}: PresetColorsProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\n          >\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","classesProp","cx","useClasses","handleClick","hex","source","root","children","_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,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKP,WAAWG,GAAGF,QAAQO,MAAMR,SAAS;AAAA,IAAES,UACzCV,CAAAA,SACCW,2BAAAA,IAACC,yBAAY;AAAA,MAACX,WAAWC,QAAQF;AAAAA,MAAOa,SAAQ;AAAA,MAAUH,UACvDV;AAAAA,IAAAA,CACW,GAEhBW,2BAAAA,IAAA,OAAA;AAAA,MAAKV,WAAWC,QAAQH;AAAAA,MAAOW,UAC5BX,OAAOe,IAAI,CAACC,OAAOC,yCAClB,OAAA;AAAA,QAEEf,WAAWC,QAAQe;AAAAA,QAAWP,yCAE7BQ,eAAM;AAAA,UACLH;AAAAA,UACAjB,SAASQ;AAAAA,UACTa,YAAY;AAAA,YACVC,WAAY,4CAA2CL;AAAAA,UACzD;AAAA,QAAA,CACD;AAAA,MAAA,GATK,qBAAoBA,SAASC,OAUhC,CACN;AAAA,IAAA,CACE,CAAC;AAAA,EAAA,CACH;AAET;;;"}

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

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const name = "HvColorPicker-PresetColors";
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses(name, {
   root: {
     width: uikitStyles.theme.colorPicker.recommendedColorsRootWidth
   },
@@ -25,6 +30,7 @@ const styles = {
       borderRadius: uikitStyles.theme.colorPicker.recommendedColorsSwatchBorderRadius
     }
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=PresetColors.styles.cjs.map

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

@@ -1 +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;;"}
+{"version":3,"file":"PresetColors.styles.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: { width: theme.colorPicker.recommendedColorsRootWidth },\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: theme.colorPicker.recommendedColorsWidth,\n    margin: theme.colorPicker.recommendedColorsMargin,\n    padding: 0,\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  swatchWrap: {\n    width: theme.colorPicker.recommendedColorsSwatchWidth,\n    height: theme.colorPicker.recommendedColorsSwatchHeight,\n    margin: theme.colorPicker.recommendedColorsSwatchMargin,\n\n    \"& > span > div\": {\n      borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius,\n    },\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","width","theme","colorPicker","recommendedColorsRootWidth","colors","display","flexWrap","position","recommendedColorsWidth","margin","recommendedColorsMargin","padding","title","fontWeight","fontWeights","semibold","marginBottom","swatchWrap","recommendedColorsSwatchWidth","height","recommendedColorsSwatchHeight","recommendedColorsSwatchMargin","borderRadius","recommendedColorsSwatchBorderRadius"],"mappings":";;;;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,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,CAAC;;;"}

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

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const common = require("react-color/lib/components/common");
 const SavedColors_styles = require("./SavedColors.styles.cjs");
-const savedColorsClasses = require("./savedColorsClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../../Button/Button.cjs");
 const SavedColors = ({
@@ -13,55 +11,52 @@ const SavedColors = ({
   onAddColor,
   onRemoveColor,
   deleteButtonArialLabel,
-  classes
+  classes: classesProp
 }) => {
+  const {
+    classes
+  } = SavedColors_styles.useClasses(classesProp);
   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}`);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: classes.root,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+      className: classes.addButton,
+      variant: "secondarySubtle",
+      icon: true,
+      onClick: onAddColor,
+      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {})
+    }), colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.swatchRoot,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: 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: classes.removeButtonRoot,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+          className: 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.colorPickerSavedColorsClasses = SavedColors_styles.staticClasses;
 exports.SavedColors = SavedColors;
 //# sourceMappingURL=SavedColors.cjs.map

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

@@ -1 +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\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./SavedColors.styles\";\n\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,IACX;AAAA,MAAEL,UAAA,CAEFO,2BAAAA,IAACC,iBAAQ;AAAA,QACPL,WAAWD,GACTE,mBAA8BK,QAAAA,WAC9BR,IAAIK,mBAAAA,OAAOG,SAAS,GACpBd,mCAASc,SACX;AAAA,QACAC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,2BAAAA,IAACM,gBAAK,KAAA,EAAA;AAAA,MACE,CAAA,GACTvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,+CACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,mBAA8Ba,QAAAA,YAC9BhB,IAAIK,mBAAAA,OAAOW,UAAU,GACrBtB,mCAASsB,UACX;AAAA,UAAEjB,WAEFO,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8Bc,QAAAA,YAC9BjB,IAAIK,mBAAAA,OAAOY,UAAU,GACrBvB,mCAASuB,UACX;AAAA,YAAElB,yCAEDmB,eAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CACD;AAAA,UAAA,CACE,GACLR,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8BkB,QAAAA,kBAC9BrB,IAAIK,mBAAAA,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBACX;AAAA,YAAEtB,yCAEDQ,iBAAQ;AAAA,cACPL,WAAWD,GACTE,mBAA8BmB,QAAAA,cAC9BtB,IAAIK,mBAAAA,OAAOiB,YAAY,GACvB5B,mCAAS4B,YACX;AAAA,cACAb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,yCAElCyB,yBAAO;AAAA,gBAACC,UAAS;AAAA,cAAA,CAAM;AAAA,YAAA,CAChB;AAAA,UAAA,CACP,CAAC;AAAA,QAAA,GA1CA,eAAcX,SAASC,OA2C1B;AAAA,MAAA,CAER,CAAC;AAAA,IAAA,CACC;AAAA,EAAA,CAEG;AAEhB;;"}
+{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { HvButton } from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\nimport { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonArialLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonArialLabel,\n  classes: classesProp,\n}: SavedColorsProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n      >\n        <Add />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonArialLabel}\n            >\n              <CloseXS iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonArialLabel","classes","classesProp","useClasses","handleClick","hex","source","className","root","children","_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,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,mBAAAA,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,2BAAAA,IAACC,iBAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,SAASjB;AAAAA,MAAWW,UAEpBC,2BAAAA,IAACM,gBAAK,KAAA,EAAA;AAAA,IAAA,CACE,GACTpB,OAAOqB,IAAI,CAACC,OAAOC,0CAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,yCAChCa,eAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN;AAAAA,UACzD;AAAA,QAAA,CACD;AAAA,MAAA,CACE,GACLR,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQwB;AAAAA,QAAiBhB,yCACtCE,iBAAQ;AAAA,UACPJ,WAAWN,QAAQyB;AAAAA,UACnBb,SAAQ;AAAA,UACRE,SAASA,MAAMhB,cAAcmB,OAAOC,KAAK;AAAA,UACzCQ,UAAU;AAAA,UACV,cAAY3B;AAAAA,UAAuBS,yCAElCmB,yBAAO;AAAA,YAACC,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,CAChB;AAAA,MAAA,CACP,CAAC;AAAA,IAAA,GAtBA,eAAcX,SAASC,OAuB1B,CACN,CAAC;AAAA,EAAA,CACC;AAET;;;"}

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

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const name = "HvColorPicker-SavedColors";
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses(name, {
   addButton: {
     margin: uikitStyles.theme.colorPicker.addSavedColorButtonMargin,
     width: uikitStyles.theme.colorPicker.addSavedColorButtonWidth,
@@ -55,6 +60,7 @@ const styles = {
       }
     }
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=SavedColors.styles.cjs.map

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

@@ -1 +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;;"}
+{"version":3,"file":"SavedColors.styles.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\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":["name","staticClasses","useClasses","createClasses","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":";;;;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,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,CAAC;;;"}