@epam/ai-dial-ui-kit 0.15.0-dev.7 → 0.15.0

package/dist/components/New/FolderName/FolderName.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { FileName as r } from "../FileName/FileName.js";
+import { DIAL_KIT_CLASS as t } from "../../../constants/public-class-names.js";
+import { DialItemType as p } from "../../../types/item.js";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+const d = ({ className: m, ...e }) => /* @__PURE__ */ o(
+  r,
+  {
+    ...e,
+    type: p.Folder,
+    className: a(m, t.folderName)
+  }
+);
+export {
+  d as FolderName
+};

package/dist/components/New/FolderPath/FolderPath.js

@@ -34,7 +34,7 @@ const y = ({
   return /* @__PURE__ */ r(
     h,
     {
-      className: l(N.folderPath, c),
+      className: l(c, N.folderPath),
       ariaLabel: d,
       separator: /* @__PURE__ */ r(
         t,

package/dist/components/New/Grid/constants.js

@@ -1,9 +1,9 @@
-const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", E = {
+const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", s = {
   accentColor: "var(--bg-control-accent, #1D4ED8)",
   backgroundColor: "var(--bg-layer-raised, #FCFCFC)",
   oddRowBackgroundColor: "var(--bg-layer-sunken, #EEF1F7)",
-  selectedRowBackgroundColor: "var(--bg-control-accent-alpha, #2764D90F)",
-  rowHoverColor: "var(--bg-control-accent-alpha-hover, #2764D924)",
+  selectedRowBackgroundColor: "var(--bg-control-accent-alpha-active-subtle, #2764D914)",
+  rowHoverColor: "var(--bg-control-accent-alpha-hover-subtle, #2764D90A)",
   borderColor: "var(--stroke-tertiary, #E0E6F0)",
   // Dividers inside the table sit on the thin stroke (0.5px) rather than the
   // 1px main stroke that controls and standalone dividers use, so a dense grid
@@ -13,9 +13,16 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
   // by the theme: those frame the table and separate its regions rather than
   // dividing rows and columns.
   rowBorder: o,
-  headerRowBorder: o,
+  // Off: ag-Grid draws this one both under the header and between the title
+  // row and the filter row, and the design has no line between those two. The
+  // line under the header is drawn at 1px in `styles/grid.scss`.
+  headerRowBorder: !1,
   headerColumnBorder: o,
+  // The design's header divider is a short 12px mark centred in the cell, not
+  // the 20px (half the row) ag-Grid draws by default.
+  headerColumnBorderHeight: 12,
   chromeBackgroundColor: "var(--bg-layer-base, #F5F7FA)",
+  headerBackgroundColor: "var(--bg-layer-raised, #FCFCFC)",
   foregroundColor: "var(--text-primary, #161B2D)",
   headerTextColor: "var(--text-secondary, #57647A)",
   // 1.0 asked the browser for dark native widgets while painting a light
@@ -27,6 +34,8 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
   fontFamily: "var(--theme-font, var(--font-inter))",
   spacing: 4,
   borderRadius: 4,
+  // Search fields in the header and filter popups: `rounded-lg`.
+  inputBorderRadius: 8,
   wrapperBorderRadius: 8
 };
 var e = /* @__PURE__ */ ((r) => (r.API = "api", r.ROW_DATA_CHANGED = "rowDataChanged", r.CHECKBOX_SELECTED = "checkboxSelected", r))(e || {});
@@ -36,7 +45,7 @@ export {
   a as GRID_ROOT_CLASS,
   i as GRID_ROW_SELECT_CLASS,
   n as GRID_SELECTION_VISIBLE_CLASS,
-  E as GRID_THEME_PARAMS,
+  s as GRID_THEME_PARAMS,
   d as GRID_WITHOUT_HEADER_BORDERS_CLASS,
   t as GRID_WITH_SELECTION_CLASS,
   C as ROW_HEIGHT,

package/dist/components/New/Highlight/Highlight.js

@@ -16,9 +16,9 @@ const i = {
   maxLines: r = 2
 }) => {
   const c = t(
-    C.highlight,
     N(r),
-    m
+    m,
+    C.highlight
   );
   if (!s.trim())
     return /* @__PURE__ */ a(o, { className: c, text: e });

package/dist/components/New/IconButton/IconButton.js

@@ -1,46 +1,48 @@
-import { jsx as r } from "react/jsx-runtime";
-import { ButtonAppearance as b } from "../../../types/button.js";
-import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as p } from "../../../utils/accessible-name.js";
-import { ElementSize as t } from "../../../types/size.js";
-import { Tooltip as S } from "../Tooltip/Tooltip.js";
-import { getButtonClassNames as f } from "../Button/utils.js";
-const g = {
-  [t.Small]: "size-[24px]",
-  [t.Standard]: "size-[40px] dial-kit-enhanced-target",
-  [t.Large]: "size-[48px] dial-kit-enhanced-target"
-}, B = ({
-  variant: a,
-  appearance: n = b.Solid,
-  size: l = t.Standard,
+import { jsx as o } from "react/jsx-runtime";
+import { ButtonAppearance as u } from "../../../types/button.js";
+import { mergeClasses as S } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as f } from "../../../utils/accessible-name.js";
+import { ElementSize as e } from "../../../types/size.js";
+import { Tooltip as g } from "../Tooltip/Tooltip.js";
+import { getButtonClassNames as p, getDisabledButtonProps as C } from "../Button/utils.js";
+const h = {
+  [e.Small]: "size-[24px]",
+  [e.Standard]: "size-[40px] dial-kit-enhanced-target",
+  [e.Large]: "size-[48px] dial-kit-enhanced-target"
+}, I = ({
+  variant: i,
+  appearance: r = u.Solid,
+  size: l = e.Standard,
   className: m,
   icon: s,
-  tooltipProps: e,
+  tooltipProps: t,
   type: c = "button",
-  ...o
+  disabled: d,
+  ...a
 }) => {
-  const d = u(
+  const b = S(
     "dial-kit-base-icon-button dial-kit-base-button",
-    a && f(a, n),
+    i && p(i, r),
     // 24px is below the AAA target size, so only the larger tiers get the
     // enhanced pointer target — see the accessibility rules in AGENTS.md.
-    g[l],
+    h[l],
     m
-  ), i = /* @__PURE__ */ r(
+  ), n = /* @__PURE__ */ o(
     "button",
     {
-      ...o,
+      ...a,
+      ...C(d, t, a.onClick),
       type: c,
-      className: d,
-      "aria-label": p(
-        o["aria-label"],
-        e?.tooltip
+      className: b,
+      "aria-label": f(
+        a["aria-label"],
+        t?.tooltip
       ),
       children: s
     }
   );
-  return e ? /* @__PURE__ */ r(S, { asChild: !0, ...e, children: i }) : i;
+  return t ? /* @__PURE__ */ o(g, { asChild: !0, ...t, children: n }) : n;
 };
 export {
-  B as IconButton
+  I as IconButton
 };

package/dist/components/New/InfoButton/InfoButton.js

@@ -13,9 +13,9 @@ const b = ({
 }) => {
   if (!o) return null;
   const i = a(
-    f.infoButton,
     "text-secondary hover:text-control-accent-hover active:text-control-accent-active",
-    "focus-visible:outline focus-visible:outline-focus"
+    "focus-visible:outline focus-visible:outline-focus",
+    f.infoButton
   );
   return /* @__PURE__ */ t(
     c,

package/dist/components/New/InlineSelect/InlineSelect.js

@@ -1,98 +1,114 @@
-import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import { IconChevronDown as _ } from "@tabler/icons-react";
-import { useState as p, useMemo as D, useCallback as N } from "react";
-import { Dropdown as K } from "../Dropdown/Dropdown.js";
-import { DIAL_KIT_ICON_STROKE as O } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as A } from "../../../constants/icon.js";
-import { mergeClasses as f } from "../../../utils/merge-classes.js";
-import { ElementSize as L } from "../../../types/size.js";
-import { DIAL_KIT_CLASS as T } from "../../../constants/public-class-names.js";
-const E = ({
+import { jsx as s, jsxs as E } from "react/jsx-runtime";
+import { IconChevronDown as j } from "@tabler/icons-react";
+import { useState as b, useCallback as v, useMemo as w } from "react";
+import { Dropdown as z } from "../Dropdown/Dropdown.js";
+import { DIAL_KIT_ICON_STROKE as M } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as U } from "../../../constants/icon.js";
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { ElementSize as $ } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as R } from "../../../constants/public-class-names.js";
+const Z = ({
   label: e,
-  size: n,
-  isOpen: r = !1,
+  size: l,
+  isOpen: n = !1,
+  labelClassName: a,
+  className: c,
   "aria-label": t,
-  ...a
+  ...m
 }) => {
-  const l = n === L.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
-  return /* @__PURE__ */ y(
+  const d = l === $.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
+  return /* @__PURE__ */ E(
     "button",
     {
       type: "button",
+      ...m,
       "aria-haspopup": "menu",
-      "aria-expanded": r,
+      "aria-expanded": n,
       "aria-label": t ? `${t} ${e}` : void 0,
-      className: f(
-        T.inlineSelect,
+      className: I(
         "dial-small-paragraph-text px-3 focus-visible:outline focus-visible:outline-focus",
         "flex items-center gap-1 rounded-full text-primary disabled:text-control-disable-primary",
         "hover:bg-control-accent-alpha-hover focus-visible:outline-offset-2 active:bg-control-accent-alpha-active",
-        l,
-        a.className
+        d,
+        c,
+        R.inlineSelect
       ),
-      ...a,
       children: [
-        e,
+        /* @__PURE__ */ s("span", { className: a, children: e }),
         /* @__PURE__ */ s(
-          _,
+          j,
           {
-            size: A.MD,
-            stroke: O,
+            size: U.MD,
+            stroke: M,
             "aria-hidden": !0,
-            className: f("transition-transform", r && "rotate-180")
+            className: I("transition-transform", n && "rotate-180")
           }
         )
       ]
     }
   );
-}, B = ({
+}, W = ({
   items: e,
-  selectedKey: n,
-  defaultSelectedKey: r,
-  onSelect: t,
-  size: a,
-  disabled: l,
-  placement: d = "bottom-end",
-  matchReferenceWidth: u = !1,
-  listClassName: b,
-  ariaLabel: h
+  selectedKey: l,
+  defaultSelectedKey: n,
+  onSelect: a,
+  size: c,
+  disabled: t,
+  placement: m = "bottom-end",
+  matchReferenceWidth: d = !1,
+  listClassName: C,
+  listStyle: S,
+  ariaLabel: g,
+  triggerClassName: x,
+  triggerLabelClassName: N,
+  open: p,
+  onOpenChange: u
 }) => {
-  const [I, v] = p(!1), [S, x] = p(
-    r ?? e[0]?.key
-  ), c = n !== void 0, m = c ? n : S, g = D(() => {
-    const o = e.find((i) => i.key === m);
+  const [k, y] = b(!1), r = p !== void 0, O = r ? p : k, _ = v(
+    (o) => {
+      r || y(o), u?.(o);
+    },
+    [r, u]
+  ), [D, K] = b(
+    n ?? e[0]?.key
+  ), f = l !== void 0, h = f ? l : D, A = w(() => {
+    const o = e.find((i) => i.key === h);
     return o?.label ? String(o.label) : "";
-  }, [e, m]), C = N(
+  }, [e, h]), L = v(
     ({ key: o }) => {
-      const i = e.find((k) => k.key === o);
-      i && (c || x(o), t?.(i));
+      const i = e.find((T) => T.key === o);
+      i && (f || K(o), a?.(i));
     },
-    [e, c, t]
+    [e, f, a]
   );
   return /* @__PURE__ */ s(
-    K,
+    z,
     {
       items: e,
-      placement: d,
-      matchReferenceWidth: u,
-      listClassName: b,
-      disabled: l,
-      onOpenChange: v,
-      onItemClick: C,
+      placement: m,
+      matchReferenceWidth: d,
+      listClassName: C,
+      listStyle: S,
+      disabled: t,
+      open: r ? p : void 0,
+      onOpenChange: _,
+      onItemClick: L,
       children: /* @__PURE__ */ s(
-        E,
+        Z,
         {
-          label: g,
-          size: a,
-          isOpen: I,
-          disabled: l,
-          "aria-label": h
+          label: A,
+          size: c,
+          isOpen: O,
+          disabled: t,
+          "aria-label": g,
+          className: x,
+          labelClassName: N
         }
       )
     }
   );
 };
 export {
-  B as InlineSelect,
-  E as InlineSelectTrigger
+  W as InlineSelect,
+  Z as InlineSelectTrigger
 };

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -1,100 +1,104 @@
-import { jsx as n, jsxs as j, Fragment as w } from "react/jsx-runtime";
-import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as K, flip as Y, shift as k, useHover as q, safePolygon as z, useFocus as B, useDismiss as J, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
-import { useState as Z, useRef as $, useMemo as d, isValidElement as ee, cloneElement as oe } from "react";
-import { useThemeScope as te } from "../ThemeScope/ThemeScope.js";
-import { useIsMobileScreen as se } from "../../../hooks/use-is-mobile-screen.js";
-import { TooltipPlacement as ne } from "../../../types/tooltip.js";
-import { mergeClasses as g } from "../../../utils/merge-classes.js";
-import { INTERACTIVE_TOOLTIP_GAP as le, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as ae, interactiveTooltipClassName as re } from "./constants.js";
-import { DIAL_KIT_CLASS as ie } from "../../../constants/public-class-names.js";
-const Re = ({
-  content: a,
-  placement: T = ne.Right,
+import { jsx as i, jsxs as U, Fragment as G } from "react/jsx-runtime";
+import { useFloatingNodeId as K, useFloating as Y, autoUpdate as q, offset as z, flip as B, shift as J, useHover as Q, safePolygon as W, useFocus as X, useClick as Z, useDismiss as $, useInteractions as ee, useMergeRefs as u, FloatingPortal as oe, FloatingFocusManager as te } from "@floating-ui/react";
+import { useState as se, useRef as ne, useMemo as d, isValidElement as ie, cloneElement as le } from "react";
+import { useThemeScope as re } from "../ThemeScope/ThemeScope.js";
+import { useIsMobileScreen as ae } from "../../../hooks/use-is-mobile-screen.js";
+import { InteractiveTooltipTrigger as T, TooltipPlacement as ce } from "../../../types/tooltip.js";
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { INTERACTIVE_TOOLTIP_GAP as fe, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as pe, interactiveTooltipClassName as me } from "./constants.js";
+import { DIAL_KIT_CLASS as ge } from "../../../constants/public-class-names.js";
+const Ee = ({
+  content: r,
+  placement: R = ce.Right,
   children: e,
-  asChild: I = !1,
-  hideTooltip: R = !1,
-  initialOpen: F = !1,
+  asChild: C = !1,
+  hideTooltip: F = !1,
+  initialOpen: h = !1,
+  trigger: v = T.Hover,
   open: t,
-  onOpenChange: h,
-  triggerClassName: r,
-  contentClassName: E
+  onOpenChange: E,
+  triggerClassName: a,
+  contentClassName: P
 }) => {
-  const P = se(), C = te(), [v, N] = Z(F), i = t ?? v, O = (m) => {
-    h?.(m), t == null && N(m);
-  }, _ = H(), { refs: s, floatingStyles: S, context: o } = U({
-    nodeId: _,
-    placement: T,
-    open: i,
-    onOpenChange: O,
-    whileElementsMounted: G,
+  const N = ae(), s = v === T.Click, O = re(), [_, S] = se(h), c = t ?? _, A = (g) => {
+    E?.(g), t == null && S(g);
+  }, M = K(), { refs: n, floatingStyles: b, context: o } = Y({
+    nodeId: M,
+    placement: R,
+    open: c,
+    onOpenChange: A,
+    whileElementsMounted: q,
     middleware: [
-      K(le),
+      z(fe),
       /* No `fallbackAxisSideDirection`: a panel placed to the right should
        flip to the left when it does not fit, not drop to the perpendicular
        top/bottom axis, which reads as the panel landing in the wrong place.*/
-      Y({ padding: 5 }),
-      k({ padding: 5 })
+      B({ padding: 5 }),
+      J({ padding: 5 })
     ]
-  }), A = q(o, {
-    enabled: t == null,
+  }), L = Q(o, {
+    enabled: t == null && !s,
     /* Lets the pointer cross the gap between the trigger and the panel
        without closing it, so it can actually be reached and used. */
-    handleClose: z(),
-    delay: { open: ae, close: 0 }
-  }), M = B(o, { enabled: t == null }), L = J(o), { getReferenceProps: c, getFloatingProps: V } = Q([
-    A,
-    M,
-    L
-  ]), b = $(null), x = u(
-    d(() => [s.setFloating, b], [s.setFloating])
-  ), f = I && ee(e), l = f ? e.props?.ref : null, p = u(
+    handleClose: W(),
+    delay: { open: pe, close: 0 }
+  }), V = X(o, {
+    enabled: t == null && !s
+  }), k = Z(o, { enabled: s }), x = $(o), { getReferenceProps: f, getFloatingProps: y } = ee([
+    L,
+    V,
+    k,
+    x
+  ]), D = ne(null), H = u(
+    d(() => [n.setFloating, D], [n.setFloating])
+  ), p = C && ie(e), l = p ? e.props?.ref : null, m = u(
     d(
-      () => [s.setReference, ...l ? [l] : []],
-      [s.setReference, l]
+      () => [n.setReference, ...l ? [l] : []],
+      [n.setReference, l]
     )
-  ), y = !R && !P && !!a, D = f ? oe(
+  ), j = !F && (s || !N) && !!r, w = p ? le(
     e,
-    c({
+    f({
       ...e.props,
-      ref: p,
-      className: g(
+      ref: m,
+      className: I(
         e.props.className,
-        r
+        a
       ) || void 0
     })
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ i(
     "span",
     {
-      ref: p,
-      ...c(),
-      className: r ?? "text-start",
+      ref: m,
+      ...f(),
+      className: a ?? "text-start",
       children: e
     }
   );
-  return /* @__PURE__ */ j(w, { children: [
-    D,
-    i && y && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
-      X,
+  return /* @__PURE__ */ U(G, { children: [
+    w,
+    c && j && /* @__PURE__ */ i(oe, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ i(
+      te,
       {
         context: o,
         modal: !1,
         initialFocus: -1,
         returnFocus: !1,
         order: ["reference", "content"],
-        children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ i(
           "div",
           {
-            ref: x,
+            ref: H,
             "data-placement": o.placement,
-            style: S,
-            ...V(),
-            className: g(
-              ie.interactiveTooltip,
-              re,
-              C,
-              E
+            style: b,
+            ...y(),
+            className: I(
+              me,
+              O,
+              P,
+              ge.interactiveTooltip
             ),
-            children: a
+            children: r
           }
         )
       }
@@ -102,5 +106,5 @@ const Re = ({
   ] });
 };
 export {
-  Re as InteractiveTooltip
+  Ee as InteractiveTooltip
 };

package/dist/components/New/InteractiveTooltip/constants.js

@@ -1,6 +1,6 @@
-const t = 8, a = 400, T = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+const t = 8, a = 400, e = "z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
 export {
   t as INTERACTIVE_TOOLTIP_GAP,
   a as INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY,
-  T as interactiveTooltipClassName
+  e as interactiveTooltipClassName
 };

package/dist/components/New/Label/Label.js

@@ -15,9 +15,9 @@ const N = ({
   "span",
   {
     className: s(
-      f.label,
       "flex items-center gap-0.5",
-      l
+      l,
+      f.label
     ),
     children: [
       /* @__PURE__ */ t(

package/dist/components/New/MarkdownEditor/MarkdownEditor.js

@@ -1,41 +1,43 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useMemo as r } from "react";
-import g from "@uiw/react-md-editor";
-import { EditorThemes as k } from "../../../types/editor.js";
-import { mergeClasses as w } from "../../../utils/merge-classes.js";
-import { getMarkdownFormattingCommands as x, getMarkdownExtraCommands as C } from "./constants.js";
-const b = ({
-  value: m,
-  onChange: t,
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as o } from "react";
+import k from "@uiw/react-md-editor";
+import { EditorThemes as w } from "../../../types/editor.js";
+import { mergeClasses as x } from "../../../utils/merge-classes.js";
+import { getMarkdownFormattingCommands as C, getMarkdownExtraCommands as h } from "./constants.js";
+const j = ({
+  value: t,
+  onChange: m,
   height: a = 300,
-  theme: e = k.light,
-  className: d,
-  placeholder: i,
-  defaultPreview: n = "edit",
-  id: s,
-  ariaLabel: l
+  theme: e = w.light,
+  className: i,
+  placeholder: d,
+  defaultPreview: s = "edit",
+  id: n,
+  ariaLabel: l,
+  showDragbar: p = !0
 }) => {
-  const p = r(() => x(), []), c = r(() => C(), []);
-  return /* @__PURE__ */ o(
+  const c = o(() => C(), []), f = o(() => h(), []);
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-color-mode": e,
-      className: w("dial-kit-markdown-editor", d),
-      children: /* @__PURE__ */ o(
-        g,
+      className: x("dial-kit-markdown-editor", i),
+      children: /* @__PURE__ */ r(
+        k,
         {
-          value: m,
-          onChange: (f) => t?.(f || ""),
+          value: t,
+          onChange: (g) => m?.(g || ""),
           height: a,
-          preview: n,
-          commands: p,
-          extraCommands: c,
-          textareaProps: { placeholder: i, id: s, "aria-label": l }
+          preview: s,
+          visibleDragbar: p,
+          commands: c,
+          extraCommands: f,
+          textareaProps: { placeholder: d, id: n, "aria-label": l }
         }
       )
     }
   );
 };
 export {
-  b as MarkdownEditor
+  j as MarkdownEditor
 };

package/dist/components/New/MenuItem/MenuItem.js

@@ -28,7 +28,6 @@ const O = ({
     u && "text-error",
     a && "text-control-disable-primary"
   ), p = e(
-    A.menuItem,
     j,
     // A row that opens a panel stays tinted while that panel is up, so the
     // trail back to it is visible once the pointer has moved into it.
@@ -37,7 +36,8 @@ const O = ({
     b && H,
     a && D,
     u && "text-error",
-    d
+    d,
+    A.menuItem
   ), N = /* @__PURE__ */ i(
     "button",
     {

package/dist/components/New/MenuItem/constants.js

@@ -8,7 +8,7 @@ const _ = /* @__PURE__ */ m(
   {
     size: e.SM,
     stroke: r,
-    className: `${I.menuItemCheck} shrink-0`,
+    className: `shrink-0 ${I.menuItemCheck}`,
     "aria-hidden": !0
   }
 );