@codecademy/gamut-styles 16.1.2 → 16.1.3-alpha.0f0cb9.0

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" | "dir" | "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"> & import("react").RefAttributes<HTMLDivElement>>;
+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>>;

package/dist/Background.js

@@ -8,7 +8,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 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 _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; }
@@ -19,7 +19,7 @@ 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) {
+export var Background = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var bg = _ref.bg,
     rest = _objectWithoutProperties(_ref, ["bg"]);
   var _useColorModes = useColorModes(),

package/dist/ColorMode.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { ThemeProps } from '@codecademy/variance';
 import { CSSObject, Theme } from '@emotion/react';
-export declare type Colors = keyof Theme['colors'];
-export declare type ColorModeConfig = Theme['modes'];
-export declare type ColorModes = keyof ColorModeConfig;
-export declare type ColorModeShape = ColorModeConfig[ColorModes];
-export declare type ColorAlias = keyof ColorModeShape;
-export declare type ColorModeProps = {
+export type Colors = keyof Theme['colors'];
+export type ColorModeConfig = Theme['modes'];
+export type ColorModes = keyof ColorModeConfig;
+export type ColorModeShape = ColorModeConfig[ColorModes];
+export type ColorAlias = keyof ColorModeShape;
+export type ColorModeProps = {
     mode: ColorModes | 'system';
     bg?: Colors;
 };
@@ -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>, "style" | "slot" | "title" | "dir" | "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>, "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<{
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -1273,6 +1273,6 @@ 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" | "dir" | "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>, "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" | "dir" | "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" | "alwaysSetVariables" | keyof ColorModeProps> & import("react").RefAttributes<HTMLDivElement>>;
+}, "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>>;

package/dist/ColorMode.js

@@ -6,7 +6,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 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 _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; }
@@ -87,7 +87,7 @@ export var VariableProvider = /*#__PURE__*/_styled('div', _extends({}, {
 }, css({
   textColor: 'text'
 }), providerProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Db2xvck1vZGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9JZ0MiLCJmaWxlIjoiLi4vc3JjL0NvbG9yTW9kZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzZXJpYWxpemVUb2tlbnMsXG4gIFN0eWxlUHJvcHMsXG4gIFRoZW1lUHJvcHMsXG4gIHZhcmlhbmNlLFxufSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBDU1NPYmplY3QsIFRoZW1lLCBUaGVtZVByb3ZpZGVyLCB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IG1hcFZhbHVlcywgcGljayB9IGZyb20gJ2xvZGFzaCc7XG5pbXBvcnQge1xuICBDb21wb25lbnRQcm9wcyxcbiAgY3JlYXRlQ29udGV4dCxcbiAgZm9yd2FyZFJlZixcbiAgdXNlQ29udGV4dCxcbiAgdXNlRWZmZWN0LFxuICB1c2VNZW1vLFxuICB1c2VTdGF0ZSxcbn0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyB0aGVtZSBhcyBHYW11dFRoZW1lIH0gZnJvbSAnLic7XG5pbXBvcnQge1xuICBiYWNrZ3JvdW5kLFxuICBib3JkZXIsXG4gIGNvbG9yLFxuICBjc3MsXG4gIGZsZXgsXG4gIGdyaWQsXG4gIGxheW91dCxcbiAgcG9zaXRpb25pbmcsXG4gIHNwYWNlLFxufSBmcm9tICcuL3ZhcmlhbmNlL3Byb3BzJztcbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICcuL3ZhcmlhbmNlL3V0aWxzJztcblxuZXhwb3J0IHR5cGUgQ29sb3JzID0ga2V5b2YgVGhlbWVbJ2NvbG9ycyddO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlQ29uZmlnID0gVGhlbWVbJ21vZGVzJ107XG5leHBvcnQgdHlwZSBDb2xvck1vZGVzID0ga2V5b2YgQ29sb3JNb2RlQ29uZmlnO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlU2hhcGUgPSBDb2xvck1vZGVDb25maWdbQ29sb3JNb2Rlc107XG5leHBvcnQgdHlwZSBDb2xvckFsaWFzID0ga2V5b2YgQ29sb3JNb2RlU2hhcGU7XG5cbmV4cG9ydCB0eXBlIENvbG9yTW9kZVByb3BzID0ge1xuICBtb2RlOiBDb2xvck1vZGVzIHwgJ3N5c3RlbSc7XG4gIGJnPzogQ29sb3JzO1xufTtcblxuZXhwb3J0IGNvbnN0IHByb3ZpZGVyUHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBsYXlvdXQsXG4gIGNvbG9yLFxuICBncmlkLFxuICBmbGV4LFxuICBwb3NpdGlvbmluZyxcbiAgc3BhY2UsXG4gIGJvcmRlcixcbiAgYmFja2dyb3VuZFxuKTtcblxuZXhwb3J0IGNvbnN0IG1vZGVDb2xvclByb3BzID0gKHtcbiAgdGhlbWUsXG4gIG1vZGUsXG59OiBUaGVtZVByb3BzPHsgbW9kZT86IENvbG9yTW9kZXMgfT4pID0+IHtcbiAgaWYgKCF0aGVtZSB8fCAhbW9kZSB8fCBtb2RlID09PSB0aGVtZT8ubW9kZSkgcmV0dXJuIHt9O1xuICBjb25zdCB7IGNvbG9ycyB9ID0gdGhlbWU7XG4gIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgbWFwVmFsdWVzKHRoZW1lPy5tb2Rlc1ttb2RlXSwgKGNvbG9yKSA9PiBjb2xvcnNbY29sb3JdKSxcbiAgICAnY29sb3InLFxuICAgIHRoZW1lXG4gICkudmFyaWFibGVzO1xufTtcblxuaW50ZXJmYWNlIEJhY2tncm91bmRDdXJyZW50Q29udGV4dEludGVyZmFjZSB7XG4gICdiYWNrZ3JvdW5kLWN1cnJlbnQnPzoga2V5b2YgdHlwZW9mIEdhbXV0VGhlbWUuY29sb3JzO1xufVxuXG5jb25zdCBCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQgPSBjcmVhdGVDb250ZXh0PEJhY2tncm91bmRDdXJyZW50Q29udGV4dEludGVyZmFjZT4oXG4gIHtcbiAgICAnYmFja2dyb3VuZC1jdXJyZW50JzogdW5kZWZpbmVkLFxuICB9XG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ29sb3JNb2RlcygpOiBbXG4gIENvbG9yTW9kZXMsXG4gIENvbG9yTW9kZVNoYXBlLFxuICBDb2xvck1vZGVDb25maWcsXG4gIChjb2xvcjogQ29sb3JzKSA9PiBzdHJpbmdcbl0ge1xuICBjb25zdCBiZ0N1cnJlbnQgPSB1c2VDb250ZXh0KEJhY2tncm91bmRDdXJyZW50Q29udGV4dCk7XG4gIGNvbnN0IHsgbW9kZSwgbW9kZXMsIF9nZXRDb2xvclZhbHVlOiBnZXRDb2xvclZhbHVlIH0gPSB1c2VUaGVtZSgpIHx8IHt9O1xuICBjb25zdCBtb2Rlc0NvcHkgPSB7IC4uLm1vZGVzIH07XG5cbiAgaWYgKFxuICAgIGJnQ3VycmVudFsnYmFja2dyb3VuZC1jdXJyZW50J10gJiZcbiAgICBtb2Rlc0NvcHlbbW9kZV1bJ2JhY2tncm91bmQtY3VycmVudCddICE9PSBiZ0N1cnJlbnRbJ2JhY2tncm91bmQtY3VycmVudCddXG4gICkge1xuICAgIC8qIHNldHMgdGhlIGNvbG9yIHRvIHRoZSBjb3B5IG9mIG91ciBtb2RlcyBvYmplY3QsIGFuZCBjYXN0cyB0aGUgdHlwZSBhcyB0aGUgZGVmYXVsdCBjb2xvciB2YWx1ZXMgZm9yIGJhY2tncm91bmQtY3VycmVudC5cbiAgICB3ZSBjb3VsZCBwb3RlbnRpYWxseSBhbHRlciB0aGUgTWVyZ2UgdHlwZSB1dGlsaXR5IGZ1bmN0aW9uIGZyb20gY3JlYXRlVGhlbWUsIGJ1dCBzaW5jZSAnYmFja2dyb3VuZC1jdXJyZW50JyBpcyB0aGUgb25seSBleGNlcHRpb24gdG8gdGhlIHR5cGUtbWVyZ2luZyBydWxlICBhbmQgdGhpcyBpcyB0aGUgb25seSBwbGFjZSB3ZSBvdmVycmlkZSwgdGhpcyBzZWVtcyB0byBiZSBhIG1vcmUgc3RyYWlnaHRmb3J3YXJkICsgbG93ZXItcmlzayBzb2x1dGlvbi5cbiAgICAqL1xuXG4gICAgbW9kZXNDb3B5W21vZGVdWydiYWNrZ3JvdW5kLWN1cnJlbnQnXSA9IGJnQ3VycmVudFsnYmFja2dyb3VuZC1jdXJyZW50J10gYXNcbiAgICAgIHwgJ3doaXRlJ1xuICAgICAgfCAnbmF2eS04MDAnO1xuICB9XG5cbiAgcmV0dXJuIFttb2RlLCBtb2Rlc0NvcHk/Llttb2RlXSwgbW9kZXMsIGdldENvbG9yVmFsdWVdO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ3VycmVudE1vZGUobW9kZT86IENvbG9yTW9kZXMpIHtcbiAgY29uc3QgW2FjdGl2ZU1vZGVdID0gdXNlQ29sb3JNb2RlcygpO1xuICByZXR1cm4gbW9kZSA/PyBhY3RpdmVNb2RlO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlUHJlZmVyc0RhcmtNb2RlKCkge1xuICBjb25zdCBbcHJlZmVyc0RhcmtNb2RlLCBzZXRQcmVmZXJzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZnVuY3Rpb24gb25DaGFuZ2UoZXZlbnQ6IE1lZGlhUXVlcnlMaXN0RXZlbnQpIHtcbiAgICAgIHNldFByZWZlcnNEYXJrTW9kZShldmVudC5tYXRjaGVzKTtcbiAgICB9XG5cbiAgICBpZiAod2luZG93ICYmICdtYXRjaE1lZGlhJyBpbiB3aW5kb3cpIHtcbiAgICAgIGNvbnN0IG1xID0gd2luZG93Lm1hdGNoTWVkaWEoJyhwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyayknKTtcblxuICAgICAgaWYgKG1xICYmICdhZGRFdmVudExpc3RlbmVyJyBpbiBtcSkge1xuICAgICAgICBzZXRQcmVmZXJzRGFya01vZGUobXEubWF0Y2hlcyk7XG4gICAgICAgIG1xLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIG9uQ2hhbmdlKTtcblxuICAgICAgICByZXR1cm4gKCkgPT4gbXEucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgb25DaGFuZ2UpO1xuICAgICAgfVxuICAgIH1cbiAgfSwgW10pO1xuXG4gIHJldHVybiBwcmVmZXJzRGFya01vZGU7XG59XG5cbmV4cG9ydCBjb25zdCBWYXJpYWJsZVByb3ZpZGVyID0gc3R5bGVkKFxuICAnZGl2JyxcbiAgc3R5bGVkT3B0aW9ucyhbJ3ZhcmlhYmxlcycsICdhbHdheXNTZXRWYXJpYWJsZXMnXSlcbik8XG4gIFN0eWxlUHJvcHM8dHlwZW9mIHByb3ZpZGVyUHJvcHM+ICYge1xuICAgIHZhcmlhYmxlcz86IENTU09iamVjdDtcbiAgICBhbHdheXNTZXRWYXJpYWJsZXM/OiBib29sZWFuO1xuICB9XG4+KCh7IHZhcmlhYmxlcyB9KSA9PiB2YXJpYWJsZXMsIGNzcyh7IHRleHRDb2xvcjogJ3RleHQnIH0pLCBwcm92aWRlclByb3BzKTtcblxuZXhwb3J0IGNvbnN0IENvbG9yTW9kZSA9IGZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBPbWl0PENvbXBvbmVudFByb3BzPHR5cGVvZiBWYXJpYWJsZVByb3ZpZGVyPiwgJ2JnJz4gJiBDb2xvck1vZGVQcm9wc1xuPigoeyBtb2RlOiBwcmVmZXJlbmNlLCBhbHdheXNTZXRWYXJpYWJsZXMsIGJnLCAuLi5yZXN0IH0sIHJlZikgPT4ge1xuICAvLyBjaGVja3MgaWYgdGhlIHVzZXIgaGFzIHNldCAnc3lzdGVtJyBhcyB0aGVpciBjb2xvciBtb2RlIHByZWZlcmVuY2VcbiAgLy8gdGhlbiBzZXRzIHRoZSBjb2xvciBtb2RlXG4gIGNvbnN0IHByZWZlcnNEYXJrTW9kZSA9IHVzZVByZWZlcnNEYXJrTW9kZSgpO1xuICBjb25zdCBtb2RlID1cbiAgICBwcmVmZXJlbmNlID09PSAnc3lzdGVtJyA/IChwcmVmZXJzRGFya01vZGUgPyAnZGFyaycgOiAnbGlnaHQnKSA6IHByZWZlcmVuY2U7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7IG1vZGVzLCBtb2RlOiBhY3RpdmUsIGNvbG9ycyB9ID0gdGhlbWU7XG4gIGNvbnN0IGNvbnRleHRCZyA9IGJnID8gJ2JhY2tncm91bmQtY3VycmVudCcgOiB1bmRlZmluZWQ7XG4gIC8vIFRoaXMgbWFrZXMgc3VyZSB0aGUgYmFja2dyb3VuZC1jdXJyZW50IGNvbnRleHQgaXMgYWx3YXlzIHNldCB0byB0aGUgY29ycmVjdCBjb2xvciArIG5vdCB0aGUgc2VtYW50aWMgY29sb3IgbmFtZS5cbiAgY29uc3QgY3VycmVudFBhcmVudEJnID0gdXNlQ29udGV4dChCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQpO1xuXG4gIGNvbnN0IGJnQ3VycmVudCA9XG4gICAgYmcgPT09ICdiYWNrZ3JvdW5kLWN1cnJlbnQnXG4gICAgICA/IGN1cnJlbnRQYXJlbnRCZ1snYmFja2dyb3VuZC1jdXJyZW50J11cbiAgICAgICAgPyBjdXJyZW50UGFyZW50QmdbJ2JhY2tncm91bmQtY3VycmVudCddXG4gICAgICAgIDogbW9kZXNbYWN0aXZlXVsnYmFja2dyb3VuZC1jdXJyZW50J11cbiAgICAgIDogYmc7XG5cbiAgLyoqIFNlcmlhbGl6ZSBjb2xvciB2YXJpYWJsZXMgZm9yIHRoZSBjdXJyZW50IG1vZGVcbiAgICogMS4gSWYgYWxsIHZhcmlhYmxlcyBhcmUgcmVxdWlyZWQgYWRkIGFsbCBtb2RlIHZhcmlhYmxlcyB0byB0aGUgY3VycmVudCBjb250ZXh0XG4gICAqIDIuIElmIHRoZSB1c2VyIGhhcyBzcGVjaWZpZWQgYSBiYWNrZ3JvdW5kIGNvbG9yIC0gc2V0IHRoYXQgY29sb3IgdG8gdGhlIGN1cnJlbnQtYmdcbiAgICogMy4gSWYgbm90XG4gICAqL1xuICBjb25zdCB7IHZhcmlhYmxlcyB9ID0gdXNlTWVtbygoKSA9PiB7XG4gICAgcmV0dXJuIHNlcmlhbGl6ZVRva2VucyhcbiAgICAgIG1hcFZhbHVlcyhtb2Rlc1ttb2RlXSwgKGNvbG9yLCBrZXkpID0+IHtcbiAgICAgICAgaWYgKGtleSA9PT0gJ2JhY2tncm91bmQtY3VycmVudCcgJiYgdHlwZW9mIGJnICE9PSAndW5kZWZpbmVkJykge1xuICAgICAgICAgIHJldHVybiBjb2xvcnNbYmddO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjb2xvcnNbY29sb3JdO1xuICAgICAgfSksXG4gICAgICAnY29sb3InLFxuICAgICAgdGhlbWVcbiAgICApO1xuICB9LCBbY29sb3JzLCBtb2RlLCBtb2RlcywgdGhlbWUsIGJnXSk7XG5cbiAgaWYgKGFjdGl2ZSA9PT0gbW9kZSkge1xuICAgIGNvbnN0IHZhcnMgPSBhbHdheXNTZXRWYXJpYWJsZXNcbiAgICAgID8gdmFyaWFibGVzXG4gICAgICA6IHBpY2sodmFyaWFibGVzLCBbJy0tY29sb3ItYmFja2dyb3VuZC1jdXJyZW50J10pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQuUHJvdmlkZXJcbiAgICAgICAgdmFsdWU9e3sgJ2JhY2tncm91bmQtY3VycmVudCc6IGJnQ3VycmVudCB9fVxuICAgICAgPlxuICAgICAgICA8VmFyaWFibGVQcm92aWRlciB7Li4ucmVzdH0gdmFyaWFibGVzPXt2YXJzfSBiZz17Y29udGV4dEJnfSByZWY9e3JlZn0gLz5cbiAgICAgIDwvQmFja2dyb3VuZEN1cnJlbnRDb250ZXh0LlByb3ZpZGVyPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxUaGVtZVByb3ZpZGVyIHRoZW1lPXt7IG1vZGUgfX0+XG4gICAgICA8VmFyaWFibGVQcm92aWRlclxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgdmFyaWFibGVzPXt2YXJpYWJsZXN9XG4gICAgICAgIGJnPXtjb250ZXh0Qmd9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgLz5cbiAgICA8L1RoZW1lUHJvdmlkZXI+XG4gICk7XG59KTtcbiJdfQ== */");
-export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
+export var ColorMode = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var preference = _ref4.mode,
     alwaysSetVariables = _ref4.alwaysSetVariables,
     bg = _ref4.bg,

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>) => import("@emotion/cache").EmotionCache;

package/dist/cache/stylisPlugins/focusVisible.js

@@ -1,5 +1,6 @@
 export var focusVisible = function focusVisible(element) {
   if (element.type === 'rule' && element.value.includes(':focus-visible')) {
+    if (typeof element.props === 'string') element.props = [element.props];
     element.props = element.props.map(function (prop) {
       var poly = prop.replace(/:focus-visible/g, '[data-focus-visible-added]');
       return "".concat(prop, ", ").concat(poly);

package/dist/globals/Variables.js

@@ -3,7 +3,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 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 _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 _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); }

package/dist/styles/boxShadow.d.ts

@@ -1,4 +1,4 @@
-export declare type ShadowDepth = keyof typeof shadowsForDepth;
+export type ShadowDepth = keyof typeof shadowsForDepth;
 declare const shadowsForDepth: {
     1: {
         offsets: number[];

package/dist/styles/boxShadow.js

@@ -2,7 +2,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 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 _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; }
 import { css } from '@emotion/react';
 var shadowsForDepth = {

package/dist/themes/admin.d.ts

@@ -96,8 +96,8 @@ export declare const adminTheme: Record<"breakpoints", {
     readonly "shadow-black-slight": string;
     readonly "shadow-black-heavy": string;
     readonly "beige-100": "#FFF0E5";
-    readonly "blue-100": "#D3F2FF";
     readonly "blue-0": "#F5FCFF";
+    readonly "blue-100": "#D3F2FF";
     readonly "blue-300": "#66C4FF";
     readonly "blue-400": "#3388FF";
     readonly "blue-500": "#1557FF";
@@ -111,8 +111,8 @@ export declare const adminTheme: Record<"breakpoints", {
     readonly "navy-600": string;
     readonly "navy-700": string;
     readonly "navy-900": "#0A0D1C";
-    readonly "green-100": "#EAFDC6";
     readonly "green-0": "#F5FFE3";
+    readonly "green-100": "#EAFDC6";
     readonly "green-400": "#AEE938";
     readonly "green-700": "#008A27";
     readonly "yellow-0": "#FFFAE5";
@@ -120,8 +120,8 @@ export declare const adminTheme: Record<"breakpoints", {
     readonly "yellow-500": "#FFD300";
     readonly "pink-0": "#FFF5FF";
     readonly "pink-400": "#F966FF";
-    readonly "red-100": "#DC5879";
     readonly "red-0": "#E85D7F";
+    readonly "red-100": "#DC5879";
     readonly "red-500": "#E91C11";
     readonly "red-600": "#BE1809";
     readonly "orange-500": "#FF8C00";
@@ -140,7 +140,7 @@ export declare const adminTheme: Record<"breakpoints", {
     readonly "white-200": string;
     readonly "white-600": string;
     readonly "white-700": string;
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
@@ -249,8 +249,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -264,8 +264,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -273,8 +273,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -293,7 +293,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-", "">, "color">;
+    }, "-">, "color">;
     modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
@@ -407,8 +407,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -422,8 +422,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -431,8 +431,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -452,22 +452,10 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "white-600": string;
         readonly "white-700": string;
     }, "-">) => string;
-}, Record<"breakpoints", {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}>>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
+}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-", "">>, Record<"breakpoints", {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         primary: {
             _: "blue-500";
@@ -501,8 +489,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -516,8 +504,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -525,8 +513,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -545,7 +533,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-", "">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+    }, "-">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
             accent: "navy-900";
@@ -653,8 +641,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -668,8 +656,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -677,8 +665,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -697,7 +685,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-", "">, "color">>;
+    }, "-">, "color">>;
     modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
@@ -823,8 +811,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -838,8 +826,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -847,8 +835,8 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -869,6 +857,6 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "white-700": string;
     }, "-"> | "secondary" | "background" | "primary" | "danger" | "interface" | "text-disabled" | "text-accent" | "text-secondary" | "shadow-opaque" | "shadow-solid" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
-export declare type AdminThemeShape = typeof adminTheme;
+export type AdminThemeShape = typeof adminTheme;
 export interface AdminTheme extends AdminThemeShape {
 }

package/dist/themes/core.d.ts

@@ -95,8 +95,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
     readonly "shadow-black-slight": string;
     readonly "shadow-black-heavy": string;
     readonly "beige-100": "#FFF0E5";
-    readonly "blue-100": "#D3F2FF";
     readonly "blue-0": "#F5FCFF";
+    readonly "blue-100": "#D3F2FF";
     readonly "blue-300": "#66C4FF";
     readonly "blue-400": "#3388FF";
     readonly "blue-500": "#1557FF";
@@ -110,8 +110,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
     readonly "navy-600": string;
     readonly "navy-700": string;
     readonly "navy-900": "#0A0D1C";
-    readonly "green-100": "#EAFDC6";
     readonly "green-0": "#F5FFE3";
+    readonly "green-100": "#EAFDC6";
     readonly "green-400": "#AEE938";
     readonly "green-700": "#008A27";
     readonly "yellow-0": "#FFFAE5";
@@ -119,8 +119,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
     readonly "yellow-500": "#FFD300";
     readonly "pink-0": "#FFF5FF";
     readonly "pink-400": "#F966FF";
-    readonly "red-100": "#DC5879";
     readonly "red-0": "#E85D7F";
+    readonly "red-100": "#DC5879";
     readonly "red-500": "#E91C11";
     readonly "red-600": "#BE1809";
     readonly "orange-500": "#FF8C00";
@@ -139,7 +139,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
     readonly "white-200": string;
     readonly "white-600": string;
     readonly "white-700": string;
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
@@ -248,8 +248,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -263,8 +263,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -272,8 +272,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -292,7 +292,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-", "">, "color">;
+    }, "-">, "color">;
     modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
@@ -406,8 +406,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -421,8 +421,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -430,8 +430,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -451,22 +451,10 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "white-600": string;
         readonly "white-700": string;
     }, "-">) => string;
