@hitachivantara/uikit-react-core 5.92.0 → 5.93.0

package/dist/esm/Pagination/Pagination.styles.js

@@ -1,9 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
-import "../Input/Input.js";
 import { staticClasses as staticClasses$2 } from "../BaseDropdown/BaseDropdown.styles.js";
 import "../BaseDropdown/BaseDropdown.js";
+import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
 const { staticClasses, useClasses } = createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {

package/dist/esm/QueryBuilder/Rule/Rule.styles.js

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

package/dist/esm/QueryBuilder/RuleGroup/RuleGroup.js

@@ -37,7 +37,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-rule", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsx(HvIcon, { name: "Add" }),
+        startIcon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Add" }),
         children: level === 0 && labels.query?.addRule?.label != null ? labels.query?.addRule?.label : labels.group.addRule.label
       }
     ) }),
@@ -49,7 +49,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-group", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsx(HvIcon, { name: "Add" }),
+        startIcon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Add" }),
         children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label
       }
     ) })

package/dist/esm/RadioGroup/RadioGroup.js

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, Children, cloneElement } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./RadioGroup.styles.js";
 import { staticClasses } from "./RadioGroup.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children) => {
   const childrenArray = Children.toArray(children);
@@ -113,16 +112,18 @@ const HvRadioGroup = forwardRef(
         readOnly,
         className: cx(classes.root, className),
         children: [
-          label && /* @__PURE__ */ jsx(
-            HvLabel,
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
             {
-              showGutter: true,
-              id: setId(elementId, "label"),
               label,
-              className: classes.label
+              description,
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                label: classes.label
+              }
             }
           ),
-          description && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), children: description }),
           /* @__PURE__ */ jsx(
             "div",
             {

package/dist/esm/SearchInput/SearchInput.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
+import { useClasses } from "./SearchInput.styles.js";
+import { HvInput } from "../Input/Input.js";
+import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
+const HvSearchInput = forwardRef(function HvSearchInput2(props, ref) {
+  const { classes: classesProp, ...others } = useDefaultProps(
+    "HvSearchInput",
+    props
+  );
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    HvInput,
+    {
+      ref,
+      type: "search",
+      disableSearchButton: true,
+      startAdornment: /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Search" }) }),
+      classes,
+      ...others
+    }
+  );
+});
+export {
+  HvSearchInput
+};

package/dist/esm/SearchInput/SearchInput.styles.js

@@ -0,0 +1,10 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+const { staticClasses, useClasses } = createClasses("HvSearchInput", {
+  root: { paddingLeft: theme.space.xs },
+  input: { marginLeft: 0 }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Select/Select.js

@@ -5,6 +5,7 @@ import { useSelect, SelectProvider } from "@mui/base/useSelect";
 import { useForkRef, useControlled } from "@mui/material/utils";
 import { clsx } from "clsx";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { getContainerElement } from "../utils/document.js";
@@ -13,8 +14,6 @@ import { HvOption } from "./Option.js";
 import { useClasses } from "./Select.styles.js";
 import { staticClasses } from "./Select.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
@@ -136,19 +135,21 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
       }),
       ...others,
       children: [
-        (label || description) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-          label && /* @__PURE__ */ jsx(
-            HvLabel,
-            {
-              showGutter: true,
-              id: labelId,
-              htmlFor: id,
-              label,
-              className: classes.label
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: id,
+            labelId,
+            descriptionId,
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          ),
-          description && /* @__PURE__ */ jsx(HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsx(
           HvDropdownButton,
           {

package/dist/esm/Select/Select.styles.js

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

package/dist/esm/SelectionList/SelectionList.js

@@ -9,9 +9,9 @@ import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./SelectionList.styles.js";
 import { staticClasses } from "./SelectionList.styles.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children, multiple) => {

package/dist/esm/Slider/Slider.js

@@ -3,6 +3,7 @@ import { forwardRef, useRef, useMemo, useState, useCallback, useEffect } from "r
 import Slider from "rc-slider";
 import Tooltip from "rc-tooltip";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { getElementById } from "../utils/document.js";
@@ -11,9 +12,7 @@ import { useClasses, sliderStyles } from "./Slider.styles.js";
 import { staticClasses } from "./Slider.styles.js";
 import { HvSliderInput } from "./SliderInput/SliderInput.js";
 import { calculateStepValue, createMark, isSingleSlider, knobsValuesToKnobsPositions, convertStatusToArray, generateDefaultKnobProperties, createTrackStyles, createKnobStyles, knobsPositionToScaledValue, knobsPositionsToKnobsValues, statusArrayToFormStatus, ensureValuesConsistency, scaledValueToKnobsPositionValue } from "./utils.js";
-import { validationStates } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const HvSlider = forwardRef(function HvSlider2(props, ref) {
   const {
@@ -92,14 +91,9 @@ const HvSlider = forwardRef(function HvSlider2(props, ref) {
     () => isSingleSlider(valuesProp, defaultValues),
     [defaultValues, valuesProp]
   );
-  const value = useMemo(
-    () => valuesProp?.length > 0 ? knobsValuesToKnobsPositions(
-      valuesProp,
-      inverseStepValue,
-      minPointValue
-    ) : void 0,
-    [inverseStepValue, minPointValue, valuesProp]
-  );
+  const value = useMemo(() => {
+    return valuesProp?.length > 0 ? knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue) : void 0;
+  }, [inverseStepValue, minPointValue, valuesProp]);
   const defaultKnobsPositions = useMemo(
     () => knobsValuesToKnobsPositions(
       defaultValues,
@@ -175,13 +169,13 @@ const HvSlider = forwardRef(function HvSlider2(props, ref) {
       if (required && (knobValue == null || Number.isNaN(knobValue))) {
         invalid = true;
         requiredMsg = true;
-        return validationStates.invalid;
+        return "invalid";
       }
       if (knobValue < minPointValue || knobValue > maxPointValue) {
         invalid = true;
-        return validationStates.invalid;
+        return "invalid";
       }
-      return validationStates.valid;
+      return "valid";
     });
     setValidationState([...newValidationState]);
     if (invalid) {
@@ -364,38 +358,34 @@ const HvSlider = forwardRef(function HvSlider2(props, ref) {
       onBlur: onBlurHandler,
       ...others,
       children: [
-        (hasLabel || !hideInput) && /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
           {
-            className: cx(classes.labelContainer, {
-              [classes.labelIncluded]: hasLabel,
-              [classes.onlyInput]: !hasLabel
-            }),
-            children: [
-              hasLabel && /* @__PURE__ */ jsx(
-                HvLabel,
-                {
-                  id: setId(elementId, "label"),
-                  className: classes.label,
-                  htmlFor: sliderInputId,
-                  label
-                }
-              ),
-              !hideInput && /* @__PURE__ */ jsx(
-                HvSliderInput,
-                {
-                  id: sliderInputId,
-                  label,
-                  values: knobsValues,
-                  onChange: onInputChangeHandler,
-                  status: validationStatus,
-                  disabled,
-                  readOnly,
-                  markDigits,
-                  inputProps
-                }
-              )
-            ]
+            label,
+            inputId: sliderInputId,
+            labelId: setId(elementId, "label"),
+            descriptionId: setId(elementId, "description"),
+            classes: {
+              root: cx(classes.labelContainer, {
+                [classes.labelIncluded]: hasLabel,
+                [classes.onlyInput]: !hasLabel
+              }),
+              label: classes.label
+            },
+            children: !hideInput && /* @__PURE__ */ jsx(
+              HvSliderInput,
+              {
+                id: sliderInputId,
+                label,
+                values: knobsValues,
+                onChange: onInputChangeHandler,
+                status: validationStatus,
+                disabled,
+                readOnly,
+                markDigits,
+                inputProps
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx("div", { className: cx(classes.sliderBase, classes.sliderContainer), children: /* @__PURE__ */ jsx(

package/dist/esm/Slider/SliderInput/SliderInput.js

@@ -39,7 +39,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/esm/Slider/utils.js

@@ -1,6 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { sliderStyles } from "./Slider.styles.js";
-import { validationStates } from "../FormElement/utils.js";
 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) => {
@@ -204,7 +203,7 @@ const ensureValuesConsistency = (knobPositions, inputIndex) => {
 };
 const convertStatusToArray = (length, status) => {
   const result = {
-    arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy)
+    arrayDefaultStatus: Array.from({ length }, () => "standBy")
   };
   if (status == null) {
     return result;
@@ -217,13 +216,11 @@ const convertStatusToArray = (length, status) => {
   return result;
 };
 const statusArrayToFormStatus = (arrayStatus) => {
-  const invalid = arrayStatus.some(
-    (status) => status === validationStates.invalid
-  );
-  if (invalid) return validationStates.invalid;
-  const valid = arrayStatus.some((status) => status === validationStates.valid);
-  if (valid) return validationStates.valid;
-  return 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/esm/SnackbarProvider/SnackbarProvider.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, forwardRef, useMemo } from "react";
 import { useSnackbar, SnackbarProvider, SnackbarContent } from "notistack";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./SnackbarProvider.styles.js";
 import { staticClasses } from "./SnackbarProvider.styles.js";
 import { HvSnackbarContent } from "../Snackbar/SnackbarContent/SnackbarContent.js";
@@ -56,20 +57,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
+  } = useDefaultProps("HvSnackbarProvider", props);
   const { classes, css, cx } = useClasses(classesProp);
   const { containerRoot, ...otherNotistackClasses } = notistackClassesOverride || {};
   const notistackClasses = {

package/dist/esm/SnackbarProvider/SnackbarProvider.styles.js

@@ -14,7 +14,7 @@ const { useClasses, staticClasses } = createClasses(
         fontFamily: "inherit",
         fontWeight: "inherit",
         lineHeight: "inherit",
-        borderRadius: "0",
+        borderRadius: 0,
         letterSpacing: "inherit",
         backgroundColor: "inherit"
       }

package/dist/esm/Switch/Switch.js

@@ -8,9 +8,9 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./Switch.styles.js";
 import { staticClasses } from "./Switch.styles.js";
 import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = forwardRef(

package/dist/esm/TagsInput/TagsInput.js

@@ -3,6 +3,7 @@ import { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from "r
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useFocus } from "../hooks/useFocus.js";
@@ -13,10 +14,7 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./TagsInput.styles.js";
 import { staticClasses } from "./TagsInput.styles.js";
 import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
-import { validationStates } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvTag } from "../Tag/Tag.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const HvTagsInput = forwardRef(
@@ -31,7 +29,7 @@ const HvTagsInput = forwardRef(
       readOnly,
       disabled,
       required,
-      label: textAreaLabel,
+      label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       description,
@@ -62,8 +60,6 @@ const HvTagsInput = forwardRef(
     } = useDefaultProps("HvTagsInput", props);
     const { classes, cx } = useClasses(classesProp);
     const elementId = useUniqueId(id);
-    const hasLabel = textAreaLabel != null;
-    const hasDescription = description != null;
     const [value, setValue] = useControlled(valueProp, defaultValue);
     const [validationState, setValidationState] = useControlled(
       status,
@@ -94,11 +90,11 @@ const HvTagsInput = forwardRef(
     const performValidation = useCallback(
       (currValue) => {
         if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
-          setValidationState(validationStates.invalid);
+          setValidationState("invalid");
           setValidationMessage(errorMessages.maxCharError);
           setStateValid(false);
         } else {
-          setValidationState(validationStates.valid);
+          setValidationState("valid");
           setValidationMessage("");
           setStateValid(true);
         }
@@ -264,7 +260,7 @@ const HvTagsInput = forwardRef(
     const onDeleteTagHandler = useCallback(
       (event, i) => {
         deleteTag(i, event, true);
-        setValidationState(validationStates.standBy);
+        setValidationState("standBy");
       },
       [deleteTag, setValidationState]
     );
@@ -304,35 +300,30 @@ const HvTagsInput = forwardRef(
           className
         ),
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                showGutter: true,
-                className: classes.label,
-                id: setId(id, "label"),
-                htmlFor: setId(elementId, "input"),
-                label: textAreaLabel
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                className: classes.description,
-                id: setId(elementId, "description"),
-                children: description
-              }
-            )
-          ] }),
-          hasCounter && /* @__PURE__ */ jsx(
-            HvCharCounter,
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
             {
-              id: setId(elementId, "charCounter"),
-              className: classes.characterCounter,
-              separator: middleCountLabel,
-              currentCharQuantity: value.length,
-              maxCharQuantity: maxTagsQuantity,
-              ...countCharProps
+              label,
+              description,
+              inputId: setId(elementId, "input"),
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              },
+              children: hasCounter && /* @__PURE__ */ jsx(
+                HvCharCounter,
+                {
+                  id: setId(elementId, "charCounter"),
+                  className: classes.characterCounter,
+                  separator: middleCountLabel,
+                  currentCharQuantity: value.length,
+                  maxCharQuantity: maxTagsQuantity,
+                  ...countCharProps
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxs(
@@ -350,12 +341,12 @@ const HvTagsInput = forwardRef(
               children: [
                 value?.map((t, i) => {
                   const tag = typeof t === "string" ? { label: t, type: "semantic" } : t;
-                  const { label, type, ...otherProps } = tag;
+                  const { label: label2, type, ...otherProps } = tag;
                   return /* @__PURE__ */ jsx(
                     HvTag,
                     {
                       type,
-                      label,
+                      label: label2,
                       disabled,
                       tabIndex: -1,
                       className: cx(classes.chipRoot, classes.listItemRoot),
@@ -364,7 +355,7 @@ const HvTagsInput = forwardRef(
                       },
                       ...otherProps
                     },
-                    `${label}-${i}`
+                    `${label2}-${i}`
                   );
                 }),
                 !disabled && !readOnly && /* @__PURE__ */ jsx(

package/dist/esm/TagsInput/TagsInput.styles.js

@@ -29,9 +29,9 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
   },
   resizable: { width: "auto", resize: "both", clear: "both", overflow: "auto" },
   invalid: {},
-  labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   label: {},
-  description: { display: "block", float: "left" },
+  description: {},
   characterCounter: {
     display: "block",
     float: "right",
@@ -42,7 +42,7 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
     display: "flex",
     alignItems: "center",
     alignContent: "flex-start",
-    gap: theme.spacing("xxs", "xs"),
+    gap: theme.space.xxs,
     cursor: "text",
     width: "100%",
     minHeight: 32,