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

package/dist/components/field-message/FieldMessage.js

@@ -0,0 +1,28 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import __f from "@mattermost/compass-icons/components/alert-circle-outline.js";const f=__f&&__f.default?__f.default:__f;
+import __d from "@mattermost/compass-icons/components/alert-outline.js";const d=__d&&__d.default?__d.default:__d;
+import __p from "@mattermost/compass-icons/components/check.js";const p=__p&&__p.default?__p.default:__p;
+import g from "../icon/Icon.js";
+import { toKebab as u } from "../../utils/string.js";
+import s from "./FieldMessage.module.scss.js";
+const h = {
+  error: /* @__PURE__ */ e(f, {}),
+  warning: /* @__PURE__ */ e(d, {}),
+  success: /* @__PURE__ */ e(p, {})
+};
+function A({
+  className: l = "",
+  message: n,
+  tone: r = "error",
+  ...o
+}) {
+  const t = s[`field-message--tone-${u(r)}`], a = [s["field-message"], t, l].filter(Boolean).join(" "), c = r === "error" || r === "warning", i = h[r];
+  return /* @__PURE__ */ m("div", { ...o, className: a, role: c ? "alert" : o.role, children: [
+    i != null && /* @__PURE__ */ e("span", { className: s["field-message__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(g, { size: "12", glyph: i }) }),
+    /* @__PURE__ */ e("span", { className: s["field-message__text"], children: n })
+  ] });
+}
+export {
+  A as default
+};
+//# sourceMappingURL=FieldMessage.js.map

package/dist/components/field-message/FieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.js","sources":["../../../src/components/field-message/FieldMessage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './FieldMessage.module.scss';\n\nexport type FieldMessageTone = 'error' | 'warning' | 'info' | 'success';\n\nexport interface FieldMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Visual tone. Default: `error`. Info has no icon. */\n  tone?: FieldMessageTone;\n}\n\nconst TONE_ICONS: Partial<Record<FieldMessageTone, ReactNode>> = {\n  error: <AlertCircleOutlineIcon />,\n  warning: <AlertOutlineIcon />,\n  success: <CheckIcon />,\n};\n\n/**\n * Field Message is the inline status line under a form field — validation errors, warnings,\n * hints, or success. Error, warning, and success pair a tone glyph with the copy; info is\n * text-only at muted center-channel color.\n */\nexport default function FieldMessage({\n  className = '',\n  message,\n  tone = 'error',\n  ...rest\n}: FieldMessageProps) {\n  const toneClass = styles[`field-message--tone-${toKebab(tone)}`];\n  const rootClass = [styles['field-message'], toneClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isAlert = tone === 'error' || tone === 'warning';\n  const glyph = TONE_ICONS[tone];\n\n  return (\n    <div {...rest} className={rootClass} role={isAlert ? 'alert' : rest.role}>\n      {glyph != null && (\n        <span className={styles['field-message__icon']} aria-hidden>\n          <Icon size=\"12\" glyph={glyph} />\n        </span>\n      )}\n      <span className={styles['field-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["TONE_ICONS","AlertCircleOutlineIcon","AlertOutlineIcon","CheckIcon","FieldMessage","className","message","tone","rest","toneClass","styles","toKebab","rootClass","isAlert","glyph","jsxs","jsx","Icon"],"mappings":";;;;;;;AAmBA,MAAMA,IAA2D;AAAA,EAC/D,yBAAQC,GAAA,EAAuB;AAAA,EAC/B,2BAAUC,GAAA,EAAiB;AAAA,EAC3B,2BAAUC,GAAA,CAAA,CAAU;AACtB;AAOA,SAAwBC,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAYC,EAAO,uBAAuBC,EAAQJ,CAAI,CAAC,EAAE,GACzDK,IAAY,CAACF,EAAO,eAAe,GAAGD,GAAWJ,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAUN,MAAS,WAAWA,MAAS,WACvCO,IAAQd,EAAWO,CAAI;AAE7B,SACE,gBAAAQ,EAAC,OAAA,EAAK,GAAGP,GAAM,WAAWI,GAAW,MAAMC,IAAU,UAAUL,EAAK,MACjE,UAAA;AAAA,IAAAM,KAAS,QACR,gBAAAE,EAAC,QAAA,EAAK,WAAWN,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAM,EAACC,GAAA,EAAK,MAAK,MAAK,OAAAH,GAAc,GAChC;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,qBAAqB,GAAI,UAAAJ,EAAA,CAAQ;AAAA,EAAA,GAC3D;AAEJ;"}

package/dist/components/field-message/FieldMessage.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./FieldMessage.css');const e={"field-message":"_field-message_1ev1y_13","field-message__icon":"_field-message__icon_1ev1y_18","field-message__text":"_field-message__text_1ev1y_25","field-message--tone-error":"_field-message--tone-error_1ev1y_32","field-message--tone-warning":"_field-message--tone-warning_1ev1y_36","field-message--tone-info":"_field-message--tone-info_1ev1y_40","field-message--tone-success":"_field-message--tone-success_1ev1y_43"};exports.default=e;
+//# sourceMappingURL=FieldMessage.module.scss.cjs.map

package/dist/components/field-message/FieldMessage.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/field-message/FieldMessage.module.scss.js

@@ -0,0 +1,13 @@
+import './FieldMessage.css';const e = {
+  "field-message": "_field-message_1ev1y_13",
+  "field-message__icon": "_field-message__icon_1ev1y_18",
+  "field-message__text": "_field-message__text_1ev1y_25",
+  "field-message--tone-error": "_field-message--tone-error_1ev1y_32",
+  "field-message--tone-warning": "_field-message--tone-warning_1ev1y_36",
+  "field-message--tone-info": "_field-message--tone-info_1ev1y_40",
+  "field-message--tone-success": "_field-message--tone-success_1ev1y_43"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=FieldMessage.module.scss.js.map

package/dist/components/field-message/FieldMessage.module.scss.js.map

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

package/dist/components/field-message/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FieldMessage.cjs");exports.FieldMessage=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/field-message/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FieldMessage } from './FieldMessage';
+export type { FieldMessageProps, FieldMessageTone } from './FieldMessage';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/field-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field-message/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/field-message/index.js

@@ -0,0 +1,5 @@
+import { default as s } from "./FieldMessage.js";
+export {
+  s as FieldMessage
+};
+//# sourceMappingURL=index.js.map

package/dist/components/global-banner/GlobalBanner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../button/Button.cjs"),b=require("../icon-button/IconButton.cjs"),f=require("../icon/Icon.cjs"),__m=require("@mattermost/compass-icons/components/close.js"),m=__m?.default??__m,l=require("./GlobalBanner.module.scss.cjs");function _({className:t="",message:o,type:a="general",leadingIcon:n,actionLabel:s,onAction:i,onDismiss:r}){const u=a!=="general"?l.default[`global-banner--type-${a.toLowerCase()}`]:"",c=[l.default["global-banner"],u,t].filter(Boolean).join(" ");return e.jsxs("div",{className:c,role:"banner",children:[e.jsxs("div",{className:l.default["global-banner__content"],children:[n!=null&&e.jsx("span",{className:l.default["global-banner__icon"],"aria-hidden":!0,children:n}),e.jsx("span",{className:l.default["global-banner__message"],children:o}),s!=null&&e.jsx(d.default,{className:l.default["global-banner__action"],appearance:"default",emphasis:"tertiary",size:"x-small",onClick:i,children:s})]}),r!=null&&e.jsx(b.default,{className:l.default["global-banner__dismiss"],"aria-label":"Dismiss",size:"small",icon:e.jsx(f.default,{glyph:e.jsx(m,{}),size:"16"}),onClick:r})]})}exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("../button/Button.cjs"),_=require("../icon-button/IconButton.cjs"),t=require("../icon/Icon.cjs"),__j=require("@mattermost/compass-icons/components/close.js"),j=__j?.default??__j,m=require("../../utils/props.cjs"),l=require("./GlobalBanner.module.scss.cjs");function x({className:c="",message:u,type:n="general",leadingIcon:r,actionLabel:s,onAction:i,onDismiss:o,dismissLabel:d="Dismiss",dismissButtonProps:a}){const b=n!=="general"?l.default[`global-banner--type-${n.toLowerCase()}`]:"",f=[l.default["global-banner"],b,c].filter(Boolean).join(" ");return e.jsxs("div",{className:f,role:"banner",children:[e.jsxs("div",{className:l.default["global-banner__content"],children:[r!=null&&e.jsx("span",{className:l.default["global-banner__icon"],"aria-hidden":!0,children:e.jsx(t.IconSlotContext.Provider,{value:{size:"16"},children:r})}),e.jsx("span",{className:l.default["global-banner__message"],children:u}),s!=null&&e.jsx(g.default,{className:l.default["global-banner__action"],appearance:"default",emphasis:"tertiary",size:"x-small",onClick:i,children:s})]}),o!=null&&e.jsx(_.default,{...a,className:m.mergeClassNames(l.default["global-banner__dismiss"],a==null?void 0:a.className),"aria-label":d,size:"small",icon:e.jsx(t.default,{glyph:e.jsx(j,{}),size:"16"}),onClick:o})]})}exports.default=x;
 //# sourceMappingURL=GlobalBanner.cjs.map

package/dist/components/global-banner/GlobalBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.cjs","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            {leadingIcon}\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Button","IconButton","Icon","CloseIcon"],"mappings":"+VAqCA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,UACP,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAsB,CACpB,MAAMC,EACJL,IAAS,UACLM,UAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,EAClD,GAEAO,EAAY,CAACD,UAAO,eAAe,EAAGD,EAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAW,KAAK,SAC9B,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAL,GAAe,YACb,OAAA,CAAK,UAAWK,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACxD,SAAAL,CAAA,CACH,QAED,OAAA,CAAK,UAAWK,EAAAA,QAAO,wBAAwB,EAAI,SAAAP,EAAQ,EAC3DG,GAAe,MACdO,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWJ,EAAAA,QAAO,uBAAuB,EACzC,WAAW,UACX,SAAS,WACT,KAAK,UACL,QAASH,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZK,EAAAA,IAACE,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,wBAAwB,EAC1C,aAAW,UACX,KAAK,QACL,WAAOM,UAAA,CAAK,YAAQC,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAAST,CAAA,CAAA,CACX,EAEJ,CAEJ"}
+{"version":3,"file":"GlobalBanner.cjs","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['global-banner__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","dismissLabel","dismissButtonProps","typeClass","styles","rootClass","jsxs","jsx","IconSlotContext","Button","IconButton","mergeClassNames","Icon","CloseIcon"],"mappings":"kYA4CA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,UACP,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,UACf,mBAAAC,CACF,EAAsB,CACpB,MAAMC,EACJP,IAAS,UACLQ,UAAO,uBAAuBR,EAAK,YAAA,CAAa,EAAE,EAClD,GAEAS,EAAY,CAACD,UAAO,eAAe,EAAGD,EAAWT,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEY,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAW,KAAK,SAC9B,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAP,GAAe,MACdU,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,eAACI,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,wBAAwB,EAAI,SAAAT,EAAQ,EAC3DG,GAAe,MACdS,EAAAA,IAACE,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,WAAW,UACX,SAAS,WACT,KAAK,UACL,QAASL,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZO,EAAAA,IAACG,EAAAA,QAAA,CACE,GAAGR,EACJ,UAAWS,EAAAA,gBACTP,EAAAA,QAAO,wBAAwB,EAC/BF,GAAA,YAAAA,EAAoB,SAAA,EAEtB,aAAYD,EACZ,KAAK,QACL,WAAOW,UAAA,CAAK,YAAQC,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASb,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/global-banner/GlobalBanner.css

@@ -0,0 +1 @@
+._global-banner_2vn7j_13{display:flex;align-items:center;justify-content:center;height:40px;width:100%;position:relative;background-color:var(--neutral-900);padding:0 var(--spacing-xxl)}._global-banner__content_2vn7j_23{display:flex;align-items:center;justify-content:center;gap:var(--spacing-s)}._global-banner__icon_2vn7j_29{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--neutral-0)}._global-banner__message_2vn7j_36{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--neutral-0);white-space:nowrap;text-align:center}._global-banner__dismiss_2vn7j_44{position:absolute;right:var(--spacing-xxs);top:50%;transform:translateY(-50%);color:color-mix(in srgb,var(--neutral-0) 92%,transparent)!important}._global-banner__dismiss_2vn7j_44:hover:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 12%,transparent)!important;color:var(--neutral-0)!important}._global-banner__dismiss_2vn7j_44:active:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 20%,transparent)!important;color:var(--neutral-0)!important}._global-banner__dismiss_2vn7j_44:focus-visible{outline:2px solid color-mix(in srgb,var(--neutral-0) 56%,transparent)!important;outline-offset:2px!important;box-shadow:none!important}._global-banner__action_2vn7j_64{flex-shrink:0;background-color:color-mix(in srgb,var(--neutral-0) 8%,transparent)!important;--button-fg: var(--neutral-0) !important;border-color:transparent!important}._global-banner__action_2vn7j_64:hover:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 12%,transparent)!important;--button-fg: var(--neutral-0) !important}._global-banner__action_2vn7j_64:active:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 16%,transparent)!important;--button-fg: var(--neutral-0) !important}._global-banner__action_2vn7j_64:focus-visible{outline:2px solid color-mix(in srgb,var(--neutral-0) 56%,transparent)!important;outline-offset:2px!important;box-shadow:none!important}._global-banner__action_2vn7j_64:disabled{--button-fg: color-mix( in srgb, var(--neutral-0) 40%, transparent ) !important;background-color:color-mix(in srgb,var(--neutral-0) 6%,transparent)!important}._global-banner--type-warning_2vn7j_91{background-color:rgb(var(--semantic-color-warning))}._global-banner--type-danger_2vn7j_94{background-color:rgb(var(--semantic-color-danger))}._global-banner--type-info_2vn7j_97{background-color:rgb(var(--semantic-color-info))}._global-banner--type-success_2vn7j_100{background-color:rgb(var(--semantic-color-success))}

