npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.27 → 0.1.0-alpha.29 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (373) hide show

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

	@@ -1 +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":";;;;;;;;;;;;;;;AAwEA,MAAMA,IAAwB,CAACC,MAC7B,GAAGA,CAAK,WAAWA,MAAU,IAAI,KAAK,GAAG;AAE3C,SAASC,EAAqB;AAAA,EAC5B,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AACF,GAKG;AACD,UAAQH,GAAA;AAAA,IACN,KAAK;AACH,aAAO,gBAAAI,EAACC,GAAA,EAAgB,MAAM,GAAA,CAAI;AAAA,IACpC,KAAK;AACH,+BACG,OAAA,EAAI,WAAWC,EAAO,kCAAkC,GACtD,eAAe,GAClB;AAAA,IAEJ,KAAK;AACH,aACE,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,KAAKL,KAAa;AAAA,UAClB,KAAI;AAAA,UACJ,MAAK;AAAA,UACL,QAAQ,CAAC,CAACC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB,KAAK;AACH,aAAO,gBAAAC,EAACI,GAAA,EAAgB,MAAM,GAAA,CAAI;AAAA,IACpC,KAAK;AACH,aAAO,gBAAAJ,EAACK,GAAA,EAAc,MAAM,GAAA,CAAI;AAAA,IAClC,KAAK;AACH,aAAO,gBAAAL,EAACM,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,IAC3C,KAAK;AACH,aAAO,gBAAAN,EAACO,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,IAChC,KAAK;AAAA,IACL;AACE,aAAO,gBAAAP,EAACQ,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,EAAA;AAElC;AAOA,SAAwBC,GAAmB;AAAA,EACzC,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,eAAAhB,IAAgB;AAAA,EAChB,QAAAiB,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,aAAArB;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,mBAAAoB;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC,IAAqB7B;AAAA,EACrB,aAAA8B,IAAc;AAAA,EACd,WAAAC,IAAY;AACd,GAA4B;AAC1B,QAAMC,IAAO,CAACb,KAAqBhB,MAAkB,kBAC/C8B,IAAW,CAACd,KAAqBhB,MAAkB,UACnD+B,IAAkBD,KAAYb,MAAW,WAAW,SAASA,GAC7De,IAAkBD,MAAoB,WACtCE,IACJ,CAACjB,KACD,CAAC,UAAU,WAAW,iBAAiB,gBAAgB,EAAE;AAAA,IACvDhB;AAAA,EAAA,GAGEkC,IAAY;AAAA,IAChB5B,EAAO,sBAAsB;AAAA,IAC7BU,IAAoBV,EAAO,iCAAiC,IAAI;AAAA,IAChEY,IAASZ,EAAO,8BAA8B,IAAI;AAAA,IAClDa,IAAQb,EAAO,6BAA6B,IAAI;AAAA,IAChDA,EAAO,gCAAgCyB,EAAgB,YAAA,CAAa,EAAE;AAAA,IACtED,IAAWxB,EAAO,8BAA8B,IAAI;AAAA,IACpDQ;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELqB,IAAqB;AAAA,IACzB7B,EAAO,sCAAsC;AAAA,IAC7CuB,IAAOvB,EAAO,0CAA0C,IAAI;AAAA,EAAA,EAE3D,OAAO,OAAO,EACd,KAAK,GAAG,GAEL8B,IAAa9B,EAAO,6BAA6B,GAEjD+B,IACJN,MAAoB,YAChBL,EAAmBJ,KAAgB,CAAC,IACpCS,MAAoB,WAClBJ,IACA;AAER,SACE,gBAAAW,EAAC,OAAA,EAAI,WAAWJ,GACb,UAAA;AAAA,IAAAhB,KACC,gBAAAd,EAAC,OAAA,EAAI,WAAWE,EAAO,qCAAqC,GAAG;AAAA,IAEjE,gBAAAgC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWhC,EAAO,4BAA4B;AAAA,QAC9C,SAAAkB;AAAA,QACA,gBAAcN,IAAS,KAAO;AAAA,QAE7B,UAAA;AAAA,UAAA,CAACF,KACA,gBAAAZ,EAAC,OAAA,EAAI,WAAW+B,GAAoB,eAAW,IAC7C,UAAA,gBAAA/B;AAAA,YAACL;AAAA,YAAA;AAAA,cACC,eAAAC;AAAA,cACA,aAAAC;AAAA,cACA,WAAAC;AAAA,cACA,kBAAAC;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UAEF,gBAAAmC,EAAC,OAAA,EAAI,WAAWhC,EAAO,+BAA+B,GACpD,UAAA;AAAA,YAAA,gBAAAF,EAAC,QAAA,EAAK,WAAWE,EAAO,4BAA4B,GAAI,UAAAS,GAAK;AAAA,YAC5DsB,KACC,gBAAAjC,EAAC,QAAA,EAAK,WAAWE,EAAO,mCAAmC,GACxD,UAAA+B,GACH;AAAA,YAEDhB,KACC,gBAAAjB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWE,EAAO,mCAAmC;AAAA,gBACrD,eAAW;AAAA,gBAEX,UAAA,gBAAAF,EAACmC,GAAA,EAA0B,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAGxCV,KAAQN,KACP,gBAAAnB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWE,EAAO,qCAAqC;AAAA,gBACvD,eAAW;AAAA,gBAEV,UAAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAe,EAAC,OAAA,EAAI,WAAWF,GACb,UAAA;AAAA,MAAAhB,KACC,gBAAAhB,EAAC,OAAA,EAAI,WAAWE,EAAO,4BAA4B,GAAG,eAAW,IAC/D,UAAA,gBAAAF,EAACoC,GAAA,EAAgB,MAAM,GAAA,CAAI,GAC7B;AAAA,MAEDR,KACC,gBAAA5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAO,qCAAqC;AAAA,UACvD,eAAW;AAAA,UAEX,UAAA,gBAAAF;AAAA,YAACqC;AAAA,YAAA;AAAA,cACC,OAAOnB,KAAgB;AAAA,cACvB,UAAS;AAAA,cACT,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,MAGHW,KACC,gBAAA7B,EAAC,QAAA,EAAK,WAAWE,EAAO,mCAAmC,GACzD,UAAA,gBAAAF;AAAA,QAACsC;AAAA,QAAA;AAAA,UACC,WAAWpC,EAAO,iCAAiC;AAAA,UACnD,MAAK;AAAA,UACL,OAAM;AAAA,UACN,MAAM,gBAAAF,EAACuC,GAAA,EAAK,OAAO,gBAAAvC,EAACwC,KAAiB,GAAI;AAAA,UACzC,cAAYhB;AAAA,UACZ,SAAS,CAACiB,MAAM;AACd,YAAAA,EAAE,gBAAA,GACFpB,KAAA,QAAAA,EAAcoB;AAAA,UAChB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/components/checkbox/Checkbox.css CHANGED Viewed

	@@ -1 +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)}
1	+ @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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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.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 CHANGED Viewed

	@@ -1 +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)}
1	+ ._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 CHANGED Viewed

	@@ -1 +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~~"}
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,2CAoGX"}

package/dist/components/chip/Chip.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/components/chip/ChipGroup.cjs CHANGED Viewed

@@ -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