@hitachivantara/uikit-react-core 5.82.4 → 5.83.1

package/dist/cjs/Table/renderers/{ProgressColumnCell/ProgressColumnCell.cjs → ProgressColumnCell.cjs}

@@ -2,9 +2,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const MuiLinearProgress = require("@mui/material/LinearProgress");
-const ProgressColumnCell_styles = require("./ProgressColumnCell.styles.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiLinearProgress__default = /* @__PURE__ */ _interopDefault(MuiLinearProgress);
+const { useClasses } = uikitReactUtils.createClasses("HvProgressColumnCell", {
+  root: { display: "flex", width: "100%" },
+  linearProgressContainer: { width: "100%", margin: "auto" },
+  linearProgress: {
+    height: 8
+  },
+  linearProgressRoot: { backgroundColor: uikitStyles.theme.colors.atmo4 },
+  linearProgressColorPrimary: {
+    backgroundColor: uikitStyles.theme.colors.atmo4
+  },
+  linearProgressBarColorPrimary: {
+    backgroundColor: uikitStyles.theme.colors.positive
+  },
+  linearProgressBarColorSecondary: {
+    backgroundColor: uikitStyles.theme.colors.secondary
+  }
+});
 const normalizeProgressBar = (value, max) => {
   return max > 0 ? Math.floor(value * 100 / max) : 0;
 };
@@ -14,7 +32,7 @@ const HvProgressColumnCell = ({
   color = "primary",
   "aria-labelledby": ariaLabelledBy
 }) => {
-  const { classes } = ProgressColumnCell_styles.useClasses();
+  const { classes } = useClasses();
   const percentage = normalizeProgressBar(partial, total);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.root, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.linearProgressContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
     MuiLinearProgress__default.default,

package/dist/cjs/Table/renderers/{SwitchColumnCell/SwitchColumnCell.cjs → SwitchColumnCell.cjs}

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const SwitchColumnCell_styles = require("./SwitchColumnCell.styles.cjs");
-const Typography = require("../../../Typography/Typography.cjs");
-const BaseSwitch = require("../../../BaseSwitch/BaseSwitch.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Typography = require("../../Typography/Typography.cjs");
+const BaseSwitch = require("../../BaseSwitch/BaseSwitch.cjs");
+const switchStyle = {
+  cursor: "pointer",
+  display: "inline-flex",
+  marginLeft: "10px"
+};
+const { useClasses } = uikitReactUtils.createClasses("HvSwitchColumnCell", {
+  switchNo: switchStyle,
+  switchYes: switchStyle
+});
 const HvSwitchColumnCell = ({
   checked,
   value,
@@ -12,7 +21,7 @@ const HvSwitchColumnCell = ({
   trueLabel,
   switchProps
 }) => {
-  const { classes } = SwitchColumnCell_styles.useClasses();
+  const { classes } = useClasses();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     falseLabel != null && /* @__PURE__ */ jsxRuntime.jsx(
       Typography.HvTypography,

package/dist/cjs/Table/renderers/renderers.cjs

@@ -4,21 +4,31 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("@emotion/react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../utils/setId.cjs");
-const fallbacks = require("../utils/fallbacks.cjs");
-const DateColumnCell = require("./DateColumnCell/DateColumnCell.cjs");
+const DateColumnCell = require("./DateColumnCell.cjs");
+const DropdownColumnCell = require("./DropdownColumnCell.cjs");
+const ProgressColumnCell = require("./ProgressColumnCell.cjs");
+const SwitchColumnCell = require("./SwitchColumnCell.cjs");
 const Button = require("../../Button/Button.cjs");
 const Tag = require("../../Tag/Tag.cjs");
-const SwitchColumnCell = require("./SwitchColumnCell/SwitchColumnCell.cjs");
-const DropdownColumnCell = require("./DropdownColumnCell/DropdownColumnCell.cjs");
-const ProgressColumnCell = require("./ProgressColumnCell/ProgressColumnCell.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const EM_DASH = "—";
+const hvStringFallback = (value) => {
+  return typeof value === "string" && value !== "" ? value : EM_DASH;
+};
+const hvNumberFallback = (value) => {
+  return typeof value === "number" ? value : EM_DASH;
+};
+const hvNodeFallback = (value) => {
+  if (!value) return EM_DASH;
+  return hvStringFallback(value?.toString()) === EM_DASH ? EM_DASH : value;
+};
 function hvTextColumn(col, overflowTooltipProps = {}) {
   return {
     Cell: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(
       OverflowTooltip.HvOverflowTooltip,
       {
-        data: fallbacks.hvStringFallback(value),
+        data: hvStringFallback(value),
         ...overflowTooltipProps
       }
     ),
@@ -28,7 +38,7 @@ function hvTextColumn(col, overflowTooltipProps = {}) {
 }
 function hvNumberColumn(col) {
   return {
-    Cell: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallbacks.hvNumberFallback(value) }),
+    Cell: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: hvNumberFallback(value) }),
     align: "right",
     sortType: "number",
     ...col
@@ -67,7 +77,7 @@ function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabe
             children: row.isExpanded ? ExpandedIcon : CollapsedIcon
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: fallbacks.hvStringFallback(value) })
+        /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: hvStringFallback(value) })
       ] }) });
     },
     sortType: "alphanumeric",
