@hitachivantara/uikit-react-core 6.0.0-next.4 → 6.0.0-next.6

package/dist/BaseDropdown/BaseDropdownPanel.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { ClickAwayListener } from "@mui/base/ClickAwayListener";
-import { Portal } from "@mui/base/Portal";
+import { Portal, ClickAwayListener } from "@mui/base";
 import { useCss, useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../utils/document.js";
 import { useBaseDropdownContext } from "./context.js";

package/dist/ColorPicker/ColorPicker.js

@@ -9,8 +9,8 @@ import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ColorPicker.styles.js";
 import { staticClasses } from "./ColorPicker.styles.js";
-import { PresetColors } from "./PresetColors/PresetColors.js";
 import { Picker } from "./Picker/Picker.js";
+import { PresetColors } from "./PresetColors/PresetColors.js";
 import { SavedColors } from "./SavedColors/SavedColors.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
@@ -81,18 +81,18 @@ const HvColorPicker = forwardRef(
     const handleToggle = (_, open) => {
       setIsOpen(open);
     };
-    const handleSelect = (val) => {
-      onChange?.(val.hex);
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
+    const handleSelect = (hex) => {
+      onChange?.(hex);
+      onChangeComplete?.(hex);
+      setColor(hex);
     };
-    const handleOnChange = (val) => {
-      onChange?.(val.hex);
-      setColor(val.hex);
+    const handleOnChange = (hex) => {
+      onChange?.(hex);
+      setColor(hex);
     };
-    const handleOnChangeComplete = (val) => {
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
+    const handleOnChangeComplete = (hex) => {
+      onChangeComplete?.(hex);
+      setColor(hex);
     };
     const handleAddColor = () => {
       const colorToAdd = color || "#000000";
@@ -157,7 +157,7 @@ const HvColorPicker = forwardRef(
                     classes.headerColorIconOnly
                   )
                 }
-              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(HvIcon, { name: "ColorPicker", className: classes.colorPickerIcon }) : void 0,
+              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(HvIcon, { name: "ColorPicker" }) : void 0,
               placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "div",
@@ -178,11 +178,10 @@ const HvColorPicker = forwardRef(
               "aria-label": ariaLabel,
               "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
               "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-              children: /* @__PURE__ */ jsx(HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxs("div", { className: classes.colorPicker, children: [
+              children: /* @__PURE__ */ jsxs(HvPanel, { className: cx(classes.panel, classes.colorPicker), children: [
                 recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(
                   PresetColors,
                   {
-                    className: classes.recommendedColorsRoot,
                     colors: recommendedColors,
                     onClick: handleSelect,
                     title: showLabels ? labels.recommendedColorsLabel : void 0
@@ -191,13 +190,8 @@ const HvColorPicker = forwardRef(
                 showCustomColors && /* @__PURE__ */ jsx(
                   Picker,
                   {
-                    classes: {
-                      fields: cx({
-                        [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
-                      })
-                    },
                     title: showLabels ? labels.customColorsLabel : void 0,
-                    color,
+                    hex: color,
                     onChange: handleOnChange,
                     onChangeComplete: handleOnChangeComplete
                   }
@@ -221,7 +215,7 @@ const HvColorPicker = forwardRef(
                     title: showLabels ? labels.recommendedColorsLabel : void 0
                   }
                 )
-              ] }) })
+              ] })
             }
           )
         ]

package/dist/ColorPicker/ColorPicker.styles.js

@@ -1,4 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   root: {},
   labelContainer: {},
@@ -19,19 +20,14 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
     width: "100%",
     minWidth: "266px",
     display: "flex",
+    flexDirection: "column",
+    gap: theme.space.md,
     justifyContent: "center",
     padding: "16px",
     backgroundColor: "transparent"
   },
-  colorPicker: {
-    width: "232px"
-  },
+  colorPicker: {},
   colorPickerIcon: {},
-  recommendedColorsRoot: {
-    ":not(:only-child)": {
-      paddingBottom: "24px"
-    }
-  },
   dropdownRootIconOnly: {
     "&,& .HvBaseDropdown-arrowContainer": {
       width: 32,
@@ -43,8 +39,7 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   },
   headerColorIconOnly: {
     margin: 8
-  },
-  pickerFields: { paddingBottom: 20 }
+  }
 });
 export {
   staticClasses,

package/dist/ColorPicker/{Fields → Picker}/Fields.js

@@ -1,18 +1,47 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import * as color from "react-color/lib/helpers/color";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Fields.styles.js";
+import { useMemo, useState, useRef, useEffect } from "react";
+import { hexToRgba, validHex, rgbToHex } from "@uiw/color-convert";
+import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 import { HvInput } from "../../Input/Input.js";
+const { useClasses } = createClasses("HvColorPickerFields", {
+  root: {
+    width: "100%",
+    display: "flex",
+    gap: theme.space.xxs
+  },
+  single: {
+    maxWidth: "50px",
+    "& input": {
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    }
+  },
+  double: {
+    maxWidth: "82px",
+    paddingRight: theme.space.xxs,
+    "& input": {
+      textTransform: "uppercase",
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    }
+  }
+});
 const Fields = (props) => {
   const {
     className,
     onChange,
-    rgb,
     hex,
     classes: classesProp
   } = useDefaultProps("HvColorPickerFields", props);
   const { classes, cx } = useClasses(classesProp);
+  const rgb = useMemo(() => hexToRgba(hex), [hex]);
   const [internalHex, setInternalHex] = useState(hex);
   const [internalRed, setInternalRed] = useState(rgb?.r);
   const [internalGreen, setInternalGreen] = useState(rgb?.g);
@@ -37,45 +66,23 @@ const Fields = (props) => {
       setInternalBlue(rgb?.b);
     }
   }, [rgb]);
