@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.11

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

@@ -0,0 +1,16 @@
+import './GlobalBanner.css';const n = {
+  "global-banner": "_global-banner_weys9_2",
+  "global-banner__content": "_global-banner__content_weys9_12",
+  "global-banner__icon": "_global-banner__icon_weys9_18",
+  "global-banner__message": "_global-banner__message_weys9_25",
+  "global-banner__dismiss": "_global-banner__dismiss_weys9_33",
+  "global-banner__action": "_global-banner__action_weys9_53",
+  "global-banner--type-warning": "_global-banner--type-warning_weys9_76",
+  "global-banner--type-danger": "_global-banner--type-danger_weys9_79",
+  "global-banner--type-info": "_global-banner--type-info_weys9_82",
+  "global-banner--type-success": "_global-banner--type-success_weys9_85"
+};
+export {
+  n as default
+};
+//# sourceMappingURL=GlobalBanner.module.scss.js.map

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/icon/Icon.cjs

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1 @@
+{"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_1i355_2{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon__glyph-area_1i355_9{position:relative;overflow:visible;flex-shrink:0}._icon__glyph-area_1i355_9>*{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;max-width:none}._icon--size-10_1i355_22,._icon--size-10_1i355_22 ._icon__glyph-area_1i355_9{width:var(--icon-size-10);height:var(--icon-size-10)}._icon--size-12_1i355_30,._icon--size-12_1i355_30 ._icon__glyph-area_1i355_9{width:var(--icon-size-12);height:var(--icon-size-12)}._icon--size-16_1i355_38,._icon--size-16_1i355_38 ._icon__glyph-area_1i355_9{width:var(--icon-size-16);height:var(--icon-size-16)}._icon--size-20_1i355_46,._icon--size-20_1i355_46 ._icon__glyph-area_1i355_9{width:var(--icon-size-20);height:var(--icon-size-20)}._icon--size-24_1i355_54,._icon--size-24_1i355_54 ._icon__glyph-area_1i355_9{width:var(--icon-size-24);height:var(--icon-size-24)}._icon--size-28_1i355_62,._icon--size-28_1i355_62 ._icon__glyph-area_1i355_9{width:var(--icon-size-28);height:var(--icon-size-28)}._icon--size-32_1i355_70,._icon--size-32_1i355_70 ._icon__glyph-area_1i355_9{width:var(--icon-size-32);height:var(--icon-size-32)}._icon--size-40_1i355_78,._icon--size-40_1i355_78 ._icon__glyph-area_1i355_9{width:var(--icon-size-40);height:var(--icon-size-40)}._icon--size-52_1i355_86,._icon--size-52_1i355_86 ._icon__glyph-area_1i355_9{width:var(--icon-size-52);height:var(--icon-size-52)}._icon--size-64_1i355_94,._icon--size-64_1i355_94 ._icon__glyph-area_1i355_9{width:var(--icon-size-64);height:var(--icon-size-64)}._icon--size-104_1i355_102,._icon--size-104_1i355_102 ._icon__glyph-area_1i355_9{width:var(--icon-size-104);height:var(--icon-size-104)}

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

@@ -0,0 +1,39 @@
+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
+ * to strip the built-in clear-space padding from compass-icons SVGs.
+ * Pass SVG_SIZE_MAP[size] as the `size` prop on any compass-icons component
+ * 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;
+    /**
+     * Icon SVG from @mattermost/compass-icons (e.g. `<GlobeIcon />`).
+     * Icon automatically injects the correct SVG size — no need to pass a size
+     * prop on the glyph element. When omitted, shows emoticon-happy-outline.
+     */
+    glyph?: ReactNode | null;
+    /** Container size from the Mattermost icon scale. Default 24. */
+    size?: IconSize;
+}
+/**
+ * Icon is the standard wrapper for any glyph from `@mattermost/compass-icons`. It enforces a
+ * consistent container size, strips the package's built-in clear-space padding, and keeps
+ * icons aligned with text and other icons across the system.
+ */
+export default function Icon({ className, glyph, size, }: IconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,50 @@
+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,
+  20: 24,
+  24: 28,
+  28: 32,
+  32: 36,
+  40: 48,
+  52: 60,
+  64: 72,
+  104: 120
+}, _ = 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 h({
+  className: r = "",
+  glyph: o = null,
+  size: l
+}) {
+  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: t
+    }
+  ) : o;
+  return /* @__PURE__ */ n("div", { className: u, "aria-hidden": !0, children: /* @__PURE__ */ n("div", { className: e["icon__glyph-area"], children: d }) });
+}
+export {
+  _ as IconSlotContext,
+  C as SVG_SIZE_MAP,
+  h as default,
+  x as useIconSlotContext
+};
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Icon.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;
+//# sourceMappingURL=Icon.module.scss.cjs.map

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

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

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

