@primer/react-brand 0.74.0-rc.ffd69649 → 0.74.0

package/esm/Bento/Bento.js

@@ -46,8 +46,8 @@ var g = ({ className: t, ...n }) => /* @__PURE__ */ m("section", {
 }, b = ({ children: n, leadingVisual: r, padding: o = "spacious", verticalAlign: s, horizontalAlign: c = "start", className: d, ...f }) => {
 	let m = [l.Bento__Content];
 	m.push(..._("Bento__Item", "verticalAlign", s), ..._("Bento__Item", "horizontalAlign", c), ..._("Bento", "padding", o));
-	let g = p(() => u.Children.toArray(n), [n]), v = g.filter((e) => u.isValidElement(e) && e.type === x), y = g.find((e) => u.isValidElement(e) && e.type === a), b = g.find((e) => u.isValidElement(e) && e.type === t), S = g.find((e) => u.isValidElement(e) && e.type === i);
-	return /* @__PURE__ */ h("div", {
+	let g = p(() => u.Children.toArray(n), [n]), v = g.filter((e) => u.isValidElement(e) && e.type === x), y = g.find((e) => u.isValidElement(e) && e.type === a), b = g.find((e) => u.isValidElement(e) && e.type === t), S = g.find((e) => u.isValidElement(e) && e.type === i), C = u.isValidElement(y);
+	return C && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento."), /* @__PURE__ */ h("div", {
 		className: e(l[`Bento-padding--${o}`], ...m, d),
 		...f,
 		children: [
@@ -55,7 +55,7 @@ var g = ({ className: t, ...n }) => /* @__PURE__ */ m("section", {
 				className: l["Bento__Content-icon"],
 				size: r.props.size || 44
 			}),
-			u.isValidElement(y) && u.cloneElement(y, { className: e(l["Bento__Content-label"], y.props.className) }),
+			C && u.cloneElement(y, { className: e(l["Bento__Content-label"], y.props.className) }),
 			v.map((t) => u.cloneElement(t, { className: e(!u.isValidElement(b) && l["Bento__heading--no-text"], c === "center" && l["Bento__heading--with-max-width"], t.props.className) })),
 			u.isValidElement(b) && u.cloneElement(b, {
 				variant: b.props.variant || "muted",

package/esm/Bento/Bento.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image, Label} from '../'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'\nexport type ColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' | 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' | 'center' | 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' | 'normal' | 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' | 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n  return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps | BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n  columnStart?: ColumnIndex | ResponsiveColumnIndex\n  columnSpan?: ColumnIndex | ResponsiveColumnIndex\n  rowStart?: number | ResponsiveRowIndex\n  rowSpan?: number | ResponsiveRowIndex\n  flow?: Flow | ResponsiveFlow\n  colorMode?: ColorMode\n  visualAsBackground?: boolean\n  order?: Order | ResponsiveOrder\n  bgColor?: 'default' | 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n  BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n  classIdentifier: string,\n  propName: string,\n  prop?:\n    | ResponsiveColumnIndex\n    | ColumnIndex\n    | ResponsiveRowIndex\n    | number\n    | ResponsiveFlow\n    | Flow\n    | ResponsiveAlign\n    | Align\n    | ResponsivePadding\n    | Padding,\n) => {\n  const classesToMerge: string[] = []\n  if (typeof prop === 'number' || typeof prop === 'string') {\n    classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n  } else if (typeof prop === 'object') {\n    for (const [key, value] of Object.entries(prop)) {\n      classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n    }\n  }\n  return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n  order: Order | ResponsiveOrder\n  children: React.ReactNode\n  currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n  if (typeof order === 'string') {\n    return order === 'default' ? children : React.Children.toArray(children).reverse()\n  } else if (typeof order === 'object' && currentBreakpointSize) {\n    // This handles setting the order based on breakpoints as you might expect via CSS\n    const filledStyleOrder: ResponsiveOrder = {}\n    let previousSize: Order = 'default'\n    for (const size of Object.keys(BreakpointSize)) {\n      const lowerCaseSize = size.toLocaleLowerCase()\n      if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n      filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] || previousSize\n    }\n    return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n  } else {\n    return children\n  }\n}\n\nconst Item = ({\n  className,\n  columnStart,\n  columnSpan = 12,\n  rowStart,\n  rowSpan = 2,\n  flow = 'row',\n  colorMode,\n  visualAsBackground = false,\n  order = 'default',\n  bgColor = 'subtle',\n  children,\n  ...rest\n}: BentoItemProps) => {\n  const {currentBreakpointSize} = useWindowSize()\n\n  const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n    if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n      acc.push(child)\n    }\n    if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n      acc.push(child)\n    }\n    return acc\n  }, [])\n\n  const contentChildPadding =\n    validChildren.find(\n      (child): child is React.ReactElement<BentoContentProps> =>\n        React.isValidElement<BentoContentProps>(child) && child.type === Content,\n    )?.props.padding || 'spacious'\n\n  const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n  bentoItemClassArray.push(\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n  )\n\n  if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n    if (flow === 'column') {\n      bentoItemClassArray.push(styles['Bento-column-padding-override'])\n    }\n    if (flow === 'row') {\n      bentoItemClassArray.push(styles['Bento-row-padding-override'])\n    }\n  }\n\n  const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n  const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n  return (\n    <div\n      {...colorModeProp}\n      className={clsx(\n        ...bentoItemClassArray,\n        (visualAsBackground || React.Children.toArray(children).length === 1) &&\n          styles[`Bento__Item--visual-as-background`],\n        className,\n      )}\n      {...rest}\n    >\n      {orderedChildren}\n    </div>\n  )\n}\n\ntype BentoContentProps = {\n  leadingVisual?: ReactElement<IconProps>\n  padding?: Padding | ResponsivePadding\n  verticalAlign?: Align | ResponsiveAlign\n  horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n  BaseProps<HTMLDivElement>\n\nconst Content = ({\n  children,\n  leadingVisual: LeadingVisual,\n  padding = 'spacious',\n  verticalAlign,\n  horizontalAlign = 'start',\n  className,\n  ...rest\n}: BentoContentProps) => {\n  const bentoContentClassArray = [styles.Bento__Content]\n  bentoContentClassArray.push(\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n    ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n  )\n\n  const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n  const HeadingChildren = memoizedChildren.filter(\n    (child): child is React.ReactElement<BentoHeadingProps> =>\n      React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n  )\n\n  const LabelChild = memoizedChildren.find(\n    (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Label,\n  )\n  const TextChild = memoizedChildren.find(\n    (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n  )\n  const LinkChild = memoizedChildren.find(\n    (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n  )\n\n  return (\n    <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n      {React.isValidElement<IconProps>(LeadingVisual) &&\n        React.cloneElement(LeadingVisual, {\n          className: styles['Bento__Content-icon'],\n          size: LeadingVisual.props.size || 44,\n        })}\n\n      {React.isValidElement<TextProps>(LabelChild) &&\n        React.cloneElement(LabelChild, {\n          className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n        })}\n\n      {HeadingChildren.map(HeadingChild =>\n        React.cloneElement(HeadingChild, {\n          className: clsx(\n            !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n            horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n            HeadingChild.props.className,\n          ),\n        }),\n      )}\n\n      {React.isValidElement<TextProps>(TextChild) &&\n        React.cloneElement(TextChild, {\n          variant: TextChild.props.variant || 'muted',\n          as: TextChild.props.as || 'p',\n          size: TextChild.props.size || '300',\n          className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n        })}\n\n      {React.isValidElement<LinkProps>(LinkChild) &&\n        React.cloneElement(LinkChild, {\n          variant: LinkChild.props.variant || 'accent',\n          className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n        })}\n    </div>\n  )\n}\n\ntype BentoHeadingProps = {\n  variant?: 'default' | 'muted'\n} & BaseProps<HTMLHeadingElement> &\n  HeadingProps\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = 'h3',\n      size = '5',\n      weight = 'medium',\n      variant = 'default',\n      className,\n      children,\n      ...props\n    }: PropsWithChildren<BentoHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n    const getConditionalVariant = useCallback(() => {\n      if (findElementInChildren(children, 'b') || findElementInChildren(children, 'em')) {\n        return 'muted'\n      }\n      return 'default'\n    }, [children])\n\n    const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          defaultColor === 'muted' && styles[`Bento__heading--muted`],\n          variant === 'muted' && styles[`Bento__heading--muted`],\n          className,\n        )}\n        size={size}\n        as={as}\n        weight={weight}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype BentoVisualProps = {\n  horizontalAlign?: Align\n  verticalAlign?: Align\n  fillMedia?: boolean\n  overflow?: 'hidden' | 'initial'\n  position?: string\n  padding?: Padding | ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n  BaseProps<HTMLDivElement>\n\nconst Visual = ({\n  horizontalAlign,\n  verticalAlign,\n  fillMedia = true,\n  overflow = 'hidden',\n  position = '50% 50%',\n  padding,\n  className,\n  children,\n  ...rest\n}: BentoVisualProps) => {\n  const bentoVisualClassArray = [\n    styles.Bento__Visual,\n    horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n    verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n    styles[`Bento__Visual--overflow-${overflow}`],\n  ]\n  bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n  const childrenToRender = React.Children.map(children, child => {\n    if (React.isValidElement(child)) {\n      if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n        return React.cloneElement(child, {\n          style: {...child.props.style, objectPosition: position},\n        })\n      }\n      if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n        return React.cloneElement(child, {\n          style: {...child.props.style, objectPosition: position},\n        })\n      }\n      return child\n    }\n    return null\n  })\n  return (\n    <div\n      className={clsx(\n        ...bentoVisualClassArray,\n        fillMedia && styles['Bento__Visual--fill'],\n        !fillMedia && styles['Bento__Visual--no-fill'],\n        className,\n      )}\n      {...rest}\n    >\n      {childrenToRender}\n    </div>\n  )\n}\n\n/**\n * Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAM,KAAQ,EAAC,cAAW,GAAG,QACpB,kBAAC,WAAD;CAAS,WAAW,EAAK,EAAO,OAAO,EAAU;CAAE,GAAI;CAAgB,CAAA,EAmB1E,KACJ,GACA,GACA,MAWG;CACH,IAAM,IAA2B,EAAE;AACnC,KAAI,OAAO,KAAS,YAAY,OAAO,KAAS,SAC9C,GAAe,KAAK,EAAO,GAAG,EAAgB,IAAI,EAAS,GAAG,KAAQ;UAC7D,OAAO,KAAS,SACzB,MAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAK,CAC7C,GAAe,KAAK,EAAO,GAAG,EAAgB,IAAI,EAAI,GAAG,EAAS,GAAG,KAAS;AAGlF,QAAO;GASH,KAAyB,EAAC,UAAO,aAAU,+BAAuD;AACtG,KAAI,OAAO,KAAU,SACnB,QAAO,MAAU,YAAY,IAAW,EAAM,SAAS,QAAQ,EAAS,CAAC,SAAS;KACzE,OAAO,KAAU,YAAY,GAAuB;EAE7D,IAAM,IAAoC,EAAE,EACxC,IAAsB;AAC1B,OAAK,IAAM,KAAQ,OAAO,KAAK,EAAe,EAAE;GAC9C,IAAM,IAAgB,EAAK,mBAAmB;AAE9C,GADI,EAAM,OAAgB,IAAe,EAAM,KAC/C,EAAiB,KAAiB,EAAM,MAAkB;;AAE5D,SAAO,EAAiB,OAA2B,YAAY,IAAW,EAAM,SAAS,QAAQ,EAAS,CAAC,SAAS;OAEpH,QAAO;GAIL,KAAQ,EACZ,cACA,gBACA,gBAAa,IACb,aACA,aAAU,GACV,UAAO,OACP,cACA,wBAAqB,IACrB,WAAQ,WACR,aAAU,UACV,aACA,GAAG,QACiB;CACpB,IAAM,EAAC,6BAAyB,GAAe,EAEzC,IAAgB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAA2B,GAAK,OACjF,EAAM,eAAiC,EAAM,IAAI,EAAM,SAAS,KAClE,EAAI,KAAK,EAAM,EAEb,EAAM,eAAkC,EAAM,IAAI,EAAM,SAAS,KACnE,EAAI,KAAK,EAAM,EAEV,IACN,EAAE,CAAC,EAEA,IACJ,EAAc,MACX,MACC,EAAM,eAAkC,EAAM,IAAI,EAAM,SAAS,EACpE,EAAE,MAAM,WAAW,YAEhB,IAAsB,CAAC,EAAO,aAAa,EAAO,wBAAwB,KAAW;AAW3F,CATA,EAAoB,KAClB,GAAG,EAAgC,eAAe,eAAe,EAAW,EAC5E,GAAG,EAAgC,eAAe,YAAY,EAAQ,EACtE,GAAG,EAAgC,eAAe,gBAAgB,EAAY,EAC9E,GAAG,EAAgC,eAAe,aAAa,EAAS,EACxE,GAAG,EAAgC,eAAe,QAAQ,EAAK,EAC/D,GAAG,EAAgC,eAAe,OAAO,EAAoB,CAC9E,EAEG,CAAC,KAAsB,EAAM,SAAS,QAAQ,EAAS,CAAC,UAAU,MAChE,MAAS,YACX,EAAoB,KAAK,EAAO,iCAAiC,EAE/D,MAAS,SACX,EAAoB,KAAK,EAAO,8BAA8B;CAIlE,IAAM,IAAgB,IAAY,EAAC,mBAAmB,GAAU,GAAG,EAAE,EAE/D,IAAkB,EAAsB;EAAC;EAAO,UAAU;EAAe;EAAsB,CAAC;AAEtG,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,GAAG,IACF,KAAsB,EAAM,SAAS,QAAQ,EAAS,CAAC,WAAW,MACjE,EAAO,sCACT,EACD;EACD,GAAI;YAEH;EACG,CAAA;GAYJ,KAAW,EACf,aACA,eAAe,GACf,aAAU,YACV,kBACA,qBAAkB,SAClB,cACA,GAAG,QACoB;CACvB,IAAM,IAAyB,CAAC,EAAO,eAAe;AACtD,GAAuB,KACrB,GAAG,EAAgC,eAAe,iBAAiB,EAAc,EACjF,GAAG,EAAgC,eAAe,mBAAmB,EAAgB,EACrF,GAAG,EAAgC,SAAS,WAAW,EAAQ,CAChE;CAED,IAAM,IAAmB,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAE9E,IAAkB,EAAiB,QACtC,MACC,EAAM,eAAkC,EAAM,IAAI,EAAM,SAAS,EACpE,EAEK,IAAa,EAAiB,MACjC,MAAkD,EAAM,eAA0B,EAAM,IAAI,EAAM,SAAS,EAC7G,EACK,IAAY,EAAiB,MAChC,MAAkD,EAAM,eAA0B,EAAM,IAAI,EAAM,SAAS,EAC7G,EACK,IAAY,EAAiB,MAChC,MAAkD,EAAM,eAA0B,EAAM,IAAI,EAAM,SAAS,EAC7G;AAED,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,kBAAkB,MAAY,GAAG,GAAwB,EAAU;EAAE,GAAI;YAArG;GACG,EAAM,eAA0B,EAAc,IAC7C,EAAM,aAAa,GAAe;IAChC,WAAW,EAAO;IAClB,MAAM,EAAc,MAAM,QAAQ;IACnC,CAAC;GAEH,EAAM,eAA0B,EAAW,IAC1C,EAAM,aAAa,GAAY,EAC7B,WAAW,EAAK,EAAO,yBAAyB,EAAW,MAAM,UAAU,EAC5E,CAAC;GAEH,EAAgB,KAAI,MACnB,EAAM,aAAa,GAAc,EAC/B,WAAW,EACT,CAAC,EAAM,eAAe,EAAU,IAAI,EAAO,4BAC3C,MAAoB,YAAY,EAAO,mCACvC,EAAa,MAAM,UACpB,EACF,CAAC,CACH;GAEA,EAAM,eAA0B,EAAU,IACzC,EAAM,aAAa,GAAW;IAC5B,SAAS,EAAU,MAAM,WAAW;IACpC,IAAI,EAAU,MAAM,MAAM;IAC1B,MAAM,EAAU,MAAM,QAAQ;IAC9B,WAAW,EAAK,EAAO,wBAAwB,EAAU,MAAM,UAAU;IAC1E,CAAC;GAEH,EAAM,eAA0B,EAAU,IACzC,EAAM,aAAa,GAAW;IAC5B,SAAS,EAAU,MAAM,WAAW;IACpC,WAAW,EAAK,EAAO,0BAA0B,EAAU,MAAM,UAAU;IAC5E,CAAC;GACA;;GASJ,IAAW,GAEb,EACE,QAAK,MACL,UAAO,KACP,YAAS,UACT,aAAU,WACV,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAgB,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAE3E,IAAwB,QACxB,EAAsB,GAAU,IAAI,IAAI,EAAsB,GAAU,KAAK,GACxE,UAEF,WACN,CAAC,EAAS,CAAC;AAId,QACE,kBAAC,GAAD;EACO;EACL,WAAW,GALM,EAAc,WAAW,IAAI,YAAY,GAAuB,MAM9D,WAAW,EAAO,0BACnC,MAAY,WAAW,EAAO,0BAC9B,EACD;EACK;EACF;EACI;EACR,GAAI;EAEH;EACO,CAAA;EAGf,EAYK,KAAU,EACd,oBACA,kBACA,eAAY,IACZ,cAAW,UACX,cAAW,WACX,YACA,cACA,aACA,GAAG,QACmB;CACtB,IAAM,IAAwB;EAC5B,EAAO;EACP,KAAmB,EAAO,kCAAkC;EAC5D,KAAiB,EAAO,gCAAgC;EACxD,EAAO,2BAA2B;EACnC;AACD,GAAsB,KAAK,GAAG,EAAgC,SAAS,WAAW,EAAQ,CAAC;CAC3F,IAAM,IAAmB,EAAM,SAAS,IAAI,IAAU,MAChD,EAAM,eAAe,EAAM,GACzB,EAAM,eAA0D,EAAM,IAAI,EAAM,SAAS,SAKzF,EAAM,eAAmD,EAAM,IAAI,EAAM,SAAS,IAC7E,EAAM,aAAa,GAAO,EAC/B,OAAO;EAAC,GAAG,EAAM,MAAM;EAAO,gBAAgB;EAAS,EACxD,CAAC,GAEG,IAEF,KACP;AACF,QACE,kBAAC,OAAD;EACE,WAAW,EACT,GAAG,GACH,KAAa,EAAO,wBACpB,CAAC,KAAa,EAAO,2BACrB,EACD;EACD,GAAI;YAEH;EACG,CAAA;GASG,IAAQ,OAAO,OAAO,GAAM;CAAC;CAAM;CAAQ;CAAS,SAAS;CAAS,CAAC"}
+{"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image} from '../'\nimport {Label, type LabelProps} from '../Label'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'\nexport type ColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' | 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' | 'center' | 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' | 'normal' | 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' | 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n  return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps | BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n  columnStart?: ColumnIndex | ResponsiveColumnIndex\n  columnSpan?: ColumnIndex | ResponsiveColumnIndex\n  rowStart?: number | ResponsiveRowIndex\n  rowSpan?: number | ResponsiveRowIndex\n  flow?: Flow | ResponsiveFlow\n  colorMode?: ColorMode\n  visualAsBackground?: boolean\n  order?: Order | ResponsiveOrder\n  bgColor?: 'default' | 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n  BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n  classIdentifier: string,\n  propName: string,\n  prop?:\n    | ResponsiveColumnIndex\n    | ColumnIndex\n    | ResponsiveRowIndex\n    | number\n    | ResponsiveFlow\n    | Flow\n    | ResponsiveAlign\n    | Align\n    | ResponsivePadding\n    | Padding,\n) => {\n  const classesToMerge: string[] = []\n  if (typeof prop === 'number' || typeof prop === 'string') {\n    classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n  } else if (typeof prop === 'object') {\n    for (const [key, value] of Object.entries(prop)) {\n      classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n    }\n  }\n  return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n  order: Order | ResponsiveOrder\n  children: React.ReactNode\n  currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n  if (typeof order === 'string') {\n    return order === 'default' ? children : React.Children.toArray(children).reverse()\n  } else if (typeof order === 'object' && currentBreakpointSize) {\n    // This handles setting the order based on breakpoints as you might expect via CSS\n    const filledStyleOrder: ResponsiveOrder = {}\n    let previousSize: Order = 'default'\n    for (const size of Object.keys(BreakpointSize)) {\n      const lowerCaseSize = size.toLocaleLowerCase()\n      if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n      filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] || previousSize\n    }\n    return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n  } else {\n    return children\n  }\n}\n\nconst Item = ({\n  className,\n  columnStart,\n  columnSpan = 12,\n  rowStart,\n  rowSpan = 2,\n  flow = 'row',\n  colorMode,\n  visualAsBackground = false,\n  order = 'default',\n  bgColor = 'subtle',\n  children,\n  ...rest\n}: BentoItemProps) => {\n  const {currentBreakpointSize} = useWindowSize()\n\n  const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n    if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n      acc.push(child)\n    }\n    if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n      acc.push(child)\n    }\n    return acc\n  }, [])\n\n  const contentChildPadding =\n    validChildren.find(\n      (child): child is React.ReactElement<BentoContentProps> =>\n        React.isValidElement<BentoContentProps>(child) && child.type === Content,\n    )?.props.padding || 'spacious'\n\n  const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n  bentoItemClassArray.push(\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n  )\n\n  if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n    if (flow === 'column') {\n      bentoItemClassArray.push(styles['Bento-column-padding-override'])\n    }\n    if (flow === 'row') {\n      bentoItemClassArray.push(styles['Bento-row-padding-override'])\n    }\n  }\n\n  const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n  const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n  return (\n    <div\n      {...colorModeProp}\n      className={clsx(\n        ...bentoItemClassArray,\n        (visualAsBackground || React.Children.toArray(children).length === 1) &&\n          styles[`Bento__Item--visual-as-background`],\n        className,\n      )}\n      {...rest}\n    >\n      {orderedChildren}\n    </div>\n  )\n}\n\ntype BentoContentProps = {\n  leadingVisual?: ReactElement<IconProps>\n  padding?: Padding | ResponsivePadding\n  verticalAlign?: Align | ResponsiveAlign\n  horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n  BaseProps<HTMLDivElement>\n\nconst Content = ({\n  children,\n  leadingVisual: LeadingVisual,\n  padding = 'spacious',\n  verticalAlign,\n  horizontalAlign = 'start',\n  className,\n  ...rest\n}: BentoContentProps) => {\n  const bentoContentClassArray = [styles.Bento__Content]\n  bentoContentClassArray.push(\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n    ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n    ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n  )\n\n  const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n  const HeadingChildren = memoizedChildren.filter(\n    (child): child is React.ReactElement<BentoHeadingProps> =>\n      React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n  )\n\n  const LabelChild = memoizedChildren.find(\n    (child): child is React.ReactElement<LabelProps> => React.isValidElement<LabelProps>(child) && child.type === Label,\n  )\n  const TextChild = memoizedChildren.find(\n    (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n  )\n  const LinkChild = memoizedChildren.find(\n    (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n  )\n\n  const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild)\n\n  if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n    // eslint-disable-next-line no-console\n    console.warn('Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento.')\n  }\n\n  return (\n    <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n      {React.isValidElement<IconProps>(LeadingVisual) &&\n        React.cloneElement(LeadingVisual, {\n          className: styles['Bento__Content-icon'],\n          size: LeadingVisual.props.size || 44,\n        })}\n\n      {usesDeprecatedLabel &&\n        React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {\n          className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n        })}\n\n      {HeadingChildren.map(HeadingChild =>\n        React.cloneElement(HeadingChild, {\n          className: clsx(\n            !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n            horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n            HeadingChild.props.className,\n          ),\n        }),\n      )}\n\n      {React.isValidElement<TextProps>(TextChild) &&\n        React.cloneElement(TextChild, {\n          variant: TextChild.props.variant || 'muted',\n          as: TextChild.props.as || 'p',\n          size: TextChild.props.size || '300',\n          className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n        })}\n\n      {React.isValidElement<LinkProps>(LinkChild) &&\n        React.cloneElement(LinkChild, {\n          variant: LinkChild.props.variant || 'accent',\n          className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n        })}\n    </div>\n  )\n}\n\ntype BentoHeadingProps = {\n  variant?: 'default' | 'muted'\n} & BaseProps<HTMLHeadingElement> &\n  HeadingProps\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = 'h3',\n      size = '5',\n      weight = 'medium',\n      variant = 'default',\n      className,\n      children,\n      ...props\n    }: PropsWithChildren<BentoHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n    const getConditionalVariant = useCallback(() => {\n      if (findElementInChildren(children, 'b') || findElementInChildren(children, 'em')) {\n        return 'muted'\n      }\n      return 'default'\n    }, [children])\n\n    const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          defaultColor === 'muted' && styles[`Bento__heading--muted`],\n          variant === 'muted' && styles[`Bento__heading--muted`],\n          className,\n        )}\n        size={size}\n        as={as}\n        weight={weight}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype BentoVisualProps = {\n  horizontalAlign?: Align\n  verticalAlign?: Align\n  fillMedia?: boolean\n  overflow?: 'hidden' | 'initial'\n  position?: string\n  padding?: Padding | ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n  BaseProps<HTMLDivElement>\n\nconst Visual = ({\n  horizontalAlign,\n  verticalAlign,\n  fillMedia = true,\n  overflow = 'hidden',\n  position = '50% 50%',\n  padding,\n  className,\n  children,\n  ...rest\n}: BentoVisualProps) => {\n  const bentoVisualClassArray = [\n    styles.Bento__Visual,\n    horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n    verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n    styles[`Bento__Visual--overflow-${overflow}`],\n  ]\n  bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n  const childrenToRender = React.Children.map(children, child => {\n    if (React.isValidElement(child)) {\n      if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n        return React.cloneElement(child, {\n          style: {...child.props.style, objectPosition: position},\n        })\n      }\n      if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n        return React.cloneElement(child, {\n          style: {...child.props.style, objectPosition: position},\n        })\n      }\n      return child\n    }\n    return null\n  })\n  return (\n    <div\n      className={clsx(\n        ...bentoVisualClassArray,\n        fillMedia && styles['Bento__Visual--fill'],\n        !fillMedia && styles['Bento__Visual--no-fill'],\n        className,\n      )}\n      {...rest}\n    >\n      {childrenToRender}\n    </div>\n  )\n}\n\n/**\n * Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":"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"}

package/esm/CTABanner/CTABanner.d.ts

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

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

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

package/esm/CTABanner/CTABanner.js

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

package/esm/CTABanner/CTABanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n  narrow?: T\n  regular?: T\n  wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Alternative presentations\n     */\n    variant?: 'default' | 'balanced' | 'minimal'\n    /**\n     * The alignment of the content within the banner.\n     */\n    align?: 'start' | 'center'\n    /**\n     * A flag to add a border to the banner.\n     */\n    hasBorder?: boolean\n    /**\n     * Enable optional grid lines\n     */\n    hasGridLines?: boolean\n    /**\n     * A flag to remove the shadow from the banner.\n     * @deprecated - hasShadow will be removed in a future release.\n     */\n    hasShadow?: boolean\n    /**\n     * A flag to remove the background from the banner.\n     */\n    hasBackground?: boolean\n    /**\n     * Optional, custom background color.\n     */\n    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap\n    /**\n     * Optional, custom background image.\n     */\n    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap\n    /**\n     * Optional, custom background position.\n     */\n    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap\n    /**\n     * Optional, custom background size.\n     */\n    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap\n    /**\n     * Escape-hatch for inserting custom React components.\n     * Warning:\n     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n     */\n    leadingComponent?: React.FunctionComponent\n    /**\n     * Escape-hatch for inserting custom React components.\n     * Warning:\n     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n     */\n    trailingComponent?: React.FunctionComponent\n  }\n\nconst Root = forwardRef(\n  (\n    {\n      align = 'center',\n      hasBorder = false,\n      hasGridLines = false,\n      hasShadow = false,\n      hasBackground = true,\n      backgroundColor = 'var(--brand-CTABanner-bgColor)',\n      backgroundImageSrc,\n      backgroundImagePosition = 'center',\n      backgroundImageSize = 'cover',\n      className,\n      children,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      style,\n      variant = 'default',\n      ...props\n    }: CTABannerProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const processBackgroundValue = useCallback((value: string | string[], property) => {\n      if (property === 'background-image-src') {\n        return `url(${value})`\n      }\n\n      if (property === 'background-color' && typeof value === 'string') {\n        return CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[number])\n          ? `var(--brand-color-canvas-${value})`\n          : value\n      }\n\n      return value\n    }, [])\n\n    const createStyles = useCallback(\n      (property, value) =>\n        typeof value === 'string' || Array.isArray(value)\n          ? {[`--brand-CTABanner-${property}`]: processBackgroundValue(value, property)}\n          : {\n              [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n              [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n              [`--brand-CTABanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n            },\n      [processBackgroundValue],\n    )\n\n    const backgroundStyles = useMemo(() => {\n      const allStyles = {}\n\n      const addStyle = (property, value) => {\n        if (value) {\n          Object.assign(allStyles, createStyles(property, value))\n        }\n      }\n\n      addStyle('background-color', backgroundColor)\n      addStyle('background-image-src', backgroundImageSrc)\n      addStyle('background-image-position', backgroundImagePosition)\n      addStyle('background-image-size', backgroundImageSize)\n\n      return allStyles\n    }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n    const {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n      const result = React.Children.toArray(children).reduce<{\n        ImageChild?: React.ReactElement\n        ButtonGroupChild?: React.ReactElement\n        restChildren: React.ReactElement[]\n        hasImageChild: boolean\n      }>(\n        (acc, child) => {\n          if (React.isValidElement(child)) {\n            if (child.type === _Image) {\n              acc.hasImageChild = true\n              if (variant === 'balanced') {\n                acc.ImageChild = child\n              } else if (variant !== 'minimal') {\n                acc.restChildren.push(child)\n              }\n              // minimal variant: image is intentionally excluded from rendering\n            } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n              acc.ButtonGroupChild = child\n            } else if (child.type === _Heading) {\n              const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n              acc.restChildren.push(\n                headingChild.props.size === undefined\n                  ? React.cloneElement(headingChild, {\n                      size: variant === 'minimal' ? '6' : defaultHeadingSize,\n                    })\n                  : headingChild,\n              )\n            } else {\n              acc.restChildren.push(child)\n            }\n          }\n          return acc\n        },\n        {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n      )\n      return result\n    }, [children, variant])\n\n    const hasSideColumn = (variant === 'balanced' && ImageChild) || (variant === 'minimal' && ButtonGroupChild)\n\n    const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n      ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n      : React.Fragment\n\n    const defaultAlign = variant === 'balanced' || variant === 'minimal' ? 'start' : align\n\n    const hasSystemBackgroundColor =\n      typeof backgroundColor === 'string' &&\n      CTABannerBackgroundColors.includes(backgroundColor as (typeof CTABannerBackgroundColors)[number])\n\n    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n      if (variant === 'balanced' && !ImageChild) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n        )\n      }\n      if (variant === 'minimal' && hasImageChild) {\n        // eslint-disable-next-line no-console\n        console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n      }\n    }\n\n    return (\n      <Tag>\n        <section\n          ref={ref}\n          className={clsx(\n            styles.CTABanner,\n            hasShadow && styles['CTABanner--shadow'],\n            styles[`CTABanner--variant-${variant}`],\n            hasSystemBackgroundColor && styles[`CTABanner--bgColor-${backgroundColor}`],\n            className,\n          )}\n          style={{...backgroundStyles, ...style}}\n          {...props}\n        >\n          <div\n            className={clsx(\n              styles['CTABanner-container'],\n              hasBorder && styles['CTABanner-container--border'],\n              hasGridLines && styles['CTABanner-container--border-gridlines'],\n              !hasGridLines && styles['CTABanner-container--rounded'],\n              hasBackground && styles['CTABanner-container--background'],\n            )}\n          >\n            {hasSideColumn ? (\n              <Grid className={styles['CTABanner-grid']}>\n                <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n                  <div\n                    className={clsx(\n                      styles['CTABanner-content'],\n                      defaultAlign === 'center' && styles['CTABanner-content--center'],\n                    )}\n                  >\n                    {LeadingComponent && <LeadingComponent />}\n                    {restChildren}\n                    {TrailingComponent && <TrailingComponent />}\n                  </div>\n                </Grid.Column>\n                <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n                  {ImageChild || ButtonGroupChild}\n                </Grid.Column>\n              </Grid>\n            ) : (\n              <div\n                className={clsx(\n                  styles['CTABanner-content'],\n                  defaultAlign === 'center' && styles['CTABanner-content--center'],\n                )}\n              >\n                {LeadingComponent && <LeadingComponent />}\n                {restChildren}\n                {TrailingComponent && <TrailingComponent />}\n              </div>\n            )}\n          </div>\n        </section>\n      </Tag>\n    )\n  },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n  (\n    {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n  BaseProps<HTMLParagraphElement> & {\n    variant?: TextProps['variant']\n  }\n\nconst Description = forwardRef(\n  ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n    return (\n      <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst _ButtonGroup = forwardRef(\n  (\n    {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <ButtonGroup\n        buttonSize={buttonSize}\n        buttonsAs={buttonsAs}\n        className={clsx(styles['CTABanner-buttonGroup'], className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </ButtonGroup>\n    )\n  },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n  Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> & {\n    src: string\n    alt: string\n  }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n  return (\n    <Image\n      ref={ref}\n      className={clsx(styles['CTABanner-image'], className)}\n      src={src}\n      alt={alt}\n      borderRadius=\"medium\"\n      {...props}\n    />\n  )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement> & {\n    children: React.ReactNode\n  }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n  <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n    {children}\n  </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n  <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n    {children}\n  </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n  Heading: _Heading,\n  Description,\n  ButtonGroup: _ButtonGroup,\n  Image: _Image,\n  Logo: _Logo,\n  Link: _Link,\n})\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,IAA4B,CAAC,WAAW,SAAS,EAyExD,IAAO,GAET,EACE,WAAQ,UACR,eAAY,IACZ,kBAAe,IACf,eAAY,IACZ,mBAAgB,IAChB,qBAAkB,kCAClB,uBACA,6BAA0B,UAC1B,yBAAsB,SACtB,cACA,aACA,kBAAkB,GAClB,mBAAmB,GACnB,UACA,aAAU,WACV,GAAG,KAEL,MACG;CACH,IAAM,IAAyB,GAAa,GAA0B,MAChE,MAAa,yBACR,OAAO,EAAM,KAGlB,MAAa,sBAAsB,OAAO,KAAU,YAC/C,EAA0B,SAAS,EAAoD,GAC1F,4BAA4B,EAAM,KAClC,GAIL,EAAE,CAAC,EAEA,IAAe,GAClB,GAAU,MACT,OAAO,KAAU,YAAY,MAAM,QAAQ,EAAM,GAC7C,GAAE,qBAAqB,MAAa,EAAuB,GAAO,EAAS,EAAC,GAC5E;GACG,4BAA4B,MAAa,EAAuB,GAAO,QAAQ,EAAS;GACxF,6BAA6B,MAAa,EAAuB,GAAO,SAAS,EAAS;GAC1F,0BAA0B,MAAa,EAAuB,GAAO,MAAM,EAAS;EACtF,EACP,CAAC,EAAuB,CACzB,EAEK,IAAmB,QAAc;EACrC,IAAM,IAAY,EAAE,EAEd,KAAY,GAAU,MAAU;AACpC,GAAI,KACF,OAAO,OAAO,GAAW,EAAa,GAAU,EAAM,CAAC;;AAS3D,SALA,EAAS,oBAAoB,EAAgB,EAC7C,EAAS,wBAAwB,EAAmB,EACpD,EAAS,6BAA6B,EAAwB,EAC9D,EAAS,yBAAyB,EAAoB,EAE/C;IACN;EAAC;EAAiB;EAAoB;EAAyB;EAAqB;EAAa,CAAC,EAE/F,EAAC,eAAY,qBAAkB,iBAAc,qBAAiB,QACnD,EAAM,SAAS,QAAQ,EAAS,CAAC,QAM7C,GAAK,MAAU;AACd,MAAI,EAAM,eAAe,EAAM,CAC7B,KAAI,EAAM,SAAS,EAEjB,CADA,EAAI,gBAAgB,IAChB,MAAY,aACd,EAAI,aAAa,IACR,MAAY,aACrB,EAAI,aAAa,KAAK,EAAM;WAGrB,MAAY,aAAa,EAAM,SAAS,EACjD,GAAI,mBAAmB;WACd,EAAM,SAAS,GAAU;GAClC,IAAM,IAAe;AACrB,KAAI,aAAa,KACf,EAAa,MAAM,SAAS,KAAA,IACxB,EAAM,aAAa,GAAc,EAC/B,MAAM,MAAY,YAAY,MAAM,GACrC,CAAC,GACF,EACL;QAED,GAAI,aAAa,KAAK,EAAM;AAGhC,SAAO;IAET;EAAC,YAAY,KAAA;EAAW,kBAAkB,KAAA;EAAW,cAAc,EAAE;EAAE,eAAe;EAAM,CAEvF,EACN,CAAC,GAAU,EAAQ,CAAC,EAEjB,IAAiB,MAAY,cAAc,KAAgB,MAAY,aAAa,GAEpF,IAAyC,KAC1C,EAAC,UAAU,QAAW,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAuC;EAAY,CAAA,GACjG,EAAM,UAEJ,IAAe,MAAY,cAAc,MAAY,YAAY,UAAU,GAE3E,IACJ,OAAO,KAAoB,YAC3B,EAA0B,SAAS,EAA8D;AAenG,SAbA,QAAA,IAAA,aAA6B,iBAAA,QAAA,IAAA,aAA0C,YACjE,MAAY,cAAc,CAAC,KAE7B,QAAQ,KACN,mHACD,EAEC,MAAY,aAAa,KAE3B,QAAQ,KAAK,uFAAuF,GAKtG,kBAAC,GAAD,EAAA,UACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,WACP,KAAa,EAAO,sBACpB,EAAO,sBAAsB,MAC7B,KAA4B,EAAO,sBAAsB,MACzD,EACD;EACD,OAAO;GAAC,GAAG;GAAkB,GAAG;GAAM;EACtC,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,wBACP,KAAa,EAAO,gCACpB,KAAgB,EAAO,0CACvB,CAAC,KAAgB,EAAO,iCACxB,KAAiB,EAAO,mCACzB;aAEA,IACC,kBAAC,GAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,EAAK,QAAN;KAAa,MAAM;MAAC,QAAQ;MAAI,OAAO;MAAE;KAAE,WAAW,EAAO;eAC3D,kBAAC,OAAD;MACE,WAAW,EACT,EAAO,sBACP,MAAiB,YAAY,EAAO,6BACrC;gBAJH;OAMG,KAAoB,kBAAC,GAAD,EAAoB,CAAA;OACxC;OACA,KAAqB,kBAAC,GAAD,EAAqB,CAAA;OACvC;;KACM,CAAA,EACd,kBAAC,EAAK,QAAN;KAAa,MAAM;MAAC,QAAQ;MAAI,OAAO;MAAE;KAAE,WAAW,EAAO;eAC1D,KAAc;KACH,CAAA,CACT;QAEP,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,sBACP,MAAiB,YAAY,EAAO,6BACrC;cAJH;KAMG,KAAoB,kBAAC,GAAD,EAAoB,CAAA;KACxC;KACA,KAAqB,kBAAC,GAAD,EAAqB,CAAA;KACvC;;GAEJ,CAAA;EACE,CAAA,EACN,CAAA;EAGX,EAEK,IAAsB,MAMtB,IAA2C,KAE3C,IAAW,GAEb,EAAC,QAAK,GAAqB,UAAO,GAAoB,cAAW,aAAU,GAAG,KAC9E,MAGE,kBAAC,GAAD;CAAc;CAAK,WAAW,EAAK,EAAO,sBAAsB,EAAU;CAAQ;CAAU;CAAI,GAAI;CACjG;CACO,CAAA,CAGf,EAOK,IAAc,GACjB,EAAC,cAAW,aAAU,aAAU,SAAS,GAAG,KAAmC,MAE5E,kBAAC,GAAD;CAAW;CAAK,WAAW,EAAK,EAAO,0BAA0B,EAAU;CAAE,IAAG;CAAa;CAAS,GAAI;CACvG;CACI,CAAA,CAGZ,EAEK,IAAe,GAEjB,EAAC,cAAW,gBAAa,UAAU,cAAW,aAAU,GAAG,KAC3D,MAGE,kBAAC,GAAD;CACc;CACD;CACX,WAAW,EAAK,EAAO,0BAA0B,EAAU;CACtD;CACL,GAAI;CAEH;CACW,CAAA,CAGnB,EAQK,IAAS,GAAY,EAAC,cAAW,QAAK,QAAK,GAAG,KAA6B,MAE7E,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,oBAAoB,EAAU;CAChD;CACA;CACL,cAAa;CACb,GAAI;CACJ,CAAA,CAEJ,EAOI,IAAQ,GAAY,EAAC,cAAW,aAAU,GAAG,KAA4B,MAC7E,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAK,EAAO,mBAAmB,EAAU;CAAE,GAAI;CACtE;CACG,CAAA,CACN,EAQW,IAAY,OAAO,OAAO,GAAM;CAC3C,SAAS;CACT;CACA,aAAa;CACb,OAAO;CACP,MAAM;CACN,OAZa,EAAC,cAAW,aAAU,aAAU,UAAU,GAAG,QAC1D,kBAAC,GAAD;EAAe;EAAS,WAAW,EAAK,EAAO,mBAAmB,EAAU;EAAE,GAAI;EAC/E;EACI,CAAA;CAUR,CAAC"}
+{"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n  narrow?: T\n  regular?: T\n  wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Alternative presentations\n     */\n    variant?: 'default' | 'balanced' | 'minimal'\n    /**\n     * The alignment of the content within the banner.\n     */\n    align?: 'start' | 'center'\n    /**\n     * A flag to add a border to the banner.\n     */\n    hasBorder?: boolean\n    /**\n     * Enable optional grid lines\n     */\n    hasGridLines?: boolean\n    /**\n     * A flag to remove the shadow from the banner.\n     * @deprecated - hasShadow will be removed in a future release.\n     */\n    hasShadow?: boolean\n    /**\n     * A flag to remove the background from the banner.\n     */\n    hasBackground?: boolean\n    /**\n     * Optional, custom background color.\n     */\n    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap\n    /**\n     * Optional, custom background image.\n     */\n    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap\n    /**\n     * Optional, custom background position.\n     */\n    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap\n    /**\n     * Optional, custom background size.\n     */\n    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap\n    /**\n     * Escape-hatch for inserting custom React components.\n     * Warning:\n     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n     */\n    leadingComponent?: React.FunctionComponent\n    /**\n     * Escape-hatch for inserting custom React components.\n     * Warning:\n     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n     */\n    trailingComponent?: React.FunctionComponent\n  }\n\nconst Root = forwardRef(\n  (\n    {\n      align = 'center',\n      hasBorder = false,\n      hasGridLines = false,\n      hasShadow = false,\n      hasBackground = true,\n      backgroundColor = 'var(--brand-CTABanner-bgColor)',\n      backgroundImageSrc,\n      backgroundImagePosition = 'center',\n      backgroundImageSize = 'cover',\n      className,\n      children,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      style,\n      variant = 'default',\n      ...props\n    }: CTABannerProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const processBackgroundValue = useCallback((value: string | string[], property) => {\n      if (property === 'background-image-src') {\n        return `url(${value})`\n      }\n\n      if (property === 'background-color' && typeof value === 'string') {\n        return CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[number])\n          ? `var(--brand-color-canvas-${value})`\n          : value\n      }\n\n      return value\n    }, [])\n\n    const createStyles = useCallback(\n      (property, value) =>\n        typeof value === 'string' || Array.isArray(value)\n          ? {[`--brand-CTABanner-${property}`]: processBackgroundValue(value, property)}\n          : {\n              [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n              [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n              [`--brand-CTABanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n            },\n      [processBackgroundValue],\n    )\n\n    const backgroundStyles = useMemo(() => {\n      const allStyles = {}\n\n      const addStyle = (property, value) => {\n        if (value) {\n          Object.assign(allStyles, createStyles(property, value))\n        }\n      }\n\n      addStyle('background-color', backgroundColor)\n      addStyle('background-image-src', backgroundImageSrc)\n      addStyle('background-image-position', backgroundImagePosition)\n      addStyle('background-image-size', backgroundImageSize)\n\n      return allStyles\n    }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n    const {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n      const result = React.Children.toArray(children).reduce<{\n        ImageChild?: React.ReactElement\n        ButtonGroupChild?: React.ReactElement\n        restChildren: React.ReactElement[]\n        hasImageChild: boolean\n      }>(\n        (acc, child) => {\n          if (React.isValidElement(child)) {\n            if (child.type === _Image) {\n              acc.hasImageChild = true\n              if (variant === 'balanced') {\n                acc.ImageChild = child\n              } else if (variant !== 'minimal') {\n                acc.restChildren.push(child)\n              }\n              // minimal variant: image is intentionally excluded from rendering\n            } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n              acc.ButtonGroupChild = child\n            } else if (child.type === _Heading) {\n              const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n              acc.restChildren.push(\n                headingChild.props.size === undefined\n                  ? React.cloneElement(headingChild, {\n                      size: variant === 'minimal' ? '6' : defaultHeadingSize,\n                    })\n                  : headingChild,\n              )\n            } else {\n              acc.restChildren.push(child)\n            }\n          }\n          return acc\n        },\n        {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n      )\n      return result\n    }, [children, variant])\n\n    const hasSideColumn = (variant === 'balanced' && ImageChild) || (variant === 'minimal' && ButtonGroupChild)\n\n    const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n      ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n      : React.Fragment\n\n    const defaultAlign = variant === 'balanced' || variant === 'minimal' ? 'start' : align\n\n    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n      if (variant === 'balanced' && !ImageChild) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n        )\n      }\n      if (variant === 'minimal' && hasImageChild) {\n        // eslint-disable-next-line no-console\n        console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n      }\n    }\n\n    return (\n      <Tag>\n        <section\n          ref={ref}\n          className={clsx(\n            styles.CTABanner,\n            hasShadow && styles['CTABanner--shadow'],\n            styles[`CTABanner--variant-${variant}`],\n            className,\n          )}\n          style={{...backgroundStyles, ...style}}\n          {...props}\n        >\n          <div\n            className={clsx(\n              styles['CTABanner-container'],\n              hasBorder && styles['CTABanner-container--border'],\n              hasGridLines && styles['CTABanner-container--border-gridlines'],\n              !hasGridLines && styles['CTABanner-container--rounded'],\n              hasBackground && styles['CTABanner-container--background'],\n            )}\n          >\n            {hasSideColumn ? (\n              <Grid className={styles['CTABanner-grid']}>\n                <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n                  <div\n                    className={clsx(\n                      styles['CTABanner-content'],\n                      defaultAlign === 'center' && styles['CTABanner-content--center'],\n                    )}\n                  >\n                    {LeadingComponent && <LeadingComponent />}\n                    {restChildren}\n                    {TrailingComponent && <TrailingComponent />}\n                  </div>\n                </Grid.Column>\n                <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n                  {ImageChild || ButtonGroupChild}\n                </Grid.Column>\n              </Grid>\n            ) : (\n              <div\n                className={clsx(\n                  styles['CTABanner-content'],\n                  defaultAlign === 'center' && styles['CTABanner-content--center'],\n                )}\n              >\n                {LeadingComponent && <LeadingComponent />}\n                {restChildren}\n                {TrailingComponent && <TrailingComponent />}\n              </div>\n            )}\n          </div>\n        </section>\n      </Tag>\n    )\n  },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n  (\n    {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n  BaseProps<HTMLParagraphElement> & {\n    variant?: TextProps['variant']\n  }\n\nconst Description = forwardRef(\n  ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n    return (\n      <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst _ButtonGroup = forwardRef(\n  (\n    {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <ButtonGroup\n        buttonSize={buttonSize}\n        buttonsAs={buttonsAs}\n        className={clsx(styles['CTABanner-buttonGroup'], className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </ButtonGroup>\n    )\n  },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n  Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> & {\n    src: string\n    alt: string\n  }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n  return (\n    <Image\n      ref={ref}\n      className={clsx(styles['CTABanner-image'], className)}\n      src={src}\n      alt={alt}\n      borderRadius=\"medium\"\n      {...props}\n    />\n  )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement> & {\n    children: React.ReactNode\n  }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n  <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n    {children}\n  </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n  <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n    {children}\n  </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n  Heading: _Heading,\n  Description,\n  ButtonGroup: _ButtonGroup,\n  Image: _Image,\n  Logo: _Logo,\n  Link: _Link,\n})\n"],"mappings":"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"}

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

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

package/esm/CTABanner/CTABanner.module.js

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

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

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

package/esm/Card/Card.d.ts

@@ -5,6 +5,7 @@ import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
 export declare const CardVariants: readonly ["default", "minimal"];
@@ -96,7 +97,7 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
 };
 /**
  * Card component:
- * {@link https://primer.style/brand/components/Card/ See usage examples}.
+ * @see https://primer.style/brand/components/Card
  */
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Image: typeof CardImage;

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

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

package/esm/Card/Card.js

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

package/esm/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n  /**\n   * Specify alternative card appearance\n   */\n  variant?: CardVariants\n  /**\n   * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<CardImageProps>\n    | React.ReactElement<CardIconProps>\n    | React.ReactElement<CardLabelProps>\n    | React.ReactElement<CardTokensProps>\n    | React.ReactElement<CardHeadingProps>\n    | React.ReactElement<CardDescriptionProps>\n  /**\n   * Disable transitions and animations within the Card\n   */\n  disableAnimation?: boolean\n  /**\n   * The href of the link\n   * */\n  href: string\n  /**\n   * Changes the cta text of the card\n   * */\n  ctaText?: string\n  /**\n   * Specifies the presentation of the call-to-action area\n   */\n  ctaVariant?: CardCTAVariant\n  /**\n   * Optional, custom background color.\n   */\n  backgroundColor?: CardBackgroundColor\n  /**\n   * A visual that appears before the heading, commonly used for a logo or brand mark\n   */\n  leadingVisual?: CardLeadingVisual\n  /**\n   * Adds a border to the card.\n   */\n  hasBorder?: boolean\n  /**\n   * Fills the width of the parent container and removes the default max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Aligns the card content\n   */\n  align?: 'start' | 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      align = 'start',\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      children: childrenMaybeWrappedInFragment,\n      className,\n      ctaText = 'Learn more',\n      ctaVariant = defaultCardCTAVariant,\n      disableAnimation = false,\n      fullWidth = false,\n      href,\n      hasBorder = false,\n      leadingVisual,\n      style,\n      variant = 'default',\n      backgroundColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n    const resolvedBackgroundColor =\n      backgroundColor ?? (variant === 'minimal' || ctaVariant === 'arrow' ? 'none' : 'default')\n\n    let children: React.ReactNode | null\n\n    if (childrenMaybeWrappedInFragment == null) {\n      children = null\n    } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n      children = childrenMaybeWrappedInFragment.props.children ?? null\n    } else {\n      children = childrenMaybeWrappedInFragment\n    }\n\n    const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n      React.Children.toArray(children).reduce<{\n        cardHeading?: ReturnType<typeof CardHeading>\n        cardImage?: ReturnType<typeof CardImage>\n        cardIcon?: ReturnType<typeof CardIcon>\n        cardLabel?: ReturnType<typeof CardLabel>\n        cardTokensBlockStart?: ReturnType<typeof CardTokens>\n        cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n        cardDescription?: ReturnType<typeof CardDescription>\n      }>((acc, child) => {\n        if (isCardHeading(child)) {\n          acc.cardHeading = React.cloneElement(child, {\n            href,\n          })\n        } else if (isCardImage(child)) {\n          acc.cardImage = child\n        } else if (isCardIcon(child)) {\n          acc.cardIcon = child\n        } else if (isCardLabel(child)) {\n          acc.cardLabel = child\n        } else if (isCardTokens(child)) {\n          if (child.props.position === 'block-end') {\n            acc.cardTokensBlockEnd = child\n          } else {\n            acc.cardTokensBlockStart = child\n          }\n        } else if (isCardDescription(child)) {\n          acc.cardDescription = child\n        }\n\n        return acc\n      }, {})\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n      // eslint-disable-next-line no-console\n      console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n    }\n\n    const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n    const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n    const imagePosition = cardImage ? cardImage.props.position || 'block-start' : null\n    const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n    return (\n      <DefaultCardWrapperComponent\n        style={style}\n        className={clsx(\n          fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n          styles[`Card--align-${align}`],\n        )}\n      >\n        <div\n          className={clsx(\n            styles.Card,\n            disableAnimation && styles['Card--disableAnimation'],\n            renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n            ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n            cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n            variant === 'minimal' && styles['Card--variant-minimal'],\n            hasBorder && styles['Card--border'],\n            styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n            imagePosition && styles[`Card--imagePos-${imagePosition}`],\n            className,\n          )}\n          style={style}\n          ref={cardRef}\n          {...props}\n        >\n          {imagePosition === 'block-start' ? cardImage : null}\n          {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n          {renderedCardIcon}\n          {cardTokensBlockStart}\n          {cardLabel}\n          {cardHeading}\n          {cardDescription}\n          {cardTokensBlockEnd}\n          {imagePosition === 'block-end' ? cardImage : null}\n\n          {ctaVariant !== 'none' ? (\n            <div\n              className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n              aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n            >\n              <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n                <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n                  {ctaText}\n                </Text>\n              </span>\n              {shouldRenderLinkArrow ? (\n                <span\n                  className={clsx(\n                    styles.Card__actionIcon,\n                    ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n                  )}\n                >\n                  <ExpandableArrow\n                    className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n                    aria-hidden=\"true\"\n                  />\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </DefaultCardWrapperComponent>\n    )\n  },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n  return (\n    <div className={clsx(styles['Card__outer'], className)} style={style}>\n      {children}\n    </div>\n  )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n  if (!leadingVisual) {\n    return null\n  }\n\n  if (typeof leadingVisual === 'function') {\n    return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n  }\n\n  if (React.isValidElement<{className?: string}>(leadingVisual)) {\n    return React.cloneElement(leadingVisual, {\n      className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n    })\n  }\n\n  return null\n}\n\nexport type CardImageProps = {\n  position?: 'block-start' | 'block-end'\n  padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n  return (\n    <div\n      className={clsx(\n        styles.Card__image,\n        styles[`Card__image--position-${position}`],\n        padding === 'none' && styles['Card__image--padding-none'],\n      )}\n    >\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n  <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n  ({children, className, position = 'block-start', ...rest}, ref) => {\n    return (\n      <div\n        className={clsx(\n          styles.Card__tokens,\n          position === 'block-end' && styles['Card__tokens--position-block-end'],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n    children: React.ReactNode | React.ReactNode[]\n    variant?: CardLabelVariant\n  }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n  ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n    if (variant === 'accent-text') {\n      return (\n        <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n          {children}\n        </EyebrowText>\n      )\n    }\n\n    return (\n      <Token\n        ref={ref as React.Ref<HTMLSpanElement | HTMLAnchorElement>}\n        className={clsx(styles.Card__label, className)}\n        {...rest}\n      >\n        {children}\n      </Token>\n    )\n  },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n  href?: string\n} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n    return (\n      <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n        <a\n          href={href}\n          className={clsx(styles.Card__link)}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        >\n          {children}\n        </a>\n      </Heading>\n    )\n  },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n  children: React.ReactNode | React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/**\n * Card component:\n * {@link https://primer.style/brand/components/Card/ See usage examples}.\n */\nexport const Card = Object.assign(CardRoot, {\n  Image: CardImage,\n  Icon: CardIcon,\n  Label: CardLabel,\n  Tokens: CardTokens,\n  Heading: CardHeading,\n  Description: CardDescription,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n  /**\n   * Specify alternative card appearance\n   */\n  variant?: CardVariants\n  /**\n   * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<CardImageProps>\n    | React.ReactElement<CardIconProps>\n    | React.ReactElement<CardLabelProps>\n    | React.ReactElement<CardTokensProps>\n    | React.ReactElement<CardHeadingProps>\n    | React.ReactElement<CardDescriptionProps>\n  /**\n   * Disable transitions and animations within the Card\n   */\n  disableAnimation?: boolean\n  /**\n   * The href of the link\n   * */\n  href: string\n  /**\n   * Changes the cta text of the card\n   * */\n  ctaText?: string\n  /**\n   * Specifies the presentation of the call-to-action area\n   */\n  ctaVariant?: CardCTAVariant\n  /**\n   * Optional, custom background color.\n   */\n  backgroundColor?: CardBackgroundColor\n  /**\n   * A visual that appears before the heading, commonly used for a logo or brand mark\n   */\n  leadingVisual?: CardLeadingVisual\n  /**\n   * Adds a border to the card.\n   */\n  hasBorder?: boolean\n  /**\n   * Fills the width of the parent container and removes the default max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Aligns the card content\n   */\n  align?: 'start' | 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      align = 'start',\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      children: childrenMaybeWrappedInFragment,\n      className,\n      ctaText = 'Learn more',\n      ctaVariant = defaultCardCTAVariant,\n      disableAnimation = false,\n      fullWidth = false,\n      href,\n      hasBorder = false,\n      leadingVisual,\n      style,\n      variant = 'default',\n      backgroundColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n    const resolvedBackgroundColor =\n      backgroundColor ?? (variant === 'minimal' || ctaVariant === 'arrow' ? 'none' : 'default')\n\n    let children: React.ReactNode | null\n\n    if (childrenMaybeWrappedInFragment == null) {\n      children = null\n    } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n      children = childrenMaybeWrappedInFragment.props.children ?? null\n    } else {\n      children = childrenMaybeWrappedInFragment\n    }\n\n    const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n      React.Children.toArray(children).reduce<{\n        cardHeading?: ReturnType<typeof CardHeading>\n        cardImage?: ReturnType<typeof CardImage>\n        cardIcon?: ReturnType<typeof CardIcon>\n        cardLabel?: ReturnType<typeof CardLabel>\n        cardTokensBlockStart?: ReturnType<typeof CardTokens>\n        cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n        cardDescription?: ReturnType<typeof CardDescription>\n      }>((acc, child) => {\n        if (isCardHeading(child)) {\n          acc.cardHeading = React.cloneElement(child, {\n            href,\n          })\n        } else if (isCardImage(child)) {\n          acc.cardImage = child\n        } else if (isCardIcon(child)) {\n          acc.cardIcon = child\n        } else if (isCardLabel(child)) {\n          acc.cardLabel = child\n        } else if (isCardTokens(child)) {\n          if (child.props.position === 'block-end') {\n            acc.cardTokensBlockEnd = child\n          } else {\n            acc.cardTokensBlockStart = child\n          }\n        } else if (isCardDescription(child)) {\n          acc.cardDescription = child\n        }\n\n        return acc\n      }, {})\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n      // eslint-disable-next-line no-console\n      console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n    }\n\n    const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n    const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n    const imagePosition = cardImage ? cardImage.props.position || 'block-start' : null\n    const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n    return (\n      <DefaultCardWrapperComponent\n        style={style}\n        className={clsx(\n          fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n          styles[`Card--align-${align}`],\n        )}\n      >\n        <div\n          className={clsx(\n            styles.Card,\n            disableAnimation && styles['Card--disableAnimation'],\n            renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n            ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n            cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n            variant === 'minimal' && styles['Card--variant-minimal'],\n            hasBorder && styles['Card--border'],\n            styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n            imagePosition && styles[`Card--imagePos-${imagePosition}`],\n            className,\n          )}\n          style={style}\n          ref={cardRef}\n          {...props}\n        >\n          {imagePosition === 'block-start' ? cardImage : null}\n          {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n          {renderedCardIcon}\n          {cardTokensBlockStart}\n          {cardLabel}\n          {cardHeading}\n          {cardDescription}\n          {cardTokensBlockEnd}\n          {imagePosition === 'block-end' ? cardImage : null}\n\n          {ctaVariant !== 'none' ? (\n            <div\n              className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n              aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n            >\n              <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n                <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n                  {ctaText}\n                </Text>\n              </span>\n              {shouldRenderLinkArrow ? (\n                <span\n                  className={clsx(\n                    styles.Card__actionIcon,\n                    ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n                  )}\n                >\n                  <ExpandableArrow\n                    className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n                    aria-hidden=\"true\"\n                  />\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </DefaultCardWrapperComponent>\n    )\n  },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n  return (\n    <div className={clsx(styles['Card__outer'], className)} style={style}>\n      {children}\n    </div>\n  )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n  if (!leadingVisual) {\n    return null\n  }\n\n  if (typeof leadingVisual === 'function') {\n    return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n  }\n\n  if (React.isValidElement<{className?: string}>(leadingVisual)) {\n    return React.cloneElement(leadingVisual, {\n      className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n    })\n  }\n\n  return null\n}\n\nexport type CardImageProps = {\n  position?: 'block-start' | 'block-end'\n  padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n  return (\n    <div\n      className={clsx(\n        styles.Card__image,\n        styles[`Card__image--position-${position}`],\n        padding === 'none' && styles['Card__image--padding-none'],\n      )}\n    >\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n  <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n  ({children, className, position = 'block-start', ...rest}, ref) => {\n    return (\n      <div\n        className={clsx(\n          styles.Card__tokens,\n          position === 'block-end' && styles['Card__tokens--position-block-end'],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n    children: React.ReactNode | React.ReactNode[]\n    variant?: CardLabelVariant\n  }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n  ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n    if (variant === 'accent-text') {\n      return (\n        <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n          {children}\n        </EyebrowText>\n      )\n    }\n\n    return (\n      <Token\n        ref={ref as React.Ref<HTMLSpanElement | HTMLAnchorElement>}\n        className={clsx(styles.Card__label, className)}\n        {...rest}\n      >\n        {children}\n      </Token>\n    )\n  },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n  href?: string\n} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n    return (\n      <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n        <a\n          href={href}\n          className={clsx(styles.Card__link)}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        >\n          {children}\n        </a>\n      </Heading>\n    )\n  },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n  children: React.ReactNode | React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/**\n * Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n  Image: CardImage,\n  Icon: CardIcon,\n  Label: CardLabel,\n  Tokens: CardTokens,\n  Heading: CardHeading,\n  Description: CardDescription,\n})\n"],"mappings":"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"}

package/esm/Card/Card.module-Svi04dp7.css

@@ -0,0 +1 @@
+.Primer_Brand__Card-module__Card___txAQX{--Card-grid-template-rows:auto auto auto auto auto auto 1fr auto;color:var(--brand-color-text-default);padding:var(--brand-Card-padding-block) var(--brand-Card-padding-inline);grid-template:"image image""leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description"1fr"action action"/1fr 1fr;grid-template-rows:var(--Card-grid-template-rows);border-radius:var(--brand-borderRadius-medium);flex:auto;height:100%;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-inline:var(--base-size-32)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-block:var(--base-size-64);--brand-Card-padding-inline:var(--base-size-40);text-align:center}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-inline:var(--base-size-80)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{grid-template-columns:1fr;grid-template-areas:"image""leadingVisual""icon""tokens""label""heading""description""action";justify-items:center}.Primer_Brand__Card-module__Card--backgroundColor-default___1JGan{background-color:var(--brand-Card-background-default)}.Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n{background-color:#0000}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"image image""leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"image""leadingVisual""icon""label""heading""description""tokens""action"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{grid-template-areas:"leadingVisual""icon""tokens""label""heading""description""action""image"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto 1fr auto auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"leadingVisual""icon""label""heading""description""tokens""action""image"}.Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4{--brand-Card-padding-block:var(--base-size-64);--brand-Card-padding-inline:var(--base-size-40)}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_ .Primer_Brand__Card-module__Card__image___3J5wL{margin-bottom:0;margin-top:var(--base-size-28)}.Primer_Brand__Card-module__Card--maxWidth___vGoIk{max-width:var(--brand-Card-maxWidth)}.Primer_Brand__Card-module__Card--fullWidth___nh9Zq{max-width:none;max-width:initial}.Primer_Brand__Card-module__Card--variant-minimal___V3m21,.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--variant-minimal___V3m21{padding:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH{--Card-arrowAction-endInset:var(--base-size-40)}.Primer_Brand__Card-module__Card___txAQX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Card-module__Card__link___LyRm6{color:currentColor;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__Card-module__Card__link___LyRm6 code,.Primer_Brand__Card-module__Card__description___6RhVF code{font-family:var(--brand-fontStack-monospace);font-size:calc(1em - 1px);font-weight:var(--base-text-weight-regular);color:var(--brand-InlineCode-color-fg-default);background-color:var(--brand-InlineCode-bgColor);padding-block:0;padding-inline:var(--base-size-4);border-radius:var(--base-size-2);white-space:normal;word-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.6}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc:hover .Primer_Brand__Card-module__Card__link___LyRm6{-webkit-text-decoration:underline!important;text-decoration:underline!important}.Primer_Brand__Card-module__Card__link___LyRm6:focus{outline:none}.Primer_Brand__Card-module__Card__link___LyRm6:before{content:"";position:absolute;inset:0}.Primer_Brand__Card-module__Card--border___7rvcG{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY{height:100%}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21){border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Card-module__Card__outer___FFzJY:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21):focus-within{outline-offset:var(--base-size-12)}.Primer_Brand__Card-module__Card__image___3J5wL{border-radius:var(--brand-borderRadius-medium);grid-area:image;margin-block-end:var(--base-size-28);overflow:hidden}.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-inline:calc(var(--brand-Card-padding-inline) * -1)}.Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-start:calc(var(--brand-Card-padding-block) * -1)}.Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-end:calc(var(--brand-Card-padding-block) * -1)}.Primer_Brand__Card-module__Card--border___7rvcG .Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{border-end-end-radius:0;border-end-start-radius:0}.Primer_Brand__Card-module__Card--border___7rvcG .Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-start-start-radius:0;border-start-end-radius:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-inline:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-start:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-end:0}.Primer_Brand__Card-module__Card__image___3J5wL img,.Primer_Brand__Card-module__Card__image___3J5wL picture,.Primer_Brand__Card-module__Card__image___3J5wL span{display:block}.Primer_Brand__Card-module__Card__leadingVisual___l_R3_{grid-area:leadingVisual;align-items:center;margin-block-end:var(--base-size-36);display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__leadingVisual___l_R3_{justify-content:center}.Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV{max-width:100%;height:var(--base-size-40);width:auto;display:block}.Primer_Brand__Card-module__Card__icon___gPD1k{margin-bottom:var(--base-size-24);grid-area:icon}.Primer_Brand__Card-module__Card__tokens___9L_4a{gap:var(--base-size-8);margin-bottom:var(--base-size-20);flex-wrap:wrap;grid-area:tokens;display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__tokens___9L_4a{justify-content:center}.Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0{margin-block-start:var(--base-size-20);margin-block-end:0}.Primer_Brand__Card-module__Card__label___q_cqg{grid-area:label;inline-size:fit-content;max-inline-size:100%;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__heading___vdQlj{grid-area:heading;margin-block-end:var(--base-size-12)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-24)}.Primer_Brand__Card-module__Card__action___NKFQ0{pointer-events:none;grid-area:action;align-items:center;max-inline-size:100%;margin-block-start:auto;display:inline-flex}.Primer_Brand__Card-module__Card__actionIcon___KF4ar{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;min-inline-size:0;display:block;overflow:visible}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0{inline-size:100%;min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0>span:first-child{min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;word-wrap:anywhere;overflow:visible}.Primer_Brand__Card-module__Card--align-center___zuZI_:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-align:center}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{display:contents}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy .Primer_Brand__Card-module__Card__action___NKFQ0{margin-block-start:var(--base-size-20)}.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{--actionArrow-duration:.3s;min-height:var(--base-size-40);width:auto;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:var(--base-size-8);justify-content:flex-start;column-gap:var(--base-size-8);padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-Card-background-overlay);flex-shrink:0;margin-block-start:var(--base-size-20);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);overflow:hidden}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1{width:var(--base-size-32);min-width:var(--base-size-32);height:var(--base-size-32);min-height:var(--base-size-32);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-canvas-default)}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__action___NKFQ0{justify-content:center}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 span{color:var(--brand-Link-color-accent)}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 *{cursor:inherit}.Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card--expandableArrow____CfmY{--ExpandableArrow-duration:var(--brand-Card-animation-duration);--ExpandableArrow-easing:var(--brand-Card-animation-easing)}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1 .Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__description___6RhVF{margin-bottom:var(--base-size-12)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}@media (hover:hover){.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:0;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;background-color:#0000;border-color:#0000;column-gap:0;padding-inline:0}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{--actionLabelClip-duration:.4s;opacity:0;min-inline-size:0;max-inline-size:0;transform:translateX(calc(var(--base-size-12) * -1));transition:max-inline-size .4s var(--brand-Card-animation-easing), opacity .4s ease-out, transform .4s ease-out, margin-inline .4s ease-out, padding-inline .4s ease-out;transition:max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing), opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out, margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;background-color:#0000;flex:auto;align-self:stretch;align-items:center;margin-inline:0;padding-inline:0;display:inline-flex;overflow:hidden}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:center}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);border-color:var(--brand-color-border-default);background-color:var(--brand-Card-background-overlay);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__actionLabelClip___kEth0,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__actionLabelClip___kEth0{opacity:1;max-inline-size:100%;margin-inline-start:calc(var(--base-size-12) * -1);margin-inline-end:0;padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);transform:translate(0)}.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY,.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY{transform:translateX(var(--base-size-2))}.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2),.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2){stroke-dashoffset:20px}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc,.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc *{transition:none;animation:none}@media (prefers-reduced-motion:reduce){.Primer_Brand__Card-module__Card___txAQX,.Primer_Brand__Card-module__Card___txAQX:before,.Primer_Brand__Card-module__Card___txAQX:after,.Primer_Brand__Card-module__Card___txAQX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Card/Card.module.js

@@ -1,4 +1,4 @@
-import './Card.module-DvGFYMFf.css';var e = {
+import './Card.module-Svi04dp7.css';var e = {
 	Card: "Primer_Brand__Card-module__Card___txAQX",
 	"Card--align-center": "Primer_Brand__Card-module__Card--align-center___zuZI_",
 	"Card--backgroundColor-default": "Primer_Brand__Card-module__Card--backgroundColor-default___1JGan",