npm - @primer/react-brand - Versions diffs - 0.73.0 → 0.74.0-rc.6f254662 - Mend

@primer/react-brand 0.73.0 → 0.74.0-rc.6f254662

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

package/docs/components/Card/react.md CHANGED Viewed

@@ -153,37 +153,45 @@ When an image should stretch to fill the card width, set `padding="none"` on `Ca
 ```jsx
 <Grid>
-  {[
-    {
-      heading: 'Build with GitHub Copilot',
-      description: 'Write, review, and understand code with AI-powered assistance.',
-      image: '/images/placeholder-1.png',
-    },
-    {
-      heading: 'Automate your workflow',
-      description: 'Keep projects moving with tools that fit the way your team works.',
-      image: '/images/placeholder-2.png',
-    },
-    {
-      heading: 'Ship secure software',
-      description: 'Find and fix vulnerabilities throughout the development lifecycle.',
-      image: '/images/placeholder-3.png',
-    },
-  ].map(card => (
-    <Grid.Column key={card.heading} span={{xsmall: 12, large: 4}}>
-      <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
-        <Card.Heading>{card.heading}</Card.Heading>
-        <Card.Description>{card.description}</Card.Description>
-        <Card.Image
-          position="block-end"
-          padding="none"
-          src={card.image}
-          alt="Abstract gradient illustration"
-          aspectRatio="4:3"
-        />
-      </Card>
-    </Grid.Column>
-  ))}
+  <Grid.Column span={{xsmall: 12, large: 4}}>
+    <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
+      <Card.Heading>Build with GitHub Copilot</Card.Heading>
+      <Card.Description>Write, review, and understand code with AI-powered assistance.</Card.Description>
+      <Card.Image
+        position="block-end"
+        padding="none"
+        src="/images/placeholder-1.png"
+        alt="Abstract gradient illustration"
+        aspectRatio="4:3"
+      />
+    </Card>
+  </Grid.Column>
+  <Grid.Column span={{xsmall: 12, large: 4}}>
+    <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
+      <Card.Heading>Automate your workflow</Card.Heading>
+      <Card.Description>Keep projects moving with tools that fit the way your team works.</Card.Description>
+      <Card.Image
+        position="block-end"
+        padding="none"
+        src="/images/placeholder-2.png"
+        alt="Abstract gradient illustration"
+        aspectRatio="4:3"
+      />
+    </Card>
+  </Grid.Column>
+  <Grid.Column span={{xsmall: 12, large: 4}}>
+    <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
+      <Card.Heading>Ship secure software</Card.Heading>
+      <Card.Description>Find and fix vulnerabilities throughout the development lifecycle.</Card.Description>
+      <Card.Image
+        position="block-end"
+        padding="none"
+        src="/images/placeholder-3.png"
+        alt="Abstract gradient illustration"
+        aspectRatio="4:3"
+      />
+    </Card>
+  </Grid.Column>
 </Grid>
 ```

package/docs/components/InlineCode/index.md ADDED Viewed

@@ -0,0 +1,53 @@
+---
+title: Inline code
+description: Use InlineCode to render a short inline code fragment.
+keywords: ['code', 'command', 'filename', 'inline']
+source: https://github.com/primer/brand/blob/main/packages/react/src/InlineCode/InlineCode.tsx
+storybook: '/brand/storybook/?path=/story/components-inlinecode--playground'
+---
+```js
+import {InlineCode} from '@primer/react-brand'
+```
+## Usage
+Use inline code for short code fragments such as commands, filenames, API names, configuration keys and values.
+## Examples
+### Default
+```jsx
+<Text as="p">
+  Install Primer Brand with <InlineCode>npm install @primer/react-brand</InlineCode>.
+</Text>
+```
+### In a heading
+```jsx
+<Heading>
+  Work directly with your GitHub Issues via <InlineCode wrap={false}>/mcp</InlineCode> support
+</Heading>
+```
+### Wrapping
+`InlineCode` wraps by default to prevent long fragments from overflowing their container. Use `wrap={false}` only for
+slash commands that must remain together and have a low character count.
+```jsx
+<Text as="p">
+  Long commands wrap when needed: <InlineCode>npm install @primer/react-brand@latest --save-exact</InlineCode>. Short
+  slash commands can remain together: <InlineCode wrap={false}>/mcp</InlineCode>.
+</Text>
+```
+## Component props
+| Name   | Type      | Default | Description                                  |
+| :----- | :-------- | :-----: | :------------------------------------------- |
+| `wrap` | `boolean` |  `true` | Controls whether the code fragment can wrap. |
+`InlineCode` renders a native `code` element and accepts its standard HTML attributes.

package/docs/components/index.md CHANGED Viewed

@@ -24,6 +24,7 @@ description: Primer Brand UI components
 - [Icon](Icon/index.md): Use the icon component to display Octicons with an optional background
 - [IDE](IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](Image/react.md): Use the image component to display a graphical representation.
+- [Inline code](InlineCode/index.md): Use InlineCode to render a short inline code fragment.
 - [Label](Label/react.md): Use the label component to add metadata or indicate the status of items.
 - [Logo suite](LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.73.0)
+# Primer Brand docs (v0.74.0-rc.6f254662)
-These docs are bundled with `@primer/react-brand@0.73.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.74.0-rc.6f254662` and match your installed version.
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.
@@ -58,6 +58,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Icon](components/Icon/index.md): Use the icon component to display Octicons with an optional background
 - [IDE](components/IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](components/Image/react.md): Use the image component to display a graphical representation.
+- [Inline code](components/InlineCode/index.md): Use InlineCode to render a short inline code fragment.
 - [Label](components/Label/react.md): Use the label component to add metadata or indicate the status of items.
 - [Logo suite](components/LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](components/MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.

package/docs/introduction/mcp.md CHANGED Viewed

@@ -16,7 +16,7 @@ The server exposes a set of tools that AI agents can call:
 | Tool                       | What it does                                                                                                                                         |
 | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `primer_brand_setup`       | Configures Primer Brand first-time. Includes `ThemeProvider`, Mona Sans and RSC-directive configuration among other things                           |
+| `primer_brand_setup`       | Configures Primer Brand first-time and maintains a Primer Brand pointer beside the declaring `package.json`.                                         |
 | `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, labels) and the current-brand reference templates to start from. |
 | `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                 |
 | `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                         |
