@mattermost/compass-ui 0.1.0-alpha.17 → 0.1.0-alpha.19

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

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

package/dist/components/scrollbar/Scrollbar.css

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,yBAAyB,CAAC;AAGjC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,UAAU,CAClC;IACC,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2GAsDb,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,yBAAyB,CAAC;AAGjC,2EAA2E;AAC3E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,UAAU,CAClC;IACC,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2GA6Db,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/scrollbar/Scrollbar.js

@@ -1,41 +1,47 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as b, useRef as v, useCallback as y } from "react";
-import x from "simplebar-react";
+import { jsx as v } from "react/jsx-runtime";
+import { forwardRef as y, useRef as x, useCallback as N } from "react";
+import j from "simplebar-react";
+import { toKebab as B } from "../../utils/string.js";
 import './simplebar-vendor.css';/* empty css                      */
-import N from "./Scrollbar.module.scss.js";
-const S = b(function({
-  children: a,
+import i from "./Scrollbar.module.scss.js";
+const k = y(function({
+  children: c,
   color: s,
-  alwaysVisible: i = !1,
-  className: n,
-  style: c,
+  alwaysVisible: n = !1,
+  size: l = "default",
+  className: f,
+  style: m,
   onScroll: e,
-  ...f
+  ...d
 }, r) {
-  const o = v(void 0), m = y(
+  const o = x(void 0), u = N(
     (t) => {
-      var l;
-      (l = o.current) == null || l.call(o), o.current = void 0, t && e && (t.addEventListener("scroll", e), o.current = () => t.removeEventListener("scroll", e)), typeof r == "function" ? r(t) : r && (r.current = t);
+      var a;
+      (a = o.current) == null || a.call(o), o.current = void 0, t && e && (t.addEventListener("scroll", e), o.current = () => t.removeEventListener("scroll", e)), typeof r == "function" ? r(t) : r && (r.current = t);
     },
     [e, r]
-  ), d = {
-    ...c,
+  ), b = {
+    ...m,
     ...s ? { "--scrollbar-color": `var(${s})` } : null
-  }, u = [N.scrollbar, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p(
-    x,
+  }, p = [
+    i.scrollbar,
+    l !== "default" && i[`scrollbar--size-${B(l)}`],
+    f
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ v(
+    j,
     {
-      ...f,
-      autoHide: !i,
-      scrollableNodeProps: { ref: m },
-      className: u,
-      style: d,
+      ...d,
+      autoHide: !n,
+      scrollableNodeProps: { ref: u },
+      className: p,
+      style: b,
       tabIndex: -1,
-      children: a
+      children: c
     }
   );
 });
 export {
-  S as default
+  k as default
 };
 //# sourceMappingURL=Scrollbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'color' | 'onScroll'\n> {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  {\n    children,\n    color,\n    alwaysVisible = false,\n    className,\n    style,\n    onScroll,\n    ...rest\n  },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      {...rest}\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":";;;;;AA2CA,MAAMA,IAAYC,EAA2C,SAC3D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAiC,MAAS,GAEpDC,IAAgBC;AAAA,IACpB,CAACC,MAA8B;;AAC7B,OAAAC,IAAAL,EAAQ,YAAR,QAAAK,EAAA,KAAAL,IACAA,EAAQ,UAAU,QAEdI,KAAMP,MACRO,EAAG,iBAAiB,UAAUP,CAAQ,GACtCG,EAAQ,UAAU,MAAMI,EAAG,oBAAoB,UAAUP,CAAQ,IAG/D,OAAOE,KAAQ,aACjBA,EAAIK,CAAE,IACGL,MACRA,EAAsD,UAAUK;AAAA,IAErE;AAAA,IACA,CAACP,GAAUE,CAAG;AAAA,EAAA,GAGVO,IAA6B;AAAA,IACjC,GAAGV;AAAA,IACH,GAAIH,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAc,IAAY,CAACC,EAAO,WAAWb,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAExE,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,UAAU,CAACJ;AAAA,MACX,qBAAqB,EAAE,KAAKQ,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAd;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport { toKebab } from '@/utils/string';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\n/** Track width. `default` is 8px; `wide` is 10px (modals, large panes). */\nexport type ScrollbarSize = 'default' | 'wide';\n\nexport interface ScrollbarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'color' | 'onScroll'\n> {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Track width. Default: `default` (8px). Use `wide` (10px) in modals. */\n  size?: ScrollbarSize;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  {\n    children,\n    color,\n    alwaysVisible = false,\n    size = 'default',\n    className,\n    style,\n    onScroll,\n    ...rest\n  },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [\n    styles.scrollbar,\n    size !== 'default' && styles[`scrollbar--size-${toKebab(size)}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <SimpleBar\n      {...rest}\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","size","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","toKebab","jsx","SimpleBar"],"mappings":";;;;;;AAiDA,MAAMA,IAAYC,EAA2C,SAC3D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAiC,MAAS,GAEpDC,IAAgBC;AAAA,IACpB,CAACC,MAA8B;;AAC7B,OAAAC,IAAAL,EAAQ,YAAR,QAAAK,EAAA,KAAAL,IACAA,EAAQ,UAAU,QAEdI,KAAMP,MACRO,EAAG,iBAAiB,UAAUP,CAAQ,GACtCG,EAAQ,UAAU,MAAMI,EAAG,oBAAoB,UAAUP,CAAQ,IAG/D,OAAOE,KAAQ,aACjBA,EAAIK,CAAE,IACGL,MACRA,EAAsD,UAAUK;AAAA,IAErE;AAAA,IACA,CAACP,GAAUE,CAAG;AAAA,EAAA,GAGVO,IAA6B;AAAA,IACjC,GAAGV;AAAA,IACH,GAAIJ,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAe,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPd,MAAS,aAAac,EAAO,mBAAmBC,EAAQf,CAAI,CAAC,EAAE;AAAA,IAC/DC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGb;AAAA,MACJ,UAAU,CAACL;AAAA,MACX,qBAAqB,EAAE,KAAKS,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAf;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/scrollbar/Scrollbar.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Scrollbar.css');const l="_scrollbar_f5sq5_2",e={scrollbar:l};exports.default=e;exports.scrollbar=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Scrollbar.css');const l="_scrollbar_xs0gi_2",e={scrollbar:l,"scrollbar--size-wide":"_scrollbar--size-wide_xs0gi_14"};exports.default=e;exports.scrollbar=l;
 //# sourceMappingURL=Scrollbar.module.scss.cjs.map

package/dist/components/scrollbar/Scrollbar.module.scss.js

@@ -1,5 +1,6 @@
-import './Scrollbar.css';const s = "_scrollbar_f5sq5_2", l = {
-  scrollbar: s
+import './Scrollbar.css';const s = "_scrollbar_xs0gi_2", l = {
+  scrollbar: s,
+  "scrollbar--size-wide": "_scrollbar--size-wide_xs0gi_14"
 };
 export {
   l as default,

package/dist/components/scrollbar/Scrollbar.module.scss.js.map

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

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

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

package/dist/components/scrollbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/section-notice/SectionNotice.css

@@ -1 +1 @@
-._section-notice_1fkh6_2{display:flex;flex-direction:column;align-items:flex-end;position:relative;border-radius:var(--radius-s);border:1px solid rgba(var(--color-info-rgb),.16);background-color:rgba(var(--color-info-rgb),.04)}._section-notice__content_1fkh6_11{display:flex;align-items:flex-start;gap:var(--spacing-m);padding:var(--spacing-m);width:100%}._section-notice__icon_1fkh6_18{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-info)}._section-notice__body_1fkh6_25{display:flex;flex:1 0 0;flex-direction:column;gap:var(--spacing-xs);min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._section-notice__title_1fkh6_34{margin:0;padding:0;font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);letter-spacing:var(--letter-spacing-normal);text-transform:none;color:var(--center-channel-color)}._section-notice__description_1fkh6_45{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._section-notice__actions_1fkh6_51{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._section-notice__dismiss_1fkh6_57{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}._section-notice--type-warning_1fkh6_62{background-color:rgba(var(--color-warning-rgb),.04);border-color:rgba(var(--color-warning-rgb),.16)}._section-notice--type-warning_1fkh6_62 ._section-notice__icon_1fkh6_18{color:var(--color-warning)}._section-notice--type-danger_1fkh6_69{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);border-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._section-notice--type-danger_1fkh6_69 ._section-notice__icon_1fkh6_18{color:var(--error-text, var(--color-danger))}._section-notice--type-success_1fkh6_76{background-color:rgba(var(--color-success-rgb),.04);border-color:rgba(var(--color-success-rgb),.16)}._section-notice--type-success_1fkh6_76 ._section-notice__icon_1fkh6_18{color:var(--color-success)}._section-notice--type-hint_1fkh6_83{background-color:rgba(var(--center-channel-color-rgb),.04);border-color:rgba(var(--center-channel-color-rgb),.16)}._section-notice--type-hint_1fkh6_83 ._section-notice__icon_1fkh6_18{color:rgba(var(--center-channel-color-rgb),.64)}
+._section-notice_1x4j7_2{display:flex;flex-direction:column;align-items:flex-end;position:relative;border-radius:var(--radius-s);border:1px solid rgba(var(--color-info-rgb),.16);background-color:rgba(var(--color-info-rgb),.04)}._section-notice__content_1x4j7_11{display:flex;align-items:flex-start;gap:var(--spacing-m);padding:var(--spacing-m);width:100%}._section-notice__icon_1x4j7_18{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-info)}._section-notice__body_1x4j7_25{display:flex;flex:1 0 0;flex-direction:column;gap:var(--spacing-xs);min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._section-notice__title_1x4j7_34._section-notice__title_1x4j7_34{margin:0;font-weight:var(--font-weight-semibold)}._section-notice__title_1x4j7_34{padding:0;font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-100);letter-spacing:var(--letter-spacing-normal);text-transform:none;color:var(--center-channel-color)}._section-notice__description_1x4j7_47{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._section-notice__actions_1x4j7_53{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._section-notice__dismiss_1x4j7_59{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}._section-notice--type-warning_1x4j7_64{background-color:rgba(var(--color-warning-rgb),.04);border-color:rgba(var(--color-warning-rgb),.16)}._section-notice--type-warning_1x4j7_64 ._section-notice__icon_1x4j7_18{color:var(--color-warning)}._section-notice--type-danger_1x4j7_71{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);border-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._section-notice--type-danger_1x4j7_71 ._section-notice__icon_1x4j7_18{color:var(--error-text, var(--color-danger))}._section-notice--type-success_1x4j7_78{background-color:rgba(var(--color-success-rgb),.04);border-color:rgba(var(--color-success-rgb),.16)}._section-notice--type-success_1x4j7_78 ._section-notice__icon_1x4j7_18{color:var(--color-success)}._section-notice--type-hint_1x4j7_85{background-color:rgba(var(--center-channel-color-rgb),.04);border-color:rgba(var(--center-channel-color-rgb),.16)}._section-notice--type-hint_1x4j7_85 ._section-notice__icon_1x4j7_18{color:rgba(var(--center-channel-color-rgb),.64)}

package/dist/components/section-notice/SectionNotice.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SectionNotice.css');const e={"section-notice":"_section-notice_1fkh6_2","section-notice__content":"_section-notice__content_1fkh6_11","section-notice__icon":"_section-notice__icon_1fkh6_18","section-notice__body":"_section-notice__body_1fkh6_25","section-notice__title":"_section-notice__title_1fkh6_34","section-notice__description":"_section-notice__description_1fkh6_45","section-notice__actions":"_section-notice__actions_1fkh6_51","section-notice__dismiss":"_section-notice__dismiss_1fkh6_57","section-notice--type-warning":"_section-notice--type-warning_1fkh6_62","section-notice--type-danger":"_section-notice--type-danger_1fkh6_69","section-notice--type-success":"_section-notice--type-success_1fkh6_76","section-notice--type-hint":"_section-notice--type-hint_1fkh6_83"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SectionNotice.css');const e={"section-notice":"_section-notice_1x4j7_2","section-notice__content":"_section-notice__content_1x4j7_11","section-notice__icon":"_section-notice__icon_1x4j7_18","section-notice__body":"_section-notice__body_1x4j7_25","section-notice__title":"_section-notice__title_1x4j7_34","section-notice__description":"_section-notice__description_1x4j7_47","section-notice__actions":"_section-notice__actions_1x4j7_53","section-notice__dismiss":"_section-notice__dismiss_1x4j7_59","section-notice--type-warning":"_section-notice--type-warning_1x4j7_64","section-notice--type-danger":"_section-notice--type-danger_1x4j7_71","section-notice--type-success":"_section-notice--type-success_1x4j7_78","section-notice--type-hint":"_section-notice--type-hint_1x4j7_85"};exports.default=e;
 //# sourceMappingURL=SectionNotice.module.scss.cjs.map

package/dist/components/section-notice/SectionNotice.module.scss.js

@@ -1,16 +1,16 @@
 import './SectionNotice.css';const t = {
-  "section-notice": "_section-notice_1fkh6_2",
-  "section-notice__content": "_section-notice__content_1fkh6_11",
-  "section-notice__icon": "_section-notice__icon_1fkh6_18",
-  "section-notice__body": "_section-notice__body_1fkh6_25",
-  "section-notice__title": "_section-notice__title_1fkh6_34",
-  "section-notice__description": "_section-notice__description_1fkh6_45",
-  "section-notice__actions": "_section-notice__actions_1fkh6_51",
-  "section-notice__dismiss": "_section-notice__dismiss_1fkh6_57",
-  "section-notice--type-warning": "_section-notice--type-warning_1fkh6_62",
-  "section-notice--type-danger": "_section-notice--type-danger_1fkh6_69",
-  "section-notice--type-success": "_section-notice--type-success_1fkh6_76",
-  "section-notice--type-hint": "_section-notice--type-hint_1fkh6_83"
+  "section-notice": "_section-notice_1x4j7_2",
+  "section-notice__content": "_section-notice__content_1x4j7_11",
+  "section-notice__icon": "_section-notice__icon_1x4j7_18",
+  "section-notice__body": "_section-notice__body_1x4j7_25",
+  "section-notice__title": "_section-notice__title_1x4j7_34",
+  "section-notice__description": "_section-notice__description_1x4j7_47",
+  "section-notice__actions": "_section-notice__actions_1x4j7_53",
+  "section-notice__dismiss": "_section-notice__dismiss_1x4j7_59",
+  "section-notice--type-warning": "_section-notice--type-warning_1x4j7_64",
+  "section-notice--type-danger": "_section-notice--type-danger_1x4j7_71",
+  "section-notice--type-success": "_section-notice--type-success_1x4j7_78",
+  "section-notice--type-hint": "_section-notice--type-hint_1x4j7_85"
 };
 export {
   t as default

package/dist/hooks/use-modal-focus.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),S=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","summary",'[contenteditable=""]','[contenteditable="true"]',"[tabindex]"].join(",");function w(r,s){for(let t=r;t;t=t.parentElement){if(t.hidden||t.hasAttribute("inert")||t.getAttribute("aria-hidden")==="true")return!0;const l=getComputedStyle(t);if(l.display==="none"||t===r&&l.visibility==="hidden")return!0;if(t===s)break}return!1}function x(r){return Array.from(r.querySelectorAll(S)).filter(s=>s.tabIndex>=0&&!s.matches(":disabled")&&!w(s,r))}const u=[];function T(r,{initialFocusRef:s,closeOnEscape:t=!0,onClose:l,active:p=!0}){const y=d.useRef(s);y.current=s;const m=d.useRef({closeOnEscape:t,onClose:l});m.current={closeOnEscape:t,onClose:l};const v=d.useRef(null),a=d.useRef(null);d.useEffect(()=>{var i;const c=document.activeElement;function b(){const o=u[u.length-1],f=v.current;return f&&u.includes(f)?o===f:a.current?a.current.wasTop&&o===a.current.below:o===void 0}const e=r.current,n=(i=y.current)==null?void 0:i.current;return n&&(e!=null&&e.contains(n))&&n.focus(),(!n||document.activeElement!==n)&&(e==null||e.focus()),()=>{b()&&c&&c.isConnected&&typeof c.focus=="function"&&c.focus()}},[r]),d.useEffect(()=>{if(!p)return;const c={};u.push(c),v.current=c,a.current=null;function b(e){var E,k;if(e.defaultPrevented||u[u.length-1]!==c)return;const n=r.current;if(!n)return;if(e.key==="Escape"){m.current.closeOnEscape&&((k=(E=m.current).onClose)==null||k.call(E));return}if(e.key!=="Tab")return;const i=x(n);if(i.length===0){e.preventDefault(),n.focus();return}const o=i[0],f=i[i.length-1],h=document.activeElement,g=!n.contains(h);e.shiftKey?(g||h===o||h===n)&&(e.preventDefault(),f.focus()):(g||h===f)&&(e.preventDefault(),o.focus())}return document.addEventListener("keydown",b),()=>{document.removeEventListener("keydown",b);const e=u.indexOf(c);a.current={wasTop:e===u.length-1,below:u[e-1]},u.splice(e,1)}},[r,p])}exports.useModalFocus=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),T=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","summary",'[contenteditable=""]','[contenteditable="true"]',"[tabindex]"].join(",");function F(r,s){for(let t=r;t;t=t.parentElement){if(t.hidden||t.hasAttribute("inert")||t.getAttribute("aria-hidden")==="true")return!0;const f=getComputedStyle(t);if(f.display==="none"||t===r&&f.visibility==="hidden")return!0;if(t===s)break}return!1}function L(r){return Array.from(r.querySelectorAll(T)).filter(s=>s.tabIndex>=0&&!s.matches(":disabled")&&!F(s,r))}const h=Symbol.for("@mattermost/compass-ui/modal-stack/v1"),p=globalThis,u=p[h]??(p[h]=[]);function O(r,{initialFocusRef:s,closeOnEscape:t=!0,manageFocus:f=!0,onClose:v,active:g=!0}){const R=o.useRef(f),E=o.useRef(s),b=o.useRef({closeOnEscape:t,manageFocus:f,onClose:v});o.useLayoutEffect(()=>{E.current=s,b.current={closeOnEscape:t,manageFocus:f,onClose:v}});const k=o.useRef(null),d=o.useRef(null);o.useEffect(()=>{var i;if(!R.current)return;const c=document.activeElement;function m(){const a=u[u.length-1],l=k.current;return l&&u.includes(l)?a===l:d.current?d.current.wasTop&&a===d.current.below:a===void 0}const e=r.current,n=(i=E.current)==null?void 0:i.current;return n&&(e!=null&&e.contains(n))&&n.focus(),(!n||document.activeElement!==n)&&(e==null||e.focus()),()=>{m()&&c&&c.isConnected&&typeof c.focus=="function"&&c.focus()}},[r]),o.useEffect(()=>{if(!g)return;const c={};u.push(c),k.current=c,d.current=null;function m(e){var w,x;if(e.defaultPrevented||u[u.length-1]!==c)return;const n=r.current;if(!n)return;if(e.key==="Escape"){b.current.closeOnEscape&&((x=(w=b.current).onClose)==null||x.call(w));return}if(e.key!=="Tab"||!b.current.manageFocus)return;const i=L(n);if(i.length===0){e.preventDefault(),n.focus();return}const a=i[0],l=i[i.length-1],y=document.activeElement,S=!n.contains(y);e.shiftKey?(S||y===a||y===n)&&(e.preventDefault(),l.focus()):(S||y===l)&&(e.preventDefault(),a.focus())}return document.addEventListener("keydown",m),()=>{document.removeEventListener("keydown",m);const e=u.indexOf(c);d.current={wasTop:e===u.length-1,below:u[e-1]},u.splice(e,1)}},[r,g])}exports.useModalFocus=O;
 //# sourceMappingURL=use-modal-focus.cjs.map

package/dist/hooks/use-modal-focus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal-focus.cjs","sources":["../../src/hooks/use-modal-focus.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'summary',\n  '[contenteditable=\"\"]',\n  '[contenteditable=\"true\"]',\n  '[tabindex]',\n].join(',');\n\nfunction isHidden(el: HTMLElement, root: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\n    if (node.hidden || node.hasAttribute('inert')) return true;\n    if (node.getAttribute('aria-hidden') === 'true') return true;\n    const style = getComputedStyle(node);\n    if (style.display === 'none') return true;\n    if (node === el && style.visibility === 'hidden') return true;\n    if (node === root) break;\n  }\n  return false;\n}\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter(\n    (el) => el.tabIndex >= 0 && !el.matches(':disabled') && !isHidden(el, root),\n  );\n}\n\n/** Open modals in mount order; only the last one reacts to Tab and Escape. */\nconst modalStack: object[] = [];\n\nexport interface UseModalFocusOptions {\n  /** Element to focus on mount. Falls back to the dialog root. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Close on Escape. Default true. */\n  closeOnEscape?: boolean;\n  onClose?: () => void;\n  /**\n   * When false (e.g. during an exit transition) Tab and Escape are no longer\n   * handled and the modal leaves the stack, but focus is still restored on\n   * unmount. Default true.\n   */\n  active?: boolean;\n}\n\n/**\n * Dialog focus and keyboard behavior for a modal panel: initial focus, Tab trap\n * (focusable elements computed at keypress), Escape (skipped when already\n * handled), and focus restore on unmount.\n *\n * Tab and Escape are handled by one document listener, so the trap still holds\n * when focus sits outside the dialog (e.g. after a backdrop click), and only\n * the topmost active modal responds. Events whose default was prevented (by an\n * inner widget or the host's `onKeyDown`) are ignored.\n */\nexport function useModalFocus(\n  rootRef: RefObject<HTMLElement | null>,\n  {\n    initialFocusRef,\n    closeOnEscape = true,\n    onClose,\n    active = true,\n  }: UseModalFocusOptions,\n): void {\n  const initialFocusRefRef = useRef(initialFocusRef);\n  initialFocusRefRef.current = initialFocusRef;\n  const latest = useRef({ closeOnEscape, onClose });\n  latest.current = { closeOnEscape, onClose };\n  const keyToken = useRef<object | null>(null);\n  // Stack position recorded when the token leaves the stack (exit start).\n  const exit = useRef<{ wasTop: boolean; below: object | undefined } | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const previous = document.activeElement as HTMLElement | null;\n    function shouldRestoreFocus(): boolean {\n      const top = modalStack[modalStack.length - 1];\n      const token = keyToken.current;\n      if (token && modalStack.includes(token)) return top === token;\n      if (!exit.current) return top === undefined;\n      return exit.current.wasTop && top === exit.current.below;\n    }\n    const root = rootRef.current;\n    const target = initialFocusRefRef.current?.current;\n    if (target && root?.contains(target)) target.focus();\n    if (!target || document.activeElement !== target) root?.focus();\n    return () => {\n      if (\n        shouldRestoreFocus() &&\n        previous &&\n        previous.isConnected &&\n        typeof previous.focus === 'function'\n      ) {\n        previous.focus();\n      }\n    };\n  }, [rootRef]);\n\n  useEffect(() => {\n    if (!active) return;\n    const token = {};\n    modalStack.push(token);\n    keyToken.current = token;\n    exit.current = null;\n\n    function handle(e: KeyboardEvent) {\n      if (e.defaultPrevented || modalStack[modalStack.length - 1] !== token)\n        return;\n      const dialog = rootRef.current;\n      if (!dialog) return;\n      if (e.key === 'Escape') {\n        if (latest.current.closeOnEscape) latest.current.onClose?.();\n        return;\n      }\n      if (e.key !== 'Tab') return;\n      const focusable = getFocusable(dialog);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        dialog.focus();\n        return;\n      }\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const current = document.activeElement;\n      const outside = !dialog.contains(current);\n      if (e.shiftKey) {\n        if (outside || current === first || current === dialog) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || current === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n    document.addEventListener('keydown', handle);\n    return () => {\n      document.removeEventListener('keydown', handle);\n      const index = modalStack.indexOf(token);\n      exit.current = {\n        wasTop: index === modalStack.length - 1,\n        below: modalStack[index - 1],\n      };\n      modalStack.splice(index, 1);\n    };\n  }, [rootRef, active]);\n}\n"],"names":["FOCUSABLE_SELECTOR","isHidden","el","root","node","style","getFocusable","modalStack","useModalFocus","rootRef","initialFocusRef","closeOnEscape","onClose","active","initialFocusRefRef","useRef","latest","keyToken","exit","useEffect","previous","shouldRestoreFocus","top","token","target","_a","handle","dialog","_b","focusable","first","last","current","outside","index"],"mappings":"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"}
+{"version":3,"file":"use-modal-focus.cjs","sources":["../../src/hooks/use-modal-focus.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'summary',\n  '[contenteditable=\"\"]',\n  '[contenteditable=\"true\"]',\n  '[tabindex]',\n].join(',');\n\nfunction isHidden(el: HTMLElement, root: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\n    if (node.hidden || node.hasAttribute('inert')) return true;\n    if (node.getAttribute('aria-hidden') === 'true') return true;\n    const style = getComputedStyle(node);\n    if (style.display === 'none') return true;\n    if (node === el && style.visibility === 'hidden') return true;\n    if (node === root) break;\n  }\n  return false;\n}\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter(\n    (el) => el.tabIndex >= 0 && !el.matches(':disabled') && !isHidden(el, root),\n  );\n}\n\n/**\n * Open modals in mount order; only the last one reacts to Tab and Escape.\n * Shared through `globalThis` so compass-ui copies bundled by plugins agree on\n * which modal is topmost.\n *\n * **Frozen v1 protocol** (additive-only, like tokens): opaque `{}` tokens,\n * push while active, splice on leave, last entry is top. Do not change the\n * entry shape or those rules in place — mint `…/modal-stack/v2` instead.\n * A new key means new copies stop cooperating with old ones.\n */\nconst STACK_KEY = Symbol.for('@mattermost/compass-ui/modal-stack/v1');\nconst stackHost = globalThis as typeof globalThis & {\n  [STACK_KEY]?: object[];\n};\nconst modalStack: object[] = (stackHost[STACK_KEY] ??= []);\n\nexport interface UseModalFocusOptions {\n  /** Element to focus on mount. Falls back to the dialog root. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Close on Escape. Default true. */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui focus manager). The modal still joins the stack,\n   * so modals below it stay inert. Initial focus and restore use the value at\n   * mount; the Tab trap follows later updates (like `closeOnEscape`). Default\n   * true.\n   */\n  manageFocus?: boolean;\n  onClose?: () => void;\n  /**\n   * When false (e.g. during an exit transition) Tab and Escape are no longer\n   * handled and the modal leaves the stack, but focus is still restored on\n   * unmount. Default true.\n   */\n  active?: boolean;\n}\n\n/**\n * Dialog focus and keyboard behavior for a modal panel: initial focus, Tab trap\n * (focusable elements computed at keypress), Escape (skipped when already\n * handled), and focus restore on unmount.\n *\n * Tab and Escape are handled by one document listener, so the trap still holds\n * when focus sits outside the dialog (e.g. after a backdrop click), and only\n * the topmost active modal responds. Events whose default was prevented (by an\n * inner widget or the host's `onKeyDown`) are ignored.\n */\nexport function useModalFocus(\n  rootRef: RefObject<HTMLElement | null>,\n  {\n    initialFocusRef,\n    closeOnEscape = true,\n    manageFocus = true,\n    onClose,\n    active = true,\n  }: UseModalFocusOptions,\n): void {\n  // Initial focus + restore only run once; the Tab trap reads `manageFocus` live.\n  const manageFocusOnMount = useRef(manageFocus);\n  const initialFocusRefRef = useRef(initialFocusRef);\n  const latest = useRef({ closeOnEscape, manageFocus, onClose });\n  // Commit-only writes: avoid leaking options from a discarded concurrent render,\n  // without the post-paint stale window of a passive effect.\n  useLayoutEffect(() => {\n    initialFocusRefRef.current = initialFocusRef;\n    latest.current = { closeOnEscape, manageFocus, onClose };\n  });\n  const keyToken = useRef<object | null>(null);\n  // Stack position recorded when the token leaves the stack (exit start).\n  const exit = useRef<{ wasTop: boolean; below: object | undefined } | null>(\n    null,\n  );\n\n  useEffect(() => {\n    if (!manageFocusOnMount.current) return;\n    const previous = document.activeElement as HTMLElement | null;\n    function shouldRestoreFocus(): boolean {\n      const top = modalStack[modalStack.length - 1];\n      const token = keyToken.current;\n      if (token && modalStack.includes(token)) return top === token;\n      if (!exit.current) return top === undefined;\n      return exit.current.wasTop && top === exit.current.below;\n    }\n    const root = rootRef.current;\n    const target = initialFocusRefRef.current?.current;\n    if (target && root?.contains(target)) target.focus();\n    if (!target || document.activeElement !== target) root?.focus();\n    return () => {\n      if (\n        shouldRestoreFocus() &&\n        previous &&\n        previous.isConnected &&\n        typeof previous.focus === 'function'\n      ) {\n        previous.focus();\n      }\n    };\n  }, [rootRef]);\n\n  useEffect(() => {\n    if (!active) return;\n    const token = {};\n    modalStack.push(token);\n    keyToken.current = token;\n    exit.current = null;\n\n    function handle(e: KeyboardEvent) {\n      if (e.defaultPrevented || modalStack[modalStack.length - 1] !== token)\n        return;\n      const dialog = rootRef.current;\n      if (!dialog) return;\n      if (e.key === 'Escape') {\n        if (latest.current.closeOnEscape) latest.current.onClose?.();\n        return;\n      }\n      if (e.key !== 'Tab' || !latest.current.manageFocus) return;\n      const focusable = getFocusable(dialog);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        dialog.focus();\n        return;\n      }\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const current = document.activeElement;\n      const outside = !dialog.contains(current);\n      if (e.shiftKey) {\n        if (outside || current === first || current === dialog) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || current === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n    document.addEventListener('keydown', handle);\n    return () => {\n      document.removeEventListener('keydown', handle);\n      const index = modalStack.indexOf(token);\n      exit.current = {\n        wasTop: index === modalStack.length - 1,\n        below: modalStack[index - 1],\n      };\n      modalStack.splice(index, 1);\n    };\n  }, [rootRef, active]);\n}\n"],"names":["FOCUSABLE_SELECTOR","isHidden","el","root","node","style","getFocusable","STACK_KEY","stackHost","modalStack","useModalFocus","rootRef","initialFocusRef","closeOnEscape","manageFocus","onClose","active","manageFocusOnMount","useRef","initialFocusRefRef","latest","useLayoutEffect","keyToken","exit","useEffect","previous","shouldRestoreFocus","top","token","target","_a","handle","dialog","_b","focusable","first","last","current","outside","index"],"mappings":"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"}

package/dist/hooks/use-modal-focus.d.ts

@@ -4,6 +4,14 @@ export interface UseModalFocusOptions {
     initialFocusRef?: RefObject<HTMLElement | null>;
     /** Close on Escape. Default true. */
     closeOnEscape?: boolean;
+    /**
+     * Initial focus, Tab trap and focus restore. Set false when the host owns
+     * focus (e.g. a floating-ui focus manager). The modal still joins the stack,
+     * so modals below it stay inert. Initial focus and restore use the value at
+     * mount; the Tab trap follows later updates (like `closeOnEscape`). Default
+     * true.
+     */
+    manageFocus?: boolean;
     onClose?: () => void;
     /**
      * When false (e.g. during an exit transition) Tab and Escape are no longer
@@ -22,5 +30,5 @@ export interface UseModalFocusOptions {
  * the topmost active modal responds. Events whose default was prevented (by an
  * inner widget or the host's `onKeyDown`) are ignored.
  */
-export declare function useModalFocus(rootRef: RefObject<HTMLElement | null>, { initialFocusRef, closeOnEscape, onClose, active, }: UseModalFocusOptions): void;
+export declare function useModalFocus(rootRef: RefObject<HTMLElement | null>, { initialFocusRef, closeOnEscape, manageFocus, onClose, active, }: UseModalFocusOptions): void;
 //# sourceMappingURL=use-modal-focus.d.ts.map

package/dist/hooks/use-modal-focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal-focus.d.ts","sourceRoot":"","sources":["../../src/hooks/use-modal-focus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsCvC,MAAM,WAAW,oBAAoB;IACnC,gEAAgE;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,EACE,eAAe,EACf,aAAoB,EACpB,OAAO,EACP,MAAa,GACd,EAAE,oBAAoB,GACtB,IAAI,CAoFN"}
+{"version":3,"file":"use-modal-focus.d.ts","sourceRoot":"","sources":["../../src/hooks/use-modal-focus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmDvC,MAAM,WAAW,oBAAoB;IACnC,gEAAgE;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,EACE,eAAe,EACf,aAAoB,EACpB,WAAkB,EAClB,OAAO,EACP,MAAa,GACd,EAAE,oBAAoB,GACtB,IAAI,CA2FN"}

package/dist/hooks/use-modal-focus.js

@@ -1,5 +1,5 @@
-import { useRef as m, useEffect as x } from "react";
-const w = [
+import { useRef as d, useLayoutEffect as A, useEffect as S } from "react";
+const F = [
   "a[href]",
   "area[href]",
   "button:not([disabled])",
@@ -11,81 +11,83 @@ const w = [
   '[contenteditable="true"]',
   "[tabindex]"
 ].join(",");
-function A(r, i) {
+function O(r, o) {
   for (let t = r; t; t = t.parentElement) {
     if (t.hidden || t.hasAttribute("inert") || t.getAttribute("aria-hidden") === "true") return !0;
-    const d = getComputedStyle(t);
-    if (d.display === "none" || t === r && d.visibility === "hidden") return !0;
-    if (t === i) break;
+    const i = getComputedStyle(t);
+    if (i.display === "none" || t === r && i.visibility === "hidden") return !0;
+    if (t === o) break;
   }
   return !1;
 }
-function S(r) {
+function C(r) {
   return Array.from(
-    r.querySelectorAll(w)
+    r.querySelectorAll(F)
   ).filter(
-    (i) => i.tabIndex >= 0 && !i.matches(":disabled") && !A(i, r)
+    (o) => o.tabIndex >= 0 && !o.matches(":disabled") && !O(o, r)
   );
 }
-const u = [];
-function C(r, {
-  initialFocusRef: i,
+const h = Symbol.for("@mattermost/compass-ui/modal-stack/v1"), y = globalThis, u = y[h] ?? (y[h] = []);
+function M(r, {
+  initialFocusRef: o,
   closeOnEscape: t = !0,
-  onClose: d,
-  active: h = !0
+  manageFocus: i = !0,
+  onClose: v,
+  active: g = !0
 }) {
-  const y = m(i);
-  y.current = i;
-  const p = m({ closeOnEscape: t, onClose: d });
-  p.current = { closeOnEscape: t, onClose: d };
-  const v = m(null), l = m(
+  const T = d(i), E = d(o), m = d({ closeOnEscape: t, manageFocus: i, onClose: v });
+  A(() => {
+    E.current = o, m.current = { closeOnEscape: t, manageFocus: i, onClose: v };
+  });
+  const k = d(null), l = d(
     null
   );
-  x(() => {
-    var o;
+  S(() => {
+    var s;
+    if (!T.current) return;
     const c = document.activeElement;
-    function a() {
-      const s = u[u.length - 1], f = v.current;
-      return f && u.includes(f) ? s === f : l.current ? l.current.wasTop && s === l.current.below : s === void 0;
+    function b() {
+      const f = u[u.length - 1], a = k.current;
+      return a && u.includes(a) ? f === a : l.current ? l.current.wasTop && f === l.current.below : f === void 0;
     }
-    const e = r.current, n = (o = y.current) == null ? void 0 : o.current;
+    const e = r.current, n = (s = E.current) == null ? void 0 : s.current;
     return n && (e != null && e.contains(n)) && n.focus(), (!n || document.activeElement !== n) && (e == null || e.focus()), () => {
-      a() && c && c.isConnected && typeof c.focus == "function" && c.focus();
+      b() && c && c.isConnected && typeof c.focus == "function" && c.focus();
     };
-  }, [r]), x(() => {
-    if (!h) return;
+  }, [r]), S(() => {
+    if (!g) return;
     const c = {};
-    u.push(c), v.current = c, l.current = null;
-    function a(e) {
-      var g, k;
+    u.push(c), k.current = c, l.current = null;
+    function b(e) {
+      var w, L;
       if (e.defaultPrevented || u[u.length - 1] !== c)
         return;
       const n = r.current;
       if (!n) return;
       if (e.key === "Escape") {
-        p.current.closeOnEscape && ((k = (g = p.current).onClose) == null || k.call(g));
+        m.current.closeOnEscape && ((L = (w = m.current).onClose) == null || L.call(w));
         return;
       }
-      if (e.key !== "Tab") return;
-      const o = S(n);
-      if (o.length === 0) {
+      if (e.key !== "Tab" || !m.current.manageFocus) return;
+      const s = C(n);
+      if (s.length === 0) {
         e.preventDefault(), n.focus();
         return;
       }
-      const s = o[0], f = o[o.length - 1], b = document.activeElement, E = !n.contains(b);
-      e.shiftKey ? (E || b === s || b === n) && (e.preventDefault(), f.focus()) : (E || b === f) && (e.preventDefault(), s.focus());
+      const f = s[0], a = s[s.length - 1], p = document.activeElement, x = !n.contains(p);
+      e.shiftKey ? (x || p === f || p === n) && (e.preventDefault(), a.focus()) : (x || p === a) && (e.preventDefault(), f.focus());
     }
-    return document.addEventListener("keydown", a), () => {
-      document.removeEventListener("keydown", a);
+    return document.addEventListener("keydown", b), () => {
+      document.removeEventListener("keydown", b);
       const e = u.indexOf(c);
       l.current = {
         wasTop: e === u.length - 1,
         below: u[e - 1]
       }, u.splice(e, 1);
     };
-  }, [r, h]);
+  }, [r, g]);
 }
 export {
-  C as useModalFocus
+  M as useModalFocus
 };
 //# sourceMappingURL=use-modal-focus.js.map

package/dist/hooks/use-modal-focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal-focus.js","sources":["../../src/hooks/use-modal-focus.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'summary',\n  '[contenteditable=\"\"]',\n  '[contenteditable=\"true\"]',\n  '[tabindex]',\n].join(',');\n\nfunction isHidden(el: HTMLElement, root: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\n    if (node.hidden || node.hasAttribute('inert')) return true;\n    if (node.getAttribute('aria-hidden') === 'true') return true;\n    const style = getComputedStyle(node);\n    if (style.display === 'none') return true;\n    if (node === el && style.visibility === 'hidden') return true;\n    if (node === root) break;\n  }\n  return false;\n}\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter(\n    (el) => el.tabIndex >= 0 && !el.matches(':disabled') && !isHidden(el, root),\n  );\n}\n\n/** Open modals in mount order; only the last one reacts to Tab and Escape. */\nconst modalStack: object[] = [];\n\nexport interface UseModalFocusOptions {\n  /** Element to focus on mount. Falls back to the dialog root. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Close on Escape. Default true. */\n  closeOnEscape?: boolean;\n  onClose?: () => void;\n  /**\n   * When false (e.g. during an exit transition) Tab and Escape are no longer\n   * handled and the modal leaves the stack, but focus is still restored on\n   * unmount. Default true.\n   */\n  active?: boolean;\n}\n\n/**\n * Dialog focus and keyboard behavior for a modal panel: initial focus, Tab trap\n * (focusable elements computed at keypress), Escape (skipped when already\n * handled), and focus restore on unmount.\n *\n * Tab and Escape are handled by one document listener, so the trap still holds\n * when focus sits outside the dialog (e.g. after a backdrop click), and only\n * the topmost active modal responds. Events whose default was prevented (by an\n * inner widget or the host's `onKeyDown`) are ignored.\n */\nexport function useModalFocus(\n  rootRef: RefObject<HTMLElement | null>,\n  {\n    initialFocusRef,\n    closeOnEscape = true,\n    onClose,\n    active = true,\n  }: UseModalFocusOptions,\n): void {\n  const initialFocusRefRef = useRef(initialFocusRef);\n  initialFocusRefRef.current = initialFocusRef;\n  const latest = useRef({ closeOnEscape, onClose });\n  latest.current = { closeOnEscape, onClose };\n  const keyToken = useRef<object | null>(null);\n  // Stack position recorded when the token leaves the stack (exit start).\n  const exit = useRef<{ wasTop: boolean; below: object | undefined } | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const previous = document.activeElement as HTMLElement | null;\n    function shouldRestoreFocus(): boolean {\n      const top = modalStack[modalStack.length - 1];\n      const token = keyToken.current;\n      if (token && modalStack.includes(token)) return top === token;\n      if (!exit.current) return top === undefined;\n      return exit.current.wasTop && top === exit.current.below;\n    }\n    const root = rootRef.current;\n    const target = initialFocusRefRef.current?.current;\n    if (target && root?.contains(target)) target.focus();\n    if (!target || document.activeElement !== target) root?.focus();\n    return () => {\n      if (\n        shouldRestoreFocus() &&\n        previous &&\n        previous.isConnected &&\n        typeof previous.focus === 'function'\n      ) {\n        previous.focus();\n      }\n    };\n  }, [rootRef]);\n\n  useEffect(() => {\n    if (!active) return;\n    const token = {};\n    modalStack.push(token);\n    keyToken.current = token;\n    exit.current = null;\n\n    function handle(e: KeyboardEvent) {\n      if (e.defaultPrevented || modalStack[modalStack.length - 1] !== token)\n        return;\n      const dialog = rootRef.current;\n      if (!dialog) return;\n      if (e.key === 'Escape') {\n        if (latest.current.closeOnEscape) latest.current.onClose?.();\n        return;\n      }\n      if (e.key !== 'Tab') return;\n      const focusable = getFocusable(dialog);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        dialog.focus();\n        return;\n      }\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const current = document.activeElement;\n      const outside = !dialog.contains(current);\n      if (e.shiftKey) {\n        if (outside || current === first || current === dialog) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || current === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n    document.addEventListener('keydown', handle);\n    return () => {\n      document.removeEventListener('keydown', handle);\n      const index = modalStack.indexOf(token);\n      exit.current = {\n        wasTop: index === modalStack.length - 1,\n        below: modalStack[index - 1],\n      };\n      modalStack.splice(index, 1);\n    };\n  }, [rootRef, active]);\n}\n"],"names":["FOCUSABLE_SELECTOR","isHidden","el","root","node","style","getFocusable","modalStack","useModalFocus","rootRef","initialFocusRef","closeOnEscape","onClose","active","initialFocusRefRef","useRef","latest","keyToken","exit","useEffect","previous","shouldRestoreFocus","top","token","target","_a","handle","dialog","_b","focusable","first","last","current","outside","index"],"mappings":"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"}
+{"version":3,"file":"use-modal-focus.js","sources":["../../src/hooks/use-modal-focus.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'summary',\n  '[contenteditable=\"\"]',\n  '[contenteditable=\"true\"]',\n  '[tabindex]',\n].join(',');\n\nfunction isHidden(el: HTMLElement, root: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\n    if (node.hidden || node.hasAttribute('inert')) return true;\n    if (node.getAttribute('aria-hidden') === 'true') return true;\n    const style = getComputedStyle(node);\n    if (style.display === 'none') return true;\n    if (node === el && style.visibility === 'hidden') return true;\n    if (node === root) break;\n  }\n  return false;\n}\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter(\n    (el) => el.tabIndex >= 0 && !el.matches(':disabled') && !isHidden(el, root),\n  );\n}\n\n/**\n * Open modals in mount order; only the last one reacts to Tab and Escape.\n * Shared through `globalThis` so compass-ui copies bundled by plugins agree on\n * which modal is topmost.\n *\n * **Frozen v1 protocol** (additive-only, like tokens): opaque `{}` tokens,\n * push while active, splice on leave, last entry is top. Do not change the\n * entry shape or those rules in place — mint `…/modal-stack/v2` instead.\n * A new key means new copies stop cooperating with old ones.\n */\nconst STACK_KEY = Symbol.for('@mattermost/compass-ui/modal-stack/v1');\nconst stackHost = globalThis as typeof globalThis & {\n  [STACK_KEY]?: object[];\n};\nconst modalStack: object[] = (stackHost[STACK_KEY] ??= []);\n\nexport interface UseModalFocusOptions {\n  /** Element to focus on mount. Falls back to the dialog root. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Close on Escape. Default true. */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui focus manager). The modal still joins the stack,\n   * so modals below it stay inert. Initial focus and restore use the value at\n   * mount; the Tab trap follows later updates (like `closeOnEscape`). Default\n   * true.\n   */\n  manageFocus?: boolean;\n  onClose?: () => void;\n  /**\n   * When false (e.g. during an exit transition) Tab and Escape are no longer\n   * handled and the modal leaves the stack, but focus is still restored on\n   * unmount. Default true.\n   */\n  active?: boolean;\n}\n\n/**\n * Dialog focus and keyboard behavior for a modal panel: initial focus, Tab trap\n * (focusable elements computed at keypress), Escape (skipped when already\n * handled), and focus restore on unmount.\n *\n * Tab and Escape are handled by one document listener, so the trap still holds\n * when focus sits outside the dialog (e.g. after a backdrop click), and only\n * the topmost active modal responds. Events whose default was prevented (by an\n * inner widget or the host's `onKeyDown`) are ignored.\n */\nexport function useModalFocus(\n  rootRef: RefObject<HTMLElement | null>,\n  {\n    initialFocusRef,\n    closeOnEscape = true,\n    manageFocus = true,\n    onClose,\n    active = true,\n  }: UseModalFocusOptions,\n): void {\n  // Initial focus + restore only run once; the Tab trap reads `manageFocus` live.\n  const manageFocusOnMount = useRef(manageFocus);\n  const initialFocusRefRef = useRef(initialFocusRef);\n  const latest = useRef({ closeOnEscape, manageFocus, onClose });\n  // Commit-only writes: avoid leaking options from a discarded concurrent render,\n  // without the post-paint stale window of a passive effect.\n  useLayoutEffect(() => {\n    initialFocusRefRef.current = initialFocusRef;\n    latest.current = { closeOnEscape, manageFocus, onClose };\n  });\n  const keyToken = useRef<object | null>(null);\n  // Stack position recorded when the token leaves the stack (exit start).\n  const exit = useRef<{ wasTop: boolean; below: object | undefined } | null>(\n    null,\n  );\n\n  useEffect(() => {\n    if (!manageFocusOnMount.current) return;\n    const previous = document.activeElement as HTMLElement | null;\n    function shouldRestoreFocus(): boolean {\n      const top = modalStack[modalStack.length - 1];\n      const token = keyToken.current;\n      if (token && modalStack.includes(token)) return top === token;\n      if (!exit.current) return top === undefined;\n      return exit.current.wasTop && top === exit.current.below;\n    }\n    const root = rootRef.current;\n    const target = initialFocusRefRef.current?.current;\n    if (target && root?.contains(target)) target.focus();\n    if (!target || document.activeElement !== target) root?.focus();\n    return () => {\n      if (\n        shouldRestoreFocus() &&\n        previous &&\n        previous.isConnected &&\n        typeof previous.focus === 'function'\n      ) {\n        previous.focus();\n      }\n    };\n  }, [rootRef]);\n\n  useEffect(() => {\n    if (!active) return;\n    const token = {};\n    modalStack.push(token);\n    keyToken.current = token;\n    exit.current = null;\n\n    function handle(e: KeyboardEvent) {\n      if (e.defaultPrevented || modalStack[modalStack.length - 1] !== token)\n        return;\n      const dialog = rootRef.current;\n      if (!dialog) return;\n      if (e.key === 'Escape') {\n        if (latest.current.closeOnEscape) latest.current.onClose?.();\n        return;\n      }\n      if (e.key !== 'Tab' || !latest.current.manageFocus) return;\n      const focusable = getFocusable(dialog);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        dialog.focus();\n        return;\n      }\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const current = document.activeElement;\n      const outside = !dialog.contains(current);\n      if (e.shiftKey) {\n        if (outside || current === first || current === dialog) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || current === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n    document.addEventListener('keydown', handle);\n    return () => {\n      document.removeEventListener('keydown', handle);\n      const index = modalStack.indexOf(token);\n      exit.current = {\n        wasTop: index === modalStack.length - 1,\n        below: modalStack[index - 1],\n      };\n      modalStack.splice(index, 1);\n    };\n  }, [rootRef, active]);\n}\n"],"names":["FOCUSABLE_SELECTOR","isHidden","el","root","node","style","getFocusable","STACK_KEY","stackHost","modalStack","useModalFocus","rootRef","initialFocusRef","closeOnEscape","manageFocus","onClose","active","manageFocusOnMount","useRef","initialFocusRefRef","latest","useLayoutEffect","keyToken","exit","useEffect","previous","shouldRestoreFocus","top","token","target","_a","handle","dialog","_b","focusable","first","last","current","outside","index"],"mappings":";AAGA,MAAMA,IAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAEV,SAASC,EAASC,GAAiBC,GAA4B;AAC7D,WAASC,IAA2BF,GAAIE,GAAMA,IAAOA,EAAK,eAAe;AAEvE,QADIA,EAAK,UAAUA,EAAK,aAAa,OAAO,KACxCA,EAAK,aAAa,aAAa,MAAM,OAAQ,QAAO;AACxD,UAAMC,IAAQ,iBAAiBD,CAAI;AAEnC,QADIC,EAAM,YAAY,UAClBD,MAASF,KAAMG,EAAM,eAAe,SAAU,QAAO;AACzD,QAAID,MAASD,EAAM;AAAA,EACrB;AACA,SAAO;AACT;AAEA,SAASG,EAAaH,GAAkC;AACtD,SAAO,MAAM;AAAA,IACXA,EAAK,iBAA8BH,CAAkB;AAAA,EAAA,EACrD;AAAA,IACA,CAACE,MAAOA,EAAG,YAAY,KAAK,CAACA,EAAG,QAAQ,WAAW,KAAK,CAACD,EAASC,GAAIC,CAAI;AAAA,EAAA;AAE9E;AAYA,MAAMI,IAAY,OAAO,IAAI,uCAAuC,GAC9DC,IAAY,YAGZC,IAAwBD,EAAAD,OAAAC,EAAAD,KAAyB,CAAA;AAkChD,SAASG,EACdC,GACA;AAAA,EACE,iBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,QAAAC,IAAS;AACX,GACM;AAEN,QAAMC,IAAqBC,EAAOJ,CAAW,GACvCK,IAAqBD,EAAON,CAAe,GAC3CQ,IAASF,EAAO,EAAE,eAAAL,GAAe,aAAAC,GAAa,SAAAC,GAAS;AAG7D,EAAAM,EAAgB,MAAM;AACpB,IAAAF,EAAmB,UAAUP,GAC7BQ,EAAO,UAAU,EAAE,eAAAP,GAAe,aAAAC,GAAa,SAAAC,EAAA;AAAA,EACjD,CAAC;AACD,QAAMO,IAAWJ,EAAsB,IAAI,GAErCK,IAAOL;AAAA,IACX;AAAA,EAAA;AAGF,EAAAM,EAAU,MAAM;;AACd,QAAI,CAACP,EAAmB,QAAS;AACjC,UAAMQ,IAAW,SAAS;AAC1B,aAASC,IAA8B;AACrC,YAAMC,IAAMlB,EAAWA,EAAW,SAAS,CAAC,GACtCmB,IAAQN,EAAS;AACvB,aAAIM,KAASnB,EAAW,SAASmB,CAAK,IAAUD,MAAQC,IACnDL,EAAK,UACHA,EAAK,QAAQ,UAAUI,MAAQJ,EAAK,QAAQ,QADzBI,MAAQ;AAAA,IAEpC;AACA,UAAMxB,IAAOQ,EAAQ,SACfkB,KAASC,IAAAX,EAAmB,YAAnB,gBAAAW,EAA4B;AAC3C,WAAID,MAAU1B,KAAA,QAAAA,EAAM,SAAS0B,SAAgB,MAAA,IACzC,CAACA,KAAU,SAAS,kBAAkBA,sBAAc,UACjD,MAAM;AACX,MACEH,EAAA,KACAD,KACAA,EAAS,eACT,OAAOA,EAAS,SAAU,cAE1BA,EAAS,MAAA;AAAA,IAEb;AAAA,EACF,GAAG,CAACd,CAAO,CAAC,GAEZa,EAAU,MAAM;AACd,QAAI,CAACR,EAAQ;AACb,UAAMY,IAAQ,CAAA;AACd,IAAAnB,EAAW,KAAKmB,CAAK,GACrBN,EAAS,UAAUM,GACnBL,EAAK,UAAU;AAEf,aAASQ,EAAO,GAAkB;;AAChC,UAAI,EAAE,oBAAoBtB,EAAWA,EAAW,SAAS,CAAC,MAAMmB;AAC9D;AACF,YAAMI,IAASrB,EAAQ;AACvB,UAAI,CAACqB,EAAQ;AACb,UAAI,EAAE,QAAQ,UAAU;AACtB,QAAIZ,EAAO,QAAQ,mBAAea,KAAAH,IAAAV,EAAO,SAAQ,YAAf,QAAAa,EAAA,KAAAH;AAClC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,SAAS,CAACV,EAAO,QAAQ,YAAa;AACpD,YAAMc,IAAY5B,EAAa0B,CAAM;AACrC,UAAIE,EAAU,WAAW,GAAG;AAC1B,UAAE,eAAA,GACFF,EAAO,MAAA;AACP;AAAA,MACF;AACA,YAAMG,IAAQD,EAAU,CAAC,GACnBE,IAAOF,EAAUA,EAAU,SAAS,CAAC,GACrCG,IAAU,SAAS,eACnBC,IAAU,CAACN,EAAO,SAASK,CAAO;AACxC,MAAI,EAAE,YACAC,KAAWD,MAAYF,KAASE,MAAYL,OAC9C,EAAE,eAAA,GACFI,EAAK,MAAA,MAEEE,KAAWD,MAAYD,OAChC,EAAE,eAAA,GACFD,EAAM,MAAA;AAAA,IAEV;AACA,oBAAS,iBAAiB,WAAWJ,CAAM,GACpC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAM;AAC9C,YAAMQ,IAAQ9B,EAAW,QAAQmB,CAAK;AACtC,MAAAL,EAAK,UAAU;AAAA,QACb,QAAQgB,MAAU9B,EAAW,SAAS;AAAA,QACtC,OAAOA,EAAW8B,IAAQ,CAAC;AAAA,MAAA,GAE7B9B,EAAW,OAAO8B,GAAO,CAAC;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC5B,GAASK,CAAM,CAAC;AACtB;"}

package/dist/illustrations/names.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["ai-copilot-intro","alert","alert-on-sidebar-bg","archived-channel","auto-translation","banners","billing-history","blank-playbook","bot-accounts","browser-or-desktop","bug-bash","calls","collaborate","compliance-exports","copilot-bot","custom-branding","custom-terms","customer-onboarding","data-retention","drafts-empty","employee-onboarding","feature-lifecycle","file-search-empty","globe","group","groups","incident-resolution","incoming-webhook","intune-mam","learn-playbooks","locked-messages","mentions-empty","message-not-viewable","message-search-empty","mfa","mfa-complete","mobile-protection","mobile-security","new-password","no-unreads-on-sidebar-bg","office","outgoing-webhook","pinned-empty","playbooks-empty","private-channel-intro","product-release","public-channel-intro","rating","rating-desktop","read-only","reset-password","saved-empty","scheduled-empty","search","server","setup-system","site-error","slash-commands","success","system-admins","threads-empty","timer","tls-certificate","tools","town-square-channel-intro","upload-license","verify-email"];exports.ILLUSTRATION_NAMES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["ai-copilot-intro","alert","alert-on-sidebar-bg","archived-channel","auto-translation","banners","billing-history","blank-playbook","bot-accounts","browser-or-desktop","bug-bash","calls","collaborate","compliance-exports","copilot-bot","custom-branding","custom-terms","customer-onboarding","data-retention","drafts-empty","employee-onboarding","feature-lifecycle","file-search-empty","globe","group","groups","incident-resolution","incoming-webhook","intune-mam","learn-playbooks","locked-messages","mentions-empty","message-not-viewable","message-search-empty","mfa","mfa-complete","mobile-protection","mobile-security","new-password","no-unreads-on-sidebar-bg","oauth","office","outgoing-oauth-connections","outgoing-webhook","pinned-empty","playbooks-empty","private-channel-intro","product-release","public-channel-intro","rating","rating-desktop","read-only","reset-password","saved-empty","scheduled-empty","search","server","setup-system","site-error","slash-commands","success","system-admins","threads-empty","timer","tls-certificate","tools","town-square-channel-intro","upload-license","verify-email"];exports.ILLUSTRATION_NAMES=e;
 //# sourceMappingURL=names.cjs.map

package/dist/illustrations/names.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"names.cjs","sources":["../../src/illustrations/names.ts"],"sourcesContent":["/* Generated by scripts/gen-compass-illustrations.mjs — do not edit by hand */\n\nexport const ILLUSTRATION_NAMES = [\n  'ai-copilot-intro',\n  'alert',\n  'alert-on-sidebar-bg',\n  'archived-channel',\n  'auto-translation',\n  'banners',\n  'billing-history',\n  'blank-playbook',\n  'bot-accounts',\n  'browser-or-desktop',\n  'bug-bash',\n  'calls',\n  'collaborate',\n  'compliance-exports',\n  'copilot-bot',\n  'custom-branding',\n  'custom-terms',\n  'customer-onboarding',\n  'data-retention',\n  'drafts-empty',\n  'employee-onboarding',\n  'feature-lifecycle',\n  'file-search-empty',\n  'globe',\n  'group',\n  'groups',\n  'incident-resolution',\n  'incoming-webhook',\n  'intune-mam',\n  'learn-playbooks',\n  'locked-messages',\n  'mentions-empty',\n  'message-not-viewable',\n  'message-search-empty',\n  'mfa',\n  'mfa-complete',\n  'mobile-protection',\n  'mobile-security',\n  'new-password',\n  'no-unreads-on-sidebar-bg',\n  'office',\n  'outgoing-webhook',\n  'pinned-empty',\n  'playbooks-empty',\n  'private-channel-intro',\n  'product-release',\n  'public-channel-intro',\n  'rating',\n  'rating-desktop',\n  'read-only',\n  'reset-password',\n  'saved-empty',\n  'scheduled-empty',\n  'search',\n  'server',\n  'setup-system',\n  'site-error',\n  'slash-commands',\n  'success',\n  'system-admins',\n  'threads-empty',\n  'timer',\n  'tls-certificate',\n  'tools',\n  'town-square-channel-intro',\n  'upload-license',\n  'verify-email',\n] as const;\n\nexport type IllustrationName = (typeof ILLUSTRATION_NAMES)[number];\n"],"names":["ILLUSTRATION_NAMES"],"mappings":"gFAEO,MAAMA,EAAqB,CAChC,mBACA,QACA,sBACA,mBACA,mBACA,UACA,kBACA,iBACA,eACA,qBACA,WACA,QACA,cACA,qBACA,cACA,kBACA,eACA,sBACA,iBACA,eACA,sBACA,oBACA,oBACA,QACA,QACA,SACA,sBACA,mBACA,aACA,kBACA,kBACA,iBACA,uBACA,uBACA,MACA,eACA,oBACA,kBACA,eACA,2BACA,SACA,mBACA,eACA,kBACA,wBACA,kBACA,uBACA,SACA,iBACA,YACA,iBACA,cACA,kBACA,SACA,SACA,eACA,aACA,iBACA,UACA,gBACA,gBACA,QACA,kBACA,QACA,4BACA,iBACA,cACF"}
+{"version":3,"file":"names.cjs","sources":["../../src/illustrations/names.ts"],"sourcesContent":["/* Generated by scripts/gen-compass-illustrations.mjs — do not edit by hand */\n\nexport const ILLUSTRATION_NAMES = [\n  'ai-copilot-intro',\n  'alert',\n  'alert-on-sidebar-bg',\n  'archived-channel',\n  'auto-translation',\n  'banners',\n  'billing-history',\n  'blank-playbook',\n  'bot-accounts',\n  'browser-or-desktop',\n  'bug-bash',\n  'calls',\n  'collaborate',\n  'compliance-exports',\n  'copilot-bot',\n  'custom-branding',\n  'custom-terms',\n  'customer-onboarding',\n  'data-retention',\n  'drafts-empty',\n  'employee-onboarding',\n  'feature-lifecycle',\n  'file-search-empty',\n  'globe',\n  'group',\n  'groups',\n  'incident-resolution',\n  'incoming-webhook',\n  'intune-mam',\n  'learn-playbooks',\n  'locked-messages',\n  'mentions-empty',\n  'message-not-viewable',\n  'message-search-empty',\n  'mfa',\n  'mfa-complete',\n  'mobile-protection',\n  'mobile-security',\n  'new-password',\n  'no-unreads-on-sidebar-bg',\n  'oauth',\n  'office',\n  'outgoing-oauth-connections',\n  'outgoing-webhook',\n  'pinned-empty',\n  'playbooks-empty',\n  'private-channel-intro',\n  'product-release',\n  'public-channel-intro',\n  'rating',\n  'rating-desktop',\n  'read-only',\n  'reset-password',\n  'saved-empty',\n  'scheduled-empty',\n  'search',\n  'server',\n  'setup-system',\n  'site-error',\n  'slash-commands',\n  'success',\n  'system-admins',\n  'threads-empty',\n  'timer',\n  'tls-certificate',\n  'tools',\n  'town-square-channel-intro',\n  'upload-license',\n  'verify-email',\n] as const;\n\nexport type IllustrationName = (typeof ILLUSTRATION_NAMES)[number];\n"],"names":["ILLUSTRATION_NAMES"],"mappings":"gFAEO,MAAMA,EAAqB,CAChC,mBACA,QACA,sBACA,mBACA,mBACA,UACA,kBACA,iBACA,eACA,qBACA,WACA,QACA,cACA,qBACA,cACA,kBACA,eACA,sBACA,iBACA,eACA,sBACA,oBACA,oBACA,QACA,QACA,SACA,sBACA,mBACA,aACA,kBACA,kBACA,iBACA,uBACA,uBACA,MACA,eACA,oBACA,kBACA,eACA,2BACA,QACA,SACA,6BACA,mBACA,eACA,kBACA,wBACA,kBACA,uBACA,SACA,iBACA,YACA,iBACA,cACA,kBACA,SACA,SACA,eACA,aACA,iBACA,UACA,gBACA,gBACA,QACA,kBACA,QACA,4BACA,iBACA,cACF"}

package/dist/illustrations/names.d.ts

@@ -1,3 +1,3 @@
-export declare const ILLUSTRATION_NAMES: readonly ["ai-copilot-intro", "alert", "alert-on-sidebar-bg", "archived-channel", "auto-translation", "banners", "billing-history", "blank-playbook", "bot-accounts", "browser-or-desktop", "bug-bash", "calls", "collaborate", "compliance-exports", "copilot-bot", "custom-branding", "custom-terms", "customer-onboarding", "data-retention", "drafts-empty", "employee-onboarding", "feature-lifecycle", "file-search-empty", "globe", "group", "groups", "incident-resolution", "incoming-webhook", "intune-mam", "learn-playbooks", "locked-messages", "mentions-empty", "message-not-viewable", "message-search-empty", "mfa", "mfa-complete", "mobile-protection", "mobile-security", "new-password", "no-unreads-on-sidebar-bg", "office", "outgoing-webhook", "pinned-empty", "playbooks-empty", "private-channel-intro", "product-release", "public-channel-intro", "rating", "rating-desktop", "read-only", "reset-password", "saved-empty", "scheduled-empty", "search", "server", "setup-system", "site-error", "slash-commands", "success", "system-admins", "threads-empty", "timer", "tls-certificate", "tools", "town-square-channel-intro", "upload-license", "verify-email"];
+export declare const ILLUSTRATION_NAMES: readonly ["ai-copilot-intro", "alert", "alert-on-sidebar-bg", "archived-channel", "auto-translation", "banners", "billing-history", "blank-playbook", "bot-accounts", "browser-or-desktop", "bug-bash", "calls", "collaborate", "compliance-exports", "copilot-bot", "custom-branding", "custom-terms", "customer-onboarding", "data-retention", "drafts-empty", "employee-onboarding", "feature-lifecycle", "file-search-empty", "globe", "group", "groups", "incident-resolution", "incoming-webhook", "intune-mam", "learn-playbooks", "locked-messages", "mentions-empty", "message-not-viewable", "message-search-empty", "mfa", "mfa-complete", "mobile-protection", "mobile-security", "new-password", "no-unreads-on-sidebar-bg", "oauth", "office", "outgoing-oauth-connections", "outgoing-webhook", "pinned-empty", "playbooks-empty", "private-channel-intro", "product-release", "public-channel-intro", "rating", "rating-desktop", "read-only", "reset-password", "saved-empty", "scheduled-empty", "search", "server", "setup-system", "site-error", "slash-commands", "success", "system-admins", "threads-empty", "timer", "tls-certificate", "tools", "town-square-channel-intro", "upload-license", "verify-email"];
 export type IllustrationName = (typeof ILLUSTRATION_NAMES)[number];
 //# sourceMappingURL=names.d.ts.map

package/dist/illustrations/names.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"names.d.ts","sourceRoot":"","sources":["../../src/illustrations/names.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,koCAoErB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"names.d.ts","sourceRoot":"","sources":["../../src/illustrations/names.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yqCAsErB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/illustrations/names.js

@@ -39,7 +39,9 @@ const e = [
   "mobile-security",
   "new-password",
   "no-unreads-on-sidebar-bg",
+  "oauth",
   "office",
+  "outgoing-oauth-connections",
   "outgoing-webhook",
   "pinned-empty",
   "playbooks-empty",