-  const handleChange = (data, event) => {
-    if (data.hex && color.isValidHex(data.hex)) {
-      onChange(
-        {
-          hex: data.hex,
-          source: "hex"
-        },
-        event
-      );
-    } else if (data.r !== 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,
-          source: "rgb"
-        },
-        event
-      );
-    }
-  };
-  const onChangeHex = (event, value) => {
-    setInternalHex(value);
-    handleChange({ hex: value }, event);
+  const handleChange = (hex2) => {
+    if (!validHex(hex2)) return;
+    onChange?.(hex2);
   };
-  const onChangeRbg = (event, value, colorPart) => {
-    if (colorPart === "r") setInternalRed(Number(value));
-    if (colorPart === "g") setInternalGreen(Number(value));
-    if (colorPart === "b") setInternalBlue(Number(value));
+  const onChangeRbg = ({ r, g, b }) => {
+    if (r) setInternalRed(Number(r));
+    if (g) setInternalGreen(Number(g));
+    if (b) setInternalBlue(Number(b));
     handleChange(
-      {
-        r: colorPart === "r" ? Number(value) : rgb?.r,
-        g: colorPart === "g" ? Number(value) : rgb?.g,
-        b: colorPart === "b" ? Number(value) : rgb?.b
-      },
-      event
+      rgbToHex({
+        r: r ? Number(r) : rgb?.r,
+        g: g ? Number(g) : rgb?.g,
+        b: b ? Number(b) : rgb?.b
+      })
     );
   };
-  return /* @__PURE__ */ jsxs("div", { className: cx(classes.fields, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), children: [
     /* @__PURE__ */ jsx(
       HvInput,
       {
@@ -83,7 +90,10 @@ const Fields = (props) => {
         className: classes.double,
         label: "HEX",
         value: internalHex?.replace("#", ""),
-        onChange: onChangeHex,
+        onChange: (event, value) => {
+          setInternalHex(value);
+          handleChange(value);
+        },
         onBlur: () => setInternalHex(hex),
         disableClear: true
       }
@@ -95,7 +105,7 @@ const Fields = (props) => {
         className: classes.single,
         label: "R",
         value: internalRed,
-        onChange: (event, value) => onChangeRbg(event, value, "r"),
+        onChange: (event, value) => onChangeRbg({ r: value }),
         onBlur: () => setInternalRed(rgb?.r),
         inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
@@ -108,7 +118,7 @@ const Fields = (props) => {
         className: classes.single,
         label: "G",
         value: internalGreen,
-        onChange: (event, value) => onChangeRbg(event, value, "g"),
+        onChange: (event, value) => onChangeRbg({ g: value }),
         onBlur: () => setInternalGreen(rgb?.g),
         inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
@@ -121,7 +131,7 @@ const Fields = (props) => {
         className: classes.single,
         label: "B",
         value: internalBlue,
-        onChange: (event, value) => onChangeRbg(event, value, "b"),
+        onChange: (event, value) => onChangeRbg({ b: value }),
         onBlur: () => setInternalBlue(rgb?.b),
         inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true

package/dist/ColorPicker/Picker/Picker.js

@@ -1,64 +1,55 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { CustomPicker } from "react-color";
-import { Saturation, Hue } from "react-color/lib/components/common";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { hexToHsva, hsvaToHex } from "@uiw/color-convert";
+import Hue from "@uiw/react-color-hue";
+import Saturation from "@uiw/react-color-saturation";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Fields } from "./Fields.js";
 import { useClasses } from "./Picker.styles.js";
-import { Fields } from "../Fields/Fields.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const Component = (props) => {
+const Picker = (props) => {
   const {
+    hex: hexProp,
     onChange,
-    rgb,
-    hsl,
-    hsv,
-    hex,
+    onChangeComplete,
     title,
     classes: classesProp
   } = useDefaultProps("HvColorPickerPicker", props);
   const { classes } = useClasses(classesProp);
-  const SaturationPointer = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }),
-    [classes?.saturationPointer]
-  );
-  const HueSlider = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.hueSlider }),
-    [classes?.hueSlider]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const hex = hexProp || "#000000";
+  const hsva = useMemo(() => hexToHsva(hex), [hex]);
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
     title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
     /* @__PURE__ */ jsxs("div", { className: classes.pickers, children: [
-      /* @__PURE__ */ jsx("div", { className: classes.saturation, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         Saturation,
         {
-          hsl,
-          hsv,
-          onChange,
-          pointer: SaturationPointer
+          className: classes.saturation,
+          hsva,
+          onChange: (newColor) => {
+            const newHex = hsvaToHex(newColor);
+            onChange?.(newHex);
+            onChangeComplete?.(newHex);
+          }
         }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsx(
+      ),
+      /* @__PURE__ */ jsx(
         Hue,
         {
+          className: classes.hue,
           direction: "horizontal",
-          hsl,
-          onChange,
-          pointer: HueSlider
+          hue: hsva.h,
+          onChange: ({ h }) => {
+            const newHex = hsvaToHex({ ...hsva, h });
+            onChange?.(newHex);
+            onChangeComplete?.(newHex);
+          }
         }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Fields,
-      {
-        className: classes.fields,
-        rgb,
-        hex,
-        onChange
-      }
-    )
+      ),
+      /* @__PURE__ */ jsx(Fields, { hex, onChange })
+    ] })
   ] });
 };
-const Picker = CustomPicker(Component);
 export {
   Picker
 };

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

@@ -1,59 +1,43 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { useClasses } = createClasses("HvColorPickerPicker", {
+  root: {},
   pickers: {
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    gap: theme.space.sm
   },
   saturation: {
-    width: "232px",
-    height: "140px",
-    marginRight: "0px",
+    width: "232px !important",
+    height: "140px !important",
     position: "relative",
     overflow: "visible",
-    "& > div": {
-      borderRadius: theme.radii.base,
-      "& .saturation-white": {
-        borderRadius: theme.radii.base,
-        "& .saturation-black": {
-          borderRadius: theme.radii.base
-        }
-      }
+    "& .w-color-saturation-fill": {
+      width: "8px !important",
+      height: "8px !important",
+      boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4) !important`
     }
   },
-  saturationPointer: {
-    width: "8px",
-    height: "8px",
-    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
-            0 0 1px 2px rgba(0,0,0,.4)`,
-    borderRadius: theme.radii.full,
-    transform: "translate(-3px, -3px)"
-  },
   hue: {
-    height: "8px",
-    width: "232px",
+    height: "8px !important",
+    width: "232px !important",
     position: "relative",
     overflow: "visible",
-    marginTop: "18px",
-    "& .hue-horizontal": {
-      borderRadius: `calc(2*${theme.radii.base})`
+    "& .w-color-alpha-fill": {
+      width: "12px !important",
+      height: "12px !important",
+      backgroundColor: "transparent !important",
+      boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
+      marginLeft: "0px",
+      border: "2px solid #fff",
+      borderRadius: theme.radii.full,
+      transform: "translate(-6px, -2px) !important"
     }
   },
-  hueSlider: {
-    width: "12px",
-    height: "12px",
-    background: "transparent",
-    boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
-    marginLeft: "0px",
-    border: "2px solid #fff",
-    borderRadius: theme.radii.full,
-    transform: "translate(-6px, -2px)"
-  },
   title: {
     fontWeight: theme.fontWeights.semibold,
     marginBottom: 8
-  },
-  fields: {}
+  }
 });
 export {
   useClasses

package/dist/ColorPicker/PresetColors/PresetColors.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Swatch } from "react-color/lib/components/common";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
+import { Swatch } from "../Swatch.js";
 import { useClasses } from "./PresetColors.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const PresetColors = (props) => {
@@ -13,29 +13,14 @@ const PresetColors = (props) => {
     classes: classesProp
   } = useDefaultProps("HvColorPickerPresetColors", props);
   const { classes, cx } = useClasses(classesProp);
-  const handleClick = (hex) => {
-    onClick({
-      hex,
-      source: "hex"
-    });
-  };
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), children: [
     title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
     /* @__PURE__ */ jsx("div", { className: classes.colors, children: colors.map((color, index) => /* @__PURE__ */ jsx(
-      "div",
+      Swatch,
       {
-        className: classes.swatchWrap,
-        children: /* @__PURE__ */ jsx(
-          Swatch,
-          {
-            color,
-            style: { backgroundColor: getColor(color) },
-            onClick: handleClick,
-            focusStyle: {
-              boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
-            }
-          }
-        )
+        color,
+        style: { backgroundColor: getColor(color) },
+        onClick: () => onClick(color)
       },
       `recommended-color-${color}-${index}`
     )) })

package/dist/ColorPicker/PresetColors/PresetColors.styles.js

@@ -6,21 +6,12 @@ const { useClasses } = createClasses("HvColorPickerPresetColors", {
     display: "flex",
     flexWrap: "wrap",
     position: "relative",
-    width: "calc(100% + 8px)",
-    margin: "-4px -4px",
+    gap: theme.space.xs,
     padding: 0
   },
   title: {
     fontWeight: theme.fontWeights.semibold,
     marginBottom: 8
-  },
-  swatchWrap: {
-    width: "32px",
-    height: "32px",
-    margin: theme.space.xxs,
-    "& > span > div": {
-      borderRadius: theme.radii.base
-    }
   }
 });
 export {

package/dist/ColorPicker/SavedColors/SavedColors.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Swatch } from "react-color/lib/components/common";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
+import { Swatch } from "../Swatch.js";
 import { useClasses } from "./SavedColors.styles.js";
 import { HvIconButton } from "../../IconButton/IconButton.js";
 const SavedColors = (props) => {
@@ -15,52 +15,29 @@ const SavedColors = (props) => {
     classes: classesProp
   } = useDefaultProps("HvColorPickerSavedColors", props);
   const { classes } = useClasses(classesProp);
-  const handleClick = (hex) => {
-    onClickColor({
-      hex,
-      source: "hex"
-    });
-  };
   return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
     /* @__PURE__ */ jsx(
       HvIconButton,
       {
-        className: classes.addButton,
         variant: "secondarySubtle",
         onClick: onAddColor,
         title: addButtonAriaLabel,
         children: /* @__PURE__ */ jsx(HvIcon, { name: "Add", compact: true })
       }
     ),
-    colors.map((color, index) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classes.swatchRoot,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: classes.swatchWrap, children: /* @__PURE__ */ jsx(
-            Swatch,
-            {
-              color,
-              onClick: handleClick,
-              focusStyle: {
-                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: classes.removeButtonRoot, children: /* @__PURE__ */ jsx(
-            HvIconButton,
-            {
-              className: classes.removeButton,
-              variant: "secondarySubtle",
-              onClick: () => onRemoveColor(color, index),
-              title: deleteButtonAriaLabel,
-              children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true, size: "xs" })
-            }
-          ) })
-        ]
-      },
-      `saved-color-${color}-${index}`
-    ))
+    [...new Set(colors)].map((color, index) => /* @__PURE__ */ jsxs("div", { className: classes.swatchRoot, children: [
+      /* @__PURE__ */ jsx(Swatch, { color, onClick: () => onClickColor(color) }),
+      /* @__PURE__ */ jsx(
+        HvIconButton,
+        {
+          className: classes.removeButton,
+          variant: "secondarySubtle",
+          onClick: () => onRemoveColor(color, index),
+          title: deleteButtonAriaLabel,
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true, size: "xs" })
+        }
+      )
+    ] }, color))
   ] });
 };
 export {

package/dist/ColorPicker/SavedColors/SavedColors.styles.js

@@ -1,44 +1,29 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { useClasses } = createClasses("HvColorPickerSavedColors", {
-  addButton: {
-    margin: theme.space.xxs,
-    width: "32px",
-    height: "32px"
-  },
   root: {
     display: "flex",
     flexWrap: "wrap",
     position: "relative",
-    alignItems: "center",
-    padding: 0,
-    width: "calc(100% + 8px)",
-    margin: "-4px -4px"
+    gap: theme.space.xs,
+    alignItems: "center"
   },
-  swatchRoot: { position: "relative" },
-  swatchWrap: {
-    width: "32px",
-    height: "32px",
-    margin: theme.space.xxs,
-    "& > span > div": {
-      borderRadius: theme.radii.base
-    }
+  swatchRoot: {
+    position: "relative",
+    height: 32
   },
-  removeButtonRoot: {
+  removeButton: {
     position: "absolute",
     top: 0,
     right: 0,
+    transform: "translate(25%, -25%)",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    height: 16,
-    width: 16,
-    background: theme.colors.bgContainer,
-    borderRadius: theme.radii.base
-  },
-  removeButton: {
     height: 16,
     width: 16
+    // background: theme.colors.bgContainer,
+    // borderRadius: theme.radii.base,
   }
 });
 export {

package/dist/ColorPicker/Swatch.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { useDefaultProps, createClasses, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
+const { useClasses } = createClasses("HvColorPickerSwatch", {
+  root: {
+    width: "32px",
+    height: "32px",
+    borderRadius: theme.radii.base,
+    ":focus": {
+      boxShadow: `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, var(--color) 0px 0px 4px`
+    },
+    "&,&:hover,&:focus-visible": {
+      backgroundColor: "var(--color)"
+    }
+  }
+});
+const Swatch = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    style,
+    color,
+    ...others
+  } = useDefaultProps("HvColorPickerSwatch", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    HvButtonBase,
+    {
+      title: color,
+      style: mergeStyles(style, { "--color": color }),
+      className: cx(classes.root, className),
+      ...others
+    }
+  );
+};
+export {
+  Swatch
+};

package/dist/FormElement/Suggestions/Suggestions.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef } from "react";
-import { ClickAwayListener } from "@mui/base/ClickAwayListener";
-import { Popper } from "@mui/base/Popper";
+import { ClickAwayListener, Popper } from "@mui/base";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../../utils/document.js";

package/dist/Select/Option.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
-import { useOption } from "@mui/base/useOption";
+import { useOption } from "@mui/base";
 import { useForkRef } from "@mui/material/utils";
 import { createClasses, useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { fixedForwardRef } from "../types/generic.js";

package/dist/Select/OptionGroup.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { OptionGroup } from "@mui/base/OptionGroup";
+import { OptionGroup } from "@mui/base";
 import { createClasses, useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvOptionGroup", {

package/dist/Select/Select.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { Popper } from "@mui/base/Popper";
-import { useSelect, SelectProvider } from "@mui/base/useSelect";
+import { useSelect, Popper, SelectProvider } from "@mui/base";
 import { useForkRef, useControlled } from "@mui/material/utils";
 import { clsx } from "clsx";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";

package/dist/TreeView/TreeView.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useSlotProps } from "@mui/base/utils";
+import { useSlotProps } from "@mui/base";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { fixedForwardRef } from "../types/generic.js";

package/dist/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Popper } from "@mui/base/Popper";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { Popper, ClickAwayListener } from "@mui/base";
 import { useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../../utils/document.js";
 import { HvVerticalNavigation } from "../VerticalNavigation.js";

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { CardHeaderProps } from '@mui/material/CardHeader';
 import { CardMediaProps } from '@mui/material/CardMedia';
 import { Cell } from 'react-table';
 import { CheckboxProps } from '@mui/material/Checkbox';
-import { ClickAwayListenerProps } from '@mui/base/ClickAwayListener';
+import { ClickAwayListenerProps } from '@mui/base';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
 import { ComponentProps } from 'react';
@@ -46,10 +46,10 @@ import { IdType as IdType_2 } from 'react-table';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MutableRefObject } from 'react';
-import { OptionGroupProps } from '@mui/base/OptionGroup';
-import { OptionOwnProps } from '@mui/base/Option';
+import { OptionGroupProps } from '@mui/base';
+import { OptionOwnProps } from '@mui/base';
 import { OptionsObject } from 'notistack';
-import { PopperProps } from '@mui/base/Popper';
+import { PopperProps } from '@mui/base';
 import { PopperProps as PopperProps_2 } from 'react-popper';
 import { PropGetter } from 'react-table';
 import { PropsWithoutRef } from 'react';
@@ -60,8 +60,8 @@ import { ReducerTableState } from 'react-table';
 import { RefAttributes } from 'react';
 import { Renderer } from 'react-table';
 import { Row } from 'react-table';
-import { SelectOption } from '@mui/base/useOption';
-import { SelectValue } from '@mui/base/useSelect';
+import { SelectOption } from '@mui/base';
+import { SelectValue } from '@mui/base';
 import { SlideProps } from '@mui/material/Slide';
 import { SliderProps } from 'rc-slider';
 import { SliderRef } from 'rc-slider';
@@ -126,7 +126,7 @@ import { UseRowStateInstanceProps } from 'react-table';
 import { UseRowStateOptions } from 'react-table';
 import { UseRowStateRowProps } from 'react-table';
 import { UseRowStateState } from 'react-table';
-import { UseSelectParameters } from '@mui/base/useSelect';
+import { UseSelectParameters } from '@mui/base';
 import { UseSortByColumnOptions } from 'react-table';
 import { UseSortByColumnProps } from 'react-table';
 import { UseSortByHooks } from 'react-table';
@@ -515,10 +515,8 @@ export declare const colorPickerClasses: {
     panel: string;
     colorPicker: string;
     colorPickerIcon: string;
-    recommendedColorsRoot: string;
     dropdownRootIconOnly: string;
     headerColorIconOnly: string;
-    pickerFields: string;
 };
 
 declare type ColorVariant = "primary" | "secondary" | "positive" | "negative" | "warning";
@@ -8781,7 +8779,7 @@ declare const useClasses_47: (classesProp?: Partial<Record<"vertical" | "horizon
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_48: (classesProp?: Partial<Record<"label" | "colorPicker" | "root" | "description" | "panel" | "labelContainer" | "headerColorValue" | "headerColorIcon" | "colorPickerIcon" | "recommendedColorsRoot" | "dropdownRootIconOnly" | "headerColorIconOnly" | "pickerFields", string>>, addStatic?: boolean) => {
+declare const useClasses_48: (classesProp?: Partial<Record<"label" | "colorPicker" | "root" | "description" | "panel" | "labelContainer" | "headerColorValue" | "headerColorIcon" | "colorPickerIcon" | "dropdownRootIconOnly" | "headerColorIconOnly", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         labelContainer: string;
@@ -8792,10 +8790,8 @@ declare const useClasses_48: (classesProp?: Partial<Record<"label" | "colorPicke
         panel: string;
         colorPicker: string;
         colorPickerIcon: string;
-        recommendedColorsRoot: string;
         dropdownRootIconOnly: string;
         headerColorIconOnly: string;
-        pickerFields: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;

package/dist/themes/next.js

@@ -122,20 +122,8 @@ const next = mergeTheme(next$1, {
     HvColorPicker: {
       classes: {
         colorPicker: {
-          " .HvColorPickerPresetColors-swatchWrap > span > div": {
+          ".HvColorPickerSwatch-root": {
             borderRadius: theme.radii.round
-          },
-          " .HvColorPickerSavedColors-swatchWrap > span > div": {
-            borderRadius: theme.radii.round
-          },
-          " .HvColorPickerPicker-saturation > div": {
-            borderRadius: theme.radii.round,
-            " .saturation-white": {
-              borderRadius: theme.radii.round,
-              " .saturation-black": {
-                borderRadius: theme.radii.round
-              }
-            }
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.0.0-next.4",
+  "version": "6.0.0-next.6",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -33,21 +33,22 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^6.0.0-next.4",
-    "@hitachivantara/uikit-react-utils": "^6.0.0-next.4",
-    "@hitachivantara/uikit-styles": "^6.0.0-next.4",
+    "@hitachivantara/uikit-react-shared": "^6.0.0-next.5",
+    "@hitachivantara/uikit-react-utils": "^6.0.0-next.5",
+    "@hitachivantara/uikit-styles": "^6.0.0-next.5",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
     "@react-aria/datepicker": "^3.9.0",
     "@react-stately/datepicker": "^3.9.0",
     "@types/react-table": "^7.7.18",
+    "@uiw/react-color-hue": "^2.9.2",
+    "@uiw/react-color-saturation": "^2.9.2",
     "clsx": "^2.0.0",
     "embla-carousel-react": "^8.1.3",
     "notistack": "^3.0.2",
     "rc-slider": "^10.5.0",
     "rc-tooltip": "~6.3.0",
-    "react-color": "^2.19.3",
     "react-popper": "^2.3.0",
     "react-resize-detector": "^8.1.0",
     "react-table": "^7.8.0",
@@ -60,11 +61,11 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "66ab53a4c56da226078cf7dd92881ba7f0f521a4",
+  "gitHead": "bf1f8dcbead53467253e86b24f15ecbc2b23ed0f",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "default": "./dist/index.js"
     }
   },
   "types": "dist/index.d.ts",

package/dist/ColorPicker/Fields/Fields.styles.js

@@ -1,36 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerFields", {
-  fields: {
-    width: "100%",
-    display: "flex",
-    paddingTop: "18px",
-    marginRight: "0px"
-  },
-  single: {
-    maxWidth: "50px",
-    paddingLeft: theme.space.xxs,
-    "& input": {
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  },
-  double: {
-    maxWidth: "82px",
-    paddingRight: theme.space.xxs,
-    "& input": {
-      textTransform: "uppercase",
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  }
-});
-export {
-  useClasses
-};