@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/Button/Button.js

@@ -0,0 +1,101 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useAnimation as t } from "../animation/useAnimation.js";
+import { Text as n } from "../Text/Text.js";
+import { ExpandableArrow as r } from "../ExpandableArrow/ExpandableArrow.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-Wg6T_h7K.css';/* empty css                                                                                                    */
+import i from "./Button.module.js";
+import a, { forwardRef as o, useCallback as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/Button/Button.tsx
+var u = [
+	"primary",
+	"secondary",
+	"subtle",
+	"accent"
+], d = [
+	"small",
+	"medium",
+	"large"
+], f = u[1], p = d[1], m = ["subtle"], h = {
+	root: "Button",
+	get leadingVisual() {
+		return `${this.root}-leading-visual`;
+	},
+	get trailingVisual() {
+		return `${this.root}-trailing-visual`;
+	},
+	get expandableArrow() {
+		return `${this.root}-expandable-arrow`;
+	}
+}, g = o(({ animate: o, as: u, variant: d = f, size: g = p, hasArrow: _, block: v = !1, className: y, children: b, disabled: x, "aria-disabled": S, onMouseEnter: C, onMouseLeave: w, onFocus: T, onBlur: E, leadingVisual: D, trailingVisual: O, style: k, ...A }, j) => {
+	let [M, N] = a.useState(!1), [P, F] = a.useState(!1), I = u || "button", L = x || S === "true" || typeof S == "boolean" && S === !0, { classes: R, styles: z } = t(o), B = m.includes(d) ? _ !== !1 : !!_, V = s((e) => {
+		if (a.isValidElement(e)) return e;
+		if (typeof e == "function") return a.createElement(e);
+	}, []), H = V(D), U = V(O), W = s((e) => {
+		L || (N(!0), C?.(e));
+	}, [L, C]), G = s((e) => {
+		L || (N(!1), w?.(e));
+	}, [L, w]), K = s((e) => {
+		L || (F(!0), T?.(e));
+	}, [L, T]), q = s((e) => {
+		L || (F(!1), E?.(e));
+	}, [L, E]);
+	return /* @__PURE__ */ l(I, {
+		ref: j,
+		className: e(i.Button, i[`Button--${d}`], i[`Button--size-${g}`], v && i["Button--block"], L && i["Button--disabled"], R, y),
+		onMouseEnter: W,
+		onMouseLeave: G,
+		onFocus: K,
+		onBlur: q,
+		disabled: L && I === "button" || void 0,
+		"aria-disabled": L && I !== "button" || void 0,
+		style: {
+			...z,
+			...k
+		},
+		...A,
+		children: [
+			a.isValidElement(H) && /* @__PURE__ */ c("span", {
+				className: i["Button__leading-visual"],
+				"data-testid": h.leadingVisual,
+				children: a.cloneElement(H, {
+					className: e(i["Button__icon-visual"], L && i["Button__icon-visual--disabled"]),
+					"aria-hidden": "true",
+					focusable: "false"
+				})
+			}),
+			/* @__PURE__ */ c("span", {
+				className: i.Button__text,
+				children: /* @__PURE__ */ c(n, {
+					as: "span",
+					size: g === "small" ? "100" : g === "medium" ? "200" : "400",
+					weight: "medium",
+					className: e(i["Button--label"], i[`Button--label-${g}`], i[`Button--label-${d}`], L && i["Button-label--disabled"]),
+					children: b
+				})
+			}),
+			!O && B && /* @__PURE__ */ c("span", {
+				className: e(i["Button__trailing-visual"]),
+				children: /* @__PURE__ */ c(r, {
+					hidden: !0,
+					className: e(i["Button-arrow"], L && i["Button-arrow--disabled"]),
+					expanded: !L && (M || P),
+					"data-testid": h.expandableArrow
+				})
+			}),
+			a.isValidElement(U) && /* @__PURE__ */ c("span", {
+				className: e(i["Button__trailing-visual"]),
+				"data-testid": h.trailingVisual,
+				children: a.cloneElement(U, {
+					className: e(i["Button__icon-visual"], L && i["Button__icon-visual--disabled"]),
+					"aria-hidden": "true",
+					focusable: "false"
+				})
+			})
+		]
+	});
+}), _ = Object.assign(g, { testIds: h });
+//#endregion
+export { _ as Button, d as ButtonSizes, u as ButtonVariants, g as _Button, p as defaultButtonSize, f as defaultButtonVariant };
+
+//# sourceMappingURL=Button.js.map

package/esm/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback, type Ref, ReactElement} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {Text} from '../Text'\nimport type {BaseProps} from '../component-helpers'\n\nimport {useAnimation} from '../'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css'\nimport styles from './Button.module.css'\n\nexport const ButtonVariants = ['primary', 'secondary', 'subtle', 'accent'] as const\nexport const ButtonSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultButtonVariant = ButtonVariants[1]\nexport const defaultButtonSize = ButtonSizes[1]\n\ntype ButtonVariant = (typeof ButtonVariants)[number]\n\nexport type ButtonBaseProps = {\n  /**\n   * The leading visual appears before the button content\n   */\n  leadingVisual?: ReactElement | Icon\n  /**\n   * The trailing visual appears after the button content\n   */\n  trailingVisual?: ReactElement | Icon\n  /**\n   * The styling variations available in Button\n   */\n  variant?: ButtonVariant\n  /**\n   * The size variations available in Button\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * A flag to show/hide the arrow icon\n   */\n  hasArrow?: boolean\n  /**\n   * The Button spans the full width\n   */\n  block?: boolean\n}\n\nconst variantsWithArrow = ['subtle']\n\nexport type ButtonProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n} & ButtonBaseProps &\n  React.ComponentPropsWithoutRef<C>\n\nconst testIds = {\n  root: 'Button',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n  get trailingVisual() {\n    return `${this.root}-trailing-visual`\n  },\n  get expandableArrow() {\n    return `${this.root}-expandable-arrow`\n  },\n}\n\nexport const _Button = forwardRef(\n  <C extends React.ElementType>(\n    {\n      animate,\n      as,\n      variant = defaultButtonVariant,\n      size = defaultButtonSize,\n      hasArrow,\n      block = false,\n      className,\n      children,\n      disabled,\n      'aria-disabled': ariaDisabled,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      leadingVisual: LeadingVisual,\n      trailingVisual: TrailingVisual,\n      style,\n      ...props\n    }: ButtonProps<C>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n    const Component = as || 'button'\n    const isDisabled =\n      disabled || ariaDisabled === 'true' || (typeof ariaDisabled === 'boolean' && ariaDisabled === true)\n\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const showArrow = variantsWithArrow.includes(variant) ? hasArrow !== false : Boolean(hasArrow)\n\n    const returnValidComponent = useCallback((component?: ReactElement | Icon) => {\n      if (React.isValidElement(component)) {\n        return component\n      }\n\n      if (typeof component === 'function') {\n        return React.createElement(component)\n      }\n    }, [])\n\n    const LeadingVisualComponent = returnValidComponent(LeadingVisual)\n    const TrailingVisualComponent = returnValidComponent(TrailingVisual)\n\n    const handleOnMouseEnter = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(true)\n          onMouseEnter?.(event)\n        }\n      },\n      [isDisabled, onMouseEnter],\n    )\n\n    const handleOnMouseLeave = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(false)\n          onMouseLeave?.(event)\n        }\n      },\n      [isDisabled, onMouseLeave],\n    )\n\n    const handleOnFocus = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(true)\n          onFocus?.(event)\n        }\n      },\n      [isDisabled, onFocus],\n    )\n\n    const handleOnBlur = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(false)\n          onBlur?.(event)\n        }\n      },\n      [isDisabled, onBlur],\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          styles.Button,\n          styles[`Button--${variant}`],\n          styles[`Button--size-${size}`],\n          block && styles['Button--block'],\n          isDisabled && styles[`Button--disabled`],\n          animationClasses,\n          className,\n        )}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        disabled={(isDisabled && Component === 'button') || undefined}\n        aria-disabled={(isDisabled && Component !== 'button') || undefined}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          LeadingVisualComponent,\n        ) && (\n          <span className={styles['Button__leading-visual']} data-testid={testIds.leadingVisual}>\n            {React.cloneElement(LeadingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n\n        <span className={styles['Button__text']}>\n          <Text\n            as=\"span\"\n            size={size === 'small' ? '100' : size === 'medium' ? '200' : '400'}\n            weight=\"medium\"\n            className={clsx(\n              styles['Button--label'],\n              styles[`Button--label-${size}`],\n              styles[`Button--label-${variant}`],\n              isDisabled && styles[`Button-label--disabled`],\n            )}\n          >\n            {children}\n          </Text>\n        </span>\n\n        {!TrailingVisual && showArrow && (\n          <span className={clsx(styles['Button__trailing-visual'])}>\n            <ExpandableArrow\n              hidden\n              className={clsx(styles['Button-arrow'], isDisabled && styles[`Button-arrow--disabled`])}\n              expanded={!isDisabled && (isHovered || isFocused)}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        )}\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          TrailingVisualComponent,\n        ) && (\n          <span className={clsx(styles['Button__trailing-visual'])} data-testid={testIds.trailingVisual}>\n            {React.cloneElement(TrailingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n      </Component>\n    )\n  },\n)\n\nexport const Button = Object.assign(_Button, {testIds})\n"],"mappings":"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"}