-}, Record<"breakpoints", {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}>>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
+}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-", "">>, Record<"breakpoints", {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
-export declare type CoreThemeShape = typeof coreTheme;
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+export type CoreThemeShape = typeof coreTheme;
 export interface CoreTheme extends CoreThemeShape {
 }

package/dist/themes/core.js

@@ -54,7 +54,7 @@ export var coreTheme = createTheme({
       _: 'red-500',
       hover: 'red-600'
     },
-    "interface": {
+    interface: {
       _: 'hyper-500',
       hover: 'hyper-400'
     }
@@ -97,7 +97,7 @@ export var coreTheme = createTheme({
       _: 'red-0',
       hover: 'red-100'
     },
-    "interface": {
+    interface: {
       _: 'yellow-500',
       hover: 'yellow-400'
     }

package/dist/themes/platform.d.ts

@@ -106,8 +106,8 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly "shadow-black-slight": string;
     readonly "shadow-black-heavy": string;
     readonly "beige-100": "#FFF0E5";
-    readonly "blue-100": "#D3F2FF";
     readonly "blue-0": "#F5FCFF";
+    readonly "blue-100": "#D3F2FF";
     readonly "blue-300": "#66C4FF";
     readonly "blue-400": "#3388FF";
     readonly "blue-500": "#1557FF";
@@ -121,8 +121,8 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly "navy-600": string;
     readonly "navy-700": string;
     readonly "navy-900": "#0A0D1C";
-    readonly "green-100": "#EAFDC6";
     readonly "green-0": "#F5FFE3";
+    readonly "green-100": "#EAFDC6";
     readonly "green-400": "#AEE938";
     readonly "green-700": "#008A27";
     readonly "yellow-0": "#FFFAE5";
@@ -130,8 +130,8 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly "yellow-500": "#FFD300";
     readonly "pink-0": "#FFF5FF";
     readonly "pink-400": "#F966FF";
-    readonly "red-100": "#DC5879";
     readonly "red-0": "#E85D7F";
+    readonly "red-100": "#DC5879";
     readonly "red-500": "#E91C11";
     readonly "red-600": "#BE1809";
     readonly "orange-500": "#FF8C00";
@@ -150,7 +150,7 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly "white-200": string;
     readonly "white-600": string;
     readonly "white-700": string;
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
@@ -259,8 +259,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -274,8 +274,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -283,8 +283,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -303,7 +303,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-", "">, "color">;
+    }, "-">, "color">;
     modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
@@ -417,8 +417,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -432,8 +432,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -441,8 +441,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -462,22 +462,10 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-600": string;
         readonly "white-700": string;
     }, "-">) => string;
-}, Record<"breakpoints", {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}>>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
+}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-", "">>, Record<"breakpoints", {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
     readonly teal: "#027E97";
