@mattermost/compass-ui 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/components/icon-button/IconButton.js

@@ -1,70 +1,144 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { IconSlotContext as E } from "../icon/Icon.js";
-import K from "../spinner/Spinner.js";
-import { toKebab as P } from "../../utils/string.js";
-import t from "./IconButton.module.scss.js";
-const R = {
+import { jsxs as l, Fragment as V, jsx as a } from "react/jsx-runtime";
+import { forwardRef as W } from "react";
+import { IconSlotContext as z } from "../icon/Icon.js";
+import y from "../spinner/Spinner.js";
+import { renderAsChild as X } from "../../utils/slot.js";
+import { toKebab as Y } from "../../utils/string.js";
+import e from "./IconButton.module.scss.js";
+const B = {
   "x-small": "12",
   small: "16",
   medium: "20",
   large: "24"
-}, U = w(
-  function({
-    active: e = !1,
-    className: u = "",
-    count: a,
-    destructive: m = !1,
-    icon: b,
-    loading: n = !1,
-    padding: f = "default",
-    rounded: p = !1,
-    size: i = "medium",
-    style: c = "default",
-    toggled: s,
-    unreadBadge: v = !1,
-    disabled: C,
-    type: _ = "button",
-    "aria-label": h,
-    ...N
-  }, I) {
-    const x = t[`icon-button--size-${P(i)}`], B = f === "compact" ? t["icon-button--padding-compact"] : "", S = c === "inverted" ? t["icon-button--style-inverted"] : "", z = m ? t["icon-button--destructive"] : "", j = p ? t["icon-button--rounded"] : "", y = s ? t["icon-button--toggled"] : "", O = e ? t["icon-button--active"] : "", r = a !== void 0, g = r ? t["icon-button--has-count"] : "", T = [
-      t["icon-button"],
-      x,
-      B,
-      S,
-      z,
-      j,
-      y,
-      O,
-      g,
-      u
-    ].filter(Boolean).join(" "), l = R[i];
-    return /* @__PURE__ */ d(
-      "button",
-      {
-        ref: I,
-        className: T,
-        type: _,
-        disabled: C || n,
-        "aria-label": h,
-        "aria-pressed": s === void 0 ? void 0 : s,
-        "data-active": e ? "true" : void 0,
-        ...N,
-        children: [
-          /* @__PURE__ */ d("span", { className: t["icon-button__icon-slot"], "aria-hidden": !0, children: [
-            n ? /* @__PURE__ */ o(K, { size: l, inverted: c === "inverted" }) : /* @__PURE__ */ o(E.Provider, { value: { size: l }, children: b }),
-            v && !n && /* @__PURE__ */ o("span", { className: t["icon-button__unread-badge"] })
-          ] }),
-          r && /* @__PURE__ */ o("span", { className: t["icon-button__count"], children: a })
-        ]
-      }
-    );
+};
+function I({
+  className: f = "",
+  count: t,
+  destructive: o = !1,
+  padding: s = "default",
+  rounded: c = !1,
+  size: n = "medium",
+  style: r = "default",
+  active: u = !1,
+  toggled: i
+}) {
+  return [
+    e["icon-button"],
+    e[`icon-button--size-${Y(n)}`],
+    s === "compact" ? e["icon-button--padding-compact"] : "",
+    r === "inverted" ? e["icon-button--style-inverted"] : "",
+    o ? e["icon-button--destructive"] : "",
+    c ? e["icon-button--rounded"] : "",
+    i ? e["icon-button--toggled"] : "",
+    u ? e["icon-button--active"] : "",
+    t !== void 0 ? e["icon-button--has-count"] : "",
+    f
+  ].filter(Boolean).join(" ");
+}
+const ee = W(function(t, o) {
+  if (t.asChild) {
+    const {
+      active: g = !1,
+      className: A = "",
+      count: b,
+      destructive: E = !1,
+      icon: F,
+      loading: d = !1,
+      padding: K = "default",
+      rounded: U = !1,
+      size: N = "medium",
+      style: C = "default",
+      unreadBadge: Z = !1,
+      disabled: $,
+      children: k,
+      "aria-label": q,
+      asChild: te,
+      ...G
+    } = t, H = I({
+      className: A,
+      count: b,
+      destructive: E,
+      padding: K,
+      rounded: U,
+      size: N,
+      style: C,
+      active: g
+    }), _ = B[N], J = !!($ || d), M = b !== void 0, Q = /* @__PURE__ */ l(V, { children: [
+      /* @__PURE__ */ l("span", { className: e["icon-button__icon-slot"], "aria-hidden": !0, children: [
+        d ? /* @__PURE__ */ a(y, { size: _, inverted: C === "inverted" }) : /* @__PURE__ */ a(z.Provider, { value: { size: _ }, children: F }),
+        Z && !d && /* @__PURE__ */ a("span", { className: e["icon-button__unread-badge"] })
+      ] }),
+      M && /* @__PURE__ */ a("span", { className: e["icon-button__count"], children: b })
+    ] });
+    return X({
+      child: k,
+      props: {
+        ...G,
+        className: H,
+        "aria-label": q,
+        "data-active": g ? "true" : void 0,
+        ...d ? { "aria-busy": !0 } : null
+      },
+      ref: o,
+      content: Q,
+      disabled: J,
+      disabledClassName: e["icon-button--disabled"],
+      warnOnChildContent: !0
+    });
   }
-);
-U.displayName = "IconButton";
+  const {
+    active: s = !1,
+    className: c = "",
+    count: n,
+    destructive: r = !1,
+    icon: u,
+    loading: i = !1,
+    padding: S = "default",
+    rounded: x = !1,
+    size: v = "medium",
+    style: p = "default",
+    toggled: m,
+    unreadBadge: O = !1,
+    disabled: j,
+    type: w = "button",
+    "aria-label": D,
+    asChild: ae,
+    ...L
+  } = t, P = I({
+    className: c,
+    count: n,
+    destructive: r,
+    padding: S,
+    rounded: x,
+    size: v,
+    style: p,
+    active: s,
+    toggled: m
+  }), h = B[v], R = !!(j || i), T = n !== void 0;
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      ref: o,
+      className: P,
+      type: w,
+      disabled: R,
+      "aria-label": D,
+      "aria-pressed": m === void 0 ? void 0 : m,
+      "data-active": s ? "true" : void 0,
+      ...L,
+      children: [
+        /* @__PURE__ */ l("span", { className: e["icon-button__icon-slot"], "aria-hidden": !0, children: [
+          i ? /* @__PURE__ */ a(y, { size: h, inverted: p === "inverted" }) : /* @__PURE__ */ a(z.Provider, { value: { size: h }, children: u }),
+          O && !i && /* @__PURE__ */ a("span", { className: e["icon-button__unread-badge"] })
+        ] }),
+        T && /* @__PURE__ */ a("span", { className: e["icon-button__count"], children: n })
+      ]
+    }
+  );
+});
+ee.displayName = "IconButton";
 export {
-  R as ICON_BUTTON_ICON_SIZES,
-  U as default
+  B as ICON_BUTTON_ICON_SIZES,
+  ee as default
 };
 //# sourceMappingURL=IconButton.js.map