package/esm/Button/Button.module-ryfDlr26.css

@@ -0,0 +1 @@
+.Primer_Brand__Button-module__Button___scH9Z{appearance:none;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:box-shadow var(--brand-animation-duration-faster);border-radius:var(--brand-borderRadius-medium);cursor:pointer;border:solid var(--brand-borderWidth-thick) transparent;justify-content:center;align-items:center;gap:var(--brand-control-medium-gap);background:0 0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex}.Primer_Brand__Button-module__Button___scH9Z:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Button-module__Button___scH9Z:focus-visible{outline:4px solid var(--brand-color-focus);outline-offset:2px;transition:none}.Primer_Brand__Button-module__Button--disabled___IHZ7f,.Primer_Brand__Button-module__Button--disabled___IHZ7f:hover,.Primer_Brand__Button-module__Button--disabled___IHZ7f:focus{cursor:not-allowed}.Primer_Brand__Button-module__Button__text___ED0bX{position:relative}.Primer_Brand__Button-module__Button__icon-visual____qybb{height:var(--base-size-16);fill:currentColor;align-self:center;width:auto;display:flex}.Primer_Brand__Button-module__Button__trailing-visual___5i3xR,.Primer_Brand__Button-module__Button__leading-visual___jjtTe{display:flex}.Primer_Brand__Button-module__Button-arrow___F4HtG{margin-inline-start:calc(var(--base-size-8) * -1);margin-inline-end:calc(var(--base-size-4) * -1)}.Primer_Brand__Button-module__Button--primary___MSbnU{color:var(--brand-button-primary-fgColor-rest);background-color:var(--brand-button-primary-bgColor-rest);border:solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-primary-bgColor-hover);border-color:var(--brand-button-primary-borderColor-hover)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-expanded=true]{background-color:var(--brand-button-primary-bgColor-active);border-color:var(--brand-button-primary-borderColor-active);box-shadow:var(--brand-button-primary-shadow-active)}.Primer_Brand__Button-module__Button--label-primary___QX1u5{color:var(--brand-button-primary-fgColor-rest)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true],.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f{background-color:var(--brand-button-primary-bgColor-disabled);border-color:var(--brand-button-primary-borderColor-disabled)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-primary___QX1u5.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-primary-fgColor-disabled)}.Primer_Brand__Button-module__Button--accent___tkmZY{color:var(--brand-button-accent-fgColor-rest);background-color:var(--brand-button-accent-bgColor-rest)}.Primer_Brand__Button-module__Button--size-small___zQrEw.Primer_Brand__Button-module__Button--accent___tkmZY{border-width:var(--brand-borderWidth-thin)}.Primer_Brand__Button-module__Button--accent___tkmZY:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background:var(--brand-button-accent-bgColor-hover)}.Primer_Brand__Button-module__Button--accent___tkmZY:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--accent___tkmZY[aria-expanded=true]{background-color:var(--brand-button-accent-bgColor-active);border-color:var(--brand-button-accent-borderColor-active)}.Primer_Brand__Button-module__Button--label-accent___Fjgzf{color:var(--brand-button-accent-fgColor-rest)}.Primer_Brand__Button-module__Button--accent___tkmZY:disabled,.Primer_Brand__Button-module__Button--accent___tkmZY[aria-disabled=true],.Primer_Brand__Button-module__Button--accent___tkmZY.Primer_Brand__Button-module__Button--disabled___IHZ7f{background-color:var(--brand-button-accent-bgColor-disabled)}.Primer_Brand__Button-module__Button--accent___tkmZY:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--accent___tkmZY[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--accent___tkmZY.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--accent___tkmZY:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--accent___tkmZY[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--accent___tkmZY.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-accent___Fjgzf.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-accent-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_{border-color:var(--brand-button-secondary-borderColor-rest);color:var(--brand-button-secondary-fgColor-rest);transition:background-color,border-color .2s}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{border-color:var(--brand-button-secondary-borderColor-hover)}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-expanded=true]{border-color:var(--brand-button-secondary-borderColor-active)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled{border-color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-secondary___eJ0_a.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--subtle___F7pEE{background-color:var(--brand-button-subtle-bgColor-rest);color:var(--brand-color-text-default);transition:background-color, border-color var(--brand-animation-duration-faster)}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-subtle-bgColor-hover)}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-expanded=true]{background-color:var(--brand-button-subtle-bgColor-active);border-color:#0000}.Primer_Brand__Button-module__Button--label-subtle___8ndWH{color:var(--brand-button-subtle-fgColor-rest)}.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-subtle___8ndWH.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-subtle-fgColor-disabled)}.Primer_Brand__Button-module__Button--size-small___zQrEw{min-height:var(--brand-control-small-size);padding-inline:var(--brand-control-small-paddingInline-normal)}.Primer_Brand__Button-module__Button--size-medium___KFmzx{min-height:var(--brand-control-medium-size);padding:var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-large___J6UCI{min-height:var(--brand-control-large-size);padding:var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button__icon-visual____qybb,.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button-arrow___F4HtG{height:var(--base-size-20);width:var(--base-size-20)}.Primer_Brand__Button-module__Button--label-medium___ClmeR{font-size:var(--brand-text-subhead-size-medium);line-height:var(--brand-text-subhead-lineHeight-medium)}.Primer_Brand__Button-module__Button--label-large___UDxqS{font-size:var(--brand-text-subhead-size-large);line-height:var(--brand-text-subhead-lineHeight-large)}.Primer_Brand__Button-module__Button--block___kCYDx{width:100%}@media (forced-colors:active){.Primer_Brand__Button-module__Button--disabled___IHZ7f{outline-color:graytext}.Primer_Brand__Button-module__Button--label___qrkyz.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:graytext}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Button-module__Button___scH9Z,.Primer_Brand__Button-module__Button___scH9Z:before,.Primer_Brand__Button-module__Button___scH9Z:after,.Primer_Brand__Button-module__Button___scH9Z *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Button/Button.module.js

@@ -0,0 +1,31 @@
+import './Button.module-ryfDlr26.css';var e = {
+	Button: "Primer_Brand__Button-module__Button___scH9Z",
+	"Button--disabled": "Primer_Brand__Button-module__Button--disabled___IHZ7f",
+	Button__text: "Primer_Brand__Button-module__Button__text___ED0bX",
+	"Button__icon-visual": "Primer_Brand__Button-module__Button__icon-visual____qybb",
+	"Button__trailing-visual": "Primer_Brand__Button-module__Button__trailing-visual___5i3xR",
+	"Button__leading-visual": "Primer_Brand__Button-module__Button__leading-visual___jjtTe",
+	"Button-arrow": "Primer_Brand__Button-module__Button-arrow___F4HtG",
+	"Button--primary": "Primer_Brand__Button-module__Button--primary___MSbnU",
+	"Button--label-primary": "Primer_Brand__Button-module__Button--label-primary___QX1u5",
+	"Button-arrow--disabled": "Primer_Brand__Button-module__Button-arrow--disabled___kZpao",
+	"Button__icon-visual--disabled": "Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg",
+	"Button-label--disabled": "Primer_Brand__Button-module__Button-label--disabled___yMoDr",
+	"Button--accent": "Primer_Brand__Button-module__Button--accent___tkmZY",
+	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
+	"Button--label-accent": "Primer_Brand__Button-module__Button--label-accent___Fjgzf",
+	"Button--secondary": "Primer_Brand__Button-module__Button--secondary___gHnw_",
+	"Button--label-secondary": "Primer_Brand__Button-module__Button--label-secondary___eJ0_a",
+	"Button--subtle": "Primer_Brand__Button-module__Button--subtle___F7pEE",
+	"Button--label-subtle": "Primer_Brand__Button-module__Button--label-subtle___8ndWH",
+	"Button--size-medium": "Primer_Brand__Button-module__Button--size-medium___KFmzx",
+	"Button--size-large": "Primer_Brand__Button-module__Button--size-large___J6UCI",
+	"Button--label-medium": "Primer_Brand__Button-module__Button--label-medium___ClmeR",
+	"Button--label-large": "Primer_Brand__Button-module__Button--label-large___UDxqS",
+	"Button--block": "Primer_Brand__Button-module__Button--block___kCYDx",
+	"Button--label": "Primer_Brand__Button-module__Button--label___qrkyz"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Button.module.js.map

package/esm/Button/Button.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n  appearance: none;\n  user-select: none;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow var(--brand-animation-duration-faster);\n  text-decoration: none;\n  border-radius: var(--brand-borderRadius-medium);\n  cursor: pointer;\n  border: solid var(--brand-borderWidth-thick) transparent;\n  background: none;\n  display: inline-flex;\n  gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n  text-decoration: none;\n}\n\n.Button:focus-visible {\n  transition: none;\n  outline: 4px solid var(--brand-color-focus);\n  outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n  cursor: not-allowed;\n}\n\n.Button__text {\n  position: relative;\n}\n\n.Button__icon-visual {\n  display: flex;\n  align-self: center;\n  height: var(--base-size-16);\n  width: auto;\n  fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n  display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding */\n/* reduce gap between label and arrow */\n.Button-arrow {\n  margin-inline-end: calc(var(--base-size-4) * -1);\n  margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary */\n\n.Button--primary {\n  color: var(--brand-button-primary-fgColor-rest);\n  background-color: var(--brand-button-primary-bgColor-rest);\n  border: solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background-color: var(--brand-button-primary-bgColor-hover);\n  border-color: var(--brand-button-primary-borderColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n  background-color: var(--brand-button-primary-bgColor-active);\n  border-color: var(--brand-button-primary-borderColor-active);\n  box-shadow: var(--brand-button-primary-shadow-active);\n}\n\n.Button--label-primary {\n  color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n  background-color: var(--brand-button-primary-bgColor-disabled);\n  border-color: var(--brand-button-primary-borderColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n  color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/* accent */\n\n.Button--accent {\n  color: var(--brand-button-accent-fgColor-rest);\n  background-color: var(--brand-button-accent-bgColor-rest);\n}\n\n.Button--size-small.Button--accent {\n  border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--accent:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background: var(--brand-button-accent-bgColor-hover);\n}\n\n.Button--accent:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--accent[aria-expanded='true'] {\n  background-color: var(--brand-button-accent-bgColor-active);\n  border-color: var(--brand-button-accent-borderColor-active);\n}\n\n.Button--label-accent {\n  color: var(--brand-button-accent-fgColor-rest);\n}\n\n.Button--accent:disabled,\n.Button--accent[aria-disabled='true'],\n.Button--accent.Button--disabled {\n  background-color: var(--brand-button-accent-bgColor-disabled);\n}\n\n.Button--accent:disabled .Button-arrow--disabled,\n.Button--accent[aria-disabled='true'] .Button-arrow--disabled,\n.Button--accent.Button--disabled .Button-arrow--disabled,\n.Button--accent:disabled .Button__icon-visual--disabled,\n.Button--accent[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--accent.Button--disabled .Button__icon-visual--disabled,\n.Button--label-accent.Button-label--disabled {\n  color: var(--brand-button-accent-fgColor-disabled);\n}\n\n/* secondary */\n\n.Button--secondary {\n  transition: background-color, border-color 200ms;\n  border-color: var(--brand-button-secondary-borderColor-rest);\n  color: var(--brand-button-secondary-fgColor-rest);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n  border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n  border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n  color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/* subtle */\n\n.Button--subtle {\n  background-color: var(--brand-button-subtle-bgColor-rest);\n  color: var(--brand-color-text-default);\n  transition: background-color, border-color var(--brand-animation-duration-faster);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background-color: var(--brand-button-subtle-bgColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n  background-color: var(--brand-button-subtle-bgColor-active);\n  border-color: transparent;\n}\n\n.Button--label-subtle {\n  color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n  color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/* size */\n\n.Button--size-small {\n  min-height: var(--brand-control-small-size);\n  padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n  min-height: var(--brand-control-medium-size);\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);\n}\n\n.Button--size-large {\n  min-height: var(--brand-control-large-size);\n  padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n  height: var(--base-size-20);\n  width: var(--base-size-20);\n}\n\n.Button--label-medium {\n  font-size: var(--brand-text-subhead-size-medium);\n  line-height: var(--brand-text-subhead-lineHeight-medium);\n}\n\n.Button--label-large {\n  font-size: var(--brand-text-subhead-size-large);\n  line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .Button--disabled {\n    outline-color: GrayText;\n  }\n\n  /* Indicates disabled state in WHCM */\n  .Button--label.Button-label--disabled {\n    color: GrayText;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Button,\n  .Button::before,\n  .Button::after,\n  .Button * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/Button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/esm/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/esm/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+import { ButtonProps } from '../Button';
+export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
+export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
+    children: PrimerBrandButtonType[] | PrimerBrandButtonType;
+    buttonSize?: ButtonProps<'button' | 'a'>['size'];
+    buttonsAs?: 'button' | 'a';
+};
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -0,0 +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,sGAwBvB,CAAA"}

package/esm/ButtonGroup/ButtonGroup.js

@@ -0,0 +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";
+//#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 ? "accent" : "subtle",
+		hasArrow: !1,
+		...t.props
+	}) : null).filter(Boolean).slice(0, 2);
+	return /* @__PURE__ */ i("section", {
+		ref: l,
+		className: t.ButtonGroup,
+		...c,
+		children: u
+	});
+});
+//#endregion
+export { a as ButtonGroup };
+
+//# sourceMappingURL=ButtonGroup.js.map

package/esm/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +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 ? 'accent' : 'subtle',\n            hasArrow: false,\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,WAAW;EAClC,UAAU;EACV,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"}

package/esm/ButtonGroup/ButtonGroup.module-wZYyupar.css

@@ -0,0 +1 @@
+.Primer_Brand__ButtonGroup-module__ButtonGroup___YuqTd{gap:var(--base-size-8) var(--base-size-16);flex-flow:wrap;display:inline-flex}.Primer_Brand__ButtonGroup-module__ButtonGroup___YuqTd>*{flex-grow:1}

package/esm/ButtonGroup/ButtonGroup.module.js

@@ -0,0 +1,5 @@
+import './ButtonGroup.module-wZYyupar.css';var e = { ButtonGroup: "Primer_Brand__ButtonGroup-module__ButtonGroup___YuqTd" };
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ButtonGroup.module.js.map

package/esm/ButtonGroup/ButtonGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.module.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.module.css"],"sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n  gap: var(--base-size-8) var(--base-size-16);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.ButtonGroup > * {\n  flex-grow: 1;\n}\n"],"mappings":""}

package/esm/ButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ButtonGroup';
+//# sourceMappingURL=index.d.ts.map

package/esm/ButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/esm/CTABanner/CTABanner.d.ts

@@ -0,0 +1,100 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+import { HeadingProps } from '../Heading';
+import { TextProps } from '../Text';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
+import { type LinkProps } from '../Link';
+export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString;
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
+export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Alternative presentations
+     */
+    variant?: 'default' | 'balanced' | 'minimal';
+    /**
+     * The alignment of the content within the banner.
+     */
+    align?: 'start' | 'center';
+    /**
+     * A flag to add a border to the banner.
+     */
+    hasBorder?: boolean;
+    /**
+     * Enable optional grid lines
+     */
+    hasGridLines?: boolean;
+    /**
+     * A flag to remove the shadow from the banner.
+     * @deprecated - hasShadow will be removed in a future release.
+     */
+    hasShadow?: boolean;
+    /**
+     * A flag to remove the background from the banner.
+     */
+    hasBackground?: boolean;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image.
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position.
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * Optional, custom background size.
+     */
+    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    leadingComponent?: React.FunctionComponent;
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    trailingComponent?: React.FunctionComponent;
+};
+type CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {
+    children: React.ReactNode | React.ReactNode[];
+} & HeadingProps;
+type CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
+    variant?: TextProps['variant'];
+};
+type CTABannerImageProps = BaseProps<HTMLImageElement> & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> & {
+    src: string;
+    alt: string;
+};
+type CTABannerLogoProps = BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+};
+export declare const CTABanner: React.ForwardRefExoticComponent<Omit<CTABannerProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Heading: React.ForwardRefExoticComponent<Omit<CTABannerHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<CTABannerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Image: React.ForwardRefExoticComponent<Omit<CTABannerImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+    Logo: React.ForwardRefExoticComponent<Omit<CTABannerLogoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Link: ({ className, children, variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=CTABanner.d.ts.map

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

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

package/esm/CTABanner/CTABanner.js

@@ -0,0 +1,139 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { Grid as t } from "../Grid/Grid.js";
+import { Text as n } from "../Text/Text.js";
+import { Heading as r } from "../Heading/Heading.js";
+import { Image as i } from "../Image/Image.js";
+import { ButtonGroup as a } from "../ButtonGroup/ButtonGroup.js";
+import { Link as o } from "../Link/Link.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes-B9zRp3WA.css';/* empty css                                                                                                        */
+import s from "./CTABanner.module.js";
+import c, { forwardRef as l, useCallback as u, useMemo as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/CTABanner/CTABanner.tsx
+var m = ["default", "subtle"], h = l(({ align: n = "center", hasBorder: r = !1, hasGridLines: i = !1, hasShadow: a = !1, hasBackground: o = !0, backgroundColor: l = "var(--brand-CTABanner-bgColor)", backgroundImageSrc: h, backgroundImagePosition: g = "center", backgroundImageSize: y = "cover", className: S, children: C, leadingComponent: w, trailingComponent: T, style: E, variant: D = "default", ...O }, k) => {
+	let A = u((e, t) => t === "background-image-src" ? `url(${e})` : t === "background-color" && typeof e == "string" && m.includes(e) ? `var(--brand-color-canvas-${e})` : e, []), j = u((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-CTABanner-${e}`]: A(t, e) } : {
+		[`--brand-CTABanner-narrow-${e}`]: A(t?.narrow, e),
+		[`--brand-CTABanner-regular-${e}`]: A(t?.regular, e),
+		[`--brand-CTABanner-wide-${e}`]: A(t?.wide, e)
+	}, [A]), M = d(() => {
+		let e = {}, t = (t, n) => {
+			n && Object.assign(e, j(t, n));
+		};
+		return t("background-color", l), t("background-image-src", h), t("background-image-position", g), t("background-image-size", y), e;
+	}, [
+		l,
+		h,
+		g,
+		y,
+		j
+	]), { ImageChild: N, ButtonGroupChild: P, restChildren: F, hasImageChild: I } = d(() => c.Children.toArray(C).reduce((e, t) => {
+		if (c.isValidElement(t)) if (t.type === x) e.hasImageChild = !0, D === "balanced" ? e.ImageChild = t : D !== "minimal" && e.restChildren.push(t);
+		else if (D === "minimal" && t.type === b) e.ButtonGroupChild = t;
+		else if (t.type === v) {
+			let n = t;
+			e.restChildren.push(n.props.size === void 0 ? c.cloneElement(n, { size: D === "minimal" ? "6" : _ }) : n);
+		} else e.restChildren.push(t);
+		return e;
+	}, {
+		ImageChild: void 0,
+		ButtonGroupChild: void 0,
+		restChildren: [],
+		hasImageChild: !1
+	}), [C, D]), L = D === "balanced" && N || D === "minimal" && P, R = i ? ({ children: e }) => /* @__PURE__ */ f("div", {
+		className: s["CTABanner-outer-container--border"],
+		children: e
+	}) : c.Fragment, z = D === "balanced" || D === "minimal" ? "start" : n, B = typeof l == "string" && m.includes(l);
+	return (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && (D === "balanced" && !N && console.warn("CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly."), D === "minimal" && I && console.warn("CTABanner: Image child is not supported in minimal variant and will not be rendered.")), /* @__PURE__ */ f(R, { children: /* @__PURE__ */ f("section", {
+		ref: k,
+		className: e(s.CTABanner, a && s["CTABanner--shadow"], s[`CTABanner--variant-${D}`], B && s[`CTABanner--bgColor-${l}`], S),
+		style: {
+			...M,
+			...E
+		},
+		...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"]),
+			children: L ? /* @__PURE__ */ p(t, {
+				className: s["CTABanner-grid"],
+				children: [/* @__PURE__ */ f(t.Column, {
+					span: {
+						xsmall: 12,
+						large: 6
+					},
+					className: s["CTABanner-grid-column--primary"],
+					children: /* @__PURE__ */ p("div", {
+						className: e(s["CTABanner-content"], z === "center" && s["CTABanner-content--center"]),
+						children: [
+							w && /* @__PURE__ */ f(w, {}),
+							F,
+							T && /* @__PURE__ */ f(T, {})
+						]
+					})
+				}), /* @__PURE__ */ f(t.Column, {
+					span: {
+						xsmall: 12,
+						large: 6
+					},
+					className: s["CTABanner-grid-column--secondary"],
+					children: N || P
+				})]
+			}) : /* @__PURE__ */ p("div", {
+				className: e(s["CTABanner-content"], z === "center" && s["CTABanner-content--center"]),
+				children: [
+					w && /* @__PURE__ */ f(w, {}),
+					F,
+					T && /* @__PURE__ */ f(T, {})
+				]
+			})
+		})
+	}) });
+}), g = "h3", _ = "3", v = l(({ as: t = g, size: n = _, className: i, children: a, ...o }, c) => /* @__PURE__ */ f(r, {
+	ref: c,
+	className: e(s["CTABanner-heading"], i),
+	size: n,
+	as: t,
+	...o,
+	children: a
+})), y = l(({ className: t, children: r, variant: i = "muted", ...a }, o) => /* @__PURE__ */ f(n, {
+	ref: o,
+	className: e(s["CTABanner-description"], t),
+	as: "p",
+	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
+})), x = l(({ className: t, src: n, alt: r, ...a }, o) => /* @__PURE__ */ f(i, {
+	ref: o,
+	className: e(s["CTABanner-image"], t),
+	src: n,
+	alt: r,
+	borderRadius: "medium",
+	...a
+})), S = l(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ f("div", {
+	ref: i,
+	className: e(s["CTABanner-logo"], t),
+	...r,
+	children: n
+})), C = Object.assign(h, {
+	Heading: v,
+	Description: y,
+	ButtonGroup: b,
+	Image: x,
+	Logo: S,
+	Link: ({ className: t, children: n, variant: r = "accent", ...i }) => /* @__PURE__ */ f(o, {
+		variant: r,
+		className: e(s["CTABanner-link"], t),
+		...i,
+		children: n
+	})
+});
+//#endregion
+export { C as CTABanner, m as CTABannerBackgroundColors };
+
+//# sourceMappingURL=CTABanner.js.map

package/esm/CTABanner/CTABanner.js.map

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

package/esm/CTABanner/CTABanner.module-BTMGYz51.css

@@ -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-32);z-index:1;box-sizing:border-box;width:100%}.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{gap:var(--base-size-16);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{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-content___T0gW9{gap:var(--base-size-24)}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{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}