npm - @primer/react-brand - Versions diffs - 0.73.0 → 0.74.0-rc.888ba09a - Mend

@primer/react-brand 0.73.0 → 0.74.0-rc.888ba09a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (381) hide show

package/docs/components/Card/react.md CHANGED Viewed

@@ -153,37 +153,45 @@ When an image should stretch to fill the card width, set `padding="none"` on `Ca
 ```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.Column span={{xsmall: 12, large: 4}}>
+    <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
+      <Card.Heading>Build with GitHub Copilot</Card.Heading>
+      <Card.Description>Write, review, and understand code with AI-powered assistance.</Card.Description>
+      <Card.Image
+        position="block-end"
+        padding="none"
+        src="/images/placeholder-1.png"
+        alt="Abstract gradient illustration"
+        aspectRatio="4:3"
+      />
+    </Card>
+  </Grid.Column>
+  <Grid.Column span={{xsmall: 12, large: 4}}>
+    <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
+      <Card.Heading>Automate your workflow</Card.Heading>
+      <Card.Description>Keep projects moving with tools that fit the way your team works.</Card.Description>
+      <Card.Image
+        position="block-end"
+        padding="none"
+        src="/images/placeholder-2.png"
+        alt="Abstract gradient illustration"
+        aspectRatio="4:3"
+      />
+    </Card>
+  </Grid.Column>
+  <Grid.Column span={{xsmall: 12, large: 4}}>
+    <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
+      <Card.Heading>Ship secure software</Card.Heading>
+      <Card.Description>Find and fix vulnerabilities throughout the development lifecycle.</Card.Description>
+      <Card.Image
+        position="block-end"
+        padding="none"
+        src="/images/placeholder-3.png"
+        alt="Abstract gradient illustration"
+        aspectRatio="4:3"
+      />
+    </Card>
+  </Grid.Column>
 </Grid>
 ```

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.73.0)
+# Primer Brand docs (v0.74.0-rc.888ba09a)
-These docs are bundled with `@primer/react-brand@0.73.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.74.0-rc.888ba09a` 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/docs/introduction/mcp.md CHANGED Viewed

@@ -16,7 +16,7 @@ The server exposes a set of tools that AI agents can call:
 | Tool                       | What it does                                                                                                                                         |
 | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `primer_brand_setup`       | Configures Primer Brand first-time. Includes `ThemeProvider`, Mona Sans and RSC-directive configuration among other things                           |
+| `primer_brand_setup`       | Configures Primer Brand first-time and maintains a Primer Brand pointer beside the declaring `package.json`.                                         |
 | `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, labels) and the current-brand reference templates to start from. |
 | `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                 |
 | `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                         |
