@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

package/dist/cjs/Input/icons.cjs

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const icons = require("../icons.cjs");
-const EyeIcon = ({ selected }) => /* @__PURE__ */ jsxRuntime.jsxs(icons.SvgBase, { viewBox: "0 0 16 16", style: { margin: 8 }, children: [
+const EyeIcon = ({
+  selected,
+  ...others
+}) => /* @__PURE__ */ jsxRuntime.jsxs(icons.SvgBase, { viewBox: "0 0 16 16", ...others, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 8a3 3 0 1 1-3-3 3 3 0 0 1 3 3m5 0s-3.58 6-8 6-8-6-8-6 4-6 8-6 8 6 8 6m-1.2.03a22 22 0 0 0-2-2.32C11.01 3.94 9.35 3 8 3s-3 .93-4.77 2.68a22 22 0 0 0-2.02 2.35 18 18 0 0 0 1.85 2.28C4.25 11.53 6.08 13 8 13s3.73-1.45 4.91-2.67a18 18 0 0 0 1.88-2.3z" }),
   /* @__PURE__ */ jsxRuntime.jsx(
     "rect",

package/dist/cjs/Input/utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const changeInputValue = (input, value = "") => {
+  const event = new Event("input", { bubbles: true });
+  const setInputValue = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value"
+  )?.set;
+  setInputValue?.call(input, value);
+  input?.dispatchEvent(event);
+};
+exports.changeInputValue = changeInputValue;

package/dist/cjs/List/List.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const reactWindow = require("react-window");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
 const CounterLabel = require("../utils/CounterLabel.cjs");
 const setId = require("../utils/setId.cjs");
 const List_styles = require("./List.styles.cjs");
@@ -153,7 +153,7 @@ const HvList = (props) => {
         selected: multiSelect || selected ? selected : void 0,
         onClick: (evt) => handleSelect(evt, item),
         startAdornment,
-        endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { className: classes.box, iconSize: "XS" }),
+        endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
         ...otherProps,
         children: renderSelectItem(item, itemId)
       },

package/dist/cjs/NumberInput/NumberInput.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const utils = require("../Input/utils.cjs");
+const NumberInput_styles = require("./NumberInput.styles.cjs");
+const Adornment = require("../FormElement/Adornment/Adornment.cjs");
+const Input = require("../Input/Input.cjs");
+const HvNumberInput = React.forwardRef(function HvNumberInput2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    readOnly,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvNumberInput", props);
+  const { classes, cx } = NumberInput_styles.useClasses(classesProp);
+  const inputRef = React.useRef(null);
+  const forkedRef = material.useForkRef(ref, inputRef);
+  const buttons = React.useMemo(() => {
+    const handleIncrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepUp();
+        utils.changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    const handleDecrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepDown();
+        utils.changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Remove" }), onClick: handleDecrease }),
+      /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Add" }), onClick: handleIncrease })
+    ] });
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input.HvInput,
+    {
+      ref: forkedRef,
+      type: "number",
+      className: cx(classes.root, className),
+      endAdornment: !readOnly && buttons,
+      classes,
+      readOnly,
+      disableClear: true,
+      ...others
+    }
+  );
+});
+exports.HvNumberInput = HvNumberInput;

package/dist/cjs/NumberInput/NumberInput.styles.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Input_styles = require("../Input/Input.styles.cjs");
+require("../Input/Input.cjs");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses(
+  "HvNumberInput",
+  Input_styles.staticClasses
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Pagination/Pagination.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
+const icons = require("../icons.cjs");
 const setId = require("../utils/setId.cjs");
 const Pagination_styles = require("./Pagination.styles.cjs");
 const Select = require("./Select.cjs");
@@ -151,7 +151,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canPrevious,
           onClick: () => changePage(0),
           title: labels?.firstPage || labels?.paginationFirstPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Start", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -162,7 +162,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canPrevious,
           onClick: () => changePage(page - 1),
           title: labels?.previousPage || labels?.paginationPreviousPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
@@ -186,7 +186,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canNext,
           onClick: () => changePage(page + 1),
           title: labels?.nextPage || labels?.paginationNextPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -197,7 +197,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canNext,
           onClick: () => changePage(pages - 1),
           title: labels?.lastPage || labels?.paginationLastPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "End", className: classes.icon, size: "xs" })
         }
       )
     ] })

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Input_styles = require("../Input/Input.styles.cjs");
-require("../Input/Input.cjs");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
+const Input_styles = require("../Input/Input.styles.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {

package/dist/cjs/QueryBuilder/Rule/Rule.cjs

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const Context = require("../Context.cjs");
 const Rule_styles = require("./Rule.styles.cjs");
 const Grid = require("../../Grid/Grid.cjs");
@@ -95,7 +95,7 @@ const Rule = (props) => {
               dialog: labels.rule.delete
             }),
             disabled: readOnly,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {})
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Delete" })
           }
         ) })
       ]

