@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/components/reactions-row/ReactionsRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsRow.cjs","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Visible acknowledge button text. Default: \"Acknowledge\". */\n  acknowledgeLabel?: ReactNode;\n  /** Accessible name for the acknowledge button. Default: \"Acknowledge message\". */\n  acknowledgeAriaLabel?: string;\n  /** Accessible name for the add-reaction button. Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */\n  formatReactionLabel?: (emoji: string, count: number) => string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  acknowledgeLabel = 'Acknowledge',\n  acknowledgeAriaLabel = 'Acknowledge message',\n  addReactionLabel = 'Add reaction',\n  formatReactionLabel,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label={acknowledgeAriaLabel}\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              {acknowledgeLabel}\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            formatLabel={formatReactionLabel}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label={addReactionLabel}\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","acknowledgeLabel","acknowledgeAriaLabel","addReactionLabel","formatReactionLabel","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":"scA4CMA,EAAoC,CACxC,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,EACtB,CAAE,MAAO,KAAM,MAAO,CAAA,CACxB,EAOA,SAAwBC,EAAa,CACnC,UAAAC,EAAYF,EACZ,gBAAAG,EAAkB,GAClB,aAAAC,EAAe,GACf,iBAAAC,EAAmB,EACnB,wBAAAC,EAA0B,GAC1B,cAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,iBAAAC,EAAmB,cACnB,qBAAAC,EAAuB,sBACvB,iBAAAC,EAAmB,eACnB,oBAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAY,GAAGD,EAE5B,SAAA,CAAAX,GACCc,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,oBAAoB,EAC3BX,EAA0BW,EAAAA,QAAO,4BAA4B,EAAI,EAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASR,EACT,eAAcH,EACd,aAAYK,EAEZ,SAAA,CAAAQ,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAC7D,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,EACCf,EACCa,EAAAA,IAAC,OAAA,CAAK,UAAWF,UAAO,0BAA0B,EAC/C,SAAAZ,CAAA,CACH,QAEC,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAC/C,SAAAP,CAAA,CACH,CAAA,CAAA,CAAA,EAMNQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAf,EAAU,IAAI,CAAC,CAAE,MAAAoB,EAAO,MAAAC,EAAO,cAAAC,KAC9BL,EAAAA,IAACM,EAAAA,QAAA,CAEC,MAAAH,EACA,MAAAC,EACA,cAAAC,EACA,YAAaX,EACb,QAAS,IAAML,GAAA,YAAAA,EAAkBc,EAAK,EALjCA,CAAA,CAOR,EAGAnB,GACCgB,EAAAA,IAACO,EAAAA,QAAA,CACC,aAAYd,EACZ,UAAWK,EAAAA,QAAO,6BAA6B,EAC/C,KAAK,UACL,QAASV,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACQ,IAAwB,CAAA,CAAI,CAAA,CAAA,CAC5D,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/reactions-row/ReactionsRow.css

@@ -0,0 +1 @@
+._reactions-row_1myyt_13{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-xxxxs) 0}._reactions-row__buttons_1myyt_20{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xxxs)}@media(hover:hover)and (pointer:fine){._reactions-row__add-reaction_1myyt_27{opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._reactions-row_1myyt_13:hover ._reactions-row__add-reaction_1myyt_27,._reactions-row_1myyt_13:focus-within ._reactions-row__add-reaction_1myyt_27{opacity:1;pointer-events:auto}}._reactions-row__ack_1myyt_37{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--color-success-rgb),.12);color:var(--color-success);cursor:pointer;outline:none}._reactions-row__ack_1myyt_37:focus-visible{outline:2px solid var(--color-success);outline-offset:3px;animation:_focus-ring-in_1myyt_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._reactions-row__ack_1myyt_37:focus-visible{animation:none}}._reactions-row__ack_1myyt_37:not(._-host-shadow-a_1myyt_59):not(._-host-shadow-b_1myyt_59){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_1myyt_1{0%{outline-color:transparent;outline-offset:0}}._reactions-row__ack_1myyt_37:hover:not([aria-pressed]){transition:background-color var(--duration-quick) var(--ease-transition)}._reactions-row__ack_1myyt_37:hover{background-color:rgba(var(--color-success-rgb),.2)}._reactions-row__ack--active_1myyt_75{background-color:var(--color-success);color:var(--button-color)}._reactions-row__ack--active_1myyt_75:hover{background-color:color-mix(in srgb,black 8%,var(--color-success))}._reactions-row__ack-icon_1myyt_82{display:inline-flex;align-items:center}._reactions-row__ack-count_1myyt_86,._reactions-row__ack-label_1myyt_92{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75)}

