@primer/react-brand 0.73.0 → 0.74.0-rc.101f122b

package/docs/components/Card/react.md

@@ -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

@@ -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/MinimalFooter/index.md

@@ -1,6 +1,6 @@
 ---
 title: Minimal footer
-description: Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+description: Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
 keywords: ['legal', 'copyright', 'social', 'links', 'footnotes']
 ready: true
 source: https://github.com/primer/brand/blob/main/packages/react/src/MinimalFooter/MinimalFooter.tsx
@@ -22,6 +22,8 @@ import {MinimalFooter} from '@primer/react-brand'
 
 ### Footer links
 
+Use up to five `MinimalFooter.Link` children. Links can render as anchors or buttons.
+
 ```jsx
 <MinimalFooter>
   <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
@@ -56,7 +58,7 @@ import {MinimalFooter} from '@primer/react-brand'
 
 ### Footer social links
 
-`MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alteratively, pass an array of valid social links to filter the default list.
+`MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alternatively, pass an array of valid social links to filter and reorder the default list.
 
 ```jsx
 <Stack>
@@ -68,27 +70,69 @@ import {MinimalFooter} from '@primer/react-brand'
 </Stack>
 ```
 
+### Center component
+
+Use `centerComponent` for an exceptional page-specific control or status indicator between the top and bottom sections.
+
+```jsx
+<MinimalFooter
+  centerComponent={
+    <Stack direction="horizontal" gap="condensed" padding="none">
+      <Text size="200" variant="muted">
+        Status:
+      </Text>
+      <InlineLink href="https://www.githubstatus.com" size="200">
+        All systems operational
+      </InlineLink>
+    </Stack>
+  }
+/>
+```
+
+### Back to top
+
+Use `MinimalFooter.BackToTop` to opt into a control in the top row that scrolls the document back to the top.
+
+After keyboard activation, focus moves to the first `<main>` element, falling back to `<body>` or `<html>` when a main landmark is unavailable. Use `focusTargetId` to identify a different semantic top-of-page destination.
+
+```jsx
+<MinimalFooter socialLinks={false}>
+  <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+</MinimalFooter>
+```
+
 ## Component props
 
 ### MinimalFooter
 
-| Name                 | Type                                                                                             |                                        Default                                        | Description                                            |
-| :------------------- | :----------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------: | :----------------------------------------------------- |
-| `className`          | `string`                                                                                         |                                                                                       | Sets a custom class on the root element                |
-| `children`           | `'MinimalFooter.Link' \| 'MinimalFooter.Footnotes'`                                              |                                      `undefined`                                      | Valid child components                                 |
-| `copyrightStatement` | `string` \| `ReactElement`                                                                       |                                                                                       | The copyright statement to be displayed in the footer. |
-| `logoHref`           | `string`                                                                                         |                                 `'https://github.com'`                                | The href for the GitHub logo.                          |
-| `socialLinks`        | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` \| `false` | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` | Array of valid strings or `false` to hide all links    |
+| Name                 | Type                                                                                                                |                                        Default                                        | Description                                                        |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------: | :----------------------------------------------------------------- |
+| `className`          | `string`                                                                                                            |                                                                                       | Sets a custom class on the root element                            |
+| `centerComponent`    | `ReactElement`                                                                                                      |                                      `undefined`                                      | Renders an optional component between the top and bottom sections. |
+| `children`           | `'MinimalFooter.Link' \| 'MinimalFooter.Footnotes' \| 'MinimalFooter.BackToTop'`                                    |                                      `undefined`                                      | Valid child components                                             |
+| `copyrightStatement` | `string` \| `ReactElement`                                                                                          |                        Current-year GitHub copyright statement                        | The copyright statement displayed in the bottom section.           |
+| `logoHref`           | `string`                                                                                                            |                                 `'https://github.com'`                                | The href for the GitHub logomark.                                  |
+| `socialLinks`        | `Array<'x' \| 'github' \| 'linkedin' \| 'youtube' \| 'facebook' \| 'twitch' \| 'tiktok' \| 'instagram'>` \| `false` | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` | Ordered subset of social links, or `false` to hide all links.      |
 
 ### MinimalFooter.Link
 
 | Name       | Type              |   Default   | Description                         |
 | :--------- | :---------------- | :---------: | :---------------------------------- |
 | `as`       | `'a'`, `'button'` |    `'a'`    | Applies the underlying HTML element |
