@hitachivantara/uikit-react-core 5.109.1 → 6.0.0-next.10

package/dist/{esm/Calendar → Calendar}/CalendarNavigation/ComposedNavigation/ComposedNavigation.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { setId } from "../../../utils/setId.js";
 import { getMonthNamesList } from "../../utils.js";
 import { useClasses } from "./ComposedNavigation.styles.js";
 import { staticClasses } from "./ComposedNavigation.styles.js";
@@ -21,7 +20,6 @@ const HvComposedNavigation = ({
     /* @__PURE__ */ jsx("div", { className: classes.navigationMonth, children: /* @__PURE__ */ jsx(
       Navigation,
       {
-        id: setId(id, "navigation-month"),
         navigationText: monthName,
         onNavigatePrevious: (event) => {
           onChange?.(event, "previous_month");
@@ -38,7 +36,6 @@ const HvComposedNavigation = ({
     /* @__PURE__ */ jsx(
       Navigation,
       {
-        id: setId(id, "navigation-year"),
         navigationText: visibleYear.toString(),
         onNavigatePrevious: (event) => {
           onChange?.(event, "previous_year");

package/dist/{esm/Calendar → Calendar}/CalendarNavigation/Navigation/Navigation.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { HvIcon } from "../../../icons.js";
-import { setId } from "../../../utils/setId.js";
 import { useClasses } from "./Navigation.styles.js";
 import { staticClasses } from "./Navigation.styles.js";
 import { HvButton } from "../../../Button/Button.js";
@@ -22,7 +21,6 @@ const Navigation = ({
         icon: true,
         disabled: !isPreviousEnabled,
         "aria-label": "Previous",
-        id: setId(id, "left"),
         className: cx(classes.icon, {
           [classes.disabled]: !isPreviousEnabled
         }),
@@ -49,7 +47,6 @@ const Navigation = ({
         icon: true,
         disabled: !isNextEnabled,
         "aria-label": "Next",
-        id: setId(id, "right"),
         className: cx(classes.icon, {
           [classes.disabled]: !isNextEnabled
         }),

package/dist/{esm/Calendar → Calendar}/SingleCalendar/SingleCalendar.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { isKey } from "../../utils/keyboardUtils.js";
-import { setId } from "../../utils/setId.js";
 import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { generateCalendarModel } from "../model.js";
 import { isDate, getWeekdayNamesList, DEFAULT_LOCALE, isRange } from "../utils.js";
@@ -102,7 +101,6 @@ const HvSingleCalendar = ({
     /* @__PURE__ */ jsx(
       HvCalendarHeader,
       {
-        id: setId(id, "header"),
         locale,
         value,
         onChange: handleInputChange,

package/dist/{esm/Card → Card}/Header/Header.js

@@ -23,11 +23,7 @@ const HvCardHeader = (props) => {
       onClick,
       className: cx(classes.root, className),
       classes: {
-        title: cx({
-          // TODO: review conditional in v6
-          [classes.titleShort]: icon,
-          [classes.title]: !icon
-        }),
+        title: classes.title,
         subheader: classes.subheader,
         action: classes.action,
         content: classes.content

package/dist/{esm/Card → Card}/Header/Header.styles.js

@@ -8,10 +8,6 @@ const { staticClasses, useClasses } = createClasses("HvCardHeader", {
     alignItems: "center",
     display: "flex"
   },
-  titleShort: {
-    ...theme.typography.label,
-    fontFamily: theme.fontFamily.body
-  },
   title: {
     ...theme.typography.label,
     fontFamily: theme.fontFamily.body

package/dist/{esm/Carousel → Carousel}/Carousel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, Children, useCallback, useEffect } from "react";
 import useCarousel from "embla-carousel-react";
-import { useDefaultProps, useTheme, clamp } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
 import { HvIcon } from "../icons.js";
 import { useClasses } from "./Carousel.styles.js";
@@ -9,9 +9,9 @@ import { staticClasses } from "./Carousel.styles.js";
 import { HvCarouselControls } from "./CarouselControls.js";
 import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
 import { HvContainer } from "../Container/Container.js";
-import { HvButton } from "../Button/Button.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvTypography } from "../Typography/Typography.js";
+import { HvButton } from "../Button/Button.js";
 const DEFAULT_LABELS = {
   close: "Close",
   fullscreen: "Fullscreen",
@@ -42,14 +42,11 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
     onFullscreen,
     ...others
   } = useDefaultProps("HvCarousel", props);
-  const { activeTheme } = useTheme();
-  const { classes, css, cx } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const thumbnailsRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const isDs3 = activeTheme?.base === "ds3";
-  const actionsPosition = isDs3 ? "header" : "controls";
-  const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
+  const controlsPosition = controlsPositionProp ?? "top";
   const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
   const [containerRef, controller] = useCarousel({
     align: "start",
@@ -104,27 +101,18 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
   const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
   const showThumbnails = !hideThumbnails && !!renderThumbnail;
   const showDots = showDotsProp ?? numSlides <= 5;
-  const actions = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx(
-        classes.actions,
-        actionsPosition === "header" ? css({ position: "relative", top: -40, height: 0 }) : css({ position: "absolute" })
-      ),
-      children: [
-        actionsProp,
-        showFullscreen && /* @__PURE__ */ jsx(
-          HvIconButton,
-          {
-            title: isFullscreen ? labels.close : labels.fullscreen,
-            onClick: handleFullscreen,
-            className: classes.closeButton,
-            children: /* @__PURE__ */ jsx(HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
-          }
-        )
-      ]
-    }
-  );
+  const actions = /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
+    actionsProp,
+    showFullscreen && /* @__PURE__ */ jsx(
+      HvIconButton,
+      {
+        title: isFullscreen ? labels.close : labels.fullscreen,
+        onClick: handleFullscreen,
+        className: classes.closeButton,
+        children: /* @__PURE__ */ jsx(HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
+      }
+    )
+  ] });
   const controls = /* @__PURE__ */ jsx(
     HvCarouselControls,
     {
@@ -136,7 +124,7 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
       canNext,
       onPreviousClick: handlePrevious,
       onNextClick: handleNext,
-      actions: actionsPosition === "controls" && actions,
+      actions,
       labels: {
         backwards: labels.backwards,
         forwards: labels.forwards
@@ -166,7 +154,6 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
       ...others,
       children: [
         showTitle && /* @__PURE__ */ jsx(HvTypography, { variant: "title2", className: classes.title, children: title }),
-        actionsPosition === "header" && actions,
         thumbnailsPosition === "top" && thumbnails,
         controlsPosition === "top" && controls,
         /* @__PURE__ */ jsxs(

package/dist/{esm/Carousel → Carousel}/Carousel.styles.js

@@ -46,7 +46,7 @@ const { staticClasses, useClasses } = createClasses("HvCarousel", {
     display: "flex",
     justifyContent: "flex-end",
     right: 0,
-    position: "relative"
+    position: "absolute"
   },
   closeButton: {},
   mainContainer: {},

package/dist/{esm/ColorPicker → 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";
@@ -66,7 +66,7 @@ const HvColorPicker = forwardRef(
       defaultSavedColorsValue = [],
       onSavedColorAdded,
       onSavedColorRemoved,
-      deleteSavedColorButtonArialLabel = "Delete saved color",
+      deleteSavedColorButtonAriaLabel = "Delete saved color",
       addSavedColorButtonAriaLabel = "Add current color to saved colors"
     } = useDefaultProps("HvColorPicker", props);
     const { classes, cx } = useClasses(classesProp);
@@ -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
                   }
@@ -209,7 +203,7 @@ const HvColorPicker = forwardRef(
                     onAddColor: handleAddColor,
                     onClickColor: handleSelect,
                     onRemoveColor: handleRemoveColor,
-                    deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
+                    deleteButtonAriaLabel: deleteSavedColorButtonAriaLabel,
                     addButtonAriaLabel: addSavedColorButtonAriaLabel
                   }
                 ),
@@ -221,7 +215,7 @@ const HvColorPicker = forwardRef(
                     title: showLabels ? labels.recommendedColorsLabel : void 0
                   }
                 )
-              ] }) })
+              ] })
             }
           )
         ]

package/dist/{esm/ColorPicker → 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/{esm/ColorPicker/Fields → ColorPicker/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

@@ -0,0 +1,55 @@
+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 { HvTypography } from "../../Typography/Typography.js";
+const Picker = (props) => {
+  const {
+    hex: hexProp,
+    onChange,
+    onChangeComplete,
+    title,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerPicker", props);
+  const { classes } = useClasses(classesProp);
+  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(
+        Saturation,
+        {
+          className: classes.saturation,
+          hsva,
+          onChange: (newColor) => {
+            const newHex = hsvaToHex(newColor);
+            onChange?.(newHex);
+            onChangeComplete?.(newHex);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Hue,
+        {
+          className: classes.hue,
+          direction: "horizontal",
+          hue: hsva.h,
+          onChange: ({ h }) => {
+            const newHex = hsvaToHex({ ...hsva, h });
+            onChange?.(newHex);
+            onChangeComplete?.(newHex);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Fields, { hex, onChange })
+    ] })
+  ] });
+};
+export {
+  Picker
+};

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

@@ -0,0 +1,44 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+const { useClasses } = createClasses("HvColorPickerPicker", {
+  root: {},
+  pickers: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space.sm
+  },
+  saturation: {
+    width: "232px !important",
+    height: "140px !important",
+    position: "relative",
+    overflow: "visible",
+    "& .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`
+    }
+  },
+  hue: {
+    height: "8px !important",
+    width: "232px !important",
+    position: "relative",
+    overflow: "visible",
+    "& .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"
+    }
+  },
+  title: {
+    fontWeight: theme.fontWeights.semibold,
+    marginBottom: 8
+  }
+});
+export {
+  useClasses
+};

package/dist/{esm/ColorPicker → 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/{esm/ColorPicker → 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 {