@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.6

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

@@ -1 +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"}
+{"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. 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/** 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,\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 === undefined ? undefined : toggled}\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,EACA,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,IAAY,OAAY,OAAYA,EAClD,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

@@ -22,7 +22,7 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     size?: IconButtonSize;
     /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */
     style?: IconButtonStyle;
-    /** When true, shows toggled/selected state. Figma: Toggled = On. */
+    /** 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;

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

@@ -1 +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"}
+{"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,+GAA+G;IAC/G,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,OAAO,EACP,WAAmB,EACnB,QAAQ,EACR,IAAe,EACf,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,eAAe,2CAmDjB"}

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

@@ -1,4 +1,4 @@
-import { jsxs as e, jsx as c } from "react/jsx-runtime";
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
 import { toKebab as z } from "../../utils/string.js";
 import t from "./IconButton.module.scss.js";
 const K = {
@@ -8,23 +8,23 @@ const K = {
   large: "24"
 };
 function U({
-  active: o = !1,
-  className: i = "",
-  count: s,
+  active: s = !1,
+  className: c = "",
+  count: n,
   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,
+  toggled: o,
+  unreadBadge: C = !1,
+  disabled: f,
   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 = [
+  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 = o ? t["icon-button--toggled"] : "", y = s ? t["icon-button--active"] : "", a = n !== void 0, B = a ? t["icon-button--has-count"] : "", O = [
     t["icon-button"],
     h,
     N,
@@ -34,24 +34,24 @@ function U({
     j,
     y,
     B,
-    i
+    c
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "button",
     {
       className: O,
       type: p,
-      disabled: C,
+      disabled: f,
       "aria-label": v,
-      "aria-pressed": n ? !0 : void 0,
-      "data-active": o ? "true" : void 0,
+      "aria-pressed": o === void 0 ? void 0 : o,
+      "data-active": s ? "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"] })
+          C && /* @__PURE__ */ i("span", { className: t["icon-button__unread-badge"] })
         ] }),
-        a && /* @__PURE__ */ c("span", { className: t["icon-button__count"], children: s })
+        a && /* @__PURE__ */ i("span", { className: t["icon-button__count"], children: n })
       ]
     }
   );

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

@@ -1 +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;"}
+{"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. 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/** 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,\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 === undefined ? undefined : toggled}\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;AAAA,EACA,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,MAAY,SAAY,SAAYA;AAAA,MAClD,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

@@ -1 +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))}
+._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.module.scss.cjs

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

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

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

