@codecademy/gamut 67.5.4-alpha.f56544.0 → 67.5.4-alpha.f978af.0

package/dist/Animation/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Rotation';
 export * from './ExpandInCollapseOut';
-export * from './FadeInSlideOut';

package/dist/Animation/index.js

@@ -1,3 +1,2 @@
 export * from './Rotation';
-export * from './ExpandInCollapseOut';
-export * from './FadeInSlideOut';
+export * from './ExpandInCollapseOut';

package/dist/Card/index.js

@@ -21,8 +21,9 @@ export const Card = ({
   const setHoverShadow = shadow === 'patternRight' ? hoverShadowRight : hoverShadowLeft;
   return /*#__PURE__*/_jsxs(MotionBox, {
     height: height,
+    initial: shadow === 'outline' ? 'initialOutline' : 'initial',
     position: "relative",
-    whileHover: isInteractive ? 'animate' : '',
+    whileHover: isInteractive ? shadow === 'outline' ? 'animateOutline' : 'animate' : '',
     width: width,
     children: [hasPattern && /*#__PURE__*/_jsx(MotionBox, {
       borderRadius: trueBorderRadius,

package/dist/Card/styles.d.ts

@@ -28,6 +28,13 @@ export declare const hoverShadowLeft: {
             ease: string;
         };
     };
+    initialOutline: {
+        boxShadow: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
     animate: {
         transform: string;
         boxShadow: string;
@@ -36,6 +43,14 @@ export declare const hoverShadowLeft: {
             ease: string;
         };
     };
+    animateOutline: {
+        transform: string;
+        boxShadow: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
 };
 export declare const hoverShadowRight: {
     initial: {

package/dist/Card/styles.js

@@ -33,7 +33,7 @@ export const shadowVariants = variant({
     patternLeft: {},
     patternRight: {},
     outline: {
-      boxShadow: `-6px 6px ${theme.colors['background-current']}, -6px 6px 0 1px ${theme.colors['border-primary']}`
+      boxShadow: `-8px 8px ${theme.colors['background-current']}, -8px 8px 0 1px ${theme.colors['border-primary']}`
     }
   }
 });
@@ -61,6 +61,13 @@ export const hoverShadowLeft = {
       ease: 'easeOut'
     }
   },
+  initialOutline: {
+    boxShadow: `-6px 6px 0 0px ${theme.colors['background-current']}, -6px 6px 0 1px ${theme.colors['border-primary']}`,
+    transition: {
+      duration: timingValues.fast / 1000,
+      ease: 'easeOut'
+    }
+  },
   animate: {
     transform: 'translate(4px, -4px)',
     boxShadow: `-8px 8px 0 ${theme.colors['shadow-primary']}`,
@@ -68,6 +75,14 @@ export const hoverShadowLeft = {
       duration: timingValues.fast / 1000,
       ease: 'easeIn'
     }
+  },
+  animateOutline: {
+    transform: 'translate(4px, -4px)',
+    boxShadow: `-8px 8px 0 0px ${theme.colors['shadow-primary']}, -8px 8px 0 1px ${theme.colors['shadow-primary']}`,
+    transition: {
+      duration: timingValues.fast / 1000,
+      ease: 'easeIn'
+    }
   }
 };
 export const hoverShadowRight = {

package/dist/Pagination/AnimatedPaginationButtons.d.ts

@@ -564,13 +564,13 @@ export declare const AnimatedFadeButton: (props: {
     }>;
     theme?: import("@emotion/react").Theme | undefined;
     variant?: "primary" | "secondary" | "danger" | "interface" | undefined;
-    as?: undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
     value?: string | number | readonly string[] | undefined;
+    as?: undefined;
     buttonType?: "text" | "stroke" | undefined;
     showButton?: "hidden" | "shown" | undefined;
 } & import("framer-motion").MotionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/utils.d.ts

@@ -577,13 +577,13 @@ export declare const createAnimatedFadeButton: (WrappedComponent: typeof Paginat
     }>;
     theme?: import("@emotion/react").Theme | undefined;
     variant?: "primary" | "secondary" | "danger" | "interface" | undefined;
-    as?: undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
     value?: string | number | readonly string[] | undefined;
+    as?: undefined;
     buttonType?: "text" | "stroke" | undefined;
     showButton?: "hidden" | "shown" | undefined;
 } & import("framer-motion").MotionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Toaster/index.js

@@ -1,9 +1,9 @@
 import { ColorMode } from '@codecademy/gamut-styles';
 import { AnimatePresence } from 'framer-motion';
 import * as React from 'react';
-import { FadeInSlideOut } from '../Animation/FadeInSlideOut';
 import { BodyPortal } from '../BodyPortal';
 import { Box } from '../Box';
+import { FadeInSlideOut } from '../Motion/FadeInSlideOut';
 import { Toast } from '../Toast/Toast';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Toaster = ({

package/dist/Toggle/utils.d.ts

@@ -1,2 +1,2 @@
 import { ToggleInputStyledProps, ToggleProps } from './types';
-export declare const getToggleElementProps: <Props extends ToggleProps>({ ariaLabel, as, checked, disabled, label, onChange, onClick, }: Pick<Props, "disabled" | "label" | "onChange" | "onClick" | "ariaLabel" | "as" | "checked">) => Omit<ToggleInputStyledProps, 'size' | 'color'>;
+export declare const getToggleElementProps: <Props extends ToggleProps>({ ariaLabel, as, checked, disabled, label, onChange, onClick, }: Pick<Props, "disabled" | "label" | "onChange" | "onClick" | "as" | "ariaLabel" | "checked">) => Omit<ToggleInputStyledProps, 'size' | 'color'>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.5.4-alpha.f56544.0",
+  "version": "67.5.4-alpha.f978af.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.53.0",
@@ -56,5 +56,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "765cef00ca1a82febcc43960b3fcdac318a4958a"
+  "gitHead": "668bc7f52417aa583f99b9ac72d8c8607e1f0dd7"
 }