npm - @primer/react-brand - Versions diffs - 0.68.0-rc.5bd56cbb → 0.68.0-rc.982c487b - Mend

@primer/react-brand 0.68.0-rc.5bd56cbb → 0.68.0-rc.982c487b

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

Files changed (441) hide show

package/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'\n\nimport {\n Accordion,\n Button,\n ButtonBaseProps,\n Heading as HeadingComponent,\n HeadingProps,\n Text,\n Tooltip,\n UnorderedList,\n UnorderedListProps,\n useWindowSize,\n} from '..'\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 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=\"accent\"\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'\n\nimport {\n Accordion,\n Button,\n ButtonBaseProps,\n Heading as HeadingComponent,\n HeadingProps,\n Text,\n Tooltip,\n UnorderedList,\n UnorderedListProps,\n useWindowSize,\n} from '..'\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 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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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.d.ts","sourceRoot":"","sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAG1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;~~AAKvC~~,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,2BAA2B,kCAAmC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACtE,SAAS,CAAC,WAAW,CAAC,GACtB,iBAAiB,GAAG;IAClB,OAAO,CAAC,EAAE,0BAA0B,CAAA;CACrC,CAAA;~~AAuCH~~,KAAK,+BAA+B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4CnF,KAAK,mCAAmC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAC1E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAkBH,KAAK,4BAA4B,GAAG,SAAS,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAqB5E,KAAK,6BAA6B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAchE,KAAK,gCAAgC,GAAG,SAAS,CAAA;AAyCjD,KAAK,uCAAuC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,GACvF,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAmBH,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAiDnE,eAAO,MAAM,mBAAmB;;;;uDA7H4B,iBAAiB,CAAC,6BAA6B,CAAC;6CA8E1D,iBAAiB,CAAC,4BAA4B,CAAC;+CAhEvC,gCAAgC;;;CAwHxF,CAAA"}
1	+ {"version":3,"file":"SectionIntroStacked.d.ts","sourceRoot":"","sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAG1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAMvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,2BAA2B,kCAAmC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACtE,SAAS,CAAC,WAAW,CAAC,GACtB,iBAAiB,GAAG;IAClB,OAAO,CAAC,EAAE,0BAA0B,CAAA;CACrC,CAAA;AAwCH,KAAK,+BAA+B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4CnF,KAAK,mCAAmC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAC1E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAkBH,KAAK,4BAA4B,GAAG,SAAS,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAqB5E,KAAK,6BAA6B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAchE,KAAK,gCAAgC,GAAG,SAAS,CAAA;AAyCjD,KAAK,uCAAuC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,GACvF,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAmBH,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAiDnE,eAAO,MAAM,mBAAmB;;;;uDA7H4B,iBAAiB,CAAC,6BAA6B,CAAC;6CA8E1D,iBAAiB,CAAC,4BAA4B,CAAC;+CAhEvC,gCAAgC;;;CAwHxF,CAAA"}

package/esm/SectionIntroStacked/SectionIntroStacked.js CHANGED Viewed

@@ -3,123 +3,124 @@ import { Grid as t } from "../Grid/Grid.js";
 import { useAnimation as n } from "../animation/useAnimation.js";
 import { Text as r } from "../Text/Text.js";
 import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
