@codecademy/gamut

Index: package/dist/Card/styles.d.ts
===================================================================
--- package/dist/Card/styles.d.ts
+++ package/dist/Card/styles.d.ts
@@ -1,9 +1,11 @@
+import { StyleProps } from '@codecademy/variance';
+import { Theme } from '@emotion/react';
 export declare const cardVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "beige" | "hyper" | "navy" | "yellow" | "white" | "default"> & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
 }) => import("@codecademy/variance").CSSObject;
 export declare const shadowVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"shadow", false | "outline" | "none" | "patternLeft" | "patternRight"> & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
 }) => import("@codecademy/variance").CSSObject;
 export declare const patternFadeInOut: {
     initial: {
         opacity: number;
@@ -19,59 +21,48 @@
             ease: string;
         };
     };
 };
-export declare const hoverShadowLeft: (borderRadius?: string) => {
+/**
+ * Motion variants for a Card's hover elevation, read from the active theme's
+ * `elevation` scale so each theme controls its own shadow and lift.
+ * `patternRight` cards cast their shadow on the opposite side, so they use the
+ * `hoverMirrored` tokens.
+ */
+export declare const useCardElevation: (shadow: StyleProps<typeof shadowVariants>["shadow"], borderRadius?: string) => {
     initial: {
-        boxShadow: string;
         borderRadius: string | undefined;
         transition: {
-            duration: number;
-            ease: string;
+            readonly duration: number;
+            readonly ease: "easeOut";
         };
+        boxShadow: string;
+        transform: string;
     };
     initialOutline: {
         boxShadow: string;
         borderRadius: string | undefined;
         transition: {
-            duration: number;
-            ease: string;
+            readonly duration: number;
+            readonly ease: "easeOut";
         };
+        transform: string;
     };
     animate: {
-        transform: string;
-        boxShadow: string;
         borderRadius: string | undefined;
         transition: {
-            duration: number;
-            ease: string;
+            readonly duration: number;
+            readonly ease: "easeIn";
         };
+        boxShadow: string;
+        transform: string;
     };
     animateOutline: {
-        transform: string;
         boxShadow: string;
         borderRadius: string | undefined;
         transition: {
-            duration: number;
-            ease: string;
+            readonly duration: number;
+            readonly ease: "easeIn";
         };
-    };
-};
-export declare const hoverShadowRight: (borderRadius?: string) => {
-    initial: {
-        boxShadow: string;
-        borderRadius: string | undefined;
-        transition: {
-            duration: number;
-            ease: string;
-        };
-    };
-    animate: {
         transform: string;
-        boxShadow: string;
-        borderRadius: string | undefined;
-        transition: {
-            duration: number;
-            ease: string;
-        };
     };
 };