@@ -1 +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"}
+{"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.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 export interface IllustrationProps {
-    /** SVG component from an illustration import (e.g. from `@/assets/illustrations/name.svg?react`). */
+    /** SVG component from `@mattermost/compass-ui/illustrations/<name>`. */
     children: ReactNode;
     /** Optional CSS class name. */
     className?: string;
@@ -12,10 +12,10 @@ export interface IllustrationProps {
     'aria-label'?: string;
 }
 /**
- * Illustration is the wrapper for any of the brand SVG artworks shipped under
- * `@/assets/illustrations/`. 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).
+ * 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

@@ -1 +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"}
+{"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.map

@@ -1 +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;"}
+{"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/image-preview/ImagePreview.cjs

@@ -1,2 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../icon/Icon.cjs"),v=require("../icon-button/IconButton.cjs"),w=require("../../hooks/use-popover-transition.cjs"),__b=require("@mattermost/compass-icons/components/link-variant.js"),b=__b?.default??__b,__y=require("@mattermost/compass-icons/components/download-outline.js"),y=__y?.default??__y,__k=require("@mattermost/compass-icons/components/menu-down.js"),k=__k?.default??__k,__q=require("@mattermost/compass-icons/components/menu-right.js"),q=__q?.default??__q,l=require("react"),i=require("./ImagePreview.module.scss.cjs");function N({src:_,alt:j="",collapsed:r=!1,onToggleCollapse:o,onCopyLink:d,onDownload:f,aspectRatio:m="16:9",className:h=""}){const a=w.usePopoverTransition(!r),s=w.usePopoverTransition(r),u=l.useRef(null),c=l.useRef(null),n=l.useRef(!1),g=p=>{(p.key==="Enter"||p.key===" ")&&(n.current=!0)};l.useEffect(()=>{if(n.current){if(r){if(!s.mounted||!u.current)return;n.current=!1,u.current.focus();return}!a.mounted||!c.current||(n.current=!1,c.current.focus())}},[r,a.mounted,s.mounted]);const x=[i.default["image-preview"],r?i.default["image-preview--collapsed"]:"",m==="4:3"?i.default["image-preview--ratio-4-3"]:"",m==="1:1"?i.default["image-preview--ratio-1-1"]:"",h].filter(Boolean).join(" ");return e.jsx("div",{className:x,children:e.jsxs("div",{className:i.default["image-preview__stage"],children:[s.mounted&&e.jsx("button",{ref:u,type:"button",className:[i.default["image-preview__collapsed-trigger"],s.visible?i.default["image-preview__collapsed-trigger--visible"]:""].filter(Boolean).join(" "),onClick:o,onKeyDown:g,"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(t.default,{size:"12",glyph:e.jsx(q,{})})}),"Show Image preview"]})}),a.mounted&&e.jsxs("div",{className:[i.default["image-preview__frame"],a.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:_,alt:j,className:i.default["image-preview__img"]})}),o!=null&&e.jsx("button",{ref:c,type:"button",className:i.default["image-preview__collapse-btn"],onClick:o,onKeyDown:g,"aria-label":"Collapse image preview",children:e.jsx(t.default,{size:"16",glyph:e.jsx(k,{})})}),e.jsxs("div",{className:i.default["image-preview__actions"],children:[d!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":"Copy link",icon:e.jsx(t.default,{size:"16",glyph:e.jsx(b,{})}),onClick:d}),f!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":"Download",icon:e.jsx(t.default,{size:"16",glyph:e.jsx(y,{})}),onClick:f})]})]})]})})}exports.default=N;
 //# sourceMappingURL=ImagePreview.cjs.map

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

@@ -1 +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"}
+{"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 { useEffect, useRef, type KeyboardEvent } from 'react';\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. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\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  const showTriggerRef = useRef<HTMLButtonElement>(null);\n  const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n  const keyboardToggleRef = useRef(false);\n\n  const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      keyboardToggleRef.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (!keyboardToggleRef.current) return;\n\n    if (collapsed) {\n      if (!labelTransition.mounted || !showTriggerRef.current) return;\n      keyboardToggleRef.current = false;\n      showTriggerRef.current.focus();\n      return;\n    }\n\n    if (!frameTransition.mounted || !collapseTriggerRef.current) return;\n    keyboardToggleRef.current = false;\n    collapseTriggerRef.current.focus();\n  }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\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            ref={showTriggerRef}\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            onKeyDown={markKeyboardToggle}\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            {onToggleCollapse != null && (\n              <button\n                ref={collapseTriggerRef}\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                onKeyDown={markKeyboardToggle}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\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          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"qkBAqCA,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,EAChDS,EAAiBC,EAAAA,OAA0B,IAAI,EAC/CC,EAAqBD,EAAAA,OAA0B,IAAI,EACnDE,EAAoBF,EAAAA,OAAO,EAAK,EAEhCG,EAAsBC,GAA4C,EAClEA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCF,EAAkB,QAAU,GAEhC,EAEAG,EAAAA,UAAU,IAAM,CACd,GAAKH,EAAkB,QAEvB,IAAIZ,EAAW,CACb,GAAI,CAACQ,EAAgB,SAAW,CAACC,EAAe,QAAS,OACzDG,EAAkB,QAAU,GAC5BH,EAAe,QAAQ,MAAA,EACvB,MACF,CAEI,CAACH,EAAgB,SAAW,CAACK,EAAmB,UACpDC,EAAkB,QAAU,GAC5BD,EAAmB,QAAQ,MAAA,GAC7B,EAAG,CAACX,EAAWM,EAAgB,QAASE,EAAgB,OAAO,CAAC,EAEhE,MAAMQ,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBjB,EAAYiB,EAAAA,QAAO,0BAA0B,EAAI,GACjDb,IAAgB,MAAQa,UAAO,0BAA0B,EAAI,GAC7Db,IAAgB,MAAQa,UAAO,0BAA0B,EAAI,GAC7DZ,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEa,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,sBAAsB,EAC1C,SAAA,CAAAT,EAAgB,SACfU,EAAAA,IAAC,SAAA,CACC,IAAKT,EACL,KAAK,SACL,UAAW,CACTQ,EAAAA,QAAO,kCAAkC,EACzCT,EAAgB,QACZS,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAShB,EACT,UAAWY,EACX,aAAW,qBAEX,SAAAM,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,EAIHf,EAAgB,SACfa,EAAAA,KAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,sBAAsB,EAC7BX,EAAgB,QACZW,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,IAAApB,EAAU,IAAAC,EAAU,UAAWkB,EAAAA,QAAO,oBAAoB,EAAG,EACpE,EAEChB,GAAoB,MACnBiB,EAAAA,IAAC,SAAA,CACC,IAAKP,EACL,KAAK,SACL,UAAWM,EAAAA,QAAO,6BAA6B,EAC/C,QAAShB,EACT,UAAWY,EACX,aAAW,yBAEX,eAACO,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACI,IAAa,CAAA,CAAI,CAAA,CAAA,EAI7CH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAf,GAAc,MACbgB,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,YACX,WAAOH,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACM,IAAgB,EAAI,EAClD,QAAStB,CAAA,CAAA,EAGZC,GAAc,MACbe,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,WACX,WAAOH,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACO,IAAoB,EAAI,EACtD,QAAStB,CAAA,CAAA,CACX,CAAA,CAEJ,CAAA,CAAA,CAAA,CACF,CAAA,CAEJ,CAAA,CACF,CAEJ"}

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

@@ -20,7 +20,8 @@ export interface ImagePreviewProps {
 /**
  * Image Preview displays image attachments, markdown images, and inline image links inside
  * the message stream. It frames the image, shows hover actions for copy and download, and
- * lets the user collapse the preview when it's in the way.
+ * lets the user collapse the preview when it's in the way. Keyboard activation
+ * moves focus to the paired expand/collapse control; pointer activation does not.
  */
 export default function ImagePreview({ src, alt, collapsed, onToggleCollapse, onCopyLink, onDownload, aspectRatio, className, }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImagePreview.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAUA,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;;;;;GAKG;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,2CA0HnB"}

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

@@ -1,100 +1,118 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import r from "../icon/Icon.js";
-import p from "../icon-button/IconButton.js";
-import { usePopoverTransition as g } from "../../hooks/use-popover-transition.js";
-import __h from "@mattermost/compass-icons/components/link-variant.js";const h=__h&&__h.default?__h.default:__h;
-import __f from "@mattermost/compass-icons/components/download-outline.js";const f=__f&&__f.default?__f.default:__f;
-import __u from "@mattermost/compass-icons/components/menu-down.js";const u=__u&&__u.default?__u.default:__u;
-import __b from "@mattermost/compass-icons/components/menu-right.js";const b=__b&&__b.default?__b.default:__b;
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import t from "../icon/Icon.js";
+import w from "../icon-button/IconButton.js";
+import { usePopoverTransition as _ } from "../../hooks/use-popover-transition.js";
+import __k from "@mattermost/compass-icons/components/link-variant.js";const k=__k&&__k.default?__k.default:__k;
+import __I from "@mattermost/compass-icons/components/download-outline.js";const I=__I&&__I.default?__I.default:__I;
+import __z from "@mattermost/compass-icons/components/menu-down.js";const z=__z&&__z.default?__z.default:__z;
+import __j from "@mattermost/compass-icons/components/menu-right.js";const j=__j&&__j.default?__j.default:__j;
+import { useRef as p, useEffect as T } from "react";
 import i from "./ImagePreview.module.scss.js";
-function D({
-  src: v,
-  alt: d = "",
-  collapsed: l = !1,
-  onToggleCollapse: o,
-  onCopyLink: n,
-  onDownload: m,
-  aspectRatio: s = "16:9",
-  className: w = ""
+function O({
+  src: h,
+  alt: b = "",
+  collapsed: r = !1,
+  onToggleCollapse: m,
+  onCopyLink: u,
+  onDownload: f,
+  aspectRatio: g = "16:9",
+  className: y = ""
 }) {
-  const t = g(!l), c = g(l), _ = [
+  const a = _(!r), n = _(r), s = p(null), c = p(null), o = p(!1), d = (v) => {
+    (v.key === "Enter" || v.key === " ") && (o.current = !0);
+  };
+  T(() => {
+    if (o.current) {
+      if (r) {
+        if (!n.mounted || !s.current) return;
+        o.current = !1, s.current.focus();
+        return;
+      }
+      !a.mounted || !c.current || (o.current = !1, c.current.focus());
+    }
+  }, [r, a.mounted, n.mounted]);
+  const N = [
     i["image-preview"],
-    l ? i["image-preview--collapsed"] : "",
-    s === "4:3" ? i["image-preview--ratio-4-3"] : "",
-    s === "1:1" ? i["image-preview--ratio-1-1"] : "",
-    w
+    r ? i["image-preview--collapsed"] : "",
+    g === "4:3" ? i["image-preview--ratio-4-3"] : "",
+    g === "1:1" ? i["image-preview--ratio-1-1"] : "",
+    y
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("div", { className: _, children: /* @__PURE__ */ a("div", { className: i["image-preview__stage"], children: [
-    c.mounted && /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ l("div", { className: i["image-preview__stage"], children: [
+    n.mounted && /* @__PURE__ */ e(
       "button",
       {
+        ref: s,
         type: "button",
         className: [
           i["image-preview__collapsed-trigger"],
-          c.visible ? i["image-preview__collapsed-trigger--visible"] : ""
+          n.visible ? i["image-preview__collapsed-trigger--visible"] : ""
         ].filter(Boolean).join(" "),
-        onClick: o,
+        onClick: m,
+        onKeyDown: d,
         "aria-label": "Show image preview",
-        children: /* @__PURE__ */ a("span", { className: i["image-preview__show-label"], children: [
+        children: /* @__PURE__ */ l("span", { className: i["image-preview__show-label"], children: [
           /* @__PURE__ */ e(
             "span",
             {
               className: i["image-preview__show-icon"],
               "aria-hidden": "true",
-              children: /* @__PURE__ */ e(r, { size: "12", glyph: /* @__PURE__ */ e(b, {}) })
+              children: /* @__PURE__ */ e(t, { size: "12", glyph: /* @__PURE__ */ e(j, {}) })
             }
           ),
           "Show Image preview"
         ] })
       }
     ),
-    t.mounted && /* @__PURE__ */ a(
+    a.mounted && /* @__PURE__ */ l(
       "div",
       {
         className: [
           i["image-preview__frame"],
-          t.visible ? i["image-preview__frame--visible"] : ""
+          a.visible ? i["image-preview__frame--visible"] : ""
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ e("div", { className: i["image-preview__media"], children: /* @__PURE__ */ e("img", { src: v, alt: d, className: i["image-preview__img"] }) }),
-          /* @__PURE__ */ a("div", { className: i["image-preview__actions"], children: [
-            n != null && /* @__PURE__ */ e(
-              p,
+          /* @__PURE__ */ e("div", { className: i["image-preview__media"], children: /* @__PURE__ */ e("img", { src: h, alt: b, className: i["image-preview__img"] }) }),
+          m != null && /* @__PURE__ */ e(
+            "button",
+            {
+              ref: c,
+              type: "button",
+              className: i["image-preview__collapse-btn"],
+              onClick: m,
+              onKeyDown: d,
+              "aria-label": "Collapse image preview",
+              children: /* @__PURE__ */ e(t, { size: "16", glyph: /* @__PURE__ */ e(z, {}) })
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: i["image-preview__actions"], children: [
+            u != null && /* @__PURE__ */ e(
+              w,
               {
                 size: "small",
                 padding: "compact",
                 "aria-label": "Copy link",
-                icon: /* @__PURE__ */ e(r, { size: "16", glyph: /* @__PURE__ */ e(h, {}) }),
-                onClick: n
+                icon: /* @__PURE__ */ e(t, { size: "16", glyph: /* @__PURE__ */ e(k, {}) }),
+                onClick: u
               }
             ),
-            m != null && /* @__PURE__ */ e(
-              p,
+            f != null && /* @__PURE__ */ e(
+              w,
               {
                 size: "small",
                 padding: "compact",
                 "aria-label": "Download",
-                icon: /* @__PURE__ */ e(r, { size: "16", glyph: /* @__PURE__ */ e(f, {}) }),
-                onClick: m
+                icon: /* @__PURE__ */ e(t, { size: "16", glyph: /* @__PURE__ */ e(I, {}) }),
+                onClick: f
               }
             )
-          ] }),
-          o != null && /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              className: i["image-preview__collapse-btn"],
-              onClick: o,
-              "aria-label": "Collapse image preview",
-              children: /* @__PURE__ */ e(r, { size: "16", glyph: /* @__PURE__ */ e(u, {}) })
-            }
-          )
+          ] })
         ]
       }
     )
   ] }) });
 }
 export {
-  D as default
+  O as default
 };
 //# sourceMappingURL=ImagePreview.js.map