package/dist/components/reactions-row/ReactionsRow.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ReactionItem {
+    emoji: string;
+    count: number;
+    /** Whether the current user reacted with this emoji. */
+    byCurrentUser?: boolean;
+}
+export interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** List of reactions to display. */
+    reactions?: ReactionItem[];
+    /** Whether to show the add-reaction button. Default: false. */
+    showAddReaction?: boolean;
+    /** Whether to show the acknowledge button. */
+    acknowledged?: boolean;
+    /** Acknowledge count. */
+    acknowledgeCount?: number;
+    /** Whether the current user has acknowledged. Default: false. */
+    currentUserAcknowledged?: boolean;
+    /** Called when add-reaction is clicked. */
+    onAddReaction?: () => void;
+    /** Called when a Reaction Button is clicked. */
+    onReactionClick?: (emoji: string) => void;
+    /** Called when the acknowledge button is clicked. */
+    onAcknowledge?: () => void;
+    /** Visible acknowledge button text. Default: "Acknowledge". */
+    acknowledgeLabel?: ReactNode;
+    /** Accessible name for the acknowledge button. Default: "Acknowledge message". */
+    acknowledgeAriaLabel?: string;
+    /** Accessible name for the add-reaction button. Default: "Add reaction". */
+    addReactionLabel?: string;
+    /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */
+    formatReactionLabel?: (emoji: string, count: number) => string;
+    /** Optional CSS class name. */
+    className?: string;
+}
+/**
+ * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to
+ * respond, applaud, or acknowledge without adding to the thread. The component handles the
+ * count, the "this is mine" highlight, and the add-reaction affordance.
+ */
+export default function ReactionsRow({ reactions, showAddReaction, acknowledged, acknowledgeCount, currentUserAcknowledged, onAddReaction, onReactionClick, onAcknowledge, acknowledgeLabel, acknowledgeAriaLabel, addReactionLabel, formatReactionLabel, className, ...rest }: ReactionsRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReactionsRow.d.ts.map

package/dist/components/reactions-row/ReactionsRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsRow.d.ts","sourceRoot":"","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/D,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAA6B,EAC7B,eAAuB,EACvB,YAAoB,EACpB,gBAAoB,EACpB,uBAA+B,EAC/B,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgC,EAChC,oBAA4C,EAC5C,gBAAiC,EACjC,mBAAmB,EACnB,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CA8DnB"}

package/dist/components/reactions-row/ReactionsRow.js

@@ -0,0 +1,76 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import I from "../icon-button/IconButton.js";
+import i from "../icon/Icon.js";
+import x from "../reaction-button/ReactionButton.js";
+import __y from "@mattermost/compass-icons/components/check-circle-outline.js";const y=__y&&__y.default?__y.default:__y;
+import __B from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const B=__B&&__B.default?__B.default:__B;
+import a from "./ReactionsRow.module.scss.js";
+const g = [
+  { emoji: "👍", count: 1 },
+  { emoji: "😀", count: 4 },
+  { emoji: "🙌", count: 1 }
+];
+function T({
+  reactions: n = g,
+  showAddReaction: c = !1,
+  acknowledged: l = !1,
+  acknowledgeCount: m = 0,
+  currentUserAcknowledged: e = !1,
+  onAddReaction: p,
+  onReactionClick: s,
+  onAcknowledge: f,
+  acknowledgeLabel: _ = "Acknowledge",
+  acknowledgeAriaLabel: d = "Acknowledge message",
+  addReactionLabel: u = "Add reaction",
+  formatReactionLabel: h,
+  className: w = "",
+  ...N
+}) {
+  const b = [a["reactions-row"], w].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t("div", { className: b, ...N, children: [
+    l && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: [
+          a["reactions-row__ack"],
+          e ? a["reactions-row__ack--active"] : ""
+        ].filter(Boolean).join(" "),
+        onClick: f,
+        "aria-pressed": e,
+        "aria-label": d,
+        children: [
+          /* @__PURE__ */ o("span", { className: a["reactions-row__ack-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(i, { size: "16", glyph: /* @__PURE__ */ o(y, {}) }) }),
+          e ? /* @__PURE__ */ o("span", { className: a["reactions-row__ack-count"], children: m }) : /* @__PURE__ */ o("span", { className: a["reactions-row__ack-label"], children: _ })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: a["reactions-row__buttons"], children: [
+      n.map(({ emoji: r, count: j, byCurrentUser: k }) => /* @__PURE__ */ o(
+        x,
+        {
+          emoji: r,
+          count: j,
+          byCurrentUser: k,
+          formatLabel: h,
+          onClick: () => s == null ? void 0 : s(r)
+        },
+        r
+      )),
+      c && /* @__PURE__ */ o(
+        I,
+        {
+          "aria-label": u,
+          className: a["reactions-row__add-reaction"],
+          size: "x-small",
+          onClick: p,
+          icon: /* @__PURE__ */ o(i, { size: "16", glyph: /* @__PURE__ */ o(B, {}) })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  T as default
+};
+//# sourceMappingURL=ReactionsRow.js.map

package/dist/components/reactions-row/ReactionsRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsRow.js","sources":["../../../src/components/reactions-row/ReactionsRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport ReactionButton from '@/components/reaction-button/ReactionButton';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport styles from './ReactionsRow.module.scss';\n\nexport interface ReactionItem {\n  emoji: string;\n  count: number;\n  /** Whether the current user reacted with this emoji. */\n  byCurrentUser?: boolean;\n}\n\nexport interface ReactionsRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** List of reactions to display. */\n  reactions?: ReactionItem[];\n  /** Whether to show the add-reaction button. Default: false. */\n  showAddReaction?: boolean;\n  /** Whether to show the acknowledge button. */\n  acknowledged?: boolean;\n  /** Acknowledge count. */\n  acknowledgeCount?: number;\n  /** Whether the current user has acknowledged. Default: false. */\n  currentUserAcknowledged?: boolean;\n  /** Called when add-reaction is clicked. */\n  onAddReaction?: () => void;\n  /** Called when a Reaction Button is clicked. */\n  onReactionClick?: (emoji: string) => void;\n  /** Called when the acknowledge button is clicked. */\n  onAcknowledge?: () => void;\n  /** Visible acknowledge button text. Default: \"Acknowledge\". */\n  acknowledgeLabel?: ReactNode;\n  /** Accessible name for the acknowledge button. Default: \"Acknowledge message\". */\n  acknowledgeAriaLabel?: string;\n  /** Accessible name for the add-reaction button. Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Accessible name for each reaction button. Default: `{emoji} {count} reaction(s)`. */\n  formatReactionLabel?: (emoji: string, count: number) => string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_REACTIONS: ReactionItem[] = [\n  { emoji: '👍', count: 1 },\n  { emoji: '😀', count: 4 },\n  { emoji: '🙌', count: 1 },\n];\n\n/**\n * Reactions Row is the strip of Reaction Buttons below a message — the lightest weight way to\n * respond, applaud, or acknowledge without adding to the thread. The component handles the\n * count, the \"this is mine\" highlight, and the add-reaction affordance.\n */\nexport default function ReactionsRow({\n  reactions = DEFAULT_REACTIONS,\n  showAddReaction = false,\n  acknowledged = false,\n  acknowledgeCount = 0,\n  currentUserAcknowledged = false,\n  onAddReaction,\n  onReactionClick,\n  onAcknowledge,\n  acknowledgeLabel = 'Acknowledge',\n  acknowledgeAriaLabel = 'Acknowledge message',\n  addReactionLabel = 'Add reaction',\n  formatReactionLabel,\n  className = '',\n  ...rest\n}: ReactionsRowProps) {\n  const rootClass = [styles['reactions-row'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {/* Acknowledge button */}\n      {acknowledged && (\n        <button\n          type=\"button\"\n          className={[\n            styles['reactions-row__ack'],\n            currentUserAcknowledged ? styles['reactions-row__ack--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onAcknowledge}\n          aria-pressed={currentUserAcknowledged}\n          aria-label={acknowledgeAriaLabel}\n        >\n          <span className={styles['reactions-row__ack-icon']} aria-hidden>\n            <Icon size=\"16\" glyph={<CheckCircleOutlineIcon />} />\n          </span>\n          {currentUserAcknowledged ? (\n            <span className={styles['reactions-row__ack-count']}>\n              {acknowledgeCount}\n            </span>\n          ) : (\n            <span className={styles['reactions-row__ack-label']}>\n              {acknowledgeLabel}\n            </span>\n          )}\n        </button>\n      )}\n\n      {/* Reaction buttons */}\n      <div className={styles['reactions-row__buttons']}>\n        {reactions.map(({ emoji, count, byCurrentUser }) => (\n          <ReactionButton\n            key={emoji}\n            emoji={emoji}\n            count={count}\n            byCurrentUser={byCurrentUser}\n            formatLabel={formatReactionLabel}\n            onClick={() => onReactionClick?.(emoji)}\n          />\n        ))}\n\n        {/* Add reaction button */}\n        {showAddReaction && (\n          <IconButton\n            aria-label={addReactionLabel}\n            className={styles['reactions-row__add-reaction']}\n            size=\"x-small\"\n            onClick={onAddReaction}\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_REACTIONS","ReactionsRow","reactions","showAddReaction","acknowledged","acknowledgeCount","currentUserAcknowledged","onAddReaction","onReactionClick","onAcknowledge","acknowledgeLabel","acknowledgeAriaLabel","addReactionLabel","formatReactionLabel","className","rest","rootClass","styles","jsxs","jsx","Icon","CheckCircleOutlineIcon","emoji","count","byCurrentUser","ReactionButton","IconButton","EmoticonPlusOutlineIcon"],"mappings":";;;;;;;AA4CA,MAAMA,IAAoC;AAAA,EACxC,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,EAAA;AACxB;AAOA,SAAwBC,EAAa;AAAA,EACnC,WAAAC,IAAYF;AAAA,EACZ,iBAAAG,IAAkB;AAAA,EAClB,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,yBAAAC,IAA0B;AAAA,EAC1B,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,sBAAAC,IAAuB;AAAA,EACvB,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAY,GAAGD,GAE5B,UAAA;AAAA,IAAAX,KACC,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACTD,EAAO,oBAAoB;AAAA,UAC3BX,IAA0BW,EAAO,4BAA4B,IAAI;AAAA,QAAA,EAEhE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,SAASR;AAAA,QACT,gBAAcH;AAAA,QACd,cAAYK;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWF,EAAO,yBAAyB,GAAG,eAAW,IAC7D,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,UACCf,IACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAZ,EAAA,CACH,sBAEC,QAAA,EAAK,WAAWY,EAAO,0BAA0B,GAC/C,UAAAP,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAMN,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAf,EAAU,IAAI,CAAC,EAAE,OAAAoB,GAAO,OAAAC,GAAO,eAAAC,QAC9B,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,OAAAH;AAAA,UACA,OAAAC;AAAA,UACA,eAAAC;AAAA,UACA,aAAaX;AAAA,UACb,SAAS,MAAML,KAAA,gBAAAA,EAAkBc;AAAA,QAAK;AAAA,QALjCA;AAAA,MAAA,CAOR;AAAA,MAGAnB,KACC,gBAAAgB;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,cAAYd;AAAA,UACZ,WAAWK,EAAO,6BAA6B;AAAA,UAC/C,MAAK;AAAA,UACL,SAASV;AAAA,UACT,wBAAOa,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACQ,KAAwB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5D,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/reactions-row/ReactionsRow.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ReactionsRow.css');const _={"reactions-row":"_reactions-row_1myyt_13","reactions-row__buttons":"_reactions-row__buttons_1myyt_20","reactions-row__add-reaction":"_reactions-row__add-reaction_1myyt_27","reactions-row__ack":"_reactions-row__ack_1myyt_37","reactions-row__ack--active":"_reactions-row__ack--active_1myyt_75","reactions-row__ack-icon":"_reactions-row__ack-icon_1myyt_82","reactions-row__ack-count":"_reactions-row__ack-count_1myyt_86","reactions-row__ack-label":"_reactions-row__ack-label_1myyt_92"};exports.default=_;
+//# sourceMappingURL=ReactionsRow.module.scss.cjs.map

package/dist/components/reactions-row/ReactionsRow.module.scss.cjs.map

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

package/dist/components/reactions-row/ReactionsRow.module.scss.js

@@ -0,0 +1,14 @@
+import './ReactionsRow.css';const _ = {
+  "reactions-row": "_reactions-row_1myyt_13",
+  "reactions-row__buttons": "_reactions-row__buttons_1myyt_20",
+  "reactions-row__add-reaction": "_reactions-row__add-reaction_1myyt_27",
+  "reactions-row__ack": "_reactions-row__ack_1myyt_37",
+  "reactions-row__ack--active": "_reactions-row__ack--active_1myyt_75",
+  "reactions-row__ack-icon": "_reactions-row__ack-icon_1myyt_82",
+  "reactions-row__ack-count": "_reactions-row__ack-count_1myyt_86",
+  "reactions-row__ack-label": "_reactions-row__ack-label_1myyt_92"
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=ReactionsRow.module.scss.js.map

package/dist/components/reactions-row/ReactionsRow.module.scss.js.map

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

package/dist/components/reactions-row/index.cjs

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

package/dist/components/reactions-row/index.d.ts

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

package/dist/components/reactions-row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/reactions-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/reactions-row/index.js

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__S=require("@mattermost/compass-icons/components/arrow-collapse.js"),S=__S?.default??__S,__A=require("@mattermost/compass-icons/components/arrow-expand.js"),A=__A?.default??__A,__H=require("@mattermost/compass-icons/components/arrow-left.js"),H=__H?.default??__H,__M=require("@mattermost/compass-icons/components/close.js"),M=__M?.default??__M,__O=require("@mattermost/compass-icons/components/dock-window.js"),O=__O?.default??__O,D=require("../button/Button.cjs"),i=require("../icon/Icon.cjs"),l=require("../icon-button/IconButton.cjs"),E=require("../tag/Tag.cjs"),W=require("../../utils/props.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function F({title:g,secondaryTitle:r,onSecondaryTitleClick:d,secondaryTitleButtonProps:s,tag:c,tagType:o="info",leadingIcon:h,onBack:t,backLabel:N="Back",onExpand:u,expanded:n=!1,expandLabel:q="Expand",collapseLabel:C="Collapse",onPopout:f,popoutLabel:z="Open in new window",onClose:j,closeLabel:k="Close",actionLabel:x,onActionClick:v,actionActive:_=!1,actions:w,className:p="",...I}){const R=[a.default["right-sidebar-header"],p].filter(Boolean).join(" ");return e.jsxs("div",{...I,className:R,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(l.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":N,onClick:t,icon:e.jsx(i.default,{size:"16",glyph:e.jsx(H,{})})}),h&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:h}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:g}),c&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(E.default,{label:c,type:o,size:"x-small",casing:"all-caps"})})]}),r&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:d?e.jsx("button",{type:"button",...s,className:W.mergeClassNames(a.default["right-sidebar-header__secondary-text"],a.default["right-sidebar-header__secondary-button"],s==null?void 0:s.className),onClick:m=>{var b;d(m),(b=s==null?void 0:s.onClick)==null||b.call(s,m)},children:r}):e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:r})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[x&&e.jsx(D.default,{emphasis:"dim",size:"small",compact:!0,className:[a.default["right-sidebar-header__action"],_?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:v,"aria-pressed":_?!0:void 0,children:x}),w,u&&e.jsx(l.default,{size:"small","aria-label":n?C:q,onClick:u,icon:e.jsx(i.default,{size:"16",glyph:n?e.jsx(S,{}):e.jsx(A,{})})}),f&&e.jsx(l.default,{size:"small","aria-label":z,onClick:f,icon:e.jsx(i.default,{size:"16",glyph:e.jsx(O,{})})}),j&&e.jsx(l.default,{size:"small","aria-label":k,onClick:j,icon:e.jsx(i.default,{size:"16",glyph:e.jsx(M,{})})})]})]})}exports.default=F;
+//# sourceMappingURL=RightSidebarHeader.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Button from '@/components/button/Button';\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 { mergeClassNames } from '@/utils/props';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'dangerouslySetInnerHTML'\n> {\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  /** When set, the secondary title renders as a button (e.g. to open the parent channel) and calls this on click with the event. It looks the same at rest and shows a dim background on hover. */\n  onSecondaryTitleClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Extra attributes for the secondary title button (e.g. `aria-label`, `data-testid`). Only used with `onSecondaryTitleClick`; its `onClick` also runs, after that handler. */\n  secondaryTitleButtonProps?: BuiltInButtonProps;\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  /** Optional custom actions (e.g. a Filters `Button` + popover) rendered in the actions region after `actionLabel` and before the expand / pop out / close buttons. */\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  onSecondaryTitleClick,\n  secondaryTitleButtonProps,\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  actions,\n  className = '',\n  ...rest\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} 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={<ArrowLeftIcon />} />}\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            {onSecondaryTitleClick ? (\n              <button\n                type=\"button\"\n                {...secondaryTitleButtonProps}\n                className={mergeClassNames(\n                  styles['right-sidebar-header__secondary-text'],\n                  styles['right-sidebar-header__secondary-button'],\n                  secondaryTitleButtonProps?.className,\n                )}\n                onClick={(event) => {\n                  onSecondaryTitleClick(event);\n                  secondaryTitleButtonProps?.onClick?.(event);\n                }}\n              >\n                {secondaryTitle}\n              </button>\n            ) : (\n              <span className={styles['right-sidebar-header__secondary-text']}>\n                {secondaryTitle}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <Button\n            emphasis=\"dim\"\n            size=\"small\"\n            compact\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        {actions}\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","onSecondaryTitleClick","secondaryTitleButtonProps","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","actions","className","rest","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","Tag","mergeClassNames","event","_a","Button","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"+pBAgEA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,sBAAAC,EACA,0BAAAC,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,QAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGH,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAK,GAAGH,EAAM,UAAWC,EACxB,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAjB,GACCmB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYhB,EACZ,QAASD,EACT,WAAOqB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAc,CAAA,CAAI,CAAA,CAAA,EAGnDvB,GACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAlB,EACH,QAED,OAAA,CAAK,UAAWkB,EAAAA,QAAO,6BAA6B,EAAI,SAAAxB,EAAM,EAC9DI,GACCsB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAO1B,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCJ,GACCyB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACrD,SAAAtB,EACCwB,EAAAA,IAAC,SAAA,CACC,KAAK,SACJ,GAAGvB,EACJ,UAAW4B,EAAAA,gBACTP,EAAAA,QAAO,sCAAsC,EAC7CA,EAAAA,QAAO,wCAAwC,EAC/CrB,GAAA,YAAAA,EAA2B,SAAA,EAE7B,QAAU6B,GAAU,OAClB9B,EAAsB8B,CAAK,GAC3BC,EAAA9B,GAAA,YAAAA,EAA2B,UAA3B,MAAA8B,EAAA,KAAA9B,EAAqC6B,EACvC,EAEC,SAAA/B,CAAA,CAAA,QAGF,OAAA,CAAK,UAAWuB,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CAEJ,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAP,GACCS,EAAAA,IAACQ,EAAAA,QAAA,CACC,SAAS,MACT,KAAK,QACL,QAAO,GACP,UAAW,CACTV,EAAAA,QAAO,8BAA8B,EACrCL,EACIK,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASN,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJG,EACAX,GACCiB,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYjB,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEiB,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOlB,EAAWgB,MAACS,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILvB,GACCa,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYb,EACZ,QAASD,EACT,WAAOe,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACW,IAAe,CAAA,CAAI,CAAA,CAAA,EAGpDtB,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYX,EACZ,QAASD,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACY,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

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