@@ -41,6 +41,8 @@ Add the server to your workspace's `.vscode/mcp.json` (or your user `mcp.json`):
 }
 ```
+When an agent calls `primer_brand_setup`, the tool updates `AGENTS.md` only in a package whose `package.json` declares `@primer/react-brand`. Existing instructions are preserved. If several workspace packages declare the dependency, call setup with `projectDir` set to the intended workspace-relative package folder. The pointer routes future agents to the MCP tools and version-matched docs bundled with the installed package.
 ## Set up in other clients
 For GitHub Copilot CLI and other `stdio`-enabled MCP clients, run the server directly:

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

@@ -5,6 +5,7 @@ import { TextProps } from '../Text';
 /**
  * Design tokens
  */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
 import { type LinkProps } from '../Link';
 export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CTABanner.d.ts","sourceRoot":"","sources":["../../src/CTABanner/CTABanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAEvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,EAAU,YAAY,EAAC,MAAM,YAAY,CAAA;AAChD,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAGvC;;GAEG;AACH,OAAO,8GAA8G,CAAA;AAKrH,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAE5C,eAAO,MAAM,yBAAyB,gCAAiC,CAAA;AAEvE,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,MAAM,CAAC,EAAE,CAAC,CAAA;IACV,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAED,KAAK,+BAA+B,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACvE,KAAK,gBAAgB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;AAC9E,KAAK,4BAA4B,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAA;AACnE,KAAK,oCAAoC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AAC5E,KAAK,gCAAgC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AAExE,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,WAAW,CAAC,GACjD,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,GAAG,4BAA4B,CAAA;IACjE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,+BAA+B,CAAA;IAC7D;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,GAAG,oCAAoC,CAAA;IACvE;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,gCAAgC,CAAA;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC1C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;CAC5C,CAAA;~~AAiMH~~,KAAK,qBAAqB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,GAAG,YAAY,CAAA;AAiBhB,KAAK,yBAAyB,GAAG,KAAK,CAAC,kBAAkB,CAAC,oBAAoB,CAAC,GAC7E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC/B,CAAA;AA+BH,KAAK,mBAAmB,GAAG,SAAS,CAAC,gBAAgB,CAAC,GACpD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,GAAG;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeH,KAAK,kBAAkB,GAAG,SAAS,CAAC,cAAc,CAAC,GACjD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAcH,eAAO,MAAM,SAAS;;;;;;uDAN8C,SAAS;CAa3E,CAAA"}
1	+ {"version":3,"file":"CTABanner.d.ts","sourceRoot":"","sources":["../../src/CTABanner/CTABanner.tsx"],"names":[],"mappings":"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"}

package/esm/CTABanner/CTABanner.js CHANGED Viewed

@@ -5,7 +5,8 @@ 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/cta-banner/colors-with-modes-B9zRp3WA.css';/* empty css                                                                                                        */
+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                                                                                                         */
+/* empty css                                                                                                        */
 import s from "./CTABanner.module.js";
 import c, { forwardRef as l, useCallback as u, useMemo as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
@@ -42,10 +43,10 @@ var m = ["default", "subtle"], h = l(({ align: n = "center", hasBorder: r = !1,
 	}), [C, D]), L = D === "balanced" && N || D === "minimal" && P, R = i ? ({ children: e }) => /* @__PURE__ */ f("div", {
 		className: s["CTABanner-outer-container--border"],
 		children: e
-	}) : c.Fragment, z = D === "balanced" || D === "minimal" ? "start" : n, B = typeof l == "string" && m.includes(l);
+	}) : c.Fragment, z = D === "balanced" || D === "minimal" ? "start" : n;
 	return (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && (D === "balanced" && !N && console.warn("CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly."), D === "minimal" && I && console.warn("CTABanner: Image child is not supported in minimal variant and will not be rendered.")), /* @__PURE__ */ f(R, { children: /* @__PURE__ */ f("section", {
 		ref: k,
-		className: e(s.CTABanner, a && s["CTABanner--shadow"], s[`CTABanner--variant-${D}`], B && s[`CTABanner--bgColor-${l}`], S),
+		className: e(s.CTABanner, a && s["CTABanner--shadow"], s[`CTABanner--variant-${D}`], S),
 		style: {
 			...M,
 			...E

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement> & {\n /\n Alternative presentations\n /\n variant?: 'default' \| 'balanced' \| 'minimal'\n /\n The alignment of the content within the banner.\n /\n align?: 'start' \| 'center'\n /\n A flag to add a border to the banner.\n /\n hasBorder?: boolean\n /\n Enable optional grid lines\n /\n hasGridLines?: boolean\n /\n A flag to remove the shadow from the banner.\n * @deprecated - hasShadow will be removed in a future release.\n /\n hasShadow?: boolean\n /\n A flag to remove the background from the banner.\n /\n hasBackground?: boolean\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 Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n trailingComponent?: React.FunctionComponent\n }\n\nconst Root = forwardRef(\n (\n {\n align = 'center',\n hasBorder = false,\n hasGridLines = false,\n hasShadow = false,\n hasBackground = true,\n backgroundColor = 'var(--brand-CTABanner-bgColor)',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n variant = 'default',\n ...props\n }: CTABannerProps,\n ref: Ref<HTMLElement>,\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 CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[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-CTABanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-CTABanner-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 {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n ImageChild?: React.ReactElement\n ButtonGroupChild?: React.ReactElement\n restChildren: React.ReactElement[]\n hasImageChild: boolean\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === _Image) {\n acc.hasImageChild = true\n if (variant === 'balanced') {\n acc.ImageChild = child\n } else if (variant !== 'minimal') {\n acc.restChildren.push(child)\n }\n // minimal variant: image is intentionally excluded from rendering\n } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n acc.ButtonGroupChild = child\n } else if (child.type === _Heading) {\n const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n acc.restChildren.push(\n headingChild.props.size === undefined\n ? React.cloneElement(headingChild, {\n size: variant === 'minimal' ? '6' : defaultHeadingSize,\n })\n : headingChild,\n )\n } else {\n acc.restChildren.push(child)\n }\n }\n return acc\n },\n {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n )\n return result\n }, [children, variant])\n\n const hasSideColumn = (variant === 'balanced' && ImageChild) \|\| (variant === 'minimal' && ButtonGroupChild)\n\n const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n : React.Fragment\n\n const defaultAlign = variant === 'balanced' \|\| variant === 'minimal' ? 'start' : align\n\n const hasSystemBackgroundColor =\n typeof backgroundColor === 'string' &&\n CTABannerBackgroundColors.includes(backgroundColor as (typeof CTABannerBackgroundColors)[number])\n\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n if (variant === 'balanced' && !ImageChild) {\n // eslint-disable-next-line no-console\n console.warn(\n 'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n )\n }\n if (variant === 'minimal' && hasImageChild) {\n // eslint-disable-next-line no-console\n console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n }\n }\n\n return (\n <Tag>\n <section\n ref={ref}\n className={clsx(\n styles.CTABanner,\n hasShadow && styles['CTABanner--shadow'],\n styles[`CTABanner--variant-${variant}`],\n hasSystemBackgroundColor && styles[`CTABanner--bgColor-${backgroundColor}`],\n className,\n )}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div\n className={clsx(\n styles['CTABanner-container'],\n hasBorder && styles['CTABanner-container--border'],\n hasGridLines && styles['CTABanner-container--border-gridlines'],\n !hasGridLines && styles['CTABanner-container--rounded'],\n hasBackground && styles['CTABanner-container--background'],\n )}\n >\n {hasSideColumn ? (\n <Grid className={styles['CTABanner-grid']}>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n {ImageChild \|\| ButtonGroupChild}\n </Grid.Column>\n </Grid>\n ) : (\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n )}\n </div>\n </section>\n </Tag>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement> & {\n variant?: TextProps['variant']\n }\n\nconst Description = forwardRef(\n ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n {children}\n </Text>\n )\n },\n)\n\nconst _ButtonGroup = forwardRef(\n (\n {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <ButtonGroup\n buttonSize={buttonSize}\n buttonsAs={buttonsAs}\n className={clsx(styles['CTABanner-buttonGroup'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </ButtonGroup>\n )\n },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' \| 'alt'> & {\n src: string\n alt: string\n }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n return (\n <Image\n ref={ref}\n className={clsx(styles['CTABanner-image'], className)}\n src={src}\n alt={alt}\n borderRadius=\"medium\"\n {...props}\n />\n )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode\n }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n {children}\n </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n {children}\n </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n Heading: _Heading,\n Description,\n ButtonGroup: _ButtonGroup,\n Image: _Image,\n Logo: _Logo,\n Link: _Link,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement> & {\n /\n Alternative presentations\n /\n variant?: 'default' \| 'balanced' \| 'minimal'\n /\n The alignment of the content within the banner.\n /\n align?: 'start' \| 'center'\n /\n A flag to add a border to the banner.\n /\n hasBorder?: boolean\n /\n Enable optional grid lines\n /\n hasGridLines?: boolean\n /\n A flag to remove the shadow from the banner.\n * @deprecated - hasShadow will be removed in a future release.\n /\n hasShadow?: boolean\n /\n A flag to remove the background from the banner.\n /\n hasBackground?: boolean\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 Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n trailingComponent?: React.FunctionComponent\n }\n\nconst Root = forwardRef(\n (\n {\n align = 'center',\n hasBorder = false,\n hasGridLines = false,\n hasShadow = false,\n hasBackground = true,\n backgroundColor = 'var(--brand-CTABanner-bgColor)',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n variant = 'default',\n ...props\n }: CTABannerProps,\n ref: Ref<HTMLElement>,\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 CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[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-CTABanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-CTABanner-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 {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n ImageChild?: React.ReactElement\n ButtonGroupChild?: React.ReactElement\n restChildren: React.ReactElement[]\n hasImageChild: boolean\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === _Image) {\n acc.hasImageChild = true\n if (variant === 'balanced') {\n acc.ImageChild = child\n } else if (variant !== 'minimal') {\n acc.restChildren.push(child)\n }\n // minimal variant: image is intentionally excluded from rendering\n } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n acc.ButtonGroupChild = child\n } else if (child.type === _Heading) {\n const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n acc.restChildren.push(\n headingChild.props.size === undefined\n ? React.cloneElement(headingChild, {\n size: variant === 'minimal' ? '6' : defaultHeadingSize,\n })\n : headingChild,\n )\n } else {\n acc.restChildren.push(child)\n }\n }\n return acc\n },\n {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n )\n return result\n }, [children, variant])\n\n const hasSideColumn = (variant === 'balanced' && ImageChild) \|\| (variant === 'minimal' && ButtonGroupChild)\n\n const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n : React.Fragment\n\n const defaultAlign = variant === 'balanced' \|\| variant === 'minimal' ? 'start' : align\n\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n if (variant === 'balanced' && !ImageChild) {\n // eslint-disable-next-line no-console\n console.warn(\n 'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n )\n }\n if (variant === 'minimal' && hasImageChild) {\n // eslint-disable-next-line no-console\n console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n }\n }\n\n return (\n <Tag>\n <section\n ref={ref}\n className={clsx(\n styles.CTABanner,\n hasShadow && styles['CTABanner--shadow'],\n styles[`CTABanner--variant-${variant}`],\n className,\n )}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div\n className={clsx(\n styles['CTABanner-container'],\n hasBorder && styles['CTABanner-container--border'],\n hasGridLines && styles['CTABanner-container--border-gridlines'],\n !hasGridLines && styles['CTABanner-container--rounded'],\n hasBackground && styles['CTABanner-container--background'],\n )}\n >\n {hasSideColumn ? (\n <Grid className={styles['CTABanner-grid']}>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n {ImageChild \|\| ButtonGroupChild}\n </Grid.Column>\n </Grid>\n ) : (\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n )}\n </div>\n </section>\n </Tag>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement> & {\n variant?: TextProps['variant']\n }\n\nconst Description = forwardRef(\n ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n {children}\n </Text>\n )\n },\n)\n\nconst _ButtonGroup = forwardRef(\n (\n {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <ButtonGroup\n buttonSize={buttonSize}\n buttonsAs={buttonsAs}\n className={clsx(styles['CTABanner-buttonGroup'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </ButtonGroup>\n )\n },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' \| 'alt'> & {\n src: string\n alt: string\n }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n return (\n <Image\n ref={ref}\n className={clsx(styles['CTABanner-image'], className)}\n src={src}\n alt={alt}\n borderRadius=\"medium\"\n {...props}\n />\n )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode\n }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n {children}\n </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n {children}\n </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n Heading: _Heading,\n Description,\n ButtonGroup: _ButtonGroup,\n Image: _Image,\n Logo: _Logo,\n Link: _Link,\n})\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,IAA4B,CAAC,WAAW,SAAS,EAyExD,IAAO,GAET,EACE,WAAQ,UACR,eAAY,IACZ,kBAAe,IACf,eAAY,IACZ,mBAAgB,IAChB,qBAAkB,kCAClB,uBACA,6BAA0B,UAC1B,yBAAsB,SACtB,cACA,aACA,kBAAkB,GAClB,mBAAmB,GACnB,UACA,aAAU,WACV,GAAG,KAEL,MACG;CACH,IAAM,IAAyB,GAAa,GAA0B,MAChE,MAAa,yBACR,OAAO,EAAM,KAGlB,MAAa,sBAAsB,OAAO,KAAU,YAC/C,EAA0B,SAAS,EAAoD,GAC1F,4BAA4B,EAAM,KAClC,GAIL,EAAE,CAAC,EAEA,IAAe,GAClB,GAAU,MACT,OAAO,KAAU,YAAY,MAAM,QAAQ,EAAM,GAC7C,GAAE,qBAAqB,MAAa,EAAuB,GAAO,EAAS,EAAC,GAC5E;GACG,4BAA4B,MAAa,EAAuB,GAAO,QAAQ,EAAS;GACxF,6BAA6B,MAAa,EAAuB,GAAO,SAAS,EAAS;GAC1F,0BAA0B,MAAa,EAAuB,GAAO,MAAM,EAAS;EACtF,EACP,CAAC,EAAuB,CACzB,EAEK,IAAmB,QAAc;EACrC,IAAM,IAAY,EAAE,EAEd,KAAY,GAAU,MAAU;AACpC,GAAI,KACF,OAAO,OAAO,GAAW,EAAa,GAAU,EAAM,CAAC;;AAS3D,SALA,EAAS,oBAAoB,EAAgB,EAC7C,EAAS,wBAAwB,EAAmB,EACpD,EAAS,6BAA6B,EAAwB,EAC9D,EAAS,yBAAyB,EAAoB,EAE/C;IACN;EAAC;EAAiB;EAAoB;EAAyB;EAAqB;EAAa,CAAC,EAE/F,EAAC,eAAY,qBAAkB,iBAAc,qBAAiB,QACnD,EAAM,SAAS,QAAQ,EAAS,CAAC,QAM7C,GAAK,MAAU;AACd,MAAI,EAAM,eAAe,EAAM,CAC7B,KAAI,EAAM,SAAS,EAEjB,CADA,EAAI,gBAAgB,IAChB,MAAY,aACd,EAAI,aAAa,IACR,MAAY,aACrB,EAAI,aAAa,KAAK,EAAM;WAGrB,MAAY,aAAa,EAAM,SAAS,EACjD,GAAI,mBAAmB;WACd,EAAM,SAAS,GAAU;GAClC,IAAM,IAAe;AACrB,KAAI,aAAa,KACf,EAAa,MAAM,SAAS,KAAA,IACxB,EAAM,aAAa,GAAc,EAC/B,MAAM,MAAY,YAAY,MAAM,GACrC,CAAC,GACF,EACL;QAED,GAAI,aAAa,KAAK,EAAM;AAGhC,SAAO;IAET;EAAC,YAAY,KAAA;EAAW,kBAAkB,KAAA;EAAW,cAAc,EAAE;EAAE,eAAe;EAAM,CAEvF,EACN,CAAC,GAAU,EAAQ,CAAC,EAEjB,IAAiB,MAAY,cAAc,KAAgB,MAAY,aAAa,GAEpF,IAAyC,KAC1C,EAAC,UAAU,QAAW,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAuC;EAAY,CAAA,GACjG,EAAM,UAEJ,IAAe,MAAY,cAAc,MAAY,YAAY,UAAU;AAejF,SAbA,QAAA,IAAA,aAA6B,iBAAA,QAAA,IAAA,aAA0C,YACjE,MAAY,cAAc,CAAC,KAE7B,QAAQ,KACN,mHACD,EAEC,MAAY,aAAa,KAE3B,QAAQ,KAAK,uFAAuF,GAKtG,kBAAC,GAAD,EAAA,UACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,WACP,KAAa,EAAO,sBACpB,EAAO,sBAAsB,MAC7B,EACD;EACD,OAAO;GAAC,GAAG;GAAkB,GAAG;GAAM;EACtC,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,wBACP,KAAa,EAAO,gCACpB,KAAgB,EAAO,0CACvB,CAAC,KAAgB,EAAO,iCACxB,KAAiB,EAAO,mCACzB;aAEA,IACC,kBAAC,GAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,EAAK,QAAN;KAAa,MAAM;MAAC,QAAQ;MAAI,OAAO;MAAE;KAAE,WAAW,EAAO;eAC3D,kBAAC,OAAD;MACE,WAAW,EACT,EAAO,sBACP,MAAiB,YAAY,EAAO,6BACrC;gBAJH;OAMG,KAAoB,kBAAC,GAAD,EAAoB,CAAA;OACxC;OACA,KAAqB,kBAAC,GAAD,EAAqB,CAAA;OACvC;;KACM,CAAA,EACd,kBAAC,EAAK,QAAN;KAAa,MAAM;MAAC,QAAQ;MAAI,OAAO;MAAE;KAAE,WAAW,EAAO;eAC1D,KAAc;KACH,CAAA,CACT;QAEP,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,sBACP,MAAiB,YAAY,EAAO,6BACrC;cAJH;KAMG,KAAoB,kBAAC,GAAD,EAAoB,CAAA;KACxC;KACA,KAAqB,kBAAC,GAAD,EAAqB,CAAA;KACvC;;GAEJ,CAAA;EACE,CAAA,EACN,CAAA;EAGX,EAEK,IAAsB,MAMtB,IAA2C,KAE3C,IAAW,GAEb,EAAC,QAAK,GAAqB,UAAO,GAAoB,cAAW,aAAU,GAAG,KAC9E,MAGE,kBAAC,GAAD;CAAc;CAAK,WAAW,EAAK,EAAO,sBAAsB,EAAU;CAAQ;CAAU;CAAI,GAAI;CACjG;CACO,CAAA,CAGf,EAOK,IAAc,GACjB,EAAC,cAAW,aAAU,aAAU,SAAS,GAAG,KAAmC,MAE5E,kBAAC,GAAD;CAAW;CAAK,WAAW,EAAK,EAAO,0BAA0B,EAAU;CAAE,IAAG;CAAa;CAAS,GAAI;CACvG;CACI,CAAA,CAGZ,EAEK,IAAe,GAEjB,EAAC,cAAW,gBAAa,UAAU,cAAW,aAAU,GAAG,KAC3D,MAGE,kBAAC,GAAD;CACc;CACD;CACX,WAAW,EAAK,EAAO,0BAA0B,EAAU;CACtD;CACL,GAAI;CAEH;CACW,CAAA,CAGnB,EAQK,IAAS,GAAY,EAAC,cAAW,QAAK,QAAK,GAAG,KAA6B,MAE7E,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,oBAAoB,EAAU;CAChD;CACA;CACL,cAAa;CACb,GAAI;CACJ,CAAA,CAEJ,EAOI,IAAQ,GAAY,EAAC,cAAW,aAAU,GAAG,KAA4B,MAC7E,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAK,EAAO,mBAAmB,EAAU;CAAE,GAAI;CACtE;CACG,CAAA,CACN,EAQW,IAAY,OAAO,OAAO,GAAM;CAC3C,SAAS;CACT;CACA,aAAa;CACb,OAAO;CACP,MAAM;CACN,OAZa,EAAC,cAAW,aAAU,aAAU,UAAU,GAAG,QAC1D,kBAAC,GAAD;EAAe;EAAS,WAAW,EAAK,EAAO,mBAAmB,EAAU;EAAE,GAAI;EAC/E;EACI,CAAA;CAUR,CAAC"}

package/esm/CTABanner/{CTABanner.module-CDLOww8c.css → CTABanner.module-D4pYR4mY.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__CTABanner-module__CTABanner___osRag{max-width:var(--brand-breakpoint-xlarge);width:100%;margin:0 auto;display:flex;position:relative}.Primer_Brand__CTABanner-module__CTABanner--shadow___bUnyT:before{content:"";inset:var(--base-size-16);filter:blur(var(--base-size-96));background:linear-gradient(to right, var(--brand-CTABanner-shadow-color-start), var(--brand-CTABanner-shadow-color-end));position:absolute;transform:translateZ(0)}.Primer_Brand__CTABanner-module__CTABanner-grid___Hm5rQ{--brand-Grid-spacing-row:0;row-gap:0;padding-inline:0}.Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk{align-items:center;display:flex}.Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:center;align-items:center;display:flex}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-end}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-start}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-end}}@media screen and (width<=63.24rem){.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-start}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{order:-1;margin-block-start:0}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk,.Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{margin-block-start:var(--base-size-24)}}.Primer_Brand__CTABanner-module__CTABanner-outer-container--border___Rhoq4{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-64) var(--base-size-20);z-index:1;box-sizing:border-box;width:100%}.Primer_Brand__CTABanner-module__CTABanner-container--rounded___atljT{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding-inline:var(--base-size-20);padding-block:var(--base-size-32)}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding-inline:var(--base-size-20);padding-block:var(--base-size-40)}.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:var(--base-size-16);gap:var(--CTABanner-content-gap);flex-direction:column;align-items:flex-start;max-width:800px;margin:0 auto;display:flex}.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9 img,.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9 picture{display:block}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:0}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9,.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{max-width:576px;margin:0}.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-repeat:no-repeat;background-color:var(--brand-CTABanner-bgColor);background-image:var(--brand-CTABanner-narrow-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-narrow-background-image-size,var(--brand-CTABanner-background-image-size));background-position:50%;background-position:var(--brand-CTABanner-narrow-background-image-position,var(--brand-CTABanner-background-image-position,center))}.Primer_Brand__CTABanner-module__CTABanner-container--border___7xUNr{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__CTABanner-module__CTABanner-container--border-gridlines___aCdnk{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);max-width:534px;margin-inline:auto}.Primer_Brand__CTABanner-module__CTABanner-content--center___SCpf2{text-align:center;align-items:center}.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb{margin-bottom:var(--base-size-16)}@media screen and (width>=48rem){.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-80) var(--base-size-36)}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-36);padding-block-end:var(--base-size-48)}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-36);padding-block:var(--base-size-48)}.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-color:var(--brand-CTABanner-regular-background-color,var(--brand-CTABanner-background-color));background-image:var(--brand-CTABanner-regular-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-regular-background-image-size,var(--brand-CTABanner-background-image-size));background-position:var(--brand-CTABanner-regular-background-image-position,var(--brand-CTABanner-background-image-position))}}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:var(--base-size-32)}.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-96) var(--base-size-64);max-width:100%}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1,.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-color:var(--brand-CTABanner-wide-background-color,var(--brand-CTABanner-background-color));background-image:var(--brand-CTABanner-wide-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-wide-background-image-size,var(--brand-CTABanner-background-image-size));background-position:var(--brand-CTABanner-wide-background-image-position,var(--brand-CTABanner-background-image-position))}}.Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{width:100%;height:auto}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{width:100%;max-width:476px;height:auto}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{max-width:100%;height:auto}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk:has(.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX){align-items:stretch}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk:has(.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX)>.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{flex:1}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9:has(>.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX)>.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX+{margin-block-start:auto}}.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{align-items:center;gap:var(--base-size-8);width:100%;border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-end:var(--base-size-32);display:flex}.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX>svg,.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX>img{height:var(--base-size-40);width:auto;display:block}.Primer_Brand__CTABanner-module__CTABanner--variant-default___LX6Wi .Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{border-block-end:none;width:auto;padding-block-end:0}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{margin-block-end:var(--base-size-24)}.Primer_Brand__CTABanner-module__CTABanner-link___iY0Se{align-self:auto}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE b{color:var(--brand-CTABanner-color-heading-emphasis);font-weight:inherit}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE code,.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb code{font-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-default);padding:0 var(--base-size-4) 0;margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)}.Primer_Brand__CTABanner-module__CTABanner--bgColor-default___HxU_W .Primer_Brand__CTABanner-module__CTABanner-heading___tWytE code,.Primer_Brand__CTABanner-module__CTABanner--bgColor-default___HxU_W .Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb code{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb code{padding:0 var(--base-size-4) 0}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE:has(code){line-height:2lh}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-heading___tWytE.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE:has(code){line-height:2.8lh}}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-heading___tWytE.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE:has(code){line-height:1.9lh}.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb:has(code){line-height:1.25lh}.Primer_Brand__CTABanner-module__CTABanner-buttonGroup___5SMyK{margin-block-start:0;margin-block-start:calc(-1 var(--CTABanner-content-gap,0px));padding-block-start:var(--base-size-12)}
1	+ .Primer_Brand__CTABanner-module__CTABanner___osRag{max-width:var(--brand-breakpoint-xlarge);width:100%;margin:0 auto;display:flex;position:relative}.Primer_Brand__CTABanner-module__CTABanner--shadow___bUnyT:before{content:"";inset:var(--base-size-16);filter:blur(var(--base-size-96));background:linear-gradient(to right, var(--brand-CTABanner-shadow-color-start), var(--brand-CTABanner-shadow-color-end));position:absolute;transform:translateZ(0)}.Primer_Brand__CTABanner-module__CTABanner-grid___Hm5rQ{--brand-Grid-spacing-row:0;row-gap:0;padding-inline:0}.Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk{align-items:center;display:flex}.Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:center;align-items:center;display:flex}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-end}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-start}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-end}}@media screen and (width<=63.24rem){.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-start}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{order:-1;margin-block-start:0}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk,.Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{margin-block-start:var(--base-size-24)}}.Primer_Brand__CTABanner-module__CTABanner-outer-container--border___Rhoq4{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-64) var(--base-size-20);z-index:1;box-sizing:border-box;width:100%}.Primer_Brand__CTABanner-module__CTABanner-container--rounded___atljT{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding-inline:var(--base-size-20);padding-block:var(--base-size-32)}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding-inline:var(--base-size-20);padding-block:var(--base-size-40)}.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:var(--base-size-16);gap:var(--CTABanner-content-gap);flex-direction:column;align-items:flex-start;max-width:800px;margin:0 auto;display:flex}.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9 img,.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9 picture{display:block}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:0}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9,.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{max-width:576px;margin:0}.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-repeat:no-repeat;background-color:var(--brand-CTABanner-bgColor);background-image:var(--brand-CTABanner-narrow-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-narrow-background-image-size,var(--brand-CTABanner-background-image-size));background-position:50%;background-position:var(--brand-CTABanner-narrow-background-image-position,var(--brand-CTABanner-background-image-position,center))}.Primer_Brand__CTABanner-module__CTABanner-container--border___7xUNr{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__CTABanner-module__CTABanner-container--border-gridlines___aCdnk{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);max-width:534px;margin-inline:auto}.Primer_Brand__CTABanner-module__CTABanner-content--center___SCpf2{text-align:center;align-items:center}.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb{margin-bottom:var(--base-size-16)}@media screen and (width>=48rem){.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-80) var(--base-size-36)}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-36);padding-block-end:var(--base-size-48)}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-36);padding-block:var(--base-size-48)}.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-color:var(--brand-CTABanner-regular-background-color,var(--brand-CTABanner-background-color));background-image:var(--brand-CTABanner-regular-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-regular-background-image-size,var(--brand-CTABanner-background-image-size));background-position:var(--brand-CTABanner-regular-background-image-position,var(--brand-CTABanner-background-image-position))}}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:var(--base-size-32)}.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-96) var(--base-size-64);max-width:100%}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1,.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-color:var(--brand-CTABanner-wide-background-color,var(--brand-CTABanner-background-color));background-image:var(--brand-CTABanner-wide-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-wide-background-image-size,var(--brand-CTABanner-background-image-size));background-position:var(--brand-CTABanner-wide-background-image-position,var(--brand-CTABanner-background-image-position))}}.Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{width:100%;height:auto}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{width:100%;max-width:476px;height:auto}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{max-width:100%;height:auto}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk:has(.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX){align-items:stretch}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk:has(.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX)>.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{flex:1}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9:has(>.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX)>.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX+{margin-block-start:auto}}.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{align-items:center;gap:var(--base-size-8);width:100%;border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-end:var(--base-size-32);display:flex}.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX>svg,.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX>img{height:var(--base-size-40);width:auto;display:block}.Primer_Brand__CTABanner-module__CTABanner--variant-default___LX6Wi .Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{border-block-end:none;width:auto;padding-block-end:0}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{margin-block-end:var(--base-size-24)}.Primer_Brand__CTABanner-module__CTABanner-link___iY0Se{align-self:auto}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE b{color:var(--brand-CTABanner-color-heading-emphasis);font-weight:inherit}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE code,.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb code{font-family:var(--brand-fontStack-monospace);font-size:calc(1em - 1px);font-weight:var(--base-text-weight-regular);color:var(--brand-InlineCode-color-fg-default);background-color:var(--brand-InlineCode-bgColor);padding-block:0;padding-inline:var(--base-size-4);border-radius:var(--base-size-2);white-space:normal;word-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.6}.Primer_Brand__CTABanner-module__CTABanner-buttonGroup___5SMyK{margin-block-start:0;margin-block-start:calc(-1 var(--CTABanner-content-gap,0px));padding-block-start:var(--base-size-12)}

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

@@ -1,4 +1,4 @@
-import './CTABanner.module-CDLOww8c.css';var e = {
+import './CTABanner.module-D4pYR4mY.css';var e = {
 	CTABanner: "Primer_Brand__CTABanner-module__CTABanner___osRag",
 	"CTABanner--shadow": "Primer_Brand__CTABanner-module__CTABanner--shadow___bUnyT",
 	"CTABanner-grid": "Primer_Brand__CTABanner-module__CTABanner-grid___Hm5rQ",
@@ -20,7 +20,6 @@ import './CTABanner.module-CDLOww8c.css';var e = {
 	"CTABanner--variant-default": "Primer_Brand__CTABanner-module__CTABanner--variant-default___LX6Wi",
 	"CTABanner-link": "Primer_Brand__CTABanner-module__CTABanner-link___iY0Se",
 	"CTABanner-heading": "Primer_Brand__CTABanner-module__CTABanner-heading___tWytE",
-	"CTABanner--bgColor-default": "Primer_Brand__CTABanner-module__CTABanner--bgColor-default___HxU_W",
 	"CTABanner-buttonGroup": "Primer_Brand__CTABanner-module__CTABanner-buttonGroup___5SMyK"
 };
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CTABanner.module.js","names":[],"sources":["../../src/CTABanner/CTABanner.module.css"],"sourcesContent":[".CTABanner {\n position: relative;\n margin: 0 auto;\n display: flex;\n max-width: var(--brand-breakpoint-xlarge);\n width: 100%;\n}\n\n.CTABanner--shadow::before {\n content: '';\n position: absolute;\n inset: var(--base-size-16);\n filter: blur(var(--base-size-96));\n transform: translateZ(0);\n background: linear-gradient(\n to right,\n var(--brand-CTABanner-shadow-color-start),\n var(--brand-CTABanner-shadow-color-end)\n );\n}\n\n.CTABanner-grid {\n row-gap: 0;\n --brand-Grid-spacing-row: 0;\n padding-inline: 0;\n}\n\n.CTABanner-grid-column--primary {\n display: flex;\n align-items: center;\n}\n\n.CTABanner-grid-column--secondary {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n justify-content: flex-end;\n}\n\n.CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n justify-content: flex-start;\n}\n\n@media screen and (min-width: 63.25rem) {\n .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n justify-content: flex-end;\n }\n}\n\n/* Stack on narrow viewports /\n@media screen and (max-width: 63.24rem) {\n .CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n justify-content: flex-start;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n order: -1;\n margin-block-start: 0;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--primary {\n margin-block-start: var(--base-size-24);\n }\n\n .CTABanner-grid-column--secondary {\n margin-block-start: var(--base-size-24);\n }\n}\n\n.CTABanner-outer-container--border {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container {\n padding: var(--base-size-64) var(--base-size-20);\n z-index: 1;\n width: 100%;\n box-sizing: border-box;\n}\n\n.CTABanner-container--rounded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.CTABanner--variant-balanced .CTABanner-container {\n padding-inline: var(--base-size-20);\n padding-block: var(--base-size-32);\n}\n\n.CTABanner--variant-minimal .CTABanner-container {\n padding-inline: var(--base-size-20);\n padding-block: var(--base-size-40);\n}\n\n.CTABanner-content {\n --CTABanner-content-gap: var(--base-size-16);\n display: flex;\n flex-direction: column;\n gap: var(--CTABanner-content-gap);\n align-items: flex-start;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.CTABanner-content :is(img, picture) {\n display: block;\n}\n\n.CTABanner--variant-minimal .CTABanner-content {\n --CTABanner-content-gap: 0;\n}\n\n.CTABanner--variant-balanced .CTABanner-content,\n.CTABanner--variant-minimal .CTABanner-content {\n max-width: 576px;\n margin: 0;\n}\n\n.CTABanner-container--background {\n background-repeat: no-repeat;\n background-color: var(--brand-CTABanner-bgColor);\n background-image: var(--brand-CTABanner-narrow-background-image-src, var(--brand-CTABanner-background-image-src));\n background-size: var(--brand-CTABanner-narrow-background-image-size, var(--brand-CTABanner-background-image-size));\n\n background-position: var(\n --brand-CTABanner-narrow-background-image-position,\n var(--brand-CTABanner-background-image-position, center)\n );\n}\n\n.CTABanner-container--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container--border-gridlines {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-inline: auto;\n max-width: 534px; / To match tablet for river /\n}\n\n.CTABanner-content--center {\n align-items: center;\n text-align: center;\n}\n\n.CTABanner-description {\n margin-bottom: var(--base-size-16);\n}\n\n/ Medium breakpoint and up /\n@media screen and (min-width: 48rem) {\n .CTABanner-container {\n padding: var(--base-size-80) var(--base-size-36);\n }\n\n .CTABanner--variant-balanced .CTABanner-container {\n padding: var(--base-size-36);\n padding-block-end: var(--base-size-48);\n }\n\n .CTABanner--variant-minimal .CTABanner-container {\n padding: var(--base-size-36);\n padding-block: var(--base-size-48);\n }\n\n .CTABanner-container--background {\n background-color: var(--brand-CTABanner-regular-background-color, var(--brand-CTABanner-background-color));\n background-image: var(--brand-CTABanner-regular-background-image-src, var(--brand-CTABanner-background-image-src));\n background-size: var(--brand-CTABanner-regular-background-image-size, var(--brand-CTABanner-background-image-size));\n background-position: var(\n --brand-CTABanner-regular-background-image-position,\n var(--brand-CTABanner-background-image-position)\n );\n }\n}\n\n/ Large breakpoint and up /\n@media screen and (min-width: 63.25rem) {\n .CTABanner--variant-balanced .CTABanner-content {\n --CTABanner-content-gap: var(--base-size-32);\n }\n .CTABanner-container {\n padding: var(--base-size-96) var(--base-size-64);\n max-width: 100%;\n }\n\n .CTABanner--variant-balanced .CTABanner-container {\n padding: var(--base-size-64);\n }\n\n .CTABanner--variant-minimal .CTABanner-container {\n padding: var(--base-size-64);\n }\n}\n\n/ Wide /\n@media screen and (min-width: 80rem) {\n .CTABanner-container--background {\n background-color: var(--brand-CTABanner-wide-background-color, var(--brand-CTABanner-background-color));\n background-image: var(--brand-CTABanner-wide-background-image-src, var(--brand-CTABanner-background-image-src));\n background-size: var(--brand-CTABanner-wide-background-image-size, var(--brand-CTABanner-background-image-size));\n\n background-position: var(\n --brand-CTABanner-wide-background-image-position,\n var(--brand-CTABanner-background-image-position)\n );\n }\n}\n\n.CTABanner-image {\n width: 100%;\n height: auto;\n}\n\n.CTABanner--variant-balanced .CTABanner-image {\n max-width: 476px;\n width: 100%;\n height: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .CTABanner--variant-balanced .CTABanner-image {\n max-width: 100%;\n height: auto;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) {\n align-items: stretch;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) > .CTABanner-content {\n flex: 1;\n }\n\n .CTABanner--variant-balanced .CTABanner-content:has(> .CTABanner-logo) > .CTABanner-logo + {\n margin-block-start: auto;\n }\n}\n\n.CTABanner-logo {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n width: 100%;\n padding-block-end: var(--base-size-32);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-logo > svg,\n.CTABanner-logo > img {\n height: var(--base-size-40);\n width: auto;\n display: block;\n}\n\n.CTABanner--variant-default .CTABanner-logo {\n width: auto;\n padding-block-end: 0;\n border-block-end: none;\n}\n\n.CTABanner--variant-minimal .CTABanner-logo {\n margin-block-end: var(--base-size-24);\n}\n\n.CTABanner-link {\n align-self: auto;\n}\n\n/\n We use a custom token here because text-emphasized doesn't reach 4.5 contrast\n * against the default banner bgColor in light mode.\n /\n.CTABanner-heading b {\n color: var(--brand-CTABanner-color-heading-emphasis);\n font-weight: inherit;\n}\n\n.CTABanner-heading code,\n.CTABanner-description code {\n font-~~size: inherit;\n font-~~family: var(--brand-fontStack-monospace);\n ~~background~~-~~color:~~ ~~var(--brand-color-canvas-default);\~~n ~~padding~~: 0 ~~var(--base~~-~~size-4~~) 0;\n ~~margin~~-~~inline~~: var(--base-~~size~~-2);\n ~~border:~~ ~~var(--brand-borderWidth-thin)~~ ~~solid~~ ~~var(--brand-color-border-default);\~~n ~~border~~-~~radius~~: ~~var(--brand-borderRadius-small)~~;\n ~~box-shadow~~: var(--brand-~~borderWidth~~-~~thin) var(--brand-borderWidth-thin) 0 0 var(--brand-~~color-~~border~~-default);\n~~}\n\n.CTABanner--bgColor-default .CTABanner-heading code,\n.CTABanner--bgColor-default .CTABanner-description code {\n~~ background-color: var(--brand-~~color~~-~~canvas-subtle~~);\n~~}\n\n.CTABanner~~-~~description~~ ~~code {\~~n padding: 0 var(--base-size-4) 0;\n~~}\n\n.CTABanner-heading.CTABanner-heading:has(code) {\n~~ ~~line~~-~~height~~: ~~calc~~(1lh 2);\n~~}\n\n@media screen and (min~~-~~width~~: ~~63.25rem) {\~~n ~~.CTABanner--variant~~-~~balanced .CTABanner-heading.CTABanner-heading~~:~~has(code)~~ ~~{\n line-height: calc(1lh * 2.8)~~;\n ~~}\n}\n\n.CTABanner--variant~~-~~minimal .CTABanner~~-~~heading.CTABanner~~-~~heading:has(code) {\n line~~-~~height~~: ~~calc(1lh * 1.9)~~;\n~~}\n\n.CTABanner~~-~~description.CTABanner~~-~~description~~:~~has(code)~~ ~~{\n line-height: calc(1lh * 1.25)~~;\n}\n\n.CTABanner-buttonGroup {\n margin-block-start: calc(-1 * var(--CTABanner-content-gap, 0px));\n padding-block-start: var(--base-size-12);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CTABanner.module.js","names":[],"sources":["../../src/CTABanner/CTABanner.module.css"],"sourcesContent":[".CTABanner {\n position: relative;\n margin: 0 auto;\n display: flex;\n max-width: var(--brand-breakpoint-xlarge);\n width: 100%;\n}\n\n.CTABanner--shadow::before {\n content: '';\n position: absolute;\n inset: var(--base-size-16);\n filter: blur(var(--base-size-96));\n transform: translateZ(0);\n background: linear-gradient(\n to right,\n var(--brand-CTABanner-shadow-color-start),\n var(--brand-CTABanner-shadow-color-end)\n );\n}\n\n.CTABanner-grid {\n row-gap: 0;\n --brand-Grid-spacing-row: 0;\n padding-inline: 0;\n}\n\n.CTABanner-grid-column--primary {\n display: flex;\n align-items: center;\n}\n\n.CTABanner-grid-column--secondary {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n justify-content: flex-end;\n}\n\n.CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n justify-content: flex-start;\n}\n\n@media screen and (min-width: 63.25rem) {\n .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n justify-content: flex-end;\n }\n}\n\n/* Stack on narrow viewports /\n@media screen and (max-width: 63.24rem) {\n .CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n justify-content: flex-start;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n order: -1;\n margin-block-start: 0;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--primary {\n margin-block-start: var(--base-size-24);\n }\n\n .CTABanner-grid-column--secondary {\n margin-block-start: var(--base-size-24);\n }\n}\n\n.CTABanner-outer-container--border {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container {\n padding: var(--base-size-64) var(--base-size-20);\n z-index: 1;\n width: 100%;\n box-sizing: border-box;\n}\n\n.CTABanner-container--rounded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.CTABanner--variant-balanced .CTABanner-container {\n padding-inline: var(--base-size-20);\n padding-block: var(--base-size-32);\n}\n\n.CTABanner--variant-minimal .CTABanner-container {\n padding-inline: var(--base-size-20);\n padding-block: var(--base-size-40);\n}\n\n.CTABanner-content {\n --CTABanner-content-gap: var(--base-size-16);\n display: flex;\n flex-direction: column;\n gap: var(--CTABanner-content-gap);\n align-items: flex-start;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.CTABanner-content :is(img, picture) {\n display: block;\n}\n\n.CTABanner--variant-minimal .CTABanner-content {\n --CTABanner-content-gap: 0;\n}\n\n.CTABanner--variant-balanced .CTABanner-content,\n.CTABanner--variant-minimal .CTABanner-content {\n max-width: 576px;\n margin: 0;\n}\n\n.CTABanner-container--background {\n background-repeat: no-repeat;\n background-color: var(--brand-CTABanner-bgColor);\n background-image: var(--brand-CTABanner-narrow-background-image-src, var(--brand-CTABanner-background-image-src));\n background-size: var(--brand-CTABanner-narrow-background-image-size, var(--brand-CTABanner-background-image-size));\n\n background-position: var(\n --brand-CTABanner-narrow-background-image-position,\n var(--brand-CTABanner-background-image-position, center)\n );\n}\n\n.CTABanner-container--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container--border-gridlines {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-inline: auto;\n max-width: 534px; / To match tablet for river /\n}\n\n.CTABanner-content--center {\n align-items: center;\n text-align: center;\n}\n\n.CTABanner-description {\n margin-bottom: var(--base-size-16);\n}\n\n/ Medium breakpoint and up /\n@media screen and (min-width: 48rem) {\n .CTABanner-container {\n padding: var(--base-size-80) var(--base-size-36);\n }\n\n .CTABanner--variant-balanced .CTABanner-container {\n padding: var(--base-size-36);\n padding-block-end: var(--base-size-48);\n }\n\n .CTABanner--variant-minimal .CTABanner-container {\n padding: var(--base-size-36);\n padding-block: var(--base-size-48);\n }\n\n .CTABanner-container--background {\n background-color: var(--brand-CTABanner-regular-background-color, var(--brand-CTABanner-background-color));\n background-image: var(--brand-CTABanner-regular-background-image-src, var(--brand-CTABanner-background-image-src));\n background-size: var(--brand-CTABanner-regular-background-image-size, var(--brand-CTABanner-background-image-size));\n background-position: var(\n --brand-CTABanner-regular-background-image-position,\n var(--brand-CTABanner-background-image-position)\n );\n }\n}\n\n/ Large breakpoint and up /\n@media screen and (min-width: 63.25rem) {\n .CTABanner--variant-balanced .CTABanner-content {\n --CTABanner-content-gap: var(--base-size-32);\n }\n .CTABanner-container {\n padding: var(--base-size-96) var(--base-size-64);\n max-width: 100%;\n }\n\n .CTABanner--variant-balanced .CTABanner-container {\n padding: var(--base-size-64);\n }\n\n .CTABanner--variant-minimal .CTABanner-container {\n padding: var(--base-size-64);\n }\n}\n\n/ Wide /\n@media screen and (min-width: 80rem) {\n .CTABanner-container--background {\n background-color: var(--brand-CTABanner-wide-background-color, var(--brand-CTABanner-background-color));\n background-image: var(--brand-CTABanner-wide-background-image-src, var(--brand-CTABanner-background-image-src));\n background-size: var(--brand-CTABanner-wide-background-image-size, var(--brand-CTABanner-background-image-size));\n\n background-position: var(\n --brand-CTABanner-wide-background-image-position,\n var(--brand-CTABanner-background-image-position)\n );\n }\n}\n\n.CTABanner-image {\n width: 100%;\n height: auto;\n}\n\n.CTABanner--variant-balanced .CTABanner-image {\n max-width: 476px;\n width: 100%;\n height: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .CTABanner--variant-balanced .CTABanner-image {\n max-width: 100%;\n height: auto;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) {\n align-items: stretch;\n }\n\n .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) > .CTABanner-content {\n flex: 1;\n }\n\n .CTABanner--variant-balanced .CTABanner-content:has(> .CTABanner-logo) > .CTABanner-logo + {\n margin-block-start: auto;\n }\n}\n\n.CTABanner-logo {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n width: 100%;\n padding-block-end: var(--base-size-32);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-logo > svg,\n.CTABanner-logo > img {\n height: var(--base-size-40);\n width: auto;\n display: block;\n}\n\n.CTABanner--variant-default .CTABanner-logo {\n width: auto;\n padding-block-end: 0;\n border-block-end: none;\n}\n\n.CTABanner--variant-minimal .CTABanner-logo {\n margin-block-end: var(--base-size-24);\n}\n\n.CTABanner-link {\n align-self: auto;\n}\n\n/\n We use a custom token here because text-emphasized doesn't reach 4.5 contrast\n * against the default banner bgColor in light mode.\n /\n.CTABanner-heading b {\n color: var(--brand-CTABanner-color-heading-emphasis);\n font-weight: inherit;\n}\n\n.CTABanner-heading code,\n.CTABanner-description code {\n font-family: var(--brand-fontStack-monospace);\n / optical resize relative to parent. monospace tends to be a little taller than sans-serif /\n font-size: calc(1em - 1px);\n font-weight: var(--base-text-weight-regular);\n / Keep the background clear of adjacent lines when large text wraps. /\n line-height: 1.6;\n color: var(--brand-InlineCode-color-fg-default);\n background-color: var(--brand-InlineCode-bgColor);\n padding-block: 0;\n padding-inline: var(--base-size-4);\n border-radius: var(--base-size-2);\n white-space: normal;\n overflow-wrap: anywhere;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n}\n\n.CTABanner-buttonGroup {\n margin-block-start: calc(-1 var(--CTABanner-content-gap, 0px));\n padding-block-start: var(--base-size-12);\n}\n"],"mappings":""}

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

@@ -5,6 +5,7 @@ import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
 export declare const CardVariants: readonly ["default", "minimal"];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/esm/Card/Card.js CHANGED Viewed

@@ -7,10 +7,11 @@ import { Heading as a } from "../Heading/Heading.js";
 import { ExpandableArrow as o } from "../ExpandableArrow/ExpandableArrow.js";
 import { Image as s } from "../Image/Image.js";
 import c from "../Link/Link.module.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/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';/* empty css                                                                                                         */
 import { Icon as l } from "../Icon/Icon.js";
 import { Token as u } from "../Token/Token.js";
 import { isFragmentElement as d } from "../utils/isFragmentElement.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';/* empty css                                                                                     */
+/* empty css                                                                                     */
 /* empty css                                                                                                  */
 import f from "./Card.module.js";
 import p, { forwardRef as m } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n /\n Specify alternative card appearance\n /\n variant?: CardVariants\n /\n Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n /\n children:\n \| React.ReactNode\n \| React.ReactElement<CardImageProps>\n \| React.ReactElement<CardIconProps>\n \| React.ReactElement<CardLabelProps>\n \| React.ReactElement<CardTokensProps>\n \| React.ReactElement<CardHeadingProps>\n \| React.ReactElement<CardDescriptionProps>\n /\n Disable transitions and animations within the Card\n /\n disableAnimation?: boolean\n /\n The href of the link\n * /\n href: string\n /\n Changes the cta text of the card\n * /\n ctaText?: string\n /\n Specifies the presentation of the call-to-action area\n /\n ctaVariant?: CardCTAVariant\n /\n Optional, custom background color.\n /\n backgroundColor?: CardBackgroundColor\n /\n A visual that appears before the heading, commonly used for a logo or brand mark\n /\n leadingVisual?: CardLeadingVisual\n /\n Adds a border to the card.\n /\n hasBorder?: boolean\n /\n Fills the width of the parent container and removes the default max-width.\n /\n fullWidth?: boolean\n /\n Aligns the card content\n /\n align?: 'start' \| 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n align = 'start',\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n children: childrenMaybeWrappedInFragment,\n className,\n ctaText = 'Learn more',\n ctaVariant = defaultCardCTAVariant,\n disableAnimation = false,\n fullWidth = false,\n href,\n hasBorder = false,\n leadingVisual,\n style,\n variant = 'default',\n backgroundColor,\n ...props\n },\n ref,\n ) => {\n const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n const resolvedBackgroundColor =\n backgroundColor ?? (variant === 'minimal' \|\| ctaVariant === 'arrow' ? 'none' : 'default')\n\n let children: React.ReactNode \| null\n\n if (childrenMaybeWrappedInFragment == null) {\n children = null\n } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n children = childrenMaybeWrappedInFragment.props.children ?? null\n } else {\n children = childrenMaybeWrappedInFragment\n }\n\n const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n React.Children.toArray(children).reduce<{\n cardHeading?: ReturnType<typeof CardHeading>\n cardImage?: ReturnType<typeof CardImage>\n cardIcon?: ReturnType<typeof CardIcon>\n cardLabel?: ReturnType<typeof CardLabel>\n cardTokensBlockStart?: ReturnType<typeof CardTokens>\n cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n cardDescription?: ReturnType<typeof CardDescription>\n }>((acc, child) => {\n if (isCardHeading(child)) {\n acc.cardHeading = React.cloneElement(child, {\n href,\n })\n } else if (isCardImage(child)) {\n acc.cardImage = child\n } else if (isCardIcon(child)) {\n acc.cardIcon = child\n } else if (isCardLabel(child)) {\n acc.cardLabel = child\n } else if (isCardTokens(child)) {\n if (child.props.position === 'block-end') {\n acc.cardTokensBlockEnd = child\n } else {\n acc.cardTokensBlockStart = child\n }\n } else if (isCardDescription(child)) {\n acc.cardDescription = child\n }\n\n return acc\n }, {})\n\n if ((process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n // eslint-disable-next-line no-console\n console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n }\n\n const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n const imagePosition = cardImage ? cardImage.props.position \|\| 'block-start' : null\n const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n return (\n <DefaultCardWrapperComponent\n style={style}\n className={clsx(\n fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n styles[`Card--align-${align}`],\n )}\n >\n <div\n className={clsx(\n styles.Card,\n disableAnimation && styles['Card--disableAnimation'],\n renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n variant === 'minimal' && styles['Card--variant-minimal'],\n hasBorder && styles['Card--border'],\n styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n imagePosition && styles[`Card--imagePos-${imagePosition}`],\n className,\n )}\n style={style}\n ref={cardRef}\n {...props}\n >\n {imagePosition === 'block-start' ? cardImage : null}\n {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n {renderedCardIcon}\n {cardTokensBlockStart}\n {cardLabel}\n {cardHeading}\n {cardDescription}\n {cardTokensBlockEnd}\n {imagePosition === 'block-end' ? cardImage : null}\n\n {ctaVariant !== 'none' ? (\n <div\n className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n >\n <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n {ctaText}\n </Text>\n </span>\n {shouldRenderLinkArrow ? (\n <span\n className={clsx(\n styles.Card__actionIcon,\n ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n )}\n >\n <ExpandableArrow\n className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n aria-hidden=\"true\"\n />\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n </DefaultCardWrapperComponent>\n )\n },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n className?: string\n style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n return (\n <div className={clsx(styles['Card__outer'], className)} style={style}>\n {children}\n </div>\n )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n if (!leadingVisual) {\n return null\n }\n\n if (typeof leadingVisual === 'function') {\n return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n }\n\n if (React.isValidElement<{className?: string}>(leadingVisual)) {\n return React.cloneElement(leadingVisual, {\n className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n })\n }\n\n return null\n}\n\nexport type CardImageProps = {\n position?: 'block-start' \| 'block-end'\n padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n return (\n <div\n className={clsx(\n styles.Card__image,\n styles[`Card__image--position-${position}`],\n padding === 'none' && styles['Card__image--padding-none'],\n )}\n >\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n ({children, className, position = 'block-start', ...rest}, ref) => {\n return (\n <div\n className={clsx(\n styles.Card__tokens,\n position === 'block-end' && styles['Card__tokens--position-block-end'],\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n children: React.ReactNode \| React.ReactNode[]\n variant?: CardLabelVariant\n }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n if (variant === 'accent-text') {\n return (\n <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n {children}\n </EyebrowText>\n )\n }\n\n return (\n <Token\n ref={ref as React.Ref<HTMLSpanElement \| HTMLAnchorElement>}\n className={clsx(styles.Card__label, className)}\n {...rest}\n >\n {children}\n </Token>\n )\n },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n href?: string\n} & Omit<HeadingProps, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n return (\n <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n <a\n href={href}\n className={clsx(styles.Card__link)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onBlur={onBlur}\n onFocus={onFocus}\n >\n {children}\n </a>\n </Heading>\n )\n },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n {children}\n </Text>\n )\n },\n)\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/\n Card component:\n * {@link https://primer.style/brand/components/Card/ See usage examples}.\n */\nexport const Card = Object.assign(CardRoot, {\n Image: CardImage,\n Icon: CardIcon,\n Label: CardLabel,\n Tokens: CardTokens,\n Heading: CardHeading,\n Description: CardDescription,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n /\n Specify alternative card appearance\n /\n variant?: CardVariants\n /\n Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n /\n children:\n \| React.ReactNode\n \| React.ReactElement<CardImageProps>\n \| React.ReactElement<CardIconProps>\n \| React.ReactElement<CardLabelProps>\n \| React.ReactElement<CardTokensProps>\n \| React.ReactElement<CardHeadingProps>\n \| React.ReactElement<CardDescriptionProps>\n /\n Disable transitions and animations within the Card\n /\n disableAnimation?: boolean\n /\n The href of the link\n * /\n href: string\n /\n Changes the cta text of the card\n * /\n ctaText?: string\n /\n Specifies the presentation of the call-to-action area\n /\n ctaVariant?: CardCTAVariant\n /\n Optional, custom background color.\n /\n backgroundColor?: CardBackgroundColor\n /\n A visual that appears before the heading, commonly used for a logo or brand mark\n /\n leadingVisual?: CardLeadingVisual\n /\n Adds a border to the card.\n /\n hasBorder?: boolean\n /\n Fills the width of the parent container and removes the default max-width.\n /\n fullWidth?: boolean\n /\n Aligns the card content\n /\n align?: 'start' \| 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n align = 'start',\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n children: childrenMaybeWrappedInFragment,\n className,\n ctaText = 'Learn more',\n ctaVariant = defaultCardCTAVariant,\n disableAnimation = false,\n fullWidth = false,\n href,\n hasBorder = false,\n leadingVisual,\n style,\n variant = 'default',\n backgroundColor,\n ...props\n },\n ref,\n ) => {\n const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n const resolvedBackgroundColor =\n backgroundColor ?? (variant === 'minimal' \|\| ctaVariant === 'arrow' ? 'none' : 'default')\n\n let children: React.ReactNode \| null\n\n if (childrenMaybeWrappedInFragment == null) {\n children = null\n } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n children = childrenMaybeWrappedInFragment.props.children ?? null\n } else {\n children = childrenMaybeWrappedInFragment\n }\n\n const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n React.Children.toArray(children).reduce<{\n cardHeading?: ReturnType<typeof CardHeading>\n cardImage?: ReturnType<typeof CardImage>\n cardIcon?: ReturnType<typeof CardIcon>\n cardLabel?: ReturnType<typeof CardLabel>\n cardTokensBlockStart?: ReturnType<typeof CardTokens>\n cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n cardDescription?: ReturnType<typeof CardDescription>\n }>((acc, child) => {\n if (isCardHeading(child)) {\n acc.cardHeading = React.cloneElement(child, {\n href,\n })\n } else if (isCardImage(child)) {\n acc.cardImage = child\n } else if (isCardIcon(child)) {\n acc.cardIcon = child\n } else if (isCardLabel(child)) {\n acc.cardLabel = child\n } else if (isCardTokens(child)) {\n if (child.props.position === 'block-end') {\n acc.cardTokensBlockEnd = child\n } else {\n acc.cardTokensBlockStart = child\n }\n } else if (isCardDescription(child)) {\n acc.cardDescription = child\n }\n\n return acc\n }, {})\n\n if ((process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n // eslint-disable-next-line no-console\n console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n }\n\n const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n const imagePosition = cardImage ? cardImage.props.position \|\| 'block-start' : null\n const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n return (\n <DefaultCardWrapperComponent\n style={style}\n className={clsx(\n fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n styles[`Card--align-${align}`],\n )}\n >\n <div\n className={clsx(\n styles.Card,\n disableAnimation && styles['Card--disableAnimation'],\n renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n variant === 'minimal' && styles['Card--variant-minimal'],\n hasBorder && styles['Card--border'],\n styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n imagePosition && styles[`Card--imagePos-${imagePosition}`],\n className,\n )}\n style={style}\n ref={cardRef}\n {...props}\n >\n {imagePosition === 'block-start' ? cardImage : null}\n {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n {renderedCardIcon}\n {cardTokensBlockStart}\n {cardLabel}\n {cardHeading}\n {cardDescription}\n {cardTokensBlockEnd}\n {imagePosition === 'block-end' ? cardImage : null}\n\n {ctaVariant !== 'none' ? (\n <div\n className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n >\n <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n {ctaText}\n </Text>\n </span>\n {shouldRenderLinkArrow ? (\n <span\n className={clsx(\n styles.Card__actionIcon,\n ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n )}\n >\n <ExpandableArrow\n className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n aria-hidden=\"true\"\n />\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n </DefaultCardWrapperComponent>\n )\n },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n className?: string\n style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n return (\n <div className={clsx(styles['Card__outer'], className)} style={style}>\n {children}\n </div>\n )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n if (!leadingVisual) {\n return null\n }\n\n if (typeof leadingVisual === 'function') {\n return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n }\n\n if (React.isValidElement<{className?: string}>(leadingVisual)) {\n return React.cloneElement(leadingVisual, {\n className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n })\n }\n\n return null\n}\n\nexport type CardImageProps = {\n position?: 'block-start' \| 'block-end'\n padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n return (\n <div\n className={clsx(\n styles.Card__image,\n styles[`Card__image--position-${position}`],\n padding === 'none' && styles['Card__image--padding-none'],\n )}\n >\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n ({children, className, position = 'block-start', ...rest}, ref) => {\n return (\n <div\n className={clsx(\n styles.Card__tokens,\n position === 'block-end' && styles['Card__tokens--position-block-end'],\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n children: React.ReactNode \| React.ReactNode[]\n variant?: CardLabelVariant\n }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n if (variant === 'accent-text') {\n return (\n <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n {children}\n </EyebrowText>\n )\n }\n\n return (\n <Token\n ref={ref as React.Ref<HTMLSpanElement \| HTMLAnchorElement>}\n className={clsx(styles.Card__label, className)}\n {...rest}\n >\n {children}\n </Token>\n )\n },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n href?: string\n} & Omit<HeadingProps, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n return (\n <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n <a\n href={href}\n className={clsx(styles.Card__link)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onBlur={onBlur}\n onFocus={onFocus}\n >\n {children}\n </a>\n </Heading>\n )\n },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n {children}\n </Text>\n )\n },\n)\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/\n Card component:\n * {@link https://primer.style/brand/components/Card/ See usage examples}.\n */\nexport const Card = Object.assign(CardRoot, {\n Image: CardImage,\n Icon: CardIcon,\n Label: CardLabel,\n Tokens: CardTokens,\n Heading: CardHeading,\n Description: CardDescription,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,IAAa,IAAe,CAAC,WAAW,UAAU,EACrC,IAAkB;CAAC;CAAQ;CAAS;CAAO,EAC3C,IAAuB;CAAC;CAAW;CAAU;CAAO,EACpD,IAAqB,CAAC,eAAe,YAAY,EACjD,IAAoB,CAAC,SAAS,cAAc,EAC5C,IAA0B,CAAC,WAAW,OAAO,EAE7C,IAAiB,GAEjB,IAAuB,EAAe,IACtC,IAAwB,EAAgB,IACxC,IAA0B,EAAkB,IAmEnD,IAAW,GAEb,EACE,WAAQ,SACR,iBACA,iBACA,YACA,WACA,UAAU,GACV,cACA,aAAU,cACV,gBAAa,GACb,sBAAmB,IACnB,eAAY,IACZ,SACA,eAAY,IACZ,kBACA,UACA,aAAU,WACV,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAuB,EAAiC,EAClE,IACJ,MAAoB,MAAY,aAAa,MAAe,UAAU,SAAS,YAE7E;AAEJ,CAKE,IALE,KAAkC,OACzB,OACF,EAAkB,EAA+B,GAC/C,EAA+B,MAAM,YAAY,OAEjD;CAGb,IAAM,EAAC,cAAW,aAAU,cAAW,yBAAsB,uBAAoB,gBAAa,uBAC5F,EAAM,SAAS,QAAQ,EAAS,CAAC,QAQ7B,GAAK,OACH,EAAc,EAAM,GACtB,EAAI,cAAc,EAAM,aAAa,GAAO,EAC1C,SACD,CAAC,GACO,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAW,EAAM,GAC1B,EAAI,WAAW,IACN,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAa,EAAM,GACxB,EAAM,MAAM,aAAa,cAC3B,EAAI,qBAAqB,IAEzB,EAAI,uBAAuB,IAEpB,EAAkB,EAAM,KACjC,EAAI,kBAAkB,IAGjB,IACN,EAAE,CAAC;AAER,EAAA,QAAA,IAAA,aAA8B,iBAAA,QAAA,IAAA,aAA0C,WAAW,KAAiB,KAElG,QAAQ,KAAK,mGAAmG;CAGlH,IAAM,IAAwB,EAA2B,EAAc,EACjE,IAAmB,IAAwB,KAAA,IAAY,GACvD,IAAgB,IAAY,EAAU,MAAM,YAAY,gBAAgB,MACxE,IAAwB,EAAE,MAAU,YAAY,MAAe;AAErE,QACE,kBAAC,GAAD;EACS;EACP,WAAW,EACT,IAAY,EAAO,qBAAqB,EAAO,mBAC/C,EAAO,eAAe,KACvB;YAED,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,MACP,KAAoB,EAAO,2BAC3B,KAAyB,EAAO,2BAChC,MAAe,WAAW,EAAO,2BACjC,KAAsB,EAAO,mCAC7B,MAAY,aAAa,EAAO,0BAChC,KAAa,EAAO,iBACpB,EAAO,yBAAyB,MAChC,KAAiB,EAAO,kBAAkB,MAC1C,EACD;GACM;GACP,KAAK;GACL,GAAI;aAfN;IAiBG,MAAkB,gBAAgB,IAAY;IAC9C,IAAwB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAsB;KAA4B,CAAA,GAAG;IACpG;IACA;IACA;IACA;IACA;IACA;IACA,MAAkB,cAAc,IAAY;IAE5C,MAAe,SAwBZ,OAvBF,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,cAAc,MAAe,WAAW,EAAO,2BAA2B;KACjG,eAAa,MAAe,UAAU,KAAO,KAAA;eAF/C,CAIE,kBAAC,QAAD;MAAM,WAAW,EAAK,MAAe,WAAW,EAAO,sBAAsB;gBAC3E,kBAAC,GAAD;OAAM,IAAG;OAAO,MAAK;OAAM,WAAW,EAAK,EAAW,gBAAgB,EAAO,kBAAkB;iBAC5F;OACI,CAAA;MACF,CAAA,EACN,IACC,kBAAC,QAAD;MACE,WAAW,EACT,EAAO,kBACP,MAAe,WAAW,EAAO,+BAClC;gBAED,kBAAC,GAAD;OACE,WAAW,EAAK,EAAW,eAAe,EAAO,yBAAyB;OAC1E,eAAY;OACZ,CAAA;MACG,CAAA,GACL,KACA;;IAEJ;;EACsB,CAAA;EAGnC;AAOD,SAAS,EAA4B,EAAC,cAAW,aAAU,YAA0C;AACnG,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,aAAgB,EAAU;EAAS;EAC5D;EACG,CAAA;;AAIV,SAAS,EAA2B,GAAmC;AAerE,QAdK,IAID,OAAO,KAAkB,aACpB,EAAM,cAAc,GAAe,EAAC,WAAW,EAAO,yBAA2B,CAAC,GAGvF,EAAM,eAAqC,EAAc,GACpD,EAAM,aAAa,GAAe,EACvC,WAAW,EAAK,EAAO,yBAA4B,EAAc,MAAM,UAAU,EAClF,CAAC,GAGG,OAbE;;AAqBX,SAAS,EAAU,EAAC,cAAW,cAAW,eAAe,aAAU,WAAW,GAAG,KAAuB;AACtG,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,aACP,EAAO,yBAAyB,MAChC,MAAY,UAAU,EAAO,6BAC9B;YAED,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAMV,IAAM,KAAY,EAAC,cAAW,mBAAgB,IAAM,GAAG,QACrD,kBAAC,GAAD;CAAM,WAAW,EAAK,EAAO,YAAY,EAAU;CAAiB;CAAe,GAAI;CAAS,CAAA,EAQ5F,IAAa,GAChB,EAAC,aAAU,cAAW,cAAW,eAAe,GAAG,KAAO,MAEvD,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,cACP,MAAa,eAAe,EAAO,qCACnC,EACD;CACI;CACL,GAAI;CAEH;CACG,CAAA,CAGX,EAQK,IAAY,GACf,EAAC,aAAU,aAAU,GAAyB,cAAW,GAAG,KAAO,MAC9D,MAAY,gBAEZ,kBAAC,GAAD;CAAkB;CAAK,WAAW,EAAK,EAAO,aAAa,EAAU;CAAE,SAAQ;CAAS,GAAI;CACzF;CACW,CAAA,GAKhB,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,EAAU;CAC9C,GAAI;CAEH;CACK,CAAA,CAGb,EASK,IAAc,GACjB,EAAC,aAAU,QAAK,MAAM,cAAW,SAAM,iBAAc,iBAAc,WAAQ,YAAS,GAAG,KAAO,MAE3F,kBAAC,GAAD;CAAS,MAAK;CAAI,WAAW,EAAK,EAAO,eAAe,EAAU;CAAO;CAAS;CAAI,GAAI;WACxF,kBAAC,KAAD;EACQ;EACN,WAAW,EAAK,EAAO,WAAW;EACpB;EACA;EACN;EACC;EAER;EACC,CAAA;CACI,CAAA,CAGf,EAMK,IAAkB,GACrB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CAAM,SAAQ;CAAa;CAAK,MAAK;CAAM,IAAG;CAAI,WAAW,EAAK,EAAO,mBAAmB,EAAU;CAAE,GAAI;CACzG;CACI,CAAA,CAGZ,EAEK,KACC,OACJ,MACC,EAAM,eAAe,EAAQ,IAAI,EAAQ,SAAS,GAEhD,IAAc,EAAyB,EAAU,EACjD,IAAa,EAAyB,EAAS,EAC/C,IAAc,EAAyB,EAAU,EACjD,IAAe,EAAyB,EAAW,EACnD,IAAgB,EAAyB,EAAY,EACrD,IAAoB,EAAyB,EAAgB,EAMtD,IAAO,OAAO,OAAO,GAAU;CAC1C,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,aAAa;CACd,CAAC"}