npm - @primer/react-brand - Versions diffs - 0.71.0 → 0.71.1-rc.13d73825 - Mend

@primer/react-brand 0.71.0 → 0.71.1-rc.13d73825

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

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

@@ -64,17 +64,35 @@ render(<App />)
 />
 ```
+### Custom button labels
+Use the `labels` prop to customize the visible text of the previous and next controls. When localizing content, remember to also set the matching `prevAriaLabel` and `nextAriaLabel` labels so that the accessible names stay in sync with the visible text.
+```jsx
+<Pagination
+  pageCount={3}
+  currentPage={2}
+  labels={{
+    prev: 'Précédent',
+    next: 'Suivant',
+    prevAriaLabel: 'Page précédente',
+    nextAriaLabel: 'Page suivante',
+  }}
+/>
+```
 ## Component props
 ### Pagination `Required`
-| name                    | type                                                                         | default | required | description                                                                                                             |
-| ----------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `pageCount`             | `number`                                                                     |         | `true`   | The total number of pages                                                                                               |
-| `currentPage`           | `number`                                                                     |         | `true`   | The current page number                                                                                                 |
-| `onPageChange`          | `(e: React.MouseEvent, n: number) => void`                                   |         | `false`  | Callback function for when the page changes                                                                             |
-| `hrefBuilder`           | `(n: number) => string`                                                      |         | `false`  | Function to build the href for each page                                                                                |
-| `pageAttributesBuilder` | `(n: number, page: PaginationPageType) => {[attributeName: string]: string}` |         | `false`  | Forward custom attributes to pagination items.                                                                          |
-| `marginPageCount`       | `number`                                                                     |         | `false`  | Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports. |
-| `showPages`             | `boolean`                                                                    |         | `false`  | Whether to show the page numbers                                                                                        |
-| `surroundingPageCount`  | `number`                                                                     |         | `false`  | The number of pages to show on each side of the current page. Will be hidden on narrow viewports.                       |
+| name                    | type                                                                             | default | required | description                                                                                                             |
+| ----------------------- | -------------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `pageCount`             | `number`                                                                         |         | `true`   | The total number of pages                                                                                               |
+| `currentPage`           | `number`                                                                         |         | `true`   | The current page number                                                                                                 |
+| `onPageChange`          | `(e: React.MouseEvent, n: number) => void`                                       |         | `false`  | Callback function for when the page changes                                                                             |
+| `hrefBuilder`           | `(n: number) => string`                                                          |         | `false`  | Function to build the href for each page                                                                                |
+| `pageAttributesBuilder` | `(n: number, page: PaginationPageType) => {[attributeName: string]: string}`     |         | `false`  | Forward custom attributes to pagination items.                                                                          |
+| `marginPageCount`       | `number`                                                                         |         | `false`  | Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports. |
+| `showPages`             | `boolean`                                                                        |         | `false`  | Whether to show the page numbers                                                                                        |
+| `surroundingPageCount`  | `number`                                                                         |         | `false`  | The number of pages to show on each side of the current page. Will be hidden on narrow viewports.                       |
+| `labels`                | `{prev?: string; next?: string; prevAriaLabel?: string; nextAriaLabel?: string}` |         | `false`  | Custom text and accessible labels for the previous and next controls. Provide any subset.                               |

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

@@ -87,19 +87,10 @@ The audio description can be provided as part of the existing soundtrack, or via
 </VideoPlayer>
 ```
-## Hide controls when paused
-```jsx
-<VideoPlayer title="GitHub media player" showControlsWhenPaused={false}>
-  <VideoPlayer.Source src="/example.mp4" type="video/mp4" />
-  <VideoPlayer.Track src="/example.vtt" default />
-</VideoPlayer>
-```
 ## Minimal
 ```jsx
-<VideoPlayer title="GitHub media player" visuallyHiddenTitle showBranding={false} showControlsWhenPaused={false}>
+<VideoPlayer title="GitHub media player" visuallyHiddenTitle showBranding={false}>
   <VideoPlayer.Source src="/example.mp4" type="video/mp4" />
   <VideoPlayer.Track src="/example.vtt" default />
 </VideoPlayer>
@@ -197,21 +188,20 @@ Below is a detailed description of each property and method available in the `us
 `VideoPlayer` provides a React alternative to the native HTML `<video />`.
