npm - @primer/react-brand - Versions diffs - 0.74.0-rc.888ba09a → 0.74.0-rc.ad4a6851 - Mend

@primer/react-brand 0.74.0-rc.888ba09a → 0.74.0-rc.ad4a6851

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

Files changed (455) hide show

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

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

package/docs/components/MinimalFooter/index.md CHANGED Viewed

@@ -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/PricingOptions/index.md CHANGED Viewed

@@ -359,7 +359,9 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
 ### Info tooltips
-Use `infoTooltip` on `PricingOptions.FeatureListItem` to add a supplementary tooltip to a feature.
+Use `infoTooltip` on `PricingOptions.FeatureListItem` to add an optional tooltip to a feature.
+An `aria-label` is automatically applied to the tooltip trigger. Use `infoTooltipAriaLabel` to customize it.
 ```jsx
 <PricingOptions>
@@ -384,6 +386,25 @@ Use `infoTooltip` on `PricingOptions.FeatureListItem` to add a supplementary too
 </PricingOptions>
 ```
+Use a custom trigger label when conditionally rendered content prevents the feature text from being used as the
+automatically generated label:
+```jsx
+function FeatureWithCustomContent({customContent}) {
+  return (
+    <PricingOptions.FeatureListItem
+      infoTooltip="Interact with Copilot using natural language."
+      infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
+    >
+      <>
+        Chat in IDE and Mobile
+        {customContent ? <Text>Custom footnote</Text> : null}
+      </>
+    </PricingOptions.FeatureListItem>
+  )
+}
+```
 ### Actions message
 Use `PricingOptions.ActionsMessage` to render status, billing, or upgrade notes in the actions area. Add
@@ -490,11 +511,12 @@ One item per pricing plan to be displayed. Maximum of 4 items.
 ### PricingOptions.FeatureListItem
-| Name          | Type                       |   Default   | required | Description                                               |
-| :------------ | :------------------------- | :---------: | :------: | :-------------------------------------------------------- |
-| `children`    | `ReactNode`                | `undefined` |  `true`  | The item of the feature list set                          |
-| `infoTooltip` | `string`                   | `undefined` |  `false` | Tooltip text shown on hover/focus via an info icon button |
-| `variant`     | `'included' \| 'excluded'` |  `included` |  `false` | The variant of the feature list set                       |
+| Name                   | Type                       |   Default   | required | Description                                                                         |
+| :--------------------- | :------------------------- | :---------: | :------: | :---------------------------------------------------------------------------------- |
+| `children`             | `ReactNode`                | `undefined` |  `true`  | The item of the feature list set                                                    |
+| `infoTooltip`          | `string`                   | `undefined` |  `false` | Tooltip text shown on hover/focus via an info icon button                           |
+| `infoTooltipAriaLabel` | `string`                   | `undefined` |  `false` | Overrides the automatically generated accessible label for the info tooltip trigger |
+| `variant`              | `'included' \| 'excluded'` |  `included` |  `false` | The variant of the feature list set                                                 |
 ### PricingOptions.MenuAction

