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

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

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

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

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

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

@@ -1 +1 @@
-._popover-menu_1m31t_2{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;min-width:212px;max-width:496px;width:max-content;padding:var(--spacing-xs) 0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);color:var(--center-channel-color)}._popover-menu--parent_1m31t_16{box-shadow:var(--elevation-4)}._popover-menu--child_1m31t_19{box-shadow:var(--elevation-5)}._popover-menu__scroll_1m31t_22{min-height:0}._popover-menu__title_1m31t_25{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);letter-spacing:var(--letter-spacing-normal);color:rgba(var(--center-channel-color-rgb),.75)}._popover-menu__group_1m31t_36{display:flex;flex-direction:column;align-items:stretch}._popover-menu__group-title_1m31t_41{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xxs);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;text-transform:uppercase;color:rgba(var(--center-channel-color-rgb),.64)}._popover-menu__divider_1m31t_53{flex-shrink:0;width:100%;padding:var(--spacing-xs) 0}._popover-menu__divider_1m31t_53:before{content:"";display:block;width:100%;border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}
+._popover-menu_1tx2s_2{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;min-width:212px;max-width:496px;width:max-content;padding:var(--spacing-xs) 0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);color:var(--center-channel-color)}._popover-menu--parent_1tx2s_16{box-shadow:var(--elevation-4)}._popover-menu--child_1tx2s_19{box-shadow:var(--elevation-5)}._popover-menu--transition_1tx2s_22{opacity:0;transform:scale(.9);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}@media(prefers-reduced-motion:reduce){._popover-menu--transition_1tx2s_22{transform:none;transition:none}}._popover-menu--visible_1tx2s_35{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}@media(prefers-reduced-motion:reduce){._popover-menu--visible_1tx2s_35{transform:none;transition:none}}._popover-menu__scroll_1tx2s_47{min-height:0}._popover-menu__title_1tx2s_50{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);letter-spacing:var(--letter-spacing-normal);color:rgba(var(--center-channel-color-rgb),.75)}._popover-menu__group_1tx2s_61{display:flex;flex-direction:column;align-items:stretch}._popover-menu__group-title_1tx2s_66{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xxs);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;text-transform:uppercase;color:rgba(var(--center-channel-color-rgb),.64)}._popover-menu__divider_1tx2s_78{flex-shrink:0;width:100%;padding:var(--spacing-xs) 0}._popover-menu__divider_1tx2s_78:before{content:"";display:block;width:100%;border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}

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

@@ -2,6 +2,14 @@ import { HTMLAttributes, ReactNode } from 'react';
 export interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {
     /** Parent menus use Elevation 4; nested child menus use Elevation 5. */
     variant?: 'parent' | 'child';
+    /**
+     * Controlled visibility with the Compass popover transition (scale + fade in,
+     * reverse on close); the menu unmounts after the exit. Omit to always render
+     * without transition. The host owns the state and positioning.
+     */
+    open?: boolean;
+    /** Called after the exit transition finishes and the menu unmounts (only when `open` is controlled). */
+    onExited?: () => void;
     children: ReactNode;
 }
 /**
@@ -10,7 +18,7 @@ export interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {
  * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item
  * list should scroll while a {@link PopoverMenuTitle} stays pinned.
  */