-| Name                     | Type                                   | Default | Required | Description                                                     |
-| :----------------------- | :------------------------------------- | :-----: | :------: | :-------------------------------------------------------------- |
-| `children`               | `React.ReactNode`, `React.ReactNode[]` |         |  `true`  | Takes `<VideoPlayer.Source>` and `<VideoPlayer.Track>` elements |
-| `title`                  | `string`                               |         |  `true`  | Sets the title of the video                                     |
-| `visuallyHiddenTitle`    | `boolean`                              |         |  `false` | Visually hides the title of the video in the upper-left corner  |
-| `showBranding`           | `boolean`                              |  `true` |  `false` | Displays GitHub branding next to video title                    |
-| `poster`                 | `string`                               |         |  `false` | Sets an image as the starting frame for the video element       |
-| `className`              | `string`                               |         |  `false` | Sets a custom class on the `<video>` element                    |
-| `showControlsWhenPaused` | `boolean`                              |  `true` |  `false` | Show the video controls when paused                             |
-| `showPlayPauseButton`    | `boolean`                              |  `true` |  `false` | Show the play button control                                    |
-| `showSeekControl`        | `boolean`                              |  `true` |  `false` | Show the seek control                                           |
-| `showCCButton`           | `boolean`                              |  `true` |  `false` | Show the closed caption toggle control                          |
-| `showMuteButton`         | `boolean`                              |  `true` |  `false` | Show the mute button control                                    |
-| `showVolumeControl`      | `boolean`                              |  `true` |  `false` | Show the volume control                                         |
-| `showFullScreenButton`   | `boolean`                              |  `true` |  `false` | Show the full screen button control                             |
+| Name                   | Type                                   | Default | Required | Description                                                     |
+| :--------------------- | :------------------------------------- | :-----: | :------: | :-------------------------------------------------------------- |
+| `children`             | `React.ReactNode`, `React.ReactNode[]` |         |  `true`  | Takes `<VideoPlayer.Source>` and `<VideoPlayer.Track>` elements |
+| `title`                | `string`                               |         |  `true`  | Sets the title of the video                                     |
+| `visuallyHiddenTitle`  | `boolean`                              |         |  `false` | Visually hides the title of the video in the upper-left corner  |
+| `showBranding`         | `boolean`                              |  `true` |  `false` | Displays GitHub branding next to video title                    |
+| `poster`               | `string`                               |         |  `false` | Sets an image as the starting frame for the video element       |
+| `className`            | `string`                               |         |  `false` | Sets a custom class on the `<video>` element                    |
+| `showPlayPauseButton`  | `boolean`                              |  `true` |  `false` | Show the play button control                                    |
+| `showSeekControl`      | `boolean`                              |  `true` |  `false` | Show the seek control                                           |
+| `showCCButton`         | `boolean`                              |  `true` |  `false` | Show the closed caption toggle control                          |
+| `showMuteButton`       | `boolean`                              |  `true` |  `false` | Show the mute button control                                    |
+| `showVolumeControl`    | `boolean`                              |  `true` |  `false` | Show the volume control                                         |
+| `showFullScreenButton` | `boolean`                              |  `true` |  `false` | Show the full screen button control                             |
 The component API supports all standard HTML attribute props, while providing some additional behavior as described above.

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.71.0)
+# Primer Brand docs (v0.71.1-rc.13d73825)
-These docs are bundled with `@primer/react-brand@0.71.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.71.1-rc.13d73825` 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.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;~~AACjD~~,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAG7C,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AAEtG,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,qBAAqB,EAAE,GAAG,qBAAqB,CAAA;IACzD,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGAuBvB,CAAA"}
1	+ {"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAG7C,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AAEtG,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,qBAAqB,EAAE,GAAG,qBAAqB,CAAA;IACzD,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGAuBvB,CAAA"}

package/esm/ButtonGroup/ButtonGroup.js CHANGED Viewed

