@mattermost/compass-ui 0.1.0-alpha.6 → 0.1.0-alpha.8

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

@@ -1,5 +1,6 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { toKebab as z } from "../../utils/string.js";
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import T from "../spinner/Spinner.js";
+import { toKebab as E } from "../../utils/string.js";
 import t from "./IconButton.module.scss.js";
 const K = {
   "x-small": "12",
@@ -7,57 +8,58 @@ const K = {
   medium: "20",
   large: "24"
 };
-function U({
-  active: s = !1,
-  className: c = "",
-  count: n,
-  destructive: l = !1,
-  icon: u,
-  padding: d = "default",
-  rounded: r = !1,
-  size: b = "medium",
-  style: m = "default",
+function q({
+  active: a = !1,
+  className: d = "",
+  count: e,
+  destructive: u = !1,
+  icon: b,
+  loading: n = !1,
+  padding: m = "default",
+  rounded: p = !1,
+  size: i = "medium",
+  style: c = "default",
   toggled: o,
-  unreadBadge: C = !1,
-  disabled: f,
-  type: p = "button",
-  "aria-label": v,
-  ..._
+  unreadBadge: f = !1,
+  disabled: C,
+  type: v = "button",
+  "aria-label": _,
+  ...h
 }) {
-  const h = t[`icon-button--size-${z(b)}`], N = d === "compact" ? t["icon-button--padding-compact"] : "", g = m === "inverted" ? t["icon-button--style-inverted"] : "", x = l ? t["icon-button--destructive"] : "", I = r ? t["icon-button--rounded"] : "", j = o ? t["icon-button--toggled"] : "", y = s ? t["icon-button--active"] : "", a = n !== void 0, B = a ? t["icon-button--has-count"] : "", O = [
+  const N = t[`icon-button--size-${E(i)}`], x = m === "compact" ? t["icon-button--padding-compact"] : "", I = c === "inverted" ? t["icon-button--style-inverted"] : "", S = u ? t["icon-button--destructive"] : "", j = p ? t["icon-button--rounded"] : "", z = o ? t["icon-button--toggled"] : "", B = a ? t["icon-button--active"] : "", l = e !== void 0, O = l ? t["icon-button--has-count"] : "", g = [
     t["icon-button"],
-    h,
     N,
-    g,
     x,
     I,
+    S,
     j,
-    y,
+    z,
     B,
-    c
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e(
+    O,
+    d
+  ].filter(Boolean).join(" "), y = K[i];
+  return /* @__PURE__ */ r(
     "button",
     {
-      className: O,
-      type: p,
-      disabled: f,
-      "aria-label": v,
+      className: g,
+      type: v,
+      disabled: C || n,
+      "aria-label": _,
       "aria-pressed": o === void 0 ? void 0 : o,
-      "data-active": s ? "true" : void 0,
-      ..._,
+      "data-active": a ? "true" : void 0,
+      ...h,
       children: [
-        /* @__PURE__ */ e("span", { className: t["icon-button__icon-slot"], "aria-hidden": !0, children: [
-          u,
-          C && /* @__PURE__ */ i("span", { className: t["icon-button__unread-badge"] })
+        /* @__PURE__ */ r("span", { className: t["icon-button__icon-slot"], "aria-hidden": !0, children: [
+          n ? /* @__PURE__ */ s(T, { size: y, inverted: c === "inverted" }) : b,
+          f && !n && /* @__PURE__ */ s("span", { className: t["icon-button__unread-badge"] })
         ] }),
-        a && /* @__PURE__ */ i("span", { className: t["icon-button__count"], children: n })
+        l && /* @__PURE__ */ s("span", { className: t["icon-button__count"], children: e })
       ]
     }
   );
 }
 export {
   K as ICON_BUTTON_ICON_SIZES,
-  U as default
+  q 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 type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\n  icon: ReactNode;\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/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\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 */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\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}: IconButtonProps) {\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  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled}\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        {icon}\n        {unreadBadge && (\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"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","jsxs","jsx"],"mappings":";;;AAwCO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAQA,SAAwBC,EAAW;AAAA,EACjC,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAYC,EAAO,qBAAqBC,EAAQV,CAAI,CAAC,EAAE,GACvDW,IACJb,MAAY,YAAYW,EAAO,8BAA8B,IAAI,IAC7DG,IACJX,MAAU,aAAaQ,EAAO,6BAA6B,IAAI,IAC3DI,IAAmBjB,IACrBa,EAAO,0BAA0B,IACjC,IACEK,IAAef,IAAUU,EAAO,sBAAsB,IAAI,IAC1DM,IAAeb,IAAUO,EAAO,sBAAsB,IAAI,IAC1DO,IAAcvB,IAASgB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWtB,MAAU,QACrBuB,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,IAChBV,EAAO,aAAa;AAAA,IACpBD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAE;AAAA,IACAxB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,MACX,MAAAd;AAAA,MACA,UAAAD;AAAA,MACA,cAAYE;AAAA,MACZ,gBAAcJ,MAAY,SAAY,SAAYA;AAAA,MAClD,eAAaT,IAAS,SAAS;AAAA,MAC9B,GAAGc;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWX,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,UAAAZ;AAAA,UACAM,KACC,gBAAAkB,EAAC,QAAA,EAAK,WAAWZ,EAAO,2BAA2B,EAAA,CAAG;AAAA,QAAA,GAE1D;AAAA,QACCQ,KACC,gBAAAI,EAAC,QAAA,EAAK,WAAWZ,EAAO,oBAAoB,GAAI,UAAAd,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9D;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\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/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\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 */\nexport default function IconButton({\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}: IconButtonProps) {\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      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          : icon}\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"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx"],"mappings":";;;;AA2CO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAQA,SAAwBC,EAAW;AAAA,EACjC,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAYC,EAAO,qBAAqBC,EAAQV,CAAI,CAAC,EAAE,GACvDW,IACJb,MAAY,YAAYW,EAAO,8BAA8B,IAAI,IAC7DG,IACJX,MAAU,aAAaQ,EAAO,6BAA6B,IAAI,IAC3DI,IAAmBlB,IACrBc,EAAO,0BAA0B,IACjC,IACEK,IAAef,IAAUU,EAAO,sBAAsB,IAAI,IAC1DM,IAAeb,IAAUO,EAAO,sBAAsB,IAAI,IAC1DO,IAAcxB,IAASiB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWvB,MAAU,QACrBwB,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,IAChBV,EAAO,aAAa;AAAA,IACpBD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAE;AAAA,IACAzB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL2B,IAAc9B,EAAuBU,CAAI;AAE/C,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAAd;AAAA,MACA,UAAUD,KAAYP;AAAA,MACtB,cAAYS;AAAA,MACZ,gBAAcJ,MAAY,SAAY,SAAYA;AAAA,MAClD,eAAaV,IAAS,SAAS;AAAA,MAC9B,GAAGe;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAc,EAAC,UAAK,WAAWZ,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,UAAAZ,sBACIyB,GAAA,EAAQ,MAAMF,GAAa,UAAUnB,MAAU,YAAY,IAC5DL;AAAA,UACHO,KAAe,CAACN,KACf,gBAAA0B,EAAC,UAAK,WAAWd,EAAO,2BAA2B,EAAA,CAAG;AAAA,QAAA,GAE1D;AAAA,QACCQ,KACC,gBAAAM,EAAC,QAAA,EAAK,WAAWd,EAAO,oBAAoB,GAAI,UAAAf,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9D;"}

package/dist/components/menu-group-heading/MenuGroupHeading.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("./MenuGroupHeading.module.scss.cjs");function i({label:n,className:r="",...a}){return e.jsx("div",{className:[u.default["menu-group-heading"],r].filter(Boolean).join(" "),...a,children:e.jsx("span",{className:u.default["menu-group-heading__label"],children:n})})}exports.default=i;
+//# sourceMappingURL=MenuGroupHeading.cjs.map

package/dist/components/menu-group-heading/MenuGroupHeading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeading.cjs","sources":["../../../src/components/menu-group-heading/MenuGroupHeading.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './MenuGroupHeading.module.scss';\n\nexport interface MenuGroupHeadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** The section label text. Rendered in all-caps. */\n  label: string;\n}\n\n/**\n * Menu Group Heading is an optional all-caps label that titles a grouped\n * section of Menu Items inside a dropdown or context menu.\n */\nexport default function MenuGroupHeading({\n  label,\n  className = '',\n  ...rest\n}: MenuGroupHeadingProps) {\n  return (\n    <div\n      className={[styles['menu-group-heading'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      <span className={styles['menu-group-heading__label']}>{label}</span>\n    </div>\n  );\n}\n"],"names":["MenuGroupHeading","label","className","rest","jsx","styles"],"mappings":"iMAYA,SAAwBA,EAAiB,CACvC,MAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEC,EAAAA,IAAC,MAAA,CACC,UAAW,CAACC,UAAO,oBAAoB,EAAGH,CAAS,EAChD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEJ,eAAC,OAAA,CAAK,UAAWE,EAAAA,QAAO,2BAA2B,EAAI,SAAAJ,CAAA,CAAM,CAAA,CAAA,CAGnE"}

package/dist/components/menu-group-heading/MenuGroupHeading.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+export interface MenuGroupHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    /** The section label text. Rendered in all-caps. */
+    label: string;
+}
+/**
+ * Menu Group Heading is an optional all-caps label that titles a grouped
+ * section of Menu Items inside a dropdown or context menu.
+ */
+export default function MenuGroupHeading({ label, className, ...rest }: MenuGroupHeadingProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuGroupHeading.d.ts.map

package/dist/components/menu-group-heading/MenuGroupHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeading.d.ts","sourceRoot":"","sources":["../../../src/components/menu-group-heading/MenuGroupHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAWvB"}

package/dist/components/menu-group-heading/MenuGroupHeading.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "./MenuGroupHeading.module.scss.js";
+function s({
+  label: r,
+  className: a = "",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: [n["menu-group-heading"], a].filter(Boolean).join(" "),
+      ...o,
+      children: /* @__PURE__ */ e("span", { className: n["menu-group-heading__label"], children: r })
+    }
+  );
+}
+export {
+  s as default
+};
+//# sourceMappingURL=MenuGroupHeading.js.map

package/dist/components/menu-group-heading/MenuGroupHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeading.js","sources":["../../../src/components/menu-group-heading/MenuGroupHeading.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './MenuGroupHeading.module.scss';\n\nexport interface MenuGroupHeadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** The section label text. Rendered in all-caps. */\n  label: string;\n}\n\n/**\n * Menu Group Heading is an optional all-caps label that titles a grouped\n * section of Menu Items inside a dropdown or context menu.\n */\nexport default function MenuGroupHeading({\n  label,\n  className = '',\n  ...rest\n}: MenuGroupHeadingProps) {\n  return (\n    <div\n      className={[styles['menu-group-heading'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      <span className={styles['menu-group-heading__label']}>{label}</span>\n    </div>\n  );\n}\n"],"names":["MenuGroupHeading","label","className","rest","jsx","styles"],"mappings":";;AAYA,SAAwBA,EAAiB;AAAA,EACvC,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,oBAAoB,GAAGH,CAAS,EAChD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEJ,4BAAC,QAAA,EAAK,WAAWE,EAAO,2BAA2B,GAAI,UAAAJ,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGnE;"}

package/dist/components/menu-group-heading/MenuGroupHeading.module.css

@@ -0,0 +1 @@
+._menu-group-heading_ca9me_2{display:flex;align-items:center;padding:var(--spacing-xxs) var(--spacing-xl);background-color:var(--center-channel-bg);width:100%}._menu-group-heading__label_ca9me_9{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);letter-spacing:.05em;text-transform:uppercase;color:rgba(var(--center-channel-color-rgb),.72);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuGroupHeading.module.css');const e={"menu-group-heading":"_menu-group-heading_ca9me_2","menu-group-heading__label":"_menu-group-heading__label_ca9me_9"};exports.default=e;
+//# sourceMappingURL=MenuGroupHeading.module.scss.cjs.map

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeading.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.js

@@ -0,0 +1,8 @@
+import './MenuGroupHeading.module.css';const e = {
+  "menu-group-heading": "_menu-group-heading_ca9me_2",
+  "menu-group-heading__label": "_menu-group-heading__label_ca9me_9"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=MenuGroupHeading.module.scss.js.map

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.js.map

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

package/dist/components/menu-group-heading/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MenuGroupHeading.cjs");exports.MenuGroupHeading=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/menu-group-heading/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/menu-group-heading/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MenuGroupHeading } from './MenuGroupHeading';
+export type { MenuGroupHeadingProps } from './MenuGroupHeading';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/menu-group-heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-group-heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/menu-group-heading/index.js

@@ -0,0 +1,5 @@
+import { default as o } from "./MenuGroupHeading.js";
+export {
+  o as MenuGroupHeading
+};
+//# sourceMappingURL=index.js.map

package/dist/components/menu-group-heading/index.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, 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 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 text. */\n  label: string;\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. */\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. */\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  /** 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 */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\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 className={rootClass} type={type} disabled={disabled} {...rest}>\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              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\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=\"NEW\" />}\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              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAuCA,SAAwBA,EAAS,CAC/B,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBP,EAAcO,EAAAA,QAAO,wBAAwB,EAAI,GACjDN,EAASM,EAAAA,QAAO,mBAAmB,EAAI,GACvCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAW,KAAAF,EAAY,SAAAD,EAAqB,GAAGE,EAChE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAd,GACCe,EAAAA,IAACE,EAAAA,QAAA,CAAK,MAAOF,EAAAA,IAACG,IAAyB,EAAI,KAAK,IAAA,CAAK,CAAA,CAEzD,CAAA,CACF,EAEFF,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,SAAAjB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CgB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAhB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWU,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAV,CAAA,CACH,EAEDC,GAAOU,EAAAA,IAACI,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBb,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACK,EAAAA,QAAA,CACC,MAAOd,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCX,GACCY,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCZ,EAEG,GADAY,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAZ,SAAmBe,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAU,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CAC3D,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, 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 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 text. */\n  label: string;\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 />} size=\"16\" />`. */\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 />} size=\"16\" />`. */\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  /** 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 */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\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 className={rootClass} type={type} disabled={disabled} {...rest}>\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              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\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=\"NEW\" />}\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              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAuCA,SAAwBA,EAAS,CAC/B,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBP,EAAcO,EAAAA,QAAO,wBAAwB,EAAI,GACjDN,EAASM,EAAAA,QAAO,mBAAmB,EAAI,GACvCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAW,KAAAF,EAAY,SAAAD,EAAqB,GAAGE,EAChE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAd,GACCe,EAAAA,IAACE,EAAAA,QAAA,CAAK,MAAOF,EAAAA,IAACG,IAAyB,EAAI,KAAK,IAAA,CAAK,CAAA,CAEzD,CAAA,CACF,EAEFF,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,SAAAjB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CgB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAhB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWU,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAV,CAAA,CACH,EAEDC,GAAOU,EAAAA,IAACI,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBb,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACK,EAAAA,QAAA,CACC,MAAOd,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCX,GACCY,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCZ,EAEG,GADAY,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAZ,SAAmBe,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAU,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CAC3D,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}

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

@@ -6,11 +6,11 @@ export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     secondaryLabel?: ReactNode;
     /** Where the secondary label appears. Default: 'below'. */
     secondaryLabelPosition?: 'inline' | 'below';
-    /** Custom content for the leading slot. When omitted, shows placeholder icon. */
+    /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size="16" />`. */
     leadingVisual?: ReactNode;
     /** Show the leading visual slot. Default: true. */
     leadingElement?: boolean;
-    /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */
+    /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size="16" />`. */
     trailingVisual?: ReactNode;
     /** Show the trailing visual slot. Default: false. */
     trailingElement?: boolean;

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,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7D,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,iFAAiF;IACjF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sGAAsG;IACtG,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,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,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,cAAc,EACd,sBAAgC,EAChC,aAAa,EACb,cAAqB,EACrB,cAAc,EACd,eAAuB,EACvB,iBAAiB,EACjB,GAAW,EACX,YAAY,EACZ,WAAmB,EACnB,MAAc,EACd,SAAc,EACd,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,aAAa,2CAuEf"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7D,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,sJAAsJ;IACtJ,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2KAA2K;IAC3K,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,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,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,cAAc,EACd,sBAAgC,EAChC,aAAa,EACb,cAAqB,EACrB,cAAc,EACd,eAAuB,EACvB,iBAAiB,EACjB,GAAW,EACX,YAAY,EACZ,WAAmB,EACnB,MAAc,EACd,SAAc,EACd,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,aAAa,2CAuEf"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, 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 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 text. */\n  label: string;\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. */\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. */\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  /** 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 */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\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 className={rootClass} type={type} disabled={disabled} {...rest}>\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              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\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=\"NEW\" />}\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              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;AAuCA,SAAwBA,EAAS;AAAA,EAC/B,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC,IAAyB;AAAA,EACzB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAY;AAAA,IAChBC,EAAO,WAAW;AAAA,IAClBP,IAAcO,EAAO,wBAAwB,IAAI;AAAA,IACjDN,IAASM,EAAO,mBAAmB,IAAI;AAAA,IACvCL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAM,EAAC,UAAA,EAAO,WAAWF,GAAW,MAAAF,GAAY,UAAAD,GAAqB,GAAGE,GAChE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACxC,UAAA;AAAA,IAAAb,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWD,EAAO,iBAAiB,GACtC,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAd,KACC,gBAAAe,EAACE,GAAA,EAAK,OAAO,gBAAAF,EAACG,KAAyB,GAAI,MAAK,KAAA,CAAK,EAAA,CAEzD,EAAA,CACF;AAAA,IAEF,gBAAAF,EAAC,OAAA,EAAI,WAAWF,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,kBAAkB,GAAI,UAAAjB,GAAM;AAAA,QACnDC,KAAkBC,MAA2B,YAC5C,gBAAAgB,EAAC,UAAK,WAAWD,EAAO,mCAAmC,GACxD,UAAAhB,EAAA,CACH;AAAA,QAEDM,uBACE,QAAA,EAAK,WAAWU,EAAO,0BAA0B,GAAG,eAAW,IAC7D,UAAAV,EAAA,CACH;AAAA,QAEDC,KAAO,gBAAAU,EAACI,GAAA,EAAI,OAAM,MAAA,CAAM;AAAA,QACxBb,KAAgB,QAAQA,IAAe,KACtC,gBAAAS;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAOd;AAAA,YACP,UAAS;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,GAEJ;AAAA,MACCR,KAAkBC,MAA2B,WAC5C,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC5C,UAAA,gBAAAC,EAAC,UAAK,WAAWD,EAAO,kCAAkC,GACvD,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IACCX,KACC,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAO,kBAAkB,GACvC,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACTD,EAAO,4BAA4B;AAAA,UAClCZ,IAEG,KADAY,EAAO,mCAAmC;AAAA,QAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAZ,uBAAmBe,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAU,GAAI,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA,EAC3D,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, 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 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 text. */\n  label: string;\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 />} size=\"16\" />`. */\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 />} size=\"16\" />`. */\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  /** 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 */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\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 className={rootClass} type={type} disabled={disabled} {...rest}>\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              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\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=\"NEW\" />}\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              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;AAuCA,SAAwBA,EAAS;AAAA,EAC/B,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC,IAAyB;AAAA,EACzB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAY;AAAA,IAChBC,EAAO,WAAW;AAAA,IAClBP,IAAcO,EAAO,wBAAwB,IAAI;AAAA,IACjDN,IAASM,EAAO,mBAAmB,IAAI;AAAA,IACvCL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAM,EAAC,UAAA,EAAO,WAAWF,GAAW,MAAAF,GAAY,UAAAD,GAAqB,GAAGE,GAChE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACxC,UAAA;AAAA,IAAAb,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWD,EAAO,iBAAiB,GACtC,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAG,eAAW,IAC9D,UAAAd,KACC,gBAAAe,EAACE,GAAA,EAAK,OAAO,gBAAAF,EAACG,KAAyB,GAAI,MAAK,KAAA,CAAK,EAAA,CAEzD,EAAA,CACF;AAAA,IAEF,gBAAAF,EAAC,OAAA,EAAI,WAAWF,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,kBAAkB,GAAI,UAAAjB,GAAM;AAAA,QACnDC,KAAkBC,MAA2B,YAC5C,gBAAAgB,EAAC,UAAK,WAAWD,EAAO,mCAAmC,GACxD,UAAAhB,EAAA,CACH;AAAA,QAEDM,uBACE,QAAA,EAAK,WAAWU,EAAO,0BAA0B,GAAG,eAAW,IAC7D,UAAAV,EAAA,CACH;AAAA,QAEDC,KAAO,gBAAAU,EAACI,GAAA,EAAI,OAAM,MAAA,CAAM;AAAA,QACxBb,KAAgB,QAAQA,IAAe,KACtC,gBAAAS;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAOd;AAAA,YACP,UAAS;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,GAEJ;AAAA,MACCR,KAAkBC,MAA2B,WAC5C,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC5C,UAAA,gBAAAC,EAAC,UAAK,WAAWD,EAAO,kCAAkC,GACvD,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IACCX,KACC,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAO,kBAAkB,GACvC,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACTD,EAAO,4BAA4B;AAAA,UAClCZ,IAEG,KADAY,EAAO,mCAAmC;AAAA,QAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAZ,uBAAmBe,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAU,GAAI,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA,EAC3D,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

package/dist/components/message-separator/MessageSeparator.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../icon/Icon.cjs"),__c=require("@mattermost/compass-icons/components/creation-outline.js"),c=__c?.default??__c,a=require("./MessageSeparator.module.scss.cjs"),g={date:"Today","new-messages":"new-messages","reply-count":"4 replies"};function p({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,className:n="",...d}){const o=t??g[s],u=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],n].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:o}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":"Summarize new messages with AI",children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(m.default,{size:"12",glyph:e.jsx(c,{})})}),"Summarize"]})]});return e.jsx("div",{className:u,role:"separator",...d,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../icon/Icon.cjs"),__c=require("@mattermost/compass-icons/components/creation-outline.js"),c=__c?.default??__c,a=require("./MessageSeparator.module.scss.cjs"),g={date:"Today","new-messages":"New messages","reply-count":"4 replies"};function p({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,className:n="",...d}){const o=t??g[s],u=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],n].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:o}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":"Summarize new messages with AI",children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(m.default,{size:"12",glyph:e.jsx(c,{})})}),"Summarize"]})]});return e.jsx("div",{className:u,role:"separator",...d,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=p;
 //# sourceMappingURL=MessageSeparator.cjs.map

package/dist/components/message-separator/MessageSeparator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'new-messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAC9C,SAAAF,EACH,EAECN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,iCAAiC,EAAG,cAAW,GACpE,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,EAAG,EACjE,EACCC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}
+{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAC9C,SAAAF,EACH,EAECN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,iCAAiC,EAAG,cAAW,GACpE,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,EAAG,EACjE,EACCC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}

package/dist/components/message-separator/MessageSeparator.d.ts

@@ -3,7 +3,7 @@ export type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';
 export interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {
     /** Separator variant. Default: Date. */
     type?: MessageSeparatorType;
-    /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */
+    /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */
     label?: string;
     /** Show AI summarize button (New Messages type only). Default: false. */
     showAiSummary?: boolean;

package/dist/components/message-separator/MessageSeparator.js

@@ -4,7 +4,7 @@ import __u from "@mattermost/compass-icons/components/creation-outline.js";const
 import e from "./MessageSeparator.module.scss.js";
 const _ = {
   date: "Today",
-  "new-messages": "new-messages",
+  "new-messages": "New messages",
   "reply-count": "4 replies"
 };
 function w({

package/dist/components/message-separator/MessageSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'new-messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'new-messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAC9C,UAAAF,GACH;AAAA,IAECN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWH,EAAO,iCAAiC,GAAG,eAAW,IACpE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,GAAG,GACjE;AAAA,IACCC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAC9C,UAAAF,GACH;AAAA,IAECN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWH,EAAO,iCAAiC,GAAG,eAAW,IACpE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,GAAG,GACjE;AAAA,IACCC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}

package/dist/components/modal/Modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("react"),s=require("../icon-button/IconButton.cjs"),i=require("../icon/Icon.cjs"),v=require("../scrollbar/Scrollbar.cjs"),__N=require("@mattermost/compass-icons/components/close.js"),N=__N?.default??__N,__q=require("@mattermost/compass-icons/components/arrow-left.js"),q=__q?.default??__q,y=require("../../utils/string.cjs"),l=require("./Modal.module.scss.cjs");function g({size:t="small",title:r,subtitle:a,showBackButton:n=!1,onBack:u,onClose:c,headerDivider:m=!0,bodyPadding:f="default",children:_,footer:o,footerDivider:j=!0}){const d=b.useId(),x=l.default[`modal--size-${y.toKebab(t)}`],h=f==="menu";return e.jsxs("div",{className:[l.default.modal,x].filter(Boolean).join(" "),role:"dialog","aria-modal":"true","aria-labelledby":d,children:[e.jsxs("div",{className:[l.default.modal__header,!m&&l.default["modal__header--no-divider"]].filter(Boolean).join(" "),children:[e.jsxs("div",{className:l.default["modal__header-inner"],children:[n&&e.jsx(s.default,{"aria-label":"Go back",icon:e.jsx(i.default,{glyph:e.jsx(q,{}),size:"20"}),onClick:u}),e.jsxs("div",{className:l.default["modal__title-group"],children:[e.jsx("h2",{id:d,className:l.default.modal__title,children:r}),a&&e.jsx("p",{className:l.default.modal__subtitle,children:a})]})]}),e.jsx(s.default,{"aria-label":"Close",className:l.default.modal__close,icon:e.jsx(i.default,{glyph:e.jsx(N,{}),size:"20"}),onClick:c})]}),e.jsx("div",{className:l.default.modal__body,children:e.jsx(v.default,{children:e.jsx("div",{className:[l.default["modal__body-inner"],h&&l.default["modal__body-inner--menu"]].filter(Boolean).join(" "),children:_})})}),o&&e.jsx("div",{className:[l.default.modal__footer,!j&&l.default["modal__footer--no-divider"]].filter(Boolean).join(" "),children:o})]})}exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),S=require("react"),p=require("../scrollbar/Scrollbar.cjs"),w=require("../modal-footer/ModalFooter.cjs"),z=require("../modal-header/ModalHeader.cjs"),B=require("../../utils/string.cjs"),l=require("./Modal.module.scss.cjs");function C({className:t="",style:i,size:u="small",title:c,subtitle:m,subtitlePlacement:b="below",hideTitle:f=!1,showBackButton:_=!1,onBack:j,onClose:q,headerDivider:v=!0,headerAction:x,bodyPadding:s="default",scrollable:y=!0,children:M,footer:o,footerLeading:r,footerType:a="2-actions",footerDivider:h=!0}){const d=S.useId(),g=l.default[`modal--size-${B.toKebab(u)}`],I=[l.default["modal__body-inner"],s==="menu"&&l.default["modal__body-inner--menu"],s==="none"&&l.default["modal__body-inner--none"]].filter(Boolean).join(" "),n=e.jsx("div",{className:I,children:M}),N=o!=null||r!=null||a==="spacer-small"||a==="spacer-large";return e.jsxs("div",{className:[l.default.modal,g,t].filter(Boolean).join(" "),style:i,role:"dialog","aria-modal":"true","aria-labelledby":d,children:[e.jsx(z.default,{title:c,titleId:d,subtitle:m,subtitlePlacement:b,hideTitle:f,showBackButton:_,onBack:j,onClose:q,divider:v,headerAction:x}),e.jsx("div",{className:l.default.modal__body,children:y?e.jsx(p.default,{children:n}):n}),N&&e.jsx(w.default,{type:a,divider:h,leading:r,children:o})]})}exports.default=C;
 //# sourceMappingURL=Modal.cjs.map

package/dist/components/modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useId } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so row labels align with the 32px header/footer margins. */\nexport type ModalBodyPadding = 'default' | 'menu';\n\nexport interface ModalProps {\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Always visible. */\n  title: ReactNode;\n  /** Optional secondary line below the title. */\n  subtitle?: ReactNode;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Show divider between header and body. Figma: Divider = On. Default: true. */\n  headerDivider?: boolean;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists (8px vertical / 16px horizontal so row labels align with\n   * the 32px header/footer margins).\n   */\n  bodyPadding?: ModalBodyPadding;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically a group of Buttons, right-aligned by default. */\n  footer?: ReactNode;\n  /** Show divider between body and footer. Figma: Divider = On. Default: true. */\n  footerDivider?: boolean;\n}\n\nexport default function Modal({\n  size = 'small',\n  title,\n  subtitle,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  bodyPadding = 'default',\n  children,\n  footer,\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const menuBody = bodyPadding === 'menu';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass].filter(Boolean).join(' ')}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <div\n        className={[\n          styles['modal__header'],\n          !headerDivider && styles['modal__header--no-divider'],\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={styles['modal__header-inner']}>\n          {showBackButton && (\n            <IconButton\n              aria-label=\"Go back\"\n              icon={<Icon glyph={<ArrowLeftIcon />} size=\"20\" />}\n              onClick={onBack}\n            />\n          )}\n          <div className={styles['modal__title-group']}>\n            <h2 id={titleId} className={styles['modal__title']}>\n              {title}\n            </h2>\n            {subtitle && (\n              <p className={styles['modal__subtitle']}>{subtitle}</p>\n            )}\n          </div>\n        </div>\n        <IconButton\n          aria-label=\"Close\"\n          className={styles['modal__close']}\n          icon={<Icon glyph={<CloseIcon />} size=\"20\" />}\n          onClick={onClose}\n        />\n      </div>\n\n      <div className={styles['modal__body']}>\n        <Scrollbar>\n          <div\n            className={[\n              styles['modal__body-inner'],\n              menuBody && styles['modal__body-inner--menu'],\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {children}\n          </div>\n        </Scrollbar>\n      </div>\n\n      {footer && (\n        <div\n          className={[\n            styles['modal__footer'],\n            !footerDivider && styles['modal__footer--no-divider'],\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","size","title","subtitle","showBackButton","onBack","onClose","headerDivider","bodyPadding","children","footer","footerDivider","titleId","useId","sizeClass","styles","toKebab","menuBody","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","CloseIcon","Scrollbar"],"mappings":"kdA4CA,SAAwBA,EAAM,CAC5B,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,eAAAC,EAAiB,GACjB,OAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EAAc,UACd,SAAAC,EACA,OAAAC,EACA,cAAAC,EAAgB,EAClB,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQf,CAAI,CAAC,EAAE,EACjDgB,EAAWT,IAAgB,OAEjC,OACEU,EAAAA,KAAC,MAAA,CACC,UAAW,CAACH,UAAO,MAAOD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,KAAK,SACL,aAAW,OACX,kBAAiBF,EAEjB,SAAA,CAAAM,EAAAA,KAAC,MAAA,CACC,UAAW,CACTH,EAAAA,QAAO,cACP,CAACR,GAAiBQ,EAAAA,QAAO,2BAA2B,CAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qBAAqB,EACzC,SAAA,CAAAX,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,aAAW,UACX,WAAOC,UAAA,CAAK,YAAQC,EAAA,EAAc,EAAI,KAAK,KAAK,EAChD,QAASjB,CAAA,CAAA,EAGba,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAI,EAAAA,IAAC,MAAG,GAAIP,EAAS,UAAWG,EAAAA,QAAO,aAChC,SAAAb,EACH,EACCC,GACCgB,EAAAA,IAAC,IAAA,CAAE,UAAWJ,EAAAA,QAAO,gBAAqB,SAAAZ,CAAA,CAAS,CAAA,CAAA,CAEvD,CAAA,EACF,EACAgB,EAAAA,IAACC,EAAAA,QAAA,CACC,aAAW,QACX,UAAWL,EAAAA,QAAO,aAClB,WAAOM,UAAA,CAAK,YAAQE,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASjB,CAAA,CAAA,CACX,CAAA,CAAA,QAGD,MAAA,CAAI,UAAWS,UAAO,YACrB,eAACS,UAAA,CACC,SAAAL,EAAAA,IAAC,MAAA,CACC,UAAW,CACTJ,EAAAA,QAAO,mBAAmB,EAC1BE,GAAYF,EAAAA,QAAO,yBAAyB,CAAA,EAE3C,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAN,CAAA,CAAA,EAEL,CAAA,CACF,EAECC,GACCS,EAAAA,IAAC,MAAA,CACC,UAAW,CACTJ,EAAAA,QAAO,cACP,CAACJ,GAAiBI,EAAAA,QAAO,2BAA2B,CAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAL,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  headerAction,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        onClose={onClose}\n        divider={headerDivider}\n        headerAction={headerAction}\n      />\n\n      <div className={styles['modal__body']}>\n        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","onClose","headerDivider","headerAction","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":"6WA2EA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,OAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,GAChB,aAAAC,EACA,YAAAC,EAAc,UACd,WAAAC,EAAa,GACb,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EAAa,YACb,cAAAC,EAAgB,EAClB,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQrB,CAAI,CAAC,EAAE,EACjDsB,EAAiB,CACrBF,EAAAA,QAAO,mBAAmB,EAC1BV,IAAgB,QAAUU,EAAAA,QAAO,yBAAyB,EAC1DV,IAAgB,QAAUU,EAAAA,QAAO,yBAAyB,CAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,EAELG,EAAYC,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAiB,SAAAV,EAAS,EACtDa,EACJZ,GAAU,MACVC,GAAiB,MACjBC,IAAe,gBACfA,IAAe,eAEjB,OACEW,EAAAA,KAAC,MAAA,CACC,UAAW,CAACN,EAAAA,QAAO,MAAOD,EAAWrB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACxE,MAAAC,EACA,KAAK,SACL,aAAW,OACX,kBAAiBkB,EAEjB,SAAA,CAAAO,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAA1B,EACA,QAAAgB,EACA,SAAAf,EACA,kBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,OAAAC,EACA,QAAAC,EACA,QAASC,EACT,aAAAC,CAAA,CAAA,EAGFe,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,YACpB,SAAAT,EAAaa,EAAAA,IAACI,EAAAA,QAAA,CAAW,SAAAL,CAAA,CAAU,EAAeA,EACrD,EAECE,GACCD,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAMd,EACN,QAASC,EACT,QAASF,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}

package/dist/components/modal/Modal.d.ts

@@ -1,34 +1,66 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { ModalFooterType } from '../modal-footer/ModalFooter';
+import { ModalSubtitlePlacement } from '../modal-header/ModalHeader';
 export type ModalSize = 'small' | 'medium' | 'large';
-/** Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so row labels align with the 32px header/footer margins. */
-export type ModalBodyPadding = 'default' | 'menu';
+/**
+ * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so
+ * row labels align with the 32px header/footer margins. `none` removes inset
+ * for host-owned full-bleed layouts (e.g. settings sidebars).
+ */
+export type ModalBodyPadding = 'default' | 'menu' | 'none';
+export type { ModalFooterType, ModalSubtitlePlacement };
 export interface ModalProps {
+    /** Extra class on the dialog root (size + chrome classes still apply). */
+    className?: string;
+    /** Inline style on the dialog root — prefer `className` for layout overrides. */
+    style?: CSSProperties;
     /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */
     size?: ModalSize;
-    /** Modal heading text. Always visible. */
+    /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */
     title: ReactNode;
-    /** Optional secondary line below the title. */
+    /** Optional secondary line — placement via `subtitlePlacement`. */
     subtitle?: ReactNode;
+    /**
+     * Where the subtitle sits. Figma Modal Header: Below | Beside.
+     * Default: `below`.
+     */
+    subtitlePlacement?: ModalSubtitlePlacement;
+    /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */
+    hideTitle?: boolean;
     /** When true, shows a back-arrow button before the title. */
     showBackButton?: boolean;
     /** Called when the back button is clicked. */
     onBack?: () => void;
     /** Called when the × close button is clicked. */
     onClose?: () => void;
-    /** Show divider between header and body. Figma: Divider = On. Default: true. */
+    /** Show divider between header and body. Default: true. */
     headerDivider?: boolean;
+    /** Optional control before close (Button, search field, …). */
+    headerAction?: ReactNode;
     /**
      * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for
-     * MenuItem lists (8px vertical / 16px horizontal so row labels align with
-     * the 32px header/footer margins).
+     * MenuItem lists. Use `none` when the host owns padding.
      */
     bodyPadding?: ModalBodyPadding;
+    /**
+     * When true (default), wraps body content in Scrollbar. Set false when the
+     * host manages scroll inside panes.
+     */
+    scrollable?: boolean;
     /** Body content. */
     children: ReactNode;
-    /** Footer slot — typically a group of Buttons, right-aligned by default. */
+    /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */
     footer?: ReactNode;
-    /** Show divider between body and footer. Figma: Divider = On. Default: true. */
+    /** Left footer slot (pagination status, PaginationDots, …). */
+    footerLeading?: ReactNode;
+    /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */
+    footerType?: ModalFooterType;
+    /** Show divider between body and footer. Default: true. */
     footerDivider?: boolean;
 }
-export default function Modal({ size, title, subtitle, showBackButton, onBack, onClose, headerDivider, bodyPadding, children, footer, footerDivider, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.
+ * Host owns portal, overlay, focus trap, and open/close.
+ */
+export default function Modal({ className, style, size, title, subtitle, subtitlePlacement, hideTitle, showBackButton, onBack, onClose, headerDivider, headerAction, bodyPadding, scrollable, children, footer, footerLeading, footerType, footerDivider, }: ModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Modal.d.ts.map