@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

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 { useDefaultProps } from \"@core/hooks\";\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":["Fields","props","className","onChange","rgb","hex","classes","classesProp","useDefaultProps","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,gBAAA,uBAAuBP,KAAK;AAC1C,QAAA;AAAA,IAAEK;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,cAAAA,WAAWH,WAAW;AAC9C,QAAM,CAACI,aAAaC,cAAc,IAAIC,eAASR,GAAG;AAClD,QAAM,CAACS,aAAaC,cAAc,IAAIF,MAAAA,SAAST,KAAKY,CAAC;AACrD,QAAM,CAACC,eAAeC,gBAAgB,IAAIL,MAAAA,SAAST,KAAKe,CAAC;AACzD,QAAM,CAACC,cAAcC,eAAe,IAAIR,MAAAA,SAAST,KAAKkB,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,qBAAeP,GAAG;AAAA,IACpB;AAAA,EAAA,GACC,CAACA,GAAG,CAAC;AAERuB,QAAAA,UAAU,MAAM;AACVC,QAAAA,SAASC,kBAAkBL,YAAYM,SAAS;AAClDhB,qBAAeX,KAAKY,CAAC;AAAA,IACvB;AAEIa,QAAAA,SAASC,kBAAkBJ,cAAcK,SAAS;AACpDb,uBAAiBd,KAAKe,CAAC;AAAA,IACzB;AAEIU,QAAAA,SAASC,kBAAkBH,aAAaI,SAAS;AACnDV,sBAAgBjB,KAAKkB,CAAC;AAAA,IACxB;AAAA,EAAA,GACC,CAAClB,GAAG,CAAC;AAEF4B,QAAAA,eAAeA,CACnBC,MAMAC,UACG;AACH,QAAID,KAAK5B,OAAO8B,iBAAMC,WAAWH,KAAK5B,GAAG,GAAG;AAExC,eAAA;AAAA,QACEA,KAAK4B,KAAK5B;AAAAA,QACVgC,QAAQ;AAAA,SAEVH,KACF;AAAA,IAAA,WACSD,KAAKjB,KAAKiB,KAAKd,KAAKc,KAAKX,GAAG;AAEnC,eAAA;AAAA,QACEN,GAAGiB,KAAKjB,KAAKZ,KAAKY;AAAAA,QAClBG,GAAGc,KAAKd,KAAKf,KAAKe;AAAAA,QAClBG,GAAGW,KAAKX,KAAKlB,KAAKkB;AAAAA,QAClBe,QAAQ;AAAA,SAEVH,KACF;AAAA,IACF;AAAA,EAAA;AAGII,QAAAA,cAAcA,CAACJ,OAA+BK,UAAkB;AACpE3B,mBAAe2B,KAAK;AACP,iBAAA;AAAA,MAAElC,KAAKkC;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,IAAInC,KAAKY;AAAAA,MAC5CG,GAAGsB,cAAc,MAAMC,OAAOH,KAAK,IAAInC,KAAKe;AAAAA,MAC5CG,GAAGmB,cAAc,MAAMC,OAAOH,KAAK,IAAInC,KAAKkB;AAAAA,OAE9CY,KACF;AAAA,EAAA;AAGF,yCACG,OAAI,EAAA,WAAWzB,GAAGH,QAAQqC,QAAQzC,SAAS,GAC1C,UAAA;AAAA,IAAC0C,2BAAAA,IAAAC,MAAA,SAAA,EACC,KAAKtB,aACL,WAAWjB,QAAQwC,QACnB,OAAM,OACN,OAAOnC,aAAaoC,QAAQ,KAAK,EAAE,GACnC,UAAUT,aACV,QAAQ,MAAM1B,eAAeP,GAAG,GAChC,cAAY,KAAA,CAAA;AAAA,IAEbuC,2BAAAA,IAAAC,MAAAA,SAAA,EACC,KAAKpB,aACL,WAAWnB,QAAQ0C,QACnB,OAAM,KACN,OAAQ,GAAElC,WAAY,IACtB,UAAU,CAACoB,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG,GACzD,QAAQ,MAAMxB,eAAeX,KAAKY,CAAC,GACnC,cAAY,KAAA,CAAA;AAAA,IAEb4B,2BAAAA,IAAAC,MAAAA,SAAA,EACC,KAAKnB,eACL,WAAWpB,QAAQ0C,QACnB,OAAM,KACN,OAAQ,GAAE/B,aAAc,IACxB,UAAU,CAACiB,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG,GACzD,QAAQ,MAAMrB,iBAAiBd,KAAKe,CAAC,GACrC,cAAY,KAAA,CAAA;AAAA,IAEbyB,2BAAAA,IAAAC,MAAAA,SAAA,EACC,KAAKlB,cACL,WAAWrB,QAAQ0C,QACnB,OAAM,KACN,OAAQ,GAAE5B,YAAa,IACvB,UAAU,CAACc,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG,GACzD,QAAQ,MAAMlB,gBAAgBjB,KAAKkB,CAAC,GACpC,cAAY,KAAA,CAAA;AAAA,EAEhB,EAAA,CAAA;AAEJ;;;"}
+{"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 { useDefaultProps } from \"@core/hooks\";\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":["useDefaultProps","useClasses","useState","useRef","useEffect","color","jsx","HvInput"],"mappings":"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"}

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

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classes = require("../../../utils/classes.cjs");
 const name = "HvColorPicker-Fields";
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses(name, {
+const { staticClasses, useClasses } = classes.createClasses(name, {
   fields: {
     width: "100%",
     display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"Fields.styles.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/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":["name","staticClasses","useClasses","createClasses","fields","width","display","paddingTop","marginRight","single","maxWidth","paddingLeft","marginLeft","double","paddingRight","textTransform"],"mappings":";;;AAEA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,aAAa;AAAA,EACf;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAU;AAAA,IACVC,aAAa;AAAA,IACb,WAAW;AAAA,MACTC,YAAY;AAAA,MACZJ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTG,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAE,QAAQ;AAAA,IACNH,UAAU;AAAA,IACVI,cAAc;AAAA,IACd,WAAW;AAAA,MACTC,eAAe;AAAA,MACfH,YAAY;AAAA,MACZJ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTG,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Fields.styles.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/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":["createClasses"],"mappings":";;;AAEA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAeA,QAAAA,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/cjs/components/ColorPicker/Picker/Picker.cjs

@@ -19,21 +19,47 @@ const Component = (props) => {
     title,
     classes: classesProp
   } = useDefaultProps.useDefaultProps("HvColorPickerPicker", props);
-  const {
-    activeTheme
-  } = useTheme.useTheme();
-  const {
-    classes
-  } = Picker_styles.useClasses(classesProp);
-  const SaturationPointer = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.saturationPointer }), [classes?.saturationPointer]);
-  const HueSlider = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.hueSlider }), [classes?.hueSlider]);
+  const { activeTheme } = useTheme.useTheme();
+  const { classes } = Picker_styles.useClasses(classesProp);
+  const SaturationPointer = React.useCallback(
+    () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.saturationPointer }),
+    [classes?.saturationPointer]
+  );
+  const HueSlider = React.useCallback(
+    () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.hueSlider }),
+    [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?.colorPicker.hueDirection, hsl, onChange, pointer: HueSlider }) })
+      /* @__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?.colorPicker.hueDirection,
+          hsl,
+          onChange,
+          pointer: HueSlider
+        }
+      ) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Fields.Fields, { className: classes.fields, rgb, hex, onChange })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Fields.Fields,
+      {
+        className: classes.fields,
+        rgb,
+        hex,
+        onChange
+      }
+    )
   ] });
 };
 const Picker = reactColor.CustomPicker(Component);

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 { useDefaultProps } from \"@core/hooks\";\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":["Component","props","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","useDefaultProps","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","jsx","saturationPointer","HueSlider","hueSlider","HvTypography","jsxs","pickers","saturation","Saturation","hue","Hue","colorPicker","hueDirection","Fields","fields","Picker","CustomPicker"],"mappings":";;;;;;;;;;;AAsCA,MAAMA,YAAYA,CAACC,UAAuB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,gBAAA,uBAAuBT,KAAK;AAC1C,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,cAAAA,WAAWJ,WAAW;AAE1C,QAAMK,oBAAoBC,MAAAA,YACxB,MAAMC,2BAAA,IAAC,OAAI,EAAA,WAAWR,SAASS,kBAAAA,CAAqB,GACpD,CAACT,SAASS,iBAAiB,CAC7B;AAEA,QAAMC,YAAYH,MAAAA,YAChB,MAAMC,2BAAA,IAAC,OAAI,EAAA,WAAWR,SAASW,UAAAA,CAAa,GAC5C,CAACX,SAASW,SAAS,CACrB;AAEA,SAEKZ,2BAAAA,KAAAA,qBAAAA,EAAAA,UAAAA;AAAAA,IAAAA,wCACEa,yBAAa,EAAA,WAAWZ,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEDc,2BAAA,KAAA,OAAA,EAAI,WAAWb,QAAQc,SACtB,UAAA;AAAA,MAACN,2BAAA,IAAA,OAAA,EAAI,WAAWR,QAAQe,YACtB,UAAAP,2BAAA,IAACQ,OACC,YAAA,EAAA,KACA,KACA,UACA,SAASV,kBAAkB,CAAA,GAE/B;AAAA,MACCE,+BAAA,OAAA,EAAI,WAAWR,QAAQiB,KACtB,UAACT,2BAAA,IAAAU,YAAA,EACC,WAAWf,aAAagB,YAAYC,cACpC,KACA,UACA,SAASV,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,mCACCW,OAAAA,QACC,EAAA,WAAWrB,QAAQsB,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ;AAEaC,MAAAA,SAASC,wBAAahC,SAAS;;;"}
+{"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 { useDefaultProps } from \"@core/hooks\";\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":["useDefaultProps","useTheme","useClasses","useCallback","jsx","jsxs","Fragment","HvTypography","Saturation","Hue","Fields","CustomPicker"],"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,IACPA,gBAAgB,gBAAA,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgBC,SAAAA;AACxB,QAAM,EAAE,QAAA,IAAYC,cAAA,WAAW,WAAW;AAE1C,QAAM,oBAAoBC,MAAA;AAAA,IACxB,MAAMC,2BAAAA,IAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAYD,MAAA;AAAA,IAChB,MAAMC,2BAAAA,IAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEKC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAA,wCACEC,yBAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEDF,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAACD,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAAA,2BAAA;AAAA,QAACI,OAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACCJ,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAAA,2BAAA;AAAA,QAACK,OAAA;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACAL,2BAAA;AAAA,MAACM,OAAA;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAASC,wBAAa,SAAS;;;"}

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

@@ -3,10 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../../utils/classes.cjs");
 const name = "HvColorPicker-Picker";
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses(name, {
+const { staticClasses, useClasses } = classes.createClasses(name, {
   pickers: {
     display: "flex",
     flexDirection: "column"

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.styles.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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":["name","staticClasses","useClasses","createClasses","pickers","display","flexDirection","saturation","width","height","marginRight","position","overflow","borderRadius","theme","radii","base","saturationPointer","boxShadow","transform","hue","marginTop","hueSlider","background","marginLeft","border","circle","title","fontWeight","fontWeights","semibold","marginBottom","fields"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,SAAS;AAAA,IACPC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,YAAY;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,aAAa;AAAA,IACbC,UAAU;AAAA,IACVC,UAAU;AAAA,IAEV,WAAW;AAAA,MACTC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,MAE1B,uBAAuB;AAAA,QACrBH,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,QAE1B,uBAAuB;AAAA,UACrBH,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBT,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRS,WAAY;AAAA;AAAA,IAEZL,cAAc;AAAA,IACdM,WAAW;AAAA,EACb;AAAA,EACAC,KAAK;AAAA,IACHX,QAAQ;AAAA,IACRD,OAAO;AAAA,IACPG,UAAU;AAAA,IACVC,UAAU;AAAA,IACVS,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnBR,cAAe,UAASC,YAAAA,MAAMC,MAAMC,IAAK;AAAA,IAC3C;AAAA,EACF;AAAA,EACAM,WAAW;AAAA,IACTd,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRc,YAAY;AAAA,IACZL,WAAW;AAAA,IACXM,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRZ,cAAcC,YAAAA,MAAMC,MAAMW;AAAAA,IAC1BP,WAAW;AAAA,EACb;AAAA,EACAQ,OAAO;AAAA,IACLC,YAAYd,YAAAA,MAAMe,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ,CAAC;AACX,CAAC;;;"}
+{"version":3,"file":"Picker.styles.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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":["createClasses","theme"],"mappings":";;;;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAeA,QAAAA,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,cAAcC,YAAAA,MAAM,MAAM;AAAA,MAE1B,uBAAuB;AAAA,QACrB,cAAcA,YAAAA,MAAM,MAAM;AAAA,QAE1B,uBAAuB;AAAA,UACrB,cAAcA,YAAAA,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,UAAUA,YAAAA,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,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,YAAYA,YAAAA,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ,CAAC;AACX,CAAC;;;"}

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

@@ -13,10 +13,7 @@ const PresetColors = (props) => {
     className,
     classes: classesProp
   } = useDefaultProps.useDefaultProps("HvColorPickerPresetColors", props);
-  const {
-    classes,
-    cx
-  } = PresetColors_styles.useClasses(classesProp);
+  const { classes, cx } = PresetColors_styles.useClasses(classesProp);
   const handleClick = (hex) => {
     onClick({
       hex,
@@ -25,9 +22,23 @@ const PresetColors = (props) => {
   };
   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}`)) })
+    /* @__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;

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 { useDefaultProps } from \"@core/hooks\";\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":["PresetColors","props","onClick","colors","title","className","classes","classesProp","useDefaultProps","cx","useClasses","handleClick","hex","source","root","HvTypography","jsx","map","color","index","swatchWrap","Swatch","boxShadow"],"mappings":";;;;;;;AAuBaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,gBAAA,6BAA6BP,KAAK;AAChD,QAAA;AAAA,IAAEK;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWH,WAAW;AAExCI,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACG,OAAI,EAAA,WAAWJ,GAAGH,QAAQQ,MAAMT,SAAS,GACvCD,UAAAA;AAAAA,IAAAA,wCACEW,yBAAa,EAAA,WAAWT,QAAQF,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEFY,2BAAAA,IAAC,SAAI,WAAWV,QAAQH,QACrBA,UAAOc,OAAAA,IAAI,CAACC,OAAOC,yCACjB,OAEC,EAAA,WAAWb,QAAQc,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;;;"}
+{"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 { useDefaultProps } from \"@core/hooks\";\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":["useDefaultProps","useClasses","HvTypography","jsx","Swatch"],"mappings":";;;;;;;AAuBa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACPA,gBAAgB,gBAAA,6BAA6B,KAAK;AACtD,QAAM,EAAE,SAAS,GAAG,IAAIC,+BAAW,WAAW;AAExC,QAAA,cAAc,CAAC,QAAgB;AAC3B,YAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,wCACEC,yBAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEFC,2BAAAA,IAAC,SAAI,WAAW,QAAQ,QACrB,UAAO,OAAA,IAAI,CAAC,OAAO,UAClBA,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAAA,2BAAA;AAAA,UAACC,OAAA;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/cjs/components/ColorPicker/PresetColors/PresetColors.styles.cjs

@@ -3,13 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../../utils/classes.cjs");
 const name = "HvColorPicker-PresetColors";
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses(name, {
-  root: {
-    width: "232px"
-  },
+const { staticClasses, useClasses } = classes.createClasses(name, {
+  root: { width: "232px" },
   colors: {
     display: "flex",
     flexWrap: "wrap",

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.styles.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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":["name","staticClasses","useClasses","createClasses","root","width","colors","display","flexWrap","position","margin","padding","title","fontWeight","theme","fontWeights","semibold","marginBottom","swatchWrap","height","borderRadius","radii","base"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EACvBC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVJ,OAAO;AAAA,IACPK,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLC,YAAYC,YAAAA,MAAMC,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,YAAY;AAAA,IACVb,OAAO;AAAA,IACPc,QAAQ;AAAA,IACRT,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChBU,cAAcN,YAAAA,MAAMO,MAAMC;AAAAA,IAC5B;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"PresetColors.styles.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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":["createClasses","theme"],"mappings":";;;;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAeA,QAAAA,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,YAAYC,YAAAA,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;;;"}

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

@@ -16,9 +16,7 @@ const SavedColors = (props) => {
     addButtonAriaLabel,
     classes: classesProp
   } = useDefaultProps.useDefaultProps("HvColorPickerSavedColors", props);
-  const {
-    classes
-  } = SavedColors_styles.useClasses(classesProp);
+  const { classes } = SavedColors_styles.useClasses(classesProp);
   const handleClick = (hex) => {
     onClickColor({
       hex,
@@ -26,13 +24,47 @@ const SavedColors = (props) => {
     });
   };
   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}`))
+    /* @__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;

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 { useDefaultProps } from \"@core/hooks\";\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":["SavedColors","props","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useDefaultProps","useClasses","handleClick","hex","source","jsxs","root","jsx","HvButton","addButton","Add","map","color","index","swatchRoot","swatchWrap","Swatch","boxShadow","removeButtonRoot","removeButton","CloseXS"],"mappings":";;;;;;;;AA2BaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,gBAAA,4BAA4BT,KAAK;AAC/C,QAAA;AAAA,IAAEO;AAAAA,EAAAA,IAAYG,mBAAAA,WAAWF,WAAW;AAEpCG,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACGC,2BAAAA,KAAA,OAAA,EAAI,WAAWP,QAAQQ,MACtB,UAAA;AAAA,IAAAC,+BAACC,OAAAA,YACC,WAAWV,QAAQW,WACnB,SAAQ,mBACR,MAAI,MACJ,SAASf,YACT,cAAYG,oBAEZ,UAAAU,2BAAA,IAACG,gBAAI,KAAA,EAAA,eAAW,KAAA,CAAA,GAClB;AAAA,IACClB,OAAOmB,IAAI,CAACC,OAAOC,UACjBR,2BAAAA,KAAA,OAAA,EAEC,WAAWP,QAAQgB,YAEnB,UAAA;AAAA,MAACP,2BAAAA,IAAA,OAAA,EAAI,WAAWT,QAAQiB,YACtB,yCAACC,OACC,QAAA,EAAA,OACA,SAASd,aACT,YAAY;AAAA,QACVe,WAAY,4CAA2CL,KAAM;AAAA,SAC7D,EAEN,CAAA;AAAA,MACCL,2BAAA,IAAA,OAAA,EAAI,WAAWT,QAAQoB,kBACtB,UAAAX,2BAAA,IAACC,OACC,UAAA,EAAA,WAAWV,QAAQqB,cACnB,SAAQ,mBACR,SAAS,MAAMxB,cAAciB,OAAOC,KAAK,GACzC,UAAU,GACV,cAAYjB,uBAEZ,UAACW,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;;;"}
+{"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 { useDefaultProps } from \"@core/hooks\";\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":["useDefaultProps","useClasses","jsxs","jsx","HvButton","Add","Swatch","CloseXS"],"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,IACPA,gBAAgB,gBAAA,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAYC,mBAAA,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACGC,2BAAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,OAAA;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAY;AAAA,QAEZ,UAAAD,2BAAAA,IAACE,gBAAAA,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClBH,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAACC,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAAA,2BAAA;AAAA,YAACG,OAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACCH,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAAA,2BAAA;AAAA,YAACC,OAAA;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,UAAU;AAAA,cACV,cAAY;AAAA,cAEZ,UAACD,2BAAA,IAAAI,yBAAA,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/cjs/components/ColorPicker/SavedColors/SavedColors.styles.cjs

@@ -3,10 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../../utils/classes.cjs");
 const name = "HvColorPicker-SavedColors";
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses(name, {
+const { staticClasses, useClasses } = classes.createClasses(name, {
   addButton: {
     margin: "4px",
     width: "32px",
@@ -21,9 +18,7 @@ const {
     width: "calc(100% + 8px)",
     margin: "-4px -4px"
   },
-  swatchRoot: {
-    position: "relative"
-  },
+  swatchRoot: { position: "relative" },
   swatchWrap: {
     width: "32px",
     height: "32px",
@@ -54,10 +49,7 @@ const {
     "& div > span": {
       height: 16,
       width: 16,
-      "& > div": {
-        height: 16,
-        width: 16
-      }
+      "& > div": { height: 16, width: 16 }
     }
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.styles.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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":["name","staticClasses","useClasses","createClasses","addButton","margin","width","height","root","display","flexWrap","position","alignItems","padding","swatchRoot","swatchWrap","borderRadius","theme","radii","base","removeButtonRoot","top","right","justifyContent","background","colors","atmo1","removeButton","minWidth","minHeight"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACAC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,SAAS;AAAA,IACTP,OAAO;AAAA,IACPD,QAAQ;AAAA,EACV;AAAA,EACAS,YAAY;AAAA,IAAEH,UAAU;AAAA,EAAW;AAAA,EACnCI,YAAY;AAAA,IACVT,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRF,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChBW,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBT,UAAU;AAAA,IACVU,KAAK;AAAA,IACLC,OAAO;AAAA,IACPb,SAAS;AAAA,IACTc,gBAAgB;AAAA,IAChBX,YAAY;AAAA,IACZL,QAAQ;AAAA,IACRD,OAAO;AAAA,IACPkB,YAAYP,YAAAA,MAAMQ,OAAOC;AAAAA,IACzBV,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAC5B;AAAA,EACAQ,cAAc;AAAA,IACZpB,QAAQ;AAAA,IACRD,OAAO;AAAA,IACPsB,UAAU;AAAA,IACVC,WAAW;AAAA,IACXhB,SAAS;AAAA,IACTR,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACdE,QAAQ;AAAA,MACRD,OAAO;AAAA,MAEP,WAAW;AAAA,QAAEC,QAAQ;AAAA,QAAID,OAAO;AAAA,MAAG;AAAA,IACrC;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"SavedColors.styles.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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":["createClasses","theme"],"mappings":";;;;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAeA,QAAAA,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,cAAcC,YAAAA,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,YAAYA,YAAAA,MAAM,OAAO;AAAA,IACzB,cAAcA,YAAAA,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/cjs/components/Container/Container.cjs

@@ -11,48 +11,55 @@ const Container_styles = require("./Container.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiContainer__default = /* @__PURE__ */ _interopDefault(MuiContainer);
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
-const HvContainer = React.forwardRef((props, ref) => {
-  const {
-    maxWidth = false,
-    classes: classesProp,
-    className,
-    fixed,
-    disableGutters,
-    ...others
-  } = useDefaultProps.useDefaultProps("HvContainer", props);
-  const {
-    classes,
-    cx,
-    css
-  } = Container_styles.useClasses(classesProp);
-  const muiTheme = styles.useTheme();
-  const upMd = useMediaQuery__default.default(muiTheme.breakpoints.up("md"));
-  const gutters = upMd ? {
-    // Increases specificity
-    [`&.${Container_styles.staticClasses.root}`]: {
-      paddingLeft: uikitStyles.theme.spacing(4),
-      paddingRight: uikitStyles.theme.spacing(4)
-    }
-  } : {
-    // Increases specificity
-    [`&.${Container_styles.staticClasses.root}`]: {
-      paddingLeft: uikitStyles.theme.space.sm,
-      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 });
-});
+const HvContainer = React.forwardRef(
+  (props, ref) => {
+    const {
+      maxWidth = false,
+      classes: classesProp,
+      className,
+      fixed,
+      disableGutters,
+      ...others
+    } = useDefaultProps.useDefaultProps("HvContainer", props);
+    const { classes, cx, css } = Container_styles.useClasses(classesProp);
+    const muiTheme = styles.useTheme();
+    const upMd = useMediaQuery__default.default(muiTheme.breakpoints.up("md"));
+    const gutters = upMd ? {
+      // Increases specificity
+      [`&.${Container_styles.staticClasses.root}`]: {
+        paddingLeft: uikitStyles.theme.spacing(4),
+        paddingRight: uikitStyles.theme.spacing(4)
+      }
+    } : {
+      // Increases specificity
+      [`&.${Container_styles.staticClasses.root}`]: {
+        paddingLeft: uikitStyles.theme.space.sm,
+        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
+      }
+    );
+  }
+);
 exports.containerClasses = Container_styles.staticClasses;
 exports.HvContainer = HvContainer;
 //# sourceMappingURL=Container.cjs.map

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 { 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 extends Omit<MuiContainerProps, \"classes\"> {\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":";;;;;;;;;;;;;AA6CO,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;;;"}
+{"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 { 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 extends Omit<MuiContainerProps, \"classes\"> {\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":["forwardRef","useDefaultProps","useClasses","useTheme","useMediaQuery","staticClasses","theme","jsx","MuiContainer"],"mappings":";;;;;;;;;;;;;AA6CO,MAAM,cAAcA,MAAA;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,IAAI,IAAI,IAAIC,iBAAAA,WAAW,WAAW;AAEnD,UAAM,WAAWC,OAAAA;AAEjB,UAAM,OAAOC,uBAAAA,QAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAExD,UAAM,UAAU,OACZ;AAAA;AAAA,MAEE,CAAC,KAAKC,+BAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAaC,YAAAA,MAAM,QAAQ,CAAC;AAAA,QAC5B,cAAcA,YAAAA,MAAM,QAAQ,CAAC;AAAA,MAC/B;AAAA,IAAA,IAEF;AAAA;AAAA,MAEE,CAAC,KAAKD,+BAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAaC,YAAAA,MAAM,MAAM;AAAA,QACzB,cAAcA,YAAAA,MAAM,MAAM;AAAA,MAC5B;AAAA,IAAA;AAIJ,WAAAC,2BAAA;AAAA,MAACC,sBAAA;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,GAAG,SAAS;AAAA,QAC5D,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,gBAAgB,QAAQ;AAAA,UACxB,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;;;"}

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

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvContainer", {
+const { staticClasses, useClasses } = classes.createClasses("HvContainer", {
   root: {},
   disableGutters: {},
   fixed: {},

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

@@ -1 +1 @@
-{"version":3,"file":"Container.styles.cjs","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvContainer\", {\n  root: {},\n  disableGutters: {},\n  fixed: {},\n  maxWidthXs: {},\n  maxWidthSm: {},\n  maxWidthMd: {},\n  maxWidthLg: {},\n  maxWidthXl: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","disableGutters","fixed","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM,CAAC;AAAA,EACPC,gBAAgB,CAAC;AAAA,EACjBC,OAAO,CAAC;AAAA,EACRC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AACf,CAAC;;;"}
+{"version":3,"file":"Container.styles.cjs","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvContainer\", {\n  root: {},\n  disableGutters: {},\n  fixed: {},\n  maxWidthXs: {},\n  maxWidthSm: {},\n  maxWidthMd: {},\n  maxWidthLg: {},\n  maxWidthXl: {},\n});\n"],"names":["createClasses"],"mappings":";;;AAEO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AACf,CAAC;;;"}