package/docs/components/index.md CHANGED Viewed

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

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.74.0-rc.888ba09a)
+# Primer Brand docs (v0.74.0-rc.ad4a6851)
-These docs are bundled with `@primer/react-brand@0.74.0-rc.888ba09a` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.74.0-rc.ad4a6851` 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/esm/CTABanner/CTABanner.d.ts CHANGED Viewed

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

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

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

package/esm/CTABanner/CTABanner.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement> & {\n /\n Alternative presentations\n /\n variant?: 'default' \| 'balanced' \| 'minimal'\n /\n The alignment of the content within the banner.\n /\n align?: 'start' \| 'center'\n /\n A flag to add a border to the banner.\n /\n hasBorder?: boolean\n /\n Enable optional grid lines\n /\n hasGridLines?: boolean\n /\n A flag to remove the shadow from the banner.\n * @deprecated - hasShadow will be removed in a future release.\n /\n hasShadow?: boolean\n /\n A flag to remove the background from the banner.\n /\n hasBackground?: boolean\n /\n Optional, custom background color.\n /\n backgroundColor?: BackgroundColors \| ResponsiveBackgroundColorMap\n /\n Optional, custom background image.\n /\n backgroundImageSrc?: string \| ResponsiveBackgroundImageSrcMap\n /\n Optional, custom background position.\n /\n backgroundImagePosition?: string \| ResponsiveBackgroundImagePositionMap\n /\n Optional, custom background size.\n /\n backgroundImageSize?: string \| ResponsiveBackgroundImageSizeMap\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n trailingComponent?: React.FunctionComponent\n }\n\nconst Root = forwardRef(\n (\n {\n align = 'center',\n hasBorder = false,\n hasGridLines = false,\n hasShadow = false,\n hasBackground = true,\n backgroundColor = 'var(--brand-CTABanner-bgColor)',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n variant = 'default',\n ...props\n }: CTABannerProps,\n ref: Ref<HTMLElement>,\n ) => {\n const processBackgroundValue = useCallback((value: string \| string[], property) => {\n if (property === 'background-image-src') {\n return `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' \|\| Array.isArray(value)\n ? {[`--brand-CTABanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-CTABanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n const addStyle = (property, value) => {\n if (value) {\n Object.assign(allStyles, createStyles(property, value))\n }\n }\n\n addStyle('background-color', backgroundColor)\n addStyle('background-image-src', backgroundImageSrc)\n addStyle('background-image-position', backgroundImagePosition)\n addStyle('background-image-size', backgroundImageSize)\n\n return allStyles\n }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n const {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n ImageChild?: React.ReactElement\n ButtonGroupChild?: React.ReactElement\n restChildren: React.ReactElement[]\n hasImageChild: boolean\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === _Image) {\n acc.hasImageChild = true\n if (variant === 'balanced') {\n acc.ImageChild = child\n } else if (variant !== 'minimal') {\n acc.restChildren.push(child)\n }\n // minimal variant: image is intentionally excluded from rendering\n } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n acc.ButtonGroupChild = child\n } else if (child.type === _Heading) {\n const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n acc.restChildren.push(\n headingChild.props.size === undefined\n ? React.cloneElement(headingChild, {\n size: variant === 'minimal' ? '6' : defaultHeadingSize,\n })\n : headingChild,\n )\n } else {\n acc.restChildren.push(child)\n }\n }\n return acc\n },\n {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n )\n return result\n }, [children, variant])\n\n const hasSideColumn = (variant === 'balanced' && ImageChild) \|\| (variant === 'minimal' && ButtonGroupChild)\n\n const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n : React.Fragment\n\n const defaultAlign = variant === 'balanced' \|\| variant === 'minimal' ? 'start' : align\n\n const hasSystemBackgroundColor =\n typeof backgroundColor === 'string' &&\n CTABannerBackgroundColors.includes(backgroundColor as (typeof CTABannerBackgroundColors)[number])\n\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n if (variant === 'balanced' && !ImageChild) {\n // eslint-disable-next-line no-console\n console.warn(\n 'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n )\n }\n if (variant === 'minimal' && hasImageChild) {\n // eslint-disable-next-line no-console\n console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n }\n }\n\n return (\n <Tag>\n <section\n ref={ref}\n className={clsx(\n styles.CTABanner,\n hasShadow && styles['CTABanner--shadow'],\n styles[`CTABanner--variant-${variant}`],\n hasSystemBackgroundColor && styles[`CTABanner--bgColor-${backgroundColor}`],\n className,\n )}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div\n className={clsx(\n styles['CTABanner-container'],\n hasBorder && styles['CTABanner-container--border'],\n hasGridLines && styles['CTABanner-container--border-gridlines'],\n !hasGridLines && styles['CTABanner-container--rounded'],\n hasBackground && styles['CTABanner-container--background'],\n )}\n >\n {hasSideColumn ? (\n <Grid className={styles['CTABanner-grid']}>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n {ImageChild \|\| ButtonGroupChild}\n </Grid.Column>\n </Grid>\n ) : (\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n )}\n </div>\n </section>\n </Tag>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement> & {\n variant?: TextProps['variant']\n }\n\nconst Description = forwardRef(\n ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n {children}\n </Text>\n )\n },\n)\n\nconst _ButtonGroup = forwardRef(\n (\n {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <ButtonGroup\n buttonSize={buttonSize}\n buttonsAs={buttonsAs}\n className={clsx(styles['CTABanner-buttonGroup'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </ButtonGroup>\n )\n },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' \| 'alt'> & {\n src: string\n alt: string\n }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n return (\n <Image\n ref={ref}\n className={clsx(styles['CTABanner-image'], className)}\n src={src}\n alt={alt}\n borderRadius=\"medium\"\n {...props}\n />\n )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode\n }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n {children}\n </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n {children}\n </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n Heading: _Heading,\n Description,\n ButtonGroup: _ButtonGroup,\n Image: _Image,\n Logo: _Logo,\n Link: _Link,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement> & {\n /\n Alternative presentations\n /\n variant?: 'default' \| 'balanced' \| 'minimal'\n /\n The alignment of the content within the banner.\n /\n align?: 'start' \| 'center'\n /\n A flag to add a border to the banner.\n /\n hasBorder?: boolean\n /\n Enable optional grid lines\n /\n hasGridLines?: boolean\n /\n A flag to remove the shadow from the banner.\n * @deprecated - hasShadow will be removed in a future release.\n /\n hasShadow?: boolean\n /\n A flag to remove the background from the banner.\n /\n hasBackground?: boolean\n /\n Optional, custom background color.\n /\n backgroundColor?: BackgroundColors \| ResponsiveBackgroundColorMap\n /\n Optional, custom background image.\n /\n backgroundImageSrc?: string \| ResponsiveBackgroundImageSrcMap\n /\n Optional, custom background position.\n /\n backgroundImagePosition?: string \| ResponsiveBackgroundImagePositionMap\n /\n Optional, custom background size.\n /\n backgroundImageSize?: string \| ResponsiveBackgroundImageSizeMap\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n trailingComponent?: React.FunctionComponent\n }\n\nconst Root = forwardRef(\n (\n {\n align = 'center',\n hasBorder = false,\n hasGridLines = false,\n hasShadow = false,\n hasBackground = true,\n backgroundColor = 'var(--brand-CTABanner-bgColor)',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n variant = 'default',\n ...props\n }: CTABannerProps,\n ref: Ref<HTMLElement>,\n ) => {\n const processBackgroundValue = useCallback((value: string \| string[], property) => {\n if (property === 'background-image-src') {\n return `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' \|\| Array.isArray(value)\n ? {[`--brand-CTABanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-CTABanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n const addStyle = (property, value) => {\n if (value) {\n Object.assign(allStyles, createStyles(property, value))\n }\n }\n\n addStyle('background-color', backgroundColor)\n addStyle('background-image-src', backgroundImageSrc)\n addStyle('background-image-position', backgroundImagePosition)\n addStyle('background-image-size', backgroundImageSize)\n\n return allStyles\n }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n const {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n ImageChild?: React.ReactElement\n ButtonGroupChild?: React.ReactElement\n restChildren: React.ReactElement[]\n hasImageChild: boolean\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === _Image) {\n acc.hasImageChild = true\n if (variant === 'balanced') {\n acc.ImageChild = child\n } else if (variant !== 'minimal') {\n acc.restChildren.push(child)\n }\n // minimal variant: image is intentionally excluded from rendering\n } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n acc.ButtonGroupChild = child\n } else if (child.type === _Heading) {\n const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n acc.restChildren.push(\n headingChild.props.size === undefined\n ? React.cloneElement(headingChild, {\n size: variant === 'minimal' ? '6' : defaultHeadingSize,\n })\n : headingChild,\n )\n } else {\n acc.restChildren.push(child)\n }\n }\n return acc\n },\n {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n )\n return result\n }, [children, variant])\n\n const hasSideColumn = (variant === 'balanced' && ImageChild) \|\| (variant === 'minimal' && ButtonGroupChild)\n\n const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n : React.Fragment\n\n const defaultAlign = variant === 'balanced' \|\| variant === 'minimal' ? 'start' : align\n\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n if (variant === 'balanced' && !ImageChild) {\n // eslint-disable-next-line no-console\n console.warn(\n 'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n )\n }\n if (variant === 'minimal' && hasImageChild) {\n // eslint-disable-next-line no-console\n console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n }\n }\n\n return (\n <Tag>\n <section\n ref={ref}\n className={clsx(\n styles.CTABanner,\n hasShadow && styles['CTABanner--shadow'],\n styles[`CTABanner--variant-${variant}`],\n className,\n )}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div\n className={clsx(\n styles['CTABanner-container'],\n hasBorder && styles['CTABanner-container--border'],\n hasGridLines && styles['CTABanner-container--border-gridlines'],\n !hasGridLines && styles['CTABanner-container--rounded'],\n hasBackground && styles['CTABanner-container--background'],\n )}\n >\n {hasSideColumn ? (\n <Grid className={styles['CTABanner-grid']}>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n {ImageChild \|\| ButtonGroupChild}\n </Grid.Column>\n </Grid>\n ) : (\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n )}\n </div>\n </section>\n </Tag>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement> & {\n variant?: TextProps['variant']\n }\n\nconst Description = forwardRef(\n ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n {children}\n </Text>\n )\n },\n)\n\nconst _ButtonGroup = forwardRef(\n (\n {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <ButtonGroup\n buttonSize={buttonSize}\n buttonsAs={buttonsAs}\n className={clsx(styles['CTABanner-buttonGroup'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </ButtonGroup>\n )\n },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' \| 'alt'> & {\n src: string\n alt: string\n }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n return (\n <Image\n ref={ref}\n className={clsx(styles['CTABanner-image'], className)}\n src={src}\n alt={alt}\n borderRadius=\"medium\"\n {...props}\n />\n )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode\n }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n {children}\n </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n {children}\n </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n Heading: _Heading,\n Description,\n ButtonGroup: _ButtonGroup,\n Image: _Image,\n Logo: _Logo,\n Link: _Link,\n})\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

package/esm/Card/Card.js CHANGED Viewed

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