@codecademy/gamut

Index: package/dist/Card/index.js
===================================================================
--- package/dist/Card/index.js
+++ package/dist/Card/index.js
@@ -1,6 +1,5 @@
 import { CheckerDense } from '@codecademy/gamut-patterns';
-import { borderRadii } from '@codecademy/gamut-styles';
 import * as React from 'react';
 import { DynamicCardWrapper, MotionBox, StaticCardWrapper } from './elements';
 import { patternFadeInOut, useCardElevation } from './styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -14,15 +13,13 @@
   width = '100%',
   height = '100%',
   ...rest
 }) => {
-  const defaultBorderRadius = isInteractive ? 'md' : 'none';
-  const trueBorderRadius = borderRadius ?? defaultBorderRadius;
-  const resolvedBorderRadius = borderRadii[trueBorderRadius];
+  const trueBorderRadius = borderRadius ?? (isInteractive ? 'md' : 'none');
   const SelectedWrapper = variant === 'default' ? DynamicCardWrapper : StaticCardWrapper;
   const hasPattern = shadow === 'patternLeft' || shadow === 'patternRight';
   const isOutline = shadow === 'outline';
-  const setHoverShadow = useCardElevation(shadow, resolvedBorderRadius);
+  const setHoverShadow = useCardElevation(shadow, trueBorderRadius);
   const initialVariant = isOutline ? 'initialOutline' : 'initial';
   const animateVariant = isOutline ? 'animateOutline' : 'animate';
   return /*#__PURE__*/_jsxs(MotionBox, {
     animate: initialVariant,

Index: package/dist/Card/styles.js
===================================================================
--- package/dist/Card/styles.js
+++ package/dist/Card/styles.js
@@ -1,7 +1,6 @@
 import { theme, timingValues, variant } from '@codecademy/gamut-styles';
 import { useTheme } from '@emotion/react';
-
 /**
  * The theme's elevation scale is flattened to dashcase tokens (`rest-shadow`,
  * `hoverMirrored-transform`, ...), so per-state groups don't exist on the
  * theme at runtime. This regroups one state's tokens into a spreadable style
@@ -77,33 +76,38 @@
   }
 };
 export const useCardElevation = (shadow, borderRadius) => {
   const {
+    borderRadii,
     elevation
   } = useTheme();
   const hoverState = shadow === 'patternRight' ? 'hoverMirrored' : 'hover';
+
+  // framer-motion can only animate a concrete value, so responsive or
+  // function-valued radii are not resolved
+  const resolvedBorderRadius = typeof borderRadius === 'string' ? borderRadii[borderRadius] ?? borderRadius : undefined;
   return {
     initial: {
       ...getElevationStyles(elevation, 'rest'),
-      borderRadius,
+      borderRadius: resolvedBorderRadius,
       transition: REST_TRANSITION
     },
     animate: {
       ...getElevationStyles(elevation, hoverState),
-      borderRadius,
+      borderRadius: resolvedBorderRadius,
       transition: HOVER_TRANSITION
     },
     // Outline styles are specific to Codecademy and will not be included in a theme
     initialOutline: {
       ...getElevationStyles(elevation, 'rest'),
       boxShadow: `-${SHADOW_OFFSET_INITIAL}px ${SHADOW_OFFSET_INITIAL}px 0 0px ${theme.colors['background-current']}, -${SHADOW_OFFSET_INITIAL}px ${SHADOW_OFFSET_INITIAL}px 0 1px ${theme.colors['border-primary']}`,
-      borderRadius,
+      borderRadius: resolvedBorderRadius,
       transition: REST_TRANSITION
     },
     animateOutline: {
       ...getElevationStyles(elevation, 'hover'),
       boxShadow: `-${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 0px ${theme.colors['shadow-primary']}, -${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 1px ${theme.colors['shadow-primary']}`,
-      borderRadius,
+      borderRadius: resolvedBorderRadius,
       transition: HOVER_TRANSITION
     }
   };
 };
\ No newline at end of file

Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "73.6.2",
+  "version": "73.6.3-alpha.7e3569.0",
   "author": "Codecademy Engineering <[email protected]>",
   "bin": "./bin/gamut.mjs",
   "dependencies": {
-    "@codecademy/gamut-icons": "10.2.0",
-    "@codecademy/gamut-illustrations": "1.1.0",
-    "@codecademy/gamut-patterns": "1.1.0",
-    "@codecademy/gamut-styles": "21.2.0",
-    "@codecademy/variance": "1.1.0",
+    "@codecademy/gamut-icons": "10.2.1-alpha.7e3569.0",
+    "@codecademy/gamut-illustrations": "1.1.1-alpha.7e3569.0",
+    "@codecademy/gamut-patterns": "1.1.1-alpha.7e3569.0",
+    "@codecademy/gamut-styles": "21.2.1-alpha.7e3569.0",
+    "@codecademy/variance": "1.1.1-alpha.7e3569.0",
     "@formatjs/intl-locale": "5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",

Index: package/dist/Card/styles.d.ts
===================================================================
--- package/dist/Card/styles.d.ts
+++ package/dist/Card/styles.d.ts
@@ -1,6 +1,7 @@
 import { StyleProps } from '@codecademy/variance';
 import { Theme } from '@emotion/react';
+import type { CardWrapperProps } from './types';
 export declare const cardVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "beige" | "hyper" | "navy" | "yellow" | "white" | "default"> & {
     theme?: Theme;
 }) => import("@codecademy/variance").CSSObject;
 export declare const shadowVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"shadow", false | "outline" | "none" | "patternLeft" | "patternRight"> & {
@@ -21,9 +22,9 @@
             ease: "easeIn";
         };
     };
 };
-export declare const useCardElevation: (shadow: StyleProps<typeof shadowVariants>["shadow"], borderRadius?: string) => {
+export declare const useCardElevation: (shadow: StyleProps<typeof shadowVariants>["shadow"], borderRadius: CardWrapperProps["borderRadius"]) => {
     initial: {
         borderRadius: string | undefined;
         transition: {
             readonly duration: number;