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

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

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

Files changed (915) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n narrow?: AvatarSizeVariants\n regular?: AvatarSizeVariants\n wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n size?: (typeof AvatarSizes)[number] \| ResponsiveSizeMap\n shape?: (typeof AvatarShapes)[number]\n src: string\n alt: string\n ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n root: 'Avatar',\n get image() {\n return `${this.root}__image`\n },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n const sizeClass = useMemo(() => {\n return typeof size === 'number'\n ? styles[`Avatar--size-${size}`]\n : Object.keys(size)\n .map(viewport => {\n return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n })\n .join(' ')\n }, [size])\n\n return (\n <span\n ref={ref}\n className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n data-testid={testId \|\| testIds.root}\n >\n <img className={clsx(styles.Avatar__image)} src={src} alt={alt} data-testid={testIds.image} {...props} />\n </span>\n )\n },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;~~CAAG~~,~~EAClC~~,IAAe,CAAC,UAAU,~~SAAS~~,~~EAkB1C~~,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;~~AACV~~,~~SAAO~~,GAAG,KAAK,KAAK~~;;CAEvB~~,~~EAEK~~,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,~~EAAK~~,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,~~MAC/C~~,CACD,KAAK,~~IAAI~~,~~EACf~~,CAAC,~~EAAK~~,CAAC;~~AAEV~~,~~QACE~~,kBAAC,QAAD;EACO;EACL,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,~~EAAU~~;~~EACtF~~,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,~~cAAc~~;~~GAAO~~;GAAU;GAAK,eAAa,EAAQ;GAAO,GAAI;~~GAAS~~,CAAA;~~EACpG~~,CAAA;~~EAGZ~~,~~EAEY~~,IAAS,OAAO,OAAO,GAAS,EAAC,~~YAAQ~~,CAAC"}
1	+ {"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n narrow?: AvatarSizeVariants\n regular?: AvatarSizeVariants\n wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n size?: (typeof AvatarSizes)[number] \| ResponsiveSizeMap\n shape?: (typeof AvatarShapes)[number]\n src: string\n alt: string\n ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n root: 'Avatar',\n get image() {\n return `${this.root}__image`\n },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n const sizeClass = useMemo(() => {\n return typeof size === 'number'\n ? styles[`Avatar--size-${size}`]\n : Object.keys(size)\n .map(viewport => {\n return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n })\n .join(' ')\n }, [size])\n\n return (\n <span\n ref={ref}\n className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n data-testid={testId \|\| testIds.root}\n >\n <img className={clsx(styles.Avatar__image)} src={src} alt={alt} data-testid={testIds.image} {...props} />\n </span>\n )\n },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;AAAE,GACjC,IAAe,CAAC,UAAU,QAAQ,GAkBzC,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,CAAI,CAAC,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,KAChD,CAAC,CACD,KAAK,GAAG,GACd,CAAC,CAAI,CAAC;CAET,OACE,kBAAC,QAAD;EACO;EACL,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,CAAS;EACrF,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,aAAa;GAAQ;GAAU;GAAK,eAAa,EAAQ;GAAO,GAAI;EAAQ,CAAA;CACpG,CAAA;AAEV,CACF,GAEa,IAAS,OAAO,OAAO,GAAS,EAAC,WAAO,CAAC"}

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

