@codecademy/gamut

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