@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.13

package/dist/components/permalink-preview/PermalinkPreview.d.ts

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 export interface PermalinkPreviewProps {
-    /** Sender's display name. */
+    /** Sender's display name. Kept as `string`: it's also the avatar's alt text. */
     authorName?: string;
     /** Avatar image src. */
     avatarSrc: string;
     /** Timestamp label. */
-    timestamp?: string;
+    timestamp?: React.ReactNode;
     /** The quoted message body text. Ignored when `children` is provided. */
-    messageText?: string;
+    messageText?: React.ReactNode;
     /**
      * Rich content to render in the message body instead of the plain `messageText` string.
      * Use this to embed structured content such as attachment cards or formatted fields.
@@ -15,9 +15,20 @@ export interface PermalinkPreviewProps {
      */
     children?: React.ReactNode;
     /** "Originally posted in ~Channel" footer text. */
-    originalChannel?: string;
+    originalChannel?: React.ReactNode;
+    /**
+     * Full footer line. Default: `Originally posted in {originalChannel}`.
+     * Pass a translated node to localize the surrounding copy.
+     */
+    originalChannelLabel?: React.ReactNode;
     /** Called when the dismiss control is clicked. Shown on hover when provided. */
     onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Default: "Remove permalink preview". */
+    dismissLabel?: string;
+    /** Expand toggle text. Default: "Show more". */
+    showMoreLabel?: React.ReactNode;
+    /** Collapse toggle text. Default: "Show less". */
+    showLessLabel?: React.ReactNode;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -26,5 +37,5 @@ export interface PermalinkPreviewProps {
  * Sender, timestamp, body, and origin channel — enough context to recognise the quoted
  * message without leaving where you are.
  */
-export default function PermalinkPreview({ authorName, avatarSrc, timestamp, messageText, children, originalChannel, onDismiss, className, }: PermalinkPreviewProps): import("react/jsx-runtime").JSX.Element;
+export default function PermalinkPreview({ authorName, avatarSrc, timestamp, messageText, children, originalChannel, originalChannelLabel, onDismiss, dismissLabel, showMoreLabel, showLessLabel, className, }: PermalinkPreviewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PermalinkPreview.d.ts.map

package/dist/components/permalink-preview/PermalinkPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PermalinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,UAA4B,EAC5B,SAAS,EACT,SAAsB,EACtB,WAA0J,EAC1J,QAAQ,EACR,eAAgC,EAChC,SAAS,EACT,SAAc,GACf,EAAE,qBAAqB,2CA4FvB"}
+{"version":3,"file":"PermalinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,MAAM,WAAW,qBAAqB;IACpC,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,UAA4B,EAC5B,SAAS,EACT,SAAsB,EACtB,WAA0J,EAC1J,QAAQ,EACR,eAAgC,EAChC,oBAAoB,EACpB,SAAS,EACT,YAAyC,EACzC,aAA2B,EAC3B,aAA2B,EAC3B,SAAc,GACf,EAAE,qBAAqB,2CA4FvB"}

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

@@ -1,41 +1,45 @@
-import { jsxs as r, Fragment as C, jsx as i } from "react/jsx-runtime";
-import { useState as l, useRef as H, useEffect as I } from "react";
-import R from "../user-avatar/UserAvatar.js";
-import A from "../message-header/MessageHeader.js";
-import T from "../icon/Icon.js";
-import j from "../icon-button/IconButton.js";
-import __z from "@mattermost/compass-icons/components/close.js";const z=__z&&__z.default?__z.default:__z;
+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";
-const B = 100;
-function G({
+const O = 100;
+function D({
   authorName: n = "Leonard Riley",
-  avatarSrc: v,
-  timestamp: u = "10:43 AM",
-  messageText: _ = "At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",
-  children: f,
-  originalChannel: h = "~Desktop App",
+  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,
-  className: w = ""
+  dismissLabel: g = "Remove permalink preview",
+  showMoreLabel: N = "Show more",
+  showLessLabel: y = "Show less",
+  className: b = ""
 }) {
-  const [t, k] = l(!1), [p, g] = l(!1), [N, y] = l(0), m = H(null);
-  I(() => {
+  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;
-      y(d), g(d > B);
+      I(d), C(d > O);
     };
     a();
     const c = new ResizeObserver(a);
     return c.observe(s), () => c.disconnect();
   }, []);
-  const b = [e["permalink-preview"], w].filter(Boolean).join(" "), x = [
+  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: b, children: [
-    o != null && /* @__PURE__ */ r(C, { children: [
+  return /* @__PURE__ */ r("div", { className: R, children: [
+    o != null && /* @__PURE__ */ r(v, { children: [
       /* @__PURE__ */ i(
         "div",
         {
@@ -44,13 +48,13 @@ function G({
         }
       ),
       /* @__PURE__ */ i(
-        j,
+        P,
         {
           className: e["permalink-preview__dismiss"],
           size: "x-small",
           padding: "compact",
-          "aria-label": "Remove permalink preview",
-          icon: /* @__PURE__ */ i(T, { size: "12", glyph: /* @__PURE__ */ i(z, {}) }),
+          "aria-label": g,
+          icon: /* @__PURE__ */ i(E, { size: "12", glyph: /* @__PURE__ */ i(M, {}) }),
           onClick: o
         }
       )
@@ -58,19 +62,19 @@ function G({
     /* @__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(R, { src: v, alt: n, size: "24" }),
-          /* @__PURE__ */ i(A, { username: n, timestamp: u })
+          /* @__PURE__ */ i(z, { src: u, alt: n, size: "24" }),
+          /* @__PURE__ */ i(B, { username: n, timestamp: _ })
         ] }),
         /* @__PURE__ */ r("div", { className: e["permalink-preview__body"], children: [
           /* @__PURE__ */ i(
             "div",
             {
               ref: m,
-              className: x,
+              className: A,
               style: {
-                "--permalink-preview-body-height": `${N}px`
+                "--permalink-preview-body-height": `${H}px`
               },
-              children: f ?? /* @__PURE__ */ i("p", { className: e["permalink-preview__text"], children: _ })
+              children: h ?? /* @__PURE__ */ i("p", { className: e["permalink-preview__text"], children: f })
             }
           ),
           p && /* @__PURE__ */ i(
@@ -78,21 +82,21 @@ function G({
             {
               className: e["permalink-preview__show-more"],
               onClick: (s) => {
-                s.stopPropagation(), k((a) => !a);
+                s.stopPropagation(), x((a) => !a);
               },
-              children: t ? "Show less" : "Show more"
+              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 ",
-        h
-      ] })
+        w
+      ] }) })
     ] })
   ] });
 }
 export {
-  G 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 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. */\n  authorName?: string;\n  /** Avatar image src. */\n  avatarSrc: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** The quoted message body text. Ignored when `children` is provided. */\n  messageText?: string;\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?: 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  children,\n  originalChannel = '~Desktop App',\n  onDismiss,\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=\"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            <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 ? 'Show less' : 'Show more'}\n              </button>\n            )}\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":["TRUNCATION_HEIGHT_PX","PermalinkPreview","authorName","avatarSrc","timestamp","messageText","children","originalChannel","onDismiss","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":"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"}
+{"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":"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"}

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.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/popover-notice/PopoverNotice.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__x=require("@mattermost/compass-icons/components/close.js"),x=__x?.default??__x,__h=require("@mattermost/compass-icons/components/information-outline.js"),h=__h?.default??__h,__m=require("@mattermost/compass-icons/components/check-circle-outline.js"),m=__m?.default??__m,__g=require("@mattermost/compass-icons/components/alert-circle-outline.js"),g=__g?.default??__g,__C=require("@mattermost/compass-icons/components/alert-outline.js"),C=__C?.default??__C,N=require("../button/Button.cjs"),I=require("../checkbox/Checkbox.cjs"),q=require("../icon-button/IconButton.cjs"),s=require("../icon/Icon.cjs"),o=require("./PopoverNotice.module.scss.cjs"),z={info:e.jsx(s.default,{size:"20",glyph:e.jsx(h,{})}),success:e.jsx(s.default,{size:"20",glyph:e.jsx(m,{})}),warning:e.jsx(s.default,{size:"20",glyph:e.jsx(g,{})}),danger:e.jsx(s.default,{size:"20",glyph:e.jsx(C,{})})},y={info:o.default["popover-notice__icon--info"],success:o.default["popover-notice__icon--success"],warning:o.default["popover-notice__icon--warning"],danger:o.default["popover-notice__icon--danger"]};function A({title:a,children:u,variant:n,icon:c,actions:i,showCheckbox:d=!1,checkboxLabel:p="Don't show this confirmation again",onClose:r,className:f=""}){const l=c??(n?z[n]:null),_=!c&&n?y[n]:"",j=[o.default["popover-notice"],l==null?o.default["popover-notice--no-icon"]:"",f].filter(Boolean).join(" ");return e.jsxs("div",{className:j,children:[e.jsxs("div",{className:o.default["popover-notice__content"],children:[l!=null&&e.jsx("div",{className:[o.default["popover-notice__icon"],_].filter(Boolean).join(" "),"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:l})}),e.jsxs("div",{className:o.default["popover-notice__body"],children:[e.jsx("div",{className:o.default["popover-notice__title-row"],children:e.jsx("span",{className:o.default["popover-notice__title"],children:a})}),e.jsx("div",{className:o.default["popover-notice__description"],children:u}),i&&i.length>0&&e.jsx("div",{className:o.default["popover-notice__actions"],children:i.map((t,v)=>e.jsx(N.default,{emphasis:t.emphasis??"primary",size:"small",onClick:t.onClick,children:t.label},v))}),d&&e.jsx(I.default,{size:"medium",children:p})]})]}),r&&e.jsx(q.default,{className:o.default["popover-notice__close"],"aria-label":"Close",size:"small",icon:e.jsx(s.default,{size:"16",glyph:e.jsx(x,{})}),onClick:r})]})}exports.default=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__g=require("@mattermost/compass-icons/components/close.js"),g=__g?.default??__g,__N=require("@mattermost/compass-icons/components/information-outline.js"),N=__N?.default??__N,__C=require("@mattermost/compass-icons/components/check-circle-outline.js"),C=__C?.default??__C,__I=require("@mattermost/compass-icons/components/alert-circle-outline.js"),I=__I?.default??__I,__q=require("@mattermost/compass-icons/components/alert-outline.js"),q=__q?.default??__q,z=require("../button/Button.cjs"),b=require("../checkbox/Checkbox.cjs"),y=require("../icon-button/IconButton.cjs"),i=require("../icon/Icon.cjs"),A=require("../../utils/props.cjs"),o=require("./PopoverNotice.module.scss.cjs"),O={info:e.jsx(i.default,{size:"20",glyph:e.jsx(N,{})}),success:e.jsx(i.default,{size:"20",glyph:e.jsx(C,{})}),warning:e.jsx(i.default,{size:"20",glyph:e.jsx(I,{})}),danger:e.jsx(i.default,{size:"20",glyph:e.jsx(q,{})})},S={info:o.default["popover-notice__icon--info"],success:o.default["popover-notice__icon--success"],warning:o.default["popover-notice__icon--warning"],danger:o.default["popover-notice__icon--danger"]};function k({title:d,children:u,variant:l,icon:t,actions:c,showCheckbox:p=!1,checkboxLabel:f="Don't show this confirmation again",onClose:a,closeLabel:_="Close",closeButtonProps:n,className:j="",...m}){const r=t??(l?O[l]:null),v=!t&&l?S[l]:"",x=[o.default["popover-notice"],r==null?o.default["popover-notice--no-icon"]:"",j].filter(Boolean).join(" ");return e.jsxs("div",{...m,className:x,children:[e.jsxs("div",{className:o.default["popover-notice__content"],children:[r!=null&&e.jsx("div",{className:[o.default["popover-notice__icon"],v].filter(Boolean).join(" "),"aria-hidden":!0,children:e.jsx(i.IconSlotContext.Provider,{value:{size:"20"},children:r})}),e.jsxs("div",{className:o.default["popover-notice__body"],children:[e.jsx("div",{className:o.default["popover-notice__title-row"],children:e.jsx("span",{className:o.default["popover-notice__title"],children:d})}),e.jsx("div",{className:o.default["popover-notice__description"],children:u}),c&&c.length>0&&e.jsx("div",{className:o.default["popover-notice__actions"],children:c.map((s,h)=>e.jsx(z.default,{emphasis:s.emphasis??"primary",size:"small",disabled:s.disabled,loading:s.loading,onClick:s.onClick,children:s.label},h))}),p&&e.jsx(b.default,{size:"medium",children:f})]})]}),a&&e.jsx(y.default,{...n,className:A.mergeClassNames(o.default["popover-notice__close"],n==null?void 0:n.className),"aria-label":_,size:"small",icon:e.jsx(i.default,{size:"16",glyph:e.jsx(g,{})}),onClick:a})]})}exports.default=k;
 //# sourceMappingURL=PopoverNotice.cjs.map

package/dist/components/popover-notice/PopoverNotice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverNotice.cjs","sources":["../../../src/components/popover-notice/PopoverNotice.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport Button from '@/components/button/Button';\nimport Checkbox from '@/components/checkbox/Checkbox';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './PopoverNotice.module.scss';\n\nexport type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface PopoverNoticeAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  emphasis?: 'primary' | 'tertiary';\n}\n\nexport interface PopoverNoticeProps {\n  /** Popover title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body content. */\n  children: ReactNode;\n  /**\n   * Semantic variant — sets the icon and its color automatically.\n   * Ignored if `icon` is also provided.\n   */\n  variant?: PopoverNoticeVariant;\n  /** Optional icon shown to the left of the title. Overrides the variant icon. Pass `<Icon glyph={<SomeIcon />} />` — PopoverNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Action buttons rendered below the body. */\n  actions?: PopoverNoticeAction[];\n  /** When true, shows a \"Don't show this again\" checkbox. */\n  showCheckbox?: boolean;\n  /** Checkbox label override. */\n  checkboxLabel?: string;\n  /** Callback when close button is clicked. */\n  onClose?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst VARIANT_ICONS: Record<PopoverNoticeVariant, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n};\n\nconst VARIANT_ICON_CLASS: Record<PopoverNoticeVariant, string> = {\n  info: styles['popover-notice__icon--info'],\n  success: styles['popover-notice__icon--success'],\n  warning: styles['popover-notice__icon--warning'],\n  danger: styles['popover-notice__icon--danger'],\n};\n\n/**\n * Popover Notice is a small overlay card that surfaces a transient message — a tip, a\n * confirmation, a warning — without taking over the screen. Think of it as a [Section\n * Notice](/components/section-notice) that floats: shorter, dismissable, and gone in five\n * seconds unless the user engages.\n */\nexport default function PopoverNotice({\n  title,\n  children,\n  variant,\n  icon,\n  actions,\n  showCheckbox = false,\n  checkboxLabel = \"Don't show this confirmation again\",\n  onClose,\n  className = '',\n}: PopoverNoticeProps) {\n  const resolvedIcon = icon ?? (variant ? VARIANT_ICONS[variant] : null);\n  const iconColorClass = !icon && variant ? VARIANT_ICON_CLASS[variant] : '';\n\n  const rootClass = [\n    styles['popover-notice'],\n    resolvedIcon == null ? styles['popover-notice--no-icon'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['popover-notice__content']}>\n        {resolvedIcon != null && (\n          <div\n            className={[styles['popover-notice__icon'], iconColorClass]\n              .filter(Boolean)\n              .join(' ')}\n            aria-hidden\n          >\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </div>\n        )}\n\n        <div className={styles['popover-notice__body']}>\n          <div className={styles['popover-notice__title-row']}>\n            <span className={styles['popover-notice__title']}>{title}</span>\n          </div>\n\n          <div className={styles['popover-notice__description']}>\n            {children}\n          </div>\n\n          {actions && actions.length > 0 && (\n            <div className={styles['popover-notice__actions']}>\n              {actions.map((action, i) => (\n                <Button\n                  key={i}\n                  emphasis={action.emphasis ?? 'primary'}\n                  size=\"small\"\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          )}\n\n          {showCheckbox && <Checkbox size=\"medium\">{checkboxLabel}</Checkbox>}\n        </div>\n      </div>\n\n      {onClose && (\n        <IconButton\n          className={styles['popover-notice__close']}\n          aria-label=\"Close\"\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["VARIANT_ICONS","Icon","jsx","InformationOutlineIcon","CheckCircleOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","VARIANT_ICON_CLASS","styles","PopoverNotice","title","children","variant","icon","actions","showCheckbox","checkboxLabel","onClose","className","resolvedIcon","iconColorClass","rootClass","jsxs","IconSlotContext","action","i","Button","Checkbox","IconButton","CloseIcon"],"mappings":"0pBA8CMA,EAAyD,CAC7D,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACC,IAAuB,EAAI,EACzD,cAAUF,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACE,IAAuB,EAAI,EAC5D,cAAUH,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACG,IAAuB,EAAI,EAC5D,aAASJ,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOC,EAAAA,IAACI,IAAiB,CAAA,CAAI,CACvD,EAEMC,EAA2D,CAC/D,KAAMC,EAAAA,QAAO,4BAA4B,EACzC,QAASA,EAAAA,QAAO,+BAA+B,EAC/C,QAASA,EAAAA,QAAO,+BAA+B,EAC/C,OAAQA,EAAAA,QAAO,8BAA8B,CAC/C,EAQA,SAAwBC,EAAc,CACpC,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EAAgB,qCAChB,QAAAC,EACA,UAAAC,EAAY,EACd,EAAuB,CACrB,MAAMC,EAAeN,IAASD,EAAUZ,EAAcY,CAAO,EAAI,MAC3DQ,EAAiB,CAACP,GAAQD,EAAUL,EAAmBK,CAAO,EAAI,GAElES,EAAY,CAChBb,EAAAA,QAAO,gBAAgB,EACvBW,GAAgB,KAAOX,UAAO,yBAAyB,EAAI,GAC3DU,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWd,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAAW,GAAgB,MACfjB,EAAAA,IAAC,MAAA,CACC,UAAW,CAACM,UAAO,sBAAsB,EAAGY,CAAc,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAW,GAEX,SAAAlB,EAAAA,IAACqB,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAJ,CAAA,CACH,CAAA,CAAA,EAIJG,EAAAA,KAAC,MAAA,CAAI,UAAWd,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAN,EAAAA,IAAC,MAAA,CAAI,UAAWM,EAAAA,QAAO,2BAA2B,EAChD,SAAAN,EAAAA,IAAC,OAAA,CAAK,UAAWM,EAAAA,QAAO,uBAAuB,EAAI,SAAAE,CAAA,CAAM,EAC3D,QAEC,MAAA,CAAI,UAAWF,EAAAA,QAAO,6BAA6B,EACjD,SAAAG,EACH,EAECG,GAAWA,EAAQ,OAAS,SAC1B,MAAA,CAAI,UAAWN,EAAAA,QAAO,yBAAyB,EAC7C,SAAAM,EAAQ,IAAI,CAACU,EAAQC,IACpBvB,EAAAA,IAACwB,EAAAA,QAAA,CAEC,SAAUF,EAAO,UAAY,UAC7B,KAAK,QACL,QAASA,EAAO,QAEf,SAAAA,EAAO,KAAA,EALHC,CAAA,CAOR,EACH,EAGDV,GAAgBb,EAAAA,IAACyB,UAAA,CAAS,KAAK,SAAU,SAAAX,CAAA,CAAc,CAAA,CAAA,CAC1D,CAAA,EACF,EAECC,GACCf,EAAAA,IAAC0B,EAAAA,QAAA,CACC,UAAWpB,EAAAA,QAAO,uBAAuB,EACzC,aAAW,QACX,KAAK,QACL,WAAOP,UAAA,CAAK,KAAK,KAAK,MAAOC,MAAC2B,IAAU,EAAI,EAC5C,QAASZ,CAAA,CAAA,CACX,EAEJ,CAEJ"}
+{"version":3,"file":"PopoverNotice.cjs","sources":["../../../src/components/popover-notice/PopoverNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport Button from '@/components/button/Button';\nimport Checkbox from '@/components/checkbox/Checkbox';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './PopoverNotice.module.scss';\n\nexport type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface PopoverNoticeAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  emphasis?: 'primary' | 'tertiary';\n  disabled?: boolean;\n  /** Shows a spinner in the button and disables it. */\n  loading?: boolean;\n}\n\nexport interface PopoverNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children'\n> {\n  /** Popover title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body content. */\n  children: ReactNode;\n  /**\n   * Semantic variant — sets the icon and its color automatically.\n   * Ignored if `icon` is also provided.\n   */\n  variant?: PopoverNoticeVariant;\n  /** Optional icon shown to the left of the title. Overrides the variant icon. Pass `<Icon glyph={<SomeIcon />} />` — PopoverNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Action buttons rendered below the body. */\n  actions?: PopoverNoticeAction[];\n  /** When true, shows a \"Don't show this again\" checkbox. */\n  showCheckbox?: boolean;\n  /** Checkbox label override. Accepts translated nodes. Default: \"Don't show this confirmation again\". */\n  checkboxLabel?: ReactNode;\n  /** Callback when close button is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst VARIANT_ICONS: Record<PopoverNoticeVariant, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n};\n\nconst VARIANT_ICON_CLASS: Record<PopoverNoticeVariant, string> = {\n  info: styles['popover-notice__icon--info'],\n  success: styles['popover-notice__icon--success'],\n  warning: styles['popover-notice__icon--warning'],\n  danger: styles['popover-notice__icon--danger'],\n};\n\n/**\n * Popover Notice is a small overlay card that surfaces a transient message — a tip, a\n * confirmation, a warning — without taking over the screen. Think of it as a [Section\n * Notice](/components/section-notice) that floats: shorter, dismissable, and gone in five\n * seconds unless the user engages.\n */\nexport default function PopoverNotice({\n  title,\n  children,\n  variant,\n  icon,\n  actions,\n  showCheckbox = false,\n  checkboxLabel = \"Don't show this confirmation again\",\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  className = '',\n  ...rest\n}: PopoverNoticeProps) {\n  const resolvedIcon = icon ?? (variant ? VARIANT_ICONS[variant] : null);\n  const iconColorClass = !icon && variant ? VARIANT_ICON_CLASS[variant] : '';\n\n  const rootClass = [\n    styles['popover-notice'],\n    resolvedIcon == null ? styles['popover-notice--no-icon'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['popover-notice__content']}>\n        {resolvedIcon != null && (\n          <div\n            className={[styles['popover-notice__icon'], iconColorClass]\n              .filter(Boolean)\n              .join(' ')}\n            aria-hidden\n          >\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </div>\n        )}\n\n        <div className={styles['popover-notice__body']}>\n          <div className={styles['popover-notice__title-row']}>\n            <span className={styles['popover-notice__title']}>{title}</span>\n          </div>\n\n          <div className={styles['popover-notice__description']}>\n            {children}\n          </div>\n\n          {actions && actions.length > 0 && (\n            <div className={styles['popover-notice__actions']}>\n              {actions.map((action, i) => (\n                <Button\n                  key={i}\n                  emphasis={action.emphasis ?? 'primary'}\n                  size=\"small\"\n                  disabled={action.disabled}\n                  loading={action.loading}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          )}\n\n          {showCheckbox && <Checkbox size=\"medium\">{checkboxLabel}</Checkbox>}\n        </div>\n      </div>\n\n      {onClose && (\n        <IconButton\n          {...closeButtonProps}\n          className={mergeClassNames(\n            styles['popover-notice__close'],\n            closeButtonProps?.className,\n          )}\n          aria-label={closeLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["VARIANT_ICONS","Icon","jsx","InformationOutlineIcon","CheckCircleOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","VARIANT_ICON_CLASS","styles","PopoverNotice","title","children","variant","icon","actions","showCheckbox","checkboxLabel","onClose","closeLabel","closeButtonProps","className","rest","resolvedIcon","iconColorClass","rootClass","jsxs","IconSlotContext","action","i","Button","Checkbox","IconButton","mergeClassNames","CloseIcon"],"mappings":"6rBA0DMA,EAAyD,CAC7D,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACC,IAAuB,EAAI,EACzD,cAAUF,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACE,IAAuB,EAAI,EAC5D,cAAUH,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACG,IAAuB,EAAI,EAC5D,aAASJ,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOC,EAAAA,IAACI,IAAiB,CAAA,CAAI,CACvD,EAEMC,EAA2D,CAC/D,KAAMC,EAAAA,QAAO,4BAA4B,EACzC,QAASA,EAAAA,QAAO,+BAA+B,EAC/C,QAASA,EAAAA,QAAO,+BAA+B,EAC/C,OAAQA,EAAAA,QAAO,8BAA8B,CAC/C,EAQA,SAAwBC,EAAc,CACpC,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EAAgB,qCAChB,QAAAC,EACA,WAAAC,EAAa,QACb,iBAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAuB,CACrB,MAAMC,EAAeT,IAASD,EAAUZ,EAAcY,CAAO,EAAI,MAC3DW,EAAiB,CAACV,GAAQD,EAAUL,EAAmBK,CAAO,EAAI,GAElEY,EAAY,CAChBhB,EAAAA,QAAO,gBAAgB,EACvBc,GAAgB,KAAOd,UAAO,yBAAyB,EAAI,GAC3DY,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,EAAAA,KAAC,MAAA,CAAK,GAAGJ,EAAM,UAAWG,EACxB,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWjB,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAAc,GAAgB,MACfpB,EAAAA,IAAC,MAAA,CACC,UAAW,CAACM,UAAO,sBAAsB,EAAGe,CAAc,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAW,GAEX,SAAArB,EAAAA,IAACwB,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAJ,CAAA,CACH,CAAA,CAAA,EAIJG,EAAAA,KAAC,MAAA,CAAI,UAAWjB,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAN,EAAAA,IAAC,MAAA,CAAI,UAAWM,EAAAA,QAAO,2BAA2B,EAChD,SAAAN,EAAAA,IAAC,OAAA,CAAK,UAAWM,EAAAA,QAAO,uBAAuB,EAAI,SAAAE,CAAA,CAAM,EAC3D,QAEC,MAAA,CAAI,UAAWF,EAAAA,QAAO,6BAA6B,EACjD,SAAAG,EACH,EAECG,GAAWA,EAAQ,OAAS,SAC1B,MAAA,CAAI,UAAWN,EAAAA,QAAO,yBAAyB,EAC7C,SAAAM,EAAQ,IAAI,CAACa,EAAQC,IACpB1B,EAAAA,IAAC2B,EAAAA,QAAA,CAEC,SAAUF,EAAO,UAAY,UAC7B,KAAK,QACL,SAAUA,EAAO,SACjB,QAASA,EAAO,QAChB,QAASA,EAAO,QAEf,SAAAA,EAAO,KAAA,EAPHC,CAAA,CASR,EACH,EAGDb,GAAgBb,EAAAA,IAAC4B,UAAA,CAAS,KAAK,SAAU,SAAAd,CAAA,CAAc,CAAA,CAAA,CAC1D,CAAA,EACF,EAECC,GACCf,EAAAA,IAAC6B,EAAAA,QAAA,CACE,GAAGZ,EACJ,UAAWa,EAAAA,gBACTxB,EAAAA,QAAO,uBAAuB,EAC9BW,GAAA,YAAAA,EAAkB,SAAA,EAEpB,aAAYD,EACZ,KAAK,QACL,WAAOjB,UAAA,CAAK,KAAK,KAAK,MAAOC,MAAC+B,IAAU,EAAI,EAC5C,QAAShB,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/popover-notice/PopoverNotice.d.ts

@@ -1,12 +1,16 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';
 export interface PopoverNoticeAction {
     /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     label: ReactNode;
     onClick?: () => void;
     emphasis?: 'primary' | 'tertiary';
+    disabled?: boolean;
+    /** Shows a spinner in the button and disables it. */
+    loading?: boolean;
 }
-export interface PopoverNoticeProps {
+export interface PopoverNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
     /** Popover title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     title: ReactNode;
     /** Body content. */
@@ -22,10 +26,14 @@ export interface PopoverNoticeProps {
     actions?: PopoverNoticeAction[];
     /** When true, shows a "Don't show this again" checkbox. */
     showCheckbox?: boolean;
-    /** Checkbox label override. */
-    checkboxLabel?: string;
+    /** Checkbox label override. Accepts translated nodes. Default: "Don't show this confirmation again". */
+    checkboxLabel?: ReactNode;
     /** Callback when close button is clicked. */
     onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Extra attributes for the close button (e.g. `data-testid`). */
+    closeButtonProps?: BuiltInButtonProps;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -35,5 +43,5 @@ export interface PopoverNoticeProps {
  * Notice](/components/section-notice) that floats: shorter, dismissable, and gone in five
  * seconds unless the user engages.
  */
-export default function PopoverNotice({ title, children, variant, icon, actions, showCheckbox, checkboxLabel, onClose, className, }: PopoverNoticeProps): import("react/jsx-runtime").JSX.Element;
+export default function PopoverNotice({ title, children, variant, icon, actions, showCheckbox, checkboxLabel, onClose, closeLabel, closeButtonProps, className, ...rest }: PopoverNoticeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PopoverNotice.d.ts.map

package/dist/components/popover-notice/PopoverNotice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverNotice.d.ts","sourceRoot":"","sources":["../../../src/components/popover-notice/PopoverNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,4KAA4K;IAC5K,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,aAAoD,EACpD,OAAO,EACP,SAAc,GACf,EAAE,kBAAkB,2CAmEpB"}
+{"version":3,"file":"PopoverNotice.d.ts","sourceRoot":"","sources":["../../../src/components/popover-notice/PopoverNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,CACrB;IACC,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,4KAA4K;IAC5K,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wGAAwG;IACxG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,aAAoD,EACpD,OAAO,EACP,UAAoB,EACpB,gBAAgB,EAChB,SAAc,EACd,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAyEpB"}