@mattermost/compass-ui 0.1.0-alpha.27 → 0.1.0-alpha.28

package/dist/components/channel-sidebar-item/ChannelSidebarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelSidebarItem.js","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n  | 'public'\n  | 'private'\n  | 'group-message'\n  | 'direct-message'\n  | 'drafts'\n  | 'insights'\n  | 'threads'\n  | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n  className?: string;\n  /** Channel or user display name. Accepts translated nodes. */\n  name: ReactNode;\n  /**\n   * Text-only row (e.g. System Console navigation): no channel glyph or\n   * overflow menu; name aligns with channel sidebar label padding.\n   */\n  hideLeadingVisual?: boolean;\n  /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n  leadingVisual?: ChannelSidebarItemLeadingVisual;\n  /** Read/unread/mention state. Default: Read. */\n  status?: ChannelSidebarItemStatus;\n  /** Highlighted as the currently active item. */\n  active?: boolean;\n  /** Muted channel — reduces visual prominence. */\n  muted?: boolean;\n  /** Shows a call-in-progress indicator on the right. */\n  callActive?: boolean;\n  /** Shows the shared-channel icon after the name. */\n  sharedChannel?: boolean;\n  /** Mention count shown in the badge when status='mention'. */\n  mentionCount?: number;\n  /** Member count shown in the group icon when leadingVisual='group-message'. */\n  memberCount?: number;\n  /** Avatar image URL for leadingVisual='direct-message'. */\n  avatarSrc?: string;\n  /** Avatar alt text for leadingVisual='direct-message'. */\n  avatarAlt?: string;\n  /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n  showAvatarStatus?: boolean;\n  /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n  customStatusEmoji?: string;\n  onClick?: () => void;\n  /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"unread\". */\n  unreadLabel?: ReactNode;\n  /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n  menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n  leadingVisual,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus,\n}: {\n  leadingVisual: ChannelSidebarItemLeadingVisual;\n  memberCount: number | undefined;\n  avatarSrc: string | undefined;\n  showAvatarStatus: boolean | undefined;\n}) {\n  switch (leadingVisual) {\n    case 'private':\n      return <LockOutlineIcon size={16} />;\n    case 'group-message':\n      return (\n        <div className={styles['channel-sidebar-item__group-icon']}>\n          {memberCount ?? 2}\n        </div>\n      );\n    case 'direct-message':\n      return (\n        <UserAvatar\n          src={avatarSrc ?? ''}\n          alt=\"\"\n          size=\"20\"\n          status={!!showAvatarStatus}\n        />\n      );\n    case 'drafts':\n      return <SendOutlineIcon size={16} />;\n    case 'insights':\n      return <ChartLineIcon size={16} />;\n    case 'threads':\n      return <MessageTextOutlineIcon size={16} />;\n    case 'dial-pad':\n      return <DialpadIcon size={16} />;\n    case 'public':\n    default:\n      return <GlobeIcon size={16} />;\n  }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n  className,\n  name,\n  hideLeadingVisual = false,\n  leadingVisual = 'public',\n  status = 'read',\n  active = false,\n  muted = false,\n  callActive = false,\n  sharedChannel = false,\n  mentionCount,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus = false,\n  customStatusEmoji,\n  onClick,\n  onMenuClick,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n  const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n  const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n  const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n  const hasMentionBadge = effectiveStatus === 'mention';\n  const isChannelOrDM =\n    !hideLeadingVisual &&\n    ['public', 'private', 'group-message', 'direct-message'].includes(\n      leadingVisual,\n    );\n\n  const rootClass = [\n    styles['channel-sidebar-item'],\n    hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n    active ? styles['channel-sidebar-item--active'] : '',\n    muted ? styles['channel-sidebar-item--muted'] : '',\n    styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n    isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconContainerClass = [\n    styles['channel-sidebar-item__icon-container'],\n    isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const rightClass = styles['channel-sidebar-item__right'];\n\n  const statusHint =\n    effectiveStatus === 'mention'\n      ? formatMentionLabel(mentionCount ?? 1)\n      : effectiveStatus === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass}>\n      {active && (\n        <div className={styles['channel-sidebar-item__active-border']} />\n      )}\n      <button\n        type=\"button\"\n        className={styles['channel-sidebar-item__left']}\n        onClick={onClick}\n        aria-current={active ? true : undefined}\n      >\n        {!hideLeadingVisual && (\n          <div className={iconContainerClass} aria-hidden>\n            <LeadingVisualContent\n              leadingVisual={leadingVisual}\n              memberCount={memberCount}\n              avatarSrc={avatarSrc}\n              showAvatarStatus={showAvatarStatus}\n            />\n          </div>\n        )}\n        <div className={styles['channel-sidebar-item__content']}>\n          <span className={styles['channel-sidebar-item__name']}>{name}</span>\n          {statusHint && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {statusHint}\n            </span>\n          )}\n          {sharedChannel && (\n            <span\n              className={styles['channel-sidebar-item__shared-icon']}\n              aria-hidden\n            >\n              <CircleMultipleOutlineIcon size={12} />\n            </span>\n          )}\n          {isDM && customStatusEmoji && (\n            <span\n              className={styles['channel-sidebar-item__custom-status']}\n              aria-hidden\n            >\n              {customStatusEmoji}\n            </span>\n          )}\n        </div>\n      </button>\n      <div className={rightClass}>\n        {callActive && (\n          <div className={styles['channel-sidebar-item__call']} aria-hidden>\n            <PhoneInTalkIcon size={12} />\n          </div>\n        )}\n        {hasMentionBadge && (\n          <span\n            className={styles['channel-sidebar-item__mention-badge']}\n            aria-hidden\n          >\n            <MentionBadge\n              count={mentionCount ?? 1}\n              location=\"sidebar\"\n              size=\"medium\"\n            />\n          </span>\n        )}\n        {isChannelOrDM && (\n          <span className={styles['channel-sidebar-item__menu-button']}>\n            <IconButton\n              className={styles['channel-sidebar-item__menu-icon']}\n              size=\"x-small\"\n              style=\"inverted\"\n              icon={<Icon glyph={<DotsVerticalIcon />} />}\n              aria-label={menuLabel}\n              onClick={(e) => {\n                e.stopPropagation();\n                onMenuClick?.(e);\n              }}\n            />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","Icon","DotsVerticalIcon","e"],"mappings":"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"}
+{"version":3,"file":"ChannelSidebarItem.js","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon, { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { mergeClassNames, type BuiltInButtonProps } from '@/utils/props';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n  | 'public'\n  | 'private'\n  | 'group-message'\n  | 'direct-message'\n  | 'drafts'\n  | 'insights'\n  | 'threads'\n  | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n  className?: string;\n  /** Channel or user display name. Accepts translated nodes. */\n  name: ReactNode;\n  /**\n   * Text-only row (e.g. System Console navigation): no channel glyph or\n   * overflow menu; name aligns with channel sidebar label padding.\n   */\n  hideLeadingVisual?: boolean;\n  /**\n   * Leading visual. A built-in type string (`'public'`, `'private'`, …) keeps its\n   * glyph; any other node (not a string) replaces the icon, like `MenuItem`. Custom\n   * nodes render in the same 24px icon column, so the label stays aligned. For an\n   * icon use `<Icon glyph={<SomeIcon />} />` — the size (16) comes from context.\n   * A 16–24px element such as a 20px avatar is centered in the column.\n   * Default: Public. Ignored when `hideLeadingVisual`.\n   */\n  leadingVisual?: ChannelSidebarItemLeadingVisual | ReactNode;\n  /**\n   * Custom content for the trailing slot, after the name and before the mention\n   * badge / menu button (e.g. a responding indicator). Status-only: on rows with\n   * the overflow menu it fades out on hover / focus, like the mention badge, so\n   * don't put interactive content in it. `status` styling is independent of it.\n   * When omitted, nothing is rendered.\n   */\n  trailingVisual?: ReactNode;\n  /** Read/unread/mention state. Default: Read. */\n  status?: ChannelSidebarItemStatus;\n  /** Highlighted as the currently active item. */\n  active?: boolean;\n  /** Muted channel — reduces visual prominence. */\n  muted?: boolean;\n  /** Shows a call-in-progress indicator on the right. */\n  callActive?: boolean;\n  /** Shows the shared-channel icon after the name. */\n  sharedChannel?: boolean;\n  /** Mention count shown in the badge when status='mention'. */\n  mentionCount?: number;\n  /** Member count shown in the group icon when leadingVisual='group-message'. */\n  memberCount?: number;\n  /** Avatar image URL for leadingVisual='direct-message' (not used with a custom node). */\n  avatarSrc?: string;\n  /** Avatar alt text for leadingVisual='direct-message'. */\n  avatarAlt?: string;\n  /** Shows status badge on the avatar when leadingVisual='direct-message' (not used with a custom node). */\n  showAvatarStatus?: boolean;\n  /** Custom status emoji after the name for a direct message or a custom leading visual. A node can carry a tooltip trigger. */\n  customStatusEmoji?: ReactNode;\n  /**\n   * Visually hidden description of the custom status (for example \"🌴 Out of\n   * office\"), read with the row name. The emoji itself stays `aria-hidden`, so\n   * pass this whenever `customStatusEmoji` carries meaning. Accepts translated\n   * nodes.\n   */\n  customStatusLabel?: ReactNode;\n  onClick?: () => void;\n  /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"unread\". */\n  unreadLabel?: ReactNode;\n  /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n  menuLabel?: string;\n  /**\n   * Interactive controls (e.g. an `IconButton`) shown at the right edge, in the\n   * overflow menu's place: it replaces the built-in menu. Unlike\n   * `trailingVisual`, actions stay clickable. See `actionsReveal`.\n   */\n  actions?: ReactNode;\n  /**\n   * When `actions` show. `hover` (default): hidden until the row is hovered or\n   * has focus, like the built-in menu (the mention badge and `trailingVisual`\n   * give way). `always`: visible, slightly dimmed, at rest and at full\n   * strength on hover / focus; the badge and `trailingVisual` stay visible\n   * beside it.\n   */\n  actionsReveal?: 'hover' | 'always';\n  /** Keeps `actions` revealed, e.g. while a menu opened from them is open. */\n  actionsOpen?: boolean;\n  /** Hides the built-in overflow menu without adding `actions`. */\n  hideMenu?: boolean;\n  /**\n   * Turns the row into the parent of a collapsible group: shows a chevron\n   * toggle in the left gutter (revealed on hover / focus) and sets\n   * `aria-expanded` on it. The row itself stays a navigation control; the\n   * group's list and animation are up to the host. Omit for a normal row.\n   */\n  expanded?: boolean;\n  /** Called with the next state when the chevron toggle is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** `id` of the list the toggle controls (`aria-controls`). */\n  controlsId?: string;\n  /**\n   * Accessible name of the toggle. It stays the same in both states;\n   * `aria-expanded` carries the state. Default: \"Toggle\".\n   */\n  toggleLabel?: string;\n  /** Extra attributes for the chevron toggle button. */\n  toggleButtonProps?: BuiltInButtonProps;\n}\n\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction isBuiltInLeadingVisual(\n  value: unknown,\n): value is ChannelSidebarItemLeadingVisual | undefined {\n  // Strings (and omitted) keep today's built-in behavior, including the\n  // fallback to the public glyph for unknown strings.\n  return value === undefined || typeof value === 'string';\n}\n\nfunction LeadingVisualContent({\n  leadingVisual,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus,\n}: {\n  leadingVisual: ChannelSidebarItemLeadingVisual | undefined;\n  memberCount: number | undefined;\n  avatarSrc: string | undefined;\n  showAvatarStatus: boolean | undefined;\n}) {\n  switch (leadingVisual) {\n    case 'private':\n      return <LockOutlineIcon size={16} />;\n    case 'group-message':\n      return (\n        <div className={styles['channel-sidebar-item__group-icon']}>\n          {memberCount ?? 2}\n        </div>\n      );\n    case 'direct-message':\n      return (\n        <UserAvatar\n          src={avatarSrc ?? ''}\n          alt=\"\"\n          size=\"20\"\n          status={!!showAvatarStatus}\n        />\n      );\n    case 'drafts':\n      return <SendOutlineIcon size={16} />;\n    case 'insights':\n      return <ChartLineIcon size={16} />;\n    case 'threads':\n      return <MessageTextOutlineIcon size={16} />;\n    case 'dial-pad':\n      return <DialpadIcon size={16} />;\n    case 'public':\n    default:\n      return <GlobeIcon size={16} />;\n  }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n  className,\n  name,\n  hideLeadingVisual = false,\n  leadingVisual,\n  trailingVisual,\n  status = 'read',\n  active = false,\n  muted = false,\n  callActive = false,\n  sharedChannel = false,\n  mentionCount,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus = false,\n  customStatusEmoji,\n  customStatusLabel,\n  onClick,\n  onMenuClick,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Channel options',\n  actions,\n  actionsReveal = 'hover',\n  actionsOpen = false,\n  hideMenu = false,\n  expanded,\n  onExpandedChange,\n  controlsId,\n  toggleLabel = 'Toggle',\n  toggleButtonProps,\n}: ChannelSidebarItemProps) {\n  const isCustomVisual =\n    !hideLeadingVisual &&\n    leadingVisual !== null &&\n    !isBuiltInLeadingVisual(leadingVisual);\n  const builtInVisual: ChannelSidebarItemLeadingVisual = isBuiltInLeadingVisual(\n    leadingVisual,\n  )\n    ? (leadingVisual ?? 'public')\n    : 'public';\n  const isDM =\n    !hideLeadingVisual && builtInVisual === 'direct-message' && !isCustomVisual;\n  const isDrafts =\n    !hideLeadingVisual && builtInVisual === 'drafts' && !isCustomVisual;\n  const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n  const hasMentionBadge = effectiveStatus === 'mention';\n  const isChannelOrDM =\n    !hideLeadingVisual &&\n    (isCustomVisual ||\n      ['public', 'private', 'group-message', 'direct-message'].includes(\n        builtInVisual,\n      ));\n\n  const hasActions = actions != null && actions !== false;\n  const actionsAlways = hasActions && actionsReveal === 'always';\n  const showMenu = isChannelOrDM && !hideMenu && !hasActions;\n  // Trailing content gives way on hover only when something takes its place.\n  const revealsOnHover = showMenu || (hasActions && !actionsAlways);\n  const hasToggle = expanded !== undefined;\n\n  const rootClass = [\n    styles['channel-sidebar-item'],\n    hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n    active ? styles['channel-sidebar-item--active'] : '',\n    muted ? styles['channel-sidebar-item--muted'] : '',\n    styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n    isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n    actionsAlways ? styles['channel-sidebar-item--actions-always'] : '',\n    !revealsOnHover ? styles['channel-sidebar-item--no-hover-menu'] : '',\n    hasActions && actionsOpen && !actionsAlways\n      ? styles['channel-sidebar-item--actions-open']\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconContainerClass = [\n    styles['channel-sidebar-item__icon-container'],\n    isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n    isCustomVisual\n      ? styles['channel-sidebar-item__icon-container--custom']\n      : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const rightClass = styles['channel-sidebar-item__right'];\n\n  const statusHint =\n    effectiveStatus === 'mention'\n      ? formatMentionLabel(mentionCount ?? 1)\n      : effectiveStatus === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass}>\n      {active && (\n        <div className={styles['channel-sidebar-item__active-border']} />\n      )}\n      <button\n        type=\"button\"\n        className={styles['channel-sidebar-item__left']}\n        onClick={onClick}\n        aria-current={active ? true : undefined}\n      >\n        {!hideLeadingVisual && (\n          <div className={iconContainerClass} aria-hidden>\n            {isCustomVisual ? (\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual as ReactNode}\n              </IconSlotContext.Provider>\n            ) : (\n              <LeadingVisualContent\n                leadingVisual={builtInVisual}\n                memberCount={memberCount}\n                avatarSrc={avatarSrc}\n                showAvatarStatus={showAvatarStatus}\n              />\n            )}\n          </div>\n        )}\n        <div className={styles['channel-sidebar-item__content']}>\n          <span className={styles['channel-sidebar-item__name']}>{name}</span>\n          {statusHint && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {statusHint}\n            </span>\n          )}\n          {sharedChannel && (\n            <span\n              className={styles['channel-sidebar-item__shared-icon']}\n              aria-hidden\n            >\n              <Icon glyph={<CircleMultipleOutlineIcon />} size=\"12\" />\n            </span>\n          )}\n          {(isDM || isCustomVisual) && customStatusLabel && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {customStatusLabel}\n            </span>\n          )}\n          {(isDM || isCustomVisual) && customStatusEmoji && (\n            <span\n              className={styles['channel-sidebar-item__custom-status']}\n              aria-hidden\n            >\n              {customStatusEmoji}\n            </span>\n          )}\n        </div>\n      </button>\n      {hasToggle && (\n        <button\n          type=\"button\"\n          {...toggleButtonProps}\n          {...(controlsId ? { 'aria-controls': controlsId } : {})}\n          className={mergeClassNames(\n            styles['channel-sidebar-item__toggle'],\n            toggleButtonProps?.className,\n          )}\n          aria-expanded={expanded}\n          aria-label={toggleLabel}\n          onClick={(e) => {\n            toggleButtonProps?.onClick?.(e);\n            onExpandedChange?.(!expanded);\n          }}\n        >\n          <Icon\n            glyph={expanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n            size=\"12\"\n          />\n        </button>\n      )}\n      <div className={rightClass}>\n        {trailingVisual != null && trailingVisual !== false && (\n          <span\n            className={[\n              styles['channel-sidebar-item__trailing-visual'],\n              revealsOnHover\n                ? styles['channel-sidebar-item__trailing-visual--with-menu']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {trailingVisual}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        {callActive && (\n          <div className={styles['channel-sidebar-item__call']} aria-hidden>\n            <PhoneInTalkIcon size={12} />\n          </div>\n        )}\n        {hasMentionBadge && (\n          <span\n            className={styles['channel-sidebar-item__mention-badge']}\n            aria-hidden\n          >\n            <MentionBadge\n              count={mentionCount ?? 1}\n              location=\"sidebar\"\n              size=\"medium\"\n            />\n          </span>\n        )}\n        {hasActions && (\n          <span\n            className={mergeClassNames(\n              styles['channel-sidebar-item__actions'],\n              actionsAlways && styles['channel-sidebar-item__actions--always'],\n              actionsOpen && styles['channel-sidebar-item__actions--open'],\n            )}\n          >\n            {actions}\n          </span>\n        )}\n        {showMenu && (\n          <span className={styles['channel-sidebar-item__menu-button']}>\n            <IconButton\n              className={styles['channel-sidebar-item__menu-icon']}\n              size=\"x-small\"\n              style=\"inverted\"\n              icon={<Icon glyph={<DotsVerticalIcon />} />}\n              aria-label={menuLabel}\n              onClick={(e) => {\n                e.stopPropagation();\n                onMenuClick?.(e);\n              }}\n            />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatMentions","count","isBuiltInLeadingVisual","value","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","trailingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","customStatusLabel","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","actions","actionsReveal","actionsOpen","hideMenu","expanded","onExpandedChange","controlsId","toggleLabel","toggleButtonProps","isCustomVisual","builtInVisual","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","hasActions","actionsAlways","showMenu","revealsOnHover","hasToggle","rootClass","iconContainerClass","rightClass","statusHint","jsxs","IconSlotContext","Icon","CircleMultipleOutlineIcon","mergeClassNames","e","_a","ChevronDownIcon","ChevronRightIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon"],"mappings":"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"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelSidebarItem.css');const e={"channel-sidebar-item":"_channel-sidebar-item_m2jgi_2","channel-sidebar-item__menu-button":"_channel-sidebar-item__menu-button_m2jgi_10","channel-sidebar-item__mention-badge":"_channel-sidebar-item__mention-badge_m2jgi_20","channel-sidebar-item__menu-icon":"_channel-sidebar-item__menu-icon_m2jgi_23","channel-sidebar-item--active":"_channel-sidebar-item--active_m2jgi_37","channel-sidebar-item__active-border":"_channel-sidebar-item__active-border_m2jgi_40","channel-sidebar-item__left":"_channel-sidebar-item__left_m2jgi_47","channel-sidebar-item__icon-container":"_channel-sidebar-item__icon-container_m2jgi_70","channel-sidebar-item__icon-container--dm":"_channel-sidebar-item__icon-container--dm_m2jgi_78","channel-sidebar-item__group-icon":"_channel-sidebar-item__group-icon_m2jgi_83","channel-sidebar-item__content":"_channel-sidebar-item__content_m2jgi_99","channel-sidebar-item__name":"_channel-sidebar-item__name_m2jgi_107","channel-sidebar-item__status-hint":"_channel-sidebar-item__status-hint_m2jgi_120","channel-sidebar-item__shared-icon":"_channel-sidebar-item__shared-icon_m2jgi_131","channel-sidebar-item__custom-status":"_channel-sidebar-item__custom-status_m2jgi_139","channel-sidebar-item__right":"_channel-sidebar-item__right_m2jgi_147","channel-sidebar-item__call":"_channel-sidebar-item__call_m2jgi_156","channel-sidebar-item--text-only":"_channel-sidebar-item--text-only_m2jgi_166","channel-sidebar-item--status-unread":"_channel-sidebar-item--status-unread_m2jgi_178","channel-sidebar-item--status-mention":"_channel-sidebar-item--status-mention_m2jgi_178","channel-sidebar-item--drafts":"_channel-sidebar-item--drafts_m2jgi_185","channel-sidebar-item--muted":"_channel-sidebar-item--muted_m2jgi_201"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelSidebarItem.css');const e={"channel-sidebar-item":"_channel-sidebar-item_1w0n4_13","channel-sidebar-item__menu-button":"_channel-sidebar-item__menu-button_1w0n4_21","channel-sidebar-item__actions":"_channel-sidebar-item__actions_1w0n4_21","channel-sidebar-item__mention-badge":"_channel-sidebar-item__mention-badge_1w0n4_31","channel-sidebar-item__actions--always":"_channel-sidebar-item__actions--always_1w0n4_41","channel-sidebar-item__actions--open":"_channel-sidebar-item__actions--open_1w0n4_45","channel-sidebar-item__toggle":"_channel-sidebar-item__toggle_1w0n4_49","focus-ring-in":"_focus-ring-in_1w0n4_1","-host-shadow-a":"_-host-shadow-a_1w0n4_62","-host-shadow-b":"_-host-shadow-b_1w0n4_62","channel-sidebar-item__menu-icon":"_channel-sidebar-item__menu-icon_1w0n4_93","channel-sidebar-item--active":"_channel-sidebar-item--active_1w0n4_115","channel-sidebar-item__active-border":"_channel-sidebar-item__active-border_1w0n4_118","channel-sidebar-item__left":"_channel-sidebar-item__left_1w0n4_125","channel-sidebar-item__icon-container":"_channel-sidebar-item__icon-container_1w0n4_148","channel-sidebar-item__icon-container--dm":"_channel-sidebar-item__icon-container--dm_1w0n4_156","channel-sidebar-item__icon-container--custom":"_channel-sidebar-item__icon-container--custom_1w0n4_161","channel-sidebar-item__trailing-visual":"_channel-sidebar-item__trailing-visual_1w0n4_169","channel-sidebar-item__trailing-visual--with-menu":"_channel-sidebar-item__trailing-visual--with-menu_1w0n4_177","channel-sidebar-item__group-icon":"_channel-sidebar-item__group-icon_1w0n4_181","channel-sidebar-item__content":"_channel-sidebar-item__content_1w0n4_197","channel-sidebar-item__name":"_channel-sidebar-item__name_1w0n4_205","channel-sidebar-item__status-hint":"_channel-sidebar-item__status-hint_1w0n4_218","channel-sidebar-item__shared-icon":"_channel-sidebar-item__shared-icon_1w0n4_229","channel-sidebar-item__custom-status":"_channel-sidebar-item__custom-status_1w0n4_237","channel-sidebar-item__right":"_channel-sidebar-item__right_1w0n4_245","channel-sidebar-item__call":"_channel-sidebar-item__call_1w0n4_254","channel-sidebar-item--actions-open":"_channel-sidebar-item--actions-open_1w0n4_261","channel-sidebar-item--actions-always":"_channel-sidebar-item--actions-always_1w0n4_266","channel-sidebar-item--no-hover-menu":"_channel-sidebar-item--no-hover-menu_1w0n4_269","channel-sidebar-item--text-only":"_channel-sidebar-item--text-only_1w0n4_276","channel-sidebar-item--status-unread":"_channel-sidebar-item--status-unread_1w0n4_288","channel-sidebar-item--status-mention":"_channel-sidebar-item--status-mention_1w0n4_288","channel-sidebar-item--drafts":"_channel-sidebar-item--drafts_1w0n4_295","channel-sidebar-item--muted":"_channel-sidebar-item--muted_1w0n4_314"};exports.default=e;
 //# sourceMappingURL=ChannelSidebarItem.module.scss.cjs.map

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js

