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

package/esm/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  memo,\n  ReactNode,\n  forwardRef,\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useEffect,\n  HTMLAttributes,\n  useCallback,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'\nimport {useTabs} from '../hooks/useTabs'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {BaseProps} from '../component-helpers'\nimport {Animate, AnimationProvider, AnimationVariants} from '../animation'\nimport {Text} from '../Text'\nimport {Stack} from '../Stack'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tabs.module.css'\n\nconst testIds = {\n  root: 'Tabs',\n  get tab() {\n    return `${this.root}-tab`\n  },\n  get panel() {\n    return `${this.root}-panel`\n  },\n  get indicators() {\n    return `${this.root}-indicators`\n  },\n}\n\n/**\n * Accessible label for the entire tabs component, used by screen readers to describe the tab group.\n * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.\n */\ntype LabelOrLabelledBy =\n  | {'aria-label': string; 'aria-labelledby'?: never}\n  | {'aria-labelledby': string; 'aria-label'?: never}\n\nexport type TabsProps = {\n  /**\n   * Visual style variant of the tabs. Affects the appearance and styling theme.\n   */\n  variant?: 'default' | 'accent' | 'underline'\n  /**\n   * Horizontal alignment of the tab navigation. Defaults to 'start'.\n   */\n  align?: 'start' | 'center'\n  /**\n   * Named children to be rendered as tab items and panels.\n   */\n  children: ReactNode\n  /**\n   * Sets the default active tab. \"0\" (first tab) by default.\n   */\n  defaultActiveTab?: string\n  /**\n   * Callback function triggered when the active tab changes. Receives the new active tab identifier.\n   */\n  onChange?: (activeTab: string) => void\n\n  /**\n   * Additional CSS class names to apply to the tabs container for custom styling.\n   */\n  className?: string\n  /**\n   * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.\n   * @param internalAccessibleLabels.controlsNext - Label for the \"next tab\" control button, used by screen readers. Default is \"Next tab\".\n   * @param internalAccessibleLabels.controlsPrev - Label for the \"previous tab\" control button, used by screen readers. Default is \"Previous tab\".\n   */\n  internalAccessibleLabels?: {\n    controlsNext: string\n    controlsPrev: string\n  }\n} & LabelOrLabelledBy &\n  BaseProps<HTMLDivElement> &\n  Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'aria-label' | 'aria-labelledby'>\n\nconst defaultInternalAccessibleLabels = {\n  controlsNext: 'Next tab',\n  controlsPrev: 'Previous tab',\n}\n\nconst _TabsRoot = forwardRef<HTMLDivElement, TabsProps>(\n  (\n    {\n      align = 'center',\n      children,\n      defaultActiveTab,\n      onChange,\n      variant = 'default',\n      className,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      internalAccessibleLabels = defaultInternalAccessibleLabels,\n      ...props\n    },\n    ref,\n  ) => {\n    const {activeTab, activateTab, getTabListProps, getTabProps, getTabPanelProps} = useTabs({\n      defaultTab: defaultActiveTab,\n      onTabActivate: onChange,\n    })\n    const tabsContainerRef = useRef<HTMLDivElement>(null)\n    const tabsWrapperRef = useRef<HTMLDivElement>(null)\n    const sliderRef = useRef<HTMLDivElement>(null)\n\n    const childrenArray = Children.toArray(children)\n\n    type TabsItemElement = React.ReactElement<TabsItemProps> & {ref?: React.Ref<HTMLButtonElement>}\n\n    const tabs = childrenArray\n      .filter((child): child is TabsItemElement => isValidElement<TabsItemProps>(child) && child.type === TabsItem)\n      .map((tab, index) => {\n        const tabId = String(index)\n        const originalRef = tab.ref\n        const tabProps = getTabProps<HTMLButtonElement>(tabId, originalRef)\n\n        return cloneElement(tab, {\n          ...tabProps,\n          id: tab.props.id ?? tabProps.id,\n          'aria-controls': tab.props['aria-controls'] ?? tabProps['aria-controls'],\n          value: tabId,\n          key: tabProps.id,\n          isActive: activeTab === tabId,\n          variant,\n        })\n      })\n\n    const panels = childrenArray\n      .filter(\n        (child): child is React.ReactElement<TabsPanelProps> =>\n          isValidElement<TabsPanelProps>(child) && child.type === TabsPanel,\n      )\n      .map((child, index) => {\n        const panelId = String(index)\n        const tabPanelProps = getTabPanelProps(panelId)\n\n        return cloneElement(child, {\n          ...tabPanelProps,\n          id: child.props.id ?? tabPanelProps.id,\n          key: String(index),\n        })\n      })\n\n    useEffect(() => {\n      /* istanbul ignore next */\n      if (!tabsContainerRef.current || !sliderRef.current) return\n\n      const activeTabButton = tabsContainerRef.current.querySelector(`[aria-selected=\"true\"]`) as HTMLButtonElement\n\n      if (!activeTab) return\n\n      const updateSliderPosition = () => {\n        const sliderElement = sliderRef.current\n        const tabsContainer = tabsContainerRef.current\n        /* istanbul ignore next */\n        if (!sliderElement || !tabsContainer) return\n\n        const containerPaddingRem = window\n          .getComputedStyle(tabsContainer)\n          .getPropertyValue('--brand-Tabs-container-padding')\n\n        const containerPadding = parseFloat(containerPaddingRem) * 16 // base size\n\n        const offsetX = activeTabButton.offsetLeft - containerPadding\n        const width = activeTabButton.offsetWidth\n\n        sliderElement.style.setProperty('--brand-Tabs-slider-x', `${offsetX}px`)\n        sliderElement.style.setProperty('--brand-Tabs-slider-width', `${width}px`)\n      }\n\n      updateSliderPosition()\n\n      const resizeObserver = new ResizeObserver(updateSliderPosition)\n      resizeObserver.observe(tabsContainerRef.current)\n\n      // On narrow viewports this will scroll the active tab into the center.\n      // Important because we show a gradient in dark mode.\n      const tabsContainer = tabsContainerRef.current\n      const containerWidth = tabsContainer.clientWidth\n      const containerPaddingRem = window\n        .getComputedStyle(tabsContainer)\n        .getPropertyValue('--brand-Tabs-container-padding')\n      const containerPadding = parseFloat(containerPaddingRem) * 16\n      const tabLeft = activeTabButton.offsetLeft - containerPadding\n      const tabWidth = activeTabButton.offsetWidth\n      const tabCenter = tabLeft + tabWidth / 2\n\n      const targetScrollLeft = tabCenter - containerWidth / 2\n\n      const maxScrollLeft = tabsContainer.scrollWidth - containerWidth // defines boudnary\n      const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))\n\n      tabsContainer.scrollTo({\n        left: finalScrollLeft,\n        behavior: 'smooth',\n      })\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }, [activeTab])\n\n    // Tracks the overflow state for mobile gradient visibility\n    // Should only appear when enough items trigger an overflow\n    // Related to gradient functionality\n    useEffect(() => {\n      const tabsContainer = tabsContainerRef.current\n      const wrapperElement = tabsWrapperRef.current\n      /* istanbul ignore next */\n      if (!tabsContainer || !wrapperElement) return\n\n      // This relies heavily on layout and measurement and, as such, isn't practical to test\n      /* istanbul ignore next */\n      const updateScrollState = () => {\n        const {scrollLeft, scrollWidth, clientWidth} = tabsContainer\n        const hasOverflow = scrollWidth > clientWidth\n\n        const canScrollRight = hasOverflow && scrollLeft < scrollWidth - clientWidth - 1\n\n        // Set CSS variables on the wrapper element for the gradient\n        wrapperElement.style.setProperty('--scroll-offset', `${scrollLeft}px`)\n        wrapperElement.style.setProperty('--has-overflow', hasOverflow ? '1' : '0')\n        wrapperElement.style.setProperty('--can-scroll-right', canScrollRight ? '1' : '0')\n      }\n\n      updateScrollState()\n      const resizeObserver = new ResizeObserver(updateScrollState)\n      resizeObserver.observe(tabsContainer)\n\n      // eslint-disable-next-line github/prefer-observers\n      tabsContainer.addEventListener('scroll', updateScrollState)\n\n      return () => {\n        tabsContainer.removeEventListener('scroll', updateScrollState)\n        resizeObserver.disconnect()\n      }\n    }, [tabs])\n\n    /**\n     * The LabelOrLabelledBy type guarantees that, if ariaLabel isn't a string,\n     * then ariaLabelledBy is guaranteed to be a string, and vice versa.\n     */\n    const accessibleLabel = typeof ariaLabel === 'string' ? {label: ariaLabel} : {labelledBy: ariaLabelledBy}\n    const tabListProps = getTabListProps(accessibleLabel)\n\n    const handleNextTabControl = useCallback(() => {\n      if (activeTab && activeTab !== String(tabs.length - 1)) {\n        activateTab(String(Number(activeTab) + 1))\n      }\n    }, [activeTab, activateTab, tabs])\n\n    const handlePrevTabControl = useCallback(() => {\n      if (activeTab && activeTab !== '0') {\n        activateTab(String(Number(activeTab) - 1))\n      }\n    }, [activeTab, activateTab])\n\n    const hasMoreThanTwoTabs = tabs.length >= 3\n    const isLastTabActive = String(tabs.length - 1) === activeTab\n\n    return (\n      <div\n        className={clsx(\n          styles['Tabs-container'],\n          styles[`Tabs-container--align-${align}`],\n          isLastTabActive && styles['Tabs-container--lastTabIsActive'],\n          className,\n        )}\n        ref={ref}\n        data-testid={testIds.root}\n        {...props}\n      >\n        {/* Narrow only indicators and controls */}\n        {tabs.length >= 3 && (\n          <div className={styles.Tabs__controls} data-testid={testIds.indicators}>\n            <Stack direction=\"horizontal\" padding=\"none\" justifyContent=\"space-between\">\n              <button\n                onClick={handlePrevTabControl}\n                className={styles.Tabs__control}\n                aria-label={internalAccessibleLabels.controlsPrev}\n              >\n                <Text size=\"100\">\n                  <ChevronLeftIcon size={16} className={styles['Tabs__control-icon']} />\n                </Text>\n              </button>\n              <Stack direction=\"horizontal\" gap={4} padding=\"none\" justifyContent=\"space-between\" alignItems=\"center\">\n                {tabs.map((_, index) => {\n                  return (\n                    <div\n                      key={index}\n                      className={clsx(\n                        styles.Tabs__indicator,\n                        activeTab && Number(activeTab) === index && styles['Tabs__indicator--active'],\n                      )}\n                    />\n                  )\n                })}\n              </Stack>\n              <button\n                onClick={handleNextTabControl}\n                className={styles.Tabs__control}\n                aria-label={internalAccessibleLabels.controlsNext}\n              >\n                <Text size=\"100\">\n                  <ChevronRightIcon size={16} className={styles['Tabs__control-icon']} />\n                </Text>\n              </button>\n            </Stack>\n          </div>\n        )}\n\n        <div\n          ref={tabsWrapperRef}\n          className={clsx(\n            styles['Tablist__wrapper'],\n            styles[`Tablist__wrapper--${variant}`],\n            isLastTabActive && styles['Tablist__wrapper--lastTabIsActive'],\n          )}\n        >\n          <div\n            ref={tabsContainerRef}\n            {...tabListProps}\n            className={clsx(\n              styles.Tabs,\n              styles[`Tabs--${variant}`],\n              hasMoreThanTwoTabs && styles['Tabs--hasMoreThanTwoTabs'],\n            )}\n          >\n            <div ref={sliderRef} className={styles.Tabs__slider} aria-hidden />\n            {tabs}\n          </div>\n        </div>\n\n        {panels.length > 0 && <div className={styles['Tabs__panelContainer']}>{panels}</div>}\n      </div>\n    )\n  },\n)\n\nexport type TabsItemProps = {\n  children: ReactNode\n  className?: string\n  isActive?: boolean\n  variant?: 'default' | 'accent' | 'underline'\n  /**\n   * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n   * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n   * relationships between tabs and panels.\n   * @see https://primer.style/brand/components/Tabs/#custom-panels\n   */\n  id?: string\n} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>\n\nconst TabsItem = forwardRef<HTMLButtonElement, TabsItemProps>(\n  ({children, className, isActive, variant, ...props}, ref) => {\n    const tabRef = useProvidedRefOrCreate(ref)\n\n    return (\n      <button\n        ref={tabRef}\n        className={clsx(\n          styles.Tabs__item,\n          isActive && styles['Tabs__item--active'],\n          variant && styles[`Tabs__item--${variant}`],\n          className,\n        )}\n        data-testid={testIds.tab}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\nexport type TabsPanelProps = {\n  children: ReactNode\n  className?: string\n  animation?: (typeof AnimationVariants)[number] | false\n  hidden?: boolean\n  /**\n   * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n   * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n   * relationships between tabs and panels.\n   * @see https://primer.style/brand/components/Tabs/#custom-panels\n   */\n  id?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>\n\nconst TabsPanel = memo(function TabsPanel({\n  children,\n  animation = false,\n  className,\n\n  hidden,\n  ...rest\n}: TabsPanelProps) {\n  const conditionalRender = animation ? (\n    <AnimationProvider autoStaggerChildren={false}>\n      <Animate animate={animation}>{children}</Animate>\n    </AnimationProvider>\n  ) : (\n    children\n  )\n\n  return (\n    <div className={clsx(styles['Tabs__panel'], className)} data-testid={testIds.panel} hidden={hidden} {...rest}>\n      {conditionalRender}\n    </div>\n  )\n})\n\n/**\n * Use Tabs to display a list of tabs with associated content panels.\n * @see https://primer.style/brand/components/Tabs\n */\nexport const Tabs = Object.assign(_TabsRoot, {\n  Item: TabsItem,\n  Panel: TabsPanel,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  memo,\n  ReactNode,\n  forwardRef,\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useEffect,\n  HTMLAttributes,\n  useCallback,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'\nimport {useTabs} from '../hooks/useTabs'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {BaseProps} from '../component-helpers'\nimport {Animate, AnimationProvider, AnimationVariants} from '../animation'\nimport {Text} from '../Text'\nimport {Stack} from '../Stack'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tabs.module.css'\n\nconst testIds = {\n  root: 'Tabs',\n  get tab() {\n    return `${this.root}-tab`\n  },\n  get panel() {\n    return `${this.root}-panel`\n  },\n  get indicators() {\n    return `${this.root}-indicators`\n  },\n}\n\n/**\n * Accessible label for the entire tabs component, used by screen readers to describe the tab group.\n * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.\n */\ntype LabelOrLabelledBy =\n  | {'aria-label': string; 'aria-labelledby'?: never}\n  | {'aria-labelledby': string; 'aria-label'?: never}\n\nexport type TabsProps = {\n  /**\n   * Visual style variant of the tabs. Affects the appearance and styling theme.\n   */\n  variant?: 'default' | 'accent' | 'underline'\n  /**\n   * Horizontal alignment of the tab navigation. Defaults to 'start'.\n   */\n  align?: 'start' | 'center'\n  /**\n   * Named children to be rendered as tab items and panels.\n   */\n  children: ReactNode\n  /**\n   * Sets the default active tab. \"0\" (first tab) by default.\n   */\n  defaultActiveTab?: string\n  /**\n   * Callback function triggered when the active tab changes. Receives the new active tab identifier.\n   */\n  onChange?: (activeTab: string) => void\n\n  /**\n   * Additional CSS class names to apply to the tabs container for custom styling.\n   */\n  className?: string\n  /**\n   * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.\n   * @param internalAccessibleLabels.controlsNext - Label for the \"next tab\" control button, used by screen readers. Default is \"Next tab\".\n   * @param internalAccessibleLabels.controlsPrev - Label for the \"previous tab\" control button, used by screen readers. Default is \"Previous tab\".\n   */\n  internalAccessibleLabels?: {\n    controlsNext: string\n    controlsPrev: string\n  }\n} & LabelOrLabelledBy &\n  BaseProps<HTMLDivElement> &\n  Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'aria-label' | 'aria-labelledby'>\n\nconst defaultInternalAccessibleLabels = {\n  controlsNext: 'Next tab',\n  controlsPrev: 'Previous tab',\n}\n\nconst _TabsRoot = forwardRef<HTMLDivElement, TabsProps>(\n  (\n    {\n      align = 'center',\n      children,\n      defaultActiveTab,\n      onChange,\n      variant = 'default',\n      className,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      internalAccessibleLabels = defaultInternalAccessibleLabels,\n      ...props\n    },\n    ref,\n  ) => {\n    const {activeTab, activateTab, getTabListProps, getTabProps, getTabPanelProps} = useTabs({\n      defaultTab: defaultActiveTab,\n      onTabActivate: onChange,\n    })\n    const tabsContainerRef = useRef<HTMLDivElement>(null)\n    const tabsWrapperRef = useRef<HTMLDivElement>(null)\n    const sliderRef = useRef<HTMLDivElement>(null)\n\n    const childrenArray = Children.toArray(children)\n\n    type TabsItemElement = React.ReactElement<TabsItemProps> & {ref?: React.Ref<HTMLButtonElement>}\n\n    const tabs = childrenArray\n      .filter((child): child is TabsItemElement => isValidElement<TabsItemProps>(child) && child.type === TabsItem)\n      .map((tab, index) => {\n        const tabId = String(index)\n        const originalRef = tab.ref\n        const tabProps = getTabProps<HTMLButtonElement>(tabId, originalRef)\n\n        return cloneElement(tab, {\n          ...tabProps,\n          id: tab.props.id ?? tabProps.id,\n          'aria-controls': tab.props['aria-controls'] ?? tabProps['aria-controls'],\n          value: tabId,\n          key: tabProps.id,\n          isActive: activeTab === tabId,\n          variant,\n        })\n      })\n\n    const panels = childrenArray\n      .filter(\n        (child): child is React.ReactElement<TabsPanelProps> =>\n          isValidElement<TabsPanelProps>(child) && child.type === TabsPanel,\n      )\n      .map((child, index) => {\n        const panelId = String(index)\n        const tabPanelProps = getTabPanelProps(panelId)\n\n        return cloneElement(child, {\n          ...tabPanelProps,\n          id: child.props.id ?? tabPanelProps.id,\n          key: String(index),\n        })\n      })\n\n    useEffect(() => {\n      /* istanbul ignore next */\n      if (!tabsContainerRef.current || !sliderRef.current) return\n\n      const activeTabButton = tabsContainerRef.current.querySelector(`[aria-selected=\"true\"]`) as HTMLButtonElement\n\n      if (!activeTab) return\n\n      const updateSliderPosition = () => {\n        const sliderElement = sliderRef.current\n        const tabsContainer = tabsContainerRef.current\n        /* istanbul ignore next */\n        if (!sliderElement || !tabsContainer) return\n\n        const containerPaddingRem = window\n          .getComputedStyle(tabsContainer)\n          .getPropertyValue('--brand-Tabs-container-padding')\n\n        const containerPadding = parseFloat(containerPaddingRem) * 16 // base size\n\n        const offsetX = activeTabButton.offsetLeft - containerPadding\n        const width = activeTabButton.offsetWidth\n\n        sliderElement.style.setProperty('--brand-Tabs-slider-x', `${offsetX}px`)\n        sliderElement.style.setProperty('--brand-Tabs-slider-width', `${width}px`)\n      }\n\n      updateSliderPosition()\n\n      const resizeObserver = new ResizeObserver(updateSliderPosition)\n      resizeObserver.observe(tabsContainerRef.current)\n\n      // On narrow viewports this will scroll the active tab into the center.\n      // Important because we show a gradient in dark mode.\n      const tabsContainer = tabsContainerRef.current\n      const containerWidth = tabsContainer.clientWidth\n      const containerPaddingRem = window\n        .getComputedStyle(tabsContainer)\n        .getPropertyValue('--brand-Tabs-container-padding')\n      const containerPadding = parseFloat(containerPaddingRem) * 16\n      const tabLeft = activeTabButton.offsetLeft - containerPadding\n      const tabWidth = activeTabButton.offsetWidth\n      const tabCenter = tabLeft + tabWidth / 2\n\n      const targetScrollLeft = tabCenter - containerWidth / 2\n\n      const maxScrollLeft = tabsContainer.scrollWidth - containerWidth // defines boudnary\n      const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))\n\n      tabsContainer.scrollTo({\n        left: finalScrollLeft,\n        behavior: 'smooth',\n      })\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }, [activeTab])\n\n    // Tracks the overflow state for mobile gradient visibility\n    // Should only appear when enough items trigger an overflow\n    // Related to gradient functionality\n    useEffect(() => {\n      const tabsContainer = tabsContainerRef.current\n      const wrapperElement = tabsWrapperRef.current\n      /* istanbul ignore next */\n      if (!tabsContainer || !wrapperElement) return\n\n      // This relies heavily on layout and measurement and, as such, isn't practical to test\n      /* istanbul ignore next */\n      const updateScrollState = () => {\n        const {scrollLeft, scrollWidth, clientWidth} = tabsContainer\n        const hasOverflow = scrollWidth > clientWidth\n\n        const canScrollRight = hasOverflow && scrollLeft < scrollWidth - clientWidth - 1\n\n        // Set CSS variables on the wrapper element for the gradient\n        wrapperElement.style.setProperty('--scroll-offset', `${scrollLeft}px`)\n        wrapperElement.style.setProperty('--has-overflow', hasOverflow ? '1' : '0')\n        wrapperElement.style.setProperty('--can-scroll-right', canScrollRight ? '1' : '0')\n      }\n\n      updateScrollState()\n      const resizeObserver = new ResizeObserver(updateScrollState)\n      resizeObserver.observe(tabsContainer)\n\n      // eslint-disable-next-line github/prefer-observers\n      tabsContainer.addEventListener('scroll', updateScrollState)\n\n      return () => {\n        tabsContainer.removeEventListener('scroll', updateScrollState)\n        resizeObserver.disconnect()\n      }\n    }, [tabs])\n\n    /**\n     * The LabelOrLabelledBy type guarantees that, if ariaLabel isn't a string,\n     * then ariaLabelledBy is guaranteed to be a string, and vice versa.\n     */\n    const accessibleLabel = typeof ariaLabel === 'string' ? {label: ariaLabel} : {labelledBy: ariaLabelledBy}\n    const tabListProps = getTabListProps(accessibleLabel)\n\n    const handleNextTabControl = useCallback(() => {\n      if (activeTab && activeTab !== String(tabs.length - 1)) {\n        activateTab(String(Number(activeTab) + 1))\n      }\n    }, [activeTab, activateTab, tabs])\n\n    const handlePrevTabControl = useCallback(() => {\n      if (activeTab && activeTab !== '0') {\n        activateTab(String(Number(activeTab) - 1))\n      }\n    }, [activeTab, activateTab])\n\n    const hasMoreThanTwoTabs = tabs.length >= 3\n    const isLastTabActive = String(tabs.length - 1) === activeTab\n\n    return (\n      <div\n        className={clsx(\n          styles['Tabs-container'],\n          styles[`Tabs-container--align-${align}`],\n          isLastTabActive && styles['Tabs-container--lastTabIsActive'],\n          className,\n        )}\n        ref={ref}\n        data-testid={testIds.root}\n        {...props}\n      >\n        {/* Narrow only indicators and controls */}\n        {tabs.length >= 3 && (\n          <div className={styles.Tabs__controls} data-testid={testIds.indicators}>\n            <Stack direction=\"horizontal\" padding=\"none\" justifyContent=\"space-between\">\n              <button\n                onClick={handlePrevTabControl}\n                className={styles.Tabs__control}\n                aria-label={internalAccessibleLabels.controlsPrev}\n              >\n                <Text size=\"100\">\n                  <ChevronLeftIcon size={16} className={styles['Tabs__control-icon']} />\n                </Text>\n              </button>\n              <Stack direction=\"horizontal\" gap={4} padding=\"none\" justifyContent=\"space-between\" alignItems=\"center\">\n                {tabs.map((_, index) => {\n                  return (\n                    <div\n                      key={index}\n                      className={clsx(\n                        styles.Tabs__indicator,\n                        activeTab && Number(activeTab) === index && styles['Tabs__indicator--active'],\n                      )}\n                    />\n                  )\n                })}\n              </Stack>\n              <button\n                onClick={handleNextTabControl}\n                className={styles.Tabs__control}\n                aria-label={internalAccessibleLabels.controlsNext}\n              >\n                <Text size=\"100\">\n                  <ChevronRightIcon size={16} className={styles['Tabs__control-icon']} />\n                </Text>\n              </button>\n            </Stack>\n          </div>\n        )}\n\n        <div\n          ref={tabsWrapperRef}\n          className={clsx(\n            styles['Tablist__wrapper'],\n            styles[`Tablist__wrapper--${variant}`],\n            isLastTabActive && styles['Tablist__wrapper--lastTabIsActive'],\n          )}\n        >\n          <div\n            ref={tabsContainerRef}\n            {...tabListProps}\n            className={clsx(\n              styles.Tabs,\n              styles[`Tabs--${variant}`],\n              hasMoreThanTwoTabs && styles['Tabs--hasMoreThanTwoTabs'],\n            )}\n          >\n            <div ref={sliderRef} className={styles.Tabs__slider} aria-hidden />\n            {tabs}\n          </div>\n        </div>\n\n        {panels.length > 0 && <div className={styles['Tabs__panelContainer']}>{panels}</div>}\n      </div>\n    )\n  },\n)\n\nexport type TabsItemProps = {\n  children: ReactNode\n  className?: string\n  isActive?: boolean\n  variant?: 'default' | 'accent' | 'underline'\n  /**\n   * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n   * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n   * relationships between tabs and panels.\n   * @see https://primer.style/brand/components/Tabs/#custom-panels\n   */\n  id?: string\n} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>\n\nconst TabsItem = forwardRef<HTMLButtonElement, TabsItemProps>(\n  ({children, className, isActive, variant, ...props}, ref) => {\n    const tabRef = useProvidedRefOrCreate(ref)\n\n    return (\n      <button\n        ref={tabRef}\n        className={clsx(\n          styles.Tabs__item,\n          isActive && styles['Tabs__item--active'],\n          variant && styles[`Tabs__item--${variant}`],\n          className,\n        )}\n        data-testid={testIds.tab}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\nexport type TabsPanelProps = {\n  children: ReactNode\n  className?: string\n  animation?: (typeof AnimationVariants)[number] | false\n  hidden?: boolean\n  /**\n   * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n   * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n   * relationships between tabs and panels.\n   * @see https://primer.style/brand/components/Tabs/#custom-panels\n   */\n  id?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>\n\nconst TabsPanel = memo(function TabsPanelComponent({\n  children,\n  animation = false,\n  className,\n\n  hidden,\n  ...rest\n}: TabsPanelProps) {\n  const conditionalRender = animation ? (\n    <AnimationProvider autoStaggerChildren={false}>\n      <Animate animate={animation}>{children}</Animate>\n    </AnimationProvider>\n  ) : (\n    children\n  )\n\n  return (\n    <div className={clsx(styles['Tabs__panel'], className)} data-testid={testIds.panel} hidden={hidden} {...rest}>\n      {conditionalRender}\n    </div>\n  )\n})\n\n/**\n * Use Tabs to display a list of tabs with associated content panels.\n * @see https://primer.style/brand/components/Tabs\n */\nexport const Tabs = Object.assign(_TabsRoot, {\n  Item: TabsItem,\n  Panel: TabsPanel,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/Tabs/Tabs.module.js

@@ -1,9 +1,10 @@
-import './Tabs.module-CK_p1qwC.css';var e = {
-	Tabs: "Primer_Brand__Tabs-module__Tabs___zia5x",
+import './Tabs.module-CK_p1qwC.css';//#region src/Tabs/Tabs.module.css
+var e = "Primer_Brand__Tabs-module__Tabs___zia5x", t = "Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8", n = "Primer_Brand__Tabs-module__Tabs__item___4V44f", r = "Primer_Brand__Tabs-module__Tabs__slider___tkaHu", i = "Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR", a = "Primer_Brand__Tabs-module__Tabs__panel___UdoZQ", o = "Primer_Brand__Tabs-module__Tabs__controls___Cg7GX", s = "Primer_Brand__Tabs-module__Tabs__indicator___Tmwuv", c = "Primer_Brand__Tabs-module__Tabs__control___xG_4C", l = {
+	Tabs: e,
 	"Tabs-container": "Primer_Brand__Tabs-module__Tabs-container___wuq7I",
 	"Tabs-container--align-start": "Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk",
 	"Tabs-container--align-center": "Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd",
-	Tablist__wrapper: "Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8",
+	Tablist__wrapper: t,
 	"Tablist__wrapper--default": "Primer_Brand__Tabs-module__Tablist__wrapper--default___Wdb55",
 	"Tablist__wrapper--accent": "Primer_Brand__Tabs-module__Tablist__wrapper--accent___QV6Jx",
 	"Tablist__wrapper--underline": "Primer_Brand__Tabs-module__Tablist__wrapper--underline___IZ_zV",
@@ -11,18 +12,18 @@ import './Tabs.module-CK_p1qwC.css';var e = {
 	"Tabs--default": "Primer_Brand__Tabs-module__Tabs--default___MUcm6",
 	"Tabs--accent": "Primer_Brand__Tabs-module__Tabs--accent___p1SQc",
 	"Tabs--underline": "Primer_Brand__Tabs-module__Tabs--underline___CAXqd",
-	Tabs__item: "Primer_Brand__Tabs-module__Tabs__item___4V44f",
-	Tabs__slider: "Primer_Brand__Tabs-module__Tabs__slider___tkaHu",
+	Tabs__item: n,
+	Tabs__slider: r,
 	"Tabs__item--active": "Primer_Brand__Tabs-module__Tabs__item--active___Guj0b",
-	Tabs__panelContainer: "Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR",
-	Tabs__panel: "Primer_Brand__Tabs-module__Tabs__panel___UdoZQ",
-	Tabs__controls: "Primer_Brand__Tabs-module__Tabs__controls___Cg7GX",
-	Tabs__indicator: "Primer_Brand__Tabs-module__Tabs__indicator___Tmwuv",
+	Tabs__panelContainer: i,
+	Tabs__panel: a,
+	Tabs__controls: o,
+	Tabs__indicator: s,
 	"Tabs__indicator--active": "Primer_Brand__Tabs-module__Tabs__indicator--active___h_TV1",
-	Tabs__control: "Primer_Brand__Tabs-module__Tabs__control___xG_4C",
+	Tabs__control: c,
 	"Tabs__control-icon": "Primer_Brand__Tabs-module__Tabs__control-icon___V9mNe"
 };
 //#endregion
-export { e as default };
+export { t as Tablist__wrapper, e as Tabs, c as Tabs__control, o as Tabs__controls, s as Tabs__indicator, n as Tabs__item, a as Tabs__panel, i as Tabs__panelContainer, r as Tabs__slider, l as default };
 
 //# sourceMappingURL=Tabs.module.js.map

package/esm/Testimonial/Testimonial.d.ts

@@ -52,7 +52,7 @@ type LogoProps = {
  * Testimonial avatar child element
  * <Testimonial.Avatar>
  */
-declare function _Avatar({ size, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function _Avatar({ size, ...rest }: AvatarProps): React.JSX.Element;
 /**
  * Use Testimonial to display a quote from a customer or user.
  * @see https://primer.style/brand/components/Testimonial

package/esm/Testimonial/Testimonial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Testimonial.d.ts","sourceRoot":"","sources":["../../src/Testimonial/Testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAGd,QAAQ,EAGT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,KAAK,CAAA;AAGpC,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAKtH,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAExC,eAAO,MAAM,0BAA0B,8MAA4C,CAAA;AACnF,eAAO,MAAM,qBAAqB,WAAgC,CAAA;AAElE,eAAO,MAAM,mBAAmB,yDAA0D,CAAA;AAC1F,KAAK,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAE,kBAA8B,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAC9B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAC7B,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;CAC7D,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAmFnC;;;GAGG;AACH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAY5E;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,CAAC,CAAA;AAmBxB;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAA;CAC7G,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAwB7B;;;GAGG;AAEH,iBAAS,OAAO,CAAC,EAAC,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,WAAW,2CAE5C;AAcD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAMtB,CAAA"}
+{"version":3,"file":"Testimonial.d.ts","sourceRoot":"","sources":["../../src/Testimonial/Testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAGd,QAAQ,EAGT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,KAAK,CAAA;AAGpC,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAKtH,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAExC,eAAO,MAAM,0BAA0B,8MAA4C,CAAA;AACnF,eAAO,MAAM,qBAAqB,WAAgC,CAAA;AAElE,eAAO,MAAM,mBAAmB,yDAA0D,CAAA;AAC1F,KAAK,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAE,kBAA8B,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAC9B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAC7B,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;CAC7D,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAmFnC;;;GAGG;AACH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAY5E;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,CAAC,CAAA;AAmBxB;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAA;CAC7G,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAwB7B;;;GAGG;AAEH,iBAAS,OAAO,CAAC,EAAC,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,WAAW,qBAE5C;AAcD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAMtB,CAAA"}

package/esm/Testimonial/Testimonial.js

@@ -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 } from "../constants.js";
 import { useAnimation as r } from "../animation/useAnimation.js";
 import { Text as i } from "../Text/Text.js";

package/esm/Testimonial/Testimonial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  PropsWithChildren,\n  forwardRef,\n  SVGProps,\n  CSSProperties,\n  ComponentPropsWithRef,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar as BaseAvatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\nimport styles from './Testimonial.module.css'\nimport {Colors, BiColorGradients} from '../constants'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors, ...BiColorGradients] as const\nexport const defaultQuoteMarkColor = TestimonialQuoteMarkColors[0]\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nexport type TestimonialProps = {\n  /**\n   * Sets alternative appearance for the testimonial\n   */\n  variant?: TestimonialVariant\n  /**\n   * Applies an optional border where a variant supports it\n   */\n  hasBorder?: boolean\n  /**\n   * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<QuoteProps>\n    | React.ReactElement<NameProps>\n    | React.ReactElement<AvatarProps>\n    | React.ReactElement<LogoProps>[]\n  /**\n   * Sets the testimonial text size\n   */\n  size?: TestimonialSize\n  /** Sets the color of the quote mark */\n  quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialBase(\n  {\n    quoteMarkColor,\n    animate,\n    className,\n    children,\n    variant = 'minimal',\n    hasBorder = true,\n    size,\n    style,\n    ...rest\n  }: PropsWithChildren<TestimonialProps>,\n  ref,\n) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const resolvedQuoteMarkColor = quoteMarkColor ?? (variant === 'expressive' ? 'green' : 'default')\n\n  const quoteMark = (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        styles['Testimonial__quoteMark'],\n        styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n        variant === 'expressive' && styles['Testimonial__quoteMark--hasBackground'],\n      )}\n    >\n      <span className={styles['Testimonial__quoteMarkGlyph']}>&ldquo;</span>\n    </div>\n  )\n\n  const childrenArray = React.Children.toArray(children)\n  const findChild = (type: React.ElementType) =>\n    childrenArray.find(child => React.isValidElement(child) && child.type === type)\n\n  const quoteChild = findChild(Quote)\n  const actionChild = findChild(_Link)\n  const avatarChild = findChild(Avatar)\n  const logoChild = findChild(Logo)\n  const nameChild = findChild(Name)\n\n  return (\n    <figure\n      ref={ref}\n      className={clsx(\n        animationClasses,\n        styles['Testimonial'],\n        styles[`Testimonial--variant-${variant}`],\n        size && styles[`Testimonial--size-${size}`],\n        hasBorder && styles['Testimonial--border'],\n        variant === 'expressive' && actionChild && styles['Testimonial--hasLink'],\n        className,\n      )}\n      style={{\n        ...animationInlineStyles,\n        ...style,\n        ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n      }}\n      {...rest}\n    >\n      <div className={styles['Testimonial__quoteWrapper']}>\n        {quoteMark}\n        {quoteChild}\n        {variant !== 'expressive' && actionChild}\n      </div>\n      <div className={styles['Testimonial__media']}>\n        {avatarChild}\n        {logoChild}\n        {nameChild}\n      </div>\n      {variant === 'expressive' && actionChild}\n    </figure>\n  )\n}\n\nconst Root = forwardRef(TestimonialBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\n\nfunction QuoteBase({children, className}: QuoteProps, ref) {\n  return (\n    <blockquote ref={ref}>\n      <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n    </blockquote>\n  )\n}\n\nconst Quote = forwardRef(QuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype NameProps = {\n  position?: string\n} & React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement>\n\nfunction _Name({children, className, position}: NameProps, ref) {\n  return (\n    <figcaption ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n      <Text size=\"200\" className={clsx(styles['Testimonial-from'])} font=\"monospace\">\n        {children}\n      </Text>\n      {position && (\n        <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n          {position}\n        </Text>\n      )}\n    </figcaption>\n  )\n}\n\nconst Name = forwardRef(_Name)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype LogoProps = {\n  children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n  BaseProps<HTMLImageElement>\n\nfunction _Logo({children, ...rest}: LogoProps, ref) {\n  return (\n    <div className={styles['Testimonial-logo']} {...rest}>\n      {React.Children.map(children, child => {\n        if (React.isValidElement(child)) {\n          if (child.type === 'img') {\n            const imageChild = child as React.ReactElement<ComponentPropsWithRef<'img'>>\n            const imageProps: ComponentPropsWithRef<'img'> = {\n              className: clsx(styles['Testimonial-logo-image'], imageChild.props.className),\n              ref: ref as ComponentPropsWithRef<'img'>['ref'],\n            }\n\n            return React.cloneElement(imageChild, imageProps)\n          }\n        }\n      })}\n    </div>\n  )\n}\n\nconst Logo = forwardRef(_Logo)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction _Avatar({size, ...rest}: AvatarProps) {\n  return <BaseAvatar className={clsx(styles['Testimonial-avatar'])} size={48} {...rest} />\n}\n\nconst Avatar = _Avatar\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction _LinkBase({className, ...rest}: LinkProps, _ref) {\n  return <Link className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n}\n\nconst _Link = forwardRef(_LinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(Root, {\n  Quote,\n  Name,\n  Avatar,\n  Logo,\n  Link: _Link,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  PropsWithChildren,\n  forwardRef,\n  SVGProps,\n  CSSProperties,\n  ComponentPropsWithRef,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar as BaseAvatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\nimport styles from './Testimonial.module.css'\nimport {Colors, BiColorGradients} from '../constants'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors, ...BiColorGradients] as const\nexport const defaultQuoteMarkColor = TestimonialQuoteMarkColors[0]\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nexport type TestimonialProps = {\n  /**\n   * Sets alternative appearance for the testimonial\n   */\n  variant?: TestimonialVariant\n  /**\n   * Applies an optional border where a variant supports it\n   */\n  hasBorder?: boolean\n  /**\n   * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<QuoteProps>\n    | React.ReactElement<NameProps>\n    | React.ReactElement<AvatarProps>\n    | React.ReactElement<LogoProps>[]\n  /**\n   * Sets the testimonial text size\n   */\n  size?: TestimonialSize\n  /** Sets the color of the quote mark */\n  quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialBase(\n  {\n    quoteMarkColor,\n    animate,\n    className,\n    children,\n    variant = 'minimal',\n    hasBorder = true,\n    size,\n    style,\n    ...rest\n  }: PropsWithChildren<TestimonialProps>,\n  ref,\n) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const resolvedQuoteMarkColor = quoteMarkColor ?? (variant === 'expressive' ? 'green' : 'default')\n\n  const quoteMark = (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        styles['Testimonial__quoteMark'],\n        styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n        variant === 'expressive' && styles['Testimonial__quoteMark--hasBackground'],\n      )}\n    >\n      <span className={styles['Testimonial__quoteMarkGlyph']}>&ldquo;</span>\n    </div>\n  )\n\n  const childrenArray = React.Children.toArray(children)\n  const findChild = (type: React.ElementType) =>\n    childrenArray.find(child => React.isValidElement(child) && child.type === type)\n\n  const quoteChild = findChild(Quote)\n  const actionChild = findChild(_Link)\n  const avatarChild = findChild(Avatar)\n  const logoChild = findChild(Logo)\n  const nameChild = findChild(Name)\n\n  return (\n    <figure\n      ref={ref}\n      className={clsx(\n        animationClasses,\n        styles['Testimonial'],\n        styles[`Testimonial--variant-${variant}`],\n        size && styles[`Testimonial--size-${size}`],\n        hasBorder && styles['Testimonial--border'],\n        variant === 'expressive' && actionChild && styles['Testimonial--hasLink'],\n        className,\n      )}\n      style={{\n        ...animationInlineStyles,\n        ...style,\n        ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n      }}\n      {...rest}\n    >\n      <div className={styles['Testimonial__quoteWrapper']}>\n        {quoteMark}\n        {quoteChild}\n        {variant !== 'expressive' && actionChild}\n      </div>\n      <div className={styles['Testimonial__media']}>\n        {avatarChild}\n        {logoChild}\n        {nameChild}\n      </div>\n      {variant === 'expressive' && actionChild}\n    </figure>\n  )\n}\n\nconst Root = forwardRef(TestimonialBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\n\nfunction QuoteBase({children, className}: QuoteProps, ref) {\n  return (\n    <blockquote ref={ref}>\n      <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n    </blockquote>\n  )\n}\n\nconst Quote = forwardRef(QuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype NameProps = {\n  position?: string\n} & React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement>\n\nfunction _Name({children, className, position}: NameProps, ref) {\n  return (\n    <figcaption ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n      <Text size=\"200\" className={clsx(styles['Testimonial-from'])} font=\"monospace\">\n        {children}\n      </Text>\n      {position && (\n        <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n          {position}\n        </Text>\n      )}\n    </figcaption>\n  )\n}\n\nconst Name = forwardRef(_Name)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype LogoProps = {\n  children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n  BaseProps<HTMLImageElement>\n\nfunction _Logo({children, ...rest}: LogoProps, ref) {\n  return (\n    <div className={styles['Testimonial-logo']} {...rest}>\n      {React.Children.map(children, child => {\n        if (React.isValidElement(child)) {\n          if (child.type === 'img') {\n            const imageChild = child as React.ReactElement<ComponentPropsWithRef<'img'>>\n            const imageProps: ComponentPropsWithRef<'img'> = {\n              className: clsx(styles['Testimonial-logo-image'], imageChild.props.className),\n              ref: ref as ComponentPropsWithRef<'img'>['ref'],\n            }\n\n            return React.cloneElement(imageChild, imageProps)\n          }\n        }\n      })}\n    </div>\n  )\n}\n\nconst Logo = forwardRef(_Logo)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction _Avatar({size, ...rest}: AvatarProps) {\n  return <BaseAvatar className={clsx(styles['Testimonial-avatar'])} size={48} {...rest} />\n}\n\nconst Avatar = _Avatar\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction _LinkBase({className, ...rest}: LinkProps, _ref) {\n  return <Link className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n}\n\nconst _Link = forwardRef(_LinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(Root, {\n  Quote,\n  Name,\n  Avatar,\n  Logo,\n  Link: _Link,\n})\n"],"mappings":"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"}

package/esm/Testimonial/Testimonial.module.js

@@ -1,20 +1,21 @@
-import './Testimonial.module-BEV0y2jl.css';var e = {
-	Testimonial: "Primer_Brand__Testimonial-module__Testimonial___kxB6R",
+import './Testimonial.module-BEV0y2jl.css';//#region src/Testimonial/Testimonial.module.css
+var e = "Primer_Brand__Testimonial-module__Testimonial___kxB6R", t = "Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2", n = "Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L", r = "Primer_Brand__Testimonial-module__Testimonial__media___rvn7k", i = "Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf", a = {
+	Testimonial: e,
 	"Testimonial--variant-subtle": "Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe",
 	"Testimonial--variant-default": "Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S",
 	"Testimonial--size-large": "Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg",
 	"Testimonial--border": "Primer_Brand__Testimonial-module__Testimonial--border___pbUPS",
-	Testimonial__quoteMark: "Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2",
+	Testimonial__quoteMark: t,
 	"Testimonial__quoteMark--hasBackground": "Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2",
-	Testimonial__quoteMarkGlyph: "Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L",
+	Testimonial__quoteMarkGlyph: n,
 	"Testimonial-quote": "Primer_Brand__Testimonial-module__Testimonial-quote___xbxri",
-	Testimonial__media: "Primer_Brand__Testimonial-module__Testimonial__media___rvn7k",
+	Testimonial__media: r,
 	"Testimonial-logo-image": "Primer_Brand__Testimonial-module__Testimonial-logo-image___rpGVd",
 	"Testimonial-caption": "Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF",
 	"Testimonial-avatar": "Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ",
 	"Testimonial-from": "Primer_Brand__Testimonial-module__Testimonial-from___XLpqj",
 	"Testimonial--variant-expressive": "Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY",
-	Testimonial__quoteWrapper: "Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf",
+	Testimonial__quoteWrapper: i,
 	"Testimonial-position": "Primer_Brand__Testimonial-module__Testimonial-position____jQ17",
 	"Testimonial--hasLink": "Primer_Brand__Testimonial-module__Testimonial--hasLink___U6yF2",
 	"Testimonial-link": "Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ",
@@ -39,6 +40,6 @@ import './Testimonial.module-BEV0y2jl.css';var e = {
 	"Testimonial__quoteMark--yellow": "Primer_Brand__Testimonial-module__Testimonial__quoteMark--yellow___W8v__"
 };
 //#endregion
-export { e as default };
+export { e as Testimonial, r as Testimonial__media, t as Testimonial__quoteMark, n as Testimonial__quoteMarkGlyph, i as Testimonial__quoteWrapper, a as default };
 
 //# sourceMappingURL=Testimonial.module.js.map

package/esm/Text/Text.d.ts

@@ -58,6 +58,6 @@ export type TextProps = {
      */
     hasAntiAliasing?: boolean;
 } & TextTags;
-export declare function Text({ align, animate, as, className, children, font, size, variant, weight, style, hasAntiAliasing, ...rest }: PropsWithChildren<TextProps>): import("react/jsx-runtime").JSX.Element;
+export declare function Text({ align, animate, as, className, children, font, size, variant, weight, style, hasAntiAliasing, ...rest }: PropsWithChildren<TextProps>): React.JSX.Element;
 export {};
 //# sourceMappingURL=Text.d.ts.map

package/esm/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAA;AAIvD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,eAAO,MAAM,SAAS,yFAA0F,CAAA;AAChH,eAAO,MAAM,QAAQ,+CAAgD,CAAA;AACrE,eAAO,MAAM,YAAY,+BAAgC,CAAA;AACzD,eAAO,MAAM,WAAW,gGASd,CAAA;AACV,eAAO,MAAM,gBAAgB,mDAAoD,CAAA;AAEjF,eAAO,MAAM,cAAc,QAAc,CAAA;AACzC,eAAO,MAAM,eAAe,OAAe,CAAA;AAC3C,eAAO,MAAM,kBAAkB,WAAkB,CAAA;AACjD,eAAO,MAAM,kBAAkB,aAAsB,CAAA;AAErD,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEhE,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED,KAAK,sBAAsB,GACvB,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,GAAG,CAAA;CAAC,CAAC,GAC3F,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,GACpF,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACjF,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,QAAQ,CAAA;CAAC,CAAC,GAC9E,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAC,CAAC,CAAA;AAE9E,KAAK,QAAQ,GAAG;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;CAC/B,GAAG,sBAAsB,CAAA;AAE1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,GAAG,mBAAmB,CAAA;IACjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,QAAQ,CAAA;AAEZ,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,OAAO,EACP,EAAmB,EACnB,SAAS,EACT,QAAQ,EACR,IAAyB,EACzB,IAAsB,EACtB,OAA4B,EAC5B,MAAM,EACN,KAAK,EACL,eAAsB,EACtB,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,SAAS,CAAC,2CAiF9B"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAA;AAIvD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,eAAO,MAAM,SAAS,yFAA0F,CAAA;AAChH,eAAO,MAAM,QAAQ,+CAAgD,CAAA;AACrE,eAAO,MAAM,YAAY,+BAAgC,CAAA;AACzD,eAAO,MAAM,WAAW,gGASd,CAAA;AACV,eAAO,MAAM,gBAAgB,mDAAoD,CAAA;AAEjF,eAAO,MAAM,cAAc,QAAc,CAAA;AACzC,eAAO,MAAM,eAAe,OAAe,CAAA;AAC3C,eAAO,MAAM,kBAAkB,WAAkB,CAAA;AACjD,eAAO,MAAM,kBAAkB,aAAsB,CAAA;AAErD,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEhE,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED,KAAK,sBAAsB,GACvB,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,GAAG,CAAA;CAAC,CAAC,GAC3F,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,GACpF,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACjF,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,QAAQ,CAAA;CAAC,CAAC,GAC9E,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAC,CAAC,CAAA;AAE9E,KAAK,QAAQ,GAAG;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;CAC/B,GAAG,sBAAsB,CAAA;AAE1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,GAAG,mBAAmB,CAAA;IACjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,QAAQ,CAAA;AAEZ,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,OAAO,EACP,EAAmB,EACnB,SAAS,EACT,QAAQ,EACR,IAAyB,EACzB,IAAsB,EACtB,OAA4B,EAC5B,MAAM,EACN,KAAK,EACL,eAAsB,EACtB,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAiF9B"}

package/esm/Text/Text.js

@@ -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 "./Text.module.js";
 import { useMemo as r } from "react";

package/esm/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":[],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React, {PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useAnimation} from '../animation'\nimport styles from './Text.module.css'\nimport {BaseProps} from '../component-helpers'\n\nexport const TextSizes = ['1000', '900', '800', '700', '600', '500', '400', '350', '300', '200', '100'] as const\nexport const TextTags = ['p', 'span', 'div', 'strong', 'em'] as const\nexport const TextVariants = ['default', 'muted'] as const\nexport const TextWeights = [\n  'heavy',\n  'extrabold',\n  'bold',\n  'semibold',\n  'medium',\n  'normal',\n  'light',\n  'extralight',\n] as const\nexport const TextFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultTextTag = TextTags[1]\nexport const defaultTextSize = TextSizes[9]\nexport const defaultTextVariant = TextVariants[0]\nexport const defaultFontVariant = TextFontVariants[0]\n\nexport type TextWeightVariants = (typeof TextWeights)[number]\nexport type TextFontVariants = (typeof TextFontVariants)[number]\n\nexport type ResponsiveWeightMap = {\n  narrow?: TextWeightVariants\n  regular?: TextWeightVariants\n  wide?: TextWeightVariants\n}\n\ntype RestrictedPolymorphism =\n  | (React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {as?: 'p'})\n  | (React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {as?: 'span'})\n  | (React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {as?: 'div'})\n  | (React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {as?: 'strong'})\n  | (React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {as?: 'em'})\n\ntype TextTags = {\n  /**\n   * Applies the underlying HTML element\n   */\n  as?: (typeof TextTags)[number]\n} & RestrictedPolymorphism\n\nexport type TextProps = {\n  font?: TextFontVariants\n  /**\n   * Specify the text size\n   */\n  size?: (typeof TextSizes)[number]\n  /**\n   * Specify alternative text appearance\n   */\n  variant?: (typeof TextVariants)[number]\n  /**\n   * Specify the text weight\n   */\n  weight?: TextWeightVariants | ResponsiveWeightMap\n  /**\n   * Specify the text alignment.\n   * Corresponds to the CSS `text-align` property.\n   * Note: Only applies to block elements.\n   */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Toggle antialiasing on or off\n   */\n  hasAntiAliasing?: boolean\n} & TextTags\n\nexport function Text({\n  align,\n  animate,\n  as = defaultTextTag,\n  className,\n  children,\n  font = defaultFontVariant,\n  size = defaultTextSize,\n  variant = defaultTextVariant,\n  weight,\n  style,\n  hasAntiAliasing = true,\n  ...rest\n}: PropsWithChildren<TextProps>) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const weightClass = useMemo(() => {\n    if (!weight) return null\n\n    return typeof weight === 'string'\n      ? styles[`Text--weight-${weight}`]\n      : Object.keys(weight)\n          .map(viewport => {\n            return styles[`Text-${viewport}--weight-${weight[viewport]}`]\n          })\n          .join(' ')\n  }, [weight])\n\n  const dontApplyAA = Boolean(\n    // When explicitly disabled\n    !hasAntiAliasing ||\n      // When selected font weight is not suitable for anti-aliasing\n      (weight && ['light', 'extralight'].includes(weight as TextWeightVariants) && ['100', '200'].includes(size)) ||\n      // When size is too small\n      size === '100',\n  )\n\n  const textClassName = clsx(\n    animationClasses,\n    styles.Text,\n    styles[`Text-font--${font}`],\n    styles[`Text--${variant}`],\n    styles[`Text--${size}`],\n    !dontApplyAA && styles['Text--antialiased'],\n    weight && weightClass,\n    align && styles[`Text-align--${align}`],\n    className,\n  )\n\n  if (as === 'p') {\n    return (\n      <p\n        className={textClassName}\n        style={{...animationInlineStyles, ...style}}\n        {...(rest as BaseProps<HTMLParagraphElement>)}\n      >\n        {children}\n      </p>\n    )\n  }\n\n  if (as === 'em') {\n    return (\n      <em className={textClassName} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </em>\n    )\n  }\n\n  if (as === 'div') {\n    return (\n      <div\n        className={textClassName}\n        style={{...animationInlineStyles, ...style}}\n        {...(rest as BaseProps<HTMLDivElement>)}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (as === 'strong') {\n    return (\n      <strong className={textClassName} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </strong>\n    )\n  }\n\n  return (\n    <span className={textClassName} style={{...animationInlineStyles, ...style}} {...rest}>\n      {children}\n    </span>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,IAAY;CAAC;CAAQ;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM,EAC1F,IAAW;CAAC;CAAK;CAAQ;CAAO;CAAU;CAAK,EAC/C,IAAe,CAAC,WAAW,QAAQ,EACnC,IAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAmB;CAAC;CAAa;CAAc;CAAY,EAE3D,IAAiB,EAAS,IAC1B,IAAkB,EAAU,IAC5B,IAAqB,EAAa,IAClC,IAAqB,EAAiB;AAmDnD,SAAgB,EAAK,EACnB,UACA,YACA,QAAK,GACL,cACA,aACA,UAAO,GACP,UAAO,GACP,aAAU,GACV,WACA,UACA,qBAAkB,IAClB,GAAG,KAC4B;CAC/B,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAc,QACb,IAEE,OAAO,KAAW,WACrB,EAAO,gBAAgB,OACvB,OAAO,KAAK,EAAO,CAChB,KAAI,MACI,EAAO,QAAQ,EAAS,WAAW,EAAO,MACjD,CACD,KAAK,IAAI,GARI,MASnB,CAAC,EAAO,CAAC,EAEN,IAAc,GAElB,CAAC,KAEE,KAAU,CAAC,SAAS,aAAa,CAAC,SAAS,EAA6B,IAAI,CAAC,OAAO,MAAM,CAAC,SAAS,EAAK,IAE1G,MAAS,QAGP,IAAgB,EACpB,GACA,EAAO,MACP,EAAO,cAAc,MACrB,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,CAAC,KAAe,EAAO,sBACvB,KAAU,GACV,KAAS,EAAO,eAAe,MAC/B,EACD;AA0CD,QAtCI,EAFA,MAAO,MAEN,MAUD,MAAO,OAEN,OAMD,MAAO,QAEN,QAUD,MAAO,WAEN,WAOF,QAvCC;EACE,WAAW;EACX,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAK;EAEJ;EACC,CAAA"}
+{"version":3,"file":"Text.js","names":[],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React, {PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useAnimation} from '../animation'\nimport styles from './Text.module.css'\nimport {BaseProps} from '../component-helpers'\n\nexport const TextSizes = ['1000', '900', '800', '700', '600', '500', '400', '350', '300', '200', '100'] as const\nexport const TextTags = ['p', 'span', 'div', 'strong', 'em'] as const\nexport const TextVariants = ['default', 'muted'] as const\nexport const TextWeights = [\n  'heavy',\n  'extrabold',\n  'bold',\n  'semibold',\n  'medium',\n  'normal',\n  'light',\n  'extralight',\n] as const\nexport const TextFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultTextTag = TextTags[1]\nexport const defaultTextSize = TextSizes[9]\nexport const defaultTextVariant = TextVariants[0]\nexport const defaultFontVariant = TextFontVariants[0]\n\nexport type TextWeightVariants = (typeof TextWeights)[number]\nexport type TextFontVariants = (typeof TextFontVariants)[number]\n\nexport type ResponsiveWeightMap = {\n  narrow?: TextWeightVariants\n  regular?: TextWeightVariants\n  wide?: TextWeightVariants\n}\n\ntype RestrictedPolymorphism =\n  | (React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {as?: 'p'})\n  | (React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {as?: 'span'})\n  | (React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {as?: 'div'})\n  | (React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {as?: 'strong'})\n  | (React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {as?: 'em'})\n\ntype TextTags = {\n  /**\n   * Applies the underlying HTML element\n   */\n  as?: (typeof TextTags)[number]\n} & RestrictedPolymorphism\n\nexport type TextProps = {\n  font?: TextFontVariants\n  /**\n   * Specify the text size\n   */\n  size?: (typeof TextSizes)[number]\n  /**\n   * Specify alternative text appearance\n   */\n  variant?: (typeof TextVariants)[number]\n  /**\n   * Specify the text weight\n   */\n  weight?: TextWeightVariants | ResponsiveWeightMap\n  /**\n   * Specify the text alignment.\n   * Corresponds to the CSS `text-align` property.\n   * Note: Only applies to block elements.\n   */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Toggle antialiasing on or off\n   */\n  hasAntiAliasing?: boolean\n} & TextTags\n\nexport function Text({\n  align,\n  animate,\n  as = defaultTextTag,\n  className,\n  children,\n  font = defaultFontVariant,\n  size = defaultTextSize,\n  variant = defaultTextVariant,\n  weight,\n  style,\n  hasAntiAliasing = true,\n  ...rest\n}: PropsWithChildren<TextProps>) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const weightClass = useMemo(() => {\n    if (!weight) return null\n\n    return typeof weight === 'string'\n      ? styles[`Text--weight-${weight}`]\n      : Object.keys(weight)\n          .map(viewport => {\n            return styles[`Text-${viewport}--weight-${weight[viewport]}`]\n          })\n          .join(' ')\n  }, [weight])\n\n  const dontApplyAA = Boolean(\n    // When explicitly disabled\n    !hasAntiAliasing ||\n      // When selected font weight is not suitable for anti-aliasing\n      (weight && ['light', 'extralight'].includes(weight as TextWeightVariants) && ['100', '200'].includes(size)) ||\n      // When size is too small\n      size === '100',\n  )\n\n  const textClassName = clsx(\n    animationClasses,\n    styles.Text,\n    styles[`Text-font--${font}`],\n    styles[`Text--${variant}`],\n    styles[`Text--${size}`],\n    !dontApplyAA && styles['Text--antialiased'],\n    weight && weightClass,\n    align && styles[`Text-align--${align}`],\n    className,\n  )\n\n  if (as === 'p') {\n    return (\n      <p\n        className={textClassName}\n        style={{...animationInlineStyles, ...style}}\n        {...(rest as BaseProps<HTMLParagraphElement>)}\n      >\n        {children}\n      </p>\n    )\n  }\n\n  if (as === 'em') {\n    return (\n      <em className={textClassName} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </em>\n    )\n  }\n\n  if (as === 'div') {\n    return (\n      <div\n        className={textClassName}\n        style={{...animationInlineStyles, ...style}}\n        {...(rest as BaseProps<HTMLDivElement>)}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (as === 'strong') {\n    return (\n      <strong className={textClassName} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </strong>\n    )\n  }\n\n  return (\n    <span className={textClassName} style={{...animationInlineStyles, ...style}} {...rest}>\n      {children}\n    </span>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,IAAY;CAAC;CAAQ;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK,GACzF,IAAW;CAAC;CAAK;CAAQ;CAAO;CAAU;AAAI,GAC9C,IAAe,CAAC,WAAW,OAAO,GAClC,IAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACa,IAAmB;CAAC;CAAa;CAAc;AAAW,GAE1D,IAAiB,EAAS,IAC1B,IAAkB,EAAU,IAC5B,IAAqB,EAAa,IAClC,IAAqB,EAAiB;AAmDnD,SAAgB,EAAK,EACnB,UACA,YACA,QAAK,GACL,cACA,aACA,UAAO,GACP,UAAO,GACP,aAAU,GACV,WACA,UACA,qBAAkB,IAClB,GAAG,KAC4B;CAC/B,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,IAAc,QACb,IAEE,OAAO,KAAW,WACrB,EAAO,gBAAgB,OACvB,OAAO,KAAK,CAAM,CAAC,CAChB,KAAI,MACI,EAAO,QAAQ,EAAS,WAAW,EAAO,KAClD,CAAC,CACD,KAAK,GAAG,IARK,MASnB,CAAC,CAAM,CAAC,GAEL,IAAc,GAElB,CAAC,KAEE,KAAU,CAAC,SAAS,YAAY,CAAC,CAAC,SAAS,CAA4B,KAAK,CAAC,OAAO,KAAK,CAAC,CAAC,SAAS,CAAI,KAEzG,MAAS,QAGP,IAAgB,EACpB,GACA,EAAO,MACP,EAAO,cAAc,MACrB,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,CAAC,KAAe,EAAO,sBACvB,KAAU,GACV,KAAS,EAAO,eAAe,MAC/B,CACF;CA0CA,OAtCI,EAFA,MAAO,MAEN,MAUD,MAAO,OAEN,OAMD,MAAO,QAEN,QAUD,MAAO,WAEN,WAOF,QAvCC;EACE,WAAW;EACX,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAK;EAEJ;CACA,CAAA;AAqCT"}

package/esm/Text/Text.module.js

@@ -1,5 +1,6 @@
-import './Text.module-D0UHZ0pq.css';var e = {
-	Text: "Primer_Brand__Text-module__Text___XeGJJ",
+import './Text.module-D0UHZ0pq.css';//#region src/Text/Text.module.css
+var e = "Primer_Brand__Text-module__Text___XeGJJ", t = {
+	Text: e,
 	"Text--antialiased": "Primer_Brand__Text-module__Text--antialiased___TYoXS",
 	"Text--default": "Primer_Brand__Text-module__Text--default___GhPh_",
 	"Text--muted": "Primer_Brand__Text-module__Text--muted___rE6mh",
@@ -54,6 +55,6 @@ import './Text.module-D0UHZ0pq.css';var e = {
 	"Text-align--center": "Primer_Brand__Text-module__Text-align--center___NERb4"
 };
 //#endregion
-export { e as default };
+export { e as Text, t as default };
 
 //# sourceMappingURL=Text.module.js.map

package/esm/TextCursorAnimation/TextCursorAnimation.d.ts

@@ -20,5 +20,5 @@ export type TextCursorAnimationProps = {
     delay?: number;
     waitForPageLoad?: boolean;
 } & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
-export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): React.JSX.Element;
 //# sourceMappingURL=TextCursorAnimation.d.ts.map

package/esm/TextCursorAnimation/TextCursorAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,4GAA4G,CAAA;AACnH,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO;;;;CAQnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EAAE,MAAM,EACrB,KAAK,EACL,eAAsB,EACtB,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,2CA+E7C"}
+{"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,4GAA4G,CAAA;AACnH,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO;;;;CAQnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EAAE,MAAM,EACrB,KAAK,EACL,eAAsB,EACtB,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,qBA+E7C"}

package/esm/TextCursorAnimation/TextCursorAnimation.js

@@ -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 { useCursorAnimation as t } from "../hooks/useCursorAnimation.js";
 import { EyebrowText as n } from "../EyebrowText/EyebrowText.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BucKYl1n.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base-DKbXhPKv.css';/* empty css                                                                                                      */

package/esm/TextCursorAnimation/TextCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get text() {\n    return `${this.root}-text`\n  },\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text with a typing effect.\n   */\n  animate?: boolean\n  /**\n   * Optional text to type before transitioning to the final text\n   */\n  initialText?: string\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  initialText,\n  'data-testid': testId,\n  delay,\n  waitForPageLoad = true,\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, visibleText, cursorPhase} = useCursorAnimation({\n    text,\n    initialText,\n    animate,\n    delay,\n    waitForPageLoad,\n  })\n\n  const hasAnimation = animate === true && text.length > 0\n  const content = text || children\n  const cursorPhaseClassName = {\n    initial: styles['TextCursorAnimation__cursor--initial'],\n    correction: styles['TextCursorAnimation__cursor--correction'],\n    final: styles['TextCursorAnimation__cursor--final'],\n    complete: styles['TextCursorAnimation__cursor--complete'],\n  }[hasAnimation ? cursorPhase : 'complete']\n\n  return (\n    <span className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles.TextCursorAnimation__inner}>\n        {hasAnimation && (\n          <span className={styles.TextCursorAnimation__sizingContainer}>\n            <EyebrowText\n              size=\"100\"\n              variant={variant}\n              font=\"monospace\"\n              weight=\"medium\"\n              className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n            >\n              {text}\n            </EyebrowText>\n            {initialText && initialText !== text && (\n              <EyebrowText\n                size=\"100\"\n                variant={variant}\n                font=\"monospace\"\n                weight=\"medium\"\n                className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n                aria-hidden=\"true\"\n              >\n                {initialText}\n              </EyebrowText>\n            )}\n          </span>\n        )}\n        <span\n          className={clsx(\n            styles.TextCursorAnimation__content,\n            hasAnimation && styles['TextCursorAnimation__content--animated'],\n          )}\n          aria-hidden={hasAnimation ? 'true' : undefined}\n        >\n          <EyebrowText\n            size=\"100\"\n            variant={variant}\n            font=\"monospace\"\n            weight=\"medium\"\n            className={styles.TextCursorAnimation__text}\n            data-testid={testIds.text}\n          >\n            {hasAnimation ? visibleText : content}\n          </EyebrowText>\n          {showCursor && (\n            <span\n              className={clsx(\n                styles.TextCursorAnimation__cursor,\n                hasAnimation && styles['TextCursorAnimation__cursor--animated'],\n                cursorPhaseClassName,\n              )}\n              aria-hidden=\"true\"\n              data-testid={testIds.cursor}\n            />\n          )}\n        </span>\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEvB;AAiBD,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,gBACA,eAAe,GACf,UACA,qBAAkB,IAClB,aAAU,WACoC;CAC9C,IAAM,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAa,mBAAe,EAAmB;EAChE;EACA;EACA;EACA;EACA;EACD,CAAC,EAEI,IAAe,MAAY,MAAQ,EAAK,SAAS,GACjD,IAAU,KAAQ,GAClB,IAAuB;EAC3B,SAAS,EAAO;EAChB,YAAY,EAAO;EACnB,OAAO,EAAO;EACd,UAAU,EAAO;EAClB,CAAC,IAAe,IAAc;AAE/B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,EAAU;EAAE,eAAa,KAAU,EAAQ;YAC3F,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,gCAAgC;eAExF;KACW,CAAA,EACb,KAAe,MAAgB,KAC9B,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,gCAAgC;KACzF,eAAY;eAEX;KACW,CAAA,CAEX;OAET,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,8BACP,KAAgB,EAAO,0CACxB;IACD,eAAa,IAAe,SAAS,KAAA;cALvC,CAOE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAO;KAClB,eAAa,EAAQ;eAEpB,IAAe,IAAc;KAClB,CAAA,EACb,KACC,kBAAC,QAAD;KACE,WAAW,EACT,EAAO,6BACP,KAAgB,EAAO,0CACvB,EACD;KACD,eAAY;KACZ,eAAa,EAAQ;KACrB,CAAA,CAEC;MACF;;EACF,CAAA"}
+{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get text() {\n    return `${this.root}-text`\n  },\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text with a typing effect.\n   */\n  animate?: boolean\n  /**\n   * Optional text to type before transitioning to the final text\n   */\n  initialText?: string\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  initialText,\n  'data-testid': testId,\n  delay,\n  waitForPageLoad = true,\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, visibleText, cursorPhase} = useCursorAnimation({\n    text,\n    initialText,\n    animate,\n    delay,\n    waitForPageLoad,\n  })\n\n  const hasAnimation = animate === true && text.length > 0\n  const content = text || children\n  const cursorPhaseClassName = {\n    initial: styles['TextCursorAnimation__cursor--initial'],\n    correction: styles['TextCursorAnimation__cursor--correction'],\n    final: styles['TextCursorAnimation__cursor--final'],\n    complete: styles['TextCursorAnimation__cursor--complete'],\n  }[hasAnimation ? cursorPhase : 'complete']\n\n  return (\n    <span className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles.TextCursorAnimation__inner}>\n        {hasAnimation && (\n          <span className={styles.TextCursorAnimation__sizingContainer}>\n            <EyebrowText\n              size=\"100\"\n              variant={variant}\n              font=\"monospace\"\n              weight=\"medium\"\n              className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n            >\n              {text}\n            </EyebrowText>\n            {initialText && initialText !== text && (\n              <EyebrowText\n                size=\"100\"\n                variant={variant}\n                font=\"monospace\"\n                weight=\"medium\"\n                className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n                aria-hidden=\"true\"\n              >\n                {initialText}\n              </EyebrowText>\n            )}\n          </span>\n        )}\n        <span\n          className={clsx(\n            styles.TextCursorAnimation__content,\n            hasAnimation && styles['TextCursorAnimation__content--animated'],\n          )}\n          aria-hidden={hasAnimation ? 'true' : undefined}\n        >\n          <EyebrowText\n            size=\"100\"\n            variant={variant}\n            font=\"monospace\"\n            weight=\"medium\"\n            className={styles.TextCursorAnimation__text}\n            data-testid={testIds.text}\n          >\n            {hasAnimation ? visibleText : content}\n          </EyebrowText>\n          {showCursor && (\n            <span\n              className={clsx(\n                styles.TextCursorAnimation__cursor,\n                hasAnimation && styles['TextCursorAnimation__cursor--animated'],\n                cursorPhaseClassName,\n              )}\n              aria-hidden=\"true\"\n              data-testid={testIds.cursor}\n            />\n          )}\n        </span>\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,SAAS;EACX,OAAO,GAAG,KAAK,KAAK;CACtB;AACF;AAiBA,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,gBACA,eAAe,GACf,UACA,qBAAkB,IAClB,aAAU,WACoC;CAC9C,IAAM,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAa,mBAAe,EAAmB;EAChE;EACA;EACA;EACA;EACA;CACF,CAAC,GAEK,IAAe,MAAY,MAAQ,EAAK,SAAS,GACjD,IAAU,KAAQ,GAClB,IAAuB;EAC3B,SAAS,EAAO;EAChB,YAAY,EAAO;EACnB,OAAO,EAAO;EACd,UAAU,EAAO;CACnB,EAAE,IAAe,IAAc;CAE/B,OACE,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,CAAS;EAAG,eAAa,KAAU,EAAQ;YAC3F,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,+BAA+B;eAEvF;IACU,CAAA,GACZ,KAAe,MAAgB,KAC9B,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,+BAA+B;KACxF,eAAY;eAEX;IACU,CAAA,CAEX;OAER,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,8BACP,KAAgB,EAAO,yCACzB;IACA,eAAa,IAAe,SAAS,KAAA;cALvC,CAOE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAO;KAClB,eAAa,EAAQ;eAEpB,IAAe,IAAc;IACnB,CAAA,GACZ,KACC,kBAAC,QAAD;KACE,WAAW,EACT,EAAO,6BACP,KAAgB,EAAO,0CACvB,CACF;KACA,eAAY;KACZ,eAAa,EAAQ;IACtB,CAAA,CAEC;KACF;;CACF,CAAA;AAEV"}

package/esm/TextCursorAnimation/TextCursorAnimation.module.js

@@ -1,12 +1,13 @@
-import './TextCursorAnimation.module-BS4hPR8H.css';var e = {
-	TextCursorAnimation: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu",
-	TextCursorAnimation__inner: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl",
-	TextCursorAnimation__text: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc",
-	TextCursorAnimation__sizingContainer: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg",
-	TextCursorAnimation__sizingText: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64",
-	TextCursorAnimation__content: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E",
+import './TextCursorAnimation.module-BS4hPR8H.css';//#region src/TextCursorAnimation/TextCursorAnimation.module.css
+var e = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu", t = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl", n = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc", r = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg", i = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64", a = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E", o = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD", s = {
+	TextCursorAnimation: e,
+	TextCursorAnimation__inner: t,
+	TextCursorAnimation__text: n,
+	TextCursorAnimation__sizingContainer: r,
+	TextCursorAnimation__sizingText: i,
+	TextCursorAnimation__content: a,
 	"TextCursorAnimation__content--animated": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content--animated___Zmg8H",
-	TextCursorAnimation__cursor: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD",
+	TextCursorAnimation__cursor: o,
 	"TextCursorAnimation__cursor--initial": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--initial___Ozy64",
 	"TextCursorAnimation__cursor--animated": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--animated___EfpR4",
 	"TextCursorAnimation-cursor-blink": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh",
@@ -15,6 +16,6 @@ import './TextCursorAnimation.module-BS4hPR8H.css';var e = {
 	"TextCursorAnimation__cursor--complete": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--complete___gufWv"
 };
 //#endregion
-export { e as default };
+export { e as TextCursorAnimation, a as TextCursorAnimation__content, o as TextCursorAnimation__cursor, t as TextCursorAnimation__inner, r as TextCursorAnimation__sizingContainer, i as TextCursorAnimation__sizingText, n as TextCursorAnimation__text, s as default };
 
 //# sourceMappingURL=TextCursorAnimation.module.js.map

package/esm/ThemeProvider/ThemeProvider.d.ts

@@ -16,5 +16,5 @@ export declare const ThemeContext: React.Context<ThemeContextProps>;
 /**
  * ThemeProvider is used to provide theme-related context to its child components.
  */
-export declare function ThemeProvider({ colorMode, children, ...rest }: PropsWithChildren<ThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ colorMode, children, ...rest }: PropsWithChildren<ThemeProviderProps>): React.JSX.Element;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/esm/ThemeProvider/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8C,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE3G,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,cAAc,EAAE,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAI9B,SAAS,EAAE,SAAS,CAAA;IAKpB,mBAAmB,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAIlC,eAAO,MAAM,YAAY,kCAGvB,CAAA;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAC,SAAuB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CAqBhH"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8C,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE3G,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,cAAc,EAAE,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAI9B,SAAS,EAAE,SAAS,CAAA;IAKpB,mBAAmB,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAIlC,eAAO,MAAM,YAAY,kCAGvB,CAAA;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAC,SAAuB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAqBhH"}

package/esm/ThemeProvider/ThemeProvider.js

@@ -3,13 +3,13 @@ import { jsx as i } from "react/jsx-runtime";
 //#region src/ThemeProvider/ThemeProvider.tsx
 var a = /* @__PURE__ */ function(e) {
 	return e.LIGHT = "light", e.DARK = "dark", e.AUTO = "auto", e;
-}({}), o = a.LIGHT, s = e({
+}({}), o = "light", s = e({
 	colorMode: o,
 	availableColorModes: Object.values(a)
 });
 function c({ colorMode: e = o, children: c, ...l }) {
 	let [f, p] = r(e), m = n(() => Object.values(a), []);
-	return t(() => (e === a.AUTO ? p(u()) : f !== e && p(e), d(p)), [
+	return t(() => (e === "auto" ? p(u()) : f !== e && p(e), d(p)), [
 		e,
 		f,
 		p
@@ -25,8 +25,8 @@ function c({ colorMode: e = o, children: c, ...l }) {
 		})
 	});
 }
-var l = () => window.matchMedia(`(prefers-color-scheme: ${a.DARK})`), u = () => l().matches ? a.DARK : a.LIGHT, d = (e) => {
-	let t = l(), n = (t) => e(t.matches ? a.DARK : a.LIGHT);
+var l = () => window.matchMedia("(prefers-color-scheme: dark)"), u = () => l().matches ? "dark" : "light", d = (e) => {
+	let t = l(), n = (t) => e(t.matches ? "dark" : "light");
 	return t.addEventListener("change", n), () => t.removeEventListener("change", n);
 };
 //#endregion

package/esm/ThemeProvider/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import React, {useState, useMemo, useEffect, createContext, HTMLAttributes, PropsWithChildren} from 'react'\n\nexport enum ColorModesEnum {\n  LIGHT = 'light',\n  DARK = 'dark',\n  AUTO = 'auto',\n}\n\nexport type ColorMode = `${ColorModesEnum}`\n\nexport type ThemeContextProps = {\n  /*\n   * The active color mode of the parent ThemeProvider.\n   */\n  colorMode: ColorMode\n\n  /*\n   * List of available color modes.\n   */\n  availableColorModes: ColorModesEnum[]\n}\n\nexport type ThemeProviderProps = {\n  colorMode?: ColorMode\n} & HTMLAttributes<HTMLDivElement>\n\nconst defaultMode = ColorModesEnum.LIGHT\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  colorMode: defaultMode,\n  availableColorModes: Object.values(ColorModesEnum),\n})\n\n/**\n * ThemeProvider is used to provide theme-related context to its child components.\n */\nexport function ThemeProvider({colorMode = defaultMode, children, ...rest}: PropsWithChildren<ThemeProviderProps>) {\n  const [activeMode, setActiveMode] = useState(colorMode)\n  const availableColorModes = useMemo(() => Object.values(ColorModesEnum), [])\n\n  useEffect(() => {\n    if (colorMode === ColorModesEnum.AUTO) {\n      setActiveMode(getActiveAutoMode())\n    } else if (activeMode !== colorMode) {\n      setActiveMode(colorMode)\n    }\n\n    return handleSystemPreferenceChange(setActiveMode)\n  }, [colorMode, activeMode, setActiveMode])\n\n  return (\n    <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>\n      <div data-color-mode={activeMode} {...rest}>\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n\nconst queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)\n\nconst getActiveAutoMode = () => {\n  const mediaQueryList: MediaQueryList = queryBrowserPreference()\n  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT\n}\n\nconst handleSystemPreferenceChange = callback => {\n  const mediaQueryList = queryBrowserPreference()\n  const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)\n  mediaQueryList.addEventListener('change', changeHandler)\n  return () => mediaQueryList.removeEventListener('change', changeHandler)\n}\n"],"mappings":";;;AAEA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAQ,SACR,EAAA,OAAO,QACP,EAAA,OAAO;KACR,EAoBK,IAAc,EAAe,OAEtB,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,EAAe;CACnD,CAAC;AAKF,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,GAAY,KAAiB,EAAS,EAAU,EACjD,IAAsB,QAAc,OAAO,OAAO,EAAe,EAAE,EAAE,CAAC;AAY5E,QAVA,SACM,MAAc,EAAe,OAC/B,EAAc,GAAmB,CAAC,GACzB,MAAe,KACxB,EAAc,EAAU,EAGnB,EAA6B,EAAc,GACjD;EAAC;EAAW;EAAY;EAAc,CAAC,EAGxC,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;GAAoB;YACxE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;GACG,CAAA;EACgB,CAAA;;AAI5B,IAAM,UAA+B,OAAO,WAAW,0BAA0B,EAAe,KAAK,GAAG,EAElG,UACmC,GAChC,CAAe,UAAU,EAAe,OAAO,EAAe,OAGjE,KAA+B,MAAY;CAC/C,IAAM,IAAiB,GAAwB,EACzC,KAAgB,MAAS,EAAS,EAAM,UAAU,EAAe,OAAO,EAAe,MAAM;AAEnG,QADA,EAAe,iBAAiB,UAAU,EAAc,QAC3C,EAAe,oBAAoB,UAAU,EAAc"}
+{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import React, {useState, useMemo, useEffect, createContext, HTMLAttributes, PropsWithChildren} from 'react'\n\nexport enum ColorModesEnum {\n  LIGHT = 'light',\n  DARK = 'dark',\n  AUTO = 'auto',\n}\n\nexport type ColorMode = `${ColorModesEnum}`\n\nexport type ThemeContextProps = {\n  /*\n   * The active color mode of the parent ThemeProvider.\n   */\n  colorMode: ColorMode\n\n  /*\n   * List of available color modes.\n   */\n  availableColorModes: ColorModesEnum[]\n}\n\nexport type ThemeProviderProps = {\n  colorMode?: ColorMode\n} & HTMLAttributes<HTMLDivElement>\n\nconst defaultMode = ColorModesEnum.LIGHT\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  colorMode: defaultMode,\n  availableColorModes: Object.values(ColorModesEnum),\n})\n\n/**\n * ThemeProvider is used to provide theme-related context to its child components.\n */\nexport function ThemeProvider({colorMode = defaultMode, children, ...rest}: PropsWithChildren<ThemeProviderProps>) {\n  const [activeMode, setActiveMode] = useState(colorMode)\n  const availableColorModes = useMemo(() => Object.values(ColorModesEnum), [])\n\n  useEffect(() => {\n    if (colorMode === ColorModesEnum.AUTO) {\n      setActiveMode(getActiveAutoMode())\n    } else if (activeMode !== colorMode) {\n      setActiveMode(colorMode)\n    }\n\n    return handleSystemPreferenceChange(setActiveMode)\n  }, [colorMode, activeMode, setActiveMode])\n\n  return (\n    <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>\n      <div data-color-mode={activeMode} {...rest}>\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n\nconst queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)\n\nconst getActiveAutoMode = () => {\n  const mediaQueryList: MediaQueryList = queryBrowserPreference()\n  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT\n}\n\nconst handleSystemPreferenceChange = callback => {\n  const mediaQueryList = queryBrowserPreference()\n  const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)\n  mediaQueryList.addEventListener('change', changeHandler)\n  return () => mediaQueryList.removeEventListener('change', changeHandler)\n}\n"],"mappings":";;;AAEA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,OAAA,QACA,EAAA,OAAA;AACF,EAAA,CAAA,CAAA,GAoBM,IAAA,SAEO,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,CAAc;AACnD,CAAC;AAKD,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,GAAY,KAAiB,EAAS,CAAS,GAChD,IAAsB,QAAc,OAAO,OAAO,CAAc,GAAG,CAAC,CAAC;CAY3E,OAVA,SACM,MAAA,SACF,EAAc,EAAkB,CAAC,IACxB,MAAe,KACxB,EAAc,CAAS,GAGlB,EAA6B,CAAa,IAChD;EAAC;EAAW;EAAY;CAAa,CAAC,GAGvC,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;EAAmB;YACvE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,IAAM,UAA+B,OAAO,WAAW,8BAAgD,GAEjG,UACmC,EAChC,CAAA,CAAe,UAAA,SAAA,SAGlB,KAA+B,MAAY;CAC/C,IAAM,IAAiB,EAAuB,GACxC,KAAgB,MAAS,EAAS,EAAM,UAAA,SAAA,OAAoD;CAElG,OADA,EAAe,iBAAiB,UAAU,CAAa,SAC1C,EAAe,oBAAoB,UAAU,CAAa;AACzE"}

package/esm/ThemeProvider/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","names":[],"sources":["../../src/ThemeProvider/useTheme.ts"],"sourcesContent":["import {useContext} from 'react'\nimport {ThemeContext} from './ThemeProvider'\n\nexport const useTheme = () => useContext(ThemeContext)\n"],"mappings":";;;AAGA,IAAa,UAAiB,EAAW,EAAa"}
+{"version":3,"file":"useTheme.js","names":[],"sources":["../../src/ThemeProvider/useTheme.ts"],"sourcesContent":["import {useContext} from 'react'\nimport {ThemeContext} from './ThemeProvider'\n\nexport const useTheme = () => useContext(ThemeContext)\n"],"mappings":";;;AAGA,IAAa,UAAiB,EAAW,CAAY"}

package/esm/Tiles/Tiles.js

@@ -1,6 +1,6 @@
-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 { ArrowUpRightIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { ArrowUpRightIcon as n } from "../node_modules/@primer/octicons-react/dist/icons/ArrowUpRightIcon.js";
 import r from "../component-helpers/shared.module.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';/* empty css                                                                                                   */
 import i from "./Tiles.module.js";

package/esm/Tiles/Tiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport gridlineStyles from '../component-helpers/shared.module.css'\nimport {Text} from '../Text'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            variant === 'gridlines' && gridlineStyles.gridline,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAMK,IAAe,EAA2B,UAAU,EAkBpD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MAGE,kBAAC,EAAa,UAAd;CAAuB,OAAO;WAC5B,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,MAAY,eAAe,EAAe,UAC1C,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;GACE,CAAA;EACD,CAAA;CACgB,CAAA,CAG7B,EAoBK,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,EAAa,EACjC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;GACI,CAAA,EACP,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,kBAAkB;aAArF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;IACI,CAAA,EACN,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;IAAS,CAAA,CAC9F;KACF;;AAGT,QACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;GACC,CAAA,GAEJ;EAEC,CAAA;EAGV,EAMY,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;CACD,CAAC"}
+{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport gridlineStyles from '../component-helpers/shared.module.css'\nimport {Text} from '../Text'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            variant === 'gridlines' && gridlineStyles.gridline,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAMM,IAAe,EAA2B,SAAS,GAkBnD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MAGE,kBAAC,EAAa,UAAd;CAAuB,OAAO;WAC5B,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,MAAY,eAAe,EAAe,UAC1C,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;EACC,CAAA;CACD,CAAA;AACgB,CAAA,CAG7B,GAoBM,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,CAAY,GAChC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;EACG,CAAA,GACN,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,iBAAiB;aAApF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;GACG,CAAA,GACL,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;GAAQ,CAAA,CAC9F;IACF;;CAGR,OACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;EACA,CAAA,IAEH;CAEA,CAAA;AAER,CACF,GAMa,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;AACF,CAAC"}

package/esm/Tiles/Tiles.module.js

@@ -1,5 +1,6 @@
-import './Tiles.module-BzHaDJV8.css';var e = {
-	Tiles: "Primer_Brand__Tiles-module__Tiles___RhWBm",
+import './Tiles.module-BzHaDJV8.css';//#region src/Tiles/Tiles.module.css
+var e = "Primer_Brand__Tiles-module__Tiles___RhWBm", t = {
+	Tiles: e,
 	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
 	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
 	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",
@@ -13,6 +14,6 @@ import './Tiles.module-BzHaDJV8.css';var e = {
 	"Tiles-item-icon": "Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M"
 };
 //#endregion
-export { e as default };
+export { e as Tiles, t as default };
 
 //# sourceMappingURL=Tiles.module.js.map