@@ -0,0 +1 @@
+._right-sidebar-header_gkzgk_13{display:flex;align-items:center;gap:var(--spacing-l);height:56px;padding:var(--spacing-m);background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);box-sizing:border-box}._right-sidebar-header__left_gkzgk_23{display:flex;flex:1 1 0;min-width:0;align-items:center}._right-sidebar-header__primary_gkzgk_29{display:flex;align-items:center;gap:var(--spacing-xxs);padding:0 var(--spacing-xs);min-width:0}._right-sidebar-header__back_gkzgk_36{margin-left:calc(-1 * var(--spacing-m))}._right-sidebar-header__leading-icon_gkzgk_39{display:inline-flex;align-items:center;flex-shrink:0}._right-sidebar-header__tag_gkzgk_44{display:inline-flex;align-items:center}._right-sidebar-header__title_gkzgk_48{font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._right-sidebar-header__secondary_gkzgk_58{display:flex;flex:1 1 0;min-width:0;align-items:center;padding:0 var(--spacing-xs);border-left:1px solid rgba(var(--center-channel-color-rgb),.16);transition:border-color var(--duration-quick) var(--ease-transition)}._right-sidebar-header__secondary_gkzgk_58:has(._right-sidebar-header__secondary-button_gkzgk_67:hover){border-left-color:transparent}._right-sidebar-header__secondary-text_gkzgk_70{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._right-sidebar-header__secondary-button_gkzgk_67{min-width:0;max-width:calc(100% + var(--spacing-xxs) * 2);margin:0 calc(var(--spacing-xxs) * -1);padding:var(--spacing-xxxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:transparent;cursor:pointer;outline:none}._right-sidebar-header__secondary-button_gkzgk_67:focus-visible{outline:2px solid var(--focus-ring-color, var(--button-bg));outline-offset:3px;animation:_focus-ring-in_gkzgk_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._right-sidebar-header__secondary-button_gkzgk_67:focus-visible{animation:none}}@keyframes _focus-ring-in_gkzgk_1{0%{outline-color:transparent;outline-offset:0}}._right-sidebar-header__secondary-button_gkzgk_67:hover:not(:disabled),._right-sidebar-header__secondary-button_gkzgk_67:active:not(:disabled){transition:background-color var(--duration-quick) var(--ease-transition)}._right-sidebar-header__secondary-button_gkzgk_67:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._right-sidebar-header__secondary-button_gkzgk_67:active:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.12)}._right-sidebar-header__secondary-button_gkzgk_67:disabled{cursor:default}._right-sidebar-header__actions_gkzgk_119{display:flex;align-items:center;gap:var(--spacing-xxxs);flex-shrink:0}._right-sidebar-header__action--active_gkzgk_125._right-sidebar-header__action--active_gkzgk_125._right-sidebar-header__action--active_gkzgk_125._right-sidebar-header__action--active_gkzgk_125{--button-fg: var(--center-channel-color);background-color:rgba(var(--center-channel-color-rgb),.08)}

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

@@ -0,0 +1,50 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { TagType } from '../tag/Tag';
+import { BuiltInButtonProps } from '../../utils/props';
+export interface RightSidebarHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'dangerouslySetInnerHTML'> {
+    /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
+    /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */
+    secondaryTitle?: ReactNode;
+    /** When set, the secondary title renders as a button (e.g. to open the parent channel) and calls this on click with the event. It looks the same at rest and shows a dim background on hover. */
+    onSecondaryTitleClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Extra attributes for the secondary title button (e.g. `aria-label`, `data-testid`). Only used with `onSecondaryTitleClick`; its `onClick` also runs, after that handler. */
+    secondaryTitleButtonProps?: BuiltInButtonProps;
+    /** Optional tag rendered next to the title (e.g. "BETA"). */
+    tag?: ReactNode;
+    /** Tag visual style. Default: Info. */
+    tagType?: TagType;
+    /** 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. */
+    leadingIcon?: ReactNode;
+    /** When set, shows a back button and calls this on click. */
+    onBack?: () => void;
+    /** Accessible name for the back button. Default: "Back". */
+    backLabel?: string;
+    /** When set, shows an expand/collapse button and calls this on click. */
+    onExpand?: () => void;
+    /** When true, the expand button shows the collapse icon. Requires `onExpand`. */
+    expanded?: boolean;
+    /** Accessible name for the expand button while collapsed. Default: "Expand". */
+    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". */
+    closeLabel?: string;
+    /** Optional inline action label (e.g. "Follow"). Accepts translated nodes. */
+    actionLabel?: ReactNode;
+    /** Click handler for the action label. */
+    onActionClick?: () => void;
+    /** When true, the action button shows in its active state. */
+    actionActive?: boolean;
+    /** Optional custom actions (e.g. a Filters `Button` + popover) rendered in the actions region after `actionLabel` and before the expand / pop out / close buttons. */
+    actions?: ReactNode;
+    className?: string;
+}
+export default function RightSidebarHeader({ title, secondaryTitle, onSecondaryTitleClick, secondaryTitleButtonProps, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onPopout, popoutLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, actions, className, ...rest }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RightSidebarHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUnE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,yBAAyB,CACjD;IACC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,iMAAiM;IACjM,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,+KAA+K;IAC/K,yBAAyB,CAAC,EAAE,kBAAkB,CAAC;IAC/C,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,sKAAsK;IACtK,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,qBAAqB,EACrB,yBAAyB,EACzB,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,OAAO,EACP,SAAc,EACd,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAmHzB"}

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

@@ -0,0 +1,138 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import __O from "@mattermost/compass-icons/components/arrow-collapse.js";const O=__O&&__O.default?__O.default:__O;
+import __R from "@mattermost/compass-icons/components/arrow-expand.js";const R=__R&&__R.default?__R.default:__R;
+import __W from "@mattermost/compass-icons/components/arrow-left.js";const W=__W&&__W.default?__W.default:__W;
+import __q from "@mattermost/compass-icons/components/close.js";const q=__q&&__q.default?__q.default:__q;
+import __F from "@mattermost/compass-icons/components/dock-window.js";const F=__F&&__F.default?__F.default:__F;
+import G from "../button/Button.js";
+import s from "../icon/Icon.js";
+import l from "../icon-button/IconButton.js";
+import J from "../tag/Tag.js";
+import { mergeClassNames as K } from "../../utils/props.js";
+import i from "./RightSidebarHeader.module.scss.js";
+function B({
+  title: C,
+  secondaryTitle: m,
+  onSecondaryTitleClick: h,
+  secondaryTitleButtonProps: e,
+  tag: d,
+  tagType: z = "info",
+  leadingIcon: c,
+  onBack: _,
+  backLabel: k = "Back",
+  onExpand: b,
+  expanded: o = !1,
+  expandLabel: w = "Expand",
+  collapseLabel: x = "Collapse",
+  onPopout: g,
+  popoutLabel: I = "Open in new window",
+  onClose: f,
+  closeLabel: v = "Close",
+  actionLabel: n,
+  onActionClick: j,
+  actionActive: p = !1,
+  actions: A,
+  className: D = "",
+  ...E
+}) {
+  const H = [i["right-sidebar-header"], D].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { ...E, className: H, children: [
+    /* @__PURE__ */ r("div", { className: i["right-sidebar-header__left"], children: [
+      /* @__PURE__ */ r("div", { className: i["right-sidebar-header__primary"], children: [
+        _ && /* @__PURE__ */ a(
+          l,
+          {
+            className: i["right-sidebar-header__back"],
+            size: "small",
+            "aria-label": k,
+            onClick: _,
+            icon: /* @__PURE__ */ a(s, { size: "16", glyph: /* @__PURE__ */ a(W, {}) })
+          }
+        ),
+        c && /* @__PURE__ */ a("span", { className: i["right-sidebar-header__leading-icon"], children: c }),
+        /* @__PURE__ */ a("span", { className: i["right-sidebar-header__title"], children: C }),
+        d && /* @__PURE__ */ a("span", { className: i["right-sidebar-header__tag"], children: /* @__PURE__ */ a(
+          J,
+          {
+            label: d,
+            type: z,
+            size: "x-small",
+            casing: "all-caps"
+          }
+        ) })
+      ] }),
+      m && /* @__PURE__ */ a("div", { className: i["right-sidebar-header__secondary"], children: h ? /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          ...e,
+          className: K(
+            i["right-sidebar-header__secondary-text"],
+            i["right-sidebar-header__secondary-button"],
+            e == null ? void 0 : e.className
+          ),
+          onClick: (N) => {
+            var t;
+            h(N), (t = e == null ? void 0 : e.onClick) == null || t.call(e, N);
+          },
+          children: m
+        }
+      ) : /* @__PURE__ */ a("span", { className: i["right-sidebar-header__secondary-text"], children: m }) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: i["right-sidebar-header__actions"], children: [
+      n && /* @__PURE__ */ a(
+        G,
+        {
+          emphasis: "dim",
+          size: "small",
+          compact: !0,
+          className: [
+            i["right-sidebar-header__action"],
+            p ? i["right-sidebar-header__action--active"] : ""
+          ].filter(Boolean).join(" "),
+          onClick: j,
+          "aria-pressed": p ? !0 : void 0,
+          children: n
+        }
+      ),
+      A,
+      b && /* @__PURE__ */ a(
+        l,
+        {
+          size: "small",
+          "aria-label": o ? x : w,
+          onClick: b,
+          icon: /* @__PURE__ */ a(
+            s,
+            {
+              size: "16",
+              glyph: o ? /* @__PURE__ */ a(O, {}) : /* @__PURE__ */ a(R, {})
+            }
+          )
+        }
+      ),
+      g && /* @__PURE__ */ a(
+        l,
+        {
+          size: "small",
+          "aria-label": I,
+          onClick: g,
+          icon: /* @__PURE__ */ a(s, { size: "16", glyph: /* @__PURE__ */ a(F, {}) })
+        }
+      ),
+      f && /* @__PURE__ */ a(
+        l,
+        {
+          size: "small",
+          "aria-label": v,
+          onClick: f,
+          icon: /* @__PURE__ */ a(s, { size: "16", glyph: /* @__PURE__ */ a(q, {}) })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  B as default
+};
+//# sourceMappingURL=RightSidebarHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Button from '@/components/button/Button';\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 { mergeClassNames } from '@/utils/props';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'dangerouslySetInnerHTML'\n> {\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  /** When set, the secondary title renders as a button (e.g. to open the parent channel) and calls this on click with the event. It looks the same at rest and shows a dim background on hover. */\n  onSecondaryTitleClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Extra attributes for the secondary title button (e.g. `aria-label`, `data-testid`). Only used with `onSecondaryTitleClick`; its `onClick` also runs, after that handler. */\n  secondaryTitleButtonProps?: BuiltInButtonProps;\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  /** Optional custom actions (e.g. a Filters `Button` + popover) rendered in the actions region after `actionLabel` and before the expand / pop out / close buttons. */\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  onSecondaryTitleClick,\n  secondaryTitleButtonProps,\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  actions,\n  className = '',\n  ...rest\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} 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={<ArrowLeftIcon />} />}\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            {onSecondaryTitleClick ? (\n              <button\n                type=\"button\"\n                {...secondaryTitleButtonProps}\n                className={mergeClassNames(\n                  styles['right-sidebar-header__secondary-text'],\n                  styles['right-sidebar-header__secondary-button'],\n                  secondaryTitleButtonProps?.className,\n                )}\n                onClick={(event) => {\n                  onSecondaryTitleClick(event);\n                  secondaryTitleButtonProps?.onClick?.(event);\n                }}\n              >\n                {secondaryTitle}\n              </button>\n            ) : (\n              <span className={styles['right-sidebar-header__secondary-text']}>\n                {secondaryTitle}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <Button\n            emphasis=\"dim\"\n            size=\"small\"\n            compact\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        {actions}\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","onSecondaryTitleClick","secondaryTitleButtonProps","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","actions","className","rest","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","Tag","mergeClassNames","event","_a","Button","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./RightSidebarHeader.css');const e={"right-sidebar-header":"_right-sidebar-header_gkzgk_13","right-sidebar-header__left":"_right-sidebar-header__left_gkzgk_23","right-sidebar-header__primary":"_right-sidebar-header__primary_gkzgk_29","right-sidebar-header__back":"_right-sidebar-header__back_gkzgk_36","right-sidebar-header__leading-icon":"_right-sidebar-header__leading-icon_gkzgk_39","right-sidebar-header__tag":"_right-sidebar-header__tag_gkzgk_44","right-sidebar-header__title":"_right-sidebar-header__title_gkzgk_48","right-sidebar-header__secondary":"_right-sidebar-header__secondary_gkzgk_58","right-sidebar-header__secondary-button":"_right-sidebar-header__secondary-button_gkzgk_67","right-sidebar-header__secondary-text":"_right-sidebar-header__secondary-text_gkzgk_70","right-sidebar-header__actions":"_right-sidebar-header__actions_gkzgk_119","right-sidebar-header__action--active":"_right-sidebar-header__action--active_gkzgk_125"};exports.default=e;
+//# sourceMappingURL=RightSidebarHeader.module.scss.cjs.map

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

@@ -0,0 +1,18 @@
+import './RightSidebarHeader.css';const e = {
+  "right-sidebar-header": "_right-sidebar-header_gkzgk_13",
+  "right-sidebar-header__left": "_right-sidebar-header__left_gkzgk_23",
+  "right-sidebar-header__primary": "_right-sidebar-header__primary_gkzgk_29",
+  "right-sidebar-header__back": "_right-sidebar-header__back_gkzgk_36",
+  "right-sidebar-header__leading-icon": "_right-sidebar-header__leading-icon_gkzgk_39",
+  "right-sidebar-header__tag": "_right-sidebar-header__tag_gkzgk_44",
+  "right-sidebar-header__title": "_right-sidebar-header__title_gkzgk_48",
+  "right-sidebar-header__secondary": "_right-sidebar-header__secondary_gkzgk_58",
+  "right-sidebar-header__secondary-button": "_right-sidebar-header__secondary-button_gkzgk_67",
+  "right-sidebar-header__secondary-text": "_right-sidebar-header__secondary-text_gkzgk_70",
+  "right-sidebar-header__actions": "_right-sidebar-header__actions_gkzgk_119",
+  "right-sidebar-header__action--active": "_right-sidebar-header__action--active_gkzgk_125"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=RightSidebarHeader.module.scss.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

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

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

package/dist/components/scrollbar/Scrollbar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../node_modules/simplebar-react/dist/simplebar.min.css');const v=require("react/jsx-runtime"),s=require("react"),m=require("simplebar-react");;/* empty css                                                          */const q=require("./Scrollbar.module.scss.cjs"),S=s.forwardRef(function({children:n,color:l,alwaysVisible:u=!1,className:a,style:i,onScroll:o},e){const r=s.useRef(void 0),d=s.useCallback(t=>{var c;(c=r.current)==null||c.call(r),r.current=void 0,t&&o&&(t.addEventListener("scroll",o),r.current=()=>t.removeEventListener("scroll",o)),typeof e=="function"?e(t):e&&(e.current=t)},[o,e]),f={...i,...l?{"--scrollbar-color":`var(${l})`}:null},b=[q.default.scrollbar,a].filter(Boolean).join(" ");return v.jsx(m,{autoHide:!u,scrollableNodeProps:{ref:d},className:b,style:f,tabIndex:-1,children:n})});exports.default=S;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./simplebar-vendor.css');const S=require("react/jsx-runtime"),s=require("react"),g=require("simplebar-react"),j=require("../../utils/string.cjs");;/* empty css                        */const c=require("./Scrollbar.module.scss.cjs"),y=s.forwardRef(function({children:n,color:l,alwaysVisible:i=!1,size:u="default",className:d,style:f,onScroll:o,...b},e){const r=s.useRef(void 0),v=s.useCallback(t=>{var a;(a=r.current)==null||a.call(r),r.current=void 0,t&&o&&(t.addEventListener("scroll",o),r.current=()=>t.removeEventListener("scroll",o)),typeof e=="function"?e(t):e&&(e.current=t)},[o,e]),m={...f,...l?{"--scrollbar-color":`var(${l})`}:null},q=[c.default.scrollbar,u!=="default"&&c.default[`scrollbar--size-${j.toKebab(u)}`],d].filter(Boolean).join(" ");return S.jsx(g,{...b,autoHide:!i,scrollableNodeProps:{ref:v},className:q,style:m,tabIndex:-1,children:n})});exports.default=y;
 //# sourceMappingURL=Scrollbar.cjs.map

package/dist/components/scrollbar/Scrollbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.cjs","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar-react/dist/simplebar.min.css';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  { children, color, alwaysVisible = false, className, style, onScroll },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":"yTAuCMA,EAAYC,EAAAA,WAA2C,SAC3D,CAAE,SAAAC,EAAU,MAAAC,EAAO,cAAAC,EAAgB,GAAO,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAA,EAC5DC,EACA,CACA,MAAMC,EAAUC,EAAAA,OAAiC,MAAS,EAEpDC,EAAgBC,EAAAA,YACnBC,GAA8B,QAC7BC,EAAAL,EAAQ,UAAR,MAAAK,EAAA,KAAAL,GACAA,EAAQ,QAAU,OAEdI,GAAMN,IACRM,EAAG,iBAAiB,SAAUN,CAAQ,EACtCE,EAAQ,QAAU,IAAMI,EAAG,oBAAoB,SAAUN,CAAQ,GAG/D,OAAOC,GAAQ,WACjBA,EAAIK,CAAE,EACGL,IACRA,EAAsD,QAAUK,EAErE,EACA,CAACN,EAAUC,CAAG,CAAA,EAGVO,EAA6B,CACjC,GAAGT,EACH,GAAIH,EACC,CAAE,oBAAqB,OAAOA,CAAK,KACpC,IAAA,EAGAa,EAAY,CAACC,EAAAA,QAAO,UAAWZ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAExE,OACEa,EAAAA,IAACC,EAAA,CACC,SAAU,CAACf,EACX,oBAAqB,CAAE,IAAKO,CAAA,EAC5B,UAAWK,EACX,MAAOD,EACP,SAAU,GAET,SAAAb,CAAA,CAAA,CAGP,CAAC"}
+{"version":3,"file":"Scrollbar.cjs","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport { toKebab } from '@/utils/string';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\n/** Track width. `default` is 8px; `wide` is 10px (modals, large panes). */\nexport type ScrollbarSize = 'default' | 'wide';\n\nexport interface ScrollbarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'color' | 'onScroll'\n> {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Track width. Default: `default` (8px). Use `wide` (10px) in modals. */\n  size?: ScrollbarSize;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  {\n    children,\n    color,\n    alwaysVisible = false,\n    size = 'default',\n    className,\n    style,\n    onScroll,\n    ...rest\n  },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [\n    styles.scrollbar,\n    size !== 'default' && styles[`scrollbar--size-${toKebab(size)}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <SimpleBar\n      {...rest}\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","size","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","toKebab","jsx","SimpleBar"],"mappings":"2TAiDMA,EAAYC,EAAAA,WAA2C,SAC3D,CACE,SAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,KAAAC,EAAO,UACP,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAUC,EAAAA,OAAiC,MAAS,EAEpDC,EAAgBC,EAAAA,YACnBC,GAA8B,QAC7BC,EAAAL,EAAQ,UAAR,MAAAK,EAAA,KAAAL,GACAA,EAAQ,QAAU,OAEdI,GAAMP,IACRO,EAAG,iBAAiB,SAAUP,CAAQ,EACtCG,EAAQ,QAAU,IAAMI,EAAG,oBAAoB,SAAUP,CAAQ,GAG/D,OAAOE,GAAQ,WACjBA,EAAIK,CAAE,EACGL,IACRA,EAAsD,QAAUK,EAErE,EACA,CAACP,EAAUE,CAAG,CAAA,EAGVO,EAA6B,CACjC,GAAGV,EACH,GAAIJ,EACC,CAAE,oBAAqB,OAAOA,CAAK,KACpC,IAAA,EAGAe,EAAY,CAChBC,EAAAA,QAAO,UACPd,IAAS,WAAac,UAAO,mBAAmBC,UAAQf,CAAI,CAAC,EAAE,EAC/DC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEe,EAAAA,IAACC,EAAA,CACE,GAAGb,EACJ,SAAU,CAACL,EACX,oBAAqB,CAAE,IAAKS,CAAA,EAC5B,UAAWK,EACX,MAAOD,EACP,SAAU,GAET,SAAAf,CAAA,CAAA,CAGP,CAAC"}

package/dist/components/scrollbar/Scrollbar.css

@@ -0,0 +1 @@
+._scrollbar_c4qaw_13{width:100%;height:100%;min-height:0;--scrollbar-color: var(--center-channel-color-rgb)}._scrollbar_c4qaw_13 .simplebar-track.simplebar-vertical{width:8px}._scrollbar_c4qaw_13 .simplebar-track.simplebar-horizontal{height:8px}._scrollbar--size-wide_c4qaw_25 .simplebar-track.simplebar-vertical{width:10px}._scrollbar--size-wide_c4qaw_25 .simplebar-track.simplebar-horizontal{height:10px}._scrollbar_c4qaw_13 .simplebar-scrollbar:before{left:2px;right:2px;top:2px;bottom:2px;border-radius:var(--radius-pill);background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.24);transition:opacity var(--duration-quick) var(--ease-exit),background-color var(--duration-quick) var(--ease-transition)}._scrollbar_c4qaw_13 .simplebar-scrollbar.simplebar-visible:before{opacity:1}._scrollbar_c4qaw_13 .simplebar-track:hover .simplebar-scrollbar:before,._scrollbar_c4qaw_13 .simplebar-scrollbar.simplebar-hover:before{opacity:1;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.4)}._scrollbar_c4qaw_13 .simplebar-track{pointer-events:auto}

package/dist/components/scrollbar/Scrollbar.d.ts

@@ -1,5 +1,7 @@
-import { CSSProperties, ReactNode } from 'react';
-export interface ScrollbarProps {
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+/** Track width. `default` is 8px; `wide` is 10px (modals, large panes). */
+export type ScrollbarSize = 'default' | 'wide';
+export interface ScrollbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color' | 'onScroll'> {
     /** Scrollable content. */
     children: ReactNode;
     /**
@@ -13,6 +15,8 @@ export interface ScrollbarProps {
      * Default: false (auto-hide).
      */
     alwaysVisible?: boolean;
+    /** Track width. Default: `default` (8px). Use `wide` (10px) in modals. */
+    size?: ScrollbarSize;
     /** Class applied to the SimpleBar root. */
     className?: string;
     /** Inline style applied to the SimpleBar root. */