@codecademy/gamut 71.0.1-alpha.7bf2a2.0 → 71.0.1-alpha.fd68e3.0

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "71.0.1-alpha.7bf2a2.0",
+  "version": "71.0.1-alpha.fd68e3.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bin": "./bin/gamut.mjs",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.8-alpha.7bf2a2.0",
-    "@codecademy/gamut-illustrations": "0.58.14-alpha.7bf2a2.0",
-    "@codecademy/gamut-patterns": "0.10.33-alpha.7bf2a2.0",
-    "@codecademy/gamut-styles": "20.0.1-alpha.7bf2a2.0",
-    "@codecademy/variance": "0.26.2-alpha.7bf2a2.0",
+    "@codecademy/gamut-icons": "9.57.8-alpha.fd68e3.0",
+    "@codecademy/gamut-illustrations": "0.58.14-alpha.fd68e3.0",
+    "@codecademy/gamut-patterns": "0.10.33-alpha.fd68e3.0",
+    "@codecademy/gamut-styles": "20.0.1-alpha.fd68e3.0",
+    "@codecademy/variance": "0.26.2-alpha.fd68e3.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/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss

@@ -1,104 +0,0 @@
-@use "sass:color";
-@use "variables";
-@use "mixins";
-//
-// Base styles
-//
-
-.btn {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  font-weight: variables.$btn-font-weight;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border: 1px solid transparent;
-  border-radius: variables.$btn-border-radius;
-  user-select: none;
-  @include mixins.button-size(
-    variables.$btn-padding-y,
-    variables.$btn-padding-x,
-    variables.$btn-font-size-base,
-    variables.$btn-line-height,
-    variables.$btn-min-width-sm
-  );
-  transition: all 0.1s ease-in-out;
-}
-
-// Future-proof disabling of clicks on `<a>` elements
-a.btn.disabled,
-fieldset[disabled] a.btn {
-  pointer-events: none;
-}
-
-@each $name, $color in variables.$btn-swatches {
-  @if $name == "brand-yellow" {
-    @include mixins.button-variants($name, variables.$color-black, $color);
-  } @else if color.channel(color.to-space($color, hsl), "lightness") > 68 {
-    @include mixins.button-variants($name, variables.$color-black, $color);
-  } @else {
-    @include mixins.button-variants($name, variables.$color-white, $color);
-  }
-}
-
-.round {
-  border-radius: variables.$btn-round-border-radius;
-}
-
-.square {
-  border-radius: 0;
-}
-//
-// Button Sizes
-//
-
-.large {
-  // line-height: ensure even-numbered height of button next to large input
-  @include mixins.button-size(
-    variables.$btn-padding-y-lg,
-    variables.$btn-padding-x-lg,
-    variables.$btn-font-size-lg,
-    variables.$btn-line-height-lg,
-    variables.$btn-min-width-lg
-  );
-}
-
-.small {
-  // line-height: ensure proper height of button next to small input
-  @include mixins.button-size(
-    variables.$btn-padding-y-sm,
-    variables.$btn-padding-x-sm,
-    variables.$btn-font-size-sm,
-    variables.$btn-line-height-sm,
-    variables.$btn-min-width-sm
-  );
-}
-
-//
-// Block buttovariables.n
-//
-
-.block {
-  display: flex;
-  width: 100%;
-}
-
-.caps {
-  text-transform: uppercase;
-}
-
-.underline {
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.block {
-    width: 100%;
-  }
-}

package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss

