@codecademy/styleguide 79.1.3-alpha.ef9197.0 → 79.1.3-alpha.f73629.0

package/.storybook/theming/GamutThemeProvider.tsx

@@ -12,9 +12,6 @@ import {
 } from '@codecademy/gamut-styles/src';
 import { Theme } from '@emotion/react';
 
-/** Nonce passed to GamutProvider so Storybook works behind strict CSP (e.g. style-src 'nonce-{value}'). This is a test and will be removed*/
-const STORYBOOK_CSP_NONCE = 'storybook-csp-nonce';
-
 /**
  * Story functions must be called as a regular function to avoid full-remounts
  * See: https://github.com/storybookjs/storybook/issues/12255
@@ -58,7 +55,6 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
   if (process.env.NODE_ENV === 'test') {
     return (
       <GamutProvider
-        nonce={STORYBOOK_CSP_NONCE}
         useCache={false}
         useGlobals={false}
         theme={currentTheme as unknown as Theme}
@@ -76,10 +72,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
 
   // Wrap all stories in minimal provider
   return (
-    <GamutProvider
-      nonce={STORYBOOK_CSP_NONCE}
-      theme={currentTheme as unknown as Theme}
-    >
+    <GamutProvider theme={currentTheme as unknown as Theme}>
       <Background
         alwaysSetVariables
         bg={themeBackground[colorMode]}

package/CHANGELOG.md

@@ -3,11 +3,9 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.1.3-alpha.ef9197.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.ef9197.0) (2026-02-24)
+### [79.1.3-alpha.f73629.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.f73629.0) (2026-02-26)
 
-### Bug Fixes
-
-- **CSP:** add better nonce support ([afdff6e](https://github.com/Codecademy/gamut/commit/afdff6e78aa8bed6ce8e051742b3e52822b9ba82))
+**Note:** Version bump only for package @codecademy/styleguide
 
 ### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.1.3-alpha.ef9197.0",
+  "version": "79.1.3-alpha.f73629.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "e696eb4261721163f277e8add23dc7705edb1232"
+  "gitHead": "bc86647c14e137b537eb8460ae51834595e2831f"
 }

package/src/lib/Meta/Installation.mdx

@@ -39,21 +39,44 @@ 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 { render } from 'react-dom';
+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>
+  );
+}
+```
 
-render(
-  <GamutProvider>
-    <App />
-  </GamutProvider>,
-  rootElement
-);
+**React 18:**
+
+```tsx
+import React from 'react';
+import { render } from 'react-dom';
+import { GamutProvider, theme } from '@codecademy/gamut-styles';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  render(
+    <GamutProvider>
+      <App />
+    </GamutProvider>,
+    rootElement
+  );
+}
 ```
 
 GamutProvider handles a few critical tasks that need to happen in order for components to work.
@@ -63,22 +86,6 @@ GamutProvider handles a few critical tasks that need to happen in order for comp
 3. Adds Global styles and CSS Variables
 4. Sets the current Color Mode context and variables.
 
-### Content Security Policy (CSP)
-
-If your app uses a strict Content-Security-Policy (e.g. `style-src` without `'unsafe-inline'`), pass a nonce to `GamutProvider` so Emotion and other Gamut-managed style tags are allowed:
-
-```tsx
-<GamutProvider nonce={yourCspNonce}>
-  <App />
-</GamutProvider>
-```
-
-Your nonce should be the same value you use in your CSP header (e.g. `style-src 'self' 'nonce-{value}'`). Gamut uses the [get-nonce](https://www.npmjs.com/package/get-nonce) singleton so that style tags injected by react-style-singleton (e.g. from FocusTrap) also receive this nonce.
-
-**Motion components:** When you pass a nonce to GamutProvider, it also wraps children in framer-motion's MotionConfig so that motion components (Drawer, Alert, List, Toaster, etc.) get the nonce on their injected style tags. No extra wrapper is needed.
-
-**Video (Vidstack):** The Video component uses `@vidstack/react`, which applies styles via inline styles (element.style / CSSOM). CSP nonces apply only to `<style>` and `<script>` elements, not to inline style attributes, so **nonce cannot fix** Vidstack's CSP violations. If you use strict CSP and the Video component, relax CSP for that context (e.g. allow the Video route or sandbox) or avoid using Video where strict CSP is required.
-
 **Note:** For react frameworks like Next and Gatsby this will be slightly different (see the SSR section for further steps for each framework). Your entry points for each framework will be:
 
 - **Next** `_app.tsx`