-import { Link as o } from "../Link/Link.js";
-import { Icon as s } from "../Icon/Icon.js";
-import c from "./SectionIntroStacked.module.js";
-import l, { forwardRef as u, useCallback as d, useMemo as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import o from "../component-helpers/shared.module.js";
+import { Link as s } from "../Link/Link.js";
+import { Icon as c } from "../Icon/Icon.js";
+import l from "./SectionIntroStacked.module.js";
+import u, { forwardRef as d, useCallback as f, useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/SectionIntroStacked/SectionIntroStacked.tsx
-var h = ["default", "gridline"], g = u(({ animate: r, className: i, children: a, style: o, variant: s = "default", ...u }, d) => {
-	let { classes: f, styles: h } = n(r), g = l.Children.toArray(a), _ = g.filter((e) => l.isValidElement(e) && e.type === x), v = g.filter((e) => !_.includes(e));
-	return /* @__PURE__ */ p("header", {
-		ref: d,
-		className: e(c.SectionIntroStacked, s === "gridline" && c["SectionIntroStacked--variant-gridline"], f, i),
-		...u,
+var g = ["default", "gridline"], _ = d(({ animate: r, className: i, children: a, style: s, variant: c = "default", ...d }, f) => {
+	let { classes: p, styles: g } = n(r), _ = u.Children.toArray(a), v = _.filter((e) => u.isValidElement(e) && e.type === S), y = _.filter((e) => !v.includes(e));
+	return /* @__PURE__ */ m("header", {
+		ref: f,
+		className: e(l.SectionIntroStacked, c === "gridline" && l["SectionIntroStacked--variant-gridline"], c === "gridline" && o.gridline, p, i),
+		...d,
 		style: {
-			...h,
-			...o
+			...g,
+			...s
 		},
-		children: /* @__PURE__ */ m(t, {
+		children: /* @__PURE__ */ h(t, {
 			fullWidth: !0,
-			enableGutters: s !== "gridline",
-			children: [/* @__PURE__ */ p(t.Column, {
+			enableGutters: c !== "gridline",
+			children: [/* @__PURE__ */ m(t.Column, {
 				span: { large: 6 },
+				children: y
+			}), /* @__PURE__ */ m(t.Column, {
+				span: c === "gridline" ? { large: 6 } : { large: 5 },
+				start: c === "gridline" ? { large: 7 } : { large: 8 },
 				children: v
-			}), /* @__PURE__ */ p(t.Column, {
-				span: s === "gridline" ? { large: 6 } : { large: 5 },
-				start: s === "gridline" ? { large: 7 } : { large: 8 },
-				children: _
 			})]
 		})
 	});
-}), _ = "3", v = u(({ as: t = a, size: n = _, className: r, children: o, ...s }, u) => {
-	let m = f(() => l.Children.toArray(o), [o]), h = d(() => m.some((e) => l.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default", [m]), g = m.length === 1 ? "default" : h();
-	return /* @__PURE__ */ p(i, {
-		ref: u,
-		className: e(c["SectionIntroStacked-heading"], g === "muted" && c["SectionIntroStacked-heading--muted"], r),
+}), v = "3", y = d(({ as: t = a, size: n = v, className: r, children: o, ...s }, c) => {
+	let d = p(() => u.Children.toArray(o), [o]), h = f(() => d.some((e) => u.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default", [d]), g = d.length === 1 ? "default" : h();
+	return /* @__PURE__ */ m(i, {
+		ref: c,
+		className: e(l["SectionIntroStacked-heading"], g === "muted" && l["SectionIntroStacked-heading--muted"], r),
 		size: n,
 		as: t,
 		...s,
 		children: o
 	});
-}), y = u(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ p(r, {
+}), b = d(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ m(r, {
 	as: "p",
-	className: e(c["SectionIntroStacked-description"], t),
+	className: e(l["SectionIntroStacked-description"], t),
 	ref: a,
 	variant: "muted",
 	...i,
 	children: n
-})), b = u(({ className: t, children: n, variant: r = "accent", size: i = "medium", ...a }, s) => /* @__PURE__ */ p(o, {
-	ref: s,
-	className: e(c["SectionIntroStacked-link"], t),
+})), x = d(({ className: t, children: n, variant: r = "accent", size: i = "medium", ...a }, o) => /* @__PURE__ */ m(s, {
+	ref: o,
+	className: e(l["SectionIntroStacked-link"], t),
 	size: i,
 	variant: r,
 	...a,
 	children: n
-})), x = ({ animate: t, className: r, children: i, ...a }) => {
+})), S = ({ animate: t, className: r, children: i, ...a }) => {
 	let { classes: o, styles: s } = n(t);
-	return /* @__PURE__ */ p("ul", {
-		className: e(o, c["SectionIntroStacked-items"], r),
+	return /* @__PURE__ */ m("ul", {
+		className: e(o, l["SectionIntroStacked-items"], r),
 		style: { ...s },
 		...a,
 		children: i
 	});
-}, S = ({ className: t, color: n = "green", ...r }) => /* @__PURE__ */ p(s, {
-	className: e(c.SectionIntroStackedItem__icon, t),
+}, C = ({ className: t, color: n = "green", ...r }) => /* @__PURE__ */ m(c, {
+	className: e(l.SectionIntroStackedItem__icon, t),
 	hasBackground: !0,
 	size: "medium",
 	color: n,
 	...r
-}), C = u(({ as: t = "h3", size: n = "subhead-large", className: r, children: a, ...o }, s) => /* @__PURE__ */ p(i, {
+}), w = d(({ as: t = "h3", size: n = "subhead-large", className: r, children: a, ...o }, s) => /* @__PURE__ */ m(i, {
 	ref: s,
 	as: t,
 	size: n,
-	className: e(c.SectionIntroStackedItem__heading, r),
+	className: e(l.SectionIntroStackedItem__heading, r),
 	...o,
 	children: a
-})), w = u(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ p(r, {
+})), T = d(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ m(r, {
 	as: "p",
 	variant: "muted",
 	size: "200",
-	className: e(c.SectionIntroStackedItem__description, t),
+	className: e(l.SectionIntroStackedItem__description, t),
 	ref: a,
 	...i,
 	children: n
-})), T = Object.assign(g, {
-	Heading: v,
-	Description: y,
-	Link: b,
-	Items: x,
+})), E = Object.assign(_, {
+	Heading: y,
+	Description: b,
+	Link: x,
+	Items: S,
 	Item: ({ className: t, children: n, ...i }) => {
-		let a = e(c["SectionIntroStackedItem-item"], t), o = f(() => l.Children.toArray(n), [n]);
-		if (o.some((e) => l.isValidElement(e) && (e.type === S || e.type === C || e.type === w))) {
-			let t = o.find((e) => l.isValidElement(e) && e.type === S), n = o.filter((e) => !(l.isValidElement(e) && e.type === S));
-			return /* @__PURE__ */ m("li", {
-				className: e(a, !!t && c["SectionIntroStackedItem-item--with-icon"]),
+		let a = e(l["SectionIntroStackedItem-item"], t), o = p(() => u.Children.toArray(n), [n]);
+		if (o.some((e) => u.isValidElement(e) && (e.type === C || e.type === w || e.type === T))) {
+			let t = o.find((e) => u.isValidElement(e) && e.type === C), n = o.filter((e) => !(u.isValidElement(e) && e.type === C));
+			return /* @__PURE__ */ h("li", {
+				className: e(a, !!t && l["SectionIntroStackedItem-item--with-icon"]),
 				...i,
-				children: [t, /* @__PURE__ */ p("div", {
-					className: c.SectionIntroStackedItem__content,
+				children: [t, /* @__PURE__ */ m("div", {
+					className: l.SectionIntroStackedItem__content,
 					children: n
 				})]
 			});
 		}
-		let s = o.length === 1 ? "default" : o.some((e) => l.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default";
-		return /* @__PURE__ */ p("li", {
+		let s = o.length === 1 ? "default" : o.some((e) => u.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default";
+		return /* @__PURE__ */ m("li", {
 			className: a,
 			...i,
-			children: /* @__PURE__ */ p(r, {
+			children: /* @__PURE__ */ m(r, {
 				as: "span",
-				className: e(c["SectionIntroStackedItem__item-text"], s === "muted" && c["SectionIntroStackedItem__item-text--muted"]),
+				className: e(l["SectionIntroStackedItem__item-text"], s === "muted" && l["SectionIntroStackedItem__item-text--muted"]),
 				size: "350",
 				children: n
 			})
 		});
 	},
-	ItemIcon: S,
-	ItemHeading: C,
-	ItemDescription: w
+	ItemIcon: C,
+	ItemHeading: w,
+	ItemDescription: T
 });
 //#endregion
-export { T as SectionIntroStacked, h as SectionIntroStackedVariants };
+export { E as SectionIntroStacked, g as SectionIntroStackedVariants };
 //# sourceMappingURL=SectionIntroStacked.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement> &\n PropsWithChildren & {\n variant?: SectionIntroStackedVariant\n }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const childrenArray = React.Children.toArray(children)\n\n // extract Items and everything else into two separate arrays\n const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n return (\n <header\n ref={ref}\n className={clsx(\n styles.SectionIntroStacked,\n variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n animationClasses,\n className,\n )}\n {...props}\n style={{...animationInlineStyles, ...style}}\n >\n <Grid fullWidth enableGutters={variant !== 'gridline'}>\n <Grid.Column span={{large: 6}}>{otherChildren}</Grid.Column>\n <Grid.Column\n span={variant === 'gridline' ? {large: 6} : {large: 5}}\n start={variant === 'gridline' ? {large: 7} : {large: 8}}\n >\n {items}\n </Grid.Column>\n </Grid>\n </header>\n )\n },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = defaultHeadingSize,\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }, [childrenArray])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n styles[`SectionIntroStacked-heading`],\n defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' \| 'variant'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles['SectionIntroStacked-description'], className)}\n ref={ref}\n variant=\"muted\"\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n (\n {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n ref: Ref<HTMLAnchorElement>,\n ) => {\n return (\n <Link\n ref={ref}\n className={clsx(styles['SectionIntroStacked-link'], className)}\n size={size}\n variant={variant}\n {...props}\n >\n {children}\n </Link>\n )\n },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n return (\n <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n {children}\n </ul>\n )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n return (\n <Icon\n className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n hasBackground\n size=\"medium\"\n color={color}\n {...props}\n />\n )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n (\n {\n as = 'h3',\n size = 'subhead-large',\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n as={as}\n size={size}\n className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' \| 'variant' \| 'size'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst ItemDescription = forwardRef(\n ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n variant=\"muted\"\n size=\"200\"\n className={clsx(styles['SectionIntroStackedItem__description'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const hasSubComponents = childrenArray.some(\n child =>\n React.isValidElement(child) &&\n (child.type === ItemIcon \|\| child.type === ItemHeading \|\| child.type === ItemDescription),\n )\n\n if (hasSubComponents) {\n const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n return (\n <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n {iconChild}\n <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n </li>\n )\n }\n\n const getConditionalVariant = () => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n return (\n <li className={itemClassName} {...rest}>\n <Text\n as=\"span\"\n className={clsx(\n styles['SectionIntroStackedItem__item-text'],\n defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n )}\n size=\"350\"\n >\n {children}\n </Text>\n </li>\n )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n Heading: _Heading,\n Description: _Description,\n Link: _Link,\n Items: ItemsBase,\n Item: ItemBase,\n ItemIcon,\n ItemHeading,\n ItemDescription,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement> &\n PropsWithChildren & {\n variant?: SectionIntroStackedVariant\n }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const childrenArray = React.Children.toArray(children)\n\n // extract Items and everything else into two separate arrays\n const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n return (\n <header\n ref={ref}\n className={clsx(\n styles.SectionIntroStacked,\n variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n {...props}\n style={{...animationInlineStyles, ...style}}\n >\n <Grid fullWidth enableGutters={variant !== 'gridline'}>\n <Grid.Column span={{large: 6}}>{otherChildren}</Grid.Column>\n <Grid.Column\n span={variant === 'gridline' ? {large: 6} : {large: 5}}\n start={variant === 'gridline' ? {large: 7} : {large: 8}}\n >\n {items}\n </Grid.Column>\n </Grid>\n </header>\n )\n },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = defaultHeadingSize,\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }, [childrenArray])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n styles[`SectionIntroStacked-heading`],\n defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' \| 'variant'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles['SectionIntroStacked-description'], className)}\n ref={ref}\n variant=\"muted\"\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n (\n {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n ref: Ref<HTMLAnchorElement>,\n ) => {\n return (\n <Link\n ref={ref}\n className={clsx(styles['SectionIntroStacked-link'], className)}\n size={size}\n variant={variant}\n {...props}\n >\n {children}\n </Link>\n )\n },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n return (\n <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n {children}\n </ul>\n )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n return (\n <Icon\n className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n hasBackground\n size=\"medium\"\n color={color}\n {...props}\n />\n )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n (\n {\n as = 'h3',\n size = 'subhead-large',\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n as={as}\n size={size}\n className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' \| 'variant' \| 'size'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst ItemDescription = forwardRef(\n ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n variant=\"muted\"\n size=\"200\"\n className={clsx(styles['SectionIntroStackedItem__description'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const hasSubComponents = childrenArray.some(\n child =>\n React.isValidElement(child) &&\n (child.type === ItemIcon \|\| child.type === ItemHeading \|\| child.type === ItemDescription),\n )\n\n if (hasSubComponents) {\n const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n return (\n <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n {iconChild}\n <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n </li>\n )\n }\n\n const getConditionalVariant = () => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n return (\n <li className={itemClassName} {...rest}>\n <Text\n as=\"span\"\n className={clsx(\n styles['SectionIntroStackedItem__item-text'],\n defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n )}\n size=\"350\"\n >\n {children}\n </Text>\n </li>\n )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n Heading: _Heading,\n Description: _Description,\n Link: _Link,\n Items: ItemsBase,\n Item: ItemBase,\n ItemIcon,\n ItemHeading,\n ItemDescription,\n})\n"],"mappings":"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"}

package/esm/SectionIntroStacked/SectionIntroStacked.module-Cr7kUqTH.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{--brand-Grid-spacing-row:var(--base-size-48)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-24);padding-block:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-start:var(--base-size-24);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-24);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-64);padding-block:var(--base-size-64);--SectionIntroStacked-item-divider-overflow-start:0px;--SectionIntroStacked-item-divider-overflow-end:calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));padding-inline:var(--base-size-64);padding-block:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text--muted___PAxL5{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH b,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ b{color:var(--brand-color-text-default);font-style:normal;font-weight:var(--base-text-weight-normal)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--full-width___wxr_6 .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{max-width:none}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ{max-width:50ch;margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J{margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}@media screen and (width<=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{font-size:var(--brand-text-size-600)}}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{top:var(--base-size-2);position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-block:calc(-1 * var(--base-size-64));padding-block:0;position:static;top:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-inline-start:var(--base-size-32);padding-inline-end:var(--base-size-32)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{border-block-end:none;position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{padding-block-end:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:not(:last-child):after{content:"";bottom:0;left:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));right:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);position:absolute}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-block:var(--base-size-40);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{border-block-end:none;padding-block-end:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{align-items:flex-start;gap:var(--base-size-24);flex-direction:row;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{gap:var(--base-size-48)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY{gap:var(--base-size-8);flex-direction:column;flex:1;min-width:0;display:flex}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx{border-radius:var(--brand-borderRadius-medium);flex-shrink:0}

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

@@ -1,4 +1,4 @@
-import './SectionIntroStacked.module-DvJXKMKX.css';var e = {
+import './SectionIntroStacked.module-Cr7kUqTH.css';var e = {
 	SectionIntroStacked: "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y",
 	"SectionIntroStacked--variant-gridline": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi",
 	"SectionIntroStacked-heading--muted": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked--variant-gridline {\n position: relative;\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-32);\n\n --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n /* At large viewports, left overflow is 0 (vertical divider bounds the start) /\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));\n }\n}\n\n.SectionIntroStacked--variant-gridline::before,\n.SectionIntroStacked--variant-gridline::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 100vw;\n height: 0;\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n z-index: 1;\n}\n\n.SectionIntroStacked--variant-gridline::before {\n top: 0;\n}\n\n.SectionIntroStacked--variant-gridline::after {\n bottom: 0;\n}\n\n@media screen and (min-width: 80rem) {\n .SectionIntroStacked--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n max-width: none;\n}\n\n.SectionIntroStacked-description {\n margin-block-start: var(--base-size-16);\n max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n@media screen and (max-width: 63.25rem) {\n .SectionIntroStacked-heading {\n font-size: var(--brand-text-size-600);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked-items {\n position: relative;\n top: var(--base-size-2);\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-block: calc(-1 var(--base-size-64));\n padding-block: 0;\n position: static;\n top: auto;\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n /* Inset item content from the vertical gridline /\n padding-inline-start: var(--base-size-32);\n padding-inline-end: var(--base-size-32);\n }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n border-block-end: none;\n position: relative;\n}\n\n/ Restore equal padding on first/last items in gridline variant /\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: calc(-1 var(--SectionIntroStacked-item-divider-overflow-start));\n right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n padding-block: var(--base-size-40);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n border-block-end: none;\n padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStackedItem-item--with-icon {\n gap: var(--base-size-48);\n }\n}\n\n.SectionIntroStackedItem__content {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n flex: 1;\n min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n flex-shrink: 0;\n border-radius: var(--brand-borderRadius-medium);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked--variant-gridline {\n position: relative;\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-32);\n\n --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n /* At large viewports, left overflow is 0 (vertical divider bounds the start) /\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));\n }\n}\n\n@media screen and (min-width: 80rem) {\n .SectionIntroStacked--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n max-width: none;\n}\n\n.SectionIntroStacked-description {\n margin-block-start: var(--base-size-16);\n max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n@media screen and (max-width: 63.25rem) {\n .SectionIntroStacked-heading {\n font-size: var(--brand-text-size-600);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked-items {\n position: relative;\n top: var(--base-size-2);\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-block: calc(-1 var(--base-size-64));\n padding-block: 0;\n position: static;\n top: auto;\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n /* Inset item content from the vertical gridline /\n padding-inline-start: var(--base-size-32);\n padding-inline-end: var(--base-size-32);\n }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n border-block-end: none;\n position: relative;\n}\n\n/ Restore equal padding on first/last items in gridline variant /\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: calc(-1 var(--SectionIntroStacked-item-divider-overflow-start));\n right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n padding-block: var(--base-size-40);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n border-block-end: none;\n padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStackedItem-item--with-icon {\n gap: var(--base-size-48);\n }\n}\n\n.SectionIntroStackedItem__content {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n flex: 1;\n min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n flex-shrink: 0;\n border-radius: var(--brand-borderRadius-medium);\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AA8PhD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,2CAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,~~OAAkB~~,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,~~2CAenG~~;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;~~8EA9SgE~~,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;~~CAkSvG~~,CAAA"}
1	+ {"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AA8PhD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,2CAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAmB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,2CAcpG;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;8EA7SgE,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;CAiSvG,CAAA"}

package/esm/SubNav/SubNav.js CHANGED Viewed

@@ -316,13 +316,12 @@ function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
 		})
 	});
 }
-function B({ children: e, href: t, variant: n = "accent", size: r = "small", ...i }) {
+function B({ children: e, href: t, variant: n = "primary", size: r = "small", ...i }) {
 	return /* @__PURE__ */ E(o, {
 		className: p.SubNav__action,
 		as: "a",
 		href: t,
 		variant: n,
-		hasArrow: !1,
 		"data-testid": k.action,
 		size: r,
 		...i,