package/dist/cjs/QueryBuilder/Rule/Rule.styles.cjs

@@ -22,7 +22,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses(
         position: "absolute",
         zIndex: 2,
         width: "17px",
-        height: "39px",
+        height: "44px",
         borderBottom: `1px solid ${uikitStyles.theme.colors.border}`,
         borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
         top: 0,

package/dist/cjs/QueryBuilder/RuleGroup/RuleGroup.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../../icons.cjs");
 const Context = require("../Context.cjs");
 const QueryBuilder_styles = require("../QueryBuilder.styles.cjs");
 const Button = require("../../Button/Button.cjs");
@@ -39,7 +39,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-rule", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {}),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Add" }),
         children: level === 0 && labels.query?.addRule?.label != null ? labels.query?.addRule?.label : labels.group.addRule.label
       }
     ) }),
@@ -51,7 +51,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-group", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {}),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Add" }),
         children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label
       }
     ) })
@@ -105,8 +105,9 @@ const RuleGroup = ({
             title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip || level === 0 && labels.query?.delete?.ariaLabel || labels.group.delete.ariaLabel,
             disabled: readOnly,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              uikitReactIcons.Delete,
+              icons.HvIcon,
               {
+                name: "Delete",
                 className: cx({ [classes.topRemoveButtonDisabled]: readOnly })
               }
             )
@@ -190,7 +191,7 @@ const RuleGroup = ({
                 )
               ] })
             ] }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, {})
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Info" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/RadioGroup/RadioGroup.cjs

@@ -3,13 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
 const RadioGroup_styles = require("./RadioGroup.styles.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const getValueFromSelectedChildren = (children) => {
   const childrenArray = React.Children.toArray(children);
@@ -114,16 +113,18 @@ const HvRadioGroup = React.forwardRef(
         readOnly,
         className: cx(classes.root, className),
         children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(
-            Label.HvLabel,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
             {
-              showGutter: true,
-              id: setId.setId(elementId, "label"),
               label,
-              className: classes.label
+              description,
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                label: classes.label
+              }
             }
           ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), children: description }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {

package/dist/cjs/SearchInput/SearchInput.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const SearchInput_styles = require("./SearchInput.styles.cjs");
+const Input = require("../Input/Input.cjs");
+const Adornment = require("../FormElement/Adornment/Adornment.cjs");
+const HvSearchInput = React.forwardRef(function HvSearchInput2(props, ref) {
+  const { classes: classesProp, ...others } = uikitReactUtils.useDefaultProps(
+    "HvSearchInput",
+    props
+  );
+  const { classes } = SearchInput_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input.HvInput,
+    {
+      ref,
+      type: "search",
+      disableSearchButton: true,
+      startAdornment: /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Search" }) }),
+      classes,
+      ...others
+    }
+  );
+});
+exports.HvSearchInput = HvSearchInput;

package/dist/cjs/SearchInput/SearchInput.styles.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSearchInput", {
+  root: { paddingLeft: uikitStyles.theme.space.xs },
+  input: { marginLeft: 0 }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Section/Section.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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 useExpandable = require("../hooks/useExpandable.cjs");
+const icons = require("../icons.cjs");
 const Section_styles = require("./Section.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const HvSection = React.forwardRef(
@@ -54,7 +54,7 @@ const HvSection = React.forwardRef(
                 "aria-label": isOpen ? "Collapse" : "Expand",
                 ...buttonProps,
                 ...expandButtonProps,
-                children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: isOpen })
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
               }
             ),
             title,

package/dist/cjs/Select/Select.cjs

