npm - @primer/react-brand - Versions diffs - 0.74.0-rc.ffd69649 → 0.74.0 - Mend

@primer/react-brand 0.74.0-rc.ffd69649 → 0.74.0

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

Files changed (466) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MinimalFooter.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {LogoGithubIcon} from '@primer/octicons-react'\n\nimport {ColorModesEnum, Stack, Text, useTheme} from '../'\nimport {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css'\n\n/\n Main Stylesheet (as a CSS Module)\n /\nimport styles from './MinimalFooter.module.css'\n\nconst socialLinkData = {\n x: {\n fullName: 'X',\n url: 'https://x.com/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/x.svg',\n iconWidth: 20,\n iconHeight: 16,\n },\n github: {\n fullName: 'GitHub',\n url: 'https://github.com/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg',\n iconWidth: 20,\n iconHeight: 20,\n },\n linkedin: {\n fullName: 'LinkedIn',\n url: 'https://www.linkedin.com/company/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/linkedin.svg',\n iconWidth: 19,\n iconHeight: 18,\n },\n youtube: {\n fullName: 'YouTube',\n url: 'https://www.youtube.com/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/youtube.svg',\n iconWidth: 23,\n iconHeight: 16,\n },\n facebook: {\n fullName: 'Facebook',\n url: 'https://www.facebook.com/GitHub',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/facebook.svg',\n iconWidth: 18,\n iconHeight: 18,\n },\n twitch: {\n fullName: 'Twitch',\n url: 'https://www.twitch.tv/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/twitch.svg',\n iconWidth: 18,\n iconHeight: 18,\n },\n tiktok: {\n fullName: 'TikTok',\n url: 'https://www.tiktok.com/@github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/tiktok.svg',\n iconWidth: 18,\n iconHeight: 18,\n },\n instagram: {\n fullName: 'Instagram',\n url: 'https://www.instagram.com/github/',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/instagram.svg',\n iconWidth: 24,\n iconHeight: 24,\n },\n} as const\n\ntype SocialLinkName = keyof typeof socialLinkData\ntype SocialLink = (typeof socialLinkData)[SocialLinkName]\n\nconst socialLinkNames = Object.keys(socialLinkData) as SocialLinkName[]\n\nexport type MinimalFooterProps = {\n /\n An array of social links to be displayed in the footer.\n /\n socialLinks?: SocialLinkName[] \| false\n /\n The href for the GitHub logo.\n /\n logoHref?: string\n /\n The copyright statement to be displayed in the footer.\n * If not provided, the copyright statement will be the default GitHub copyright statement.\n /\n copyrightStatement?: string \| React.ReactElement\n} & BaseProps<HTMLElement>\n\nfunction Root({\n className,\n children,\n copyrightStatement,\n logoHref = 'https://github.com',\n socialLinks,\n ...rest\n}: PropsWithChildren<MinimalFooterProps>) {\n // find Footer.Footnotes children\n const footerFootnoteChild = () => {\n const footnotes = React.Children.toArray(children).find(child => {\n if (!React.isValidElement(child)) {\n return false\n }\n\n if (child.type && child.type === Footnotes) {\n return true\n }\n })\n return footnotes\n }\n\n /\n Renders a maximum of 5 links.\n * If more than 5 links are required, we should encourage usage of Footer instead.\n /\n const LinkChildren = React.Children.toArray(children)\n .filter(child => {\n // if not valid element\n if (React.isValidElement(child)) {\n if (child.type === Link) {\n return child\n }\n }\n })\n .slice(0, 5)\n\n const currentYear = new Date().getFullYear()\n\n return (\n <footer className={clsx(styles.Footer, className)} {...rest}>\n {footerFootnoteChild()}\n <SocialLogomarks socialLinks={socialLinks} logoHref={logoHref} />\n <section>\n <div className={styles['Footer__legal-and-links']}>\n <div className={styles['Footer__container']}>\n <Stack\n direction={{narrow: 'vertical', regular: 'horizontal'}}\n gap=\"normal\"\n padding=\"none\"\n justifyContent=\"space-between\"\n >\n <Stack\n padding=\"none\"\n gap=\"condensed\"\n justifyContent={{\n narrow: 'center',\n regular: 'flex-end',\n }}\n direction={{\n narrow: 'vertical',\n regular: 'horizontal',\n }}\n className={styles['Footer__links']}\n >\n <>{LinkChildren}</>\n </Stack>\n <Text as=\"p\" size=\"200\" variant=\"muted\" className={styles['Footer__copyright']}>\n {copyrightStatement ? copyrightStatement : `\\u00A9 ${currentYear} GitHub. All rights reserved.`}\n </Text>\n </Stack>\n </div>\n </div>\n </section>\n </footer>\n )\n}\n\ntype FootnoteProps = BaseProps<HTMLElement>\n\nfunction Footnotes({children, className}: PropsWithChildren<FootnoteProps>) {\n const styledChildren = React.Children.map(children, child => {\n if (React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text) {\n const textChild = child as React.ReactElement<React.ComponentProps<typeof Text>>\n const overrideProps: Partial<React.ComponentProps<typeof Text>> = {\n variant: 'muted',\n size: '100',\n className: clsx(styles['Footer__terms-item'], textChild.props.className),\n }\n\n if (!textChild.props.as) {\n overrideProps.as = 'p'\n }\n\n return React.cloneElement(textChild, overrideProps)\n }\n\n return null\n })\n\n return (\n <section className={styles.Footer__container}>\n <div className={clsx(styles.Footer__terms, className)}>{styledChildren}</div>\n </section>\n )\n}\n\ntype SocialLinkProps = {name: SocialLinkName}\n\nconst SocialLink = ({name}: SocialLinkProps) => {\n const link = socialLinkData[name]\n return (\n <li key={name}>\n <a\n href={link.url}\n className={styles['Footer__social-link']}\n data-analytics-event={`{\"category\":\"Footer\",\"action\":\"go to ${link.fullName}\",\"label\":\"text:${name}\"}`}\n >\n <img\n className={styles['Footer__social-icon']}\n src={link.icon}\n height={link.iconHeight}\n width={link.iconWidth}\n loading=\"lazy\"\n decoding=\"async\"\n alt=\"\"\n />\n <span className=\"visually-hidden\">GitHub on {link.fullName}</span>\n </a>\n </li>\n )\n}\n\ntype SocialLogomarksProps = {\n socialLinks?: SocialLinkName[] \| false\n logoHref?: string\n}\n\nfunction SocialLogomarks({socialLinks = socialLinkNames, logoHref}: SocialLogomarksProps) {\n const {colorMode} = useTheme()\n\n return (\n <section className={clsx(styles['Footer__logomarks'])}>\n <div className={styles['Footer__container']}>\n <Stack\n alignItems=\"center\"\n direction={{narrow: 'vertical', regular: 'horizontal'}}\n gap=\"normal\"\n padding=\"none\"\n justifyContent=\"space-between\"\n >\n <div>\n <a\n href={logoHref}\n data-analytics-event='{\"category\":\"Footer\",\"action\":\"go to home\",\"label\":\"text:home\"}'\n aria-label=\"GitHub\"\n >\n <LogoGithubIcon fill={colorMode === ColorModesEnum.DARK ? 'white' : 'black'} size=\"medium\" />\n </a>\n </div>\n {socialLinks ? (\n <ul className={styles['Footer__social-links']}>\n {socialLinks.map(name => (\n <SocialLink key={name} name={name} />\n ))}\n </ul>\n ) : null}\n </Stack>\n </div>\n </section>\n )\n}\n\ntype LinkProps<C extends React.ElementType> = BaseProps<C> & {as?: 'a' \| 'button'} & Omit<\n React.ComponentPropsWithoutRef<C>,\n keyof C\n >\n\nconst Link = <C extends React.ElementType = 'a'>({as, children, ...rest}: PropsWithChildren<LinkProps<C>>) => {\n const Component = as \|\| 'a'\n return (\n <Component\n className={styles['Footer__link']}\n data-analytics-event={\n rest['href'] ? `{\"category\":\"Footer\",\"action\":\"go to ${rest['href']}\",\"label\":\"text:${children}\"}` : undefined\n }\n {...rest}\n >\n <Text variant=\"muted\" size=\"200\">\n {children}\n </Text>\n </Component>\n )\n}\n\n/\n Use MinimalFooter to render a global footer on all GitHub pages.\n * @see https://primer.style/brand/components/MinimalFooter\n */\nexport const MinimalFooter = Object.assign(Root, {\n Footnotes,\n Link,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"MinimalFooter.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {ArrowUpIcon, MarkGithubIcon} from '@primer/octicons-react'\n\nimport {Text} from '../'\nimport {BaseProps} from '../component-helpers'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/base.css'\n\n/\n Main Stylesheet (as a CSS Module)\n /\nimport styles from './MinimalFooter.module.css'\n\nconst socialLinkData = {\n x: {\n fullName: 'X',\n url: 'https://x.com/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/x.svg',\n iconWidth: 20,\n iconHeight: 16,\n },\n github: {\n fullName: 'GitHub',\n url: 'https://github.com/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg',\n iconWidth: 20,\n iconHeight: 20,\n },\n linkedin: {\n fullName: 'LinkedIn',\n url: 'https://www.linkedin.com/company/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/linkedin.svg',\n iconWidth: 19,\n iconHeight: 18,\n },\n youtube: {\n fullName: 'YouTube',\n url: 'https://www.youtube.com/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/youtube.svg',\n iconWidth: 23,\n iconHeight: 16,\n },\n facebook: {\n fullName: 'Facebook',\n url: 'https://www.facebook.com/GitHub',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/facebook.svg',\n iconWidth: 18,\n iconHeight: 18,\n },\n twitch: {\n fullName: 'Twitch',\n url: 'https://www.twitch.tv/github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/twitch.svg',\n iconWidth: 18,\n iconHeight: 18,\n },\n tiktok: {\n fullName: 'TikTok',\n url: 'https://www.tiktok.com/@github',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/tiktok.svg',\n iconWidth: 18,\n iconHeight: 18,\n },\n instagram: {\n fullName: 'Instagram',\n url: 'https://www.instagram.com/github/',\n icon: 'https://github.githubassets.com/images/modules/site/icons/footer/instagram.svg',\n iconWidth: 24,\n iconHeight: 24,\n },\n} as const\n\ntype SocialLinkName = keyof typeof socialLinkData\nconst socialLinkNames = Object.keys(socialLinkData) as SocialLinkName[]\n\nexport type MinimalFooterProps = {\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n centerComponent?: React.ReactElement\n /\n An array of social links to be displayed in the footer.\n /\n socialLinks?: SocialLinkName[] \| false\n /\n The href for the GitHub logo.\n /\n logoHref?: string\n /\n The copyright statement to be displayed in the footer.\n * If not provided, the copyright statement will be the default GitHub copyright statement.\n /\n copyrightStatement?: string \| React.ReactElement\n} & BaseProps<HTMLElement>\n\nfunction Root({\n centerComponent,\n className,\n children,\n copyrightStatement,\n logoHref = 'https://github.com',\n socialLinks,\n ...rest\n}: PropsWithChildren<MinimalFooterProps>) {\n let footnotes: React.ReactElement \| undefined\n let backToTop: React.ReactElement \| undefined\n const links: React.ReactElement[] = []\n\n for (const child of React.Children.toArray(children)) {\n if (!React.isValidElement(child)) {\n continue\n }\n\n if (child.type === Footnotes) {\n footnotes ??= child\n } else if (child.type === BackToTop) {\n backToTop ??= child\n } else if (child.type === Link && links.length < 5) {\n links.push(child)\n }\n }\n\n const currentYear = new Date().getFullYear()\n const resolvedSocialLinks = socialLinks === undefined ? socialLinkNames : socialLinks\n const renderedSocialLinks = resolvedSocialLinks === false ? [] : resolvedSocialLinks\n const hasSocialLinks = renderedSocialLinks.length > 0\n const hasLinks = links.length > 0\n const renderedLinks = hasLinks ? <div className={styles.MinimalFooter__links}>{links}</div> : null\n const copyright = (\n <Text\n as=\"p\"\n size=\"100\"\n font=\"monospace\"\n weight={{narrow: 'medium', wide: 'normal'}}\n variant=\"muted\"\n className={clsx(styles.MinimalFooter__copyright, styles.MinimalFooter__metaText)}\n >\n {copyrightStatement ? copyrightStatement : `\\u00A9 ${currentYear} GitHub. All rights reserved.`}\n </Text>\n )\n\n return (\n <footer\n className={clsx(styles.MinimalFooter, footnotes && styles['MinimalFooter--withFootnotes'], className)}\n {...rest}\n >\n {footnotes}\n <div className={styles.MinimalFooter__section}>\n <section className={styles.MinimalFooter__top}>\n <div className={styles.MinimalFooter__container}>\n <div className={styles['MinimalFooter__top-row']}>\n <LogoLink logoHref={logoHref} />\n {hasLinks \|\| backToTop ? (\n <div className={styles['MinimalFooter__top-actions']}>\n {backToTop}\n {renderedLinks}\n </div>\n ) : null}\n </div>\n </div>\n </section>\n </div>\n {centerComponent ? (\n <div className={clsx(styles.MinimalFooter__section, styles['MinimalFooter__section--center'])}>\n <section className={styles.MinimalFooter__container}>{centerComponent}</section>\n </div>\n ) : null}\n <div className={clsx(styles.MinimalFooter__section, styles['MinimalFooter__section--bottom'])}>\n <section className={styles.MinimalFooter__bottom}>\n <div className={styles.MinimalFooter__container}>\n <div className={styles['MinimalFooter__bottom-row']}>\n {copyright}\n {hasSocialLinks ? <SocialLinks socialLinks={renderedSocialLinks} /> : null}\n </div>\n </div>\n </section>\n </div>\n </footer>\n )\n}\n\ntype FootnoteProps = BaseProps<HTMLElement>\n\nfunction Footnotes({children, className}: PropsWithChildren<FootnoteProps>) {\n const styledChildren = React.Children.map(children, child => {\n if (React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text) {\n const textChild = child as React.ReactElement<React.ComponentProps<typeof Text>>\n const overrideProps: Partial<React.ComponentProps<typeof Text>> = {\n variant: 'muted',\n size: '100',\n className: clsx(styles['MinimalFooter__terms-item'], textChild.props.className),\n }\n\n if (!textChild.props.as) {\n overrideProps.as = 'p'\n }\n\n return React.cloneElement(textChild, overrideProps)\n }\n\n return null\n })\n\n return (\n <div className={clsx(styles.MinimalFooter__section, styles['MinimalFooter__section--footnotes'])}>\n <section className={styles.MinimalFooter__container}>\n <div className={clsx(styles.MinimalFooter__terms, className)}>{styledChildren}</div>\n </section>\n </div>\n )\n}\n\ntype SocialLinkProps = {name: SocialLinkName}\n\nconst SocialLink = ({name}: SocialLinkProps) => {\n const link = socialLinkData[name]\n return (\n <li>\n <a\n href={link.url}\n className={styles['MinimalFooter__social-link']}\n data-analytics-event={`{\"category\":\"Footer\",\"action\":\"go to ${link.fullName}\",\"label\":\"text:${name}\"}`}\n >\n <img\n className={styles['MinimalFooter__social-icon']}\n src={link.icon}\n height={link.iconHeight}\n width={link.iconWidth}\n loading=\"lazy\"\n decoding=\"async\"\n alt=\"\"\n />\n <span className=\"visually-hidden\">GitHub on {link.fullName}</span>\n </a>\n </li>\n )\n}\n\nfunction LogoLink({logoHref}: {logoHref?: string}) {\n return (\n <a\n href={logoHref}\n className={styles.MinimalFooter__logo}\n data-analytics-event='{\"category\":\"Footer\",\"action\":\"go to home\",\"label\":\"text:home\"}'\n aria-label=\"GitHub\"\n >\n <MarkGithubIcon size={24} />\n </a>\n )\n}\n\nfunction SocialLinks({socialLinks}: {socialLinks: SocialLinkName[]}) {\n return (\n <ul className={styles['MinimalFooter__social-links']}>\n {socialLinks.map(name => (\n <SocialLink key={name} name={name} />\n ))}\n </ul>\n )\n}\n\ntype LinkProps<C extends React.ElementType> = BaseProps<C> & {as?: 'a' \| 'button'} & Omit<\n React.ComponentPropsWithoutRef<C>,\n keyof C\n >\n\nconst Link = <C extends React.ElementType = 'a'>({as, children, ...rest}: PropsWithChildren<LinkProps<C>>) => {\n const Component = as \|\| 'a'\n return (\n <Component\n className={styles.MinimalFooter__link}\n data-analytics-event={\n rest['href'] ? `{\"category\":\"Footer\",\"action\":\"go to ${rest['href']}\",\"label\":\"text:${children}\"}` : undefined\n }\n {...rest}\n >\n <Text\n variant=\"muted\"\n size=\"100\"\n font=\"monospace\"\n weight={{narrow: 'medium', wide: 'normal'}}\n className={styles.MinimalFooter__metaText}\n >\n {children}\n </Text>\n </Component>\n )\n}\n\nexport type MinimalFooterBackToTopProps = {\n /\n The visible and accessible label.\n /\n children: React.ReactNode\n /\n The ID of the semantic top-of-page element that receives focus after keyboard activation.\n * Defaults to the first `<main>` element, then falls back to `<body>`.\n /\n focusTargetId?: string\n /\n Runs before the built-in behavior. Call `event.preventDefault()` to cancel scrolling and focus transfer.\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n} & BaseProps<HTMLButtonElement> &\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'children'>\n\n/\n Scrolls to the top and, after keyboard activation, moves focus to the configured top-of-page destination.\n /\nconst BackToTop = forwardRef<HTMLButtonElement, MinimalFooterBackToTopProps>(\n ({children, className, focusTargetId, onClick, type = 'button', ...rest}, ref) => {\n const prefersReducedMotion = useReducedMotion()\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n onClick?.(event)\n\n if (event.defaultPrevented) {\n return\n }\n\n window.scrollTo({\n top: 0,\n behavior: prefersReducedMotion ? 'instant' : 'smooth',\n })\n\n if (event.detail === 0) {\n const focusTarget = focusTargetId\n ? document.getElementById(focusTargetId)\n : document.querySelector<HTMLElement>('main') ??\n document.querySelector<HTMLElement>('body') ??\n document.documentElement\n\n if (!focusTarget) {\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-console\n console.warn(`MinimalFooter.BackToTop: No element found with id \"${focusTargetId}\".`)\n }\n return\n }\n\n const hadTabIndex = focusTarget.hasAttribute('tabindex')\n\n if (!hadTabIndex) {\n focusTarget.tabIndex = -1\n focusTarget.addEventListener('blur', () => focusTarget.removeAttribute('tabindex'), {once: true})\n }\n\n focusTarget.focus({preventScroll: true})\n }\n },\n [focusTargetId, onClick, prefersReducedMotion],\n )\n\n return (\n <button\n ref={ref}\n type={type}\n className={clsx(styles.MinimalFooter__backToTop, className)}\n onClick={handleClick}\n {...rest}\n >\n <span className={styles['MinimalFooter__backToTop-content']}>\n <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles.MinimalFooter__metaText}>\n {children}\n </Text>\n <span className={styles['MinimalFooter__backToTop-icon']} aria-hidden=\"true\">\n <ArrowUpIcon />\n </span>\n </span>\n </button>\n )\n },\n)\n\n/\n Use MinimalFooter to render a global footer on all GitHub pages.\n * @see https://primer.style/brand/components/MinimalFooter\n */\nexport const MinimalFooter = Object.assign(Root, {\n Footnotes,\n Link,\n BackToTop,\n})\n"],"mappings":"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"}

package/esm/MinimalFooter/MinimalFooter.module-CGtOtT5r.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65{border-top:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-footer-bg-color);position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter--withFootnotes___oUvH8{border-top:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{max-width:1280px;max-width:var(--brand-footer-max-width,1280px);padding-inline:var(--base-size-20);margin-left:auto;margin-right:auto}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-inline:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms___gwB2R{padding:var(--base-size-48) 0}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx{margin-bottom:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx sup{font-size:var(--base-size-12);vertical-align:super;margin-right:var(--base-size-4);display:inline-block}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx:last-child{margin-bottom:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-48);padding-bottom:var(--base-size-32);border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{grid-gap:var(--base-size-24);align-items:center;gap:var(--base-size-24);grid-template-columns:auto 1fr;display:grid}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{display:contents}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{grid-area:2/1/auto/-1;justify-content:flex-start}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{grid-area:1/2;justify-self:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw{color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom___oi9Jk{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{justify-content:space-between;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{justify-content:flex-end;align-items:center;gap:var(--base-size-20);flex-wrap:wrap;flex:1;min-width:0;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{justify-content:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-32);height:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__section___W7x7a{min-width:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--footnotes___9t40F{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-color-canvas-default)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia>.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia+.Primer_Brand__MinimalFooter-module__MinimalFooter__section--bottom___HwSJJ{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{justify-content:flex-start;align-items:center;gap:var(--base-size-16);margin:0;padding:0;list-style:none;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0{min-width:var(--base-size-24);min-height:var(--base-size-24);justify-content:center;align-items:center;display:flex;position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:hover .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK,.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:focus-visible .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{filter:var(--brand-footer-socialIcon-hoverFilter)}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{width:auto;height:auto;max-height:var(--base-size-20);filter:var(--brand-footer-socialIcon-restFilter);display:block}.Primer_Brand__MinimalFooter-module__MinimalFooter__copyright___qQ3QR{text-transform:uppercase;margin:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__metaText___peNSx{font-size:var(--base-size-12)}.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{align-items:center;gap:var(--base-size-20);flex-wrap:wrap;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3{color:var(--brand-color-text-muted);cursor:pointer;text-transform:uppercase;background-color:#0000;border:0;align-self:center;padding:0;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3:hover{-webkit-text-decoration:underline;text-decoration:underline}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{gap:var(--base-size-20)}}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{flex-direction:row;justify-content:space-between;align-items:center}}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{appearance:none;color:var(--brand-color-text-default);cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:disabled,.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit[aria-disabled=true]{cursor:not-allowed}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-content___umaLY{align-items:center;gap:var(--base-size-12);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border:var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);border-radius:var(--base-size-6);background-color:var(--brand-footer-backToTop-bgColor-rest);min-width:var(--brand-footer-backToTop-minTarget);min-height:var(--brand-footer-backToTop-minTarget);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):hover .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-hover);background-color:var(--brand-footer-backToTop-bgColor-hover)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):active .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-active);background-color:var(--brand-footer-backToTop-bgColor-active)}@media (prefers-reduced-motion:reduce){.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:before,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:after,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

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

@@ -1,16 +1,29 @@
-import './MinimalFooter.module-Cl2g38SO.css';var e = {
-	Footer: "Primer_Brand__MinimalFooter-module__Footer___N646_",
-	Footer__container: "Primer_Brand__MinimalFooter-module__Footer__container___YiFAB",
-	Footer__terms: "Primer_Brand__MinimalFooter-module__Footer__terms___0JWoT",
-	"Footer__terms-item": "Primer_Brand__MinimalFooter-module__Footer__terms-item___G5hh9",
-	"Footer__social-links": "Primer_Brand__MinimalFooter-module__Footer__social-links___VWTjM",
-	Footer__logomarks: "Primer_Brand__MinimalFooter-module__Footer__logomarks___Sak80",
-	"Footer__legal-and-links": "Primer_Brand__MinimalFooter-module__Footer__legal-and-links___2FEd5",
-	"Footer__social-link": "Primer_Brand__MinimalFooter-module__Footer__social-link___eXQoF",
-	"Footer__social-icon": "Primer_Brand__MinimalFooter-module__Footer__social-icon___nEyso",
-	Footer__copyright: "Primer_Brand__MinimalFooter-module__Footer__copyright___M5PJu",
-	Footer__links: "Primer_Brand__MinimalFooter-module__Footer__links___7RcTo",
-	Footer__link: "Primer_Brand__MinimalFooter-module__Footer__link___lYG6f"
+import './MinimalFooter.module-CGtOtT5r.css';var e = {
+	MinimalFooter: "Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65",
+	"MinimalFooter--withFootnotes": "Primer_Brand__MinimalFooter-module__MinimalFooter--withFootnotes___oUvH8",
+	MinimalFooter__container: "Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8",
+	MinimalFooter__terms: "Primer_Brand__MinimalFooter-module__MinimalFooter__terms___gwB2R",
+	"MinimalFooter__terms-item": "Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx",
+	MinimalFooter__top: "Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ",
+	"MinimalFooter__top-row": "Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L",
+	"MinimalFooter__top-actions": "Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd",
+	MinimalFooter__links: "Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2",
+	MinimalFooter__backToTop: "Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit",
+	MinimalFooter__logo: "Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw",
+	MinimalFooter__bottom: "Primer_Brand__MinimalFooter-module__MinimalFooter__bottom___oi9Jk",
+	MinimalFooter__section: "Primer_Brand__MinimalFooter-module__MinimalFooter__section___W7x7a",
+	"MinimalFooter__section--footnotes": "Primer_Brand__MinimalFooter-module__MinimalFooter__section--footnotes___9t40F",
+	"MinimalFooter__section--center": "Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia",
+	"MinimalFooter__section--bottom": "Primer_Brand__MinimalFooter-module__MinimalFooter__section--bottom___HwSJJ",
+	"MinimalFooter__bottom-row": "Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck",
+	"MinimalFooter__social-links": "Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs",
+	"MinimalFooter__social-link": "Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0",
+	"MinimalFooter__social-icon": "Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK",
+	MinimalFooter__copyright: "Primer_Brand__MinimalFooter-module__MinimalFooter__copyright___qQ3QR",
+	MinimalFooter__metaText: "Primer_Brand__MinimalFooter-module__MinimalFooter__metaText___peNSx",
+	MinimalFooter__link: "Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3",
+	"MinimalFooter__backToTop-content": "Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-content___umaLY",
+	"MinimalFooter__backToTop-icon": "Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ"
 };
 //#endregion
 export { e as default };

package/esm/MinimalFooter/MinimalFooter.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MinimalFooter.module.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.module.css"],"sourcesContent":[".~~Footer~~ {\n position: relative;\n background-color: var(--brand-footer-bg-color);\n}\n\n/*\n ~~Footer~~ shared styles\n /\n.~~Footer__container~~ {\n max-width: var(--brand-footer-max-width, 1280px);\n padding: ~~0 28px; / should match SubdomainNavBar /\~~n margin-right: auto;\n margin-left: auto;\n}\n\n/\n ~~Footer~~ terms section\n /\n.~~Footer__terms~~ {\n padding: var(--base-size-48) 0;\n}\n\n.~~Footer__terms~~-item {\n margin-bottom: var(--base-size-24);\n}\n\n.~~Footer__terms~~-item sup {\n font-size: var(--base-size-12);\n vertical-align: super;\n display: inline-block;\n margin-right: var(--base-size-4);\n}\n\n.~~Footer__terms~~-item:last-child {\n margin-bottom: 0;\n}\n\n/\n ~~Footer~~ ~~social~~ ~~and logomarks~~ section\n /\n.~~Footer__social~~-~~links~~ {\n display: ~~flex~~;\n ~~padding~~: 0;\n ~~margin~~: 0;\n ~~list~~-~~style~~: ~~none~~;\n justify-content: flex-start;\n ~~align~~-~~items~~: ~~center~~;\n ~~gap~~: var(--base-size-16);\n}\n\n.~~Footer__logomarks~~ {\n ~~border~~-top: var(--~~brand~~-~~borderWidth~~-~~thin~~) ~~solid~~ var(--~~brand~~-~~color~~-~~border~~-~~default~~);\n border-bottom: var(--brand-borderWidth-~~thin~~) solid var(--brand-color-~~border~~-default);\n}\n\n.~~Footer__logomarks,\n~~.~~Footer__legal-and-links~~ {\n padding-top: var(--base-size-48);\n padding-bottom: var(--base-size-48);\n}\n\n.~~Footer__social~~-~~link~~ {\n ~~position~~: ~~relative~~;\n}\n\n.~~Footer__social~~-~~link::before~~ {\n ~~content~~: '';\n display: ~~block~~;\n position: ~~absolute~~;\n min-width: var(--base-size-24);\n min-height: var(--base-size-24);\n}\n\n.~~Footer__social~~-link:hover .~~Footer__social~~-icon,\n.~~Footer__social~~-link:focus-visible .~~Footer__social~~-icon {\n filter: var(--brand-footer-socialIcon-hoverFilter);\n}\n\n.~~Footer__social~~-icon {\n display: block;\n width: ~~24px~~;\n height: auto;\n}\n\n~~[data-color-mode='light']~~ .~~Footer__social-icon~~ {\n ~~filter~~: ~~brightness(95%)~~ ~~saturate(100%)~~;\n}\n\n~~/\n~~ ~~Footer~~ ~~legal~~ ~~section~~\n /\n\n.~~Footer__copyright~~ {\n display: flex;\n ~~order~~: 2;\n ~~padding~~-~~bottom~~: var(--base-size-4);\n}\n\n~~@media~~ ~~screen~~ ~~and~~ (~~min~~-~~width~~: ~~48rem)~~ {\n ~~.Footer__copyright~~ {\n ~~order~~: 1;\n }\n}\n\n.~~Footer__links~~ {\n ~~order~~: 1;\n}\n\n@media screen and (min-width: 48rem) {\n .~~Footer__links~~ {\n ~~order~~: 2;\n }\n}\n\n.~~Footer__link~~ {\n align-~~self~~: ~~flex~~-~~start~~;\n color: var(--brand-color-text-~~muted~~);\n ~~text-decoration~~: none;\n ~~border~~-~~top~~: ~~none~~;\n ~~border~~-~~right~~: ~~none~~;\n ~~border~~-~~left~~: ~~none~~;\n ~~border~~-~~bottom~~: var(--brand-borderWidth-thin) solid ~~transparent~~;\n background-color: ~~inherit~~;\n ~~cursor~~: ~~pointer~~;\n ~~padding~~: ~~0 0~~ var(--~~base~~-~~size~~-4) 0;\n transition: border var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.~~Footer__link~~:hover {\n color: var(--brand-color-~~text~~-~~default~~);\n border-~~bottom-~~color: var(--brand-~~color~~-~~text~~-~~muted~~);\n ~~text~~-~~decoration~~: ~~none~~;\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .~~Footer~~,\n .~~Footer~~::before,\n .~~Footer~~::after,\n .~~Footer~~ {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"MinimalFooter.module.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.module.css"],"sourcesContent":[".MinimalFooter {\n position: relative;\n border-top: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n background-color: var(--brand-footer-bg-color);\n}\n\n.MinimalFooter--withFootnotes {\n border-top: 0;\n}\n\n/*\n MinimalFooter shared styles\n /\n.MinimalFooter__container {\n max-width: var(--brand-footer-max-width, 1280px);\n padding-inline: var(--base-size-20);\n margin-right: auto;\n margin-left: auto;\n}\n\n@media screen and (min-width: 48rem) {\n .MinimalFooter__container {\n padding-inline: var(--base-size-32);\n }\n}\n\n/\n MinimalFooter terms section\n /\n.MinimalFooter__terms {\n padding: var(--base-size-48) 0;\n}\n\n.MinimalFooter__terms-item {\n margin-bottom: var(--base-size-24);\n}\n\n.MinimalFooter__terms-item sup {\n font-size: var(--base-size-12);\n vertical-align: super;\n display: inline-block;\n margin-right: var(--base-size-4);\n}\n\n.MinimalFooter__terms-item:last-child {\n margin-bottom: 0;\n}\n\n/\n MinimalFooter top section\n /\n.MinimalFooter__top {\n padding-top: var(--base-size-48);\n padding-bottom: var(--base-size-32);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.MinimalFooter__top-row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: var(--base-size-24);\n}\n\n.MinimalFooter__top-actions {\n display: contents;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__links {\n grid-column: 1 / -1;\n grid-row: 2;\n justify-content: flex-start;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__backToTop {\n grid-column: 2;\n grid-row: 1;\n justify-self: flex-end;\n}\n\n.MinimalFooter__logo {\n display: inline-flex;\n color: var(--brand-color-text-default);\n}\n\n.MinimalFooter__logo > svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.MinimalFooter__bottom {\n padding-top: var(--base-size-32);\n padding-bottom: var(--base-size-32);\n}\n\n@media screen and (min-width: 80rem) {\n .MinimalFooter__top {\n padding-top: var(--base-size-32);\n }\n\n .MinimalFooter__top-row {\n display: flex;\n justify-content: space-between;\n }\n\n .MinimalFooter__top-actions {\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--base-size-20);\n min-width: 0;\n }\n\n .MinimalFooter__top-actions > .MinimalFooter__links {\n justify-content: flex-end;\n }\n\n .MinimalFooter__logo > svg {\n width: var(--base-size-32);\n height: var(--base-size-32);\n }\n}\n\n.MinimalFooter__section {\n min-width: 0;\n}\n\n.MinimalFooter__section--footnotes {\n border-bottom: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n background-color: var(--brand-color-canvas-default);\n}\n\n.MinimalFooter__section--center > .MinimalFooter__container {\n padding-top: var(--base-size-32);\n padding-bottom: var(--base-size-32);\n}\n\n.MinimalFooter__section--center + .MinimalFooter__section--bottom {\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n/\n MinimalFooter bottom section\n /\n.MinimalFooter__bottom-row {\n display: flex;\n}\n\n.MinimalFooter__bottom-row {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n.MinimalFooter__social-links {\n display: flex;\n padding: 0;\n margin: 0;\n list-style: none;\n justify-content: flex-start;\n align-items: center;\n gap: var(--base-size-16);\n}\n\n.MinimalFooter__social-link {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--base-size-24);\n min-height: var(--base-size-24);\n}\n\n.MinimalFooter__social-link:hover .MinimalFooter__social-icon,\n.MinimalFooter__social-link:focus-visible .MinimalFooter__social-icon {\n filter: var(--brand-footer-socialIcon-hoverFilter);\n}\n\n.MinimalFooter__social-icon {\n display: block;\n width: auto;\n height: auto;\n max-height: var(--base-size-20);\n filter: var(--brand-footer-socialIcon-restFilter);\n}\n\n.MinimalFooter__copyright {\n margin: 0;\n text-transform: uppercase;\n}\n\n/ Keep the size-100 text rhythm, but use the approved 12px size token for footer chrome. /\n.MinimalFooter__metaText {\n font-size: var(--base-size-12);\n}\n\n.MinimalFooter__links {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--base-size-20);\n}\n\n.MinimalFooter__link {\n align-self: center;\n color: var(--brand-color-text-muted);\n text-decoration: none;\n border: 0;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n text-transform: uppercase;\n}\n\n.MinimalFooter__link:hover {\n text-decoration: underline;\n}\n\n@media screen and (min-width: 48rem) {\n .MinimalFooter__social-links {\n gap: var(--base-size-20);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .MinimalFooter__bottom-row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n}\n\n.MinimalFooter__backToTop {\n appearance: none;\n display: inline-flex;\n padding: 0;\n border: 0;\n color: var(--brand-color-text-default);\n background: none;\n cursor: pointer;\n}\n\n.MinimalFooter__backToTop:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.MinimalFooter__backToTop:disabled,\n.MinimalFooter__backToTop[aria-disabled='true'] {\n cursor: not-allowed;\n}\n\n.MinimalFooter__backToTop-content {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-12);\n}\n\n.MinimalFooter__backToTop-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);\n border-radius: var(--base-size-6);\n background-color: var(--brand-footer-backToTop-bgColor-rest);\n min-width: var(--brand-footer-backToTop-minTarget);\n min-height: var(--brand-footer-backToTop-minTarget);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):hover .MinimalFooter__backToTop-icon {\n border-color: var(--brand-footer-backToTop-borderColor-hover);\n background-color: var(--brand-footer-backToTop-bgColor-hover);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):active .MinimalFooter__backToTop-icon {\n border-color: var(--brand-footer-backToTop-borderColor-active);\n background-color: var(--brand-footer-backToTop-bgColor-active);\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .MinimalFooter,\n .MinimalFooter::before,\n .MinimalFooter::after,\n .MinimalFooter {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

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

@@ -43,7 +43,7 @@ type PillarLinkProps = {
 } & Omit<LinkProps, 'size' | 'direction'> & BaseProps<HTMLAnchorElement>;
 /**
  * Pillar component:
- * {@link https://primer.style/brand/components/Pillar/ See usage examples}.
+ * @see https://primer.style/brand/components/Pillar
  */
 export declare const Pillar: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PillarProps<"div">>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Icon: typeof PillarIcon;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/*\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n /\n The HTML element used to render the Pillar.\n /\n as?: C \| 'div' \| 'article'\n /\n Aligns the pillar content\n /\n align?: 'start' \| 'center'\n /\n Enables optional border around the pillar content\n /\n hasBorder?: boolean\n /\n Allows the pillar to fill the width of its parent container.\n /\n fullWidth?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n (\n {\n children,\n className,\n animate,\n as = 'div',\n align = 'start',\n style,\n hasBorder = false,\n fullWidth = false,\n ...rest\n }: PropsWithChildren<PillarProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const filteredChildren = React.Children.toArray(children).filter(child => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (\n child.type === PillarImage \|\|\n child.type === PillarIcon \|\|\n child.type === PillarHeading \|\|\n child.type === PillarDescription \|\|\n child.type === PillarLink\n ) {\n return true\n }\n }\n return false\n })\n\n const validElements = ['div', 'article']\n const Component = validElements.includes(as) ? as : 'div'\n\n return (\n <Component\n className={clsx(\n styles.Pillar,\n styles[`Pillar--align-${align}`],\n hasBorder && styles['Pillar--has-border'],\n !fullWidth && styles['Pillar--has-max-width'],\n animationClasses,\n className,\n )}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n style={{...animationInlineStyles, ...style}}\n >\n {filteredChildren}\n </Component>\n )\n },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n return (\n <div className={styles.Pillar__image}>\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> \| React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' \| 'color'> & {\n icon: IconElement \| IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n if (!hasBackground) {\n const iconWrapperProps = {\n ...(props as React.HTMLAttributes<HTMLSpanElement>),\n className: clsx(styles.Pillar__icon, className),\n }\n\n let iconWithoutBackground: React.ReactNode\n\n if (React.isValidElement<IconComponentProps>(icon)) {\n iconWithoutBackground = icon\n } else {\n const IconWithoutBackground = icon\n iconWithoutBackground = <IconWithoutBackground />\n }\n\n return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n }\n\n return (\n <Icon\n className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n color={defaultPillarIconColor}\n hasBackground\n icon={icon as IconProps['icon']}\n size={size ?? defaultPillarIconSize}\n {...props}\n />\n )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n return (\n <Heading\n size={size}\n className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n ref={ref}\n as={as}\n {...rest}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text\n variant=\"muted\"\n ref={ref}\n size=\"200\"\n as=\"p\"\n className={clsx(styles.Pillar__description, className)}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PillarLinkProps = {\n href: string\n} & Omit<LinkProps, 'size' \| 'direction'> &\n BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n return (\n <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n {children}\n </Link>\n )\n})\n\n/\n Pillar component:\n * {@~~link~~ https://primer.style/brand/components/Pillar~~/ See usage examples}.\~~n */\nexport const Pillar = Object.assign(PillarRoot, {\n Icon: PillarIcon,\n Image: PillarImage,\n Heading: PillarHeading,\n Description: PillarDescription,\n Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,IAoB/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,CAAC,KAAa,EAAO,0BACrB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}
1	+ {"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/*\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n /\n The HTML element used to render the Pillar.\n /\n as?: C \| 'div' \| 'article'\n /\n Aligns the pillar content\n /\n align?: 'start' \| 'center'\n /\n Enables optional border around the pillar content\n /\n hasBorder?: boolean\n /\n Allows the pillar to fill the width of its parent container.\n /\n fullWidth?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n (\n {\n children,\n className,\n animate,\n as = 'div',\n align = 'start',\n style,\n hasBorder = false,\n fullWidth = false,\n ...rest\n }: PropsWithChildren<PillarProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const filteredChildren = React.Children.toArray(children).filter(child => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (\n child.type === PillarImage \|\|\n child.type === PillarIcon \|\|\n child.type === PillarHeading \|\|\n child.type === PillarDescription \|\|\n child.type === PillarLink\n ) {\n return true\n }\n }\n return false\n })\n\n const validElements = ['div', 'article']\n const Component = validElements.includes(as) ? as : 'div'\n\n return (\n <Component\n className={clsx(\n styles.Pillar,\n styles[`Pillar--align-${align}`],\n hasBorder && styles['Pillar--has-border'],\n !fullWidth && styles['Pillar--has-max-width'],\n animationClasses,\n className,\n )}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n style={{...animationInlineStyles, ...style}}\n >\n {filteredChildren}\n </Component>\n )\n },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n return (\n <div className={styles.Pillar__image}>\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> \| React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' \| 'color'> & {\n icon: IconElement \| IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n if (!hasBackground) {\n const iconWrapperProps = {\n ...(props as React.HTMLAttributes<HTMLSpanElement>),\n className: clsx(styles.Pillar__icon, className),\n }\n\n let iconWithoutBackground: React.ReactNode\n\n if (React.isValidElement<IconComponentProps>(icon)) {\n iconWithoutBackground = icon\n } else {\n const IconWithoutBackground = icon\n iconWithoutBackground = <IconWithoutBackground />\n }\n\n return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n }\n\n return (\n <Icon\n className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n color={defaultPillarIconColor}\n hasBackground\n icon={icon as IconProps['icon']}\n size={size ?? defaultPillarIconSize}\n {...props}\n />\n )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n return (\n <Heading\n size={size}\n className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n ref={ref}\n as={as}\n {...rest}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text\n variant=\"muted\"\n ref={ref}\n size=\"200\"\n as=\"p\"\n className={clsx(styles.Pillar__description, className)}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PillarLinkProps = {\n href: string\n} & Omit<LinkProps, 'size' \| 'direction'> &\n BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n return (\n <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n {children}\n </Link>\n )\n})\n\n/\n Pillar component:\n * @see https://primer.style/brand/components/Pillar\n */\nexport const Pillar = Object.assign(PillarRoot, {\n Icon: PillarIcon,\n Image: PillarImage,\n Heading: PillarHeading,\n Description: PillarDescription,\n Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,IAoB/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,CAAC,KAAa,EAAO,0BACrB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}

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

@@ -63,6 +63,10 @@ type PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren<BaseProps<HT
 type PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {
     'data-testid'?: string;
     infoTooltip?: string;
+    /**
+     * Optional accessible label for the info tooltip trigger. Overrides the automatically generated label.
+     */
+    infoTooltipAriaLabel?: string;
     variant?: 'included' | 'excluded';
 } & Omit<ListItemProps, 'variant'>;
 type AsA = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PricingOptions.d.ts","sourceRoot":"","sources":["../../src/PricingOptions/PricingOptions.tsx"],"names":[],"mappings":"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~~AAgElC~~,KAAK,GAAG,GAAG;IAAC,EAAE,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,oBAAoB,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACnH,eAAe,CAAA;AAEjB,KAAK,QAAQ,GAAG;IAAC,EAAE,EAAE,QAAQ,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,oBAAoB,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GAC/G,eAAe,CAAA;AAEjB,KAAK,0BAA0B,GAAG,GAAG,GAAG,QAAQ,CAAA;AAEhD,KAAK,iCAAiC,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,GAAG;IACtF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;CACtC,CAAA;AA2DD,KAAK,6BAA6B,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,GAAG;IAClF,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAiBD,KAAK,2BAA2B,GAAG,iBAAiB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,GAAG;IACtF,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAqBD;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;~~0BAzpBc~~,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;~~CAyqB~~/D,CAAA"}
1	+ {"version":3,"file":"PricingOptions.d.ts","sourceRoot":"","sources":["../../src/PricingOptions/PricingOptions.tsx"],"names":[],"mappings":"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"}

package/esm/PricingOptions/PricingOptions.js CHANGED Viewed

@@ -260,23 +260,23 @@ var v = {
 	size: "subhead-medium",
 	...a,
 	children: t
-})), M = p(({ children: t, className: n, infoTooltip: r, leadingVisual: a, leadingVisualFill: s, variant: c = "included", "data-testid": f, ...p }, m) => {
-	let h = a ?? (c === "included" ? i : o), y = c === "included" ? "Includes" : "Does not include", b = s ?? (c === "included" ? "var(--brand-color-accent-primary)" : "var(--brand-color-text-muted)");
+})), M = p(({ children: t, className: n, infoTooltip: r, infoTooltipAriaLabel: a, leadingVisual: s, leadingVisualFill: c, variant: f = "included", "data-testid": p, ...m }, h) => {
+	let y = s ?? (f === "included" ? i : o), b = f === "included" ? "Includes" : "Does not include", x = c ?? (f === "included" ? "var(--brand-color-accent-primary)" : "var(--brand-color-text-muted)");
 	return /* @__PURE__ */ _(l.Item, {
-		className: e(d["PricingOptions__feature-list-item"], { [d["PricingOptions__feature-list-item--excluded"]]: c === "excluded" }, r && d["PricingOptions__feature-list-item--has-info"], n),
-		"data-testid": f || v.featureListItem,
-		leadingVisual: h,
-		leadingVisualAriaLabel: y,
-		leadingVisualFill: b,
-		ref: m,
-		...p,
+		className: e(d["PricingOptions__feature-list-item"], { [d["PricingOptions__feature-list-item--excluded"]]: f === "excluded" }, r && d["PricingOptions__feature-list-item--has-info"], n),
+		"data-testid": p || v.featureListItem,
+		leadingVisual: y,
+		leadingVisualAriaLabel: b,
+		leadingVisualFill: x,
+		ref: h,
+		...m,
 		children: [t, r && /* @__PURE__ */ g(u, {
 			text: r,
 			direction: "n",
 			children: /* @__PURE__ */ g("button", {
 				type: "button",
 				className: d["PricingOptions__feature-list-item-info"],
-				"aria-label": `More information about ${typeof t == "string" ? t : "this feature"}`,
+				"aria-label": a ?? `More information about ${typeof t == "string" ? t : "this feature"}`,
 				children: /* @__PURE__ */ _("svg", {
 					viewBox: "0 0 4 8",
 					fill: "none",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PricingOptions.js","names":[],"sources":["../../src/PricingOptions/PricingOptions.tsx"],"sourcesContent":["import React, {forwardRef, HTMLAttributes, PropsWithChildren, useMemo, Ref, Dispatch} from 'react'\nimport {CheckIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport type {ListItemProps} from '../list/ListItem/ListItem'\nimport type {BaseProps} from '../component-helpers'\nimport {Accordion} from '../Accordion/Accordion'\nimport {Button, type ButtonBaseProps} from '../Button'\nimport {Heading as HeadingComponent, type HeadingProps} from '../Heading'\nimport {Text} from '../Text'\nimport {Tooltip} from '../Tooltip'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {UnorderedList, type UnorderedListProps} from '../list'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './PricingOptions.module.css'\n\ntype AlignOptions = 'start' \| 'center'\n\nexport type PricingOptionsProps = {\n align?: AlignOptions\n variant?: 'default' \| 'default-gradient' \| 'cards' \| 'cards-gradient'\n ['data-testid']?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>> &\n HTMLAttributes<HTMLDivElement>\n\nconst testIds = {\n root: 'PricingOptions',\n item: 'PricingOptions__item',\n labelRow: 'PricingOptions__labels',\n heading: 'PricingOptions__heading',\n label: 'PricingOptions__label',\n description: 'PricingOptions__description',\n price: 'PricingOptions__price',\n actionsMessage: 'PricingOptions__actionsMessage',\n primaryAction: 'PricingOptions__primaryAction',\n secondaryAction: 'PricingOptions__secondaryAction',\n menuAction: 'PricingOptions__menuAction',\n featureList: 'PricingOptions__featureList',\n featureListHeading: 'PricingOptions__featureListHeading',\n featureListItem: 'PricingOptions__featureListItem',\n featureListGroupHeading: 'PricingOptions__featureListGroupHeading',\n footnote: 'PricingOptions__footnote',\n}\n\ntype PricingOptionsContextValue = {\n align: AlignOptions\n allFeatureListsExpanded: boolean\n updateFeatureListExpanded: Dispatch<boolean>\n featureListUserInteracted: boolean\n setFeatureListUserInteracted: Dispatch<boolean>\n}\n\nconst PricingOptionsContext = React.createContext<PricingOptionsContextValue>({\n align: 'start',\n allFeatureListsExpanded: false,\n featureListUserInteracted: false,\n updateFeatureListExpanded: () => {},\n setFeatureListUserInteracted: () => {},\n})\n\nconst PricingOptionsProvider = ({children, align = 'start'}: PropsWithChildren<{align: AlignOptions}>) => {\n const [allFeatureListsExpanded, setAllFeatureListsExpanded] = React.useState(false)\n const [featureListUserInteracted, setFeatureListUserInteracted] = React.useState(false)\n\n const updateFeatureListExpanded = (newValue: boolean) => {\n setAllFeatureListsExpanded(() => newValue)\n }\n\n return (\n <PricingOptionsContext.Provider\n value={{\n allFeatureListsExpanded,\n updateFeatureListExpanded,\n align,\n featureListUserInteracted,\n setFeatureListUserInteracted,\n }}\n >\n {children}\n </PricingOptionsContext.Provider>\n )\n}\n\nconst usePricingOptions = (): PricingOptionsContextValue => {\n return React.useContext(PricingOptionsContext)\n}\n\nconst pricingOptionsDefaultFeatureListHeading = \"What's included\"\n\ntype PricingOptionsLabelProps = PropsWithChildren<{\n 'data-testid'?: string\n}>\n\nconst PricingOptionsLabel = ({children}: PricingOptionsLabelProps) => {\n return <>{children}</>\n}\n\nconst PricingOptionsRoot = forwardRef(\n (\n {\n align = 'start',\n children,\n className,\n 'data-testid': testId,\n variant = 'default',\n ...rest\n }: PropsWithChildren<PricingOptionsProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const filteredChildren = useMemo(\n () =>\n React.Children.toArray(children).filter(\n child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === PricingOptionsItem,\n ) as React.ReactElement<PropsWithChildren<PricingOptionsItem>>[],\n [children],\n ).slice(0, 4)\n\n const headerLabels = useMemo(\n () =>\n filteredChildren.map(item => {\n const labelChild = React.Children.toArray(item.props.children).find(\n child =>\n React.isValidElement(child) && typeof child.type !== 'string' && child.type === PricingOptionsLabel,\n )\n\n return (\n React.isValidElement(labelChild) ? labelChild : null\n ) as React.ReactElement<PricingOptionsLabelProps> \| null\n }),\n [filteredChildren],\n )\n\n const hasHeaderLabels = headerLabels.some(label => label !== null)\n\n return (\n <PricingOptionsProvider align={align}>\n <div\n className={clsx(\n styles.PricingOptions,\n styles[`PricingOptions--layout-${variant.includes('default') ? 'default' : 'cards'}`],\n styles[`PricingOptions--items${filteredChildren.length}`],\n styles[`PricingOptions--appearance-${variant.includes('gradient') ? 'gradient' : 'solid'}`],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n >\n {filteredChildren}\n\n {hasHeaderLabels && (\n <div\n className={styles['PricingOptions__labels']}\n data-testid={testIds.labelRow}\n style={\n {\n '--brand-pricing-options-column-count': filteredChildren.length,\n } as React.CSSProperties\n }\n >\n {headerLabels.map((headerLabel, index) => {\n const hasLabelContent = Boolean(headerLabel?.props.children)\n\n return (\n <div\n className={clsx(\n styles['PricingOptions__label-cell'],\n hasLabelContent\n ? styles['PricingOptions__label-cell--has-label']\n : styles['PricingOptions__label-cell--empty'],\n )}\n data-testid={headerLabel?.props['data-testid'] \|\| testIds.label}\n key={index}\n >\n {headerLabel?.props.children ? (\n <span className={styles.PricingOptions__label}>{headerLabel.props.children}</span>\n ) : null}\n </div>\n )\n })}\n </div>\n )}\n </div>\n </PricingOptionsProvider>\n )\n },\n)\n\nexport type PricingOptionsItem = {\n ['data-testid']?: string\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.ReactElement\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\ntype FilteredChildren = {\n FeatureList: React.ReactElement<PricingOptionsFeatureListProps> \| null\n Actions: React.ReactElement<PricingOptionsActionsProps>[]\n ActionsMessage: React.ReactElement<PricingOptionsActionsMessageProps> \| null\n Footnote: React.ReactElement<PricingOptionsFootnoteProps> \| null\n Heading: React.ReactElement<PricingOptionsHeadingProps> \| null\n Description: React.ReactElement<PricingOptionsDescriptionProps> \| null\n Price: React.ReactElement<PricingOptionsPriceProps> \| null\n}\n\nconst PricingOptionsItem = forwardRef(\n (\n {'data-testid': testId, children, className, leadingComponent, ...rest}: PropsWithChildren<PricingOptionsItem>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {align} = usePricingOptions()\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const filteredChildren = memoizedChildren.reduce<FilteredChildren>(\n (acc, child) => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (child.type === PricingOptionsFeatureList) {\n acc.FeatureList = child as React.ReactElement<PricingOptionsFeatureListProps> \| null\n }\n\n if (\n child.type === PricingOptionsPrimaryAction \|\|\n child.type === PricingOptionsSecondaryAction \|\|\n child.type === PricingOptionsMenuAction\n ) {\n acc.Actions.push(child as React.ReactElement<PricingOptionsActionsProps>)\n }\n\n if (child.type === PricingOptionsActionsMessage) {\n acc.ActionsMessage = child as React.ReactElement<PricingOptionsActionsMessageProps>\n }\n\n if (child.type === PricingOptionsFootnote) {\n acc.Footnote = child as React.ReactElement<PricingOptionsFootnoteProps>\n }\n\n if (child.type === PricingOptionsHeading) {\n acc.Heading = child as React.ReactElement<PricingOptionsHeadingProps>\n }\n\n if (child.type === PricingOptionsDescription) {\n acc.Description = child as React.ReactElement<PricingOptionsDescriptionProps>\n }\n\n if (child.type === PricingOptionsPrice) {\n acc.Price = child as React.ReactElement<PricingOptionsPriceProps>\n }\n }\n\n return acc\n },\n {\n FeatureList: null,\n Actions: [],\n ActionsMessage: null,\n Footnote: null,\n Heading: null,\n Description: null,\n Price: null,\n },\n )\n\n const {Heading, Description, Price, FeatureList, Actions, ActionsMessage, Footnote} = filteredChildren\n\n return (\n <div\n className={clsx(\n styles.PricingOptions__item,\n leadingComponent && styles['PricingOptions__item--has-leading-component'],\n styles[`PricingOptions__item--align-${align}`],\n className,\n )}\n data-testid={testId \|\| testIds.item}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n >\n <div className={styles['PricingOptions__header']}>{Heading}</div>\n {Description}\n {Price}\n {leadingComponent && <div className={styles['PricingOptions__leading-component']}>{leadingComponent}</div>}\n {(Actions.length > 0 \|\| ActionsMessage) && (\n <div className={styles.PricingOptions__actions}>\n {Actions}\n {ActionsMessage}\n </div>\n )}\n {FeatureList}\n {Footnote}\n </div>\n )\n },\n)\n\ntype PricingOptionsDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsDescription = forwardRef<HTMLParagraphElement, PricingOptionsDescriptionProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__description, className)}\n data-testid={testId \|\| testIds.description}\n ref={ref}\n size=\"200\"\n variant=\"muted\"\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PricingOptionsHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {\n 'data-testid'?: string\n} & HeadingProps\n\nconst PricingOptionsHeading = forwardRef<HTMLHeadingElement, PricingOptionsHeadingProps>(\n ({as = 'h3', children, 'data-testid': testId, size = '5', className, ...rest}, ref) => {\n return (\n <HeadingComponent\n as={as}\n className={clsx(styles.PricingOptions__heading, styles[`PricingOptions__heading--size-${size}`], className)}\n data-testid={testId \|\| testIds.heading}\n ref={ref}\n size={size}\n {...rest}\n >\n {children}\n </HeadingComponent>\n )\n },\n)\n\ntype PricingOptionsPriceProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n currencyCode?: string\n currencySymbol?: string\n 'data-testid'?: string\n originalPrice?: string\n trailingText?: string\n}\n\nconst PricingOptionsPrice = forwardRef<HTMLParagraphElement, PricingOptionsPriceProps>(\n (\n {\n children,\n className,\n currencyCode = 'USD',\n currencySymbol = '$',\n 'data-testid': testId,\n originalPrice,\n trailingText,\n ...rest\n },\n ref,\n ) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__price, className)}\n data-testid={testId \|\| testIds.price}\n ref={ref}\n weight=\"normal\"\n {...rest}\n >\n <span className={styles['PricingOptions__price-amount']}>\n <Text as=\"span\" className={styles['PricingOptions__price-currency-symbol']} size=\"500\" weight=\"normal\">\n {currencySymbol}\n </Text>\n\n <Text as=\"span\" className={styles['PricingOptions__price-value']} size=\"500\" weight=\"normal\">\n {children}\n </Text>\n\n <Text as=\"span\" className={styles['PricingOptions__price-currency-code']} size=\"100\" weight=\"normal\">\n {currencyCode}\n </Text>\n </span>\n\n {originalPrice && (\n <del className={styles['PricingOptions__price-original-price']}>\n <Text size=\"400\" variant=\"muted\" weight=\"normal\">\n {currencySymbol}\n </Text>\n <Text\n className={styles['PricingOptions__price-original-price-value']}\n size=\"300\"\n variant=\"muted\"\n weight=\"normal\"\n >\n {originalPrice}\n </Text>\n </del>\n )}\n\n {trailingText && (\n <Text as=\"span\" className={styles['PricingOptions__price-trailing-text']} size=\"200\" variant=\"muted\">\n {trailingText}\n </Text>\n )}\n </Text>\n )\n },\n)\n\ntype PricingOptionsFeatureListProps = BaseProps<HTMLUListElement> & {\n accordionAs?: HeadingProps['as']\n expanded?: ExpandedProp\n hasDivider?: boolean\n children: React.ReactElement<PricingOptionsFeatureListGroupHeadingProps \| PricingOptionsFeatureListItemProps>[]\n 'data-testid'?: string\n}\n\ntype ExpandedProp = boolean \| ResponsiveExpandableProps\n\ntype ResponsiveExpandableProps = {\n narrow: boolean\n regular: boolean\n wide: boolean\n}\n\ntype ValidFeatureListChildren = {\n Heading: React.ReactElement<PricingOptionsFeatureListGroupHeadingProps> \| null\n Items: React.ReactElement<PricingOptionsFeatureListItemProps>[]\n}[]\n\nconst PricingOptionsFeatureList = forwardRef<HTMLDivElement, PricingOptionsFeatureListProps>(\n ({children, className, 'data-testid': testId, hasDivider = true, expanded, accordionAs = 'h4', ...rest}, ref) => {\n const {\n allFeatureListsExpanded,\n updateFeatureListExpanded,\n featureListUserInteracted,\n setFeatureListUserInteracted,\n } = usePricingOptions()\n const {isMedium: isRegular, isXLarge: isWide, isSmall: isNarrow} = useWindowSize()\n\n React.useEffect(() => {\n if (expanded === undefined \|\| typeof expanded === 'object') {\n setFeatureListUserInteracted(false)\n }\n }, [isRegular, isWide, isNarrow, setFeatureListUserInteracted, expanded])\n\n const shouldBeOpen = React.useMemo(() => {\n if (featureListUserInteracted) {\n return allFeatureListsExpanded\n }\n\n // Important: Fixes layout shift by ensuring that explicit values are preserved.\n if (typeof expanded === 'boolean') {\n return expanded\n }\n // If undefined, should follow some default responsive logic\n if (expanded === undefined) {\n if (isWide) return true\n if (isRegular) return true\n return false\n }\n\n // finally handle responsive objects, and go from largest to smallest viewports\n const {narrow, regular, wide} = expanded\n if (isWide) return wide\n if (isRegular) return regular\n return narrow\n }, [expanded, allFeatureListsExpanded, isRegular, isWide, featureListUserInteracted])\n\n let FeatureListHeading = (\n <PricingOptions.FeatureListHeading>{pricingOptionsDefaultFeatureListHeading}</PricingOptions.FeatureListHeading>\n )\n\n const FilteredChildrenSet = React.Children.toArray(children).reduce<ValidFeatureListChildren>((acc, child) => {\n if (React.isValidElement(child) && child.type === PricingOptionsFeatureListHeading) {\n FeatureListHeading = child\n } else if (React.isValidElement(child) && child.type === PricingOptionsFeatureListItem) {\n if (acc.length === 0) {\n acc.push({Heading: null, Items: []})\n }\n acc[acc.length - 1].Items.push(child as React.ReactElement<PricingOptionsFeatureListItemProps>)\n } else if (React.isValidElement(child) && child.type === PricingOptionsFeatureListGroupHeading) {\n acc.push({\n Heading: child as React.ReactElement<PricingOptionsFeatureListGroupHeadingProps>,\n Items: [],\n })\n }\n\n return acc\n }, [])\n\n const FeatureListItems = FilteredChildrenSet.map(({Heading: HeadingChild, Items}, index) => (\n <div className={styles['PricingOptions__feature-list-set']} key={index}>\n {HeadingChild}\n\n <UnorderedList variant=\"checked\" {...(rest as UnorderedListProps)}>\n {Items}\n </UnorderedList>\n </div>\n ))\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles['PricingOptions__feature-list'],\n hasDivider && styles['PricingOptions__feature-list--has-divider'],\n className,\n )}\n data-testid={testId \|\| testIds.featureList}\n >\n <Accordion\n className={styles['PricingOptions__feature-list-accordion']}\n disableAnimation\n open={shouldBeOpen}\n onToggle={event => {\n setFeatureListUserInteracted(true)\n updateFeatureListExpanded(event.currentTarget.open)\n }}\n >\n <Accordion.Heading as={accordionAs} className={styles['PricingOptions__feature-list-accordion-heading']}>\n {FeatureListHeading}\n\n <TriangleDownIcon className={styles['PricingOptions__feature-list-accordion-chevron']} />\n </Accordion.Heading>\n <Accordion.Content className={styles['PricingOptions__feature-list-accordion-content']}>\n {FeatureListItems}\n </Accordion.Content>\n </Accordion>\n </div>\n )\n },\n)\n\ntype PricingOptionsFeatureListHeadingProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsFeatureListHeading = forwardRef<HTMLDivElement, PricingOptionsFeatureListHeadingProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <div className={className} data-testid={testId \|\| testIds.featureListHeading} ref={ref} {...rest}>\n {children}\n </div>\n )\n },\n)\n\ntype PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {\n as?: Exclude<HeadingProps['as'], 'h1' \| 'h2'>\n 'data-testid'?: string\n}\n\nconst PricingOptionsFeatureListGroupHeading = forwardRef<\n HTMLHeadingElement,\n PricingOptionsFeatureListGroupHeadingProps\n>(({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <HeadingComponent\n as=\"h4\"\n className={clsx(styles['PricingOptions__feature-list-group-heading'], className)}\n data-testid={testId \|\| testIds.featureListGroupHeading}\n ref={ref}\n size=\"subhead-medium\"\n {...rest}\n >\n {children}\n </HeadingComponent>\n )\n})\n\ntype PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {\n 'data-testid'?: string\n infoTooltip?: string\n variant?: 'included' \| 'excluded'\n} & Omit<ListItemProps, 'variant'>\n\nconst PricingOptionsFeatureListItem = forwardRef<HTMLLIElement, PricingOptionsFeatureListItemProps>(\n (\n {\n children,\n className,\n infoTooltip,\n leadingVisual,\n leadingVisualFill,\n variant = 'included',\n 'data-testid': testId,\n ...rest\n },\n ref,\n ) => {\n const itemLeadingVisual = leadingVisual ?? (variant === 'included' ? CheckIcon : XIcon)\n const itemLeadingVisualAriaLabel = variant === 'included' ? 'Includes' : 'Does not include'\n\n const itemLeadingVisualFill =\n leadingVisualFill ??\n (variant === 'included' ? 'var(--brand-color-accent-primary)' : 'var(--brand-color-text-muted)')\n\n return (\n <UnorderedList.Item\n className={clsx(\n styles['PricingOptions__feature-list-item'],\n {[styles['PricingOptions__feature-list-item--excluded']]: variant === 'excluded'},\n infoTooltip && styles['PricingOptions__feature-list-item--has-info'],\n className,\n )}\n data-testid={testId \|\| testIds.featureListItem}\n leadingVisual={itemLeadingVisual}\n leadingVisualAriaLabel={itemLeadingVisualAriaLabel}\n leadingVisualFill={itemLeadingVisualFill}\n ref={ref}\n {...rest}\n >\n {children}\n {infoTooltip && (\n <Tooltip text={infoTooltip} direction=\"n\">\n <button\n type=\"button\"\n className={styles['PricingOptions__feature-list-item-info']}\n aria-label={`More information about ${typeof children === 'string' ? children : 'this feature'}`}\n >\n <svg viewBox=\"0 0 4 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M0.75 3C0.33579 3 0 3.33579 0 3.75C0 4.16421 0.33579 4.5 0.75 4.5H1V6.5H0.75C0.33579 6.5 0 6.8358 0 7.25C0 7.6642 0.33579 8 0.75 8H2.75C3.16421 8 3.5 7.6642 3.5 7.25C3.5 6.8358 3.16421 6.5 2.75 6.5H2.5V3.75C2.5 3.33579 2.16421 3 1.75 3H0.75Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M2.5 1C2.5 1.55228 2.05229 2 1.5 2C0.94772 2 0.5 1.55228 0.5 1C0.5 0.44772 0.94772 0 1.5 0C2.05229 0 2.5 0.44772 2.5 1Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n </Tooltip>\n )}\n </UnorderedList.Item>\n )\n },\n)\n\ntype AsA = {as: 'a'; href: string; 'data-testid'?: string} & React.AnchorHTMLAttributes<BaseProps<HTMLAnchorElement>> &\n ButtonBaseProps\n\ntype AsButton = {as: 'button'; 'data-testid'?: string} & React.ButtonHTMLAttributes<BaseProps<HTMLButtonElement>> &\n ButtonBaseProps\n\ntype PricingOptionsActionsProps = AsA \| AsButton\n\ntype PricingOptionsActionsMessageProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n leadingComponent?: React.ReactElement\n}\n\nconst PricingOptionsActionsMessage = forwardRef<HTMLDivElement, PricingOptionsActionsMessageProps>(\n ({children, className, 'data-testid': testId, leadingComponent, ...rest}, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(styles['PricingOptions__actions-message'], className)}\n data-testid={testId \|\| testIds.actionsMessage}\n {...rest}\n >\n {leadingComponent && (\n <span className={styles['PricingOptions__actions-message-leading-component']}>{leadingComponent}</span>\n )}\n <div className={styles['PricingOptions__actions-message-content']}>{children}</div>\n </div>\n )\n },\n)\n\nconst PricingOptionsPrimaryAction = forwardRef<\n HTMLAnchorElement \| HTMLButtonElement,\n PropsWithChildren<PricingOptionsActionsProps>\n>(({as, children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n as={as}\n data-testid={testId \|\| testIds.primaryAction}\n className={clsx(styles['PricingOptions__primary-action'], className)}\n size=\"medium\"\n variant=\"primary\"\n block\n {...rest}\n >\n {children}\n </Button>\n )\n})\n\nconst PricingOptionsSecondaryAction = forwardRef<\n HTMLAnchorElement \| HTMLButtonElement,\n PropsWithChildren<PricingOptionsActionsProps>\n>(({as, children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n as={as}\n className={clsx(styles['PricingOptions__primary-action'], className)}\n data-testid={testId \|\| testIds.secondaryAction}\n variant=\"secondary\"\n block\n {...rest}\n >\n {children}\n </Button>\n )\n})\n\ntype PricingOptionsMenuActionProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsMenuAction = forwardRef<HTMLDivElement, PricingOptionsMenuActionProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(styles['PricingOptions__menu-action'], className)}\n data-testid={testId \|\| testIds.menuAction}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsFootnote = forwardRef<HTMLParagraphElement, PricingOptionsFootnoteProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__footnote, className)}\n data-testid={testId \|\| testIds.footnote}\n ref={ref}\n size=\"100\"\n variant=\"muted\"\n weight=\"light\"\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\n/\n Pricing options component:\n * {@link https://primer.style/brand/components/PricingOptions/ See usage examples}.\n */\nexport const PricingOptions = Object.assign(PricingOptionsRoot, {\n ActionsMessage: PricingOptionsActionsMessage,\n Description: PricingOptionsDescription,\n FeatureList: PricingOptionsFeatureList,\n FeatureListHeading: PricingOptionsFeatureListHeading,\n FeatureListGroupHeading: PricingOptionsFeatureListGroupHeading,\n FeatureListItem: PricingOptionsFeatureListItem,\n Footnote: PricingOptionsFootnote,\n Label: PricingOptionsLabel,\n Heading: PricingOptionsHeading,\n Item: PricingOptionsItem,\n MenuAction: PricingOptionsMenuAction,\n Price: PricingOptionsPrice,\n PrimaryAction: PricingOptionsPrimaryAction,\n SecondaryAction: PricingOptionsSecondaryAction,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"PricingOptions.js","names":[],"sources":["../../src/PricingOptions/PricingOptions.tsx"],"sourcesContent":["import React, {forwardRef, HTMLAttributes, PropsWithChildren, useMemo, Ref, Dispatch} from 'react'\nimport {CheckIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport type {ListItemProps} from '../list/ListItem/ListItem'\nimport type {BaseProps} from '../component-helpers'\nimport {Accordion} from '../Accordion/Accordion'\nimport {Button, type ButtonBaseProps} from '../Button'\nimport {Heading as HeadingComponent, type HeadingProps} from '../Heading'\nimport {Text} from '../Text'\nimport {Tooltip} from '../Tooltip'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {UnorderedList, type UnorderedListProps} from '../list'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './PricingOptions.module.css'\n\ntype AlignOptions = 'start' \| 'center'\n\nexport type PricingOptionsProps = {\n align?: AlignOptions\n variant?: 'default' \| 'default-gradient' \| 'cards' \| 'cards-gradient'\n ['data-testid']?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>> &\n HTMLAttributes<HTMLDivElement>\n\nconst testIds = {\n root: 'PricingOptions',\n item: 'PricingOptions__item',\n labelRow: 'PricingOptions__labels',\n heading: 'PricingOptions__heading',\n label: 'PricingOptions__label',\n description: 'PricingOptions__description',\n price: 'PricingOptions__price',\n actionsMessage: 'PricingOptions__actionsMessage',\n primaryAction: 'PricingOptions__primaryAction',\n secondaryAction: 'PricingOptions__secondaryAction',\n menuAction: 'PricingOptions__menuAction',\n featureList: 'PricingOptions__featureList',\n featureListHeading: 'PricingOptions__featureListHeading',\n featureListItem: 'PricingOptions__featureListItem',\n featureListGroupHeading: 'PricingOptions__featureListGroupHeading',\n footnote: 'PricingOptions__footnote',\n}\n\ntype PricingOptionsContextValue = {\n align: AlignOptions\n allFeatureListsExpanded: boolean\n updateFeatureListExpanded: Dispatch<boolean>\n featureListUserInteracted: boolean\n setFeatureListUserInteracted: Dispatch<boolean>\n}\n\nconst PricingOptionsContext = React.createContext<PricingOptionsContextValue>({\n align: 'start',\n allFeatureListsExpanded: false,\n featureListUserInteracted: false,\n updateFeatureListExpanded: () => {},\n setFeatureListUserInteracted: () => {},\n})\n\nconst PricingOptionsProvider = ({children, align = 'start'}: PropsWithChildren<{align: AlignOptions}>) => {\n const [allFeatureListsExpanded, setAllFeatureListsExpanded] = React.useState(false)\n const [featureListUserInteracted, setFeatureListUserInteracted] = React.useState(false)\n\n const updateFeatureListExpanded = (newValue: boolean) => {\n setAllFeatureListsExpanded(() => newValue)\n }\n\n return (\n <PricingOptionsContext.Provider\n value={{\n allFeatureListsExpanded,\n updateFeatureListExpanded,\n align,\n featureListUserInteracted,\n setFeatureListUserInteracted,\n }}\n >\n {children}\n </PricingOptionsContext.Provider>\n )\n}\n\nconst usePricingOptions = (): PricingOptionsContextValue => {\n return React.useContext(PricingOptionsContext)\n}\n\nconst pricingOptionsDefaultFeatureListHeading = \"What's included\"\n\ntype PricingOptionsLabelProps = PropsWithChildren<{\n 'data-testid'?: string\n}>\n\nconst PricingOptionsLabel = ({children}: PricingOptionsLabelProps) => {\n return <>{children}</>\n}\n\nconst PricingOptionsRoot = forwardRef(\n (\n {\n align = 'start',\n children,\n className,\n 'data-testid': testId,\n variant = 'default',\n ...rest\n }: PropsWithChildren<PricingOptionsProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const filteredChildren = useMemo(\n () =>\n React.Children.toArray(children).filter(\n child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === PricingOptionsItem,\n ) as React.ReactElement<PropsWithChildren<PricingOptionsItem>>[],\n [children],\n ).slice(0, 4)\n\n const headerLabels = useMemo(\n () =>\n filteredChildren.map(item => {\n const labelChild = React.Children.toArray(item.props.children).find(\n child =>\n React.isValidElement(child) && typeof child.type !== 'string' && child.type === PricingOptionsLabel,\n )\n\n return (\n React.isValidElement(labelChild) ? labelChild : null\n ) as React.ReactElement<PricingOptionsLabelProps> \| null\n }),\n [filteredChildren],\n )\n\n const hasHeaderLabels = headerLabels.some(label => label !== null)\n\n return (\n <PricingOptionsProvider align={align}>\n <div\n className={clsx(\n styles.PricingOptions,\n styles[`PricingOptions--layout-${variant.includes('default') ? 'default' : 'cards'}`],\n styles[`PricingOptions--items${filteredChildren.length}`],\n styles[`PricingOptions--appearance-${variant.includes('gradient') ? 'gradient' : 'solid'}`],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n >\n {filteredChildren}\n\n {hasHeaderLabels && (\n <div\n className={styles['PricingOptions__labels']}\n data-testid={testIds.labelRow}\n style={\n {\n '--brand-pricing-options-column-count': filteredChildren.length,\n } as React.CSSProperties\n }\n >\n {headerLabels.map((headerLabel, index) => {\n const hasLabelContent = Boolean(headerLabel?.props.children)\n\n return (\n <div\n className={clsx(\n styles['PricingOptions__label-cell'],\n hasLabelContent\n ? styles['PricingOptions__label-cell--has-label']\n : styles['PricingOptions__label-cell--empty'],\n )}\n data-testid={headerLabel?.props['data-testid'] \|\| testIds.label}\n key={index}\n >\n {headerLabel?.props.children ? (\n <span className={styles.PricingOptions__label}>{headerLabel.props.children}</span>\n ) : null}\n </div>\n )\n })}\n </div>\n )}\n </div>\n </PricingOptionsProvider>\n )\n },\n)\n\nexport type PricingOptionsItem = {\n ['data-testid']?: string\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.ReactElement\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\ntype FilteredChildren = {\n FeatureList: React.ReactElement<PricingOptionsFeatureListProps> \| null\n Actions: React.ReactElement<PricingOptionsActionsProps>[]\n ActionsMessage: React.ReactElement<PricingOptionsActionsMessageProps> \| null\n Footnote: React.ReactElement<PricingOptionsFootnoteProps> \| null\n Heading: React.ReactElement<PricingOptionsHeadingProps> \| null\n Description: React.ReactElement<PricingOptionsDescriptionProps> \| null\n Price: React.ReactElement<PricingOptionsPriceProps> \| null\n}\n\nconst PricingOptionsItem = forwardRef(\n (\n {'data-testid': testId, children, className, leadingComponent, ...rest}: PropsWithChildren<PricingOptionsItem>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {align} = usePricingOptions()\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const filteredChildren = memoizedChildren.reduce<FilteredChildren>(\n (acc, child) => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (child.type === PricingOptionsFeatureList) {\n acc.FeatureList = child as React.ReactElement<PricingOptionsFeatureListProps> \| null\n }\n\n if (\n child.type === PricingOptionsPrimaryAction \|\|\n child.type === PricingOptionsSecondaryAction \|\|\n child.type === PricingOptionsMenuAction\n ) {\n acc.Actions.push(child as React.ReactElement<PricingOptionsActionsProps>)\n }\n\n if (child.type === PricingOptionsActionsMessage) {\n acc.ActionsMessage = child as React.ReactElement<PricingOptionsActionsMessageProps>\n }\n\n if (child.type === PricingOptionsFootnote) {\n acc.Footnote = child as React.ReactElement<PricingOptionsFootnoteProps>\n }\n\n if (child.type === PricingOptionsHeading) {\n acc.Heading = child as React.ReactElement<PricingOptionsHeadingProps>\n }\n\n if (child.type === PricingOptionsDescription) {\n acc.Description = child as React.ReactElement<PricingOptionsDescriptionProps>\n }\n\n if (child.type === PricingOptionsPrice) {\n acc.Price = child as React.ReactElement<PricingOptionsPriceProps>\n }\n }\n\n return acc\n },\n {\n FeatureList: null,\n Actions: [],\n ActionsMessage: null,\n Footnote: null,\n Heading: null,\n Description: null,\n Price: null,\n },\n )\n\n const {Heading, Description, Price, FeatureList, Actions, ActionsMessage, Footnote} = filteredChildren\n\n return (\n <div\n className={clsx(\n styles.PricingOptions__item,\n leadingComponent && styles['PricingOptions__item--has-leading-component'],\n styles[`PricingOptions__item--align-${align}`],\n className,\n )}\n data-testid={testId \|\| testIds.item}\n ref={ref}\n {...(rest as HTMLAttributes<HTMLElement>)}\n >\n <div className={styles['PricingOptions__header']}>{Heading}</div>\n {Description}\n {Price}\n {leadingComponent && <div className={styles['PricingOptions__leading-component']}>{leadingComponent}</div>}\n {(Actions.length > 0 \|\| ActionsMessage) && (\n <div className={styles.PricingOptions__actions}>\n {Actions}\n {ActionsMessage}\n </div>\n )}\n {FeatureList}\n {Footnote}\n </div>\n )\n },\n)\n\ntype PricingOptionsDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsDescription = forwardRef<HTMLParagraphElement, PricingOptionsDescriptionProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__description, className)}\n data-testid={testId \|\| testIds.description}\n ref={ref}\n size=\"200\"\n variant=\"muted\"\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PricingOptionsHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {\n 'data-testid'?: string\n} & HeadingProps\n\nconst PricingOptionsHeading = forwardRef<HTMLHeadingElement, PricingOptionsHeadingProps>(\n ({as = 'h3', children, 'data-testid': testId, size = '5', className, ...rest}, ref) => {\n return (\n <HeadingComponent\n as={as}\n className={clsx(styles.PricingOptions__heading, styles[`PricingOptions__heading--size-${size}`], className)}\n data-testid={testId \|\| testIds.heading}\n ref={ref}\n size={size}\n {...rest}\n >\n {children}\n </HeadingComponent>\n )\n },\n)\n\ntype PricingOptionsPriceProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n currencyCode?: string\n currencySymbol?: string\n 'data-testid'?: string\n originalPrice?: string\n trailingText?: string\n}\n\nconst PricingOptionsPrice = forwardRef<HTMLParagraphElement, PricingOptionsPriceProps>(\n (\n {\n children,\n className,\n currencyCode = 'USD',\n currencySymbol = '$',\n 'data-testid': testId,\n originalPrice,\n trailingText,\n ...rest\n },\n ref,\n ) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__price, className)}\n data-testid={testId \|\| testIds.price}\n ref={ref}\n weight=\"normal\"\n {...rest}\n >\n <span className={styles['PricingOptions__price-amount']}>\n <Text as=\"span\" className={styles['PricingOptions__price-currency-symbol']} size=\"500\" weight=\"normal\">\n {currencySymbol}\n </Text>\n\n <Text as=\"span\" className={styles['PricingOptions__price-value']} size=\"500\" weight=\"normal\">\n {children}\n </Text>\n\n <Text as=\"span\" className={styles['PricingOptions__price-currency-code']} size=\"100\" weight=\"normal\">\n {currencyCode}\n </Text>\n </span>\n\n {originalPrice && (\n <del className={styles['PricingOptions__price-original-price']}>\n <Text size=\"400\" variant=\"muted\" weight=\"normal\">\n {currencySymbol}\n </Text>\n <Text\n className={styles['PricingOptions__price-original-price-value']}\n size=\"300\"\n variant=\"muted\"\n weight=\"normal\"\n >\n {originalPrice}\n </Text>\n </del>\n )}\n\n {trailingText && (\n <Text as=\"span\" className={styles['PricingOptions__price-trailing-text']} size=\"200\" variant=\"muted\">\n {trailingText}\n </Text>\n )}\n </Text>\n )\n },\n)\n\ntype PricingOptionsFeatureListProps = BaseProps<HTMLUListElement> & {\n accordionAs?: HeadingProps['as']\n expanded?: ExpandedProp\n hasDivider?: boolean\n children: React.ReactElement<PricingOptionsFeatureListGroupHeadingProps \| PricingOptionsFeatureListItemProps>[]\n 'data-testid'?: string\n}\n\ntype ExpandedProp = boolean \| ResponsiveExpandableProps\n\ntype ResponsiveExpandableProps = {\n narrow: boolean\n regular: boolean\n wide: boolean\n}\n\ntype ValidFeatureListChildren = {\n Heading: React.ReactElement<PricingOptionsFeatureListGroupHeadingProps> \| null\n Items: React.ReactElement<PricingOptionsFeatureListItemProps>[]\n}[]\n\nconst PricingOptionsFeatureList = forwardRef<HTMLDivElement, PricingOptionsFeatureListProps>(\n ({children, className, 'data-testid': testId, hasDivider = true, expanded, accordionAs = 'h4', ...rest}, ref) => {\n const {\n allFeatureListsExpanded,\n updateFeatureListExpanded,\n featureListUserInteracted,\n setFeatureListUserInteracted,\n } = usePricingOptions()\n const {isMedium: isRegular, isXLarge: isWide, isSmall: isNarrow} = useWindowSize()\n\n React.useEffect(() => {\n if (expanded === undefined \|\| typeof expanded === 'object') {\n setFeatureListUserInteracted(false)\n }\n }, [isRegular, isWide, isNarrow, setFeatureListUserInteracted, expanded])\n\n const shouldBeOpen = React.useMemo(() => {\n if (featureListUserInteracted) {\n return allFeatureListsExpanded\n }\n\n // Important: Fixes layout shift by ensuring that explicit values are preserved.\n if (typeof expanded === 'boolean') {\n return expanded\n }\n // If undefined, should follow some default responsive logic\n if (expanded === undefined) {\n if (isWide) return true\n if (isRegular) return true\n return false\n }\n\n // finally handle responsive objects, and go from largest to smallest viewports\n const {narrow, regular, wide} = expanded\n if (isWide) return wide\n if (isRegular) return regular\n return narrow\n }, [expanded, allFeatureListsExpanded, isRegular, isWide, featureListUserInteracted])\n\n let FeatureListHeading = (\n <PricingOptions.FeatureListHeading>{pricingOptionsDefaultFeatureListHeading}</PricingOptions.FeatureListHeading>\n )\n\n const FilteredChildrenSet = React.Children.toArray(children).reduce<ValidFeatureListChildren>((acc, child) => {\n if (React.isValidElement(child) && child.type === PricingOptionsFeatureListHeading) {\n FeatureListHeading = child\n } else if (React.isValidElement(child) && child.type === PricingOptionsFeatureListItem) {\n if (acc.length === 0) {\n acc.push({Heading: null, Items: []})\n }\n acc[acc.length - 1].Items.push(child as React.ReactElement<PricingOptionsFeatureListItemProps>)\n } else if (React.isValidElement(child) && child.type === PricingOptionsFeatureListGroupHeading) {\n acc.push({\n Heading: child as React.ReactElement<PricingOptionsFeatureListGroupHeadingProps>,\n Items: [],\n })\n }\n\n return acc\n }, [])\n\n const FeatureListItems = FilteredChildrenSet.map(({Heading: HeadingChild, Items}, index) => (\n <div className={styles['PricingOptions__feature-list-set']} key={index}>\n {HeadingChild}\n\n <UnorderedList variant=\"checked\" {...(rest as UnorderedListProps)}>\n {Items}\n </UnorderedList>\n </div>\n ))\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles['PricingOptions__feature-list'],\n hasDivider && styles['PricingOptions__feature-list--has-divider'],\n className,\n )}\n data-testid={testId \|\| testIds.featureList}\n >\n <Accordion\n className={styles['PricingOptions__feature-list-accordion']}\n disableAnimation\n open={shouldBeOpen}\n onToggle={event => {\n setFeatureListUserInteracted(true)\n updateFeatureListExpanded(event.currentTarget.open)\n }}\n >\n <Accordion.Heading as={accordionAs} className={styles['PricingOptions__feature-list-accordion-heading']}>\n {FeatureListHeading}\n\n <TriangleDownIcon className={styles['PricingOptions__feature-list-accordion-chevron']} />\n </Accordion.Heading>\n <Accordion.Content className={styles['PricingOptions__feature-list-accordion-content']}>\n {FeatureListItems}\n </Accordion.Content>\n </Accordion>\n </div>\n )\n },\n)\n\ntype PricingOptionsFeatureListHeadingProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsFeatureListHeading = forwardRef<HTMLDivElement, PricingOptionsFeatureListHeadingProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <div className={className} data-testid={testId \|\| testIds.featureListHeading} ref={ref} {...rest}>\n {children}\n </div>\n )\n },\n)\n\ntype PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {\n as?: Exclude<HeadingProps['as'], 'h1' \| 'h2'>\n 'data-testid'?: string\n}\n\nconst PricingOptionsFeatureListGroupHeading = forwardRef<\n HTMLHeadingElement,\n PricingOptionsFeatureListGroupHeadingProps\n>(({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <HeadingComponent\n as=\"h4\"\n className={clsx(styles['PricingOptions__feature-list-group-heading'], className)}\n data-testid={testId \|\| testIds.featureListGroupHeading}\n ref={ref}\n size=\"subhead-medium\"\n {...rest}\n >\n {children}\n </HeadingComponent>\n )\n})\n\ntype PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {\n 'data-testid'?: string\n infoTooltip?: string\n /\n Optional accessible label for the info tooltip trigger. Overrides the automatically generated label.\n /\n infoTooltipAriaLabel?: string\n variant?: 'included' \| 'excluded'\n} & Omit<ListItemProps, 'variant'>\n\nconst PricingOptionsFeatureListItem = forwardRef<HTMLLIElement, PricingOptionsFeatureListItemProps>(\n (\n {\n children,\n className,\n infoTooltip,\n infoTooltipAriaLabel,\n leadingVisual,\n leadingVisualFill,\n variant = 'included',\n 'data-testid': testId,\n ...rest\n },\n ref,\n ) => {\n const itemLeadingVisual = leadingVisual ?? (variant === 'included' ? CheckIcon : XIcon)\n const itemLeadingVisualAriaLabel = variant === 'included' ? 'Includes' : 'Does not include'\n\n const itemLeadingVisualFill =\n leadingVisualFill ??\n (variant === 'included' ? 'var(--brand-color-accent-primary)' : 'var(--brand-color-text-muted)')\n\n return (\n <UnorderedList.Item\n className={clsx(\n styles['PricingOptions__feature-list-item'],\n {[styles['PricingOptions__feature-list-item--excluded']]: variant === 'excluded'},\n infoTooltip && styles['PricingOptions__feature-list-item--has-info'],\n className,\n )}\n data-testid={testId \|\| testIds.featureListItem}\n leadingVisual={itemLeadingVisual}\n leadingVisualAriaLabel={itemLeadingVisualAriaLabel}\n leadingVisualFill={itemLeadingVisualFill}\n ref={ref}\n {...rest}\n >\n {children}\n {infoTooltip && (\n <Tooltip text={infoTooltip} direction=\"n\">\n <button\n type=\"button\"\n className={styles['PricingOptions__feature-list-item-info']}\n aria-label={\n infoTooltipAriaLabel ??\n // eslint-disable-next-line i18n-text/no-en\n `More information about ${typeof children === 'string' ? children : 'this feature'}`\n }\n >\n <svg viewBox=\"0 0 4 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M0.75 3C0.33579 3 0 3.33579 0 3.75C0 4.16421 0.33579 4.5 0.75 4.5H1V6.5H0.75C0.33579 6.5 0 6.8358 0 7.25C0 7.6642 0.33579 8 0.75 8H2.75C3.16421 8 3.5 7.6642 3.5 7.25C3.5 6.8358 3.16421 6.5 2.75 6.5H2.5V3.75C2.5 3.33579 2.16421 3 1.75 3H0.75Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M2.5 1C2.5 1.55228 2.05229 2 1.5 2C0.94772 2 0.5 1.55228 0.5 1C0.5 0.44772 0.94772 0 1.5 0C2.05229 0 2.5 0.44772 2.5 1Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n </Tooltip>\n )}\n </UnorderedList.Item>\n )\n },\n)\n\ntype AsA = {as: 'a'; href: string; 'data-testid'?: string} & React.AnchorHTMLAttributes<BaseProps<HTMLAnchorElement>> &\n ButtonBaseProps\n\ntype AsButton = {as: 'button'; 'data-testid'?: string} & React.ButtonHTMLAttributes<BaseProps<HTMLButtonElement>> &\n ButtonBaseProps\n\ntype PricingOptionsActionsProps = AsA \| AsButton\n\ntype PricingOptionsActionsMessageProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n leadingComponent?: React.ReactElement\n}\n\nconst PricingOptionsActionsMessage = forwardRef<HTMLDivElement, PricingOptionsActionsMessageProps>(\n ({children, className, 'data-testid': testId, leadingComponent, ...rest}, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(styles['PricingOptions__actions-message'], className)}\n data-testid={testId \|\| testIds.actionsMessage}\n {...rest}\n >\n {leadingComponent && (\n <span className={styles['PricingOptions__actions-message-leading-component']}>{leadingComponent}</span>\n )}\n <div className={styles['PricingOptions__actions-message-content']}>{children}</div>\n </div>\n )\n },\n)\n\nconst PricingOptionsPrimaryAction = forwardRef<\n HTMLAnchorElement \| HTMLButtonElement,\n PropsWithChildren<PricingOptionsActionsProps>\n>(({as, children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n as={as}\n data-testid={testId \|\| testIds.primaryAction}\n className={clsx(styles['PricingOptions__primary-action'], className)}\n size=\"medium\"\n variant=\"primary\"\n block\n {...rest}\n >\n {children}\n </Button>\n )\n})\n\nconst PricingOptionsSecondaryAction = forwardRef<\n HTMLAnchorElement \| HTMLButtonElement,\n PropsWithChildren<PricingOptionsActionsProps>\n>(({as, children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n as={as}\n className={clsx(styles['PricingOptions__primary-action'], className)}\n data-testid={testId \|\| testIds.secondaryAction}\n variant=\"secondary\"\n block\n {...rest}\n >\n {children}\n </Button>\n )\n})\n\ntype PricingOptionsMenuActionProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsMenuAction = forwardRef<HTMLDivElement, PricingOptionsMenuActionProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(styles['PricingOptions__menu-action'], className)}\n data-testid={testId \|\| testIds.menuAction}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {\n 'data-testid'?: string\n}\n\nconst PricingOptionsFootnote = forwardRef<HTMLParagraphElement, PricingOptionsFootnoteProps>(\n ({children, className, 'data-testid': testId, ...rest}, ref) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles.PricingOptions__footnote, className)}\n data-testid={testId \|\| testIds.footnote}\n ref={ref}\n size=\"100\"\n variant=\"muted\"\n weight=\"light\"\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\n/\n Pricing options component:\n * {@link https://primer.style/brand/components/PricingOptions/ See usage examples}.\n */\nexport const PricingOptions = Object.assign(PricingOptionsRoot, {\n ActionsMessage: PricingOptionsActionsMessage,\n Description: PricingOptionsDescription,\n FeatureList: PricingOptionsFeatureList,\n FeatureListHeading: PricingOptionsFeatureListHeading,\n FeatureListGroupHeading: PricingOptionsFeatureListGroupHeading,\n FeatureListItem: PricingOptionsFeatureListItem,\n Footnote: PricingOptionsFootnote,\n Label: PricingOptionsLabel,\n Heading: PricingOptionsHeading,\n Item: PricingOptionsItem,\n MenuAction: PricingOptionsMenuAction,\n Price: PricingOptionsPrice,\n PrimaryAction: PricingOptionsPrimaryAction,\n SecondaryAction: PricingOptionsSecondaryAction,\n testIds,\n})\n"],"mappings":"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"}

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

@@ -34,8 +34,8 @@ type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 export type TokenProps = TokenSpanProps | TokenAnchorProps;
 /**
- * Use a Token to group short metadata or categories, with optional leading visuals.
- * @see https://primer.style/brand
+ * Use Token to display compact metadata that describes or supports adjacent content.
+ * @see https://primer.style/brand/components/Token
  */
 export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
     testIds: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Token.js","names":[],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\n\nimport {Text} from '../Text'\nimport {useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'\n\nimport styles from './Token.module.css'\n\nexport const TokenVariants = ['default', 'accent', 'outline', 'invisible'] as const\n\nexport const defaultTokenVariant = TokenVariants[0]\n\ntype TokenLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\ntype TokenSharedProps = {\n /\n The leading visual appears before the Token content.\n * Pass an element to supply custom props, or a component type that accepts an optional className.\n /\n leadingVisual?: TokenLeadingVisual\n /\n The variant variations available in Token.\n /\n variant?: (typeof TokenVariants)[number]\n /\n The HTML element rendered by Token.\n /\n as?: 'span' \| 'a'\n ['data-testid']?: string\n}\n\ntype TokenSpanProps = BaseProps<HTMLSpanElement> &\n TokenSharedProps & {\n as?: 'span'\n } & React.ComponentPropsWithoutRef<'span'>\n\ntype TokenAnchorProps = BaseProps<HTMLAnchorElement> &\n TokenSharedProps & {\n as: 'a'\n href: string\n } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nexport type TokenProps = TokenSpanProps \| TokenAnchorProps\n\nconst testIds = {\n root: 'Token',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n}\n\nconst _Token = forwardRef<HTMLSpanElement \| HTMLAnchorElement, TokenProps>(\n (\n {\n animate,\n variant = defaultTokenVariant,\n as = 'span',\n children,\n className,\n 'data-testid': testId,\n leadingVisual: LeadingVisual,\n style,\n ...props\n },\n ref: Ref<HTMLSpanElement \| HTMLAnchorElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const tokenClassName = clsx(\n animationClasses,\n styles.Token,\n LeadingVisual && styles['Token--hasLeadingVisual'],\n as === 'a' && styles['Token--interactive'],\n styles[`Token--variant-${variant}`],\n className,\n )\n\n const tokenChildren = (\n <>\n {LeadingVisual && (\n <span className={styles['Token__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n {typeof LeadingVisual === 'function' ? (\n <LeadingVisual className={styles['Token__visual']} />\n ) : (\n React.isValidElement<{className?: string}>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: clsx(styles['Token__visual'], LeadingVisual.props.className),\n })\n )}\n </span>\n )}\n <Text as=\"span\" size=\"100\" className={styles['Token__label']}>\n {children}\n </Text>\n </>\n )\n\n if (as === 'a') {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n className={tokenClassName}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {tokenChildren}\n </a>\n )\n }\n\n return (\n <span\n ref={ref as Ref<HTMLSpanElement>}\n className={tokenClassName}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {tokenChildren}\n </span>\n )\n },\n)\n\n/\n Use a Token to ~~group~~ ~~short~~ metadata or ~~categories,~~ ~~with~~ ~~optional~~ ~~leading~~ ~~visuals~~.\n * @see https://primer.style/brand\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;CAAY,EAE7D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,aAAU,GACV,QAAK,QACL,aACA,cACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA0B,eAAa,EAAQ;EAAe,eAAY;YAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAe,WAAW,EAAO,eAAoB,CAAA,GAErD,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,UAAU,EACxE,CAAC;EAEC,CAAA,EAET,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,WAAW,EAAO;EAC1C;EACI,CAAA,CACN,EAAA,CAAA;AAiBL,QAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACC,CAAA;EAgBX,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}
1	+ {"version":3,"file":"Token.js","names":[],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\n\nimport {Text} from '../Text'\nimport {useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'\n\nimport styles from './Token.module.css'\n\nexport const TokenVariants = ['default', 'accent', 'outline', 'invisible'] as const\n\nexport const defaultTokenVariant = TokenVariants[0]\n\ntype TokenLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\ntype TokenSharedProps = {\n /\n The leading visual appears before the Token content.\n * Pass an element to supply custom props, or a component type that accepts an optional className.\n /\n leadingVisual?: TokenLeadingVisual\n /\n The variant variations available in Token.\n /\n variant?: (typeof TokenVariants)[number]\n /\n The HTML element rendered by Token.\n /\n as?: 'span' \| 'a'\n ['data-testid']?: string\n}\n\ntype TokenSpanProps = BaseProps<HTMLSpanElement> &\n TokenSharedProps & {\n as?: 'span'\n } & React.ComponentPropsWithoutRef<'span'>\n\ntype TokenAnchorProps = BaseProps<HTMLAnchorElement> &\n TokenSharedProps & {\n as: 'a'\n href: string\n } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nexport type TokenProps = TokenSpanProps \| TokenAnchorProps\n\nconst testIds = {\n root: 'Token',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n}\n\nconst _Token = forwardRef<HTMLSpanElement \| HTMLAnchorElement, TokenProps>(\n (\n {\n animate,\n variant = defaultTokenVariant,\n as = 'span',\n children,\n className,\n 'data-testid': testId,\n leadingVisual: LeadingVisual,\n style,\n ...props\n },\n ref: Ref<HTMLSpanElement \| HTMLAnchorElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const tokenClassName = clsx(\n animationClasses,\n styles.Token,\n LeadingVisual && styles['Token--hasLeadingVisual'],\n as === 'a' && styles['Token--interactive'],\n styles[`Token--variant-${variant}`],\n className,\n )\n\n const tokenChildren = (\n <>\n {LeadingVisual && (\n <span className={styles['Token__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n {typeof LeadingVisual === 'function' ? (\n <LeadingVisual className={styles['Token__visual']} />\n ) : (\n React.isValidElement<{className?: string}>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: clsx(styles['Token__visual'], LeadingVisual.props.className),\n })\n )}\n </span>\n )}\n <Text as=\"span\" size=\"100\" className={styles['Token__label']}>\n {children}\n </Text>\n </>\n )\n\n if (as === 'a') {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n className={tokenClassName}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {tokenChildren}\n </a>\n )\n }\n\n return (\n <span\n ref={ref as Ref<HTMLSpanElement>}\n className={tokenClassName}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {tokenChildren}\n </span>\n )\n },\n)\n\n/\n Use Token to display compact metadata that describes or supports adjacent content.\n * @see https://primer.style/brand/components/Token\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;CAAY,EAE7D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,aAAU,GACV,QAAK,QACL,aACA,cACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA0B,eAAa,EAAQ;EAAe,eAAY;YAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAe,WAAW,EAAO,eAAoB,CAAA,GAErD,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,UAAU,EACxE,CAAC;EAEC,CAAA,EAET,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,WAAW,EAAO;EAC1C;EACI,CAAA,CACN,EAAA,CAAA;AAiBL,QAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACC,CAAA;EAgBX,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}

package/esm/index.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export * from './river';
 export * from './MediaPlaylist';
 export * from './SubdomainNavBar';
 export * from './InlineLink';
+export * from './InlineCode';
 export * from './Link';
 export * from './Label';
 export * from './Token';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}