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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__q=require("@mattermost/compass-icons/components/arrow-back-ios.js"),q=__q?.default??__q,__v=require("@mattermost/compass-icons/components/arrow-collapse.js"),v=__v?.default??__v,__y=require("@mattermost/compass-icons/components/arrow-expand.js"),y=__y?.default??__y,__C=require("@mattermost/compass-icons/components/close.js"),C=__C?.default??__C,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),z=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function k({title:f,secondaryTitle:i,tag:l,tagType:j="info",leadingIcon:t,onBack:d,backLabel:_="Back",onExpand:c,expanded:n=!1,expandLabel:x="Expand",collapseLabel:b="Collapse",onClose:o,closeLabel:g="Close",actionLabel:u,onActionClick:m,actionActive:h=!1,className:p=""}){const N=[a.default["right-sidebar-header"],p].filter(Boolean).join(" ");return e.jsxs("div",{className:N,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[d&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:d,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(q,{})})}),t&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:t}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:f}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(z.default,{label:l,type:j,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[u&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],h?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:m,"aria-pressed":h?!0:void 0,children:u}),c&&e.jsx(r.default,{size:"small","aria-label":n?b:x,onClick:c,icon:e.jsx(s.default,{size:"16",glyph:n?e.jsx(v,{}):e.jsx(y,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":g,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(C,{})})})]})]})}exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__z=require("@mattermost/compass-icons/components/arrow-back-ios.js"),z=__z?.default??__z,__C=require("@mattermost/compass-icons/components/arrow-collapse.js"),C=__C?.default??__C,__k=require("@mattermost/compass-icons/components/arrow-expand.js"),k=__k?.default??__k,__v=require("@mattermost/compass-icons/components/close.js"),v=__v?.default??__v,__w=require("@mattermost/compass-icons/components/dock-window.js"),w=__w?.default??__w,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),I=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function B({title:j,secondaryTitle:i,tag:l,tagType:x="info",leadingIcon:d,onBack:t,backLabel:_="Back",onExpand:n,expanded:c=!1,expandLabel:b="Expand",collapseLabel:g="Collapse",onPopout:o,popoutLabel:m="Open in new window",onClose:u,closeLabel:p="Close",actionLabel:h,onActionClick:N,actionActive:f=!1,className:q=""}){const y=[a.default["right-sidebar-header"],q].filter(Boolean).join(" ");return e.jsxs("div",{className:y,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[t&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:t,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(z,{})})}),d&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:d}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:j}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(I.default,{label:l,type:x,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[h&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],f?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:N,"aria-pressed":f?!0:void 0,children:h}),n&&e.jsx(r.default,{size:"small","aria-label":c?g:b,onClick:n,icon:e.jsx(s.default,{size:"16",glyph:c?e.jsx(C,{}):e.jsx(k,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":m,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(w,{})})}),u&&e.jsx(r.default,{size:"small","aria-label":p,onClick:u,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(v,{})})})]})]})}exports.default=B;
 //# sourceMappingURL=RightSidebarHeader.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"giBA+CA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAb,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYZ,EACZ,QAASD,EACT,WAAOiB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDnB,GACCgB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAd,EACH,QAED,OAAA,CAAK,UAAWc,EAAAA,QAAO,6BAA6B,EAAI,SAAAlB,EAAM,EAC9DE,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOtB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCmB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJN,GACCa,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYb,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEa,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOd,EAAWY,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILf,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"8lBAoDA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,SAAAC,EACA,YAAAC,EAAc,qBACd,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAf,GACCiB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYd,EACZ,QAASD,EACT,WAAOmB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDrB,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAhB,EACH,QAED,OAAA,CAAK,UAAWgB,EAAAA,QAAO,6BAA6B,EAAI,SAAApB,EAAM,EAC9DE,GACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOxB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCqB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJR,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYf,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEe,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOhB,EAAWc,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILjB,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYX,EACZ,QAASD,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAe,CAAA,CAAI,CAAA,CAAA,EAGpDhB,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACQ,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts

