@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

package/dist/cjs/Accordion/Accordion.cjs

@@ -56,7 +56,7 @@ const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
         onClick: handleClick,
         variant: labelVariant,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { color: "inherit", rotate: !isOpen }),
+          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { rotate: !isOpen }),
           label
         ]
       }

package/dist/cjs/Accordion/Accordion.styles.cjs

@@ -2,11 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAccordion", {
-  root: {
-    "& + root": {
-      paddingTop: 8
-    }
-  },
+  root: {},
   hidden: { height: 0, display: "none" },
   container: { paddingTop: 8, height: "auto" },
   label: {

package/dist/cjs/ActionBar/ActionBar.styles.cjs

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvActionBar
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,
-    borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderTop: `1px solid ${uikitStyles.theme.colors.border}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -64,7 +64,7 @@ const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref)
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
     const actsDropdown = actions.slice(maxVisibleActions);
-    const iconColor = variant === "semantic" && "base_dark" || void 0;
+    const iconColor = variant === "semantic" && "textDark" || void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/AppSwitcher/Action/Action.cjs

@@ -23,8 +23,8 @@ const HvAppSwitcherAction = ({
   const { classes, cx } = Action_styles.useClasses(classesProp);
   const { name, description, disabled, iconElement, iconUrl, url, target } = application;
   const color = uikitStyles.getColor(
-    disabled ? "secondary_60" : application?.color,
-    "secondary"
+    disabled ? "textDisabled" : application?.color,
+    "text"
   );
   const [validIconUrl, setValidIconUrl] = React.useState(true);
   const renderApplicationIcon = () => {

package/dist/cjs/AppSwitcher/Action/Action.styles.cjs

@@ -23,7 +23,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       minHeight: 52,
       padding: `6px ${uikitStyles.theme.space.xs}`,
       border: "none",
-      borderLeft: `solid 2px ${uikitStyles.theme.colors.secondary}`,
+      borderLeft: `2px solid currentcolor`,
       cursor: "pointer",
       textDecoration: "inherit",
       backgroundColor: "inherit",

package/dist/cjs/Avatar/Avatar.cjs

@@ -8,10 +8,16 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const AvatarGroupContext = require("../AvatarGroup/AvatarGroupContext.cjs");
 const useImageLoaded = require("../hooks/useImageLoaded.cjs");
-const sizes = require("../utils/sizes.cjs");
 const Avatar_styles = require("./Avatar.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiAvatar__default = /* @__PURE__ */ _interopDefault(MuiAvatar);
+const decreaseSizeMap = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs"
+};
 const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
   const {
     className,
@@ -20,11 +26,11 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     children: childrenProp,
     component = "div",
     size: sizeProp,
-    backgroundColor = "secondary",
-    color = "atmo1",
+    backgroundColor = "text",
+    color = "bgContainer",
     src,
     srcSet,
-    sizes: sizes$1,
+    sizes,
     alt,
     imgProps,
     status,
@@ -47,7 +53,7 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
         alt,
         src,
         srcSet,
-        sizes: sizes$1,
+        sizes,
         className: classes.img,
         ...imgProps
       }
@@ -61,7 +67,7 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
       uikitReactIcons.User,
       {
         color,
-        iconSize: sizes.decreaseSize(size),
+        size: decreaseSizeMap[size],
         className: classes.fallback
       }
     );
@@ -73,29 +79,27 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     inlineStyle.borderRadius = "50%";
   }
   if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = uikitStyles.getColor(
-      backgroundColor,
-      uikitStyles.theme.colors.secondary
-    );
-    inlineStyle.color = uikitStyles.getColor(color, uikitStyles.theme.colors.atmo1);
+    inlineStyle.backgroundColor = uikitStyles.getColor(backgroundColor, "text");
+    inlineStyle.color = uikitStyles.getColor(color, "textDimmed");
   }
   const statusInlineStyle = {};
   if (status) {
-    const statusColor = uikitStyles.getColor(status, uikitStyles.theme.colors.positive);
+    const statusColor = uikitStyles.getColor(status, "positive");
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
-  const badgeColor = uikitStyles.getColor(badge || "", uikitStyles.theme.colors.positive);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cx(classes.status, classes[variant], classes[size]),
+      ref,
+      className: cx(classes.container, classes.status, classes[variant]),
       style: statusInlineStyle,
+      ...others,
       children: [
         badge && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: classes.badge,
-            style: { backgroundColor: badgeColor }
+            style: { backgroundColor: uikitStyles.getColor(badge, "positive") }
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -112,7 +116,7 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
         )
       ]
     }
-  ) });
+  );
 });
 exports.avatarClasses = Avatar_styles.staticClasses;
 exports.HvAvatar = HvAvatar;

package/dist/cjs/Avatar/Avatar.styles.cjs

@@ -1,22 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const EXTRA_SMALL = { container: "32px", avatar: "24px" };
-const SMALL = { container: "40px", avatar: "32px" };
-const MEDIUM = { container: "48px", avatar: "40px" };
-const LARGE = { container: "60px", avatar: "52px" };
-const EXTRA_LARGE = { container: "96px", avatar: "88px" };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar", {
   root: {
     fontSize: "1rem"
   },
-  container: {
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      borderRadius: 0
-    }
-  },
   img: {
     width: "100%",
     height: "100%",
@@ -29,47 +19,34 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
     textIndent: 1e4
   },
   fallback: {},
-  status: {
+  /** @deprecated use `classes.container` instead */
+  status: {},
+  container: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
     position: "relative",
-    "&$xs": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },
-    "&$sm": { width: SMALL.container, height: SMALL.container },
-    "&$md": { width: MEDIUM.container, height: MEDIUM.container },
-    "&$lg": { width: LARGE.container, height: LARGE.container },
-    "&$xl": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container }
-  },
-  avatar: {
-    "&$xs": {
-      width: EXTRA_SMALL.avatar,
-      height: EXTRA_SMALL.avatar,
-      fontSize: "0.5rem"
-    },
-    "&$sm": { width: SMALL.avatar, height: SMALL.avatar, fontSize: "0.625rem" },
-    "&$md": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: "1rem" },
-    "&$lg": { width: LARGE.avatar, height: LARGE.avatar, fontSize: "1.5rem" },
-    "&$xl": {
-      width: EXTRA_LARGE.avatar,
-      height: EXTRA_LARGE.avatar,
-      fontSize: "2rem"
+    padding: uikitStyles.theme.space.xxs,
+    ":focus-visible": {
+      ...focusUtils.outlineStyles,
+      borderRadius: 0
     }
   },
+  xs: { width: 24, height: 24, fontSize: "0.5rem" },
+  sm: { width: 32, height: 32, fontSize: "0.625rem" },
+  md: { width: 40, height: 40, fontSize: "1rem" },
+  lg: { width: 52, height: 52, fontSize: "1.5rem" },
+  xl: { width: 88, height: 88, fontSize: "2rem" },
+  avatar: {},
   badge: {
     width: 8,
     height: 8,
     position: "absolute",
     top: 0,
     right: 0,
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     zIndex: 1
   },
-  xs: {},
-  sm: {},
-  md: {},
-  lg: {},
-  xl: {},
-  circular: { borderRadius: "50%" },
+  circular: { borderRadius: uikitStyles.theme.radii.full },
   square: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -61,7 +61,7 @@ const Overflow = ({
         Avatar.HvAvatar,
         {
           size,
-          backgroundColor: uikitStyles.theme.colors.atmo4,
+          backgroundColor: uikitStyles.theme.colors.border,
           classes: {
             avatar: css({
               [`&.HvAvatar-${size}`]: {

package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs

@@ -8,65 +8,58 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatarGro
   root: {
     display: "flex",
     [`& .${Avatar_styles.staticClasses.root}`]: {
-      border: `2px solid ${uikitStyles.theme.colors.atmo2}`,
+      border: `2px solid ${uikitStyles.theme.colors.bgPage}`,
       boxSizing: "content-box"
     },
-    "&$row": {
-      flexDirection: "row",
-      justifyContent: "flex-start",
+    [`& .${Avatar_styles.staticClasses.container}`]: {
+      padding: 2
+    }
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    [`& .${Avatar_styles.staticClasses.container}`]: {
+      "&:not(:first-of-type)": {
+        marginLeft: "var(--spacing)"
+      }
+    },
+    "&$toBack": {
+      flexDirection: "row-reverse",
+      justifyContent: "flex-end",
       [`& .${Avatar_styles.staticClasses.container}`]: {
-        "&:not(:first-of-type)": {
+        "&:last-of-type": {
+          marginLeft: 0
+        },
+        "&:not(:last-of-type)": {
           marginLeft: "var(--spacing)"
         }
-      },
-      "&$toBack": {
-        flexDirection: "row-reverse",
-        justifyContent: "flex-end",
-        [`& .${Avatar_styles.staticClasses.container}`]: {
-          "&:last-of-type": {
-            marginLeft: 0
-          },
-          "&:not(:last-of-type)": {
-            marginLeft: "var(--spacing)"
-          }
-        }
+      }
+    }
+  },
+  column: {
+    flexDirection: "column",
+    [`& .${Avatar_styles.staticClasses.container}`]: {
+      "&:not(:first-of-type)": {
+        marginTop: "var(--spacing)"
       }
     },
-    "&$column": {
-      flexDirection: "column",
+    "&$toBack": {
+      flexDirection: "column-reverse",
       [`& .${Avatar_styles.staticClasses.container}`]: {
-        "&:not(:first-of-type)": {
+        "&:last-of-type": {
+          marginTop: 0
+        },
+        "&:not(:last-of-type)": {
           marginTop: "var(--spacing)"
         }
-      },
-      "&$toBack": {
-        flexDirection: "column-reverse",
-        [`& .${Avatar_styles.staticClasses.container}`]: {
-          "&:last-of-type": {
-            marginTop: 0
-          },
-          "&:not(:last-of-type)": {
-            marginTop: "var(--spacing)"
-          }
-        }
-      }
-    },
-    [`&$highlight`]: {
-      [`& .${Avatar_styles.staticClasses.status}:hover`]: {
-        zIndex: uikitStyles.theme.zIndices.popover
       }
     }
   },
-  row: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    "&$toBack": {
-      flexDirection: "row-reverse",
-      justifyContent: "flex-end"
+  highlight: {
+    [`& .${Avatar_styles.staticClasses.container}:hover`]: {
+      zIndex: uikitStyles.theme.zIndices.popover
     }
   },
-  column: {},
-  highlight: {},
   toBack: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Badge/Badge.cjs

@@ -27,10 +27,11 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
   const children = childrenProp || icon || text && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: textVariant, children: text });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.badgeContainer]: children }), children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cx(classes.badgePosition, {
+          [classes.badgeContainer]: children,
           [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),
           // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)
           [classes.badge]: !!(count > 0 || renderedCountOrLabel),
@@ -41,7 +42,7 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
         }),
         children: renderedCountOrLabel
       }
-    ) })
+    )
   ] });
 });
 exports.badgeClasses = Badge_styles.staticClasses;

package/dist/cjs/Badge/Badge.styles.cjs

@@ -5,13 +5,16 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
   root: { position: "relative", "&>*": { float: "left" } },
   /** class applied to the badge container when it has content */
-  badgeContainer: { width: 0 },
+  badgeContainer: {},
   /** class applied to the badge */
   badgePosition: {
+    // TODO: change to relative so that badges don't overflow into the siblings
+    position: "absolute",
+    left: "100%",
     ...uikitStyles.theme.typography.caption2,
-    color: uikitStyles.theme.colors.atmo1,
+    color: uikitStyles.theme.colors.textDimmed,
     borderRadius: uikitStyles.theme.radii.full,
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",
@@ -32,7 +35,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
   },
   showCount: {},
   showLabel: {},
-  badgeIcon: { position: "relative", top: "1px", left: "-7px" },
+  badgeIcon: { top: "1px", left: "calc(100% - 7px)" },
   badgeOneDigit: { padding: 0, width: "16px" }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Banner/Banner.cjs

@@ -16,6 +16,7 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
     id,
     classes: classesProp,
     className,
+    title,
     open,
     onClose,
     anchorOrigin = "top",
@@ -72,6 +73,7 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
         BannerContent.HvBannerContent,
         {
           id: setId.setId(id, "content"),
+          title,
           variant,
           customIcon,
           showIcon,

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs

@@ -14,12 +14,14 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBannerCon
   warning: {},
   error: {},
   default: {},
+  info: {},
+  accent: {},
   message: {
     gap: uikitStyles.theme.space.xs,
     padding: uikitStyles.theme.spacing("xs", 0),
     paddingLeft: uikitStyles.theme.space.sm,
     ...uikitStyles.theme.typography.body,
-    color: uikitStyles.theme.colors.base_dark
+    color: uikitStyles.theme.colors.textDark
   },
   action: {
     padding: uikitStyles.theme.space.xs,

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -5,15 +5,13 @@ const React = require("react");
 const MuiCheckbox = require("@mui/material/Checkbox");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
-const icons = require("./icons.cjs");
+const icons$1 = require("./icons.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
-const getSelectorIcons = () => {
-  return {
-    checkbox: /* @__PURE__ */ jsxRuntime.jsx(icons.Box, {}),
-    checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(icons.Partial, {}),
-    checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
-  };
+const icons = {
+  checkbox: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Box, {}),
+  checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Partial, {}),
+  checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Check, {})
 };
 const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
   const {
@@ -37,7 +35,6 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
   } = uikitReactUtils.useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = BaseCheckBox_styles.useClasses(classesProp);
   const [focusVisible, setFocusVisible] = React.useState(false);
-  const icons2 = getSelectorIcons();
   const onChangeCallback = React.useCallback(
     (event) => {
       if (readOnly) {
@@ -79,9 +76,9 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
         },
         className
       ),
-      icon: icons2.checkbox,
-      indeterminateIcon: icons2.checkboxPartial,
-      checkedIcon: icons2.checkboxChecked,
+      icon: icons.checkbox,
+      indeterminateIcon: icons.checkboxPartial,
+      checkedIcon: icons.checkboxChecked,
       disabled,
       required,
       readOnly,

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -12,14 +12,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     borderRadius: uikitStyles.theme.radii.base,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover,
+      borderRadius: uikitStyles.theme.radii.round
     },
     "& svg": {
       width: 16,
       height: 16,
-      color: uikitStyles.theme.colors.atmo1,
-      borderRadius: uikitStyles.theme.radii.none,
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      color: uikitStyles.theme.colors.bgContainer,
+      borderRadius: uikitStyles.theme.radii.base,
+      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
     }
   },
   disabled: {
@@ -27,9 +28,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
       cursor: "not-allowed",
       pointerEvents: "initial",
       "& svg": {
-        color: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60,
-        backgroundColor: uikitStyles.theme.colors.atmo3
+        color: uikitStyles.theme.colors.bgDisabled,
+        borderColor: uikitStyles.theme.colors.borderDisabled,
+        backgroundColor: uikitStyles.theme.colors.bgDisabled
+      },
+      "&:hover": {
+        backgroundColor: "transparent"
       }
     }
   },
@@ -41,36 +45,33 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
   icon: {},
   checked: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
-      backgroundColor: uikitStyles.theme.colors.secondary,
-      color: uikitStyles.theme.colors.atmo1
+      borderColor: "transparent",
+      backgroundColor: uikitStyles.theme.colors.primaryStrong,
+      color: uikitStyles.theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.secondary_60
+        color: uikitStyles.theme.colors.textDisabled,
+        borderColor: "currentcolor"
       }
     }
   },
   indeterminate: {
     "& svg": {
-      color: uikitStyles.theme.colors.secondary
+      color: uikitStyles.theme.colors.textSubtle
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.secondary_60
+        color: uikitStyles.theme.colors.textDisabled,
+        borderColor: "currentcolor"
       }
     }
   },
   semantic: {
-    "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.base_dark}`,
-      color: uikitStyles.theme.colors.base_light,
-      backgroundColor: uikitStyles.theme.colors.base_dark
-    },
     "&$indeterminate": {
       "& svg": {
-        color: uikitStyles.theme.colors.base_dark,
-        backgroundColor: uikitStyles.theme.colors.base_light
+        backgroundColor: uikitStyles.theme.colors.bgContainer,
+        border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
       }
     }
   }

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -96,12 +96,13 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
     "div",
     {
       id: setId.setId(id, "header"),
+      "data-popper-placement": popperPlacement,
       className: cx(classes.header, {
-        [classes.headerDisabled]: disabled,
-        [classes.headerReadOnly]: readOnly,
         [classes.headerOpen]: isOpen,
         [classes.headerOpenUp]: isOpen && popperPlacement?.includes("top"),
-        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom")
+        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom"),
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerDisabled]: disabled
       }),
       role: ariaRole === "combobox" ? "textbox" : void 0,
       ...headerAriaLabels,
@@ -123,7 +124,7 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
           ExpanderComponent,
           {
             iconSize: "XS",
-            color: disabled ? "secondary_60" : void 0,
+            color: disabled ? "textDisabled" : void 0,
             className: classes.arrow
           }
         ) })