@hitachivantara/uikit-react-core 5.82.3 → 5.83.0

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -16,7 +16,7 @@ const BaseDropdown_styles = require("./BaseDropdown.styles.cjs");
 const BaseDropdownPanel = require("./BaseDropdownPanel.cjs");
 const context = require("./context.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const BaseDropdown = React.forwardRef((props, ref) => {
+const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
   const {
     id: idProp,
     className,

package/dist/cjs/BaseInput/BaseInput.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const react = require("@emotion/react");
-const MuiInput = require("@mui/material/Input");
+const MuiInputBase = require("@mui/material/InputBase");
 const utils$1 = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
@@ -11,7 +11,7 @@ const BaseInput_styles = require("./BaseInput.styles.cjs");
 const context = require("../FormElement/context.cjs");
 const utils = require("../FormElement/utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const MuiInput__default = /* @__PURE__ */ _interopDefault(MuiInput);
+const MuiInputBase__default = /* @__PURE__ */ _interopDefault(MuiInputBase);
 const baseInputStyles = react.css({
   "input:-webkit-autofill": {
     WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.atmo1} inset`,
@@ -75,9 +75,6 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
     localInvalid,
     id
   );
-  const onChangeHandler = (event) => {
-    onChange?.(event, event.target.value);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: baseInputStyles }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -91,7 +88,7 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
         }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            MuiInput__default.default,
+            MuiInputBase__default.default,
             {
               id,
               name: formElementProps.name,
@@ -101,7 +98,7 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
               placeholder,
               readOnly: !!formElementProps.readOnly,
               disabled: formElementProps.disabled,
-              onChange: onChangeHandler,
+              onChange: (event) => onChange?.(event, event.target.value),
               className: cx({
                 [classes.inputRootInvalid]: localInvalid,
                 [classes.inputRootReadOnly]: formElementProps.readOnly

package/dist/cjs/ButtonBase/ButtonBase.styles.cjs

@@ -10,12 +10,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButtonBas
     background: "none",
     padding: 0,
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":focus-visible": {
+      ...focusUtils.outlineStyles
     },
     // Default button - no size specified
     fontFamily: uikitStyles.theme.fontFamily.body,

package/dist/cjs/Calendar/Calendar.cjs

@@ -6,13 +6,13 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const setId = require("../utils/setId.cjs");
 const Calendar_styles = require("./Calendar.styles.cjs");
 const utils = require("./utils.cjs");
-const SingleCalendar = require("./SingleCalendar/SingleCalendar.cjs");
 const context = require("../FormElement/context.cjs");
+const SingleCalendar = require("./SingleCalendar/SingleCalendar.cjs");
 const HvCalendar = (props) => {
   const {
     classes: classesProp,
     id: idProp,
-    locale = "en-US",
+    locale = utils.DEFAULT_LOCALE,
     value: valueProp,
     visibleMonth,
     visibleYear,

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -2,31 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const dayjs = require("dayjs");
-const customParseFormat = require("dayjs/plugin/customParseFormat");
-const localeData = require("dayjs/plugin/localeData");
-const localizedFormat = require("dayjs/plugin/localizedFormat");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const CalendarHeader_styles = require("./CalendarHeader.styles.cjs");
-const context = require("../../FormElement/context.cjs");
 const Input = require("../../Input/Input.cjs");
+const context = require("../../FormElement/context.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
-const customParseFormat__default = /* @__PURE__ */ _interopDefault(customParseFormat);
-const localeData__default = /* @__PURE__ */ _interopDefault(localeData);
-const localizedFormat__default = /* @__PURE__ */ _interopDefault(localizedFormat);
-dayjs__default.default.extend(localeData__default.default);
-dayjs__default.default.extend(localizedFormat__default.default);
-dayjs__default.default.extend(customParseFormat__default.default);
 const HvCalendarHeader = (props) => {
   const {
     id: idProp,
-    value,
-    locale = "en-US",
+    value: valueProp,
+    locale = utils.DEFAULT_LOCALE,
     classes: classesProp,
     onChange,
     showEndDate,
@@ -36,23 +24,19 @@ const HvCalendarHeader = (props) => {
   } = uikitReactUtils.useDefaultProps("HvCalendarHeader", props);
   const { classes, cx } = CalendarHeader_styles.useClasses(classesProp);
   const context$1 = React.useContext(context.HvFormElementContext);
-  const elementValue = React.useContext(context.HvFormElementValueContext);
   const { label } = React.useContext(context.HvFormElementDescriptorsContext);
-  let localValue = value ?? elementValue ?? "";
-  if (utils.isRange(localValue)) {
-    localValue = showEndDate ? localValue.endDate : localValue.startDate;
-  }
+  const localValue = utils.isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
   const [dateValue, setDateValue] = React.useState(localValue);
   const [editedValue, setEditedValue] = React.useState(null);
   const [displayValue, setDisplayValue] = React.useState("");
   const [weekdayDisplay, setWeekdayDisplay] = React.useState("");
   const id = idProp ?? setId.setId(context$1.id, "calendarHeader");
   const inputValue = editedValue ?? displayValue;
-  const localeFormat = dayjs__default.default().locale(locale).localeData().longDateFormat("L");
+  const localeFormat = utils.getLocaleDateFormat(locale);
   const [isValidValue, setIsValidValue] = React.useState(
-    inputValue.length === 0 || !!inputValue && dayjs__default.default(localValue).isValid()
+    inputValue.length === 0 || inputValue && utils.isDate(new Date(inputValue))
   );
-  const validateInput = (incomingValid) => incomingValid === void 0 || dayjs__default.default(incomingValid).isValid();
+  const validateInput = (incomingValid) => incomingValid === void 0 || utils.isDate(new Date(incomingValid));
   React.useEffect(() => {
     const valid = validateInput(localValue);
     setIsValidValue(valid);
@@ -66,15 +50,15 @@ const HvCalendarHeader = (props) => {
       const weekday = new Intl.DateTimeFormat(locale, {
         weekday: "short"
       }).format(utils.isDate(localValue) ? localValue : 0);
-      setDisplayValue(utils.formatToLocale(localValue, locale));
+      setDisplayValue(utils.getFormattedDate(localValue, locale));
       setEditedValue(null);
       setWeekdayDisplay(weekday);
     }
   }, [localValue, locale]);
   const handleNewDate = (event, date) => {
-    const localeParsedDate = dayjs__default.default(date, localeFormat);
-    const isValidInput = localeParsedDate.isValid();
-    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs__default.default(date).toDate();
+    const localeParsedDate = utils.parseDateString(date, locale);
+    const isValidInput = utils.isDate(localeParsedDate);
+    const dateParsed = isValidInput ? localeParsedDate : new Date(date);
     if (!utils.isSameDay(dateParsed, dateValue)) {
       setDateValue(dateParsed);
       onChange?.(event, dateParsed);
@@ -101,7 +85,7 @@ const HvCalendarHeader = (props) => {
   };
   const onFocusHandler = (event) => {
     if (!localValue) return;
-    const formattedDate = isValidValue && utils.isDate(localValue) ? dayjs__default.default(localValue).locale(locale).format("L") : editedValue;
+    const formattedDate = isValidValue && utils.isDate(localValue) ? utils.getStringFromDate(localValue, locale) : editedValue;
     setEditedValue(formattedDate);
     onFocus?.(event, formattedDate);
   };

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs

@@ -17,7 +17,7 @@ const HvSingleCalendar = ({
   classes: classesProp,
   className,
   id,
-  locale = "en-US",
+  locale = utils.DEFAULT_LOCALE,
   value,
   visibleMonth,
   visibleYear,
@@ -105,6 +105,7 @@ const HvSingleCalendar = ({
       {
         id: setId.setId(id, "header"),
         locale,
+        value,
         onChange: handleInputChange,
         showEndDate: showEndDate && !isDateSelectionMode,
         showDayOfWeek,

package/dist/cjs/Calendar/utils.cjs

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dayjs = require("dayjs");
 const helpers = require("../utils/helpers.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
 const CALENDAR_WEEKS = 6;
+const DEFAULT_LOCALE = "en";
 const getMonthDays = (month, year) => new Date(year, month, 0).getDate();
 const getMonthFirstWeekday = (month, year) => new Date(year, month - 1, 1).getDay();
 const makeUTCDate = (year, monthIndex, day, hour = 1) => new Date(Date.UTC(year, monthIndex, day, hour));
@@ -18,6 +16,9 @@ const isSameDay = (date1, date2) => {
   if (!(isDate(date1) && isDate(date2))) return false;
   return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
 };
+const getDateISO = (date) => {
+  return new Date(date).toISOString().slice(0, 10);
+};
 const getPreviousMonth = (month, year) => {
   const prevMonth = month > 1 ? month - 1 : 12;
   const prevMonthYear = month > 1 ? year : year - 1;
@@ -45,7 +46,10 @@ const getWeekdayNamesList = (locale) => {
   });
 };
 const getMonthName = (date, locale, representationValue = "long") => new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);
-const getFormattedDate = (date, locale, rep = "short") => `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;
+const getFormattedDate = (date, locale) => {
+  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  return formatter.format(date);
+};
 const createDatesArray = (month, year) => {
   const monthDays = getMonthDays(month, year);
   const daysFromPrevMonth = getMonthFirstWeekday(month, year);
@@ -68,41 +72,68 @@ const createDatesArray = (month, year) => {
   return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];
 };
 const isRange = (date) => date != null && typeof date === "object" && "startDate" in date;
-const dateInProvidedValueRange = (date, providedValueRange) => {
-  const { startDate, endDate } = providedValueRange;
-  if (!isRange(providedValueRange) || endDate == null) return false;
-  const localEndDate = endDate;
-  const modStartDate = dayjs__default.default(startDate).format("YYYY-MM-DD");
-  const modEndDate = dayjs__default.default(localEndDate).format("YYYY-MM-DD");
-  const convertedDate = dayjs__default.default(date).format("YYYY-MM-DD");
+const dateInProvidedValueRange = (date, dateRange) => {
+  if (!isRange(dateRange) || !dateRange?.endDate) return false;
+  const { startDate, endDate } = dateRange;
+  const modStartDate = getDateISO(startDate);
+  const modEndDate = getDateISO(endDate);
+  const convertedDate = getDateISO(date ?? /* @__PURE__ */ new Date());
   return convertedDate >= modStartDate && convertedDate <= modEndDate;
 };
 const checkIfDateIsDisabled = (date, minimumDate, maximumDate) => {
   if (!minimumDate && !maximumDate) return false;
-  const modStartDate = minimumDate ? dayjs__default.default(minimumDate).format("YYYY-MM-DD") : void 0;
-  const modEndDate = maximumDate ? dayjs__default.default(maximumDate).format("YYYY-MM-DD") : void 0;
-  const convertedDate = dayjs__default.default(date).format("YYYY-MM-DD");
+  const modStartDate = minimumDate && getDateISO(minimumDate);
+  const modEndDate = maximumDate && getDateISO(maximumDate);
+  const convertedDate = getDateISO(date ?? /* @__PURE__ */ new Date());
   return modStartDate !== void 0 && convertedDate < modStartDate || modEndDate !== void 0 && convertedDate > modEndDate;
 };
-const formatToLocale = (date, locale) => {
+function getEditableDateFormatter(locale) {
   return new Intl.DateTimeFormat(locale, {
-    day: "numeric",
-    month: "short",
-    year: "numeric"
-  }).format(date);
-};
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+}
+function getStringFromDate(date, locale) {
+  return getEditableDateFormatter(locale).format(date);
+}
+function parseDateString(dateString, locale) {
+  const dateParts = dateString.split(/\D+/).map(Number);
+  if (dateParts.length !== 3) return null;
+  if (!dateParts.every(Boolean)) return null;
+  const formatter = getEditableDateFormatter(locale);
+  const formatOrder = formatter.formatToParts(new Date(2020, 4, 4)).filter((part) => ["year", "month", "day"].includes(part.type)).map((part) => part.type);
+  const dateObject = { year: 2020, month: 4, day: 4 };
+  formatOrder.forEach((type, index) => {
+    dateObject[type] = dateParts[index];
+  });
+  return new Date(dateObject.year, dateObject.month - 1, dateObject.day);
+}
+function getLocaleDateFormat(locale) {
+  const formatter = getEditableDateFormatter(locale);
+  const getPartType = (part) => {
+    if (part.type === "year") return "YYYY";
+    if (part.type === "month") return "MM";
+    if (part.type === "day") return "DD";
+    return part.value;
+  };
+  return formatter.formatToParts(new Date(2020, 4, 4)).reduce((acc, part) => acc + getPartType(part), "");
+}
 exports.CALENDAR_WEEKS = CALENDAR_WEEKS;
+exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
 exports.checkIfDateIsDisabled = checkIfDateIsDisabled;
 exports.createDatesArray = createDatesArray;
 exports.dateInProvidedValueRange = dateInProvidedValueRange;
-exports.formatToLocale = formatToLocale;
+exports.getDateISO = getDateISO;
 exports.getFormattedDate = getFormattedDate;
+exports.getLocaleDateFormat = getLocaleDateFormat;
 exports.getMonthDays = getMonthDays;
 exports.getMonthFirstWeekday = getMonthFirstWeekday;
 exports.getMonthName = getMonthName;
 exports.getMonthNamesList = getMonthNamesList;
 exports.getNextMonth = getNextMonth;
 exports.getPreviousMonth = getPreviousMonth;
+exports.getStringFromDate = getStringFromDate;
 exports.getWeekdayNamesList = getWeekdayNamesList;
 exports.isDate = isDate;
 exports.isDateRangeProp = isDateRangeProp;
@@ -110,3 +141,4 @@ exports.isRange = isRange;
 exports.isSameDay = isSameDay;
 exports.isSameMonth = isSameMonth;
 exports.makeUTCDate = makeUTCDate;
+exports.parseDateString = parseDateString;

package/dist/cjs/Card/Card.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Card_styles = require("./Card.styles.cjs");
-const HvCard = React.forwardRef((props, ref) => {
+const HvCard = React.forwardRef(function HvCard2(props, ref) {
   const {
     classes: classesProp,
     style,

package/dist/cjs/ColorPicker/ColorPicker.cjs

@@ -71,7 +71,7 @@ const HvColorPicker = React.forwardRef(
       deleteSavedColorButtonArialLabel = "Delete saved color",
       addSavedColorButtonAriaLabel = "Add current color to saved colors"
     } = uikitReactUtils.useDefaultProps("HvColorPicker", props);
-    const { classes, css, cx } = ColorPicker_styles.useClasses(classesProp);
+    const { classes, cx } = ColorPicker_styles.useClasses(classesProp);
     const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
     const [isOpen, setIsOpen] = useControlled.useControlled(expanded, defaultExpanded);
     const [color, setColor] = useControlled.useControlled(value, defaultValue);
@@ -154,22 +154,24 @@ const HvColorPicker = React.forwardRef(
               onToggle: handleToggle,
               onContainerCreation: setFocusToContent,
               classes: {
-                root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),
-                selection: cx(iconOnly && css({ padding: 0 }))
+                root: cx({ [classes.dropdownRootIconOnly]: iconOnly })
               },
               adornment: iconOnly && color ? /* @__PURE__ */ jsxRuntime.jsx(
-                uikitReactIcons.Checkbox,
+                "div",
                 {
-                  className: classes.headerColorIconOnly,
-                  color: [color, "transparent"]
+                  style: { backgroundColor: color },
+                  className: cx(
+                    classes.headerColorIcon,
+                    classes.headerColorIconOnly
+                  )
                 }
               ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, { className: classes.colorPickerIcon }) : void 0,
               placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  uikitReactIcons.Checkbox,
+                  "div",
                   {
-                    className: classes.headerColorIcon,
-                    color: [color, "transparent"]
+                    style: { backgroundColor: color },
+                    className: classes.headerColorIcon
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/ColorPicker/ColorPicker.styles.cjs

@@ -14,13 +14,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvColorPick
   },
   description: {},
   headerColorValue: {
-    textTransform: "uppercase"
+    textTransform: "uppercase",
+    minWidth: "8ch",
+    fontVariant: "tabular-nums"
   },
   headerColorIcon: {
-    width: 24,
-    "& svg": {
-      marginLeft: 0
-    }
+    width: 16,
+    height: 16,
+    marginRight: 8,
+    flexShrink: 0
   },
   panel: {
     width: "100%",
@@ -41,9 +43,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvColorPick
   },
   dropdownRootIconOnly: {
     width: 32,
-    height: 32
+    height: 32,
+    "& .HvBaseDropdown-selection": {
+      padding: 0
+    }
+  },
+  headerColorIconOnly: {
+    margin: 8
   },
-  headerColorIconOnly: {},
   pickerFields: { paddingBottom: 20 }
 });
 exports.staticClasses = staticClasses;

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

@@ -66,12 +66,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
@@ -114,9 +114,10 @@ const Fields = (props) => {
         ref: redInputRef,
         className: classes.single,
         label: "R",
-        value: `${internalRed}`,
+        value: internalRed,
         onChange: (event, value) => onChangeRbg(event, value, "r"),
         onBlur: () => setInternalRed(rgb?.r),
+        inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
       }
     ),
@@ -126,9 +127,10 @@ const Fields = (props) => {
         ref: greenInputRef,
         className: classes.single,
         label: "G",
-        value: `${internalGreen}`,
+        value: internalGreen,
         onChange: (event, value) => onChangeRbg(event, value, "g"),
         onBlur: () => setInternalGreen(rgb?.g),
+        inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
       }
     ),
@@ -138,9 +140,10 @@ const Fields = (props) => {
         ref: blueInputRef,
         className: classes.single,
         label: "B",
-        value: `${internalBlue}`,
+        value: internalBlue,
         onChange: (event, value) => onChangeRbg(event, value, "b"),
         onBlur: () => setInternalBlue(rgb?.b),
+        inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
       }
     )

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

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

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

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

package/dist/cjs/Controls/context/ControlsContext.cjs

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const React = require("react");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
-const HvControlsContext = React__default.default.createContext({});
+const HvControlsContext = React.createContext({});
 const HvControlsContextProvider = HvControlsContext.Provider;
 HvControlsContext.Consumer;
 exports.HvControlsContext = HvControlsContext;

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -65,7 +65,7 @@ const HvDatePicker = React.forwardRef(
       rangeMode = false,
       startAdornment,
       horizontalPlacement = "right",
-      locale: localeProp,
+      locale = utils$3.DEFAULT_LOCALE,
       showActions,
       showClear,
       disablePortal = true,
@@ -82,7 +82,6 @@ const HvDatePicker = React.forwardRef(
       "standBy"
     );
     const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
-    const locale = localeProp || "en-US";
     const [calendarOpen, setCalendarOpen] = useControlled.useControlled(
       expanded,
       Boolean(defaultExpanded)

package/dist/cjs/DatePicker/utils.cjs

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("../Calendar/utils.cjs");
 const validateDate = (date) => utils.isDate(date) && date || /* @__PURE__ */ new Date();
-const getFormattedDateRange = (date, locale, rep = "short") => {
+const getFormattedDateRange = (date, locale) => {
   const { startDate, endDate } = date;
   const monthYear = `${utils.getMonthName(
     startDate,
     locale,
-    rep
+    "short"
   )} ${startDate.getFullYear()}`;
   return `${startDate.getDate()} - ${endDate?.getDate()} ${monthYear}`;
 };

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

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

package/dist/cjs/FormElement/Adornment/Adornment.cjs

@@ -8,7 +8,7 @@ const Adornment_styles = require("./Adornment.styles.cjs");
 const ButtonBase = require("../../ButtonBase/ButtonBase.cjs");
 const noop = () => {
 };
-const HvAdornment = React.forwardRef((props, ref) => {
+const HvAdornment = React.forwardRef(function HvAdornment2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/cjs/FormElement/Suggestions/Suggestions.cjs

@@ -12,7 +12,7 @@ const context = require("../context.cjs");
 const Suggestions_styles = require("./Suggestions.styles.cjs");
 const SelectionList = require("../../SelectionList/SelectionList.cjs");
 const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
-const HvSuggestions = React.forwardRef((props, extRef) => {
+const HvSuggestions = React.forwardRef(function HvSuggestions2(props, extRef) {
   const {
     id: idProp,
     className,

package/dist/cjs/Grid/Grid.cjs

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