@codecademy/gamut-styles 17.1.1 → 17.1.2-alpha.01cdc8.0

package/dist/AssetProvider.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare const createFontLinks: () => JSX.Element[];
-export declare const AssetProvider: () => JSX.Element;
+export declare const createFontLinks: () => import("react/jsx-runtime").JSX.Element[];
+export declare const AssetProvider: () => import("react/jsx-runtime").JSX.Element;

package/dist/AssetProvider.js

@@ -1,22 +1,19 @@
 import { webFonts } from './remoteAssets/fonts';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export var createFontLinks = function createFontLinks() {
-  return webFonts.flatMap(function (_ref) {
-    var filePath = _ref.filePath,
-      extensions = _ref.extensions;
-    return extensions.map(function (ext) {
-      return /*#__PURE__*/_jsx("link", {
-        rel: "preload",
-        href: "".concat(filePath, ".").concat(ext),
-        crossOrigin: "anonymous",
-        as: "font",
-        type: "font/".concat(ext)
-      }, "".concat(filePath, "-").concat(ext));
-    });
-  });
-};
-export var AssetProvider = function AssetProvider() {
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const createFontLinks = () => webFonts.flatMap(_ref => {
+  let {
+    filePath,
+    extensions
+  } = _ref;
+  return extensions.map(ext => /*#__PURE__*/_jsx("link", {
+    rel: "preload",
+    href: `${filePath}.${ext}`,
+    crossOrigin: "anonymous",
+    as: "font",
+    type: `font/${ext}`
+  }, `${filePath}-${ext}`));
+});
+export const AssetProvider = () => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: createFontLinks()
   });

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, "style" | "p" | "slot" | "title" | "as" | "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" | "role" | "lang" | "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" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Background: import("react").ForwardRefExoticComponent<Omit<BackgroundProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Background.js

@@ -1,41 +1,25 @@
-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); }
-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) { key = _toPropertyKey(key); 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) 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) {
+const isColorAlias = (mode, color) => {
   return Object.keys(mode).includes(color);
 };
-export var Background = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var bg = _ref.bg,
-    rest = _objectWithoutProperties(_ref, ["bg"]);
-  var _useColorModes = useColorModes(),
-    _useColorModes2 = _slicedToArray(_useColorModes, 4),
-    active = _useColorModes2[0],
-    activeColors = _useColorModes2[1],
-    modes = _useColorModes2[2],
-    getColorValue = _useColorModes2[3];
+export const Background = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    bg,
+    ...rest
+  } = _ref;
+  const [active, activeColors, modes, getColorValue] = useColorModes();
+
   /** If a color alias was used then look up the true color key from the active mode */