@@ -1,26 +1,39 @@
 import './ChannelSidebarItem.css';const e = {
-  "channel-sidebar-item": "_channel-sidebar-item_m2jgi_2",
-  "channel-sidebar-item__menu-button": "_channel-sidebar-item__menu-button_m2jgi_10",
-  "channel-sidebar-item__mention-badge": "_channel-sidebar-item__mention-badge_m2jgi_20",
-  "channel-sidebar-item__menu-icon": "_channel-sidebar-item__menu-icon_m2jgi_23",
-  "channel-sidebar-item--active": "_channel-sidebar-item--active_m2jgi_37",
-  "channel-sidebar-item__active-border": "_channel-sidebar-item__active-border_m2jgi_40",
-  "channel-sidebar-item__left": "_channel-sidebar-item__left_m2jgi_47",
-  "channel-sidebar-item__icon-container": "_channel-sidebar-item__icon-container_m2jgi_70",
-  "channel-sidebar-item__icon-container--dm": "_channel-sidebar-item__icon-container--dm_m2jgi_78",
-  "channel-sidebar-item__group-icon": "_channel-sidebar-item__group-icon_m2jgi_83",
-  "channel-sidebar-item__content": "_channel-sidebar-item__content_m2jgi_99",
-  "channel-sidebar-item__name": "_channel-sidebar-item__name_m2jgi_107",
-  "channel-sidebar-item__status-hint": "_channel-sidebar-item__status-hint_m2jgi_120",
-  "channel-sidebar-item__shared-icon": "_channel-sidebar-item__shared-icon_m2jgi_131",
-  "channel-sidebar-item__custom-status": "_channel-sidebar-item__custom-status_m2jgi_139",
-  "channel-sidebar-item__right": "_channel-sidebar-item__right_m2jgi_147",
-  "channel-sidebar-item__call": "_channel-sidebar-item__call_m2jgi_156",
-  "channel-sidebar-item--text-only": "_channel-sidebar-item--text-only_m2jgi_166",
-  "channel-sidebar-item--status-unread": "_channel-sidebar-item--status-unread_m2jgi_178",
-  "channel-sidebar-item--status-mention": "_channel-sidebar-item--status-mention_m2jgi_178",
-  "channel-sidebar-item--drafts": "_channel-sidebar-item--drafts_m2jgi_185",
-  "channel-sidebar-item--muted": "_channel-sidebar-item--muted_m2jgi_201"
+  "channel-sidebar-item": "_channel-sidebar-item_1w0n4_13",
+  "channel-sidebar-item__menu-button": "_channel-sidebar-item__menu-button_1w0n4_21",
+  "channel-sidebar-item__actions": "_channel-sidebar-item__actions_1w0n4_21",
+  "channel-sidebar-item__mention-badge": "_channel-sidebar-item__mention-badge_1w0n4_31",
+  "channel-sidebar-item__actions--always": "_channel-sidebar-item__actions--always_1w0n4_41",
+  "channel-sidebar-item__actions--open": "_channel-sidebar-item__actions--open_1w0n4_45",
+  "channel-sidebar-item__toggle": "_channel-sidebar-item__toggle_1w0n4_49",
+  "focus-ring-in": "_focus-ring-in_1w0n4_1",
+  "-host-shadow-a": "_-host-shadow-a_1w0n4_62",
+  "-host-shadow-b": "_-host-shadow-b_1w0n4_62",
+  "channel-sidebar-item__menu-icon": "_channel-sidebar-item__menu-icon_1w0n4_93",
+  "channel-sidebar-item--active": "_channel-sidebar-item--active_1w0n4_115",
+  "channel-sidebar-item__active-border": "_channel-sidebar-item__active-border_1w0n4_118",
+  "channel-sidebar-item__left": "_channel-sidebar-item__left_1w0n4_125",
+  "channel-sidebar-item__icon-container": "_channel-sidebar-item__icon-container_1w0n4_148",
+  "channel-sidebar-item__icon-container--dm": "_channel-sidebar-item__icon-container--dm_1w0n4_156",
+  "channel-sidebar-item__icon-container--custom": "_channel-sidebar-item__icon-container--custom_1w0n4_161",
+  "channel-sidebar-item__trailing-visual": "_channel-sidebar-item__trailing-visual_1w0n4_169",
+  "channel-sidebar-item__trailing-visual--with-menu": "_channel-sidebar-item__trailing-visual--with-menu_1w0n4_177",
+  "channel-sidebar-item__group-icon": "_channel-sidebar-item__group-icon_1w0n4_181",
+  "channel-sidebar-item__content": "_channel-sidebar-item__content_1w0n4_197",
+  "channel-sidebar-item__name": "_channel-sidebar-item__name_1w0n4_205",
+  "channel-sidebar-item__status-hint": "_channel-sidebar-item__status-hint_1w0n4_218",
+  "channel-sidebar-item__shared-icon": "_channel-sidebar-item__shared-icon_1w0n4_229",
+  "channel-sidebar-item__custom-status": "_channel-sidebar-item__custom-status_1w0n4_237",
+  "channel-sidebar-item__right": "_channel-sidebar-item__right_1w0n4_245",
+  "channel-sidebar-item__call": "_channel-sidebar-item__call_1w0n4_254",
+  "channel-sidebar-item--actions-open": "_channel-sidebar-item--actions-open_1w0n4_261",
+  "channel-sidebar-item--actions-always": "_channel-sidebar-item--actions-always_1w0n4_266",
+  "channel-sidebar-item--no-hover-menu": "_channel-sidebar-item--no-hover-menu_1w0n4_269",
+  "channel-sidebar-item--text-only": "_channel-sidebar-item--text-only_1w0n4_276",
+  "channel-sidebar-item--status-unread": "_channel-sidebar-item--status-unread_1w0n4_288",
+  "channel-sidebar-item--status-mention": "_channel-sidebar-item--status-mention_1w0n4_288",
+  "channel-sidebar-item--drafts": "_channel-sidebar-item--drafts_1w0n4_295",
+  "channel-sidebar-item--muted": "_channel-sidebar-item--muted_1w0n4_314"
 };
 export {
   e as default

package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js.map

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

package/dist/components/checkbox/Checkbox.css

@@ -1 +1 @@
-@keyframes _checkbox-icon-enter_18swc_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_18swc_10{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_18swc_10._checkbox_18swc_10{margin:0}._checkbox_18swc_10:has(._checkbox__input_18swc_25:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_18swc_25{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_18swc_25:focus-visible{outline:none}._checkbox__box_18swc_44{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_18swc_25:focus-visible~._checkbox__box_18swc_44{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover ._checkbox__box_18swc_44{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_18swc_25:disabled~._checkbox__box_18swc_44{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69,._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44 ._checkbox__icon_18swc_69{color:var(--button-color)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18swc_25:focus-visible:checked~._checkbox__box_18swc_44,._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:focus-visible~._checkbox__box_18swc_44{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_18swc_25:disabled:checked~._checkbox__box_18swc_44,._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:disabled~._checkbox__box_18swc_44{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_18swc_25:disabled:checked~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69,._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:disabled~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69{color:var(--button-color)}._checkbox--invalid_18swc_87 ._checkbox__box_18swc_44{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44 ._checkbox__icon_18swc_69,._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44 ._checkbox__icon_18swc_69{color:var(--button-color)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:checked~._checkbox__box_18swc_44,._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__box_18swc_44{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:focus-visible~._checkbox__box_18swc_44{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:focus-visible:checked~._checkbox__box_18swc_44,._checkbox--invalid_18swc_87._checkbox--indeterminate_18swc_65 ._checkbox__input_18swc_25:focus-visible~._checkbox__box_18swc_44{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_18swc_10:has(._checkbox__input_18swc_25:not(:disabled)):hover._checkbox--invalid_18swc_87 ._checkbox__input_18swc_25:not(:checked)~._checkbox__box_18swc_44{border-color:var(--error-text)}._checkbox__icon_18swc_69{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_18swc_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_18swc_120{line-height:1}._checkbox--size-small_18swc_123 ._checkbox__input_18swc_25{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18swc_123 ._checkbox__box_18swc_44{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18swc_123 ._checkbox__label_18swc_120{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_18swc_138 ._checkbox__input_18swc_25{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18swc_138 ._checkbox__box_18swc_44{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18swc_138 ._checkbox__label_18swc_120{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_18swc_153 ._checkbox__input_18swc_25{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18swc_153 ._checkbox__box_18swc_44{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18swc_153 ._checkbox__label_18swc_120{font-size:var(--font-size-200);line-height:var(--line-height-200)}
+@keyframes _checkbox-icon-enter_18sf4_1{0%{transform:scale(.5)}to{transform:scale(1)}}._checkbox_18sf4_21{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-s);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._checkbox_18sf4_21._checkbox_18sf4_21{margin:0}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._checkbox__input_18sf4_36{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._checkbox__input_18sf4_36:focus-visible{outline:none}._checkbox__box_18sf4_55{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_18sf4_36:focus-visible~._checkbox__box_18sf4_55{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover ._checkbox__box_18sf4_55{border-color:rgba(var(--center-channel-color-rgb),.32)}._checkbox__input_18sf4_36:disabled~._checkbox__box_18sf4_55{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.16)}._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80,._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80{color:var(--button-color)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--button-bg);border-color:var(--button-bg)}._checkbox__input_18sf4_36:focus-visible:checked~._checkbox__box_18sf4_55,._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:focus-visible~._checkbox__box_18sf4_55{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._checkbox__input_18sf4_36:disabled:checked~._checkbox__box_18sf4_55,._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:disabled~._checkbox__box_18sf4_55{background-color:rgba(var(--center-channel-color-rgb),.32);border-color:transparent}._checkbox__input_18sf4_36:disabled:checked~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80,._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:disabled~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80{color:var(--button-color)}._checkbox--invalid_18sf4_98 ._checkbox__box_18sf4_55{border-color:rgba(var(--error-text-color-rgb),.5)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80,._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55 ._checkbox__icon_18sf4_80{color:var(--button-color)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:checked~._checkbox__box_18sf4_55,._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__box_18sf4_55{background-color:var(--error-text);border-color:var(--error-text)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:focus-visible~._checkbox__box_18sf4_55{box-shadow:0 0 0 2px var(--error-text)}._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:focus-visible:checked~._checkbox__box_18sf4_55,._checkbox--invalid_18sf4_98._checkbox--indeterminate_18sf4_76 ._checkbox__input_18sf4_36:focus-visible~._checkbox__box_18sf4_55{border-color:rgba(var(--button-color-rgb),.24);box-shadow:0 0 0 2px var(--error-text)}._checkbox_18sf4_21:has(._checkbox__input_18sf4_36:not(:disabled)):hover._checkbox--invalid_18sf4_98 ._checkbox__input_18sf4_36:not(:checked)~._checkbox__box_18sf4_55{border-color:var(--error-text)}._checkbox__icon_18sf4_80{display:inline-flex;align-items:center;justify-content:center;color:var(--button-color);pointer-events:none;transform-origin:center;animation:_checkbox-icon-enter_18sf4_1 var(--duration-quick) var(--ease-entrance) forwards}._checkbox__label_18sf4_131{line-height:1}._checkbox--size-small_18sf4_134 ._checkbox__input_18sf4_36{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18sf4_134 ._checkbox__box_18sf4_55{width:var(--icon-size-12);height:var(--icon-size-12);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._checkbox--size-small_18sf4_134 ._checkbox__label_18sf4_131{font-size:var(--font-size-75);line-height:var(--line-height-75)}._checkbox--size-medium_18sf4_149 ._checkbox__input_18sf4_36{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18sf4_149 ._checkbox__box_18sf4_55{width:var(--icon-size-16);height:var(--icon-size-16);border-radius:var(--radius-xs);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._checkbox--size-medium_18sf4_149 ._checkbox__label_18sf4_131{font-size:var(--font-size-100);line-height:var(--line-height-100)}._checkbox--size-large_18sf4_164 ._checkbox__input_18sf4_36{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18sf4_164 ._checkbox__box_18sf4_55{width:var(--icon-size-20);height:var(--icon-size-20);border-radius:var(--radius-s);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._checkbox--size-large_18sf4_164 ._checkbox__label_18sf4_131{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/checkbox/Checkbox.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.css');const c="_checkbox_18swc_10",e="_checkbox__input_18swc_25",_="_checkbox__box_18swc_44",o="_checkbox__icon_18swc_69",b="_checkbox__label_18swc_120",x={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_18swc_65",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_18swc_87","checkbox-icon-enter":"_checkbox-icon-enter_18swc_1",checkbox__label:b,"checkbox--size-small":"_checkbox--size-small_18swc_123","checkbox--size-medium":"_checkbox--size-medium_18swc_138","checkbox--size-large":"_checkbox--size-large_18swc_153"};exports.checkbox=c;exports.checkbox__box=_;exports.checkbox__icon=o;exports.checkbox__input=e;exports.checkbox__label=b;exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Checkbox.css');const c="_checkbox_18sf4_21",e="_checkbox__input_18sf4_36",_="_checkbox__box_18sf4_55",o="_checkbox__icon_18sf4_80",b="_checkbox__label_18sf4_131",x={checkbox:c,checkbox__input:e,checkbox__box:_,"checkbox--indeterminate":"_checkbox--indeterminate_18sf4_76",checkbox__icon:o,"checkbox--invalid":"_checkbox--invalid_18sf4_98","checkbox-icon-enter":"_checkbox-icon-enter_18sf4_1",checkbox__label:b,"checkbox--size-small":"_checkbox--size-small_18sf4_134","checkbox--size-medium":"_checkbox--size-medium_18sf4_149","checkbox--size-large":"_checkbox--size-large_18sf4_164"};exports.checkbox=c;exports.checkbox__box=_;exports.checkbox__icon=o;exports.checkbox__input=e;exports.checkbox__label=b;exports.default=x;
 //# sourceMappingURL=Checkbox.module.scss.cjs.map

package/dist/components/checkbox/Checkbox.module.scss.js

@@ -1,15 +1,15 @@
-import './Checkbox.css';const c = "_checkbox_18swc_10", _ = "_checkbox__input_18swc_25", e = "_checkbox__box_18swc_44", o = "_checkbox__icon_18swc_69", b = "_checkbox__label_18swc_120", x = {
+import './Checkbox.css';const c = "_checkbox_18sf4_21", _ = "_checkbox__input_18sf4_36", e = "_checkbox__box_18sf4_55", o = "_checkbox__icon_18sf4_80", b = "_checkbox__label_18sf4_131", x = {
   checkbox: c,
   checkbox__input: _,
   checkbox__box: e,
-  "checkbox--indeterminate": "_checkbox--indeterminate_18swc_65",
+  "checkbox--indeterminate": "_checkbox--indeterminate_18sf4_76",
   checkbox__icon: o,
-  "checkbox--invalid": "_checkbox--invalid_18swc_87",
-  "checkbox-icon-enter": "_checkbox-icon-enter_18swc_1",
+  "checkbox--invalid": "_checkbox--invalid_18sf4_98",
+  "checkbox-icon-enter": "_checkbox-icon-enter_18sf4_1",
   checkbox__label: b,
-  "checkbox--size-small": "_checkbox--size-small_18swc_123",
-  "checkbox--size-medium": "_checkbox--size-medium_18swc_138",
-  "checkbox--size-large": "_checkbox--size-large_18swc_153"
+  "checkbox--size-small": "_checkbox--size-small_18sf4_134",
+  "checkbox--size-medium": "_checkbox--size-medium_18sf4_149",
+  "checkbox--size-large": "_checkbox--size-large_18sf4_164"
 };
 export {
   c as checkbox,

package/dist/components/chip/Chip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),q=require("react"),__M=require("@mattermost/compass-icons/components/close-circle.js"),M=__M?.default??__M,A=require("../icon/Icon.cjs"),I=require("../user-avatar/UserAvatar.cjs"),D=require("../../utils/string.cjs"),y=require("./ChipGroup.cjs"),a=require("./Chip.module.scss.cjs"),k={small:"10",medium:"12",large:"16"},w={small:"12",medium:"16",large:"20"};function T(t){return typeof t=="string"||typeof t=="number"?String(t).trim():Array.isArray(t)?t.map(T).filter(Boolean).join(" "):""}function L(t){var r;const s=(b,h)=>{let n=b;for(;n;){if(n instanceof HTMLElement&&n.dataset.chip!=null||n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement)return n;n=h==="next"?n.nextElementSibling:n.previousElementSibling}return null},l=t.parentElement,c=l==null?void 0:l.nextElementSibling,f=c instanceof HTMLInputElement||c instanceof HTMLTextAreaElement?c:null;return s(t.nextElementSibling,"next")??s(t.previousElementSibling,"previous")??f??(l==null?void 0:l.querySelector("input, textarea"))??((r=l==null?void 0:l.parentElement)==null?void 0:r.querySelector("input, textarea"))??null}function N({children:t,size:s="medium",compact:l=!1,leadingIcon:c,leadingAvatar:f,onRemove:r,error:b=!1,colored:h=!1,className:n="",...i}){const x=q.useContext(y.ChipGroupContext),g=k[s],S=w[s],p=T(t),_=i["aria-label"]??(r!=null&&p!==""?`${p}. Press Delete to remove.`:p!==""?p:void 0),m=r!=null,C=e=>{const d=e.currentTarget.closest("[data-chip]"),u=d instanceof HTMLElement?L(d):null,j=e.currentTarget;r==null||r(e),window.setTimeout(()=>{j.isConnected||u==null||u.isConnected&&(u.dataset.chip!=null?y.activateChip(u):u.focus({focusVisible:!0}))},0)},E=[a.default.chip,a.default[`chip--size-${D.toKebab(s)}`],l&&a.default["chip--compact"],b&&a.default["chip--error"],h&&a.default["chip--colored"],n].filter(Boolean).join(" "),v=e=>{var d,u;(d=i.onKeyDown)==null||d.call(i,e),!(x||!m||e.defaultPrevented)&&(e.key==="Delete"||e.key==="Backspace"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),(u=e.currentTarget.querySelector("[data-chip-remove]"))==null||u.click())};return o.jsxs("div",{className:E,...i,role:m?"button":i.role,tabIndex:m?x?-1:0:i.tabIndex,"aria-label":m?_:i["aria-label"],"data-chip":"",onKeyDown:v,children:[f!=null?o.jsx("span",{className:a.default["chip__avatar-slot"],children:o.jsx(I.default,{src:f.src,alt:f.alt,size:S})}):c!=null?o.jsx("span",{className:a.default["chip__icon-slot"],"aria-hidden":!0,children:o.jsx(A.default,{glyph:c,size:g})}):null,o.jsx("span",{className:a.default.chip__label,children:t}),r!=null?o.jsx("button",{type:"button",className:a.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:e=>{e.preventDefault()},onClick:C,children:o.jsx(M,{size:Number(g),"aria-hidden":!0})}):null]})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),q=require("react"),__M=require("@mattermost/compass-icons/components/close-circle.js"),M=__M?.default??__M,A=require("../icon/Icon.cjs"),I=require("../user-avatar/UserAvatar.cjs"),D=require("../../utils/string.cjs"),y=require("./ChipGroup.cjs"),a=require("./Chip.module.scss.cjs"),k={small:"10",medium:"12",large:"16"},w={small:"12",medium:"16",large:"20"};function T(t){return typeof t=="string"||typeof t=="number"?String(t).trim():Array.isArray(t)?t.map(T).filter(Boolean).join(" "):""}function L(t){var r;const s=(b,h)=>{let n=b;for(;n;){if(n instanceof HTMLElement&&n.dataset.chip!=null||n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement)return n;n=h==="next"?n.nextElementSibling:n.previousElementSibling}return null},l=t.parentElement,c=l==null?void 0:l.nextElementSibling,f=c instanceof HTMLInputElement||c instanceof HTMLTextAreaElement?c:null;return s(t.nextElementSibling,"next")??s(t.previousElementSibling,"previous")??f??(l==null?void 0:l.querySelector("input, textarea"))??((r=l==null?void 0:l.parentElement)==null?void 0:r.querySelector("input, textarea"))??null}function N({children:t,size:s="medium",compact:l=!1,leadingIcon:c,leadingAvatar:f,onRemove:r,error:b=!1,colored:h=!1,className:n="",...i}){const x=q.useContext(y.ChipGroupContext),g=k[s],S=w[s],d=T(t),_=i["aria-label"]??(r!=null&&d!==""?`${d}. Press Delete to remove.`:d!==""?d:void 0),m=r!=null,C=e=>{const p=e.currentTarget.closest("[data-chip]"),o=p instanceof HTMLElement?L(p):null,j=e.currentTarget;r==null||r(e),window.setTimeout(()=>{j.isConnected||o==null||o.isConnected&&(o.dataset.chip!=null?y.activateChip(o):o.focus({focusVisible:!0}))},0)},E=[a.default.chip,a.default[`chip--size-${D.toKebab(s)}`],l&&a.default["chip--compact"],b&&a.default["chip--error"],h&&a.default["chip--colored"],n].filter(Boolean).join(" "),v=e=>{var p,o;(p=i.onKeyDown)==null||p.call(i,e),!(x||!m||e.defaultPrevented)&&(e.key==="Delete"||e.key==="Backspace"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),(o=e.currentTarget.querySelector("[data-chip-remove]"))==null||o.click())};return u.jsxs("div",{className:E,...i,role:m?"button":i.role,tabIndex:m?x?-1:0:i.tabIndex,"aria-label":m?_:i["aria-label"],"data-chip":"",onKeyDown:v,children:[f!=null?u.jsx("span",{className:a.default["chip__avatar-slot"],children:u.jsx(I.default,{src:f.src,alt:f.alt,size:S})}):c!=null?u.jsx("span",{className:a.default["chip__icon-slot"],"aria-hidden":!0,children:u.jsx(A.default,{glyph:c,size:g})}):null,u.jsx("span",{className:a.default.chip__label,children:t}),r!=null?u.jsx("button",{type:"button",className:a.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:e=>{e.preventDefault()},onClick:C,children:u.jsx(M,{size:Number(g),"aria-hidden":!0})}):null]})}exports.default=N;
 //# sourceMappingURL=Chip.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import {\n  useContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} 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\n/**\n * Removable chips derive their accessible name from string children as\n * `{label}. Press Delete to remove.`; pass `aria-label` to localize it.\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 (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {\n        return el;\n      }\n      el =\n        direction === 'next'\n          ? el.nextElementSibling\n          : 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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"}
+{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import {\n  useContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} 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\n/**\n * Removable chips derive their accessible name from string children as\n * `{label}. Press Delete to remove.`; pass `aria-label` to localize it.\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 (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {\n        return el;\n      }\n      el =\n        direction === 'next'\n          ? el.nextElementSibling\n          : 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.stopPropagation();\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.css

@@ -1 +1 @@
-._chip_7f1qc_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;min-width:0;max-width:100%;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_7f1qc_2:hover{background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_7f1qc_2:focus-visible{outline-color:var(--focus-ring-color)}._chip_7f1qc_2:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_7f1qc_31{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_7f1qc_37,._chip__avatar-slot_7f1qc_43{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_7f1qc_49{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-pill);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_7f1qc_49:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip--colored_7f1qc_65:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_7f1qc_73{border-color:var(--error-text, var(--color-danger))}._chip--size-small_7f1qc_76{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_7f1qc_76:has(._chip__remove_7f1qc_49){padding-right:var(--spacing-xxs)}._chip--size-small_7f1qc_76 ._chip__label_7f1qc_31{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_7f1qc_76 ._chip__remove_7f1qc_49{padding:1px}._chip--size-medium_7f1qc_91{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_7f1qc_91:has(._chip__remove_7f1qc_49){padding-right:var(--spacing-xxs)}._chip--size-medium_7f1qc_91 ._chip__label_7f1qc_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_7f1qc_91 ._chip__remove_7f1qc_49{padding:2px}._chip--size-large_7f1qc_105{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_7f1qc_105:has(._chip__remove_7f1qc_49){padding-right:var(--spacing-s)}._chip--size-large_7f1qc_105 ._chip__label_7f1qc_31{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_7f1qc_105 ._chip__remove_7f1qc_49{padding:2px}._chip--compact_7f1qc_119{padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--compact_7f1qc_119:has(._chip__remove_7f1qc_49){padding-right:var(--spacing-xxxs)}._chip--size-large_7f1qc_105._chip--compact_7f1qc_119{padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-large_7f1qc_105._chip--compact_7f1qc_119:has(._chip__remove_7f1qc_49){padding-right:var(--spacing-xxs)}
+._chip_avr9t_13{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;min-width:0;max-width:100%;cursor:default;outline:none}._chip_avr9t_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:0;animation:_focus-ring-in_avr9t_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._chip_avr9t_13:focus-visible{animation:none}}@keyframes _focus-ring-in_avr9t_1{0%{outline-color:transparent;outline-offset:0}}._chip_avr9t_13:hover{transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition);background-color:rgba(var(--center-channel-color-rgb),.16)}._chip_avr9t_13:focus-within:not(:focus-visible){border-color:var(--button-bg);background-color:rgba(var(--center-channel-color-rgb),.08)}._chip__label_avr9t_54{position:relative;overflow:hidden;text-overflow:ellipsis;min-width:0}._chip__icon-slot_avr9t_60,._chip__avatar-slot_avr9t_66{display:inline-flex;align-items:center;flex-shrink:0;position:relative}._chip__remove_avr9t_72{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:0;padding:0;border-radius:var(--radius-pill);cursor:pointer;color:rgba(var(--center-channel-color-rgb),.32);line-height:0}._chip__remove_avr9t_72:hover{color:rgba(var(--center-channel-color-rgb),.64)}._chip__remove_avr9t_72:not(._-host-shadow-a_avr9t_88):not(._-host-shadow-b_avr9t_88){border-radius:var(--radius-pill)}._chip--colored_avr9t_91:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-color:#d95d1c29;pointer-events:none}._chip--error_avr9t_99{border-color:var(--error-text, var(--color-danger))}._chip--size-small_avr9t_102{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-small_avr9t_102:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxs)}._chip--size-small_avr9t_102 ._chip__label_avr9t_54{font-size:var(--font-size-25);line-height:12px;letter-spacing:.2px}._chip--size-small_avr9t_102 ._chip__remove_avr9t_72{padding:1px}._chip--size-medium_avr9t_117{gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-medium_avr9t_117:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxs)}._chip--size-medium_avr9t_117 ._chip__label_avr9t_54{font-size:var(--font-size-75);line-height:var(--line-height-75)}._chip--size-medium_avr9t_117 ._chip__remove_avr9t_72{padding:var(--spacing-xxxxs)}._chip--size-large_avr9t_131{gap:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-m)}._chip--size-large_avr9t_131:has(._chip__remove_avr9t_72){padding-right:var(--spacing-s)}._chip--size-large_avr9t_131 ._chip__label_avr9t_54{font-size:var(--font-size-100);line-height:var(--line-height-100)}._chip--size-large_avr9t_131 ._chip__remove_avr9t_72{padding:var(--spacing-xxxxs)}._chip--compact_avr9t_145{padding:var(--spacing-xxxxs) var(--spacing-xxs)}._chip--compact_avr9t_145:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxxs)}._chip--size-large_avr9t_131._chip--compact_avr9t_145{padding:var(--spacing-xxxs) var(--spacing-xs)}._chip--size-large_avr9t_131._chip--compact_avr9t_145:has(._chip__remove_avr9t_72){padding-right:var(--spacing-xxs)}

package/dist/components/chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+DD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,OAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAmGX"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+DD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,OAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAoGX"}

package/dist/components/chip/Chip.js

@@ -10,15 +10,15 @@ const H = {
   small: "10",
   medium: "12",
   large: "16"
-}, j = {
+}, P = {
   small: "12",
   medium: "16",
   large: "20"
 };
-function T(t) {
-  return typeof t == "string" || typeof t == "number" ? String(t).trim() : Array.isArray(t) ? t.map(T).filter(Boolean).join(" ") : "";
+function g(t) {
+  return typeof t == "string" || typeof t == "number" ? String(t).trim() : Array.isArray(t) ? t.map(g).filter(Boolean).join(" ") : "";
 }
-function z(t) {
+function j(t) {
   var r;
   const s = (b, h) => {
     let n = b;
@@ -43,8 +43,8 @@ function $({
   className: n = "",
   ...i
 }) {
-  const x = I(L), y = H[s], g = j[s], f = T(t), E = i["aria-label"] ?? (r != null && f !== "" ? `${f}. Press Delete to remove.` : f !== "" ? f : void 0), d = r != null, S = (e) => {
-    const p = e.currentTarget.closest("[data-chip]"), a = p instanceof HTMLElement ? z(p) : null, v = e.currentTarget;
+  const x = I(L), y = H[s], T = P[s], f = g(t), E = i["aria-label"] ?? (r != null && f !== "" ? `${f}. Press Delete to remove.` : f !== "" ? f : void 0), d = r != null, S = (e) => {
+    const p = e.currentTarget.closest("[data-chip]"), a = p instanceof HTMLElement ? j(p) : null, v = e.currentTarget;
     r == null || r(e), window.setTimeout(() => {
       v.isConnected || a == null || a.isConnected && (a.dataset.chip != null ? N(a) : a.focus({ focusVisible: !0 }));
     }, 0);
@@ -57,7 +57,7 @@ function $({
     n
   ].filter(Boolean).join(" "), _ = (e) => {
     var p, a;
-    (p = i.onKeyDown) == null || p.call(i, e), !(x || !d || e.defaultPrevented) && (e.key === "Delete" || e.key === "Backspace" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), (a = e.currentTarget.querySelector("[data-chip-remove]")) == null || a.click());
+    (p = i.onKeyDown) == null || p.call(i, e), !(x || !d || e.defaultPrevented) && (e.key === "Delete" || e.key === "Backspace" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), (a = e.currentTarget.querySelector("[data-chip-remove]")) == null || a.click());
   };
   return /* @__PURE__ */ A(
     "div",
@@ -75,7 +75,7 @@ function $({
           {
             src: m.src,
             alt: m.alt,
-            size: g
+            size: T
           }
         ) }) : u != null ? /* @__PURE__ */ c("span", { className: o["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ c(D, { glyph: u, size: y }) }) : null,
         /* @__PURE__ */ c("span", { className: o.chip__label, children: t }),

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import {\n  useContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} 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\n/**\n * Removable chips derive their accessible name from string children as\n * `{label}. Press Delete to remove.`; pass `aria-label` to localize it.\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 (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {\n        return el;\n      }\n      el =\n        direction === 'next'\n          ? el.nextElementSibling\n          : 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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"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import {\n  useContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} 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\n/**\n * Removable chips derive their accessible name from string children as\n * `{label}. Press Delete to remove.`; pass `aria-label` to localize it.\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 (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {\n        return el;\n      }\n      el =\n        direction === 'next'\n          ? el.nextElementSibling\n          : 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.stopPropagation();\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.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Chip.css');const _="_chip_7f1qc_2",c="_chip__label_7f1qc_31",i="_chip__remove_7f1qc_49",e={chip:_,chip__label:c,"chip__icon-slot":"_chip__icon-slot_7f1qc_37","chip__avatar-slot":"_chip__avatar-slot_7f1qc_43",chip__remove:i,"chip--colored":"_chip--colored_7f1qc_65","chip--error":"_chip--error_7f1qc_73","chip--size-small":"_chip--size-small_7f1qc_76","chip--size-medium":"_chip--size-medium_7f1qc_91","chip--size-large":"_chip--size-large_7f1qc_105","chip--compact":"_chip--compact_7f1qc_119"};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.css');const _="_chip_avr9t_13",i="_chip__label_avr9t_54",c="_chip__remove_avr9t_72",a={chip:_,"focus-ring-in":"_focus-ring-in_avr9t_1",chip__label:i,"chip__icon-slot":"_chip__icon-slot_avr9t_60","chip__avatar-slot":"_chip__avatar-slot_avr9t_66",chip__remove:c,"-host-shadow-a":"_-host-shadow-a_avr9t_88","-host-shadow-b":"_-host-shadow-b_avr9t_88","chip--colored":"_chip--colored_avr9t_91","chip--error":"_chip--error_avr9t_99","chip--size-small":"_chip--size-small_avr9t_102","chip--size-medium":"_chip--size-medium_avr9t_117","chip--size-large":"_chip--size-large_avr9t_131","chip--compact":"_chip--compact_avr9t_145"};exports.chip=_;exports.chip__label=i;exports.chip__remove=c;exports.default=a;
 //# sourceMappingURL=Chip.module.scss.cjs.map

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

@@ -1,20 +1,23 @@
-import './Chip.css';const _ = "_chip_7f1qc_2", c = "_chip__label_7f1qc_31", i = "_chip__remove_7f1qc_49", p = {
+import './Chip.css';const _ = "_chip_avr9t_13", c = "_chip__label_avr9t_54", i = "_chip__remove_avr9t_72", a = {
   chip: _,
+  "focus-ring-in": "_focus-ring-in_avr9t_1",
   chip__label: c,
-  "chip__icon-slot": "_chip__icon-slot_7f1qc_37",
-  "chip__avatar-slot": "_chip__avatar-slot_7f1qc_43",
+  "chip__icon-slot": "_chip__icon-slot_avr9t_60",
+  "chip__avatar-slot": "_chip__avatar-slot_avr9t_66",
   chip__remove: i,
-  "chip--colored": "_chip--colored_7f1qc_65",
-  "chip--error": "_chip--error_7f1qc_73",
-  "chip--size-small": "_chip--size-small_7f1qc_76",
-  "chip--size-medium": "_chip--size-medium_7f1qc_91",
-  "chip--size-large": "_chip--size-large_7f1qc_105",
-  "chip--compact": "_chip--compact_7f1qc_119"
+  "-host-shadow-a": "_-host-shadow-a_avr9t_88",
+  "-host-shadow-b": "_-host-shadow-b_avr9t_88",
+  "chip--colored": "_chip--colored_avr9t_91",
+  "chip--error": "_chip--error_avr9t_99",
+  "chip--size-small": "_chip--size-small_avr9t_102",
+  "chip--size-medium": "_chip--size-medium_avr9t_117",
+  "chip--size-large": "_chip--size-large_avr9t_131",
+  "chip--compact": "_chip--compact_avr9t_145"
 };
 export {
   _ as chip,
   c as chip__label,
   i as chip__remove,
-  p as default
+  a as default
 };
 //# sourceMappingURL=Chip.module.scss.js.map

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

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

package/dist/components/chip/ChipGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),b=require("react"),M=require("./ChipGroup.module.scss.cjs"),v=b.createContext(!1);function l(o){return[...o.querySelectorAll("[data-chip]")]}function E(o){const s=o.closest('[role="toolbar"]');s&&l(s).forEach(a=>{a.tabIndex=a===o?0:-1}),o.focus({focusVisible:!0})}function j({children:o,className:s="",disabled:a=!1,onKeyDown:f,onFocus:d,...g}){const h=b.useRef(null);b.useLayoutEffect(()=>{const r=h.current;if(r==null)return;const t=l(r);if(t.length===0)return;if(a){t.forEach(e=>{e.tabIndex=-1});return}const n=t.find(e=>e===document.activeElement);if(n!=null){t.forEach(e=>{e.tabIndex=e===n?0:-1});return}t.some(e=>e.tabIndex===0)||(t[0].tabIndex=0,t.slice(1).forEach(e=>{e.tabIndex=-1}))},[o,a]);const C=r=>{if(d==null||d(r),a)return;const t=r.target;if(!(t instanceof HTMLElement))return;const n=t.closest("[data-chip]"),e=r.currentTarget;n==null||!e.contains(n)||l(e).forEach(c=>{c.tabIndex=c===n?0:-1})},I=r=>{if(f==null||f(r),r.defaultPrevented||a)return;const t=h.current;if(t==null)return;const n=l(t);if(n.length===0)return;const e=document.activeElement;if(!(e instanceof HTMLElement)||!t.contains(e))return;const c=e.closest("[data-chip]"),p=n.findIndex(i=>i===c);if(p<0)return;const u=i=>{const x=n[Math.max(0,Math.min(n.length-1,i))];x!=null&&(r.preventDefault(),E(x))};switch(r.key){case"ArrowRight":case"ArrowDown":u(p+1);break;case"ArrowLeft":case"ArrowUp":u(p-1);break;case"Home":u(0);break;case"End":u(n.length-1);break;case"Delete":case"Backspace":case"Enter":case" ":{const i=c==null?void 0:c.querySelector("[data-chip-remove]");i!=null&&!i.disabled&&(r.preventDefault(),i.click());break}}},k=[M.default["chip-group"],s].filter(Boolean).join(" ");return m.jsx(v.Provider,{value:!0,children:m.jsx("div",{...g,ref:h,className:k,role:"toolbar","aria-orientation":"horizontal","aria-disabled":a||void 0,onKeyDown:I,onFocus:C,children:o})})}exports.ChipGroupContext=v;exports.activateChip=E;exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),b=require("react"),M=require("./ChipGroup.module.scss.cjs"),v=b.createContext(!1);function l(o){return[...o.querySelectorAll("[data-chip]")]}function g(o){const s=o.closest('[role="toolbar"]');s&&l(s).forEach(a=>{a.tabIndex=a===o?0:-1}),o.focus({focusVisible:!0})}function j({children:o,className:s="",disabled:a=!1,onKeyDown:f,onFocus:d,...E}){const h=b.useRef(null);b.useLayoutEffect(()=>{const e=h.current;if(e==null)return;const r=l(e);if(r.length===0)return;if(a){r.forEach(t=>{t.tabIndex=-1});return}const n=r.find(t=>t===document.activeElement);if(n!=null){r.forEach(t=>{t.tabIndex=t===n?0:-1});return}r.some(t=>t.tabIndex===0)||(r[0].tabIndex=0,r.slice(1).forEach(t=>{t.tabIndex=-1}))},[o,a]);const C=e=>{if(d==null||d(e),a)return;const r=e.target;if(!(r instanceof HTMLElement))return;const n=r.closest("[data-chip]"),t=e.currentTarget;n==null||!t.contains(n)||l(t).forEach(c=>{c.tabIndex=c===n?0:-1})},I=e=>{if(f==null||f(e),e.defaultPrevented||a)return;const r=h.current;if(r==null)return;const n=l(r);if(n.length===0)return;const t=document.activeElement;if(!(t instanceof HTMLElement)||!r.contains(t))return;const c=t.closest("[data-chip]"),p=n.findIndex(i=>i===c);if(p<0)return;const u=i=>{const x=n[Math.max(0,Math.min(n.length-1,i))];x!=null&&(e.preventDefault(),e.stopPropagation(),g(x))};switch(e.key){case"ArrowRight":case"ArrowDown":u(p+1);break;case"ArrowLeft":case"ArrowUp":u(p-1);break;case"Home":u(0);break;case"End":u(n.length-1);break;case"Delete":case"Backspace":case"Enter":case" ":{const i=c==null?void 0:c.querySelector("[data-chip-remove]");i!=null&&!i.disabled&&(e.preventDefault(),e.stopPropagation(),i.click());break}}},k=[M.default["chip-group"],s].filter(Boolean).join(" ");return m.jsx(v.Provider,{value:!0,children:m.jsx("div",{...E,ref:h,className:k,role:"toolbar","aria-orientation":"horizontal","aria-disabled":a||void 0,onKeyDown:I,onFocus:C,children:o})})}exports.ChipGroupContext=v;exports.activateChip=g;exports.default=j;
 //# sourceMappingURL=ChipGroup.cjs.map