@@ -1,8 +1,9 @@
-import './Avatar.module-DUQdD7On.css';var e = {
-	Avatar: "Primer_Brand__Avatar-module__Avatar___VP3QQ",
+import './Avatar.module-DUQdD7On.css';//#region src/Avatar/Avatar.module.css
+var e = "Primer_Brand__Avatar-module__Avatar___VP3QQ", t = "Primer_Brand__Avatar-module__Avatar__image___ImYTc", n = {
+	Avatar: e,
 	"Avatar--shape-circle": "Primer_Brand__Avatar-module__Avatar--shape-circle___Yz6Zj",
 	"Avatar--shape-square": "Primer_Brand__Avatar-module__Avatar--shape-square___f2Rrz",
-	Avatar__image: "Primer_Brand__Avatar-module__Avatar__image___ImYTc",
+	Avatar__image: t,
 	"Avatar--size-32": "Primer_Brand__Avatar-module__Avatar--size-32___P1cC2",
 	"Avatar--size-40": "Primer_Brand__Avatar-module__Avatar--size-40___fFZWc",
 	"Avatar--size-48": "Primer_Brand__Avatar-module__Avatar--size-48___ZrSSm",
@@ -23,6 +24,6 @@ import './Avatar.module-DUQdD7On.css';var e = {
 	"Avatar-wide--size-80": "Primer_Brand__Avatar-module__Avatar-wide--size-80___MptXL"
 };
 //#endregion
-export { e as default };
+export { e as Avatar, t as Avatar__image, n as default };
 //# sourceMappingURL=Avatar.module.js.map

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

@@ -50,10 +50,10 @@ type BentoVisualProps = {
  * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.
  * @see https://primer.style/brand/components/Bento
  */
-export declare const Bento: (({ className, ...rest }: BentoProps) => import("react/jsx-runtime").JSX.Element) & {
-    Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => import("react/jsx-runtime").JSX.Element;
-    Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, leadingVisual: LeadingVisual, padding, verticalAlign, horizontalAlign, className, ...rest }: BentoContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Bento: (({ className, ...rest }: BentoProps) => React.JSX.Element) & {
+    Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => React.JSX.Element;
+    Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => React.JSX.Element;
+    Content: ({ children, leadingVisual: LeadingVisual, padding, verticalAlign, horizontalAlign, className, ...rest }: BentoContentProps) => React.JSX.Element;
     Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<BentoHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 };
 export {};

package/esm/Bento/Bento.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { Heading as n } from "../Heading/Heading.js";
 import { Image as r } from "../Image/Image.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image} from '../'\nimport {Label, type LabelProps} from '../Label'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'\nexport type ColumnIndex = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' \| 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' \| 'center' \| 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' \| 'normal' \| 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' \| 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps \| BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n columnStart?: ColumnIndex \| ResponsiveColumnIndex\n columnSpan?: ColumnIndex \| ResponsiveColumnIndex\n rowStart?: number \| ResponsiveRowIndex\n rowSpan?: number \| ResponsiveRowIndex\n flow?: Flow \| ResponsiveFlow\n colorMode?: ColorMode\n visualAsBackground?: boolean\n order?: Order \| ResponsiveOrder\n bgColor?: 'default' \| 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n classIdentifier: string,\n propName: string,\n prop?:\n \| ResponsiveColumnIndex\n \| ColumnIndex\n \| ResponsiveRowIndex\n \| number\n \| ResponsiveFlow\n \| Flow\n \| ResponsiveAlign\n \| Align\n \| ResponsivePadding\n \| Padding,\n) => {\n const classesToMerge: string[] = []\n if (typeof prop === 'number' \|\| typeof prop === 'string') {\n classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n } else if (typeof prop === 'object') {\n for (const [key, value] of Object.entries(prop)) {\n classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n }\n }\n return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n order: Order \| ResponsiveOrder\n children: React.ReactNode\n currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n if (typeof order === 'string') {\n return order === 'default' ? children : React.Children.toArray(children).reverse()\n } else if (typeof order === 'object' && currentBreakpointSize) {\n // This handles setting the order based on breakpoints as you might expect via CSS\n const filledStyleOrder: ResponsiveOrder = {}\n let previousSize: Order = 'default'\n for (const size of Object.keys(BreakpointSize)) {\n const lowerCaseSize = size.toLocaleLowerCase()\n if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] \|\| previousSize\n }\n return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n } else {\n return children\n }\n}\n\nconst Item = ({\n className,\n columnStart,\n columnSpan = 12,\n rowStart,\n rowSpan = 2,\n flow = 'row',\n colorMode,\n visualAsBackground = false,\n order = 'default',\n bgColor = 'subtle',\n children,\n ...rest\n}: BentoItemProps) => {\n const {currentBreakpointSize} = useWindowSize()\n\n const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n acc.push(child)\n }\n if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n acc.push(child)\n }\n return acc\n }, [])\n\n const contentChildPadding =\n validChildren.find(\n (child): child is React.ReactElement<BentoContentProps> =>\n React.isValidElement<BentoContentProps>(child) && child.type === Content,\n )?.props.padding \|\| 'spacious'\n\n const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n bentoItemClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n )\n\n if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n if (flow === 'column') {\n bentoItemClassArray.push(styles['Bento-column-padding-override'])\n }\n if (flow === 'row') {\n bentoItemClassArray.push(styles['Bento-row-padding-override'])\n }\n }\n\n const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n return (\n <div\n {...colorModeProp}\n className={clsx(\n ...bentoItemClassArray,\n (visualAsBackground \|\| React.Children.toArray(children).length === 1) &&\n styles[`Bento__Item--visual-as-background`],\n className,\n )}\n {...rest}\n >\n {orderedChildren}\n </div>\n )\n}\n\ntype BentoContentProps = {\n leadingVisual?: ReactElement<IconProps>\n padding?: Padding \| ResponsivePadding\n verticalAlign?: Align \| ResponsiveAlign\n horizontalAlign?: Exclude<Align, 'end'> \| Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Content = ({\n children,\n leadingVisual: LeadingVisual,\n padding = 'spacious',\n verticalAlign,\n horizontalAlign = 'start',\n className,\n ...rest\n}: BentoContentProps) => {\n const bentoContentClassArray = [styles.Bento__Content]\n bentoContentClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n )\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChildren = memoizedChildren.filter(\n (child): child is React.ReactElement<BentoHeadingProps> =>\n React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n )\n\n const LabelChild = memoizedChildren.find(\n (child): child is React.ReactElement<LabelProps> => React.isValidElement<LabelProps>(child) && child.type === Label,\n )\n const TextChild = memoizedChildren.find(\n (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n )\n const LinkChild = memoizedChildren.find(\n (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n )\n\n const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild)\n\n if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento.')\n }\n\n return (\n <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n {React.isValidElement<IconProps>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: styles['Bento__Content-icon'],\n size: LeadingVisual.props.size \|\| 44,\n })}\n\n {usesDeprecatedLabel &&\n React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {\n className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n })}\n\n {HeadingChildren.map(HeadingChild =>\n React.cloneElement(HeadingChild, {\n className: clsx(\n !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n HeadingChild.props.className,\n ),\n }),\n )}\n\n {React.isValidElement<TextProps>(TextChild) &&\n React.cloneElement(TextChild, {\n variant: TextChild.props.variant \|\| 'muted',\n as: TextChild.props.as \|\| 'p',\n size: TextChild.props.size \|\| '300',\n className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n })}\n\n {React.isValidElement<LinkProps>(LinkChild) &&\n React.cloneElement(LinkChild, {\n variant: LinkChild.props.variant \|\| 'accent',\n className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n })}\n </div>\n )\n}\n\ntype BentoHeadingProps = {\n variant?: 'default' \| 'muted'\n} & BaseProps<HTMLHeadingElement> &\n HeadingProps\n\nconst _Heading = forwardRef(\n (\n {\n as = 'h3',\n size = '5',\n weight = 'medium',\n variant = 'default',\n className,\n children,\n ...props\n }: PropsWithChildren<BentoHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em')) {\n return 'muted'\n }\n return 'default'\n }, [children])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n defaultColor === 'muted' && styles[`Bento__heading--muted`],\n variant === 'muted' && styles[`Bento__heading--muted`],\n className,\n )}\n size={size}\n as={as}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype BentoVisualProps = {\n horizontalAlign?: Align\n verticalAlign?: Align\n fillMedia?: boolean\n overflow?: 'hidden' \| 'initial'\n position?: string\n padding?: Padding \| ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Visual = ({\n horizontalAlign,\n verticalAlign,\n fillMedia = true,\n overflow = 'hidden',\n position = '50% 50%',\n padding,\n className,\n children,\n ...rest\n}: BentoVisualProps) => {\n const bentoVisualClassArray = [\n styles.Bento__Visual,\n horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n styles[`Bento__Visual--overflow-${overflow}`],\n ]\n bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n const childrenToRender = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n return child\n }\n return null\n })\n return (\n <div\n className={clsx(\n ...bentoVisualClassArray,\n fillMedia && styles['Bento__Visual--fill'],\n !fillMedia && styles['Bento__Visual--no-fill'],\n className,\n )}\n {...rest}\n >\n {childrenToRender}\n </div>\n )\n}\n\n/*\n Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image} from '../'\nimport {Label, type LabelProps} from '../Label'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'\nexport type ColumnIndex = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' \| 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' \| 'center' \| 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' \| 'normal' \| 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' \| 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps \| BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n columnStart?: ColumnIndex \| ResponsiveColumnIndex\n columnSpan?: ColumnIndex \| ResponsiveColumnIndex\n rowStart?: number \| ResponsiveRowIndex\n rowSpan?: number \| ResponsiveRowIndex\n flow?: Flow \| ResponsiveFlow\n colorMode?: ColorMode\n visualAsBackground?: boolean\n order?: Order \| ResponsiveOrder\n bgColor?: 'default' \| 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n classIdentifier: string,\n propName: string,\n prop?:\n \| ResponsiveColumnIndex\n \| ColumnIndex\n \| ResponsiveRowIndex\n \| number\n \| ResponsiveFlow\n \| Flow\n \| ResponsiveAlign\n \| Align\n \| ResponsivePadding\n \| Padding,\n) => {\n const classesToMerge: string[] = []\n if (typeof prop === 'number' \|\| typeof prop === 'string') {\n classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n } else if (typeof prop === 'object') {\n for (const [key, value] of Object.entries(prop)) {\n classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n }\n }\n return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n order: Order \| ResponsiveOrder\n children: React.ReactNode\n currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n if (typeof order === 'string') {\n return order === 'default' ? children : React.Children.toArray(children).reverse()\n } else if (typeof order === 'object' && currentBreakpointSize) {\n // This handles setting the order based on breakpoints as you might expect via CSS\n const filledStyleOrder: ResponsiveOrder = {}\n let previousSize: Order = 'default'\n for (const size of Object.keys(BreakpointSize)) {\n const lowerCaseSize = size.toLocaleLowerCase()\n if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] \|\| previousSize\n }\n return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n } else {\n return children\n }\n}\n\nconst Item = ({\n className,\n columnStart,\n columnSpan = 12,\n rowStart,\n rowSpan = 2,\n flow = 'row',\n colorMode,\n visualAsBackground = false,\n order = 'default',\n bgColor = 'subtle',\n children,\n ...rest\n}: BentoItemProps) => {\n const {currentBreakpointSize} = useWindowSize()\n\n const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n acc.push(child)\n }\n if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n acc.push(child)\n }\n return acc\n }, [])\n\n const contentChildPadding =\n validChildren.find(\n (child): child is React.ReactElement<BentoContentProps> =>\n React.isValidElement<BentoContentProps>(child) && child.type === Content,\n )?.props.padding \|\| 'spacious'\n\n const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n bentoItemClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n )\n\n if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n if (flow === 'column') {\n bentoItemClassArray.push(styles['Bento-column-padding-override'])\n }\n if (flow === 'row') {\n bentoItemClassArray.push(styles['Bento-row-padding-override'])\n }\n }\n\n const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n return (\n <div\n {...colorModeProp}\n className={clsx(\n ...bentoItemClassArray,\n (visualAsBackground \|\| React.Children.toArray(children).length === 1) &&\n styles[`Bento__Item--visual-as-background`],\n className,\n )}\n {...rest}\n >\n {orderedChildren}\n </div>\n )\n}\n\ntype BentoContentProps = {\n leadingVisual?: ReactElement<IconProps>\n padding?: Padding \| ResponsivePadding\n verticalAlign?: Align \| ResponsiveAlign\n horizontalAlign?: Exclude<Align, 'end'> \| Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Content = ({\n children,\n leadingVisual: LeadingVisual,\n padding = 'spacious',\n verticalAlign,\n horizontalAlign = 'start',\n className,\n ...rest\n}: BentoContentProps) => {\n const bentoContentClassArray = [styles.Bento__Content]\n bentoContentClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n )\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChildren = memoizedChildren.filter(\n (child): child is React.ReactElement<BentoHeadingProps> =>\n React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n )\n\n const LabelChild = memoizedChildren.find(\n (child): child is React.ReactElement<LabelProps> => React.isValidElement<LabelProps>(child) && child.type === Label,\n )\n const TextChild = memoizedChildren.find(\n (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n )\n const LinkChild = memoizedChildren.find(\n (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n )\n\n const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild)\n\n if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento.')\n }\n\n return (\n <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n {React.isValidElement<IconProps>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: styles['Bento__Content-icon'],\n size: LeadingVisual.props.size \|\| 44,\n })}\n\n {usesDeprecatedLabel &&\n React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {\n className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n })}\n\n {HeadingChildren.map(HeadingChild =>\n React.cloneElement(HeadingChild, {\n className: clsx(\n !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n HeadingChild.props.className,\n ),\n }),\n )}\n\n {React.isValidElement<TextProps>(TextChild) &&\n React.cloneElement(TextChild, {\n variant: TextChild.props.variant \|\| 'muted',\n as: TextChild.props.as \|\| 'p',\n size: TextChild.props.size \|\| '300',\n className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n })}\n\n {React.isValidElement<LinkProps>(LinkChild) &&\n React.cloneElement(LinkChild, {\n variant: LinkChild.props.variant \|\| 'accent',\n className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n })}\n </div>\n )\n}\n\ntype BentoHeadingProps = {\n variant?: 'default' \| 'muted'\n} & BaseProps<HTMLHeadingElement> &\n HeadingProps\n\nconst _Heading = forwardRef(\n (\n {\n as = 'h3',\n size = '5',\n weight = 'medium',\n variant = 'default',\n className,\n children,\n ...props\n }: PropsWithChildren<BentoHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em')) {\n return 'muted'\n }\n return 'default'\n }, [children])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n defaultColor === 'muted' && styles[`Bento__heading--muted`],\n variant === 'muted' && styles[`Bento__heading--muted`],\n className,\n )}\n size={size}\n as={as}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype BentoVisualProps = {\n horizontalAlign?: Align\n verticalAlign?: Align\n fillMedia?: boolean\n overflow?: 'hidden' \| 'initial'\n position?: string\n padding?: Padding \| ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Visual = ({\n horizontalAlign,\n verticalAlign,\n fillMedia = true,\n overflow = 'hidden',\n position = '50% 50%',\n padding,\n className,\n children,\n ...rest\n}: BentoVisualProps) => {\n const bentoVisualClassArray = [\n styles.Bento__Visual,\n horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n styles[`Bento__Visual--overflow-${overflow}`],\n ]\n bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n const childrenToRender = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n return child\n }\n return null\n })\n return (\n <div\n className={clsx(\n ...bentoVisualClassArray,\n fillMedia && styles['Bento__Visual--fill'],\n !fillMedia && styles['Bento__Visual--no-fill'],\n className,\n )}\n {...rest}\n >\n {childrenToRender}\n </div>\n )\n}\n\n/*\n Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":"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"}

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

@@ -1,15 +1,16 @@
-import './Bento.module-4fhgWKyL.css';var e = {
-	Bento: "Primer_Brand__Bento-module__Bento____h548",
-	Bento__Item: "Primer_Brand__Bento-module__Bento__Item___SEy6_",
+import './Bento.module-4fhgWKyL.css';//#region src/Bento/Bento.module.css
+var e = "Primer_Brand__Bento-module__Bento____h548", t = "Primer_Brand__Bento-module__Bento__Item___SEy6_", n = "Primer_Brand__Bento-module__Bento__Content___MlfVL", r = "Primer_Brand__Bento-module__Bento__Visual___fl3ZX", i = {
+	Bento: e,
+	Bento__Item: t,
 	"Bento__Item--bgColor-default": "Primer_Brand__Bento-module__Bento__Item--bgColor-default___Cdofb",
 	"Bento__Item--bgColor-subtle": "Primer_Brand__Bento-module__Bento__Item--bgColor-subtle___nh7EW",
 	"Bento__Item--visual-as-background": "Primer_Brand__Bento-module__Bento__Item--visual-as-background___p6wEV",
-	Bento__Content: "Primer_Brand__Bento-module__Bento__Content___MlfVL",
+	Bento__Content: n,
 	"Bento__Content-icon": "Primer_Brand__Bento-module__Bento__Content-icon___QiNqz",
 	"Bento__heading--no-text": "Primer_Brand__Bento-module__Bento__heading--no-text___KZzv4",
 	"Bento__heading--muted": "Primer_Brand__Bento-module__Bento__heading--muted___fwZBT",
 	"Bento__heading--with-max-width": "Primer_Brand__Bento-module__Bento__heading--with-max-width___RbXVR",
-	Bento__Visual: "Primer_Brand__Bento-module__Bento__Visual___fl3ZX",
+	Bento__Visual: r,
 	"Bento__Visual--overflow-hidden": "Primer_Brand__Bento-module__Bento__Visual--overflow-hidden___Atzfs",
 	"Bento__Visual--overflow-initial": "Primer_Brand__Bento-module__Bento__Visual--overflow-initial___bC1dM",
 	"Bento__Visual--horizontalAlign-center": "Primer_Brand__Bento-module__Bento__Visual--horizontalAlign-center___WM3rk",
@@ -451,6 +452,6 @@ import './Bento.module-4fhgWKyL.css';var e = {
 	"Bento-row-padding-override": "Primer_Brand__Bento-module__Bento-row-padding-override___DXC_D"
 };
 //#endregion
-export { e as default };
+export { e as Bento, n as Bento__Content, t as Bento__Item, r as Bento__Visual, i as default };
 //# sourceMappingURL=Bento.module.js.map

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

@@ -82,6 +82,6 @@ type BoxProps = {
  * Use Box to apply fine-grained styling to content.
  * @see https://primer.style/brand/components/Box
  */
-export declare const Box: ({ animate, children, className, "data-testid": testId, style, padding, paddingBlockStart, paddingInlineEnd, paddingBlockEnd, paddingInlineStart, margin, marginBlockStart, marginInlineEnd, marginBlockEnd, marginInlineStart, backgroundColor, borderRadius, borderWidth, borderBlockStartWidth, borderInlineEndWidth, borderBlockEndWidth, borderInlineStartWidth, borderColor, borderStyle, ...rest }: PropsWithChildren<BoxProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Box: ({ animate, children, className, "data-testid": testId, style, padding, paddingBlockStart, paddingInlineEnd, paddingBlockEnd, paddingInlineStart, margin, marginBlockStart, marginInlineEnd, marginBlockEnd, marginInlineStart, backgroundColor, borderRadius, borderWidth, borderBlockStartWidth, borderInlineEndWidth, borderBlockEndWidth, borderInlineStartWidth, borderColor, borderStyle, ...rest }: PropsWithChildren<BoxProps>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Box.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"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~~4CA0F7B~~,CAAA"}
1	+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAA;AACvD,OAAO,EAAC,YAAY,EAAe,MAAM,cAAc,CAAA;AACvD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAMnD,eAAO,MAAM,gBAAgB,kIAAyE,CAAA;AACtG,KAAK,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,oDAAqD,CAAA;AACrF,KAAK,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;AAExE,eAAO,MAAM,sBAAsB,yDAA0D,CAAA;AAC7F,KAAK,mBAAmB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAElE,eAAO,MAAM,qBAAqB,+CAAgD,CAAA;AAClF,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEhE,KAAK,wBAAwB,GAAG;IAC9B,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,qBAAqB,yCAA0C,CAAA;AAC5E,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEhE,KAAK,kBAAkB,GAAG,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAA;AAEvF,KAAK,QAAQ,GAAG;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IACxD;;OAEG;IACH,gBAAgB,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IACvD;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IACtD;;OAEG;IACH,kBAAkB,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IAIzD,MAAM,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IACvD;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IACtD;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IACrD;;OAEG;IACH,iBAAiB,CAAC,EAAE,aAAa,GAAG,oBAAoB,CAAA;IAIxD,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAIlC,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAIlC,WAAW,CAAC,EAAE,kBAAkB,GAAG,wBAAwB,CAAA;IAI3D,qBAAqB,CAAC,EAAE,kBAAkB,GAAG,wBAAwB,CAAA;IAIrE,oBAAoB,CAAC,EAAE,kBAAkB,GAAG,wBAAwB,CAAA;IAIpE,mBAAmB,CAAC,EAAE,kBAAkB,GAAG,wBAAwB,CAAA;IAInE,sBAAsB,CAAC,EAAE,kBAAkB,GAAG,wBAAwB,CAAA;IAItE,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAIhC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA4BtC;;;GAGG;AACH,eAAO,MAAM,GAAG,GAAI,0YA0BjB,iBAAiB,CAAC,QAAQ,CAAC,sBA0F7B,CAAA"}

package/esm/Box/Box.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Box.js","names":[],"sources":["../../src/Box/Box.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {PropsWithChildren, useMemo} from 'react'\nimport {AnimateProps, useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\nimport {BaseSizeScale} from '../constants'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './Box.module.css'\n\nexport const BoxSpacingValues = ['none', 'condensed', 'normal', 'spacious', ...BaseSizeScale] as const\ntype SpacingValues = (typeof BoxSpacingValues)[number]\n\ntype ResponsiveSpacingMap = {\n narrow?: SpacingValues\n regular?: SpacingValues\n wide?: SpacingValues\n}\n\nexport const BoxBackgroundColors = ['default', 'inset', 'subtle', 'overlay'] as const\ntype BackgroundColors = (typeof BoxBackgroundColors)[number] \| AnyString\n\nexport const BoxBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const\ntype BorderRadiusOptions = (typeof BoxBorderRadiusOptions)[number]\n\nexport const BoxBorderWidthOptions = ['none', 'thin', 'thick', 'thicker'] as const\ntype BorderWidthOptions = (typeof BoxBorderWidthOptions)[number]\n\ntype ResponsiveBorderWidthMap = {\n narrow?: BorderWidthOptions\n regular?: BorderWidthOptions\n wide?: BorderWidthOptions\n}\n\nexport const BoxBorderColorOptions = ['default', 'muted', 'subtle'] as const\ntype BorderColorOptions = (typeof BoxBorderColorOptions)[number]\n\ntype BorderStyleOptions = Extract<React.CSSProperties['borderStyle'], 'solid' \| 'none'>\n\ntype BoxProps = {\n /\n Adding padding all internal sides of the Box\n /\n padding?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal top side of the Box\n /\n paddingBlockStart?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal right side of the Box\n /\n paddingInlineEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal bottom side of the Box\n /\n paddingBlockEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal left side of the Box\n /\n paddingInlineStart?: SpacingValues \| ResponsiveSpacingMap\n /\n * Adding margin on all external sides of the Box\n /\n margin?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external top side of the Box\n /\n marginBlockStart?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external right side of the Box\n /\n marginInlineEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external bottom side of the Box\n /\n marginBlockEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external left side of the Box\n /\n marginInlineStart?: SpacingValues \| ResponsiveSpacingMap\n /\n * Apply a system-level background color\n /\n backgroundColor?: BackgroundColors\n /\n * Apply a system-level border radius value\n /\n borderRadius?: BorderRadiusOptions\n /\n * Apply a system-level border width value\n /\n borderWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderBlockStartWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderInlineEndWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderBlockEndWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderInlineStartWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a system-level border color value\n /\n borderColor?: BorderColorOptions\n /\n * Apply border style. Values corrospend to the CSS border-style property.\n /\n borderStyle?: BorderStyleOptions\n /\n Apply one-off animations to direct children of the Box\n /\n animate?: AnimateProps\n /\n Test id for the Box\n /\n 'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst isNamedBackgroundColor = (value: string): value is (typeof BoxBackgroundColors)[number] =>\n BoxBackgroundColors.includes(value as (typeof BoxBackgroundColors)[number])\n\nconst classBuilder = (\n property: string,\n value?:\n \| SpacingValues\n \| ResponsiveSpacingMap\n \| BackgroundColors\n \| BorderRadiusOptions\n \| BorderWidthOptions\n \| ResponsiveBorderWidthMap\n \| BorderColorOptions\n \| BorderStyleOptions,\n) => {\n if (!value) return ''\n\n if (typeof value === 'string' \|\| typeof value === 'number') {\n return styles[`Box-${property}--${value}`]\n } else {\n return Object.keys(value)\n .map(viewport => styles[`Box-${viewport}-${property}--${value[viewport]}`])\n .join(' ')\n }\n}\n\n/\n Use Box to apply fine-grained styling to content.\n * @see https://primer.style/brand/components/Box\n */\nexport const Box = ({\n animate,\n children,\n className,\n 'data-testid': testId,\n style,\n padding,\n paddingBlockStart,\n paddingInlineEnd,\n paddingBlockEnd,\n paddingInlineStart,\n margin,\n marginBlockStart,\n marginInlineEnd,\n marginBlockEnd,\n marginInlineStart,\n backgroundColor,\n borderRadius,\n borderWidth,\n borderBlockStartWidth,\n borderInlineEndWidth,\n borderBlockEndWidth,\n borderInlineStartWidth,\n borderColor,\n borderStyle,\n ...rest\n}: PropsWithChildren<BoxProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const paddingClasses = useMemo(() => classBuilder('padding', padding), [padding])\n const paddingBlockStartClasses = useMemo(\n () => classBuilder('paddingBlockStart', paddingBlockStart),\n [paddingBlockStart],\n )\n const paddingInlineEndClasses = useMemo(() => classBuilder('paddingInlineEnd', paddingInlineEnd), [paddingInlineEnd])\n const paddingBlockEndClasses = useMemo(() => classBuilder('paddingBlockEnd', paddingBlockEnd), [paddingBlockEnd])\n const paddingInlineStartClasses = useMemo(\n () => classBuilder('paddingInlineStart', paddingInlineStart),\n [paddingInlineStart],\n )\n const marginClasses = useMemo(() => classBuilder('margin', margin), [margin])\n const marginBlockStartClasses = useMemo(() => classBuilder('marginBlockStart', marginBlockStart), [marginBlockStart])\n const marginInlineEndClasses = useMemo(() => classBuilder('marginInlineEnd', marginInlineEnd), [marginInlineEnd])\n const marginBlockEndClasses = useMemo(() => classBuilder('marginBlockEnd', marginBlockEnd), [marginBlockEnd])\n const marginInlineStartClasses = useMemo(\n () => classBuilder('marginInlineStart', marginInlineStart),\n [marginInlineStart],\n )\n const backgroundColorClasses = useMemo(\n () =>\n backgroundColor && isNamedBackgroundColor(backgroundColor)\n ? classBuilder('backgroundColor', backgroundColor)\n : '',\n [backgroundColor],\n )\n const backgroundColorStyles = useMemo(\n () => (backgroundColor && !isNamedBackgroundColor(backgroundColor) ? {backgroundColor} : {}),\n [backgroundColor],\n )\n const borderRadiusClasses = useMemo(() => classBuilder('borderRadius', borderRadius), [borderRadius])\n const borderWidthClasses = useMemo(() => classBuilder('borderWidth', borderWidth), [borderWidth])\n const borderBlockStartWidthClasses = useMemo(\n () => classBuilder('borderBlockStartWidth', borderBlockStartWidth),\n [borderBlockStartWidth],\n )\n const borderInlineEndWidthClasses = useMemo(\n () => classBuilder('borderInlineEndWidth', borderInlineEndWidth),\n [borderInlineEndWidth],\n )\n const borderBlockEndWidthClasses = useMemo(\n () => classBuilder('borderBlockEndWidth', borderBlockEndWidth),\n [borderBlockEndWidth],\n )\n const borderInlineStartWidthClasses = useMemo(\n () => classBuilder('borderInlineStartWidth', borderInlineStartWidth),\n [borderInlineStartWidth],\n )\n const borderColorClasses = useMemo(() => classBuilder('borderColor', borderColor), [borderColor])\n const borderStyleClasses = useMemo(() => classBuilder('borderStyle', borderStyle), [borderStyle])\n\n return (\n <div\n className={clsx(\n animationClasses,\n paddingClasses,\n paddingBlockStartClasses,\n paddingInlineEndClasses,\n paddingBlockEndClasses,\n paddingInlineStartClasses,\n marginClasses,\n marginBlockStartClasses,\n marginInlineEndClasses,\n marginBlockEndClasses,\n marginInlineStartClasses,\n backgroundColorClasses,\n borderRadiusClasses,\n borderWidthClasses,\n borderBlockStartWidthClasses,\n borderInlineEndWidthClasses,\n borderBlockEndWidthClasses,\n borderInlineStartWidthClasses,\n borderColorClasses,\n borderStyleClasses,\n className,\n )}\n data-testid={testId}\n style={{\n ...animationInlineStyles,\n ...backgroundColorStyles,\n ...style,\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;;;AASA,IAAa,IAAmB;CAAC;CAAQ;CAAa;CAAU;CAAY,GAAG;CAAc,EAShF,IAAsB;CAAC;CAAW;CAAS;CAAU;CAAU,EAG/D,IAAyB;CAAC;CAAS;CAAU;CAAS;CAAU;CAAO,EAGvE,IAAwB;CAAC;CAAQ;CAAQ;CAAS;CAAU,EAS5D,IAAwB;CAAC;CAAW;CAAS;CAAS,EA6F7D,KAA0B,MAC9B,EAAoB,SAAS,EAA8C,EAEvE,KACJ,GACA,MAUK,IAED,OAAO,KAAU,YAAY,OAAO,KAAU,WACzC,EAAO,OAAO,EAAS,IAAI,OAE3B,OAAO,KAAK,EAAM,CACtB,KAAI,MAAY,EAAO,OAAO,EAAS,GAAG,EAAS,IAAI,EAAM,MAAa,CAC1E,KAAK,IAAI,GAPK,IAeR,KAAO,EAClB,YACA,aACA,cACA,eAAe,GACf,UACA,YACA,sBACA,qBACA,oBACA,uBACA,WACA,qBACA,oBACA,mBACA,sBACA,oBACA,iBACA,gBACA,0BACA,yBACA,wBACA,2BACA,gBACA,gBACA,GAAG,QAC8B;CACjC,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,QAAc,EAAa,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EAC3E,IAA2B,QACzB,EAAa,qBAAqB,EAAkB,EAC1D,CAAC,EAAkB,CACpB,EACK,IAA0B,QAAc,EAAa,oBAAoB,EAAiB,EAAE,CAAC,EAAiB,CAAC,EAC/G,IAAyB,QAAc,EAAa,mBAAmB,EAAgB,EAAE,CAAC,EAAgB,CAAC,EAC3G,IAA4B,QAC1B,EAAa,sBAAsB,EAAmB,EAC5D,CAAC,EAAmB,CACrB,EACK,IAAgB,QAAc,EAAa,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACvE,IAA0B,QAAc,EAAa,oBAAoB,EAAiB,EAAE,CAAC,EAAiB,CAAC,EAC/G,IAAyB,QAAc,EAAa,mBAAmB,EAAgB,EAAE,CAAC,EAAgB,CAAC,EAC3G,IAAwB,QAAc,EAAa,kBAAkB,EAAe,EAAE,CAAC,EAAe,CAAC,EACvG,IAA2B,QACzB,EAAa,qBAAqB,EAAkB,EAC1D,CAAC,EAAkB,CACpB,EACK,IAAyB,QAE3B,KAAmB,EAAuB,EAAgB,GACtD,EAAa,mBAAmB,EAAgB,GAChD,IACN,CAAC,EAAgB,CAClB,EACK,IAAwB,QACrB,KAAmB,CAAC,EAAuB,EAAgB,GAAG,EAAC,oBAAgB,GAAG,EAAE,EAC3F,CAAC,EAAgB,CAClB;AAsBD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GAnCsB,QAAc,EAAa,gBAAgB,EAAa,EAAE,CAAC,EAAa,CAoC9F,EAnCqB,QAAc,EAAa,eAAe,EAAY,EAAE,CAAC,EAAY,CAoC1F,EAnC+B,QAC7B,EAAa,yBAAyB,EAAsB,EAClE,CAAC,EAAsB,CAkCnB,EAhC8B,QAC5B,EAAa,wBAAwB,EAAqB,EAChE,CAAC,EAAqB,CA+BlB,EA7B6B,QAC3B,EAAa,uBAAuB,EAAoB,EAC9D,CAAC,EAAoB,CA4BjB,EA1BgC,QAC9B,EAAa,0BAA0B,EAAuB,EACpE,CAAC,EAAuB,CAyBpB,EAvBqB,QAAc,EAAa,eAAe,EAAY,EAAE,CAAC,EAAY,CAwB1F,EAvBqB,QAAc,EAAa,eAAe,EAAY,EAAE,CAAC,EAAY,CAwB1F,EACA,EACD;EACD,eAAa;EACb,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EAEH;EACG,CAAA"}
1	+ {"version":3,"file":"Box.js","names":[],"sources":["../../src/Box/Box.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {PropsWithChildren, useMemo} from 'react'\nimport {AnimateProps, useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\nimport {BaseSizeScale} from '../constants'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './Box.module.css'\n\nexport const BoxSpacingValues = ['none', 'condensed', 'normal', 'spacious', ...BaseSizeScale] as const\ntype SpacingValues = (typeof BoxSpacingValues)[number]\n\ntype ResponsiveSpacingMap = {\n narrow?: SpacingValues\n regular?: SpacingValues\n wide?: SpacingValues\n}\n\nexport const BoxBackgroundColors = ['default', 'inset', 'subtle', 'overlay'] as const\ntype BackgroundColors = (typeof BoxBackgroundColors)[number] \| AnyString\n\nexport const BoxBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const\ntype BorderRadiusOptions = (typeof BoxBorderRadiusOptions)[number]\n\nexport const BoxBorderWidthOptions = ['none', 'thin', 'thick', 'thicker'] as const\ntype BorderWidthOptions = (typeof BoxBorderWidthOptions)[number]\n\ntype ResponsiveBorderWidthMap = {\n narrow?: BorderWidthOptions\n regular?: BorderWidthOptions\n wide?: BorderWidthOptions\n}\n\nexport const BoxBorderColorOptions = ['default', 'muted', 'subtle'] as const\ntype BorderColorOptions = (typeof BoxBorderColorOptions)[number]\n\ntype BorderStyleOptions = Extract<React.CSSProperties['borderStyle'], 'solid' \| 'none'>\n\ntype BoxProps = {\n /\n Adding padding all internal sides of the Box\n /\n padding?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal top side of the Box\n /\n paddingBlockStart?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal right side of the Box\n /\n paddingInlineEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal bottom side of the Box\n /\n paddingBlockEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding padding on the internal left side of the Box\n /\n paddingInlineStart?: SpacingValues \| ResponsiveSpacingMap\n /\n * Adding margin on all external sides of the Box\n /\n margin?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external top side of the Box\n /\n marginBlockStart?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external right side of the Box\n /\n marginInlineEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external bottom side of the Box\n /\n marginBlockEnd?: SpacingValues \| ResponsiveSpacingMap\n /\n Adding margin on the external left side of the Box\n /\n marginInlineStart?: SpacingValues \| ResponsiveSpacingMap\n /\n * Apply a system-level background color\n /\n backgroundColor?: BackgroundColors\n /\n * Apply a system-level border radius value\n /\n borderRadius?: BorderRadiusOptions\n /\n * Apply a system-level border width value\n /\n borderWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderBlockStartWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderInlineEndWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderBlockEndWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a directional border width value\n /\n borderInlineStartWidth?: BorderWidthOptions \| ResponsiveBorderWidthMap\n /\n * Apply a system-level border color value\n /\n borderColor?: BorderColorOptions\n /\n * Apply border style. Values corrospend to the CSS border-style property.\n /\n borderStyle?: BorderStyleOptions\n /\n Apply one-off animations to direct children of the Box\n /\n animate?: AnimateProps\n /\n Test id for the Box\n /\n 'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst isNamedBackgroundColor = (value: string): value is (typeof BoxBackgroundColors)[number] =>\n BoxBackgroundColors.includes(value as (typeof BoxBackgroundColors)[number])\n\nconst classBuilder = (\n property: string,\n value?:\n \| SpacingValues\n \| ResponsiveSpacingMap\n \| BackgroundColors\n \| BorderRadiusOptions\n \| BorderWidthOptions\n \| ResponsiveBorderWidthMap\n \| BorderColorOptions\n \| BorderStyleOptions,\n) => {\n if (!value) return ''\n\n if (typeof value === 'string' \|\| typeof value === 'number') {\n return styles[`Box-${property}--${value}`]\n } else {\n return Object.keys(value)\n .map(viewport => styles[`Box-${viewport}-${property}--${value[viewport]}`])\n .join(' ')\n }\n}\n\n/\n Use Box to apply fine-grained styling to content.\n * @see https://primer.style/brand/components/Box\n */\nexport const Box = ({\n animate,\n children,\n className,\n 'data-testid': testId,\n style,\n padding,\n paddingBlockStart,\n paddingInlineEnd,\n paddingBlockEnd,\n paddingInlineStart,\n margin,\n marginBlockStart,\n marginInlineEnd,\n marginBlockEnd,\n marginInlineStart,\n backgroundColor,\n borderRadius,\n borderWidth,\n borderBlockStartWidth,\n borderInlineEndWidth,\n borderBlockEndWidth,\n borderInlineStartWidth,\n borderColor,\n borderStyle,\n ...rest\n}: PropsWithChildren<BoxProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const paddingClasses = useMemo(() => classBuilder('padding', padding), [padding])\n const paddingBlockStartClasses = useMemo(\n () => classBuilder('paddingBlockStart', paddingBlockStart),\n [paddingBlockStart],\n )\n const paddingInlineEndClasses = useMemo(() => classBuilder('paddingInlineEnd', paddingInlineEnd), [paddingInlineEnd])\n const paddingBlockEndClasses = useMemo(() => classBuilder('paddingBlockEnd', paddingBlockEnd), [paddingBlockEnd])\n const paddingInlineStartClasses = useMemo(\n () => classBuilder('paddingInlineStart', paddingInlineStart),\n [paddingInlineStart],\n )\n const marginClasses = useMemo(() => classBuilder('margin', margin), [margin])\n const marginBlockStartClasses = useMemo(() => classBuilder('marginBlockStart', marginBlockStart), [marginBlockStart])\n const marginInlineEndClasses = useMemo(() => classBuilder('marginInlineEnd', marginInlineEnd), [marginInlineEnd])\n const marginBlockEndClasses = useMemo(() => classBuilder('marginBlockEnd', marginBlockEnd), [marginBlockEnd])\n const marginInlineStartClasses = useMemo(\n () => classBuilder('marginInlineStart', marginInlineStart),\n [marginInlineStart],\n )\n const backgroundColorClasses = useMemo(\n () =>\n backgroundColor && isNamedBackgroundColor(backgroundColor)\n ? classBuilder('backgroundColor', backgroundColor)\n : '',\n [backgroundColor],\n )\n const backgroundColorStyles = useMemo(\n () => (backgroundColor && !isNamedBackgroundColor(backgroundColor) ? {backgroundColor} : {}),\n [backgroundColor],\n )\n const borderRadiusClasses = useMemo(() => classBuilder('borderRadius', borderRadius), [borderRadius])\n const borderWidthClasses = useMemo(() => classBuilder('borderWidth', borderWidth), [borderWidth])\n const borderBlockStartWidthClasses = useMemo(\n () => classBuilder('borderBlockStartWidth', borderBlockStartWidth),\n [borderBlockStartWidth],\n )\n const borderInlineEndWidthClasses = useMemo(\n () => classBuilder('borderInlineEndWidth', borderInlineEndWidth),\n [borderInlineEndWidth],\n )\n const borderBlockEndWidthClasses = useMemo(\n () => classBuilder('borderBlockEndWidth', borderBlockEndWidth),\n [borderBlockEndWidth],\n )\n const borderInlineStartWidthClasses = useMemo(\n () => classBuilder('borderInlineStartWidth', borderInlineStartWidth),\n [borderInlineStartWidth],\n )\n const borderColorClasses = useMemo(() => classBuilder('borderColor', borderColor), [borderColor])\n const borderStyleClasses = useMemo(() => classBuilder('borderStyle', borderStyle), [borderStyle])\n\n return (\n <div\n className={clsx(\n animationClasses,\n paddingClasses,\n paddingBlockStartClasses,\n paddingInlineEndClasses,\n paddingBlockEndClasses,\n paddingInlineStartClasses,\n marginClasses,\n marginBlockStartClasses,\n marginInlineEndClasses,\n marginBlockEndClasses,\n marginInlineStartClasses,\n backgroundColorClasses,\n borderRadiusClasses,\n borderWidthClasses,\n borderBlockStartWidthClasses,\n borderInlineEndWidthClasses,\n borderBlockEndWidthClasses,\n borderInlineStartWidthClasses,\n borderColorClasses,\n borderStyleClasses,\n className,\n )}\n data-testid={testId}\n style={{\n ...animationInlineStyles,\n ...backgroundColorStyles,\n ...style,\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;;;AASA,IAAa,IAAmB;CAAC;CAAQ;CAAa;CAAU;CAAY,GAAG;AAAa,GAS/E,IAAsB;CAAC;CAAW;CAAS;CAAU;AAAS,GAG9D,IAAyB;CAAC;CAAS;CAAU;CAAS;CAAU;AAAM,GAGtE,IAAwB;CAAC;CAAQ;CAAQ;CAAS;AAAS,GAS3D,IAAwB;CAAC;CAAW;CAAS;AAAQ,GA6F5D,KAA0B,MAC9B,EAAoB,SAAS,CAA6C,GAEtE,KACJ,GACA,MAUK,IAED,OAAO,KAAU,YAAY,OAAO,KAAU,WACzC,EAAO,OAAO,EAAS,IAAI,OAE3B,OAAO,KAAK,CAAK,CAAC,CACtB,KAAI,MAAY,EAAO,OAAO,EAAS,GAAG,EAAS,IAAI,EAAM,KAAY,CAAC,CAC1E,KAAK,GAAG,IAPM,IAeR,KAAO,EAClB,YACA,aACA,cACA,eAAe,GACf,UACA,YACA,sBACA,qBACA,oBACA,uBACA,WACA,qBACA,oBACA,mBACA,sBACA,oBACA,iBACA,gBACA,0BACA,yBACA,wBACA,2BACA,gBACA,gBACA,GAAG,QAC8B;CACjC,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,IAAiB,QAAc,EAAa,WAAW,CAAO,GAAG,CAAC,CAAO,CAAC,GAC1E,IAA2B,QACzB,EAAa,qBAAqB,CAAiB,GACzD,CAAC,CAAiB,CACpB,GACM,IAA0B,QAAc,EAAa,oBAAoB,CAAgB,GAAG,CAAC,CAAgB,CAAC,GAC9G,IAAyB,QAAc,EAAa,mBAAmB,CAAe,GAAG,CAAC,CAAe,CAAC,GAC1G,IAA4B,QAC1B,EAAa,sBAAsB,CAAkB,GAC3D,CAAC,CAAkB,CACrB,GACM,IAAgB,QAAc,EAAa,UAAU,CAAM,GAAG,CAAC,CAAM,CAAC,GACtE,IAA0B,QAAc,EAAa,oBAAoB,CAAgB,GAAG,CAAC,CAAgB,CAAC,GAC9G,IAAyB,QAAc,EAAa,mBAAmB,CAAe,GAAG,CAAC,CAAe,CAAC,GAC1G,IAAwB,QAAc,EAAa,kBAAkB,CAAc,GAAG,CAAC,CAAc,CAAC,GACtG,IAA2B,QACzB,EAAa,qBAAqB,CAAiB,GACzD,CAAC,CAAiB,CACpB,GACM,IAAyB,QAE3B,KAAmB,EAAuB,CAAe,IACrD,EAAa,mBAAmB,CAAe,IAC/C,IACN,CAAC,CAAe,CAClB,GACM,IAAwB,QACrB,KAAmB,CAAC,EAAuB,CAAe,IAAI,EAAC,mBAAe,IAAI,CAAC,GAC1F,CAAC,CAAe,CAClB;CAsBA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GAnCsB,QAAc,EAAa,gBAAgB,CAAY,GAAG,CAAC,CAAY,CAoC7F,GAnCqB,QAAc,EAAa,eAAe,CAAW,GAAG,CAAC,CAAW,CAoCzF,GAnC+B,QAC7B,EAAa,yBAAyB,CAAqB,GACjE,CAAC,CAAqB,CAkClB,GAhC8B,QAC5B,EAAa,wBAAwB,CAAoB,GAC/D,CAAC,CAAoB,CA+BjB,GA7B6B,QAC3B,EAAa,uBAAuB,CAAmB,GAC7D,CAAC,CAAmB,CA4BhB,GA1BgC,QAC9B,EAAa,0BAA0B,CAAsB,GACnE,CAAC,CAAsB,CAyBnB,GAvBqB,QAAc,EAAa,eAAe,CAAW,GAAG,CAAC,CAAW,CAwBzF,GAvBqB,QAAc,EAAa,eAAe,CAAW,GAAG,CAAC,CAAW,CAwBzF,GACA,CACF;EACA,eAAa;EACb,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG;EACL;EACA,GAAI;EAEH;CACE,CAAA;AAET"}

package/esm/Breadcrumbs/Breadcrumbs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { InlineLink as n } from "../InlineLink/InlineLink.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes-DYugDcQy.css';/* empty css                                                                                                         */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumbs.js","names":[],"sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Breadcrumbs.module.css'\nimport {InlineLink} from '../InlineLink'\nimport {Text} from '../Text'\n\nexport const BreadcrumbVariants = ['default', 'accent'] as const\n\nexport type BreadcrumbsProps = {\n variant?: (typeof BreadcrumbVariants)[number]\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\n/\n Breadcrumbs parent element\n * <Breadcrumbs>\n /\n\nconst _Root = forwardRef<HTMLElement, BreadcrumbsProps>(({className, children, variant = 'default', ...rest}, ref) => {\n return (\n <nav\n ref={ref}\n className={clsx(styles.Breadcrumbs, styles[`Breadcrumbs--${variant}`])}\n aria-label=\"Breadcrumbs\"\n {...rest}\n >\n <ol className={clsx(styles.Breadcrumbs__list)}>{children}</ol>\n </nav>\n )\n})\n\ntype ItemProps = {\n href: string\n selected?: boolean\n} & BaseProps<HTMLAnchorElement> &\n React.HTMLAttributes<HTMLAnchorElement>\n\nconst _Item = forwardRef<HTMLAnchorElement, ItemProps>(({className, children, href, selected, ...rest}, ref) => {\n return (\n <li className={styles.Breadcrumbs__item}>\n {selected ? (\n <Text\n size=\"100\"\n variant=\"muted\"\n className={clsx(styles.Breadcrumbs__link, styles['Breadcrumbs__link--selected'], className)}\n aria-current=\"page\"\n {...rest}\n >\n {children}\n </Text>\n ) : (\n <InlineLink href={href} ref={ref} className={clsx(styles.Breadcrumbs__link, className)} {...rest}>\n {children}\n </InlineLink>\n )}\n </li>\n )\n})\n\n/\n Use Breadcrumbs to display the current location within a navigational hierarchy.\n * @see https://primer.style/brand/components/Breadcrumbs\n */\nexport const Breadcrumbs = Object.assign(_Root, {\n Item: _Item,\n})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAqB,CAAC,WAAW,~~SAAS~~,~~EAYjD~~,IAAQ,GAA2C,EAAC,cAAW,aAAU,aAAU,WAAW,GAAG,KAAO,MAE1G,kBAAC,OAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,EAAO,gBAAgB,~~KAAW~~;~~CACtE~~,cAAW;CACX,GAAI;WAEJ,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,~~kBAAkB~~;~~EAAG~~;~~EAAc~~,CAAA;~~CAC1D~~,CAAA,CAER,~~EAQI~~,IAAQ,GAA0C,EAAC,cAAW,aAAU,SAAM,aAAU,GAAG,KAAO,MAEpG,kBAAC,MAAD;CAAI,WAAW,EAAO;WACnB,IACC,kBAAC,GAAD;EACE,MAAK;EACL,SAAQ;EACR,WAAW,EAAK,EAAO,mBAAmB,EAAO,gCAAgC,~~EAAU~~;~~EAC3F~~,gBAAa;EACb,GAAI;EAEH;~~EACI~~,CAAA,~~GAEP~~,kBAAC,GAAD;EAAkB;EAAW;EAAK,WAAW,EAAK,EAAO,mBAAmB,~~EAAU~~;~~EAAE~~,GAAI;EACzF;~~EACU~~,CAAA;~~CAEZ~~,CAAA,CAEP,~~EAMW~~,IAAc,OAAO,OAAO,GAAO,EAC9C,MAAM,~~GACP~~,CAAC"}
1	+ {"version":3,"file":"Breadcrumbs.js","names":[],"sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Breadcrumbs.module.css'\nimport {InlineLink} from '../InlineLink'\nimport {Text} from '../Text'\n\nexport const BreadcrumbVariants = ['default', 'accent'] as const\n\nexport type BreadcrumbsProps = {\n variant?: (typeof BreadcrumbVariants)[number]\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\n/\n Breadcrumbs parent element\n * <Breadcrumbs>\n /\n\nconst _Root = forwardRef<HTMLElement, BreadcrumbsProps>(({className, children, variant = 'default', ...rest}, ref) => {\n return (\n <nav\n ref={ref}\n className={clsx(styles.Breadcrumbs, styles[`Breadcrumbs--${variant}`])}\n aria-label=\"Breadcrumbs\"\n {...rest}\n >\n <ol className={clsx(styles.Breadcrumbs__list)}>{children}</ol>\n </nav>\n )\n})\n\ntype ItemProps = {\n href: string\n selected?: boolean\n} & BaseProps<HTMLAnchorElement> &\n React.HTMLAttributes<HTMLAnchorElement>\n\nconst _Item = forwardRef<HTMLAnchorElement, ItemProps>(({className, children, href, selected, ...rest}, ref) => {\n return (\n <li className={styles.Breadcrumbs__item}>\n {selected ? (\n <Text\n size=\"100\"\n variant=\"muted\"\n className={clsx(styles.Breadcrumbs__link, styles['Breadcrumbs__link--selected'], className)}\n aria-current=\"page\"\n {...rest}\n >\n {children}\n </Text>\n ) : (\n <InlineLink href={href} ref={ref} className={clsx(styles.Breadcrumbs__link, className)} {...rest}>\n {children}\n </InlineLink>\n )}\n </li>\n )\n})\n\n/\n Use Breadcrumbs to display the current location within a navigational hierarchy.\n * @see https://primer.style/brand/components/Breadcrumbs\n */\nexport const Breadcrumbs = Object.assign(_Root, {\n Item: _Item,\n})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAqB,CAAC,WAAW,QAAQ,GAYhD,IAAQ,GAA2C,EAAC,cAAW,aAAU,aAAU,WAAW,GAAG,KAAO,MAE1G,kBAAC,OAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,EAAO,gBAAgB,IAAU;CACrE,cAAW;CACX,GAAI;WAEJ,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,iBAAiB;EAAI;CAAa,CAAA;AAC1D,CAAA,CAER,GAQK,IAAQ,GAA0C,EAAC,cAAW,aAAU,SAAM,aAAU,GAAG,KAAO,MAEpG,kBAAC,MAAD;CAAI,WAAW,EAAO;WACnB,IACC,kBAAC,GAAD;EACE,MAAK;EACL,SAAQ;EACR,WAAW,EAAK,EAAO,mBAAmB,EAAO,gCAAgC,CAAS;EAC1F,gBAAa;EACb,GAAI;EAEH;CACG,CAAA,IAEN,kBAAC,GAAD;EAAkB;EAAW;EAAK,WAAW,EAAK,EAAO,mBAAmB,CAAS;EAAG,GAAI;EACzF;CACS,CAAA;AAEZ,CAAA,CAEP,GAMY,IAAc,OAAO,OAAO,GAAO,EAC9C,MAAM,EACR,CAAC"}

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

@@ -1,12 +1,13 @@
-import './Breadcrumbs.module-C-xmitEo.css';var e = {
-	Breadcrumbs: "Primer_Brand__Breadcrumbs-module__Breadcrumbs___lClwB",
+import './Breadcrumbs.module-C-xmitEo.css';//#region src/Breadcrumbs/Breadcrumbs.module.css
+var e = "Primer_Brand__Breadcrumbs-module__Breadcrumbs___lClwB", t = "Primer_Brand__Breadcrumbs-module__Breadcrumbs__list___SU1ou", n = "Primer_Brand__Breadcrumbs-module__Breadcrumbs__item___eLy6u", r = "Primer_Brand__Breadcrumbs-module__Breadcrumbs__link___MfB_q", i = {
+	Breadcrumbs: e,
 	"Breadcrumbs--default": "Primer_Brand__Breadcrumbs-module__Breadcrumbs--default___GD8Sa",
-	Breadcrumbs__list: "Primer_Brand__Breadcrumbs-module__Breadcrumbs__list___SU1ou",
-	Breadcrumbs__item: "Primer_Brand__Breadcrumbs-module__Breadcrumbs__item___eLy6u",
-	Breadcrumbs__link: "Primer_Brand__Breadcrumbs-module__Breadcrumbs__link___MfB_q",
+	Breadcrumbs__list: t,
+	Breadcrumbs__item: n,
+	Breadcrumbs__link: r,
 	"Breadcrumbs__link--selected": "Primer_Brand__Breadcrumbs-module__Breadcrumbs__link--selected___tXSfD"
 };
 //#endregion
-export { e as default };
+export { e as Breadcrumbs, n as Breadcrumbs__item, r as Breadcrumbs__link, t as Breadcrumbs__list, i as default };
 //# sourceMappingURL=Breadcrumbs.module.js.map

package/esm/BreakoutBanner/BreakoutBanner.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Stack as t } from "../Stack/Stack.js";
 import { Text as n } from "../Text/Text.js";
 import { Heading as r } from "../Heading/Heading.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BreakoutBanner.js","names":[],"sources":["../../src/BreakoutBanner/BreakoutBanner.tsx"],"sourcesContent":["import React, {forwardRef, ReactElement, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {Icon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, Text, Stack, Link, LinkProps, StackProps} from '../'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './BreakoutBanner.module.css'\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\nexport const BreakoutBannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof BreakoutBannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type BreakoutBannerProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n /\n The alignment of the content within the banner\n /\n align?: 'start' \| 'center'\n /\n Optional, custom background color\n /\n backgroundColor?: BackgroundColors \| ResponsiveBackgroundColorMap\n /\n Optional, custom background image\n /\n backgroundImageSrc?: string \| ResponsiveBackgroundImageSrcMap\n /\n Optional, custom background position\n /\n backgroundImagePosition?: string \| ResponsiveBackgroundImagePositionMap\n /\n Optional, custom background size\n /\n backgroundImageSize?: string \| ResponsiveBackgroundImageSizeMap\n /\n An optional leading visual that appears before the heading\n /\n leadingVisual?: ReactElement \| Icon\n }\n\nconst Root = forwardRef(\n (\n {\n align = 'start',\n backgroundColor = 'subtle',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n style,\n leadingVisual: LeadingVisual,\n ...props\n }: BreakoutBannerProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const processBackgroundValue = useCallback((value: string \| string[], property) => {\n if (property === 'background-image-src') {\n return `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return BreakoutBannerBackgroundColors.includes(value as (typeof BreakoutBannerBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' \|\| Array.isArray(value)\n ? {[`--brand-BreakoutBanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-BreakoutBanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-BreakoutBanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-BreakoutBanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n const addStyle = (property, value) => {\n if (value) {\n Object.assign(allStyles, createStyles(property, value))\n }\n }\n\n addStyle('background-color', backgroundColor)\n addStyle('background-image-src', backgroundImageSrc)\n addStyle('background-image-position', backgroundImagePosition)\n addStyle('background-image-size', backgroundImageSize)\n\n return allStyles\n }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n const hasHeading = useMemo(\n () => React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === _Heading),\n [children],\n )\n\n if (!hasHeading && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('The `BreakoutBanner` component expects a `BreakoutBanner.Heading` element to be specified.')\n }\n\n return (\n <div\n ref={ref}\n className={clsx(styles.BreakoutBanner, className)}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div className={clsx(styles['BreakoutBanner-container'])}>\n <div\n className={clsx(\n styles['BreakoutBanner-content'],\n align === 'center' && styles['BreakoutBanner-content--center'],\n )}\n >\n {LeadingVisual && (\n <div className={clsx(styles['BreakoutBanner-leadingVisual'])}>\n {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}\n </div>\n )}\n {children}\n </div>\n </div>\n </div>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype BreakoutBannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize = '4'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: BreakoutBannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['BreakoutBanner__heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype BreakoutBannerDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst Description = forwardRef(\n ({className, children, ...props}: BreakoutBannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n ref={ref}\n as=\"p\"\n variant=\"muted\"\n className={clsx(styles['BreakoutBanner-description'], className)}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype LinkGroupProps = React.ComponentProps<typeof Stack>\n\nconst _LinkGroup = forwardRef(\n ({className, direction, gap, padding, children, ...props}: LinkGroupProps, ref: Ref<HTMLDivElement>) => {\n const linksToRender = React.Children.toArray(children)\n .map((child, index) => {\n if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n return React.cloneElement(child, {\n size: child.props.size \|\| 'medium',\n variant: child.props.variant \|\| 'accent',\n arrowDirection: child.props.arrowDirection \|\| (index === 0 ? 'end' : 'none'),\n ...child.props,\n })\n }\n return null\n })\n .filter(Boolean)\n .slice(0, 2)\n\n const defaultProps: Partial<StackProps> =\n direction === 'vertical'\n ? {\n gap: 'condensed',\n direction: 'vertical',\n alignItems: 'flex-start',\n }\n : {\n gap: gap \|\| {narrow: 'normal', regular: 'spacious'},\n direction: direction \|\| {narrow: 'vertical', regular: 'horizontal'},\n }\n\n return (\n <Stack\n padding={padding \|\| 'none'}\n className={clsx(styles['BreakoutBanner-linkGroup'], className)}\n ref={ref}\n {...defaultProps}\n {...props}\n >\n {linksToRender}\n </Stack>\n )\n },\n)\n\n/\n Breakout banner component\n * {@link https://primer.style/brand/components/BreakoutBanner/ See usage examples}.\n */\nexport const BreakoutBanner = Object.assign(Root, {Heading: _Heading, Description, LinkGroup: _LinkGroup})\n"],"mappings":"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"}
1	+ {"version":3,"file":"BreakoutBanner.js","names":[],"sources":["../../src/BreakoutBanner/BreakoutBanner.tsx"],"sourcesContent":["import React, {forwardRef, ReactElement, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {Icon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, Text, Stack, Link, LinkProps, StackProps} from '../'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './BreakoutBanner.module.css'\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\nexport const BreakoutBannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof BreakoutBannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type BreakoutBannerProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n /\n The alignment of the content within the banner\n /\n align?: 'start' \| 'center'\n /\n Optional, custom background color\n /\n backgroundColor?: BackgroundColors \| ResponsiveBackgroundColorMap\n /\n Optional, custom background image\n /\n backgroundImageSrc?: string \| ResponsiveBackgroundImageSrcMap\n /\n Optional, custom background position\n /\n backgroundImagePosition?: string \| ResponsiveBackgroundImagePositionMap\n /\n Optional, custom background size\n /\n backgroundImageSize?: string \| ResponsiveBackgroundImageSizeMap\n /\n An optional leading visual that appears before the heading\n /\n leadingVisual?: ReactElement \| Icon\n }\n\nconst Root = forwardRef(\n (\n {\n align = 'start',\n backgroundColor = 'subtle',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n style,\n leadingVisual: LeadingVisual,\n ...props\n }: BreakoutBannerProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const processBackgroundValue = useCallback((value: string \| string[], property) => {\n if (property === 'background-image-src') {\n return `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return BreakoutBannerBackgroundColors.includes(value as (typeof BreakoutBannerBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' \|\| Array.isArray(value)\n ? {[`--brand-BreakoutBanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-BreakoutBanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-BreakoutBanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-BreakoutBanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n const addStyle = (property, value) => {\n if (value) {\n Object.assign(allStyles, createStyles(property, value))\n }\n }\n\n addStyle('background-color', backgroundColor)\n addStyle('background-image-src', backgroundImageSrc)\n addStyle('background-image-position', backgroundImagePosition)\n addStyle('background-image-size', backgroundImageSize)\n\n return allStyles\n }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n const hasHeading = useMemo(\n () => React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === _Heading),\n [children],\n )\n\n if (!hasHeading && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('The `BreakoutBanner` component expects a `BreakoutBanner.Heading` element to be specified.')\n }\n\n return (\n <div\n ref={ref}\n className={clsx(styles.BreakoutBanner, className)}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div className={clsx(styles['BreakoutBanner-container'])}>\n <div\n className={clsx(\n styles['BreakoutBanner-content'],\n align === 'center' && styles['BreakoutBanner-content--center'],\n )}\n >\n {LeadingVisual && (\n <div className={clsx(styles['BreakoutBanner-leadingVisual'])}>\n {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}\n </div>\n )}\n {children}\n </div>\n </div>\n </div>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype BreakoutBannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize = '4'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: BreakoutBannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['BreakoutBanner__heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype BreakoutBannerDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst Description = forwardRef(\n ({className, children, ...props}: BreakoutBannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n ref={ref}\n as=\"p\"\n variant=\"muted\"\n className={clsx(styles['BreakoutBanner-description'], className)}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype LinkGroupProps = React.ComponentProps<typeof Stack>\n\nconst _LinkGroup = forwardRef(\n ({className, direction, gap, padding, children, ...props}: LinkGroupProps, ref: Ref<HTMLDivElement>) => {\n const linksToRender = React.Children.toArray(children)\n .map((child, index) => {\n if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n return React.cloneElement(child, {\n size: child.props.size \|\| 'medium',\n variant: child.props.variant \|\| 'accent',\n arrowDirection: child.props.arrowDirection \|\| (index === 0 ? 'end' : 'none'),\n ...child.props,\n })\n }\n return null\n })\n .filter(Boolean)\n .slice(0, 2)\n\n const defaultProps: Partial<StackProps> =\n direction === 'vertical'\n ? {\n gap: 'condensed',\n direction: 'vertical',\n alignItems: 'flex-start',\n }\n : {\n gap: gap \|\| {narrow: 'normal', regular: 'spacious'},\n direction: direction \|\| {narrow: 'vertical', regular: 'horizontal'},\n }\n\n return (\n <Stack\n padding={padding \|\| 'none'}\n className={clsx(styles['BreakoutBanner-linkGroup'], className)}\n ref={ref}\n {...defaultProps}\n {...props}\n >\n {linksToRender}\n </Stack>\n )\n },\n)\n\n/\n Breakout banner component\n * {@link https://primer.style/brand/components/BreakoutBanner/ See usage examples}.\n */\nexport const BreakoutBanner = Object.assign(Root, {Heading: _Heading, Description, LinkGroup: _LinkGroup})\n"],"mappings":"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"}

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

@@ -1,15 +1,16 @@
-import './BreakoutBanner.module-gfmzcUSU.css';var e = {
-	BreakoutBanner: "Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la",
+import './BreakoutBanner.module-gfmzcUSU.css';//#region src/BreakoutBanner/BreakoutBanner.module.css
+var e = "Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la", t = "Primer_Brand__BreakoutBanner-module__BreakoutBanner__heading___9zftT", n = {
+	BreakoutBanner: e,
 	"BreakoutBanner-container": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt",
 	"BreakoutBanner-content": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-content___gZsEk",
 	"BreakoutBanner-container--background": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-container--background___Uex_J",
 	"BreakoutBanner-content--center": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-content--center___oB7l0",
-	BreakoutBanner__heading: "Primer_Brand__BreakoutBanner-module__BreakoutBanner__heading___9zftT",
+	BreakoutBanner__heading: t,
 	"BreakoutBanner-description": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-description___nFBHL",
 	"BreakoutBanner-linkGroup": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-linkGroup___g_h1l",
 	"BreakoutBanner-leadingVisual": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf"
 };
 //#endregion
-export { e as default };
+export { e as BreakoutBanner, t as BreakoutBanner__heading, n as default };
 //# sourceMappingURL=BreakoutBanner.module.js.map

package/esm/Button/Button.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback, type Ref, ReactElement} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {Text} from '../Text'\nimport type {BaseProps} from '../component-helpers'\n\nimport {useAnimation} from '../'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css'\nimport styles from './Button.module.css'\n\nexport const ButtonVariants = ['primary', 'secondary', 'subtle'] as const\nexport const ButtonSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultButtonVariant = ButtonVariants[1]\nexport const defaultButtonSize = ButtonSizes[1]\n\nexport type ButtonVariant = (typeof ButtonVariants)[number]\n\nexport type ButtonBaseProps = {\n /*\n The leading visual appears before the button content\n /\n leadingVisual?: ReactElement \| Icon\n /\n The trailing visual appears after the button content\n /\n trailingVisual?: ReactElement \| Icon\n /\n The styling variations available in Button\n /\n variant?: ButtonVariant\n /\n The size variations available in Button\n /\n size?: (typeof ButtonSizes)[number]\n /\n A flag to show/hide the arrow icon\n * @deprecated The hasArrow prop is deprecated and will be removed in a future release.\n /\n hasArrow?: boolean\n /\n The Button spans the full width\n */\n block?: boolean\n}\n\nexport type ButtonProps<C extends React.ElementType> = BaseProps<C> & {\n as?: C\n} & ButtonBaseProps &\n React.ComponentPropsWithoutRef<C>\n\nconst testIds = {\n root: 'Button',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n get trailingVisual() {\n return `${this.root}-trailing-visual`\n },\n get expandableArrow() {\n return `${this.root}-expandable-arrow`\n },\n}\n\nexport const _Button = forwardRef(\n <C extends React.ElementType>(\n {\n animate,\n as,\n variant = defaultButtonVariant,\n size = defaultButtonSize,\n hasArrow,\n block = false,\n className,\n children,\n disabled,\n 'aria-disabled': ariaDisabled,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n leadingVisual: LeadingVisual,\n trailingVisual: TrailingVisual,\n style,\n ...props\n }: ButtonProps<C>,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n const Component = as \|\| 'button'\n const isDisabled =\n disabled \|\| ariaDisabled === 'true' \|\| (typeof ariaDisabled === 'boolean' && ariaDisabled === true)\n\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const showArrow = Boolean(hasArrow)\n\n const returnValidComponent = useCallback((component?: ReactElement \| Icon) => {\n if (React.isValidElement(component)) {\n return component\n }\n\n if (typeof component === 'function') {\n return React.createElement(component)\n }\n }, [])\n\n const LeadingVisualComponent = returnValidComponent(LeadingVisual)\n const TrailingVisualComponent = returnValidComponent(TrailingVisual)\n\n const handleOnMouseEnter = useCallback(\n event => {\n if (!isDisabled) {\n setIsHovered(true)\n onMouseEnter?.(event)\n }\n },\n [isDisabled, onMouseEnter],\n )\n\n const handleOnMouseLeave = useCallback(\n event => {\n if (!isDisabled) {\n setIsHovered(false)\n onMouseLeave?.(event)\n }\n },\n [isDisabled, onMouseLeave],\n )\n\n const handleOnFocus = useCallback(\n event => {\n if (!isDisabled) {\n setIsFocused(true)\n onFocus?.(event)\n }\n },\n [isDisabled, onFocus],\n )\n\n const handleOnBlur = useCallback(\n event => {\n if (!isDisabled) {\n setIsFocused(false)\n onBlur?.(event)\n }\n },\n [isDisabled, onBlur],\n )\n\n return (\n <Component\n ref={ref}\n className={clsx(\n styles.Button,\n styles[`Button--${variant}`],\n styles[`Button--size-${size}`],\n block && styles['Button--block'],\n isDisabled && styles[`Button--disabled`],\n animationClasses,\n className,\n )}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n disabled={(isDisabled && Component === 'button') \|\| undefined}\n aria-disabled={(isDisabled && Component !== 'button') \|\| undefined}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n LeadingVisualComponent,\n ) && (\n <span className={styles['Button__leading-visual']} data-testid={testIds.leadingVisual}>\n {React.cloneElement(LeadingVisualComponent, {\n className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n ['aria-hidden']: 'true',\n focusable: 'false',\n })}\n </span>\n )}\n\n <span className={styles['Button__text']}>\n <Text\n as=\"span\"\n size={size === 'small' ? '100' : size === 'medium' ? '200' : '400'}\n weight=\"medium\"\n className={clsx(\n styles['Button--label'],\n styles[`Button--label-${size}`],\n styles[`Button--label-${variant}`],\n isDisabled && styles[`Button-label--disabled`],\n )}\n >\n {children}\n </Text>\n </span>\n\n {!TrailingVisual && showArrow && (\n <span className={clsx(styles['Button__trailing-visual'])}>\n <ExpandableArrow\n hidden\n className={clsx(styles['Button-arrow'], isDisabled && styles[`Button-arrow--disabled`])}\n expanded={!isDisabled && (isHovered \|\| isFocused)}\n data-testid={testIds.expandableArrow}\n />\n </span>\n )}\n {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n TrailingVisualComponent,\n ) && (\n <span className={clsx(styles['Button__trailing-visual'])} data-testid={testIds.trailingVisual}>\n {React.cloneElement(TrailingVisualComponent, {\n className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n ['aria-hidden']: 'true',\n focusable: 'false',\n })}\n </span>\n )}\n </Component>\n )\n },\n)\n\nexport const Button = Object.assign(_Button, {testIds})\n"],"mappings":";;;;;;;;;AAaA,IAAa,IAAiB;CAAC;CAAW;CAAa;~~CAAS~~,~~EACnD~~,IAAc;CAAC;CAAS;CAAU;~~CAAQ~~,~~EAE1C~~,IAAuB,EAAe,IACtC,IAAoB,EAAY,IAqCvC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;~~AAClB~~,~~SAAO~~,GAAG,KAAK,KAAK~~;;CAEtB~~,IAAI,iBAAiB;~~AACnB~~,~~SAAO~~,GAAG,KAAK,KAAK~~;;CAEtB~~,IAAI,kBAAkB;~~AACpB~~,~~SAAO~~,GAAG,KAAK,KAAK~~;;CAEvB~~,~~EAEY~~,IAAU,GAEnB,EACE,YACA,OACA,aAAU,GACV,UAAO,GACP,aACA,WAAQ,IACR,cACA,aACA,aACA,iBAAiB,GACjB,iBACA,iBACA,YACA,WACA,eAAe,GACf,gBAAgB,GAChB,UACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,~~GAAM~~,~~EACjD~~,CAAC,GAAW,KAAgB,EAAM,SAAS,~~GAAM~~,~~EACjD~~,IAAY,KAAM,UAClB,IACJ,KAAY,MAAiB,UAAW,OAAO,KAAiB,aAAa,MAAiB,IAE1F,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,~~EAAQ~~,~~EAElF~~,IAAY,EAAQ,GAEpB,IAAuB,GAAa,MAAoC;~~AAC5E~~,~~MAAI~~,EAAM,eAAe,~~EAAU~~,~~CACjC~~,~~QAAO~~;~~AAGT~~,~~MAAI~~,OAAO,KAAc,~~WACvB~~,~~QAAO~~,EAAM,cAAc,~~EAAU~~;~~IAEtC~~,~~EAAE~~,CAAC,~~EAEA~~,IAAyB,EAAqB,~~EAAc~~,~~EAC5D~~,IAA0B,EAAqB,~~EAAe~~,~~EAE9D~~,IAAqB,GACzB,MAAS;~~AACP~~,~~EAAK~~,MACH,EAAa,~~GAAK~~,~~EAClB~~,IAAe,~~EAAM~~;~~IAGzB~~,CAAC,GAAY,~~EAAa~~,CAC3B,~~EAEK~~,IAAqB,GACzB,MAAS;~~AACP~~,~~EAAK~~,MACH,EAAa,~~GAAM~~,~~EACnB~~,IAAe,~~EAAM~~;~~IAGzB~~,CAAC,GAAY,~~EAAa~~,CAC3B,~~EAEK~~,IAAgB,GACpB,MAAS;~~AACP~~,~~EAAK~~,MACH,EAAa,~~GAAK~~,~~EAClB~~,IAAU,~~EAAM~~;~~IAGpB~~,CAAC,GAAY,~~EAAQ~~,CACtB,~~EAEK~~,IAAe,GACnB,MAAS;~~AACP~~,~~EAAK~~,MACH,EAAa,~~GAAM~~,~~EACnB~~,IAAS,~~EAAM~~;~~IAGnB~~,CAAC,GAAY,~~EAAO~~,CACrB;~~AAED~~,~~QACE~~,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,EAAO,gBAAgB,MACvB,KAAS,EAAO,kBAChB,KAAc,EAAO,qBACrB,GACA,~~EACD~~;~~EACD~~,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,UAAW,KAAc,MAAc,YAAa,KAAA;EACpD,iBAAgB,KAAc,MAAc,YAAa,KAAA;EACzD,OAAO;GAAC,GAAG;GAAuB,GAAG;~~GAAM~~;~~EAC3C~~,GAAI;YAlBN;GAoBG,EAAM,eACL,~~EACD~~,~~IACC~~,kBAAC,QAAD;IAAM,WAAW,EAAO;IAA2B,eAAa,EAAQ;cACrE,EAAM,aAAa,GAAwB;KAC1C,WAAW,EAAK,EAAO,wBAAwB,KAAc,EAAO,~~iCAAiC~~;~~KACpG~~,eAAgB;KACjB,WAAW;~~KACZ~~,CAAC;~~IACG~~,CAAA;~~GAGT~~,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KACE,IAAG;KACH,MAAM,MAAS,UAAU,QAAQ,MAAS,WAAW,QAAQ;KAC7D,QAAO;KACP,WAAW,EACT,EAAO,kBACP,EAAO,iBAAiB,MACxB,EAAO,iBAAiB,MACxB,KAAc,EAAO,~~0BACtB~~;~~KAEA~~;~~KACI~~,CAAA;~~IACF~~,CAAA;~~GAEN~~,CAAC,KAAkB,KAClB,kBAAC,QAAD;IAAM,WAAW,EAAK,EAAO,~~2BAA2B~~;~~cACtD~~,kBAAC,GAAD;KACE,QAAA;KACA,WAAW,EAAK,EAAO,iBAAiB,KAAc,EAAO,~~0BAA0B~~;~~KACvF~~,UAAU,CAAC,MAAe,KAAa;KACvC,eAAa,EAAQ;~~KACrB~~,CAAA;~~IACG~~,CAAA;~~GAER~~,EAAM,eACL,~~EACD~~,~~IACC~~,kBAAC,QAAD;IAAM,WAAW,EAAK,EAAO,~~2BAA2B~~;~~IAAE~~,eAAa,EAAQ;cAC5E,EAAM,aAAa,GAAyB;KAC3C,WAAW,EAAK,EAAO,wBAAwB,KAAc,EAAO,~~iCAAiC~~;~~KACpG~~,eAAgB;KACjB,WAAW;~~KACZ~~,CAAC;~~IACG~~,CAAA;~~GAEC~~;;~~EAGjB~~,~~EAEY~~,IAAS,OAAO,OAAO,GAAS,EAAC,~~YAAQ~~,CAAC"}
1	+ {"version":3,"file":"Button.js","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback, type Ref, ReactElement} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {Text} from '../Text'\nimport type {BaseProps} from '../component-helpers'\n\nimport {useAnimation} from '../'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css'\nimport styles from './Button.module.css'\n\nexport const ButtonVariants = ['primary', 'secondary', 'subtle'] as const\nexport const ButtonSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultButtonVariant = ButtonVariants[1]\nexport const defaultButtonSize = ButtonSizes[1]\n\nexport type ButtonVariant = (typeof ButtonVariants)[number]\n\nexport type ButtonBaseProps = {\n /*\n The leading visual appears before the button content\n /\n leadingVisual?: ReactElement \| Icon\n /\n The trailing visual appears after the button content\n /\n trailingVisual?: ReactElement \| Icon\n /\n The styling variations available in Button\n /\n variant?: ButtonVariant\n /\n The size variations available in Button\n /\n size?: (typeof ButtonSizes)[number]\n /\n A flag to show/hide the arrow icon\n * @deprecated The hasArrow prop is deprecated and will be removed in a future release.\n /\n hasArrow?: boolean\n /\n The Button spans the full width\n */\n block?: boolean\n}\n\nexport type ButtonProps<C extends React.ElementType> = BaseProps<C> & {\n as?: C\n} & ButtonBaseProps &\n React.ComponentPropsWithoutRef<C>\n\nconst testIds = {\n root: 'Button',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n get trailingVisual() {\n return `${this.root}-trailing-visual`\n },\n get expandableArrow() {\n return `${this.root}-expandable-arrow`\n },\n}\n\nexport const _Button = forwardRef(\n <C extends React.ElementType>(\n {\n animate,\n as,\n variant = defaultButtonVariant,\n size = defaultButtonSize,\n hasArrow,\n block = false,\n className,\n children,\n disabled,\n 'aria-disabled': ariaDisabled,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n leadingVisual: LeadingVisual,\n trailingVisual: TrailingVisual,\n style,\n ...props\n }: ButtonProps<C>,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n const Component = as \|\| 'button'\n const isDisabled =\n disabled \|\| ariaDisabled === 'true' \|\| (typeof ariaDisabled === 'boolean' && ariaDisabled === true)\n\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const showArrow = Boolean(hasArrow)\n\n const returnValidComponent = useCallback((component?: ReactElement \| Icon) => {\n if (React.isValidElement(component)) {\n return component\n }\n\n if (typeof component === 'function') {\n return React.createElement(component)\n }\n }, [])\n\n const LeadingVisualComponent = returnValidComponent(LeadingVisual)\n const TrailingVisualComponent = returnValidComponent(TrailingVisual)\n\n const handleOnMouseEnter = useCallback(\n event => {\n if (!isDisabled) {\n setIsHovered(true)\n onMouseEnter?.(event)\n }\n },\n [isDisabled, onMouseEnter],\n )\n\n const handleOnMouseLeave = useCallback(\n event => {\n if (!isDisabled) {\n setIsHovered(false)\n onMouseLeave?.(event)\n }\n },\n [isDisabled, onMouseLeave],\n )\n\n const handleOnFocus = useCallback(\n event => {\n if (!isDisabled) {\n setIsFocused(true)\n onFocus?.(event)\n }\n },\n [isDisabled, onFocus],\n )\n\n const handleOnBlur = useCallback(\n event => {\n if (!isDisabled) {\n setIsFocused(false)\n onBlur?.(event)\n }\n },\n [isDisabled, onBlur],\n )\n\n return (\n <Component\n ref={ref}\n className={clsx(\n styles.Button,\n styles[`Button--${variant}`],\n styles[`Button--size-${size}`],\n block && styles['Button--block'],\n isDisabled && styles[`Button--disabled`],\n animationClasses,\n className,\n )}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n disabled={(isDisabled && Component === 'button') \|\| undefined}\n aria-disabled={(isDisabled && Component !== 'button') \|\| undefined}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n LeadingVisualComponent,\n ) && (\n <span className={styles['Button__leading-visual']} data-testid={testIds.leadingVisual}>\n {React.cloneElement(LeadingVisualComponent, {\n className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n ['aria-hidden']: 'true',\n focusable: 'false',\n })}\n </span>\n )}\n\n <span className={styles['Button__text']}>\n <Text\n as=\"span\"\n size={size === 'small' ? '100' : size === 'medium' ? '200' : '400'}\n weight=\"medium\"\n className={clsx(\n styles['Button--label'],\n styles[`Button--label-${size}`],\n styles[`Button--label-${variant}`],\n isDisabled && styles[`Button-label--disabled`],\n )}\n >\n {children}\n </Text>\n </span>\n\n {!TrailingVisual && showArrow && (\n <span className={clsx(styles['Button__trailing-visual'])}>\n <ExpandableArrow\n hidden\n className={clsx(styles['Button-arrow'], isDisabled && styles[`Button-arrow--disabled`])}\n expanded={!isDisabled && (isHovered \|\| isFocused)}\n data-testid={testIds.expandableArrow}\n />\n </span>\n )}\n {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n TrailingVisualComponent,\n ) && (\n <span className={clsx(styles['Button__trailing-visual'])} data-testid={testIds.trailingVisual}>\n {React.cloneElement(TrailingVisualComponent, {\n className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n ['aria-hidden']: 'true',\n focusable: 'false',\n })}\n </span>\n )}\n </Component>\n )\n },\n)\n\nexport const Button = Object.assign(_Button, {testIds})\n"],"mappings":"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"}

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

@@ -1,8 +1,9 @@
-import './Button.module-Byz3R1qi.css';var e = {
-	Button: "Primer_Brand__Button-module__Button___scH9Z",
+import './Button.module-Byz3R1qi.css';//#region src/Button/Button.module.css
+var e = "Primer_Brand__Button-module__Button___scH9Z", t = "Primer_Brand__Button-module__Button__text___ED0bX", n = {
+	Button: e,
 	"Button--disabled": "Primer_Brand__Button-module__Button--disabled___IHZ7f",
 	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
-	Button__text: "Primer_Brand__Button-module__Button__text___ED0bX",
+	Button__text: t,
 	"Button--label": "Primer_Brand__Button-module__Button--label___qrkyz",
 	"Button__icon-visual": "Primer_Brand__Button-module__Button__icon-visual____qybb",
 	"Button__trailing-visual": "Primer_Brand__Button-module__Button__trailing-visual___5i3xR",
@@ -24,6 +25,6 @@ import './Button.module-Byz3R1qi.css';var e = {
 	"Button--block": "Primer_Brand__Button-module__Button--block___kCYDx"
 };
 //#endregion
-export { e as default };
+export { e as Button, t as Button__text, n as default };
 //# sourceMappingURL=Button.module.js.map

package/esm/ButtonGroup/ButtonGroup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Button as t } from "../Button/Button.js";
 import { ActionMenu as n } from "../ActionMenu/ActionMenu.js";
 import r from "./ButtonGroup.module.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport {ActionMenu, ActionMenuProps} from '../ActionMenu'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' \| 'a'>>>\nexport type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>\nexport type ButtonGroupChild = PrimerBrandButtonType \| PrimerBrandActionMenuType \| false \| null \| undefined\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n children: ButtonGroupChild \| ButtonGroupChild[]\n buttonSize?: ButtonProps<'button' \| 'a'>['size']\n buttonsAs?: 'button' \| 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n const buttonsToRender = React.Children.toArray(children)\n .filter(\n (child): child is React.ReactElement =>\n React.isValidElement(child) && (child.type === Button \|\| child.type === ActionMenu),\n )\n .slice(0, 2)\n .map((child, index) => {\n const variant = index === 0 ? 'primary' : 'secondary'\n\n if (React.isValidElement<ButtonProps<'button' \| 'a'>>(child) && child.type === Button) {\n return React.cloneElement(child, {\n size: child.props.size ?? buttonSize,\n as: child.props.as ?? buttonsAs,\n variant: child.props.variant ?? variant,\n })\n }\n\n const actionMenu = child as PrimerBrandActionMenuType\n const actionMenuSize = buttonSize === 'large' ? 'medium' : buttonSize\n const actionMenuChildren = React.Children.map(actionMenu.props.children, actionMenuChild => {\n if (\n React.isValidElement<React.ComponentProps<typeof ActionMenu.Button>>(actionMenuChild) &&\n actionMenuChild.type === ActionMenu.Button\n ) {\n return React.cloneElement(actionMenuChild, {\n variant: actionMenuChild.props.variant ?? variant,\n })\n }\n return actionMenuChild\n })\n\n return React.cloneElement(actionMenu, {\n children: actionMenuChildren,\n size: actionMenu.props.size ?? actionMenuSize,\n })\n })\n\n return (\n <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>\n {buttonsToRender}\n </section>\n )\n },\n)\n"],"mappings":";;;;;;;AAiBA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,~~EAAS~~,CACrD,QACE,MACC,EAAM,eAAe,~~EAAM~~,~~KAAK~~,EAAM,SAAS,KAAU,EAAM,SAAS,~~GAC3E~~,CACA,MAAM,GAAG,~~EAAE~~,CACX,KAAK,GAAO,MAAU;EACrB,IAAM,IAAU,MAAU,IAAI,YAAY;~~AAE1C~~,~~MAAI~~,EAAM,eAA4C,~~EAAM~~,~~IAAI~~,EAAM,SAAS,~~EAC7E~~,~~QAAO~~,EAAM,aAAa,GAAO;GAC/B,MAAM,EAAM,MAAM,QAAQ;GAC1B,IAAI,EAAM,MAAM,MAAM;GACtB,SAAS,EAAM,MAAM,WAAW;~~GACjC~~,CAAC;~~EAGJ~~,IAAM,IAAa,GACb,IAAiB,MAAe,UAAU,WAAW,GACrD,IAAqB,EAAM,SAAS,IAAI,EAAW,MAAM,WAAU,MAErE,EAAM,eAA+D,~~EAAgB~~,~~IACrF~~,EAAgB,SAAS,EAAW,SAE7B,EAAM,aAAa,GAAiB,EACzC,SAAS,EAAgB,MAAM,WAAW,~~GAC3C~~,CAAC,~~GAEG~~,~~EACP~~;~~AAEF~~,~~SAAO~~,EAAM,aAAa,GAAY;GACpC,UAAU;GACV,MAAM,EAAW,MAAM,QAAQ;~~GAChC~~,CAAC;~~GACF~~;~~AAEJ~~,~~QACE~~,kBAAC,WAAD;EAAc;EAAK,GAAI;EAAO,WAAW,EAAK,EAAO,aAAa,~~EAAU~~;~~YACzE~~;~~EACO~~,CAAA;~~EAGf~~"}
1	+ {"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport {ActionMenu, ActionMenuProps} from '../ActionMenu'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' \| 'a'>>>\nexport type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>\nexport type ButtonGroupChild = PrimerBrandButtonType \| PrimerBrandActionMenuType \| false \| null \| undefined\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n children: ButtonGroupChild \| ButtonGroupChild[]\n buttonSize?: ButtonProps<'button' \| 'a'>['size']\n buttonsAs?: 'button' \| 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n const buttonsToRender = React.Children.toArray(children)\n .filter(\n (child): child is React.ReactElement =>\n React.isValidElement(child) && (child.type === Button \|\| child.type === ActionMenu),\n )\n .slice(0, 2)\n .map((child, index) => {\n const variant = index === 0 ? 'primary' : 'secondary'\n\n if (React.isValidElement<ButtonProps<'button' \| 'a'>>(child) && child.type === Button) {\n return React.cloneElement(child, {\n size: child.props.size ?? buttonSize,\n as: child.props.as ?? buttonsAs,\n variant: child.props.variant ?? variant,\n })\n }\n\n const actionMenu = child as PrimerBrandActionMenuType\n const actionMenuSize = buttonSize === 'large' ? 'medium' : buttonSize\n const actionMenuChildren = React.Children.map(actionMenu.props.children, actionMenuChild => {\n if (\n React.isValidElement<React.ComponentProps<typeof ActionMenu.Button>>(actionMenuChild) &&\n actionMenuChild.type === ActionMenu.Button\n ) {\n return React.cloneElement(actionMenuChild, {\n variant: actionMenuChild.props.variant ?? variant,\n })\n }\n return actionMenuChild\n })\n\n return React.cloneElement(actionMenu, {\n children: actionMenuChildren,\n size: actionMenu.props.size ?? actionMenuSize,\n })\n })\n\n return (\n <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>\n {buttonsToRender}\n </section>\n )\n },\n)\n"],"mappings":";;;;;;;AAiBA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CACrD,QACE,MACC,EAAM,eAAe,CAAK,MAAM,EAAM,SAAS,KAAU,EAAM,SAAS,EAC5E,CAAC,CACA,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,GAAO,MAAU;EACrB,IAAM,IAAU,MAAU,IAAI,YAAY;EAE1C,IAAI,EAAM,eAA4C,CAAK,KAAK,EAAM,SAAS,GAC7E,OAAO,EAAM,aAAa,GAAO;GAC/B,MAAM,EAAM,MAAM,QAAQ;GAC1B,IAAI,EAAM,MAAM,MAAM;GACtB,SAAS,EAAM,MAAM,WAAW;EAClC,CAAC;EAGH,IAAM,IAAa,GACb,IAAiB,MAAe,UAAU,WAAW,GACrD,IAAqB,EAAM,SAAS,IAAI,EAAW,MAAM,WAAU,MAErE,EAAM,eAA+D,CAAe,KACpF,EAAgB,SAAS,EAAW,SAE7B,EAAM,aAAa,GAAiB,EACzC,SAAS,EAAgB,MAAM,WAAW,EAC5C,CAAC,IAEI,CACR;EAED,OAAO,EAAM,aAAa,GAAY;GACpC,UAAU;GACV,MAAM,EAAW,MAAM,QAAQ;EACjC,CAAC;CACH,CAAC;CAEH,OACE,kBAAC,WAAD;EAAc;EAAK,GAAI;EAAO,WAAW,EAAK,EAAO,aAAa,CAAS;YACxE;CACM,CAAA;AAEb,CACF"}

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

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

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

@@ -95,7 +95,7 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<CTABannerPr
     ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Image: React.ForwardRefExoticComponent<Omit<CTABannerImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
     Logo: React.ForwardRefExoticComponent<Omit<CTABannerLogoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Link: ({ className, children, variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+    Link: ({ className, children, variant, ...props }: LinkProps) => React.JSX.Element;
 };
 export {};
 //# sourceMappingURL=CTABanner.d.ts.map

package/esm/CTABanner/CTABanner.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Grid as t } from "../Grid/Grid.js";
 import { Text as n } from "../Text/Text.js";
 import { Heading as r } from "../Heading/Heading.js";
 import { ButtonGroup as i } from "../ButtonGroup/ButtonGroup.js";
 import { Image as a } from "../Image/Image.js";
 import { Link as o } from "../Link/Link.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes-B9zRp3WA.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes-B9zRp3WA.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
 /* empty css                                                                                                        */
 import s from "./CTABanner.module.js";
 import c, { forwardRef as l, useCallback as u, useMemo as d } from "react";