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

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

@@ -1,96 +1,107 @@
-import { jsx as p } from "react/jsx-runtime";
-import i from "../scrollbar/Scrollbar.js";
-import n from "./PopoverMenu.module.scss.js";
-function m({
+import { jsx as t } from "react/jsx-runtime";
+import { useRef as c, useEffect as _ } from "react";
+import { usePopoverTransition as j } from "../../hooks/use-popover-transition.js";
+import M from "../scrollbar/Scrollbar.js";
+import r from "./PopoverMenu.module.scss.js";
+function T({
   variant: o = "parent",
-  children: e,
-  className: r = "",
-  ...t
+  open: e,
+  onExited: n,
+  children: l,
+  className: m = "",
+  ...v
 }) {
-  const l = [
-    n["popover-menu"],
-    o === "child" ? n["popover-menu--child"] : n["popover-menu--parent"],
-    r
+  const { mounted: i, visible: f } = j(e ?? !0), u = e !== void 0, s = c(i), p = c(n);
+  if (p.current = n, _(() => {
+    var a;
+    s.current && !i && u && ((a = p.current) == null || a.call(p)), s.current = i;
+  }, [i, u]), u && !i) return null;
+  const d = [
+    r["popover-menu"],
+    o === "child" ? r["popover-menu--child"] : r["popover-menu--parent"],
+    u && r["popover-menu--transition"],
+    u && f && r["popover-menu--visible"],
+    m
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p("div", { className: l, ...t, children: e });
+  return /* @__PURE__ */ t("div", { className: d, ...v, children: l });
 }
-function c({
+function g({
   maxHeight: o,
   children: e,
-  className: r = ""
+  className: n = ""
 }) {
-  const t = typeof o == "number" ? `${o}px` : o;
-  return /* @__PURE__ */ p(
-    i,
+  const l = typeof o == "number" ? `${o}px` : o;
+  return /* @__PURE__ */ t(
+    M,
     {
-      className: [n["popover-menu__scroll"], r].filter(Boolean).join(" "),
-      style: { maxHeight: t },
-      children: e
+      className: [r["popover-menu__scroll"], n].filter(Boolean).join(" "),
+      style: { maxHeight: l },
+      children: /* @__PURE__ */ t("div", { className: r["popover-menu__scroll-content"], children: e })
     }
   );
 }
-function v({
+function h({
   children: o,
   className: e = "",
-  ...r
+  ...n
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
-      className: [n["popover-menu__title"], e].filter(Boolean).join(" "),
-      ...r,
+      className: [r["popover-menu__title"], e].filter(Boolean).join(" "),
+      ...n,
       children: o
     }
   );
 }
-function f({
+function G({
   children: o,
   className: e = "",
-  ...r
+  ...n
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
       role: "group",
-      className: [n["popover-menu__group"], e].filter(Boolean).join(" "),
-      ...r,
+      className: [r["popover-menu__group"], e].filter(Boolean).join(" "),
+      ...n,
       children: o
     }
   );
 }
-function _({
+function S({
   children: o,
   className: e = "",
-  ...r
+  ...n
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
-      className: [n["popover-menu__group-title"], e].filter(Boolean).join(" "),
-      ...r,
+      className: [r["popover-menu__group-title"], e].filter(Boolean).join(" "),
+      ...n,
       children: o
     }
   );
 }
-function d({
+function w({
   className: o = "",
   ...e
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: [n["popover-menu__divider"], o].filter(Boolean).join(" "),
+      className: [r["popover-menu__divider"], o].filter(Boolean).join(" "),
       role: "separator",
       ...e
     }
   );
 }
 export {
-  d as PopoverMenuDivider,
-  f as PopoverMenuGroup,
-  _ as PopoverMenuGroupTitle,
-  c as PopoverMenuScroll,
-  v as PopoverMenuTitle,
-  m as default
+  w as PopoverMenuDivider,
+  G as PopoverMenuGroup,
+  S as PopoverMenuGroupTitle,
+  g as PopoverMenuScroll,
+  h as PopoverMenuTitle,
+  T as default
 };
 //# sourceMappingURL=PopoverMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.js","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":";;;AAgBA,SAAwBA,EAAY;AAAA,EAClC,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAY;AAAA,IAChBC,EAAO,cAAc;AAAA,IACrBL,MAAY,UACRK,EAAO,qBAAqB,IAC5BA,EAAO,sBAAsB;AAAA,IACjCH;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWE,GAAY,GAAGD,GAC5B,UAAAF,GACH;AAEJ;AAUO,SAASK,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,UAAAN;AAAA,EACA,WAAAC,IAAY;AACd,GAA2B;AACzB,QAAMM,IACJ,OAAOD,KAAc,WAAW,GAAGA,CAAS,OAAOA;AACrD,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACL,EAAO,sBAAsB,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,EAAE,WAAWM,EAAA;AAAA,MAEnB,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASU,EAAiB;AAAA,EAC/B,UAAAV;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,qBAAqB,GAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC7E,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AASO,SAASW,EAAiB;AAAA,EAC/B,UAAAX;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,CAACJ,EAAO,qBAAqB,GAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC7E,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASY,EAAsB;AAAA,EACpC,UAAAZ;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA+B;AAC7B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,2BAA2B,GAAGH,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAKO,SAASa,EAAmB;AAAA,EACjC,WAAAZ,IAAY;AAAA,EACZ,GAAGC;AACL,GAA4B;AAC1B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,uBAAuB,GAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAChF,MAAK;AAAA,MACJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"PopoverMenu.js","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":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverMenu.module.css');const e={"popover-menu":"_popover-menu_r3s0r_2","popover-menu--parent":"_popover-menu--parent_r3s0r_16","popover-menu--child":"_popover-menu--child_r3s0r_19","popover-menu__scroll":"_popover-menu__scroll_r3s0r_22","popover-menu__title":"_popover-menu__title_r3s0r_25","popover-menu__group":"_popover-menu__group_r3s0r_36","popover-menu__group-title":"_popover-menu__group-title_r3s0r_41","popover-menu__divider":"_popover-menu__divider_r3s0r_53"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverMenu.css');const e={"popover-menu":"_popover-menu_1xe3r_13","popover-menu__scroll":"_popover-menu__scroll_1xe3r_27","popover-menu__title":"_popover-menu__title_1xe3r_31","popover-menu--parent":"_popover-menu--parent_1xe3r_34","popover-menu--child":"_popover-menu--child_1xe3r_37","popover-menu--transition":"_popover-menu--transition_1xe3r_40","popover-menu--visible":"_popover-menu--visible_1xe3r_53","popover-menu__scroll-content":"_popover-menu__scroll-content_1xe3r_68","popover-menu__group":"_popover-menu__group_1xe3r_82","popover-menu__group-title":"_popover-menu__group-title_1xe3r_87","popover-menu__divider":"_popover-menu__divider_1xe3r_99"};exports.default=e;
 //# sourceMappingURL=PopoverMenu.module.scss.cjs.map

package/dist/components/popover-menu/PopoverMenu.module.scss.js

@@ -1,14 +1,17 @@
-import './PopoverMenu.module.css';const _ = {
-  "popover-menu": "_popover-menu_r3s0r_2",
-  "popover-menu--parent": "_popover-menu--parent_r3s0r_16",
-  "popover-menu--child": "_popover-menu--child_r3s0r_19",
-  "popover-menu__scroll": "_popover-menu__scroll_r3s0r_22",
-  "popover-menu__title": "_popover-menu__title_r3s0r_25",
-  "popover-menu__group": "_popover-menu__group_r3s0r_36",
-  "popover-menu__group-title": "_popover-menu__group-title_r3s0r_41",
-  "popover-menu__divider": "_popover-menu__divider_r3s0r_53"
+import './PopoverMenu.css';const e = {
+  "popover-menu": "_popover-menu_1xe3r_13",
+  "popover-menu__scroll": "_popover-menu__scroll_1xe3r_27",
+  "popover-menu__title": "_popover-menu__title_1xe3r_31",
+  "popover-menu--parent": "_popover-menu--parent_1xe3r_34",
+  "popover-menu--child": "_popover-menu--child_1xe3r_37",
+  "popover-menu--transition": "_popover-menu--transition_1xe3r_40",
+  "popover-menu--visible": "_popover-menu--visible_1xe3r_53",
+  "popover-menu__scroll-content": "_popover-menu__scroll-content_1xe3r_68",
+  "popover-menu__group": "_popover-menu__group_1xe3r_82",
+  "popover-menu__group-title": "_popover-menu__group-title_1xe3r_87",
+  "popover-menu__divider": "_popover-menu__divider_1xe3r_99"
 };
 export {
-  _ as default
+  e as default
 };
 //# sourceMappingURL=PopoverMenu.module.scss.js.map

package/dist/components/popover-menu/PopoverMenu.module.scss.js.map

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

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"),__h=require("@mattermost/compass-icons/components/close.js"),h=__h?.default??__h,__m=require("@mattermost/compass-icons/components/information-outline.js"),m=__m?.default??__m,__v=require("@mattermost/compass-icons/components/check-circle-outline.js"),v=__v?.default??__v,__g=require("@mattermost/compass-icons/components/alert-circle-outline.js"),g=__g?.default??__g,__N=require("@mattermost/compass-icons/components/alert-outline.js"),N=__N?.default??__N,C=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"),y={info:e.jsx(s.default,{size:"20",glyph:e.jsx(m,{})}),success:e.jsx(s.default,{size:"20",glyph:e.jsx(v,{})}),warning:e.jsx(s.default,{size:"20",glyph:e.jsx(g,{})}),danger:e.jsx(s.default,{size:"20",glyph:e.jsx(N,{})})},z={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:i,icon:t,actions:n,showCheckbox:d=!1,checkboxLabel:p="Don't show this confirmation again",onClose:c,className:f=""}){const _=[o.default["popover-notice"],f].filter(Boolean).join(" "),r=t??(i?y[i]:null),j=!t&&i?z[i]:"";return e.jsxs("div",{className:_,children:[e.jsxs("div",{className:o.default["popover-notice__content"],children:[r!=null&&e.jsx("div",{className:[o.default["popover-notice__icon"],j].filter(Boolean).join(" "),"aria-hidden":!0,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:a})}),e.jsx("div",{className:o.default["popover-notice__description"],children:u}),n&&n.length>0&&e.jsx("div",{className:o.default["popover-notice__actions"],children:n.map((l,x)=>e.jsx(C.default,{emphasis:l.emphasis??"primary",size:"small",onClick:l.onClick,children:l.label},x))}),d&&e.jsx(I.default,{size:"medium",children:p})]})]}),c&&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(h,{})}),onClick:c})]})}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 styles from './PopoverNotice.module.scss';\n\nexport type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface PopoverNoticeAction {\n  label: string;\n  onClick?: () => void;\n  emphasis?: 'primary' | 'tertiary';\n}\n\nexport interface PopoverNoticeProps {\n  /** Popover title text. */\n  title: string;\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 variant icon. */\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 rootClass = [styles['popover-notice'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon ?? (variant ? VARIANT_ICONS[variant] : null);\n  const iconColorClass = !icon && variant ? VARIANT_ICON_CLASS[variant] : '';\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            {resolvedIcon}\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","rootClass","resolvedIcon","iconColorClass","jsxs","action","i","Button","Checkbox","IconButton","CloseIcon"],"mappings":"0pBA4CMA,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,EAAY,CAACX,UAAO,gBAAgB,EAAGU,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG,EAELE,EAAeP,IAASD,EAAUZ,EAAcY,CAAO,EAAI,MAC3DS,EAAiB,CAACR,GAAQD,EAAUL,EAAmBK,CAAO,EAAI,GAExE,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWd,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAAY,GAAgB,MACflB,EAAAA,IAAC,MAAA,CACC,UAAW,CAACM,UAAO,sBAAsB,EAAGa,CAAc,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAW,GAEV,SAAAD,CAAA,CAAA,EAILE,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,CAACS,EAAQC,IACpBtB,EAAAA,IAACuB,EAAAA,QAAA,CAEC,SAAUF,EAAO,UAAY,UAC7B,KAAK,QACL,QAASA,EAAO,QAEf,SAAAA,EAAO,KAAA,EALHC,CAAA,CAOR,EACH,EAGDT,GAAgBb,EAAAA,IAACwB,UAAA,CAAS,KAAK,SAAU,SAAAV,CAAA,CAAc,CAAA,CAAA,CAC1D,CAAA,EACF,EAECC,GACCf,EAAAA,IAACyB,EAAAA,QAAA,CACC,UAAWnB,EAAAA,QAAO,uBAAuB,EACzC,aAAW,QACX,KAAK,QACL,WAAOP,UAAA,CAAK,KAAK,KAAK,MAAOC,MAAC0B,IAAU,EAAI,EAC5C,QAASX,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.css

@@ -0,0 +1 @@
+._popover-notice_1r7pv_13{position:relative;display:flex;flex-direction:column;align-items:flex-end;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-m);box-shadow:var(--elevation-4);width:386px}._popover-notice_1r7pv_13 p:not([class]),._popover-notice_1r7pv_13 ul:not([class]),._popover-notice_1r7pv_13 ol:not([class]){margin:0}._popover-notice--no-icon_1r7pv_29 ._popover-notice__content_1r7pv_29{padding-left:var(--spacing-l)}._popover-notice__content_1r7pv_29{display:flex;gap:var(--spacing-m);align-items:flex-start;padding:var(--spacing-m);width:100%}._popover-notice__icon_1r7pv_39{display:flex;align-items:flex-start;flex-shrink:0;color:var(--center-channel-color)}._popover-notice__icon--info_1r7pv_45{color:var(--color-info)}._popover-notice__icon--success_1r7pv_48{color:var(--color-success)}._popover-notice__icon--warning_1r7pv_51{color:var(--color-warning)}._popover-notice__icon--danger_1r7pv_54{color:var(--error-text, var(--color-danger))}._popover-notice__body_1r7pv_57{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1 0 0;min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._popover-notice__body_1r7pv_57>:last-child{margin-bottom:0}._popover-notice__title-row_1r7pv_69{display:flex;align-items:flex-start;width:100%}._popover-notice__title_1r7pv_69{flex:1 0 0;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);min-width:0}._popover-notice__description_1r7pv_82{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._popover-notice__description_1r7pv_82>:last-child{margin-bottom:0}._popover-notice__actions_1r7pv_91{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._popover-notice__close_1r7pv_97{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}

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

@@ -1,13 +1,18 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';
 export interface PopoverNoticeAction {
-    label: string;
+    /** 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 {
-    /** Popover title text. */
-    title: string;
+export interface PopoverNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Popover title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
     /** Body content. */
     children: ReactNode;
     /**
@@ -15,16 +20,20 @@ export interface PopoverNoticeProps {
      * Ignored if `icon` is also provided.
      */
     variant?: PopoverNoticeVariant;
-    /** Optional icon shown to the left of the title. Overrides variant icon. */
+    /** Optional icon shown to the left of the title. Overrides the variant icon. Pass `<Icon glyph={<SomeIcon />} />` — PopoverNotice provides the correct size via context. */
     icon?: ReactNode;
     /** Action buttons rendered below the body. */
     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;
 }
@@ -34,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;AAYvC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,4EAA4E;IAC5E,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,2CA6DpB"}
+{"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"}

package/dist/components/popover-notice/PopoverNotice.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverNotice.js","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 styles from './PopoverNotice.module.scss';\n\nexport type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface PopoverNoticeAction {\n  label: string;\n  onClick?: () => void;\n  emphasis?: 'primary' | 'tertiary';\n}\n\nexport interface PopoverNoticeProps {\n  /** Popover title text. */\n  title: string;\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 variant icon. */\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 rootClass = [styles['popover-notice'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon ?? (variant ? VARIANT_ICONS[variant] : null);\n  const iconColorClass = !icon && variant ? VARIANT_ICON_CLASS[variant] : '';\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            {resolvedIcon}\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","rootClass","resolvedIcon","iconColorClass","jsxs","action","i","Button","Checkbox","IconButton","CloseIcon"],"mappings":";;;;;;;;;;;AA4CA,MAAMA,IAAyD;AAAA,EAC7D,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,GAAI;AAAA,EACzD,2BAAUF,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACE,KAAuB,GAAI;AAAA,EAC5D,2BAAUH,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACG,KAAuB,GAAI;AAAA,EAC5D,0BAASJ,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACI,KAAiB,EAAA,CAAI;AACvD,GAEMC,IAA2D;AAAA,EAC/D,MAAMC,EAAO,4BAA4B;AAAA,EACzC,SAASA,EAAO,+BAA+B;AAAA,EAC/C,SAASA,EAAO,+BAA+B;AAAA,EAC/C,QAAQA,EAAO,8BAA8B;AAC/C;AAQA,SAAwBC,EAAc;AAAA,EACpC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAuB;AACrB,QAAMC,IAAY,CAACX,EAAO,gBAAgB,GAAGU,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG,GAELE,IAAeP,MAASD,IAAUZ,EAAcY,CAAO,IAAI,OAC3DS,IAAiB,CAACR,KAAQD,IAAUL,EAAmBK,CAAO,IAAI;AAExE,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWd,EAAO,yBAAyB,GAC7C,UAAA;AAAA,MAAAY,KAAgB,QACf,gBAAAlB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAACM,EAAO,sBAAsB,GAAGa,CAAc,EACvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,eAAW;AAAA,UAEV,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAIL,gBAAAE,EAAC,OAAA,EAAI,WAAWd,EAAO,sBAAsB,GAC3C,UAAA;AAAA,QAAA,gBAAAN,EAAC,OAAA,EAAI,WAAWM,EAAO,2BAA2B,GAChD,UAAA,gBAAAN,EAAC,QAAA,EAAK,WAAWM,EAAO,uBAAuB,GAAI,UAAAE,EAAA,CAAM,GAC3D;AAAA,0BAEC,OAAA,EAAI,WAAWF,EAAO,6BAA6B,GACjD,UAAAG,GACH;AAAA,QAECG,KAAWA,EAAQ,SAAS,uBAC1B,OAAA,EAAI,WAAWN,EAAO,yBAAyB,GAC7C,UAAAM,EAAQ,IAAI,CAACS,GAAQC,MACpB,gBAAAtB;AAAA,UAACuB;AAAA,UAAA;AAAA,YAEC,UAAUF,EAAO,YAAY;AAAA,YAC7B,MAAK;AAAA,YACL,SAASA,EAAO;AAAA,YAEf,UAAAA,EAAO;AAAA,UAAA;AAAA,UALHC;AAAA,QAAA,CAOR,GACH;AAAA,QAGDT,KAAgB,gBAAAb,EAACwB,GAAA,EAAS,MAAK,UAAU,UAAAV,EAAA,CAAc;AAAA,MAAA,EAAA,CAC1D;AAAA,IAAA,GACF;AAAA,IAECC,KACC,gBAAAf;AAAA,MAACyB;AAAA,MAAA;AAAA,QACC,WAAWnB,EAAO,uBAAuB;AAAA,QACzC,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOP,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAAC0B,KAAU,GAAI;AAAA,QAC5C,SAASX;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
+{"version":3,"file":"PopoverNotice.js","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":"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"}

package/dist/components/popover-notice/PopoverNotice.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverNotice.module.css');const o={"popover-notice":"_popover-notice_1dhk2_2","popover-notice__content":"_popover-notice__content_1dhk2_18","popover-notice__icon":"_popover-notice__icon_1dhk2_25","popover-notice__icon--info":"_popover-notice__icon--info_1dhk2_31","popover-notice__icon--success":"_popover-notice__icon--success_1dhk2_34","popover-notice__icon--warning":"_popover-notice__icon--warning_1dhk2_37","popover-notice__icon--danger":"_popover-notice__icon--danger_1dhk2_40","popover-notice__body":"_popover-notice__body_1dhk2_43","popover-notice__title-row":"_popover-notice__title-row_1dhk2_55","popover-notice__title":"_popover-notice__title_1dhk2_55","popover-notice__description":"_popover-notice__description_1dhk2_68","popover-notice__actions":"_popover-notice__actions_1dhk2_77","popover-notice__close":"_popover-notice__close_1dhk2_83"};exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverNotice.css');const o={"popover-notice":"_popover-notice_1r7pv_13","popover-notice--no-icon":"_popover-notice--no-icon_1r7pv_29","popover-notice__content":"_popover-notice__content_1r7pv_29","popover-notice__icon":"_popover-notice__icon_1r7pv_39","popover-notice__icon--info":"_popover-notice__icon--info_1r7pv_45","popover-notice__icon--success":"_popover-notice__icon--success_1r7pv_48","popover-notice__icon--warning":"_popover-notice__icon--warning_1r7pv_51","popover-notice__icon--danger":"_popover-notice__icon--danger_1r7pv_54","popover-notice__body":"_popover-notice__body_1r7pv_57","popover-notice__title-row":"_popover-notice__title-row_1r7pv_69","popover-notice__title":"_popover-notice__title_1r7pv_69","popover-notice__description":"_popover-notice__description_1r7pv_82","popover-notice__actions":"_popover-notice__actions_1r7pv_91","popover-notice__close":"_popover-notice__close_1r7pv_97"};exports.default=o;
 //# sourceMappingURL=PopoverNotice.module.scss.cjs.map