-  var trueColor = useMemo(function () {
+  const trueColor = useMemo(() => {
     if (isColorAlias(activeColors, bg)) {
       return activeColors[bg];
     }
     return bg;
   }, [bg, activeColors]);
-  var getTextContrast = useCallback(function (foreground) {
+  const getTextContrast = useCallback(foreground => {
     return getContrast(getColorValue(foreground), getColorValue(trueColor));
   }, [trueColor, getColorValue]);
 
@@ -49,10 +33,12 @@ export var Background = /*#__PURE__*/forwardRef(function (_ref, ref) {
    * This does not guarantee a level of A/AA/AA compliance.
    */
 
-  var accessibleMode = useMemo(function () {
-    var activeMode = modes[active],
-      otherModes = _objectWithoutProperties(modes, [active].map(_toPropertyKey));
-    var possibleModes = Object.entries(otherModes);
+  const accessibleMode = useMemo(() => {
+    const {
+      [active]: activeMode,
+      ...otherModes
+    } = modes;
+    const possibleModes = Object.entries(otherModes);
 
     /**
      * Reduce all remaining modes to the mode key with the highest contrast
@@ -62,25 +48,22 @@ export var Background = /*#__PURE__*/forwardRef(function (_ref, ref) {
      * it will likely fail to return a mode outside of the lightest and
      * darkest versions.
      */
-    var _possibleModes$reduce = possibleModes.reduce(function (_ref2, _ref3) {
-        var _ref4 = _slicedToArray(_ref2, 2),
-          prevMode = _ref4[0],
-          prevContrast = _ref4[1];
-        var _ref5 = _slicedToArray(_ref3, 2),
-          mode = _ref5[0],
-          text = _ref5[1].text;
-        var contrast = getTextContrast(text);
+    const [highestContrastMode] = possibleModes.reduce((_ref2, _ref3) => {
+      let [prevMode, prevContrast] = _ref2;
+      let [mode, {
+        text
+      }] = _ref3;
+      const 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];
+      // Keep the higher contrast mode.
+      return contrast > prevContrast ? [mode, contrast] : [prevMode, prevContrast];
+    }, [active, getTextContrast(activeMode.text)]);
     return highestContrastMode;
   }, [modes, active, getTextContrast]);
-  return /*#__PURE__*/_jsx(ColorMode, _objectSpread(_objectSpread({}, rest), {}, {
+  return /*#__PURE__*/_jsx(ColorMode, {
+    ...rest,
     mode: accessibleMode,
     bg: bg,
     ref: ref
-  }));
+  });
 });

package/dist/ColorMode.d.ts

@@ -489,7 +489,7 @@ export declare function useCurrentMode(mode?: ColorModes): "light" | "dark";
 export declare function usePrefersDarkMode(): boolean;
 export declare const VariableProvider: import("@emotion/styled").StyledComponent<{
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     p?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "padding";
@@ -893,10 +893,10 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
 } & {
     variables?: CSSObject | undefined;
     alwaysSetVariables?: boolean | undefined;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "slot" | "title" | "id" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "role" | "lang" | "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" | "dir" | "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<{
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "property" | "content" | "translate" | "hidden" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "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<Omit<Omit<{
     theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     p?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "padding";
@@ -1300,6 +1300,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>, "style" | "slot" | "title" | "id" | "property" | "translate" | "hidden" | "children" | "className" | "prefix" | "role" | "lang" | "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" | "dir" | "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, "style" | "p" | "slot" | "title" | "as" | "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" | "role" | "lang" | "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" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "alwaysSetVariables" | keyof ColorModeProps> & import("react").RefAttributes<HTMLDivElement>>;
+} & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "property" | "content" | "translate" | "hidden" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "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, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ColorMode.js

@@ -1,19 +1,5 @@
-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); }
 import _styled from "@emotion/styled/base";
-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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) 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) { key = _toPropertyKey(key); 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 _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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { serializeTokens, variance } from '@codecademy/variance';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import mapValues from 'lodash/mapValues';
@@ -22,26 +8,31 @@ import { createContext, forwardRef, useContext, useEffect, useMemo, useState } f
 import { background, border, color, css, flex, grid, layout, positioning, space } from './variance/props';
 import { styledOptions } from './variance/utils';
 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;
-  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) {
-    return colors[color];
-  }), 'color', theme).variables;
+export const providerProps = variance.compose(layout, color, grid, flex, positioning, space, border, background);
+export const modeColorProps = _ref => {
+  let {
+    theme,
+    mode
+  } = _ref;
+  if (!theme || !mode || mode === theme?.mode) return {};
+  const {
+    colors
+  } = theme;
+  return serializeTokens(mapValues(theme?.modes[mode], color => colors[color]), 'color', theme).variables;
 };
-var BackgroundCurrentContext = /*#__PURE__*/createContext({
+const BackgroundCurrentContext = /*#__PURE__*/createContext({
   'background-current': undefined
 });
 export function useColorModes() {
-  var bgCurrent = useContext(BackgroundCurrentContext);
-  var _ref2 = useTheme() || {},
-    mode = _ref2.mode,
-    modes = _ref2.modes,
-    getColorValue = _ref2._getColorValue;
-  var modesCopy = _objectSpread({}, modes);
+  const bgCurrent = useContext(BackgroundCurrentContext);
+  const {
+    mode,
+    modes,
+    _getColorValue: getColorValue
+  } = useTheme() || {};
+  const modesCopy = {
+    ...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.
@@ -49,98 +40,100 @@ export function useColorModes() {
 
     modesCopy[mode]['background-current'] = bgCurrent['background-current'];
   }
-  return [mode, modesCopy === null || modesCopy === void 0 ? void 0 : modesCopy[mode], modes, getColorValue];
+  return [mode, modesCopy?.[mode], modes, getColorValue];
 }
 export function useCurrentMode(mode) {
-  var _useColorModes = useColorModes(),
-    _useColorModes2 = _slicedToArray(_useColorModes, 1),
-    activeMode = _useColorModes2[0];
-  return mode !== null && mode !== void 0 ? mode : activeMode;
+  const [activeMode] = useColorModes();
+  return mode ?? activeMode;
 }
 export function usePrefersDarkMode() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    prefersDarkMode = _useState2[0],
-    setPrefersDarkMode = _useState2[1];
-  useEffect(function () {
+  const [prefersDarkMode, setPrefersDarkMode] = useState(false);
+  useEffect(() => {
     function onChange(event) {
       setPrefersDarkMode(event.matches);
     }
     if (window && 'matchMedia' in window) {
-      var mq = window.matchMedia('(prefers-color-scheme: dark)');
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
       if (mq && 'addEventListener' in mq) {
         setPrefersDarkMode(mq.matches);
         mq.addEventListener('change', onChange);
-        return function () {
-          return mq.removeEventListener('change', onChange);
-        };
+        return () => mq.removeEventListener('change', onChange);
       }
     }
   }, []);
   return prefersDarkMode;
 }
-export var VariableProvider = /*#__PURE__*/_styled('div', _extends({}, {
+export const VariableProvider = /*#__PURE__*/_styled('div', _extends({}, {
   target: "e1skjn880",
   label: "VariableProvider"
-}, styledOptions(['variables', 'alwaysSetVariables'])))(function (_ref3) {
-  var variables = _ref3.variables;
+}, styledOptions(['variables', 'alwaysSetVariables'])))(_ref2 => {
+  let {
+    variables
+  } = _ref2;
   return variables;
 }, css({
   textColor: 'text'
 }), providerProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Db2xvck1vZGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFJZ0MiLCJmaWxlIjoiLi4vc3JjL0NvbG9yTW9kZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzZXJpYWxpemVUb2tlbnMsXG4gIFN0eWxlUHJvcHMsXG4gIFRoZW1lUHJvcHMsXG4gIHZhcmlhbmNlLFxufSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBDU1NPYmplY3QsIFRoZW1lLCBUaGVtZVByb3ZpZGVyLCB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBtYXBWYWx1ZXMgZnJvbSAnbG9kYXNoL21hcFZhbHVlcyc7XG5pbXBvcnQgcGljayBmcm9tICdsb2Rhc2gvcGljayc7XG5pbXBvcnQge1xuICBDb21wb25lbnRQcm9wcyxcbiAgY3JlYXRlQ29udGV4dCxcbiAgZm9yd2FyZFJlZixcbiAgdXNlQ29udGV4dCxcbiAgdXNlRWZmZWN0LFxuICB1c2VNZW1vLFxuICB1c2VTdGF0ZSxcbn0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyB0aGVtZSBhcyBHYW11dFRoZW1lIH0gZnJvbSAnLic7XG5pbXBvcnQge1xuICBiYWNrZ3JvdW5kLFxuICBib3JkZXIsXG4gIGNvbG9yLFxuICBjc3MsXG4gIGZsZXgsXG4gIGdyaWQsXG4gIGxheW91dCxcbiAgcG9zaXRpb25pbmcsXG4gIHNwYWNlLFxufSBmcm9tICcuL3ZhcmlhbmNlL3Byb3BzJztcbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICcuL3ZhcmlhbmNlL3V0aWxzJztcblxuZXhwb3J0IHR5cGUgQ29sb3JzID0ga2V5b2YgVGhlbWVbJ2NvbG9ycyddO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlQ29uZmlnID0gVGhlbWVbJ21vZGVzJ107XG5leHBvcnQgdHlwZSBDb2xvck1vZGVzID0ga2V5b2YgQ29sb3JNb2RlQ29uZmlnO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlU2hhcGUgPSBDb2xvck1vZGVDb25maWdbQ29sb3JNb2Rlc107XG5leHBvcnQgdHlwZSBDb2xvckFsaWFzID0ga2V5b2YgQ29sb3JNb2RlU2hhcGU7XG5cbmV4cG9ydCB0eXBlIENvbG9yTW9kZVByb3BzID0ge1xuICBtb2RlOiBDb2xvck1vZGVzIHwgJ3N5c3RlbSc7XG4gIGJnPzogQ29sb3JzO1xufTtcblxuZXhwb3J0IGNvbnN0IHByb3ZpZGVyUHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBsYXlvdXQsXG4gIGNvbG9yLFxuICBncmlkLFxuICBmbGV4LFxuICBwb3NpdGlvbmluZyxcbiAgc3BhY2UsXG4gIGJvcmRlcixcbiAgYmFja2dyb3VuZFxuKTtcblxuZXhwb3J0IGNvbnN0IG1vZGVDb2xvclByb3BzID0gKHtcbiAgdGhlbWUsXG4gIG1vZGUsXG59OiBUaGVtZVByb3BzPHsgbW9kZT86IENvbG9yTW9kZXMgfT4pID0+IHtcbiAgaWYgKCF0aGVtZSB8fCAhbW9kZSB8fCBtb2RlID09PSB0aGVtZT8ubW9kZSkgcmV0dXJuIHt9O1xuICBjb25zdCB7IGNvbG9ycyB9ID0gdGhlbWU7XG4gIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgbWFwVmFsdWVzKHRoZW1lPy5tb2Rlc1ttb2RlXSwgKGNvbG9yKSA9PiBjb2xvcnNbY29sb3JdKSxcbiAgICAnY29sb3InLFxuICAgIHRoZW1lXG4gICkudmFyaWFibGVzO1xufTtcblxuaW50ZXJmYWNlIEJhY2tncm91bmRDdXJyZW50Q29udGV4dEludGVyZmFjZSB7XG4gICdiYWNrZ3JvdW5kLWN1cnJlbnQnPzoga2V5b2YgdHlwZW9mIEdhbXV0VGhlbWUuY29sb3JzO1xufVxuXG5jb25zdCBCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQgPSBjcmVhdGVDb250ZXh0PEJhY2tncm91bmRDdXJyZW50Q29udGV4dEludGVyZmFjZT4oXG4gIHtcbiAgICAnYmFja2dyb3VuZC1jdXJyZW50JzogdW5kZWZpbmVkLFxuICB9XG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ29sb3JNb2RlcygpOiBbXG4gIENvbG9yTW9kZXMsXG4gIENvbG9yTW9kZVNoYXBlLFxuICBDb2xvck1vZGVDb25maWcsXG4gIChjb2xvcjogQ29sb3JzKSA9PiBzdHJpbmdcbl0ge1xuICBjb25zdCBiZ0N1cnJlbnQgPSB1c2VDb250ZXh0KEJhY2tncm91bmRDdXJyZW50Q29udGV4dCk7XG4gIGNvbnN0IHsgbW9kZSwgbW9kZXMsIF9nZXRDb2xvclZhbHVlOiBnZXRDb2xvclZhbHVlIH0gPSB1c2VUaGVtZSgpIHx8IHt9O1xuICBjb25zdCBtb2Rlc0NvcHkgPSB7IC4uLm1vZGVzIH07XG5cbiAgaWYgKFxuICAgIGJnQ3VycmVudFsnYmFja2dyb3VuZC1jdXJyZW50J10gJiZcbiAgICBtb2Rlc0NvcHlbbW9kZV1bJ2JhY2tncm91bmQtY3VycmVudCddICE9PSBiZ0N1cnJlbnRbJ2JhY2tncm91bmQtY3VycmVudCddXG4gICkge1xuICAgIC8qIHNldHMgdGhlIGNvbG9yIHRvIHRoZSBjb3B5IG9mIG91ciBtb2RlcyBvYmplY3QsIGFuZCBjYXN0cyB0aGUgdHlwZSBhcyB0aGUgZGVmYXVsdCBjb2xvciB2YWx1ZXMgZm9yIGJhY2tncm91bmQtY3VycmVudC5cbiAgICB3ZSBjb3VsZCBwb3RlbnRpYWxseSBhbHRlciB0aGUgTWVyZ2UgdHlwZSB1dGlsaXR5IGZ1bmN0aW9uIGZyb20gY3JlYXRlVGhlbWUsIGJ1dCBzaW5jZSAnYmFja2dyb3VuZC1jdXJyZW50JyBpcyB0aGUgb25seSBleGNlcHRpb24gdG8gdGhlIHR5cGUtbWVyZ2luZyBydWxlICBhbmQgdGhpcyBpcyB0aGUgb25seSBwbGFjZSB3ZSBvdmVycmlkZSwgdGhpcyBzZWVtcyB0byBiZSBhIG1vcmUgc3RyYWlnaHRmb3J3YXJkICsgbG93ZXItcmlzayBzb2x1dGlvbi5cbiAgICAqL1xuXG4gICAgbW9kZXNDb3B5W21vZGVdWydiYWNrZ3JvdW5kLWN1cnJlbnQnXSA9IGJnQ3VycmVudFsnYmFja2dyb3VuZC1jdXJyZW50J10gYXNcbiAgICAgIHwgJ3doaXRlJ1xuICAgICAgfCAnbmF2eS04MDAnO1xuICB9XG5cbiAgcmV0dXJuIFttb2RlLCBtb2Rlc0NvcHk/Llttb2RlXSwgbW9kZXMsIGdldENvbG9yVmFsdWVdO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ3VycmVudE1vZGUobW9kZT86IENvbG9yTW9kZXMpIHtcbiAgY29uc3QgW2FjdGl2ZU1vZGVdID0gdXNlQ29sb3JNb2RlcygpO1xuICByZXR1cm4gbW9kZSA/PyBhY3RpdmVNb2RlO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlUHJlZmVyc0RhcmtNb2RlKCkge1xuICBjb25zdCBbcHJlZmVyc0RhcmtNb2RlLCBzZXRQcmVmZXJzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZnVuY3Rpb24gb25DaGFuZ2UoZXZlbnQ6IE1lZGlhUXVlcnlMaXN0RXZlbnQpIHtcbiAgICAgIHNldFByZWZlcnNEYXJrTW9kZShldmVudC5tYXRjaGVzKTtcbiAgICB9XG5cbiAgICBpZiAod2luZG93ICYmICdtYXRjaE1lZGlhJyBpbiB3aW5kb3cpIHtcbiAgICAgIGNvbnN0IG1xID0gd2luZG93Lm1hdGNoTWVkaWEoJyhwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyayknKTtcblxuICAgICAgaWYgKG1xICYmICdhZGRFdmVudExpc3RlbmVyJyBpbiBtcSkge1xuICAgICAgICBzZXRQcmVmZXJzRGFya01vZGUobXEubWF0Y2hlcyk7XG4gICAgICAgIG1xLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIG9uQ2hhbmdlKTtcblxuICAgICAgICByZXR1cm4gKCkgPT4gbXEucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgb25DaGFuZ2UpO1xuICAgICAgfVxuICAgIH1cbiAgfSwgW10pO1xuXG4gIHJldHVybiBwcmVmZXJzRGFya01vZGU7XG59XG5cbmV4cG9ydCBjb25zdCBWYXJpYWJsZVByb3ZpZGVyID0gc3R5bGVkKFxuICAnZGl2JyxcbiAgc3R5bGVkT3B0aW9ucyhbJ3ZhcmlhYmxlcycsICdhbHdheXNTZXRWYXJpYWJsZXMnXSlcbik8XG4gIFN0eWxlUHJvcHM8dHlwZW9mIHByb3ZpZGVyUHJvcHM+ICYge1xuICAgIHZhcmlhYmxlcz86IENTU09iamVjdDtcbiAgICBhbHdheXNTZXRWYXJpYWJsZXM/OiBib29sZWFuO1xuICB9XG4+KCh7IHZhcmlhYmxlcyB9KSA9PiB2YXJpYWJsZXMsIGNzcyh7IHRleHRDb2xvcjogJ3RleHQnIH0pLCBwcm92aWRlclByb3BzKTtcblxuZXhwb3J0IGNvbnN0IENvbG9yTW9kZSA9IGZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBPbWl0PENvbXBvbmVudFByb3BzPHR5cGVvZiBWYXJpYWJsZVByb3ZpZGVyPiwgJ2JnJz4gJiBDb2xvck1vZGVQcm9wc1xuPigoeyBtb2RlOiBwcmVmZXJlbmNlLCBhbHdheXNTZXRWYXJpYWJsZXMsIGJnLCAuLi5yZXN0IH0sIHJlZikgPT4ge1xuICAvLyBjaGVja3MgaWYgdGhlIHVzZXIgaGFzIHNldCAnc3lzdGVtJyBhcyB0aGVpciBjb2xvciBtb2RlIHByZWZlcmVuY2VcbiAgLy8gdGhlbiBzZXRzIHRoZSBjb2xvciBtb2RlXG4gIGNvbnN0IHByZWZlcnNEYXJrTW9kZSA9IHVzZVByZWZlcnNEYXJrTW9kZSgpO1xuICBjb25zdCBtb2RlID1cbiAgICBwcmVmZXJlbmNlID09PSAnc3lzdGVtJyA/IChwcmVmZXJzRGFya01vZGUgPyAnZGFyaycgOiAnbGlnaHQnKSA6IHByZWZlcmVuY2U7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7IG1vZGVzLCBtb2RlOiBhY3RpdmUsIGNvbG9ycyB9ID0gdGhlbWU7XG4gIGNvbnN0IGNvbnRleHRCZyA9IGJnID8gJ2JhY2tncm91bmQtY3VycmVudCcgOiB1bmRlZmluZWQ7XG4gIC8vIFRoaXMgbWFrZXMgc3VyZSB0aGUgYmFja2dyb3VuZC1jdXJyZW50IGNvbnRleHQgaXMgYWx3YXlzIHNldCB0byB0aGUgY29ycmVjdCBjb2xvciArIG5vdCB0aGUgc2VtYW50aWMgY29sb3IgbmFtZS5cbiAgY29uc3QgY3VycmVudFBhcmVudEJnID0gdXNlQ29udGV4dChCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQpO1xuXG4gIGNvbnN0IGJnQ3VycmVudCA9XG4gICAgYmcgPT09ICdiYWNrZ3JvdW5kLWN1cnJlbnQnXG4gICAgICA/IGN1cnJlbnRQYXJlbnRCZ1snYmFja2dyb3VuZC1jdXJyZW50J11cbiAgICAgICAgPyBjdXJyZW50UGFyZW50QmdbJ2JhY2tncm91bmQtY3VycmVudCddXG4gICAgICAgIDogbW9kZXNbYWN0aXZlXVsnYmFja2dyb3VuZC1jdXJyZW50J11cbiAgICAgIDogYmc7XG5cbiAgLyoqIFNlcmlhbGl6ZSBjb2xvciB2YXJpYWJsZXMgZm9yIHRoZSBjdXJyZW50IG1vZGVcbiAgICogMS4gSWYgYWxsIHZhcmlhYmxlcyBhcmUgcmVxdWlyZWQgYWRkIGFsbCBtb2RlIHZhcmlhYmxlcyB0byB0aGUgY3VycmVudCBjb250ZXh0XG4gICAqIDIuIElmIHRoZSB1c2VyIGhhcyBzcGVjaWZpZWQgYSBiYWNrZ3JvdW5kIGNvbG9yIC0gc2V0IHRoYXQgY29sb3IgdG8gdGhlIGN1cnJlbnQtYmdcbiAgICogMy4gSWYgbm90XG4gICAqL1xuICBjb25zdCB7IHZhcmlhYmxlcyB9ID0gdXNlTWVtbygoKSA9PiB7XG4gICAgcmV0dXJuIHNlcmlhbGl6ZVRva2VucyhcbiAgICAgIG1hcFZhbHVlcyhtb2Rlc1ttb2RlXSwgKGNvbG9yLCBrZXkpID0+IHtcbiAgICAgICAgaWYgKGtleSA9PT0gJ2JhY2tncm91bmQtY3VycmVudCcgJiYgdHlwZW9mIGJnICE9PSAndW5kZWZpbmVkJykge1xuICAgICAgICAgIHJldHVybiBjb2xvcnNbYmddO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjb2xvcnNbY29sb3JdO1xuICAgICAgfSksXG4gICAgICAnY29sb3InLFxuICAgICAgdGhlbWVcbiAgICApO1xuICB9LCBbY29sb3JzLCBtb2RlLCBtb2RlcywgdGhlbWUsIGJnXSk7XG5cbiAgaWYgKGFjdGl2ZSA9PT0gbW9kZSkge1xuICAgIGNvbnN0IHZhcnMgPSBhbHdheXNTZXRWYXJpYWJsZXNcbiAgICAgID8gdmFyaWFibGVzXG4gICAgICA6IHBpY2sodmFyaWFibGVzLCBbJy0tY29sb3ItYmFja2dyb3VuZC1jdXJyZW50J10pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQuUHJvdmlkZXJcbiAgICAgICAgdmFsdWU9e3sgJ2JhY2tncm91bmQtY3VycmVudCc6IGJnQ3VycmVudCB9fVxuICAgICAgPlxuICAgICAgICA8VmFyaWFibGVQcm92aWRlciB7Li4ucmVzdH0gdmFyaWFibGVzPXt2YXJzfSBiZz17Y29udGV4dEJnfSByZWY9e3JlZn0gLz5cbiAgICAgIDwvQmFja2dyb3VuZEN1cnJlbnRDb250ZXh0LlByb3ZpZGVyPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxUaGVtZVByb3ZpZGVyIHRoZW1lPXt7IG1vZGUgfX0+XG4gICAgICA8VmFyaWFibGVQcm92aWRlclxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgdmFyaWFibGVzPXt2YXJpYWJsZXN9XG4gICAgICAgIGJnPXtjb250ZXh0Qmd9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgLz5cbiAgICA8L1RoZW1lUHJvdmlkZXI+XG4gICk7XG59KTtcbiJdfQ== */");
-export var ColorMode = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var preference = _ref4.mode,
-    alwaysSetVariables = _ref4.alwaysSetVariables,
-    bg = _ref4.bg,
-    rest = _objectWithoutProperties(_ref4, ["mode", "alwaysSetVariables", "bg"]);
+export const ColorMode = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    mode: preference,
+    alwaysSetVariables,
+    bg,
+    ...rest
+  } = _ref3;
   // 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;
+  const prefersDarkMode = usePrefersDarkMode();
+  const mode = preference === 'system' ? prefersDarkMode ? 'dark' : 'light' : preference;
+  const theme = useTheme();
+  const {
+    modes,
+    mode: active,
+    colors
+  } = theme;
+  const 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;
+  const currentParentBg = useContext(BackgroundCurrentContext);
+  const 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;
+  const {
+    variables
+  } = useMemo(() => {
+    return serializeTokens(mapValues(modes[mode], (color, key) => {
+      if (key === 'background-current' && typeof bg !== 'undefined') {
+        return colors[bg];
+      }
+      return colors[color];
+    }), 'color', theme);
+  }, [colors, mode, modes, theme, bg]);
   if (active === mode) {
-    var vars = alwaysSetVariables ? variables : pick(variables, ['--color-background-current']);
+    const vars = alwaysSetVariables ? variables : pick(variables, ['--color-background-current']);
     return /*#__PURE__*/_jsx(BackgroundCurrentContext.Provider, {
       value: {
         'background-current': bgCurrent
       },
-      children: /*#__PURE__*/_jsx(VariableProvider, _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/_jsx(VariableProvider, {
+        ...rest,
         variables: vars,
         bg: contextBg,
         ref: ref
-      }))
+      })
     });
   }
   return /*#__PURE__*/_jsx(ThemeProvider, {
     theme: {
-      mode: mode
+      mode
     },
-    children: /*#__PURE__*/_jsx(VariableProvider, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/_jsx(VariableProvider, {
+      ...rest,
       variables: variables,
       bg: contextBg,
       ref: ref
-    }))
+    })
   });
 });

package/dist/GamutProvider.js

@@ -5,37 +5,35 @@ import { createEmotionCache } from './cache';
 import { Reboot, Typography } from './globals';
 import { Variables } from './globals/Variables';
 import { coreTheme } from './themes/core';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var GamutContext = /*#__PURE__*/React.createContext({
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const GamutContext = /*#__PURE__*/React.createContext({
   hasGlobals: false,
   hasCache: false
 });
 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;
-  var _useContext = useContext(GamutContext),
-    hasGlobals = _useContext.hasGlobals,
-    hasCache = _useContext.hasCache;
-  var shouldCreateCache = useCache && !hasCache;
-  var shouldInsertGlobals = useGlobals && !hasGlobals;
+export const GamutProvider = _ref => {
+  let {
+    children,
+    cache,
+    theme = coreTheme,
+    variables,
+    useGlobals = true,
+    useCache = true
+  } = _ref;
+  const {
+    hasGlobals,
+    hasCache
+  } = useContext(GamutContext);
+  const shouldCreateCache = useCache && !hasCache;
+  const 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 = {
+  const activeCache = useRef(shouldCreateCache && (cache ?? createEmotionCache()));
+  const contextValue = {
     hasGlobals: shouldInsertGlobals,
     hasCache: shouldCreateCache
   };
-  var globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
+  const globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {}), /*#__PURE__*/_jsx(Reboot, {}), /*#__PURE__*/_jsx(Variables, {
       variables: theme._variables
     }), variables && /*#__PURE__*/_jsx(Variables, {