@hitachivantara/uikit-react-core 5.82.3 → 5.82.4

package/dist/esm/ColorPicker/Fields/Fields.js

@@ -47,12 +47,12 @@ const Fields = (props) => {
         },
         event
       );
-    } else if (data.r || data.g || data.b) {
+    } else if (data.r !== void 0 || data.g !== void 0 || data.b !== void 0) {
       onChange(
         {
-          r: data.r || rgb?.r,
-          g: data.g || rgb?.g,
-          b: data.b || rgb?.b,
+          r: data.r ?? rgb?.r,
+          g: data.g ?? rgb?.g,
+          b: data.b ?? rgb?.b,
           source: "rgb"
         },
         event

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

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

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

@@ -18,14 +18,22 @@ const Component = (props) => {
     classes: classesProp
   } = useDefaultProps("HvColorPickerPicker", props);
   const { activeTheme } = useTheme();
-  const { classes } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const SaturationPointer = useCallback(
     () => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }),
     [classes?.saturationPointer]
   );
   const HueSlider = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.hueSlider }),
-    [classes?.hueSlider]
+    () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          classes?.hueSlider,
+          activeTheme?.colorPicker.hueDirection
+        )
+      }
+    ),
+    [activeTheme?.colorPicker.hueDirection, classes?.hueSlider, cx]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer],\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider],\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,YAAY,IAAI,SAAS;AACjC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EACrB;AAEA,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,EAEb,CAAA;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}
+{"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\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, cx } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer],\n  );\n\n  const HueSlider = useCallback(\n    () => (\n      <div\n        className={cx(\n          classes?.hueSlider,\n          activeTheme?.colorPicker.hueDirection,\n        )}\n      />\n    ),\n    [activeTheme?.colorPicker.hueDirection, classes?.hueSlider, cx],\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,YAAY,IAAI,SAAS;AACjC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,YAAY;AAAA,IAChB,MACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT,SAAS;AAAA,UACT,aAAa,YAAY;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF;AAAA,IAEF,CAAC,aAAa,YAAY,cAAc,SAAS,WAAW,EAAE;AAAA,EAChE;AAEA,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,EAEb,CAAA;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}

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

@@ -48,7 +48,12 @@ const { staticClasses, useClasses } = createClasses(name, {
     marginLeft: "0px",
     border: "2px solid #fff",
     borderRadius: theme.radii.circle,
-    transform: "translate(0, -2px)"
+    "&.vertical": {
+      transform: "translate(0px, -2px)"
+    },
+    "&.horizontal": {
+      transform: "translate(-6px, -2px)"
+    }
   },
   title: {
     fontWeight: theme.fontWeights.semibold,

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

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

package/dist/esm/Controls/context/ControlsContext.js

@@ -1,5 +1,5 @@
-import React__default from "react";
-const HvControlsContext = React__default.createContext({});
+import { createContext } from "react";
+const HvControlsContext = createContext({});
 const HvControlsContextProvider = HvControlsContext.Provider;
 HvControlsContext.Consumer;
 export {

package/dist/esm/Controls/context/ControlsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlsContext.js","sources":["../../../../src/Controls/context/ControlsContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport const HvControlsContext = React.createContext<{\n  onSearch?: any;\n  onSort?: any;\n}>({});\n\nexport const HvControlsContextProvider = HvControlsContext.Provider;\nexport const HvControlsContextConsumer = HvControlsContext.Consumer;\nexport default HvControlsContext;\n"],"names":["React"],"mappings":";AAEO,MAAM,oBAAoBA,eAAM,cAGpC,CAAE,CAAA;AAEE,MAAM,4BAA4B,kBAAkB;AAClB,kBAAkB;"}
+{"version":3,"file":"ControlsContext.js","sources":["../../../../src/Controls/context/ControlsContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const HvControlsContext = createContext<{\n  onSearch?: any;\n  onSort?: any;\n}>({});\n\nexport const HvControlsContextProvider = HvControlsContext.Provider;\nexport const HvControlsContextConsumer = HvControlsContext.Consumer;\nexport default HvControlsContext;\n"],"names":[],"mappings":";AAEa,MAAA,oBAAoB,cAG9B,CAAE,CAAA;AAEE,MAAM,4BAA4B,kBAAkB;AAClB,kBAAkB;"}

package/dist/esm/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n          onClose?.(event, undefined)\n        }\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAEJ;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YAAA;AAAA,UACxB;AAAA,QACF;AAAA,MAEJ;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UACR,UAAU,OAAO,MAAS;AAAA,YAG5B,8BAAC,OAAM,CAAA,CAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,SACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n          onClose?.(event, undefined)\n        }\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAEJ;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YAAA;AAAA,UACxB;AAAA,QACF;AAAA,MAEJ;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UACR,UAAU,OAAO,MAAS;AAAA,YAG5B,8BAAC,OAAM,CAAA,CAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,SACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/esm/DropDownMenu/DropDownMenu.js

@@ -18,7 +18,7 @@ const DEFAULT_LABELS = {
   dropdownMenu: "Dropdown menu"
 };
 const HeaderComponent = forwardRef(
-  (props, ref) => {
+  function HeaderComponent2(props, ref) {
     const { open, icon, disabled, ...others } = props;
     const { popperPlacement } = useBaseDropdownContext();
     return /* @__PURE__ */ jsx(

package/dist/esm/DropDownMenu/DropDownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  (props, ref) => {\n    const { open, icon, disabled, ...others } = props;\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        disabled={disabled}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement}\n        {...others}\n      >\n        {icon || <MoreOptionsVertical role=\"presentation\" />}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n  React.ComponentRef<typeof HvBaseDropdown>,\n  HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    labels: labelsProp,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={id}\n      className={cx(classes.container, classes.icon, className, {\n        [classes.iconSelected]: open,\n      })}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n        panel: classes.menuListRoot,\n      }}\n      expanded={open && !disabled}\n      headerComponent={HeaderComponent}\n      // @ts-expect-error infer HeaderComponent typings\n      size={size}\n      variant={variant ?? category}\n      open={open}\n      aria-label={labels.dropdownMenu}\n      icon={icon}\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={(containerEl) => {\n        containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n      }}\n      {...others}\n    >\n      <HvList\n        id={listId}\n        values={dataList}\n        selectable={false}\n        condensed={condensed}\n        onClick={(event, item) => {\n          if (!keepOpened) handleClose(event);\n          onClick?.(event, item);\n        }}\n        onKeyDown={handleKeyDown}\n        classes={{\n          root: classes.menuList,\n        }}\n      />\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HvDropDownMenu"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  function HeaderComponent(props, ref) {\n    const { open, icon, disabled, ...others } = props;\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        disabled={disabled}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement}\n        {...others}\n      >\n        {icon || <MoreOptionsVertical role=\"presentation\" />}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n  React.ComponentRef<typeof HvBaseDropdown>,\n  HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    labels: labelsProp,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={id}\n      className={cx(classes.container, classes.icon, className, {\n        [classes.iconSelected]: open,\n      })}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n        panel: classes.menuListRoot,\n      }}\n      expanded={open && !disabled}\n      headerComponent={HeaderComponent}\n      // @ts-expect-error infer HeaderComponent typings\n      size={size}\n      variant={variant ?? category}\n      open={open}\n      aria-label={labels.dropdownMenu}\n      icon={icon}\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={(containerEl) => {\n        containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n      }}\n      {...others}\n    >\n      <HvList\n        id={listId}\n        values={dataList}\n        selectable={false}\n        condensed={condensed}\n        onClick={(event, item) => {\n          if (!keepOpened) handleClose(event);\n          onClick?.(event, item);\n        }}\n        onKeyDown={handleKeyDown}\n        classes={{\n          root: classes.menuList,\n        }}\n      />\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HeaderComponent","HvDropDownMenu"],"mappings":"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"}

package/dist/esm/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/EmptyState/EmptyState.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: React.ReactNode;\n  /** The message to be shown. */\n  message?: React.ReactNode;\n  /** The action message to be shown. */\n  action?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvEmptyStateProps\n>(function HvEmptyState(props, ref) {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string,\n  ) =>\n    node && (\n      <HvTypography component=\"div\" variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" }),\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs }),\n          )}\n        >\n          {renderNode(\"title4\", title, classes.titleContainer)}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvEmptyState"],"mappings":";;;;;;;;;AAkCO,MAAM,eAAe,WAG1B,SAASA,cAAa,OAAO,KAAK;AAC5B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,WAAW,SAAS;AAE1B,QAAM,SAAS,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC5D,QAAM,OAAO,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAExD,QAAM,cAAc,CAAC,EAAE,WAAW,EAAE,SAAS;AAE7C,QAAM,aAAa,CACjB,SACA,MACA,UAEA,QACG,oBAAA,cAAA,EAAa,WAAU,OAAM,SAAkB,WAAW,OACxD,UACH,MAAA;AAIF,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,UACE,IAAI;AAAA,UACF,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA,CACZ;AAAA,QACH;AAAA,UACE,CAAC,QAAQ,oBAAoB,GAAG;AAAA,QAClC;AAAA,QACA,UAAU,eAAe,IAAI,EAAE,eAAe,MAAO,CAAA;AAAA,MACvD;AAAA,MAEA,UAAA;AAAA,QAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,QAC7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,QAAQ;AAAA,cACR,QAAQ,IAAI,EAAE,YAAY,MAAM,MAAM,GAAI,CAAA;AAAA,YAC5C;AAAA,YAEC,UAAA;AAAA,cAAW,WAAA,UAAU,OAAO,QAAQ,cAAc;AAAA,cAClD,WAAW,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,cACpD,WAAW,QAAQ,QAAQ,QAAQ,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrD;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/EmptyState/EmptyState.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: React.ReactNode;\n  /** The message to be shown. */\n  message?: React.ReactNode;\n  /** The action message to be shown. */\n  action?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvEmptyStateProps\n>(function HvEmptyState(props, ref) {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string,\n  ) =>\n    node && (\n      <HvTypography component=\"div\" variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" }),\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs }),\n          )}\n        >\n          {renderNode(\"title4\", title, classes.titleContainer)}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvEmptyState"],"mappings":";;;;;;;;;AAkCO,MAAM,eAAe,WAG1B,SAASA,cAAa,OAAO,KAAK;AAC5B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,WAAW,SAAS;AAE1B,QAAM,SAAS,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC5D,QAAM,OAAO,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAExD,QAAM,cAAc,CAAC,EAAE,WAAW,EAAE,SAAS;AAE7C,QAAM,aAAa,CACjB,SACA,MACA,UAEA,QACG,oBAAA,cAAA,EAAa,WAAU,OAAM,SAAkB,WAAW,OACxD,UACH,MAAA;AAIF,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,UACE,IAAI;AAAA,UACF,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA,CACZ;AAAA,QACH;AAAA,UACE,CAAC,QAAQ,oBAAoB,GAAG;AAAA,QAClC;AAAA,QACA,UAAU,eAAe,IAAI,EAAE,eAAe,MAAO,CAAA;AAAA,MACvD;AAAA,MAEA,UAAA;AAAA,QAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,QAC7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,QAAQ;AAAA,cACR,QAAQ,IAAI,EAAE,YAAY,MAAM,MAAM,GAAI,CAAA;AAAA,YAC5C;AAAA,YAEC,UAAA;AAAA,cAAW,WAAA,UAAU,OAAO,QAAQ,cAAc;AAAA,cAClD,WAAW,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,cACpD,WAAW,QAAQ,QAAQ,QAAQ,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrD;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

package/dist/esm/FormElement/Adornment/Adornment.js

@@ -7,7 +7,7 @@ import { staticClasses } from "./Adornment.styles.js";
 import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
 const noop = () => {
 };
-const HvAdornment = forwardRef((props, ref) => {
+const HvAdornment = forwardRef(function HvAdornment2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/esm/FormElement/Adornment/Adornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Adornment.js","sources":["../../../../src/FormElement/Adornment/Adornment.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../../ButtonBase\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../context\";\nimport { HvFormStatus } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n  extends HvBaseProps<\n    HTMLDivElement | HTMLButtonElement,\n    \"onMouseDown\" | \"onKeyDown\"\n  > {\n  /** The icon to be added into the input. */\n  icon: React.ReactNode;\n  /** When the adornment should be displayed. */\n  showWhen?: HvFormStatus;\n  /** Function to be executed when this element is clicked. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n  isVisible?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  HvAdornmentProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    icon,\n    showWhen,\n    onClick,\n    isVisible,\n    ...others\n  } = useDefaultProps(\"HvAdornment\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { status, disabled } = useContext(HvFormElementContext);\n  const { input } = useContext(HvFormElementDescriptorsContext);\n\n  const displayIcon = isVisible ?? (showWhen == null || status === showWhen);\n\n  const isClickable = !!onClick;\n\n  return isClickable ? (\n    <HvButtonBase\n      id={id}\n      focusableWhenDisabled\n      ref={ref as React.ForwardedRef<HTMLButtonElement>}\n      type=\"button\"\n      tabIndex={-1}\n      aria-controls={input?.[0]?.id}\n      className={cx(\n        classes.root,\n        classes.adornment,\n        classes.adornmentButton,\n        {\n          [classes.hideIcon]: !displayIcon,\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      onClick={onClick}\n      onMouseDown={(event) => event.preventDefault()}\n      onKeyDown={noop}\n      disabled={disabled}\n      {...others}\n    >\n      <div className={classes.icon}>{icon}</div>\n    </HvButtonBase>\n  ) : (\n    <div\n      id={id}\n      ref={ref as React.ForwardedRef<HTMLDivElement>}\n      className={cx(\n        classes.root,\n        classes.adornment,\n        classes.adornmentIcon,\n        {\n          [classes.hideIcon]: !displayIcon,\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      role=\"presentation\"\n      {...others}\n    >\n      <div className={classes.icon}>{icon}</div>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAeA,MAAM,OAAO,MAAM;AAAC;AAkCb,MAAM,cAAc,WAGzB,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,aAAa,WAAW,oBAAoB;AAC5D,QAAM,EAAE,MAAA,IAAU,WAAW,+BAA+B;AAE5D,QAAM,cAAc,cAAc,YAAY,QAAQ,WAAW;AAE3D,QAAA,cAAc,CAAC,CAAC;AAEtB,SAAO,cACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,uBAAqB;AAAA,MACrB;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,iBAAe,QAAQ,CAAC,GAAG;AAAA,MAC3B,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,MAC7C,WAAW;AAAA,MACX;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,KAAA,CAAA;AAAA,IAAA;AAAA,EAAA,IAGtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,KAAA,CAAA;AAAA,IAAA;AAAA,EACtC;AAEJ,CAAC;"}
+{"version":3,"file":"Adornment.js","sources":["../../../../src/FormElement/Adornment/Adornment.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../../ButtonBase\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../context\";\nimport { HvFormStatus } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n  extends HvBaseProps<\n    HTMLDivElement | HTMLButtonElement,\n    \"onMouseDown\" | \"onKeyDown\"\n  > {\n  /** The icon to be added into the input. */\n  icon: React.ReactNode;\n  /** When the adornment should be displayed. */\n  showWhen?: HvFormStatus;\n  /** Function to be executed when this element is clicked. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n  isVisible?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  HvAdornmentProps\n>(function HvAdornment(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    icon,\n    showWhen,\n    onClick,\n    isVisible,\n    ...others\n  } = useDefaultProps(\"HvAdornment\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { status, disabled } = useContext(HvFormElementContext);\n  const { input } = useContext(HvFormElementDescriptorsContext);\n\n  const displayIcon = isVisible ?? (showWhen == null || status === showWhen);\n\n  const isClickable = !!onClick;\n\n  return isClickable ? (\n    <HvButtonBase\n      id={id}\n      focusableWhenDisabled\n      ref={ref as React.ForwardedRef<HTMLButtonElement>}\n      type=\"button\"\n      tabIndex={-1}\n      aria-controls={input?.[0]?.id}\n      className={cx(\n        classes.root,\n        classes.adornment,\n        classes.adornmentButton,\n        {\n          [classes.hideIcon]: !displayIcon,\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      onClick={onClick}\n      onMouseDown={(event) => event.preventDefault()}\n      onKeyDown={noop}\n      disabled={disabled}\n      {...others}\n    >\n      <div className={classes.icon}>{icon}</div>\n    </HvButtonBase>\n  ) : (\n    <div\n      id={id}\n      ref={ref as React.ForwardedRef<HTMLDivElement>}\n      className={cx(\n        classes.root,\n        classes.adornment,\n        classes.adornmentIcon,\n        {\n          [classes.hideIcon]: !displayIcon,\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      role=\"presentation\"\n      {...others}\n    >\n      <div className={classes.icon}>{icon}</div>\n    </div>\n  );\n});\n"],"names":["HvAdornment"],"mappings":";;;;;;;AAeA,MAAM,OAAO,MAAM;AAAC;AAkCb,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,aAAa,WAAW,oBAAoB;AAC5D,QAAM,EAAE,MAAA,IAAU,WAAW,+BAA+B;AAE5D,QAAM,cAAc,cAAc,YAAY,QAAQ,WAAW;AAE3D,QAAA,cAAc,CAAC,CAAC;AAEtB,SAAO,cACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,uBAAqB;AAAA,MACrB;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,iBAAe,QAAQ,CAAC,GAAG;AAAA,MAC3B,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,MAC7C,WAAW;AAAA,MACX;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,KAAA,CAAA;AAAA,IAAA;AAAA,EAAA,IAGtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,KAAA,CAAA;AAAA,IAAA;AAAA,EACtC;AAEJ,CAAC;"}

package/dist/esm/FormElement/Suggestions/Suggestions.js

@@ -11,7 +11,7 @@ import { useClasses } from "./Suggestions.styles.js";
 import { staticClasses } from "./Suggestions.styles.js";
 import { HvSelectionList } from "../../SelectionList/SelectionList.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
-const HvSuggestions = forwardRef((props, extRef) => {
+const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
   const {
     id: idProp,
     className,

package/dist/esm/FormElement/Suggestions/Suggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.js","sources":["../../../../src/FormElement/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper, PopperProps } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /** Props passed to the underlying MUI Popper component */\n  popperProps?: Partial<PopperProps>;\n}\n\nexport const HvSuggestions = forwardRef<\n  // no-indent\n  unknown,\n  HvSuggestionsProps\n>((props, extRef) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    popperProps,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const context = useContext(HvFormElementContext);\n  const id = idProp ?? setId(context.id, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={id}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n          {...popperProps}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(id, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwDO,MAAM,gBAAgB,WAI3B,CAAC,OAAO,WAAW;AACb,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,UAAU,WAAW,oBAAoB;AAC/C,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cACA,GAAG;AAAA,cAEJ,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,IAAI,MAAM;AAAA,kBACpB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,MADS,GAAA,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"Suggestions.js","sources":["../../../../src/FormElement/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper, PopperProps } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /** Props passed to the underlying MUI Popper component */\n  popperProps?: Partial<PopperProps>;\n}\n\nexport const HvSuggestions = forwardRef<\n  // no-indent\n  unknown,\n  HvSuggestionsProps\n>(function HvSuggestions(props, extRef) {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    popperProps,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const context = useContext(HvFormElementContext);\n  const id = idProp ?? setId(context.id, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={id}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n          {...popperProps}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(id, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":["HvSuggestions"],"mappings":";;;;;;;;;;;;;AAwDO,MAAM,gBAAgB,WAI3B,SAASA,eAAc,OAAO,QAAQ;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,UAAU,WAAW,oBAAoB;AAC/C,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cACA,GAAG;AAAA,cAEJ,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,IAAI,MAAM;AAAA,kBACpB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,MADS,GAAA,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/GlobalActions/GlobalActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.js","sources":["../../../src/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport {\n  getBreakpointStyles,\n  staticClasses,\n  useClasses,\n} from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * @default variant === \"global\" ? \"sticky\" : \"relative\"\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvGlobalActionsProps\n>(function HvGlobalActions(props, ref) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n          [classes.section]: variant === \"section\",\n        },\n        position === \"fixed\" && css(getBreakpointStyles(isUpMd, isSmDown)),\n        className,\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButton && (\n          <div className={classes.backButton}>{backButton}</div>\n        )}\n        {typeof title !== \"string\" ? (\n          title\n        ) : (\n          <HvTypography\n            variant={variant === \"global\" ? \"title3\" : \"title4\"}\n            component={`h${headingLevelToApply}`}\n            className={cx(classes.name, {\n              [classes.sectionName]: variant !== \"global\",\n            })}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvGlobalActions","useMuiTheme"],"mappings":";;;;;;;;AA8CO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,WAAWC,SAAY;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AACnD,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC9D,QAAM,SAAS,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAE1D,QAAM,sBAAsB,iBAAiB,YAAY,WAAW,IAAI;AAExE,QAAM,WACJ,iBAAiB,YAAY,WAAW,WAAW;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG,aAAa;AAAA,UACvC,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,MAAM,GAAG,YAAY;AAAA,UAC9B,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA,aAAa,WAAW,IAAI,oBAAoB,QAAQ,QAAQ,CAAC;AAAA,QACjE;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,SAAS;AAAA,YAC7B,CAAC,QAAQ,uBAAuB,GAAG,YAAY;AAAA,YAC/C,CAAC,QAAQ,iBAAiB,GAAG,YAAY;AAAA,UAAA,CAC1C;AAAA,UAEA,UAAA;AAAA,YAAA,YAAY,YAAY,cACvB,oBAAC,SAAI,WAAW,QAAQ,YAAa,UAAW,WAAA,CAAA;AAAA,YAEjD,OAAO,UAAU,WAChB,QAEA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,YAAY,WAAW,WAAW;AAAA,gBAC3C,WAAW,IAAI,mBAAmB;AAAA,gBAClC,WAAW,GAAG,QAAQ,MAAM;AAAA,kBAC1B,CAAC,QAAQ,WAAW,GAAG,YAAY;AAAA,gBAAA,CACpC;AAAA,gBAEA,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YAED,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"GlobalActions.js","sources":["../../../src/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport {\n  getBreakpointStyles,\n  staticClasses,\n  useClasses,\n} from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * @default variant === \"global\" ? \"sticky\" : \"relative\"\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvGlobalActionsProps\n>(function HvGlobalActions(props, ref) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n          [classes.section]: variant === \"section\",\n        },\n        position === \"fixed\" && css(getBreakpointStyles(isUpMd, isSmDown)),\n        className,\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButton && (\n          <div className={classes.backButton}>{backButton}</div>\n        )}\n        {typeof title !== \"string\" ? (\n          title\n        ) : (\n          <HvTypography\n            variant={variant === \"global\" ? \"title3\" : \"title4\"}\n            component={`h${headingLevelToApply}`}\n            className={cx(classes.name, {\n              [classes.sectionName]: variant !== \"global\",\n            })}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvGlobalActions","useMuiTheme"],"mappings":";;;;;;;;AA8CO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,WAAWC,SAAY;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AACnD,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC9D,QAAM,SAAS,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAE1D,QAAM,sBAAsB,iBAAiB,YAAY,WAAW,IAAI;AAExE,QAAM,WACJ,iBAAiB,YAAY,WAAW,WAAW;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG,aAAa;AAAA,UACvC,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,MAAM,GAAG,YAAY;AAAA,UAC9B,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA,aAAa,WAAW,IAAI,oBAAoB,QAAQ,QAAQ,CAAC;AAAA,QACjE;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,SAAS;AAAA,YAC7B,CAAC,QAAQ,uBAAuB,GAAG,YAAY;AAAA,YAC/C,CAAC,QAAQ,iBAAiB,GAAG,YAAY;AAAA,UAAA,CAC1C;AAAA,UAEA,UAAA;AAAA,YAAA,YAAY,YAAY,cACvB,oBAAC,SAAI,WAAW,QAAQ,YAAa,UAAW,WAAA,CAAA;AAAA,YAEjD,OAAO,UAAU,WAChB,QAEA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,YAAY,WAAW,WAAW;AAAA,gBAC3C,WAAW,IAAI,mBAAmB;AAAA,gBAClC,WAAW,GAAG,QAAQ,MAAM;AAAA,kBAC1B,CAAC,QAAQ,WAAW,GAAG,YAAY;AAAA,gBAAA,CACpC;AAAA,gBAEA,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YAED,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Grid/Grid.js

@@ -67,7 +67,7 @@ function getContainerProps(spacing, rowSpacing, columnSpacing, columns) {
   }
   return containerProps;
 }
-const WidthGrid = forwardRef((props, ref) => {
+const WidthGrid = forwardRef(function WidthGrid2(props, ref) {
   const { container, spacing, rowSpacing, columnSpacing, columns, ...others } = props;
   const width = useWidth();
   const containerProps = container ? getContainerProps(

package/dist/esm/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (typeof spacing === \"string\") {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n      (acc, bp) => {\n        acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n        return acc;\n      },\n      {},\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"],\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns,\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvGridProps\n>(function HvGrid(props, ref) {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":["HvGrid"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAAA;AAAA,EAC1C,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAA;AAAA,IACF;AAAA,EAAA,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI,EAAE;AAAA,EAAA,OACjB;AACS,kBAAA;AAAA,EAAA;AAGT,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EAAA;AAGb,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW,KAAK;AAEtB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EAAA;AAEjD,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EAAA;AAEvD,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAE7D,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EAAA;AAG9C,SAAA;AACT;AAEA,MAAM,YAAY,WAAwC,CAAC,OAAO,QAAQ;AAClE,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,WACjE;AAEF,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,EAAA,IAEF,CAAC;AAEL,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,QAAQ;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAIpB,SAASA,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIE,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D,CAAC;AAGH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (typeof spacing === \"string\") {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n      (acc, bp) => {\n        acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n        return acc;\n      },\n      {},\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"],\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvGridProps\n>(function WidthGrid(props, ref) {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns,\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvGridProps\n>(function HvGrid(props, ref) {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":["WidthGrid","HvGrid"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAAA;AAAA,EAC1C,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAA;AAAA,IACF;AAAA,EAAA,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI,EAAE;AAAA,EAAA,OACjB;AACS,kBAAA;AAAA,EAAA;AAGT,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EAAA;AAGb,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW,KAAK;AAEtB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EAAA;AAEjD,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EAAA;AAEvD,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAE7D,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EAAA;AAG9C,SAAA;AACT;AAEA,MAAM,YAAY,WAIhB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,WACjE;AAEF,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,EAAA,IAEF,CAAC;AAEL,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,QAAQ;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAIpB,SAASC,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIE,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D,CAAC;AAGH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = () => {\n    if (inputRef.current) {\n      setIsOverflowing(\n        inputRef.current.scrollWidth > inputRef.current.clientWidth,\n      );\n    }\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n      checkOverflow();\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    checkOverflow();\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvTooltip title={isOverflowing && value}>\n          <HvButton\n            variant=\"secondaryGhost\"\n            overrideIconColors={false}\n            endIcon={\n              <Edit\n                color=\"secondary_60\"\n                className={cx(classes.icon, {\n                  [classes.iconVisible]: showIcon,\n                })}\n              />\n            }\n            className={cx(classes.button, {\n              [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n            })}\n            onClick={handleClick}\n            disabled={disabled}\n            {...buttonProps}\n          >\n            <HvTypography\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = () => {\n    if (inputRef.current) {\n      setIsOverflowing(\n        inputRef.current.scrollWidth > inputRef.current.clientWidth,\n      );\n    }\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n      checkOverflow();\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    checkOverflow();\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvTooltip title={isOverflowing && value}>\n          <HvButton\n            variant=\"secondaryGhost\"\n            overrideIconColors={false}\n            endIcon={\n              <Edit\n                color=\"secondary_60\"\n                className={cx(classes.icon, {\n                  [classes.iconVisible]: showIcon,\n                })}\n              />\n            }\n            className={cx(classes.button, {\n              [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n            })}\n            onClick={handleClick}\n            disabled={disabled}\n            {...buttonProps}\n          >\n            <HvTypography\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}