@@ -488,7 +476,7 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly "gold-800": "#8A7300";
     readonly "teal-500": "#027E97";
     readonly "purple-300": "#B3CCFF";
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         editor: {
             attribute: "green-700";
@@ -573,8 +561,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -588,8 +576,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -597,8 +585,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -617,7 +605,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-", "">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+    }, "-">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
             accent: "navy-900";
@@ -725,8 +713,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -740,8 +728,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -749,8 +737,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -769,7 +757,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-", "">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+    }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         readonly lightBeige: "#FFFBF8";
         readonly gold: "#8A7300";
         readonly teal: "#027E97";
@@ -780,7 +768,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "gold-800": "#8A7300";
         readonly "teal-500": "#027E97";
         readonly "purple-300": "#B3CCFF";
-    }, "-", "">, "color">>;
+    }, "-">, "color">>;
     modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
@@ -957,8 +945,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "shadow-black-slight": string;
         readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
-        readonly "blue-100": "#D3F2FF";
         readonly "blue-0": "#F5FCFF";
+        readonly "blue-100": "#D3F2FF";
         readonly "blue-300": "#66C4FF";
         readonly "blue-400": "#3388FF";
         readonly "blue-500": "#1557FF";
@@ -972,8 +960,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "navy-600": string;
         readonly "navy-700": string;
         readonly "navy-900": "#0A0D1C";