@@ -23,6 +23,10 @@ export interface RightSidebarHeaderProps {
     expandLabel?: string;
     /** Accessible name for the expand button while expanded. Default: "Collapse". */
     collapseLabel?: string;
+    /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */
+    onPopout?: () => void;
+    /** Accessible name for the pop out button. Default: "Open in new window". */
+    popoutLabel?: string;
     /** When set, shows a close button and calls this on click. */
     onClose?: () => void;
     /** Accessible name for the close button. Default: "Close". */
@@ -35,5 +39,5 @@ export interface RightSidebarHeaderProps {
     actionActive?: boolean;
     className?: string;
 }
-export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onPopout, popoutLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RightSidebarHeader.d.ts.map

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAsFzB"}
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,QAAQ,EACR,WAAkC,EAClC,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CA8FzB"}

package/dist/components/right-sidebar-header/RightSidebarHeader.js

@@ -1,84 +1,87 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import __k from "@mattermost/compass-icons/components/arrow-back-ios.js";const k=__k&&__k.default?__k.default:__k;
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import __u from "@mattermost/compass-icons/components/arrow-back-ios.js";const u=__u&&__u.default?__u.default:__u;
 import __v from "@mattermost/compass-icons/components/arrow-collapse.js";const v=__v&&__v.default?__v.default:__v;
-import __I from "@mattermost/compass-icons/components/arrow-expand.js";const I=__I&&__I.default?__I.default:__I;
-import __x from "@mattermost/compass-icons/components/close.js";const x=__x&&__x.default?__x.default:__x;
+import __x from "@mattermost/compass-icons/components/arrow-expand.js";const x=__x&&__x.default?__x.default:__x;
+import __j from "@mattermost/compass-icons/components/close.js";const j=__j&&__j.default?__j.default:__j;
+import __B from "@mattermost/compass-icons/components/dock-window.js";const B=__B&&__B.default?__B.default:__B;
 import i from "../icon/Icon.js";
 import s from "../icon-button/IconButton.js";
-import j from "../tag/Tag.js";
-import r from "./RightSidebarHeader.module.scss.js";
-function F({
-  title: _,
+import A from "../tag/Tag.js";
+import a from "./RightSidebarHeader.module.scss.js";
+function J({
+  title: b,
   secondaryTitle: l,
   tag: o,
-  tagType: b = "info",
-  leadingIcon: t,
+  tagType: g = "info",
+  leadingIcon: c,
   onBack: d,
-  backLabel: g = "Back",
-  onExpand: c,
-  expanded: n = !1,
-  expandLabel: f = "Expand",
-  collapseLabel: N = "Collapse",
-  onClose: h,
-  closeLabel: y = "Close",
-  actionLabel: m,
-  onActionClick: C,
-  actionActive: p = !1,
-  className: u = ""
+  backLabel: f = "Back",
+  onExpand: n,
+  expanded: t = !1,
+  expandLabel: N = "Expand",
+  collapseLabel: y = "Collapse",
+  onPopout: h,
+  popoutLabel: z = "Open in new window",
+  onClose: m,
+  closeLabel: C = "Close",
+  actionLabel: p,
+  onActionClick: k,
+  actionActive: _ = !1,
+  className: w = ""
 }) {
-  const z = [r["right-sidebar-header"], u].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: z, children: [
-    /* @__PURE__ */ a("div", { className: r["right-sidebar-header__left"], children: [
-      /* @__PURE__ */ a("div", { className: r["right-sidebar-header__primary"], children: [
+  const I = [a["right-sidebar-header"], w].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { className: I, children: [
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__left"], children: [
+      /* @__PURE__ */ r("div", { className: a["right-sidebar-header__primary"], children: [
         d && /* @__PURE__ */ e(
           s,
           {
-            className: r["right-sidebar-header__back"],
+            className: a["right-sidebar-header__back"],
             size: "small",
-            "aria-label": g,
+            "aria-label": f,
             onClick: d,
-            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(k, {}) })
+            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(u, {}) })
           }
         ),
-        t && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__leading-icon"], children: t }),
-        /* @__PURE__ */ e("span", { className: r["right-sidebar-header__title"], children: _ }),
-        o && /* @__PURE__ */ e("span", { className: r["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
-          j,
+        c && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__leading-icon"], children: c }),
+        /* @__PURE__ */ e("span", { className: a["right-sidebar-header__title"], children: b }),
+        o && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
+          A,
           {
             label: o,
-            type: b,
+            type: g,
             size: "x-small",
             casing: "all-caps"
           }
         ) })
       ] }),
-      l && /* @__PURE__ */ e("div", { className: r["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: r["right-sidebar-header__secondary-text"], children: l }) })
+      l && /* @__PURE__ */ e("div", { className: a["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: a["right-sidebar-header__secondary-text"], children: l }) })
     ] }),
-    /* @__PURE__ */ a("div", { className: r["right-sidebar-header__actions"], children: [
-      m && /* @__PURE__ */ e(
+    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__actions"], children: [
+      p && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           className: [
-            r["right-sidebar-header__action"],
-            p ? r["right-sidebar-header__action--active"] : ""
+            a["right-sidebar-header__action"],
+            _ ? a["right-sidebar-header__action--active"] : ""
           ].filter(Boolean).join(" "),
-          onClick: C,
-          "aria-pressed": p ? !0 : void 0,
-          children: m
+          onClick: k,
+          "aria-pressed": _ ? !0 : void 0,
+          children: p
         }
       ),
-      c && /* @__PURE__ */ e(
+      n && /* @__PURE__ */ e(
         s,
         {
           size: "small",
-          "aria-label": n ? N : f,
-          onClick: c,
+          "aria-label": t ? y : N,
+          onClick: n,
           icon: /* @__PURE__ */ e(
             i,
             {
               size: "16",
-              glyph: n ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(I, {})
+              glyph: t ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(x, {})
             }
           )
         }
@@ -87,15 +90,24 @@ function F({
         s,
         {
           size: "small",
-          "aria-label": y,
+          "aria-label": z,
           onClick: h,
-          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(x, {}) })
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(B, {}) })
+        }
+      ),
+      m && /* @__PURE__ */ e(
+        s,
+        {
+          size: "small",
+          "aria-label": C,
+          onClick: m,
+          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(j, {}) })
         }
       )
     ] })
   ] });
 }
 export {
-  F as default
+  J as default
 };
 //# sourceMappingURL=RightSidebarHeader.js.map