@@ -0,0 +1,20 @@
+import './Icon.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"
+};
+export {
+  _ as default,
+  i as icon
+};
+//# sourceMappingURL=Icon.module.scss.js.map

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

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

package/dist/components/icon/index.cjs

@@ -0,0 +1,2 @@
+"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.cjs.map

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

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

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

package/dist/components/icon-button/IconButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),R=require("react"),E=require("../icon/Icon.cjs"),M=require("../spinner/Spinner.cjs"),P=require("../../utils/string.cjs"),t=require("./IconButton.module.scss.cjs"),d={"x-small":"12",small:"16",medium:"20",large:"24"},r=R.forwardRef(function({active:o=!1,className:f="",count:a,destructive:b=!1,icon:m,loading:n=!1,padding:v="default",rounded:C=!1,size:u="medium",style:i="default",toggled:s,unreadBadge:_=!1,disabled:p,type:I="button","aria-label":N,...j},x){const S=t.default[`icon-button--size-${P.toKebab(u)}`],h=v==="compact"?t.default["icon-button--padding-compact"]:"",B=i==="inverted"?t.default["icon-button--style-inverted"]:"",O=b?t.default["icon-button--destructive"]:"",q=C?t.default["icon-button--rounded"]:"",g=s?t.default["icon-button--toggled"]:"",T=o?t.default["icon-button--active"]:"",l=a!==void 0,z=l?t.default["icon-button--has-count"]:"",y=[t.default["icon-button"],S,h,B,O,q,g,T,z,f].filter(Boolean).join(" "),c=d[u];return e.jsxs("button",{ref:x,className:y,type:I,disabled:p||n,"aria-label":N,"aria-pressed":s===void 0?void 0:s,"data-active":o?"true":void 0,...j,children:[e.jsxs("span",{className:t.default["icon-button__icon-slot"],"aria-hidden":!0,children:[n?e.jsx(M.default,{size:c,inverted:i==="inverted"}):e.jsx(E.IconSlotContext.Provider,{value:{size:c},children:m}),_&&!n&&e.jsx("span",{className:t.default["icon-button__unread-badge"]})]}),l&&e.jsx("span",{className:t.default["icon-button__count"],children:a})]})});r.displayName="IconButton";exports.ICON_BUTTON_ICON_SIZES=d;exports.default=r;
+//# sourceMappingURL=IconButton.cjs.map