-| `children` | `string`          | `undefined` | Link label text                     |
+| `children` | `string`          | `undefined` | Label for a link in the top section |
 
 ### MinimalFooter.Footnotes
 
 | Name       | Type         |   Default   | Description                                                           |
 | :--------- | :----------- | :---------: | :-------------------------------------------------------------------- |
 | `children` | ReactElement | `undefined` | Use Primer Brand `Text` components to benefit from inherited styling. |
+
+### MinimalFooter.BackToTop
+
+| Name            | Type                |   Default   | Description                                                                                                                                                    |
+| :-------------- | :------------------ | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`      | `ReactNode`         |   Required  | The visible and accessible localized label.                                                                                                                    |
+| `focusTargetId` | `string`            | `undefined` | ID of the semantic top-of-page element that receives focus after keyboard activation. Defaults to the first `<main>`, then falls back to `<body>` or `<html>`. |
+| `onClick`       | `MouseEventHandler` | `undefined` | Runs before the built-in behavior. Call `event.preventDefault()` to cancel scrolling and focus transfer.                                                       |
+
+All other props, including ARIA and `data-*` attributes, forward to the underlying `<button>`.

package/docs/components/index.md

@@ -24,10 +24,11 @@ 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.
-- [Minimal footer](MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+- [Minimal footer](MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
 - [Minimal video player](MinimalVideoPlayer/index.md): Use MinimalVideoPlayer for muted, looping product demonstrations with a single play and pause control
 - [NavList](NavList/index.md): Use NavList to render vertical navigation with optional expandable groups.
 - [Ordered list](OrderedList/react.md): Use the ordered list component to display a list of numbered items.

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.73.0)
+# Primer Brand docs (v0.74.0-rc.101f122b)
 
-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.101f122b` 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,10 +58,11 @@ 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.
-- [Minimal footer](components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+- [Minimal footer](components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
 - [Minimal video player](components/MinimalVideoPlayer/index.md): Use MinimalVideoPlayer for muted, looping product demonstrations with a single play and pause control
 - [NavList](components/NavList/index.md): Use NavList to render vertical navigation with optional expandable groups.
 - [Ordered list](components/OrderedList/react.md): Use the ordered list component to display a list of numbered items.

package/docs/introduction/mcp.md

@@ -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

@@ -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

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

package/esm/CTABanner/CTABanner.js

@@ -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

@@ -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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"}
+{"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":"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"}

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

@@ -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)}
+.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

@@ -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

@@ -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":""}
+{"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

@@ -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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAC,MAAM,IAAI,CAAA;AAEtE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAKnD;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAClG,OAAO,wGAAwG,CAAA;AAQ/G,eAAO,MAAM,YAAY,iCAAkC,CAAA;AAC3D,eAAO,MAAM,eAAe,oCAAqC,CAAA;AACjE,eAAO,MAAM,oBAAoB,wCAAyC,CAAA;AAC1E,eAAO,MAAM,kBAAkB,uCAAwC,CAAA;AACvE,eAAO,MAAM,iBAAiB,mCAAoC,CAAA;AAClE,eAAO,MAAM,uBAAuB,8BAA+B,CAAA;AAEnE,eAAO,MAAM,cAAc,wIAAS,CAAA;AAEpC,eAAO,MAAM,oBAAoB,WAAoB,CAAA;AACrD,eAAO,MAAM,qBAAqB,QAAqB,CAAA;AACvD,eAAO,MAAM,uBAAuB,SAAuB,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,KAAK,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAA;AAEvF,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GACjC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GACnC,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;IAC5C;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;SAEK;IACL,IAAI,EAAE,MAAM,CAAA;IACZ;;SAEK;IACL,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,GAC5C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;AAoLnG,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,aAAa,GAAG,WAAW,CAAA;IACtC,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,GAAG,UAAU,CAAA;AAEd,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,QAAwB,EAAE,OAAmB,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,2CAYrG;AAED,KAAK,aAAa,GAAG,SAAS,CAAA;AAM9B,KAAK,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAoBD,KAAK,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAC/D,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,CAAA;AAwBH,KAAK,gBAAgB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GAC5E,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAqBrC,KAAK,oBAAoB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAwBD;;;GAGG;AACH,eAAO,MAAM,IAAI;;mDA/G8C,SAAS;;;;;CAsHtE,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/esm/Card/Card.js

@@ -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";