package/dist/components/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button. */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    {\n      active = false,\n      className = '',\n      count,\n      destructive = false,\n      icon,\n      loading = false,\n      padding = 'default',\n      rounded = false,\n      size = 'medium',\n      style = 'default',\n      toggled,\n      unreadBadge = false,\n      disabled,\n      type = 'button',\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) {\n    const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n    const paddingClass =\n      padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n    const styleClass =\n      style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n    const destructiveClass = destructive\n      ? styles['icon-button--destructive']\n      : '';\n    const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n    const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n    const activeClass = active ? styles['icon-button--active'] : '';\n    const hasCount = count !== undefined;\n    const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n    const rootClass = [\n      styles['icon-button'],\n      sizeClass,\n      paddingClass,\n      styleClass,\n      destructiveClass,\n      roundedClass,\n      toggledClass,\n      activeClass,\n      hasCountClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n    return (\n      <button\n        ref={ref}\n        className={rootClass}\n        type={type}\n        disabled={disabled || loading}\n        aria-label={ariaLabel}\n        aria-pressed={toggled === undefined ? undefined : toggled}\n        data-active={active ? 'true' : undefined}\n        {...rest}\n      >\n        <span className={styles['icon-button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          ) : (\n            <IconSlotContext.Provider value={{ size: spinnerSize }}>\n              {icon}\n            </IconSlotContext.Provider>\n          )}\n          {unreadBadge && !loading && (\n            <span className={styles['icon-button__unread-badge']} />\n          )}\n        </span>\n        {hasCount && (\n          <span className={styles['icon-button__count']}>{count}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","forwardRef","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","ref","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":";;;;;;AA+CO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAQMC,IAAaC;AAAA,EACjB,SACE;AAAA,IACE,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAYC,EAAO,qBAAqBC,EAAQX,CAAI,CAAC,EAAE,GACvDY,IACJd,MAAY,YAAYY,EAAO,8BAA8B,IAAI,IAC7DG,IACJZ,MAAU,aAAaS,EAAO,6BAA6B,IAAI,IAC3DI,IAAmBnB,IACrBe,EAAO,0BAA0B,IACjC,IACEK,IAAehB,IAAUW,EAAO,sBAAsB,IAAI,IAC1DM,IAAed,IAAUQ,EAAO,sBAAsB,IAAI,IAC1DO,IAAczB,IAASkB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWxB,MAAU,QACrByB,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,MAChBV,EAAO,aAAa;AAAA,MACpBD;AAAA,MACAG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAE;AAAA,MACA1B;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL4B,IAAchC,EAAuBW,CAAI;AAE/C,WACE,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAd;AAAA,QACA,WAAWY;AAAA,QACX,MAAAf;AAAA,QACA,UAAUD,KAAYP;AAAA,QACtB,cAAYS;AAAA,QACZ,gBAAcJ,MAAY,SAAY,SAAYA;AAAA,QAClD,eAAaV,IAAS,SAAS;AAAA,QAC9B,GAAGe;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAe,EAAC,UAAK,WAAWZ,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,YAAAb,sBACE0B,GAAA,EAAQ,MAAMF,GAAa,UAAUpB,MAAU,YAAY,IAE5D,gBAAAuB,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMJ,EAAA,GACtC,UAAAzB,GACH;AAAA,YAEDO,KAAe,CAACN,KACf,gBAAA2B,EAAC,UAAK,WAAWd,EAAO,2BAA2B,EAAA,CAAG;AAAA,UAAA,GAE1D;AAAA,UACCQ,KACC,gBAAAM,EAAC,QAAA,EAAK,WAAWd,EAAO,oBAAoB,GAAI,UAAAhB,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAI9D;AACF;AAEAJ,EAAW,cAAc;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\ninterface IconButtonOwnProps {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). Replaces the HTML `style` attribute. */\n  style?: IconButtonStyle;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface IconButtonProps\n  extends\n    IconButtonOwnProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n  /**\n   * When true, merges IconButton props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /**\n   * When true, shows toggled/selected state. Figma: Toggled = On. When omitted,\n   * the control is not a toggle. Only applies to the native `<button>` (maps to\n   * `aria-pressed`); not available with `asChild`.\n   */\n  toggled?: boolean;\n}\n\nexport interface IconButtonAsChildProps\n  extends\n    IconButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color' | 'style'> {\n  /**\n   * Merges IconButton props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` or `toggled` — they are not available on links.\n   * Pass an empty child; IconButton supplies the icon anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the IconButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n  /**\n   * Accessible name for the icon-only link. Required with `asChild`. An\n   * `aria-label` on the child also satisfies this (child props win).\n   */\n  'aria-label': string;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\ntype IconButtonComponent = {\n  (\n    props: IconButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: IconButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  className = '',\n  count,\n  destructive = false,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  active = false,\n  toggled,\n}: {\n  className?: string;\n  count?: number;\n  destructive?: boolean;\n  padding?: IconButtonPadding;\n  rounded?: boolean;\n  size?: IconButtonSize;\n  style?: IconButtonStyle;\n  active?: boolean;\n  toggled?: boolean;\n}): string {\n  return [\n    styles['icon-button'],\n    styles[`icon-button--size-${toKebab(size)}`],\n    padding === 'compact' ? styles['icon-button--padding-compact'] : '',\n    style === 'inverted' ? styles['icon-button--style-inverted'] : '',\n    destructive ? styles['icon-button--destructive'] : '',\n    rounded ? styles['icon-button--rounded'] : '',\n    toggled ? styles['icon-button--toggled'] : '',\n    active ? styles['icon-button--active'] : '',\n    count !== undefined ? styles['icon-button--has-count'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * icon control with Icon Button styling (no nested `<button>`).\n */\nconst IconButton = forwardRef(function IconButton(\n  props: IconButtonProps | IconButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      active = false,\n      className = '',\n      count,\n      destructive = false,\n      icon,\n      loading = false,\n      padding = 'default',\n      rounded = false,\n      size = 'medium',\n      style = 'default',\n      unreadBadge = false,\n      disabled,\n      children,\n      'aria-label': ariaLabel,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      className,\n      count,\n      destructive,\n      padding,\n      rounded,\n      size,\n      style,\n      active,\n    });\n    const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n    const isDisabled = Boolean(disabled || loading);\n    const hasCount = count !== undefined;\n\n    const anatomy = (\n      <>\n        <span className={styles['icon-button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          ) : (\n            <IconSlotContext.Provider value={{ size: spinnerSize }}>\n              {icon}\n            </IconSlotContext.Provider>\n          )}\n          {unreadBadge && !loading && (\n            <span className={styles['icon-button__unread-badge']} />\n          )}\n        </span>\n        {hasCount && (\n          <span className={styles['icon-button__count']}>{count}</span>\n        )}\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n        'aria-label': ariaLabel,\n        'data-active': active ? 'true' : undefined,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: anatomy,\n      disabled: isDisabled,\n      disabledClassName: styles['icon-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    active = false,\n    className = '',\n    count,\n    destructive = false,\n    icon,\n    loading = false,\n    padding = 'default',\n    rounded = false,\n    size = 'medium',\n    style = 'default',\n    toggled,\n    unreadBadge = false,\n    disabled,\n    type = 'button',\n    'aria-label': ariaLabel,\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    className,\n    count,\n    destructive,\n    padding,\n    rounded,\n    size,\n    style,\n    active,\n    toggled,\n  });\n  const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n  const isDisabled = Boolean(disabled || loading);\n  const hasCount = count !== undefined;\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      aria-label={ariaLabel}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {loading ? (\n          <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n        ) : (\n          <IconSlotContext.Provider value={{ size: spinnerSize }}>\n            {icon}\n          </IconSlotContext.Provider>\n        )}\n        {unreadBadge && !loading && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}) as IconButtonComponent;\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","buildRootClass","className","count","destructive","padding","rounded","size","style","active","toggled","styles","toKebab","IconButton","forwardRef","props","ref","icon","loading","unreadBadge","disabled","children","ariaLabel","asChild","rest","rootClass","spinnerSize","isDisabled","hasCount","anatomy","jsxs","Fragment","jsx","Spinner","IconSlotContext","renderAsChild","type"],"mappings":"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"}

package/dist/components/icon-button/IconButton.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_mytxt_2","icon-button--active":"_icon-button--active_mytxt_25","icon-button--toggled":"_icon-button--toggled_mytxt_25","icon-button__icon-slot":"_icon-button__icon-slot_mytxt_33","icon-button__unread-badge":"_icon-button__unread-badge_mytxt_40","icon-button__count":"_icon-button__count_mytxt_51","icon-button--size-x-small":"_icon-button--size-x-small_mytxt_55","icon-button--padding-compact":"_icon-button--padding-compact_mytxt_64","icon-button--size-small":"_icon-button--size-small_mytxt_69","icon-button--size-medium":"_icon-button--size-medium_mytxt_83","icon-button--size-large":"_icon-button--size-large_mytxt_97","icon-button--has-count":"_icon-button--has-count_mytxt_111","icon-button--rounded":"_icon-button--rounded_mytxt_115","icon-button--style-inverted":"_icon-button--style-inverted_mytxt_145","icon-button--destructive":"_icon-button--destructive_mytxt_187"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_13ryy_2","icon-button--disabled":"_icon-button--disabled_13ryy_27","icon-button--active":"_icon-button--active_13ryy_31","icon-button--toggled":"_icon-button--toggled_13ryy_31","icon-button__icon-slot":"_icon-button__icon-slot_13ryy_41","icon-button__unread-badge":"_icon-button__unread-badge_13ryy_48","icon-button__count":"_icon-button__count_13ryy_59","icon-button--size-x-small":"_icon-button--size-x-small_13ryy_63","icon-button--padding-compact":"_icon-button--padding-compact_13ryy_72","icon-button--size-small":"_icon-button--size-small_13ryy_77","icon-button--size-medium":"_icon-button--size-medium_13ryy_91","icon-button--size-large":"_icon-button--size-large_13ryy_105","icon-button--has-count":"_icon-button--has-count_13ryy_119","icon-button--rounded":"_icon-button--rounded_13ryy_123","icon-button--style-inverted":"_icon-button--style-inverted_13ryy_159","icon-button--destructive":"_icon-button--destructive_13ryy_210"};exports.default=t;
 //# sourceMappingURL=IconButton.module.scss.cjs.map

package/dist/components/icon-button/IconButton.module.scss.js

@@ -1,19 +1,20 @@
 import './IconButton.css';const t = {
-  "icon-button": "_icon-button_mytxt_2",
-  "icon-button--active": "_icon-button--active_mytxt_25",
-  "icon-button--toggled": "_icon-button--toggled_mytxt_25",
-  "icon-button__icon-slot": "_icon-button__icon-slot_mytxt_33",
-  "icon-button__unread-badge": "_icon-button__unread-badge_mytxt_40",
-  "icon-button__count": "_icon-button__count_mytxt_51",
-  "icon-button--size-x-small": "_icon-button--size-x-small_mytxt_55",
-  "icon-button--padding-compact": "_icon-button--padding-compact_mytxt_64",
-  "icon-button--size-small": "_icon-button--size-small_mytxt_69",
-  "icon-button--size-medium": "_icon-button--size-medium_mytxt_83",
-  "icon-button--size-large": "_icon-button--size-large_mytxt_97",
-  "icon-button--has-count": "_icon-button--has-count_mytxt_111",
-  "icon-button--rounded": "_icon-button--rounded_mytxt_115",
-  "icon-button--style-inverted": "_icon-button--style-inverted_mytxt_145",
-  "icon-button--destructive": "_icon-button--destructive_mytxt_187"
+  "icon-button": "_icon-button_13ryy_2",
+  "icon-button--disabled": "_icon-button--disabled_13ryy_27",
+  "icon-button--active": "_icon-button--active_13ryy_31",
+  "icon-button--toggled": "_icon-button--toggled_13ryy_31",
+  "icon-button__icon-slot": "_icon-button__icon-slot_13ryy_41",
+  "icon-button__unread-badge": "_icon-button__unread-badge_13ryy_48",
+  "icon-button__count": "_icon-button__count_13ryy_59",
+  "icon-button--size-x-small": "_icon-button--size-x-small_13ryy_63",
+  "icon-button--padding-compact": "_icon-button--padding-compact_13ryy_72",
+  "icon-button--size-small": "_icon-button--size-small_13ryy_77",
+  "icon-button--size-medium": "_icon-button--size-medium_13ryy_91",
+  "icon-button--size-large": "_icon-button--size-large_13ryy_105",
+  "icon-button--has-count": "_icon-button--has-count_13ryy_119",
+  "icon-button--rounded": "_icon-button--rounded_13ryy_123",
+  "icon-button--style-inverted": "_icon-button--style-inverted_13ryy_159",
+  "icon-button--destructive": "_icon-button--destructive_13ryy_210"
 };
 export {
   t as default

package/dist/components/icon-button/IconButton.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"IconButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/icon-button/index.d.ts

@@ -1,3 +1,3 @@
 export { default as IconButton } from './IconButton';
-export { ICON_BUTTON_ICON_SIZES, type IconButtonProps, type IconButtonSize, type IconButtonStyle, type IconButtonPadding, } from './IconButton';
+export { ICON_BUTTON_ICON_SIZES, type IconButtonProps, type IconButtonAsChildProps, type IconButtonSize, type IconButtonStyle, type IconButtonPadding, } from './IconButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/icon-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EACL,sBAAsB,EACtB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EACL,sBAAsB,EACtB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAC"}

package/dist/components/menu-item/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbA0CMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbAkFMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}

package/dist/components/menu-item/MenuItem.css

@@ -1 +1 @@
-._menu-item_1nhr4_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1nhr4_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1nhr4_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1nhr4_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1nhr4_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:disabled{cursor:not-allowed}._menu-item_1nhr4_2:disabled ._menu-item__content_1nhr4_44{opacity:.4}._menu-item__content_1nhr4_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1nhr4_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1nhr4_30,._menu-item__trailing-visual_1nhr4_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1nhr4_65{color:var(--button-bg)}._menu-item__middle_1nhr4_68{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1nhr4_79{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1nhr4_87{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}._menu-item__secondary-label-inline_1nhr4_94{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1nhr4_102{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1nhr4_109{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1nhr4_120{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1nhr4_129{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1nhr4_135,._menu-item--destructive_1nhr4_135 ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135 ._menu-item__trailing-visual_1nhr4_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1nhr4_135:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__trailing-visual_1nhr4_31{color:inherit}
+._menu-item_1ilsv_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1ilsv_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1ilsv_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1ilsv_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1ilsv_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:disabled{cursor:not-allowed}._menu-item_1ilsv_2:disabled ._menu-item__content_1ilsv_44{opacity:.4}._menu-item__content_1ilsv_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1ilsv_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1ilsv_30,._menu-item__trailing-visual_1ilsv_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1ilsv_65{color:var(--button-bg)}._menu-item__middle_1ilsv_68{align-self:stretch;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1ilsv_80{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1ilsv_88{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}._menu-item__secondary-label-inline_1ilsv_97{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1ilsv_105{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1ilsv_112{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1ilsv_123{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1ilsv_132{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1ilsv_139,._menu-item--destructive_1ilsv_139 ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139 ._menu-item__trailing-visual_1ilsv_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1ilsv_139:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__trailing-visual_1ilsv_31{color:inherit}

package/dist/components/menu-item/MenuItem.d.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { DataAttributes } from '../../utils/props';
 export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     label: ReactNode;
@@ -27,6 +28,25 @@ export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Highlight row (e.g. submenu parent while child menu is open). */
     active?: boolean;
 }
+/**
+ * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and
+ * selection state, keyboard / pointer handling, and the values it reads from the
+ * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They
+ * can't be overridden through `menuItemProps`. This is the full set; each host
+ * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses
+ * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:
+ * the host keeps focus on its input / trigger, and a row that grabs focus on
+ * mount would take it away.
+ */
+export type MenuItemOwnedProps = 'id' | 'role' | 'aria-selected' | 'autoFocus' | 'label' | 'secondaryLabel' | 'leadingVisual' | 'leadingElement' | 'trailingElement' | 'disabled' | 'active' | 'children' | 'onClick' | 'onMouseDown' | 'onMouseEnter' | 'onPointerUp';
+/**
+ * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,
+ * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so
+ * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.
+ * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);
+ * a host narrows it so the handlers it doesn't supply can still be passed.
+ */
+export type MenuItemPassthroughProps<Owned extends keyof MenuItemProps = MenuItemOwnedProps> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;
 /**
  * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,
  * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.

package/dist/components/menu-item/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAC1B,IAAI,GACJ,MAAM,GACN,eAAe,GACf,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,SAAS,GACT,aAAa,GACb,cAAc,GACd,aAAa,CAAC;AAElB;;;;;;GAMG;AACH,MAAM,MAAM,wBAAwB,CAClC,KAAK,SAAS,MAAM,aAAa,GAAG,kBAAkB,IACpD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,GAAG,cAAc,CAAC;AAEzD;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/dist/components/menu-item/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}

package/dist/components/menu-item/MenuItem.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1nhr4_2","menu-item--active":"_menu-item--active_1nhr4_27","menu-item__leading-visual":"_menu-item__leading-visual_1nhr4_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1nhr4_31","menu-item__content":"_menu-item__content_1nhr4_44","menu-item__left":"_menu-item__left_1nhr4_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1nhr4_65","menu-item__middle":"_menu-item__middle_1nhr4_68","menu-item__top-row":"_menu-item__top-row_1nhr4_79","menu-item__label":"_menu-item__label_1nhr4_87","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1nhr4_94","menu-item__bottom-row":"_menu-item__bottom-row_1nhr4_102","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1nhr4_109","menu-item__custom-status":"_menu-item__custom-status_1nhr4_120","menu-item__right":"_menu-item__right_1nhr4_129","menu-item--destructive":"_menu-item--destructive_1nhr4_135"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1ilsv_2","menu-item--active":"_menu-item--active_1ilsv_27","menu-item__leading-visual":"_menu-item__leading-visual_1ilsv_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1ilsv_31","menu-item__content":"_menu-item__content_1ilsv_44","menu-item__left":"_menu-item__left_1ilsv_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1ilsv_65","menu-item__middle":"_menu-item__middle_1ilsv_68","menu-item__top-row":"_menu-item__top-row_1ilsv_80","menu-item__label":"_menu-item__label_1ilsv_88","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1ilsv_97","menu-item__bottom-row":"_menu-item__bottom-row_1ilsv_105","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1ilsv_112","menu-item__custom-status":"_menu-item__custom-status_1ilsv_123","menu-item__right":"_menu-item__right_1ilsv_132","menu-item--destructive":"_menu-item--destructive_1ilsv_139"};exports.default=e;
 //# sourceMappingURL=MenuItem.module.scss.cjs.map

package/dist/components/menu-item/MenuItem.module.scss.js

@@ -1,20 +1,20 @@
 import './MenuItem.css';const _ = {
-  "menu-item": "_menu-item_1nhr4_2",
-  "menu-item--active": "_menu-item--active_1nhr4_27",
-  "menu-item__leading-visual": "_menu-item__leading-visual_1nhr4_30",
-  "menu-item__trailing-visual": "_menu-item__trailing-visual_1nhr4_31",
-  "menu-item__content": "_menu-item__content_1nhr4_44",
-  "menu-item__left": "_menu-item__left_1nhr4_53",
-  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1nhr4_65",
-  "menu-item__middle": "_menu-item__middle_1nhr4_68",
-  "menu-item__top-row": "_menu-item__top-row_1nhr4_79",
-  "menu-item__label": "_menu-item__label_1nhr4_87",
-  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1nhr4_94",
-  "menu-item__bottom-row": "_menu-item__bottom-row_1nhr4_102",
-  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1nhr4_109",
-  "menu-item__custom-status": "_menu-item__custom-status_1nhr4_120",
-  "menu-item__right": "_menu-item__right_1nhr4_129",
-  "menu-item--destructive": "_menu-item--destructive_1nhr4_135"
+  "menu-item": "_menu-item_1ilsv_2",
+  "menu-item--active": "_menu-item--active_1ilsv_27",
+  "menu-item__leading-visual": "_menu-item__leading-visual_1ilsv_30",
+  "menu-item__trailing-visual": "_menu-item__trailing-visual_1ilsv_31",
+  "menu-item__content": "_menu-item__content_1ilsv_44",
+  "menu-item__left": "_menu-item__left_1ilsv_53",
+  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1ilsv_65",
+  "menu-item__middle": "_menu-item__middle_1ilsv_68",
+  "menu-item__top-row": "_menu-item__top-row_1ilsv_80",
+  "menu-item__label": "_menu-item__label_1ilsv_88",
+  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1ilsv_97",
+  "menu-item__bottom-row": "_menu-item__bottom-row_1ilsv_105",
+  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1ilsv_112",
+  "menu-item__custom-status": "_menu-item__custom-status_1ilsv_123",
+  "menu-item__right": "_menu-item__right_1ilsv_132",
+  "menu-item--destructive": "_menu-item--destructive_1ilsv_139"
 };
 export {
   _ as default

package/dist/components/menu-item/index.d.ts

@@ -1,3 +1,3 @@
 export { default as MenuItem } from './MenuItem';
-export type { MenuItemProps } from './MenuItem';
+export type { MenuItemProps, MenuItemOwnedProps, MenuItemPassthroughProps, } from './MenuItem';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/menu-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,YAAY,CAAC"}

package/dist/components/radio/Radio.css

@@ -1 +1 @@
-._radio_1hdqa_2{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_1hdqa_2:has(._radio__input_1hdqa_14:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_1hdqa_14{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_1hdqa_14:focus-visible{outline:none}._radio__circle_1hdqa_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_1hdqa_14:focus-visible~._radio__circle_1hdqa_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover ._radio__circle_1hdqa_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_1hdqa_14:disabled~._radio__circle_1hdqa_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--button-bg)}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{border-color:var(--button-bg)}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--button-bg)}._radio__input_1hdqa_14:focus-visible:checked~._radio__circle_1hdqa_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_1hdqa_14:disabled:checked~._radio__circle_1hdqa_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_1hdqa_14:disabled:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_1hdqa_80 ._radio__circle_1hdqa_33{border-color:var(--error-text, var(--color-danger))}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:not(:checked)~._radio__circle_1hdqa_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--error-text, var(--color-danger))}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{border-color:var(--error-text, var(--color-danger))}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:focus-visible~._radio__circle_1hdqa_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:focus-visible:checked~._radio__circle_1hdqa_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_1hdqa_59{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{transform:scale(1)}._radio__label_1hdqa_116{line-height:1}._radio--size-small_1hdqa_119{gap:var(--spacing-xs)}._radio--size-small_1hdqa_119 ._radio__input_1hdqa_14,._radio--size-small_1hdqa_119 ._radio__circle_1hdqa_33{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._radio--size-small_1hdqa_119 ._radio__dot_1hdqa_59{width:6px;height:6px}._radio--size-small_1hdqa_119 ._radio__label_1hdqa_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_1hdqa_140{gap:var(--spacing-xs)}._radio--size-medium_1hdqa_140 ._radio__input_1hdqa_14,._radio--size-medium_1hdqa_140 ._radio__circle_1hdqa_33{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._radio--size-medium_1hdqa_140 ._radio__dot_1hdqa_59{width:8px;height:8px}._radio--size-medium_1hdqa_140 ._radio__label_1hdqa_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_1hdqa_161{gap:var(--spacing-s)}._radio--size-large_1hdqa_161 ._radio__input_1hdqa_14,._radio--size-large_1hdqa_161 ._radio__circle_1hdqa_33{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._radio--size-large_1hdqa_161 ._radio__dot_1hdqa_59{width:10px;height:10px}._radio--size-large_1hdqa_161 ._radio__label_1hdqa_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}
+._radio_h0rbb_2{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_h0rbb_2._radio_h0rbb_2{margin:0}._radio_h0rbb_2:has(._radio__input_h0rbb_17:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_h0rbb_17{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_h0rbb_17:focus-visible{outline:none}._radio__circle_h0rbb_36{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_h0rbb_17:focus-visible~._radio__circle_h0rbb_36{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover ._radio__circle_h0rbb_36{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_h0rbb_17:disabled~._radio__circle_h0rbb_36{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--button-bg)}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{border-color:var(--button-bg)}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--button-bg)}._radio__input_h0rbb_17:focus-visible:checked~._radio__circle_h0rbb_36{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_h0rbb_17:disabled:checked~._radio__circle_h0rbb_36{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_h0rbb_17:disabled:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_h0rbb_83 ._radio__circle_h0rbb_36{border-color:var(--error-text, var(--color-danger))}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:not(:checked)~._radio__circle_h0rbb_36{border-color:var(--error-text, var(--color-danger))}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--error-text, var(--color-danger))}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36{border-color:var(--error-text, var(--color-danger))}._radio_h0rbb_2:has(._radio__input_h0rbb_17:not(:disabled)):hover._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{background-color:var(--error-text, var(--color-danger))}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:focus-visible~._radio__circle_h0rbb_36{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_h0rbb_83 ._radio__input_h0rbb_17:focus-visible:checked~._radio__circle_h0rbb_36{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_h0rbb_62{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_h0rbb_17:checked~._radio__circle_h0rbb_36 ._radio__dot_h0rbb_62{transform:scale(1)}._radio__label_h0rbb_119{line-height:1}._radio--size-small_h0rbb_122{gap:var(--spacing-xs)}._radio--size-small_h0rbb_122 ._radio__input_h0rbb_17,._radio--size-small_h0rbb_122 ._radio__circle_h0rbb_36{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._radio--size-small_h0rbb_122 ._radio__dot_h0rbb_62{width:6px;height:6px}._radio--size-small_h0rbb_122 ._radio__label_h0rbb_119{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_h0rbb_143{gap:var(--spacing-xs)}._radio--size-medium_h0rbb_143 ._radio__input_h0rbb_17,._radio--size-medium_h0rbb_143 ._radio__circle_h0rbb_36{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._radio--size-medium_h0rbb_143 ._radio__dot_h0rbb_62{width:8px;height:8px}._radio--size-medium_h0rbb_143 ._radio__label_h0rbb_119{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_h0rbb_164{gap:var(--spacing-s)}._radio--size-large_h0rbb_164 ._radio__input_h0rbb_17,._radio--size-large_h0rbb_164 ._radio__circle_h0rbb_36{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._radio--size-large_h0rbb_164 ._radio__dot_h0rbb_62{width:10px;height:10px}._radio--size-large_h0rbb_164 ._radio__label_h0rbb_119{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/radio/Radio.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_1hdqa_2",i="_radio__input_1hdqa_14",a="_radio__circle_1hdqa_33",d="_radio__dot_1hdqa_59",o="_radio__label_1hdqa_116",r={radio:_,radio__input:i,radio__circle:a,radio__dot:d,"radio--invalid":"_radio--invalid_1hdqa_80",radio__label:o,"radio--size-small":"_radio--size-small_1hdqa_119","radio--size-medium":"_radio--size-medium_1hdqa_140","radio--size-large":"_radio--size-large_1hdqa_161"};exports.default=r;exports.radio=_;exports.radio__circle=a;exports.radio__dot=d;exports.radio__input=i;exports.radio__label=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_h0rbb_2",i="_radio__input_h0rbb_17",r="_radio__circle_h0rbb_36",o="_radio__dot_h0rbb_62",a="_radio__label_h0rbb_119",d={radio:_,radio__input:i,radio__circle:r,radio__dot:o,"radio--invalid":"_radio--invalid_h0rbb_83",radio__label:a,"radio--size-small":"_radio--size-small_h0rbb_122","radio--size-medium":"_radio--size-medium_h0rbb_143","radio--size-large":"_radio--size-large_h0rbb_164"};exports.default=d;exports.radio=_;exports.radio__circle=r;exports.radio__dot=o;exports.radio__input=i;exports.radio__label=a;
 //# sourceMappingURL=Radio.module.scss.cjs.map