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

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

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

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

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

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

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

package/dist/components/icon/index.js

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),z=require("../icon/Icon.cjs"),y=require("../spinner/Spinner.cjs"),E=require("../../utils/string.cjs"),t=require("./IconButton.module.scss.cjs"),d={"x-small":"12",small:"16",medium:"20",large:"24"};function M({active:o=!1,className:r="",count:a,destructive:f=!1,icon:b,loading:n=!1,padding:v="default",rounded:C=!1,size:u="medium",style:i="default",toggled:s,unreadBadge:_=!1,disabled:m,type:p="button","aria-label":I,...N}){const j=t.default[`icon-button--size-${E.toKebab(u)}`],x=v==="compact"?t.default["icon-button--padding-compact"]:"",S=i==="inverted"?t.default["icon-button--style-inverted"]:"",h=f?t.default["icon-button--destructive"]:"",O=C?t.default["icon-button--rounded"]:"",g=s?t.default["icon-button--toggled"]:"",q=o?t.default["icon-button--active"]:"",l=a!==void 0,B=l?t.default["icon-button--has-count"]:"",T=[t.default["icon-button"],j,x,S,h,O,g,q,B,r].filter(Boolean).join(" "),c=d[u];return e.jsxs("button",{className:T,type:p,disabled:m||n,"aria-label":I,"aria-pressed":s===void 0?void 0:s,"data-active":o?"true":void 0,...N,children:[e.jsxs("span",{className:t.default["icon-button__icon-slot"],"aria-hidden":!0,children:[n?e.jsx(y.default,{size:c,inverted:i==="inverted"}):e.jsx(z.IconSlotContext.Provider,{value:{size:c},children:b}),_&&!n&&e.jsx("span",{className:t.default["icon-button__unread-badge"]})]}),l&&e.jsx("span",{className:t.default["icon-button__count"],children:a})]})}exports.ICON_BUTTON_ICON_SIZES=d;exports.default=M;
+//# 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 { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button. */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\n  loading = false,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  toggled,\n  unreadBadge = false,\n  disabled,\n  type = 'button',\n  'aria-label': ariaLabel,\n  ...rest\n}: 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  const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      aria-label={ariaLabel}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {loading\n          ? <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          : <IconSlotContext.Provider value={{ size: spinnerSize }}>{icon}</IconSlotContext.Provider>}\n        {unreadBadge && !loading && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":"iSA+CaA,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,GACV,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EACA,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,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,EAAmBlB,EACrBc,UAAO,0BAA0B,EACjC,GACEK,EAAef,EAAUU,UAAO,sBAAsB,EAAI,GAC1DM,EAAeb,EAAUO,UAAO,sBAAsB,EAAI,GAC1DO,EAAcxB,EAASiB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWvB,IAAU,OACrBwB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACAzB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL2B,EAAc9B,EAAuBU,CAAI,EAE/C,OACEqB,EAAAA,KAAC,SAAA,CACC,UAAWF,EACX,KAAAd,EACA,SAAUD,GAAYP,EACtB,aAAYS,EACZ,eAAcJ,IAAY,OAAY,OAAYA,EAClD,cAAaV,EAAS,OAAS,OAC9B,GAAGe,EAEJ,SAAA,CAAAc,OAAC,QAAK,UAAWZ,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAZ,QACIyB,EAAAA,QAAA,CAAQ,KAAMF,EAAa,SAAUnB,IAAU,WAAY,EAC5DsB,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMJ,CAAA,EAAgB,SAAAxB,EAAK,EACjEO,GAAe,CAACN,GACf0B,MAAC,QAAK,UAAWd,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCM,EAAAA,IAAC,OAAA,CAAK,UAAWd,EAAAA,QAAO,oBAAoB,EAAI,SAAAf,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D"}

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

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

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

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

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

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

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