package/dist/components/global-banner/GlobalBanner.d.ts

@@ -1,20 +1,25 @@
 import { ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type GlobalBannerType = 'general' | 'warning' | 'danger' | 'info' | 'success';
 export interface GlobalBannerProps {
     /** Optional CSS class name. */
     className?: string;
-    /** The message text. */
-    message: string;
+    /** The message text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    message: ReactNode;
     /** Optional type for color-coding. Default: General. */
     type?: GlobalBannerType;
-    /** Optional leading icon. */
+    /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */
     leadingIcon?: ReactNode;
-    /** Label for the optional action button. */
-    actionLabel?: string;
+    /** Label for the optional action button. Accepts translated nodes. */
+    actionLabel?: ReactNode;
     /** Callback when the action button is clicked. */
     onAction?: () => void;
     /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */
     onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Default: "Dismiss". */
+    dismissLabel?: string;
+    /** Extra attributes for the dismiss button (e.g. `data-testid`). */
+    dismissButtonProps?: BuiltInButtonProps;
 }
 /**
  * Global Banners sit at the very top of the application and broadcast something every user
@@ -22,5 +27,5 @@ export interface GlobalBannerProps {
  * problem, an available update. They span the full width of the app and stay visible until
  * they're dismissed or the condition resolves.
  */
-export default function GlobalBanner({ className, message, type, leadingIcon, actionLabel, onAction, onDismiss, }: GlobalBannerProps): import("react/jsx-runtime").JSX.Element;
+export default function GlobalBanner({ className, message, type, leadingIcon, actionLabel, onAction, onDismiss, dismissLabel, dismissButtonProps, }: GlobalBannerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GlobalBanner.d.ts.map

package/dist/components/global-banner/GlobalBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.d.ts","sourceRoot":"","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CA0CnB"}
+{"version":3,"file":"GlobalBanner.d.ts","sourceRoot":"","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,OAAO,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,wHAAwH;IACxH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAwB,EACxB,kBAAkB,GACnB,EAAE,iBAAiB,2CAgDnB"}

package/dist/components/global-banner/GlobalBanner.js

@@ -1,48 +1,55 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import p from "../button/Button.js";
-import d from "../icon-button/IconButton.js";
-import f from "../icon/Icon.js";
-import __g from "@mattermost/compass-icons/components/close.js";const g=__g&&__g.default?__g.default:__g;
-import a from "./GlobalBanner.module.scss.js";
-function y({
+import _ from "../icon-button/IconButton.js";
+import h, { IconSlotContext as d } from "../icon/Icon.js";
+import __C from "@mattermost/compass-icons/components/close.js";const C=__C&&__C.default?__C.default:__C;
+import { mergeClassNames as N } from "../../utils/props.js";
+import e from "./GlobalBanner.module.scss.js";
+function k({
   className: i = "",
-  message: t,
-  type: e = "general",
-  leadingIcon: n,
+  message: m,
+  type: n = "general",
+  leadingIcon: r,
   actionLabel: o,
-  onAction: m,
-  onDismiss: r
+  onAction: t,
+  onDismiss: s,
+  dismissLabel: b = "Dismiss",
+  dismissButtonProps: l
 }) {
-  const c = e !== "general" ? a[`global-banner--type-${e.toLowerCase()}`] : "", b = [a["global-banner"], c, i].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: b, role: "banner", children: [
-    /* @__PURE__ */ s("div", { className: a["global-banner__content"], children: [
-      n != null && /* @__PURE__ */ l("span", { className: a["global-banner__icon"], "aria-hidden": !0, children: n }),
-      /* @__PURE__ */ l("span", { className: a["global-banner__message"], children: t }),
-      o != null && /* @__PURE__ */ l(
+  const f = n !== "general" ? e[`global-banner--type-${n.toLowerCase()}`] : "", g = [e["global-banner"], f, i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c("div", { className: g, role: "banner", children: [
+    /* @__PURE__ */ c("div", { className: e["global-banner__content"], children: [
+      r != null && /* @__PURE__ */ a("span", { className: e["global-banner__icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(d.Provider, { value: { size: "16" }, children: r }) }),
+      /* @__PURE__ */ a("span", { className: e["global-banner__message"], children: m }),
+      o != null && /* @__PURE__ */ a(
         p,
         {
-          className: a["global-banner__action"],
+          className: e["global-banner__action"],
           appearance: "default",
           emphasis: "tertiary",
           size: "x-small",
-          onClick: m,
+          onClick: t,
           children: o
         }
       )
     ] }),
-    r != null && /* @__PURE__ */ l(
-      d,
+    s != null && /* @__PURE__ */ a(
+      _,
       {
-        className: a["global-banner__dismiss"],
-        "aria-label": "Dismiss",
+        ...l,
+        className: N(
+          e["global-banner__dismiss"],
+          l == null ? void 0 : l.className
+        ),
+        "aria-label": b,
         size: "small",
-        icon: /* @__PURE__ */ l(f, { glyph: /* @__PURE__ */ l(g, {}), size: "16" }),
-        onClick: r
+        icon: /* @__PURE__ */ a(h, { glyph: /* @__PURE__ */ a(C, {}), size: "16" }),
+        onClick: s
       }
     )
   ] });
 }
 export {
-  y as default
+  k as default
 };
 //# sourceMappingURL=GlobalBanner.js.map

package/dist/components/global-banner/GlobalBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.js","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            {leadingIcon}\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","Button","IconButton","Icon","CloseIcon"],"mappings":";;;;;;AAqCA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IACJL,MAAS,YACLM,EAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,IAClD,IAEAO,IAAY,CAACD,EAAO,eAAe,GAAGD,GAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAWD,GAAW,MAAK,UAC9B,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAL,KAAe,0BACb,QAAA,EAAK,WAAWK,EAAO,qBAAqB,GAAG,eAAW,IACxD,UAAAL,EAAA,CACH;AAAA,wBAED,QAAA,EAAK,WAAWK,EAAO,wBAAwB,GAAI,UAAAP,GAAQ;AAAA,MAC3DG,KAAe,QACd,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWJ,EAAO,uBAAuB;AAAA,UACzC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,SAASH;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAWL,EAAO,wBAAwB;AAAA,QAC1C,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOM,GAAA,EAAK,yBAAQC,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAAST;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
+{"version":3,"file":"GlobalBanner.js","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['global-banner__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","dismissLabel","dismissButtonProps","typeClass","styles","rootClass","jsxs","jsx","IconSlotContext","Button","IconButton","mergeClassNames","Icon","CloseIcon"],"mappings":";;;;;;;AA4CA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AACF,GAAsB;AACpB,QAAMC,IACJP,MAAS,YACLQ,EAAO,uBAAuBR,EAAK,YAAA,CAAa,EAAE,IAClD,IAEAS,IAAY,CAACD,EAAO,eAAe,GAAGD,GAAWT,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAY,EAAC,OAAA,EAAI,WAAWD,GAAW,MAAK,UAC9B,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAP,KAAe,QACd,gBAAAU,EAAC,QAAA,EAAK,WAAWH,EAAO,qBAAqB,GAAG,eAAW,IACzD,4BAACI,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,wBAED,QAAA,EAAK,WAAWJ,EAAO,wBAAwB,GAAI,UAAAT,GAAQ;AAAA,MAC3DG,KAAe,QACd,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWL,EAAO,uBAAuB;AAAA,UACzC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,SAASL;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAO;AAAA,MAACG;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,WAAWS;AAAA,UACTP,EAAO,wBAAwB;AAAA,UAC/BF,KAAA,gBAAAA,EAAoB;AAAA,QAAA;AAAA,QAEtB,cAAYD;AAAA,QACZ,MAAK;AAAA,QACL,wBAAOW,GAAA,EAAK,yBAAQC,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAASb;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}

package/dist/components/global-banner/GlobalBanner.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./GlobalBanner.module.css');const n={"global-banner":"_global-banner_4dh96_2","global-banner__content":"_global-banner__content_4dh96_12","global-banner__icon":"_global-banner__icon_4dh96_18","global-banner__message":"_global-banner__message_4dh96_25","global-banner__dismiss":"_global-banner__dismiss_4dh96_33","global-banner__action":"_global-banner__action_4dh96_52","global-banner--type-warning":"_global-banner--type-warning_4dh96_73","global-banner--type-danger":"_global-banner--type-danger_4dh96_76","global-banner--type-info":"_global-banner--type-info_4dh96_79","global-banner--type-success":"_global-banner--type-success_4dh96_82"};exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./GlobalBanner.css');const n={"global-banner":"_global-banner_2vn7j_13","global-banner__content":"_global-banner__content_2vn7j_23","global-banner__icon":"_global-banner__icon_2vn7j_29","global-banner__message":"_global-banner__message_2vn7j_36","global-banner__dismiss":"_global-banner__dismiss_2vn7j_44","global-banner__action":"_global-banner__action_2vn7j_64","global-banner--type-warning":"_global-banner--type-warning_2vn7j_91","global-banner--type-danger":"_global-banner--type-danger_2vn7j_94","global-banner--type-info":"_global-banner--type-info_2vn7j_97","global-banner--type-success":"_global-banner--type-success_2vn7j_100"};exports.default=n;
 //# sourceMappingURL=GlobalBanner.module.scss.cjs.map

package/dist/components/global-banner/GlobalBanner.module.scss.js

@@ -1,14 +1,14 @@
-import './GlobalBanner.module.css';const n = {
-  "global-banner": "_global-banner_4dh96_2",
-  "global-banner__content": "_global-banner__content_4dh96_12",
-  "global-banner__icon": "_global-banner__icon_4dh96_18",
-  "global-banner__message": "_global-banner__message_4dh96_25",
-  "global-banner__dismiss": "_global-banner__dismiss_4dh96_33",
-  "global-banner__action": "_global-banner__action_4dh96_52",
-  "global-banner--type-warning": "_global-banner--type-warning_4dh96_73",
-  "global-banner--type-danger": "_global-banner--type-danger_4dh96_76",
-  "global-banner--type-info": "_global-banner--type-info_4dh96_79",
-  "global-banner--type-success": "_global-banner--type-success_4dh96_82"
+import './GlobalBanner.css';const n = {
+  "global-banner": "_global-banner_2vn7j_13",
+  "global-banner__content": "_global-banner__content_2vn7j_23",
+  "global-banner__icon": "_global-banner__icon_2vn7j_29",
+  "global-banner__message": "_global-banner__message_2vn7j_36",
+  "global-banner__dismiss": "_global-banner__dismiss_2vn7j_44",
+  "global-banner__action": "_global-banner__action_2vn7j_64",
+  "global-banner--type-warning": "_global-banner--type-warning_2vn7j_91",
+  "global-banner--type-danger": "_global-banner--type-danger_2vn7j_94",
+  "global-banner--type-info": "_global-banner--type-info_2vn7j_97",
+  "global-banner--type-success": "_global-banner--type-success_2vn7j_100"
 };
 export {
   n as default

package/dist/components/icon/Icon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),s=require("react"),__d=require("@mattermost/compass-icons/components/emoticon-happy-outline.js"),d=__d?.default??__d,e=require("./Icon.module.scss.cjs"),c={10:12,12:14,16:18,20:24,24:28,28:32,32:36,40:48,52:60,64:72,104:120},f={10:e.default["icon--size-10"],12:e.default["icon--size-12"],16:e.default["icon--size-16"],20:e.default["icon--size-20"],24:e.default["icon--size-24"],28:e.default["icon--size-28"],32:e.default["icon--size-32"],40:e.default["icon--size-40"],52:e.default["icon--size-52"],64:e.default["icon--size-64"],104:e.default["icon--size-104"]};function z({className:u="",glyph:i=null,size:t="24"}){const l=f[t],a=[e.default.icon,l,u].filter(Boolean).join(" "),o=c[t],r=i==null?n.jsx(d,{size:o,"aria-hidden":!0}):s.isValidElement(i)?s.cloneElement(i,{size:o}):i;return n.jsx("div",{className:a,"aria-hidden":!0,children:n.jsx("div",{className:e.default["icon__glyph-area"],children:r})})}exports.SVG_SIZE_MAP=c;exports.default=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("react"),___=require("@mattermost/compass-icons/components/emoticon-happy-outline.js"),_=___?.default??___,e=require("./Icon.module.scss.cjs"),l={10:12,12:14,16:18,20:24,24:28,28:32,32:36,40:48,52:60,64:72,104:120},u=n.createContext(null),a=()=>n.useContext(u),C={10:e.default["icon--size-10"],12:e.default["icon--size-12"],16:e.default["icon--size-16"],20:e.default["icon--size-20"],24:e.default["icon--size-24"],28:e.default["icon--size-28"],32:e.default["icon--size-32"],40:e.default["icon--size-40"],52:e.default["icon--size-52"],64:e.default["icon--size-64"],104:e.default["icon--size-104"]};function I({className:r="",glyph:t=null,size:d}){var c;const f=(c=a())==null?void 0:c.size,i=d??f??"24",z=C[i],S=[e.default.icon,z,r].filter(Boolean).join(" "),s=l[i],x=t==null?o.jsx(_,{size:s,"aria-hidden":!0}):n.isValidElement(t)?n.cloneElement(t,{size:s}):t;return o.jsx("div",{className:S,"aria-hidden":!0,children:o.jsx("div",{className:e.default["icon__glyph-area"],children:x})})}exports.IconSlotContext=u;exports.SVG_SIZE_MAP=l;exports.default=I;exports.useIconSlotContext=a;
 //# sourceMappingURL=Icon.cjs.map

package/dist/components/icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport styles from './Icon.module.scss';\n\nexport type IconSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\n/**\n * Maps container size → SVG render size. Icons bleed slightly past the container\n * to strip the built-in clear-space padding from compass-icons SVGs.\n * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component\n * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).\n */\nexport const SVG_SIZE_MAP: Record<IconSize, number> = {\n  '10': 12,\n  '12': 14,\n  '16': 18,\n  '20': 24,\n  '24': 28,\n  '28': 32,\n  '32': 36,\n  '40': 48,\n  '52': 60,\n  '64': 72,\n  '104': 120,\n};\n\nexport interface IconProps {\n  /** Optional CSS class name applied to the container. */\n  className?: string;\n  /**\n   * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).\n   * Icon automatically injects the correct SVG size — no need to pass a size\n   * prop on the glyph element. When omitted, shows emoticon-happy-outline.\n   */\n  glyph?: ReactNode | null;\n  /** Container size from the Mattermost icon scale. Default 24. */\n  size?: IconSize;\n}\n\nconst SIZE_CLASS_MAP: Record<IconSize, string> = {\n  '10': styles['icon--size-10'],\n  '12': styles['icon--size-12'],\n  '16': styles['icon--size-16'],\n  '20': styles['icon--size-20'],\n  '24': styles['icon--size-24'],\n  '28': styles['icon--size-28'],\n  '32': styles['icon--size-32'],\n  '40': styles['icon--size-40'],\n  '52': styles['icon--size-52'],\n  '64': styles['icon--size-64'],\n  '104': styles['icon--size-104'],\n};\n\n/**\n * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a\n * consistent container size, strips the package's built-in clear-space padding, and keeps\n * icons aligned with text and other icons across the system.\n */\nexport default function Icon({\n  className = '',\n  glyph = null,\n  size = '24',\n}: IconProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.icon, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const svgSize = SVG_SIZE_MAP[size];\n  const glyphContent = (() => {\n    if (glyph === undefined || glyph === null) {\n      return <EmoticonHappyOutlineIcon size={svgSize} aria-hidden />;\n    }\n    // Inject the correct SVG size into the glyph so callers don't need to\n    // know about SVG_SIZE_MAP — the container size is all that's needed.\n    if (React.isValidElement(glyph)) {\n      return React.cloneElement(\n        glyph as React.ReactElement<{ size?: number }>,\n        {\n          size: svgSize,\n        },\n      );\n    }\n    return glyph;\n  })();\n\n  return (\n    <div className={rootClass} aria-hidden>\n      <div className={styles['icon__glyph-area']}>{glyphContent}</div>\n    </div>\n  );\n}\n"],"names":["SVG_SIZE_MAP","SIZE_CLASS_MAP","styles","Icon","className","glyph","size","sizeClass","rootClass","svgSize","glyphContent","jsx","EmoticonHappyOutlineIcon","React"],"mappings":"iRAuBaA,EAAyC,CACpD,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,IAAO,GACT,EAeMC,EAA2C,CAC/C,GAAMC,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,IAAOA,EAAAA,QAAO,gBAAgB,CAChC,EAOA,SAAwBC,EAAK,CAC3B,UAAAC,EAAY,GACZ,MAAAC,EAAQ,KACR,KAAAC,EAAO,IACT,EAAc,CACZ,MAAMC,EAAYN,EAAeK,CAAI,EAC/BE,EAAY,CAACN,UAAO,KAAMK,EAAWH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EAAUT,EAAaM,CAAI,EAC3BI,EACuBL,GAAU,KAC5BM,EAAAA,IAACC,EAAA,CAAyB,KAAMH,EAAS,cAAW,GAAC,EAI1DI,EAAM,eAAeR,CAAK,EACrBQ,EAAM,aACXR,EACA,CACE,KAAMI,CAAA,CACR,EAGGJ,EAGT,OACEM,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAW,cAAW,GACpC,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWT,UAAO,kBAAkB,EAAI,WAAa,EAC5D,CAEJ"}
+{"version":3,"file":"Icon.cjs","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, createContext, useContext } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport styles from './Icon.module.scss';\n\nexport type IconSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\n/**\n * Maps container size → SVG render size. Icons bleed slightly past the container\n * to strip the built-in clear-space padding from compass-icons SVGs.\n * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component\n * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).\n */\nexport const SVG_SIZE_MAP: Record<IconSize, number> = {\n  '10': 12,\n  '12': 14,\n  '16': 18,\n  '20': 24,\n  '24': 28,\n  '28': 32,\n  '32': 36,\n  '40': 48,\n  '52': 60,\n  '64': 72,\n  '104': 120,\n};\n\n/**\n * Context published by components that host an icon slot (Button, IconButton,\n * MenuItem, etc.). Icon reads this as a fallback when no `size` prop is passed,\n * so consumers can pass `<Icon glyph={<X />} />` without specifying a size.\n */\nexport const IconSlotContext = createContext<{ size: IconSize } | null>(null);\nexport const useIconSlotContext = () => useContext(IconSlotContext);\n\nexport interface IconProps {\n  /** Optional CSS class name applied to the container. */\n  className?: string;\n  /**\n   * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).\n   * Icon automatically injects the correct SVG size — no need to pass a size\n   * prop on the glyph element. When omitted, shows emoticon-happy-outline.\n   */\n  glyph?: ReactNode | null;\n  /** Container size from the Mattermost icon scale. Default 24. */\n  size?: IconSize;\n}\n\nconst SIZE_CLASS_MAP: Record<IconSize, string> = {\n  '10': styles['icon--size-10'],\n  '12': styles['icon--size-12'],\n  '16': styles['icon--size-16'],\n  '20': styles['icon--size-20'],\n  '24': styles['icon--size-24'],\n  '28': styles['icon--size-28'],\n  '32': styles['icon--size-32'],\n  '40': styles['icon--size-40'],\n  '52': styles['icon--size-52'],\n  '64': styles['icon--size-64'],\n  '104': styles['icon--size-104'],\n};\n\n/**\n * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a\n * consistent container size, strips the package's built-in clear-space padding, and keeps\n * icons aligned with text and other icons across the system.\n */\nexport default function Icon({\n  className = '',\n  glyph = null,\n  size,\n}: IconProps) {\n  const contextSize = useIconSlotContext()?.size;\n  const resolvedSize: IconSize = size ?? contextSize ?? '24';\n  const sizeClass = SIZE_CLASS_MAP[resolvedSize];\n  const rootClass = [styles.icon, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const svgSize = SVG_SIZE_MAP[resolvedSize];\n  const glyphContent = (() => {\n    if (glyph === undefined || glyph === null) {\n      return <EmoticonHappyOutlineIcon size={svgSize} aria-hidden />;\n    }\n    // Inject the correct SVG size into the glyph so callers don't need to\n    // know about SVG_SIZE_MAP — the container size is all that's needed.\n    if (React.isValidElement(glyph)) {\n      return React.cloneElement(\n        glyph as React.ReactElement<{ size?: number }>,\n        {\n          size: svgSize,\n        },\n      );\n    }\n    return glyph;\n  })();\n\n  return (\n    <div className={rootClass} aria-hidden>\n      <div className={styles['icon__glyph-area']}>{glyphContent}</div>\n    </div>\n  );\n}\n"],"names":["SVG_SIZE_MAP","IconSlotContext","createContext","useIconSlotContext","useContext","SIZE_CLASS_MAP","styles","Icon","className","glyph","size","contextSize","_a","resolvedSize","sizeClass","rootClass","svgSize","glyphContent","jsx","EmoticonHappyOutlineIcon","React"],"mappings":"iRAuBaA,EAAyC,CACpD,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,GAAM,GACN,IAAO,GACT,EAOaC,EAAkBC,EAAAA,cAAyC,IAAI,EAC/DC,EAAqB,IAAMC,EAAAA,WAAWH,CAAe,EAe5DI,EAA2C,CAC/C,GAAMC,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,GAAMA,EAAAA,QAAO,eAAe,EAC5B,IAAOA,EAAAA,QAAO,gBAAgB,CAChC,EAOA,SAAwBC,EAAK,CAC3B,UAAAC,EAAY,GACZ,MAAAC,EAAQ,KACR,KAAAC,CACF,EAAc,OACZ,MAAMC,GAAcC,EAAAT,MAAA,YAAAS,EAAsB,KACpCC,EAAyBH,GAAQC,GAAe,KAChDG,EAAYT,EAAeQ,CAAY,EACvCE,EAAY,CAACT,UAAO,KAAMQ,EAAWN,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EAELQ,EAAUhB,EAAaa,CAAY,EACnCI,EACuBR,GAAU,KAC5BS,EAAAA,IAACC,EAAA,CAAyB,KAAMH,EAAS,cAAW,GAAC,EAI1DI,EAAM,eAAeX,CAAK,EACrBW,EAAM,aACXX,EACA,CACE,KAAMO,CAAA,CACR,EAGGP,EAGT,OACES,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAW,cAAW,GACpC,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWZ,UAAO,kBAAkB,EAAI,WAAa,EAC5D,CAEJ"}

package/dist/components/icon/Icon.css

@@ -0,0 +1 @@
+._icon_1xcik_13{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon__glyph-area_1xcik_20{position:relative;overflow:visible;flex-shrink:0}._icon__glyph-area_1xcik_20>*{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;max-width:none}._icon--size-10_1xcik_33,._icon--size-10_1xcik_33 ._icon__glyph-area_1xcik_20{width:var(--icon-size-10);height:var(--icon-size-10)}._icon--size-12_1xcik_41,._icon--size-12_1xcik_41 ._icon__glyph-area_1xcik_20{width:var(--icon-size-12);height:var(--icon-size-12)}._icon--size-16_1xcik_49,._icon--size-16_1xcik_49 ._icon__glyph-area_1xcik_20{width:var(--icon-size-16);height:var(--icon-size-16)}._icon--size-20_1xcik_57,._icon--size-20_1xcik_57 ._icon__glyph-area_1xcik_20{width:var(--icon-size-20);height:var(--icon-size-20)}._icon--size-24_1xcik_65,._icon--size-24_1xcik_65 ._icon__glyph-area_1xcik_20{width:var(--icon-size-24);height:var(--icon-size-24)}._icon--size-28_1xcik_73,._icon--size-28_1xcik_73 ._icon__glyph-area_1xcik_20{width:var(--icon-size-28);height:var(--icon-size-28)}._icon--size-32_1xcik_81,._icon--size-32_1xcik_81 ._icon__glyph-area_1xcik_20{width:var(--icon-size-32);height:var(--icon-size-32)}._icon--size-40_1xcik_89,._icon--size-40_1xcik_89 ._icon__glyph-area_1xcik_20{width:var(--icon-size-40);height:var(--icon-size-40)}._icon--size-52_1xcik_97,._icon--size-52_1xcik_97 ._icon__glyph-area_1xcik_20{width:var(--icon-size-52);height:var(--icon-size-52)}._icon--size-64_1xcik_105,._icon--size-64_1xcik_105 ._icon__glyph-area_1xcik_20{width:var(--icon-size-64);height:var(--icon-size-64)}._icon--size-104_1xcik_113,._icon--size-104_1xcik_113 ._icon__glyph-area_1xcik_20{width:var(--icon-size-104);height:var(--icon-size-104)}

package/dist/components/icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 export type IconSize = '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '52' | '64' | '104';
 /**
  * Maps container size → SVG render size. Icons bleed slightly past the container
@@ -7,6 +7,17 @@ export type IconSize = '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '
  * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).
  */
 export declare const SVG_SIZE_MAP: Record<IconSize, number>;
+/**
+ * Context published by components that host an icon slot (Button, IconButton,
+ * MenuItem, etc.). Icon reads this as a fallback when no `size` prop is passed,
+ * so consumers can pass `<Icon glyph={<X />} />` without specifying a size.
+ */
+export declare const IconSlotContext: React.Context<{
+    size: IconSize;
+} | null>;
+export declare const useIconSlotContext: () => {
+    size: IconSize;
+} | null;
 export interface IconProps {
     /** Optional CSS class name applied to the container. */
     className?: string;

package/dist/components/icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAYjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAgBD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,SAAc,EACd,KAAY,EACZ,IAAW,GACZ,EAAE,SAAS,2CA6BX"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAC;AAIzE,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAYjD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe;UAAyB,QAAQ;SAAgB,CAAC;AAC9E,eAAO,MAAM,kBAAkB;UADsB,QAAQ;QACM,CAAC;AAEpE,MAAM,WAAW,SAAS;IACxB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAgBD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,SAAc,EACd,KAAY,EACZ,IAAI,GACL,EAAE,SAAS,2CA+BX"}

package/dist/components/icon/Icon.js

@@ -1,8 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import c from "react";
-import __z from "@mattermost/compass-icons/components/emoticon-happy-outline.js";const z=__z&&__z.default?__z.default:__z;
-import i from "./Icon.module.scss.js";
-const m = {
+import { jsx as n } from "react/jsx-runtime";
+import c, { useContext as m, createContext as f } from "react";
+import __S from "@mattermost/compass-icons/components/emoticon-happy-outline.js";const S=__S&&__S.default?__S.default:__S;
+import e from "./Icon.module.scss.js";
+const C = {
   10: 12,
   12: 14,
   16: 18,
@@ -14,34 +14,37 @@ const m = {
   52: 60,
   64: 72,
   104: 120
-}, d = {
-  10: i["icon--size-10"],
-  12: i["icon--size-12"],
-  16: i["icon--size-16"],
-  20: i["icon--size-20"],
-  24: i["icon--size-24"],
-  28: i["icon--size-28"],
-  32: i["icon--size-32"],
-  40: i["icon--size-40"],
-  52: i["icon--size-52"],
-  64: i["icon--size-64"],
-  104: i["icon--size-104"]
+}, _ = f(null), x = () => m(_), I = {
+  10: e["icon--size-10"],
+  12: e["icon--size-12"],
+  16: e["icon--size-16"],
+  20: e["icon--size-20"],
+  24: e["icon--size-24"],
+  28: e["icon--size-28"],
+  32: e["icon--size-32"],
+  40: e["icon--size-40"],
+  52: e["icon--size-52"],
+  64: e["icon--size-64"],
+  104: e["icon--size-104"]
 };
-function p({
-  className: t = "",
-  glyph: n = null,
-  size: e = "24"
+function h({
+  className: r = "",
+  glyph: o = null,
+  size: l
 }) {
-  const r = d[e], a = [i.icon, r, t].filter(Boolean).join(" "), s = m[e], l = n == null ? /* @__PURE__ */ o(z, { size: s, "aria-hidden": !0 }) : c.isValidElement(n) ? c.cloneElement(
-    n,
+  var s;
+  const a = (s = x()) == null ? void 0 : s.size, i = l ?? a ?? "24", z = I[i], u = [e.icon, z, r].filter(Boolean).join(" "), t = C[i], d = o == null ? /* @__PURE__ */ n(S, { size: t, "aria-hidden": !0 }) : c.isValidElement(o) ? c.cloneElement(
+    o,
     {
-      size: s
+      size: t
     }
-  ) : n;
-  return /* @__PURE__ */ o("div", { className: a, "aria-hidden": !0, children: /* @__PURE__ */ o("div", { className: i["icon__glyph-area"], children: l }) });
+  ) : o;
+  return /* @__PURE__ */ n("div", { className: u, "aria-hidden": !0, children: /* @__PURE__ */ n("div", { className: e["icon__glyph-area"], children: d }) });
 }
 export {
-  m as SVG_SIZE_MAP,
-  p as default
+  _ as IconSlotContext,
+  C as SVG_SIZE_MAP,
+  h as default,
+  x as useIconSlotContext
 };
 //# sourceMappingURL=Icon.js.map

package/dist/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport styles from './Icon.module.scss';\n\nexport type IconSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\n/**\n * Maps container size → SVG render size. Icons bleed slightly past the container\n * to strip the built-in clear-space padding from compass-icons SVGs.\n * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component\n * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).\n */\nexport const SVG_SIZE_MAP: Record<IconSize, number> = {\n  '10': 12,\n  '12': 14,\n  '16': 18,\n  '20': 24,\n  '24': 28,\n  '28': 32,\n  '32': 36,\n  '40': 48,\n  '52': 60,\n  '64': 72,\n  '104': 120,\n};\n\nexport interface IconProps {\n  /** Optional CSS class name applied to the container. */\n  className?: string;\n  /**\n   * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).\n   * Icon automatically injects the correct SVG size — no need to pass a size\n   * prop on the glyph element. When omitted, shows emoticon-happy-outline.\n   */\n  glyph?: ReactNode | null;\n  /** Container size from the Mattermost icon scale. Default 24. */\n  size?: IconSize;\n}\n\nconst SIZE_CLASS_MAP: Record<IconSize, string> = {\n  '10': styles['icon--size-10'],\n  '12': styles['icon--size-12'],\n  '16': styles['icon--size-16'],\n  '20': styles['icon--size-20'],\n  '24': styles['icon--size-24'],\n  '28': styles['icon--size-28'],\n  '32': styles['icon--size-32'],\n  '40': styles['icon--size-40'],\n  '52': styles['icon--size-52'],\n  '64': styles['icon--size-64'],\n  '104': styles['icon--size-104'],\n};\n\n/**\n * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a\n * consistent container size, strips the package's built-in clear-space padding, and keeps\n * icons aligned with text and other icons across the system.\n */\nexport default function Icon({\n  className = '',\n  glyph = null,\n  size = '24',\n}: IconProps) {\n  const sizeClass = SIZE_CLASS_MAP[size];\n  const rootClass = [styles.icon, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const svgSize = SVG_SIZE_MAP[size];\n  const glyphContent = (() => {\n    if (glyph === undefined || glyph === null) {\n      return <EmoticonHappyOutlineIcon size={svgSize} aria-hidden />;\n    }\n    // Inject the correct SVG size into the glyph so callers don't need to\n    // know about SVG_SIZE_MAP — the container size is all that's needed.\n    if (React.isValidElement(glyph)) {\n      return React.cloneElement(\n        glyph as React.ReactElement<{ size?: number }>,\n        {\n          size: svgSize,\n        },\n      );\n    }\n    return glyph;\n  })();\n\n  return (\n    <div className={rootClass} aria-hidden>\n      <div className={styles['icon__glyph-area']}>{glyphContent}</div>\n    </div>\n  );\n}\n"],"names":["SVG_SIZE_MAP","SIZE_CLASS_MAP","styles","Icon","className","glyph","size","sizeClass","rootClass","svgSize","glyphContent","jsx","EmoticonHappyOutlineIcon","React"],"mappings":";;;;AAuBO,MAAMA,IAAyC;AAAA,EACpD,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,KAAO;AACT,GAeMC,IAA2C;AAAA,EAC/C,IAAMC,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,KAAOA,EAAO,gBAAgB;AAChC;AAOA,SAAwBC,EAAK;AAAA,EAC3B,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AACT,GAAc;AACZ,QAAMC,IAAYN,EAAeK,CAAI,GAC/BE,IAAY,CAACN,EAAO,MAAMK,GAAWH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IAAUT,EAAaM,CAAI,GAC3BI,IACuBL,KAAU,OAC5B,gBAAAM,EAACC,GAAA,EAAyB,MAAMH,GAAS,eAAW,IAAC,IAI1DI,EAAM,eAAeR,CAAK,IACrBQ,EAAM;AAAA,IACXR;AAAA,IACA;AAAA,MACE,MAAMI;AAAA,IAAA;AAAA,EACR,IAGGJ;AAGT,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWH,GAAW,eAAW,IACpC,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWT,EAAO,kBAAkB,GAAI,aAAa,GAC5D;AAEJ;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, createContext, useContext } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport styles from './Icon.module.scss';\n\nexport type IconSize =\n  | '10'\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '52'\n  | '64'\n  | '104';\n\n/**\n * Maps container size → SVG render size. Icons bleed slightly past the container\n * to strip the built-in clear-space padding from compass-icons SVGs.\n * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component\n * used as a glyph (e.g. <GlobeIcon size={SVG_SIZE_MAP['24']} />).\n */\nexport const SVG_SIZE_MAP: Record<IconSize, number> = {\n  '10': 12,\n  '12': 14,\n  '16': 18,\n  '20': 24,\n  '24': 28,\n  '28': 32,\n  '32': 36,\n  '40': 48,\n  '52': 60,\n  '64': 72,\n  '104': 120,\n};\n\n/**\n * Context published by components that host an icon slot (Button, IconButton,\n * MenuItem, etc.). Icon reads this as a fallback when no `size` prop is passed,\n * so consumers can pass `<Icon glyph={<X />} />` without specifying a size.\n */\nexport const IconSlotContext = createContext<{ size: IconSize } | null>(null);\nexport const useIconSlotContext = () => useContext(IconSlotContext);\n\nexport interface IconProps {\n  /** Optional CSS class name applied to the container. */\n  className?: string;\n  /**\n   * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).\n   * Icon automatically injects the correct SVG size — no need to pass a size\n   * prop on the glyph element. When omitted, shows emoticon-happy-outline.\n   */\n  glyph?: ReactNode | null;\n  /** Container size from the Mattermost icon scale. Default 24. */\n  size?: IconSize;\n}\n\nconst SIZE_CLASS_MAP: Record<IconSize, string> = {\n  '10': styles['icon--size-10'],\n  '12': styles['icon--size-12'],\n  '16': styles['icon--size-16'],\n  '20': styles['icon--size-20'],\n  '24': styles['icon--size-24'],\n  '28': styles['icon--size-28'],\n  '32': styles['icon--size-32'],\n  '40': styles['icon--size-40'],\n  '52': styles['icon--size-52'],\n  '64': styles['icon--size-64'],\n  '104': styles['icon--size-104'],\n};\n\n/**\n * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a\n * consistent container size, strips the package's built-in clear-space padding, and keeps\n * icons aligned with text and other icons across the system.\n */\nexport default function Icon({\n  className = '',\n  glyph = null,\n  size,\n}: IconProps) {\n  const contextSize = useIconSlotContext()?.size;\n  const resolvedSize: IconSize = size ?? contextSize ?? '24';\n  const sizeClass = SIZE_CLASS_MAP[resolvedSize];\n  const rootClass = [styles.icon, sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const svgSize = SVG_SIZE_MAP[resolvedSize];\n  const glyphContent = (() => {\n    if (glyph === undefined || glyph === null) {\n      return <EmoticonHappyOutlineIcon size={svgSize} aria-hidden />;\n    }\n    // Inject the correct SVG size into the glyph so callers don't need to\n    // know about SVG_SIZE_MAP — the container size is all that's needed.\n    if (React.isValidElement(glyph)) {\n      return React.cloneElement(\n        glyph as React.ReactElement<{ size?: number }>,\n        {\n          size: svgSize,\n        },\n      );\n    }\n    return glyph;\n  })();\n\n  return (\n    <div className={rootClass} aria-hidden>\n      <div className={styles['icon__glyph-area']}>{glyphContent}</div>\n    </div>\n  );\n}\n"],"names":["SVG_SIZE_MAP","IconSlotContext","createContext","useIconSlotContext","useContext","SIZE_CLASS_MAP","styles","Icon","className","glyph","size","contextSize","_a","resolvedSize","sizeClass","rootClass","svgSize","glyphContent","jsx","EmoticonHappyOutlineIcon","React"],"mappings":";;;;AAuBO,MAAMA,IAAyC;AAAA,EACpD,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,KAAO;AACT,GAOaC,IAAkBC,EAAyC,IAAI,GAC/DC,IAAqB,MAAMC,EAAWH,CAAe,GAe5DI,IAA2C;AAAA,EAC/C,IAAMC,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,IAAMA,EAAO,eAAe;AAAA,EAC5B,KAAOA,EAAO,gBAAgB;AAChC;AAOA,SAAwBC,EAAK;AAAA,EAC3B,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,MAAAC;AACF,GAAc;;AACZ,QAAMC,KAAcC,IAAAT,QAAA,gBAAAS,EAAsB,MACpCC,IAAyBH,KAAQC,KAAe,MAChDG,IAAYT,EAAeQ,CAAY,GACvCE,IAAY,CAACT,EAAO,MAAMQ,GAAWN,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAUhB,EAAaa,CAAY,GACnCI,IACuBR,KAAU,OAC5B,gBAAAS,EAACC,GAAA,EAAyB,MAAMH,GAAS,eAAW,IAAC,IAI1DI,EAAM,eAAeX,CAAK,IACrBW,EAAM;AAAA,IACXX;AAAA,IACA;AAAA,MACE,MAAMO;AAAA,IAAA;AAAA,EACR,IAGGP;AAGT,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWH,GAAW,eAAW,IACpC,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWZ,EAAO,kBAAkB,GAAI,aAAa,GAC5D;AAEJ;"}

package/dist/components/icon/Icon.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Icon.module.css');const i="_icon_1i355_2",_={icon:i,"icon__glyph-area":"_icon__glyph-area_1i355_9","icon--size-10":"_icon--size-10_1i355_22","icon--size-12":"_icon--size-12_1i355_30","icon--size-16":"_icon--size-16_1i355_38","icon--size-20":"_icon--size-20_1i355_46","icon--size-24":"_icon--size-24_1i355_54","icon--size-28":"_icon--size-28_1i355_62","icon--size-32":"_icon--size-32_1i355_70","icon--size-40":"_icon--size-40_1i355_78","icon--size-52":"_icon--size-52_1i355_86","icon--size-64":"_icon--size-64_1i355_94","icon--size-104":"_icon--size-104_1i355_102"};exports.default=_;exports.icon=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Icon.css');const i="_icon_1xcik_13",c={icon:i,"icon__glyph-area":"_icon__glyph-area_1xcik_20","icon--size-10":"_icon--size-10_1xcik_33","icon--size-12":"_icon--size-12_1xcik_41","icon--size-16":"_icon--size-16_1xcik_49","icon--size-20":"_icon--size-20_1xcik_57","icon--size-24":"_icon--size-24_1xcik_65","icon--size-28":"_icon--size-28_1xcik_73","icon--size-32":"_icon--size-32_1xcik_81","icon--size-40":"_icon--size-40_1xcik_89","icon--size-52":"_icon--size-52_1xcik_97","icon--size-64":"_icon--size-64_1xcik_105","icon--size-104":"_icon--size-104_1xcik_113"};exports.default=c;exports.icon=i;
 //# sourceMappingURL=Icon.module.scss.cjs.map

package/dist/components/icon/Icon.module.scss.js

@@ -1,17 +1,17 @@
-import './Icon.module.css';const i = "_icon_1i355_2", _ = {
+import './Icon.css';const i = "_icon_1xcik_13", _ = {
   icon: i,
-  "icon__glyph-area": "_icon__glyph-area_1i355_9",
-  "icon--size-10": "_icon--size-10_1i355_22",
-  "icon--size-12": "_icon--size-12_1i355_30",
-  "icon--size-16": "_icon--size-16_1i355_38",
-  "icon--size-20": "_icon--size-20_1i355_46",
-  "icon--size-24": "_icon--size-24_1i355_54",
-  "icon--size-28": "_icon--size-28_1i355_62",
-  "icon--size-32": "_icon--size-32_1i355_70",
-  "icon--size-40": "_icon--size-40_1i355_78",
-  "icon--size-52": "_icon--size-52_1i355_86",
-  "icon--size-64": "_icon--size-64_1i355_94",
-  "icon--size-104": "_icon--size-104_1i355_102"
+  "icon__glyph-area": "_icon__glyph-area_1xcik_20",
+  "icon--size-10": "_icon--size-10_1xcik_33",
+  "icon--size-12": "_icon--size-12_1xcik_41",
+  "icon--size-16": "_icon--size-16_1xcik_49",
+  "icon--size-20": "_icon--size-20_1xcik_57",
+  "icon--size-24": "_icon--size-24_1xcik_65",
+  "icon--size-28": "_icon--size-28_1xcik_73",
+  "icon--size-32": "_icon--size-32_1xcik_81",
+  "icon--size-40": "_icon--size-40_1xcik_89",
+  "icon--size-52": "_icon--size-52_1xcik_97",
+  "icon--size-64": "_icon--size-64_1xcik_105",
+  "icon--size-104": "_icon--size-104_1xcik_113"
 };
 export {
   _ as default,

package/dist/components/icon/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Icon.cjs");exports.Icon=e.default;exports.SVG_SIZE_MAP=e.SVG_SIZE_MAP;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Icon.cjs");exports.Icon=t.default;exports.IconSlotContext=t.IconSlotContext;exports.SVG_SIZE_MAP=t.SVG_SIZE_MAP;exports.useIconSlotContext=t.useIconSlotContext;
 //# sourceMappingURL=index.cjs.map

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

@@ -1,3 +1,3 @@
-export { default as Icon, SVG_SIZE_MAP } from './Icon';
+export { default as Icon, SVG_SIZE_MAP, IconSlotContext, useIconSlotContext, } from './Icon';
 export type { IconProps, IconSize } from './Icon';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,IAAI,EACf,YAAY,EACZ,eAAe,EACf,kBAAkB,GACnB,MAAM,QAAQ,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/icon/index.js

@@ -1,6 +1,8 @@
-import { default as e, SVG_SIZE_MAP as f } from "./Icon.js";
+import { default as e, IconSlotContext as n, SVG_SIZE_MAP as I, useIconSlotContext as S } from "./Icon.js";
 export {
   e as Icon,
-  f as SVG_SIZE_MAP
+  n as IconSlotContext,
+  I as SVG_SIZE_MAP,
+  S as useIconSlotContext
 };
 //# sourceMappingURL=index.js.map