@hitachivantara/uikit-react-core 5.82.4 → 5.83.1

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/CheckBoxGroup/CheckBoxGroup.cjs

@@ -189,6 +189,7 @@ const HvCheckBoxGroup = React.forwardRef(
           label && /* @__PURE__ */ jsxRuntime.jsx(
             Label.HvLabel,
             {
+              showGutter: true,
               id: setId.setId(elementId, "label"),
               label,
               className: classes.label

package/dist/cjs/CheckBoxGroup/CheckBoxGroup.styles.cjs

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBoxG
     overflowClipMargin: 4,
     verticalAlign: "top"
   },
-  label: { marginBottom: uikitStyles.theme.space.xs },
+  label: {},
   group: { display: "flex" },
   vertical: {
     flexDirection: "column",

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);
@@ -130,6 +130,7 @@ const HvColorPicker = React.forwardRef(
             hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
               Label.HvLabel,
               {
+                showGutter: true,
                 id: setId.setId(elementId, "label"),
                 label,
                 className: classes.label
@@ -154,22 +155,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

@@ -7,20 +7,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvColorPick
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    paddingBottom: "6px",
-    display: "block",
-    cursor: "pointer"
-  },
+  label: {},
   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 +39,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

@@ -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/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)
@@ -259,6 +258,7 @@ const HvDatePicker = React.forwardRef(
             hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
               Label.HvLabel,
               {
+                showGutter: true,
                 id: setId.setId(elementId, "label"),
                 label,
                 className: classes.label

package/dist/cjs/DatePicker/DatePicker.styles.cjs

@@ -15,10 +15,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDatePicke
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    paddingBottom: "6px",
-    display: "block"
-  },
+  label: {},
   description: {},
   error: {},
   dropdown: {

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/Dropdown/Dropdown.cjs

@@ -228,6 +228,7 @@ const HvDropdown = generic.fixedForwardRef(function HvDropdown2(props, ref) {
           hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
             Label.HvLabel,
             {
+              showGutter: true,
               id: setId.setId(elementId, "label"),
               label,
               className: classes.label

package/dist/cjs/Dropdown/Dropdown.styles.cjs

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdown"
     display: "inline-block"
   },
   labelContainer: { display: "flex", alignItems: "flex-start" },
-  label: { paddingBottom: "6px", display: "block" },
+  label: {},
   description: {},
   error: {},
   placeholder: {

package/dist/cjs/FileUploader/DropZone/DropZone.cjs

@@ -82,6 +82,7 @@ const HvDropZone = (props) => {
       /* @__PURE__ */ jsxRuntime.jsx(
         Label.HvLabel,
         {
+          showGutter: true,
           id: setId.setId(id, "input-file-label"),
           htmlFor: setId.setId(id, "input-file"),
           label: labels?.dropzone,

package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs

@@ -73,9 +73,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     margin: "auto",
     marginRight: uikitStyles.theme.space.xs
   },
-  dropZoneLabel: {
-    paddingBottom: 6
-  },
+  dropZoneLabel: {},
   dragText: {
     ...uikitStyles.theme.typography.body
   },

package/dist/cjs/FilterGroup/FilterGroup.cjs

@@ -83,6 +83,7 @@ const HvFilterGroup = React.forwardRef(
             hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
               Label.HvLabel,
               {
+                showGutter: true,
                 id: setId.setId(elementId, "label"),
                 htmlFor: setId.setId(elementId, "input"),
                 label,

package/dist/cjs/FilterGroup/FilterGroup.styles.cjs

@@ -3,10 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFilterGroup", {
   root: {},
-  label: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  label: {},
   labelContainer: { display: "flex", alignItems: "flex-start" },
   description: {},
   error: {}

package/dist/cjs/FormElement/Label/Label.cjs

@@ -15,6 +15,7 @@ const HvLabel = (props) => {
     className,
     children,
     label,
+    showGutter,
     disabled: disabledProp,
     required: requiredProp,
     htmlFor: htmlForProp,
@@ -34,8 +35,8 @@ const HvLabel = (props) => {
         className: cx(
           classes.root,
           {
-            [classes.labelDisabled]: !!disabled,
-            [classes.childGutter]: !!(children && label)
+            [classes.labelDisabled]: disabled,
+            [classes.childGutter]: showGutter || children && label
           },
           className
         ),

package/dist/cjs/FormElement/Label/Label.styles.cjs

@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLabel", {
   root: { fontWeight: uikitStyles.theme.fontWeights.normal, display: "inline-block" },
   labelDisabled: { color: uikitStyles.theme.colors.secondary_60 },
-  childGutter: { paddingBottom: "6px" }
+  childGutter: { paddingBottom: 4 }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;