npm - @primer/react-brand - Versions diffs - 0.75.0-rc.c3abcc84 → 0.75.0 - Mend

@primer/react-brand 0.75.0-rc.c3abcc84 → 0.75.0

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

package/esm/IDE/IDE.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IDE.js","names":[],"sources":["../../src/IDE/IDE.tsx"],"sourcesContent":["import {CopilotIcon, PaperAirplaneIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport React, {\n Children,\n forwardRef,\n isValidElement,\n memo,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport {Avatar, Text, TextInput} from '..'\nimport type {BaseProps} from '../component-helpers'\nimport {useTabs} from '../hooks/useTabs'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport animationStyles from '../animation/Animation.module.css'\nimport styles from './IDE.module.css'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\nconst testIds = {\n root: 'IDE',\n get chat() {\n return `${this.root}-chat`\n },\n get editor() {\n return `${this.root}-editor`\n },\n get editorContent() {\n return `${this.editor}-content`\n },\n get editorTabs() {\n return `${this.editor}-tab`\n },\n}\n\n/\n @deprecated IDEProps is deprecated and will be removed in a future release.\n /\nexport type IDEProps = {\n /\n Test id for the IDE\n /\n 'data-testid'?: string\n /\n The optionally configurable height of the IDE\n /\n height?: number\n /\n Alternative presentation of the IDE\n /\n variant?: 'default' \| 'glass'\n} & BaseProps<HTMLDivElement>\n\nconst _IDERoot = memo(\n ({children, className, 'data-testid': testId, height, variant = 'default', ...rest}: PropsWithChildren<IDEProps>) => {\n const [animationIsPaused, setAnimationIsPaused] = useState(false)\n const [chatAnimationIsDone, setChatAnimationIsDone] = useState(false)\n const [editorAnimationIsDone, setEditorAnimationIsDone] = useState(false)\n const chatRef = useRef<IDEChatHandle>(null)\n const editorRef = useRef<IDEEditorHandle>(null)\n\n useEffect(() => {\n if (chatAnimationIsDone && editorAnimationIsDone) {\n setAnimationIsPaused(false)\n }\n }, [chatAnimationIsDone, editorAnimationIsDone])\n\n const childrenArray = useMemo(() => Children.toArray(children), [children])\n\n const ChatChild = childrenArray.find(\n (child): child is React.ReactElement<React.ComponentProps<typeof IDE.Chat>> =>\n isValidElement(child) && child.type === IDE.Chat,\n )\n const hasChatChild = !!ChatChild\n const ClonedChatChild = hasChatChild\n ? React.cloneElement(ChatChild, {\n ref: chatRef,\n 'data-testid': testId \|\| testIds.chat,\n animationIsPaused,\n setAnimationIsDone: setChatAnimationIsDone,\n })\n : null\n\n const EditorChild = childrenArray.find(\n (child): child is React.ReactElement<React.ComponentProps<typeof IDE.Editor>> =>\n isValidElement(child) && child.type === IDE.Editor,\n )\n const hasEditorChild = !!EditorChild\n const ClonedEditorChild = hasEditorChild\n ? React.cloneElement(EditorChild, {\n ref: editorRef,\n 'data-testid': testId \|\| testIds.editor,\n animationIsPaused,\n setAnimationIsDone: setEditorAnimationIsDone,\n })\n : null\n\n // If a child exists, we need to account for its animation state\n const allAnimationsAreDone = (!hasChatChild \|\| chatAnimationIsDone) && (!hasEditorChild \|\| editorAnimationIsDone)\n\n const onPlayPause = useCallback(\n isPlaying => {\n if (allAnimationsAreDone) {\n setChatAnimationIsDone(false)\n setEditorAnimationIsDone(false)\n chatRef.current?.resetAnimation()\n editorRef.current?.resetAnimation()\n } else {\n setAnimationIsPaused(!isPlaying)\n }\n },\n [allAnimationsAreDone],\n )\n\n return (\n <section\n data-testid={testId \|\| testIds.root}\n className={clsx(\n styles[`IDE--${variant}`],\n hasChatChild && hasEditorChild && styles['IDE--full-exp'],\n hasChatChild && !hasEditorChild && styles['IDE--chat-only'],\n className,\n )}\n >\n <div {...rest}>\n <div\n className={styles['IDE__inner']}\n style={{['--brand-IDE-height' as string]: height ? `${height}px` : undefined}}\n >\n <div className={styles.IDE__main}>\n {ClonedChatChild}\n {ClonedEditorChild}\n </div>\n <PlayPauseButton isPlaying={!animationIsPaused && !allAnimationsAreDone} onPlayPause={onPlayPause} />\n </div>\n </div>\n </section>\n )\n },\n)\n\ntype IDEChatProps = {\n /\n The chat script\n /\n script: IDEChatMessage[]\n /\n Alternative description of the chat script for users of assistive technologies.\n /\n alternativeText: string\n /\n The delay between messages\n /\n animationDelay?: number\n /\n Test id for the IDE\n /\n 'data-testid'?: string\n /\n Internal prop used for controlling the animation state\n /\n animationIsPaused?: boolean\n /\n Internal prop used for controlling the animation state\n /\n setAnimationIsDone?: (isDone: boolean) => void\n} & BaseProps<HTMLElement>\n\ntype IDEChatMessageUser = {\n role: 'user'\n avatar: string\n}\n\ntype IDEChatMessageAssistant = {\n role: 'assistant'\n}\n\n/\n @deprecated IDEChatMessage is deprecated and will be removed in a future release.\n /\nexport type IDEChatMessage = {handle: string; message: string; codeSnippet?: string; highlighter?: 'hljs'} & (\n \| IDEChatMessageUser\n \| IDEChatMessageAssistant\n)\n\ntype IDEChatHandle = HTMLElement & {\n resetAnimation: () => void\n}\n\nconst _Chat = memo(\n forwardRef<IDEChatHandle, IDEChatProps>(\n (\n {\n 'data-testid': testId,\n script,\n animationDelay = 3000,\n alternativeText,\n animationIsPaused,\n setAnimationIsDone,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef)\n const delay = animationDelay\n const messagesRef = useRef<HTMLDivElement>(null)\n const [scheduledAnimations, setScheduledAnimations] = useState<IDEChatAnimation[]>([])\n const isPausedRef = useRef(animationIsPaused)\n isPausedRef.current = animationIsPaused\n\n const scrollIntoParentView = useCallback((element: Element \| null) => {\n if (!element \|\| !messagesRef.current) return\n const container = messagesRef.current\n const elementRect = element.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n if (elementRect.top < containerRect.top \|\| elementRect.bottom > containerRect.bottom) {\n container.scrollTop += elementRect.top - containerRect.top\n }\n }, [])\n\n const scheduleAnimations = useCallback(() => {\n if (!script.length) return\n\n const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n const defaultMessages = Array.from(allMessages).slice(0, 1)\n const newerMessages = Array.from(allMessages).slice(1)\n\n const animations: IDEChatAnimation[] = []\n\n if (defaultMessages[0]) {\n animations.push({\n delay: 0,\n action: 'show',\n element: defaultMessages[0] as HTMLElement,\n })\n }\n\n animations.push({\n delay: delay / 4,\n action: 'delay',\n })\n\n for (const [index, message] of newerMessages.entries()) {\n animations.push({\n delay,\n action: 'show',\n element: message as HTMLElement,\n shouldScroll: index % 2 === 0,\n shouldFadePrevious: true,\n messageIndex: index,\n isLast: index === newerMessages.length - 1,\n })\n }\n\n animations.push({\n delay: 100,\n isDone: true,\n })\n\n setScheduledAnimations(animations)\n }, [script, delay])\n\n const resetAnimation = useCallback(() => {\n setAnimationIsDone?.(false)\n\n const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n for (const message of allMessages) {\n message.classList.remove(styles['IDE__Chat-message--visible'], styles['IDE__Chat-message--faded'])\n }\n\n if (messagesRef.current) {\n messagesRef.current.scrollTop = 0\n }\n\n scheduleAnimations()\n }, [scheduleAnimations, setAnimationIsDone])\n\n useImperativeHandle(ref, () => {\n if (!ref.current) {\n return {\n resetAnimation,\n } as IDEChatHandle\n }\n\n return {\n ...ref.current,\n resetAnimation,\n }\n })\n\n useEffect(() => {\n scheduleAnimations()\n }, [scheduleAnimations])\n\n useEffect(() => {\n let prevTimestamp = -1\n let animationId: number\n let currentIndex = 0\n\n const animate: FrameRequestCallback = timestamp => {\n if (currentIndex >= scheduledAnimations.length \|\| isPausedRef.current) {\n if (isPausedRef.current) {\n // Reset timestamp when paused so we don't accumulate time\n prevTimestamp = -1\n }\n animationId = requestAnimationFrame(animate)\n return\n }\n\n const diff = prevTimestamp === -1 ? 0 : timestamp - prevTimestamp\n prevTimestamp = timestamp\n\n const nextAnimation = scheduledAnimations[currentIndex]\n\n if (nextAnimation.isDone) {\n setAnimationIsDone?.(true)\n return\n }\n\n nextAnimation.delay -= diff\n\n if (nextAnimation.delay <= 0) {\n if (nextAnimation.action === 'delay') {\n // Just a delay, no visual action needed\n currentIndex++\n } else {\n const animation = nextAnimation as IDEChatAnimationWithElement\n\n if (animation.shouldScroll) {\n scrollIntoParentView(animation.element)\n }\n\n if (animation.shouldFadePrevious) {\n // Fade previous messages\n const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n const defaultMessages = Array.from(allMessages).slice(0, 1)\n const newerMessages = Array.from(allMessages).slice(1)\n\n for (const defaultMessage of defaultMessages) {\n defaultMessage.classList.add(styles['IDE__Chat-message--faded'])\n }\n\n const filteredNewerMessage = newerMessages.filter((_, i) => i < (animation.messageIndex ?? 0))\n for (const filteredMessage of filteredNewerMessage) {\n filteredMessage.classList.add(styles['IDE__Chat-message--faded'])\n }\n\n // Remove faded class from all messages at the end\n if (animation.isLast) {\n setTimeout(() => {\n for (const defaultMessage of defaultMessages) {\n defaultMessage.classList.remove(styles['IDE__Chat-message--faded'])\n }\n for (const newerMessage of newerMessages) {\n newerMessage.classList.remove(styles['IDE__Chat-message--faded'])\n }\n }, 100)\n }\n }\n\n animation.element.classList.add(styles['IDE__Chat-message--visible'])\n currentIndex++\n }\n }\n\n animationId = requestAnimationFrame(animate)\n }\n\n animationId = requestAnimationFrame(animate)\n\n return () => {\n if (animationId) {\n cancelAnimationFrame(animationId)\n }\n }\n }, [scheduledAnimations, scrollIntoParentView, setAnimationIsDone])\n\n return (\n <section ref={ref} className={styles.IDE__Chat} data-testid={testId \|\| testIds.chat} {...rest}>\n <span className=\"visually-hidden\">{alternativeText}</span>\n <div className={styles['IDE__Chat-wrapper']} aria-hidden>\n <div ref={messagesRef} className={styles['IDE__Chat-messages']}>\n {script.length &&\n script.map((message, index) => (\n <div\n id={`IDE__Chat-message-${index}`}\n key={index}\n className={clsx(\n styles['IDE__Chat-message'],\n message.role === 'user' && styles['IDE__Chat-message--user'],\n )}\n >\n <div className={styles['IDE__Chat-message-user']}>\n {message.role === 'user' ? (\n <Avatar src={message.avatar} alt={message.handle} />\n ) : (\n <CopilotIcon size={24} />\n )}\n <Text as=\"p\" size=\"100\" weight=\"medium\" className={styles['IDE__Chat-message-handle']}>\n {message.handle}\n </Text>\n </div>\n <div className={styles['IDE__Chat-message-content']}>\n <div className={styles['IDE__Chat-message-text']}>{message.message}</div>\n\n {message.highlighter && message.codeSnippet && (\n <pre\n className={styles['IDE__Chat-message-snippet']}\n dangerouslySetInnerHTML={{__html: message.codeSnippet}}\n />\n )}\n\n {!message.highlighter && message.codeSnippet && (\n <pre className={styles['IDE__Chat-message-snippet']}>{message.codeSnippet}</pre>\n )}\n </div>\n </div>\n ))}\n </div>\n <div className={styles['IDE__Chat-input-area']}>\n <TextInput\n disabled\n className={styles['IDE__Chat-input']}\n fullWidth\n placeholder=\"Ask a question or type '/' for commands.\"\n trailingVisual={<PaperAirplaneIcon className={styles['IDE__Chat-input-icon']} />}\n />\n </div>\n </div>\n </section>\n )\n },\n ),\n)\n\ntype IDEEditorProps = {\n /\n The index of the active tab.\n /\n activeTab?: number\n\n /\n An array of IDE editor files.\n /\n files: IDEEditorFile[]\n\n /\n Determines whether line numbers should be shown in the editor.\n /\n showLineNumbers?: boolean\n\n /\n Controls the size of the editor text.\n /\n size?: 'small' \| 'medium' \| 'large'\n\n /\n Used for triggering animation externally.\n /\n triggerAnimation?: boolean\n\n /\n Test id for the IDE.\n /\n 'data-testid'?: string\n /\n Enable user customisation of the icons used in file tabs.\n /\n tabIcons?: IDEEditorTabIcon\n /\n Internal prop used for controlling the animation state\n /\n animationIsPaused?: boolean\n /\n Internal prop used for controlling the animation state\n /\n setAnimationIsDone?: (isDone: boolean) => void\n} & BaseProps<HTMLDivElement>\n\n/\n @deprecated IDEEditorFile is deprecated and will be removed in a future release.\n /\nexport type IDEEditorFile = {\n name: string\n /\n Alternative description of the code for users of assistive technologies.\n /\n alternativeText: string\n /\n Controls line at which the Copilot suggestion begins\n /\n suggestedLineStart?: number\n code: string \| string[]\n highlighter?: 'hljs' // add additional highlighters as needed\n}\n\ntype IDEEditorTabIcon = Record<string, string>\n\nconst iconBaseUrl = 'https://github.com/primer/brand/assets'\n\nexport const IDEDefaultIconMap: IDEEditorTabIcon = {\n py: `${iconBaseUrl}/13340707/7ca66487-d958-4c30-acbc-397f7a6169b7`,\n ts: `${iconBaseUrl}/13340707/2a7b87cf-b522-4ab5-a127-5a2c69bd0a89`,\n js: `${iconBaseUrl}/13340707/5a7bfffa-af38-4e32-ab39-a9e7efbcc7c6`,\n jsx: `${iconBaseUrl}/13340707/d975a978-dbc7-4626-b995-c00cac9bc132`,\n hs: `${iconBaseUrl}/13340707/826843ce-424b-4693-84d3-a43e4b7f1280`,\n html: `${iconBaseUrl}/13340707/f5b03413-b8f4-4cd5-9d91-6b574ada14ed`,\n css: `${iconBaseUrl}/13340707/3df2f0ba-daff-4b76-8492-f5773c515369`,\n scss: `${iconBaseUrl}/13340707/a1d21f2e-c813-4211-8d9a-2869c1968e9a`,\n json: `${iconBaseUrl}/13340707/ca21068e-8c27-4b84-9a1d-b965b49b3568`,\n md: `${iconBaseUrl}/13340707/39e7ff2b-9d0a-47e9-9686-bed51800084c`,\n yml: `${iconBaseUrl}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,\n yaml: `${iconBaseUrl}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,\n txt: `${iconBaseUrl}/13340707/7c52da20-1fe2-496c-b4bb-6ea61d0fe3dd`,\n sh: `${iconBaseUrl}/13340707/549ce181-4541-4811-8712-a9c5abd8eeae`,\n sql: `${iconBaseUrl}/13340707/b2b73a2e-e4e1-47c8-aabc-c204836244b8`,\n // Add additional default icons as needed\n // Note: These can also be customised and extended by end user using the tabIcons prop\n}\n\nexport const IDEFileExtensions = Object.keys(IDEDefaultIconMap)\n\ntype IDEAnimation = {\n delay: number\n isDone?: boolean\n tab: string \| null\n} & ({elements: HTMLElement[]} \| {isDone: true})\n\ntype IDEChatAnimation = {\n delay: number\n isDone?: boolean\n} & (\n \| {\n action: 'show'\n element: HTMLElement\n shouldScroll?: boolean\n shouldFadePrevious?: boolean\n messageIndex?: number\n isLast?: boolean\n }\n \| {action: 'delay'}\n \| {isDone: true}\n)\n\ntype IDEChatAnimationWithElement = {\n delay: number\n action: 'show'\n element: HTMLElement\n shouldScroll?: boolean\n shouldFadePrevious?: boolean\n messageIndex?: number\n isLast?: boolean\n}\n\ntype IDEEditorHandle = HTMLElement & {\n resetAnimation: () => void\n}\n\nconst _Editor = memo(\n forwardRef<IDEEditorHandle, IDEEditorProps>(\n (\n {\n activeTab = 0,\n 'data-testid': testId,\n files,\n triggerAnimation = false,\n showLineNumbers = true,\n size = 'medium',\n tabIcons = IDEDefaultIconMap,\n animationIsPaused,\n setAnimationIsDone,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef)\n const presRef = useRef<HTMLDivElement>(null)\n const [scheduledAnimations, setScheduledAnimations] = useState<IDEAnimation[]>([])\n const isPausedRef = useRef(animationIsPaused)\n isPausedRef.current = animationIsPaused\n\n const tabs = useTabs({\n defaultTab: activeTab.toString(),\n autoActivate: true,\n onTabActivate: (_, activeTabRef) => {\n activeTabRef?.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'start'})\n resetAnimation()\n },\n })\n\n const scheduleAnimations = useCallback(() => {\n if (!presRef.current) return\n\n const pres = presRef.current.querySelectorAll<HTMLPreElement>('pre:not([data-has-suggestion=\"true\"])')\n const copilotSuggestions = presRef.current.querySelectorAll<HTMLPreElement>('pre[data-has-suggestion=\"true\"]')\n\n const animations: IDEAnimation[] = []\n\n for (const pre of pres) {\n animations.push({\n delay: 200,\n elements: [pre],\n tab: tabs.activeTab,\n })\n }\n\n animations.push({\n delay: 1000,\n elements: Array.from(copilotSuggestions),\n tab: tabs.activeTab,\n })\n\n animations.push({\n delay: 200,\n isDone: true,\n tab: tabs.activeTab,\n })\n\n setScheduledAnimations(animations)\n }, [tabs.activeTab])\n\n const resetAnimation = useCallback(() => {\n setScheduledAnimations([])\n setAnimationIsDone?.(false)\n\n const pres = presRef.current?.querySelectorAll('pre')\n if (pres) {\n for (const pre of pres) {\n pre.classList.remove(animationStyles['Animation--active'])\n }\n }\n\n scheduleAnimations()\n }, [scheduleAnimations, setAnimationIsDone])\n\n useImperativeHandle(ref, () => {\n if (!ref.current) {\n return {\n resetAnimation,\n } as IDEEditorHandle\n }\n\n return {\n ...ref.current,\n resetAnimation,\n }\n })\n\n useEffect(() => {\n scheduleAnimations()\n }, [scheduleAnimations, triggerAnimation])\n\n useEffect(() => {\n let prevTimestamp = -1\n let animationId: number\n let currentIndex = 0\n\n const animate: FrameRequestCallback = timestamp => {\n if (currentIndex >= scheduledAnimations.length \|\| tabs.activeTab === null) {\n return\n }\n\n if (isPausedRef.current) {\n // Reset timestamp when paused so we don't accumulate time\n prevTimestamp = -1\n animationId = requestAnimationFrame(animate)\n return\n }\n\n const diff = prevTimestamp === -1 ? 0 : timestamp - prevTimestamp\n prevTimestamp = timestamp\n\n const nextAnimation = scheduledAnimations[currentIndex]\n\n if (nextAnimation.isDone) {\n setAnimationIsDone?.(true)\n return\n }\n\n if (nextAnimation.tab !== tabs.activeTab) {\n return\n }\n\n nextAnimation.delay -= diff\n\n if (nextAnimation.delay <= 0) {\n for (const element of nextAnimation.elements) {\n element.classList.add(animationStyles['Animation--active'])\n }\n currentIndex++\n }\n\n animationId = requestAnimationFrame(animate)\n }\n\n animationId = requestAnimationFrame(animate)\n\n return () => {\n if (animationId) {\n cancelAnimationFrame(animationId)\n }\n }\n }, [scheduledAnimations, setAnimationIsDone, tabs.activeTab])\n\n return (\n <div\n className={clsx(styles.IDE__Editor, styles[`IDE__Editor--${size}`])}\n data-testid={testId \|\| testIds.editor}\n {...rest}\n >\n <div\n className={styles['IDE__Editor-tabs']}\n data-testid={testIds.editorTabs}\n {...tabs.getTabListProps({label: 'files'})}\n >\n {files.map((file, index) => {\n const language = file.name.split('.').pop()\n const isActiveTab = tabs.activeTab === index.toString()\n\n return (\n <button\n {...tabs.getTabProps(index.toString())}\n key={file.name}\n className={clsx(styles['IDE__Editor-tab'], isActiveTab && styles['IDE__Editor-tab--active'])}\n >\n {language && (\n <img\n className={styles['IDE__Editor-tab-icon']}\n alt=\"\"\n width={16}\n height={16}\n src={tabIcons[language]}\n />\n )}\n {file.name}\n </button>\n )\n })}\n </div>\n <div className={styles['IDE__Editor-content']}>\n {files.map((file, fileIndex) => (\n <div {...tabs.getTabPanelProps(fileIndex.toString())} key={file.name}>\n <span className=\"visually-hidden\">{file.alternativeText}</span>\n <div className={styles['IDE__Editor-content-wrapper']} aria-hidden=\"true\">\n {showLineNumbers && (\n <div className={styles['IDE__Editor-lineNumbers']}>\n {(Array.isArray(file.code) ? file.code : file.code.split('\\n')).map((_, index) => (\n <div key={index} className={styles['IDE__Editor-lineNumber']}>\n {index + 1}\n </div>\n ))}\n </div>\n )}\n <div\n ref={tabs.activeTab === fileIndex.toString() ? presRef : null}\n data-testid={testIds.editorContent}\n className={styles['IDE__Editor-content-inner']}\n >\n {Array.isArray(file.code) ? (\n (file.code as string[]).map((line, index) => {\n const isSuggestion = index + 1 >= (file.suggestedLineStart ?? Infinity)\n return (\n <React.Fragment key={line + index}>\n <pre\n key={index}\n className={clsx(\n styles['IDE__Editor-pane'],\n index + 1 < (file.suggestedLineStart ?? Infinity) &&\n animationStyles['Animation--slide-in-right'],\n isSuggestion && animationStyles['Animation--slide-in-down'],\n isSuggestion && styles['IDE__Editor-pane--suggested'],\n )}\n dangerouslySetInnerHTML={{__html: line === '' ? ' ' : line}}\n data-has-suggestion={isSuggestion}\n />\n {isSuggestion && index === file.code.length - 1 && (\n <pre\n className={clsx(\n animationStyles['Animation--slide-in-down'],\n styles['IDE__Chat-copilot-indicator'],\n )}\n data-has-suggestion={isSuggestion}\n >\n <CopilotIcon size={24} className={styles['IDE__Chat-copilot-indicator-label']} />\n <Text as=\"span\" className={styles['IDE__Chat-copilot-indicator-label']}>\n Copilot\n </Text>\n </pre>\n )}\n </React.Fragment>\n )\n })\n ) : (\n <pre\n className={clsx(styles['IDE__Editor-pane'], animationStyles['Animation--slide-in-right'])}\n dangerouslySetInnerHTML={{__html: file.code}}\n />\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n )\n },\n ),\n)\n\nconst PauseIcon = () => (\n <svg fill=\"none\" role=\"presentation\" aria-hidden=\"true\" viewBox=\"3.17 2.28 13.7 15.42\">\n <path\n d=\"M4.66148 2.3125C3.83593 2.3125 3.16669 2.98174 3.16669 3.80729V16.1927C3.16669 17.0183 3.83593 17.6875 4.66148 17.6875H7.65106C8.47662 17.6875 9.14586 17.0183 9.14586 16.1927V3.80729C9.14586 2.98174 8.47662 2.3125 7.65106 2.3125H4.66148ZM4.44794 3.80729C4.44794 3.68936 4.54355 3.59375 4.66148 3.59375H7.65106C7.769 3.59375 7.86461 3.68936 7.86461 3.80729V16.1927C7.86461 16.3106 7.769 16.4062 7.65106 16.4062H4.66148C4.54355 16.4062 4.44794 16.3106 4.44794 16.1927V3.80729ZM12.349 2.3125C11.5235 2.3125 10.8542 2.98174 10.8542 3.80729V16.1927C10.8542 17.0183 11.5235 17.6875 12.349 17.6875H15.3386C16.1642 17.6875 16.8334 17.0183 16.8334 16.1927V3.80729C16.8334 2.98174 16.1642 2.3125 15.3386 2.3125H12.349ZM12.1355 3.80729C12.1355 3.68936 12.2311 3.59375 12.349 3.59375H15.3386C15.4565 3.59375 15.5521 3.68936 15.5521 3.80729V16.1927C15.5521 16.3106 15.4565 16.4062 15.3386 16.4062H12.349C12.2311 16.4062 12.1355 16.3106 12.1355 16.1927V3.80729Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n)\nconst PlayIcon = () => (\n <svg fill=\"none\" role=\"presentation\" aria-hidden=\"true\" viewBox=\"4.02 2.3 14.43 15.4\">\n <path\n d=\"M6.24905 3.69194C5.82218 3.45967 5.30225 3.76868 5.30225 4.25466V15.7452C5.30225 16.2312 5.82218 16.5402 6.24906 16.3079L16.8079 10.5626C17.2538 10.32 17.2538 9.67983 16.8079 9.4372L6.24905 3.69194ZM4.021 4.25466C4.021 2.79672 5.58078 1.86969 6.86142 2.56651L17.4203 8.31176C18.758 9.03966 18.758 10.9602 17.4203 11.6881L6.86143 17.4333C5.58079 18.1301 4.021 17.2031 4.021 15.7452V4.25466Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n)\n\ntype PlayPauseButtonProps = {\n isPlaying?: boolean\n onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n const onClick = useCallback(() => {\n onPlayPause?.(!isPlaying)\n }, [onPlayPause, isPlaying])\n\n /\n aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n * eg \"Play animation on\" or \"Pause animation off\"\n /\n return (\n <button\n className={styles['IDE__play-pause-button']}\n type=\"button\"\n onClick={onClick}\n aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n )\n}\n\n/\n Use IDE to display a decorative editor component\n * @deprecated IDE is deprecated and will be removed in a future release.\n * @see https://primer.style/brand/components/IDE\n */\nexport const IDE = Object.assign(_IDERoot, {\n testIds,\n Chat: _Chat,\n Editor: _Editor,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"IDE.js","names":[],"sources":["../../src/IDE/IDE.tsx"],"sourcesContent":["import {CopilotIcon, PaperAirplaneIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport React, {\n Children,\n forwardRef,\n isValidElement,\n memo,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport {Avatar, Text, TextInput} from '..'\nimport type {BaseProps} from '../component-helpers'\nimport {useTabs} from '../hooks/useTabs'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport animationStyles from '../animation/Animation.module.css'\nimport styles from './IDE.module.css'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\nconst testIds = {\n root: 'IDE',\n get chat() {\n return `${this.root}-chat`\n },\n get editor() {\n return `${this.root}-editor`\n },\n get editorContent() {\n return `${this.editor}-content`\n },\n get editorTabs() {\n return `${this.editor}-tab`\n },\n}\n\n/\n @deprecated IDEProps is deprecated and will be removed in a future release.\n /\nexport type IDEProps = {\n /\n Test id for the IDE\n /\n 'data-testid'?: string\n /\n The optionally configurable height of the IDE\n /\n height?: number\n /\n Alternative presentation of the IDE\n /\n variant?: 'default' \| 'glass'\n} & BaseProps<HTMLDivElement>\n\nconst _IDERoot = memo(\n ({children, className, 'data-testid': testId, height, variant = 'default', ...rest}: PropsWithChildren<IDEProps>) => {\n const [animationIsPaused, setAnimationIsPaused] = useState(false)\n const [chatAnimationIsDone, setChatAnimationIsDone] = useState(false)\n const [editorAnimationIsDone, setEditorAnimationIsDone] = useState(false)\n const chatRef = useRef<IDEChatHandle>(null)\n const editorRef = useRef<IDEEditorHandle>(null)\n\n useEffect(() => {\n if (chatAnimationIsDone && editorAnimationIsDone) {\n setAnimationIsPaused(false)\n }\n }, [chatAnimationIsDone, editorAnimationIsDone])\n\n const childrenArray = useMemo(() => Children.toArray(children), [children])\n\n const ChatChild = childrenArray.find(\n (child): child is React.ReactElement<React.ComponentProps<typeof IDE.Chat>> =>\n isValidElement(child) && child.type === IDE.Chat,\n )\n const hasChatChild = !!ChatChild\n const ClonedChatChild = hasChatChild\n ? React.cloneElement(ChatChild, {\n ref: chatRef,\n 'data-testid': testId \|\| testIds.chat,\n animationIsPaused,\n setAnimationIsDone: setChatAnimationIsDone,\n })\n : null\n\n const EditorChild = childrenArray.find(\n (child): child is React.ReactElement<React.ComponentProps<typeof IDE.Editor>> =>\n isValidElement(child) && child.type === IDE.Editor,\n )\n const hasEditorChild = !!EditorChild\n const ClonedEditorChild = hasEditorChild\n ? React.cloneElement(EditorChild, {\n ref: editorRef,\n 'data-testid': testId \|\| testIds.editor,\n animationIsPaused,\n setAnimationIsDone: setEditorAnimationIsDone,\n })\n : null\n\n // If a child exists, we need to account for its animation state\n const allAnimationsAreDone = (!hasChatChild \|\| chatAnimationIsDone) && (!hasEditorChild \|\| editorAnimationIsDone)\n\n const onPlayPause = useCallback(\n isPlaying => {\n if (allAnimationsAreDone) {\n setChatAnimationIsDone(false)\n setEditorAnimationIsDone(false)\n chatRef.current?.resetAnimation()\n editorRef.current?.resetAnimation()\n } else {\n setAnimationIsPaused(!isPlaying)\n }\n },\n [allAnimationsAreDone],\n )\n\n return (\n <section\n data-testid={testId \|\| testIds.root}\n className={clsx(\n styles[`IDE--${variant}`],\n hasChatChild && hasEditorChild && styles['IDE--full-exp'],\n hasChatChild && !hasEditorChild && styles['IDE--chat-only'],\n className,\n )}\n >\n <div {...rest}>\n <div\n className={styles['IDE__inner']}\n style={{['--brand-IDE-height' as string]: height ? `${height}px` : undefined}}\n >\n <div className={styles.IDE__main}>\n {ClonedChatChild}\n {ClonedEditorChild}\n </div>\n <PlayPauseButton isPlaying={!animationIsPaused && !allAnimationsAreDone} onPlayPause={onPlayPause} />\n </div>\n </div>\n </section>\n )\n },\n)\n\ntype IDEChatProps = {\n /\n The chat script\n /\n script: IDEChatMessage[]\n /\n Alternative description of the chat script for users of assistive technologies.\n /\n alternativeText: string\n /\n The delay between messages\n /\n animationDelay?: number\n /\n Test id for the IDE\n /\n 'data-testid'?: string\n /\n Internal prop used for controlling the animation state\n /\n animationIsPaused?: boolean\n /\n Internal prop used for controlling the animation state\n /\n setAnimationIsDone?: (isDone: boolean) => void\n} & BaseProps<HTMLElement>\n\ntype IDEChatMessageUser = {\n role: 'user'\n avatar: string\n}\n\ntype IDEChatMessageAssistant = {\n role: 'assistant'\n}\n\n/\n @deprecated IDEChatMessage is deprecated and will be removed in a future release.\n /\nexport type IDEChatMessage = {handle: string; message: string; codeSnippet?: string; highlighter?: 'hljs'} & (\n \| IDEChatMessageUser\n \| IDEChatMessageAssistant\n)\n\ntype IDEChatHandle = HTMLElement & {\n resetAnimation: () => void\n}\n\nconst _Chat = memo(\n forwardRef<IDEChatHandle, IDEChatProps>(\n (\n {\n 'data-testid': testId,\n script,\n animationDelay = 3000,\n alternativeText,\n animationIsPaused,\n setAnimationIsDone,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef)\n const delay = animationDelay\n const messagesRef = useRef<HTMLDivElement>(null)\n const [scheduledAnimations, setScheduledAnimations] = useState<IDEChatAnimation[]>([])\n const isPausedRef = useRef(animationIsPaused)\n isPausedRef.current = animationIsPaused\n\n const scrollIntoParentView = useCallback((element: Element \| null) => {\n if (!element \|\| !messagesRef.current) return\n const container = messagesRef.current\n const elementRect = element.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n if (elementRect.top < containerRect.top \|\| elementRect.bottom > containerRect.bottom) {\n container.scrollTop += elementRect.top - containerRect.top\n }\n }, [])\n\n const scheduleAnimations = useCallback(() => {\n if (!script.length) return\n\n const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n const defaultMessages = Array.from(allMessages).slice(0, 1)\n const newerMessages = Array.from(allMessages).slice(1)\n\n const animations: IDEChatAnimation[] = []\n\n if (defaultMessages[0]) {\n animations.push({\n delay: 0,\n action: 'show',\n element: defaultMessages[0] as HTMLElement,\n })\n }\n\n animations.push({\n delay: delay / 4,\n action: 'delay',\n })\n\n for (const [index, message] of newerMessages.entries()) {\n animations.push({\n delay,\n action: 'show',\n element: message as HTMLElement,\n shouldScroll: index % 2 === 0,\n shouldFadePrevious: true,\n messageIndex: index,\n isLast: index === newerMessages.length - 1,\n })\n }\n\n animations.push({\n delay: 100,\n isDone: true,\n })\n\n setScheduledAnimations(animations)\n }, [script, delay])\n\n const resetAnimation = useCallback(() => {\n setAnimationIsDone?.(false)\n\n const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n for (const message of allMessages) {\n message.classList.remove(styles['IDE__Chat-message--visible'], styles['IDE__Chat-message--faded'])\n }\n\n if (messagesRef.current) {\n messagesRef.current.scrollTop = 0\n }\n\n scheduleAnimations()\n }, [scheduleAnimations, setAnimationIsDone])\n\n useImperativeHandle(ref, () => {\n if (!ref.current) {\n return {\n resetAnimation,\n } as IDEChatHandle\n }\n\n return {\n ...ref.current,\n resetAnimation,\n }\n })\n\n useEffect(() => {\n scheduleAnimations()\n }, [scheduleAnimations])\n\n useEffect(() => {\n let prevTimestamp = -1\n let animationId: number\n let currentIndex = 0\n\n const animate: FrameRequestCallback = timestamp => {\n if (currentIndex >= scheduledAnimations.length \|\| isPausedRef.current) {\n if (isPausedRef.current) {\n // Reset timestamp when paused so we don't accumulate time\n prevTimestamp = -1\n }\n animationId = requestAnimationFrame(animate)\n return\n }\n\n const diff = prevTimestamp === -1 ? 0 : timestamp - prevTimestamp\n prevTimestamp = timestamp\n\n const nextAnimation = scheduledAnimations[currentIndex]\n\n if (nextAnimation.isDone) {\n setAnimationIsDone?.(true)\n return\n }\n\n nextAnimation.delay -= diff\n\n if (nextAnimation.delay <= 0) {\n if (nextAnimation.action === 'delay') {\n // Just a delay, no visual action needed\n currentIndex++\n } else {\n const animation = nextAnimation as IDEChatAnimationWithElement\n\n if (animation.shouldScroll) {\n scrollIntoParentView(animation.element)\n }\n\n if (animation.shouldFadePrevious) {\n // Fade previous messages\n const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n const defaultMessages = Array.from(allMessages).slice(0, 1)\n const newerMessages = Array.from(allMessages).slice(1)\n\n for (const defaultMessage of defaultMessages) {\n defaultMessage.classList.add(styles['IDE__Chat-message--faded'])\n }\n\n const filteredNewerMessage = newerMessages.filter((_, i) => i < (animation.messageIndex ?? 0))\n for (const filteredMessage of filteredNewerMessage) {\n filteredMessage.classList.add(styles['IDE__Chat-message--faded'])\n }\n\n // Remove faded class from all messages at the end\n if (animation.isLast) {\n setTimeout(() => {\n for (const defaultMessage of defaultMessages) {\n defaultMessage.classList.remove(styles['IDE__Chat-message--faded'])\n }\n for (const newerMessage of newerMessages) {\n newerMessage.classList.remove(styles['IDE__Chat-message--faded'])\n }\n }, 100)\n }\n }\n\n animation.element.classList.add(styles['IDE__Chat-message--visible'])\n currentIndex++\n }\n }\n\n animationId = requestAnimationFrame(animate)\n }\n\n animationId = requestAnimationFrame(animate)\n\n return () => {\n if (animationId) {\n cancelAnimationFrame(animationId)\n }\n }\n }, [scheduledAnimations, scrollIntoParentView, setAnimationIsDone])\n\n return (\n <section ref={ref} className={styles.IDE__Chat} data-testid={testId \|\| testIds.chat} {...rest}>\n <span className=\"visually-hidden\">{alternativeText}</span>\n <div className={styles['IDE__Chat-wrapper']} aria-hidden>\n <div ref={messagesRef} className={styles['IDE__Chat-messages']}>\n {script.length &&\n script.map((message, index) => (\n <div\n id={`IDE__Chat-message-${index}`}\n key={index}\n className={clsx(\n styles['IDE__Chat-message'],\n message.role === 'user' && styles['IDE__Chat-message--user'],\n )}\n >\n <div className={styles['IDE__Chat-message-user']}>\n {message.role === 'user' ? (\n <Avatar src={message.avatar} alt={message.handle} />\n ) : (\n <CopilotIcon size={24} />\n )}\n <Text as=\"p\" size=\"100\" weight=\"medium\" className={styles['IDE__Chat-message-handle']}>\n {message.handle}\n </Text>\n </div>\n <div className={styles['IDE__Chat-message-content']}>\n <div className={styles['IDE__Chat-message-text']}>{message.message}</div>\n\n {message.highlighter && message.codeSnippet && (\n <pre\n className={styles['IDE__Chat-message-snippet']}\n dangerouslySetInnerHTML={{__html: message.codeSnippet}}\n />\n )}\n\n {!message.highlighter && message.codeSnippet && (\n <pre className={styles['IDE__Chat-message-snippet']}>{message.codeSnippet}</pre>\n )}\n </div>\n </div>\n ))}\n </div>\n <div className={styles['IDE__Chat-input-area']}>\n <TextInput\n disabled\n className={styles['IDE__Chat-input']}\n fullWidth\n placeholder=\"Ask a question or type '/' for commands.\"\n trailingVisual={<PaperAirplaneIcon className={styles['IDE__Chat-input-icon']} />}\n />\n </div>\n </div>\n </section>\n )\n },\n ),\n)\n\ntype IDEEditorProps = {\n /\n The index of the active tab.\n /\n activeTab?: number\n\n /\n An array of IDE editor files.\n /\n files: IDEEditorFile[]\n\n /\n Determines whether line numbers should be shown in the editor.\n /\n showLineNumbers?: boolean\n\n /\n Controls the size of the editor text.\n /\n size?: 'small' \| 'medium' \| 'large'\n\n /\n Used for triggering animation externally.\n /\n triggerAnimation?: boolean\n\n /\n Test id for the IDE.\n /\n 'data-testid'?: string\n /\n Enable user customisation of the icons used in file tabs.\n /\n tabIcons?: IDEEditorTabIcon\n /\n Internal prop used for controlling the animation state\n /\n animationIsPaused?: boolean\n /\n Internal prop used for controlling the animation state\n /\n setAnimationIsDone?: (isDone: boolean) => void\n} & BaseProps<HTMLDivElement>\n\n/\n @deprecated IDEEditorFile is deprecated and will be removed in a future release.\n /\nexport type IDEEditorFile = {\n name: string\n /\n Alternative description of the code for users of assistive technologies.\n /\n alternativeText: string\n /\n Controls line at which the Copilot suggestion begins\n /\n suggestedLineStart?: number\n code: string \| string[]\n highlighter?: 'hljs' // add additional highlighters as needed\n}\n\ntype IDEEditorTabIcon = Record<string, string>\n\nconst iconBaseUrl = 'https://github.com/primer/brand/assets'\n\nexport const IDEDefaultIconMap: IDEEditorTabIcon = {\n py: `${iconBaseUrl}/13340707/7ca66487-d958-4c30-acbc-397f7a6169b7`,\n ts: `${iconBaseUrl}/13340707/2a7b87cf-b522-4ab5-a127-5a2c69bd0a89`,\n js: `${iconBaseUrl}/13340707/5a7bfffa-af38-4e32-ab39-a9e7efbcc7c6`,\n jsx: `${iconBaseUrl}/13340707/d975a978-dbc7-4626-b995-c00cac9bc132`,\n hs: `${iconBaseUrl}/13340707/826843ce-424b-4693-84d3-a43e4b7f1280`,\n html: `${iconBaseUrl}/13340707/f5b03413-b8f4-4cd5-9d91-6b574ada14ed`,\n css: `${iconBaseUrl}/13340707/3df2f0ba-daff-4b76-8492-f5773c515369`,\n scss: `${iconBaseUrl}/13340707/a1d21f2e-c813-4211-8d9a-2869c1968e9a`,\n json: `${iconBaseUrl}/13340707/ca21068e-8c27-4b84-9a1d-b965b49b3568`,\n md: `${iconBaseUrl}/13340707/39e7ff2b-9d0a-47e9-9686-bed51800084c`,\n yml: `${iconBaseUrl}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,\n yaml: `${iconBaseUrl}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,\n txt: `${iconBaseUrl}/13340707/7c52da20-1fe2-496c-b4bb-6ea61d0fe3dd`,\n sh: `${iconBaseUrl}/13340707/549ce181-4541-4811-8712-a9c5abd8eeae`,\n sql: `${iconBaseUrl}/13340707/b2b73a2e-e4e1-47c8-aabc-c204836244b8`,\n // Add additional default icons as needed\n // Note: These can also be customised and extended by end user using the tabIcons prop\n}\n\nexport const IDEFileExtensions = Object.keys(IDEDefaultIconMap)\n\ntype IDEAnimation = {\n delay: number\n isDone?: boolean\n tab: string \| null\n} & ({elements: HTMLElement[]} \| {isDone: true})\n\ntype IDEChatAnimation = {\n delay: number\n isDone?: boolean\n} & (\n \| {\n action: 'show'\n element: HTMLElement\n shouldScroll?: boolean\n shouldFadePrevious?: boolean\n messageIndex?: number\n isLast?: boolean\n }\n \| {action: 'delay'}\n \| {isDone: true}\n)\n\ntype IDEChatAnimationWithElement = {\n delay: number\n action: 'show'\n element: HTMLElement\n shouldScroll?: boolean\n shouldFadePrevious?: boolean\n messageIndex?: number\n isLast?: boolean\n}\n\ntype IDEEditorHandle = HTMLElement & {\n resetAnimation: () => void\n}\n\nconst _Editor = memo(\n forwardRef<IDEEditorHandle, IDEEditorProps>(\n (\n {\n activeTab = 0,\n 'data-testid': testId,\n files,\n triggerAnimation = false,\n showLineNumbers = true,\n size = 'medium',\n tabIcons = IDEDefaultIconMap,\n animationIsPaused,\n setAnimationIsDone,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef)\n const presRef = useRef<HTMLDivElement>(null)\n const [scheduledAnimations, setScheduledAnimations] = useState<IDEAnimation[]>([])\n const isPausedRef = useRef(animationIsPaused)\n isPausedRef.current = animationIsPaused\n\n const tabs = useTabs({\n defaultTab: activeTab.toString(),\n autoActivate: true,\n onTabActivate: (_, activeTabRef) => {\n activeTabRef?.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'start'})\n resetAnimation()\n },\n })\n\n const scheduleAnimations = useCallback(() => {\n if (!presRef.current) return\n\n const pres = presRef.current.querySelectorAll<HTMLPreElement>('pre:not([data-has-suggestion=\"true\"])')\n const copilotSuggestions = presRef.current.querySelectorAll<HTMLPreElement>('pre[data-has-suggestion=\"true\"]')\n\n const animations: IDEAnimation[] = []\n\n for (const pre of pres) {\n animations.push({\n delay: 200,\n elements: [pre],\n tab: tabs.activeTab,\n })\n }\n\n animations.push({\n delay: 1000,\n elements: Array.from(copilotSuggestions),\n tab: tabs.activeTab,\n })\n\n animations.push({\n delay: 200,\n isDone: true,\n tab: tabs.activeTab,\n })\n\n setScheduledAnimations(animations)\n }, [tabs.activeTab])\n\n const resetAnimation = useCallback(() => {\n setScheduledAnimations([])\n setAnimationIsDone?.(false)\n\n const pres = presRef.current?.querySelectorAll('pre')\n if (pres) {\n for (const pre of pres) {\n pre.classList.remove(animationStyles['Animation--active'])\n }\n }\n\n scheduleAnimations()\n }, [scheduleAnimations, setAnimationIsDone])\n\n useImperativeHandle(ref, () => {\n if (!ref.current) {\n return {\n resetAnimation,\n } as IDEEditorHandle\n }\n\n return {\n ...ref.current,\n resetAnimation,\n }\n })\n\n useEffect(() => {\n scheduleAnimations()\n }, [scheduleAnimations, triggerAnimation])\n\n useEffect(() => {\n let prevTimestamp = -1\n let animationId: number\n let currentIndex = 0\n\n const animate: FrameRequestCallback = timestamp => {\n if (currentIndex >= scheduledAnimations.length \|\| tabs.activeTab === null) {\n return\n }\n\n if (isPausedRef.current) {\n // Reset timestamp when paused so we don't accumulate time\n prevTimestamp = -1\n animationId = requestAnimationFrame(animate)\n return\n }\n\n const diff = prevTimestamp === -1 ? 0 : timestamp - prevTimestamp\n prevTimestamp = timestamp\n\n const nextAnimation = scheduledAnimations[currentIndex]\n\n if (nextAnimation.isDone) {\n setAnimationIsDone?.(true)\n return\n }\n\n if (nextAnimation.tab !== tabs.activeTab) {\n return\n }\n\n nextAnimation.delay -= diff\n\n if (nextAnimation.delay <= 0) {\n for (const element of nextAnimation.elements) {\n element.classList.add(animationStyles['Animation--active'])\n }\n currentIndex++\n }\n\n animationId = requestAnimationFrame(animate)\n }\n\n animationId = requestAnimationFrame(animate)\n\n return () => {\n if (animationId) {\n cancelAnimationFrame(animationId)\n }\n }\n }, [scheduledAnimations, setAnimationIsDone, tabs.activeTab])\n\n return (\n <div\n className={clsx(styles.IDE__Editor, styles[`IDE__Editor--${size}`])}\n data-testid={testId \|\| testIds.editor}\n {...rest}\n >\n <div\n className={styles['IDE__Editor-tabs']}\n data-testid={testIds.editorTabs}\n {...tabs.getTabListProps({label: 'files'})}\n >\n {files.map((file, index) => {\n const language = file.name.split('.').pop()\n const isActiveTab = tabs.activeTab === index.toString()\n\n return (\n <button\n {...tabs.getTabProps(index.toString())}\n key={file.name}\n className={clsx(styles['IDE__Editor-tab'], isActiveTab && styles['IDE__Editor-tab--active'])}\n >\n {language && (\n <img\n className={styles['IDE__Editor-tab-icon']}\n alt=\"\"\n width={16}\n height={16}\n src={tabIcons[language]}\n />\n )}\n {file.name}\n </button>\n )\n })}\n </div>\n <div className={styles['IDE__Editor-content']}>\n {files.map((file, fileIndex) => (\n <div {...tabs.getTabPanelProps(fileIndex.toString())} key={file.name}>\n <span className=\"visually-hidden\">{file.alternativeText}</span>\n <div className={styles['IDE__Editor-content-wrapper']} aria-hidden=\"true\">\n {showLineNumbers && (\n <div className={styles['IDE__Editor-lineNumbers']}>\n {(Array.isArray(file.code) ? file.code : file.code.split('\\n')).map((_, index) => (\n <div key={index} className={styles['IDE__Editor-lineNumber']}>\n {index + 1}\n </div>\n ))}\n </div>\n )}\n <div\n ref={tabs.activeTab === fileIndex.toString() ? presRef : null}\n data-testid={testIds.editorContent}\n className={styles['IDE__Editor-content-inner']}\n >\n {Array.isArray(file.code) ? (\n (file.code as string[]).map((line, index) => {\n const isSuggestion = index + 1 >= (file.suggestedLineStart ?? Infinity)\n return (\n <React.Fragment key={line + index}>\n <pre\n key={index}\n className={clsx(\n styles['IDE__Editor-pane'],\n index + 1 < (file.suggestedLineStart ?? Infinity) &&\n animationStyles['Animation--slide-in-right'],\n isSuggestion && animationStyles['Animation--slide-in-down'],\n isSuggestion && styles['IDE__Editor-pane--suggested'],\n )}\n dangerouslySetInnerHTML={{__html: line === '' ? ' ' : line}}\n data-has-suggestion={isSuggestion}\n />\n {isSuggestion && index === file.code.length - 1 && (\n <pre\n className={clsx(\n animationStyles['Animation--slide-in-down'],\n styles['IDE__Chat-copilot-indicator'],\n )}\n data-has-suggestion={isSuggestion}\n >\n <CopilotIcon size={24} className={styles['IDE__Chat-copilot-indicator-label']} />\n <Text as=\"span\" className={styles['IDE__Chat-copilot-indicator-label']}>\n Copilot\n </Text>\n </pre>\n )}\n </React.Fragment>\n )\n })\n ) : (\n <pre\n className={clsx(styles['IDE__Editor-pane'], animationStyles['Animation--slide-in-right'])}\n dangerouslySetInnerHTML={{__html: file.code}}\n />\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n )\n },\n ),\n)\n\nconst PauseIcon = () => (\n <svg fill=\"none\" role=\"presentation\" aria-hidden=\"true\" viewBox=\"3.17 2.28 13.7 15.42\">\n <path\n d=\"M4.66148 2.3125C3.83593 2.3125 3.16669 2.98174 3.16669 3.80729V16.1927C3.16669 17.0183 3.83593 17.6875 4.66148 17.6875H7.65106C8.47662 17.6875 9.14586 17.0183 9.14586 16.1927V3.80729C9.14586 2.98174 8.47662 2.3125 7.65106 2.3125H4.66148ZM4.44794 3.80729C4.44794 3.68936 4.54355 3.59375 4.66148 3.59375H7.65106C7.769 3.59375 7.86461 3.68936 7.86461 3.80729V16.1927C7.86461 16.3106 7.769 16.4062 7.65106 16.4062H4.66148C4.54355 16.4062 4.44794 16.3106 4.44794 16.1927V3.80729ZM12.349 2.3125C11.5235 2.3125 10.8542 2.98174 10.8542 3.80729V16.1927C10.8542 17.0183 11.5235 17.6875 12.349 17.6875H15.3386C16.1642 17.6875 16.8334 17.0183 16.8334 16.1927V3.80729C16.8334 2.98174 16.1642 2.3125 15.3386 2.3125H12.349ZM12.1355 3.80729C12.1355 3.68936 12.2311 3.59375 12.349 3.59375H15.3386C15.4565 3.59375 15.5521 3.68936 15.5521 3.80729V16.1927C15.5521 16.3106 15.4565 16.4062 15.3386 16.4062H12.349C12.2311 16.4062 12.1355 16.3106 12.1355 16.1927V3.80729Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n)\nconst PlayIcon = () => (\n <svg fill=\"none\" role=\"presentation\" aria-hidden=\"true\" viewBox=\"4.02 2.3 14.43 15.4\">\n <path\n d=\"M6.24905 3.69194C5.82218 3.45967 5.30225 3.76868 5.30225 4.25466V15.7452C5.30225 16.2312 5.82218 16.5402 6.24906 16.3079L16.8079 10.5626C17.2538 10.32 17.2538 9.67983 16.8079 9.4372L6.24905 3.69194ZM4.021 4.25466C4.021 2.79672 5.58078 1.86969 6.86142 2.56651L17.4203 8.31176C18.758 9.03966 18.758 10.9602 17.4203 11.6881L6.86143 17.4333C5.58079 18.1301 4.021 17.2031 4.021 15.7452V4.25466Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n)\n\ntype PlayPauseButtonProps = {\n isPlaying?: boolean\n onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n const onClick = useCallback(() => {\n onPlayPause?.(!isPlaying)\n }, [onPlayPause, isPlaying])\n\n /\n aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n * eg \"Play animation on\" or \"Pause animation off\"\n /\n return (\n <button\n className={styles['IDE__play-pause-button']}\n type=\"button\"\n onClick={onClick}\n aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n )\n}\n\n/\n Use IDE to display a decorative editor component\n * @deprecated IDE is deprecated and will be removed in a future release.\n * @see https://primer.style/brand/components/IDE\n */\nexport const IDE = Object.assign(_IDERoot, {\n testIds,\n Chat: _Chat,\n Editor: _Editor,\n})\n"],"mappings":"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"}

package/esm/IDE/IDE.module.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import './IDE.module-CFxIRObF.css';var e = {
-	IDE__inner: "Primer_Brand__IDE-module__IDE__inner___NnTQJ",
+import './IDE.module-CFxIRObF.css';//#region src/IDE/IDE.module.css
+var e = "Primer_Brand__IDE-module__IDE__inner___NnTQJ", t = "Primer_Brand__IDE-module__IDE__main___U46Bi", n = "Primer_Brand__IDE-module__IDE__Chat___FjTgp", r = "Primer_Brand__IDE-module__IDE__Editor___Shd_o", i = "Primer_Brand__IDE-module__IDE___d_Ai4", a = {
+	IDE__inner: e,
 	"IDE--glass": "Primer_Brand__IDE-module__IDE--glass___kIHmW",
-	IDE__main: "Primer_Brand__IDE-module__IDE__main___U46Bi",
+	IDE__main: t,
 	"IDE--default": "Primer_Brand__IDE-module__IDE--default___1AD3a",
-	IDE__Chat: "Primer_Brand__IDE-module__IDE__Chat___FjTgp",
+	IDE__Chat: n,
 	"IDE--full-exp": "Primer_Brand__IDE-module__IDE--full-exp___eJnjX",
 	"IDE__Chat-wrapper": "Primer_Brand__IDE-module__IDE__Chat-wrapper___OBbrc",
 	"IDE__Chat-message-user": "Primer_Brand__IDE-module__IDE__Chat-message-user___tz2Ml",
@@ -15,7 +16,7 @@ import './IDE.module-CFxIRObF.css';var e = {
 	"IDE__Chat-message": "Primer_Brand__IDE-module__IDE__Chat-message___mpKSJ",
 	"IDE__Chat-message--visible": "Primer_Brand__IDE-module__IDE__Chat-message--visible___t7sQR",
 	"IDE__Chat-message--faded": "Primer_Brand__IDE-module__IDE__Chat-message--faded___Zj1bF",
-	IDE__Editor: "Primer_Brand__IDE-module__IDE__Editor___Shd_o",
+	IDE__Editor: r,
 	"IDE__Editor-tabs": "Primer_Brand__IDE-module__IDE__Editor-tabs___iGJJ2",
 	"IDE__Editor-tab": "Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_",
 	"IDE__Editor-tab--active": "Primer_Brand__IDE-module__IDE__Editor-tab--active___gdbpw",
@@ -36,9 +37,9 @@ import './IDE.module-CFxIRObF.css';var e = {
 	"IDE__Chat-copilot-indicator-label": "Primer_Brand__IDE-module__IDE__Chat-copilot-indicator-label___Ly0_c",
 	"IDE__play-pause-button": "Primer_Brand__IDE-module__IDE__play-pause-button___z27k0",
 	"IDE--chat-only": "Primer_Brand__IDE-module__IDE--chat-only____CFK8",
-	IDE: "Primer_Brand__IDE-module__IDE___d_Ai4"
+	IDE: i
 };
 //#endregion
-export { e as default };
+export { i as IDE, n as IDE__Chat, r as IDE__Editor, e as IDE__inner, t as IDE__main, a as default };
 //# sourceMappingURL=IDE.module.js.map

package/esm/Icon/Icon.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type ReactElement, type SVGAttributes } from 'react';
+import React, { type ReactElement, type SVGAttributes } from 'react';
 import { type Icon as OcticonProps } from '@primer/octicons-react';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css';
@@ -19,5 +19,5 @@ export type IconProps = SVGAttributes<SVGElement> & {
     hasBackground?: boolean;
     size?: IconSize;
 };
-export declare const Icon: ({ icon: Octicon, className, color, hasBackground, size, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ icon: Octicon, className, color, hasBackground, size, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=Icon.d.ts.map

package/esm/Icon/Icon.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAAC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAGlE,OAAO,EAAC,KAAK,IAAI,IAAI,YAAY,EAAC,MAAM,wBAAwB,CAAA;AAGhE,OAAO,6FAA6F,CAAA;AACpG,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,cAAc,uCAAwC,CAAA;AACnE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,eAAO,MAAM,gBAAgB,uCAAwC,CAAA;AACrE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAG/D,eAAO,MAAM,SAAS,mEAAoD,CAAA;AAC1E,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAEjD,eAAO,MAAM,eAAe,SAAe,CAAA;AAC3C,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAI9D,CAAA;AAUD,eAAO,MAAM,UAAU,wIAAS,CAAA;AAChC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,eAAO,MAAM,gBAAgB,WAAgB,CAAA;AAE7C,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,UAAU,CAAC,GAAG;IAClD,IAAI,EAAE,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,mEAOlB,SAAS,~~4CA8BX~~,CAAA"}
1	+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAGlE,OAAO,EAAC,KAAK,IAAI,IAAI,YAAY,EAAC,MAAM,wBAAwB,CAAA;AAGhE,OAAO,6FAA6F,CAAA;AACpG,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,cAAc,uCAAwC,CAAA;AACnE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,eAAO,MAAM,gBAAgB,uCAAwC,CAAA;AACrE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAG/D,eAAO,MAAM,SAAS,mEAAoD,CAAA;AAC1E,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAEjD,eAAO,MAAM,eAAe,SAAe,CAAA;AAC3C,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAI9D,CAAA;AAUD,eAAO,MAAM,UAAU,wIAAS,CAAA;AAChC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,eAAO,MAAM,gBAAgB,WAAgB,CAAA;AAE7C,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,UAAU,CAAC,GAAG;IAClD,IAAI,EAAE,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,mEAOlB,SAAS,sBA8BX,CAAA"}

package/esm/Icon/Icon.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Colors as t } from "../constants.js";
 import n from "./Icon.module.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon/colors-CctMSz17.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes-Bjhpbkke.css';/* empty css                                                                                       */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes-Bjhpbkke.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon/colors-CctMSz17.css';/* empty css                                                                                       */
 /* empty css                                                                                                  */
 import r from "react";
 import { jsx as i } from "react/jsx-runtime";

package/esm/Icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["import React, {type ReactElement, type SVGAttributes} from 'react'\nimport styles from './Icon.module.css'\nimport {clsx} from 'clsx'\nimport {type Icon as OcticonProps} from '@primer/octicons-react'\nimport {Colors} from '../constants'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css'\n\nexport const namedIconSizes = ['small', 'medium', 'large'] as const\nexport type NamedIconSize = (typeof namedIconSizes)[number]\n\nexport const numericIconSizes = [20, 24, 28, 32, 36, 40, 44] as const\nexport type NumericIconSize = (typeof numericIconSizes)[number]\nconst isNumericIconSize = (size: IconSize): size is NumericIconSize => typeof size === 'number'\n\nexport const iconSizes = [...namedIconSizes, ...numericIconSizes] as const\nexport type IconSize = (typeof iconSizes)[number]\n\nexport const defaultIconSize = iconSizes[0]\nexport const iconSizeMap: Record<NamedIconSize, NumericIconSize> = {\n small: 20,\n medium: 32,\n large: 44,\n}\n\nconst getIconSize = (size: IconSize): NumericIconSize => {\n if (isNumericIconSize(size)) {\n return size\n }\n\n return iconSizeMap[size]\n}\n\nexport const iconColors = Colors\nexport type IconColor = (typeof iconColors)[number]\nexport const defaultIconColor = iconColors[0]\n\nexport type IconProps = SVGAttributes<SVGElement> & {\n icon: OcticonProps \| ReactElement<OcticonProps>\n color?: IconColor\n hasBackground?: boolean\n size?: IconSize\n}\n\nexport const Icon = ({\n icon: Octicon,\n className,\n color = defaultIconColor,\n hasBackground = false,\n size = defaultIconSize,\n ...rest\n}: IconProps) => {\n const iconSize = getIconSize(size)\n\n const iconProps = {\n size: iconSize,\n ...rest,\n }\n\n const iconComponent = React.isValidElement(Octicon) ? (\n React.cloneElement(Octicon as ReactElement<OcticonProps>, {\n ...Octicon.props,\n ...iconProps,\n })\n ) : (\n <Octicon {...iconProps} />\n )\n\n return (\n <div\n className={clsx(\n styles['Icon'],\n styles[`Icon--size-${iconSize}`],\n styles[`Icon--color-${color}`],\n hasBackground && [styles['Icon--background'], styles[`Icon--background-color-${color}`]],\n className,\n )}\n >\n {iconComponent}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,IAAiB;CAAC;CAAS;CAAU;~~CAAQ~~,~~EAG7C~~,IAAmB;CAAC;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;~~CAAG~~,~~EAEtD~~,KAAqB,MAA4C,OAAO,KAAS,UAE1E,IAAY,CAAC,GAAG,GAAgB,GAAG,~~EAAiB~~,~~EAGpD~~,IAAkB,EAAU,IAC5B,IAAsD;CACjE,OAAO;CACP,QAAQ;CACR,OAAO;~~CACR~~,~~EAEK~~,KAAe,MACf,EAAkB,~~EAAK~~,~~GAClB~~,IAGF,EAAY,IAGR,IAAa,GAEb,IAAmB,EAAW,IAS9B,KAAQ,EACnB,MAAM,GACN,cACA,WAAQ,GACR,mBAAgB,IAChB,UAAO,GACP,GAAG,QACY;CACf,IAAM,IAAW,EAAY,~~EAAK~~,~~EAE5B~~,IAAY;EAChB,MAAM;EACN,GAAG;~~EACJ~~,~~EAEK~~,IAAgB,EAAM,eAAe,~~EAAQ~~,~~GACjD~~,EAAM,aAAa,GAAuC;EACxD,GAAG,EAAQ;EACX,GAAG;~~EACJ~~,CAAC,~~GAEF~~,kBAAC,GAAD,EAAS,GAAI,~~GAAa~~,CAAA;~~AAG5B~~,~~QACE~~,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,cAAc,MACrB,EAAO,eAAe,MACtB,KAAiB,CAAC,EAAO,qBAAqB,EAAO,0BAA0B,~~KAAS~~,~~EACxF~~,~~EACD~~;~~YAEA~~;~~EACG~~,CAAA"}
1	+ {"version":3,"file":"Icon.js","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["import React, {type ReactElement, type SVGAttributes} from 'react'\nimport styles from './Icon.module.css'\nimport {clsx} from 'clsx'\nimport {type Icon as OcticonProps} from '@primer/octicons-react'\nimport {Colors} from '../constants'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css'\n\nexport const namedIconSizes = ['small', 'medium', 'large'] as const\nexport type NamedIconSize = (typeof namedIconSizes)[number]\n\nexport const numericIconSizes = [20, 24, 28, 32, 36, 40, 44] as const\nexport type NumericIconSize = (typeof numericIconSizes)[number]\nconst isNumericIconSize = (size: IconSize): size is NumericIconSize => typeof size === 'number'\n\nexport const iconSizes = [...namedIconSizes, ...numericIconSizes] as const\nexport type IconSize = (typeof iconSizes)[number]\n\nexport const defaultIconSize = iconSizes[0]\nexport const iconSizeMap: Record<NamedIconSize, NumericIconSize> = {\n small: 20,\n medium: 32,\n large: 44,\n}\n\nconst getIconSize = (size: IconSize): NumericIconSize => {\n if (isNumericIconSize(size)) {\n return size\n }\n\n return iconSizeMap[size]\n}\n\nexport const iconColors = Colors\nexport type IconColor = (typeof iconColors)[number]\nexport const defaultIconColor = iconColors[0]\n\nexport type IconProps = SVGAttributes<SVGElement> & {\n icon: OcticonProps \| ReactElement<OcticonProps>\n color?: IconColor\n hasBackground?: boolean\n size?: IconSize\n}\n\nexport const Icon = ({\n icon: Octicon,\n className,\n color = defaultIconColor,\n hasBackground = false,\n size = defaultIconSize,\n ...rest\n}: IconProps) => {\n const iconSize = getIconSize(size)\n\n const iconProps = {\n size: iconSize,\n ...rest,\n }\n\n const iconComponent = React.isValidElement(Octicon) ? (\n React.cloneElement(Octicon as ReactElement<OcticonProps>, {\n ...Octicon.props,\n ...iconProps,\n })\n ) : (\n <Octicon {...iconProps} />\n )\n\n return (\n <div\n className={clsx(\n styles['Icon'],\n styles[`Icon--size-${iconSize}`],\n styles[`Icon--color-${color}`],\n hasBackground && [styles['Icon--background'], styles[`Icon--background-color-${color}`]],\n className,\n )}\n >\n {iconComponent}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,IAAiB;CAAC;CAAS;CAAU;AAAO,GAG5C,IAAmB;CAAC;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;AAAE,GAErD,KAAqB,MAA4C,OAAO,KAAS,UAE1E,IAAY,CAAC,GAAG,GAAgB,GAAG,CAAgB,GAGnD,IAAkB,EAAU,IAC5B,IAAsD;CACjE,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEM,KAAe,MACf,EAAkB,CAAI,IACjB,IAGF,EAAY,IAGR,IAAa,GAEb,IAAmB,EAAW,IAS9B,KAAQ,EACnB,MAAM,GACN,cACA,WAAQ,GACR,mBAAgB,IAChB,UAAO,GACP,GAAG,QACY;CACf,IAAM,IAAW,EAAY,CAAI,GAE3B,IAAY;EAChB,MAAM;EACN,GAAG;CACL,GAEM,IAAgB,EAAM,eAAe,CAAO,IAChD,EAAM,aAAa,GAAuC;EACxD,GAAG,EAAQ;EACX,GAAG;CACL,CAAC,IAED,kBAAC,GAAD,EAAS,GAAI,EAAY,CAAA;CAG3B,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,cAAc,MACrB,EAAO,eAAe,MACtB,KAAiB,CAAC,EAAO,qBAAqB,EAAO,0BAA0B,IAAQ,GACvF,CACF;YAEC;CACE,CAAA;AAET"}

package/esm/Icon/Icon.module.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import './Icon.module-UyYnXhrw.css';var e = {
-	Icon: "Primer_Brand__Icon-module__Icon___aJJhk",
+import './Icon.module-UyYnXhrw.css';//#region src/Icon/Icon.module.css
+var e = "Primer_Brand__Icon-module__Icon___aJJhk", t = {
+	Icon: e,
 	"Icon--size-20": "Primer_Brand__Icon-module__Icon--size-20___j3HnM",
 	"Icon--size-24": "Primer_Brand__Icon-module__Icon--size-24___IMNie",
 	"Icon--size-28": "Primer_Brand__Icon-module__Icon--size-28___a2UX9",
@@ -38,6 +39,6 @@ import './Icon.module-UyYnXhrw.css';var e = {
 	"Icon--background-color-yellow": "Primer_Brand__Icon-module__Icon--background-color-yellow___uFZoS"
 };
 //#endregion
-export { e as default };
+export { e as Icon, t as default };
 //# sourceMappingURL=Icon.module.js.map

package/esm/Image/Image.d.ts CHANGED Viewed

@@ -21,5 +21,5 @@ export type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<H
     }[];
     srcSet?: undefined;
 });
-export declare const Image: ({ animate, aspectRatio, className, as, ref, alt, width, height, media, srcSet, style, borderRadius, ...rest }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Image: ({ animate, aspectRatio, className, as, ref, alt, width, height, media, srcSet, style, borderRadius, ...rest }: ImageProps) => React.JSX.Element;
 //# sourceMappingURL=Image.d.ts.map

package/esm/Image/Image.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAG9C,eAAO,MAAM,wBAAwB,yDAA0D,CAAA;AAC/F,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE1E,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAChE,SAAS,CAAC,gBAAgB,CAAC,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IAId,YAAY,CAAC,EAAE,wBAAwB,CAAA;IACvC,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAA;CACnE,GAAG,CACA;IACE,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAA;CACnE,GACD;IACE,EAAE,EAAE,SAAS,CAAA;IACb,OAAO,CAAC,EAAE;QACR,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,EAAE,CAAA;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CACJ,CAAA;AAeH,eAAO,MAAM,KAAK,GAAI,+GAcnB,UAAU,~~4CAoEZ~~,CAAA"}
1	+ {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAG9C,eAAO,MAAM,wBAAwB,yDAA0D,CAAA;AAC/F,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE1E,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAChE,SAAS,CAAC,gBAAgB,CAAC,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IAId,YAAY,CAAC,EAAE,wBAAwB,CAAA;IACvC,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAA;CACnE,GAAG,CACA;IACE,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAA;CACnE,GACD;IACE,EAAE,EAAE,SAAS,CAAA;IACb,OAAO,CAAC,EAAE;QACR,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,EAAE,CAAA;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CACJ,CAAA;AAeH,eAAO,MAAM,KAAK,GAAI,+GAcnB,UAAU,sBAoEZ,CAAA"}

package/esm/Image/Image.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import n from "./Image.module.js";
 import "react";

package/esm/Image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","names":[],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Image.module.css'\nimport {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const ImageBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const\nexport type ImageBorderRadiusOptions = (typeof ImageBorderRadiusOptions)[number]\nexport type ImageAspectRatio = '1:1' \| '16:9' \| '16:10' \| '4:3' \| 'custom'\n\nexport type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> &\n BaseProps<HTMLImageElement> & {\n src: string\n alt: string\n aspectRatio?: ImageAspectRatio\n media?: string\n /\n Apply a system-level border radius value\n */\n borderRadius?: ImageBorderRadiusOptions\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n } & (\n \| {\n as?: 'img' // assuming this is true for others to be required\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n }\n \| {\n as: 'picture' // assuming this is true for others to be required\n sources?: {\n srcset: string\n media: string\n }[]\n srcSet?: undefined\n }\n )\n\nconst aspectRatioResolver = (ratio?: ImageAspectRatio) => {\n if (typeof ratio === 'string') {\n if (ratio === 'custom') return 'custom'\n const [width, height] = ratio.split(':').map(Number)\n return `${width}-${height}`\n }\n}\n\nconst objectWithoutKey = (object, key) => {\n const {[key]: deletedKey, ...otherKeys} = object\n return otherKeys\n}\n\nexport const Image = ({\n animate,\n aspectRatio,\n className,\n as = 'img',\n ref,\n alt,\n width,\n height,\n media,\n srcSet,\n style,\n borderRadius,\n ...rest\n}: ImageProps) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n if (as === 'picture') {\n return (\n <picture\n className={clsx(\n animationClasses,\n styles['Image__container'],\n aspectRatio && styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`],\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n >\n {rest['sources'] &&\n rest['sources'].map((source, index) => <source key={index} srcSet={source.srcset} media={source.media} />)}\n {srcSet && <source srcSet={srcSet} media={media} />}\n <img\n ref={ref}\n alt={alt}\n width={width ?? '100%'}\n height={height ?? '100%'}\n className={clsx(styles.Image, borderRadius && styles[`Image--borderRadius-${borderRadius}`])}\n {...objectWithoutKey(rest, 'sources')}\n />\n </picture>\n )\n }\n if (aspectRatio) {\n return (\n <span\n className={clsx(styles['Image__container'], styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`])}\n >\n <img\n ref={ref}\n alt={alt}\n width={width ? width : '100%'}\n height={height ? height : '100%'}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n </span>\n )\n }\n return (\n <img\n ref={ref}\n alt={alt}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n width={width && width}\n height={height && height}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,IAAa,IAA2B;CAAC;CAAS;CAAU;CAAS;CAAU;~~CAAO~~,~~EA8BhF~~,KAAuB,MAA6B;~~AACxD~~,~~KAAI~~,OAAO,KAAU,UAAU;~~AAC7B~~,~~MAAI~~,MAAU,~~SAAU~~,~~QAAO~~;EAC/B,IAAM,CAAC,GAAO,KAAU,EAAM,MAAM,~~IAAI~~,CAAC,IAAI,~~OAAO~~;~~AACpD~~,~~SAAO~~,GAAG,EAAM,GAAG~~;;GAIjB~~,KAAoB,GAAQ,MAAQ;CACxC,IAAM,GAAE,IAAM,GAAY,GAAG,MAAa;~~AAC1C~~,~~QAAO~~;~~GAGI~~,KAAS,EACpB,YACA,gBACA,cACA,QAAK,OACL,QACA,QACA,UACA,WACA,UACA,WACA,UACA,iBACA,GAAG,QACa;CAChB,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,~~EAAQ~~;~~AAkDxF~~,~~QAjDI~~,MAAO,YAEP,kBAAC,WAAD;EACE,WAAW,EACT,GACA,EAAO,kBACP,KAAe,EAAO,uBAAuB,EAAoB,~~EAAY~~,~~KAC7E~~,KAAgB,EAAO,uBAAuB,MAC9C,~~EACD~~;~~EACD~~,OAAO;GAAC,GAAG;GAAuB,GAAG;~~GAAM~~;~~YAR7C~~;GAUG,EAAK,WACJ,EAAK,QAAW,KAAK,GAAQ,MAAU,kBAAC,UAAD;IAAoB,QAAQ,EAAO;IAAQ,OAAO,EAAO;~~IAAS~~,~~EAArD~~,~~EAAqD~~,CAAC;~~GAC3G~~,KAAU,kBAAC,UAAD;IAAgB;IAAe;~~IAAS~~,CAAA;~~GACnD~~,kBAAC,OAAD;IACO;IACA;IACL,OAAO,KAAS;IAChB,QAAQ,KAAU;IAClB,WAAW,EAAK,EAAO,OAAO,KAAgB,EAAO,uBAAuB,~~KAAgB~~;~~IAC5F~~,GAAI,EAAiB,GAAM,~~UAAU~~;~~IACrC~~,CAAA;~~GACM~~;~~MAGV~~,IAEA,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,kBAAqB,EAAO,uBAAuB,EAAoB,~~EAAY~~,IAAI;~~YAE9G~~,kBAAC,OAAD;GACO;GACA;GACL,OAAO,KAAgB;GACvB,QAAQ,KAAkB;GAC1B,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,~~EACD~~;~~GACO~~;GACR,OAAO;IAAC,GAAG;IAAuB,GAAG;~~IAAM~~;~~GAC3C~~,GAAI;~~GACJ~~,CAAA;~~EACG~~,CAAA,~~GAIT~~,kBAAC,OAAD;EACO;EACA;EACL,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,~~EACD~~;~~EACD~~,OAAO,KAAS;EAChB,QAAQ,KAAU;EACV;EACR,OAAO;GAAC,GAAG;GAAuB,GAAG;~~GAAM~~;~~EAC3C~~,GAAI;~~EACJ~~,CAAA"}
1	+ {"version":3,"file":"Image.js","names":[],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Image.module.css'\nimport {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const ImageBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const\nexport type ImageBorderRadiusOptions = (typeof ImageBorderRadiusOptions)[number]\nexport type ImageAspectRatio = '1:1' \| '16:9' \| '16:10' \| '4:3' \| 'custom'\n\nexport type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> &\n BaseProps<HTMLImageElement> & {\n src: string\n alt: string\n aspectRatio?: ImageAspectRatio\n media?: string\n /\n Apply a system-level border radius value\n */\n borderRadius?: ImageBorderRadiusOptions\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n } & (\n \| {\n as?: 'img' // assuming this is true for others to be required\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n }\n \| {\n as: 'picture' // assuming this is true for others to be required\n sources?: {\n srcset: string\n media: string\n }[]\n srcSet?: undefined\n }\n )\n\nconst aspectRatioResolver = (ratio?: ImageAspectRatio) => {\n if (typeof ratio === 'string') {\n if (ratio === 'custom') return 'custom'\n const [width, height] = ratio.split(':').map(Number)\n return `${width}-${height}`\n }\n}\n\nconst objectWithoutKey = (object, key) => {\n const {[key]: deletedKey, ...otherKeys} = object\n return otherKeys\n}\n\nexport const Image = ({\n animate,\n aspectRatio,\n className,\n as = 'img',\n ref,\n alt,\n width,\n height,\n media,\n srcSet,\n style,\n borderRadius,\n ...rest\n}: ImageProps) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n if (as === 'picture') {\n return (\n <picture\n className={clsx(\n animationClasses,\n styles['Image__container'],\n aspectRatio && styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`],\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n >\n {rest['sources'] &&\n rest['sources'].map((source, index) => <source key={index} srcSet={source.srcset} media={source.media} />)}\n {srcSet && <source srcSet={srcSet} media={media} />}\n <img\n ref={ref}\n alt={alt}\n width={width ?? '100%'}\n height={height ?? '100%'}\n className={clsx(styles.Image, borderRadius && styles[`Image--borderRadius-${borderRadius}`])}\n {...objectWithoutKey(rest, 'sources')}\n />\n </picture>\n )\n }\n if (aspectRatio) {\n return (\n <span\n className={clsx(styles['Image__container'], styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`])}\n >\n <img\n ref={ref}\n alt={alt}\n width={width ? width : '100%'}\n height={height ? height : '100%'}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n </span>\n )\n }\n return (\n <img\n ref={ref}\n alt={alt}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n width={width && width}\n height={height && height}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,IAAa,IAA2B;CAAC;CAAS;CAAU;CAAS;CAAU;AAAM,GA8B/E,KAAuB,MAA6B;CACxD,IAAI,OAAO,KAAU,UAAU;EAC7B,IAAI,MAAU,UAAU,OAAO;EAC/B,IAAM,CAAC,GAAO,KAAU,EAAM,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;EACnD,OAAO,GAAG,EAAM,GAAG;CACrB;AACF,GAEM,KAAoB,GAAQ,MAAQ;CACxC,IAAM,GAAE,IAAM,GAAY,GAAG,MAAa;CAC1C,OAAO;AACT,GAEa,KAAS,EACpB,YACA,gBACA,cACA,QAAK,OACL,QACA,QACA,UACA,WACA,UACA,WACA,UACA,iBACA,GAAG,QACa;CAChB,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO;CAkDvF,OAjDI,MAAO,YAEP,kBAAC,WAAD;EACE,WAAW,EACT,GACA,EAAO,kBACP,KAAe,EAAO,uBAAuB,EAAoB,CAAW,MAC5E,KAAgB,EAAO,uBAAuB,MAC9C,CACF;EACA,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;YAR5C;GAUG,EAAK,WACJ,EAAK,QAAW,KAAK,GAAQ,MAAU,kBAAC,UAAD;IAAoB,QAAQ,EAAO;IAAQ,OAAO,EAAO;GAAQ,GAApD,CAAoD,CAAC;GAC1G,KAAU,kBAAC,UAAD;IAAgB;IAAe;GAAQ,CAAA;GAClD,kBAAC,OAAD;IACO;IACA;IACL,OAAO,KAAS;IAChB,QAAQ,KAAU;IAClB,WAAW,EAAK,EAAO,OAAO,KAAgB,EAAO,uBAAuB,IAAe;IAC3F,GAAI,EAAiB,GAAM,SAAS;GACrC,CAAA;EACM;MAGT,IAEA,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,kBAAqB,EAAO,uBAAuB,EAAoB,CAAW,IAAI;YAE7G,kBAAC,OAAD;GACO;GACA;GACL,OAAO,KAAgB;GACvB,QAAQ,KAAkB;GAC1B,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,CACF;GACQ;GACR,OAAO;IAAC,GAAG;IAAuB,GAAG;GAAK;GAC1C,GAAI;EACL,CAAA;CACG,CAAA,IAIR,kBAAC,OAAD;EACO;EACA;EACL,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,CACF;EACA,OAAO,KAAS;EAChB,QAAQ,KAAU;EACV;EACR,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;CACL,CAAA;AAEL"}

package/esm/Image/Image.module.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import './Image.module-BPflj1a0.css';var e = {
-	Image__container: "Primer_Brand__Image-module__Image__container___CEHRD",
-	Image: "Primer_Brand__Image-module__Image___JSzlx",
+import './Image.module-BPflj1a0.css';//#region src/Image/Image.module.css
+var e = "Primer_Brand__Image-module__Image__container___CEHRD", t = "Primer_Brand__Image-module__Image___JSzlx", n = {
+	Image__container: e,
+	Image: t,
 	"Image--aspect-ratio-custom": "Primer_Brand__Image-module__Image--aspect-ratio-custom___38Uyb",
 	"Image--aspect-ratio-1-1": "Primer_Brand__Image-module__Image--aspect-ratio-1-1___PcQBn",
 	"Image--aspect-ratio-16-9": "Primer_Brand__Image-module__Image--aspect-ratio-16-9___hneti",
@@ -13,6 +14,6 @@ import './Image.module-BPflj1a0.css';var e = {
 	"Image--borderRadius-full": "Primer_Brand__Image-module__Image--borderRadius-full___hQJEn"
 };
 //#endregion
-export { e as default };
+export { t as Image, e as Image__container, n as default };
 //# sourceMappingURL=Image.module.js.map

package/esm/InlineCode/InlineCode.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
 import t from "./InlineCode.module.js";
 import { forwardRef as n } from "react";

package/esm/InlineCode/InlineCode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineCode.js","names":[],"sources":["../../src/InlineCode/InlineCode.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './InlineCode.module.css'\n\nexport type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> &\n BaseProps<HTMLElement> & {\n /\n Controls whether the code fragment can wrap.\n * Disable only for short fragments that must remain together.\n * @default true\n /\n wrap?: boolean\n }\n\nfunction InlineCodeRoot(\n {className, children, wrap = true, ...rest}: InlineCodeProps,\n ref: React.ForwardedRef<HTMLElement>,\n) {\n return (\n <code ref={ref} className={clsx(styles.InlineCode, !wrap && styles['InlineCode--nowrap'], className)} {...rest}>\n <span className={styles.InlineCode__text}>{children}</span>\n </code>\n )\n}\n\n/\n Use InlineCode to render a short inline code fragment.\n */\nexport const InlineCode = forwardRef<HTMLElement, InlineCodeProps>(InlineCodeRoot)\n"],"mappings":";;;;;;AAsBA,SAAS,EACP,EAAC,cAAW,aAAU,UAAO,IAAM,GAAG,KACtC,GACA;~~AACA~~,~~QACE~~,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,YAAY,CAAC,KAAQ,EAAO,uBAAuB,~~EAAU~~;~~EAAE~~,GAAI;YACxG,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAmB;~~GAAgB~~,CAAA;~~EACtD~~,CAAA~~;;AAOX~~,IAAa,IAAa,EAAyC,~~EAAe~~"}
1	+ {"version":3,"file":"InlineCode.js","names":[],"sources":["../../src/InlineCode/InlineCode.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './InlineCode.module.css'\n\nexport type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> &\n BaseProps<HTMLElement> & {\n /\n Controls whether the code fragment can wrap.\n * Disable only for short fragments that must remain together.\n * @default true\n /\n wrap?: boolean\n }\n\nfunction InlineCodeRoot(\n {className, children, wrap = true, ...rest}: InlineCodeProps,\n ref: React.ForwardedRef<HTMLElement>,\n) {\n return (\n <code ref={ref} className={clsx(styles.InlineCode, !wrap && styles['InlineCode--nowrap'], className)} {...rest}>\n <span className={styles.InlineCode__text}>{children}</span>\n </code>\n )\n}\n\n/\n Use InlineCode to render a short inline code fragment.\n */\nexport const InlineCode = forwardRef<HTMLElement, InlineCodeProps>(InlineCodeRoot)\n"],"mappings":";;;;;;AAsBA,SAAS,EACP,EAAC,cAAW,aAAU,UAAO,IAAM,GAAG,KACtC,GACA;CACA,OACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,YAAY,CAAC,KAAQ,EAAO,uBAAuB,CAAS;EAAG,GAAI;YACxG,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAmB;EAAe,CAAA;CACtD,CAAA;AAEV;AAKA,IAAa,IAAa,EAAyC,CAAc"}

package/esm/InlineCode/InlineCode.module.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import './InlineCode.module-Br3-YmSA.css';var e = {
-	InlineCode: "Primer_Brand__InlineCode-module__InlineCode___CY8l3",
+import './InlineCode.module-Br3-YmSA.css';//#region src/InlineCode/InlineCode.module.css
+var e = "Primer_Brand__InlineCode-module__InlineCode___CY8l3", t = "Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j", n = {
+	InlineCode: e,
 	"InlineCode--nowrap": "Primer_Brand__InlineCode-module__InlineCode--nowrap___YpKts",
-	InlineCode__text: "Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j"
+	InlineCode__text: t
 };
 //#endregion
-export { e as default };
+export { e as InlineCode, t as InlineCode__text, n as default };
 //# sourceMappingURL=InlineCode.module.js.map

package/esm/InlineLink/InlineLink.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import e from "../node_modules/clsx/dist/clsx.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes-DujakhtG.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/base-BJeYaOpB.css';/* empty css                                                                                                         */
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/base-BJeYaOpB.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes-DujakhtG.css';/* empty css                                                                                                         */
 /* empty css                                                                                            */
 import t from "./InlineLink.module.js";
 import { forwardRef as n } from "react";

package/esm/InlineLink/InlineLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineLink.js","names":[],"sources":["../../src/InlineLink/InlineLink.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './InlineLink.module.css'\n\nexport type InlineLinkProps = BaseProps<HTMLAnchorElement> & {\n /\n Specify the links destination\n /\n href: string\n} & React.AnchorHTMLAttributes<HTMLAnchorElement> &\n React.HTMLAttributes<HTMLAnchorElement>\n\n/\n A HTML anchor link component that renders inline with adjacent text.\n */\nexport const InlineLink = forwardRef(\n ({className, children, href, ...rest}: PropsWithChildren<InlineLinkProps>, ref: Ref<HTMLAnchorElement>) => {\n const classes = clsx(styles.InlineLink, className)\n\n return (\n <a ref={ref} href={href} className={classes} {...rest}>\n {children}\n </a>\n )\n },\n)\n"],"mappings":";;;;;;;AA0BA,IAAa,IAAa,GACvB,EAAC,cAAW,aAAU,SAAM,GAAG,KAA2C,MAIvE,kBAAC,KAAD;CAAQ;CAAW;CAAM,WAHX,EAAK,EAAO,YAAY,~~EAGF~~;CAAS,GAAI;CAC9C;~~CACC~~,CAAA,CAGT"}
1	+ {"version":3,"file":"InlineLink.js","names":[],"sources":["../../src/InlineLink/InlineLink.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './InlineLink.module.css'\n\nexport type InlineLinkProps = BaseProps<HTMLAnchorElement> & {\n /\n Specify the links destination\n /\n href: string\n} & React.AnchorHTMLAttributes<HTMLAnchorElement> &\n React.HTMLAttributes<HTMLAnchorElement>\n\n/\n A HTML anchor link component that renders inline with adjacent text.\n */\nexport const InlineLink = forwardRef(\n ({className, children, href, ...rest}: PropsWithChildren<InlineLinkProps>, ref: Ref<HTMLAnchorElement>) => {\n const classes = clsx(styles.InlineLink, className)\n\n return (\n <a ref={ref} href={href} className={classes} {...rest}>\n {children}\n </a>\n )\n },\n)\n"],"mappings":";;;;;;;AA0BA,IAAa,IAAa,GACvB,EAAC,cAAW,aAAU,SAAM,GAAG,KAA2C,MAIvE,kBAAC,KAAD;CAAQ;CAAW;CAAM,WAHX,EAAK,EAAO,YAAY,CAGF;CAAS,GAAI;CAC9C;AACA,CAAA,CAGT"}

package/esm/InlineLink/InlineLink.module.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import './InlineLink.module-6R63us8B.css';var e = { InlineLink: "Primer_Brand__InlineLink-module__InlineLink___AAGDi" };
+import './InlineLink.module-6R63us8B.css';//#region src/InlineLink/InlineLink.module.css
+var e = "Primer_Brand__InlineLink-module__InlineLink___AAGDi", t = { InlineLink: e };
 //#endregion
-export { e as default };
+export { e as InlineLink, t as default };
 //# sourceMappingURL=InlineLink.module.js.map

package/esm/Label/Label.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { BiColorGradients as t, Colors as n, TriColorGradients as r } from "../constants.js";
 import { useAnimation as i } from "../animation/useAnimation.js";
 import { Text as a } from "../Text/Text.js";

package/esm/Label/Label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n /\n The leading visual appears before the Label content\n /\n leadingVisual?: React.ReactNode \| Icon\n /\n The color variations available in Label\n /\n color?: (typeof LabelColors)[number]\n /\n The size variations available in Label\n /\n size?: (typeof LabelSizes)[number]\n ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n root: 'Label',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n (\n {\n animate,\n className,\n size = defaultLabelSize,\n color = defaultLabelColor,\n children,\n 'data-testid': testId,\n leadingVisual: LeadingVisual,\n style,\n ...props\n },\n ref: Ref<HTMLSpanElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n return (\n <span\n ref={ref}\n className={clsx(\n animationClasses,\n styles.Label,\n styles[`Label--color-${color}`],\n styles[`Label--size-${size}`],\n isGradient && styles['Label--gradient'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {LeadingVisual && (\n <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n {typeof LeadingVisual === 'function' ? (\n <LeadingVisual />\n ) : (\n React.isValidElement<{className?: string}>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: clsx(styles['Label__icon-visual']),\n })\n )}\n </span>\n )}\n <span className={clsx(styles['Label__text'])}>\n <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n {children}\n </Text>\n </span>\n </span>\n )\n },\n)\n\n/\n Use Label to display short status or metadata attached to an object in product-like UI\n * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.\n \n @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,~~EAAkB~~,~~EAEhD~~,IAAc,CAAC,GAAG,GAAQ,GAAG,~~EAAU~~,~~EACvC~~,IAAa;CAAC;CAAS;CAAU;~~CAAQ~~,~~EAEzC~~,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;~~AAClB~~,~~SAAO~~,GAAG,KAAK,KAAK~~;;CAEvB~~,~~EAEK~~,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,~~EAAQ~~,~~EAElF~~,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,~~EAAM~~,~~EAAE~~,CAAC,~~EAAM~~,CAAC;~~AAEzF~~,~~QACE~~,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,~~EACD~~;~~EACD~~,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;~~GAAM~~;~~EAC3C~~,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,~~EAAiB~~,CAAA,~~GAEjB~~,EAAM,eAAqC,~~EAAc~~,~~IACzD~~,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,~~sBAAsB~~,EAC9C,CAAC;~~GAEC~~,CAAA,~~EAET~~,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,~~YAAe~~;~~aAC1C~~,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,~~aAAgB~~;~~IAC5F~~;~~IACI~~,CAAA;~~GACF~~,CAAA,CACF;;~~EAGZ~~,~~EAQY~~,IAAQ,OAAO,OAAO,GAAQ,EAAC,~~YAAQ~~,CAAC"}
1	+ {"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n /\n The leading visual appears before the Label content\n /\n leadingVisual?: React.ReactNode \| Icon\n /\n The color variations available in Label\n /\n color?: (typeof LabelColors)[number]\n /\n The size variations available in Label\n /\n size?: (typeof LabelSizes)[number]\n ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n root: 'Label',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n (\n {\n animate,\n className,\n size = defaultLabelSize,\n color = defaultLabelColor,\n children,\n 'data-testid': testId,\n leadingVisual: LeadingVisual,\n style,\n ...props\n },\n ref: Ref<HTMLSpanElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n return (\n <span\n ref={ref}\n className={clsx(\n animationClasses,\n styles.Label,\n styles[`Label--color-${color}`],\n styles[`Label--size-${size}`],\n isGradient && styles['Label--gradient'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {LeadingVisual && (\n <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n {typeof LeadingVisual === 'function' ? (\n <LeadingVisual />\n ) : (\n React.isValidElement<{className?: string}>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: clsx(styles['Label__icon-visual']),\n })\n )}\n </span>\n )}\n <span className={clsx(styles['Label__text'])}>\n <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n {children}\n </Text>\n </span>\n </span>\n )\n },\n)\n\n/\n Use Label to display short status or metadata attached to an object in product-like UI\n * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.\n \n @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,CAAiB,GAE/C,IAAc,CAAC,GAAG,GAAQ,GAAG,CAAS,GACtC,IAAa;CAAC;CAAS;CAAU;AAAO,GAExC,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;EAClB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,CAAK,GAAG,CAAC,CAAK,CAAC;CAExF,OACE,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,CAAgB,CAAA,IAEhB,EAAM,eAAqC,CAAa,KACxD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,qBAAqB,EAC9C,CAAC;EAEC,CAAA,GAER,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,WAAc;aACzC,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,YAAe;IAC3F;GACG,CAAA;EACF,CAAA,CACF;;AAEV,CACF,GAQa,IAAQ,OAAO,OAAO,GAAQ,EAAC,WAAO,CAAC"}

package/esm/Label/Label.module.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import './Label.module-DDkalJAE.css';var e = {
-	Label: "Primer_Brand__Label-module__Label___RWs_8",
+import './Label.module-DDkalJAE.css';//#region src/Label/Label.module.css
+var e = "Primer_Brand__Label-module__Label___RWs_8", t = "Primer_Brand__Label-module__Label__label___nUKUt", n = "Primer_Brand__Label-module__Label__text___YCBde", r = {
+	Label: e,
 	"Label--size-small": "Primer_Brand__Label-module__Label--size-small___QxC5y",
-	Label__label: "Primer_Brand__Label-module__Label__label___nUKUt",
+	Label__label: t,
 	"Label--size-medium": "Primer_Brand__Label-module__Label--size-medium___QxFgp",
 	"Label--size-large": "Primer_Brand__Label-module__Label--size-large___AEmn9",
 	"Label--color-default": "Primer_Brand__Label-module__Label--color-default___Y9nDM",
@@ -24,12 +25,12 @@ import './Label.module-DDkalJAE.css';var e = {
 	"Label--color-red-orange": "Primer_Brand__Label-module__Label--color-red-orange___d4Om3",
 	"Label--color-teal": "Primer_Brand__Label-module__Label--color-teal___AC7RS",
 	"Label--color-yellow": "Primer_Brand__Label-module__Label--color-yellow___QjHgW",
-	Label__text: "Primer_Brand__Label-module__Label__text___YCBde",
+	Label__text: n,
 	"Label--gradient": "Primer_Brand__Label-module__Label--gradient___r4d_A",
 	"Label__icon-visual": "Primer_Brand__Label-module__Label__icon-visual___Cq0aX",
 	"Label__leading-visual": "Primer_Brand__Label-module__Label__leading-visual___2wAbr"
 };
 //#endregion
-export { e as default };
+export { e as Label, t as Label__label, n as Label__text, r as default };
 //# sourceMappingURL=Label.module.js.map

package/esm/Link/Link.d.ts CHANGED Viewed

@@ -25,5 +25,5 @@ export type LinkProps = {
  * Links connect users to related content.
  * These are not intended to be used as a call-to-action.
  */
-export declare function Link({ size, variant, className, children, isExternal, onMouseEnter, onMouseLeave, onFocus, onBlur, arrowDirection, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ size, variant, className, children, isExternal, onMouseEnter, onMouseLeave, onFocus, onBlur, arrowDirection, ...props }: LinkProps): React.JSX.Element;
 //# sourceMappingURL=Link.d.ts.map

package/esm/Link/Link.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,uCAAwC,CAAA;AAC9D,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;AAcpE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,SAAS,~~2CAkEX~~"}
1	+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,uCAAwC,CAAA;AAC9D,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;AAcpE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,SAAS,qBAkEX"}

package/esm/Link/Link.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { ExpandableArrow as n } from "../ExpandableArrow/ExpandableArrow.js";
-import { LinkExternalIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { LinkExternalIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/LinkExternalIcon.js";
 import i from "./Link.module.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes-Dh1w7a05.css';/* empty css                                                                                                  */
 import a, { useCallback as o } from "react";

package/esm/Link/Link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['small', 'medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nconst LinkTextSizes = {\n small: '100',\n medium: '200',\n large: '300',\n} as const\n\nconst LinkExternalIconSizes = {\n small: 16,\n medium: 16,\n large: 20,\n} as const\n\nexport type LinkProps = {\n /*\n The size variations available in Link\n /\n size?: (typeof LinkSizes)[number]\n /\n Position of the arrow.\n /\n arrowDirection?: (typeof LinkArrowDirections)[number]\n /\n Show an external link icon\n /\n isExternal?: boolean\n /\n Specify alternative link appearance\n /\n variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/\n Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\nexport function Link({\n size = 'medium',\n variant = 'default',\n className,\n children,\n isExternal,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n arrowDirection = 'end',\n ...props\n}: LinkProps) {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseEnter?.(event)\n },\n [onMouseEnter, isHovered],\n )\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseLeave?.(event)\n },\n [onMouseLeave, isHovered],\n )\n\n const handleOnFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onFocus?.(event)\n },\n [onFocus, isFocused],\n )\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onBlur?.(event)\n },\n [onBlur, isFocused],\n )\n\n return (\n <a\n className={clsx(\n styles.Link,\n styles[`Link--${size}`],\n styles[`Link--${variant}`],\n isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n className,\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...props}\n >\n {arrowDirection === 'start' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} reverse hidden />\n )}\n\n <Text as=\"span\" size={LinkTextSizes[size]} className={clsx(styles['Link--label'])}>\n {children}\n </Text>\n\n {arrowDirection === 'end' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} hidden />\n )}\n\n {isExternal && <LinkExternalIcon size={LinkExternalIconSizes[size]} aria-label=\"External link\" />}\n </a>\n )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,~~SAAS~~,~~EACpC~~,IAAY;CAAC;CAAS;CAAU;~~CAAQ~~,~~EACxC~~,IAAsB;CAAC;CAAS;CAAO;~~CAAO~~,~~EAErD~~,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;~~CACR~~,~~EAEK~~,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;~~CACR~~;~~AAyBD~~,SAAgB,EAAK,EACnB,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,KACS;CACZ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,~~GAAM~~,~~EACjD~~,CAAC,GAAW,KAAgB,EAAM,SAAS,~~GAAM~~,~~EAEjD~~,IAAmB,GACtB,MAA2D;~~AAE1D~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAe,~~EAAM~~;~~IAEvB~~,CAAC,GAAc,~~EAAU~~,CAC1B,~~EAEK~~,IAAmB,GACtB,MAA2D;~~AAE1D~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAe,~~EAAM~~;~~IAEvB~~,CAAC,GAAc,~~EAAU~~,CAC1B,~~EAEK~~,IAAgB,GACnB,MAAwD;~~AAEvD~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAU,~~EAAM~~;~~IAElB~~,CAAC,GAAS,~~EAAU~~,CACrB,~~EAEK~~,IAAe,GAClB,MAAwD;~~AAEvD~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAS,~~EAAM~~;~~IAEjB~~,CAAC,GAAQ,~~EAAU~~,CACpB;~~AAED~~,~~QACE~~,kBAAC,KAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,~~EACD~~;~~EACD~~,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YAZN;GAcG,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;~~IAAS~~,CAAA;~~GAGvG~~,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,~~eAAe~~;~~IAC9E~~;~~IACI~~,CAAA;~~GAEN~~,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;~~IAAS~~,CAAA;~~GAG9F~~,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;~~IAAkB~~,CAAA;~~GAC~~/F"}
1	+ {"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['small', 'medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nconst LinkTextSizes = {\n small: '100',\n medium: '200',\n large: '300',\n} as const\n\nconst LinkExternalIconSizes = {\n small: 16,\n medium: 16,\n large: 20,\n} as const\n\nexport type LinkProps = {\n /*\n The size variations available in Link\n /\n size?: (typeof LinkSizes)[number]\n /\n Position of the arrow.\n /\n arrowDirection?: (typeof LinkArrowDirections)[number]\n /\n Show an external link icon\n /\n isExternal?: boolean\n /\n Specify alternative link appearance\n /\n variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/\n Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\nexport function Link({\n size = 'medium',\n variant = 'default',\n className,\n children,\n isExternal,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n arrowDirection = 'end',\n ...props\n}: LinkProps) {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseEnter?.(event)\n },\n [onMouseEnter, isHovered],\n )\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseLeave?.(event)\n },\n [onMouseLeave, isHovered],\n )\n\n const handleOnFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onFocus?.(event)\n },\n [onFocus, isFocused],\n )\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onBlur?.(event)\n },\n [onBlur, isFocused],\n )\n\n return (\n <a\n className={clsx(\n styles.Link,\n styles[`Link--${size}`],\n styles[`Link--${variant}`],\n isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n className,\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...props}\n >\n {arrowDirection === 'start' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} reverse hidden />\n )}\n\n <Text as=\"span\" size={LinkTextSizes[size]} className={clsx(styles['Link--label'])}>\n {children}\n </Text>\n\n {arrowDirection === 'end' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} hidden />\n )}\n\n {isExternal && <LinkExternalIcon size={LinkExternalIconSizes[size]} aria-label=\"External link\" />}\n </a>\n )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,QAAQ,GACnC,IAAY;CAAC;CAAS;CAAU;AAAO,GACvC,IAAsB;CAAC;CAAS;CAAO;AAAM,GAEpD,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEM,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAyBA,SAAgB,EAAK,EACnB,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,KACS;CACZ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAEhD,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAgB,GACnB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAU,CAAK;CACjB,GACA,CAAC,GAAS,CAAS,CACrB,GAEM,IAAe,GAClB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAS,CAAK;CAChB,GACA,CAAC,GAAQ,CAAS,CACpB;CAEA,OACE,kBAAC,KAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,CACF;EACA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YAZN;GAcG,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;GAAQ,CAAA;GAGtG,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,cAAc;IAC7E;GACG,CAAA;GAEL,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;GAAQ,CAAA;GAG7F,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;GAAiB,CAAA;EAC/F;;AAEP"}