@hitachivantara/uikit-react-core 5.27.6 → 5.27.7

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const color = require("react-color/lib/helpers/color");
 const Fields_styles = require("./Fields.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Input = require("../../Input/Input.cjs");
 function _interopNamespace(e) {
   if (e && e.__esModule)
@@ -93,42 +93,12 @@ const Fields = ({
       b: colorPart === "b" ? Number(value) : rgb == null ? void 0 : rgb.b
     }, event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: cx(classes.fields, className),
-    children: [/* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      ref: hexInputRef,
-      className: classes.double,
-      label: "HEX",
-      value: internalHex == null ? void 0 : internalHex.replace("#", ""),
-      onChange: onChangeHex,
-      onBlur: () => setInternalHex(hex),
-      disableClear: true
-    }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      ref: redInputRef,
-      className: classes.single,
-      label: "R",
-      value: `${internalRed}`,
-      onChange: (event, value) => onChangeRbg(event, value, "r"),
-      onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r),
-      disableClear: true
-    }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      ref: greenInputRef,
-      className: classes.single,
-      label: "G",
-      value: `${internalGreen}`,
-      onChange: (event, value) => onChangeRbg(event, value, "g"),
-      onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g),
-      disableClear: true
-    }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      ref: blueInputRef,
-      className: classes.single,
-      label: "B",
-      value: `${internalBlue}`,
-      onChange: (event, value) => onChangeRbg(event, value, "b"),
-      onBlur: () => setInternalBlue(rgb == null ? void 0 : rgb.b),
-      disableClear: true
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.fields, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: hexInputRef, className: classes.double, label: "HEX", value: internalHex == null ? void 0 : internalHex.replace("#", ""), onChange: onChangeHex, onBlur: () => setInternalHex(hex), disableClear: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: redInputRef, className: classes.single, label: "R", value: `${internalRed}`, onChange: (event, value) => onChangeRbg(event, value, "r"), onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r), disableClear: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: greenInputRef, className: classes.single, label: "G", value: `${internalGreen}`, onChange: (event, value) => onChangeRbg(event, value, "g"), onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g), disableClear: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: blueInputRef, className: classes.single, label: "B", value: `${internalBlue}`, onChange: (event, value) => onChangeRbg(event, value, "b"), onBlur: () => setInternalBlue(rgb == null ? void 0 : rgb.b), disableClear: true })
+  ] });
 };
 exports.colorPickerFieldsClasses = Fields_styles.staticClasses;
 exports.Fields = Fields;

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

@@ -1 +1 @@
-{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\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 = ({\n  className,\n  onChange,\n  rgb,\n  hex,\n  classes: classesProp,\n}: FieldsProps) => {\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":["Fields","className","onChange","rgb","hex","classes","classesProp","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","children","_jsx","HvInput","ref","double","label","replace","onBlur","disableClear","single"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACE,MAAM;AACX,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,cAAAA,WAAWF,WAAW;AAC9C,QAAM,CAACG,aAAaC,cAAc,IAAIC,eAASP,GAAG;AAClD,QAAM,CAACQ,aAAaC,cAAc,IAAIF,MAAAA,SAASR,2BAAKW,CAAC;AACrD,QAAM,CAACC,eAAeC,gBAAgB,IAAIL,MAAAA,SAASR,2BAAKc,CAAC;AACzD,QAAM,CAACC,cAAcC,eAAe,IAAIR,MAAAA,SAASR,2BAAKiB,CAAC;AAEjDC,QAAAA,cAAcC,aAAyB,IAAI;AAC3CC,QAAAA,cAAcD,aAAyB,IAAI;AAC3CE,QAAAA,gBAAgBF,aAAyB,IAAI;AAC7CG,QAAAA,eAAeH,aAAyB,IAAI;AAElDI,QAAAA,UAAU,MAAM;AACVC,QAAAA,SAASC,kBAAkBP,YAAYQ,SAAS;AAClDnB,qBAAeN,GAAG;AAAA,IACpB;AAAA,EAAA,GACC,CAACA,GAAG,CAAC;AAERsB,QAAAA,UAAU,MAAM;AACVC,QAAAA,SAASC,kBAAkBL,YAAYM,SAAS;AAClDhB,qBAAeV,2BAAKW,CAAC;AAAA,IACvB;AAEIa,QAAAA,SAASC,kBAAkBJ,cAAcK,SAAS;AACpDb,uBAAiBb,2BAAKc,CAAC;AAAA,IACzB;AAEIU,QAAAA,SAASC,kBAAkBH,aAAaI,SAAS;AACnDV,sBAAgBhB,2BAAKiB,CAAC;AAAA,IACxB;AAAA,EAAA,GACC,CAACjB,GAAG,CAAC;AAEF2B,QAAAA,eAAeA,CACnBC,MAMAC,UACG;AACH,QAAID,KAAK3B,OAAO6B,iBAAMC,WAAWH,KAAK3B,GAAG,GAAG;AAExC,eAAA;AAAA,QACEA,KAAK2B,KAAK3B;AAAAA,QACV+B,QAAQ;AAAA,SAEVH,KACF;AAAA,IAAA,WACSD,KAAKjB,KAAKiB,KAAKd,KAAKc,KAAKX,GAAG;AAEnC,eAAA;AAAA,QACEN,GAAGiB,KAAKjB,MAAKX,2BAAKW;AAAAA,QAClBG,GAAGc,KAAKd,MAAKd,2BAAKc;AAAAA,QAClBG,GAAGW,KAAKX,MAAKjB,2BAAKiB;AAAAA,QAClBe,QAAQ;AAAA,SAEVH,KACF;AAAA,IACF;AAAA,EAAA;AAGII,QAAAA,cAAcA,CAACJ,OAA+BK,UAAkB;AACpE3B,mBAAe2B,KAAK;AACP,iBAAA;AAAA,MAAEjC,KAAKiC;AAAAA,OAASL,KAAK;AAAA,EAAA;AAGpC,QAAMM,cAAcA,CAClBN,OACAK,OACAE,cACG;AACH,QAAIA,cAAc;AAAoBC,qBAAAA,OAAOH,KAAK,CAAC;AACnD,QAAIE,cAAc;AAAsBC,uBAAAA,OAAOH,KAAK,CAAC;AACrD,QAAIE,cAAc;AAAqBC,sBAAAA,OAAOH,KAAK,CAAC;AAGlD,iBAAA;AAAA,MACEvB,GAAGyB,cAAc,MAAMC,OAAOH,KAAK,IAAIlC,2BAAKW;AAAAA,MAC5CG,GAAGsB,cAAc,MAAMC,OAAOH,KAAK,IAAIlC,2BAAKc;AAAAA,MAC5CG,GAAGmB,cAAc,MAAMC,OAAOH,KAAK,IAAIlC,2BAAKiB;AAAAA,OAE9CY,KACF;AAAA,EAAA;AAGF,yCACE,OAAA;AAAA,IAAK/B,WAAWM,GAAGF,QAAQoC,QAAQxC,SAAS;AAAA,IAAEyC,UAAA,CAC5CC,2BAAAA,IAACC,eAAO;AAAA,MACNC,KAAKxB;AAAAA,MACLpB,WAAWI,QAAQyC;AAAAA,MACnBC,OAAM;AAAA,MACNV,OAAO5B,2CAAauC,QAAQ,KAAK;AAAA,MACjC9C,UAAUkC;AAAAA,MACVa,QAAQA,MAAMvC,eAAeN,GAAG;AAAA,MAChC8C,cAAY;AAAA,IAAA,CACb,GACDP,2BAAAA,IAACC,eAAO;AAAA,MACNC,KAAKtB;AAAAA,MACLtB,WAAWI,QAAQ8C;AAAAA,MACnBJ,OAAM;AAAA,MACNV,OAAQ,GAAEzB,WAAY;AAAA,MACtBV,UAAUA,CAAC8B,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG;AAAA,MACzDY,QAAQA,MAAMpC,eAAeV,2BAAKW,CAAC;AAAA,MACnCoC,cAAY;AAAA,IAAA,CACb,GACDP,2BAAAA,IAACC,eAAO;AAAA,MACNC,KAAKrB;AAAAA,MACLvB,WAAWI,QAAQ8C;AAAAA,MACnBJ,OAAM;AAAA,MACNV,OAAQ,GAAEtB,aAAc;AAAA,MACxBb,UAAUA,CAAC8B,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG;AAAA,MACzDY,QAAQA,MAAMjC,iBAAiBb,2BAAKc,CAAC;AAAA,MACrCiC,cAAY;AAAA,IAAA,CACb,GACDP,2BAAAA,IAACC,eAAO;AAAA,MACNC,KAAKpB;AAAAA,MACLxB,WAAWI,QAAQ8C;AAAAA,MACnBJ,OAAM;AAAA,MACNV,OAAQ,GAAEnB,YAAa;AAAA,MACvBhB,UAAUA,CAAC8B,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG;AAAA,MACzDY,QAAQA,MAAM9B,gBAAgBhB,2BAAKiB,CAAC;AAAA,MACpC8B,cAAY;AAAA,IAAA,CACb,CAAC;AAAA,EAAA,CACC;AAET;;;"}
+{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\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 = ({\n  className,\n  onChange,\n  rgb,\n  hex,\n  classes: classesProp,\n}: FieldsProps) => {\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":["Fields","className","onChange","rgb","hex","classes","classesProp","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","jsx","HvInput","double","replace","single"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const common = require("react-color/lib/components/common");
 const reactColor = require("react-color");
 const useTheme = require("../../../hooks/useTheme.cjs");
 const Picker_styles = require("./Picker.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Fields = require("../Fields/Fields.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const Picker = reactColor.CustomPicker(({
@@ -23,43 +23,16 @@ const Picker = reactColor.CustomPicker(({
   const {
     classes
   } = Picker_styles.useClasses(classesProp);
-  const SaturationPointer = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classes == null ? void 0 : classes.saturationPointer
-  }), [classes == null ? void 0 : classes.saturationPointer]);
-  const HueSlider = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classes == null ? void 0 : classes.hueSlider
-  }), [classes == null ? void 0 : classes.hueSlider]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      className: classes.title,
-      variant: "caption1",
-      children: title
-    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.pickers,
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.saturation,
-        children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, {
-          hsl,
-          hsv,
-          onChange,
-          pointer: SaturationPointer
-        })
-      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.hue,
-        children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, {
-          direction: activeTheme == null ? void 0 : activeTheme.colorPicker.hueDirection,
-          hsl,
-          onChange,
-          pointer: HueSlider
-        })
-      })]
-    }), /* @__PURE__ */ jsxRuntime.jsx(Fields.Fields, {
-      className: classes.fields,
-      rgb,
-      hex,
-      onChange
-    })]
-  });
+  const SaturationPointer = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes == null ? void 0 : classes.saturationPointer }), [classes == null ? void 0 : classes.saturationPointer]);
+  const HueSlider = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes == null ? void 0 : classes.hueSlider }), [classes == null ? void 0 : classes.hueSlider]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.title, variant: "caption1", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pickers, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.saturation, children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, { hsl, hsv, onChange, pointer: SaturationPointer }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, { direction: activeTheme == null ? void 0 : activeTheme.colorPicker.hueDirection, hsl, onChange, pointer: HueSlider }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Fields.Fields, { className: classes.fields, rgb, hex, onChange })
+  ] });
 });
 exports.colorPickerPickerClasses = Picker_styles.staticClasses;
 exports.Picker = Picker;

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { 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 \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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 = CustomPicker(\n  ({\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);\n"],"names":["Picker","CustomPicker","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"],"mappings":";;;;;;;;;;AAsBaA,MAAAA,SAASC,wBACpB,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,cAAAA,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,MAAAA,YACxB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASS;AAAAA,EAAoB,CAAA,GACnD,CAACT,mCAASS,iBAAiB,CAC7B;AAEA,QAAMC,YAAYJ,MAAAA,YAChB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASW;AAAAA,EAAY,CAAA,GAC3C,CAACX,mCAASW,SAAS,CACrB;AAEA,yCACEC,WAAAA,UAAA;AAAA,IAAAC,UACGd,CAAAA,SACCQ,2BAAAA,IAACO,yBAAY;AAAA,MAACN,WAAWR,QAAQD;AAAAA,MAAOgB,SAAQ;AAAA,MAAUF,UACvDd;AAAAA,IAAAA,CACW,GAEhBiB,2BAAAA,KAAA,OAAA;AAAA,MAAKR,WAAWR,QAAQiB;AAAAA,MAAQJ,WAC9BN,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQkB;AAAAA,QAAWL,yCAChCM,mBAAU;AAAA,UACTvB;AAAAA,UACAC;AAAAA,UACAH;AAAAA,UACA0B,SAASf;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,GACLE,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQqB;AAAAA,QAAIR,yCACzBS,YAAG;AAAA,UACFC,WAAWrB,2CAAasB,YAAYC;AAAAA,UACpC7B;AAAAA,UACAF;AAAAA,UACA0B,SAASV;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH,GACLH,2BAAAA,IAACmB,eAAM;AAAA,MACLlB,WAAWR,QAAQ2B;AAAAA,MACnBhC;AAAAA,MACAG;AAAAA,MACAJ;AAAAA,IAAAA,CACD,CAAC;AAAA,EAAA,CACF;AAEN,CACF;;;"}
+{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/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 \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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 = CustomPicker(\n  ({\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);\n"],"names":["Picker","CustomPicker","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","jsx","saturationPointer","HueSlider","hueSlider","HvTypography","jsxs","pickers","saturation","Saturation","hue","Hue","colorPicker","hueDirection","Fields","fields"],"mappings":";;;;;;;;;;AAsBaA,MAAAA,SAASC,wBACpB,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,cAAAA,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,MAAAA,YACxB,MAAMC,2BAAA,IAAC,OAAI,EAAA,WAAWP,mCAASQ,kBAAAA,CAAqB,GACpD,CAACR,mCAASQ,iBAAiB,CAC7B;AAEA,QAAMC,YAAYH,MAAAA,YAChB,MAAMC,2BAAA,IAAC,OAAI,EAAA,WAAWP,mCAASU,UAAAA,CAAa,GAC5C,CAACV,mCAASU,SAAS,CACrB;AAEA,SAEKX,2BAAAA,KAAAA,qBAAAA,EAAAA,UAAAA;AAAAA,IAAAA,wCACEY,yBAAa,EAAA,WAAWX,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEDa,2BAAA,KAAA,OAAA,EAAI,WAAWZ,QAAQa,SACtB,UAAA;AAAA,MAACN,2BAAA,IAAA,OAAA,EAAI,WAAWP,QAAQc,YACtB,UAAAP,2BAAA,IAACQ,OACC,YAAA,EAAA,KACA,KACA,UACA,SAASV,kBAAkB,CAAA,GAE/B;AAAA,MACCE,+BAAA,OAAA,EAAI,WAAWP,QAAQgB,KACtB,UAACT,2BAAA,IAAAU,YAAA,EACC,WAAWf,2CAAagB,YAAYC,cACpC,KACA,UACA,SAASV,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,mCACCW,OAAAA,QACC,EAAA,WAAWpB,QAAQqB,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ,CACF;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\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 = ({\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":";;;;;;AAqBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKP,WAAWG,GAAGF,QAAQO,MAAMR,SAAS;AAAA,IAAES,UACzCV,CAAAA,SACCW,2BAAAA,IAACC,yBAAY;AAAA,MAACX,WAAWC,QAAQF;AAAAA,MAAOa,SAAQ;AAAA,MAAUH,UACvDV;AAAAA,IAAAA,CACW,GAEhBW,2BAAAA,IAAA,OAAA;AAAA,MAAKV,WAAWC,QAAQH;AAAAA,MAAOW,UAC5BX,OAAOe,IAAI,CAACC,OAAOC,yCAClB,OAAA;AAAA,QAEEf,WAAWC,QAAQe;AAAAA,QAAWP,yCAE7BQ,eAAM;AAAA,UACLH;AAAAA,UACAjB,SAASQ;AAAAA,UACTa,YAAY;AAAA,YACVC,WAAY,4CAA2CL,KAAM;AAAA,UAC/D;AAAA,QAAA,CACD;AAAA,MAAA,GATK,qBAAoBA,KAAM,IAAGC,KAAM,EAUtC,CACN;AAAA,IAAA,CACE,CAAC;AAAA,EAAA,CACH;AAET;;;"}
+{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\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 = ({\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","HvTypography","jsx","map","color","index","swatchWrap","Swatch","boxShadow"],"mappings":";;;;;;AAqBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACG,OAAI,EAAA,WAAWJ,GAAGF,QAAQO,MAAMR,SAAS,GACvCD,UAAAA;AAAAA,IAAAA,wCACEU,yBAAa,EAAA,WAAWR,QAAQF,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEFW,2BAAAA,IAAC,SAAI,WAAWT,QAAQH,QACrBA,UAAOa,OAAAA,IAAI,CAACC,OAAOC,yCACjB,OAEC,EAAA,WAAWZ,QAAQa,YAEnB,UAAAJ,2BAAAA,IAACK,iBACC,OACA,SAASV,aACT,YAAY;AAAA,MACVW,WAAY,4CAA2CJ,KAAM;AAAA,IAAA,GAC7D,KARE,qBAAoBA,KAAM,IAAGC,KAAM,EAU3C,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { 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 \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\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 = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonAriaLabel,\n  addButtonAriaLabel,\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        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":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","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":";;;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,mBAAAA,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,2BAAAA,IAACC,iBAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,SAASlB;AAAAA,MACT,cAAYG;AAAAA,MAAmBS,yCAE9BO,qBAAG;AAAA,QAAC,eAAA;AAAA,MAAA,CAAa;AAAA,IAAA,CACV,GACTrB,OAAOsB,IAAI,CAACC,OAAOC,0CAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,yCAChCa,eAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN,KAAM;AAAA,UAC/D;AAAA,QAAA,CACD;AAAA,MAAA,CACE,GACLR,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQwB;AAAAA,QAAiBhB,yCACtCE,iBAAQ;AAAA,UACPJ,WAAWN,QAAQyB;AAAAA,UACnBb,SAAQ;AAAA,UACRE,SAASA,MAAMjB,cAAcoB,OAAOC,KAAK;AAAA,UACzCQ,UAAU;AAAA,UACV,cAAY5B;AAAAA,UAAsBU,yCAEjCmB,yBAAO;AAAA,YAAC,eAAW;AAAA,YAACC,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,CAC5B;AAAA,MAAA,CACP,CAAC;AAAA,IAAA,GAtBA,eAAcX,KAAM,IAAGC,KAAM,EAuBhC,CACN,CAAC;AAAA,EAAA,CACC;AAET;;;"}
+{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/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 \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\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 = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonAriaLabel,\n  addButtonAriaLabel,\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        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":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useClasses","handleClick","hex","source","jsxs","root","jsx","HvButton","addButton","Add","map","color","index","swatchRoot","swatchWrap","Swatch","boxShadow","removeButtonRoot","removeButton","CloseXS"],"mappings":";;;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,mBAAAA,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACGC,2BAAAA,KAAA,OAAA,EAAI,WAAWN,QAAQO,MACtB,UAAA;AAAA,IAAAC,+BAACC,OAAAA,YACC,WAAWT,QAAQU,WACnB,SAAQ,mBACR,MAAI,MACJ,SAASd,YACT,cAAYG,oBAEZ,UAAAS,2BAAA,IAACG,gBAAI,KAAA,EAAA,eAAW,KAAA,CAAA,GAClB;AAAA,IACCjB,OAAOkB,IAAI,CAACC,OAAOC,UACjBR,2BAAAA,KAAA,OAAA,EAEC,WAAWN,QAAQe,YAEnB,UAAA;AAAA,MAACP,2BAAAA,IAAA,OAAA,EAAI,WAAWR,QAAQgB,YACtB,yCAACC,OACC,QAAA,EAAA,OACA,SAASd,aACT,YAAY;AAAA,QACVe,WAAY,4CAA2CL,KAAM;AAAA,SAC7D,EAEN,CAAA;AAAA,MACCL,2BAAA,IAAA,OAAA,EAAI,WAAWR,QAAQmB,kBACtB,UAAAX,2BAAA,IAACC,OACC,UAAA,EAAA,WAAWT,QAAQoB,cACnB,SAAQ,mBACR,SAAS,MAAMvB,cAAcgB,OAAOC,KAAK,GACzC,UAAU,GACV,cAAYhB,uBAEZ,UAACU,2BAAAA,IAAAa,gBAAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAI,CAAA,EACpC,CAAA,GACF;AAAA,IAAA,EAAA,GAtBM,eAAcR,KAAM,IAAGC,KAAM,EAuBrC,CACD;AAAA,EACH,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/Container/Container.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const styles = require("@mui/material/styles");
@@ -7,7 +8,6 @@ const MuiContainer = require("@mui/material/Container");
 const useMediaQuery = require("@mui/material/useMediaQuery");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Container_styles = require("./Container.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiContainer__default = /* @__PURE__ */ _interopDefault(MuiContainer);
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
@@ -40,26 +40,18 @@ const HvContainer = React.forwardRef((props, ref) => {
       paddingRight: uikitStyles.theme.space.sm
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiContainer__default.default, {
-    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
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiContainer__default.default, { 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 });
 });
 exports.containerClasses = Container_styles.staticClasses;
 exports.HvContainer = HvContainer;

package/dist/cjs/components/Container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n  ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes: classesProp,\n      className,\n      fixed,\n      disableGutters,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const muiTheme = useTheme();\n\n    const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n    const gutters = upMd\n      ? {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n          },\n        }\n      : {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.space.sm,\n            paddingRight: theme.space.sm,\n          },\n        };\n\n    return (\n      <MuiContainer\n        className={cx({ [css(gutters)]: !disableGutters }, className)}\n        classes={{\n          root: classes.root,\n          disableGutters: classes.disableGutters,\n          fixed: classes.fixed,\n          maxWidthXs: classes.maxWidthXs,\n          maxWidthSm: classes.maxWidthSm,\n          maxWidthMd: classes.maxWidthMd,\n          maxWidthLg: classes.maxWidthLg,\n          maxWidthXl: classes.maxWidthXl,\n        }}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        disableGutters={disableGutters}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;;;;;;AAgDO,MAAMA,cAAcC,MAAAA,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,iBAAAA,WAAWR,WAAW;AAEnD,QAAMS,WAAWC,OAAAA;AAEjB,QAAMC,OAAOC,uBAAAA,QAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,+BAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,+BAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,YAAAA,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAGN,wCACGC,sBAAAA,SAAY;AAAA,IACXvB,WAAWK,GAAG;AAAA,MAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,OAAkBF,SAAS;AAAA,IAC5DF,SAAS;AAAA,MACPkB,MAAMlB,QAAQkB;AAAAA,MACdd,gBAAgBJ,QAAQI;AAAAA,MACxBD,OAAOH,QAAQG;AAAAA,MACfuB,YAAY1B,QAAQ0B;AAAAA,MACpBC,YAAY3B,QAAQ2B;AAAAA,MACpBC,YAAY5B,QAAQ4B;AAAAA,MACpBC,YAAY7B,QAAQ6B;AAAAA,MACpBC,YAAY9B,QAAQ8B;AAAAA,IACtB;AAAA,IACAhC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IAA+B,GAC3BC;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n  ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes: classesProp,\n      className,\n      fixed,\n      disableGutters,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const muiTheme = useTheme();\n\n    const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n    const gutters = upMd\n      ? {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n          },\n        }\n      : {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.space.sm,\n            paddingRight: theme.space.sm,\n          },\n        };\n\n    return (\n      <MuiContainer\n        className={cx({ [css(gutters)]: !disableGutters }, className)}\n        classes={{\n          root: classes.root,\n          disableGutters: classes.disableGutters,\n          fixed: classes.fixed,\n          maxWidthXs: classes.maxWidthXs,\n          maxWidthSm: classes.maxWidthSm,\n          maxWidthMd: classes.maxWidthMd,\n          maxWidthLg: classes.maxWidthLg,\n          maxWidthXl: classes.maxWidthXl,\n        }}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        disableGutters={disableGutters}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","jsx","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;;;;;;AAgDO,MAAMA,cAAcC,MAAAA,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,iBAAAA,WAAWR,WAAW;AAEnD,QAAMS,WAAWC,OAAAA;AAEjB,QAAMC,OAAOC,uBAAAA,QAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,+BAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,+BAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,YAAAA,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,YAAAA,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAIJ,SAAAC,+BAACC,sBAAAA,SACC,EAAA,WAAWnB,GAAG;AAAA,IAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,EAAAA,GAAkBF,SAAS,GAC5D,SAAS;AAAA,IACPgB,MAAMlB,QAAQkB;AAAAA,IACdd,gBAAgBJ,QAAQI;AAAAA,IACxBD,OAAOH,QAAQG;AAAAA,IACfwB,YAAY3B,QAAQ2B;AAAAA,IACpBC,YAAY5B,QAAQ4B;AAAAA,IACpBC,YAAY7B,QAAQ6B;AAAAA,IACpBC,YAAY9B,QAAQ8B;AAAAA,IACpBC,YAAY/B,QAAQ+B;AAAAA,EAAAA,GAEtB,KACA,UACA,OACA,gBACI1B,GAAAA,OACJ,CAAA;AAEN,CACF;;;"}

package/dist/cjs/components/Controls/Controls.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const setId = require("../../utils/setId.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const ControlsContext = require("./context/ControlsContext.cjs");
 const Controls_styles = require("./Controls.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MultiButton = require("../MultiButton/MultiButton.cjs");
 const Button = require("../Button/Button.cjs");
 const HvControls = (props) => {
@@ -47,37 +47,20 @@ const HvControls = (props) => {
   const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;
   const leftChildren = childrenArray.slice(0, childrenIndexCut);
   const rightChildren = childrenArray.slice(childrenIndexCut, childrenCount || 0);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    id,
-    className: cx(classes.root, className),
-    children: /* @__PURE__ */ jsxRuntime.jsxs(ControlsContext.HvControlsContextProvider, {
-      value: {
-        onSearch: onSearchHandler,
-        onSort: onSortHandler
-      },
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: cx(classes.section, classes.leftSection),
-        children: leftChildren
-      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(classes.section, classes.rightSection),
-        children: [rightChildren, views && !hideViewSwitcher && (views == null ? void 0 : views.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, {
-          id: setId.setId(id, "view-multi-button"),
-          children: views.map(({
-            id: btnId,
-            icon,
-            ...others
-          }) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-            id: btnId,
-            icon: true,
-            selected: currentView === btnId,
-            onClick: (evt) => onViewChangeHandler(evt, btnId),
-            ...others,
-            children: icon
-          }, btnId))
-        })]
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsxs(ControlsContext.HvControlsContextProvider, { value: {
+    onSearch: onSearchHandler,
+    onSort: onSortHandler
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
+      rightChildren,
+      views && !hideViewSwitcher && (views == null ? void 0 : views.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, { id: setId.setId(id, "view-multi-button"), children: views.map(({
+        id: btnId,
+        icon,
+        ...others
+      }) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: btnId, icon: true, selected: currentView === btnId, onClick: (evt) => onViewChangeHandler(evt, btnId), ...others, children: icon }, btnId)) })
+    ] })
+  ] }) });
 };
 exports.controlsClasses = Controls_styles.staticClasses;
 exports.HvControls = HvControls;

package/dist/cjs/components/Controls/Controls.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":["HvControls","props","id","className","classes","classesProp","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","useDefaultProps","cx","useClasses","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","root","HvControlsContextProvider","onSearch","onSort","_jsx","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;AA2DaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,cAAcZ,KAAK;AAEjC,QAAA;AAAA,IAAEG;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWV,WAAW;AAE9C,QAAM,CAACW,aAAaC,cAAc,IAAIC,cAAAA,cACpCV,cACAC,WACF;AAEMU,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBT,iDAAeQ,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAkBA,CAACC,UAAehB;;AAAAA,wDAAWiB,oBAAXjB,mCAA6BgB;AAAAA;AACrE,QAAME,gBAAgBA,CAACF;;AACrBhB,wDAAWmB,cAAXnB,mCAAuB,CACrB;AAAA,MACEL,IAAIqB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMrB,QAAQ;AACvCsB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQvB,QAAQ;AAE/C,QAAMwB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAEA,wCACE,OAAA;AAAA,IAAK3B;AAAAA,IAAQC,WAAWW,GAAGV,QAAQoC,MAAMrC,SAAS;AAAA,IAAEO,0CACjD+B,2CAAyB;AAAA,MACxBlB,OAAO;AAAA,QACLmB,UAAUpB;AAAAA,QACVqB,QAAQlB;AAAAA,MACV;AAAA,MAAEf,WAEFkC,2BAAAA,IAAA,OAAA;AAAA,QAAKzC,WAAWW,GAAGV,QAAQyC,SAASzC,QAAQ0C,WAAW;AAAA,QAAEpC,UACtD2B;AAAAA,MAAAA,CACE,GACLU,2BAAAA,KAAA,OAAA;AAAA,QAAK5C,WAAWW,GAAGV,QAAQyC,SAASzC,QAAQ4C,YAAY;AAAA,QAAEtC,WACvD6B,eACAjC,SAAS,CAACK,qBAAoBL,+BAAO2C,UAAS,KAC7CL,2BAAAA,IAACM,2BAAa;AAAA,UAAChD,IAAIiD,MAAAA,MAAMjD,IAAI,mBAAmB;AAAA,UAAEQ,UAC/CJ,MAAM8C,IAAI,CAAC;AAAA,YAAElD,IAAImB;AAAAA,YAAOgC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,qCAC/BC,OAAAA,UAAQ;AAAA,YACPrD,IAAImB;AAAAA,YAEJgC,MAAI;AAAA,YACJG,UAAUxC,gBAAgBK;AAAAA,YAC1BoC,SAAUrC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CiC;AAAAA,YAAM5C,UAET2C;AAAAA,UAAI,GANAhC,KAOG,CACX;AAAA,QAAA,CACY,CAChB;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACmB;AAAA,EAAA,CACxB;AAET;;;"}
+{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":["HvControls","props","id","className","classes","classesProp","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","useDefaultProps","cx","useClasses","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","jsx","root","jsxs","HvControlsContextProvider","onSearch","onSort","section","leftSection","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton"],"mappings":";;;;;;;;;;;AA2DaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,cAAcZ,KAAK;AAEjC,QAAA;AAAA,IAAEG;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWV,WAAW;AAE9C,QAAM,CAACW,aAAaC,cAAc,IAAIC,cAAAA,cACpCV,cACAC,WACF;AAEMU,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBT,iDAAeQ,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAkBA,CAACC,UAAehB;;AAAAA,wDAAWiB,oBAAXjB,mCAA6BgB;AAAAA;AACrE,QAAME,gBAAgBA,CAACF;;AACrBhB,wDAAWmB,cAAXnB,mCAAuB,CACrB;AAAA,MACEL,IAAIqB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMrB,QAAQ;AACvCsB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQvB,QAAQ;AAE/C,QAAMwB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAGE,SAAAW,2BAAA,IAAC,OAAI,EAAA,IAAQ,WAAW1B,GAAGV,QAAQqC,MAAMtC,SAAS,GAChD,UAACuC,2BAAA,KAAAC,gBAAA,2BAAA,EACC,OAAO;AAAA,IACLC,UAAUtB;AAAAA,IACVuB,QAAQpB;AAAAA,EAGV,GAAA,UAAA;AAAA,IAACe,2BAAAA,IAAA,OAAA,EAAI,WAAW1B,GAAGV,QAAQ0C,SAAS1C,QAAQ2C,WAAW,GACpDV,UACH,aAAA,CAAA;AAAA,IACAK,gCAAC,SAAI,WAAW5B,GAAGV,QAAQ0C,SAAS1C,QAAQ4C,YAAY,GACrDT,UAAAA;AAAAA,MAAAA;AAAAA,MACAjC,SAAS,CAACK,qBAAoBL,+BAAO2C,UAAS,KAC7CT,2BAAAA,IAACU,YAAc,eAAA,EAAA,IAAIC,MAAAA,MAAMjD,IAAI,mBAAmB,GAC7CI,UAAAA,MAAM8C,IAAI,CAAC;AAAA,QAAElD,IAAImB;AAAAA,QAAOgC;AAAAA,QAAM,GAAGC;AAAAA,MAAO,qCACtCC,OAAAA,UACC,EAAA,IAAIlC,OAEJ,MAAI,MACJ,UAAUL,gBAAgBK,OAC1B,SAAUD,CAAQD,QAAAA,oBAAoBC,KAAKC,KAAK,GAChD,GAAIiC,QAEHD,UAAAA,KAAAA,GANIhC,KAOP,CACD,GACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/Controls/LeftControl/LeftControl.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const setId = require("../../../utils/setId.cjs");
 const LeftControl_styles = require("./LeftControl.styles.cjs");
 const ControlsContext = require("../context/ControlsContext.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Input = require("../../Input/Input.cjs");
 const HvLeftControl = ({
   id,
@@ -28,18 +28,10 @@ const HvLeftControl = ({
     onSearch == null ? void 0 : onSearch(e, value);
     onSearchHandler == null ? void 0 : onSearchHandler(value);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    id,
-    className: cx(classes.root, className),
-    ...others,
-    children: [!hideSearch && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      id: setId.setId(id, "search-input"),
-      type: "search",
-      placeholder,
-      onChange: onChangeFilter,
-      ...searchProps
-    }), children]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+    !hideSearch && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { id: setId.setId(id, "search-input"), type: "search", placeholder, onChange: onChangeFilter, ...searchProps }),
+    children
+  ] });
 };
 exports.leftControlClasses = LeftControl_styles.staticClasses;
 exports.HvLeftControl = HvLeftControl;