@@ -1,109 +0,0 @@
-@use "sass:color";
-@use "variables";
-
-// Button variants
-//
-// Easily pump out default styles, as well as :hover, :focus, :active,
-// and disabled options for all buttons
-
-@mixin button-variant($color, $background, $border: transparent) {
-  $active-background: color.mix(variables.$color-black, $background);
-
-  @if $border == transparent {
-    $active-border: transparent;
-    $active-border-hover: transparent;
-  }
-
-  color: $color;
-  background-color: $background;
-  border-color: $border;
-
-  &:hover {
-    box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $background;
-  }
-
-  &:focus-visible,
-  &:hover {
-    text-decoration: none;
-    color: $color;
-
-    &:active {
-      box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
-    }
-  }
-
-  &:active {
-    background-color: $active-background;
-  }
-
-  &:disabled {
-    background-color: variables.$btn-disabled-color;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
-}
-
-@mixin button-flat-variant($color) {
-  color: $color;
-  background-color: transparent;
-
-  &:hover,
-  &:active {
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $color;
-  }
-
-  &:disabled {
-    color: variables.$btn-disabled-color;
-    background-color: transparent;
-  }
-}
-
-// Button sizes
-@mixin button-size(
-  $padding-y,
-  $padding-x,
-  $font-size,
-  $line-height,
-  $min-width
-) {
-  padding: $padding-y $padding-x;
-  font-size: $font-size;
-  line-height: $line-height;
-  min-width: $min-width;
-
-  &.fit-text {
-    min-width: 0;
-    min-height: 0;
-  }
-}
-
-@mixin button-variants($name, $color, $background, $border: transparent) {
-  .btn-#{$name} {
-    @include button-variant($color, $background, $border);
-    &.flat {
-      @include button-flat-variant($background);
-    }
-    @content;
-  }
-  .link-#{$name} {
-    font-weight: bold;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    color: $background;
-    text-decoration: underline;
-
-    &:disabled {
-      color: variables.$btn-disabled-color;
-    }
-  }
-}

package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss

@@ -1,54 +0,0 @@
-$btn-padding-x: 1rem !default;
-$btn-padding-y: 0.375rem !default;
-$btn-font-weight: bold !default;
-
-$btn-line-height: 1.5 !default;
-$btn-line-height-lg: calc(4 / 3) !default;
-$btn-line-height-sm: 1.5 !default;
-
-$btn-font-size-base: 1rem !default;
-$btn-font-size-lg: 1.25rem !default;
-$btn-font-size-sm: 1rem !default;
-$btn-font-size-xs: 0.75rem !default;
-
-$btn-padding-x-sm: 0.75rem !default;
-$btn-padding-y-sm: 0.25rem !default;
-$btn-min-width-sm: 8rem !default;
-
-$btn-padding-x-lg: 1.25rem !default;
-$btn-padding-y-lg: 0.75rem !default;
-$btn-min-width-lg: 10rem !default;
-
-$btn-border-radius: 2px !default;
-$btn-round-border-radius: 50px !default;
-
-$btn-state-modifier: 20% !default;
-$btn-color-modifier: 10% !default;
-$btn-outline-hover-state-modifier: 0.9 !default;
-$btn-outline-active-state-modifier: 0.6 !default;
-$btn-box-shadow-focus-modifier: 0.5 !default;
-
-$btn-disabled-color: #646466;
-$btn-box-shadow-color: rgba(0, 0, 0, 0.3);
-
-$btn-swatches: (
-  // Gamut Next
-  "hyper": #3a10e5,
-  "red": #e91c11,
-  "navy": #10162f,
-  "white": #ffffff,
-  "grey": #c4c3c7,
-  // Gamut Classic
-  "brand-blue": #3069f0,
-  "brand-red": #fd4d3f,
-  "brand-yellow": #ffd500,
-  "brand-purple": #6400e4,
-  "brand-dark-blue": #141c3a,
-  // Editor
-  "mint": #34b3a0,
-  "darkmint": #1a7b72,
-  "greyblue": #354551
-);
-
-$color-black: #000000;
-$color-white: #ffffff;

package/dist/AccordionButtonDeprecated/styles.module.scss

@@ -1,54 +0,0 @@
-.accordionButton {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.375rem 1rem;
-  width: 100%;
-
-  &.blue {
-    color: #a5befa;
-  }
-
-  &.yellow {
-    background-color: #fff2b3;
-    border: solid #ffe359;
-    border-width: 1px 0;
-    font-weight: normal;
-    transition: background-color 0.15s ease-in-out;
-
-    &:focus-visible {
-      border-color: #b37620;
-    }
-
-    &:focus,
-    &:hover {
-      background-color: #ffec8c;
-    }
-  }
-
-  &.large {
-    border-radius: 2px;
-    font-size: 1.5rem;
-
-    .children {
-      padding-top: 0.2rem;
-    }
-
-    .expansionIcon {
-      margin-left: 1rem;
-    }
-
-    @media only screen and (min-width: 64rem) {
-      font-size: 1.75rem;
-    }
-  }
-}
-
-.expansionIcon {
-  margin-left: 0.75rem;
-  transition: transform 0.35s ease-out;
-}
-
-.expansionIconExpanded {
-  transform: rotate(-180deg);
-}