@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { 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;AAEjC,QAAMC,oBAAoBC,YACxB,MACEC,oBAACC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,yBAAyBC,mBACzBJ,IAAIK,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBACX;AAAA,IAAA,CACD;AAAA,EAAA,CAEO,GAEd,CACF,CAAA;AAEA,QAAME,YAAYV,YAChB,MACEC,oBAACC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,yBAAyBI,WACzBP,IAAIK,OAAOE,SAAS,GACpBf,mCAASe,SACX;AAAA,IAAA,CACD;AAAA,EAAA,CAEO,GAEd,CACF,CAAA;AAEA,6BACGT,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACPO,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,oBAACY,cAAY;AAAA,QACXP,WAAWD,GACTE,yBAAyBZ,OACzBS,IAAIK,OAAOd,KAAK,GAChBC,mCAASD,KACX;AAAA,QACAmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CACW,GAEhBoB,qBAAA,OAAA;AAAA,QACET,WAAWD,GACTE,yBAAyBS,SACzBZ,IAAIK,OAAOO,OAAO,GAClBpB,mCAASoB,OACX;AAAA,QAAEb,WAEFF,oBAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,yBAAyBU,YACzBb,IAAIK,OAAOQ,UAAU,GACrBrB,mCAASqB,UACX;AAAA,UAAEd,8BAEDe,YAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CACV;AAAA,QAAA,CACE,GACLE,oBAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,yBAAyBa,KACzBhB,IAAIK,OAAOW,GAAG,GACdxB,mCAASwB,GACX;AAAA,UAAEjB,8BAEDkB,KAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CACV;AAAA,QAAA,CACE,CAAC;AAAA,MAAA,CACH,GACLT,oBAACwB,QAAM;AAAA,QACLnB,WAAWD,GAAGE,yBAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACD,CAAC;AAAA,IAAA,CACF;AAAA,EAAA,CAEM;AAEhB;AAEA,MAAeqC,WAAAA,aAAatC,MAAM;"}
+{"version":3,"file":"Picker.js","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;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,YACxB,MAAMC,oBAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASS;AAAAA,EAAoB,CAAA,GACnD,CAACT,mCAASS,iBAAiB,CAC7B;AAEA,QAAMC,YAAYJ,YAChB,MAAMC,oBAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASW;AAAAA,EAAY,CAAA,GAC3C,CAACX,mCAASW,SAAS,CACrB;AAEA,8BACEC,UAAA;AAAA,IAAAC,UACGd,CAAAA,SACCQ,oBAACO,cAAY;AAAA,MAACN,WAAWR,QAAQD;AAAAA,MAAOgB,SAAQ;AAAA,MAAUF,UACvDd;AAAAA,IAAAA,CACW,GAEhBiB,qBAAA,OAAA;AAAA,MAAKR,WAAWR,QAAQiB;AAAAA,MAAQJ,WAC9BN,oBAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQkB;AAAAA,QAAWL,8BAChCM,YAAU;AAAA,UACTvB;AAAAA,UACAC;AAAAA,UACAH;AAAAA,UACA0B,SAASf;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,GACLE,oBAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQqB;AAAAA,QAAIR,8BACzBS,KAAG;AAAA,UACFC,WAAWrB,2CAAasB,YAAYC;AAAAA,UACpC7B;AAAAA,UACAF;AAAAA,UACA0B,SAASV;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH,GACLH,oBAACmB,QAAM;AAAA,MACLlB,WAAWR,QAAQ2B;AAAAA,MACnBhC;AAAAA,MACAG;AAAAA,MACAJ;AAAAA,IAAAA,CACD,CAAC;AAAA,EAAA,CACF;AAEN;AAEA,MAAekC,WAAAA,aAAanC,MAAM;"}

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

@@ -1,5 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const name = "HvColorPicker-Picker";
+const {
+  staticClasses,
+  useClasses
+} = createClasses(name, {
   pickers: {
     display: "flex",
     flexDirection: theme.colorPicker.pickersFlexDirection
@@ -51,9 +56,11 @@ const styles = {
   title: {
     fontWeight: theme.fontWeights.semibold,
     marginBottom: 8
-  }
-};
+  },
+  fields: {}
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Picker.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.styles.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { HvColorPickerPickerClasses } from \"./pickerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerPickerClasses, CSSInterpolation>\n> = {\n  pickers: {\n    display: \"flex\",\n    flexDirection: theme.colorPicker\n      .pickersFlexDirection as CSSProperties[\"flexDirection\"],\n  },\n  saturation: {\n    width: theme.colorPicker.saturationWidth,\n    height: theme.colorPicker.saturationHeight,\n    marginRight: theme.colorPicker.saturationMarginRight,\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.colorPicker.saturationBorderRadius,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.colorPicker.saturationBorderRadius,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.colorPicker.saturationBorderRadius,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: theme.colorPicker.saturationPointerWidth,\n    height: theme.colorPicker.saturationPointerHeight,\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: \"50%\",\n    transform: \"translate(-3px, -3px)\",\n  },\n  hue: {\n    height: theme.colorPicker.hueHeight,\n    width: theme.colorPicker.hueWidth,\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: theme.colorPicker.hueMarginTop,\n\n    \"& .hue-horizontal\": {\n      borderRadius: theme.colorPicker.hueBorderRadius,\n    },\n  },\n  hueSlider: {\n    width: theme.colorPicker.hueSliderWidth,\n    height: theme.colorPicker.hueSliderHeight,\n    background: theme.colorPicker.hueSliderBackground,\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: theme.colorPicker.hueSliderMarginLeft,\n    border: theme.colorPicker.hueSliderBorder,\n    borderRadius: theme.colorPicker.hueSliderBorderRadius,\n    transform: \"translate(0, -2px)\",\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n};\n"],"names":["styles","pickers","display","flexDirection","theme","colorPicker","pickersFlexDirection","saturation","width","saturationWidth","height","saturationHeight","marginRight","saturationMarginRight","position","overflow","borderRadius","saturationBorderRadius","saturationPointer","saturationPointerWidth","saturationPointerHeight","boxShadow","transform","hue","hueHeight","hueWidth","marginTop","hueMarginTop","hueBorderRadius","hueSlider","hueSliderWidth","hueSliderHeight","background","hueSliderBackground","marginLeft","hueSliderMarginLeft","border","hueSliderBorder","hueSliderBorderRadius","title","fontWeight","fontWeights","semibold","marginBottom"],"mappings":";AAKO,MAAMA,SAET;AAAA,EACFC,SAAS;AAAA,IACPC,SAAS;AAAA,IACTC,eAAeC,MAAMC,YAClBC;AAAAA,EACL;AAAA,EACAC,YAAY;AAAA,IACVC,OAAOJ,MAAMC,YAAYI;AAAAA,IACzBC,QAAQN,MAAMC,YAAYM;AAAAA,IAC1BC,aAAaR,MAAMC,YAAYQ;AAAAA,IAC/BC,UAAU;AAAA,IACVC,UAAU;AAAA,IAEV,WAAW;AAAA,MACTC,cAAcZ,MAAMC,YAAYY;AAAAA,MAEhC,uBAAuB;AAAA,QACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAEhC,uBAAuB;AAAA,UACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBV,OAAOJ,MAAMC,YAAYc;AAAAA,IACzBT,QAAQN,MAAMC,YAAYe;AAAAA,IAC1BC,WAAY;AAAA;AAAA,IAEZL,cAAc;AAAA,IACdM,WAAW;AAAA,EACb;AAAA,EACAC,KAAK;AAAA,IACHb,QAAQN,MAAMC,YAAYmB;AAAAA,IAC1BhB,OAAOJ,MAAMC,YAAYoB;AAAAA,IACzBX,UAAU;AAAA,IACVC,UAAU;AAAA,IACVW,WAAWtB,MAAMC,YAAYsB;AAAAA,IAE7B,qBAAqB;AAAA,MACnBX,cAAcZ,MAAMC,YAAYuB;AAAAA,IAClC;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTrB,OAAOJ,MAAMC,YAAYyB;AAAAA,IACzBpB,QAAQN,MAAMC,YAAY0B;AAAAA,IAC1BC,YAAY5B,MAAMC,YAAY4B;AAAAA,IAC9BZ,WAAW;AAAA,IACXa,YAAY9B,MAAMC,YAAY8B;AAAAA,IAC9BC,QAAQhC,MAAMC,YAAYgC;AAAAA,IAC1BrB,cAAcZ,MAAMC,YAAYiC;AAAAA,IAChChB,WAAW;AAAA,EACb;AAAA,EACAiB,OAAO;AAAA,IACLC,YAAYpC,MAAMqC,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AACF;"}
+{"version":3,"file":"Picker.styles.js","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,cAAcH,MAAM;AAAA,EAC/DI,SAAS;AAAA,IACPC,SAAS;AAAA,IACTC,eAAeC,MAAMC,YAClBC;AAAAA,EACL;AAAA,EACAC,YAAY;AAAA,IACVC,OAAOJ,MAAMC,YAAYI;AAAAA,IACzBC,QAAQN,MAAMC,YAAYM;AAAAA,IAC1BC,aAAaR,MAAMC,YAAYQ;AAAAA,IAC/BC,UAAU;AAAA,IACVC,UAAU;AAAA,IAEV,WAAW;AAAA,MACTC,cAAcZ,MAAMC,YAAYY;AAAAA,MAEhC,uBAAuB;AAAA,QACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAEhC,uBAAuB;AAAA,UACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBV,OAAOJ,MAAMC,YAAYc;AAAAA,IACzBT,QAAQN,MAAMC,YAAYe;AAAAA,IAC1BC,WAAY;AAAA;AAAA,IAEZL,cAAc;AAAA,IACdM,WAAW;AAAA,EACb;AAAA,EACAC,KAAK;AAAA,IACHb,QAAQN,MAAMC,YAAYmB;AAAAA,IAC1BhB,OAAOJ,MAAMC,YAAYoB;AAAAA,IACzBX,UAAU;AAAA,IACVC,UAAU;AAAA,IACVW,WAAWtB,MAAMC,YAAYsB;AAAAA,IAE7B,qBAAqB;AAAA,MACnBX,cAAcZ,MAAMC,YAAYuB;AAAAA,IAClC;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTrB,OAAOJ,MAAMC,YAAYyB;AAAAA,IACzBpB,QAAQN,MAAMC,YAAY0B;AAAAA,IAC1BC,YAAY5B,MAAMC,YAAY4B;AAAAA,IAC9BZ,WAAW;AAAA,IACXa,YAAY9B,MAAMC,YAAY8B;AAAAA,IAC9BC,QAAQhC,MAAMC,YAAYgC;AAAAA,IAC1BrB,cAAcZ,MAAMC,YAAYiC;AAAAA,IAChChB,WAAW;AAAA,EACb;AAAA,EACAiB,OAAO;AAAA,IACLC,YAAYpC,MAAMqC,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ,CAAC;AACX,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","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,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACP,OAAA;AAAA,MACER,WAAWQ,GACTC,+BAA+BC,MAC/BH,IAAII,OAAOD,IAAI,GACfV,WACAC,mCAASS,IACX;AAAA,MAAEJ,UAEDP,CAAAA,SACCa,oBAACC,cAAY;AAAA,QACXb,WAAWQ,GACTC,+BAA+BV,OAC/BQ,IAAII,OAAOZ,KAAK,GAChBE,mCAASF,KACX;AAAA,QACAe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CACW,GAEhBa,oBAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,+BAA+BX,QAC/BS,IAAII,OAAOb,MAAM,GACjBG,mCAASH,MACX;AAAA,QAAEQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,qCACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,+BAA+BS,YAC/BX,IAAII,OAAOO,UAAU,GACrBjB,mCAASiB,UACX;AAAA,YAAEZ,8BAEDa,QAAM;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.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\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,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACE,OAAA;AAAA,IAAKP,WAAWG,GAAGF,QAAQO,MAAMR,SAAS;AAAA,IAAES,UACzCV,CAAAA,SACCW,oBAACC,cAAY;AAAA,MAACX,WAAWC,QAAQF;AAAAA,MAAOa,SAAQ;AAAA,MAAUH,UACvDV;AAAAA,IAAAA,CACW,GAEhBW,oBAAA,OAAA;AAAA,MAAKV,WAAWC,QAAQH;AAAAA,MAAOW,UAC5BX,OAAOe,IAAI,CAACC,OAAOC,8BAClB,OAAA;AAAA,QAEEf,WAAWC,QAAQe;AAAAA,QAAWP,8BAE7BQ,QAAM;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/esm/components/ColorPicker/PresetColors/PresetColors.styles.js

@@ -1,5 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const name = "HvColorPicker-PresetColors";
+const {
+  staticClasses,
+  useClasses
+} = createClasses(name, {
   root: {
     width: theme.colorPicker.recommendedColorsRootWidth
   },
@@ -23,8 +28,9 @@ const styles = {
       borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius
     }
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=PresetColors.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.styles.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerPresetColorsClasses } from \"./presetColorsClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerPresetColorsClasses, CSSInterpolation>\n> = {\n  root: { width: theme.colorPicker.recommendedColorsRootWidth },\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: theme.colorPicker.recommendedColorsWidth,\n    margin: theme.colorPicker.recommendedColorsMargin,\n    padding: 0,\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  swatchWrap: {\n    width: theme.colorPicker.recommendedColorsSwatchWidth,\n    height: theme.colorPicker.recommendedColorsSwatchHeight,\n    margin: theme.colorPicker.recommendedColorsSwatchMargin,\n\n    \"& > span > div\": {\n      borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius,\n    },\n  },\n};\n"],"names":["styles","root","width","theme","colorPicker","recommendedColorsRootWidth","colors","display","flexWrap","position","recommendedColorsWidth","margin","recommendedColorsMargin","padding","title","fontWeight","fontWeights","semibold","marginBottom","swatchWrap","recommendedColorsSwatchWidth","height","recommendedColorsSwatchHeight","recommendedColorsSwatchMargin","borderRadius","recommendedColorsSwatchBorderRadius"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IAAEC,OAAOC,MAAMC,YAAYC;AAAAA,EAA2B;AAAA,EAC5DC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVP,OAAOC,MAAMC,YAAYM;AAAAA,IACzBC,QAAQR,MAAMC,YAAYQ;AAAAA,IAC1BC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,YAAY;AAAA,IACVjB,OAAOC,MAAMC,YAAYgB;AAAAA,IACzBC,QAAQlB,MAAMC,YAAYkB;AAAAA,IAC1BX,QAAQR,MAAMC,YAAYmB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcrB,MAAMC,YAAYqB;AAAAA,IAClC;AAAA,EACF;AACF;"}
+{"version":3,"file":"PresetColors.styles.js","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,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IAAEC,OAAOC,MAAMC,YAAYC;AAAAA,EAA2B;AAAA,EAC5DC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVP,OAAOC,MAAMC,YAAYM;AAAAA,IACzBC,QAAQR,MAAMC,YAAYQ;AAAAA,IAC1BC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,YAAY;AAAA,IACVjB,OAAOC,MAAMC,YAAYgB;AAAAA,IACzBC,QAAQlB,MAAMC,YAAYkB;AAAAA,IAC1BX,QAAQR,MAAMC,YAAYmB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcrB,MAAMC,YAAYqB;AAAAA,IAClC;AAAA,EACF;AACF,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { 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,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,8BAA8BC,MAC9BJ,IAAIK,OAAOD,IAAI,GACfV,mCAASU,IACX;AAAA,MAAEL,UAAA,CAEFO,oBAACC,UAAQ;AAAA,QACPL,WAAWD,GACTE,8BAA8BK,WAC9BR,IAAIK,OAAOG,SAAS,GACpBd,mCAASc,SACX;AAAA,QACAC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,oBAACM,KAAK,EAAA;AAAA,MACE,CAAA,GACTvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,oCACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,8BAA8Ba,YAC9BhB,IAAIK,OAAOW,UAAU,GACrBtB,mCAASsB,UACX;AAAA,UAAEjB,WAEFO,oBAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,8BAA8Bc,YAC9BjB,IAAIK,OAAOY,UAAU,GACrBvB,mCAASuB,UACX;AAAA,YAAElB,8BAEDmB,QAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CACD;AAAA,UAAA,CACE,GACLR,oBAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,8BAA8BkB,kBAC9BrB,IAAIK,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBACX;AAAA,YAAEtB,8BAEDQ,UAAQ;AAAA,cACPL,WAAWD,GACTE,8BAA8BmB,cAC9BtB,IAAIK,OAAOiB,YAAY,GACvB5B,mCAAS4B,YACX;AAAA,cACAb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,8BAElCyB,SAAO;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.js","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,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,oBAACC,UAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,SAASjB;AAAAA,MAAWW,UAEpBC,oBAACM,KAAK,EAAA;AAAA,IAAA,CACE,GACTpB,OAAOqB,IAAI,CAACC,OAAOC,+BAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,oBAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,8BAChCa,QAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN;AAAAA,UACzD;AAAA,QAAA,CACD;AAAA,MAAA,CACE,GACLR,oBAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQwB;AAAAA,QAAiBhB,8BACtCE,UAAQ;AAAA,UACPJ,WAAWN,QAAQyB;AAAAA,UACnBb,SAAQ;AAAA,UACRE,SAASA,MAAMhB,cAAcmB,OAAOC,KAAK;AAAA,UACzCQ,UAAU;AAAA,UACV,cAAY3B;AAAAA,UAAuBS,8BAElCmB,SAAO;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/esm/components/ColorPicker/SavedColors/SavedColors.styles.js

@@ -1,5 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const name = "HvColorPicker-SavedColors";
+const {
+  staticClasses,
+  useClasses
+} = createClasses(name, {
   addButton: {
     margin: theme.colorPicker.addSavedColorButtonMargin,
     width: theme.colorPicker.addSavedColorButtonWidth,
@@ -53,8 +58,9 @@ const styles = {
       }
     }
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=SavedColors.styles.js.map

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

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