@codecademy/gamut-styles 14.2.5 → 14.2.6-alpha.9fa786.0

package/dist/AssetProvider.js

@@ -1,10 +1,10 @@
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { webFonts } from './remoteAssets/fonts';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var createFontLinks = function createFontLinks() {
   return webFonts.flatMap(function (_ref) {
     var filePath = _ref.filePath,
-        extensions = _ref.extensions;
+      extensions = _ref.extensions;
     return extensions.map(function (ext) {
       return /*#__PURE__*/_jsx("link", {
         rel: "preload",

package/dist/Background.d.ts

@@ -3,4 +3,4 @@ import { ColorMode, Colors } from './ColorMode';
 export interface BackgroundProps extends Omit<ComponentProps<typeof ColorMode>, 'mode' | 'alwaysSetVariables' | 'bg'> {
     bg: Colors;
 }
-export declare const Background: import("react").ForwardRefExoticComponent<Pick<BackgroundProps, "dir" | "p" | "slot" | "style" | "title" | "id" | "key" | "color" | "background" | "property" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "inset" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "hidden" | "variables" | "children" | "theme" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Background: import("react").ForwardRefExoticComponent<Pick<BackgroundProps, "dir" | "p" | "slot" | "style" | "title" | "id" | "nonce" | "key" | "color" | "background" | "property" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "inset" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "hidden" | "variables" | "children" | "theme" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Background.js

@@ -1,63 +1,46 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
+var _excluded = ["bg"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import { getContrast } from 'polished';
 import { forwardRef, useCallback, useMemo } from 'react';
 import { ColorMode, useColorModes } from './ColorMode';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var isColorAlias = function isColorAlias(mode, color) {
   return Object.keys(mode).includes(color);
 };
-
 export var Background = /*#__PURE__*/forwardRef(function Background(_ref, ref) {
   var bg = _ref.bg,
-      rest = _objectWithoutProperties(_ref, ["bg"]);
-
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useColorModes = useColorModes(),
-      _useColorModes2 = _slicedToArray(_useColorModes, 4),
-      active = _useColorModes2[0],
-      activeColors = _useColorModes2[1],
-      modes = _useColorModes2[2],
-      getColorValue = _useColorModes2[3];
-  /** If a color alias was used then look up the true color key from the active mode */
-
+    _useColorModes2 = _slicedToArray(_useColorModes, 4),
+    active = _useColorModes2[0],
+    activeColors = _useColorModes2[1],
+    modes = _useColorModes2[2],
+    getColorValue = _useColorModes2[3];
 
+  /** If a color alias was used then look up the true color key from the active mode */
   var trueColor = useMemo(function () {
     if (isColorAlias(activeColors, bg)) {
       return activeColors[bg];
     }
-
     return bg;
   }, [bg, activeColors]);
   var getTextContrast = useCallback(function (foreground) {
     return getContrast(getColorValue(foreground), getColorValue(trueColor));
   }, [trueColor, getColorValue]);
+
   /**
    * This compares the contrast of the selected background color
    * and each color modes body text and returns the mode that has
@@ -70,9 +53,9 @@ export var Background = /*#__PURE__*/forwardRef(function Background(_ref, ref) {
 
   var accessibleMode = useMemo(function () {
     var activeMode = modes[active],
-        otherModes = _objectWithoutProperties(modes, [active].map(_toPropertyKey));
-
+      otherModes = _objectWithoutProperties(modes, [active].map(_toPropertyKey));
     var possibleModes = Object.entries(otherModes);
+
     /**
      * Reduce all remaining modes to the mode key with the highest contrast
      * value.
@@ -81,23 +64,19 @@ export var Background = /*#__PURE__*/forwardRef(function Background(_ref, ref) {
      * it will likelyfail to return a mode outside of the lighest and
      * darkest versions.
      */
-
     var _possibleModes$reduce = possibleModes.reduce(function (_ref2, _ref3) {
-      var _ref4 = _slicedToArray(_ref2, 2),
+        var _ref4 = _slicedToArray(_ref2, 2),
           prevMode = _ref4[0],
           prevContrast = _ref4[1];
-
-      var _ref5 = _slicedToArray(_ref3, 2),
+        var _ref5 = _slicedToArray(_ref3, 2),
           mode = _ref5[0],
           text = _ref5[1].text;
-
-      var contrast = getTextContrast(text); // Keep the higher contrast mode.
-
-      return contrast > prevContrast ? [mode, contrast] : [prevMode, prevContrast];
-    }, [active, getTextContrast(activeMode.text)]),
-        _possibleModes$reduce2 = _slicedToArray(_possibleModes$reduce, 1),
-        highestContrastMode = _possibleModes$reduce2[0];
-
+        var contrast = getTextContrast(text);
+        // Keep the higher contrast mode.
+        return contrast > prevContrast ? [mode, contrast] : [prevMode, prevContrast];
+      }, [active, getTextContrast(activeMode.text)]),
+      _possibleModes$reduce2 = _slicedToArray(_possibleModes$reduce, 1),
+      highestContrastMode = _possibleModes$reduce2[0];
     return highestContrastMode;
   }, [modes, active, getTextContrast]);
   return /*#__PURE__*/_jsx(ColorMode, _objectSpread(_objectSpread({}, rest), {}, {

package/dist/ColorMode.d.ts

@@ -875,7 +875,7 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
 } & {
     variables?: CSSObject | undefined;
     alwaysSetVariables?: boolean | undefined;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "dir" | "slot" | "style" | "title" | "id" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "dir" | "slot" | "style" | "title" | "id" | "nonce" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
 export declare const ColorMode: import("react").ForwardRefExoticComponent<Pick<Omit<{
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -1273,6 +1273,4 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Pick<O
 } & {
     variables?: CSSObject | undefined;
     alwaysSetVariables?: boolean | undefined;
-} & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "dir" | "slot" | "style" | "title" | "id" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
-    children?: import("react").ReactNode;
-}, "bg"> & ColorModeProps, "dir" | "p" | "slot" | "style" | "title" | "id" | "key" | "color" | "background" | "property" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "inset" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "hidden" | "variables" | "children" | "theme" | "dimensions" | "textColor" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "alwaysSetVariables" | keyof ColorModeProps> & import("react").RefAttributes<HTMLDivElement>>;
+} & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "dir" | "slot" | "style" | "title" | "id" | "nonce" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>>, "bg"> & ColorModeProps, "dir" | "p" | "slot" | "style" | "title" | "id" | "nonce" | "key" | "color" | "background" | "property" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "inset" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "hidden" | "variables" | "children" | "theme" | "dimensions" | "textColor" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "alwaysSetVariables" | keyof ColorModeProps> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ColorMode.js

@@ -1,29 +1,17 @@
 import _styled from "@emotion/styled/base";
-
+var _excluded = ["mode", "alwaysSetVariables", "bg"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import { serializeTokens, variance } from '@codecademy/variance';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import { mapValues, pick } from 'lodash';
@@ -34,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var providerProps = variance.compose(layout, color, grid, flex, positioning, space, border, background);
 export var modeColorProps = function modeColorProps(_ref) {
   var theme = _ref.theme,
-      mode = _ref.mode;
+    mode = _ref.mode;
   if (!theme || !mode || mode === (theme === null || theme === void 0 ? void 0 : theme.mode)) return {};
   var colors = theme.colors;
   return serializeTokens(mapValues(theme === null || theme === void 0 ? void 0 : theme.modes[mode], function (color) {
@@ -46,44 +34,37 @@ var BackgroundCurrentContext = /*#__PURE__*/createContext({
 });
 export function useColorModes() {
   var bgCurrent = useContext(BackgroundCurrentContext);
-
   var _ref2 = useTheme() || {},
-      mode = _ref2.mode,
-      modes = _ref2.modes,
-      getColorValue = _ref2._getColorValue;
-
+    mode = _ref2.mode,
+    modes = _ref2.modes,
+    getColorValue = _ref2._getColorValue;
   var modesCopy = _objectSpread({}, modes);
-
   if (bgCurrent['background-current'] && modesCopy[mode]['background-current'] !== bgCurrent['background-current']) {
     /* sets the color to the copy of our modes object, and casts the type as the default color values for background-current.
     we could potentially alter the Merge type utility function from createTheme, but since 'background-current' is the only exception to the type-merging rule  and this is the only place we override, this seems to be a more straightforward + lower-risk solution.
     */
+
     modesCopy[mode]['background-current'] = bgCurrent['background-current'];
   }
-
   return [mode, modesCopy === null || modesCopy === void 0 ? void 0 : modesCopy[mode], modes, getColorValue];
 }
 export function useCurrentMode(mode) {
   var _useColorModes = useColorModes(),
-      _useColorModes2 = _slicedToArray(_useColorModes, 1),
-      activeMode = _useColorModes2[0];
-
+    _useColorModes2 = _slicedToArray(_useColorModes, 1),
+    activeMode = _useColorModes2[0];
   return mode !== null && mode !== void 0 ? mode : activeMode;
 }
 export function usePrefersDarkMode() {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      prefersDarkMode = _useState2[0],
-      setPrefersDarkMode = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    prefersDarkMode = _useState2[0],
+    setPrefersDarkMode = _useState2[1];
   useEffect(function () {
     function onChange(event) {
       setPrefersDarkMode(event.matches);
     }
-
     if (window && 'matchMedia' in window) {
       var mq = window.matchMedia('(prefers-color-scheme: dark)');
-
       if (mq && 'addEventListener' in mq) {
         setPrefersDarkMode(mq.matches);
         mq.addEventListener('change', onChange);
@@ -106,39 +87,37 @@ export var VariableProvider = /*#__PURE__*/_styled('div', _extends({}, {
 }), providerProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Db2xvck1vZGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9JZ0MiLCJmaWxlIjoiLi4vc3JjL0NvbG9yTW9kZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzZXJpYWxpemVUb2tlbnMsXG4gIFN0eWxlUHJvcHMsXG4gIFRoZW1lUHJvcHMsXG4gIHZhcmlhbmNlLFxufSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBDU1NPYmplY3QsIFRoZW1lLCBUaGVtZVByb3ZpZGVyLCB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IG1hcFZhbHVlcywgcGljayB9IGZyb20gJ2xvZGFzaCc7XG5pbXBvcnQge1xuICBDb21wb25lbnRQcm9wcyxcbiAgY3JlYXRlQ29udGV4dCxcbiAgZm9yd2FyZFJlZixcbiAgdXNlQ29udGV4dCxcbiAgdXNlRWZmZWN0LFxuICB1c2VNZW1vLFxuICB1c2VTdGF0ZSxcbn0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyB0aGVtZSBhcyBHYW11dFRoZW1lIH0gZnJvbSAnLic7XG5pbXBvcnQge1xuICBiYWNrZ3JvdW5kLFxuICBib3JkZXIsXG4gIGNvbG9yLFxuICBjc3MsXG4gIGZsZXgsXG4gIGdyaWQsXG4gIGxheW91dCxcbiAgcG9zaXRpb25pbmcsXG4gIHNwYWNlLFxufSBmcm9tICcuL3ZhcmlhbmNlL3Byb3BzJztcbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICcuL3ZhcmlhbmNlL3V0aWxzJztcblxuZXhwb3J0IHR5cGUgQ29sb3JzID0ga2V5b2YgVGhlbWVbJ2NvbG9ycyddO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlQ29uZmlnID0gVGhlbWVbJ21vZGVzJ107XG5leHBvcnQgdHlwZSBDb2xvck1vZGVzID0ga2V5b2YgQ29sb3JNb2RlQ29uZmlnO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlU2hhcGUgPSBDb2xvck1vZGVDb25maWdbQ29sb3JNb2Rlc107XG5leHBvcnQgdHlwZSBDb2xvckFsaWFzID0ga2V5b2YgQ29sb3JNb2RlU2hhcGU7XG5cbmV4cG9ydCB0eXBlIENvbG9yTW9kZVByb3BzID0ge1xuICBtb2RlOiBDb2xvck1vZGVzIHwgJ3N5c3RlbSc7XG4gIGJnPzogQ29sb3JzO1xufTtcblxuZXhwb3J0IGNvbnN0IHByb3ZpZGVyUHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBsYXlvdXQsXG4gIGNvbG9yLFxuICBncmlkLFxuICBmbGV4LFxuICBwb3NpdGlvbmluZyxcbiAgc3BhY2UsXG4gIGJvcmRlcixcbiAgYmFja2dyb3VuZFxuKTtcblxuZXhwb3J0IGNvbnN0IG1vZGVDb2xvclByb3BzID0gKHtcbiAgdGhlbWUsXG4gIG1vZGUsXG59OiBUaGVtZVByb3BzPHsgbW9kZT86IENvbG9yTW9kZXMgfT4pID0+IHtcbiAgaWYgKCF0aGVtZSB8fCAhbW9kZSB8fCBtb2RlID09PSB0aGVtZT8ubW9kZSkgcmV0dXJuIHt9O1xuICBjb25zdCB7IGNvbG9ycyB9ID0gdGhlbWU7XG4gIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgbWFwVmFsdWVzKHRoZW1lPy5tb2Rlc1ttb2RlXSwgKGNvbG9yKSA9PiBjb2xvcnNbY29sb3JdKSxcbiAgICAnY29sb3InLFxuICAgIHRoZW1lXG4gICkudmFyaWFibGVzO1xufTtcblxuaW50ZXJmYWNlIEJhY2tncm91bmRDdXJyZW50Q29udGV4dEludGVyZmFjZSB7XG4gICdiYWNrZ3JvdW5kLWN1cnJlbnQnPzoga2V5b2YgdHlwZW9mIEdhbXV0VGhlbWUuY29sb3JzO1xufVxuXG5jb25zdCBCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQgPSBjcmVhdGVDb250ZXh0PEJhY2tncm91bmRDdXJyZW50Q29udGV4dEludGVyZmFjZT4oXG4gIHtcbiAgICAnYmFja2dyb3VuZC1jdXJyZW50JzogdW5kZWZpbmVkLFxuICB9XG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ29sb3JNb2RlcygpOiBbXG4gIENvbG9yTW9kZXMsXG4gIENvbG9yTW9kZVNoYXBlLFxuICBDb2xvck1vZGVDb25maWcsXG4gIChjb2xvcjogQ29sb3JzKSA9PiBzdHJpbmdcbl0ge1xuICBjb25zdCBiZ0N1cnJlbnQgPSB1c2VDb250ZXh0KEJhY2tncm91bmRDdXJyZW50Q29udGV4dCk7XG4gIGNvbnN0IHsgbW9kZSwgbW9kZXMsIF9nZXRDb2xvclZhbHVlOiBnZXRDb2xvclZhbHVlIH0gPSB1c2VUaGVtZSgpIHx8IHt9O1xuICBjb25zdCBtb2Rlc0NvcHkgPSB7IC4uLm1vZGVzIH07XG5cbiAgaWYgKFxuICAgIGJnQ3VycmVudFsnYmFja2dyb3VuZC1jdXJyZW50J10gJiZcbiAgICBtb2Rlc0NvcHlbbW9kZV1bJ2JhY2tncm91bmQtY3VycmVudCddICE9PSBiZ0N1cnJlbnRbJ2JhY2tncm91bmQtY3VycmVudCddXG4gICkge1xuICAgIC8qIHNldHMgdGhlIGNvbG9yIHRvIHRoZSBjb3B5IG9mIG91ciBtb2RlcyBvYmplY3QsIGFuZCBjYXN0cyB0aGUgdHlwZSBhcyB0aGUgZGVmYXVsdCBjb2xvciB2YWx1ZXMgZm9yIGJhY2tncm91bmQtY3VycmVudC5cbiAgICB3ZSBjb3VsZCBwb3RlbnRpYWxseSBhbHRlciB0aGUgTWVyZ2UgdHlwZSB1dGlsaXR5IGZ1bmN0aW9uIGZyb20gY3JlYXRlVGhlbWUsIGJ1dCBzaW5jZSAnYmFja2dyb3VuZC1jdXJyZW50JyBpcyB0aGUgb25seSBleGNlcHRpb24gdG8gdGhlIHR5cGUtbWVyZ2luZyBydWxlICBhbmQgdGhpcyBpcyB0aGUgb25seSBwbGFjZSB3ZSBvdmVycmlkZSwgdGhpcyBzZWVtcyB0byBiZSBhIG1vcmUgc3RyYWlnaHRmb3J3YXJkICsgbG93ZXItcmlzayBzb2x1dGlvbi5cbiAgICAqL1xuXG4gICAgbW9kZXNDb3B5W21vZGVdWydiYWNrZ3JvdW5kLWN1cnJlbnQnXSA9IGJnQ3VycmVudFsnYmFja2dyb3VuZC1jdXJyZW50J10gYXNcbiAgICAgIHwgJ3doaXRlJ1xuICAgICAgfCAnbmF2eS04MDAnO1xuICB9XG5cbiAgcmV0dXJuIFttb2RlLCBtb2Rlc0NvcHk/Llttb2RlXSwgbW9kZXMsIGdldENvbG9yVmFsdWVdO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ3VycmVudE1vZGUobW9kZT86IENvbG9yTW9kZXMpIHtcbiAgY29uc3QgW2FjdGl2ZU1vZGVdID0gdXNlQ29sb3JNb2RlcygpO1xuICByZXR1cm4gbW9kZSA/PyBhY3RpdmVNb2RlO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlUHJlZmVyc0RhcmtNb2RlKCkge1xuICBjb25zdCBbcHJlZmVyc0RhcmtNb2RlLCBzZXRQcmVmZXJzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZnVuY3Rpb24gb25DaGFuZ2UoZXZlbnQ6IE1lZGlhUXVlcnlMaXN0RXZlbnQpIHtcbiAgICAgIHNldFByZWZlcnNEYXJrTW9kZShldmVudC5tYXRjaGVzKTtcbiAgICB9XG5cbiAgICBpZiAod2luZG93ICYmICdtYXRjaE1lZGlhJyBpbiB3aW5kb3cpIHtcbiAgICAgIGNvbnN0IG1xID0gd2luZG93Lm1hdGNoTWVkaWEoJyhwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyayknKTtcblxuICAgICAgaWYgKG1xICYmICdhZGRFdmVudExpc3RlbmVyJyBpbiBtcSkge1xuICAgICAgICBzZXRQcmVmZXJzRGFya01vZGUobXEubWF0Y2hlcyk7XG4gICAgICAgIG1xLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIG9uQ2hhbmdlKTtcblxuICAgICAgICByZXR1cm4gKCkgPT4gbXEucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgb25DaGFuZ2UpO1xuICAgICAgfVxuICAgIH1cbiAgfSwgW10pO1xuXG4gIHJldHVybiBwcmVmZXJzRGFya01vZGU7XG59XG5cbmV4cG9ydCBjb25zdCBWYXJpYWJsZVByb3ZpZGVyID0gc3R5bGVkKFxuICAnZGl2JyxcbiAgc3R5bGVkT3B0aW9ucyhbJ3ZhcmlhYmxlcycsICdhbHdheXNTZXRWYXJpYWJsZXMnXSlcbik8XG4gIFN0eWxlUHJvcHM8dHlwZW9mIHByb3ZpZGVyUHJvcHM+ICYge1xuICAgIHZhcmlhYmxlcz86IENTU09iamVjdDtcbiAgICBhbHdheXNTZXRWYXJpYWJsZXM/OiBib29sZWFuO1xuICB9XG4+KCh7IHZhcmlhYmxlcyB9KSA9PiB2YXJpYWJsZXMsIGNzcyh7IHRleHRDb2xvcjogJ3RleHQnIH0pLCBwcm92aWRlclByb3BzKTtcblxuZXhwb3J0IGNvbnN0IENvbG9yTW9kZSA9IGZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBPbWl0PENvbXBvbmVudFByb3BzPHR5cGVvZiBWYXJpYWJsZVByb3ZpZGVyPiwgJ2JnJz4gJiBDb2xvck1vZGVQcm9wc1xuPigoeyBtb2RlOiBwcmVmZXJlbmNlLCBhbHdheXNTZXRWYXJpYWJsZXMsIGJnLCAuLi5yZXN0IH0sIHJlZikgPT4ge1xuICAvLyBjaGVja3MgaWYgdGhlIHVzZXIgaGFzIHNldCAnc3lzdGVtJyBhcyB0aGVpciBjb2xvciBtb2RlIHByZWZlcmVuY2VcbiAgLy8gdGhlbiBzZXRzIHRoZSBjb2xvciBtb2RlXG4gIGNvbnN0IHByZWZlcnNEYXJrTW9kZSA9IHVzZVByZWZlcnNEYXJrTW9kZSgpO1xuICBjb25zdCBtb2RlID1cbiAgICBwcmVmZXJlbmNlID09PSAnc3lzdGVtJyA/IChwcmVmZXJzRGFya01vZGUgPyAnZGFyaycgOiAnbGlnaHQnKSA6IHByZWZlcmVuY2U7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7IG1vZGVzLCBtb2RlOiBhY3RpdmUsIGNvbG9ycyB9ID0gdGhlbWU7XG4gIGNvbnN0IGNvbnRleHRCZyA9IGJnID8gJ2JhY2tncm91bmQtY3VycmVudCcgOiB1bmRlZmluZWQ7XG5cbiAgLy8gVGhpcyBtYWtlcyBzdXJlIHRoZSBiYWNrZ3JvdW5kLWN1cnJlbnQgY29udGV4dCBpcyBhbHdheXMgc2V0IHRvIHRoZSBjb3JyZWN0IGNvbG9yICsgbm90IHRoZSBzZW1hbnRpYyBjb2xvciBuYW1lLlxuICBjb25zdCBjdXJyZW50UGFyZW50QmcgPSB1c2VDb250ZXh0KEJhY2tncm91bmRDdXJyZW50Q29udGV4dCk7XG5cbiAgY29uc3QgYmdDdXJyZW50ID1cbiAgICBiZyA9PT0gJ2JhY2tncm91bmQtY3VycmVudCdcbiAgICAgID8gY3VycmVudFBhcmVudEJnWydiYWNrZ3JvdW5kLWN1cnJlbnQnXVxuICAgICAgICA/IGN1cnJlbnRQYXJlbnRCZ1snYmFja2dyb3VuZC1jdXJyZW50J11cbiAgICAgICAgOiBtb2Rlc1thY3RpdmVdWydiYWNrZ3JvdW5kLWN1cnJlbnQnXVxuICAgICAgOiBiZztcblxuICAvKiogU2VyaWFsaXplIGNvbG9yIHZhcmlhYmxlcyBmb3IgdGhlIGN1cnJlbnQgbW9kZVxuICAgKiAxLiBJZiBhbGwgdmFyaWFibGVzIGFyZSByZXF1aXJlZCBhZGQgYWxsIG1vZGUgdmFyaWFibGVzIHRvIHRoZSBjdXJyZW50IGNvbnRleHRcbiAgICogMi4gSWYgdGhlIHVzZXIgaGFzIHNwZWNpZmllZCBhIGJhY2tncm91bmQgY29sb3IgLSBzZXQgdGhhdCBjb2xvciB0byB0aGUgY3VycmVudC1iZ1xuICAgKiAzLiBJZiBub3RcbiAgICovXG4gIGNvbnN0IHsgdmFyaWFibGVzIH0gPSB1c2VNZW1vKCgpID0+IHtcbiAgICByZXR1cm4gc2VyaWFsaXplVG9rZW5zKFxuICAgICAgbWFwVmFsdWVzKG1vZGVzW21vZGVdLCAoY29sb3IsIGtleSkgPT4ge1xuICAgICAgICBpZiAoa2V5ID09PSAnYmFja2dyb3VuZC1jdXJyZW50JyAmJiB0eXBlb2YgYmcgIT09ICd1bmRlZmluZWQnKSB7XG4gICAgICAgICAgcmV0dXJuIGNvbG9yc1tiZ107XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIGNvbG9yc1tjb2xvcl07XG4gICAgICB9KSxcbiAgICAgICdjb2xvcicsXG4gICAgICB0aGVtZVxuICAgICk7XG4gIH0sIFtjb2xvcnMsIG1vZGUsIG1vZGVzLCB0aGVtZSwgYmddKTtcblxuICBpZiAoYWN0aXZlID09PSBtb2RlKSB7XG4gICAgY29uc3QgdmFycyA9IGFsd2F5c1NldFZhcmlhYmxlc1xuICAgICAgPyB2YXJpYWJsZXNcbiAgICAgIDogcGljayh2YXJpYWJsZXMsIFsnLS1jb2xvci1iYWNrZ3JvdW5kLWN1cnJlbnQnXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPEJhY2tncm91bmRDdXJyZW50Q29udGV4dC5Qcm92aWRlclxuICAgICAgICB2YWx1ZT17eyAnYmFja2dyb3VuZC1jdXJyZW50JzogYmdDdXJyZW50IH19XG4gICAgICA+XG4gICAgICAgIDxWYXJpYWJsZVByb3ZpZGVyIHsuLi5yZXN0fSB2YXJpYWJsZXM9e3ZhcnN9IGJnPXtjb250ZXh0Qmd9IHJlZj17cmVmfSAvPlxuICAgICAgPC9CYWNrZ3JvdW5kQ3VycmVudENvbnRleHQuUHJvdmlkZXI+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFRoZW1lUHJvdmlkZXIgdGhlbWU9e3sgbW9kZSB9fT5cbiAgICAgIDxWYXJpYWJsZVByb3ZpZGVyXG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgICB2YXJpYWJsZXM9e3ZhcmlhYmxlc31cbiAgICAgICAgYmc9e2NvbnRleHRCZ31cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAvPlxuICAgIDwvVGhlbWVQcm92aWRlcj5cbiAgKTtcbn0pO1xuIl19 */");
 export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
   var preference = _ref4.mode,
-      alwaysSetVariables = _ref4.alwaysSetVariables,
-      bg = _ref4.bg,
-      rest = _objectWithoutProperties(_ref4, ["mode", "alwaysSetVariables", "bg"]);
-
+    alwaysSetVariables = _ref4.alwaysSetVariables,
+    bg = _ref4.bg,
+    rest = _objectWithoutProperties(_ref4, _excluded);
   // checks if the user has set 'system' as their color mode preference
   // then sets the color mode
   var prefersDarkMode = usePrefersDarkMode();
   var mode = preference === 'system' ? prefersDarkMode ? 'dark' : 'light' : preference;
   var theme = useTheme();
   var modes = theme.modes,
-      active = theme.mode,
-      colors = theme.colors;
-  var contextBg = bg ? 'background-current' : undefined; // This makes sure the background-current context is always set to the correct color + not the semantic color name.
+    active = theme.mode,
+    colors = theme.colors;
+  var contextBg = bg ? 'background-current' : undefined;
 
+  // This makes sure the background-current context is always set to the correct color + not the semantic color name.
   var currentParentBg = useContext(BackgroundCurrentContext);
   var bgCurrent = bg === 'background-current' ? currentParentBg['background-current'] ? currentParentBg['background-current'] : modes[active]['background-current'] : bg;
+
   /** Serialize color variables for the current mode
    * 1. If all variables are required add all mode variables to the current context
    * 2. If the user has specified a background color - set that color to the current-bg
    * 3. If not
    */
-
   var _useMemo = useMemo(function () {
-    return serializeTokens(mapValues(modes[mode], function (color, key) {
-      if (key === 'background-current' && typeof bg !== 'undefined') {
-        return colors[bg];
-      }
-
-      return colors[color];
-    }), 'color', theme);
-  }, [colors, mode, modes, theme, bg]),
-      variables = _useMemo.variables;
-
+      return serializeTokens(mapValues(modes[mode], function (color, key) {
+        if (key === 'background-current' && typeof bg !== 'undefined') {
+          return colors[bg];
+        }
+        return colors[color];
+      }), 'color', theme);
+    }, [colors, mode, modes, theme, bg]),
+    variables = _useMemo.variables;
   if (active === mode) {
     var vars = alwaysSetVariables ? variables : pick(variables, ['--color-background-current']);
     return /*#__PURE__*/_jsx(BackgroundCurrentContext.Provider, {
@@ -152,7 +131,6 @@ export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
       }))
     });
   }
-
   return /*#__PURE__*/_jsx(ThemeProvider, {
     theme: {
       mode: mode

package/dist/GamutProvider.d.ts

@@ -2,6 +2,7 @@ import { CSSObject } from '@codecademy/variance';
 import { EmotionCache, Theme } from '@emotion/react';
 import * as React from 'react';
 export interface GamutProviderProps {
+    children?: React.ReactNode;
     useGlobals?: boolean;
     useCache?: boolean;
     theme: Theme;

package/dist/GamutProvider.js

@@ -15,28 +15,26 @@ export var GamutContext = /*#__PURE__*/React.createContext({
 GamutContext.displayName = 'GamutContext';
 export var GamutProvider = function GamutProvider(_ref) {
   var children = _ref.children,
-      cache = _ref.cache,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? coreTheme : _ref$theme,
-      variables = _ref.variables,
-      _ref$useGlobals = _ref.useGlobals,
-      useGlobals = _ref$useGlobals === void 0 ? true : _ref$useGlobals,
-      _ref$useCache = _ref.useCache,
-      useCache = _ref$useCache === void 0 ? true : _ref$useCache;
-
+    cache = _ref.cache,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? coreTheme : _ref$theme,
+    variables = _ref.variables,
+    _ref$useGlobals = _ref.useGlobals,
+    useGlobals = _ref$useGlobals === void 0 ? true : _ref$useGlobals,
+    _ref$useCache = _ref.useCache,
+    useCache = _ref$useCache === void 0 ? true : _ref$useCache;
   var _useContext = useContext(GamutContext),
-      hasGlobals = _useContext.hasGlobals,
-      hasCache = _useContext.hasCache;
-
+    hasGlobals = _useContext.hasGlobals,
+    hasCache = _useContext.hasCache;
   var shouldCreateCache = useCache && !hasCache;
-  var shouldInsertGlobals = useGlobals && !hasGlobals; // Do not initialize a new cache if one has been provided as props
+  var shouldInsertGlobals = useGlobals && !hasGlobals;
 
+  // Do not initialize a new cache if one has been provided as props
   var activeCache = useRef(shouldCreateCache && (cache !== null && cache !== void 0 ? cache : createEmotionCache()));
   var contextValue = {
     hasGlobals: shouldInsertGlobals,
     hasCache: shouldCreateCache
   };
-
   var globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {}), /*#__PURE__*/_jsx(Reboot, {}), /*#__PURE__*/_jsx(Variables, {
       variables: theme._variables
@@ -44,7 +42,6 @@ export var GamutProvider = function GamutProvider(_ref) {
       variables: variables
     })]
   });
-
   if (activeCache.current) {
     return /*#__PURE__*/_jsx(GamutContext.Provider, {
       value: contextValue,
@@ -57,7 +54,6 @@ export var GamutProvider = function GamutProvider(_ref) {
       })
     });
   }
-
   return /*#__PURE__*/_jsxs(GamutContext.Provider, {
     value: contextValue,
     children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {

package/dist/cache/createEmotionCache.d.ts

@@ -1,4 +1,4 @@
 import { Options } from '@emotion/cache';
 export declare const EMOTION_KEY = "gamut";
 export declare const EMOTION_CONTAINER = "emotion-styles";
-export declare const createEmotionCache: (overrides?: Partial<Options> | undefined) => import("@emotion/cache").EmotionCache;
+export declare const createEmotionCache: (overrides?: Partial<Options> | undefined) => import("@emotion/utils").EmotionCache;

package/dist/cache/createEmotionCache.js

@@ -1,44 +1,32 @@
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import createCache from '@emotion/cache';
 import { prefixer } from 'stylis';
 import { focusVisible } from './stylisPlugins';
 export var EMOTION_KEY = 'gamut';
 export var EMOTION_CONTAINER = 'emotion-styles';
-
 var getEmotionNode = function getEmotionNode() {
   if (typeof document === 'undefined') {
     return;
   }
-
   var node = document.getElementById(EMOTION_CONTAINER);
   if (node) return node;
   node = document.createElement('div');
-  node.setAttribute('id', EMOTION_CONTAINER); // if this has not been created add it to the DOM at the top of the body
+  node.setAttribute('id', EMOTION_CONTAINER);
 
+  // if this has not been created add it to the DOM at the top of the body
   document.getElementsByTagName('body')[0].prepend(node);
   return node;
 };
-
 export var createEmotionCache = function createEmotionCache(overrides) {
   var _overrides$container, _overrides$stylisPlug;
-
   return createCache(_objectSpread(_objectSpread({
     key: EMOTION_KEY,
     speedy: process.env.NODE_ENV !== 'development',

package/dist/cache/stylisPlugins/focusVisible.js

@@ -5,6 +5,5 @@ export var focusVisible = function focusVisible(element) {
       return selector + prop.replace(/:focus-visible/g, '[data-focus-visible-added]');
     });
   }
-
   return undefined;
 };

package/dist/globals/Typography.js

@@ -3,17 +3,17 @@ import { webFonts } from '../remoteAssets/fonts';
 import { coreTheme as theme } from '../themes';
 import { jsx as _jsx } from "react/jsx-runtime";
 var fontSize = theme.fontSize,
-    spacing = theme.spacing,
-    fontWeight = theme.fontWeight,
-    lineHeight = theme.lineHeight;
+  spacing = theme.spacing,
+  fontWeight = theme.fontWeight,
+  lineHeight = theme.lineHeight;
 var typographyGlobals = /*#__PURE__*/css(webFonts.map(function (_ref) {
   var name = _ref.name,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? 'normal' : _ref$style,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
-      extensions = _ref.extensions,
-      filePath = _ref.filePath;
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? 'normal' : _ref$style,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
+    extensions = _ref.extensions,
+    filePath = _ref.filePath;
   return /*#__PURE__*/css("@font-face{font-display:swap;font-family:'", name, "';font-style:", style, ";font-weight:", weight, ";src:", extensions.map(function (ext) {
     return "url(\"".concat(filePath, ".").concat(ext, "\") format(\"").concat(ext, "\")");
   }).join(', '), ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVhIiwiZmlsZSI6Ii4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHdlYkZvbnRzIH0gZnJvbSAnLi4vcmVtb3RlQXNzZXRzL2ZvbnRzJztcbmltcG9ydCB7IGNvcmVUaGVtZSBhcyB0aGVtZSB9IGZyb20gJy4uL3RoZW1lcyc7XG5cbmNvbnN0IHsgZm9udFNpemUsIHNwYWNpbmcsIGZvbnRXZWlnaHQsIGxpbmVIZWlnaHQgfSA9IHRoZW1lO1xuXG5jb25zdCB0eXBvZ3JhcGh5R2xvYmFscyA9IGNzc2BcbiAgJHt3ZWJGb250cy5tYXAoXG4gICAgKHtcbiAgICAgIG5hbWUsXG4gICAgICBzdHlsZSA9ICdub3JtYWwnLFxuICAgICAgd2VpZ2h0ID0gJ25vcm1hbCcsXG4gICAgICBleHRlbnNpb25zLFxuICAgICAgZmlsZVBhdGgsXG4gICAgfSkgPT4gY3NzYFxuICAgICAgQGZvbnQtZmFjZSB7XG4gICAgICAgIGZvbnQtZGlzcGxheTogc3dhcDtcbiAgICAgICAgZm9udC1mYW1pbHk6ICcke25hbWV9JztcbiAgICAgICAgZm9udC1zdHlsZTogJHtzdHlsZX07XG4gICAgICAgIGZvbnQtd2VpZ2h0OiAke3dlaWdodH07XG4gICAgICAgIHNyYzogJHtleHRlbnNpb25zXG4gICAgICAgICAgLm1hcCgoZXh0KSA9PiBgdXJsKFwiJHtmaWxlUGF0aH0uJHtleHR9XCIpIGZvcm1hdChcIiR7ZXh0fVwiKWApXG4gICAgICAgICAgLmpvaW4oJywgJyl9O1xuICAgICAgfVxuICAgIGBcbiAgKX1cblxuICBoMSxcbiAgaDIsXG4gIGgzLFxuICBoNCxcbiAgaDUsXG4gIGg2IHtcbiAgICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmdbMTZdfTtcbiAgICBmb250LXdlaWdodDogJHtmb250V2VpZ2h0LnRpdGxlfTtcbiAgICBsaW5lLWhlaWdodDogJHtsaW5lSGVpZ2h0LnRpdGxlfTtcbiAgfVxuXG4gIGgxIHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbNjRdfTtcbiAgfVxuICBoMiB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzQ0XX07XG4gIH1cbiAgaDMge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVszNF19O1xuICB9XG4gIGg0IHtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVbMjZdfTtcbiAgfVxuICBoNSB7XG4gICAgZm9udC1zaXplOiAke2ZvbnRTaXplWzIyXX07XG4gIH1cbiAgaDYge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVsyMF19O1xuICB9XG5cbiAgc21hbGwge1xuICAgIGZvbnQtc2l6ZTogJHtmb250U2l6ZVsxNF19O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRXZWlnaHQuYmFzZX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUeXBvZ3JhcGh5ID0gKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3R5cG9ncmFwaHlHbG9iYWxzfSAvPjtcbiJdfQ== */"));

package/dist/globals/Variables.js

@@ -1,35 +1,25 @@
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import { css, Global } from '@emotion/react';
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
 var scopeVariables = function scopeVariables(vars) {
   var scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':root';
   return /*#__PURE__*/css(_defineProperty({}, scope, vars), ";label:scopeVariables;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1ZhcmlhYmxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0UiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbHMvVmFyaWFibGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBzY29wZVZhcmlhYmxlcyA9ICh2YXJzOiBDU1NPYmplY3QsIHNjb3BlID0gJzpyb290JykgPT5cbiAgY3NzKHsgW3Njb3BlXTogdmFycyB9KTtcblxuZXhwb3J0IGNvbnN0IFZhcmlhYmxlczogUmVhY3QuRkM8e1xuICB2YXJpYWJsZXM6IFJlY29yZDxzdHJpbmcsIENTU09iamVjdD47XG59PiA9ICh7IHZhcmlhYmxlcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtPYmplY3QuZW50cmllcyh2YXJpYWJsZXMpLm1hcCgoW2tleSwgdmFyc10pID0+IChcbiAgICAgICAgPEdsb2JhbCBrZXk9e2tleX0gc3R5bGVzPXtzY29wZVZhcmlhYmxlcyh2YXJzKX0gLz5cbiAgICAgICkpfVxuICAgIDwvPlxuICApO1xufTtcbiJdfQ== */"));
 };
-
 export var Variables = function Variables(_ref) {
   var variables = _ref.variables;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Object.entries(variables).map(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          vars = _ref3[1];
-
+        key = _ref3[0],
+        vars = _ref3[1];
       return /*#__PURE__*/_jsx(Global, {
         styles: scopeVariables(vars)
       }, key);

package/dist/styles/boxShadow.d.ts

@@ -22,5 +22,5 @@ declare const shadowsForDepth: {
     };
 };
 export declare const createShadow: (depth: ShadowDepth) => string;
-export declare const boxShadow: (depth?: ShadowDepth) => import("@emotion/react").SerializedStyles;
+export declare const boxShadow: (depth?: ShadowDepth) => import("@emotion/utils").SerializedStyles;
 export {};

package/dist/styles/boxShadow.js

@@ -1,15 +1,9 @@
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import { css } from '@emotion/react';
 var shadowsForDepth = {
   1: {
@@ -35,15 +29,14 @@ var shadowsForDepth = {
 };
 export var createShadow = function createShadow(depth) {
   var _shadowsForDepth$dept = shadowsForDepth[depth],
-      _shadowsForDepth$dept2 = _slicedToArray(_shadowsForDepth$dept.offsets, 4),
-      o1 = _shadowsForDepth$dept2[0],
-      o2 = _shadowsForDepth$dept2[1],
-      o3 = _shadowsForDepth$dept2[2],
-      o4 = _shadowsForDepth$dept2[3],
-      _shadowsForDepth$dept3 = _slicedToArray(_shadowsForDepth$dept.shades, 2),
-      s1 = _shadowsForDepth$dept3[0],
-      s2 = _shadowsForDepth$dept3[1];
-
+    _shadowsForDepth$dept2 = _slicedToArray(_shadowsForDepth$dept.offsets, 4),
+    o1 = _shadowsForDepth$dept2[0],
+    o2 = _shadowsForDepth$dept2[1],
+    o3 = _shadowsForDepth$dept2[2],
+    o4 = _shadowsForDepth$dept2[3],
+    _shadowsForDepth$dept3 = _slicedToArray(_shadowsForDepth$dept.shades, 2),
+    s1 = _shadowsForDepth$dept3[0],
+    s2 = _shadowsForDepth$dept3[1];
   return " 0 ".concat(o1, "px ").concat(o2, "px rgba(0, 0, 0, ").concat(s1, "),\n  0 ").concat(o3, "px ").concat(o4, "px rgba(0, 0, 0, ").concat(s2, ")");
 };
 export var boxShadow = function boxShadow() {

package/dist/styles/noSelect.d.ts

@@ -1 +1 @@
-export declare const noSelect: import("@emotion/react").SerializedStyles;
+export declare const noSelect: import("@emotion/utils").SerializedStyles;

package/dist/styles/noSelect.js

@@ -1,5 +1,4 @@
 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 var noSelect = process.env.NODE_ENV === "production" ? {
   name: "1ui1tha-noSelect",

package/dist/styles/screenReaderOnly.d.ts

@@ -1,2 +1,2 @@
-export declare const screenReaderOnly: import("@emotion/react").SerializedStyles;
-export declare const screenReaderOnlyFocusable: import("@emotion/react").SerializedStyles;
+export declare const screenReaderOnly: import("@emotion/utils").SerializedStyles;
+export declare const screenReaderOnlyFocusable: import("@emotion/utils").SerializedStyles;

package/dist/styles/screenReaderOnly.js

@@ -1,5 +1,4 @@
 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 var screenReaderOnly = process.env.NODE_ENV === "production" ? {
   name: "ut38oz-screenReaderOnly",

package/dist/themes/core.js

@@ -1,5 +1,6 @@
 import { createTheme } from '@codecademy/variance';
 import { corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
+
 /**
  *  @description  This is the core theme that all other Codecademy themes are extended from
  * and is the only theme that gamut components are typed to. This ensures that gamut components

package/dist/themes/platform.js

@@ -1,6 +1,7 @@
 import { createTheme } from '@codecademy/variance';
 import { platformPalette } from '../variables';
 import { coreTheme } from './core';
+
 /**
  * @description This is an extended theme for the learning environment with an expanded set of tokens
  * That are not needed for the rest of the application.

package/dist/utilities/themed.js

@@ -1,4 +1,5 @@
 import { get } from 'lodash';
+
 /**
  * Creates a function that will look up the a design token from the `theme` context of a
  * tyled component or a component that accepts theme as a prop.

package/dist/variables/colors.js

@@ -1,9 +1,6 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import { flattenScale } from '@codecademy/variance';
 import { rgba } from 'polished';
 /**
@@ -105,6 +102,7 @@ export var trueColors = {
   white: white
 };
 export var corePalette = _objectSpread(_objectSpread(_objectSpread({}, flattenScale(coreSwatches)), flattenScale(effects)), trueColors);
+
 /**
  * Platform Colors
  */

package/dist/variables/deprecated-colors.js

@@ -1,13 +1,11 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import { flattenScale } from '@codecademy/variance';
 import { corePalette } from './colors';
 var black = corePalette.black,
-    white = corePalette.white;
+  white = corePalette.white;
+
 /**
  * @deprecated
  * Using these variables directly is no longer supported.
@@ -19,6 +17,7 @@ export var interactiveColors = {
   dark: corePalette.hyper,
   light: corePalette.yellow
 };
+
 /**
  * @deprecated
  * Using these variables directly is no longer supported.
@@ -36,6 +35,7 @@ export var editorColors = {
   red: '#ea6c8b',
   yellow: '#ffe083'
 };
+
 /**
  * @deprecated
  * Using these variables directly is no longer supported.
@@ -60,6 +60,7 @@ export var platformColors = {
     '900': '#15141f'
   }
 };
+
 /**
  * @deprecated
  * Using these variables directly is no longer supported.
@@ -115,6 +116,7 @@ export var swatches = {
     '900': '#19191a'
   }
 };
+
 /**
  * @deprecated
  * Using these variables directly is no longer supported.
@@ -141,6 +143,7 @@ var trueColors = {
   black: black,
   white: white
 };
+
 /**
  * @deprecated
  * Using these variables directly is no longer supported.

package/dist/variables/elements.js

@@ -3,7 +3,6 @@ export var elements = {
     base: '4rem',
     md: '5rem'
   },
-
   /**
    * Semi-arbitrary z-index for global page headers.
    * @remarks PLEASE talk to web platform before adding new z-index constants!

package/dist/variables/index.js

@@ -3,6 +3,6 @@ export * from './responsive';
 export * from './spacing';
 export * from './typography';
 export * from './timing';
-export * from './elements'; // Deprecated variables
-
+export * from './elements';
+// Deprecated variables
 export * from './deprecated-colors';

package/dist/variables/responsive.js

@@ -5,11 +5,9 @@ export var breakpoints = {
   lg: '1200px',
   xl: '1440px'
 };
-
 var createMediaQuery = function createMediaQuery(size, direction) {
   return "@media only screen and (".concat(direction, "-width: ").concat(breakpoints[size], ")");
 };
-
 export var mediaQueries = {
   xs: createMediaQuery('xs', 'min'),
   sm: createMediaQuery('sm', 'min'),

package/dist/variance/config.js

@@ -1,9 +1,6 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import { transformSize } from '@codecademy/variance';
 export var color = {
   color: {
@@ -173,7 +170,6 @@ var selfAlignments = {
     property: 'gridArea'
   }
 };
-
 var alignments = _objectSpread({
   justifyContent: {
     property: 'justifyContent'
@@ -188,7 +184,6 @@ var alignments = _objectSpread({
     property: 'alignContent'
   }
 }, selfAlignments);
-
 var flexItems = {
   flexBasis: {
     property: 'flexBasis'

package/dist/variance/props.js

@@ -1,7 +1,7 @@
 import { variance } from '@codecademy/variance';
 import * as PROPERTIES from './config';
-/**  General Prop Groups  */
 
+/**  General Prop Groups  */
 export var typography = variance.create(PROPERTIES.typography);
 export var grid = variance.create(PROPERTIES.grid);
 export var flex = variance.create(PROPERTIES.flex);
@@ -12,12 +12,12 @@ export var color = variance.create(PROPERTIES.color);
 export var shadow = variance.create(PROPERTIES.shadows);
 export var space = variance.create(PROPERTIES.space);
 export var border = variance.create(PROPERTIES.border);
-/** Sub Groups */
 
+/** Sub Groups */
 export var padding = variance.create(PROPERTIES.padding);
 export var margin = variance.create(PROPERTIES.margin);
-/** CSS */
 
+/** CSS */
 export var css = variance.createCss(PROPERTIES.all);
 export var variant = variance.createVariant(PROPERTIES.all);
 export var states = variance.createStates(PROPERTIES.all);

package/dist/variance/utils.d.ts

@@ -24,6 +24,6 @@ export declare function createStyledOptions<El extends ElementOrProps = 'div', A
  *
  */
 export declare const styledOptions: typeof createStyledOptions & {
-    shouldForwardProp: (prop: PropertyKey) => prop is "dir" | "slot" | "style" | "title" | "id" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>;
+    shouldForwardProp: (prop: PropertyKey) => prop is "dir" | "slot" | "style" | "title" | "id" | "nonce" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>;
 };
 export {};

package/dist/variance/utils.js

@@ -1,23 +1,17 @@
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 import isPropValid from '@emotion/is-prop-valid';
 import { all as allProps } from './config';
 var allPropnames = ['mode', 'variant'].concat(_toConsumableArray(Object.keys(allProps)));
+
 /**
  * Emotion will not attempt to forward all system props - so this pre filters all possible exceptions to search agains
  * props like `color` and `width`.
  */
-
 var validPropnames = allPropnames.filter(isPropValid);
 export function createStyledOptions() {
   var additional = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -29,6 +23,7 @@ export function createStyledOptions() {
     }
   };
 }
+
 /**
  * @description
  * This object can be passed to the second argument of `styled('div', styledOptions)` or be called as a function to filter additional prop names
@@ -45,5 +40,4 @@ export function createStyledOptions() {
  * styled(Box)()
  *
  */
-
 export var styledOptions = Object.assign(createStyledOptions, createStyledOptions());

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "14.2.5",
+  "version": "14.2.6-alpha.9fa786.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -21,7 +21,7 @@
     "url": "git@github.com:Codecademy/gamut.git"
   },
   "dependencies": {
-    "@codecademy/variance": "0.20.5",
+    "@codecademy/variance": "0.20.6-alpha.9fa786.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -30,18 +30,17 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.5",
-    "react": ">=17.0.2",
-    "react-helmet": "^6.1.0",
+    "react": "^17.0.2 || ^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "stylis": "^4.0.7"
   },
   "devDependencies": {
     "@emotion/jest": "^11.3.0",
-    "@types/react-helmet": "^6.1.0",
     "component-test-setup": "^0.3.1"
   },
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fe70bd1ec980feef3ecc2bbe5dd4c0b7e8453da6"
+  "gitHead": "bcee3f6691770960bcc8020a319325458666d8c2"
 }