npm - @primer/react-brand - Versions diffs - 0.71.1-rc.8e8d7e50 → 0.71.1-rc.ee7cd7e2 - Mend

@primer/react-brand 0.71.1-rc.8e8d7e50 → 0.71.1-rc.ee7cd7e2

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

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.71.1-rc.8e8d7e50)
+# Primer Brand docs (v0.71.1-rc.ee7cd7e2)
-These docs are bundled with `@primer/react-brand@0.71.1-rc.8e8d7e50` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.71.1-rc.ee7cd7e2` 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":"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"}

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/SectionIntroStacked/SectionIntroStacked.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.d.ts","sourceRoot":"","sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAG1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAMvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,2BAA2B,kCAAmC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACtE,SAAS,CAAC,WAAW,CAAC,GACtB,iBAAiB,GAAG;IAClB,OAAO,CAAC,EAAE,0BAA0B,CAAA;CACrC,CAAA;~~AAwCH~~,KAAK,+BAA+B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4CnF,KAAK,mCAAmC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAC1E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAkBH,KAAK,4BAA4B,GAAG,SAAS,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAqB5E,KAAK,6BAA6B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAchE,KAAK,gCAAgC,GAAG,SAAS,CAAA;AAyCjD,KAAK,uCAAuC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,GACvF,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAmBH,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAiDnE,eAAO,MAAM,mBAAmB;;;;uDA7H4B,iBAAiB,CAAC,6BAA6B,CAAC;6CA8E1D,iBAAiB,CAAC,4BAA4B,CAAC;+CAhEvC,gCAAgC;;;CAwHxF,CAAA"}
1	+ {"version":3,"file":"SectionIntroStacked.d.ts","sourceRoot":"","sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAG1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAMvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,2BAA2B,kCAAmC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACtE,SAAS,CAAC,WAAW,CAAC,GACtB,iBAAiB,GAAG;IAClB,OAAO,CAAC,EAAE,0BAA0B,CAAA;CACrC,CAAA;AAuCH,KAAK,+BAA+B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4CnF,KAAK,mCAAmC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAC1E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAkBH,KAAK,4BAA4B,GAAG,SAAS,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAqB5E,KAAK,6BAA6B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAchE,KAAK,gCAAgC,GAAG,SAAS,CAAA;AAyCjD,KAAK,uCAAuC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,GACvF,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAmBH,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAiDnE,eAAO,MAAM,mBAAmB;;;;uDA7H4B,iBAAiB,CAAC,6BAA6B,CAAC;6CA8E1D,iBAAiB,CAAC,4BAA4B,CAAC;+CAhEvC,gCAAgC;;;CAwHxF,CAAA"}

package/esm/SectionIntroStacked/SectionIntroStacked.js CHANGED Viewed

@@ -23,12 +23,14 @@ var g = ["default", "gridline"], _ = d(({ animate: r, className: i, children: a,
 		children: /* @__PURE__ */ h(t, {
 			fullWidth: !0,
 			enableGutters: c !== "gridline",
+			columnGap: "none",
 			children: [/* @__PURE__ */ m(t.Column, {
 				span: { large: 6 },
+				className: l["SectionIntroStacked-content"],
 				children: y
 			}), /* @__PURE__ */ m(t.Column, {
-				span: c === "gridline" ? { large: 6 } : { large: 5 },
-				start: c === "gridline" ? { large: 7 } : { large: 8 },
+				span: { large: 6 },
+				start: { large: 7 },
 				children: v
 			})]
 		})
@@ -68,7 +70,7 @@ var g = ["default", "gridline"], _ = d(({ animate: r, className: i, children: a,
 }, C = ({ className: t, color: n = "green", ...r }) => /* @__PURE__ */ m(c, {
 	className: e(l.SectionIntroStackedItem__icon, t),
 	hasBackground: !0,
-	size: "medium",
+	size: "small",
 	color: n,
 	...r
 }), w = d(({ as: t = "h3", size: n = "subhead-large", className: r, children: a, ...o }, s) => /* @__PURE__ */ m(i, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement> &\n PropsWithChildren & {\n variant?: SectionIntroStackedVariant\n }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const childrenArray = React.Children.toArray(children)\n\n // extract Items and everything else into two separate arrays\n const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n return (\n <header\n ref={ref}\n className={clsx(\n styles.SectionIntroStacked,\n variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n {...props}\n style={{...animationInlineStyles, ...style}}\n >\n <Grid fullWidth enableGutters={variant !== 'gridline'}>\n <Grid.Column span={{large: 6}}>{otherChildren}</Grid.Column>\n <Grid.Column\n span={variant === 'gridline' ? {large: 6} : {large: 5}}\n start={variant === 'gridline' ? {large: 7} : {large: 8}}\n >\n {items}\n </Grid.Column>\n </Grid>\n </header>\n )\n },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = defaultHeadingSize,\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }, [childrenArray])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n styles[`SectionIntroStacked-heading`],\n defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' \| 'variant'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles['SectionIntroStacked-description'], className)}\n ref={ref}\n variant=\"muted\"\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n (\n {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n ref: Ref<HTMLAnchorElement>,\n ) => {\n return (\n <Link\n ref={ref}\n className={clsx(styles['SectionIntroStacked-link'], className)}\n size={size}\n variant={variant}\n {...props}\n >\n {children}\n </Link>\n )\n },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n return (\n <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n {children}\n </ul>\n )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n return (\n <Icon\n className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n hasBackground\n size=\"medium\"\n color={color}\n {...props}\n />\n )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n (\n {\n as = 'h3',\n size = 'subhead-large',\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n as={as}\n size={size}\n className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' \| 'variant' \| 'size'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst ItemDescription = forwardRef(\n ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n variant=\"muted\"\n size=\"200\"\n className={clsx(styles['SectionIntroStackedItem__description'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const hasSubComponents = childrenArray.some(\n child =>\n React.isValidElement(child) &&\n (child.type === ItemIcon \|\| child.type === ItemHeading \|\| child.type === ItemDescription),\n )\n\n if (hasSubComponents) {\n const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n return (\n <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n {iconChild}\n <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n </li>\n )\n }\n\n const getConditionalVariant = () => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n return (\n <li className={itemClassName} {...rest}>\n <Text\n as=\"span\"\n className={clsx(\n styles['SectionIntroStackedItem__item-text'],\n defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n )}\n size=\"350\"\n >\n {children}\n </Text>\n </li>\n )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n Heading: _Heading,\n Description: _Description,\n Link: _Link,\n Items: ItemsBase,\n Item: ItemBase,\n ItemIcon,\n ItemHeading,\n ItemDescription,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement> &\n PropsWithChildren & {\n variant?: SectionIntroStackedVariant\n }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const childrenArray = React.Children.toArray(children)\n\n // extract Items and everything else into two separate arrays\n const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n return (\n <header\n ref={ref}\n className={clsx(\n styles.SectionIntroStacked,\n variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n {...props}\n style={{...animationInlineStyles, ...style}}\n >\n <Grid fullWidth enableGutters={variant !== 'gridline'} columnGap=\"none\">\n <Grid.Column span={{large: 6}} className={styles['SectionIntroStacked-content']}>\n {otherChildren}\n </Grid.Column>\n <Grid.Column span={{large: 6}} start={{large: 7}}>\n {items}\n </Grid.Column>\n </Grid>\n </header>\n )\n },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = defaultHeadingSize,\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }, [childrenArray])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n styles[`SectionIntroStacked-heading`],\n defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' \| 'variant'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n className={clsx(styles['SectionIntroStacked-description'], className)}\n ref={ref}\n variant=\"muted\"\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n (\n {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n ref: Ref<HTMLAnchorElement>,\n ) => {\n return (\n <Link\n ref={ref}\n className={clsx(styles['SectionIntroStacked-link'], className)}\n size={size}\n variant={variant}\n {...props}\n >\n {children}\n </Link>\n )\n },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n return (\n <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n {children}\n </ul>\n )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n return (\n <Icon\n className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n hasBackground\n size=\"small\"\n color={color}\n {...props}\n />\n )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n (\n {\n as = 'h3',\n size = 'subhead-large',\n className,\n children,\n ...props\n }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n as={as}\n size={size}\n className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' \| 'variant' \| 'size'> &\n BaseProps<HTMLParagraphElement> & {\n as?: 'p'\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst ItemDescription = forwardRef(\n ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text\n as=\"p\"\n variant=\"muted\"\n size=\"200\"\n className={clsx(styles['SectionIntroStackedItem__description'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const hasSubComponents = childrenArray.some(\n child =>\n React.isValidElement(child) &&\n (child.type === ItemIcon \|\| child.type === ItemHeading \|\| child.type === ItemDescription),\n )\n\n if (hasSubComponents) {\n const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n return (\n <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n {iconChild}\n <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n </li>\n )\n }\n\n const getConditionalVariant = () => {\n if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' \|\| child.type === 'em'))) {\n return 'muted'\n }\n return 'default'\n }\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n return (\n <li className={itemClassName} {...rest}>\n <Text\n as=\"span\"\n className={clsx(\n styles['SectionIntroStackedItem__item-text'],\n defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n )}\n size=\"350\"\n >\n {children}\n </Text>\n </li>\n )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n Heading: _Heading,\n Description: _Description,\n Link: _Link,\n Items: ItemsBase,\n Item: ItemBase,\n ItemIcon,\n ItemHeading,\n ItemDescription,\n})\n"],"mappings":"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"}

package/esm/SectionIntroStacked/SectionIntroStacked.module-w4PEL6ek.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{--brand-Grid-spacing-row:var(--base-size-64)}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{max-width:618px;margin-inline:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-32);padding-block:calc(var(--base-size-64) - var(--base-size-4));--SectionIntroStacked-item-divider-overflow-start:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-32)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-24);padding-block:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-start:var(--base-size-24);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-24);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-64);padding-block:var(--base-size-64);--SectionIntroStacked-item-divider-overflow-start:0px;--SectionIntroStacked-item-divider-overflow-end:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text--muted___PAxL5{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH b,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ b{color:var(--brand-color-text-default);font-style:normal;font-weight:var(--base-text-weight-normal)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--full-width___wxr_6 .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{max-width:none}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ{max-width:50ch;margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J{margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}@media screen and (width<=63.24rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{font-size:var(--brand-text-size-600)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{overflow:hidden}}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{top:var(--base-size-2);position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-block:calc(-1 * var(--base-size-64));padding-block:calc(var(--base-size-64) - var(--base-size-32));position:static;top:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-content___Sh_hs{padding-inline-end:var(--base-size-80)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-inline-start:var(--base-size-64)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{border-block-end:none;position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{padding-block-end:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:not(:last-child):after{content:"";bottom:0;left:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));right:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);position:absolute}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-block:var(--base-size-40);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{border-block-end:none;padding-block-end:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;display:flex}@media screen and (width>=48rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{gap:var(--base-size-48);flex-direction:row}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY{gap:var(--base-size-12);flex-direction:column;flex:1;min-width:0;display:flex}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx{border-radius:var(--base-size-12);flex-shrink:0}

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

@@ -1,4 +1,4 @@
-import './SectionIntroStacked.module-C3cmwHDY.css';var e = {
+import './SectionIntroStacked.module-w4PEL6ek.css';var e = {
 	SectionIntroStacked: "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y",
 	"SectionIntroStacked--variant-gridline": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi",
 	"SectionIntroStacked-heading--muted": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH",
@@ -9,6 +9,7 @@ import './SectionIntroStacked.module-C3cmwHDY.css';var e = {
 	"SectionIntroStacked-description": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ",
 	"SectionIntroStacked-link": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J",
 	"SectionIntroStacked-items": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi",
+	"SectionIntroStacked-content": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-content___Sh_hs",
 	"SectionIntroStackedItem-item": "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws",
 	"SectionIntroStackedItem-item--with-icon": "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo",
 	SectionIntroStackedItem__content: "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked~~--variant-gridline~~ {\n ~~position~~: ~~relative~~;\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-32);\n\n --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n~~@media screen and (min-width: 63.25rem) {~~\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n ~~/* At large viewports, left overflow is 0 (vertical divider bounds the start) /\~~n --SectionIntroStacked-item-divider-overflow-start: ~~0px~~;\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: ~~calc(~~var(--~~brand-Grid-spacing-margin) + var(--~~base-size-64));\n }\n}\n\n@media screen and (min-width: 80rem) {\n .SectionIntroStacked--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n max-width: none;\n}\n\n.SectionIntroStacked-description {\n margin-block-start: var(--base-size-16);\n max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n@media screen and (max-width: 63.~~25rem~~) {\n .SectionIntroStacked-heading {\n font-size: var(--brand-text-size-600);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked-items {\n position: relative;\n top: var(--base-size-2);\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-block: calc(-1 var(--base-size-64));\n padding-block: 0;\n position: static;\n top: auto;\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n /* Inset item content from the vertical gridline /\n padding-inline-start: var(--base-size-32);\n ~~padding-inline-end: var(--base-size-32);\n~~ }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n border-block-end: none;\n position: relative;\n}\n\n/ Restore equal padding on first/last items in gridline variant /\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: calc(-1 var(--SectionIntroStacked-item-divider-overflow-start));\n right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n padding-block: var(--base-size-40);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n border-block-end: none;\n padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n display: flex;\n ~~flex-direction: row;\n~~ align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n@media screen and (min-width: ~~63.25rem~~) {\n .SectionIntroStackedItem-item--with-icon {\n gap: var(--base-size-48);\n }\n}\n\n.SectionIntroStackedItem__content {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n flex: 1;\n min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n flex-shrink: 0;\n border-radius: var(--base-size-12);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n --brand-Grid-spacing-row: var(--base-size-64);\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .SectionIntroStacked {\n max-width: 618px;\n margin-inline: auto;\n }\n\n .SectionIntroStacked.SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-32);\n padding-block: calc(var(--base-size-64) - var(--base-size-4));\n\n --SectionIntroStacked-item-divider-overflow-start: var(--base-size-32);\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-32);\n }\n}\n\n.SectionIntroStacked--variant-gridline {\n position: relative;\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-32);\n\n --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked--variant-gridline {\n padding-inline: var(--base-size-64);\n padding-block: var(--base-size-64);\n /* At large viewports, left overflow is 0 (vertical divider bounds the start) /\n --SectionIntroStacked-item-divider-overflow-start: 0px;\n --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .SectionIntroStacked--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n max-width: none;\n}\n\n.SectionIntroStacked-description {\n margin-block-start: var(--base-size-16);\n max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n@media screen and (max-width: 63.24rem) {\n .SectionIntroStacked-heading {\n font-size: var(--brand-text-size-600);\n }\n .SectionIntroStacked-items {\n overflow: hidden;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SectionIntroStacked-items {\n position: relative;\n top: var(--base-size-2);\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-block: calc(-1 var(--base-size-64));\n padding-block: calc(var(--base-size-64) - var(--base-size-32));\n position: static;\n top: auto;\n }\n\n .SectionIntroStacked-content {\n padding-inline-end: var(--base-size-80);\n }\n\n .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n /* Inset item content from the vertical gridline /\n padding-inline-start: var(--base-size-64);\n }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n border-block-end: none;\n position: relative;\n}\n\n/ Restore equal padding on first/last items in gridline variant /\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: calc(-1 var(--SectionIntroStacked-item-divider-overflow-start));\n right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n padding-block: var(--base-size-40);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n border-block-end: none;\n padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-24);\n flex-direction: column;\n}\n\n@media screen and (min-width: 48rem) {\n .SectionIntroStackedItem-item--with-icon {\n gap: var(--base-size-48);\n flex-direction: row;\n }\n}\n\n.SectionIntroStackedItem__content {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-12);\n flex: 1;\n min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n flex-shrink: 0;\n border-radius: var(--base-size-12);\n}\n"],"mappings":""}