@hitachivantara/uikit-react-core 5.44.1 → 5.44.2

package/dist/esm/ColorPicker/ColorPicker.styles.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.styles.mjs","sources":["../../../src/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\n  description: {},\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: \"266px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"16px\",\n  },\n  colorPicker: {\n    width: \"232px\",\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {\n    \":not(:only-child)\": {\n      paddingBottom: \"24px\",\n    },\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,cAAc,EAAE,eAAe,GAAG;AACpC,CAAC;"}

package/dist/esm/ColorPicker/Fields/Fields.mjs

@@ -1,137 +0,0 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import * as color from "react-color/lib/helpers/color";
-import { useDefaultProps } from "../../hooks/useDefaultProps.mjs";
-import { useClasses } from "./Fields.styles.mjs";
-import { staticClasses } from "./Fields.styles.mjs";
-import { HvInput } from "../../Input/Input.mjs";
-const Fields = (props) => {
-  const {
-    className,
-    onChange,
-    rgb,
-    hex,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerFields", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [internalHex, setInternalHex] = useState(hex);
-  const [internalRed, setInternalRed] = useState(rgb?.r);
-  const [internalGreen, setInternalGreen] = useState(rgb?.g);
-  const [internalBlue, setInternalBlue] = useState(rgb?.b);
-  const hexInputRef = useRef(null);
-  const redInputRef = useRef(null);
-  const greenInputRef = useRef(null);
-  const blueInputRef = useRef(null);
-  useEffect(() => {
-    if (document.activeElement !== hexInputRef.current) {
-      setInternalHex(hex);
-    }
-  }, [hex]);
-  useEffect(() => {
-    if (document.activeElement !== redInputRef.current) {
-      setInternalRed(rgb?.r);
-    }
-    if (document.activeElement !== greenInputRef.current) {
-      setInternalGreen(rgb?.g);
-    }
-    if (document.activeElement !== blueInputRef.current) {
-      setInternalBlue(rgb?.b);
-    }
-  }, [rgb]);
-  const handleChange = (data, event) => {
-    if (data.hex && color.isValidHex(data.hex)) {
-      onChange(
-        {
-          hex: data.hex,
-          source: "hex"
-        },
-        event
-      );
-    } else if (data.r || data.g || data.b) {
-      onChange(
-        {
-          r: data.r || rgb?.r,
-          g: data.g || rgb?.g,
-          b: data.b || rgb?.b,
-          source: "rgb"
-        },
-        event
-      );
-    }
-  };
-  const onChangeHex = (event, value) => {
-    setInternalHex(value);
-    handleChange({ hex: value }, event);
-  };
-  const onChangeRbg = (event, value, colorPart) => {
-    if (colorPart === "r")
-      setInternalRed(Number(value));
-    if (colorPart === "g")
-      setInternalGreen(Number(value));
-    if (colorPart === "b")
-      setInternalBlue(Number(value));
-    handleChange(
-      {
-        r: colorPart === "r" ? Number(value) : rgb?.r,
-        g: colorPart === "g" ? Number(value) : rgb?.g,
-        b: colorPart === "b" ? Number(value) : rgb?.b
-      },
-      event
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx(classes.fields, className), children: [
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: hexInputRef,
-        className: classes.double,
-        label: "HEX",
-        value: internalHex?.replace("#", ""),
-        onChange: onChangeHex,
-        onBlur: () => setInternalHex(hex),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: redInputRef,
-        className: classes.single,
-        label: "R",
-        value: `${internalRed}`,
-        onChange: (event, value) => onChangeRbg(event, value, "r"),
-        onBlur: () => setInternalRed(rgb?.r),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: greenInputRef,
-        className: classes.single,
-        label: "G",
-        value: `${internalGreen}`,
-        onChange: (event, value) => onChangeRbg(event, value, "g"),
-        onBlur: () => setInternalGreen(rgb?.g),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: blueInputRef,
-        className: classes.single,
-        label: "B",
-        value: `${internalBlue}`,
-        onChange: (event, value) => onChangeRbg(event, value, "b"),
-        onBlur: () => setInternalBlue(rgb?.b),
-        disableClear: true
-      }
-    )
-  ] });
-};
-export {
-  Fields,
-  staticClasses as colorPickerFieldsClasses
-};
-//# sourceMappingURL=Fields.mjs.map

package/dist/esm/ColorPicker/Fields/Fields.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Fields.mjs","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"../../Input\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb?.r,\n          g: data.g || rgb?.g,\n          b: data.b || rgb?.b,\n          source: \"rgb\",\n        },\n        event\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\"\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/ColorPicker/Fields/Fields.styles.mjs