@@ -184,8 +194,11 @@ function hvProgressColumn(col, getPartial, getTotal, color) {
 exports.hvDateColumn = hvDateColumn;
 exports.hvDropdownColumn = hvDropdownColumn;
 exports.hvExpandColumn = hvExpandColumn;
+exports.hvNodeFallback = hvNodeFallback;
 exports.hvNumberColumn = hvNumberColumn;
+exports.hvNumberFallback = hvNumberFallback;
 exports.hvProgressColumn = hvProgressColumn;
+exports.hvStringFallback = hvStringFallback;
 exports.hvSwitchColumn = hvSwitchColumn;
 exports.hvTagColumn = hvTagColumn;
 exports.hvTextColumn = hvTextColumn;

package/dist/cjs/Tag/Tag.cjs

@@ -2,21 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Chip = require("@mui/material/Chip");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useControlled = require("../hooks/useControlled.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
-const getCategoricalColor = (customColor, colors) => {
-  return customColor && colors?.[customColor] || customColor || colors?.cat1;
-};
+const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const HvTag = React.forwardRef(function HvTag2(props, ref) {
   const {
     classes: classesProp,
     className,
+    component,
     style,
     label,
     disabled,
@@ -25,75 +23,95 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     selected,
     defaultSelected = false,
     color,
-    deleteIcon,
+    deleteIcon: deleteIconProp,
     onDelete,
     onClick,
+    onKeyDown,
+    onKeyUp,
     // TODO: remove from API
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     deleteButtonArialLabel = "Delete tag",
     deleteButtonProps = {},
     ...others
   } = uikitReactUtils.useDefaultProps("HvTag", props);
-  const { colors } = uikitReactUtils.useTheme();
-  const { classes, cx, css } = Tag_styles.useClasses(classesProp);
+  const { classes, cx } = Tag_styles.useClasses(classesProp);
   const [isSelected, setIsSelected] = useControlled.useControlled(
     selected,
     Boolean(defaultSelected)
   );
-  const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(
+  const handleDeleteClick = (event) => {
+    event.stopPropagation();
+    onDelete?.(event);
+  };
+  const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && uikitStyles.theme.alpha(uikitStyles.getColor(color, "cat1"), 0.2) || void 0;
+  const isClickable = !!(onClick || onDelete || selectable);
+  const CheckboxIcon = isSelected ? uikitReactIcons.CheckboxCheck : uikitReactIcons.Checkbox;
+  const deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
+    className: cx(classes.deleteIcon, {
+      [classes.disabledDeleteIcon]: disabled
+    }),
+    onClick: handleDeleteClick
+  }) : /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactIcons.CloseXS,
     {
-      className: cx(classes.button, classes.tagButton),
-      iconSize: "XS",
+      size: "XS",
+      onClick: handleDeleteClick,
+      className: cx(classes.deleteIcon, classes.button, classes.tagButton),
       ...deleteButtonProps
     }
   );
-  const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
-  const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
-  const isClickable = !!(onClick || onDelete) && !disabled;
-  const clickableClass = css({
-    "&:hover": {
-      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-    }
-  });
-  const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
-  const avatarIcon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { color: colorOverride, iconSize: "XS" });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Chip__default.default,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ButtonBase.HvButtonBase,
     {
       ref,
-      label,
+      component: isClickable ? ButtonBase.HvButtonBase : "div",
       disabled,
-      className: cx({ [clickableClass]: isClickable }, className),
-      style: {
-        ...disabled ? null : { backgroundColor },
-        ...style
-      },
-      classes: {
-        root: cx(classes.root, classes.chipRoot, {
-          [classes.disabled]: disabled,
-          [classes.clickable]: isClickable,
-          [classes.categorical]: type === "categorical",
-          [classes.categoricalFocus]: type === "categorical" && !disabled,
-          [classes.categoricalDisabled]: type === "categorical" && disabled
-        }),
-        label: classes.label,
-        deleteIcon: cx(classes.deleteIcon, {
-          [classes.disabledDeleteIcon]: disabled
-        })
+      "data-color": color,
+      style: uikitReactUtils.mergeStyles(style, {
+        "--bgColor": backgroundColor
+      }),
+      className: cx(classes.root, classes.chipRoot, className, {
+        [classes.disabled]: disabled,
+        [classes.selected]: isSelected,
+        [classes.clickable]: isClickable && !disabled,
+        [classes.categorical]: type === "categorical",
+        [classes.categoricalFocus]: type === "categorical" && !disabled,
+        [classes.categoricalDisabled]: type === "categorical" && disabled
+      }),
+      onKeyUp: (event) => {
+        if (event.currentTarget === event.target && keyboardUtils.isDeleteKey(event)) {
+          onDelete?.(event);
+        }
+        onKeyUp?.(event);
       },
-      deleteIcon: deleteIcon || defaultDeleteIcon,
-      onDelete: disabled ? void 0 : onDelete,
       onClick: (event) => {
         if (disabled) return;
         if (selectable) setIsSelected(!isSelected);
         onClick?.(event, !isSelected);
       },
-      "aria-pressed": isSelected,
-      ...selectable && type === "semantic" && {
-        avatar: avatarIcon
-      },
-      ...others
+      selected: isClickable && isSelected,
+      ...others,
+      children: [
+        selectable && type === "semantic" && /* @__PURE__ */ jsxRuntime.jsx(
+          CheckboxIcon,
+          {
+            className: classes.icon,
+            color: disabled && ["atmo3", "secondary_60"] || void 0,
+            size: "XS"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            noWrap: true,
+            variant: "caption2",
+            component: "span",
+            className: classes.label,
+            children: label
+          }
+        ),
+        onDelete && deleteIcon
+      ]
     }
   );
 });