-        readonly "green-100": "#EAFDC6";
         readonly "green-0": "#F5FFE3";
+        readonly "green-100": "#EAFDC6";
         readonly "green-400": "#AEE938";
         readonly "green-700": "#008A27";
         readonly "yellow-0": "#FFFAE5";
@@ -981,8 +969,8 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "yellow-500": "#FFD300";
         readonly "pink-0": "#FFF5FF";
         readonly "pink-400": "#F966FF";
-        readonly "red-100": "#DC5879";
         readonly "red-0": "#E85D7F";
+        readonly "red-100": "#DC5879";
         readonly "red-500": "#E91C11";
         readonly "red-600": "#BE1809";
         readonly "orange-500": "#FF8C00";
@@ -1014,6 +1002,6 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "purple-300": "#B3CCFF";
     }, "-">) => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
-export declare type PlatformThemeShape = typeof platformTheme;
+export type PlatformThemeShape = typeof platformTheme;
 export interface PlatformTheme extends PlatformThemeShape {
 }

package/dist/utilities/themed.d.ts

@@ -8,7 +8,7 @@ import { Theme } from '@emotion/react';
  * @returns A function that accepts an object with a keyof `theme` and looks up the
  *  value at supplied path parameter
  */
-export declare type SafeThemeValues = Omit<Theme, '_variables' | '_tokens' | '_getColorValue' | 'modes'>;
+export type SafeThemeValues = Omit<Theme, '_variables' | '_tokens' | '_getColorValue' | 'modes'>;
 export declare function themed<P extends Path<SafeThemeValues>>(path: P): (props: {
     theme: Theme;
 }) => PathValue<SafeThemeValues, P>;