package/dist/components/icon-button/IconButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button. */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    {\n      active = false,\n      className = '',\n      count,\n      destructive = false,\n      icon,\n      loading = false,\n      padding = 'default',\n      rounded = false,\n      size = 'medium',\n      style = 'default',\n      toggled,\n      unreadBadge = false,\n      disabled,\n      type = 'button',\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) {\n    const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n    const paddingClass =\n      padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n    const styleClass =\n      style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n    const destructiveClass = destructive\n      ? styles['icon-button--destructive']\n      : '';\n    const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n    const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n    const activeClass = active ? styles['icon-button--active'] : '';\n    const hasCount = count !== undefined;\n    const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n    const rootClass = [\n      styles['icon-button'],\n      sizeClass,\n      paddingClass,\n      styleClass,\n      destructiveClass,\n      roundedClass,\n      toggledClass,\n      activeClass,\n      hasCountClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n    return (\n      <button\n        ref={ref}\n        className={rootClass}\n        type={type}\n        disabled={disabled || loading}\n        aria-label={ariaLabel}\n        aria-pressed={toggled === undefined ? undefined : toggled}\n        data-active={active ? 'true' : undefined}\n        {...rest}\n      >\n        <span className={styles['icon-button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          ) : (\n            <IconSlotContext.Provider value={{ size: spinnerSize }}>\n              {icon}\n            </IconSlotContext.Provider>\n          )}\n          {unreadBadge && !loading && (\n            <span className={styles['icon-button__unread-badge']} />\n          )}\n        </span>\n        {hasCount && (\n          <span className={styles['icon-button__count']}>{count}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","forwardRef","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","ref","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":"oTA+CaA,EAGT,CACF,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAQMC,EAAaC,EAAAA,WACjB,SACE,CACE,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,QAAAC,EAAU,GACV,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EACA,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQX,CAAI,CAAC,EAAE,EACvDY,EACJd,IAAY,UAAYY,EAAAA,QAAO,8BAA8B,EAAI,GAC7DG,EACJZ,IAAU,WAAaS,EAAAA,QAAO,6BAA6B,EAAI,GAC3DI,EAAmBnB,EACrBe,UAAO,0BAA0B,EACjC,GACEK,EAAehB,EAAUW,UAAO,sBAAsB,EAAI,GAC1DM,EAAed,EAAUQ,UAAO,sBAAsB,EAAI,GAC1DO,EAAczB,EAASkB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWxB,IAAU,OACrByB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACA1B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL4B,EAAchC,EAAuBW,CAAI,EAE/C,OACEsB,EAAAA,KAAC,SAAA,CACC,IAAAd,EACA,UAAWY,EACX,KAAAf,EACA,SAAUD,GAAYP,EACtB,aAAYS,EACZ,eAAcJ,IAAY,OAAY,OAAYA,EAClD,cAAaV,EAAS,OAAS,OAC9B,GAAGe,EAEJ,SAAA,CAAAe,OAAC,QAAK,UAAWZ,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAb,QACE0B,EAAAA,QAAA,CAAQ,KAAMF,EAAa,SAAUpB,IAAU,WAAY,EAE5DuB,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMJ,CAAA,EACtC,SAAAzB,EACH,EAEDO,GAAe,CAACN,GACf2B,MAAC,QAAK,UAAWd,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCM,EAAAA,IAAC,OAAA,CAAK,UAAWd,EAAAA,QAAO,oBAAoB,EAAI,SAAAhB,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D,CACF,EAEAJ,EAAW,YAAc"}

package/dist/components/icon-button/IconButton.css

@@ -0,0 +1 @@
+._icon-button_u2ufj_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;color:rgba(var(--center-channel-color-rgb),.64);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_u2ufj_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_u2ufj_2:disabled{cursor:not-allowed;opacity:.5}._icon-button_u2ufj_2:hover:not(:disabled):not(:active):not(._icon-button--active_u2ufj_25):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_u2ufj_2:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button__icon-slot_u2ufj_33{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_u2ufj_40{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-full);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_u2ufj_51{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_u2ufj_55{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_u2ufj_55 ._icon-button__count_u2ufj_51{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_u2ufj_55._icon-button--padding-compact_u2ufj_64{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_u2ufj_69{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_u2ufj_69 ._icon-button__count_u2ufj_51{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_u2ufj_69._icon-button--padding-compact_u2ufj_64{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_u2ufj_83{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_u2ufj_83 ._icon-button__count_u2ufj_51{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_u2ufj_83._icon-button--padding-compact_u2ufj_64{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_u2ufj_97{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_u2ufj_97 ._icon-button__count_u2ufj_51{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_u2ufj_97._icon-button--padding-compact_u2ufj_64{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_u2ufj_111{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_u2ufj_115{border-radius:var(--radius-full)}._icon-button--active_u2ufj_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--active_u2ufj_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--active_u2ufj_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--toggled_u2ufj_25{background-color:var(--button-bg);color:var(--button-color)}._icon-button--toggled_u2ufj_25:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_u2ufj_25:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_u2ufj_25 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_u2ufj_145{background-color:transparent;color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_u2ufj_145 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_u2ufj_145:hover:not(:disabled):not(:active):not(._icon-button--toggled_u2ufj_25):not(._icon-button--active_u2ufj_25){background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._icon-button--style-inverted_u2ufj_145:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25:hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,45 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';
+/** Figma "Style": Default (light context) | Inverted (dark context). */
+export type IconButtonStyle = 'default' | 'inverted';
+export type IconButtonPadding = 'default' | 'compact';
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    /** When true, forces the subtler pressed/active visual (lighter than toggled). */
+    active?: boolean;
+    /** Optional CSS class name. */
+    className?: string;
+    /** Numeric count shown inline after the icon. Figma: Count. */
+    count?: number;
+    /** When true, uses destructive (danger) styling. Figma: Destructive. */
+    destructive?: boolean;
+    /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */
+    icon: ReactNode;
+    /** When true, shows a Spinner in place of the icon and disables the button. */
+    loading?: boolean;
+    /** Padding variant. Figma: Padding = Default | Compact. */
+    padding?: IconButtonPadding;
+    /** When true, uses full border radius (pill). Figma: Rounded = On. */
+    rounded?: boolean;
+    /** Size variant. Figma: Size. Default: Medium. */
+    size?: IconButtonSize;
+    /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */
+    style?: IconButtonStyle;
+    /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */
+    toggled?: boolean;
+    /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */
+    unreadBadge?: boolean;
+}
+/**
+ * @deprecated No longer needed — IconButton sets the icon size via context.
+ * Pass `<Icon glyph={<YourIcon />} />` without a size prop.
+ */
+export declare const ICON_BUTTON_ICON_SIZES: Record<IconButtonSize, '12' | '16' | '20' | '24'>;
+/**
+ * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message
+ * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate
+ * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the
+ * action explicit.
+ */
+declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default IconButton;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/icon-button/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9E,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,wEAAwE;AACxE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,CACR;IACC,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gJAAgJ;IAChJ,IAAI,EAAE,SAAS,CAAC;IAChB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,wEAAwE;IACxE,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,cAAc,EACd,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAM1B,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,UAAU,+GAkFf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,70 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { IconSlotContext as E } from "../icon/Icon.js";
+import K from "../spinner/Spinner.js";
+import { toKebab as P } from "../../utils/string.js";
+import t from "./IconButton.module.scss.js";
+const R = {
+  "x-small": "12",
+  small: "16",
+  medium: "20",
+  large: "24"
+}, U = w(
+  function({
+    active: e = !1,
+    className: u = "",
+    count: a,
+    destructive: m = !1,
+    icon: b,
+    loading: n = !1,
+    padding: f = "default",
+    rounded: p = !1,
+    size: i = "medium",
+    style: c = "default",
+    toggled: s,
+    unreadBadge: v = !1,
+    disabled: C,
+    type: _ = "button",
+    "aria-label": h,
+    ...N
+  }, I) {
+    const x = t[`icon-button--size-${P(i)}`], B = f === "compact" ? t["icon-button--padding-compact"] : "", S = c === "inverted" ? t["icon-button--style-inverted"] : "", z = m ? t["icon-button--destructive"] : "", j = p ? t["icon-button--rounded"] : "", y = s ? t["icon-button--toggled"] : "", O = e ? t["icon-button--active"] : "", r = a !== void 0, g = r ? t["icon-button--has-count"] : "", T = [
+      t["icon-button"],
+      x,
+      B,
+      S,
+      z,
+      j,
+      y,
+      O,
+      g,
+      u
+    ].filter(Boolean).join(" "), l = R[i];
+    return /* @__PURE__ */ d(
+      "button",
+      {
+        ref: I,
+        className: T,
+        type: _,
+        disabled: C || n,
+        "aria-label": h,
+        "aria-pressed": s === void 0 ? void 0 : s,
+        "data-active": e ? "true" : void 0,
+        ...N,
+        children: [
+          /* @__PURE__ */ d("span", { className: t["icon-button__icon-slot"], "aria-hidden": !0, children: [
+            n ? /* @__PURE__ */ o(K, { size: l, inverted: c === "inverted" }) : /* @__PURE__ */ o(E.Provider, { value: { size: l }, children: b }),
+            v && !n && /* @__PURE__ */ o("span", { className: t["icon-button__unread-badge"] })
+          ] }),
+          r && /* @__PURE__ */ o("span", { className: t["icon-button__count"], children: a })
+        ]
+      }
+    );
+  }
+);
+U.displayName = "IconButton";
+export {
+  R as ICON_BUTTON_ICON_SIZES,
+  U as default
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button. */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    {\n      active = false,\n      className = '',\n      count,\n      destructive = false,\n      icon,\n      loading = false,\n      padding = 'default',\n      rounded = false,\n      size = 'medium',\n      style = 'default',\n      toggled,\n      unreadBadge = false,\n      disabled,\n      type = 'button',\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) {\n    const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n    const paddingClass =\n      padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n    const styleClass =\n      style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n    const destructiveClass = destructive\n      ? styles['icon-button--destructive']\n      : '';\n    const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n    const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n    const activeClass = active ? styles['icon-button--active'] : '';\n    const hasCount = count !== undefined;\n    const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n    const rootClass = [\n      styles['icon-button'],\n      sizeClass,\n      paddingClass,\n      styleClass,\n      destructiveClass,\n      roundedClass,\n      toggledClass,\n      activeClass,\n      hasCountClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n    return (\n      <button\n        ref={ref}\n        className={rootClass}\n        type={type}\n        disabled={disabled || loading}\n        aria-label={ariaLabel}\n        aria-pressed={toggled === undefined ? undefined : toggled}\n        data-active={active ? 'true' : undefined}\n        {...rest}\n      >\n        <span className={styles['icon-button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          ) : (\n            <IconSlotContext.Provider value={{ size: spinnerSize }}>\n              {icon}\n            </IconSlotContext.Provider>\n          )}\n          {unreadBadge && !loading && (\n            <span className={styles['icon-button__unread-badge']} />\n          )}\n        </span>\n        {hasCount && (\n          <span className={styles['icon-button__count']}>{count}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","forwardRef","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","ref","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":";;;;;;AA+CO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAQMC,IAAaC;AAAA,EACjB,SACE;AAAA,IACE,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAYC,EAAO,qBAAqBC,EAAQX,CAAI,CAAC,EAAE,GACvDY,IACJd,MAAY,YAAYY,EAAO,8BAA8B,IAAI,IAC7DG,IACJZ,MAAU,aAAaS,EAAO,6BAA6B,IAAI,IAC3DI,IAAmBnB,IACrBe,EAAO,0BAA0B,IACjC,IACEK,IAAehB,IAAUW,EAAO,sBAAsB,IAAI,IAC1DM,IAAed,IAAUQ,EAAO,sBAAsB,IAAI,IAC1DO,IAAczB,IAASkB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWxB,MAAU,QACrByB,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,MAChBV,EAAO,aAAa;AAAA,MACpBD;AAAA,MACAG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAE;AAAA,MACA1B;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL4B,IAAchC,EAAuBW,CAAI;AAE/C,WACE,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAd;AAAA,QACA,WAAWY;AAAA,QACX,MAAAf;AAAA,QACA,UAAUD,KAAYP;AAAA,QACtB,cAAYS;AAAA,QACZ,gBAAcJ,MAAY,SAAY,SAAYA;AAAA,QAClD,eAAaV,IAAS,SAAS;AAAA,QAC9B,GAAGe;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAe,EAAC,UAAK,WAAWZ,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,YAAAb,sBACE0B,GAAA,EAAQ,MAAMF,GAAa,UAAUpB,MAAU,YAAY,IAE5D,gBAAAuB,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMJ,EAAA,GACtC,UAAAzB,GACH;AAAA,YAEDO,KAAe,CAACN,KACf,gBAAA2B,EAAC,UAAK,WAAWd,EAAO,2BAA2B,EAAA,CAAG;AAAA,UAAA,GAE1D;AAAA,UACCQ,KACC,gBAAAM,EAAC,QAAA,EAAK,WAAWd,EAAO,oBAAoB,GAAI,UAAAhB,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAI9D;AACF;AAEAJ,EAAW,cAAc;"}

package/dist/components/icon-button/IconButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_u2ufj_2","icon-button--active":"_icon-button--active_u2ufj_25","icon-button--toggled":"_icon-button--toggled_u2ufj_25","icon-button__icon-slot":"_icon-button__icon-slot_u2ufj_33","icon-button__unread-badge":"_icon-button__unread-badge_u2ufj_40","icon-button__count":"_icon-button__count_u2ufj_51","icon-button--size-x-small":"_icon-button--size-x-small_u2ufj_55","icon-button--padding-compact":"_icon-button--padding-compact_u2ufj_64","icon-button--size-small":"_icon-button--size-small_u2ufj_69","icon-button--size-medium":"_icon-button--size-medium_u2ufj_83","icon-button--size-large":"_icon-button--size-large_u2ufj_97","icon-button--has-count":"_icon-button--has-count_u2ufj_111","icon-button--rounded":"_icon-button--rounded_u2ufj_115","icon-button--style-inverted":"_icon-button--style-inverted_u2ufj_145","icon-button--destructive":"_icon-button--destructive_u2ufj_187"};exports.default=t;
+//# sourceMappingURL=IconButton.module.scss.cjs.map

package/dist/components/icon-button/IconButton.module.scss.cjs.map

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

package/dist/components/icon-button/IconButton.module.scss.js

@@ -0,0 +1,21 @@
+import './IconButton.css';const t = {
+  "icon-button": "_icon-button_u2ufj_2",
+  "icon-button--active": "_icon-button--active_u2ufj_25",
+  "icon-button--toggled": "_icon-button--toggled_u2ufj_25",
+  "icon-button__icon-slot": "_icon-button__icon-slot_u2ufj_33",
+  "icon-button__unread-badge": "_icon-button__unread-badge_u2ufj_40",
+  "icon-button__count": "_icon-button__count_u2ufj_51",
+  "icon-button--size-x-small": "_icon-button--size-x-small_u2ufj_55",
+  "icon-button--padding-compact": "_icon-button--padding-compact_u2ufj_64",
+  "icon-button--size-small": "_icon-button--size-small_u2ufj_69",
+  "icon-button--size-medium": "_icon-button--size-medium_u2ufj_83",
+  "icon-button--size-large": "_icon-button--size-large_u2ufj_97",
+  "icon-button--has-count": "_icon-button--has-count_u2ufj_111",
+  "icon-button--rounded": "_icon-button--rounded_u2ufj_115",
+  "icon-button--style-inverted": "_icon-button--style-inverted_u2ufj_145",
+  "icon-button--destructive": "_icon-button--destructive_u2ufj_187"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=IconButton.module.scss.js.map

package/dist/components/icon-button/IconButton.module.scss.js.map

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

package/dist/components/icon-button/index.cjs

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

package/dist/components/icon-button/index.cjs.map

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EACL,sBAAsB,EACtB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAC"}

package/dist/components/icon-button/index.js

@@ -0,0 +1,6 @@
+import { ICON_BUTTON_ICON_SIZES as I, default as N } from "./IconButton.js";
+export {
+  I as ICON_BUTTON_ICON_SIZES,
+  N as IconButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/icon-button/index.js.map

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

package/dist/components/illustration/Illustration.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),n=require("./Illustration.module.scss.cjs");function u({children:l,className:o="",width:i,height:s,"aria-label":e}){const r=[n.default.illustration,o].filter(Boolean).join(" "),t=e!==void 0&&e!=="";return a.jsx("span",{className:r,style:{width:i,height:s},role:t?"img":void 0,"aria-label":t?e:void 0,"aria-hidden":!t,children:l})}exports.default=u;
+//# sourceMappingURL=Illustration.cjs.map

package/dist/components/illustration/Illustration.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Illustration.cjs","sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Illustration.module.scss';\n\nexport interface IllustrationProps {\n  /** SVG component from `@mattermost/compass-ui/illustrations/<name>`. */\n  children: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional inline width (e.g. \"100%\", \"320px\"). */\n  width?: string;\n  /** Optional inline height. */\n  height?: string;\n  /** Accessible label; set to empty string for decorative only. */\n  'aria-label'?: string;\n}\n\n/**\n * Illustration is the wrapper for brand SVG artwork shipped from\n * `@mattermost/compass-ui/illustrations/<name>`. It enforces a consistent size box, contains\n * the SVG, and exposes an accessible label so screen readers can describe the artwork (or\n * skip it when it's purely decorative).\n */\nexport default function Illustration({\n  children,\n  className = '',\n  width,\n  height,\n  'aria-label': ariaLabel,\n}: IllustrationProps) {\n  const rootClass = [styles.illustration, className].filter(Boolean).join(' ');\n  const hasLabel = ariaLabel !== undefined && ariaLabel !== '';\n\n  return (\n    <span\n      className={rootClass}\n      style={{ width, height }}\n      role={hasLabel ? 'img' : undefined}\n      aria-label={hasLabel ? ariaLabel : undefined}\n      aria-hidden={!hasLabel}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["Illustration","children","className","width","height","ariaLabel","rootClass","styles","hasLabel","jsx"],"mappings":"6LAsBA,SAAwBA,EAAa,CACnC,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EACA,OAAAC,EACA,aAAcC,CAChB,EAAsB,CACpB,MAAMC,EAAY,CAACC,EAAAA,QAAO,aAAcL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACrEM,EAAWH,IAAc,QAAaA,IAAc,GAE1D,OACEI,EAAAA,IAAC,OAAA,CACC,UAAWH,EACX,MAAO,CAAE,MAAAH,EAAO,OAAAC,CAAA,EAChB,KAAMI,EAAW,MAAQ,OACzB,aAAYA,EAAWH,EAAY,OACnC,cAAa,CAACG,EAEb,SAAAP,CAAA,CAAA,CAGP"}

package/dist/components/illustration/Illustration.css

@@ -0,0 +1 @@
+._illustration_xetnl_2{display:inline-block;line-height:0}._illustration_xetnl_2 svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}

package/dist/components/illustration/Illustration.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface IllustrationProps {
+    /** SVG component from `@mattermost/compass-ui/illustrations/<name>`. */
+    children: ReactNode;
+    /** Optional CSS class name. */
+    className?: string;
+    /** Optional inline width (e.g. "100%", "320px"). */
+    width?: string;
+    /** Optional inline height. */
+    height?: string;
+    /** Accessible label; set to empty string for decorative only. */
+    'aria-label'?: string;
+}
+/**
+ * Illustration is the wrapper for brand SVG artwork shipped from
+ * `@mattermost/compass-ui/illustrations/<name>`. It enforces a consistent size box, contains
+ * the SVG, and exposes an accessible label so screen readers can describe the artwork (or
+ * skip it when it's purely decorative).
+ */
+export default function Illustration({ children, className, width, height, 'aria-label': ariaLabel, }: IllustrationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Illustration.d.ts.map

package/dist/components/illustration/Illustration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Illustration.d.ts","sourceRoot":"","sources":["../../../src/components/illustration/Illustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,SAAc,EACd,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,GACxB,EAAE,iBAAiB,2CAenB"}

package/dist/components/illustration/Illustration.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "./Illustration.module.scss.js";
+function f({
+  children: l,
+  className: s = "",
+  width: i,
+  height: a,
+  "aria-label": o
+}) {
+  const r = [n.illustration, s].filter(Boolean).join(" "), t = o !== void 0 && o !== "";
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: r,
+      style: { width: i, height: a },
+      role: t ? "img" : void 0,
+      "aria-label": t ? o : void 0,
+      "aria-hidden": !t,
+      children: l
+    }
+  );
+}
+export {
+  f as default
+};
+//# sourceMappingURL=Illustration.js.map

package/dist/components/illustration/Illustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Illustration.js","sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Illustration.module.scss';\n\nexport interface IllustrationProps {\n  /** SVG component from `@mattermost/compass-ui/illustrations/<name>`. */\n  children: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional inline width (e.g. \"100%\", \"320px\"). */\n  width?: string;\n  /** Optional inline height. */\n  height?: string;\n  /** Accessible label; set to empty string for decorative only. */\n  'aria-label'?: string;\n}\n\n/**\n * Illustration is the wrapper for brand SVG artwork shipped from\n * `@mattermost/compass-ui/illustrations/<name>`. It enforces a consistent size box, contains\n * the SVG, and exposes an accessible label so screen readers can describe the artwork (or\n * skip it when it's purely decorative).\n */\nexport default function Illustration({\n  children,\n  className = '',\n  width,\n  height,\n  'aria-label': ariaLabel,\n}: IllustrationProps) {\n  const rootClass = [styles.illustration, className].filter(Boolean).join(' ');\n  const hasLabel = ariaLabel !== undefined && ariaLabel !== '';\n\n  return (\n    <span\n      className={rootClass}\n      style={{ width, height }}\n      role={hasLabel ? 'img' : undefined}\n      aria-label={hasLabel ? ariaLabel : undefined}\n      aria-hidden={!hasLabel}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["Illustration","children","className","width","height","ariaLabel","rootClass","styles","hasLabel","jsx"],"mappings":";;AAsBA,SAAwBA,EAAa;AAAA,EACnC,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAcC;AAChB,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,cAAcL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACrEM,IAAWH,MAAc,UAAaA,MAAc;AAE1D,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,OAAO,EAAE,OAAAH,GAAO,QAAAC,EAAA;AAAA,MAChB,MAAMI,IAAW,QAAQ;AAAA,MACzB,cAAYA,IAAWH,IAAY;AAAA,MACnC,eAAa,CAACG;AAAA,MAEb,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/illustration/Illustration.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Illustration.css');const t="_illustration_xetnl_2",l={illustration:t};exports.default=l;exports.illustration=t;
+//# sourceMappingURL=Illustration.module.scss.cjs.map

package/dist/components/illustration/Illustration.module.scss.cjs.map

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

package/dist/components/illustration/Illustration.module.scss.js

@@ -0,0 +1,8 @@
+import './Illustration.css';const t = "_illustration_xetnl_2", l = {
+  illustration: t
+};
+export {
+  l as default,
+  t as illustration
+};
+//# sourceMappingURL=Illustration.module.scss.js.map

package/dist/components/illustration/Illustration.module.scss.js.map

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

package/dist/components/illustration/index.cjs

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