@@ -1,23 +1,24 @@
-import { Button as e } from "../Button/Button.js";
-import t from "./ButtonGroup.module.js";
-import n, { forwardRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import e from "../node_modules/clsx/dist/clsx.js";
+import { Button as t } from "../Button/Button.js";
+import n from "./ButtonGroup.module.js";
+import r, { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/ButtonGroup/ButtonGroup.tsx
-var a = r(({ buttonSize: r = "medium", buttonsAs: a, className: o, children: s, ...c }, l) => {
-	let u = n.Children.toArray(s).map((t, i) => n.isValidElement(t) && t.type === e ? n.cloneElement(t, {
-		size: r,
-		as: a,
-		variant: i === 0 ? "primary" : "subtle",
-		...t.props
+var o = i(({ buttonSize: i = "medium", buttonsAs: o, className: s, children: c, ...l }, u) => {
+	let d = r.Children.toArray(c).map((e, n) => r.isValidElement(e) && e.type === t ? r.cloneElement(e, {
+		size: i,
+		as: o,
+		variant: n === 0 ? "primary" : "subtle",
+		...e.props
 	}) : null).filter(Boolean).slice(0, 2);
-	return /* @__PURE__ */ i("section", {
-		ref: l,
-		className: t.ButtonGroup,
-		...c,
-		children: u
+	return /* @__PURE__ */ a("section", {
+		ref: u,
+		...l,
+		className: e(n.ButtonGroup, s),
+		children: d
 	});
 });
 //#endregion
-export { a as ButtonGroup };
+export { o as ButtonGroup };
 //# sourceMappingURL=ButtonGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' \| 'a'>>>\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n children: PrimerBrandButtonType[] \| PrimerBrandButtonType\n buttonSize?: ButtonProps<'button' \| 'a'>['size']\n buttonsAs?: 'button' \| 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n const buttonsToRender = React.Children.toArray(children)\n .map((child, index) => {\n if (React.isValidElement<ButtonProps<'button' \| 'a'>>(child) && child.type === Button) {\n return React.cloneElement(child, {\n size: buttonSize,\n as: buttonsAs,\n variant: index === 0 ? 'primary' : 'subtle',\n ...child.props,\n })\n }\n return null\n })\n .filter(Boolean)\n .slice(0, 2)\n\n return (\n <section ref={ref} className={styles.ButtonGroup} ~~{...props~~}>\n {buttonsToRender as React.ReactElement[]}\n </section>\n )\n },\n)\n"],"mappings":"~~;;;;;AAaA~~,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,KAAK,GAAO,MACP,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,IACtE,EAAM,aAAa,GAAO;EAC/B,MAAM;EACN,IAAI;EACJ,SAAS,MAAU,IAAI,YAAY;EACnC,GAAG,EAAM;EACV,CAAC,GAEG,KACP,CACD,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE;AAEd,QACE,kBAAC,WAAD;EAAc;EAAK,WAAW,EAAO~~;EAAa~~,~~GAAI~~;~~YACnD~~;EACO,CAAA;EAGf"}
1	+ {"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' \| 'a'>>>\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n children: PrimerBrandButtonType[] \| PrimerBrandButtonType\n buttonSize?: ButtonProps<'button' \| 'a'>['size']\n buttonsAs?: 'button' \| 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n const buttonsToRender = React.Children.toArray(children)\n .map((child, index) => {\n if (React.isValidElement<ButtonProps<'button' \| 'a'>>(child) && child.type === Button) {\n return React.cloneElement(child, {\n size: buttonSize,\n as: buttonsAs,\n variant: index === 0 ? 'primary' : 'subtle',\n ...child.props,\n })\n }\n return null\n })\n .filter(Boolean)\n .slice(0, 2)\n\n return (\n <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>\n {buttonsToRender as React.ReactElement[]}\n </section>\n )\n },\n)\n"],"mappings":";;;;;;AAcA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,KAAK,GAAO,MACP,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,IACtE,EAAM,aAAa,GAAO;EAC/B,MAAM;EACN,IAAI;EACJ,SAAS,MAAU,IAAI,YAAY;EACnC,GAAG,EAAM;EACV,CAAC,GAEG,KACP,CACD,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE;AAEd,QACE,kBAAC,WAAD;EAAc;EAAK,GAAI;EAAO,WAAW,EAAK,EAAO,aAAa,EAAU;YACzE;EACO,CAAA;EAGf"}

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;~~AAgMH~~,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;~~AAyBH~~,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":"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"}

package/esm/CTABanner/CTABanner.js CHANGED Viewed

@@ -52,7 +52,7 @@ var m = ["default", "subtle"], h = l(({ align: n = "center", hasBorder: r = !1,
 		},
 		...O,
 		children: /* @__PURE__ */ f("div", {
-			className: e(s["CTABanner-container"], r && s["CTABanner-container--border"], i && s["CTABanner-container--border-gridlines"], o && s["CTABanner-container--background"]),
+			className: e(s["CTABanner-container"], r && s["CTABanner-container--border"], i && s["CTABanner-container--border-gridlines"], !i && s["CTABanner-container--rounded"], o && s["CTABanner-container--background"]),
 			children: L ? /* @__PURE__ */ p(t, {
 				className: s["CTABanner-grid"],
 				children: [/* @__PURE__ */ f(t.Column, {
@@ -101,13 +101,13 @@ var m = ["default", "subtle"], h = l(({ align: n = "center", hasBorder: r = !1,
 	variant: i,
 	...a,
 	children: r
-})), b = l(({ className: e, buttonSize: t = "medium", buttonsAs: n, children: r, ...i }, o) => /* @__PURE__ */ f(a, {
-	buttonSize: t,
-	buttonsAs: n,
-	className: e,
-	ref: o,
-	...i,
-	children: r
+})), b = l(({ className: t, buttonSize: n = "medium", buttonsAs: r, children: i, ...o }, c) => /* @__PURE__ */ f(a, {
+	buttonSize: n,
+	buttonsAs: r,
+	className: e(s["CTABanner-buttonGroup"], t),
+	ref: c,
+	...o,
+	children: i
 })), x = l(({ className: t, src: n, alt: r, ...a }, o) => /* @__PURE__ */ f(i, {
 	ref: o,
 	className: e(s["CTABanner-image"], t),

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 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 buttonSize={buttonSize} buttonsAs={buttonsAs} className={className} ref={ref} {...props}>\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/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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"}

package/esm/CTABanner/CTABanner.module-DZUT186Y.css ADDED Viewed

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

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

@@ -1,4 +1,4 @@
-import './CTABanner.module-BTMGYz51.css';var e = {
+import './CTABanner.module-DZUT186Y.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",
@@ -8,6 +8,7 @@ import './CTABanner.module-BTMGYz51.css';var e = {
 	"CTABanner--variant-balanced": "Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5",
 	"CTABanner-outer-container--border": "Primer_Brand__CTABanner-module__CTABanner-outer-container--border___Rhoq4",
 	"CTABanner-container": "Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1",
+	"CTABanner-container--rounded": "Primer_Brand__CTABanner-module__CTABanner-container--rounded___atljT",
 	"CTABanner-content": "Primer_Brand__CTABanner-module__CTABanner-content___T0gW9",
 	"CTABanner-container--background": "Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8",
 	"CTABanner-container--border": "Primer_Brand__CTABanner-module__CTABanner-container--border___7xUNr",
@@ -19,7 +20,8 @@ import './CTABanner.module-BTMGYz51.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--bgColor-default": "Primer_Brand__CTABanner-module__CTABanner--bgColor-default___HxU_W",
+	"CTABanner-buttonGroup": "Primer_Brand__CTABanner-module__CTABanner-buttonGroup___5SMyK"
 };
 //#endregion
 export { e as default };

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-32);\n z-index: 1;\n width: 100%;\n box-sizing: border-box;\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 display: flex;\n flex-direction: column;\n gap: var(--~~base~~-~~size~~-16);\n align-items: flex-start;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.CTABanner--variant-minimal .CTABanner-content {\n 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~~-content {\n gap: var(~~--~~base-size-24);\n }\n .CTABanner--~~variant-balanced .CTABanner-content {\n 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"],"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--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":""}

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

@@ -11,11 +11,17 @@ export type PaginationProps = {
     marginPageCount?: number;
     showPages?: boolean;
     surroundingPageCount?: number;
+    labels?: {
+        prev?: string;
+        next?: string;
+        prevAriaLabel?: string;
+        nextAriaLabel?: string;
+    };
     'data-testid'?: string;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 /**
  * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
  * @see https://primer.style/brand/components/Pagination
  */
-export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, labels, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=Pagination.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,EAAuB,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAKhE,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAElG,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;~~IAC7B~~,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;~~AAE1D~~;;;GAGG;AACH,eAAO,MAAM,UAAU,~~qOAelB~~,eAAe,~~6CAyDnB~~,CAAA"}
1	+ {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,EAAuB,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAKhE,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAElG,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAS1D;;;GAGG;AACH,eAAO,MAAM,UAAU,6OAgBlB,eAAe,6CAsEnB,CAAA"}