@codecademy/gamut 72.2.5-alpha.cd2140.0 → 72.2.5-alpha.f6eeb2.0

package/dist/Video/styles/vds_base_theme.scss

@@ -0,0 +1,101 @@
+@import "~@vidstack/react/player/styles/default/theme.css";
+@import "~@vidstack/react/player/styles/default/layouts/video.css";
+@import "~@vidstack/react/player/styles/default/layouts/audio.css";
+
+/**
+  * Youtube overlay
+  * - Why 120% ? hiding yt logo and copy link button which are not accessible.
+  */
+iframe.vds-youtube[data-no-controls] {
+  height: 120%;
+}
+
+[data-started] iframe.vds-youtube[data-no-controls] {
+  height: 1000%;
+}
+
+// Control buttons
+:where(.vds-button .vds-icon) {
+  border-radius: unset;
+}
+
+.vds-controls button {
+  border-radius: var(--media-button-border-radius);
+}
+
+:where(.vds-video-layout[data-sm]) :where(.vds-button) {
+  padding: 0px 4px !important;
+}
+
+// Small layout volume / time slider
+:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) {
+  background-color: var(--color-gray-600);
+}
+:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill) {
+  background-color: var(--color-secondary);
+}
+.vds-video-layout .vds-time-slider .vds-slider-value {
+  border: unset;
+  color: white;
+}
+
+// Tooltip
+.vds-tooltip-content::after {
+  content: "";
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border-style: solid;
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  border-color: currentColor;
+}
+:where(.vds-tooltip-content[data-placement~="top"])::after {
+  border-width: 0 1px 1px 0;
+  bottom: -0.5rem;
+  left: calc(50% - 0.5rem);
+  background-image: linear-gradient(
+    to top left,
+    var(--color-background-contrast) 55%,
+    rgba(0, 0, 0, 0) 20%
+  );
+}
+
+:where(.vds-tooltip-content[data-placement~="bottom"])::after {
+  border-width: 1px 0px 0px 1px;
+  top: -0.5rem;
+  left: calc(50% - 0.5rem);
+  background-image: linear-gradient(
+    to bottom right,
+    var(--color-background-contrast) 55%,
+    rgba(0, 0, 0, 0) 20%
+  );
+}
+
+:where(.vds-tooltip-content[data-placement~="start"])::after {
+  left: calc(0% + 0.5rem);
+}
+:where(.vds-tooltip-content[data-placement~="end"])::after {
+  left: unset;
+  right: calc(0% + 0.5rem);
+}
+
+@keyframes vds-tooltip-exit {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes vds-tooltip-enter {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/utils/nullish.d.ts

@@ -0,0 +1,10 @@
+/**
+ * True when `value` is `null` or `undefined`.
+ * Use instead of `value == null` when `eqeqeq` is enforced.
+ */
+export declare const isNullish: (value: unknown) => value is null | undefined;
+/**
+ * True when `value` is neither `null` nor `undefined`.
+ * Use instead of `value != null` when `eqeqeq` is enforced.
+ */
+export declare const isDefined: <T>(value: T | null | undefined) => value is T;

package/dist/utils/nullish.js

@@ -0,0 +1,11 @@
+/**
+ * True when `value` is `null` or `undefined`.
+ * Use instead of `value == null` when `eqeqeq` is enforced.
+ */
+export const isNullish = value => value === null || value === undefined;
+
+/**
+ * True when `value` is neither `null` nor `undefined`.
+ * Use instead of `value != null` when `eqeqeq` is enforced.
+ */
+export const isDefined = value => value !== undefined && value !== null;

package/dist/utils/react.js

@@ -1,4 +1,5 @@
 import { Children, isValidElement } from 'react';
+import { isNullish } from './nullish';
 
 /**
  * Recursively extracts plain text content from React children.
@@ -29,11 +30,12 @@ export const extractTextContent = children => {
     if (typeof child === 'string' || typeof child === 'number') {
       return String(child);
     }
-    if (typeof child === 'boolean' || child == null) {
+    if (typeof child === 'boolean' || isNullish(child)) {
       return '';
     }
     if (/*#__PURE__*/isValidElement(child)) {
-      const textContent = child.props.children ?? child.props.text ?? '';
+      const props = child.props;
+      const textContent = props.children ?? props.text ?? '';
       return extractTextContent(textContent);
     }
     return '';

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "72.2.5-alpha.cd2140.0",
+  "version": "72.2.5-alpha.f6eeb2.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bin": "./bin/gamut.mjs",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.11-alpha.cd2140.0",
-    "@codecademy/gamut-illustrations": "0.58.16-alpha.cd2140.0",
-    "@codecademy/gamut-patterns": "0.10.35-alpha.cd2140.0",
-    "@codecademy/gamut-styles": "20.0.3-alpha.cd2140.0",
-    "@codecademy/variance": "0.26.2-alpha.cd2140.0",
+    "@codecademy/gamut-icons": "9.57.11-alpha.f6eeb2.0",
+    "@codecademy/gamut-illustrations": "0.58.16-alpha.f6eeb2.0",
+    "@codecademy/gamut-patterns": "0.10.35-alpha.f6eeb2.0",
+    "@codecademy/gamut-styles": "20.0.3-alpha.f6eeb2.0",
+    "@codecademy/variance": "0.26.2-alpha.f6eeb2.0",
     "@formatjs/intl-locale": "5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",
     "classnames": "^2.2.5",
-    "framer-motion": "^11.18.0",
+    "framer-motion": "^12.0.0",
     "html-to-react": "^1.6.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.23",
@@ -23,7 +23,7 @@
     "polished": "^4.1.2",
     "react-aria-components": "1.7.1",
     "react-focus-on": "3.10.0",
-    "react-hook-form": "^7.65.0",
+    "react-hook-form": "^7.71.2",
     "react-player": "^2.16.0",
     "react-select": "^5.2.2",
     "react-truncate-markup": "^5.1.2",
@@ -44,8 +44,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.3.0",
-    "react-dom": "^17.0.2 || ^18.3.0"
+    "react": "^17.0.2 || ^18.3.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/Video/styles.d.ts

@@ -1 +0,0 @@
-export declare const vdsBaseThemeStyles: import("@emotion/react").SerializedStyles;

package/dist/Video/styles.js

@@ -1,10 +0,0 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { css } from '@emotion/react';
-export const vdsBaseThemeStyles = process.env.NODE_ENV === "production" ? {
-  name: "169rs5q-vdsBaseThemeStyles",
-  styles: "iframe.vds-youtube[data-no-controls]{height:120%;}[data-started] iframe.vds-youtube[data-no-controls]{height:1000%;}:where(.vds-button .vds-icon){border-radius:unset;}.vds-controls button{border-radius:var(--media-button-border-radius);}:where(.vds-video-layout[data-sm]) :where(.vds-button){padding:0px 4px!important;}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track){background-color:var(--color-gray-600);}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill){background-color:var(--color-secondary);}.vds-video-layout .vds-time-slider .vds-slider-value{border:unset;color:white;}.vds-tooltip-content::after{content:'';-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-style:solid;display:block;width:1rem;height:1rem;position:absolute;border-color:currentColor;}:where(.vds-tooltip-content[data-placement~='top'])::after{border-width:0 1px 1px 0;bottom:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n      to top left,\n      var(--color-background-contrast) 55%,\n      rgba(0, 0, 0, 0) 20%\n    );}:where(.vds-tooltip-content[data-placement~='bottom'])::after{border-width:1px 0px 0px 1px;top:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n      to bottom right,\n      var(--color-background-contrast) 55%,\n      rgba(0, 0, 0, 0) 20%\n    );}:where(.vds-tooltip-content[data-placement~='start'])::after{left:calc(0% + 0.5rem);}:where(.vds-tooltip-content[data-placement~='end'])::after{left:unset;right:calc(0% + 0.5rem);}@keyframes vds-tooltip-exit{0%{opacity:1;}100%{opacity:0;}}@keyframes vds-tooltip-enter{0%{opacity:0;}100%{opacity:1;}};label:vdsBaseThemeStyles;"
-} : {
-  name: "169rs5q-vdsBaseThemeStyles",
-  styles: "iframe.vds-youtube[data-no-controls]{height:120%;}[data-started] iframe.vds-youtube[data-no-controls]{height:1000%;}:where(.vds-button .vds-icon){border-radius:unset;}.vds-controls button{border-radius:var(--media-button-border-radius);}:where(.vds-video-layout[data-sm]) :where(.vds-button){padding:0px 4px!important;}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track){background-color:var(--color-gray-600);}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill){background-color:var(--color-secondary);}.vds-video-layout .vds-time-slider .vds-slider-value{border:unset;color:white;}.vds-tooltip-content::after{content:'';-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-style:solid;display:block;width:1rem;height:1rem;position:absolute;border-color:currentColor;}:where(.vds-tooltip-content[data-placement~='top'])::after{border-width:0 1px 1px 0;bottom:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n      to top left,\n      var(--color-background-contrast) 55%,\n      rgba(0, 0, 0, 0) 20%\n    );}:where(.vds-tooltip-content[data-placement~='bottom'])::after{border-width:1px 0px 0px 1px;top:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n      to bottom right,\n      var(--color-background-contrast) 55%,\n      rgba(0, 0, 0, 0) 20%\n    );}:where(.vds-tooltip-content[data-placement~='start'])::after{left:calc(0% + 0.5rem);}:where(.vds-tooltip-content[data-placement~='end'])::after{left:unset;right:calc(0% + 0.5rem);}@keyframes vds-tooltip-exit{0%{opacity:1;}100%{opacity:0;}}@keyframes vds-tooltip-enter{0%{opacity:0;}100%{opacity:1;}};label:vdsBaseThemeStyles;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9WaWRlby9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXFDIiwiZmlsZSI6Ii4uLy4uL3NyYy9WaWRlby9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCB2ZHNCYXNlVGhlbWVTdHlsZXMgPSBjc3NgXG4gIC8qKlxuICAgKiBZb3V0dWJlIG92ZXJsYXlcbiAgICogLSBXaHkgMTIwJSA/IGhpZGluZyB5dCBsb2dvIGFuZCBjb3B5IGxpbmsgYnV0dG9uIHdoaWNoIGFyZSBub3QgYWNjZXNzaWJsZS5cbiAgICovXG4gIGlmcmFtZS52ZHMteW91dHViZVtkYXRhLW5vLWNvbnRyb2xzXSB7XG4gICAgaGVpZ2h0OiAxMjAlO1xuICB9XG5cbiAgW2RhdGEtc3RhcnRlZF0gaWZyYW1lLnZkcy15b3V0dWJlW2RhdGEtbm8tY29udHJvbHNdIHtcbiAgICBoZWlnaHQ6IDEwMDAlO1xuICB9XG5cbiAgLyogQ29udHJvbCBidXR0b25zICovXG4gIDp3aGVyZSgudmRzLWJ1dHRvbiAudmRzLWljb24pIHtcbiAgICBib3JkZXItcmFkaXVzOiB1bnNldDtcbiAgfVxuXG4gIC52ZHMtY29udHJvbHMgYnV0dG9uIHtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1tZWRpYS1idXR0b24tYm9yZGVyLXJhZGl1cyk7XG4gIH1cblxuICA6d2hlcmUoLnZkcy12aWRlby1sYXlvdXRbZGF0YS1zbV0pIDp3aGVyZSgudmRzLWJ1dHRvbikge1xuICAgIHBhZGRpbmc6IDBweCA0cHggIWltcG9ydGFudDtcbiAgfVxuXG4gIC8qIFNtYWxsIGxheW91dCB2b2x1bWUgLyB0aW1lIHNsaWRlciAqL1xuICA6d2hlcmUoLnZkcy12aWRlby1sYXlvdXRbZGF0YS1zbV0gLnZkcy12b2x1bWUtc2xpZGVyIC52ZHMtc2xpZGVyLXRyYWNrKSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItZ3JheS02MDApO1xuICB9XG4gIDp3aGVyZSgudmRzLXZpZGVvLWxheW91dFtkYXRhLXNtXSAudmRzLXZvbHVtZS1zbGlkZXIgLnZkcy1zbGlkZXItdHJhY2stZmlsbCkge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXNlY29uZGFyeSk7XG4gIH1cbiAgLnZkcy12aWRlby1sYXlvdXQgLnZkcy10aW1lLXNsaWRlciAudmRzLXNsaWRlci12YWx1ZSB7XG4gICAgYm9yZGVyOiB1bnNldDtcbiAgICBjb2xvcjogd2hpdGU7XG4gIH1cblxuICAvKiBUb29sdGlwICovXG4gIC52ZHMtdG9vbHRpcC1jb250ZW50OjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgLW1vei10cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgLW1zLXRyYW5zZm9ybTogcm90YXRlKDQ1ZGVnKTtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB3aWR0aDogMXJlbTtcbiAgICBoZWlnaHQ6IDFyZW07XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJvcmRlci1jb2xvcjogY3VycmVudENvbG9yO1xuICB9XG4gIDp3aGVyZSgudmRzLXRvb2x0aXAtY29udGVudFtkYXRhLXBsYWNlbWVudH49J3RvcCddKTo6YWZ0ZXIge1xuICAgIGJvcmRlci13aWR0aDogMCAxcHggMXB4IDA7XG4gICAgYm90dG9tOiAtMC41cmVtO1xuICAgIGxlZnQ6IGNhbGMoNTAlIC0gMC41cmVtKTtcbiAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICB0byB0b3AgbGVmdCxcbiAgICAgIHZhcigtLWNvbG9yLWJhY2tncm91bmQtY29udHJhc3QpIDU1JSxcbiAgICAgIHJnYmEoMCwgMCwgMCwgMCkgMjAlXG4gICAgKTtcbiAgfVxuXG4gIDp3aGVyZSgudmRzLXRvb2x0aXAtY29udGVudFtkYXRhLXBsYWNlbWVudH49J2JvdHRvbSddKTo6YWZ0ZXIge1xuICAgIGJvcmRlci13aWR0aDogMXB4IDBweCAwcHggMXB4O1xuICAgIHRvcDogLTAuNXJlbTtcbiAgICBsZWZ0OiBjYWxjKDUwJSAtIDAuNXJlbSk7XG4gICAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KFxuICAgICAgdG8gYm90dG9tIHJpZ2h0LFxuICAgICAgdmFyKC0tY29sb3ItYmFja2dyb3VuZC1jb250cmFzdCkgNTUlLFxuICAgICAgcmdiYSgwLCAwLCAwLCAwKSAyMCVcbiAgICApO1xuICB9XG5cbiAgOndoZXJlKC52ZHMtdG9vbHRpcC1jb250ZW50W2RhdGEtcGxhY2VtZW50fj0nc3RhcnQnXSk6OmFmdGVyIHtcbiAgICBsZWZ0OiBjYWxjKDAlICsgMC41cmVtKTtcbiAgfVxuICA6d2hlcmUoLnZkcy10b29sdGlwLWNvbnRlbnRbZGF0YS1wbGFjZW1lbnR+PSdlbmQnXSk6OmFmdGVyIHtcbiAgICBsZWZ0OiB1bnNldDtcbiAgICByaWdodDogY2FsYygwJSArIDAuNXJlbSk7XG4gIH1cblxuICBAa2V5ZnJhbWVzIHZkcy10b29sdGlwLWV4aXQge1xuICAgIDAlIHtcbiAgICAgIG9wYWNpdHk6IDE7XG4gICAgfVxuICAgIDEwMCUge1xuICAgICAgb3BhY2l0eTogMDtcbiAgICB9XG4gIH1cbiAgQGtleWZyYW1lcyB2ZHMtdG9vbHRpcC1lbnRlciB7XG4gICAgMCUge1xuICAgICAgb3BhY2l0eTogMDtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgIH1cbiAgfVxuYDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};

package/dist/Video/vidstack-vendor.css

@@ -1,3 +0,0 @@
-@import "~@vidstack/react/player/styles/default/theme.css";
-@import "~@vidstack/react/player/styles/default/layouts/video.css";
-@import "~@vidstack/react/player/styles/default/layouts/audio.css";