@primer/react-brand 0.72.0 → 0.72.1-rc.8a8dc720

package/docs/components/Card/react.md

@@ -58,7 +58,11 @@ Use `ctaVariant="none"` when the card should remain fully clickable without visi
 
 ### Arrow CTA
 
-Use `ctaVariant="arrow"` when the card should present an icon-only call to action instead of the default text-plus-arrow treatment.
+Use `ctaVariant="arrow"` for a compact call to action. On devices that support hover, the label is visually
+hidden until the Card is hovered or focused. On devices without hover, the label remains visible so the call
+to action does not rely on an unavailable interaction.
+
+Set `disableAnimation` to `true` when CTA state changes should occur without animated transitions.
 
 ```jsx
 <Card href="https://github.com" ctaVariant="arrow">
@@ -143,6 +147,46 @@ Use the `Image` component to add an image to the `Card`. The `Image` component i
 </>
 ```
 
+### Full-bleed images
+
+When an image should stretch to fill the card width, set `padding="none"` on `Card.Image` and add `hasBorder` to the `Card` for visual containment. Display full-bleed cards in a regular `Grid` with clear gaps between them rather than in a shared gridline frame. Keep the image position and aspect ratio consistent across the group.
+
+```jsx
+<Grid>
+  {[
+    {
+      heading: 'Build with GitHub Copilot',
+      description: 'Write, review, and understand code with AI-powered assistance.',
+      image: '/images/placeholder-1.png',
+    },
+    {
+      heading: 'Automate your workflow',
+      description: 'Keep projects moving with tools that fit the way your team works.',
+      image: '/images/placeholder-2.png',
+    },
+    {
+      heading: 'Ship secure software',
+      description: 'Find and fix vulnerabilities throughout the development lifecycle.',
+      image: '/images/placeholder-3.png',
+    },
+  ].map(card => (
+    <Grid.Column key={card.heading} span={{xsmall: 12, large: 4}}>
+      <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
+        <Card.Heading>{card.heading}</Card.Heading>
+        <Card.Description>{card.description}</Card.Description>
+        <Card.Image
+          position="block-end"
+          padding="none"
+          src={card.image}
+          alt="Abstract gradient illustration"
+          aspectRatio="4:3"
+        />
+      </Card>
+    </Grid.Column>
+  ))}
+</Grid>
+```
+
 ### Tokens
 
 Use `Card.Tokens` to display more than one [Token](../Token/index.md).
@@ -178,23 +222,28 @@ Use `Card.Tokens` to display more than one [Token](../Token/index.md).
 
 ### Card `Required`
 
-| name               | type                              | default      | required | description                                                      |
-| ------------------ | --------------------------------- | ------------ | -------- | ---------------------------------------------------------------- |
-| `align`            |                                   | `'start'`    | `false`  | Aligns the card content                                          |
-| `backgroundColor`  | `'default' \| 'subtle' \| 'none'` | `'default'`  | `false`  | Optional background color override for the card                  |
-| `ctaText`          | `string`                          | `Learn more` | `false`  | Label of the link at the bottom of the card                      |
-| `ctaVariant`       | `'text' \| 'arrow' \| 'none'`     | `'text'`     | `false`  | Presentation of the call-to-action area                          |
-| `disableAnimation` | `boolean`                         | `false`      | `false`  | A flag to disable the default hover animation effect of the card |
-| `fullWidth`        | `boolean`                         | `false`      | `false`  | A flag to optionally fill the width of the parent container      |
-| `hasBorder`        | `boolean`                         | `false`      | `false`  | A flag used to provide a border to the card                      |
-| `href`             | `string`                          |              | `true`   | URL to the card content                                          |
-| `leadingVisual`    | `ReactElement`                    |              | `false`  | Logo or brand mark shown above the card content                  |
-| `variant`          | `'default' \| 'minimal'`          | `'default'`  | `false`  | The variant of the card                                          |
+| name               | type                              | default      | required | description                                                 |
+| ------------------ | --------------------------------- | ------------ | -------- | ----------------------------------------------------------- |
+| `align`            |                                   | `'start'`    | `false`  | Aligns the card content                                     |
+| `backgroundColor`  | `'default' \| 'subtle' \| 'none'` | `'default'`  | `false`  | Optional background color override for the card             |
+| `ctaText`          | `string`                          | `Learn more` | `false`  | Label of the link at the bottom of the card                 |
+| `ctaVariant`       | `'text' \| 'arrow' \| 'none'`     | `'text'`     | `false`  | Presentation of the call-to-action area                     |
+| `disableAnimation` | `boolean`                         | `false`      | `false`  | Disables transitions and animations within the Card         |
+| `fullWidth`        | `boolean`                         | `false`      | `false`  | A flag to optionally fill the width of the parent container |
+| `hasBorder`        | `boolean`                         | `false`      | `false`  | A flag used to provide a border to the card                 |
+| `href`             | `string`                          |              | `true`   | URL to the card content                                     |
+| `leadingVisual`    | `ReactElement`                    |              | `false`  | Logo or brand mark shown above the card content             |
+| `variant`          | `'default' \| 'minimal'`          | `'default'`  | `false`  | The variant of the card                                     |
 
 ### Card.Image
 
 Forwards all the props from the [Image component](../Image/index.md), including `src`, `alt`, and `aspectRatio`.
 