@@ -7,6 +7,7 @@ const useSelect = require("@mui/base/useSelect");
 const utils = require("@mui/material/utils");
 const clsx = require("clsx");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const generic = require("../types/generic.cjs");
 const document = require("../utils/document.cjs");
@@ -14,8 +15,6 @@ const setId = require("../utils/setId.cjs");
 const Option = require("./Option.cjs");
 const Select_styles = require("./Select.styles.cjs");
 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 ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
@@ -137,19 +136,21 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
       }),
       ...others,
       children: [
-        (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(
-            Label.HvLabel,
-            {
-              showGutter: true,
-              id: labelId,
-              htmlFor: id,
-              label,
-              className: classes.label
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: id,
+            labelId,
+            descriptionId,
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           DropdownButton.HvDropdownButton,
           {

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

@@ -14,10 +14,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   invalid: {
     borderColor: uikitStyles.theme.form.errorColor
   },
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  labelContainer: {},
   label: {},
   description: {},
   select: {},

package/dist/cjs/SelectionList/SelectionList.cjs

@@ -10,9 +10,9 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const multiSelectionEventHandler = require("../utils/multiSelectionEventHandler.cjs");
 const setId = require("../utils/setId.cjs");
 const SelectionList_styles = require("./SelectionList.styles.cjs");
-const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const getValueFromSelectedChildren = (children, multiple) => {

package/dist/cjs/Slider/Slider.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const Slider = require("rc-slider");
 const Tooltip = require("rc-tooltip");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const document = require("../utils/document.cjs");
@@ -12,9 +13,7 @@ const setId = require("../utils/setId.cjs");
 const Slider_styles = require("./Slider.styles.cjs");
 const SliderInput = require("./SliderInput/SliderInput.cjs");
 const utils = require("./utils.cjs");
-const utils$1 = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Slider__default = /* @__PURE__ */ _interopDefault(Slider);
@@ -96,14 +95,9 @@ const HvSlider = React.forwardRef(function HvSlider2(props, ref) {
     () => utils.isSingleSlider(valuesProp, defaultValues),
     [defaultValues, valuesProp]
   );
-  const value = React.useMemo(
-    () => valuesProp?.length > 0 ? utils.knobsValuesToKnobsPositions(
-      valuesProp,
-      inverseStepValue,
-      minPointValue
-    ) : void 0,
-    [inverseStepValue, minPointValue, valuesProp]
-  );
+  const value = React.useMemo(() => {
+    return valuesProp?.length > 0 ? utils.knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue) : void 0;
+  }, [inverseStepValue, minPointValue, valuesProp]);
   const defaultKnobsPositions = React.useMemo(
     () => utils.knobsValuesToKnobsPositions(
       defaultValues,
@@ -179,13 +173,13 @@ const HvSlider = React.forwardRef(function HvSlider2(props, ref) {
       if (required && (knobValue == null || Number.isNaN(knobValue))) {
         invalid = true;
         requiredMsg = true;
-        return utils$1.validationStates.invalid;
+        return "invalid";
       }
       if (knobValue < minPointValue || knobValue > maxPointValue) {
         invalid = true;
-        return utils$1.validationStates.invalid;
+        return "invalid";
       }
-      return utils$1.validationStates.valid;
+      return "valid";
     });
     setValidationState([...newValidationState]);
     if (invalid) {
@@ -368,38 +362,34 @@ const HvSlider = React.forwardRef(function HvSlider2(props, ref) {
       onBlur: onBlurHandler,
       ...others,
       children: [
-        (hasLabel || !hideInput) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
           {
-            className: cx(classes.labelContainer, {
-              [classes.labelIncluded]: hasLabel,
-              [classes.onlyInput]: !hasLabel
-            }),
-            children: [
-              hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
-                Label.HvLabel,
-                {
-                  id: setId.setId(elementId, "label"),
-                  className: classes.label,
-                  htmlFor: sliderInputId,
-                  label
-                }
-              ),
-              !hideInput && /* @__PURE__ */ jsxRuntime.jsx(
-                SliderInput.HvSliderInput,
-                {
-                  id: sliderInputId,
-                  label,
-                  values: knobsValues,
-                  onChange: onInputChangeHandler,
-                  status: validationStatus,
-                  disabled,
-                  readOnly,
-                  markDigits,
-                  inputProps
-                }
-              )
-            ]
+            label,
+            inputId: sliderInputId,
+            labelId: setId.setId(elementId, "label"),
+            descriptionId: setId.setId(elementId, "description"),
+            classes: {
+              root: cx(classes.labelContainer, {
+                [classes.labelIncluded]: hasLabel,
+                [classes.onlyInput]: !hasLabel
+              }),
+              label: classes.label
+            },
+            children: !hideInput && /* @__PURE__ */ jsxRuntime.jsx(
+              SliderInput.HvSliderInput,
+              {
+                id: sliderInputId,
+                label,
+                values: knobsValues,
+                onChange: onInputChangeHandler,
+                status: validationStatus,
+                disabled,
+                readOnly,
+                markDigits,
+                inputProps
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.sliderBase, classes.sliderContainer), children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Slider/SliderInput/SliderInput.cjs

@@ -40,7 +40,6 @@ const HvSliderInput = ({
         "aria-label": `${label}-${index}`,
         className: classes.input,
         disabled,
-        type: "number",
         value: Number.isNaN(value) || value == null ? "" : value.toString(),
         onEnter: () => handleChange(index),
         onBlur: () => handleChange(index),

package/dist/cjs/Slider/utils.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Slider_styles = require("./Slider.styles.cjs");
-const utils = require("../FormElement/utils.cjs");
 const knobsPositionToScaledValue = (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue;
 const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : NaN;
 const knobsValuesToKnobsPositions = (values, inverseStepValue, minPointValue) => {
@@ -206,7 +205,7 @@ const ensureValuesConsistency = (knobPositions, inputIndex) => {
 };
 const convertStatusToArray = (length, status) => {
   const result = {
-    arrayDefaultStatus: Array.from({ length }, () => utils.validationStates.standBy)
+    arrayDefaultStatus: Array.from({ length }, () => "standBy")
   };
   if (status == null) {
     return result;
@@ -219,13 +218,11 @@ const convertStatusToArray = (length, status) => {
   return result;
 };
 const statusArrayToFormStatus = (arrayStatus) => {
-  const invalid = arrayStatus.some(
-    (status) => status === utils.validationStates.invalid
-  );
-  if (invalid) return utils.validationStates.invalid;
-  const valid = arrayStatus.some((status) => status === utils.validationStates.valid);
-  if (valid) return utils.validationStates.valid;
-  return utils.validationStates.standBy;
+  const invalid = arrayStatus.some((status) => status === "invalid");
+  if (invalid) return "invalid";
+  const valid = arrayStatus.some((status) => status === "valid");
+  if (valid) return "valid";
+  return "standBy";
 };
 const knobsValuesToString = (knobsValues, markDigits) => knobsValues.map(
   (knobValue) => Number.isNaN(knobValue) ? "" : knobValue.toFixed(markDigits)

package/dist/cjs/SnackbarProvider/SnackbarProvider.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const notistack = require("notistack");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const SnackbarProvider_styles = require("./SnackbarProvider.styles.cjs");
 const SnackbarContent = require("../Snackbar/SnackbarContent/SnackbarContent.cjs");
 const HvNotistackSnackMessage = React.forwardRef(function HvNotistackSnackMessage2(props, ref) {
@@ -57,20 +58,21 @@ const useHvSnackbar = () => {
     [enqueueSnackbar, closeSnackbar]
   );
 };
-const HvSnackbarProvider = ({
-  children,
-  notistackClassesOverride,
-  maxSnack = 5,
-  autoHideDuration = 5e3,
-  anchorOrigin = {
-    vertical: "top",
-    horizontal: "right"
-  },
-  classes: classesProp,
-  className,
-  container,
-  ...others
-}) => {
+const HvSnackbarProvider = (props) => {
+  const {
+    children,
+    notistackClassesOverride,
+    maxSnack = 5,
+    autoHideDuration = 5e3,
+    anchorOrigin = {
+      vertical: "top",
+      horizontal: "right"
+    },
+    classes: classesProp,
+    className,
+    container,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSnackbarProvider", props);
   const { classes, css, cx } = SnackbarProvider_styles.useClasses(classesProp);
   const { containerRoot, ...otherNotistackClasses } = notistackClassesOverride || {};
   const notistackClasses = {