@@ -41,6 +41,8 @@ Add the server to your workspace's `.vscode/mcp.json` (or your user `mcp.json`):
 }
 ```
+When an agent calls `primer_brand_setup`, the tool updates `AGENTS.md` only in a package whose `package.json` declares `@primer/react-brand`. Existing instructions are preserved. If several workspace packages declare the dependency, call setup with `projectDir` set to the intended workspace-relative package folder. The pointer routes future agents to the MCP tools and version-matched docs bundled with the installed package.
 ## Set up in other clients
 For GitHub Copilot CLI and other `stdio`-enabled MCP clients, run the server directly:

package/esm/Card/{Card.module-4GGxtM9r.css → Card.module-DvGFYMFf.css} RENAMED Viewed

	@@ -1 +1 @@
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}}
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--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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Card.module-4GGxtM9r.css';var e = {
+import './Card.module-DvGFYMFf.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",
@@ -33,9 +33,6 @@ import './Card.module-4GGxtM9r.css';var e = {
 	Card__actionLabelClip: "Primer_Brand__Card-module__Card__actionLabelClip___kEth0",
 	"Card__action--arrowOnly": "Primer_Brand__Card-module__Card__action--arrowOnly___19e3M",
 	"Card__actionIcon--arrowOnly": "Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1",
-	"Card--skew": "Primer_Brand__Card-module__Card--skew___k2nMy",
-	Card__torch: "Primer_Brand__Card-module__Card__torch___hdUqp",
-	"Card__skew-bounding": "Primer_Brand__Card-module__Card__skew-bounding___g108S",
 	"Card--expandableArrow": "Primer_Brand__Card-module__Card--expandableArrow____CfmY"
 };
 //#endregion

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

	@@ -1 +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 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":""}
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 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--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":""}

package/esm/Card/index.d.ts CHANGED Viewed

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

package/esm/Card/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA~~;AACtB,cAAc,kBAAkB,CAAA~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/esm/index.esm.js CHANGED Viewed

@@ -54,28 +54,27 @@ import { CTAForm as At } from "./CTAForm/CTAForm.js";
 import { MinimalFooter as jt } from "./MinimalFooter/MinimalFooter.js";
 import { Pillar as Mt, defaultPillarIconColor as Nt, defaultPillarIconSize as Pt } from "./Pillar/Pillar.js";
 import { Card as Ft, CardBackgroundColors as It, CardCTAVariants as Lt, CardIconColors as Rt, CardImagePaddingOptions as zt, CardLabelVariants as Bt, CardTokenPositions as Vt, CardVariants as Ht, defaultCardCTAVariant as Ut, defaultCardIconColor as Wt, defaultCardLabelVariant as Gt } from "./Card/Card.js";
-import { CardSkewEffect as Kt } from "./Card/CardSkewEffect.js";
-import { SectionIntro as qt } from "./SectionIntro/SectionIntro.js";
-import { Prose as Jt } from "./Prose/Prose.js";
-import { useVideo as Yt } from "./VideoPlayer/hooks/useVideo.js";
-import { VideoPlayer as Xt } from "./VideoPlayer/VideoPlayer.js";
-import { MinimalVideoPlayer as Zt, _MinimalVideoPlayer as Qt } from "./MinimalVideoPlayer/MinimalVideoPlayer.js";
-import { LogoSuite as $t } from "./LogoSuite/LogoSuite.js";
-import { Timeline as en } from "./Timeline/Timeline.js";
-import { Bento as tn } from "./Bento/Bento.js";
-import { EyebrowBanner as nn, EyebrowBannerIconColors as rn, EyebrowBannerLabelColors as an, defaultEyebrowBannerIconColor as on } from "./EyebrowBanner/EyebrowBanner.js";
-import { Tooltip as sn, TooltipContext as cn } from "./Tooltip/Tooltip.js";
-import { PricingOptions as ln } from "./PricingOptions/PricingOptions.js";
-import { SubNav as un, SubNavSubMenuVariants as dn, useSubNavContext as fn } from "./SubNav/SubNav.js";
-import { NavList as pn } from "./NavList/NavList.js";
-import { IDE as mn, IDEDefaultIconMap as hn, IDEFileExtensions as gn } from "./IDE/IDE.js";
-import { BreadcrumbVariants as _n, Breadcrumbs as vn } from "./Breadcrumbs/Breadcrumbs.js";
-import { Section as yn, SectionBackgroundColors as bn, SectionPaddingVariants as xn } from "./Section/Section.js";
-import { Statistic as Sn, StatisticSizes as Cn, StatisticSpacingValues as wn } from "./Statistic/Statistic.js";
-import { BreakoutBanner as Tn, BreakoutBannerBackgroundColors as En } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as Dn, FootnotesItemTags as On, FootnotesTags as kn } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as An, FrostedGlassVFXIntensity as jn, defaultFrostedGlassVFXIntensity as Mn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as Nn, SectionIntroStackedVariants as Pn } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as Fn } from "./Tabs/Tabs.js";
-import { Tiles as In } from "./Tiles/Tiles.js";
-export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, tn as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, _n as BreadcrumbVariants, vn as Breadcrumbs, Tn as BreakoutBanner, En as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardImagePaddingOptions, Bt as CardLabelVariants, Kt as CardSkewEffect, Vt as CardTokenPositions, Ht as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, nn as EyebrowBanner, rn as EyebrowBannerIconColors, an as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, Dn as Footnotes, On as FootnotesItemTags, kn as FootnotesTags, ft as FormControl, An as FrostedGlassVFX, jn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, mn as IDE, hn as IDEDefaultIconMap, gn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, $t as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, Zt as MinimalVideoPlayer, pn as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, ln as PricingOptions, Jt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, yn as Section, bn as SectionBackgroundColors, qt as SectionIntro, Nn as SectionIntroStacked, Pn as SectionIntroStackedVariants, xn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, Sn as Statistic, Cn as StatisticSizes, wn as StatisticSpacingValues, un as SubNav, dn as SubNavSubMenuVariants, Ke as SubdomainNavBar, Fn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, In as Tiles, en as Timeline, Je as Token, Ye as TokenVariants, sn as Tooltip, cn as TooltipContext, Ot as UnorderedList, Xt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, Qt as _MinimalVideoPlayer, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ut as defaultCardCTAVariant, Wt as defaultCardIconColor, Gt as defaultCardLabelVariant, on as defaultEyebrowBannerIconColor, O as defaultFontVariant, Mn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, fn as useSubNavContext, te as useTheme, Yt as useVideo, Be as useWindowSize };
+import { SectionIntro as Kt } from "./SectionIntro/SectionIntro.js";
+import { Prose as qt } from "./Prose/Prose.js";
+import { useVideo as Jt } from "./VideoPlayer/hooks/useVideo.js";
+import { VideoPlayer as Yt } from "./VideoPlayer/VideoPlayer.js";
+import { MinimalVideoPlayer as Xt, _MinimalVideoPlayer as Zt } from "./MinimalVideoPlayer/MinimalVideoPlayer.js";
+import { LogoSuite as Qt } from "./LogoSuite/LogoSuite.js";
+import { Timeline as $t } from "./Timeline/Timeline.js";
+import { Bento as en } from "./Bento/Bento.js";
+import { EyebrowBanner as tn, EyebrowBannerIconColors as nn, EyebrowBannerLabelColors as rn, defaultEyebrowBannerIconColor as an } from "./EyebrowBanner/EyebrowBanner.js";
+import { Tooltip as on, TooltipContext as sn } from "./Tooltip/Tooltip.js";
+import { PricingOptions as cn } from "./PricingOptions/PricingOptions.js";
+import { SubNav as ln, SubNavSubMenuVariants as un, useSubNavContext as dn } from "./SubNav/SubNav.js";
+import { NavList as fn } from "./NavList/NavList.js";
+import { IDE as pn, IDEDefaultIconMap as mn, IDEFileExtensions as hn } from "./IDE/IDE.js";
+import { BreadcrumbVariants as gn, Breadcrumbs as _n } from "./Breadcrumbs/Breadcrumbs.js";
+import { Section as vn, SectionBackgroundColors as yn, SectionPaddingVariants as bn } from "./Section/Section.js";
+import { Statistic as xn, StatisticSizes as Sn, StatisticSpacingValues as Cn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as wn, BreakoutBannerBackgroundColors as Tn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as En, FootnotesItemTags as Dn, FootnotesTags as On } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as kn, FrostedGlassVFXIntensity as An, defaultFrostedGlassVFXIntensity as jn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as Mn, SectionIntroStackedVariants as Nn } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as Pn } from "./Tabs/Tabs.js";
+import { Tiles as Fn } from "./Tiles/Tiles.js";
+export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, en as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, gn as BreadcrumbVariants, _n as Breadcrumbs, wn as BreakoutBanner, Tn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardImagePaddingOptions, Bt as CardLabelVariants, Vt as CardTokenPositions, Ht as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, tn as EyebrowBanner, nn as EyebrowBannerIconColors, rn as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, En as Footnotes, Dn as FootnotesItemTags, On as FootnotesTags, ft as FormControl, kn as FrostedGlassVFX, An as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, pn as IDE, mn as IDEDefaultIconMap, hn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, Qt as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, Xt as MinimalVideoPlayer, fn as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, cn as PricingOptions, qt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, vn as Section, yn as SectionBackgroundColors, Kt as SectionIntro, Mn as SectionIntroStacked, Nn as SectionIntroStackedVariants, bn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, xn as Statistic, Sn as StatisticSizes, Cn as StatisticSpacingValues, ln as SubNav, un as SubNavSubMenuVariants, Ke as SubdomainNavBar, Pn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, Fn as Tiles, $t as Timeline, Je as Token, Ye as TokenVariants, on as Tooltip, sn as TooltipContext, Ot as UnorderedList, Yt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, Zt as _MinimalVideoPlayer, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ut as defaultCardCTAVariant, Wt as defaultCardIconColor, Gt as defaultCardLabelVariant, an as defaultEyebrowBannerIconColor, O as defaultFontVariant, jn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, dn as useSubNavContext, te as useTheme, Jt as useVideo, Be as useWindowSize };

package/lib/Card/index.d.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from './Card';
2	- export * from './CardSkewEffect';