@hitachivantara/uikit-react-core 5.83.0 → 5.84.0

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

@@ -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

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

@@ -7,11 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvColorPick
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    paddingBottom: "6px",
-    display: "block",
-    cursor: "pointer"
-  },
+  label: {},
   description: {},
   headerColorValue: {
     textTransform: "uppercase",

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -258,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/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

@@ -4,14 +4,34 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useLabels = require("../../hooks/useLabels.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const DropZone_styles = require("./DropZone.styles.cjs");
+const context = require("../../FormElement/context.cjs");
 const Label = require("../../FormElement/Label/Label.cjs");
 const InfoMessage = require("../../FormElement/InfoMessage/InfoMessage.cjs");
-const Typography = require("../../Typography/Typography.cjs");
+const DEFAULT_LABELS = {
+  /** Extensions of the accepted file types */
+  acceptedFiles: "",
+  /** Dropzone area label. @deprecated use `label` prop instead */
+  dropzone: "Label",
+  /** Size file warning label. */
+  sizeWarning: "Max. file size:",
+  /** Size file warning label. */
+  drag: "Drop files here or",
+  /** Size file warning label. */
+  selectFiles: "click to upload",
+  /** Theming sheet used to style components */
+  dropFiles: "Drop files here",
+  /** Message to display when file size is greater than allowed */
+  fileSizeError: "The file exceeds the maximum upload size",
+  /** Message to display when file type is greater than allowed */
+  fileTypeError: "File type not allowed for upload",
+  removeFileButtonLabel: "Remove File"
+};
 function validateAccept(file, acceptAttr) {
   if (!file || !acceptAttr) return true;
   const acceptEntries = acceptAttr.split(",");
@@ -33,17 +53,19 @@ const HvDropZone = (props) => {
   const {
     id: idProp,
     classes: classesProp,
-    labels,
+    label,
+    labels: labelsProp,
     accept,
     maxFileSize,
     inputProps,
     hideLabels,
     multiple = true,
-    disabled = false,
     onFilesAdded
   } = uikitReactUtils.useDefaultProps("HvDropZone", props);
   const id = useUniqueId.useUniqueId(idProp);
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const { classes, cx } = DropZone_styles.useClasses(classesProp);
+  const { disabled } = React.useContext(context.HvFormElementContext);
   const [dragState, setDragState] = React.useState(false);
   const inputRef = React.useRef(null);
   const handleDragLeave = () => {
@@ -82,9 +104,10 @@ 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,
+          label: label ?? labels?.dropzone,
           className: classes.dropZoneLabel
         }
       ),
@@ -139,16 +162,9 @@ const HvDropZone = (props) => {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.dropArea, children: dragState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.dragText, children: labels?.dropFiles }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              uikitReactIcons.Doc,
-              {
-                iconSize: "M",
-                className: classes.dropZoneAreaIcon,
-                color: disabled ? "secondary_60" : "secondary"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { className: classes.dragText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.dropArea, children: dragState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dragText, children: labels?.dropFiles }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Doc, { size: "M", className: classes.dropZoneAreaIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.dragText, children: [
               labels?.drag,
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",

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

@@ -10,15 +10,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     display: "flex",
     border: `1px dashed ${uikitStyles.theme.colors.secondary_60}`,
     cursor: "pointer",
-    background: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
     borderRadius: uikitStyles.theme.radii.round,
     "&:hover": {
-      background: `${uikitStyles.theme.colors.atmo1}`,
-      border: `1px dashed ${uikitStyles.theme.colors.secondary}`
+      borderColor: uikitStyles.theme.colors.secondary
     },
     "&:focus-within": {
-      background: `${uikitStyles.theme.colors.atmo1}`,
-      border: `1px dashed ${uikitStyles.theme.colors.secondary}`,
+      borderColor: uikitStyles.theme.colors.secondary,
       ...focusUtils.outlineStyles
     }
   },
@@ -31,22 +29,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     }
   },
   dragAction: {
-    background: `${uikitStyles.theme.colors.atmo1}`,
-    border: `1px dashed ${uikitStyles.theme.colors.primary}`
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    borderColor: uikitStyles.theme.colors.primary
   },
   dropZoneContainerDisabled: {
-    background: `${uikitStyles.theme.colors.atmo3}`,
-    border: `1px dashed ${uikitStyles.theme.colors.secondary_60}`,
+    color: uikitStyles.theme.colors.secondary_60,
+    backgroundColor: uikitStyles.theme.colors.atmo3,
+    borderColor: "currentcolor",
     cursor: "not-allowed",
     "&:hover": {
-      background: `${uikitStyles.theme.colors.atmo3}`,
-      border: `1px dashed ${uikitStyles.theme.colors.secondary_60}`
-    },
-    "& $dragText": {
-      color: uikitStyles.theme.colors.secondary_60
-    },
-    "& $selectFilesText": {
-      color: uikitStyles.theme.colors.secondary_60
+      borderColor: "currentcolor"
     }
   },
   inputArea: {
@@ -61,7 +53,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
   },
   dropArea: {
     display: "flex",
-    margin: `${uikitStyles.theme.space.md} auto`,
+    margin: uikitStyles.theme.spacing("md", "auto"),
+    gap: uikitStyles.theme.space.xs,
     minHeight: 48
   },
   dropZoneAreaLabels: {
@@ -69,18 +62,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     maxWidth: 120,
     margin: "auto"
   },
-  dropZoneAreaIcon: {
-    margin: "auto",
-    marginRight: uikitStyles.theme.space.xs
-  },
-  dropZoneLabel: {
-    paddingBottom: 6
-  },
-  dragText: {
-    ...uikitStyles.theme.typography.body
-  },
+  dropZoneAreaIcon: {},
+  dropZoneLabel: {},
+  dragText: {},
   selectFilesText: {
-    ...uikitStyles.theme.typography.label
+    fontWeight: uikitStyles.theme.typography.label.fontWeight
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/FileUploader/FileUploader.cjs

@@ -4,44 +4,43 @@ const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
 const setId = require("../utils/setId.cjs");
+const FileUploader_styles = require("./FileUploader.styles.cjs");
 const DropZone = require("./DropZone/DropZone.cjs");
 const FileList = require("./FileList/FileList.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
 const DEFAULT_LABELS = {
-  dropzone: "Label",
-  sizeWarning: "Max. file size:",
-  drag: "Drop files here or",
-  selectFiles: "click to upload",
-  dropFiles: "Drop files here",
-  fileSizeError: "The file exceeds the maximum upload size",
-  fileTypeError: "File type not allowed for upload",
   removeFileButtonLabel: "Remove File"
 };
 const HvFileUploader = (props) => {
   const {
     id,
     className,
+    classes: classesProp,
     labels: labelsProp,
     fileList,
     multiple = true,
-    disabled = false,
-    hideLabels = false,
+    label,
+    hideLabels,
     maxFileSize = Infinity,
     inputProps = {},
+    accept,
     acceptedFiles = [],
+    // TODO: consider adding/replacing with onFilesChange
     onFilesAdded,
     onFileRemoved,
     ...others
   } = uikitReactUtils.useDefaultProps("HvFileUploader", props);
+  const { classes, cx } = FileUploader_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className, ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DropZone.HvDropZone,
       {
         id: setId.setId(id, "dropzone"),
+        label,
         labels,
         multiple,
-        disabled,
-        accept: acceptedFiles.join(","),
+        accept: accept ?? acceptedFiles.join(","),
         maxFileSize,
         onFilesAdded,
         inputProps,
@@ -59,4 +58,5 @@ const HvFileUploader = (props) => {
     )
   ] });
 };
+exports.fileUploaderClasses = FileUploader_styles.staticClasses;
 exports.HvFileUploader = HvFileUploader;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFileUploader", {
+  root: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/FileUploader/utils.cjs

@@ -11,4 +11,3 @@ const convertUnits = (bytes, base = 1e3) => {
   return value.toFixed(2) + unit;
 };
 exports.convertUnits = convertUnits;
-exports.findBestUnit = findBestUnit;

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;

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

@@ -26,7 +26,7 @@ const HvSuggestions = React.forwardRef(function HvSuggestions2(props, extRef) {
     onSuggestionSelected,
     popperProps,
     ...others
-  } = props;
+  } = uikitReactUtils.useDefaultProps("HvSuggestions", props);
   const { classes, cx } = Suggestions_styles.useClasses(classesProp);
   const { rootId } = uikitReactUtils.useTheme();
   const context$1 = React.useContext(context.HvFormElementContext);

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

@@ -6,6 +6,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSuggestio
   root: { position: "relative" },
   list: {
     backgroundColor: uikitStyles.theme.colors.atmo1,
+    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
     boxShadow: uikitStyles.theme.colors.shadow,
     padding: uikitStyles.theme.space.xs,
     width: "100%"

package/dist/cjs/Input/Input.cjs

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

package/dist/cjs/Input/Input.styles.cjs

@@ -7,7 +7,7 @@ require("../FormElement/Suggestions/Suggestions.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
   root: { display: "block" },
   labelContainer: { display: "flex", alignItems: "flex-start" },
-  label: { paddingBottom: "6px", display: "block" },
+  label: {},
   description: {},
   adornmentsBox: {
     display: "flex",

package/dist/cjs/RadioGroup/RadioGroup.cjs

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

package/dist/cjs/RadioGroup/RadioGroup.styles.cjs

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

package/dist/cjs/Select/Select.cjs

@@ -17,7 +17,6 @@ const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
-const Panel = require("../Panel/Panel.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 function defaultRenderValue(options) {
@@ -142,6 +141,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
           label && /* @__PURE__ */ jsxRuntime.jsx(
             Label.HvLabel,
             {
+              showGutter: true,
               id: labelId,
               htmlFor: id,
               label,
@@ -193,8 +193,10 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              Panel.HvPanel,
+              ListContainer.HvListContainer,
               {
+                condensed: true,
+                selectable: true,
                 style: {
                   width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
                 },
@@ -202,7 +204,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
                   [classes.panelOpenedUp]: placement.includes("top"),
                   [classes.panelOpenedDown]: placement.includes("bottom")
                 }),
-                children: /* @__PURE__ */ jsxRuntime.jsx(useSelect.SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { condensed: true, selectable: true, ...getListboxProps(), children }) })
+                ...getListboxProps(),
+                children: /* @__PURE__ */ jsxRuntime.jsx(useSelect.SelectProvider, { value: contextValue, children })
               }
             )
           }

package/dist/cjs/Select/Select.styles.cjs

@@ -18,10 +18,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    display: "block",
-    paddingBottom: 6
-  },
+  label: {},
   description: {},
   select: {},
   popper: {
@@ -31,7 +28,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
     maxHeight: 400,
     border: `1px solid ${uikitStyles.theme.colors.secondary}`,
     marginTop: -1,
-    marginBottom: -1
+    marginBottom: -1,
+    // panel styles
+    position: "relative",
+    padding: uikitStyles.theme.space.xs,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    overflowY: "auto",
+    borderRadius: "inherit"
   },
   panelOpenedUp: {
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`

package/dist/cjs/SelectionList/SelectionList.cjs

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

package/dist/cjs/SelectionList/SelectionList.styles.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelection
     width: "100%",
     paddingBottom: uikitStyles.theme.space.xs
   },
-  label: { marginBottom: uikitStyles.theme.space.xs, float: "left" },
+  label: {},
   description: { float: "left" },
   horizontal: {
     flexDirection: "row",

package/dist/cjs/Slider/utils.cjs

@@ -28,7 +28,7 @@ const knobsPositionsToKnobsValues = (knobPositions, stepValue, minPointValue) =>
   return knobsValues;
 };
 const calculateStepValue = (maxPointValue, minPointValue, divisionQuantity) => Math.abs(maxPointValue - minPointValue) / divisionQuantity;
-const createMark = (markProperties, markstep, divisionQuantity, minPointValue, maxPointValue, stepValue, markDigits, disabled, formatMark = (mark) => mark) => {
+const createMark = (markProperties, markStep, divisionQuantity, minPointValue, maxPointValue, stepValue, markDigits, disabled, formatMark = (mark) => mark) => {
   const marks = {};
   const values = [];
   if (markProperties.length > 0) {
@@ -48,13 +48,13 @@ const createMark = (markProperties, markstep, divisionQuantity, minPointValue, m
       }
     });
   } else {
-    const roundedMarkStep = Math.floor(markstep);
+    const roundedMarkStep = Math.max(1, Math.floor(markStep));
     for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {
       let labelValue = knobsPositionToScaledValue(
         index,
         minPointValue,
         stepValue
-      ).toFixed(markDigits);
+      ).toFixed(Math.max(0, Math.min(8, markDigits)));
       values.push(labelValue);
       labelValue = formatMark?.(labelValue) || labelValue;
       marks[index] = disabled ? {

package/dist/cjs/Switch/Switch.cjs

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

package/dist/cjs/Switch/Switch.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSwitch",
     flexDirection: "column",
     alignItems: "flex-start"
   },
-  label: { marginBottom: uikitStyles.theme.space.xs },
+  label: {},
   error: {},
   switchContainer: {
     height: "32px",

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"),

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

@@ -47,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

@@ -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"),

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

@@ -121,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",