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

package/dist/components/permalink-preview/PermalinkPreview.js

@@ -1,22 +1,45 @@
-import { jsxs as r, Fragment as d, jsx as i } from "react/jsx-runtime";
-import c from "../user-avatar/UserAvatar.js";
-import v from "../message-header/MessageHeader.js";
-import _ from "../icon/Icon.js";
-import k from "../icon-button/IconButton.js";
-import __u from "@mattermost/compass-icons/components/close.js";const u=__u&&__u.default?__u.default:__u;
+import { jsxs as r, Fragment as v, jsx as i } from "react/jsx-runtime";
+import { useState as l, useRef as T, useEffect as j } from "react";
+import z from "../user-avatar/UserAvatar.js";
+import B from "../message-header/MessageHeader.js";
+import E from "../icon/Icon.js";
+import P from "../icon-button/IconButton.js";
+import __M from "@mattermost/compass-icons/components/close.js";const M=__M&&__M.default?__M.default:__M;
 import e from "./PermalinkPreview.module.scss.js";
-function A({
-  authorName: a = "Leonard Riley",
-  avatarSrc: l,
-  timestamp: m = "10:43 AM",
-  messageText: n = "At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",
-  originalChannel: p = "~Desktop App",
-  onDismiss: s,
-  className: o = ""
+const O = 100;
+function D({
+  authorName: n = "Leonard Riley",
+  avatarSrc: u,
+  timestamp: _ = "10:43 AM",
+  messageText: f = "At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",
+  children: h,
+  originalChannel: w = "~Desktop App",
+  originalChannelLabel: k,
+  onDismiss: o,
+  dismissLabel: g = "Remove permalink preview",
+  showMoreLabel: N = "Show more",
+  showLessLabel: y = "Show less",
+  className: b = ""
 }) {
-  const t = [e["permalink-preview"], o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", { className: t, children: [
-    s != null && /* @__PURE__ */ r(d, { children: [
+  const [t, x] = l(!1), [p, C] = l(!1), [H, I] = l(0), m = T(null);
+  j(() => {
+    const s = m.current;
+    if (!s) return;
+    const a = () => {
+      const d = s.scrollHeight;
+      I(d), C(d > O);
+    };
+    a();
+    const c = new ResizeObserver(a);
+    return c.observe(s), () => c.disconnect();
+  }, []);
+  const R = [e["permalink-preview"], b].filter(Boolean).join(" "), A = [
+    e["permalink-preview__body-clip"],
+    p ? e["permalink-preview__body-clip--truncated"] : "",
+    t ? e["permalink-preview__body-clip--expanded"] : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { className: R, children: [
+    o != null && /* @__PURE__ */ r(v, { children: [
       /* @__PURE__ */ i(
         "div",
         {
@@ -25,33 +48,55 @@ function A({
         }
       ),
       /* @__PURE__ */ i(
-        k,
+        P,
         {
           className: e["permalink-preview__dismiss"],
           size: "x-small",
           padding: "compact",
-          "aria-label": "Remove permalink preview",
-          icon: /* @__PURE__ */ i(_, { size: "12", glyph: /* @__PURE__ */ i(u, {}) }),
-          onClick: s
+          "aria-label": g,
+          icon: /* @__PURE__ */ i(E, { size: "12", glyph: /* @__PURE__ */ i(M, {}) }),
+          onClick: o
         }
       )
     ] }),
     /* @__PURE__ */ r("div", { className: e["permalink-preview__card"], children: [
       /* @__PURE__ */ r("div", { className: e["permalink-preview__message"], children: [
         /* @__PURE__ */ r("div", { className: e["permalink-preview__header"], children: [
-          /* @__PURE__ */ i(c, { src: l, alt: a, size: "24" }),
-          /* @__PURE__ */ i(v, { username: a, timestamp: m })
+          /* @__PURE__ */ i(z, { src: u, alt: n, size: "24" }),
+          /* @__PURE__ */ i(B, { username: n, timestamp: _ })
         ] }),
-        /* @__PURE__ */ i("div", { className: e["permalink-preview__body"], children: /* @__PURE__ */ i("p", { className: e["permalink-preview__text"], children: n }) })
+        /* @__PURE__ */ r("div", { className: e["permalink-preview__body"], children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              ref: m,
+              className: A,
+              style: {
+                "--permalink-preview-body-height": `${H}px`
+              },
+              children: h ?? /* @__PURE__ */ i("p", { className: e["permalink-preview__text"], children: f })
+            }
+          ),
+          p && /* @__PURE__ */ i(
+            "button",
+            {
+              className: e["permalink-preview__show-more"],
+              onClick: (s) => {
+                s.stopPropagation(), x((a) => !a);
+              },
+              children: t ? y : N
+            }
+          )
+        ] })
       ] }),
-      /* @__PURE__ */ r("p", { className: e["permalink-preview__origin"], children: [
+      /* @__PURE__ */ i("p", { className: e["permalink-preview__origin"], children: k ?? /* @__PURE__ */ r(v, { children: [
         "Originally posted in ",
-        p
-      ] })
+        w
+      ] }) })
     ] })
   ] });
 }
 export {
-  A as default
+  D as default
 };
 //# sourceMappingURL=PermalinkPreview.js.map

package/dist/components/permalink-preview/PermalinkPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermalinkPreview.js","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"sourcesContent":["import UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MessageHeader from '@/components/message-header/MessageHeader';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './PermalinkPreview.module.scss';\n\nexport interface PermalinkPreviewProps {\n  /** Sender's display name. */\n  authorName?: string;\n  /** Avatar image src. */\n  avatarSrc: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** The quoted message body text. */\n  messageText?: string;\n  /** \"Originally posted in ~Channel\" footer text. */\n  originalChannel?: string;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * A Permalink Preview renders an inline card for a message that another message links to.\n * Sender, timestamp, body, and origin channel — enough context to recognise the quoted\n * message without leaving where you are.\n */\nexport default function PermalinkPreview({\n  authorName = 'Leonard Riley',\n  avatarSrc,\n  timestamp = '10:43 AM',\n  messageText = 'At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.',\n  originalChannel = '~Desktop App',\n  onDismiss,\n  className = '',\n}: PermalinkPreviewProps) {\n  const rootClass = [styles['permalink-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div\n            className={styles['permalink-preview__dismiss-bridge']}\n            aria-hidden\n          />\n          <IconButton\n            className={styles['permalink-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label=\"Remove permalink preview\"\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={styles['permalink-preview__card']}>\n        <div className={styles['permalink-preview__message']}>\n          <div className={styles['permalink-preview__header']}>\n            <UserAvatar src={avatarSrc} alt={authorName} size=\"24\" />\n            <MessageHeader username={authorName} timestamp={timestamp} />\n          </div>\n          <div className={styles['permalink-preview__body']}>\n            <p className={styles['permalink-preview__text']}>{messageText}</p>\n          </div>\n        </div>\n        <p className={styles['permalink-preview__origin']}>\n          Originally posted in {originalChannel}\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"names":["PermalinkPreview","authorName","avatarSrc","timestamp","messageText","originalChannel","onDismiss","className","rootClass","styles","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","UserAvatar","MessageHeader"],"mappings":";;;;;;;AA6BA,SAAwBA,EAAiB;AAAA,EACvC,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA0B;AACxB,QAAMC,IAAY,CAACC,EAAO,mBAAmB,GAAGF,CAAS,EACtD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GACb,UAAA;AAAA,IAAAF,KAAa,QACZ,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWH,EAAO,mCAAmC;AAAA,UACrD,eAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAEb,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWJ,EAAO,4BAA4B;AAAA,UAC9C,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAW;AAAA,UACX,wBAAOK,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAU,GAAI;AAAA,UAC5C,SAAST;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,GACF;AAAA,IAGF,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAC9C,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,2BAA2B,GAChD,UAAA;AAAA,UAAA,gBAAAG,EAACI,KAAW,KAAKd,GAAW,KAAKD,GAAY,MAAK,MAAK;AAAA,UACvD,gBAAAW,EAACK,GAAA,EAAc,UAAUhB,GAAY,WAAAE,EAAA,CAAsB;AAAA,QAAA,GAC7D;AAAA,QACA,gBAAAS,EAAC,OAAA,EAAI,WAAWH,EAAO,yBAAyB,GAC9C,UAAA,gBAAAG,EAAC,KAAA,EAAE,WAAWH,EAAO,yBAAyB,GAAI,aAAY,EAAA,CAChE;AAAA,MAAA,GACF;AAAA,MACA,gBAAAC,EAAC,KAAA,EAAE,WAAWD,EAAO,2BAA2B,GAAG,UAAA;AAAA,QAAA;AAAA,QAC3BJ;AAAA,MAAA,EAAA,CACxB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PermalinkPreview.js","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MessageHeader from '@/components/message-header/MessageHeader';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './PermalinkPreview.module.scss';\n\n// Keep in sync with max-height in PermalinkPreview.module.scss __body-clip\nconst TRUNCATION_HEIGHT_PX = 100;\n\nexport interface PermalinkPreviewProps {\n  /** Sender's display name. Kept as `string`: it's also the avatar's alt text. */\n  authorName?: string;\n  /** Avatar image src. */\n  avatarSrc: string;\n  /** Timestamp label. */\n  timestamp?: React.ReactNode;\n  /** The quoted message body text. Ignored when `children` is provided. */\n  messageText?: React.ReactNode;\n  /**\n   * Rich content to render in the message body instead of the plain `messageText` string.\n   * Use this to embed structured content such as attachment cards or formatted fields.\n   * When present, `messageText` is not rendered.\n   */\n  children?: React.ReactNode;\n  /** \"Originally posted in ~Channel\" footer text. */\n  originalChannel?: React.ReactNode;\n  /**\n   * Full footer line. Default: `Originally posted in {originalChannel}`.\n   * Pass a translated node to localize the surrounding copy.\n   */\n  originalChannelLabel?: React.ReactNode;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Remove permalink preview\". */\n  dismissLabel?: string;\n  /** Expand toggle text. Default: \"Show more\". */\n  showMoreLabel?: React.ReactNode;\n  /** Collapse toggle text. Default: \"Show less\". */\n  showLessLabel?: React.ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * A Permalink Preview renders an inline card for a message that another message links to.\n * Sender, timestamp, body, and origin channel — enough context to recognise the quoted\n * message without leaving where you are.\n */\nexport default function PermalinkPreview({\n  authorName = 'Leonard Riley',\n  avatarSrc,\n  timestamp = '10:43 AM',\n  messageText = 'At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.',\n  children,\n  originalChannel = '~Desktop App',\n  originalChannelLabel,\n  onDismiss,\n  dismissLabel = 'Remove permalink preview',\n  showMoreLabel = 'Show more',\n  showLessLabel = 'Show less',\n  className = '',\n}: PermalinkPreviewProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [needsTruncation, setNeedsTruncation] = useState(false);\n  const [bodyHeight, setBodyHeight] = useState(0);\n  const clipRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = clipRef.current;\n    if (!el) return;\n    const measure = () => {\n      const full = el.scrollHeight;\n      setBodyHeight(full);\n      setNeedsTruncation(full > TRUNCATION_HEIGHT_PX);\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rootClass = [styles['permalink-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const clipClass = [\n    styles['permalink-preview__body-clip'],\n    needsTruncation ? styles['permalink-preview__body-clip--truncated'] : '',\n    isExpanded ? styles['permalink-preview__body-clip--expanded'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div\n            className={styles['permalink-preview__dismiss-bridge']}\n            aria-hidden\n          />\n          <IconButton\n            className={styles['permalink-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label={dismissLabel}\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={styles['permalink-preview__card']}>\n        <div className={styles['permalink-preview__message']}>\n          <div className={styles['permalink-preview__header']}>\n            <UserAvatar src={avatarSrc} alt={authorName} size=\"24\" />\n            <MessageHeader username={authorName} timestamp={timestamp} />\n          </div>\n          <div className={styles['permalink-preview__body']}>\n            <div\n              ref={clipRef}\n              className={clipClass}\n              style={\n                {\n                  '--permalink-preview-body-height': `${bodyHeight}px`,\n                } as React.CSSProperties\n              }\n            >\n              {children ?? (\n                <p className={styles['permalink-preview__text']}>\n                  {messageText}\n                </p>\n              )}\n            </div>\n            {needsTruncation && (\n              <button\n                className={styles['permalink-preview__show-more']}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setIsExpanded((prev) => !prev);\n                }}\n              >\n                {isExpanded ? showLessLabel : showMoreLabel}\n              </button>\n            )}\n          </div>\n        </div>\n        <p className={styles['permalink-preview__origin']}>\n          {originalChannelLabel ?? <>Originally posted in {originalChannel}</>}\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"names":["TRUNCATION_HEIGHT_PX","PermalinkPreview","authorName","avatarSrc","timestamp","messageText","children","originalChannel","originalChannelLabel","onDismiss","dismissLabel","showMoreLabel","showLessLabel","className","isExpanded","setIsExpanded","useState","needsTruncation","setNeedsTruncation","bodyHeight","setBodyHeight","clipRef","useRef","useEffect","el","measure","full","ro","rootClass","styles","clipClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","UserAvatar","MessageHeader","e","prev"],"mappings":";;;;;;;;AASA,MAAMA,IAAuB;AAyC7B,SAAwBC,EAAiB;AAAA,EACvC,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,WAAAC,IAAY;AACd,GAA0B;AACxB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAiBC,CAAkB,IAAIF,EAAS,EAAK,GACtD,CAACG,GAAYC,CAAa,IAAIJ,EAAS,CAAC,GACxCK,IAAUC,EAAuB,IAAI;AAE3C,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAKH,EAAQ;AACnB,QAAI,CAACG,EAAI;AACT,UAAMC,IAAU,MAAM;AACpB,YAAMC,IAAOF,EAAG;AAChB,MAAAJ,EAAcM,CAAI,GAClBR,EAAmBQ,IAAO1B,CAAoB;AAAA,IAChD;AACA,IAAAyB,EAAA;AACA,UAAME,IAAK,IAAI,eAAeF,CAAO;AACrC,WAAAE,EAAG,QAAQH,CAAE,GACN,MAAMG,EAAG,WAAA;AAAA,EAClB,GAAG,CAAA,CAAE;AAEL,QAAMC,IAAY,CAACC,EAAO,mBAAmB,GAAGhB,CAAS,EACtD,OAAO,OAAO,EACd,KAAK,GAAG,GAELiB,IAAY;AAAA,IAChBD,EAAO,8BAA8B;AAAA,IACrCZ,IAAkBY,EAAO,yCAAyC,IAAI;AAAA,IACtEf,IAAae,EAAO,wCAAwC,IAAI;AAAA,EAAA,EAE/D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAWH,GACb,UAAA;AAAA,IAAAnB,KAAa,QACZ,gBAAAsB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWJ,EAAO,mCAAmC;AAAA,UACrD,eAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAEb,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWL,EAAO,4BAA4B;AAAA,UAC9C,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAYnB;AAAA,UACZ,wBAAOyB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAU,GAAI;AAAA,UAC5C,SAAS3B;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,GACF;AAAA,IAGF,gBAAAsB,EAAC,OAAA,EAAI,WAAWF,EAAO,yBAAyB,GAC9C,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,4BAA4B,GACjD,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,2BAA2B,GAChD,UAAA;AAAA,UAAA,gBAAAI,EAACI,KAAW,KAAKlC,GAAW,KAAKD,GAAY,MAAK,MAAK;AAAA,UACvD,gBAAA+B,EAACK,GAAA,EAAc,UAAUpC,GAAY,WAAAE,EAAA,CAAsB;AAAA,QAAA,GAC7D;AAAA,QACA,gBAAA2B,EAAC,OAAA,EAAI,WAAWF,EAAO,yBAAyB,GAC9C,UAAA;AAAA,UAAA,gBAAAI;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKZ;AAAA,cACL,WAAWS;AAAA,cACX,OACE;AAAA,gBACE,mCAAmC,GAAGX,CAAU;AAAA,cAAA;AAAA,cAInD,eACC,gBAAAc,EAAC,KAAA,EAAE,WAAWJ,EAAO,yBAAyB,GAC3C,UAAAxB,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAGHY,KACC,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWJ,EAAO,8BAA8B;AAAA,cAChD,SAAS,CAACU,MAAM;AACd,gBAAAA,EAAE,gBAAA,GACFxB,EAAc,CAACyB,MAAS,CAACA,CAAI;AAAA,cAC/B;AAAA,cAEC,cAAa5B,IAAgBD;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,EAAA,CAEJ;AAAA,MAAA,GACF;AAAA,wBACC,KAAA,EAAE,WAAWkB,EAAO,2BAA2B,GAC7C,eAAwB,gBAAAE,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,QAAsBzB;AAAA,MAAA,EAAA,CAAgB,EAAA,CACnE;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/permalink-preview/PermalinkPreview.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PermalinkPreview.module.css');const e={"permalink-preview":"_permalink-preview_wn42x_2","permalink-preview__dismiss-bridge":"_permalink-preview__dismiss-bridge_wn42x_12","permalink-preview__dismiss":"_permalink-preview__dismiss_wn42x_12","permalink-preview__card":"_permalink-preview__card_wn42x_37","permalink-preview__message":"_permalink-preview__message_wn42x_56","permalink-preview__header":"_permalink-preview__header_wn42x_64","permalink-preview__body":"_permalink-preview__body_wn42x_70","permalink-preview__text":"_permalink-preview__text_wn42x_76","permalink-preview__origin":"_permalink-preview__origin_wn42x_83"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PermalinkPreview.css');const e={"permalink-preview":"_permalink-preview_11wzt_13","permalink-preview__dismiss-bridge":"_permalink-preview__dismiss-bridge_11wzt_24","permalink-preview__dismiss":"_permalink-preview__dismiss_11wzt_24","permalink-preview__card":"_permalink-preview__card_11wzt_49","permalink-preview__message":"_permalink-preview__message_11wzt_68","permalink-preview__header":"_permalink-preview__header_11wzt_76","permalink-preview__body":"_permalink-preview__body_11wzt_82","permalink-preview__body-clip":"_permalink-preview__body-clip_11wzt_89","permalink-preview__body-clip--truncated":"_permalink-preview__body-clip--truncated_11wzt_108","permalink-preview__body-clip--expanded":"_permalink-preview__body-clip--expanded_11wzt_111","permalink-preview__show-more":"_permalink-preview__show-more_11wzt_117","permalink-preview__text":"_permalink-preview__text_11wzt_135","permalink-preview__origin":"_permalink-preview__origin_11wzt_142"};exports.default=e;
 //# sourceMappingURL=PermalinkPreview.module.scss.cjs.map

package/dist/components/permalink-preview/PermalinkPreview.module.scss.js

@@ -1,13 +1,17 @@
-import './PermalinkPreview.module.css';const e = {
-  "permalink-preview": "_permalink-preview_wn42x_2",
-  "permalink-preview__dismiss-bridge": "_permalink-preview__dismiss-bridge_wn42x_12",
-  "permalink-preview__dismiss": "_permalink-preview__dismiss_wn42x_12",
-  "permalink-preview__card": "_permalink-preview__card_wn42x_37",
-  "permalink-preview__message": "_permalink-preview__message_wn42x_56",
-  "permalink-preview__header": "_permalink-preview__header_wn42x_64",
-  "permalink-preview__body": "_permalink-preview__body_wn42x_70",
-  "permalink-preview__text": "_permalink-preview__text_wn42x_76",
-  "permalink-preview__origin": "_permalink-preview__origin_wn42x_83"
+import './PermalinkPreview.css';const e = {
+  "permalink-preview": "_permalink-preview_11wzt_13",
+  "permalink-preview__dismiss-bridge": "_permalink-preview__dismiss-bridge_11wzt_24",
+  "permalink-preview__dismiss": "_permalink-preview__dismiss_11wzt_24",
+  "permalink-preview__card": "_permalink-preview__card_11wzt_49",
+  "permalink-preview__message": "_permalink-preview__message_11wzt_68",
+  "permalink-preview__header": "_permalink-preview__header_11wzt_76",
+  "permalink-preview__body": "_permalink-preview__body_11wzt_82",
+  "permalink-preview__body-clip": "_permalink-preview__body-clip_11wzt_89",
+  "permalink-preview__body-clip--truncated": "_permalink-preview__body-clip--truncated_11wzt_108",
+  "permalink-preview__body-clip--expanded": "_permalink-preview__body-clip--expanded_11wzt_111",
+  "permalink-preview__show-more": "_permalink-preview__show-more_11wzt_117",
+  "permalink-preview__text": "_permalink-preview__text_11wzt_135",
+  "permalink-preview__origin": "_permalink-preview__origin_11wzt_142"
 };
 export {
   e as default

package/dist/components/permalink-preview/PermalinkPreview.module.scss.js.map

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

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__d=require("@mattermost/compass-icons/components/pin-outline.js"),d=__d?.default??__d,__l=require("@mattermost/compass-icons/components/bookmark-outline.js"),l=__l?.default??__l,a=require("../icon/Icon.cjs"),n=require("./PinnedSavedIndicators.module.scss.cjs");function r({className:s=""}){const i=[n.default["pinned-saved-indicators"],s].filter(Boolean).join(" ");return e.jsxs("div",{className:i,"aria-label":"Pinned and Saved",children:[e.jsxs("div",{className:n.default["pinned-saved-indicators__icons"],children:[e.jsx(a.default,{size:"12",glyph:e.jsx(d,{}),"aria-hidden":!0}),e.jsx(a.default,{size:"12",glyph:e.jsx(l,{}),"aria-hidden":!0})]}),e.jsxs("div",{className:n.default["pinned-saved-indicators__labels"],children:[e.jsx("span",{className:n.default["pinned-saved-indicators__label"],children:"Pinned"}),e.jsx("span",{className:n.default["pinned-saved-indicators__sep"],"aria-hidden":!0,children:"•"}),e.jsx("span",{className:n.default["pinned-saved-indicators__label"],children:"Saved"})]})]})}exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__t=require("@mattermost/compass-icons/components/pin-outline.js"),t=__t?.default??__t,__c=require("@mattermost/compass-icons/components/bookmark-outline.js"),c=__c?.default??__c,n=require("../icon/Icon.cjs"),a=require("./PinnedSavedIndicators.module.scss.cjs");function o({className:i="","aria-label":s="Pinned and Saved",pinnedLabel:d="Pinned",savedLabel:l="Saved"}){const r=[a.default["pinned-saved-indicators"],i].filter(Boolean).join(" ");return e.jsxs("div",{className:r,"aria-label":s,children:[e.jsxs("div",{className:a.default["pinned-saved-indicators__icons"],children:[e.jsx(n.default,{size:"12",glyph:e.jsx(t,{}),"aria-hidden":!0}),e.jsx(n.default,{size:"12",glyph:e.jsx(c,{}),"aria-hidden":!0})]}),e.jsxs("div",{className:a.default["pinned-saved-indicators__labels"],children:[e.jsx("span",{className:a.default["pinned-saved-indicators__label"],children:d}),e.jsx("span",{className:a.default["pinned-saved-indicators__sep"],"aria-hidden":!0,children:"•"}),e.jsx("span",{className:a.default["pinned-saved-indicators__label"],children:l})]})]})}exports.default=o;
 //# sourceMappingURL=PinnedSavedIndicators.cjs.map

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedSavedIndicators.cjs","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label=\"Pinned and Saved\">\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>Pinned</span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>Saved</span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":"qWAaA,SAAwBA,EAAsB,CAC5C,UAAAC,EAAY,EACd,EAA+B,CAC7B,MAAMC,EAAY,CAACC,UAAO,yBAAyB,EAAGF,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,aAAW,mBACpC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,gCAAgC,EACrD,SAAA,CAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,YAAQC,EAAA,CAAA,CAAe,EAAI,cAAW,EAAA,CAAC,EACvDF,EAAAA,IAACC,EAAAA,SAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,EAAA,CAAA,CAAoB,EAAI,cAAW,EAAA,CAAC,CAAA,EAC9D,EACAJ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,gCAAgC,EAAG,SAAA,SAAM,EACjEE,EAAAA,IAAC,QAAK,UAAWF,UAAO,8BAA8B,EAAG,cAAW,GAAC,SAAA,IAErE,QACC,OAAA,CAAK,UAAWA,EAAAA,QAAO,gCAAgC,EAAG,SAAA,OAAA,CAAK,CAAA,CAAA,CAClE,CAAA,EACF,CAEJ"}
+{"version":3,"file":"PinnedSavedIndicators.cjs","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n  /** Accessible name for the row. Default: \"Pinned and Saved\". */\n  'aria-label'?: string;\n  /** Default: \"Pinned\". */\n  pinnedLabel?: ReactNode;\n  /** Default: \"Saved\". */\n  savedLabel?: ReactNode;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n  'aria-label': ariaLabel = 'Pinned and Saved',\n  pinnedLabel = 'Pinned',\n  savedLabel = 'Saved',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label={ariaLabel}>\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {pinnedLabel}\n        </span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {savedLabel}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","ariaLabel","pinnedLabel","savedLabel","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":"qWAoBA,SAAwBA,EAAsB,CAC5C,UAAAC,EAAY,GACZ,aAAcC,EAAY,mBAC1B,YAAAC,EAAc,SACd,WAAAC,EAAa,OACf,EAA+B,CAC7B,MAAMC,EAAY,CAACC,UAAO,yBAAyB,EAAGL,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,aAAYH,EACrC,SAAA,CAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,gCAAgC,EACrD,SAAA,CAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,YAAQC,EAAA,CAAA,CAAe,EAAI,cAAW,EAAA,CAAC,EACvDF,EAAAA,IAACC,EAAAA,SAAK,KAAK,KAAK,MAAOD,EAAAA,IAACG,EAAA,CAAA,CAAoB,EAAI,cAAW,EAAA,CAAC,CAAA,EAC9D,EACAJ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,gCAAgC,EACrD,SAAAH,EACH,EACAK,EAAAA,IAAC,QAAK,UAAWF,UAAO,8BAA8B,EAAG,cAAW,GAAC,SAAA,IAErE,QACC,OAAA,CAAK,UAAWA,EAAAA,QAAO,gCAAgC,EACrD,SAAAF,CAAA,CACH,CAAA,CAAA,CACF,CAAA,EACF,CAEJ"}

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.css

@@ -0,0 +1 @@
+._pinned-saved-indicators_h2nuh_13{display:flex;align-items:center}._pinned-saved-indicators__icons_h2nuh_17{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xxxs);flex-shrink:0;color:var(--link-color)}._pinned-saved-indicators__labels_h2nuh_25{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:0 var(--spacing-xxxs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);white-space:nowrap}._pinned-saved-indicators__label_h2nuh_25{color:var(--link-color)}._pinned-saved-indicators__sep_h2nuh_39{color:rgba(var(--center-channel-color-rgb),.64)}

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.d.ts

@@ -1,9 +1,16 @@
+import { ReactNode } from 'react';
 export interface PinnedSavedIndicatorsProps {
     /** Optional CSS class on the root. */
     className?: string;
+    /** Accessible name for the row. Default: "Pinned and Saved". */
+    'aria-label'?: string;
+    /** Default: "Pinned". */
+    pinnedLabel?: ReactNode;
+    /** Default: "Saved". */
+    savedLabel?: ReactNode;
 }
 /**
  * Pinned + Saved row shown above a message when applicable (Patterns — Message).
  */
-export default function PinnedSavedIndicators({ className, }: PinnedSavedIndicatorsProps): import("react/jsx-runtime").JSX.Element;
+export default function PinnedSavedIndicators({ className, 'aria-label': ariaLabel, pinnedLabel, savedLabel, }: PinnedSavedIndicatorsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PinnedSavedIndicators.d.ts.map

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedSavedIndicators.d.ts","sourceRoot":"","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,SAAc,GACf,EAAE,0BAA0B,2CAoB5B"}
+{"version":3,"file":"PinnedSavedIndicators.d.ts","sourceRoot":"","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wBAAwB;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,SAAc,EACd,YAAY,EAAE,SAA8B,EAC5C,WAAsB,EACtB,UAAoB,GACrB,EAAE,0BAA0B,2CAwB5B"}

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.js

@@ -1,25 +1,28 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import __r from "@mattermost/compass-icons/components/pin-outline.js";const r=__r&&__r.default?__r.default:__r;
-import __o from "@mattermost/compass-icons/components/bookmark-outline.js";const o=__o&&__o.default?__o.default:__o;
-import a from "../icon/Icon.js";
-import e from "./PinnedSavedIndicators.module.scss.js";
-function v({
-  className: d = ""
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import __c from "@mattermost/compass-icons/components/pin-outline.js";const c=__c&&__c.default?__c.default:__c;
+import __t from "@mattermost/compass-icons/components/bookmark-outline.js";const t=__t&&__t.default?__t.default:__t;
+import n from "../icon/Icon.js";
+import a from "./PinnedSavedIndicators.module.scss.js";
+function f({
+  className: d = "",
+  "aria-label": s = "Pinned and Saved",
+  pinnedLabel: r = "Pinned",
+  savedLabel: l = "Saved"
 }) {
-  const s = [e["pinned-saved-indicators"], d].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { className: s, "aria-label": "Pinned and Saved", children: [
-    /* @__PURE__ */ n("div", { className: e["pinned-saved-indicators__icons"], children: [
-      /* @__PURE__ */ i(a, { size: "12", glyph: /* @__PURE__ */ i(r, {}), "aria-hidden": !0 }),
-      /* @__PURE__ */ i(a, { size: "12", glyph: /* @__PURE__ */ i(o, {}), "aria-hidden": !0 })
+  const o = [a["pinned-saved-indicators"], d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { className: o, "aria-label": s, children: [
+    /* @__PURE__ */ e("div", { className: a["pinned-saved-indicators__icons"], children: [
+      /* @__PURE__ */ i(n, { size: "12", glyph: /* @__PURE__ */ i(c, {}), "aria-hidden": !0 }),
+      /* @__PURE__ */ i(n, { size: "12", glyph: /* @__PURE__ */ i(t, {}), "aria-hidden": !0 })
     ] }),
-    /* @__PURE__ */ n("div", { className: e["pinned-saved-indicators__labels"], children: [
-      /* @__PURE__ */ i("span", { className: e["pinned-saved-indicators__label"], children: "Pinned" }),
-      /* @__PURE__ */ i("span", { className: e["pinned-saved-indicators__sep"], "aria-hidden": !0, children: "•" }),
-      /* @__PURE__ */ i("span", { className: e["pinned-saved-indicators__label"], children: "Saved" })
+    /* @__PURE__ */ e("div", { className: a["pinned-saved-indicators__labels"], children: [
+      /* @__PURE__ */ i("span", { className: a["pinned-saved-indicators__label"], children: r }),
+      /* @__PURE__ */ i("span", { className: a["pinned-saved-indicators__sep"], "aria-hidden": !0, children: "•" }),
+      /* @__PURE__ */ i("span", { className: a["pinned-saved-indicators__label"], children: l })
     ] })
   ] });
 }
 export {
-  v as default
+  f as default
 };
 //# sourceMappingURL=PinnedSavedIndicators.js.map

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedSavedIndicators.js","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label=\"Pinned and Saved\">\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>Pinned</span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>Saved</span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":";;;;;AAaA,SAAwBA,EAAsB;AAAA,EAC5C,WAAAC,IAAY;AACd,GAA+B;AAC7B,QAAMC,IAAY,CAACC,EAAO,yBAAyB,GAAGF,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GAAW,cAAW,oBACpC,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,gCAAgC,GACrD,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,yBAAQC,GAAA,CAAA,CAAe,GAAI,eAAW,GAAA,CAAC;AAAA,MACvD,gBAAAF,EAACC,KAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,GAAA,CAAA,CAAoB,GAAI,eAAW,GAAA,CAAC;AAAA,IAAA,GAC9D;AAAA,IACA,gBAAAJ,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,gCAAgC,GAAG,UAAA,UAAM;AAAA,MACjE,gBAAAE,EAAC,UAAK,WAAWF,EAAO,8BAA8B,GAAG,eAAW,IAAC,UAAA,KAErE;AAAA,wBACC,QAAA,EAAK,WAAWA,EAAO,gCAAgC,GAAG,UAAA,QAAA,CAAK;AAAA,IAAA,EAAA,CAClE;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PinnedSavedIndicators.js","sources":["../../../src/components/pinned-saved-indicators/PinnedSavedIndicators.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport PinOutlineIcon from '@mattermost/compass-icons/components/pin-outline';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport Icon from '@/components/icon/Icon';\nimport styles from './PinnedSavedIndicators.module.scss';\n\nexport interface PinnedSavedIndicatorsProps {\n  /** Optional CSS class on the root. */\n  className?: string;\n  /** Accessible name for the row. Default: \"Pinned and Saved\". */\n  'aria-label'?: string;\n  /** Default: \"Pinned\". */\n  pinnedLabel?: ReactNode;\n  /** Default: \"Saved\". */\n  savedLabel?: ReactNode;\n}\n\n/**\n * Pinned + Saved row shown above a message when applicable (Patterns — Message).\n */\nexport default function PinnedSavedIndicators({\n  className = '',\n  'aria-label': ariaLabel = 'Pinned and Saved',\n  pinnedLabel = 'Pinned',\n  savedLabel = 'Saved',\n}: PinnedSavedIndicatorsProps) {\n  const rootClass = [styles['pinned-saved-indicators'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} aria-label={ariaLabel}>\n      <div className={styles['pinned-saved-indicators__icons']}>\n        <Icon size=\"12\" glyph={<PinOutlineIcon />} aria-hidden />\n        <Icon size=\"12\" glyph={<BookmarkOutlineIcon />} aria-hidden />\n      </div>\n      <div className={styles['pinned-saved-indicators__labels']}>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {pinnedLabel}\n        </span>\n        <span className={styles['pinned-saved-indicators__sep']} aria-hidden>\n          •\n        </span>\n        <span className={styles['pinned-saved-indicators__label']}>\n          {savedLabel}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"names":["PinnedSavedIndicators","className","ariaLabel","pinnedLabel","savedLabel","rootClass","styles","jsxs","jsx","Icon","PinOutlineIcon","BookmarkOutlineIcon"],"mappings":";;;;;AAoBA,SAAwBA,EAAsB;AAAA,EAC5C,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AACf,GAA+B;AAC7B,QAAMC,IAAY,CAACC,EAAO,yBAAyB,GAAGL,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWF,GAAW,cAAYH,GACrC,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,gCAAgC,GACrD,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,yBAAQC,GAAA,CAAA,CAAe,GAAI,eAAW,GAAA,CAAC;AAAA,MACvD,gBAAAF,EAACC,KAAK,MAAK,MAAK,OAAO,gBAAAD,EAACG,GAAA,CAAA,CAAoB,GAAI,eAAW,GAAA,CAAC;AAAA,IAAA,GAC9D;AAAA,IACA,gBAAAJ,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,gCAAgC,GACrD,UAAAH,GACH;AAAA,MACA,gBAAAK,EAAC,UAAK,WAAWF,EAAO,8BAA8B,GAAG,eAAW,IAAC,UAAA,KAErE;AAAA,wBACC,QAAA,EAAK,WAAWA,EAAO,gCAAgC,GACrD,UAAAF,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PinnedSavedIndicators.module.css');const e={"pinned-saved-indicators":"_pinned-saved-indicators_xrsyx_2","pinned-saved-indicators__icons":"_pinned-saved-indicators__icons_xrsyx_6","pinned-saved-indicators__labels":"_pinned-saved-indicators__labels_xrsyx_14","pinned-saved-indicators__label":"_pinned-saved-indicators__label_xrsyx_14","pinned-saved-indicators__sep":"_pinned-saved-indicators__sep_xrsyx_28"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PinnedSavedIndicators.css');const e={"pinned-saved-indicators":"_pinned-saved-indicators_h2nuh_13","pinned-saved-indicators__icons":"_pinned-saved-indicators__icons_h2nuh_17","pinned-saved-indicators__labels":"_pinned-saved-indicators__labels_h2nuh_25","pinned-saved-indicators__label":"_pinned-saved-indicators__label_h2nuh_25","pinned-saved-indicators__sep":"_pinned-saved-indicators__sep_h2nuh_39"};exports.default=e;
 //# sourceMappingURL=PinnedSavedIndicators.module.scss.cjs.map

package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.module.scss.js

@@ -1,11 +1,11 @@
-import './PinnedSavedIndicators.module.css';const s = {
-  "pinned-saved-indicators": "_pinned-saved-indicators_xrsyx_2",
-  "pinned-saved-indicators__icons": "_pinned-saved-indicators__icons_xrsyx_6",
-  "pinned-saved-indicators__labels": "_pinned-saved-indicators__labels_xrsyx_14",
-  "pinned-saved-indicators__label": "_pinned-saved-indicators__label_xrsyx_14",
-  "pinned-saved-indicators__sep": "_pinned-saved-indicators__sep_xrsyx_28"
+import './PinnedSavedIndicators.css';const n = {
+  "pinned-saved-indicators": "_pinned-saved-indicators_h2nuh_13",
+  "pinned-saved-indicators__icons": "_pinned-saved-indicators__icons_h2nuh_17",
+  "pinned-saved-indicators__labels": "_pinned-saved-indicators__labels_h2nuh_25",
+  "pinned-saved-indicators__label": "_pinned-saved-indicators__label_h2nuh_25",
+  "pinned-saved-indicators__sep": "_pinned-saved-indicators__sep_h2nuh_39"
 };
 export {
-  s as default
+  n as default
 };
 //# sourceMappingURL=PinnedSavedIndicators.module.scss.js.map

package/dist/components/popover-menu/PopoverMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),p=require("../scrollbar/Scrollbar.cjs"),n=require("./PopoverMenu.module.scss.cjs");function i({variant:e="parent",children:o,className:r="",...l}){const t=[n.default["popover-menu"],e==="child"?n.default["popover-menu--child"]:n.default["popover-menu--parent"],r].filter(Boolean).join(" ");return u.jsx("div",{className:t,...l,children:o})}function a({maxHeight:e,children:o,className:r=""}){const l=typeof e=="number"?`${e}px`:e;return u.jsx(p.default,{className:[n.default["popover-menu__scroll"],r].filter(Boolean).join(" "),style:{maxHeight:l},children:o})}function s({children:e,className:o="",...r}){return u.jsx("p",{className:[n.default["popover-menu__title"],o].filter(Boolean).join(" "),...r,children:e})}function v({children:e,className:o="",...r}){return u.jsx("div",{role:"group",className:[n.default["popover-menu__group"],o].filter(Boolean).join(" "),...r,children:e})}function c({children:e,className:o="",...r}){return u.jsx("p",{className:[n.default["popover-menu__group-title"],o].filter(Boolean).join(" "),...r,children:e})}function f({className:e="",...o}){return u.jsx("div",{className:[n.default["popover-menu__divider"],e].filter(Boolean).join(" "),role:"separator",...o})}exports.PopoverMenuDivider=f;exports.PopoverMenuGroup=v;exports.PopoverMenuGroupTitle=c;exports.PopoverMenuScroll=a;exports.PopoverMenuTitle=s;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),p=require("react"),_=require("../../hooks/use-popover-transition.cjs"),j=require("../scrollbar/Scrollbar.cjs"),r=require("./PopoverMenu.module.scss.cjs");function M({variant:e="parent",open:o,onExited:n,children:s,className:v="",...f}){const{mounted:t,visible:d}=_.usePopoverTransition(o??!0),l=o!==void 0,a=p.useRef(t),i=p.useRef(n);if(i.current=n,p.useEffect(()=>{var c;a.current&&!t&&l&&((c=i.current)==null||c.call(i)),a.current=t},[t,l]),l&&!t)return null;const m=[r.default["popover-menu"],e==="child"?r.default["popover-menu--child"]:r.default["popover-menu--parent"],l&&r.default["popover-menu--transition"],l&&d&&r.default["popover-menu--visible"],v].filter(Boolean).join(" ");return u.jsx("div",{className:m,...f,children:s})}function P({maxHeight:e,children:o,className:n=""}){const s=typeof e=="number"?`${e}px`:e;return u.jsx(j.default,{className:[r.default["popover-menu__scroll"],n].filter(Boolean).join(" "),style:{maxHeight:s},children:u.jsx("div",{className:r.default["popover-menu__scroll-content"],children:o})})}function x({children:e,className:o="",...n}){return u.jsx("p",{className:[r.default["popover-menu__title"],o].filter(Boolean).join(" "),...n,children:e})}function N({children:e,className:o="",...n}){return u.jsx("div",{role:"group",className:[r.default["popover-menu__group"],o].filter(Boolean).join(" "),...n,children:e})}function T({children:e,className:o="",...n}){return u.jsx("p",{className:[r.default["popover-menu__group-title"],o].filter(Boolean).join(" "),...n,children:e})}function b({className:e="",...o}){return u.jsx("div",{className:[r.default["popover-menu__divider"],e].filter(Boolean).join(" "),role:"separator",...o})}exports.PopoverMenuDivider=b;exports.PopoverMenuGroup=N;exports.PopoverMenuGroupTitle=T;exports.PopoverMenuScroll=P;exports.PopoverMenuTitle=x;exports.default=M;
 //# sourceMappingURL=PopoverMenu.cjs.map

package/dist/components/popover-menu/PopoverMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.cjs","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH =\n    typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      {children}\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuDividerProps extends HTMLAttributes<HTMLDivElement> {}\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className].filter(Boolean).join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","children","className","rest","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":"oOAgBA,SAAwBA,EAAY,CAClC,QAAAC,EAAU,SACV,SAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAqB,CACnB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,cAAc,EACrBL,IAAY,QACRK,EAAAA,QAAO,qBAAqB,EAC5BA,EAAAA,QAAO,sBAAsB,EACjCH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,aACG,MAAA,CAAI,UAAWE,EAAY,GAAGD,EAC5B,SAAAF,EACH,CAEJ,CAUO,SAASK,EAAkB,CAChC,UAAAC,EACA,SAAAN,EACA,UAAAC,EAAY,EACd,EAA2B,CACzB,MAAMM,EACJ,OAAOD,GAAc,SAAW,GAAGA,CAAS,KAAOA,EACrD,OACEE,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAW,CAACL,UAAO,sBAAsB,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,UAAWM,CAAA,EAEnB,SAAAP,CAAA,CAAA,CAGP,CAOO,SAASU,EAAiB,CAC/B,SAAAV,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEM,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,qBAAqB,EAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7E,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CASO,SAASW,EAAiB,CAC/B,SAAAX,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEM,EAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAW,CAACJ,UAAO,qBAAqB,EAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7E,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAOO,SAASY,EAAsB,CACpC,SAAAZ,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA+B,CAC7B,OACEM,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,2BAA2B,EAAGH,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAKO,SAASa,EAAmB,CACjC,UAAAZ,EAAY,GACZ,GAAGC,CACL,EAA4B,CAC1B,OACEM,EAAAA,IAAC,MAAA,CACC,UAAW,CAACJ,UAAO,uBAAuB,EAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAChF,KAAK,YACJ,GAAGC,CAAA,CAAA,CAGV"}
+{"version":3,"file":"PopoverMenu.cjs","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  /**\n   * Controlled visibility with the Compass popover transition (scale + fade in,\n   * reverse on close); the menu unmounts after the exit. Omit to always render\n   * without transition. The host owns the state and positioning.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the menu unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  open,\n  onExited,\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  const transitioned = open !== undefined;\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  onExitedRef.current = onExited;\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && transitioned) {\n      onExitedRef.current?.();\n    }\n    wasMounted.current = mounted;\n  }, [mounted, transitioned]);\n\n  if (transitioned && !mounted) return null;\n\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    transitioned && styles['popover-menu--transition'],\n    transitioned && visible && styles['popover-menu--visible'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region, including its vertical padding (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/**\n * Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`.\n * It owns the menu's vertical padding, so the region runs edge to edge and rows scroll under the\n * border instead of stopping 8px short of it.\n */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      <div className={styles['popover-menu__scroll-content']}>{children}</div>\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","open","onExited","children","className","rest","mounted","visible","usePopoverTransition","transitioned","wasMounted","useRef","onExitedRef","useEffect","_a","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":"ySA0BA,SAAwBA,EAAY,CAClC,QAAAC,EAAU,SACV,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAqB,CACnB,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAA,EAAYC,EAAAA,qBAAqBP,GAAQ,EAAI,EACxDQ,EAAeR,IAAS,OACxBS,EAAaC,EAAAA,OAAOL,CAAO,EAC3BM,EAAcD,EAAAA,OAAOT,CAAQ,EAUnC,GATAU,EAAY,QAAUV,EAEtBW,EAAAA,UAAU,IAAM,OACVH,EAAW,SAAW,CAACJ,GAAWG,KACpCK,EAAAF,EAAY,UAAZ,MAAAE,EAAA,KAAAF,IAEFF,EAAW,QAAUJ,CACvB,EAAG,CAACA,EAASG,CAAY,CAAC,EAEtBA,GAAgB,CAACH,EAAS,OAAO,KAErC,MAAMS,EAAY,CAChBC,EAAAA,QAAO,cAAc,EACrBhB,IAAY,QACRgB,EAAAA,QAAO,qBAAqB,EAC5BA,EAAAA,QAAO,sBAAsB,EACjCP,GAAgBO,EAAAA,QAAO,0BAA0B,EACjDP,GAAgBF,GAAWS,EAAAA,QAAO,uBAAuB,EACzDZ,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,aACG,MAAA,CAAI,UAAWW,EAAY,GAAGV,EAC5B,SAAAF,EACH,CAEJ,CAcO,SAASc,EAAkB,CAChC,UAAAC,EACA,SAAAf,EACA,UAAAC,EAAY,EACd,EAA2B,CACzB,MAAMe,EAAO,OAAOD,GAAc,SAAW,GAAGA,CAAS,KAAOA,EAChE,OACEE,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAW,CAACL,UAAO,sBAAsB,EAAGZ,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,UAAWe,CAAA,EAEpB,eAAC,MAAA,CAAI,UAAWH,UAAO,8BAA8B,EAAI,SAAAb,CAAA,CAAS,CAAA,CAAA,CAGxE,CAOO,SAASmB,EAAiB,CAC/B,SAAAnB,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEe,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,qBAAqB,EAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CASO,SAASoB,EAAiB,CAC/B,SAAApB,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEe,EAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAW,CAACJ,UAAO,qBAAqB,EAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAOO,SAASqB,EAAsB,CACpC,SAAArB,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA+B,CAC7B,OACEe,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,2BAA2B,EAAGZ,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAKO,SAASsB,EAAmB,CACjC,UAAArB,EAAY,GACZ,GAAGC,CACL,EAA4B,CAC1B,OACEe,EAAAA,IAAC,MAAA,CACC,UAAW,CAACJ,UAAO,uBAAuB,EAAGZ,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,YACJ,GAAGC,CAAA,CAAA,CAGV"}

package/dist/components/popover-menu/PopoverMenu.css

@@ -0,0 +1 @@
+._popover-menu_1xe3r_13{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;min-width:212px;max-width:496px;width:max-content;padding:var(--spacing-xs) 0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-m);color:var(--center-channel-color)}._popover-menu_1xe3r_13:has(>._popover-menu__scroll_1xe3r_27){padding:0;overflow:hidden}._popover-menu_1xe3r_13:has(>._popover-menu__scroll_1xe3r_27)>._popover-menu__title_1xe3r_31:first-child{margin-top:var(--spacing-xs)}._popover-menu--parent_1xe3r_34{box-shadow:var(--elevation-4)}._popover-menu--child_1xe3r_37{box-shadow:var(--elevation-5)}._popover-menu--transition_1xe3r_40{opacity:0;transform:scale(.9);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}@media(prefers-reduced-motion:reduce){._popover-menu--transition_1xe3r_40{transform:none;transition:none}}._popover-menu--visible_1xe3r_53{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}@media(prefers-reduced-motion:reduce){._popover-menu--visible_1xe3r_53{transform:none;transition:none}}._popover-menu__scroll_1xe3r_27{min-height:0}._popover-menu__scroll-content_1xe3r_68{padding:var(--spacing-xs) 0}._popover-menu__title_1xe3r_31{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);letter-spacing:var(--letter-spacing-normal);color:rgba(var(--center-channel-color-rgb),.75)}._popover-menu__group_1xe3r_82{display:flex;flex-direction:column;align-items:stretch}._popover-menu__group-title_1xe3r_87{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xxs);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;text-transform:uppercase;color:rgba(var(--center-channel-color-rgb),.64)}._popover-menu__divider_1xe3r_99{flex-shrink:0;width:100%;padding:var(--spacing-xs) 0}._popover-menu__divider_1xe3r_99:before{content:"";display:block;width:100%;border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}

package/dist/components/popover-menu/PopoverMenu.d.ts

@@ -2,6 +2,14 @@ import { HTMLAttributes, ReactNode } from 'react';
 export interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {
     /** Parent menus use Elevation 4; nested child menus use Elevation 5. */
     variant?: 'parent' | 'child';
+    /**
+     * Controlled visibility with the Compass popover transition (scale + fade in,
+     * reverse on close); the menu unmounts after the exit. Omit to always render
+     * without transition. The host owns the state and positioning.
+     */
+    open?: boolean;
+    /** Called after the exit transition finishes and the menu unmounts (only when `open` is controlled). */
+    onExited?: () => void;
     children: ReactNode;
 }
 /**
@@ -10,14 +18,18 @@ export interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {
  * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item
  * list should scroll while a {@link PopoverMenuTitle} stays pinned.
  */
-export default function PopoverMenu({ variant, children, className, ...rest }: PopoverMenuProps): import("react/jsx-runtime").JSX.Element;
+export default function PopoverMenu({ variant, open, onExited, children, className, ...rest }: PopoverMenuProps): import("react/jsx-runtime").JSX.Element | null;
 export interface PopoverMenuScrollProps {
     children: ReactNode;
-    /** Maximum height of the scrollable region (coerces numbers to px). */
+    /** Maximum height of the scrollable region, including its vertical padding (coerces numbers to px). */
     maxHeight: string | number;
     className?: string;
 }
-/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */
+/**
+ * Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`.
+ * It owns the menu's vertical padding, so the region runs edge to edge and rows scroll under the
+ * border instead of stopping 8px short of it.
+ */
 export declare function PopoverMenuScroll({ maxHeight, children, className, }: PopoverMenuScrollProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {
     children: ReactNode;
@@ -36,8 +48,7 @@ export interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraph
 }
 /** Optional label for a `PopoverMenuGroup`. */
 export declare function PopoverMenuGroupTitle({ children, className, ...rest }: PopoverMenuGroupTitleProps): import("react/jsx-runtime").JSX.Element;
-export interface PopoverMenuDividerProps extends HTMLAttributes<HTMLDivElement> {
-}
+export type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;
 /** Horizontal rule between groups or below a menu title. */
 export declare function PopoverMenuDivider({ className, ...rest }: PopoverMenuDividerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PopoverMenu.d.ts.map

package/dist/components/popover-menu/PopoverMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.d.ts","sourceRoot":"","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,wEAAwE;IACxE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAkB,EAClB,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAgBlB;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uGAAuG;AACvG,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,SAAc,GACf,EAAE,sBAAsB,2CAaxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uHAAuH;AACvH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CASvB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAUvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,+CAA+C;AAC/C,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,0BAA0B,2CAW5B;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;CAAG;AAElF,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAQzB"}
+{"version":3,"file":"PopoverMenu.d.ts","sourceRoot":"","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,wEAAwE;IACxE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wGAAwG;IACxG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,gBAAgB,kDAiClB;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,uGAAuG;IACvG,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,SAAc,GACf,EAAE,sBAAsB,2CAYxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uHAAuH;AACvH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAWvB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAYvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,+CAA+C;AAC/C,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,0BAA0B,2CAW5B;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAErE,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAUzB"}