@mattermost/compass-ui 0.1.0-alpha.7 → 0.1.0-alpha.8

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  'medium-compact': '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  'medium-compact': '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","e","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Reduces vertical and horizontal padding. */\n  compact?: boolean;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  compact = false,\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    compact && styles['chip--compact'],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","compact","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/chip/Chip.module.css

@@ -1 +1 @@
-._chip_cbmf6_2{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s);border:1px solid transparent;background-color:rgba(var(--center-channel-color-rgb),.08);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:visible;cursor:default;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition)}._chip_cbmf6_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_cbmf6_2:focus-visible{outline-color:var(--focus-ring-color)}._chip_cbmf6_2:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_cbmf6_29{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_cbmf6_35,._chip__avatar-slot_cbmf6_41{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_cbmf6_47{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-full);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_cbmf6_47:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip--colored_cbmf6_63:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_cbmf6_71{border-color:var(--error-text, var(--color-danger))}._chip--size-small_cbmf6_74{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_cbmf6_74:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxs)}._chip--size-small_cbmf6_74 ._chip__label_cbmf6_29{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_cbmf6_74 ._chip__remove_cbmf6_47{padding:1px}._chip--size-medium_cbmf6_89{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_cbmf6_89:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxs)}._chip--size-medium_cbmf6_89 ._chip__label_cbmf6_29{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_cbmf6_89 ._chip__remove_cbmf6_47{padding:2px}._chip--size-medium-compact_cbmf6_103{gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--size-medium-compact_cbmf6_103:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxxs)}._chip--size-medium-compact_cbmf6_103 ._chip__label_cbmf6_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-medium-compact_cbmf6_103 ._chip__remove_cbmf6_47{padding:2px}._chip--size-large_cbmf6_117{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_cbmf6_117:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-s)}._chip--size-large_cbmf6_117 ._chip__label_cbmf6_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_cbmf6_117 ._chip__remove_cbmf6_47{padding:2px}
+._chip_u1uu3_2{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s);border:1px solid transparent;background-color:rgba(var(--center-channel-color-rgb),.08);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:visible;cursor:default;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition)}._chip_u1uu3_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_u1uu3_2:focus-visible{outline-color:var(--focus-ring-color)}._chip_u1uu3_2:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_u1uu3_29{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_u1uu3_35,._chip__avatar-slot_u1uu3_41{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_u1uu3_47{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-full);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_u1uu3_47:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip--colored_u1uu3_63:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_u1uu3_71{border-color:var(--error-text, var(--color-danger))}._chip--size-small_u1uu3_74{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_u1uu3_74:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}._chip--size-small_u1uu3_74 ._chip__label_u1uu3_29{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_u1uu3_74 ._chip__remove_u1uu3_47{padding:1px}._chip--size-medium_u1uu3_89{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_u1uu3_89:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}._chip--size-medium_u1uu3_89 ._chip__label_u1uu3_29{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_u1uu3_89 ._chip__remove_u1uu3_47{padding:2px}._chip--size-large_u1uu3_103{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_u1uu3_103:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-s)}._chip--size-large_u1uu3_103 ._chip__label_u1uu3_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_u1uu3_103 ._chip__remove_u1uu3_47{padding:2px}._chip--compact_u1uu3_117{padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--compact_u1uu3_117:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxxs)}._chip--size-large_u1uu3_103._chip--compact_u1uu3_117{padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-large_u1uu3_103._chip--compact_u1uu3_117:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}

package/dist/components/chip/Chip.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.module.css');const _="_chip_cbmf6_2",c="_chip__label_cbmf6_29",i="_chip__remove_cbmf6_47",e={chip:_,chip__label:c,"chip__icon-slot":"_chip__icon-slot_cbmf6_35","chip__avatar-slot":"_chip__avatar-slot_cbmf6_41",chip__remove:i,"chip--colored":"_chip--colored_cbmf6_63","chip--error":"_chip--error_cbmf6_71","chip--size-small":"_chip--size-small_cbmf6_74","chip--size-medium":"_chip--size-medium_cbmf6_89","chip--size-medium-compact":"_chip--size-medium-compact_cbmf6_103","chip--size-large":"_chip--size-large_cbmf6_117"};exports.chip=_;exports.chip__label=c;exports.chip__remove=i;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.module.css');const _="_chip_u1uu3_2",c="_chip__label_u1uu3_29",i="_chip__remove_u1uu3_47",u={chip:_,chip__label:c,"chip__icon-slot":"_chip__icon-slot_u1uu3_35","chip__avatar-slot":"_chip__avatar-slot_u1uu3_41",chip__remove:i,"chip--colored":"_chip--colored_u1uu3_63","chip--error":"_chip--error_u1uu3_71","chip--size-small":"_chip--size-small_u1uu3_74","chip--size-medium":"_chip--size-medium_u1uu3_89","chip--size-large":"_chip--size-large_u1uu3_103","chip--compact":"_chip--compact_u1uu3_117"};exports.chip=_;exports.chip__label=c;exports.chip__remove=i;exports.default=u;
 //# sourceMappingURL=Chip.module.scss.cjs.map

package/dist/components/chip/Chip.module.scss.js

@@ -1,20 +1,20 @@
-import './Chip.module.css';const _ = "_chip_cbmf6_2", c = "_chip__label_cbmf6_29", i = "_chip__remove_cbmf6_47", e = {
+import './Chip.module.css';const _ = "_chip_u1uu3_2", c = "_chip__label_u1uu3_29", u = "_chip__remove_u1uu3_47", i = {
   chip: _,
   chip__label: c,
-  "chip__icon-slot": "_chip__icon-slot_cbmf6_35",
-  "chip__avatar-slot": "_chip__avatar-slot_cbmf6_41",
-  chip__remove: i,
-  "chip--colored": "_chip--colored_cbmf6_63",
-  "chip--error": "_chip--error_cbmf6_71",
-  "chip--size-small": "_chip--size-small_cbmf6_74",
-  "chip--size-medium": "_chip--size-medium_cbmf6_89",
-  "chip--size-medium-compact": "_chip--size-medium-compact_cbmf6_103",
-  "chip--size-large": "_chip--size-large_cbmf6_117"
+  "chip__icon-slot": "_chip__icon-slot_u1uu3_35",
+  "chip__avatar-slot": "_chip__avatar-slot_u1uu3_41",
+  chip__remove: u,
+  "chip--colored": "_chip--colored_u1uu3_63",
+  "chip--error": "_chip--error_u1uu3_71",
+  "chip--size-small": "_chip--size-small_u1uu3_74",
+  "chip--size-medium": "_chip--size-medium_u1uu3_89",
+  "chip--size-large": "_chip--size-large_u1uu3_103",
+  "chip--compact": "_chip--compact_u1uu3_117"
 };
 export {
   _ as chip,
   c as chip__label,
-  i as chip__remove,
-  e as default
+  u as chip__remove,
+  i as default
 };
 //# sourceMappingURL=Chip.module.scss.js.map

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

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

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. 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"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\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/** 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  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          : icon}\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"],"mappings":"mQA2CaA,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,EAC5DL,EACHO,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.d.ts

@@ -14,6 +14,8 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     destructive?: boolean;
     /** Icon to show. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size="16" />`. */
     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. */
@@ -35,5 +37,5 @@ export declare const ICON_BUTTON_ICON_SIZES: Record<IconButtonSize, '12' | '16'
  * 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, padding, rounded, size, style, toggled, unreadBadge, disabled, type, 'aria-label': ariaLabel, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -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,+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"}
+{"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;AAK7D,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,+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,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,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

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

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. 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;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\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. Size the glyph via SVG_SIZE_MAP: e.g. `<Icon glyph={<GlobeIcon size={SVG_SIZE_MAP['16']} />} size=\"16\" />`. */\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/** 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  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          : icon}\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"],"mappings":";;;;AA2CO,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,IAC5DL;AAAA,UACHO,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/spinner/Spinner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),t=require("./Spinner.module.scss.cjs");function d({size:e=16,inverted:n=!1,className:r="","aria-label":a="Loading",style:i,...s}){const o=Math.max(1,Math.min(3,Math.round(e*.1))),l=[t.default.spinner,n?t.default["spinner--inverted"]:"",r].filter(Boolean).join(" ");return u.jsx("span",{className:l,role:"status","aria-label":a,style:{width:`${e}px`,height:`${e}px`,"--spinner-stroke-width":`${o}px`,...i},...s})}exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),t=require("./Spinner.module.scss.cjs");function p({size:n="16",inverted:r=!1,className:s="","aria-label":i="Loading",style:a,...o}){const e=Number(n),l=Math.max(1,Math.min(3,Math.round(e*.1))),u=[t.default.spinner,r?t.default["spinner--inverted"]:"",s].filter(Boolean).join(" ");return d.jsx("span",{className:u,role:"status","aria-label":i,style:{width:`${e}px`,height:`${e}px`,"--spinner-stroke-width":`${l}px`,...a},...o})}exports.default=p;
 //# sourceMappingURL=Spinner.cjs.map

package/dist/components/spinner/Spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = 16,\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(size * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","strokeWidth","rootClass","styles","jsx"],"mappings":"wLAkBA,SAAwBA,EAAQ,CAC9B,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,aAAcC,EAAY,UAC1B,MAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAc,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAMN,EAAO,EAAG,CAAC,CAAC,EAE7DO,EAAY,CAChBC,EAAAA,QAAO,QACPP,EAAWO,EAAAA,QAAO,mBAAmB,EAAI,GACzCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,OAAA,CACC,UAAWF,EACX,KAAK,SACL,aAAYJ,EACZ,MAAO,CACL,MAAO,GAAGH,CAAI,KACd,OAAQ,GAAGA,CAAI,KACd,yBAAqC,GAAGM,CAAW,KACpD,GAAGF,CAAA,EAEJ,GAAGC,CAAA,CAAA,CAGV"}
+{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = '16',\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const sizePx = Number(size);\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(sizePx * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${sizePx}px`,\n        height: `${sizePx}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","sizePx","strokeWidth","rootClass","styles","jsx"],"mappings":"wLAkBA,SAAwBA,EAAQ,CAC9B,KAAAC,EAAO,KACP,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,aAAcC,EAAY,UAC1B,MAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAS,OAAON,CAAI,EACpBO,EAAc,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAMD,EAAS,EAAG,CAAC,CAAC,EAE/DE,EAAY,CAChBC,EAAAA,QAAO,QACPR,EAAWQ,EAAAA,QAAO,mBAAmB,EAAI,GACzCP,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,IAAC,OAAA,CACC,UAAWF,EACX,KAAK,SACL,aAAYL,EACZ,MAAO,CACL,MAAO,GAAGG,CAAM,KAChB,OAAQ,GAAGA,CAAM,KAChB,yBAAqC,GAAGC,CAAW,KACpD,GAAGH,CAAA,EAEJ,GAAGC,CAAA,CAAA,CAGV"}

package/dist/components/spinner/Spinner.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;
+export type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';
 export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'> {
     size?: SpinnerSize;
     inverted?: boolean;

package/dist/components/spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,eAAe,CAAC,EAC/B,MAAM,CACP;IACC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAS,EACT,QAAgB,EAChB,SAAc,EACd,YAAY,EAAE,SAAqB,EACnC,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CAyBd"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,eAAe,CAAC,EAC/B,MAAM,CACP;IACC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAW,EACX,QAAgB,EAChB,SAAc,EACd,YAAY,EAAE,SAAqB,EACnC,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CA0Bd"}

package/dist/components/spinner/Spinner.js

@@ -1,35 +1,35 @@
-import { jsx as p } from "react/jsx-runtime";
-import a from "./Spinner.module.scss.js";
-function m({
-  size: t = 16,
+import { jsx as h } from "react/jsx-runtime";
+import e from "./Spinner.module.scss.js";
+function x({
+  size: s = "16",
   inverted: n = !1,
   className: r = "",
-  "aria-label": e = "Loading",
-  style: o,
-  ...s
+  "aria-label": a = "Loading",
+  style: i,
+  ...o
 }) {
-  const i = Math.max(1, Math.min(3, Math.round(t * 0.1))), l = [
-    a.spinner,
-    n ? a["spinner--inverted"] : "",
+  const t = Number(s), l = Math.max(1, Math.min(3, Math.round(t * 0.1))), p = [
+    e.spinner,
+    n ? e["spinner--inverted"] : "",
     r
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "span",
     {
-      className: l,
+      className: p,
       role: "status",
-      "aria-label": e,
+      "aria-label": a,
       style: {
         width: `${t}px`,
         height: `${t}px`,
-        "--spinner-stroke-width": `${i}px`,
-        ...o
+        "--spinner-stroke-width": `${l}px`,
+        ...i
       },
-      ...s
+      ...o
     }
   );
 }
 export {
-  m as default
+  x as default
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/components/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = 16,\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(size * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","strokeWidth","rootClass","styles","jsx"],"mappings":";;AAkBA,SAAwBA,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAMN,IAAO,GAAG,CAAC,CAAC,GAE7DO,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPP,IAAWO,EAAO,mBAAmB,IAAI;AAAA,IACzCN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAYJ;AAAA,MACZ,OAAO;AAAA,QACL,OAAO,GAAGH,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACd,0BAAqC,GAAGM,CAAW;AAAA,QACpD,GAAGF;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = '16',\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const sizePx = Number(size);\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(sizePx * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${sizePx}px`,\n        height: `${sizePx}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","sizePx","strokeWidth","rootClass","styles","jsx"],"mappings":";;AAkBA,SAAwBA,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAS,OAAON,CAAI,GACpBO,IAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAMD,IAAS,GAAG,CAAC,CAAC,GAE/DE,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPR,IAAWQ,EAAO,mBAAmB,IAAI;AAAA,IACzCP;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAYL;AAAA,MACZ,OAAO;AAAA,QACL,OAAO,GAAGG,CAAM;AAAA,QAChB,QAAQ,GAAGA,CAAM;AAAA,QAChB,0BAAqC,GAAGC,CAAW;AAAA,QACpD,GAAGH;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/index.css

@@ -12,7 +12,7 @@
 
 ._attachment-card_ffd4i_2{display:flex;flex-direction:column;width:320px;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-1);overflow:hidden;transition:box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._attachment-card_ffd4i_2:hover,._attachment-card_ffd4i_2:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);overflow:visible}._attachment-card_ffd4i_2:hover{cursor:pointer}._attachment-card_ffd4i_2:hover ._attachment-card__inner_ffd4i_21,._attachment-card_ffd4i_2:focus-within ._attachment-card__inner_ffd4i_21{overflow:visible}._attachment-card__container_ffd4i_24{display:flex;flex-direction:column;padding:var(--spacing-xxs);width:100%}._attachment-card__inner_ffd4i_21{display:flex;align-items:stretch;overflow:hidden;border-radius:var(--radius-s);width:100%}._attachment-card__left_ffd4i_37{display:flex;flex:1 0 0;gap:var(--spacing-m);align-items:center;min-width:0;padding:var(--spacing-xxs)}._attachment-card__open_ffd4i_45{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;text-align:left;align-self:stretch;border-radius:var(--radius-s);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._attachment-card__open_ffd4i_45:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._attachment-card__icon_ffd4i_64{display:flex;align-items:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._attachment-card__thumbnail_ffd4i_70{width:var(--icon-size-40);height:var(--icon-size-40);border-radius:var(--radius-s);border:1px solid rgba(var(--center-channel-color-rgb),.04);object-fit:cover;flex-shrink:0;display:block}._attachment-card__text_ffd4i_79{display:flex;flex-direction:column;flex:1 0 0;min-width:0;overflow:hidden}._attachment-card__filename_ffd4i_86{display:block;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;flex-shrink:0;margin:0}._attachment-card__secondary-details_ffd4i_100{display:flex;align-items:flex-start;gap:var(--spacing-xxxs);width:100%;flex-shrink:0;overflow:hidden}._attachment-card__details_ffd4i_108{display:flex;align-items:flex-start;gap:var(--spacing-xxxs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;overflow:hidden;flex-shrink:0}._attachment-card__datetime_ffd4i_121{display:flex;gap:var(--spacing-xxxs);align-items:flex-start;flex-shrink:0;overflow:hidden}._attachment-card__datetime_ffd4i_121 span:last-child{overflow:hidden;text-overflow:ellipsis}._attachment-card__uploading-text_ffd4i_132{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.56);white-space:nowrap;flex-shrink:0}._attachment-card__right_ffd4i_141{display:flex;align-items:stretch;justify-content:flex-end;flex-shrink:0;align-self:stretch}._attachment-card__actions_ffd4i_148{display:flex;align-items:center;justify-content:flex-end;padding:var(--spacing-xs);gap:var(--spacing-xxxs);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._attachment-card_ffd4i_2:hover ._attachment-card__actions_ffd4i_148,._attachment-card_ffd4i_2:focus-within ._attachment-card__actions_ffd4i_148{opacity:1;pointer-events:auto}._attachment-card__progress-bar_ffd4i_162{height:4px;width:100%;background-color:rgba(var(--center-channel-color-rgb),.16);border-radius:0 0 var(--radius-xs) var(--radius-xs);flex-shrink:0}._attachment-card__progress-fill_ffd4i_169{height:100%;background-color:var(--button-bg);border-radius:var(--radius-xs)}._attachment-card--uploading_ffd4i_174{box-shadow:none}._attachment-card--uploading_ffd4i_174:hover,._attachment-card--uploading_ffd4i_174:focus-within{box-shadow:none}._attachment-card--uploading_ffd4i_174 ._attachment-card__container_ffd4i_24{padding-bottom:var(--spacing-xxxxs)}._attachment-card--uploading_ffd4i_174 ._attachment-card__actions_ffd4i_148,._attachment-card--uploaded_ffd4i_187 ._attachment-card__actions_ffd4i_148{opacity:1;pointer-events:auto}
 
-._button_fg9op_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);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),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._button_fg9op_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_fg9op_2:disabled{cursor:not-allowed}._button__label_fg9op_23{line-height:1}._button__icon-slot_fg9op_26{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_fg9op_32{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_fg9op_32 ._button__label_fg9op_23{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_fg9op_39{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_fg9op_39 ._button__label_fg9op_23{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_fg9op_46{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_fg9op_46 ._button__label_fg9op_23{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_fg9op_53{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_fg9op_53 ._button__label_fg9op_23{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_fg9op_60{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_fg9op_60:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_fg9op_60:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_fg9op_60:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_fg9op_74{--focus-ring-color: var(--link-color);background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_fg9op_74:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_fg9op_74:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_fg9op_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_fg9op_90{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_fg9op_90:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_fg9op_90:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_fg9op_90:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_fg9op_104{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_fg9op_104:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_fg9op_104:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_fg9op_104:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-link_fg9op_117{--focus-ring-color: var(--link-color);padding:0;background-color:transparent;color:var(--link-color)}._button--emphasis-link_fg9op_117:hover:not(:disabled) ._button__label_fg9op_23{text-decoration:underline}._button--emphasis-link_fg9op_117:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_fg9op_129{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_fg9op_129._button--emphasis-primary_fg9op_60{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_fg9op_129._button--emphasis-primary_fg9op_60:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_fg9op_129._button--emphasis-primary_fg9op_60:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_fg9op_129._button--emphasis-primary_fg9op_60:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_fg9op_129._button--emphasis-secondary_fg9op_74{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_fg9op_129._button--emphasis-secondary_fg9op_74:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_fg9op_129._button--emphasis-secondary_fg9op_74:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_fg9op_129._button--emphasis-secondary_fg9op_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_fg9op_129._button--emphasis-tertiary_fg9op_90{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_fg9op_129._button--emphasis-tertiary_fg9op_90:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_fg9op_129._button--emphasis-tertiary_fg9op_90:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_fg9op_129._button--emphasis-tertiary_fg9op_90:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_fg9op_129._button--emphasis-quaternary_fg9op_104{color:var(--error-text, var(--color-danger))}._button--destructive_fg9op_129._button--emphasis-quaternary_fg9op_104:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_fg9op_129._button--emphasis-quaternary_fg9op_104:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_fg9op_129._button--emphasis-quaternary_fg9op_104:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_fg9op_129._button--emphasis-link_fg9op_117{color:var(--error-text, var(--color-danger))}._button--destructive_fg9op_129._button--emphasis-link_fg9op_117:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_fg9op_192._button--emphasis-primary_fg9op_60{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_fg9op_192._button--emphasis-primary_fg9op_60:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_fg9op_192._button--emphasis-primary_fg9op_60:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_fg9op_192._button--emphasis-primary_fg9op_60:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_fg9op_192._button--emphasis-secondary_fg9op_74{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_fg9op_192._button--emphasis-secondary_fg9op_74:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_fg9op_192._button--emphasis-secondary_fg9op_74:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_fg9op_192._button--emphasis-secondary_fg9op_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_fg9op_192._button--emphasis-tertiary_fg9op_90{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_fg9op_192._button--emphasis-tertiary_fg9op_90:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_fg9op_192._button--emphasis-tertiary_fg9op_90:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_fg9op_192._button--emphasis-tertiary_fg9op_90:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_fg9op_192._button--emphasis-quaternary_fg9op_104{color:var(--sidebar-text)}._button--appearance-inverted_fg9op_192._button--emphasis-quaternary_fg9op_104:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_fg9op_192._button--emphasis-quaternary_fg9op_104:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_fg9op_192._button--emphasis-quaternary_fg9op_104:disabled{color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_fg9op_192._button--emphasis-link_fg9op_117{color:var(--sidebar-text)}._button--appearance-inverted_fg9op_192._button--emphasis-link_fg9op_117:disabled{color:rgba(var(--sidebar-text-rgb),.32)}
+._button_doayp_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._button_doayp_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_doayp_2:disabled{cursor:not-allowed}._button__label_doayp_24{line-height:1}._button__icon-slot_doayp_27{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_doayp_33{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_doayp_33 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_doayp_40{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_doayp_40 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_doayp_47{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_doayp_47 ._button__label_doayp_24{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_doayp_54{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_doayp_54 ._button__label_doayp_24{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_doayp_61{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_doayp_75{--focus-ring-color: var(--link-color);background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_doayp_105{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-link_doayp_118{--focus-ring-color: var(--link-color);padding:0;background-color:transparent;color:var(--link-color)}._button--emphasis-link_doayp_118:hover:not(:disabled) ._button__label_doayp_24{text-decoration:underline}._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-link_doayp_118{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118:disabled{color:rgba(var(--sidebar-text-rgb),.32)}
 
 ._card-button_1l92t_2{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-m);margin:0;padding:var(--spacing-m) var(--spacing-xl) var(--spacing-m) var(--spacing-m);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);background-color:var(--center-channel-bg);box-shadow:var(--elevation-1);cursor:pointer;text-align:left;color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._card-button_1l92t_2:hover:not(:disabled):not(._card-button--selected_1l92t_22){border-color:rgba(var(--center-channel-color-rgb),.24);box-shadow:var(--elevation-2)}._card-button_1l92t_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._card-button_1l92t_2:disabled{cursor:not-allowed;opacity:.48}._card-button--selected_1l92t_22{border-color:rgba(var(--button-bg-rgb),.32)}._card-button--selected_1l92t_22 ._card-button__icon_1l92t_37{background-color:rgba(var(--button-bg-rgb),.08);color:var(--button-bg)}._card-button--selected_1l92t_22 ._card-button__check_1l92t_41{visibility:visible}._card-button__icon_1l92t_37{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.56)}._card-button__text_1l92t_54{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}._card-button__title_1l92t_62{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color)}._card-button__description_1l92t_69{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._card-button__check_1l92t_41{flex-shrink:0;display:inline-flex;align-items:center;color:var(--button-bg);visibility:hidden}
 
@@ -28,7 +28,7 @@
 
 @keyframes _checkbox-icon-enter_1pc8o_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_1pc8o_10{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_1pc8o_21{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_1pc8o_21:focus-visible{outline:none}._checkbox__box_1pc8o_41{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover ._checkbox__box_1pc8o_41{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_1pc8o_21:focus-visible:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_1pc8o_21:disabled:checked~._checkbox__box_1pc8o_41,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_1pc8o_21:disabled:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:disabled~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox--invalid_1pc8o_84 ._checkbox__box_1pc8o_41{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41 ._checkbox__icon_1pc8o_66{color:var(--button-color)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:checked~._checkbox__box_1pc8o_41,._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__box_1pc8o_41{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:focus-visible:checked~._checkbox__box_1pc8o_41,._checkbox--invalid_1pc8o_84._checkbox--indeterminate_1pc8o_62 ._checkbox__input_1pc8o_21:focus-visible~._checkbox__box_1pc8o_41{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_1pc8o_10:has(._checkbox__input_1pc8o_21:not(:disabled)):hover._checkbox--invalid_1pc8o_84 ._checkbox__input_1pc8o_21:not(:checked)~._checkbox__box_1pc8o_41{border-color:var(--error-text)}._checkbox__icon_1pc8o_66{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_1pc8o_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_1pc8o_117{line-height:1}._checkbox--size-small_1pc8o_120 ._checkbox__input_1pc8o_21{width:var(--icon-size-12);height:var(--icon-size-12)}._checkbox--size-small_1pc8o_120 ._checkbox__box_1pc8o_41{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs)}._checkbox--size-small_1pc8o_120 ._checkbox__label_1pc8o_117{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_1pc8o_133 ._checkbox__input_1pc8o_21{width:var(--icon-size-16);height:var(--icon-size-16)}._checkbox--size-medium_1pc8o_133 ._checkbox__box_1pc8o_41{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs)}._checkbox--size-medium_1pc8o_133 ._checkbox__label_1pc8o_117{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_1pc8o_146 ._checkbox__input_1pc8o_21{width:var(--icon-size-20);height:var(--icon-size-20)}._checkbox--size-large_1pc8o_146 ._checkbox__box_1pc8o_41{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s)}._checkbox--size-large_1pc8o_146 ._checkbox__label_1pc8o_117{font-size:var(--font-size-200);line-height:var(--line-height-200)}
 
-._chip_cbmf6_2{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s);border:1px solid transparent;background-color:rgba(var(--center-channel-color-rgb),.08);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:visible;cursor:default;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition)}._chip_cbmf6_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_cbmf6_2:focus-visible{outline-color:var(--focus-ring-color)}._chip_cbmf6_2:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_cbmf6_29{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_cbmf6_35,._chip__avatar-slot_cbmf6_41{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_cbmf6_47{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-full);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_cbmf6_47:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip--colored_cbmf6_63:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_cbmf6_71{border-color:var(--error-text, var(--color-danger))}._chip--size-small_cbmf6_74{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_cbmf6_74:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxs)}._chip--size-small_cbmf6_74 ._chip__label_cbmf6_29{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_cbmf6_74 ._chip__remove_cbmf6_47{padding:1px}._chip--size-medium_cbmf6_89{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_cbmf6_89:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxs)}._chip--size-medium_cbmf6_89 ._chip__label_cbmf6_29{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_cbmf6_89 ._chip__remove_cbmf6_47{padding:2px}._chip--size-medium-compact_cbmf6_103{gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--size-medium-compact_cbmf6_103:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-xxxs)}._chip--size-medium-compact_cbmf6_103 ._chip__label_cbmf6_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-medium-compact_cbmf6_103 ._chip__remove_cbmf6_47{padding:2px}._chip--size-large_cbmf6_117{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_cbmf6_117:has(._chip__remove_cbmf6_47){padding-right:var(--spacing-s)}._chip--size-large_cbmf6_117 ._chip__label_cbmf6_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_cbmf6_117 ._chip__remove_cbmf6_47{padding:2px}
+._chip_u1uu3_2{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s);border:1px solid transparent;background-color:rgba(var(--center-channel-color-rgb),.08);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);color:var(--center-channel-color);white-space:nowrap;overflow:visible;cursor:default;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition)}._chip_u1uu3_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_u1uu3_2:focus-visible{outline-color:var(--focus-ring-color)}._chip_u1uu3_2:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_u1uu3_29{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_u1uu3_35,._chip__avatar-slot_u1uu3_41{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_u1uu3_47{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-full);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_u1uu3_47:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip--colored_u1uu3_63:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_u1uu3_71{border-color:var(--error-text, var(--color-danger))}._chip--size-small_u1uu3_74{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_u1uu3_74:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}._chip--size-small_u1uu3_74 ._chip__label_u1uu3_29{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_u1uu3_74 ._chip__remove_u1uu3_47{padding:1px}._chip--size-medium_u1uu3_89{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_u1uu3_89:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}._chip--size-medium_u1uu3_89 ._chip__label_u1uu3_29{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_u1uu3_89 ._chip__remove_u1uu3_47{padding:2px}._chip--size-large_u1uu3_103{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_u1uu3_103:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-s)}._chip--size-large_u1uu3_103 ._chip__label_u1uu3_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_u1uu3_103 ._chip__remove_u1uu3_47{padding:2px}._chip--compact_u1uu3_117{padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--compact_u1uu3_117:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxxs)}._chip--size-large_u1uu3_103._chip--compact_u1uu3_117{padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-large_u1uu3_103._chip--compact_u1uu3_117:has(._chip__remove_u1uu3_47){padding-right:var(--spacing-xxs)}
 
 ._chip-group_p9ypv_2{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xxs);min-width:0}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/compass-ui",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.8",
   "description": "Compass design system UI components for Mattermost products",
   "repository": {
     "type": "git",