@@ -1,38 +0,0 @@
-import { createClasses } from "../../utils/classes.mjs";
-const name = "HvColorPicker-Fields";
-const { staticClasses, useClasses } = createClasses(name, {
-  fields: {
-    width: "100%",
-    display: "flex",
-    paddingTop: "18px",
-    marginRight: "0px"
-  },
-  single: {
-    maxWidth: "50px",
-    paddingLeft: "4px",
-    "& input": {
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  },
-  double: {
-    maxWidth: "82px",
-    paddingRight: "4px",
-    "& input": {
-      textTransform: "uppercase",
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
-//# sourceMappingURL=Fields.styles.mjs.map

package/dist/esm/ColorPicker/Fields/Fields.styles.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Fields.styles.mjs","sources":["../../../../src/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: \"18px\",\n    marginRight: \"0px\",\n  },\n  single: {\n    maxWidth: \"50px\",\n    paddingLeft: \"4px\",\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    maxWidth: \"82px\",\n    paddingRight: \"4px\",\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n});\n"],"names":[],"mappings":";AAEA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ColorPicker/Picker/Picker.mjs

@@ -1,69 +0,0 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
-import { useCallback } from "react";
-import { Saturation, Hue } from "react-color/lib/components/common";
-import { CustomPicker } from "react-color";
-import { useTheme } from "../../hooks/useTheme.mjs";
-import { useDefaultProps } from "../../hooks/useDefaultProps.mjs";
-import { useClasses } from "./Picker.styles.mjs";
-import { staticClasses } from "./Picker.styles.mjs";
-import { Fields } from "../Fields/Fields.mjs";
-import { HvTypography } from "../../Typography/Typography.mjs";
-const Component = (props) => {
-  const {
-    onChange,
-    rgb,
-    hsl,
-    hsv,
-    hex,
-    title,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerPicker", props);
-  const { activeTheme } = useTheme();
-  const { classes } = useClasses(classesProp);
-  const SaturationPointer = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }),
-    [classes?.saturationPointer]
-  );
-  const HueSlider = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.hueSlider }),
-    [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?.colorPicker.hueDirection,
-          hsl,
-          onChange,
-          pointer: HueSlider
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Fields,
-      {
-        className: classes.fields,
-        rgb,
-        hex,
-        onChange
-      }
-    )
-  ] });
-};
-const Picker = CustomPicker(Component);
-export {
-  Picker,
-  staticClasses as colorPickerPickerClasses
-};
-//# sourceMappingURL=Picker.mjs.map

package/dist/esm/ColorPicker/Picker/Picker.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Picker.mjs","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\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 const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;;AAsCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}

package/dist/esm/ColorPicker/Picker/Picker.styles.mjs