-export default function PopoverMenu({ variant, children, className, ...rest }: PopoverMenuProps): import("react/jsx-runtime").JSX.Element;
+export default function PopoverMenu({ variant, open, onExited, children, className, ...rest }: PopoverMenuProps): import("react/jsx-runtime").JSX.Element | null;
 export interface PopoverMenuScrollProps {
     children: ReactNode;
     /** Maximum height of the scrollable region (coerces numbers to px). */

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

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

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

@@ -1,40 +1,51 @@
-import { jsx as p } from "react/jsx-runtime";
-import i from "../scrollbar/Scrollbar.js";
+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 n from "./PopoverMenu.module.scss.js";
-function m({
+function T({
   variant: o = "parent",
-  children: e,
-  className: r = "",
-  ...t
+  open: e,
+  onExited: r,
+  children: l,
+  className: m = "",
+  ...v
 }) {
-  const l = [
+  const { mounted: u, visible: f } = j(e ?? !0), i = e !== void 0, s = c(u), p = c(r);
+  if (p.current = r, _(() => {
+    var a;
+    s.current && !u && i && ((a = p.current) == null || a.call(p)), s.current = u;
+  }, [u, i]), i && !u) return null;
+  const d = [
     n["popover-menu"],
     o === "child" ? n["popover-menu--child"] : n["popover-menu--parent"],
-    r
+    i && n["popover-menu--transition"],
+    i && f && n["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 = ""
 }) {
-  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 },
+      style: { maxHeight: l },
       children: e
     }
   );
 }
-function v({
+function G({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
       className: [n["popover-menu__title"], e].filter(Boolean).join(" "),
@@ -43,12 +54,12 @@ function v({
     }
   );
 }
-function f({
+function S({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
       role: "group",
@@ -58,12 +69,12 @@ function f({
     }
   );
 }
-function _({
+function h({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
       className: [n["popover-menu__group-title"], e].filter(Boolean).join(" "),
@@ -72,11 +83,11 @@ function _({
     }
   );
 }
-function d({
+function w({
   className: o = "",
   ...e
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
       className: [n["popover-menu__divider"], o].filter(Boolean).join(" "),
@@ -86,11 +97,11 @@ function d({
   );
 }
 export {
-  d as PopoverMenuDivider,
-  f as PopoverMenuGroup,
-  _ as PopoverMenuGroupTitle,
-  c as PopoverMenuScroll,
-  v as PopoverMenuTitle,
-  m as default
+  w as PopoverMenuDivider,
+  S as PopoverMenuGroup,
+  h as PopoverMenuGroupTitle,
+  g as PopoverMenuScroll,
+  G 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 = 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]\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","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,IAAO,OAAOD,KAAc,WAAW,GAAGA,CAAS,OAAOA;AAChE,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,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,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,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,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,EACnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,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 (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 = 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]\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":";;;;;AA0BA,SAAwBA,EAAY;AAAA,EAClC,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAqBP,KAAQ,EAAI,GACxDQ,IAAeR,MAAS,QACxBS,IAAaC,EAAOL,CAAO,GAC3BM,IAAcD,EAAOT,CAAQ;AAUnC,MATAU,EAAY,UAAUV,GAEtBW,EAAU,MAAM;;AACd,IAAIH,EAAW,WAAW,CAACJ,KAAWG,OACpCK,IAAAF,EAAY,YAAZ,QAAAE,EAAA,KAAAF,KAEFF,EAAW,UAAUJ;AAAA,EACvB,GAAG,CAACA,GAASG,CAAY,CAAC,GAEtBA,KAAgB,CAACH,EAAS,QAAO;AAErC,QAAMS,IAAY;AAAA,IAChBC,EAAO,cAAc;AAAA,IACrBhB,MAAY,UACRgB,EAAO,qBAAqB,IAC5BA,EAAO,sBAAsB;AAAA,IACjCP,KAAgBO,EAAO,0BAA0B;AAAA,IACjDP,KAAgBF,KAAWS,EAAO,uBAAuB;AAAA,IACzDZ;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWW,GAAY,GAAGV,GAC5B,UAAAF,GACH;AAEJ;AAUO,SAASc,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,UAAAf;AAAA,EACA,WAAAC,IAAY;AACd,GAA2B;AACzB,QAAMe,IAAO,OAAOD,KAAc,WAAW,GAAGA,CAAS,OAAOA;AAChE,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACL,EAAO,sBAAsB,GAAGZ,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,EAAE,WAAWe,EAAA;AAAA,MAEnB,UAAAhB;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASmB,EAAiB;AAAA,EAC/B,UAAAnB;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,qBAAqB,GAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AASO,SAASoB,EAAiB;AAAA,EAC/B,UAAApB;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,CAACJ,EAAO,qBAAqB,GAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASqB,EAAsB;AAAA,EACpC,UAAArB;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA+B;AAC7B,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,2BAA2B,GAAGZ,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAKO,SAASsB,EAAmB;AAAA,EACjC,WAAArB,IAAY;AAAA,EACZ,GAAGC;AACL,GAA4B;AAC1B,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,uBAAuB,GAAGZ,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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.css');const e={"popover-menu":"_popover-menu_1m31t_2","popover-menu--parent":"_popover-menu--parent_1m31t_16","popover-menu--child":"_popover-menu--child_1m31t_19","popover-menu__scroll":"_popover-menu__scroll_1m31t_22","popover-menu__title":"_popover-menu__title_1m31t_25","popover-menu__group":"_popover-menu__group_1m31t_36","popover-menu__group-title":"_popover-menu__group-title_1m31t_41","popover-menu__divider":"_popover-menu__divider_1m31t_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_1tx2s_2","popover-menu--parent":"_popover-menu--parent_1tx2s_16","popover-menu--child":"_popover-menu--child_1tx2s_19","popover-menu--transition":"_popover-menu--transition_1tx2s_22","popover-menu--visible":"_popover-menu--visible_1tx2s_35","popover-menu__scroll":"_popover-menu__scroll_1tx2s_47","popover-menu__title":"_popover-menu__title_1tx2s_50","popover-menu__group":"_popover-menu__group_1tx2s_61","popover-menu__group-title":"_popover-menu__group-title_1tx2s_66","popover-menu__divider":"_popover-menu__divider_1tx2s_78"};exports.default=e;
 //# sourceMappingURL=PopoverMenu.module.scss.cjs.map

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

@@ -1,14 +1,16 @@
-import './PopoverMenu.css';const _ = {
-  "popover-menu": "_popover-menu_1m31t_2",
-  "popover-menu--parent": "_popover-menu--parent_1m31t_16",
-  "popover-menu--child": "_popover-menu--child_1m31t_19",
-  "popover-menu__scroll": "_popover-menu__scroll_1m31t_22",
-  "popover-menu__title": "_popover-menu__title_1m31t_25",
-  "popover-menu__group": "_popover-menu__group_1m31t_36",
-  "popover-menu__group-title": "_popover-menu__group-title_1m31t_41",
-  "popover-menu__divider": "_popover-menu__divider_1m31t_53"
+import './PopoverMenu.css';const e = {
+  "popover-menu": "_popover-menu_1tx2s_2",
+  "popover-menu--parent": "_popover-menu--parent_1tx2s_16",
+  "popover-menu--child": "_popover-menu--child_1tx2s_19",
+  "popover-menu--transition": "_popover-menu--transition_1tx2s_22",
+  "popover-menu--visible": "_popover-menu--visible_1tx2s_35",
+  "popover-menu__scroll": "_popover-menu__scroll_1tx2s_47",
+  "popover-menu__title": "_popover-menu__title_1tx2s_50",
+  "popover-menu__group": "_popover-menu__group_1tx2s_61",
+  "popover-menu__group-title": "_popover-menu__group-title_1tx2s_66",
+  "popover-menu__divider": "_popover-menu__divider_1tx2s_78"
 };
 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"),__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"}

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

@@ -1,80 +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 __I from "@mattermost/compass-icons/components/information-outline.js";const I=__I&&__I.default?__I.default:__I;
-import __N from "@mattermost/compass-icons/components/check-circle-outline.js";const N=__N&&__N.default?__N.default:__N;
-import __g from "@mattermost/compass-icons/components/alert-circle-outline.js";const g=__g&&__g.default?__g.default:__g;
-import __z from "@mattermost/compass-icons/components/alert-outline.js";const z=__z&&__z.default?__z.default:__z;
-import y from "../button/Button.js";
-import A from "../checkbox/Checkbox.js";
-import O from "../icon-button/IconButton.js";
-import i, { IconSlotContext as k } 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 w = {
-  info: /* @__PURE__ */ o(i, { size: "20", glyph: /* @__PURE__ */ o(I, {}) }),
-  success: /* @__PURE__ */ o(i, { size: "20", glyph: /* @__PURE__ */ o(N, {}) }),
-  warning: /* @__PURE__ */ o(i, { size: "20", glyph: /* @__PURE__ */ o(g, {}) }),
-  danger: /* @__PURE__ */ o(i, { size: "20", glyph: /* @__PURE__ */ o(z, {}) })
-}, x = {
+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 E({
+function Q({
   title: m,
-  children: a,
-  variant: n,
+  children: d,
+  variant: r,
   icon: t,
-  actions: r,
-  showCheckbox: d = !1,
-  checkboxLabel: _ = "Don't show this confirmation again",
-  onClose: p,
-  className: h = ""
+  actions: c,
+  showCheckbox: _ = !1,
+  checkboxLabel: h = "Don't show this confirmation again",
+  onClose: a,
+  closeLabel: f = "Close",
+  closeButtonProps: l,
+  className: v = "",
+  ...g
 }) {
-  const c = t ?? (n ? w[n] : null), v = !t && n ? x[n] : "", f = [
+  const s = t ?? (r ? S[r] : null), C = !t && r ? R[r] : "", N = [
     e["popover-notice"],
-    c == null ? e["popover-notice--no-icon"] : "",
-    h
+    s == null ? e["popover-notice--no-icon"] : "",
+    v
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: f, children: [
-    /* @__PURE__ */ s("div", { className: e["popover-notice__content"], children: [
-      c != null && /* @__PURE__ */ o(
+  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: /* @__PURE__ */ o(k.Provider, { value: { size: "20" }, children: c })
+          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((l, u) => /* @__PURE__ */ o(
-          y,
+        /* @__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: l.emphasis ?? "primary",
+            emphasis: i.emphasis ?? "primary",
             size: "small",
-            onClick: l.onClick,
-            children: l.label
+            disabled: i.disabled,
+            loading: i.loading,
+            onClick: i.onClick,
+            children: i.label
           },
-          u
+          I
         )) }),
-        d && /* @__PURE__ */ o(A, { size: "medium", children: _ })
+        _ && /* @__PURE__ */ o(k, { size: "medium", children: h })
       ] })
     ] }),
-    p && /* @__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: p
+        icon: /* @__PURE__ */ o(n, { size: "16", glyph: /* @__PURE__ */ o(u, {}) }),
+        onClick: a
       }
     )
   ] });
 }
 export {
-  E as default
+  Q as default
 };
 //# sourceMappingURL=PopoverNotice.js.map