package/dist/variables/colors.d.ts

@@ -111,8 +111,8 @@ export declare const corePalette: {
     readonly "shadow-black-slight": string;
     readonly "shadow-black-heavy": string;
     readonly "beige-100": "#FFF0E5";
-    readonly "blue-100": "#D3F2FF";
     readonly "blue-0": "#F5FCFF";
+    readonly "blue-100": "#D3F2FF";
     readonly "blue-300": "#66C4FF";
     readonly "blue-400": "#3388FF";
     readonly "blue-500": "#1557FF";
@@ -126,8 +126,8 @@ export declare const corePalette: {
     readonly "navy-600": string;
     readonly "navy-700": string;
     readonly "navy-900": "#0A0D1C";
-    readonly "green-100": "#EAFDC6";
     readonly "green-0": "#F5FFE3";
+    readonly "green-100": "#EAFDC6";
     readonly "green-400": "#AEE938";
     readonly "green-700": "#008A27";
     readonly "yellow-0": "#FFFAE5";
@@ -135,8 +135,8 @@ export declare const corePalette: {
     readonly "yellow-500": "#FFD300";
     readonly "pink-0": "#FFF5FF";
     readonly "pink-400": "#F966FF";
-    readonly "red-100": "#DC5879";
     readonly "red-0": "#E85D7F";
+    readonly "red-100": "#DC5879";
     readonly "red-500": "#E91C11";
     readonly "red-600": "#BE1809";
     readonly "orange-500": "#FF8C00";

package/dist/variables/responsive.d.ts

@@ -5,7 +5,7 @@ export declare const breakpoints: {
     readonly lg: "1200px";
     readonly xl: "1440px";
 };
-export declare type MediaSize = keyof typeof breakpoints;
+export type MediaSize = keyof typeof breakpoints;
 export declare const mediaQueries: {
     xs: string;
     sm: string;

package/dist/variance/utils.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ThemeProps } from '@codecademy/variance';
 declare const allPropnames: ["mode", "variant", "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "inset" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "textDecoration" | "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"];
-export declare type SystemPropNames = typeof allPropnames[number];
-export declare type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
-export declare type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
+export type SystemPropNames = typeof allPropnames[number];
+export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
+export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
 export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
     shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "mode" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "inset" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "textDecoration" | "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" | "variant" | Additional>;
 };
@@ -24,6 +24,6 @@ export declare function createStyledOptions<El extends ElementOrProps = 'div', A
  *
  */
 export declare const styledOptions: typeof createStyledOptions & {
-    shouldForwardProp: (prop: PropertyKey) => prop is "style" | "slot" | "title" | "dir" | "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 "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 {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "16.1.2",
+  "version": "16.1.3-alpha.0f0cb9.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.21.0",
+    "@codecademy/variance": "0.21.1-alpha.0f0cb9.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -33,13 +33,9 @@
     "react": "^17.0.2 || ^18.2.0",
     "stylis": "^4.0.7"
   },
-  "devDependencies": {
-    "@emotion/jest": "^11.3.0",
-    "component-test-setup": "^0.3.1"
-  },
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "89f9d70c35e7d935086a7e49c7037dd381eac935"
+  "gitHead": "e561bba04029a40f6de5f0b6bc24baa1df2f4ecb"
 }