npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.10 → 0.1.0-alpha.11 - Mend

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

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 (441) hide show

package/dist/components/emoji-popover/EmojiPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPopover.js","sources":["../../../src/components/emoji-popover/EmojiPopover.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Button from '@/components/button/Button';\nimport Emoji from '@/components/emoji/Emoji';\nimport EmojiButton from '@/components/emoji-button/EmojiButton';\nimport EmptyState from '@/components/empty-state/EmptyState';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport MenuGroupHeading from '@/components/menu-group-heading/MenuGroupHeading';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport SearchInput from '@/components/search-input/SearchInput';\nimport SearchIllustration from '@/illustrations/search';\nimport styles from './EmojiPopover.module.scss';\n\nexport interface EmojiCategory {\n id: string;\n label: string;\n /** Icon component rendered in the category navigation bar. /\n icon: ComponentType;\n emojis: string[];\n /* When false the row does not wrap (e.g. Recently Used). @default true /\n wrap?: boolean;\n}\n\nexport interface EmojiPopoverProps {\n className?: string;\n /* Emoji categories to display, supplied by the host. /\n categories: EmojiCategory[];\n /* Map of base emoji → shortcode name used for footer display. /\n shortcodes?: Record<string, string>;\n /* Pre-seeds the search field. Useful for static specimen demos. /\n defaultQuery?: string;\n /* Focus the search field on mount. /\n autoFocus?: boolean;\n /* Called with the selected emoji character. /\n onEmojiSelect?: (emoji: string) => void;\n /\n Called on every query change. Use this to trigger async custom-emoji\n * searches on the host side; local filtering over `categories` always runs.\n /\n onSearch?: (query: string) => void;\n /* Shows a tertiary button in the footer right. Omit to hide the button. /\n onCustomEmojiClick?: () => void;\n /* Label for the custom emoji button. @default 'Custom emoji' */\n customEmojiLabel?: string;\n}\n\nconst SKIN_TONES = ['🖐️', '🖐🏻', '🖐🏼', '🖐🏽', '🖐🏾', '🖐🏿'];\nconst SKIN_TONE_MODIFIERS = ['', '\\u{1F3FB}', '\\u{1F3FC}', '\\u{1F3FD}', '\\u{1F3FE}', '\\u{1F3FF}'];\n\nconst MODIFIER_BASES = new Set([\n '👋', '🤚', '✋', '🖐️', '🖖', '👌', '🤌', '🤏', '✌️', '🤞', '🫰',\n '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇', '☝️', '🫵', '👍', '👎',\n '✊', '👊', '🤛', '🤜', '👏', '🙌', '🫶', '👐', '🤲', '🙏', '💅',\n '🤳', '💪', '🦵', '🦶', '👂', '🦻', '👃',\n]);\n\nfunction applyModifier(emoji: string, modifier: string): string {\n if (!modifier \|\| !MODIFIER_BASES.has(emoji)) return emoji;\n // Strip VS16 before the modifier so composed sequences render correctly\n return emoji.replace('️', '') + modifier;\n}\n\nexport default function EmojiPopover({\n className = '',\n categories,\n shortcodes = {},\n defaultQuery = '',\n autoFocus = false,\n onEmojiSelect,\n onSearch,\n onCustomEmojiClick,\n customEmojiLabel = 'Custom emoji',\n}: EmojiPopoverProps) {\n const [query, setQuery] = useState(defaultQuery);\n const [activeCategoryId, setActiveCategoryId] = useState(categories[0]?.id ?? '');\n const [hoveredEmoji, setHoveredEmoji] = useState<string \| null>(null);\n const [hoveredBase, setHoveredBase] = useState<string \| null>(null);\n const [skinToneIndex, setSkinToneIndex] = useState(0);\n const [showSkinTonePicker, setShowSkinTonePicker] = useState(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const generatedId = useId();\n const skinTonePickerId = `${generatedId}-skin-tone-picker`;\n const skinToneModifier = SKIN_TONE_MODIFIERS[skinToneIndex];\n const scrollRef = useRef<HTMLDivElement>(null);\n const groupRefs = useRef<Record<string, HTMLDivElement \| null>>({});\n\n useEffect(() => {\n if (autoFocus) searchRef.current?.focus();\n }, [autoFocus]);\n\n const handleQueryChange = (next: string) => {\n setQuery(next);\n onSearch?.(next);\n };\n\n const allEmojis = [...new Set(categories.flatMap((c) => c.emojis))];\n const searchResults = query\n ? allEmojis.filter((emoji) => {\n const name = shortcodes[emoji] ?? '';\n return name.includes(query.toLowerCase()) \|\| emoji === query;\n })\n : [];\n\n const computedState = query\n ? searchResults.length > 0 ? 'search-results' : 'empty'\n : 'default';\n\n function getShortcode(emoji: string): string {\n return shortcodes[emoji] ? `:${shortcodes[emoji]}:` : emoji;\n }\n\n function scrollToCategory(id: string) {\n const group = groupRefs.current[id];\n const scroller = scrollRef.current;\n if (!group \|\| !scroller) return;\n const top = group.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;\n scroller.scrollTo({ top, behavior: 'smooth' });\n }\n\n const rootClass = [styles['emoji-popover'], className].filter(Boolean).join(' ');\n\n const emptyIllustration = {\n 'aria-label': '' as const,\n width: '80px',\n height: '60px',\n children: <SearchIllustration />,\n };\n\n const renderEmoji = (emoji: string) => {\n const displayed = applyModifier(emoji, skinToneModifier);\n return (\n <EmojiButton\n key={emoji}\n emoji={displayed}\n size=\"medium\"\n padding=\"compact\"\n aria-label={displayed}\n onMouseEnter={() => { setHoveredEmoji(displayed); setHoveredBase(emoji); }}\n onMouseLeave={() => { setHoveredEmoji(null); setHoveredBase(null); }}\n onClick={() => onEmojiSelect?.(displayed)}\n />\n );\n };\n\n const renderBody = () => {\n if (computedState === 'empty') {\n return (\n <EmptyState\n illustration={emptyIllustration}\n title=\"No emojis found\"\n description=\"Try a different search term.\"\n />\n );\n }\n\n if (computedState === 'search-results') {\n return (\n <div className={styles['emoji-popover__emoji-list']}>\n <div className={styles['emoji-popover__group']}>\n <MenuGroupHeading label=\"Search Results\" />\n <div className={styles['emoji-popover__emoji-row']}>\n {searchResults.map(renderEmoji)}\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div className={styles['emoji-popover__emoji-list']}>\n {categories.map((cat) => (\n <div key={cat.id} ref={(el) => { groupRefs.current[cat.id] = el; }} className={styles['emoji-popover__group']}>\n <MenuGroupHeading label={cat.label} />\n <div\n className={[\n styles['emoji-popover__emoji-row'],\n cat.wrap === false ? styles['emoji-popover__emoji-row--nowrap'] : '',\n ].filter(Boolean).join(' ')}\n >\n {cat.emojis.map(renderEmoji)}\n </div>\n </div>\n ))}\n </div>\n );\n };\n\n return (\n <div className={rootClass}>\n <div className={styles['emoji-popover__header']}>\n <div className={styles['emoji-popover__header-panels']}>\n <div\n className={[\n styles['emoji-popover__header-main'],\n showSkinTonePicker ? styles['emoji-popover__header-main--hidden'] : '',\n ].filter(Boolean).join(' ')}\n inert={showSkinTonePicker}\n aria-hidden={showSkinTonePicker \|\| undefined}\n >\n <div className={styles['emoji-popover__search-row']}>\n <SearchInput\n ref={searchRef}\n placeholder=\"Search emojis\"\n size=\"small\"\n className={styles['emoji-popover__search-input']}\n value={query}\n onChange={(e) => handleQueryChange(e.target.value)}\n onClear={() => handleQueryChange('')}\n />\n {!query && (\n <EmojiButton\n emoji={SKIN_TONES[skinToneIndex]}\n size=\"small\"\n aria-label=\"Select skin tone\"\n aria-expanded={showSkinTonePicker}\n aria-controls={skinTonePickerId}\n onClick={() => setShowSkinTonePicker(true)}\n />\n )}\n </div>\n </div>\n\n <div\n id={skinTonePickerId}\n className={[\n styles['emoji-popover__skin-tone-picker'],\n showSkinTonePicker ? styles['emoji-popover__skin-tone-picker--visible'] : '',\n ].filter(Boolean).join(' ')}\n inert={!showSkinTonePicker}\n aria-hidden={!showSkinTonePicker \|\| undefined}\n >\n <span className={styles['emoji-popover__skin-tone-label']}>Skin tone</span>\n <div className={styles['emoji-popover__skin-tone-options']}>\n {SKIN_TONES.map((emoji, i) => (\n <EmojiButton\n key={i}\n emoji={emoji}\n size=\"small\"\n toggled={skinToneIndex === i}\n aria-label={i === 0 ? 'Default skin tone' : `Skin tone ${i}`}\n onClick={() => { setSkinToneIndex(i); setShowSkinTonePicker(false); }}\n />\n ))}\n </div>\n <IconButton\n size=\"small\"\n padding=\"compact\"\n icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n aria-label=\"Close skin tone picker\"\n onClick={() => setShowSkinTonePicker(false)}\n />\n </div>\n </div>\n\n {!query && (\n <div className={styles['emoji-popover__categories']}>\n {categories.map((cat) => (\n <IconButton\n key={cat.id}\n size=\"small\"\n padding=\"compact\"\n icon={<Icon glyph={<cat.icon />} size=\"16\" />}\n aria-label={cat.label}\n active={activeCategoryId === cat.id}\n onClick={() => { setActiveCategoryId(cat.id); scrollToCategory(cat.id); }}\n />\n ))}\n </div>\n )}\n </div>\n\n <div className={styles['emoji-popover__scroll-view']}>\n {computedState === 'empty' ? (\n renderBody()\n ) : (\n <Scrollbar alwaysVisible ref={scrollRef}>{renderBody()}</Scrollbar>\n )}\n </div>\n\n <div className={styles['emoji-popover__footer']}>\n <div className={styles['emoji-popover__footer-preview']}>\n {hoveredEmoji ? (\n <>\n <Emoji emoji={hoveredEmoji} size='32' />\n <span className={styles['emoji-popover__footer-shortcode']}>\n {getShortcode(hoveredBase ?? '')}\n </span>\n </>\n ) : (\n <span className={styles['emoji-popover__footer-hint']}>\n Select an Emoji\n </span>\n )}\n </div>\n {onCustomEmojiClick && (\n <Button emphasis=\"tertiary\" size=\"small\" onClick={onCustomEmojiClick}>\n {customEmojiLabel}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"],"names":["SKIN_TONES","SKIN_TONE_MODIFIERS","MODIFIER_BASES","applyModifier","emoji","modifier","EmojiPopover","className","categories","shortcodes","defaultQuery","autoFocus","onEmojiSelect","onSearch","onCustomEmojiClick","customEmojiLabel","query","setQuery","useState","activeCategoryId","setActiveCategoryId","_a","hoveredEmoji","setHoveredEmoji","hoveredBase","setHoveredBase","skinToneIndex","setSkinToneIndex","showSkinTonePicker","setShowSkinTonePicker","searchRef","useRef","skinTonePickerId","useId","skinToneModifier","scrollRef","groupRefs","useEffect","handleQueryChange","next","allEmojis","c","searchResults","computedState","getShortcode","scrollToCategory","id","group","scroller","top","rootClass","styles","emptyIllustration","SearchIllustration","renderEmoji","displayed","jsx","EmojiButton","renderBody","EmptyState","jsxs","MenuGroupHeading","cat","el","SearchInput","i","IconButton","Icon","CloseIcon","Scrollbar","Fragment","Emoji","Button"],"mappings":"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"}
1	+ {"version":3,"file":"EmojiPopover.js","sources":["../../../src/components/emoji-popover/EmojiPopover.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Button from '@/components/button/Button';\nimport Emoji from '@/components/emoji/Emoji';\nimport EmojiButton from '@/components/emoji-button/EmojiButton';\nimport EmptyState from '@/components/empty-state/EmptyState';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport MenuGroupHeading from '@/components/menu-group-heading/MenuGroupHeading';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport SearchInput from '@/components/search-input/SearchInput';\nimport SearchIllustration from '@/illustrations/search';\nimport styles from './EmojiPopover.module.scss';\n\nexport interface EmojiCategory {\n id: string;\n label: string;\n /** Icon component rendered in the category navigation bar. /\n icon: ComponentType;\n emojis: string[];\n /* When false the row does not wrap (e.g. Recently Used). @default true /\n wrap?: boolean;\n}\n\nexport interface EmojiPopoverProps {\n className?: string;\n /* Emoji categories to display, supplied by the host. /\n categories: EmojiCategory[];\n /* Map of base emoji → shortcode name used for footer display. /\n shortcodes?: Record<string, string>;\n /* Pre-seeds the search field. Useful for static specimen demos. /\n defaultQuery?: string;\n /* Focus the search field on mount. /\n autoFocus?: boolean;\n /* Called with the selected emoji character. /\n onEmojiSelect?: (emoji: string) => void;\n /\n Called on every query change. Use this to trigger async custom-emoji\n * searches on the host side; local filtering over `categories` always runs.\n /\n onSearch?: (query: string) => void;\n /* Shows a tertiary button in the footer right. Omit to hide the button. /\n onCustomEmojiClick?: () => void;\n /* Label for the custom emoji button. @default 'Custom emoji' */\n customEmojiLabel?: string;\n}\n\nconst SKIN_TONES = ['🖐️', '🖐🏻', '🖐🏼', '🖐🏽', '🖐🏾', '🖐🏿'];\nconst SKIN_TONE_MODIFIERS = [\n '',\n '\\u{1F3FB}',\n '\\u{1F3FC}',\n '\\u{1F3FD}',\n '\\u{1F3FE}',\n '\\u{1F3FF}',\n];\n\nconst MODIFIER_BASES = new Set([\n '👋',\n '🤚',\n '✋',\n '🖐️',\n '🖖',\n '👌',\n '🤌',\n '🤏',\n '✌️',\n '🤞',\n '🫰',\n '🤟',\n '🤘',\n '🤙',\n '👈',\n '👉',\n '👆',\n '👇',\n '☝️',\n '🫵',\n '👍',\n '👎',\n '✊',\n '👊',\n '🤛',\n '🤜',\n '👏',\n '🙌',\n '🫶',\n '👐',\n '🤲',\n '🙏',\n '💅',\n '🤳',\n '💪',\n '🦵',\n '🦶',\n '👂',\n '🦻',\n '👃',\n]);\n\nfunction applyModifier(emoji: string, modifier: string): string {\n if (!modifier \|\| !MODIFIER_BASES.has(emoji)) return emoji;\n // Strip VS16 before the modifier so composed sequences render correctly\n return emoji.replace('️', '') + modifier;\n}\n\nexport default function EmojiPopover({\n className = '',\n categories,\n shortcodes = {},\n defaultQuery = '',\n autoFocus = false,\n onEmojiSelect,\n onSearch,\n onCustomEmojiClick,\n customEmojiLabel = 'Custom emoji',\n}: EmojiPopoverProps) {\n const [query, setQuery] = useState(defaultQuery);\n const [activeCategoryId, setActiveCategoryId] = useState(\n categories[0]?.id ?? '',\n );\n const [hoveredEmoji, setHoveredEmoji] = useState<string \| null>(null);\n const [hoveredBase, setHoveredBase] = useState<string \| null>(null);\n const [skinToneIndex, setSkinToneIndex] = useState(0);\n const [showSkinTonePicker, setShowSkinTonePicker] = useState(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const generatedId = useId();\n const skinTonePickerId = `${generatedId}-skin-tone-picker`;\n const skinToneModifier = SKIN_TONE_MODIFIERS[skinToneIndex];\n const scrollRef = useRef<HTMLDivElement>(null);\n const groupRefs = useRef<Record<string, HTMLDivElement \| null>>({});\n\n useEffect(() => {\n if (autoFocus) searchRef.current?.focus();\n }, [autoFocus]);\n\n const handleQueryChange = (next: string) => {\n setQuery(next);\n onSearch?.(next);\n };\n\n const allEmojis = [...new Set(categories.flatMap((c) => c.emojis))];\n const searchResults = query\n ? allEmojis.filter((emoji) => {\n const name = shortcodes[emoji] ?? '';\n return name.includes(query.toLowerCase()) \|\| emoji === query;\n })\n : [];\n\n const computedState = query\n ? searchResults.length > 0\n ? 'search-results'\n : 'empty'\n : 'default';\n\n function getShortcode(emoji: string): string {\n return shortcodes[emoji] ? `:${shortcodes[emoji]}:` : emoji;\n }\n\n function scrollToCategory(id: string) {\n const group = groupRefs.current[id];\n const scroller = scrollRef.current;\n if (!group \|\| !scroller) return;\n const top =\n group.getBoundingClientRect().top -\n scroller.getBoundingClientRect().top +\n scroller.scrollTop;\n scroller.scrollTo({ top, behavior: 'smooth' });\n }\n\n const rootClass = [styles['emoji-popover'], className]\n .filter(Boolean)\n .join(' ');\n\n const emptyIllustration = {\n 'aria-label': '' as const,\n width: '80px',\n height: '60px',\n children: <SearchIllustration />,\n };\n\n const renderEmoji = (emoji: string) => {\n const displayed = applyModifier(emoji, skinToneModifier);\n return (\n <EmojiButton\n key={emoji}\n emoji={displayed}\n size=\"medium\"\n padding=\"compact\"\n aria-label={displayed}\n onMouseEnter={() => {\n setHoveredEmoji(displayed);\n setHoveredBase(emoji);\n }}\n onMouseLeave={() => {\n setHoveredEmoji(null);\n setHoveredBase(null);\n }}\n onClick={() => onEmojiSelect?.(displayed)}\n />\n );\n };\n\n const renderBody = () => {\n if (computedState === 'empty') {\n return (\n <EmptyState\n illustration={emptyIllustration}\n title=\"No emojis found\"\n description=\"Try a different search term.\"\n />\n );\n }\n\n if (computedState === 'search-results') {\n return (\n <div className={styles['emoji-popover__emoji-list']}>\n <div className={styles['emoji-popover__group']}>\n <MenuGroupHeading label=\"Search Results\" />\n <div className={styles['emoji-popover__emoji-row']}>\n {searchResults.map(renderEmoji)}\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div className={styles['emoji-popover__emoji-list']}>\n {categories.map((cat) => (\n <div\n key={cat.id}\n ref={(el) => {\n groupRefs.current[cat.id] = el;\n }}\n className={styles['emoji-popover__group']}\n >\n <MenuGroupHeading label={cat.label} />\n <div\n className={[\n styles['emoji-popover__emoji-row'],\n cat.wrap === false\n ? styles['emoji-popover__emoji-row--nowrap']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {cat.emojis.map(renderEmoji)}\n </div>\n </div>\n ))}\n </div>\n );\n };\n\n return (\n <div className={rootClass}>\n <div className={styles['emoji-popover__header']}>\n <div className={styles['emoji-popover__header-panels']}>\n <div\n className={[\n styles['emoji-popover__header-main'],\n showSkinTonePicker\n ? styles['emoji-popover__header-main--hidden']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n inert={showSkinTonePicker}\n aria-hidden={showSkinTonePicker \|\| undefined}\n >\n <div className={styles['emoji-popover__search-row']}>\n <SearchInput\n ref={searchRef}\n placeholder=\"Search emojis\"\n size=\"small\"\n className={styles['emoji-popover__search-input']}\n value={query}\n onChange={(e) => handleQueryChange(e.target.value)}\n onClear={() => handleQueryChange('')}\n />\n {!query && (\n <EmojiButton\n emoji={SKIN_TONES[skinToneIndex]}\n size=\"small\"\n aria-label=\"Select skin tone\"\n aria-expanded={showSkinTonePicker}\n aria-controls={skinTonePickerId}\n onClick={() => setShowSkinTonePicker(true)}\n />\n )}\n </div>\n </div>\n\n <div\n id={skinTonePickerId}\n className={[\n styles['emoji-popover__skin-tone-picker'],\n showSkinTonePicker\n ? styles['emoji-popover__skin-tone-picker--visible']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n inert={!showSkinTonePicker}\n aria-hidden={!showSkinTonePicker \|\| undefined}\n >\n <span className={styles['emoji-popover__skin-tone-label']}>\n Skin tone\n </span>\n <div className={styles['emoji-popover__skin-tone-options']}>\n {SKIN_TONES.map((emoji, i) => (\n <EmojiButton\n key={i}\n emoji={emoji}\n size=\"small\"\n toggled={skinToneIndex === i}\n aria-label={i === 0 ? 'Default skin tone' : `Skin tone ${i}`}\n onClick={() => {\n setSkinToneIndex(i);\n setShowSkinTonePicker(false);\n }}\n />\n ))}\n </div>\n <IconButton\n size=\"small\"\n padding=\"compact\"\n icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n aria-label=\"Close skin tone picker\"\n onClick={() => setShowSkinTonePicker(false)}\n />\n </div>\n </div>\n\n {!query && (\n <div className={styles['emoji-popover__categories']}>\n {categories.map((cat) => (\n <IconButton\n key={cat.id}\n size=\"small\"\n padding=\"compact\"\n icon={<Icon glyph={<cat.icon />} size=\"16\" />}\n aria-label={cat.label}\n active={activeCategoryId === cat.id}\n onClick={() => {\n setActiveCategoryId(cat.id);\n scrollToCategory(cat.id);\n }}\n />\n ))}\n </div>\n )}\n </div>\n\n <div className={styles['emoji-popover__scroll-view']}>\n {computedState === 'empty' ? (\n renderBody()\n ) : (\n <Scrollbar alwaysVisible ref={scrollRef}>\n {renderBody()}\n </Scrollbar>\n )}\n </div>\n\n <div className={styles['emoji-popover__footer']}>\n <div className={styles['emoji-popover__footer-preview']}>\n {hoveredEmoji ? (\n <>\n <Emoji emoji={hoveredEmoji} size=\"32\" />\n <span className={styles['emoji-popover__footer-shortcode']}>\n {getShortcode(hoveredBase ?? '')}\n </span>\n </>\n ) : (\n <span className={styles['emoji-popover__footer-hint']}>\n Select an Emoji\n </span>\n )}\n </div>\n {onCustomEmojiClick && (\n <Button emphasis=\"tertiary\" size=\"small\" onClick={onCustomEmojiClick}>\n {customEmojiLabel}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"],"names":["SKIN_TONES","SKIN_TONE_MODIFIERS","MODIFIER_BASES","applyModifier","emoji","modifier","EmojiPopover","className","categories","shortcodes","defaultQuery","autoFocus","onEmojiSelect","onSearch","onCustomEmojiClick","customEmojiLabel","query","setQuery","useState","activeCategoryId","setActiveCategoryId","_a","hoveredEmoji","setHoveredEmoji","hoveredBase","setHoveredBase","skinToneIndex","setSkinToneIndex","showSkinTonePicker","setShowSkinTonePicker","searchRef","useRef","skinTonePickerId","useId","skinToneModifier","scrollRef","groupRefs","useEffect","handleQueryChange","next","allEmojis","c","searchResults","computedState","getShortcode","scrollToCategory","id","group","scroller","top","rootClass","styles","emptyIllustration","SearchIllustration","renderEmoji","displayed","jsx","EmojiButton","renderBody","EmptyState","jsxs","MenuGroupHeading","cat","el","SearchInput","i","IconButton","Icon","CloseIcon","Scrollbar","Fragment","Emoji","Button"],"mappings":"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"}

package/dist/components/empty-state/EmptyState.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.cjs","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps {\n /** Illustration props (children = the SVG component). Rendered above the title. /\n illustration?: IllustrationProps;\n /* Main heading ~~text~~. /\n title: ~~string~~;\n /* Body description. Supports ReactNode for inline formatting. /\n description?: ReactNode;\n /* Button props (children = label). Rendered below the description. /\n action?: ButtonProps;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n illustration,\n title,\n description,\n action,\n className = '',\n}: EmptyStateProps) {\n return (\n <Scrollbar\n className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n >\n <div className={styles['empty-state__container']}>\n {illustration != null && (\n <div className={styles['empty-state__illustration']}>\n <Illustration {...illustration} />\n </div>\n )}\n <div className={styles['empty-state__titles']}>\n <h2 className={styles['empty-state__title']}>{title}</h2>\n {description != null && (\n <p className={styles['empty-state__description']}>{description}</p>\n )}\n </div>\n {action != null && (\n <div className={styles['empty-state__action']}>\n <Button {...action} />\n </div>\n )}\n </div>\n </Scrollbar>\n );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":"mTA0BA,SAAwBA,EAAW,CACjC,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,EACd,EAAoB,CAClB,OACEC,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAW,CAACC,UAAO,aAAa,EAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEtE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,wBAAwB,EAC5C,SAAA,CAAAP,GAAgB,MACfK,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,2BAA2B,EAChD,SAAAF,EAAAA,IAACI,EAAAA,QAAA,CAAc,GAAGT,CAAA,CAAc,CAAA,CAClC,EAEFQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,qBAAqB,EAC1C,SAAA,CAAAF,MAAC,KAAA,CAAG,UAAWE,EAAAA,QAAO,oBAAoB,EAAI,SAAAN,EAAM,EACnDC,GAAe,MACdG,EAAAA,IAAC,IAAA,CAAE,UAAWE,EAAAA,QAAO,0BAA0B,EAAI,SAAAL,CAAA,CAAY,CAAA,EAEnE,EACCC,GAAU,MACTE,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,qBAAqB,EAC1C,SAAAF,EAAAA,IAACK,EAAAA,QAAA,CAAQ,GAAGP,CAAA,CAAQ,CAAA,CACtB,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN"}
1	+ {"version":3,"file":"EmptyState.cjs","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps {\n /** Illustration props (children = the SVG component). Rendered above the title. /\n illustration?: IllustrationProps;\n /* Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). /\n title: ReactNode;\n /* Body description. Supports ReactNode for inline formatting. /\n description?: ReactNode;\n /* Button props (children = label). Rendered below the description. /\n action?: ButtonProps;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n illustration,\n title,\n description,\n action,\n className = '',\n}: EmptyStateProps) {\n return (\n <Scrollbar\n className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n >\n <div className={styles['empty-state__container']}>\n {illustration != null && (\n <div className={styles['empty-state__illustration']}>\n <Illustration {...illustration} />\n </div>\n )}\n <div className={styles['empty-state__titles']}>\n <h2 className={styles['empty-state__title']}>{title}</h2>\n {description != null && (\n <p className={styles['empty-state__description']}>{description}</p>\n )}\n </div>\n {action != null && (\n <div className={styles['empty-state__action']}>\n <Button {...action} />\n </div>\n )}\n </div>\n </Scrollbar>\n );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":"mTA0BA,SAAwBA,EAAW,CACjC,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,EACd,EAAoB,CAClB,OACEC,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAW,CAACC,UAAO,aAAa,EAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEtE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,wBAAwB,EAC5C,SAAA,CAAAP,GAAgB,MACfK,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,2BAA2B,EAChD,SAAAF,EAAAA,IAACI,EAAAA,QAAA,CAAc,GAAGT,CAAA,CAAc,CAAA,CAClC,EAEFQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,qBAAqB,EAC1C,SAAA,CAAAF,MAAC,KAAA,CAAG,UAAWE,EAAAA,QAAO,oBAAoB,EAAI,SAAAN,EAAM,EACnDC,GAAe,MACdG,EAAAA,IAAC,IAAA,CAAE,UAAWE,EAAAA,QAAO,0BAA0B,EAAI,SAAAL,CAAA,CAAY,CAAA,EAEnE,EACCC,GAAU,MACTE,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,qBAAqB,EAC1C,SAAAF,EAAAA,IAACK,EAAAA,QAAA,CAAQ,GAAGP,CAAA,CAAQ,CAAA,CACtB,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN"}

package/dist/components/empty-state/EmptyState.d.ts CHANGED Viewed

@@ -4,8 +4,8 @@ import { IllustrationProps } from '../illustration/Illustration';
 export interface EmptyStateProps {
     /** Illustration props (children = the SVG component). Rendered above the title. */
     illustration?: IllustrationProps;
-    /** Main heading text. */
-    title: string;
+    /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
     /** Body description. Supports ReactNode for inline formatting. */
     description?: ReactNode;
     /** Button props (children = label). Rendered below the description. */

package/dist/components/empty-state/EmptyState.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,MAAM,WAAW,eAAe;IAC9B,mFAAmF;IACnF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,~~yBAAyB~~;~~IACzB~~,KAAK,EAAE,~~MAAM~~,CAAC;~~IACd~~,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uEAAuE;IACvE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAY,EACZ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAc,GACf,EAAE,eAAe,2CAyBjB"}
1	+ {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,MAAM,WAAW,eAAe;IAC9B,mFAAmF;IACnF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uEAAuE;IACvE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAY,EACZ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAc,GACf,EAAE,eAAe,2CAyBjB"}

package/dist/components/empty-state/EmptyState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps {\n /** Illustration props (children = the SVG component). Rendered above the title. /\n illustration?: IllustrationProps;\n /* Main heading ~~text~~. /\n title: ~~string~~;\n /* Body description. Supports ReactNode for inline formatting. /\n description?: ReactNode;\n /* Button props (children = label). Rendered below the description. /\n action?: ButtonProps;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n illustration,\n title,\n description,\n action,\n className = '',\n}: EmptyStateProps) {\n return (\n <Scrollbar\n className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n >\n <div className={styles['empty-state__container']}>\n {illustration != null && (\n <div className={styles['empty-state__illustration']}>\n <Illustration {...illustration} />\n </div>\n )}\n <div className={styles['empty-state__titles']}>\n <h2 className={styles['empty-state__title']}>{title}</h2>\n {description != null && (\n <p className={styles['empty-state__description']}>{description}</p>\n )}\n </div>\n {action != null && (\n <div className={styles['empty-state__action']}>\n <Button {...action} />\n </div>\n )}\n </div>\n </Scrollbar>\n );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":";;;;;AA0BA,SAAwBA,EAAW;AAAA,EACjC,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAoB;AAClB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,aAAa,GAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEtE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,QAAAP,KAAgB,QACf,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAO,2BAA2B,GAChD,UAAA,gBAAAF,EAACI,GAAA,EAAc,GAAGT,EAAA,CAAc,EAAA,CAClC;AAAA,QAEF,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAC1C,UAAA;AAAA,UAAA,gBAAAF,EAAC,MAAA,EAAG,WAAWE,EAAO,oBAAoB,GAAI,UAAAN,GAAM;AAAA,UACnDC,KAAe,QACd,gBAAAG,EAAC,KAAA,EAAE,WAAWE,EAAO,0BAA0B,GAAI,UAAAL,EAAA,CAAY;AAAA,QAAA,GAEnE;AAAA,QACCC,KAAU,QACT,gBAAAE,EAAC,OAAA,EAAI,WAAWE,EAAO,qBAAqB,GAC1C,UAAA,gBAAAF,EAACK,GAAA,EAAQ,GAAGP,EAAA,CAAQ,EAAA,CACtB;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps {\n /** Illustration props (children = the SVG component). Rendered above the title. /\n illustration?: IllustrationProps;\n /* Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). /\n title: ReactNode;\n /* Body description. Supports ReactNode for inline formatting. /\n description?: ReactNode;\n /* Button props (children = label). Rendered below the description. /\n action?: ButtonProps;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n illustration,\n title,\n description,\n action,\n className = '',\n}: EmptyStateProps) {\n return (\n <Scrollbar\n className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n >\n <div className={styles['empty-state__container']}>\n {illustration != null && (\n <div className={styles['empty-state__illustration']}>\n <Illustration {...illustration} />\n </div>\n )}\n <div className={styles['empty-state__titles']}>\n <h2 className={styles['empty-state__title']}>{title}</h2>\n {description != null && (\n <p className={styles['empty-state__description']}>{description}</p>\n )}\n </div>\n {action != null && (\n <div className={styles['empty-state__action']}>\n <Button {...action} />\n </div>\n )}\n </div>\n </Scrollbar>\n );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":";;;;;AA0BA,SAAwBA,EAAW;AAAA,EACjC,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAoB;AAClB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,aAAa,GAAGH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEtE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,QAAAP,KAAgB,QACf,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAO,2BAA2B,GAChD,UAAA,gBAAAF,EAACI,GAAA,EAAc,GAAGT,EAAA,CAAc,EAAA,CAClC;AAAA,QAEF,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAC1C,UAAA;AAAA,UAAA,gBAAAF,EAAC,MAAA,EAAG,WAAWE,EAAO,oBAAoB,GAAI,UAAAN,GAAM;AAAA,UACnDC,KAAe,QACd,gBAAAG,EAAC,KAAA,EAAE,WAAWE,EAAO,0BAA0B,GAAI,UAAAL,EAAA,CAAY;AAAA,QAAA,GAEnE;AAAA,QACCC,KAAU,QACT,gBAAAE,EAAC,OAAA,EAAI,WAAWE,EAAO,qBAAqB,GAC1C,UAAA,gBAAAF,EAACK,GAAA,EAAQ,GAAGP,EAAA,CAAQ,EAAA,CACtB;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/error-message/ErrorMessage.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorMessage.cjs","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps {\n /** Optional CSS class name. /\n className?: string;\n /* The error message ~~text~~ to ~~display~~. /\n message: ~~string~~;\n}\n\n/\n Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n className = '',\n message,\n}: ErrorMessageProps) {\n const rootClass = [styles['error-message'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} role=\"alert\">\n <span className={styles['error-message__icon']} aria-hidden>\n <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n </span>\n <span className={styles['error-message__text']}>{message}</span>\n </div>\n );\n}\n"],"names":["ErrorMessage","className","message","rootClass","styles","jsxs","jsx","Icon","AlertCircleOutlineIcon"],"mappings":"~~kSAgBA~~,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,CACF,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,KAAK,QAC9B,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,QACC,OAAA,CAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAI,SAAAF,CAAA,CAAQ,CAAA,EAC3D,CAEJ"}
1	+ {"version":3,"file":"ErrorMessage.cjs","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps {\n /** Optional CSS class name. /\n className?: string;\n /* The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). /\n message: ReactNode;\n}\n\n/\n Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n className = '',\n message,\n}: ErrorMessageProps) {\n const rootClass = [styles['error-message'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} role=\"alert\">\n <span className={styles['error-message__icon']} aria-hidden>\n <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n </span>\n <span className={styles['error-message__text']}>{message}</span>\n </div>\n );\n}\n"],"names":["ErrorMessage","className","message","rootClass","styles","jsxs","jsx","Icon","AlertCircleOutlineIcon"],"mappings":"kSAiBA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,CACF,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,KAAK,QAC9B,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,QACC,OAAA,CAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAI,SAAAF,CAAA,CAAQ,CAAA,EAC3D,CAEJ"}

package/dist/components/error-message/ErrorMessage.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 export interface ErrorMessageProps {
     /** Optional CSS class name. */
     className?: string;
-    /** The error message text to display. */
-    message: string;
+    /** The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    message: ReactNode;
 }
 /**
  * Error Message is the inline red error line that appears below a form input when validation

package/dist/components/error-message/ErrorMessage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"names":[],"mappings":"~~AAIA~~,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,~~yCAAyC~~;~~IACzC~~,OAAO,EAAE,~~MAAM~~,CAAC;~~CACjB~~;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,GACR,EAAE,iBAAiB,2CAanB"}
1	+ {"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,OAAO,EAAE,SAAS,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,GACR,EAAE,iBAAiB,2CAanB"}

package/dist/components/error-message/ErrorMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorMessage.js","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps {\n /** Optional CSS class name. /\n className?: string;\n /* The error message ~~text~~ to ~~display~~. /\n message: ~~string~~;\n}\n\n/\n Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n className = '',\n message,\n}: ErrorMessageProps) {\n const rootClass = [styles['error-message'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} role=\"alert\">\n <span className={styles['error-message__icon']} aria-hidden>\n <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n </span>\n <span className={styles['error-message__text']}>{message}</span>\n </div>\n );\n}\n"],"names":["ErrorMessage","className","message","rootClass","styles","jsxs","jsx","Icon","AlertCircleOutlineIcon"],"mappings":";;;;~~AAgBA~~,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AACF,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAW,MAAK,SAC9B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,sBACC,QAAA,EAAK,WAAWJ,EAAO,qBAAqB,GAAI,UAAAF,EAAA,CAAQ;AAAA,EAAA,GAC3D;AAEJ;"}
1	+ {"version":3,"file":"ErrorMessage.js","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps {\n /** Optional CSS class name. /\n className?: string;\n /* The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). /\n message: ReactNode;\n}\n\n/\n Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n className = '',\n message,\n}: ErrorMessageProps) {\n const rootClass = [styles['error-message'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} role=\"alert\">\n <span className={styles['error-message__icon']} aria-hidden>\n <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n </span>\n <span className={styles['error-message__text']}>{message}</span>\n </div>\n );\n}\n"],"names":["ErrorMessage","className","message","rootClass","styles","jsxs","jsx","Icon","AlertCircleOutlineIcon"],"mappings":";;;;AAiBA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AACF,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAW,MAAK,SAC9B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,sBACC,QAAA,EAAK,WAAWJ,EAAO,qBAAqB,GAAI,UAAAF,EAAA,CAAQ;AAAA,EAAA,GAC3D;AAEJ;"}

package/dist/components/icon/Icon.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import c, { createContext as m, useContext as f } from "react";
+import c, { useContext as m, createContext as f } from "react";
 import __S from "@mattermost/compass-icons/components/emoticon-happy-outline.js";const S=__S&&__S.default?__S.default:__S;
 import e from "./Icon.module.scss.js";
 const C = {
@@ -14,7 +14,7 @@ const C = {
   52: 60,
   64: 72,
   104: 120
-}, _ = m(null), x = () => f(_), I = {
+}, _ = f(null), x = () => m(_), I = {
   10: e["icon--size-10"],
   12: e["icon--size-12"],
   16: e["icon--size-16"],

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' \| 'small' \| 'medium' \| 'large';\n\n/** Figma \"Style\": Default (light context) \| Inverted (dark context). /\nexport type IconButtonStyle = 'default' \| 'inverted';\n\nexport type IconButtonPadding = 'default' \| 'compact';\n\nexport interface IconButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'style'\n> {\n /* When true, forces the subtler pressed/active visual (lighter than toggled). /\n active?: boolean;\n /* Optional CSS class name. /\n className?: string;\n /* Numeric count shown inline after the icon. Figma: Count. /\n count?: number;\n /* When true, uses destructive (danger) styling. Figma: Destructive. /\n destructive?: boolean;\n /* Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. /\n icon: ReactNode;\n /* When true, shows a Spinner in place of the icon and disables the button. /\n loading?: boolean;\n /* Padding variant. Figma: Padding = Default \| Compact. /\n padding?: IconButtonPadding;\n /* When true, uses full border radius (pill). Figma: Rounded = On. /\n rounded?: boolean;\n /* Size variant. Figma: Size. Default: Medium. /\n size?: IconButtonSize;\n /* Default \| Inverted. Figma: Style (for light vs dark backgrounds). /\n style?: IconButtonStyle;\n /* When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. /\n toggled?: boolean;\n /* When true, shows a small unread dot over the icon. Figma: Unread Badge. /\n unreadBadge?: boolean;\n}\n\n/\n @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n /\nexport const ICON_BUTTON_ICON_SIZES: Record<\n IconButtonSize,\n '12' \| '16' \| '20' \| '24'\n> = {\n 'x-small': '12',\n small: '16',\n medium: '20',\n large: '24',\n};\n\n/\n Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\~~nexport~~ ~~default~~ function IconButton({\n active = false,\n className = '',\n count,\n destructive = false,\n icon,\n loading = false,\n padding = 'default',\n rounded = false,\n size = 'medium',\n style = 'default',\n toggled,\n unreadBadge = false,\n disabled,\n type = 'button',\n 'aria-label': ariaLabel,\n ...rest\n}~~: IconButtonProps~~) {\n const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n const paddingClass =\n padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n const styleClass =\n style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n const destructiveClass = destructive\n ? styles['icon-button--destructive']\n : '';\n const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n const activeClass = active ? styles['icon-button--active'] : '';\n const hasCount = count !== undefined;\n const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n const rootClass = [\n styles['icon-button'],\n sizeClass,\n paddingClass,\n styleClass,\n destructiveClass,\n roundedClass,\n toggledClass,\n activeClass,\n hasCountClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n return (\n <button\n className={rootClass}\n type={type}\n disabled={disabled \|\| loading}\n aria-label={ariaLabel}\n aria-pressed={toggled === undefined ? undefined : toggled}\n data-active={active ? 'true' : undefined}\n {...rest}\n >\n <span className={styles['icon-button__icon-slot']} aria-hidden>\n {loading\n ? <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n : <IconSlotContext.Provider value={{ size: spinnerSize }}>{icon}</IconSlotContext.Provider>}\n {unreadBadge && !loading && (\n <span className={styles['icon-button__unread-badge']} />\n )}\n </span>\n {hasCount && (\n <span className={styles['icon-button__count']}>{count}</span>\n )}\n </button>\n );\n}\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":"~~iSA~~+CaA,EAGT,CACF,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,~~EAQA~~,~~SAAwBC~~,~~EAAW~~,~~CACjC~~,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,QAAAC,EAAU,GACV,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EACA,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,~~CACL~~,~~EAAoB~~,~~CAClB~~,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,~~QAAQV~~,CAAI,CAAC,EAAE,~~EACvDW~~,~~EACJb~~,IAAY,~~UAAYW~~,EAAAA,QAAO,8BAA8B,EAAI,GAC7DG,~~EACJX~~,IAAU,~~WAAaQ~~,EAAAA,QAAO,6BAA6B,EAAI,GAC3DI,~~EAAmBlB~~,~~EACrBc~~,UAAO,0BAA0B,EACjC,GACEK,~~EAAef~~,~~EAAUU~~,UAAO,sBAAsB,EAAI,GAC1DM,~~EAAeb~~,~~EAAUO~~,UAAO,sBAAsB,EAAI,GAC1DO,~~EAAcxB~~,~~EAASiB~~,UAAO,qBAAqB,EAAI,GACvDQ,~~EAAWvB~~,IAAU,~~OACrBwB~~,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,~~EACAzB~~,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,~~EAEL2B~~,~~EAAc9B~~,~~EAAuBU~~,CAAI,EAE/C,~~OACEqB~~,EAAAA,KAAC,SAAA,CACC,~~UAAWF~~,EACX,~~KAAAd~~,EACA,SAAUD,GAAYP,EACtB,aAAYS,EACZ,eAAcJ,IAAY,OAAY,OAAYA,EAClD,cAAaV,EAAS,OAAS,OAC9B,GAAGe,EAEJ,SAAA,~~CAAAc~~,OAAC,QAAK,UAAWZ,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,~~CAAAZ~~,~~QACIyB~~,EAAAA,QAAA,CAAQ,KAAMF,EAAa,~~SAAUnB~~,IAAU,WAAY,~~EAC5DsB~~,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMJ,CAAA,~~EAAgB~~,~~SAAAxB~~,~~EAAK~~,~~EACjEO~~,GAAe,CAACN,~~GACf0B~~,MAAC,QAAK,UAAWd,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCM,EAAAA,IAAC,OAAA,CAAK,UAAWd,EAAAA,QAAO,oBAAoB,EAAI,~~SAAAf~~,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D"}
1	+ {"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' \| 'small' \| 'medium' \| 'large';\n\n/** Figma \"Style\": Default (light context) \| Inverted (dark context). /\nexport type IconButtonStyle = 'default' \| 'inverted';\n\nexport type IconButtonPadding = 'default' \| 'compact';\n\nexport interface IconButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'style'\n> {\n /* When true, forces the subtler pressed/active visual (lighter than toggled). /\n active?: boolean;\n /* Optional CSS class name. /\n className?: string;\n /* Numeric count shown inline after the icon. Figma: Count. /\n count?: number;\n /* When true, uses destructive (danger) styling. Figma: Destructive. /\n destructive?: boolean;\n /* Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. /\n icon: ReactNode;\n /* When true, shows a Spinner in place of the icon and disables the button. /\n loading?: boolean;\n /* Padding variant. Figma: Padding = Default \| Compact. /\n padding?: IconButtonPadding;\n /* When true, uses full border radius (pill). Figma: Rounded = On. /\n rounded?: boolean;\n /* Size variant. Figma: Size. Default: Medium. /\n size?: IconButtonSize;\n /* Default \| Inverted. Figma: Style (for light vs dark backgrounds). /\n style?: IconButtonStyle;\n /* When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. /\n toggled?: boolean;\n /* When true, shows a small unread dot over the icon. Figma: Unread Badge. /\n unreadBadge?: boolean;\n}\n\n/\n @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n /\nexport const ICON_BUTTON_ICON_SIZES: Record<\n IconButtonSize,\n '12' \| '16' \| '20' \| '24'\n> = {\n 'x-small': '12',\n small: '16',\n medium: '20',\n large: '24',\n};\n\n/\n Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n function IconButton(\n {\n active = false,\n className = '',\n count,\n destructive = false,\n icon,\n loading = false,\n padding = 'default',\n rounded = false,\n size = 'medium',\n style = 'default',\n toggled,\n unreadBadge = false,\n disabled,\n type = 'button',\n 'aria-label': ariaLabel,\n ...rest\n },\n ref,\n ) {\n const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n const paddingClass =\n padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n const styleClass =\n style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n const destructiveClass = destructive\n ? styles['icon-button--destructive']\n : '';\n const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n const activeClass = active ? styles['icon-button--active'] : '';\n const hasCount = count !== undefined;\n const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n const rootClass = [\n styles['icon-button'],\n sizeClass,\n paddingClass,\n styleClass,\n destructiveClass,\n roundedClass,\n toggledClass,\n activeClass,\n hasCountClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n disabled={disabled \|\| loading}\n aria-label={ariaLabel}\n aria-pressed={toggled === undefined ? undefined : toggled}\n data-active={active ? 'true' : undefined}\n {...rest}\n >\n <span className={styles['icon-button__icon-slot']} aria-hidden>\n {loading ? (\n <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n ) : (\n <IconSlotContext.Provider value={{ size: spinnerSize }}>\n {icon}\n </IconSlotContext.Provider>\n )}\n {unreadBadge && !loading && (\n <span className={styles['icon-button__unread-badge']} />\n )}\n </span>\n {hasCount && (\n <span className={styles['icon-button__count']}>{count}</span>\n )}\n </button>\n );\n },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","forwardRef","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","ref","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":"oTA+CaA,EAGT,CACF,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAQMC,EAAaC,EAAAA,WACjB,SACE,CACE,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,QAAAC,EAAU,GACV,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,UACR,QAAAC,EACA,YAAAC,EAAc,GACd,SAAAC,EACA,KAAAC,EAAO,SACP,aAAcC,EACd,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQX,CAAI,CAAC,EAAE,EACvDY,EACJd,IAAY,UAAYY,EAAAA,QAAO,8BAA8B,EAAI,GAC7DG,EACJZ,IAAU,WAAaS,EAAAA,QAAO,6BAA6B,EAAI,GAC3DI,EAAmBnB,EACrBe,UAAO,0BAA0B,EACjC,GACEK,EAAehB,EAAUW,UAAO,sBAAsB,EAAI,GAC1DM,EAAed,EAAUQ,UAAO,sBAAsB,EAAI,GAC1DO,EAAczB,EAASkB,UAAO,qBAAqB,EAAI,GACvDQ,EAAWxB,IAAU,OACrByB,EAAgBD,EAAWR,UAAO,wBAAwB,EAAI,GAE9DU,EAAY,CAChBV,EAAAA,QAAO,aAAa,EACpBD,EACAG,EACAC,EACAC,EACAC,EACAC,EACAC,EACAE,EACA1B,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL4B,EAAchC,EAAuBW,CAAI,EAE/C,OACEsB,EAAAA,KAAC,SAAA,CACC,IAAAd,EACA,UAAWY,EACX,KAAAf,EACA,SAAUD,GAAYP,EACtB,aAAYS,EACZ,eAAcJ,IAAY,OAAY,OAAYA,EAClD,cAAaV,EAAS,OAAS,OAC9B,GAAGe,EAEJ,SAAA,CAAAe,OAAC,QAAK,UAAWZ,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAC3D,SAAA,CAAAb,QACE0B,EAAAA,QAAA,CAAQ,KAAMF,EAAa,SAAUpB,IAAU,WAAY,EAE5DuB,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMJ,CAAA,EACtC,SAAAzB,EACH,EAEDO,GAAe,CAACN,GACf2B,MAAC,QAAK,UAAWd,EAAAA,QAAO,2BAA2B,CAAA,CAAG,CAAA,EAE1D,EACCQ,GACCM,EAAAA,IAAC,OAAA,CAAK,UAAWd,EAAAA,QAAO,oBAAoB,EAAI,SAAAhB,CAAA,CAAM,CAAA,CAAA,CAAA,CAI9D,CACF,EAEAJ,EAAW,YAAc"}

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

@@ -40,5 +40,6 @@ export declare const ICON_BUTTON_ICON_SIZES: Record<IconButtonSize, '12' | '16'
  * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the
  * action explicit.
  */
-export default function IconButton({ active, className, count, destructive, icon, loading, padding, rounded, size, style, toggled, unreadBadge, disabled, type, 'aria-label': ariaLabel, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' \| 'small' \| 'medium' \| 'large';\n\n/** Figma \"Style\": Default (light context) \| Inverted (dark context). /\nexport type IconButtonStyle = 'default' \| 'inverted';\n\nexport type IconButtonPadding = 'default' \| 'compact';\n\nexport interface IconButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'style'\n> {\n /* When true, forces the subtler pressed/active visual (lighter than toggled). /\n active?: boolean;\n /* Optional CSS class name. /\n className?: string;\n /* Numeric count shown inline after the icon. Figma: Count. /\n count?: number;\n /* When true, uses destructive (danger) styling. Figma: Destructive. /\n destructive?: boolean;\n /* Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. /\n icon: ReactNode;\n /* When true, shows a Spinner in place of the icon and disables the button. /\n loading?: boolean;\n /* Padding variant. Figma: Padding = Default \| Compact. /\n padding?: IconButtonPadding;\n /* When true, uses full border radius (pill). Figma: Rounded = On. /\n rounded?: boolean;\n /* Size variant. Figma: Size. Default: Medium. /\n size?: IconButtonSize;\n /* Default \| Inverted. Figma: Style (for light vs dark backgrounds). /\n style?: IconButtonStyle;\n /* When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. /\n toggled?: boolean;\n /* When true, shows a small unread dot over the icon. Figma: Unread Badge. /\n unreadBadge?: boolean;\n}\n\n/\n @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n /\nexport const ICON_BUTTON_ICON_SIZES: Record<\n IconButtonSize,\n '12' \| '16' \| '20' \| '24'\n> = {\n 'x-small': '12',\n small: '16',\n medium: '20',\n large: '24',\n};\n\n/\n Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\~~nexport~~ ~~default~~ function IconButton({\n active = false,\n className = '',\n count,\n destructive = false,\n icon,\n loading = false,\n padding = 'default',\n rounded = false,\n size = 'medium',\n style = 'default',\n toggled,\n unreadBadge = false,\n disabled,\n type = 'button',\n 'aria-label': ariaLabel,\n ...rest\n}~~: IconButtonProps~~) {\n const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n const paddingClass =\n padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n const styleClass =\n style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n const destructiveClass = destructive\n ? styles['icon-button--destructive']\n : '';\n const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n const activeClass = active ? styles['icon-button--active'] : '';\n const hasCount = count !== undefined;\n const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n const rootClass = [\n styles['icon-button'],\n sizeClass,\n paddingClass,\n styleClass,\n destructiveClass,\n roundedClass,\n toggledClass,\n activeClass,\n hasCountClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n return (\n <button\n className={rootClass}\n type={type}\n disabled={disabled \|\| loading}\n aria-label={ariaLabel}\n aria-pressed={toggled === undefined ? undefined : toggled}\n data-active={active ? 'true' : undefined}\n {...rest}\n >\n <span className={styles['icon-button__icon-slot']} aria-hidden>\n {loading\n ? <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n : <IconSlotContext.Provider value={{ size: spinnerSize }}>{icon}</IconSlotContext.Provider>}\n {unreadBadge && !loading && (\n <span className={styles['icon-button__unread-badge']} />\n )}\n </span>\n {hasCount && (\n <span className={styles['icon-button__count']}>{count}</span>\n )}\n </button>\n );\n}\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":"~~;;;;;~~AA+CO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;~~AAQA~~,~~SAAwBC~~,~~EAAW~~;AAAA,~~EACjC~~,QAAAC,IAAS;AAAA,~~EACT~~,WAAAC,IAAY;AAAA,~~EACZ~~,OAAAC;AAAA,~~EACA~~,aAAAC,IAAc;AAAA,~~EACd~~,MAAAC;AAAA,~~EACA~~,SAAAC,IAAU;AAAA,~~EACV~~,SAAAC,IAAU;AAAA,~~EACV~~,SAAAC,IAAU;AAAA,~~EACV~~,MAAAC,IAAO;AAAA,~~EACP~~,OAAAC,IAAQ;AAAA,~~EACR~~,SAAAC;AAAA,~~EACA~~,aAAAC,IAAc;AAAA,~~EACd~~,UAAAC;AAAA,~~EACA~~,MAAAC,IAAO;AAAA,~~EACP~~,cAAcC;AAAA,~~EACd~~,GAAGC;~~AACL~~,~~GAAoB~~;~~AAClB~~,~~QAAMC~~,IAAYC,EAAO,qBAAqBC,~~EAAQV~~,CAAI,CAAC,EAAE,~~GACvDW~~,~~IACJb~~,MAAY,~~YAAYW~~,EAAO,8BAA8B,IAAI,IAC7DG,~~IACJX~~,MAAU,~~aAAaQ~~,EAAO,6BAA6B,IAAI,IAC3DI,~~IAAmBlB~~,~~IACrBc~~,EAAO,0BAA0B,IACjC,IACEK,~~IAAef~~,~~IAAUU~~,EAAO,sBAAsB,IAAI,IAC1DM,~~IAAeb~~,~~IAAUO~~,EAAO,sBAAsB,IAAI,IAC1DO,~~IAAcxB~~,~~IAASiB~~,EAAO,qBAAqB,IAAI,IACvDQ,~~IAAWvB~~,MAAU,~~QACrBwB~~,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,~~IAChBV~~,EAAO,aAAa;AAAA,~~IACpBD~~;AAAA,~~IACAG~~;AAAA,~~IACAC~~;AAAA,~~IACAC~~;AAAA,~~IACAC~~;AAAA,~~IACAC~~;AAAA,~~IACAC~~;AAAA,~~IACAE~~;AAAA,~~IACAzB~~;AAAA,~~EAAA~~,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,~~GAEL2B~~,~~IAAc9B~~,~~EAAuBU~~,CAAI;AAE/C,~~SACE~~,~~gBAAAqB~~;AAAA,~~IAAC~~;AAAA,~~IAAA~~;AAAA,~~MACC~~,~~WAAWF~~;AAAA,~~MACX~~,~~MAAAd~~;AAAA,~~MACA~~,UAAUD,KAAYP;AAAA,~~MACtB~~,cAAYS;AAAA,~~MACZ~~,gBAAcJ,MAAY,SAAY,SAAYA;AAAA,~~MAClD~~,eAAaV,IAAS,SAAS;AAAA,~~MAC9B~~,GAAGe;AAAA,~~MAEJ~~,UAAA;AAAA,~~QAAA~~,~~gBAAAc~~,EAAC,UAAK,WAAWZ,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,~~UAAAZ~~,~~sBACIyB~~,GAAA,EAAQ,MAAMF,GAAa,~~UAAUnB~~,MAAU,YAAY,~~IAC5D~~,~~gBAAAsB~~,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMJ,EAAA,~~GAAgB~~,~~UAAAxB~~,~~GAAK~~;AAAA,~~UACjEO~~,KAAe,CAACN,KACf,~~gBAAA0B~~,EAAC,UAAK,WAAWd,EAAO,2BAA2B,EAAA,CAAG;AAAA,~~QAAA~~,GAE1D;AAAA,~~QACCQ~~,KACC,gBAAAM,EAAC,QAAA,EAAK,WAAWd,EAAO,oBAAoB,GAAI,~~UAAAf~~,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,~~EAAA~~;~~AAI9D~~;"}
1	+ {"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './IconButton.module.scss';\n\nexport type IconButtonSize = 'x-small' \| 'small' \| 'medium' \| 'large';\n\n/** Figma \"Style\": Default (light context) \| Inverted (dark context). /\nexport type IconButtonStyle = 'default' \| 'inverted';\n\nexport type IconButtonPadding = 'default' \| 'compact';\n\nexport interface IconButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'style'\n> {\n /* When true, forces the subtler pressed/active visual (lighter than toggled). /\n active?: boolean;\n /* Optional CSS class name. /\n className?: string;\n /* Numeric count shown inline after the icon. Figma: Count. /\n count?: number;\n /* When true, uses destructive (danger) styling. Figma: Destructive. /\n destructive?: boolean;\n /* Icon to show. Pass `<Icon glyph={<YourIcon />} />` — IconButton provides the correct size via context; no `size` prop needed on the Icon. /\n icon: ReactNode;\n /* When true, shows a Spinner in place of the icon and disables the button. /\n loading?: boolean;\n /* Padding variant. Figma: Padding = Default \| Compact. /\n padding?: IconButtonPadding;\n /* When true, uses full border radius (pill). Figma: Rounded = On. /\n rounded?: boolean;\n /* Size variant. Figma: Size. Default: Medium. /\n size?: IconButtonSize;\n /* Default \| Inverted. Figma: Style (for light vs dark backgrounds). /\n style?: IconButtonStyle;\n /* When true, shows toggled/selected state. Figma: Toggled = On. When omitted, the control is not a toggle. /\n toggled?: boolean;\n /* When true, shows a small unread dot over the icon. Figma: Unread Badge. /\n unreadBadge?: boolean;\n}\n\n/\n @deprecated No longer needed — IconButton sets the icon size via context.\n * Pass `<Icon glyph={<YourIcon />} />` without a size prop.\n /\nexport const ICON_BUTTON_ICON_SIZES: Record<\n IconButtonSize,\n '12' \| '16' \| '20' \| '24'\n> = {\n 'x-small': '12',\n small: '16',\n medium: '20',\n large: '24',\n};\n\n/\n Icon Buttons are compact, label-free actions for tight surfaces — channel headers, message\n * hover actions, modal dismissals, toolbar slots. They lean on the icon to communicate\n * intent, so every Icon Button must pair with a tooltip or `aria-label` that makes the\n * action explicit.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n function IconButton(\n {\n active = false,\n className = '',\n count,\n destructive = false,\n icon,\n loading = false,\n padding = 'default',\n rounded = false,\n size = 'medium',\n style = 'default',\n toggled,\n unreadBadge = false,\n disabled,\n type = 'button',\n 'aria-label': ariaLabel,\n ...rest\n },\n ref,\n ) {\n const sizeClass = styles[`icon-button--size-${toKebab(size)}`];\n const paddingClass =\n padding === 'compact' ? styles['icon-button--padding-compact'] : '';\n const styleClass =\n style === 'inverted' ? styles['icon-button--style-inverted'] : '';\n const destructiveClass = destructive\n ? styles['icon-button--destructive']\n : '';\n const roundedClass = rounded ? styles['icon-button--rounded'] : '';\n const toggledClass = toggled ? styles['icon-button--toggled'] : '';\n const activeClass = active ? styles['icon-button--active'] : '';\n const hasCount = count !== undefined;\n const hasCountClass = hasCount ? styles['icon-button--has-count'] : '';\n\n const rootClass = [\n styles['icon-button'],\n sizeClass,\n paddingClass,\n styleClass,\n destructiveClass,\n roundedClass,\n toggledClass,\n activeClass,\n hasCountClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const spinnerSize = ICON_BUTTON_ICON_SIZES[size];\n\n return (\n <button\n ref={ref}\n className={rootClass}\n type={type}\n disabled={disabled \|\| loading}\n aria-label={ariaLabel}\n aria-pressed={toggled === undefined ? undefined : toggled}\n data-active={active ? 'true' : undefined}\n {...rest}\n >\n <span className={styles['icon-button__icon-slot']} aria-hidden>\n {loading ? (\n <Spinner size={spinnerSize} inverted={style === 'inverted'} />\n ) : (\n <IconSlotContext.Provider value={{ size: spinnerSize }}>\n {icon}\n </IconSlotContext.Provider>\n )}\n {unreadBadge && !loading && (\n <span className={styles['icon-button__unread-badge']} />\n )}\n </span>\n {hasCount && (\n <span className={styles['icon-button__count']}>{count}</span>\n )}\n </button>\n );\n },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["ICON_BUTTON_ICON_SIZES","IconButton","forwardRef","active","className","count","destructive","icon","loading","padding","rounded","size","style","toggled","unreadBadge","disabled","type","ariaLabel","rest","ref","sizeClass","styles","toKebab","paddingClass","styleClass","destructiveClass","roundedClass","toggledClass","activeClass","hasCount","hasCountClass","rootClass","spinnerSize","jsxs","Spinner","jsx","IconSlotContext"],"mappings":";;;;;;AA+CO,MAAMA,IAGT;AAAA,EACF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAQMC,IAAaC;AAAA,EACjB,SACE;AAAA,IACE,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAYC,EAAO,qBAAqBC,EAAQX,CAAI,CAAC,EAAE,GACvDY,IACJd,MAAY,YAAYY,EAAO,8BAA8B,IAAI,IAC7DG,IACJZ,MAAU,aAAaS,EAAO,6BAA6B,IAAI,IAC3DI,IAAmBnB,IACrBe,EAAO,0BAA0B,IACjC,IACEK,IAAehB,IAAUW,EAAO,sBAAsB,IAAI,IAC1DM,IAAed,IAAUQ,EAAO,sBAAsB,IAAI,IAC1DO,IAAczB,IAASkB,EAAO,qBAAqB,IAAI,IACvDQ,IAAWxB,MAAU,QACrByB,IAAgBD,IAAWR,EAAO,wBAAwB,IAAI,IAE9DU,IAAY;AAAA,MAChBV,EAAO,aAAa;AAAA,MACpBD;AAAA,MACAG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAE;AAAA,MACA1B;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEL4B,IAAchC,EAAuBW,CAAI;AAE/C,WACE,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAd;AAAA,QACA,WAAWY;AAAA,QACX,MAAAf;AAAA,QACA,UAAUD,KAAYP;AAAA,QACtB,cAAYS;AAAA,QACZ,gBAAcJ,MAAY,SAAY,SAAYA;AAAA,QAClD,eAAaV,IAAS,SAAS;AAAA,QAC9B,GAAGe;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAe,EAAC,UAAK,WAAWZ,EAAO,wBAAwB,GAAG,eAAW,IAC3D,UAAA;AAAA,YAAAb,sBACE0B,GAAA,EAAQ,MAAMF,GAAa,UAAUpB,MAAU,YAAY,IAE5D,gBAAAuB,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMJ,EAAA,GACtC,UAAAzB,GACH;AAAA,YAEDO,KAAe,CAACN,KACf,gBAAA2B,EAAC,UAAK,WAAWd,EAAO,2BAA2B,EAAA,CAAG;AAAA,UAAA,GAE1D;AAAA,UACCQ,KACC,gBAAAM,EAAC,QAAA,EAAK,WAAWd,EAAO,oBAAoB,GAAI,UAAAhB,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAI9D;AACF;AAEAJ,EAAW,cAAc;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImagePreview.cjs","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' \| '4:3' \| '1:1';\n\nexport interface ImagePreviewProps {\n /** Image src URL. /\n src: string;\n /* Alt text. /\n alt?: string;\n /* Whether the preview is collapsed (shows toggle label only). /\n collapsed?: boolean;\n /* Callback when the collapse toggle is clicked. /\n onToggleCollapse?: () => void;\n /* Callback when the copy-link action is clicked. /\n onCopyLink?: () => void;\n /* Callback when the download action is clicked. /\n onDownload?: () => void;\n /* Aspect ratio of the image container. Default: 16:9 /\n aspectRatio?: ImagePreviewAspectRatio;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n src,\n alt = '',\n collapsed = false,\n onToggleCollapse,\n onCopyLink,\n onDownload,\n aspectRatio = '16:9',\n className = '',\n}: ImagePreviewProps) {\n const frameTransition = usePopoverTransition(!collapsed);\n const labelTransition = usePopoverTransition(collapsed);\n const showTriggerRef = useRef<HTMLButtonElement>(null);\n const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n const keyboardToggleRef = useRef(false);\n\n const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n keyboardToggleRef.current = true;\n }\n };\n\n useEffect(() => {\n if (!keyboardToggleRef.current) return;\n\n if (collapsed) {\n if (!labelTransition.mounted \|\| !showTriggerRef.current) return;\n keyboardToggleRef.current = false;\n showTriggerRef.current.focus();\n return;\n }\n\n if (!frameTransition.mounted \|\| !collapseTriggerRef.current) return;\n keyboardToggleRef.current = false;\n collapseTriggerRef.current.focus();\n }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n const rootClass = [\n styles['image-preview'],\n collapsed ? styles['image-preview--collapsed'] : '',\n aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['image-preview__stage']}>\n {labelTransition.mounted && (\n <button\n ref={showTriggerRef}\n type=\"button\"\n className={[\n styles['image-preview__collapsed-trigger'],\n labelTransition.visible\n ? styles['image-preview__collapsed-trigger--visible']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={onToggleCollapse}\n onKeyDown={markKeyboardToggle}\n aria-label=\"Show image preview\"\n >\n <span className={styles['image-preview__show-label']}>\n <span\n className={styles['image-preview__show-icon']}\n aria-hidden=\"true\"\n >\n <Icon size=\"12\" glyph={<MenuRightIcon />} />\n </span>\n Show Image preview\n </span>\n </button>\n )}\n\n {frameTransition.mounted && (\n <div\n className={[\n styles['image-preview__frame'],\n frameTransition.visible\n ? styles['image-preview__frame--visible']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <div className={styles['image-preview__media']}>\n <img src={src} alt={alt} className={styles['image-preview__img']} />\n </div>\n\n {onToggleCollapse != null && (\n <button\n ref={collapseTriggerRef}\n type=\"button\"\n className={styles['image-preview__collapse-btn']}\n onClick={onToggleCollapse}\n onKeyDown={markKeyboardToggle}\n aria-label=\"Collapse image preview\"\n >\n <Icon size=\"16\" glyph={<MenuDownIcon />} />\n </button>\n )}\n\n <div className={styles['image-preview__actions']}>\n {onCopyLink != null && (\n <IconButton\n size=\"small\"\n padding=\"compact\"\n aria-label=\"Copy link\"\n icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n onClick={onCopyLink}\n />\n )}\n {onDownload != null && (\n <IconButton\n size=\"small\"\n padding=\"compact\"\n aria-label=\"Download\"\n icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n onClick={onDownload}\n />\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"qkBAqCA,SAAwBA,EAAa,CACnC,IAAAC,EACA,IAAAC,EAAM,GACN,UAAAC,EAAY,GACZ,iBAAAC,EACA,WAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EAAY,EACd,EAAsB,CACpB,MAAMC,EAAkBC,uBAAqB,CAACP,CAAS,EACjDQ,EAAkBD,EAAAA,qBAAqBP,CAAS,EAChDS,EAAiBC,EAAAA,OAA0B,IAAI,EAC/CC,EAAqBD,EAAAA,OAA0B,IAAI,EACnDE,EAAoBF,EAAAA,OAAO,EAAK,EAEhCG,EAAsBC,GAA4C,EAClEA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCF,EAAkB,QAAU,GAEhC,EAEAG,EAAAA,UAAU,IAAM,CACd,GAAKH,EAAkB,QAEvB,IAAIZ,EAAW,CACb,GAAI,CAACQ,EAAgB,SAAW,CAACC,EAAe,QAAS,OACzDG,EAAkB,QAAU,GAC5BH,EAAe,QAAQ,MAAA,EACvB,MACF,CAEI,CAACH,EAAgB,SAAW,CAACK,EAAmB,UACpDC,EAAkB,QAAU,GAC5BD,EAAmB,QAAQ,MAAA,GAC7B,EAAG,CAACX,EAAWM,EAAgB,QAASE,EAAgB,OAAO,CAAC,EAEhE,MAAMQ,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBjB,EAAYiB,EAAAA,QAAO,0BAA0B,EAAI,GACjDb,IAAgB,MAAQa,UAAO,0BAA0B,EAAI,GAC7Db,IAAgB,MAAQa,UAAO,0BAA0B,EAAI,GAC7DZ,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEa,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,sBAAsB,EAC1C,SAAA,CAAAT,EAAgB,SACfU,EAAAA,IAAC,SAAA,CACC,IAAKT,EACL,KAAK,SACL,UAAW,CACTQ,EAAAA,QAAO,kCAAkC,EACzCT,EAAgB,QACZS,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAShB,EACT,UAAWY,EACX,aAAW,qBAEX,SAAAM,EAAAA,KAAC,OAAA,CAAK,UAAWF,UAAO,2BAA2B,EACjD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,QAAO,0BAA0B,EAC5C,cAAY,OAEZ,eAACG,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAc,CAAA,CAAI,CAAA,CAAA,EACrC,oBAAA,CAAA,CAET,CAAA,CAAA,EAIHf,EAAgB,SACfa,EAAAA,KAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,sBAAsB,EAC7BX,EAAgB,QACZW,UAAO,+BAA+B,EACtC,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,sBAAsB,EAC3C,SAAAC,EAAAA,IAAC,MAAA,~~CAAI~~,IAAApB,~~EAAU~~,IAAAC,~~EAAU~~,UAAWkB,EAAAA,QAAO,oBAAoB,~~EAAG~~,~~EACpE~~,EAEChB,GAAoB,MACnBiB,EAAAA,IAAC,SAAA,CACC,IAAKP,EACL,KAAK,SACL,UAAWM,EAAAA,QAAO,6BAA6B,EAC/C,QAAShB,EACT,UAAWY,EACX,aAAW,yBAEX,eAACO,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACI,IAAa,CAAA,CAAI,CAAA,CAAA,EAI7CH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAf,GAAc,MACbgB,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,YACX,WAAOH,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACM,IAAgB,EAAI,EAClD,QAAStB,CAAA,CAAA,EAGZC,GAAc,MACbe,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,WACX,WAAOH,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACO,IAAoB,EAAI,EACtD,QAAStB,CAAA,CAAA,CACX,CAAA,CAEJ,CAAA,CAAA,CAAA,CACF,CAAA,CAEJ,CAAA,CACF,CAEJ"}
1	+ {"version":3,"file":"ImagePreview.cjs","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' \| '4:3' \| '1:1';\n\nexport interface ImagePreviewProps {\n /** Image src URL. /\n src: string;\n /* Alt text. /\n alt?: string;\n /* Whether the preview is collapsed (shows toggle label only). /\n collapsed?: boolean;\n /* Callback when the collapse toggle is clicked. /\n onToggleCollapse?: () => void;\n /* Callback when the copy-link action is clicked. /\n onCopyLink?: () => void;\n /* Callback when the download action is clicked. /\n onDownload?: () => void;\n /* Aspect ratio of the image container. Default: 16:9 /\n aspectRatio?: ImagePreviewAspectRatio;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n src,\n alt = '',\n collapsed = false,\n onToggleCollapse,\n onCopyLink,\n onDownload,\n aspectRatio = '16:9',\n className = '',\n}: ImagePreviewProps) {\n const frameTransition = usePopoverTransition(!collapsed);\n const labelTransition = usePopoverTransition(collapsed);\n const showTriggerRef = useRef<HTMLButtonElement>(null);\n const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n const keyboardToggleRef = useRef(false);\n\n const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n keyboardToggleRef.current = true;\n }\n };\n\n useEffect(() => {\n if (!keyboardToggleRef.current) return;\n\n if (collapsed) {\n if (!labelTransition.mounted \|\| !showTriggerRef.current) return;\n keyboardToggleRef.current = false;\n showTriggerRef.current.focus();\n return;\n }\n\n if (!frameTransition.mounted \|\| !collapseTriggerRef.current) return;\n keyboardToggleRef.current = false;\n collapseTriggerRef.current.focus();\n }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n const rootClass = [\n styles['image-preview'],\n collapsed ? styles['image-preview--collapsed'] : '',\n aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['image-preview__stage']}>\n {labelTransition.mounted && (\n <button\n ref={showTriggerRef}\n type=\"button\"\n className={[\n styles['image-preview__collapsed-trigger'],\n labelTransition.visible\n ? styles['image-preview__collapsed-trigger--visible']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={onToggleCollapse}\n onKeyDown={markKeyboardToggle}\n aria-label=\"Show image preview\"\n >\n <span className={styles['image-preview__show-label']}>\n <span\n className={styles['image-preview__show-icon']}\n aria-hidden=\"true\"\n >\n <Icon size=\"12\" glyph={<MenuRightIcon />} />\n </span>\n Show Image preview\n </span>\n </button>\n )}\n\n {frameTransition.mounted && (\n <div\n className={[\n styles['image-preview__frame'],\n frameTransition.visible\n ? styles['image-preview__frame--visible']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <div className={styles['image-preview__media']}>\n <img\n src={src}\n alt={alt}\n className={styles['image-preview__img']}\n />\n </div>\n\n {onToggleCollapse != null && (\n <button\n ref={collapseTriggerRef}\n type=\"button\"\n className={styles['image-preview__collapse-btn']}\n onClick={onToggleCollapse}\n onKeyDown={markKeyboardToggle}\n aria-label=\"Collapse image preview\"\n >\n <Icon size=\"16\" glyph={<MenuDownIcon />} />\n </button>\n )}\n\n <div className={styles['image-preview__actions']}>\n {onCopyLink != null && (\n <IconButton\n size=\"small\"\n padding=\"compact\"\n aria-label=\"Copy link\"\n icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n onClick={onCopyLink}\n />\n )}\n {onDownload != null && (\n <IconButton\n size=\"small\"\n padding=\"compact\"\n aria-label=\"Download\"\n icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n onClick={onDownload}\n />\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAoB,EACpB,SAAc,GACf,EAAE,iBAAiB,~~2CA0HnB~~"}
1	+ {"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAoB,EACpB,SAAc,GACf,EAAE,iBAAiB,2CA8HnB"}

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

@@ -72,7 +72,14 @@ function O({
           a.visible ? i["image-preview__frame--visible"] : ""
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ e("div", { className: i["image-preview__media"], children: /* @__PURE__ */ e("img", { src: h, alt: b, className: i["image-preview__img"] }) }),
+          /* @__PURE__ */ e("div", { className: i["image-preview__media"], children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: h,
+              alt: b,
+              className: i["image-preview__img"]
+            }
+          ) }),
           m != null && /* @__PURE__ */ e(
             "button",
             {