@@ -0,0 +1,66 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { IconSlotContext as T } from "../icon/Icon.js";
+import E from "../spinner/Spinner.js";
+import { toKebab as K } from "../../utils/string.js";
+import t from "./IconButton.module.scss.js";
+const P = {
+  "x-small": "12",
+  small: "16",
+  medium: "20",
+  large: "24"
+};
+function w({
+  active: e = !1,
+  className: u = "",
+  count: a,
+  destructive: m = !1,
+  icon: b,
+  loading: n = !1,
+  padding: p = "default",
+  rounded: f = !1,
+  size: i = "medium",
+  style: c = "default",
+  toggled: s,
+  unreadBadge: v = !1,
+  disabled: C,
+  type: _ = "button",
+  "aria-label": h,
+  ...N
+}) {
+  const x = t[`icon-button--size-${K(i)}`], I = p === "compact" ? t["icon-button--padding-compact"] : "", S = c === "inverted" ? t["icon-button--style-inverted"] : "", z = m ? t["icon-button--destructive"] : "", j = f ? t["icon-button--rounded"] : "", B = s ? t["icon-button--toggled"] : "", O = e ? t["icon-button--active"] : "", l = a !== void 0, g = l ? t["icon-button--has-count"] : "", y = [
+    t["icon-button"],
+    x,
+    I,
+    S,
+    z,
+    j,
+    B,
+    O,
+    g,
+    u
+  ].filter(Boolean).join(" "), r = P[i];
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      className: y,
+      type: _,
+      disabled: C || n,
+      "aria-label": h,
+      "aria-pressed": s === void 0 ? void 0 : s,
+      "data-active": e ? "true" : void 0,
+      ...N,
+      children: [
+        /* @__PURE__ */ d("span", { className: t["icon-button__icon-slot"], "aria-hidden": !0, children: [
+          n ? /* @__PURE__ */ o(E, { size: r, inverted: c === "inverted" }) : /* @__PURE__ */ o(T.Provider, { value: { size: r }, children: b }),
+          v && !n && /* @__PURE__ */ o("span", { className: t["icon-button__unread-badge"] })
+        ] }),
+        l && /* @__PURE__ */ o("span", { className: t["icon-button__count"], children: a })
+      ]
+    }
+  );
+}
+export {
+  P as ICON_BUTTON_ICON_SIZES,
+  w 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 { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\n/** Figma \"Style\": Default (light context) | Inverted (dark context). */\nexport type IconButtonStyle = 'default' | 'inverted';\n\nexport type IconButtonPadding = 'default' | 'compact';\n\nexport interface IconButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'style'\n> {\n  /** When true, forces the subtler pressed/active visual (lighter than toggled). */\n  active?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Numeric count shown inline after the icon. Figma: Count. */\n  count?: number;\n  /** When true, uses destructive (danger) styling. Figma: Destructive. */\n  destructive?: boolean;\n  /** Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. */\n  icon: ReactNode;\n  /** When true, shows a Spinner in place of the icon and disables the button. */\n  loading?: boolean;\n  /** Padding variant. Figma: Padding = Default | Compact. */\n  padding?: IconButtonPadding;\n  /** When true, uses full border radius (pill). Figma: Rounded = On. */\n  rounded?: boolean;\n  /** Size variant. Figma: Size. Default: Medium. */\n  size?: IconButtonSize;\n  /** Default | Inverted. Figma: Style (for light vs dark backgrounds). */\n  style?: IconButtonStyle;\n  /** When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. */\n  toggled?: boolean;\n  /** When true, shows a small unread dot over the icon. Figma: Unread Badge. */\n  unreadBadge?: boolean;\n}\n\n/**\n * @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n */\nexport const ICON_BUTTON_ICON_SIZES: Record<\n  IconButtonSize,\n  '12' | '16' | '20' | '24'\n> = {\n  'x-small': '12',\n  small: '16',\n  medium: '20',\n  large: '24',\n};\n\n/**\n * Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nexport default function IconButton({\n  active = false,\n  className = '',\n  count,\n  destructive = false,\n  icon,\n  loading = false,\n  padding = 'default',\n  rounded = false,\n  size = 'medium',\n  style = 'default',\n  toggled,\n  unreadBadge = false,\n  disabled,\n  type = 'button',\n  'aria-label': ariaLabel,\n  ...rest\n}: 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  const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      aria-label={ariaLabel}\n      aria-pressed={toggled === undefined ? undefined : toggled}\n      data-active={active ? 'true' : undefined}\n      {...rest}\n    >\n      <span className={styles['icon-button__icon-slot']} aria-hidden>\n        {loading\n          ? <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n          : <IconSlotContext.Provider value={{ size: spinnerSize }}>{icon}</IconSlotContext.Provider>}\n        {unreadBadge && !loading && (\n          <span className={styles['icon-button__unread-badge']} />\n        )}\n      </span>\n      {hasCount && (\n        <span className={styles['icon-button__count']}>{count}</span>\n      )}\n    </button>\n  );\n}\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":";;;;;AA+CO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;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,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,IAAmBlB,IACrBc,EAAO,0BAA0B,IACjC,IACEK,IAAef,IAAUU,EAAO,sBAAsB,IAAI,IAC1DM,IAAeb,IAAUO,EAAO,sBAAsB,IAAI,IAC1DO,IAAcxB,IAASiB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWvB,MAAU,QACrBwB,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,IACAzB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL2B,IAAc9B,EAAuBU,CAAI;AAE/C,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAAd;AAAA,MACA,UAAUD,KAAYP;AAAA,MACtB,cAAYS;AAAA,MACZ,gBAAcJ,MAAY,SAAY,SAAYA;AAAA,MAClD,eAAaV,IAAS,SAAS;AAAA,MAC9B,GAAGe;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAc,EAAC,UAAK,WAAWZ,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,UAAAZ,sBACIyB,GAAA,EAAQ,MAAMF,GAAa,UAAUnB,MAAU,YAAY,IAC5D,gBAAAsB,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMJ,EAAA,GAAgB,UAAAxB,GAAK;AAAA,UACjEO,KAAe,CAACN,KACf,gBAAA0B,EAAC,UAAK,WAAWd,EAAO,2BAA2B,EAAA,CAAG;AAAA,QAAA,GAE1D;AAAA,QACCQ,KACC,gBAAAM,EAAC,QAAA,EAAK,WAAWd,EAAO,oBAAoB,GAAI,UAAAf,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9D;"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/illustration/Illustration.cjs

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

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

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

package/dist/components/illustration/Illustration.css

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

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

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

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

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

package/dist/components/illustration/Illustration.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/illustration/index.cjs

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

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

@@ -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 { 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.css

@@ -0,0 +1 @@
+._image-preview_nf3bn_2{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;min-width:0}._image-preview__stage_nf3bn_9{display:grid;align-items:start;container-type:inline-size;width:428px;max-width:100%}._image-preview__stage_nf3bn_9>*{grid-area:1/1}._image-preview__frame_nf3bn_19{position:relative;box-sizing:border-box;border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);overflow:hidden;width:100%;height:0;opacity:0;transform:scale(.98);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit),height var(--duration-quick) var(--ease-exit),border-color var(--duration-quick) var(--ease-exit),box-shadow var(--duration-quick) var(--ease-exit)}._image-preview__frame--visible_nf3bn_33{height:56.25cqw;opacity:1;transform:scale(1);pointer-events:auto;overflow:visible;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance),height var(--duration-quick) var(--ease-entrance),box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:not(._image-preview__frame--visible_nf3bn_33){border-color:transparent;box-shadow:none}._image-preview__frame_nf3bn_19:hover,._image-preview__frame_nf3bn_19:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._image-preview__media_nf3bn_50{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:calc(var(--radius-s) - 1px)}._image-preview--ratio-4-3_nf3bn_56 ._image-preview__stage_nf3bn_9{width:320px}._image-preview--ratio-4-3_nf3bn_56 ._image-preview__frame--visible_nf3bn_33{height:75cqw}._image-preview--ratio-1-1_nf3bn_62 ._image-preview__stage_nf3bn_9{width:240px}._image-preview--ratio-1-1_nf3bn_62 ._image-preview__frame--visible_nf3bn_33{height:100cqw}._image-preview__img_nf3bn_68{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}._image-preview__actions_nf3bn_77{position:absolute;top:var(--spacing-s);right:var(--spacing-s);display:flex;gap:0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);padding:var(--spacing-xxxxs);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:hover ._image-preview__actions_nf3bn_77,._image-preview__frame_nf3bn_19:focus-within ._image-preview__actions_nf3bn_77{opacity:1}._image-preview__collapse-btn_nf3bn_94{position:absolute;top:-4px;left:-4px;display:flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-full);box-shadow:var(--elevation-1);padding:var(--spacing-xxxs);cursor:pointer;color:var(--center-channel-color);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:hover ._image-preview__collapse-btn_nf3bn_94,._image-preview__frame_nf3bn_19:focus-within ._image-preview__collapse-btn_nf3bn_94{opacity:1}._image-preview--collapsed_nf3bn_114{min-height:0}._image-preview__collapsed-trigger_nf3bn_117{background:transparent;border:none;cursor:pointer;padding:0;opacity:0;transform:translateY(-2px);transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}._image-preview__collapsed-trigger--visible_nf3bn_126{opacity:1;transform:translateY(0);transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._image-preview__show-label_nf3bn_131{display:flex;align-items:center;gap:1px;padding-right:var(--spacing-s);border-radius:var(--radius-s);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;color:rgba(var(--center-channel-color-rgb),.75)}._image-preview__show-icon_nf3bn_142{display:inline-flex;align-items:center;width:var(--icon-size-12);font-size:var(--font-size-100);color:rgba(var(--center-channel-color-rgb),.75)}

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

@@ -0,0 +1,27 @@
+export type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';
+export interface ImagePreviewProps {
+    /** Image src URL. */
+    src: string;
+    /** Alt text. */
+    alt?: string;
+    /** Whether the preview is collapsed (shows toggle label only). */
+    collapsed?: boolean;
+    /** Callback when the collapse toggle is clicked. */
+    onToggleCollapse?: () => void;
+    /** Callback when the copy-link action is clicked. */
+    onCopyLink?: () => void;
+    /** Callback when the download action is clicked. */
+    onDownload?: () => void;
+    /** Aspect ratio of the image container. Default: 16:9 */
+    aspectRatio?: ImagePreviewAspectRatio;
+    /** Optional CSS class name. */
+    className?: string;
+}
+/**
+ * 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. 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

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

@@ -0,0 +1,118 @@
+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 O({
+  src: h,
+  alt: b = "",
+  collapsed: r = !1,
+  onToggleCollapse: m,
+  onCopyLink: u,
+  onDownload: f,
+  aspectRatio: g = "16:9",
+  className: y = ""
+}) {
+  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"],
+    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: 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"],
+          n.visible ? i["image-preview__collapsed-trigger--visible"] : ""
+        ].filter(Boolean).join(" "),
+        onClick: m,
+        onKeyDown: d,
+        "aria-label": "Show image preview",
+        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(t, { size: "12", glyph: /* @__PURE__ */ e(j, {}) })
+            }
+          ),
+          "Show Image preview"
+        ] })
+      }
+    ),
+    a.mounted && /* @__PURE__ */ l(
+      "div",
+      {
+        className: [
+          i["image-preview__frame"],
+          a.visible ? i["image-preview__frame--visible"] : ""
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__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(t, { size: "16", glyph: /* @__PURE__ */ e(k, {}) }),
+                onClick: u
+              }
+            ),
+            f != null && /* @__PURE__ */ e(
+              w,
+              {
+                size: "small",
+                padding: "compact",
+                "aria-label": "Download",
+                icon: /* @__PURE__ */ e(t, { size: "16", glyph: /* @__PURE__ */ e(I, {}) }),
+                onClick: f
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  O as default
+};
+//# sourceMappingURL=ImagePreview.js.map