@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

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

@@ -1,10 +1,16 @@
 "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("HvSliderInput", {
-  inputRoot: { display: "flex" },
-  input: { maxWidth: "50px" },
-  inputContainer: { display: "flex" }
+  root: {
+    display: "flex",
+    alignItems: "center",
+    color: uikitStyles.theme.colors.textSubtle,
+    gap: uikitStyles.theme.space.xs,
+    fontSize: 16
+  },
+  input: { maxWidth: "50px" }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Slider/base.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const base = {
   "& .rc-slider": {
     position: "relative",
     width: "100%",
     height: "14px",
     padding: " 5px 0",
-    borderRadius: "6px",
     touchAction: "none",
     boxSizing: "border-box",
     WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
@@ -19,14 +19,12 @@ const base = {
     position: "absolute",
     width: "100%",
     height: "4px",
-    backgroundColor: "#e9e9e9",
-    borderRadius: "6px"
+    backgroundColor: "#e9e9e9"
   },
   "& .rc-slider-track": {
     position: "absolute",
     height: "4px",
-    backgroundColor: "#abe2fb",
-    borderRadius: "6px"
+    backgroundColor: "#abe2fb"
   },
   "& .rc-slider-handle": {
     position: "absolute",
@@ -35,7 +33,7 @@ const base = {
     marginTop: "-5px",
     backgroundColor: "#fff",
     border: "solid 2px #96dbfa",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     cursor: "grab",
     opacity: 0.8,
     touchAction: "pan-x"
@@ -97,7 +95,7 @@ const base = {
     verticalAlign: "middle",
     backgroundColor: "#fff",
     border: "2px solid #e9e9e9",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     cursor: "pointer"
   },
   "& .rc-slider-dot-active": {
@@ -226,7 +224,7 @@ const base = {
     textAlign: "center",
     textDecoration: "none",
     backgroundColor: "#6c6c6c",
-    borderRadius: "6px",
+    borderRadius: uikitStyles.theme.radii.round,
     boxShadow: "0 0 4px #d9d9d9"
   },
   "& .rc-slider-tooltip-arrow": {

package/dist/cjs/Slider/utils.cjs

@@ -140,18 +140,18 @@ const isSingleSlider = (values, defaultValues) => {
 const generateDefaultKnobProperties = (numberOfKnobs = 1, disabled = false, knobPropertiesProp) => {
   let knobProperties = knobPropertiesProp || [];
   const defaultKnobStyles = {
-    color: uikitStyles.theme.colors.secondary,
-    hoverColor: uikitStyles.theme.colors.secondary,
-    trackColor: uikitStyles.theme.colors.secondary,
-    dragColor: uikitStyles.theme.colors.secondary,
-    knobRingColor: uikitStyles.theme.colors.atmo1
+    color: uikitStyles.theme.colors.text,
+    hoverColor: uikitStyles.theme.colors.text,
+    trackColor: uikitStyles.theme.colors.text,
+    dragColor: uikitStyles.theme.colors.text,
+    knobRingColor: uikitStyles.theme.colors.textDimmed
   };
   const disabledKnobStyles = {
-    color: uikitStyles.theme.colors.secondary_60,
-    hoverColor: uikitStyles.theme.colors.secondary_60,
-    trackColor: uikitStyles.theme.colors.secondary_60,
-    dragColor: uikitStyles.theme.colors.secondary_60,
-    knobRingColor: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled,
+    hoverColor: uikitStyles.theme.colors.textDisabled,
+    trackColor: uikitStyles.theme.colors.textDisabled,
+    dragColor: uikitStyles.theme.colors.textDisabled,
+    knobRingColor: uikitStyles.theme.colors.textDisabled
   };
   if (knobProperties.length > 0) {
     knobProperties = knobProperties.slice(0, numberOfKnobs);

package/dist/cjs/Snackbar/Snackbar.cjs

@@ -17,6 +17,7 @@ const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
     classes: classesProp,
     className,
     id,
+    title,
     open = false,
     onClose,
     label,
@@ -75,6 +76,7 @@ const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
         SnackbarContent.HvSnackbarContent,
         {
           id: setId.setId(id, "content"),
+          title,
           label,
           variant,
           customIcon,

package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs

@@ -14,6 +14,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses(name, {
   error: {},
   default: {},
   warning: {},
+  info: {},
+  accent: {},
   message: {
     padding: 0,
     width: "100%",

package/dist/cjs/Stack/Stack.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvStack", {
     flexDirection: "row"
   },
   divider: {
-    borderColor: uikitStyles.theme.colors.atmo4
+    borderColor: uikitStyles.theme.colors.border
   },
   xs: {
     gap: uikitStyles.theme.space.xs

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

@@ -19,7 +19,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSwitch",
   },
   invalidSwitch: {
     paddingBottom: "1px",
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`
   }
 });
 exports.staticClasses = staticClasses;

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

@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTable", {
   },
   stickyHeader: {},
   stickyColumns: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     "&": {
       borderSpacing: 0
     }

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

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     verticalAlign: "inherit",
     alignContent: "inherit",
     textAlign: "left",
-    borderColor: uikitStyles.theme.colors.atmo4,
+    borderColor: uikitStyles.theme.colors.border,
     padding: `calc(${uikitStyles.theme.space.xs} - 2px ) ${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.xs} - 3px ) ${uikitStyles.theme.spacing(4)}`,
     borderBottomWidth: 1
   },
@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     height: 52,
     verticalAlign: "top",
     alignContent: "start",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderTop: "1px solid transparent",
     ...uikitStyles.theme.typography.label
   },
@@ -117,7 +117,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   stickyColumn: {
     position: "sticky",
     zIndex: 2,
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     "&$groupColumnMostRight+$stickyColumn": {
       borderLeft: 0
     }
@@ -157,7 +157,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
-    borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
+    borderRight: `2px solid ${uikitStyles.theme.colors.primaryStrong}`
   }
 });
 exports.staticClasses = staticClasses;

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

@@ -94,7 +94,6 @@ const HvTableHeader = React.forwardRef(
                   {
                     className: classes.sortButton,
                     icon: true,
-                    overrideIconColors: false,
                     "aria-label": "Sort",
                     ...sortButtonProps,
                     children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })

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

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     alignContent: "inherit",
     textAlign: "left",
     padding: uikitStyles.theme.spacing(0, 1, 0, 4),
-    borderColor: uikitStyles.theme.colors.atmo4,
+    borderColor: uikitStyles.theme.colors.border,
     borderBottomWidth: 1
   },
   head: {
@@ -19,7 +19,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     verticalAlign: "top",
     alignContent: "start",
     ...uikitStyles.theme.typography.label,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderBottomWidth: 1,
     "*:first-of-type > &": {
       height: "var(--first-row-cell-height)",
@@ -39,7 +39,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
       paddingLeft: 0,
       cursor: "pointer",
       ":hover, :focus-within": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+        backgroundColor: uikitStyles.theme.colors.bgHover,
         "& $sortIcon": {
           opacity: 1
         }
@@ -50,7 +50,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     backgroundColor: "inherit",
     ...uikitStyles.theme.typography.body,
     ":where($sorted)": {
-      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.4)
+      backgroundColor: uikitStyles.theme.alpha("bgContainer", 0.4)
     },
     "&$sortable:not($variantNone)": {
       paddingLeft: 32
@@ -131,10 +131,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   resizable: {
     borderRightWidth: 1,
     ":has($resizer:hover)": {
-      borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
+      borderRight: `2px solid ${uikitStyles.theme.colors.primaryStrong}`
     }
   },
-  resizing: { borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}` },
+  resizing: { borderRight: `2px solid ${uikitStyles.theme.colors.primaryStrong}` },
   resizer: {
     display: "inline-block",
     width: 16,

package/dist/cjs/Table/TableRow/TableRow.styles.cjs

@@ -22,12 +22,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
   /** Styles applied to the component root class. */
   root: {
     color: "inherit",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     verticalAlign: "middle",
     alignContent: "center",
     outline: 0,
     ":is($hover,$striped):hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */
@@ -38,11 +38,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
   footer: {},
   /** Styles applied to the component root when selected. */
   selected: {
-    backgroundColor: uikitStyles.theme.colors.atmo2
+    backgroundColor: uikitStyles.theme.colors.bgPage
   },
   /** Styles applied to the component root when expanded. */
   expanded: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     "& > *[role=cell]": {
       borderBottom: "none"
     }
@@ -50,7 +50,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
   /** Styles applied to the component root when striped. */
   striped: {
     "&:nth-of-type(even)": {
-      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.6)
+      backgroundColor: uikitStyles.theme.alpha("bgContainer", 0.6)
     },
     "&:nth-of-type(odd)": {
       backgroundColor: "transparent"
@@ -63,16 +63,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
     // only applied on custom `display`
     marginBottom: uikitStyles.theme.space.xs,
     borderRadius: uikitStyles.theme.radii.round,
-    ...getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round),
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    ...getBorderStyles(uikitStyles.theme.colors.border, uikitStyles.theme.radii.round),
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     "&$selected": {
-      ...getBorderStyles(uikitStyles.theme.colors.secondary, uikitStyles.theme.radii.round),
+      ...getBorderStyles(uikitStyles.theme.colors.text, uikitStyles.theme.radii.round),
       "&:hover": {
-        ...getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round)
+        ...getBorderStyles(uikitStyles.theme.colors.border, uikitStyles.theme.radii.round)
       }
     },
     "&:hover": {
-      ...getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round)
+      ...getBorderStyles(uikitStyles.theme.colors.border, uikitStyles.theme.radii.round)
     },
     "&.HvIsFocused": {
       borderRadius: uikitStyles.theme.radii.round

package/dist/cjs/Table/TableSection/TableSection.styles.cjs

@@ -44,8 +44,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSect
       borderTopRightRadius: "inherit"
     },
     [`& .${TableHeader_styles.staticClasses.head}`]: {
-      backgroundColor: uikitStyles.theme.colors.atmo2,
-      borderBottomColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPage,
+      borderBottomColor: uikitStyles.theme.colors.bgPageSecondary,
       [`&.${TableHeader_styles.staticClasses.variantCheckbox}`]: {
         borderRight: "none"
       },
@@ -60,7 +60,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSect
       }
     },
     [`& .${TableCell_styles.staticClasses.root}`]: {
-      borderBottomColor: uikitStyles.theme.colors.atmo3
+      borderBottomColor: uikitStyles.theme.colors.borderSubtle
     },
     [`& .${TableCell_styles.staticClasses.variantCheckbox}`]: {
       borderRight: "none"
@@ -71,14 +71,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSect
     [`& .${BulkActions_styles.staticClasses.root}`]: {
       marginBottom: 0,
       border: "none",
-      borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+      borderBottom: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
       padding: uikitStyles.theme.spacing("xs", "sm")
     },
     [`& .${Pagination_styles.staticClasses.root}`]: {
       margin: 0,
-      backgroundColor: uikitStyles.theme.colors.atmo2,
+      backgroundColor: uikitStyles.theme.colors.bgPage,
       padding: uikitStyles.theme.space.xs,
-      borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+      borderTop: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
       borderBottomLeftRadius: "inherit",
       borderBottomRightRadius: "inherit"
     },

package/dist/cjs/Table/hooks/useHvPagination.cjs

@@ -52,5 +52,4 @@ const useHvPagination = (hooks) => {
   hooks.useInstance.push(useInstanceHook);
 };
 useHvPagination.pluginName = "useHvPagination";
-exports.defaultGetHvPaginationProps = defaultGetHvPaginationProps;
 exports.useHvPagination = useHvPagination;

package/dist/cjs/Table/hooks/useHvRowExpand.cjs

@@ -74,5 +74,4 @@ const useHvRowExpand = (hooks) => {
   hooks.getRowProps.push(getRowPropsHook);
 };
 useHvRowExpand.pluginName = "useHvRowExpand";
-exports.CellWithExpandButton = CellWithExpandButton;
 exports.useHvRowExpand = useHvRowExpand;

package/dist/cjs/Table/hooks/useHvRowSelection.cjs

@@ -439,7 +439,4 @@ const useHvRowSelection = (hooks) => {
   hooks.prepareRow.push(prepareRow);
 };
 useHvRowSelection.pluginName = "useHvRowSelection";
-exports.defaultGetToggleAllPageRowsSelectedProps = defaultGetToggleAllPageRowsSelectedProps;
-exports.defaultGetToggleAllRowsSelectedProps = defaultGetToggleAllRowsSelectedProps;
-exports.defaultGetToggleRowSelectedProps = defaultGetToggleRowSelectedProps;
 exports.useHvRowSelection = useHvRowSelection;

package/dist/cjs/Table/hooks/useHvSticky.cjs

@@ -103,7 +103,7 @@ const getCellProps = (header, isHeaderCell) => {
       justifyContent: header.align,
       width: `${header.totalWidth}px`,
       minWidth: `${header.totalMinWidth}px`,
-      ...isHeaderCell && { backgroundColor: uikitStyles.theme.colors.atmo2 }
+      ...isHeaderCell && { backgroundColor: uikitStyles.theme.colors.bgPage }
     }
   };
   if (header.sticky != null) {

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

@@ -12,15 +12,15 @@ const { useClasses } = uikitReactUtils.createClasses("HvProgressColumnCell", {
   linearProgress: {
     height: 8
   },
-  linearProgressRoot: { backgroundColor: uikitStyles.theme.colors.atmo4 },
+  linearProgressRoot: { backgroundColor: uikitStyles.theme.colors.border },
   linearProgressColorPrimary: {
-    backgroundColor: uikitStyles.theme.colors.atmo4
+    backgroundColor: uikitStyles.theme.colors.border
   },
   linearProgressBarColorPrimary: {
     backgroundColor: uikitStyles.theme.colors.positive
   },
   linearProgressBarColorSecondary: {
-    backgroundColor: uikitStyles.theme.colors.secondary
+    backgroundColor: uikitStyles.theme.colors.text
   }
 });
 const normalizeProgressBar = (value, max) => {
@@ -52,4 +52,3 @@ const HvProgressColumnCell = ({
   ) }) });
 };
 exports.HvProgressColumnCell = HvProgressColumnCell;
-exports.normalizeProgressBar = normalizeProgressBar;

package/dist/cjs/Tabs/Tab/Tab.styles.cjs

@@ -13,17 +13,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
     ...uikitStyles.theme.typography.body,
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       "&::after": {
         height: "1px",
-        backgroundColor: uikitStyles.theme.colors.atmo4
+        backgroundColor: uikitStyles.theme.colors.border
       }
     },
     "&$selected": {
       fontWeight: uikitStyles.theme.typography.label.fontWeight
     },
     "&$disabled": {
-      color: uikitStyles.theme.colors.secondary_60,
+      color: uikitStyles.theme.colors.textDisabled,
       cursor: "not-allowed",
       pointerEvents: "all",
       opacity: 1,
@@ -38,7 +38,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
       top: "calc(100% - 1px)",
       height: "1px",
       width: "100%",
-      backgroundColor: uikitStyles.theme.colors.atmo4,
+      backgroundColor: uikitStyles.theme.colors.border,
       content: "''"
     },
     // Override Mui styling: https://mui.com/material-ui/api/tab/#css

package/dist/cjs/Tag/Tag.cjs

@@ -18,20 +18,22 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     style,
     label,
     disabled,
+    size = "xs",
+    variant,
     type = "semantic",
     selectable,
     selected,
     defaultSelected = false,
+    showSelectIcon = selectable,
     color,
+    icon: iconProp,
     deleteIcon: deleteIconProp,
     onDelete,
     onClick,
     onKeyDown,
     onKeyUp,
-    // TODO: remove from API
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    deleteButtonArialLabel = "Delete tag",
-    deleteButtonProps = {},
+    deleteButtonArialLabel,
+    deleteButtonProps,
     ...others
   } = uikitReactUtils.useDefaultProps("HvTag", props);
   const { classes, cx } = Tag_styles.useClasses(classesProp);
@@ -43,7 +45,11 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     event.stopPropagation();
     onDelete?.(event);
   };
-  const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && uikitStyles.theme.alpha(uikitStyles.getColor(color, "cat1"), 0.2) || void 0;
+  const tagColor = (
+    // backwards-compatibility for `type` prop
+    type === "categorical" && uikitStyles.theme.alpha(color || "cat1", 0.2) || // use the palette color if it matches
+    uikitStyles.theme.palette[color]?.[600] || uikitStyles.getColor(color)
+  );
   const isClickable = !!(onClick || onDelete || selectable);
   const CheckboxIcon = isSelected ? uikitReactIcons.CheckboxCheck : uikitReactIcons.Checkbox;
   const deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
@@ -68,12 +74,14 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       disabled,
       "data-color": color,
       style: uikitReactUtils.mergeStyles(style, {
-        "--bgColor": backgroundColor
+        "--tagColor": tagColor
       }),
-      className: cx(classes.root, classes.chipRoot, className, {
-        [classes.disabled]: disabled,
-        [classes.selected]: isSelected,
+      className: cx(classes.root, classes.chipRoot, classes[size], className, {
+        [classes.hasIcon]: iconProp || selectable && showSelectIcon,
         [classes.clickable]: isClickable && !disabled,
+        [classes.selected]: isSelected,
+        [classes.disabled]: disabled,
+        [classes.outlined]: variant === "outlined",
         [classes.categorical]: type === "categorical",
         [classes.categoricalFocus]: type === "categorical" && !disabled,
         [classes.categoricalDisabled]: type === "categorical" && disabled
@@ -92,11 +100,12 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       selected: isClickable && isSelected,
       ...others,
       children: [
-        selectable && type === "semantic" && /* @__PURE__ */ jsxRuntime.jsx(
+        iconProp,
+        selectable && showSelectIcon && /* @__PURE__ */ jsxRuntime.jsx(
           CheckboxIcon,
           {
             className: classes.icon,
-            color: disabled && ["atmo3", "secondary_60"] || void 0,
+            color: disabled && ["bgPageSecondary", "textDisabled"] || void 0,
             size: "XS"
           }
         ),

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

@@ -8,29 +8,56 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     alignItems: "center",
     justifyContent: "center",
     cursor: "default",
-    color: uikitStyles.theme.colors.base_dark,
-    backgroundColor: "var(--bgColor)",
-    height: 16,
+    color: uikitStyles.theme.colors.textDark,
+    borderColor: uikitStyles.theme.colors.border,
     borderRadius: 0,
     maxWidth: 180,
     whiteSpace: "nowrap",
-    ":hover, :focus": {
-      backgroundColor: "var(--bgColor)"
+    transition: "background-color 0.3s ease",
+    "&,:hover,:focus-visible": {
+      backgroundColor: "var(--tagColor)"
     }
   },
+  hasIcon: {
+    paddingLeft: 2
+  },
+  /** @deprecated */
+  outlined: {
+    outlineStyle: "solid"
+  },
+  /** @deprecated */
   categorical: {
     borderRadius: 8,
     "& $label": {
-      color: uikitStyles.theme.colors.secondary
+      color: uikitStyles.theme.colors.text
+    },
+    "& $icon": {
+      display: "none"
+    }
+  },
+  xs: {
+    height: 16
+  },
+  sm: {
+    height: 24,
+    "& $label": {
+      ...uikitStyles.theme.typography.caption1,
+      color: "inherit"
+    }
+  },
+  md: {
+    height: 32,
+    "& $label": {
+      ...uikitStyles.theme.typography.body,
+      color: "inherit"
     }
   },
   disabled: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    ":hover, :focus": {
-      backgroundColor: uikitStyles.theme.colors.atmo3
+    "&,:hover,:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.bgDisabled
     },
     "& $label": {
-      color: uikitStyles.theme.colors.secondary_60
+      color: uikitStyles.theme.colors.textDisabled
     }
   },
   label: {
@@ -41,17 +68,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     width: 16,
     height: 16,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   selected: {},
   clickable: {
     cursor: "pointer"
   },
+  // TODO: remove in favour of `hasIcon` once it's no longer needed
   icon: {
     width: 12,
-    height: 12,
-    marginLeft: 2
+    height: 12
   },
   /** @deprecated use `root` instead */
   chipRoot: {},

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

@@ -15,17 +15,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   },
   disabled: {
     "& $tagsList": {
-      backgroundColor: uikitStyles.theme.colors.atmo2,
+      backgroundColor: uikitStyles.theme.colors.bgPage,
       "&,:hover": {
-        borderColor: uikitStyles.theme.colors.atmo4
+        borderColor: uikitStyles.theme.colors.border
       }
     }
   },
   readOnly: {
     "& $tagsList": {
-      backgroundColor: uikitStyles.theme.colors.atmo2,
+      backgroundColor: uikitStyles.theme.colors.bgPage,
       "&,:hover": {
-        borderColor: uikitStyles.theme.colors.secondary_60
+        borderColor: uikitStyles.theme.colors.textDisabled
       }
     }
   },
@@ -53,9 +53,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     position: "relative",
     flexDirection: "row",
     flexWrap: "wrap",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderWidth: 1,
-    borderColor: uikitStyles.theme.colors.secondary_80,
+    borderColor: uikitStyles.theme.colors.textSubtle,
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
       borderColor: uikitStyles.theme.colors.primary
@@ -66,11 +66,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     "&$singleLine": {
       flexWrap: "nowrap"
     },
-    "&$error": {
-      borderColor: uikitStyles.theme.colors.negative_120
-    },
-    "&$invalid": {
-      borderColor: uikitStyles.theme.colors.negative_120
+    "&$error, $invalid": {
+      borderColor: uikitStyles.theme.form.errorColor
     }
   },
   /** @deprecated use `classes.input` instead */