@@ -1,63 +0,0 @@
-import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.mjs";
-const name = "HvColorPicker-Picker";
-const { staticClasses, useClasses } = createClasses(name, {
-  pickers: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  saturation: {
-    width: "232px",
-    height: "140px",
-    marginRight: "0px",
-    position: "relative",
-    overflow: "visible",
-    "& > div": {
-      borderRadius: theme.radii.base,
-      "& .saturation-white": {
-        borderRadius: theme.radii.base,
-        "& .saturation-black": {
-          borderRadius: theme.radii.base
-        }
-      }
-    }
-  },
-  saturationPointer: {
-    width: "8px",
-    height: "8px",
-    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
-            0 0 1px 2px rgba(0,0,0,.4)`,
-    borderRadius: "50%",
-    transform: "translate(-3px, -3px)"
-  },
-  hue: {
-    height: "8px",
-    width: "232px",
-    position: "relative",
-    overflow: "visible",
-    marginTop: "18px",
-    "& .hue-horizontal": {
-      borderRadius: `calc(2*${theme.radii.base})`
-    }
-  },
-  hueSlider: {
-    width: "12px",
-    height: "12px",
-    background: "transparent",
-    boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
-    marginLeft: "0px",
-    border: "2px solid #fff",
-    borderRadius: theme.radii.circle,
-    transform: "translate(0, -2px)"
-  },
-  title: {
-    fontWeight: theme.fontWeights.semibold,
-    marginBottom: 8
-  },
-  fields: {}
-});
-export {
-  staticClasses,
-  useClasses
-};
-//# sourceMappingURL=Picker.styles.mjs.map

package/dist/esm/ColorPicker/Picker/Picker.styles.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Picker.styles.mjs","sources":["../../../../src/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  pickers: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  saturation: {\n    width: \"232px\",\n    height: \"140px\",\n    marginRight: \"0px\",\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.radii.base,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.radii.base,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.radii.base,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: \"8px\",\n    height: \"8px\",\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: \"8px\",\n    width: \"232px\",\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: \"18px\",\n\n    \"& .hue-horizontal\": {\n      borderRadius: `calc(2*${theme.radii.base})`,\n    },\n  },\n  hueSlider: {\n    width: \"12px\",\n    height: \"12px\",\n    background: \"transparent\",\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: \"0px\",\n    border: \"2px solid #fff\",\n    borderRadius: theme.radii.circle,\n    transform: \"translate(0, -2px)\",\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  fields: {},\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAE1B,uBAAuB;AAAA,QACrB,cAAc,MAAM,MAAM;AAAA,QAE1B,uBAAuB;AAAA,UACrB,cAAc,MAAM,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,cAAc,UAAU,MAAM,MAAM,IAAI;AAAA,IAC1C;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ,CAAC;AACX,CAAC;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.mjs

@@ -1,47 +0,0 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { Swatch } from "react-color/lib/components/common";
-import { useDefaultProps } from "../../hooks/useDefaultProps.mjs";
-import { useClasses } from "./PresetColors.styles.mjs";
-import { staticClasses } from "./PresetColors.styles.mjs";
-import { HvTypography } from "../../Typography/Typography.mjs";
-const PresetColors = (props) => {
-  const {
-    onClick,
-    colors,
-    title,
-    className,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerPresetColors", props);
-  const { classes, cx } = useClasses(classesProp);
-  const handleClick = (hex) => {
-    onClick({
-      hex,
-      source: "hex"
-    });
-  };
-  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,
-  staticClasses as colorPickerPresetColorsClasses
-};
-//# sourceMappingURL=PresetColors.mjs.map

package/dist/esm/ColorPicker/PresetColors/PresetColors.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PresetColors.mjs","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\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 = (props: PresetColorsProps) => {\n  const {\n    onClick,\n    colors,\n    title,\n    className,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPresetColors\", props);\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":[],"mappings":";;;;;;AAuBa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,6BAA6B,KAAK;AACtD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,cAAc,CAAC,QAAgB;AAC3B,YAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAW,QAAQ,QACrB,UAAO,OAAA,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,cACV,WAAW,4CAA4C,KAAK;AAAA,YAC9D;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MATK,qBAAqB,KAAK,IAAI,KAAK;AAAA,IAW3C,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.mjs

@@ -1,31 +0,0 @@
-import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.mjs";
-const name = "HvColorPicker-PresetColors";
-const { staticClasses, useClasses } = createClasses(name, {
-  root: { width: "232px" },
-  colors: {
-    display: "flex",
-    flexWrap: "wrap",
-    position: "relative",
-    width: "calc(100% + 8px)",
-    margin: "-4px -4px",
-    padding: 0
-  },
-  title: {
-    fontWeight: theme.fontWeights.semibold,
-    marginBottom: 8
-  },
-  swatchWrap: {
-    width: "32px",
-    height: "32px",
-    margin: "4px",
-    "& > span > div": {
-      borderRadius: theme.radii.base
-    }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
-//# sourceMappingURL=PresetColors.styles.mjs.map

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PresetColors.styles.mjs","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: { width: \"232px\" },\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: \"calc(100% + 8px)\",\n    margin: \"-4px -4px\",\n    padding: 0,\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  swatchWrap: {\n    width: \"32px\",\n    height: \"32px\",\n    margin: \"4px\",\n\n    \"& > span > div\": {\n      borderRadius: theme.radii.base,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.mjs

@@ -1,73 +0,0 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
-import { Swatch } from "react-color/lib/components/common";
-import { useDefaultProps } from "../../hooks/useDefaultProps.mjs";
-import { useClasses } from "./SavedColors.styles.mjs";
-import { staticClasses } from "./SavedColors.styles.mjs";
-import { HvButton } from "../../Button/Button.mjs";
-const SavedColors = (props) => {
-  const {
-    colors,
-    onClickColor,
-    onAddColor,
-    onRemoveColor,
-    deleteButtonAriaLabel,
-    addButtonAriaLabel,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerSavedColors", props);
-  const { classes } = useClasses(classesProp);
-  const handleClick = (hex) => {
-    onClickColor({
-      hex,
-      source: "hex"
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    /* @__PURE__ */ jsx(
-      HvButton,
-      {
-        className: classes.addButton,
-        variant: "secondarySubtle",
-        icon: true,
-        onClick: onAddColor,
-        "aria-label": addButtonAriaLabel,
-        children: /* @__PURE__ */ jsx(Add, { "aria-hidden": true })
-      }
-    ),
-    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": deleteButtonAriaLabel,
-              children: /* @__PURE__ */ jsx(CloseXS, { "aria-hidden": true, iconSize: "XS" })
-            }
-          ) })
-        ]
-      },
-      `saved-color-${color}-${index}`
-    ))
-  ] });
-};
-export {
-  SavedColors,
-  staticClasses as colorPickerSavedColorsClasses
-};
-//# sourceMappingURL=SavedColors.mjs.map

package/dist/esm/ColorPicker/SavedColors/SavedColors.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SavedColors.mjs","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"../../Button\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\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  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n  const {\n    colors,\n    onClickColor,\n    onAddColor,\n    onRemoveColor,\n    deleteButtonAriaLabel,\n    addButtonAriaLabel,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerSavedColors\", props);\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        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\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={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA2Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAY;AAAA,QAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,UAAU;AAAA,cACV,cAAY;AAAA,cAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,MAAK;AAAA,YAAA;AAAA,UAAA,GAEvC;AAAA,QAAA;AAAA,MAAA;AAAA,MAtBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAAA,CAwBrC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.mjs

@@ -1,58 +0,0 @@
-import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.mjs";
-const name = "HvColorPicker-SavedColors";
-const { staticClasses, useClasses } = createClasses(name, {
-  addButton: {
-    margin: "4px",
-    width: "32px",
-    height: "32px"
-  },
-  root: {
-    display: "flex",
-    flexWrap: "wrap",
-    position: "relative",
-    alignItems: "center",
-    padding: 0,
-    width: "calc(100% + 8px)",
-    margin: "-4px -4px"
-  },
-  swatchRoot: { position: "relative" },
-  swatchWrap: {
-    width: "32px",
-    height: "32px",
-    margin: "4px",
-    "& > span > div": {
-      borderRadius: theme.radii.base
-    }
-  },
-  removeButtonRoot: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: 16,
-    width: 16,
-    background: theme.colors.atmo1,
-    borderRadius: theme.radii.base
-  },
-  removeButton: {
-    height: 16,
-    width: 16,
-    minWidth: 16,
-    minHeight: 16,
-    padding: 0,
-    margin: 0,
-    "& div > span": {
-      height: 16,
-      width: 16,
-      "& > div": { height: 16, width: 16 }
-    }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
-//# sourceMappingURL=SavedColors.styles.mjs.map

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SavedColors.styles.mjs","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  addButton: {\n    margin: \"4px\",\n    width: \"32px\",\n    height: \"32px\",\n  },\n  root: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    alignItems: \"center\",\n    padding: 0,\n    width: \"calc(100% + 8px)\",\n    margin: \"-4px -4px\",\n  },\n  swatchRoot: { position: \"relative\" },\n  swatchWrap: {\n    width: \"32px\",\n    height: \"32px\",\n    margin: \"4px\",\n\n    \"& > span > div\": {\n      borderRadius: theme.radii.base,\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":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IACrC;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Container/Container.mjs

@@ -1,62 +0,0 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from "react";
-import { theme } from "@hitachivantara/uikit-styles";
-import { useTheme } from "@mui/material/styles";
-import MuiContainer from "@mui/material/Container";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
-import { useClasses, staticClasses } from "./Container.styles.mjs";
-const HvContainer = forwardRef(
-  (props, ref) => {
-    const {
-      maxWidth = false,
-      classes: classesProp,
-      className,
-      fixed,
-      disableGutters,
-      ...others
-    } = useDefaultProps("HvContainer", props);
-    const { classes, cx, css } = useClasses(classesProp);
-    const muiTheme = useTheme();
-    const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
-    const gutters = upMd ? {
-      // Increases specificity
-      [`&.${staticClasses.root}`]: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
-      }
-    } : {
-      // Increases specificity
-      [`&.${staticClasses.root}`]: {
-        paddingLeft: theme.space.sm,
-        paddingRight: theme.space.sm
-      }
-    };
-    return /* @__PURE__ */ jsx(
-      MuiContainer,
-      {
-        className: cx({ [css(gutters)]: !disableGutters }, className),
-        classes: {
-          root: classes.root,
-          disableGutters: classes.disableGutters,
-          fixed: classes.fixed,
-          maxWidthXs: classes.maxWidthXs,
-          maxWidthSm: classes.maxWidthSm,
-          maxWidthMd: classes.maxWidthMd,
-          maxWidthLg: classes.maxWidthLg,
-          maxWidthXl: classes.maxWidthXl
-        },
-        ref,
-        maxWidth,
-        fixed,
-        disableGutters,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvContainer,
-  staticClasses as containerClasses
-};
-//# sourceMappingURL=Container.mjs.map