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

package/dist/components/help-menu/HelpMenu.js

@@ -0,0 +1,64 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import __u from "@mattermost/compass-icons/components/alert-outline.js";const u=__u&&__u.default?__u.default:__u;
+import __m from "@mattermost/compass-icons/components/file-text-outline.js";const m=__m&&__m.default?__m.default:__m;
+import __p from "@mattermost/compass-icons/components/help-circle-outline.js";const p=__p&&__p.default?__p.default:__p;
+import __a from "@mattermost/compass-icons/components/keyboard-outline.js";const a=__a&&__a.default?__a.default:__a;
+import __s from "@mattermost/compass-icons/components/lightbulb-outline.js";const s=__s&&__s.default?__s.default:__s;
+import l from "../icon/Icon.js";
+import i from "../menu-item/MenuItem.js";
+import c, { PopoverMenuGroup as g } from "../popover-menu/PopoverMenu.js";
+function O({
+  className: o = "",
+  style: r,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    c,
+    {
+      className: o,
+      style: { width: "232px", ...r },
+      ...t,
+      children: /* @__PURE__ */ n(g, { children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Mattermost user guide",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(m, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Training resources",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(s, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Ask the community",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(p, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Report a problem",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(u, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Keyboard shortcuts",
+            leadingVisual: /* @__PURE__ */ e(l, { glyph: /* @__PURE__ */ e(a, {}), size: "16" })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  O as default
+};
+//# sourceMappingURL=HelpMenu.js.map

package/dist/components/help-menu/HelpMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpMenu.js","sources":["../../../src/components/help-menu/HelpMenu.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';\nimport HelpCircleOutlineIcon from '@mattermost/compass-icons/components/help-circle-outline';\nimport KeyboardOutlineIcon from '@mattermost/compass-icons/components/keyboard-outline';\nimport LightbulbOutlineIcon from '@mattermost/compass-icons/components/lightbulb-outline';\nimport Icon from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n  PopoverMenuGroup,\n} from '@/components/popover-menu/PopoverMenu';\n\nexport interface HelpMenuProps extends HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Global header help menu — docs, community, and shortcuts.\n */\nexport default function HelpMenu({\n  className = '',\n  style,\n  ...rest\n}: HelpMenuProps) {\n  return (\n    <PopoverMenu\n      className={className}\n      style={{ width: '232px', ...style }}\n      {...rest}\n    >\n      <PopoverMenuGroup>\n        <MenuItem\n          label=\"Mattermost user guide\"\n          leadingVisual={<Icon glyph={<FileTextOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Training resources\"\n          leadingVisual={<Icon glyph={<LightbulbOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Ask the community\"\n          leadingVisual={<Icon glyph={<HelpCircleOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Report a problem\"\n          leadingVisual={<Icon glyph={<AlertOutlineIcon />} size=\"16\" />}\n        />\n        <MenuItem\n          label=\"Keyboard shortcuts\"\n          leadingVisual={<Icon glyph={<KeyboardOutlineIcon />} size=\"16\" />}\n        />\n      </PopoverMenuGroup>\n    </PopoverMenu>\n  );\n}\n"],"names":["HelpMenu","className","style","rest","jsx","PopoverMenu","PopoverMenuGroup","MenuItem","Icon","FileTextOutlineIcon","LightbulbOutlineIcon","HelpCircleOutlineIcon","AlertOutlineIcon","KeyboardOutlineIcon"],"mappings":";;;;;;;;;AAiBA,SAAwBA,EAAS;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAJ;AAAA,MACA,OAAO,EAAE,OAAO,SAAS,GAAGC,EAAA;AAAA,MAC3B,GAAGC;AAAA,MAEJ,4BAACG,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQC,GAAA,CAAA,CAAoB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjE,gBAAAL;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQE,GAAA,CAAA,CAAqB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAElE,gBAAAN;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQG,GAAA,CAAA,CAAsB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnE,gBAAAP;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAiB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAE9D,gBAAAR;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,iCAAgBC,GAAA,EAAK,yBAAQK,GAAA,CAAA,CAAoB,GAAI,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACjE,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/help-menu/index.cjs

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

package/dist/components/help-menu/index.cjs.map

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

package/dist/components/help-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/help-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/help-menu/index.js

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

package/dist/components/help-menu/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 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;
+//# 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 } 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"}

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,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"}

package/dist/components/icon/Icon.js

@@ -0,0 +1,47 @@
+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 = {
+  10: 12,
+  12: 14,
+  16: 18,
+  20: 24,
+  24: 28,
+  28: 32,
+  32: 36,
+  40: 48,
+  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"]
+};
+function p({
+  className: t = "",
+  glyph: n = null,
+  size: e = "24"
+}) {
+  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,
+    {
+      size: s
+    }
+  ) : n;
+  return /* @__PURE__ */ o("div", { className: a, "aria-hidden": !0, children: /* @__PURE__ */ o("div", { className: i["icon__glyph-area"], children: l }) });
+}
+export {
+  m as SVG_SIZE_MAP,
+  p as default
+};
+//# 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 } 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;"}

package/dist/components/icon/Icon.module.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.module.scss.cjs

@@ -0,0 +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;
+//# 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.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"
+};
+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 e=require("./Icon.cjs");exports.Icon=e.default;exports.SVG_SIZE_MAP=e.SVG_SIZE_MAP;
+//# 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.map

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

package/dist/components/icon/index.js

@@ -0,0 +1,6 @@
+import { default as e, SVG_SIZE_MAP as f } from "./Icon.js";
+export {
+  e as Icon,
+  f as SVG_SIZE_MAP
+};
+//# 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"),B=require("../../utils/string.cjs"),t=require("./IconButton.module.scss.cjs"),T={"x-small":"12",small:"16",medium:"20",large:"24"};function q({active:s=!1,className:l="",count:a,destructive:u=!1,icon:i,padding:c="default",rounded:d=!1,size:r="medium",style:f="default",toggled:n=!1,unreadBadge:b=!1,disabled:_,type:m="button","aria-label":C,...v}){const N=t.default[`icon-button--size-${B.toKebab(r)}`],g=c==="compact"?t.default["icon-button--padding-compact"]:"",p=f==="inverted"?t.default["icon-button--style-inverted"]:"",I=u?t.default["icon-button--destructive"]:"",h=d?t.default["icon-button--rounded"]:"",j=n?t.default["icon-button--toggled"]:"",O=s?t.default["icon-button--active"]:"",o=a!==void 0,x=o?t.default["icon-button--has-count"]:"",S=[t.default["icon-button"],N,g,p,I,h,j,O,x,l].filter(Boolean).join(" ");return e.jsxs("button",{className:S,type:m,disabled:_,"aria-label":C,"aria-pressed":n?!0:void 0,"data-active":s?"true":void 0,...v,children:[e.jsxs("span",{className:t.default["icon-button__icon-slot"],"aria-hidden":!0,children:[i,b&&e.jsx("span",{className:t.default["icon-button__unread-badge"]})]}),o&&e.jsx("span",{className:t.default["icon-button__count"],children:a})]})}exports.ICON_BUTTON_ICON_SIZES=T;exports.default=q;
+//# 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 type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\n  icon: ReactNode;\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. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\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 */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  toggled = false,\n  unreadBadge = false,\n  disabled,\n  type = 'button',\n  'aria-label': ariaLabel,\n  ...rest\n}: IconButtonProps) {\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  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-label={ariaLabel}\n      aria-pressed={toggled ? true : undefined}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {icon}\n        {unreadBadge && (\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"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","jsxs","jsx"],"mappings":"+NAwCaA,EAGT,CACF,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAQA,SAAwBC,EAAW,CACjC,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EAAU,GACV,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQV,CAAI,CAAC,EAAE,EACvDW,EACJb,IAAY,UAAYW,EAAAA,QAAO,8BAA8B,EAAI,GAC7DG,EACJX,IAAU,WAAaQ,EAAAA,QAAO,6BAA6B,EAAI,GAC3DI,EAAmBjB,EACrBa,UAAO,0BAA0B,EACjC,GACEK,EAAef,EAAUU,UAAO,sBAAsB,EAAI,GAC1DM,EAAeb,EAAUO,UAAO,sBAAsB,EAAI,GAC1DO,EAAcvB,EAASgB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWtB,IAAU,OACrBuB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACAxB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACE0B,EAAAA,KAAC,SAAA,CACC,UAAWD,EACX,KAAAd,EACA,SAAAD,EACA,aAAYE,EACZ,eAAcJ,EAAU,GAAO,OAC/B,cAAaT,EAAS,OAAS,OAC9B,GAAGc,EAEJ,SAAA,CAAAa,OAAC,QAAK,UAAWX,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAZ,EACAM,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWZ,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCI,EAAAA,IAAC,OAAA,CAAK,UAAWZ,EAAAA,QAAO,oBAAoB,EAAI,SAAAd,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D"}

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,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,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,gIAAgI;IAChI,IAAI,EAAE,SAAS,CAAC;IAChB,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,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,yFAAyF;AACzF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,cAAc,EACd,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAM1B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,MAAc,EACd,SAAc,EACd,KAAK,EACL,WAAmB,EACnB,IAAI,EACJ,OAAmB,EACnB,OAAe,EACf,IAAe,EACf,KAAiB,EACjB,OAAe,EACf,WAAmB,EACnB,QAAQ,EACR,IAAe,EACf,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,eAAe,2CAmDjB"}

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

@@ -0,0 +1,63 @@
+import { jsxs as e, jsx as c } from "react/jsx-runtime";
+import { toKebab as z } from "../../utils/string.js";
+import t from "./IconButton.module.scss.js";
+const K = {
+  "x-small": "12",
+  small: "16",
+  medium: "20",
+  large: "24"
+};
+function U({
+  active: o = !1,
+  className: i = "",
+  count: s,
+  destructive: l = !1,
+  icon: u,
+  padding: d = "default",
+  rounded: r = !1,
+  size: b = "medium",
+  style: m = "default",
+  toggled: n = !1,
+  unreadBadge: f = !1,
+  disabled: C,
+  type: p = "button",
+  "aria-label": v,
+  ..._
+}) {
+  const h = t[`icon-button--size-${z(b)}`], N = d === "compact" ? t["icon-button--padding-compact"] : "", g = m === "inverted" ? t["icon-button--style-inverted"] : "", x = l ? t["icon-button--destructive"] : "", I = r ? t["icon-button--rounded"] : "", j = n ? t["icon-button--toggled"] : "", y = o ? t["icon-button--active"] : "", a = s !== void 0, B = a ? t["icon-button--has-count"] : "", O = [
+    t["icon-button"],
+    h,
+    N,
+    g,
+    x,
+    I,
+    j,
+    y,
+    B,
+    i
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      className: O,
+      type: p,
+      disabled: C,
+      "aria-label": v,
+      "aria-pressed": n ? !0 : void 0,
+      "data-active": o ? "true" : void 0,
+      ..._,
+      children: [
+        /* @__PURE__ */ e("span", { className: t["icon-button__icon-slot"], "aria-hidden": !0, children: [
+          u,
+          f && /* @__PURE__ */ c("span", { className: t["icon-button__unread-badge"] })
+        ] }),
+        a && /* @__PURE__ */ c("span", { className: t["icon-button__count"], children: s })
+      ]
+    }
+  );
+}
+export {
+  K 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 type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\n  icon: ReactNode;\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. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/** Icon size (px) per IconButton size. Use with Icon: size=\"12\" | \"16\" | \"20\" | \"24\". */\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 */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  toggled = false,\n  unreadBadge = false,\n  disabled,\n  type = 'button',\n  'aria-label': ariaLabel,\n  ...rest\n}: IconButtonProps) {\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  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-label={ariaLabel}\n      aria-pressed={toggled ? true : undefined}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {icon}\n        {unreadBadge && (\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"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","jsxs","jsx"],"mappings":";;;AAwCO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAQA,SAAwBC,EAAW;AAAA,EACjC,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAYC,EAAO,qBAAqBC,EAAQV,CAAI,CAAC,EAAE,GACvDW,IACJb,MAAY,YAAYW,EAAO,8BAA8B,IAAI,IAC7DG,IACJX,MAAU,aAAaQ,EAAO,6BAA6B,IAAI,IAC3DI,IAAmBjB,IACrBa,EAAO,0BAA0B,IACjC,IACEK,IAAef,IAAUU,EAAO,sBAAsB,IAAI,IAC1DM,IAAeb,IAAUO,EAAO,sBAAsB,IAAI,IAC1DO,IAAcvB,IAASgB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWtB,MAAU,QACrBuB,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,IAChBV,EAAO,aAAa;AAAA,IACpBD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAE;AAAA,IACAxB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,MACX,MAAAd;AAAA,MACA,UAAAD;AAAA,MACA,cAAYE;AAAA,MACZ,gBAAcJ,IAAU,KAAO;AAAA,MAC/B,eAAaT,IAAS,SAAS;AAAA,MAC9B,GAAGc;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWX,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,UAAAZ;AAAA,UACAM,KACC,gBAAAkB,EAAC,QAAA,EAAK,WAAWZ,EAAO,2BAA2B,EAAA,CAAG;AAAA,QAAA,GAE1D;AAAA,QACCQ,KACC,gBAAAI,EAAC,QAAA,EAAK,WAAWZ,EAAO,oBAAoB,GAAI,UAAAd,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9D;"}

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

@@ -0,0 +1 @@
+._icon-button_1klqk_2{--icon-button-focus-ring-color: var(--button-bg);box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:1px solid transparent;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition);background-color:transparent;color:rgba(var(--center-channel-color-rgb),.64)}._icon-button_1klqk_2:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--icon-button-focus-ring-color);opacity:0;transform:scale(.94);transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._icon-button_1klqk_2:focus-visible{outline:none}._icon-button_1klqk_2:focus-visible:not(:disabled):after{opacity:1;transform:scale(1)}._icon-button_1klqk_2:not(:focus-visible):after{transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}._icon-button_1klqk_2:disabled{cursor:not-allowed;opacity:.5}._icon-button_1klqk_2:hover:not(:disabled):not(:active):not(._icon-button--active_1klqk_42):not(._icon-button--toggled_1klqk_42){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_1klqk_2:active:not(:disabled):not(._icon-button--toggled_1klqk_42){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button__icon-slot_1klqk_50{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_1klqk_57{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_1klqk_68{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_1klqk_72{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_1klqk_72 ._icon-button__count_1klqk_68{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_1klqk_72._icon-button--padding-compact_1klqk_81{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_1klqk_86{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_1klqk_86 ._icon-button__count_1klqk_68{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_1klqk_86._icon-button--padding-compact_1klqk_81{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_1klqk_100{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_1klqk_100 ._icon-button__count_1klqk_68{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_1klqk_100._icon-button--padding-compact_1klqk_81{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_1klqk_114{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_1klqk_114 ._icon-button__count_1klqk_68{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_1klqk_114._icon-button--padding-compact_1klqk_81{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_1klqk_128{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_1klqk_132{border-radius:var(--radius-full)}._icon-button--active_1klqk_42:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--active_1klqk_42:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--active_1klqk_42:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--toggled_1klqk_42{--icon-button-focus-ring-inner: var(--center-channel-bg);--icon-button-focus-ring-outer: var(--button-bg);background-color:var(--button-bg);color:var(--button-color)}._icon-button--toggled_1klqk_42:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_1klqk_42:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_1klqk_42 ._icon-button__unread-badge_1klqk_57{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--toggled_1klqk_42:after{box-shadow:0 0 0 3px var(--icon-button-focus-ring-inner),0 0 0 5px var(--icon-button-focus-ring-outer)}._icon-button--style-inverted_1klqk_167{background-color:transparent;color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_1klqk_167 ._icon-button__unread-badge_1klqk_57{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_1klqk_167:hover:not(:disabled):not(:active):not(._icon-button--toggled_1klqk_42):not(._icon-button--active_1klqk_42){background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._icon-button--style-inverted_1klqk_167:active:not(:disabled):not(._icon-button--toggled_1klqk_42){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_1klqk_167._icon-button--active_1klqk_42:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_1klqk_167._icon-button--active_1klqk_42:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--style-inverted_1klqk_167._icon-button--active_1klqk_42:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--style-inverted_1klqk_167._icon-button--toggled_1klqk_42{--icon-button-focus-ring-inner: var(--sidebar-bg);--icon-button-focus-ring-outer: var(--button-bg);background-color:var(--sidebar-text);color:var(--sidebar-bg)}._icon-button--style-inverted_1klqk_167._icon-button--toggled_1klqk_42:hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);color:var(--sidebar-bg)}._icon-button--style-inverted_1klqk_167._icon-button--toggled_1klqk_42:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88);color:var(--sidebar-bg)}._icon-button--style-inverted_1klqk_167._icon-button--toggled_1klqk_42 ._icon-button__unread-badge_1klqk_57{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_1klqk_167._icon-button--destructive_1klqk_211{--icon-button-focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_1klqk_167._icon-button--destructive_1klqk_211: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_1klqk_167._icon-button--destructive_1klqk_211:active:not(:disabled):not(._icon-button--toggled_1klqk_42){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._icon-button--destructive_1klqk_211{--icon-button-focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--destructive_1klqk_211: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_1klqk_211:active:not(:disabled):not(._icon-button--toggled_1klqk_42){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.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.module.css');const t={"icon-button":"_icon-button_1klqk_2","icon-button--active":"_icon-button--active_1klqk_42","icon-button--toggled":"_icon-button--toggled_1klqk_42","icon-button__icon-slot":"_icon-button__icon-slot_1klqk_50","icon-button__unread-badge":"_icon-button__unread-badge_1klqk_57","icon-button__count":"_icon-button__count_1klqk_68","icon-button--size-x-small":"_icon-button--size-x-small_1klqk_72","icon-button--padding-compact":"_icon-button--padding-compact_1klqk_81","icon-button--size-small":"_icon-button--size-small_1klqk_86","icon-button--size-medium":"_icon-button--size-medium_1klqk_100","icon-button--size-large":"_icon-button--size-large_1klqk_114","icon-button--has-count":"_icon-button--has-count_1klqk_128","icon-button--rounded":"_icon-button--rounded_1klqk_132","icon-button--style-inverted":"_icon-button--style-inverted_1klqk_167","icon-button--destructive":"_icon-button--destructive_1klqk_211"};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.module.css';const t = {
+  "icon-button": "_icon-button_1klqk_2",
+  "icon-button--active": "_icon-button--active_1klqk_42",
+  "icon-button--toggled": "_icon-button--toggled_1klqk_42",
+  "icon-button__icon-slot": "_icon-button__icon-slot_1klqk_50",
+  "icon-button__unread-badge": "_icon-button__unread-badge_1klqk_57",
+  "icon-button__count": "_icon-button__count_1klqk_68",
+  "icon-button--size-x-small": "_icon-button--size-x-small_1klqk_72",
+  "icon-button--padding-compact": "_icon-button--padding-compact_1klqk_81",
+  "icon-button--size-small": "_icon-button--size-small_1klqk_86",
+  "icon-button--size-medium": "_icon-button--size-medium_1klqk_100",
+  "icon-button--size-large": "_icon-button--size-large_1klqk_114",
+  "icon-button--has-count": "_icon-button--has-count_1klqk_128",
+  "icon-button--rounded": "_icon-button--rounded_1klqk_132",
+  "icon-button--style-inverted": "_icon-button--style-inverted_1klqk_167",
+  "icon-button--destructive": "_icon-button--destructive_1klqk_211"
+};
+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 an illustration import (e.g. from `@/assets/illustrations/name.svg?react`). */\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 any of the brand SVG artworks shipped under\n * `@/assets/illustrations/`. It enforces a consistent size box, contains the SVG, and\n * exposes an accessible label so screen readers can describe the artwork (or skip it when\n * 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.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,qGAAqG;IACrG,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 an illustration import (e.g. from `@/assets/illustrations/name.svg?react`). */\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 any of the brand SVG artworks shipped under\n * `@/assets/illustrations/`. It enforces a consistent size box, contains the SVG, and\n * exposes an accessible label so screen readers can describe the artwork (or skip it when\n * 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.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.module.scss.cjs

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/illustration/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/illustration/index.js

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

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

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

package/dist/components/image-preview/ImagePreview.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("../icon/Icon.cjs"),c=require("../icon-button/IconButton.cjs"),d=require("../../hooks/use-popover-transition.cjs"),__f=require("@mattermost/compass-icons/components/link-variant.js"),f=__f?.default??__f,__w=require("@mattermost/compass-icons/components/download-outline.js"),w=__w?.default??__w,___=require("@mattermost/compass-icons/components/menu-down.js"),_=___?.default??___,__j=require("@mattermost/compass-icons/components/menu-right.js"),j=__j?.default??__j,i=require("./ImagePreview.module.scss.cjs");function x({src:m,alt:p="",collapsed:l=!1,onToggleCollapse:s,onCopyLink:r,onDownload:t,aspectRatio:n="16:9",className:v=""}){const o=d.usePopoverTransition(!l),u=d.usePopoverTransition(l),g=[i.default["image-preview"],l?i.default["image-preview--collapsed"]:"",n==="4:3"?i.default["image-preview--ratio-4-3"]:"",n==="1:1"?i.default["image-preview--ratio-1-1"]:"",v].filter(Boolean).join(" ");return e.jsx("div",{className:g,children:e.jsxs("div",{className:i.default["image-preview__stage"],children:[u.mounted&&e.jsx("button",{type:"button",className:[i.default["image-preview__collapsed-trigger"],u.visible?i.default["image-preview__collapsed-trigger--visible"]:""].filter(Boolean).join(" "),onClick:s,"aria-label":"Show image preview",children:e.jsxs("span",{className:i.default["image-preview__show-label"],children:[e.jsx("span",{className:i.default["image-preview__show-icon"],"aria-hidden":"true",children:e.jsx(a.default,{size:"12",glyph:e.jsx(j,{})})}),"Show Image preview"]})}),o.mounted&&e.jsxs("div",{className:[i.default["image-preview__frame"],o.visible?i.default["image-preview__frame--visible"]:""].filter(Boolean).join(" "),children:[e.jsx("div",{className:i.default["image-preview__media"],children:e.jsx("img",{src:m,alt:p,className:i.default["image-preview__img"]})}),e.jsxs("div",{className:i.default["image-preview__actions"],children:[r!=null&&e.jsx(c.default,{size:"small",padding:"compact","aria-label":"Copy link",icon:e.jsx(a.default,{size:"16",glyph:e.jsx(f,{})}),onClick:r}),t!=null&&e.jsx(c.default,{size:"small",padding:"compact","aria-label":"Download",icon:e.jsx(a.default,{size:"16",glyph:e.jsx(w,{})}),onClick:t})]}),s!=null&&e.jsx("button",{type:"button",className:i.default["image-preview__collapse-btn"],onClick:s,"aria-label":"Collapse image preview",children:e.jsx(a.default,{size:"16",glyph:e.jsx(_,{})})})]})]})})}exports.default=x;
+//# sourceMappingURL=ImagePreview.cjs.map

package/dist/components/image-preview/ImagePreview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.cjs","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            aria-label=\"Show image preview\"\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              Show Image preview\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img src={src} alt={alt} className={styles['image-preview__img']} />\n            </div>\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Copy link\"\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Download\"\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon","MenuDownIcon"],"mappings":"kjBAmCA,SAAwBA,EAAa,CACnC,IAAAC,EACA,IAAAC,EAAM,GACN,UAAAC,EAAY,GACZ,iBAAAC,EACA,WAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EAAY,EACd,EAAsB,CACpB,MAAMC,EAAkBC,uBAAqB,CAACP,CAAS,EACjDQ,EAAkBD,EAAAA,qBAAqBP,CAAS,EAEhDS,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBV,EAAYU,EAAAA,QAAO,0BAA0B,EAAI,GACjDN,IAAgB,MAAQM,UAAO,0BAA0B,EAAI,GAC7DN,IAAgB,MAAQM,UAAO,0BAA0B,EAAI,GAC7DL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,sBAAsB,EAC1C,SAAA,CAAAF,EAAgB,SACfG,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,kCAAkC,EACzCF,EAAgB,QACZE,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAST,EACT,aAAW,qBAEX,SAAAW,EAAAA,KAAC,OAAA,CAAK,UAAWF,UAAO,2BAA2B,EACjD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,QAAO,0BAA0B,EAC5C,cAAY,OAEZ,eAACG,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAc,CAAA,CAAI,CAAA,CAAA,EACrC,oBAAA,CAAA,CAET,CAAA,CAAA,EAIHR,EAAgB,SACfM,EAAAA,KAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,sBAAsB,EAC7BJ,EAAgB,QACZI,UAAO,+BAA+B,EACtC,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,sBAAsB,EAC3C,SAAAC,EAAAA,IAAC,MAAA,CAAI,IAAAb,EAAU,IAAAC,EAAU,UAAWW,EAAAA,QAAO,oBAAoB,EAAG,EACpE,EAEAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAR,GAAc,MACbS,EAAAA,IAACI,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,YACX,WAAOF,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACK,IAAgB,EAAI,EAClD,QAASd,CAAA,CAAA,EAGZC,GAAc,MACbQ,EAAAA,IAACI,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,WACX,WAAOF,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACM,IAAoB,EAAI,EACtD,QAASd,CAAA,CAAA,CACX,EAEJ,EAECF,GAAoB,MACnBU,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWD,EAAAA,QAAO,6BAA6B,EAC/C,QAAST,EACT,aAAW,yBAEX,eAACY,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAa,CAAA,CAAI,CAAA,CAAA,CAC3C,CAAA,CAAA,CAEJ,CAAA,CAEJ,CAAA,CACF,CAEJ"}

package/dist/components/image-preview/ImagePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAoB,EACpB,SAAc,GACf,EAAE,iBAAiB,2CA8FnB"}