@codecademy/styleguide 79.2.1-alpha.f4b2b2.0 → 79.2.1

package/.storybook/components/Elements/ImageGallery.tsx

@@ -3,7 +3,7 @@ import { GamutIconProps } from '@codecademy/gamut-icons';
 import { IllustrationProps } from '@codecademy/gamut-illustrations';
 import { PatternProps } from '@codecademy/gamut-patterns';
 import { css, timingValues } from '@codecademy/gamut-styles';
-import { motion, AnimatePresence } from 'motion/react';
+import { motion, AnimatePresence } from 'framer-motion';
 import * as React from 'react';
 import { useState } from 'react';
 import styled from '@emotion/styled';

package/.storybook/theming/GamutThemeProvider.tsx

@@ -44,7 +44,7 @@ type GlobalsContext = {
 export const withEmotion = (Story: any, context: GlobalsContext) => {
   const colorMode = context.globals.colorMode ?? 'light';
   const selectedTheme = context.globals.theme;
-  const useLogicalProperties = context.globals.logicalProps !== 'false';
+  const useLogicalProperties = context.globals.logicalProps === 'true';
   const direction = context.globals.direction ?? 'ltr';
   const background = corePalette[themeBackground[colorMode]];
   const storyRef = useRef<HTMLDivElement>(null);

package/CHANGELOG.md

@@ -3,9 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.2.1-alpha.f4b2b2.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.f4b2b2.0) (2026-03-16)
+### [79.2.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1) (2026-03-17)
 
-**Note:** Version bump only for package @codecademy/styleguide
+### Bug Fixes
+
+- update reboot file to conditionally use logical properties or physical properties ([404937b](https://github.com/Codecademy/gamut/commit/404937be816a16ffbf7cb4c5b3a2a1999969f31d))
 
 ## [79.2.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.4...@codecademy/styleguide@79.2.0) (2026-03-12)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.1-alpha.f4b2b2.0",
+  "version": "79.2.1",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "05dffa01ea7348becd1074075040204794f0fdaf"
+  "gitHead": "e5d54601094d675dd45ee176745781f3298d9f61"
 }

package/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.stories.tsx

@@ -5,7 +5,7 @@ import {
   FlexBox,
 } from '@codecademy/gamut';
 import type { Meta } from '@storybook/react';
-import { AnimatePresence } from 'motion/react';
+import { AnimatePresence } from 'framer-motion';
 import { PropsWithChildren, useState } from 'react';
 
 const meta: Meta<typeof ExpandInCollapseOut> = {

package/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, FadeInSlideOut, FillButton, FlexBox } from '@codecademy/gamut';
 import type { Meta } from '@storybook/react';
-import { AnimatePresence } from 'motion/react';
+import { AnimatePresence } from 'framer-motion';
 import { useState } from 'react';
 
 const meta: Meta<typeof FadeInSlideOut> = {

package/src/lib/Meta/ESLint rules.mdx

@@ -79,7 +79,7 @@ const ExpandableContainer = styled.Box(
 
 #### Disabling the rule
 
-For third-party components or edge cases where inline styles are necessary (e.g., motion animations), you can disable the rule:
+For third-party components or edge cases where inline styles are necessary (e.g., framer-motion animations), you can disable the rule:
 
 ```tsx
 // eslint-disable-next-line gamut/no-inline-style

package/src/lib/Meta/Installation.mdx

@@ -39,28 +39,6 @@ yarn add @codecademy/gamut-kit @emotion/react @emotion/styled
 
 3. Wrap your application root with `GamutProvider` and give it the theme you would like to use for your app.
 
-**React 19:**
-
-```tsx
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { GamutProvider, theme } from '@codecademy/gamut-styles';
-
-import { App } from './App';
-
-const rootElement = document.getElementById('root');
-if (rootElement) {
-  const root = createRoot(rootElement);
-  root.render(
-    <GamutProvider>
-      <App />
-    </GamutProvider>
-  );
-}
-```
-
-**React 18:**
-
 ```tsx
 import React from 'react';
 import { render } from 'react-dom';
@@ -69,14 +47,13 @@ import { GamutProvider, theme } from '@codecademy/gamut-styles';
 import { App } from './App';
 
 const rootElement = document.getElementById('root');
-if (rootElement) {
-  render(
-    <GamutProvider>
-      <App />
-    </GamutProvider>,
-    rootElement
-  );
-}
+
+render(
+  <GamutProvider>
+    <App />
+  </GamutProvider>,
+  rootElement
+);
 ```
 
 GamutProvider handles a few critical tasks that need to happen in order for components to work.