+| name       | type                           | default       | required | description                                                       |
+| ---------- | ------------------------------ | ------------- | -------- | ----------------------------------------------------------------- |
+| `padding`  | `'default' \| 'none'`          | `'default'`   | `false`  | Controls spacing around the image within the card                 |
+| `position` | `'block-start' \| 'block-end'` | `block-start` | `false`  | Places the image at the block-start or block-end edge of the card |
+
 ### Card.Icon
 
 | name            | type                                                                                                                                                                                                                                                         | default   | required | description                                  |

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.72.0)
+# Primer Brand docs (v0.72.1-rc.8a8dc720)
 
-These docs are bundled with `@primer/react-brand@0.72.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.1-rc.8a8dc720` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/ButtonGroup/ButtonGroup.d.ts

@@ -4,8 +4,9 @@ import { ButtonProps } from '../Button';
 import { ActionMenuProps } from '../ActionMenu';
 export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
 export type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>;
+export type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandActionMenuType | false | null | undefined;
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
-    children: Array<PrimerBrandButtonType | PrimerBrandActionMenuType> | PrimerBrandButtonType | PrimerBrandActionMenuType;
+    children: ButtonGroupChild | ButtonGroupChild[];
     buttonSize?: ButtonProps<'button' | 'a'>['size'];
     buttonsAs?: 'button' | 'a';
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAa,eAAe,EAAC,MAAM,eAAe,CAAA;AAGzD,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AACtG,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;AAE3E,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,KAAK,CAAC,qBAAqB,GAAG,yBAAyB,CAAC,GAAG,qBAAqB,GAAG,yBAAyB,CAAA;IACtH,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGA6CvB,CAAA"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAa,eAAe,EAAC,MAAM,eAAe,CAAA;AAGzD,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AACtG,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;AAC3E,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,yBAAyB,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAA;AAE3G,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAA;IAC/C,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGA6CvB,CAAA"}