package/dist/cjs/Tag/Tag.styles.cjs

@@ -1,88 +1,74 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Chip = require("@mui/material/Chip");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
   root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "default",
     color: uikitStyles.theme.colors.base_dark,
-    [`& .${Chip.chipClasses.avatar}`]: {
-      width: 12,
-      height: 12,
-      marginLeft: 2,
-      marginRight: 0
+    backgroundColor: "var(--bgColor)",
+    height: 16,
+    borderRadius: 0,
+    maxWidth: 180,
+    whiteSpace: "nowrap",
+    ":hover, :focus": {
+      backgroundColor: "var(--bgColor)"
     }
   },
-  chipRoot: {
-    [`&.${Chip.chipClasses.root}`]: {
-      height: 16,
-      borderRadius: 0,
-      maxWidth: 180,
-      fontFamily: uikitStyles.theme.fontFamily.body,
-      "&:focus-visible": {
-        backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
-      },
-      "&$categorical": {
-        borderRadius: 8,
-        "& $label": {
-          color: uikitStyles.theme.colors.secondary
-        }
-      }
-    },
-    "&$disabled": {
-      opacity: 1,
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      "& $label": {
-        color: uikitStyles.theme.colors.secondary_60
-      }
-    },
-    [`& .${Chip.chipClasses.label}`]: {
-      paddingLeft: 4,
-      paddingRight: 4,
-      ...uikitStyles.theme.typography.caption2,
-      color: "currentcolor"
+  categorical: {
+    borderRadius: 8,
+    "& $label": {
+      color: uikitStyles.theme.colors.secondary
+    }
+  },
+  disabled: {
+    backgroundColor: uikitStyles.theme.colors.atmo3,
+    ":hover, :focus": {
+      backgroundColor: uikitStyles.theme.colors.atmo3
     },
-    [`& .${Chip.chipClasses.deleteIcon}`]: {
-      margin: 0,
-      width: 16,
-      height: 16,
-      padding: 0,
-      color: "currentColor",
-      "& svg .color0": {
-        fill: "currentcolor"
-      },
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
-        color: "unset"
-      },
-      "&:focus": {
-        ...focusUtils.outlineStyles,
-        borderRadius: 0
-      },
-      "&:focus:not(:focus-visible)": {
-        outline: "0 !important",
-        boxShadow: "none !important"
-      }
+    "& $label": {
+      color: uikitStyles.theme.colors.secondary_60
     }
   },
-  disabled: {},
-  clickable: {
-    cursor: "pointer",
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles
+  label: {
+    padding: uikitStyles.theme.spacing(0, "4px"),
+    color: "inherit"
+  },
+  deleteIcon: {
+    width: 16,
+    height: 16,
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     }
   },
-  categorical: {},
-  label: {},
-  deleteIcon: {},
+  selected: {},
+  clickable: {
+    cursor: "pointer"
+  },
+  icon: {
+    width: 12,
+    height: 12,
+    marginLeft: 2
+  },
+  /** @deprecated use `root` instead */
+  chipRoot: {},
+  /** @deprecated unused */
   // TODO: redundant - use deleteIcon. remove in v6
+  /** @deprecated */
   button: {},
+  /** @deprecated */
   tagButton: {},
   // TODO: redundant - use $clickable or :not($disabled). remove in v6
+  /** @deprecated */
   focusVisible: {},
+  /** @deprecated */
   disabledDeleteIcon: {},
+  /** @deprecated */
   categoricalFocus: {},
+  /** @deprecated */
   categoricalDisabled: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -328,6 +328,7 @@ const HvTagsInput = React.forwardRef(
             hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
               Label.HvLabel,
               {
+                showGutter: true,
                 className: classes.label,
                 id: setId.setId(id, "label"),
                 htmlFor: setId.setId(elementId, "input"),
@@ -387,12 +388,9 @@ const HvTagsInput = React.forwardRef(
                         Tag.HvTag,
                         {
                           label,
-                          className: cx({
+                          className: cx(classes.chipRoot, {
                             [classes.tagSelected]: i === tagCursorPos
                           }),
-                          classes: {
-                            chipRoot: classes.chipRoot
-                          },
                           type,
                           ...!(readOnly || disabled || type === "categorical") && {
                             onDelete: (event) => onDeleteTagHandler(event, i)

package/dist/cjs/TagsInput/TagsInput.styles.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Chip = require("@mui/material/Chip");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
@@ -25,9 +24,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   },
   root: { display: "inline-block", width: "100%" },
   chipRoot: {
-    [`&.${Chip.chipClasses.root}`]: {
-      maxWidth: "none"
-    }
+    maxWidth: "none"
   },
   disabled: {
     "& $tagsList": {
@@ -50,7 +47,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   resizable: { width: "auto", resize: "both", overflow: "auto" },
   invalid: {},
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
-  label: { display: "block", float: "left", paddingBottom: "6px" },
+  label: {},
   description: { display: "block", float: "left" },
   characterCounter: {
     display: "block",

package/dist/cjs/TextArea/TextArea.cjs

@@ -83,7 +83,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
-      value,
+      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -115,7 +115,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const onContainerBlurHandler = (event) => {
     setFocused(false);
     const inputValidity = performValidation();
-    onBlur?.(event, value, inputValidity);
+    onBlur?.(event, String(value), inputValidity);
   };
   const onChangeHandler = (event, currentValue) => {
     isDirty.current = true;
@@ -126,7 +126,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const onFocusHandler = (event) => {
     setFocused(true);
     setValidationState(utils$1.validationStates.standBy);
-    onFocus?.(event, value);
+    onFocus?.(event, String(value));
   };
   const isScrolledDown = React.useCallback(() => {
     const el = inputRef.current;
@@ -200,6 +200,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
           hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
             Label.HvLabel,
             {
+              showGutter: true,
               className: classes.label,
               id: setId.setId(id, "label"),
               htmlFor: setId.setId(elementId, "input"),
@@ -221,7 +222,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
             id: setId.setId(elementId, "charCounter"),
             className: classes.characterCounter,
             separator: middleCountLabel,
-            currentCharQuantity: value.length,
+            currentCharQuantity: String(value).length,
             maxCharQuantity,
             ...countCharProps
           }

package/dist/cjs/TextArea/TextArea.styles.cjs

@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTextArea"
   input: {},
   inputResizable: { width: "100%", resize: "both" },
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
-  label: { display: "block", float: "left", paddingBottom: "6px" },
+  label: {},
   description: { display: "block", float: "left" },
   characterCounter: {
     display: "block",

package/dist/cjs/TimeAgo/TimeAgo.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils = require("../Calendar/utils.cjs");
 const generic = require("../types/generic.cjs");
 const TimeAgo_styles = require("./TimeAgo.styles.cjs");
 const useTimeAgo = require("./useTimeAgo.cjs");
@@ -11,7 +12,7 @@ const HvTimeAgo = generic.fixedForwardRef(function HvTimeAgo2(props, ref) {
     classes: classesProp,
     className,
     timestamp,
-    locale = "en",
+    locale = utils.DEFAULT_LOCALE,
     component: Component = Typography.HvTypography,
     emptyElement = "—",
     disableRefresh = false,

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -8,6 +8,7 @@ const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils$1 = require("../Calendar/utils.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
@@ -51,7 +52,7 @@ const HvTimePicker = React.forwardRef(
       timeFormat,
       showSeconds,
       disableExpand,
-      locale = "en",
+      locale = utils$1.DEFAULT_LOCALE,
       onToggle,
       onChange,
       // misc properties:
@@ -120,6 +121,7 @@ const HvTimePicker = React.forwardRef(
             label && /* @__PURE__ */ jsxRuntime.jsx(
               Label.HvLabel,
               {
+                showGutter: true,
                 label,
                 className: classes.label,
                 ...labelProps

package/dist/cjs/TimePicker/TimePicker.styles.cjs

@@ -10,10 +10,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTimePicke
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    marginBottom: 6,
-    display: "block"
-  },
+  label: {},
   description: {},
   placeholder: {
     display: "flex",