@hitachivantara/uikit-react-core 5.87.1 → 5.87.3

package/dist/cjs/FilterGroup/RightPanel/RightPanel.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const CounterLabel = require("../../utils/CounterLabel.cjs");
 const setId = require("../../utils/setId.cjs");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
 const RightPanel_styles = require("./RightPanel.styles.cjs");
-const Typography = require("../../Typography/Typography.cjs");
 const CheckBox = require("../../CheckBox/CheckBox.cjs");
 const Panel = require("../../Panel/Panel.cjs");
 const Input = require("../../Input/Input.cjs");
@@ -95,19 +95,18 @@ const HvFilterGroupRightPanel = ({
     searchStr
   ]);
   const SelectAll = React.useCallback(() => {
-    const nbrSelected = activeFilterValues?.length;
-    const defaultLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: nbrSelected > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: nbrSelected }),
-      ` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: labels?.selectAll }),
-      ` (${allActiveGroupOptions.length})`
-    ] }) });
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
       CheckBox.HvCheckBox,
       {
         id: setId.setId(id, "select-all"),
-        label: defaultLabel,
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: activeFilterValues?.length,
+            total: allActiveGroupOptions.length,
+            conjunctionLabel: labels?.multiSelectionConjunction
+          }
+        ),
         onChange: () => handleSelectAll(),
         className: classes.selectAll,
         indeterminate: anySelected && !allSelected,

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -40,12 +40,9 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
   const [isOverflowing, setIsOverflowing] = React.useState(false);
   const typographyStyles = activeTheme?.typography[variant] || {};
   const { lineHeight } = typographyStyles;
-  const checkOverflow = () => {
-    if (inputRef.current) {
-      setIsOverflowing(
-        inputRef.current.scrollWidth > inputRef.current.clientWidth
-      );
-    }
+  const checkOverflow = (el) => {
+    if (!el) return;
+    setIsOverflowing(el.scrollWidth > el.clientWidth);
   };
   useEnhancedEffect.useEnhancedEffect(() => {
     const input = inputRef.current;
@@ -70,13 +67,11 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       newValue = cachedValue;
       setEditMode(false);
       setValue(newValue);
-      checkOverflow();
     }
     onKeyDown?.(event, newValue);
   };
   const handleChange = (event, val) => {
     setValue(val);
-    checkOverflow();
     onChange?.(event, val);
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -86,8 +81,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       inputRef,
       classes: {
         root: classes.inputRoot,
-        input: classes.input,
-        inputBorderContainer: classes.inputBorderContainer
+        input: classes.input
       },
       inputProps: {
         style: {
@@ -101,7 +95,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       onKeyDown: handleKeyDown,
       ...others
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: isOverflowing && value, children: /* @__PURE__ */ jsxRuntime.jsx(
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
     Button.HvButton,
     {
       variant: "secondaryGhost",
@@ -121,18 +115,20 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       onClick: handleClick,
       disabled,
       ...buttonProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: isOverflowing && value, children: /* @__PURE__ */ jsxRuntime.jsx(
         Typography.HvTypography,
         {
+          component: "div",
+          ref: checkOverflow,
           variant,
           noWrap: true,
           className: cx(classes.text, { [classes.textEmpty]: !value }),
           ...typographyProps,
           children: value || placeholder
         }
-      )
+      ) })
     }
-  ) }) });
+  ) });
 });
 exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
 exports.HvInlineEditor = HvInlineEditor;

package/dist/cjs/InlineEditor/InlineEditor.styles.cjs

@@ -2,29 +2,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
-require("../BaseInput/BaseInput.cjs");
-const Input_styles = require("../Input/Input.styles.cjs");
-require("../Input/Input.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEditor", {
-  root: {
-    [`& .${BaseInput_styles.staticClasses.inputRoot}.${Input_styles.staticClasses.inputRoot}`]: {
-      height: "100%",
-      minHeight: "32px"
-    }
-  },
-  inputBorderContainer: {
-    top: "unset",
-    bottom: 0
-  },
+  root: {},
+  /** @deprecated unused. use `classes.root::after` instead */
+  inputBorderContainer: {},
   input: {},
-  inputRoot: {},
-  text: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    alignSelf: "center"
+  inputRoot: {
+    height: "100%",
+    minHeight: "32px"
   },
+  text: {},
   largeText: {},
   textEmpty: {
     color: uikitStyles.theme.colors.secondary_60
@@ -37,41 +24,31 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEdi
     height: "100%",
     width: "100%",
     maxWidth: "100%",
-    justifyContent: "flex-start",
+    justifyContent: "start",
+    textAlign: "start",
     alignItems: "center",
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    border: `1px solid transparent`,
+    borderColor: "transparent",
     "&:hover, &:focus": {
-      border: `1px solid ${uikitStyles.theme.colors.primary}`,
+      borderColor: uikitStyles.theme.colors.primary,
       backgroundColor: uikitStyles.theme.colors.atmo1,
       "& $icon": {
         visibility: "visible"
       }
     },
     "&:active": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      borderColor: uikitStyles.theme.colors.secondary,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"
       }
-    },
-    "& > div": {
-      width: "100%"
-    },
-    "& > div > span": {
-      width: "100%"
     }
   },
   icon: {
     cursor: "pointer",
     visibility: "hidden",
     alignSelf: "center",
-    height: "16px",
-    width: "32px",
-    minWidth: "32px",
-    "& svg": {
-      margin: uikitStyles.theme.spacing(0, "xs")
-    }
+    height: 16
   },
   iconVisible: {
     visibility: "visible"

package/dist/cjs/Input/Input.cjs

@@ -448,11 +448,10 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
             type: realType,
             classes: {
               input: classes.input,
-              inputRoot: classes.inputRoot,
-              inputRootFocused: classes.inputRootFocused,
-              inputRootDisabled: classes.inputRootDisabled,
-              inputRootMultiline: classes.inputRootMultiline,
-              inputBorderContainer: classes.inputBorderContainer
+              root: classes.inputRoot,
+              focused: classes.inputRootFocused,
+              disabled: classes.inputRootDisabled,
+              multiline: classes.inputRootMultiline
             },
             invalid: isStateInvalid,
             inputProps: {

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

@@ -35,18 +35,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
     backgroundColor: uikitStyles.theme.colors.atmo1,
     boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
-  input: {
-    "&::-ms-clear": {
-      display: "none"
-    }
-  },
+  input: {},
   inputRoot: {
-    ":hover": {
-      "& $iconClear": {
-        display: "block"
-      }
-    },
-    ":focus-within $iconClear": {
+    ":is(:hover,:focus-within) $iconClear": {
       display: "block"
     }
   },
@@ -55,15 +46,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
       display: "block"
     }
   },
-  inputRootDisabled: {
-    cursor: "not-allowed"
-  },
+  inputRootDisabled: {},
   inputRootMultiline: { padding: 0 },
-  inputBorderContainer: {
-    "$hasSuggestions &": {
-      display: "none"
-    }
-  },
+  /** @deprecated unused. use `::after` instead */
+  inputBorderContainer: {},
   error: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/List/List.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const reactWindow = require("react-window");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const CounterLabel = require("../utils/CounterLabel.cjs");
 const setId = require("../utils/setId.cjs");
 const List_styles = require("./List.styles.cjs");
 const useSelectableList = require("./useSelectableList.cjs");
@@ -14,10 +15,11 @@ const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
 const Link = require("../Link/Link.cjs");
 const Radio = require("../Radio/Radio.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const DEFAULT_LABELS = {
+  /** The label used for the All checkbox action. @deprecated no longer used */
   selectAll: "Select All",
+  /** The label used in the middle of the multi-selection count. */
   selectionConjunction: "/"
 };
 const HvList = (props) => {
@@ -89,22 +91,20 @@ const HvList = (props) => {
     }) : null;
   };
   const renderSelectAll = () => {
-    const { selectAll, selectionConjunction } = labels;
     const anySelected2 = !!selection?.length;
     const allSelected = selection.length === list.length;
-    const selectionLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: !anySelected2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectAll }),
-      ` (${list.length})`
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selection.length }),
-      ` ${selectionConjunction} `,
-      list.length
-    ] }) });
     return /* @__PURE__ */ jsxRuntime.jsx(
       CheckBox.HvCheckBox,
       {
         id: setId.setId(id, "select-all"),
-        label: selectionLabel,
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: selection.length,
+            total: list.length,
+            conjunctionLabel: labels.selectionConjunction
+          }
+        ),
         onChange: handleSelectAll,
         className: classes.selectAllSelector,
         indeterminate: anySelected2 && !allSelected,

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

@@ -5,6 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
 const Input_styles = require("../Input/Input.styles.cjs");
+require("../Input/Input.cjs");
 const hoverColor = uikitStyles.theme.colors.atmo3;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */

package/dist/cjs/Radio/Radio.cjs

@@ -126,6 +126,7 @@ const HvRadio = React.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Label.HvLabel,
                   {
+                    noWrap: true,
                     id: setId.setId(elementId, "label"),
                     htmlFor: setId.setId(elementId, "input"),
                     label,
@@ -136,7 +137,7 @@ const HvRadio = React.forwardRef(
               ]
             }
           ) : radio,
-          canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, children: statusMessage })
+          canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), children: statusMessage })
         ]
       }
     );

package/dist/cjs/Radio/Radio.styles.cjs

@@ -8,50 +8,30 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
   container: {
     cursor: "pointer",
     display: "flex",
-    height: "32px",
-    transitionProperty: "background-color",
-    transitionDuration: "150ms",
-    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-    transitionDelay: "0ms",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
-      borderRadius: uikitStyles.theme.radii.base
-    }
-  },
-  invalidContainer: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
-    "&:hover": {
-      borderBottomLeftRadius: "0px",
-      borderBottomRightRadius: "0px"
+    alignItems: "center",
+    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+    borderRadius: uikitStyles.theme.radii.base,
+    ":hover:not($disabled)": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     }
   },
+  invalidContainer: {},
   disabled: {
     cursor: "not-allowed",
     "& $label": { color: uikitStyles.theme.colors.secondary_60, cursor: "not-allowed" }
   },
   radio: {
-    height: "32px",
     "& svg": {
       outline: "none",
       boxShadow: "none"
     }
   },
-  invalidRadio: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
-    "&:hover": {
-      borderBottomLeftRadius: "0px",
-      borderBottomRightRadius: "0px"
-    }
-  },
+  invalidRadio: {},
   label: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
     verticalAlign: "middle",
     paddingRight: uikitStyles.theme.space.xs,
-    whiteSpace: "nowrap",
     ...uikitStyles.theme.typography.body,
     cursor: "pointer",
-    height: "32px",
     lineHeight: "32px",
     width: "100%"
   },

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

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   disabled: {},
   readOnly: {},
   invalid: {
-    border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    borderColor: uikitStyles.theme.colors.negative_120
   },
   labelContainer: {
     display: "flex",

package/dist/cjs/Table/TableCell/TableCell.styles.cjs

@@ -8,8 +8,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     verticalAlign: "inherit",
     alignContent: "inherit",
     textAlign: "left",
+    borderColor: uikitStyles.theme.colors.atmo4,
     padding: `calc(${uikitStyles.theme.space.xs} - 2px ) ${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.xs} - 3px ) ${uikitStyles.theme.spacing(4)}`,
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    borderBottomWidth: 1
   },
   /** Styles applied to the cell when it's in the table head. */
   head: {
@@ -18,7 +19,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     alignContent: "start",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderTop: "1px solid transparent",
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     ...uikitStyles.theme.typography.label
   },
   /** Styles applied to the cell when it's in the table body. */
@@ -63,7 +63,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the component root when its variant is actions */
   variantActions: {
@@ -71,7 +71,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderLeftWidth: 1
   },
   /** Styles applied to the component root when its variant is expand */
   variantExpand: {
@@ -86,7 +86,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
       height: 52
     },
     padding: "0, 0, 0, 32px",
-    border: 0
+    borderWidth: 0
   },
   /** Styles applied to the cell when its variant is list and the type is head. */
   variantListHead: {
@@ -124,40 +124,40 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   },
   /** Styles applied to the cell when it's part of the last sticky to the left column. */
   stickyColumnMostLeft: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the cell when it's part of the first right sticky column. */
   stickyColumnLeastRight: {
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderLeftWidth: 1
   },
   /** Styles applied to the cell when it's part of the first column in the group. */
   groupColumnMostLeft: {
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+    borderLeftWidth: 1,
     "&:first-of-type": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
   /** Styles applied to the cell when it's part of the last column in the group. */
   groupColumnMostRight: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+    borderRightWidth: 1,
     // due to the ":has()" selector not being supported in browsers,
     // this need to be managed with inline styles
     // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)
     // "&:last-child,&:has(+ $stickyColumnLeastRight)": {
     "&:last-child": {
-      borderRight: 0
+      borderRightWidth: 0
     },
     "&+:not($stickyColumn)": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
   /** Styles applied to the cell when it's part of a resizable column. */
   resizable: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
-    borderRight: `solid 2px ${uikitStyles.theme.colors.primary_80}`
+    borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Table/TableHeader/TableHeader.styles.cjs

@@ -11,7 +11,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     alignContent: "inherit",
     textAlign: "left",
     padding: uikitStyles.theme.spacing(0, 1, 0, 4),
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    borderColor: uikitStyles.theme.colors.atmo4,
+    borderBottomWidth: 1
   },
   head: {
     paddingTop: 8,
@@ -19,14 +20,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     alignContent: "start",
     ...uikitStyles.theme.typography.label,
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderBottomWidth: 1,
     "*:first-of-type > &": {
       height: "var(--first-row-cell-height)",
       borderTop: "1px solid transparent"
     },
     "&$variantList": {
       backgroundColor: "inherit",
-      borderBottom: 0,
+      borderBottomWidth: 0,
       "*:first-of-type > &": {
         borderTop: 0
       }
@@ -60,23 +61,23 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     position: "sticky",
     zIndex: 2,
     "&$groupColumnMostRight+$stickyColumn": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
-  stickyColumnMostLeft: { borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
-  stickyColumnLeastRight: { borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
-  groupColumnMostLeft: { borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
+  stickyColumnMostLeft: { borderRightWidth: 1 },
+  stickyColumnLeastRight: { borderLeftWidth: 1 },
+  groupColumnMostLeft: { borderLeftWidth: 1 },
   groupColumnMostRight: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+    borderRightWidth: 1,
     // due to the ":has()" selector not being supported in browsers,
     // this need to be managed with inline styles
     // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)
     // "&:last-child,&:has(+ $stickyColumnLeastRight)": {
     "&:last-child": {
-      borderRight: 0
+      borderRightWidth: 0
     },
     "&+:not($stickyColumn)": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
   headerContent: { display: "flex", alignItems: "flex-start", width: "100%" },
@@ -108,27 +109,27 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   variantExpand: {},
   variantActions: {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderLeftWidth: 1
   },
   variantNone: { padding: 0 },
   variantList: {
     backgroundColor: "inherit",
-    borderBottom: 0,
+    borderBottomWidth: 0,
     height: 16,
     ":first-of-type > &": {
-      borderTop: 0,
+      borderTopWidth: 0,
       height: 16
     }
   },
   resizable: {
-    borderRight: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderRightWidth: 1,
     ":has($resizer:hover)": {
       borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
     }

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
+require("../BaseInput/BaseInput.cjs");
 const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.styles.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput", {
   input: {
@@ -115,10 +116,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   tagInputRoot: {
     [`& .${BaseInput_styles.staticClasses.root}`]: {
       width: "100%",
-      border: "none",
-      "&:hover $tagInputBorderContainer": {
-        background: "none"
-      }
+      border: "none"
     },
     [`&& .${BaseInput_styles.staticClasses.inputRoot}`]: {
       marginLeft: 0,
@@ -129,10 +127,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
       padding: 0,
       border: "none"
     },
-    [`& .${BaseInput_styles.staticClasses.inputBorderContainer}`]: {
-      border: "none",
-      background: "none"
-    },
     [`& .${BaseInput_styles.staticClasses.inputRootFocused}`]: {
       outline: "none",
       boxShadow: "none"
@@ -155,6 +149,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     outlineOffset: "-1px",
     boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
   },
+  /** @deprecated unused. use `::after` instead */
   tagInputBorderContainer: {},
   tagInputRootFocused: {},
   tagInputRootEmpty: {},

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

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTextArea"
   invalid: {},
   baseInput: { clear: "both", float: "left" },
   input: {},
-  inputResizable: { width: "100%", resize: "both" },
+  inputResizable: {},
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
   label: {},
   description: { display: "block", float: "left" },

package/dist/cjs/TimePicker/Unit/Unit.cjs

@@ -32,7 +32,6 @@ const Unit = ({
         classes: {
           input: classes.input,
           root: classes.inputContainer,
-          inputBorderContainer: classes.inputBorderContainer,
           inputRoot: classes.inputRoot
         },
         onKeyDown: (event) => {

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

@@ -48,9 +48,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTimePicke
   inputContainer: {
     minWidth: 40,
     maxWidth: 40
-  },
-  inputBorderContainer: {
-    top: 40
   }
 });
 exports.staticClasses = staticClasses;