package/esm/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport {ActionMenu, ActionMenuProps} from '../ActionMenu'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>\nexport type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n  children: Array<PrimerBrandButtonType | PrimerBrandActionMenuType> | PrimerBrandButtonType | PrimerBrandActionMenuType\n  buttonSize?: ButtonProps<'button' | 'a'>['size']\n  buttonsAs?: 'button' | 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n  ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const buttonsToRender = React.Children.toArray(children)\n      .filter(\n        (child): child is React.ReactElement =>\n          React.isValidElement(child) && (child.type === Button || child.type === ActionMenu),\n      )\n      .slice(0, 2)\n      .map((child, index) => {\n        const variant = index === 0 ? 'primary' : 'secondary'\n\n        if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {\n          return React.cloneElement(child, {\n            size: child.props.size ?? buttonSize,\n            as: child.props.as ?? buttonsAs,\n            variant: child.props.variant ?? variant,\n          })\n        }\n\n        const actionMenu = child as PrimerBrandActionMenuType\n        const actionMenuSize = buttonSize === 'large' ? 'medium' : buttonSize\n        const actionMenuChildren = React.Children.map(actionMenu.props.children, actionMenuChild => {\n          if (\n            React.isValidElement<React.ComponentProps<typeof ActionMenu.Button>>(actionMenuChild) &&\n            actionMenuChild.type === ActionMenu.Button\n          ) {\n            return React.cloneElement(actionMenuChild, {\n              variant: actionMenuChild.props.variant ?? variant,\n            })\n          }\n          return actionMenuChild\n        })\n\n        return React.cloneElement(actionMenu, {\n          children: actionMenuChildren,\n          size: actionMenu.props.size ?? actionMenuSize,\n        })\n      })\n\n    return (\n      <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>\n        {buttonsToRender}\n      </section>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAgBA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,QACE,MACC,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,KAAU,EAAM,SAAS,GAC3E,CACA,MAAM,GAAG,EAAE,CACX,KAAK,GAAO,MAAU;EACrB,IAAM,IAAU,MAAU,IAAI,YAAY;AAE1C,MAAI,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,EAC7E,QAAO,EAAM,aAAa,GAAO;GAC/B,MAAM,EAAM,MAAM,QAAQ;GAC1B,IAAI,EAAM,MAAM,MAAM;GACtB,SAAS,EAAM,MAAM,WAAW;GACjC,CAAC;EAGJ,IAAM,IAAa,GACb,IAAiB,MAAe,UAAU,WAAW,GACrD,IAAqB,EAAM,SAAS,IAAI,EAAW,MAAM,WAAU,MAErE,EAAM,eAA+D,EAAgB,IACrF,EAAgB,SAAS,EAAW,SAE7B,EAAM,aAAa,GAAiB,EACzC,SAAS,EAAgB,MAAM,WAAW,GAC3C,CAAC,GAEG,EACP;AAEF,SAAO,EAAM,aAAa,GAAY;GACpC,UAAU;GACV,MAAM,EAAW,MAAM,QAAQ;GAChC,CAAC;GACF;AAEJ,QACE,kBAAC,WAAD;EAAc;EAAK,GAAI;EAAO,WAAW,EAAK,EAAO,aAAa,EAAU;YACzE;EACO,CAAA;EAGf"}
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport {ActionMenu, ActionMenuProps} from '../ActionMenu'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>\nexport type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>\nexport type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandActionMenuType | false | null | undefined\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n  children: ButtonGroupChild | ButtonGroupChild[]\n  buttonSize?: ButtonProps<'button' | 'a'>['size']\n  buttonsAs?: 'button' | 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n  ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const buttonsToRender = React.Children.toArray(children)\n      .filter(\n        (child): child is React.ReactElement =>\n          React.isValidElement(child) && (child.type === Button || child.type === ActionMenu),\n      )\n      .slice(0, 2)\n      .map((child, index) => {\n        const variant = index === 0 ? 'primary' : 'secondary'\n\n        if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {\n          return React.cloneElement(child, {\n            size: child.props.size ?? buttonSize,\n            as: child.props.as ?? buttonsAs,\n            variant: child.props.variant ?? variant,\n          })\n        }\n\n        const actionMenu = child as PrimerBrandActionMenuType\n        const actionMenuSize = buttonSize === 'large' ? 'medium' : buttonSize\n        const actionMenuChildren = React.Children.map(actionMenu.props.children, actionMenuChild => {\n          if (\n            React.isValidElement<React.ComponentProps<typeof ActionMenu.Button>>(actionMenuChild) &&\n            actionMenuChild.type === ActionMenu.Button\n          ) {\n            return React.cloneElement(actionMenuChild, {\n              variant: actionMenuChild.props.variant ?? variant,\n            })\n          }\n          return actionMenuChild\n        })\n\n        return React.cloneElement(actionMenu, {\n          children: actionMenuChildren,\n          size: actionMenu.props.size ?? actionMenuSize,\n        })\n      })\n\n    return (\n      <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>\n        {buttonsToRender}\n      </section>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAiBA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,QACE,MACC,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,KAAU,EAAM,SAAS,GAC3E,CACA,MAAM,GAAG,EAAE,CACX,KAAK,GAAO,MAAU;EACrB,IAAM,IAAU,MAAU,IAAI,YAAY;AAE1C,MAAI,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,EAC7E,QAAO,EAAM,aAAa,GAAO;GAC/B,MAAM,EAAM,MAAM,QAAQ;GAC1B,IAAI,EAAM,MAAM,MAAM;GACtB,SAAS,EAAM,MAAM,WAAW;GACjC,CAAC;EAGJ,IAAM,IAAa,GACb,IAAiB,MAAe,UAAU,WAAW,GACrD,IAAqB,EAAM,SAAS,IAAI,EAAW,MAAM,WAAU,MAErE,EAAM,eAA+D,EAAgB,IACrF,EAAgB,SAAS,EAAW,SAE7B,EAAM,aAAa,GAAiB,EACzC,SAAS,EAAgB,MAAM,WAAW,GAC3C,CAAC,GAEG,EACP;AAEF,SAAO,EAAM,aAAa,GAAY;GACpC,UAAU;GACV,MAAM,EAAW,MAAM,QAAQ;GAChC,CAAC;GACF;AAEJ,QACE,kBAAC,WAAD;EAAc;EAAK,GAAI;EAAO,WAAW,EAAK,EAAO,aAAa,EAAU;YACzE;EACO,CAAA;EAGf"}

package/esm/Card/Card.d.ts

@@ -12,6 +12,7 @@ export declare const CardCTAVariants: readonly ["text", "arrow", "none"];
 export declare const CardBackgroundColors: readonly ["default", "subtle", "none"];
 export declare const CardTokenPositions: readonly ["block-start", "block-end"];
 export declare const CardLabelVariants: readonly ["token", "accent-text"];
+export declare const CardImagePaddingOptions: readonly ["default", "none"];
 export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
 export declare const defaultCardIconColor: "default";
 export declare const defaultCardCTAVariant: "text";
@@ -21,6 +22,7 @@ export type CardCTAVariant = (typeof CardCTAVariants)[number];
 export type CardTokenPosition = (typeof CardTokenPositions)[number];
 export type CardLabelVariant = (typeof CardLabelVariants)[number];
 export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
+export type CardImagePadding = (typeof CardImagePaddingOptions)[number];
 type CardLeadingVisual = React.ReactElement | React.ComponentType<{
     className?: string;
 }>;
@@ -34,7 +36,7 @@ export type CardProps = {
      */
     children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardTokensProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
     /**
-     * Disable the default hover animation
+     * Disable transitions and animations within the Card
      */
     disableAnimation?: boolean;
     /**
@@ -70,10 +72,11 @@ export type CardProps = {
      */
     align?: 'start' | 'center';
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
-type CardImageProps = {
+export type CardImageProps = {
     position?: 'block-start' | 'block-end';
+    padding?: CardImagePadding;
 } & ImageProps;
-declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+declare function CardImage({ className, position, padding, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
 type CardTokensProps = BaseProps<HTMLDivElement> & {
     children: React.ReactNode | React.ReactNode[];

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":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAC,MAAM,IAAI,CAAA;AAEtE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAKnD;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAClG,OAAO,wGAAwG,CAAA;AAQ/G,eAAO,MAAM,YAAY,iCAAkC,CAAA;AAC3D,eAAO,MAAM,eAAe,oCAAqC,CAAA;AACjE,eAAO,MAAM,oBAAoB,wCAAyC,CAAA;AAC1E,eAAO,MAAM,kBAAkB,uCAAwC,CAAA;AACvE,eAAO,MAAM,iBAAiB,mCAAoC,CAAA;AAClE,eAAO,MAAM,uBAAuB,8BAA+B,CAAA;AAEnE,eAAO,MAAM,cAAc,wIAAS,CAAA;AAEpC,eAAO,MAAM,oBAAoB,WAAoB,CAAA;AACrD,eAAO,MAAM,qBAAqB,QAAqB,CAAA;AACvD,eAAO,MAAM,uBAAuB,SAAuB,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,KAAK,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAA;AAEvF,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GACjC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GACnC,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;IAC5C;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;SAEK;IACL,IAAI,EAAE,MAAM,CAAA;IACZ;;SAEK;IACL,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,GAC5C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;AAoLnG,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,aAAa,GAAG,WAAW,CAAA;IACtC,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,GAAG,UAAU,CAAA;AAEd,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,QAAwB,EAAE,OAAmB,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,2CAYrG;AAED,KAAK,aAAa,GAAG,SAAS,CAAA;AAM9B,KAAK,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAoBD,KAAK,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAC/D,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,CAAA;AAwBH,KAAK,gBAAgB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GAC5E,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAqBrC,KAAK,oBAAoB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAwBD;;;GAGG;AACH,eAAO,MAAM,IAAI;;mDA/G8C,SAAS;;;;;CAsHtE,CAAA"}

package/esm/Card/Card.js

@@ -10,7 +10,7 @@ import c from "../Link/Link.module.js";
 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-BRKNIzyd.css';/* empty 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                                                                                     */
 /* empty css                                                                                                  */
 import f from "./Card.module.js";
 import p, { forwardRef as m } from "react";
@@ -24,18 +24,18 @@ var _ = ["default", "minimal"], v = [
 	"default",
 	"subtle",
 	"none"
-], b = ["block-start", "block-end"], x = ["token", "accent-text"], S = t, C = S[0], w = v[0], T = x[0], E = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: s, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = w, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: T, variant: E = "default", backgroundColor: k, ...A }, j) => {
-	let M = n(j), N = k ?? (E === "minimal" || v === "arrow" ? "none" : "default"), P;
+], b = ["block-start", "block-end"], x = ["token", "accent-text"], S = ["default", "none"], C = t, w = C[0], T = v[0], E = x[0], D = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: s, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = T, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: w, variant: E = "default", backgroundColor: D, ...A }, j) => {
+	let M = n(j), N = D ?? (E === "minimal" || v === "arrow" ? "none" : "default"), P;
 	P = u == null ? null : d(u) ? u.props.children ?? null : u;
-	let { cardImage: F, cardIcon: H, cardLabel: U, cardTokensBlockStart: W, cardTokensBlockEnd: G, cardHeading: K, cardDescription: q } = p.Children.toArray(P).reduce((e, t) => (B(t) ? e.cardHeading = p.cloneElement(t, { href: x }) : I(t) ? e.cardImage = t : L(t) ? e.cardIcon = t : R(t) ? e.cardLabel = t : z(t) ? t.props.position === "block-end" ? e.cardTokensBlockEnd = t : e.cardTokensBlockStart = t : V(t) && (e.cardDescription = t), e), {});
-	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && C && H && console.warn("Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.");
-	let J = O(C), Y = J ? void 0 : H, X = F ? F.props.position || "block-start" : null, Z = !(t === "center" && v === "text");
-	return /* @__PURE__ */ h(D, {
-		style: T,
+	let { cardImage: F, cardIcon: I, cardLabel: U, cardTokensBlockStart: W, cardTokensBlockEnd: G, cardHeading: K, cardDescription: q } = p.Children.toArray(P).reduce((e, t) => (V(t) ? e.cardHeading = p.cloneElement(t, { href: x }) : L(t) ? e.cardImage = t : R(t) ? e.cardIcon = t : z(t) ? e.cardLabel = t : B(t) ? t.props.position === "block-end" ? e.cardTokensBlockEnd = t : e.cardTokensBlockStart = t : H(t) && (e.cardDescription = t), e), {});
+	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && C && I && console.warn("Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.");
+	let J = k(C), Y = J ? void 0 : I, X = F ? F.props.position || "block-start" : null, Z = !(t === "center" && v === "text");
+	return /* @__PURE__ */ h(O, {
+		style: w,
 		className: e(b ? f["Card--fullWidth"] : f["Card--maxWidth"], f[`Card--align-${t}`]),
 		children: /* @__PURE__ */ g("div", {
 			className: e(f.Card, y && f["Card--disableAnimation"], J && f["Card--hasLeadingVisual"], v === "arrow" && f["Card--ctaVariant-arrow"], G && f["Card--tokensPosition-block-end"], E === "minimal" && f["Card--variant-minimal"], S && f["Card--border"], f[`Card--backgroundColor-${N}`], X && f[`Card--imagePos-${X}`], m),
-			style: T,
+			style: w,
 			ref: M,
 			...A,
 			children: [
@@ -74,35 +74,35 @@ var _ = ["default", "minimal"], v = [
 		})
 	});
 });
-function D({ className: t, children: n, style: r }) {
+function O({ className: t, children: n, style: r }) {
 	return /* @__PURE__ */ h("div", {
 		className: e(f.Card__outer, t),
 		style: r,
 		children: n
 	});
 }
-function O(t) {
+function k(t) {
 	return t ? typeof t == "function" ? p.createElement(t, { className: f.Card__leadingVisualItem }) : p.isValidElement(t) ? p.cloneElement(t, { className: e(f.Card__leadingVisualItem, t.props.className) }) : null : null;
 }
-function k({ className: e, ...t }) {
+function A({ className: t, position: n = "block-start", padding: r = "default", ...i }) {
 	return /* @__PURE__ */ h("div", {
-		className: f.Card__image,
+		className: e(f.Card__image, f[`Card__image--position-${n}`], r === "none" && f["Card__image--padding-none"]),
 		children: /* @__PURE__ */ h(s, {
-			className: e,
-			...t
+			className: t,
+			...i
 		})
 	});
 }
-var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
+var j = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
 	className: e(f.Card__icon, t),
 	hasBackground: n,
 	...r
-}), j = m(({ children: t, className: n, position: r = "block-start", ...i }, a) => /* @__PURE__ */ h("div", {
+}), M = m(({ children: t, className: n, position: r = "block-start", ...i }, a) => /* @__PURE__ */ h("div", {
 	className: e(f.Card__tokens, r === "block-end" && f["Card__tokens--position-block-end"], n),
 	ref: a,
 	...i,
 	children: t
-})), M = m(({ children: t, variant: n = T, className: r, ...a }, o) => n === "accent-text" ? /* @__PURE__ */ h(i, {
+})), N = m(({ children: t, variant: n = E, className: r, ...a }, o) => n === "accent-text" ? /* @__PURE__ */ h(i, {
 	ref: o,
 	className: e(f.Card__label, r),
 	variant: "accent",
@@ -113,7 +113,7 @@ var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 	className: e(f.Card__label, r),
 	...a,
 	children: t
-})), N = m(({ children: t, as: n = "h3", className: r, href: i, onMouseEnter: o, onMouseLeave: s, onBlur: c, onFocus: l, ...u }, d) => /* @__PURE__ */ h(a, {
+})), P = m(({ children: t, as: n = "h3", className: r, href: i, onMouseEnter: o, onMouseLeave: s, onBlur: c, onFocus: l, ...u }, d) => /* @__PURE__ */ h(a, {
 	size: "6",
 	className: e(f.Card__heading, r),
 	ref: d,
@@ -128,7 +128,7 @@ var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 		onFocus: l,
 		children: t
 	})
-})), P = m(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ h(r, {
+})), F = m(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ h(r, {
 	variant: "muted",
 	ref: a,
 	size: "200",
@@ -136,15 +136,15 @@ var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 	className: e(f.Card__description, n),
 	...i,
 	children: t
-})), F = (e) => (t) => p.isValidElement(t) && t.type === e, I = F(k), L = F(A), R = F(M), z = F(j), B = F(N), V = F(P), H = Object.assign(E, {
-	Image: k,
-	Icon: A,
-	Label: M,
-	Tokens: j,
-	Heading: N,
-	Description: P
+})), I = (e) => (t) => p.isValidElement(t) && t.type === e, L = I(A), R = I(j), z = I(N), B = I(M), V = I(P), H = I(F), U = Object.assign(D, {
+	Image: A,
+	Icon: j,
+	Label: N,
+	Tokens: M,
+	Heading: P,
+	Description: F
 });
 //#endregion
-export { H as Card, y as CardBackgroundColors, v as CardCTAVariants, S as CardIconColors, x as CardLabelVariants, b as CardTokenPositions, _ as CardVariants, w as defaultCardCTAVariant, C as defaultCardIconColor, T as defaultCardLabelVariant };
+export { U as Card, y as CardBackgroundColors, v as CardCTAVariants, C as CardIconColors, S as CardImagePaddingOptions, x as CardLabelVariants, b as CardTokenPositions, _ as CardVariants, T as defaultCardCTAVariant, w as defaultCardIconColor, E as defaultCardLabelVariant };
 
 //# sourceMappingURL=Card.js.map

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\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]\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 the default hover animation\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\ntype CardImageProps = {\n  position?: 'block-start' | 'block-end'\n} & ImageProps\n\nfunction CardImage({className, ...rest}: CardImageProps) {\n  return (\n    <div className={styles.Card__image}>\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/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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"}

package/esm/Card/Card.module-4GGxtM9r.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-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);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__Card-module__Card__description___6RhVF code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__Card-module__Card__link___LyRm6:has(code){line-height:1.4lh}.Primer_Brand__Card-module__Card__description___6RhVF.Primer_Brand__Card-module__Card__description___6RhVF:has(code){line-height:1.25lh}.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--skew___k2nMy:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}.Primer_Brand__Card-module__Card--skew___k2nMy:hover .Primer_Brand__Card-module__Card__torch___hdUqp{opacity:.85}.Primer_Brand__Card-module__Card__skew-bounding___g108S{border-radius:var(--brand-borderRadius-medium);z-index:1;background-color:var(--brand-Card-background-default);height:100%;position:relative;overflow:hidden}.Primer_Brand__Card-module__Card__torch___hdUqp{background-color:var(--brand-color-accent-primary);filter:blur(180px);opacity:0;mix-blend-mode:soft-light;will-change:transform;pointer-events:none;z-index:-1;border-radius:300px;width:650px;height:650px;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;right:0}.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-B41BqbuX.css';var e = {
+import './Card.module-4GGxtM9r.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",
@@ -17,6 +17,9 @@ import './Card.module-B41BqbuX.css';var e = {
 	"Card--disableAnimation": "Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc",
 	"Card--border": "Primer_Brand__Card-module__Card--border___7rvcG",
 	Card__outer: "Primer_Brand__Card-module__Card__outer___FFzJY",
+	"Card__image--padding-none": "Primer_Brand__Card-module__Card__image--padding-none___Bh_kj",
+	"Card__image--position-block-start": "Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr",
+	"Card__image--position-block-end": "Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ",
 	Card__leadingVisual: "Primer_Brand__Card-module__Card__leadingVisual___l_R3_",
 	Card__leadingVisualItem: "Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV",
 	Card__icon: "Primer_Brand__Card-module__Card__icon___gPD1k",

package/esm/Card/Card.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n  padding: var(--base-size-32);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card--align-center .Card {\n  text-align: center;\n  padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    padding: var(--base-size-64) var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  padding: var(--base-size-64) var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\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.Card__description code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n  line-height: calc(1lh * 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card:not(.Card--disableAnimation):hover {\n  transform: scale3d(1.025, 1.025, 1);\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  --actionLabelClip-duration: 400ms;\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  align-self: stretch;\n  min-inline-size: 0;\n  overflow: hidden;\n  max-inline-size: 0;\n  background-color: transparent;\n  opacity: 0;\n  transform: translateX(calc(var(--base-size-12) * -1));\n  transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n    opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n    margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: 0;\n  padding-block: var(--base-size-4);\n  padding-inline: 0;\n  border: var(--brand-borderWidth-thin) solid transparent;\n  border-radius: var(--brand-borderRadius-full);\n  background-color: transparent;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n    column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--skew:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n  opacity: 0.85;\n}\n\n.Card__skew-bounding {\n  border-radius: var(--brand-borderRadius-medium);\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n  height: 100%;\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n  width: 650px;\n  height: 650px;\n  background-color: var(--brand-color-accent-primary);\n  filter: blur(180px);\n  border-radius: 300px;\n  opacity: 0;\n  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  mix-blend-mode: soft-light;\n  will-change: transform;\n  pointer-events: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: -1;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow:not(.Card--disableAnimation):hover {\n  transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card {\n    --brand-Card-padding-inline: var(--base-size-32);\n  }\n}\n\n.Card--align-center .Card {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n\n  text-align: center;\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    --brand-Card-padding-inline: var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\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.Card__description code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n  line-height: calc(1lh * 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image--padding-none {\n  margin-inline: calc(var(--brand-Card-padding-inline) * -1);\n}\n\n.Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card--border .Card__image--position-block-start.Card__image--padding-none {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.Card--border .Card__image--position-block-end.Card__image--padding-none {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-start-start-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.Card--variant-minimal .Card__image--padding-none {\n  margin-inline: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: 0;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: var(--base-size-8);\n  padding-block: var(--base-size-4);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-Card-background-overlay);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--skew:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n  opacity: 0.85;\n}\n\n.Card__skew-bounding {\n  border-radius: var(--brand-borderRadius-medium);\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n  height: 100%;\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n  width: 650px;\n  height: 650px;\n  background-color: var(--brand-color-accent-primary);\n  filter: blur(180px);\n  border-radius: 300px;\n  opacity: 0;\n  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  mix-blend-mode: soft-light;\n  will-change: transform;\n  pointer-events: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: -1;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n@media (hover: hover) {\n  .Card__action--arrowOnly {\n    column-gap: 0;\n    padding-inline: 0;\n    border-color: transparent;\n    background-color: transparent;\n    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n  }\n\n  .Card__actionLabelClip {\n    --actionLabelClip-duration: 400ms;\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    align-self: stretch;\n    min-inline-size: 0;\n    overflow: hidden;\n    max-inline-size: 0;\n    background-color: transparent;\n    opacity: 0;\n    transform: translateX(calc(var(--base-size-12) * -1));\n    margin-inline: 0;\n    padding-inline: 0;\n    transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n      opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n      margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n  }\n\n  .Card--ctaVariant-arrow .Card__actionLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n  animation: none;\n  transition: none;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}