@codecademy/gamut-styles 13.0.3-alpha.2b82d6.0 → 13.0.3-alpha.38607e.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-@codecademy/gamut-styles:build: cache hit, replaying output 37a129c22c49955c
+@codecademy/gamut-styles:build: cache hit, replaying output 6aded5740c628bbc
 @codecademy/gamut-styles:build: $ yarn build:clean && yarn build:compile && yarn build:transpile
 @codecademy/gamut-styles:build: $ rm -rf ./dist
 @codecademy/gamut-styles:build: $ tsc
@@ -8,4 +8,4 @@
 @codecademy/gamut-styles:build: 
 @codecademy/gamut-styles:build: Why you should do it regularly:
 @codecademy/gamut-styles:build: https://github.com/browserslist/browserslist#browsers-data-updating
-@codecademy/gamut-styles:build: Successfully compiled 46 files with Babel (1305ms).
+@codecademy/gamut-styles:build: Successfully compiled 46 files with Babel (1482ms).

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [13.0.3-alpha.2b82d6.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-styles@13.0.2...@codecademy/gamut-styles@13.0.3-alpha.2b82d6.0) (2022-03-07)
+### [13.0.3-alpha.38607e.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-styles@13.0.2...@codecademy/gamut-styles@13.0.3-alpha.38607e.0) (2022-03-18)
 
 **Note:** Version bump only for package @codecademy/gamut-styles
 

package/dist/Background.d.ts

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

package/dist/Background.js

@@ -32,7 +32,9 @@ var isColorAlias = function isColorAlias(mode, color) {
 
 export var Background = /*#__PURE__*/forwardRef(function Background(_ref, ref) {
   var bg = _ref.bg,
-      rest = _objectWithoutProperties(_ref, ["bg"]);
+      _ref$isGlobal = _ref.isGlobal,
+      isGlobal = _ref$isGlobal === void 0 ? false : _ref$isGlobal,
+      rest = _objectWithoutProperties(_ref, ["bg", "isGlobal"]);
 
   var _useColorModes = useColorModes(),
       _useColorModes2 = _slicedToArray(_useColorModes, 4),
@@ -99,6 +101,7 @@ export var Background = /*#__PURE__*/forwardRef(function Background(_ref, ref) {
   return /*#__PURE__*/React.createElement(ColorMode, _extends({}, rest, {
     mode: accessibleMode,
     bg: bg,
-    ref: ref
+    ref: ref,
+    isGlobal: isGlobal
   }));
 });

package/dist/Background.js.map

@@ -1 +1 @@
-{"version":3,"file":"Background.js","sourceRoot":"","sources":["../src/Background.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAEL,SAAS,EAIT,aAAa,GACd,MAAM,aAAa,CAAC;AAUrB,MAAM,YAAY,GAAG,CACnB,IAAoB,EACpB,KAAa,EACQ,EAAE;IACvB,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,CAAC,GAAG,aAAa,EAAE,CAAC;IAErE,qFAAqF;IACrF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC,EAAE;YAClC,OAAO,YAAY,CAAC,EAAE,CAAC,CAAC;SACzB;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;IAEvB,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,UAAkB,EAAE,EAAE;QACrB,OAAO,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,CAAC,EACD,CAAC,SAAS,EAAE,aAAa,CAAC,CAC3B,CAAC;IAEF;;;;;;;;OAQG;IAEH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QACtD,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEjD;;;;;;;WAOG;QACH,MAAM,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAC,MAAM,CAChD,CACE,CAAC,QAAQ,EAAE,YAAY,CAAC,EACxB,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAA+B,EAC9C,EAAE;YACF,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;YACvC,iCAAiC;YACjC,OAAO,QAAQ,GAAG,YAAY;gBAC5B,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC;gBAClB,CAAC,CAAC,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC/B,CAAC,EACD,CAAC,MAAM,EAAE,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAC3C,CAAC;QAEF,OAAO,mBAAmB,CAAC;IAC7B,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAErC,OAAO,oBAAC,SAAS,OAAK,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACzE,CAAC,CACF,CAAC"}
+{"version":3,"file":"Background.js","sourceRoot":"","sources":["../src/Background.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAEL,SAAS,EAIT,aAAa,GACd,MAAM,aAAa,CAAC;AAWrB,MAAM,YAAY,GAAG,CACnB,IAAoB,EACpB,KAAa,EACQ,EAAE;IACvB,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,CAAC,GAAG,aAAa,EAAE,CAAC;IAErE,qFAAqF;IACrF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC,EAAE;YAClC,OAAO,YAAY,CAAC,EAAE,CAAC,CAAC;SACzB;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;IAEvB,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,UAAkB,EAAE,EAAE;QACrB,OAAO,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,CAAC,EACD,CAAC,SAAS,EAAE,aAAa,CAAC,CAC3B,CAAC;IAEF;;;;;;;;OAQG;IAEH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QACtD,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEjD;;;;;;;WAOG;QACH,MAAM,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAC,MAAM,CAChD,CACE,CAAC,QAAQ,EAAE,YAAY,CAAC,EACxB,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAA+B,EAC9C,EAAE;YACF,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;YACvC,iCAAiC;YACjC,OAAO,QAAQ,GAAG,YAAY;gBAC5B,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC;gBAClB,CAAC,CAAC,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC/B,CAAC,EACD,CAAC,MAAM,EAAE,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAC3C,CAAC;QAEF,OAAO,mBAAmB,CAAC;IAC7B,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAErC,OAAO,CACL,oBAAC,SAAS,OACJ,IAAI,EACR,IAAI,EAAE,cAAc,EACpB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ColorMode.d.ts

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

package/dist/ColorMode.js

@@ -22,7 +22,7 @@ import { serializeTokens, variance } from '@codecademy/variance';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import { mapValues, pick } from 'lodash';
 import React, { forwardRef, useMemo } from 'react';
-import { Scrollbars } from '.';
+import { Scrollbars, scrollbarStyles } from '.';
 import { background, border, color, css, flex, grid, layout, positioning, space } from './variance/props';
 import { styledOptions } from './variance/utils';
 export var providerProps = variance.compose(layout, color, grid, flex, positioning, space, border, background);
@@ -54,17 +54,20 @@ export var VariableProvider = /*#__PURE__*/_styled('div', _extends({}, {
   target: "e1skjn880",
   label: "VariableProvider"
 }, styledOptions(['variables', 'alwaysSetVariables'])))(function (_ref3) {
-  var variables = _ref3.variables;
-  return variables;
-}, css({
-  textColor: 'text'
-}), providerProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Db2xvck1vZGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJFZ0MiLCJmaWxlIjoiLi4vc3JjL0NvbG9yTW9kZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzZXJpYWxpemVUb2tlbnMsXG4gIFN0eWxlUHJvcHMsXG4gIFRoZW1lUHJvcHMsXG4gIHZhcmlhbmNlLFxufSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBDU1NPYmplY3QsIFRoZW1lLCBUaGVtZVByb3ZpZGVyLCB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IG1hcFZhbHVlcywgcGljayB9IGZyb20gJ2xvZGFzaCc7XG5pbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50UHJvcHMsIGZvcndhcmRSZWYsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFNjcm9sbGJhcnMgfSBmcm9tICcuJztcbmltcG9ydCB7XG4gIGJhY2tncm91bmQsXG4gIGJvcmRlcixcbiAgY29sb3IsXG4gIGNzcyxcbiAgZmxleCxcbiAgZ3JpZCxcbiAgbGF5b3V0LFxuICBwb3NpdGlvbmluZyxcbiAgc3BhY2UsXG59IGZyb20gJy4vdmFyaWFuY2UvcHJvcHMnO1xuaW1wb3J0IHsgc3R5bGVkT3B0aW9ucyB9IGZyb20gJy4vdmFyaWFuY2UvdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBDb2xvcnMgPSBrZXlvZiBUaGVtZVsnY29sb3JzJ107XG5leHBvcnQgdHlwZSBDb2xvck1vZGVDb25maWcgPSBUaGVtZVsnbW9kZXMnXTtcbmV4cG9ydCB0eXBlIENvbG9yTW9kZXMgPSBrZXlvZiBDb2xvck1vZGVDb25maWc7XG5leHBvcnQgdHlwZSBDb2xvck1vZGVTaGFwZSA9IENvbG9yTW9kZUNvbmZpZ1tDb2xvck1vZGVzXTtcbmV4cG9ydCB0eXBlIENvbG9yQWxpYXMgPSBrZXlvZiBDb2xvck1vZGVTaGFwZTtcblxuZXhwb3J0IHR5cGUgQ29sb3JNb2RlUHJvcHMgPSB7XG4gIG1vZGU6IENvbG9yTW9kZXM7XG4gIGJnPzogQ29sb3JzO1xufTtcblxuZXhwb3J0IGNvbnN0IHByb3ZpZGVyUHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBsYXlvdXQsXG4gIGNvbG9yLFxuICBncmlkLFxuICBmbGV4LFxuICBwb3NpdGlvbmluZyxcbiAgc3BhY2UsXG4gIGJvcmRlcixcbiAgYmFja2dyb3VuZFxuKTtcblxuZXhwb3J0IGNvbnN0IG1vZGVDb2xvclByb3BzID0gKHtcbiAgdGhlbWUsXG4gIG1vZGUsXG59OiBUaGVtZVByb3BzPHsgbW9kZT86IENvbG9yTW9kZXMgfT4pID0+IHtcbiAgaWYgKCF0aGVtZSB8fCAhbW9kZSB8fCBtb2RlID09PSB0aGVtZT8ubW9kZSkgcmV0dXJuIHt9O1xuICBjb25zdCB7IGNvbG9ycyB9ID0gdGhlbWU7XG4gIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgbWFwVmFsdWVzKHRoZW1lPy5tb2Rlc1ttb2RlXSwgKGNvbG9yKSA9PiBjb2xvcnNbY29sb3JdKSxcbiAgICAnY29sb3InLFxuICAgIHRoZW1lXG4gICkudmFyaWFibGVzO1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUNvbG9yTW9kZXMoKTogW1xuICBDb2xvck1vZGVzLFxuICBDb2xvck1vZGVTaGFwZSxcbiAgQ29sb3JNb2RlQ29uZmlnLFxuICAoY29sb3I6IENvbG9ycykgPT4gc3RyaW5nXG5dIHtcbiAgY29uc3QgeyBtb2RlLCBtb2RlcywgX2dldENvbG9yVmFsdWU6IGdldENvbG9yVmFsdWUgfSA9IHVzZVRoZW1lKCkgfHwge307XG4gIHJldHVybiBbbW9kZSwgbW9kZXM/Llttb2RlXSwgbW9kZXMsIGdldENvbG9yVmFsdWVdO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ3VycmVudE1vZGUobW9kZT86IENvbG9yTW9kZXMpIHtcbiAgY29uc3QgW2FjdGl2ZU1vZGVdID0gdXNlQ29sb3JNb2RlcygpO1xuICByZXR1cm4gbW9kZSA/PyBhY3RpdmVNb2RlO1xufVxuXG5leHBvcnQgY29uc3QgVmFyaWFibGVQcm92aWRlciA9IHN0eWxlZChcbiAgJ2RpdicsXG4gIHN0eWxlZE9wdGlvbnMoWyd2YXJpYWJsZXMnLCAnYWx3YXlzU2V0VmFyaWFibGVzJ10pXG4pPFxuICBTdHlsZVByb3BzPHR5cGVvZiBwcm92aWRlclByb3BzPiAmIHtcbiAgICB2YXJpYWJsZXM/OiBDU1NPYmplY3Q7XG4gICAgYWx3YXlzU2V0VmFyaWFibGVzPzogYm9vbGVhbjtcbiAgfVxuPigoeyB2YXJpYWJsZXMgfSkgPT4gdmFyaWFibGVzLCBjc3MoeyB0ZXh0Q29sb3I6ICd0ZXh0JyB9KSwgcHJvdmlkZXJQcm9wcyk7XG5cbmV4cG9ydCBjb25zdCBDb2xvck1vZGUgPSBmb3J3YXJkUmVmPFxuICBIVE1MRGl2RWxlbWVudCxcbiAgT21pdDxDb21wb25lbnRQcm9wczx0eXBlb2YgVmFyaWFibGVQcm92aWRlcj4sICdiZyc+ICYgQ29sb3JNb2RlUHJvcHNcbj4oKHsgbW9kZSwgYWx3YXlzU2V0VmFyaWFibGVzLCBiZywgY2hpbGRyZW4sIC4uLnJlc3QgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgeyBtb2RlcywgbW9kZTogYWN0aXZlLCBjb2xvcnMgfSA9IHRoZW1lO1xuICBjb25zdCBjb250ZXh0QmcgPSBiZyA/ICdiYWNrZ3JvdW5kLWN1cnJlbnQnIDogdW5kZWZpbmVkO1xuXG4gIC8qKiBTZXJpYWxpemUgY29sb3IgdmFyaWFibGVzIGZvciB0aGUgY3VycmVudCBtb2RlXG4gICAqIDEuIElmIGFsbCB2YXJpYWJsZXMgYXJlIHJlcXVpcmVkIGFkZCBhbGwgbW9kZSB2YXJpYWJsZXMgdG8gdGhlIGN1cnJlbnQgY29udGV4dFxuICAgKiAyLiBJZiB0aGUgdXNlciBoYXMgc3BlY2lmaWVkIGEgYmFja2dyb3VuZCBjb2xvciAtIHNldCB0aGF0IGNvbG9yIHRvIHRoZSBjdXJyZW50LWJnXG4gICAqIDMuIElmIG5vdFxuICAgKi9cbiAgY29uc3QgeyB2YXJpYWJsZXMgfSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgICBtYXBWYWx1ZXMobW9kZXNbbW9kZV0sIChjb2xvciwga2V5KSA9PiB7XG4gICAgICAgIGlmIChrZXkgPT09ICdiYWNrZ3JvdW5kLWN1cnJlbnQnICYmIHR5cGVvZiBiZyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgICAgICByZXR1cm4gY29sb3JzW2JnXTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gY29sb3JzW2NvbG9yXTtcbiAgICAgIH0pLFxuICAgICAgJ2NvbG9yJyxcbiAgICAgIHRoZW1lXG4gICAgKTtcbiAgfSwgW2NvbG9ycywgbW9kZSwgbW9kZXMsIHRoZW1lLCBiZ10pO1xuXG4gIGlmIChhY3RpdmUgPT09IG1vZGUpIHtcbiAgICBjb25zdCB2YXJzID0gYWx3YXlzU2V0VmFyaWFibGVzXG4gICAgICA/IHZhcmlhYmxlc1xuICAgICAgOiBwaWNrKHZhcmlhYmxlcywgWyctLWNvbG9yLWJhY2tncm91bmQtY3VycmVudCddKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8VmFyaWFibGVQcm92aWRlciB7Li4ucmVzdH0gdmFyaWFibGVzPXt2YXJzfSBiZz17Y29udGV4dEJnfSByZWY9e3JlZn0+XG4gICAgICAgIDxTY3JvbGxiYXJzIC8+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvVmFyaWFibGVQcm92aWRlcj5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8VGhlbWVQcm92aWRlciB0aGVtZT17eyBtb2RlIH19PlxuICAgICAgPFZhcmlhYmxlUHJvdmlkZXJcbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIHZhcmlhYmxlcz17dmFyaWFibGVzfVxuICAgICAgICBiZz17Y29udGV4dEJnfVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgID5cbiAgICAgICAgPFNjcm9sbGJhcnMgLz5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9WYXJpYWJsZVByb3ZpZGVyPlxuICAgIDwvVGhlbWVQcm92aWRlcj5cbiAgKTtcbn0pO1xuIl19 */");
+  var styles = _ref3.styles,
+      theme = _ref3.theme,
+      variables = _ref3.variables;
+  return [variables, styles ? styles(theme) : undefined, css({
+    textColor: 'text'
+  })];
+}, providerProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Db2xvck1vZGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtGZ0MiLCJmaWxlIjoiLi4vc3JjL0NvbG9yTW9kZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzZXJpYWxpemVUb2tlbnMsXG4gIFN0eWxlUHJvcHMsXG4gIFRoZW1lUHJvcHMsXG4gIHZhcmlhbmNlLFxufSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQge1xuICBDU1NPYmplY3QsXG4gIFNlcmlhbGl6ZWRTdHlsZXMsXG4gIFRoZW1lLFxuICBUaGVtZVByb3ZpZGVyLFxuICB1c2VUaGVtZSxcbn0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbWFwVmFsdWVzLCBwaWNrIH0gZnJvbSAnbG9kYXNoJztcbmltcG9ydCBSZWFjdCwgeyBDb21wb25lbnRQcm9wcywgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgU2Nyb2xsYmFycywgc2Nyb2xsYmFyU3R5bGVzIH0gZnJvbSAnLic7XG5pbXBvcnQge1xuICBiYWNrZ3JvdW5kLFxuICBib3JkZXIsXG4gIGNvbG9yLFxuICBjc3MsXG4gIGZsZXgsXG4gIGdyaWQsXG4gIGxheW91dCxcbiAgcG9zaXRpb25pbmcsXG4gIHNwYWNlLFxufSBmcm9tICcuL3ZhcmlhbmNlL3Byb3BzJztcbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICcuL3ZhcmlhbmNlL3V0aWxzJztcblxuZXhwb3J0IHR5cGUgQ29sb3JzID0ga2V5b2YgVGhlbWVbJ2NvbG9ycyddO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlQ29uZmlnID0gVGhlbWVbJ21vZGVzJ107XG5leHBvcnQgdHlwZSBDb2xvck1vZGVzID0ga2V5b2YgQ29sb3JNb2RlQ29uZmlnO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlU2hhcGUgPSBDb2xvck1vZGVDb25maWdbQ29sb3JNb2Rlc107XG5leHBvcnQgdHlwZSBDb2xvckFsaWFzID0ga2V5b2YgQ29sb3JNb2RlU2hhcGU7XG5cbmV4cG9ydCB0eXBlIENvbG9yTW9kZVByb3BzID0ge1xuICBtb2RlOiBDb2xvck1vZGVzO1xuICBiZz86IENvbG9ycztcbiAgaXNHbG9iYWw/OiBib29sZWFuO1xufTtcblxuZXhwb3J0IGNvbnN0IHByb3ZpZGVyUHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBsYXlvdXQsXG4gIGNvbG9yLFxuICBncmlkLFxuICBmbGV4LFxuICBwb3NpdGlvbmluZyxcbiAgc3BhY2UsXG4gIGJvcmRlcixcbiAgYmFja2dyb3VuZFxuKTtcblxuZXhwb3J0IGNvbnN0IG1vZGVDb2xvclByb3BzID0gKHtcbiAgdGhlbWUsXG4gIG1vZGUsXG59OiBUaGVtZVByb3BzPHsgbW9kZT86IENvbG9yTW9kZXMgfT4pID0+IHtcbiAgaWYgKCF0aGVtZSB8fCAhbW9kZSB8fCBtb2RlID09PSB0aGVtZT8ubW9kZSkgcmV0dXJuIHt9O1xuICBjb25zdCB7IGNvbG9ycyB9ID0gdGhlbWU7XG4gIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgbWFwVmFsdWVzKHRoZW1lPy5tb2Rlc1ttb2RlXSwgKGNvbG9yKSA9PiBjb2xvcnNbY29sb3JdKSxcbiAgICAnY29sb3InLFxuICAgIHRoZW1lXG4gICkudmFyaWFibGVzO1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUNvbG9yTW9kZXMoKTogW1xuICBDb2xvck1vZGVzLFxuICBDb2xvck1vZGVTaGFwZSxcbiAgQ29sb3JNb2RlQ29uZmlnLFxuICAoY29sb3I6IENvbG9ycykgPT4gc3RyaW5nXG5dIHtcbiAgY29uc3QgeyBtb2RlLCBtb2RlcywgX2dldENvbG9yVmFsdWU6IGdldENvbG9yVmFsdWUgfSA9IHVzZVRoZW1lKCkgfHwge307XG4gIHJldHVybiBbbW9kZSwgbW9kZXM/Llttb2RlXSwgbW9kZXMsIGdldENvbG9yVmFsdWVdO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ3VycmVudE1vZGUobW9kZT86IENvbG9yTW9kZXMpIHtcbiAgY29uc3QgW2FjdGl2ZU1vZGVdID0gdXNlQ29sb3JNb2RlcygpO1xuICByZXR1cm4gbW9kZSA/PyBhY3RpdmVNb2RlO1xufVxuXG5leHBvcnQgY29uc3QgVmFyaWFibGVQcm92aWRlciA9IHN0eWxlZChcbiAgJ2RpdicsXG4gIHN0eWxlZE9wdGlvbnMoWyd2YXJpYWJsZXMnLCAnYWx3YXlzU2V0VmFyaWFibGVzJ10pXG4pPFxuICBTdHlsZVByb3BzPHR5cGVvZiBwcm92aWRlclByb3BzPiAmIHtcbiAgICBzdHlsZXM/OiAodGhlbWU6IFRoZW1lKSA9PiBTZXJpYWxpemVkU3R5bGVzO1xuICAgIHRoZW1lPzogVGhlbWU7XG4gICAgdmFyaWFibGVzPzogQ1NTT2JqZWN0O1xuICAgIGFsd2F5c1NldFZhcmlhYmxlcz86IGJvb2xlYW47XG4gIH1cbj4oXG4gICh7IHN0eWxlcywgdGhlbWUsIHZhcmlhYmxlcyB9KSA9PiBbXG4gICAgdmFyaWFibGVzLFxuICAgIHN0eWxlcyA/IHN0eWxlcyh0aGVtZSkgOiB1bmRlZmluZWQsXG4gICAgY3NzKHsgdGV4dENvbG9yOiAndGV4dCcgfSksXG4gIF0sXG4gIHByb3ZpZGVyUHJvcHNcbik7XG5cbmV4cG9ydCBjb25zdCBDb2xvck1vZGUgPSBmb3J3YXJkUmVmPFxuICBIVE1MRGl2RWxlbWVudCxcbiAgT21pdDxDb21wb25lbnRQcm9wczx0eXBlb2YgVmFyaWFibGVQcm92aWRlcj4sICdiZyc+ICYgQ29sb3JNb2RlUHJvcHNcbj4oKHsgbW9kZSwgYWx3YXlzU2V0VmFyaWFibGVzLCBiZywgaXNHbG9iYWwsIGNoaWxkcmVuLCAuLi5yZXN0IH0sIHJlZikgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IHsgbW9kZXMsIG1vZGU6IGFjdGl2ZSwgY29sb3JzIH0gPSB0aGVtZTtcbiAgY29uc3QgY29udGV4dEJnID0gYmcgPyAnYmFja2dyb3VuZC1jdXJyZW50JyA6IHVuZGVmaW5lZDtcblxuICAvKiogU2VyaWFsaXplIGNvbG9yIHZhcmlhYmxlcyBmb3IgdGhlIGN1cnJlbnQgbW9kZVxuICAgKiAxLiBJZiBhbGwgdmFyaWFibGVzIGFyZSByZXF1aXJlZCBhZGQgYWxsIG1vZGUgdmFyaWFibGVzIHRvIHRoZSBjdXJyZW50IGNvbnRleHRcbiAgICogMi4gSWYgdGhlIHVzZXIgaGFzIHNwZWNpZmllZCBhIGJhY2tncm91bmQgY29sb3IgLSBzZXQgdGhhdCBjb2xvciB0byB0aGUgY3VycmVudC1iZ1xuICAgKiAzLiBJZiBub3RcbiAgICovXG4gIGNvbnN0IHsgdmFyaWFibGVzIH0gPSB1c2VNZW1vKCgpID0+IHtcbiAgICByZXR1cm4gc2VyaWFsaXplVG9rZW5zKFxuICAgICAgbWFwVmFsdWVzKG1vZGVzW21vZGVdLCAoY29sb3IsIGtleSkgPT4ge1xuICAgICAgICBpZiAoa2V5ID09PSAnYmFja2dyb3VuZC1jdXJyZW50JyAmJiB0eXBlb2YgYmcgIT09ICd1bmRlZmluZWQnKSB7XG4gICAgICAgICAgcmV0dXJuIGNvbG9yc1tiZ107XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIGNvbG9yc1tjb2xvcl07XG4gICAgICB9KSxcbiAgICAgICdjb2xvcicsXG4gICAgICB0aGVtZVxuICAgICk7XG4gIH0sIFtjb2xvcnMsIG1vZGUsIG1vZGVzLCB0aGVtZSwgYmddKTtcblxuICBpZiAoYWN0aXZlID09PSBtb2RlKSB7XG4gICAgY29uc3QgdmFycyA9IGFsd2F5c1NldFZhcmlhYmxlc1xuICAgICAgPyB2YXJpYWJsZXNcbiAgICAgIDogcGljayh2YXJpYWJsZXMsIFsnLS1jb2xvci1iYWNrZ3JvdW5kLWN1cnJlbnQnXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFZhcmlhYmxlUHJvdmlkZXJcbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIHZhcmlhYmxlcz17dmFyc31cbiAgICAgICAgYmc9e2NvbnRleHRCZ31cbiAgICAgICAgc3R5bGVzPXtzY3JvbGxiYXJTdHlsZXN9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1ZhcmlhYmxlUHJvdmlkZXI+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFRoZW1lUHJvdmlkZXIgdGhlbWU9e3sgbW9kZSB9fT5cbiAgICAgIDxWYXJpYWJsZVByb3ZpZGVyXG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgICB2YXJpYWJsZXM9e3ZhcmlhYmxlc31cbiAgICAgICAgYmc9e2NvbnRleHRCZ31cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHN0eWxlcz17c2Nyb2xsYmFyU3R5bGVzfVxuICAgICAgPlxuICAgICAgICA8U2Nyb2xsYmFycyAvPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1ZhcmlhYmxlUHJvdmlkZXI+XG4gICAgPC9UaGVtZVByb3ZpZGVyPlxuICApO1xufSk7XG4iXX0= */");
 export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
   var mode = _ref4.mode,
       alwaysSetVariables = _ref4.alwaysSetVariables,
       bg = _ref4.bg,
+      isGlobal = _ref4.isGlobal,
       children = _ref4.children,
-      rest = _objectWithoutProperties(_ref4, ["mode", "alwaysSetVariables", "bg", "children"]);
+      rest = _objectWithoutProperties(_ref4, ["mode", "alwaysSetVariables", "bg", "isGlobal", "children"]);
 
   var theme = useTheme();
   var modes = theme.modes,
@@ -93,8 +96,9 @@ export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
     return /*#__PURE__*/React.createElement(VariableProvider, _extends({}, rest, {
       variables: vars,
       bg: contextBg,
+      styles: scrollbarStyles,
       ref: ref
-    }), /*#__PURE__*/React.createElement(Scrollbars, null), children);
+    }), children);
   }
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -104,6 +108,7 @@ export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
   }, /*#__PURE__*/React.createElement(VariableProvider, _extends({}, rest, {
     variables: variables,
     bg: contextBg,
-    ref: ref
+    ref: ref,
+    styles: scrollbarStyles
   }), /*#__PURE__*/React.createElement(Scrollbars, null), children));
 });

package/dist/ColorMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorMode.js","sourceRoot":"","sources":["../src/ColorMode.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorMode.js","sourceRoot":"","sources":["../src/ColorMode.tsx"],"names":[],"mappings":"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"}

package/dist/globals/Scrollbars.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const Scrollbars: () => JSX.Element;
+import { Theme } from '@emotion/react';
+export declare const scrollbarStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const Scrollbars: () => JSX.Element | null;

package/dist/globals/Scrollbars.js

@@ -1,25 +1,34 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+import { css as _css } from "@emotion/react";
 
-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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import { css, Global } from '@emotion/react';
+import { css, Global, useTheme } from '@emotion/react';
 import React from 'react';
-import { useColorModes } from '../ColorMode';
+export var scrollbarStyles = function scrollbarStyles(theme) {
+  var colors = theme.modes[theme.mode];
+  return /*#__PURE__*/css({
+    scrollbarColor: "var(--color-".concat(colors.scrollbar, ") var(--color-").concat(colors['background-current'], ")"),
+    scrollbarWidth: "thin",
+    '&::-webkit-scrollbar': {
+      backgroundColor: "transparent",
+      width: ".75em"
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: "var(--color-".concat(colors['background-current'], ")")
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: "var(--color-".concat(colors.scrollbar, ")"),
+      borderRadius: "20px",
+      border: "3px solid var(--color-".concat(colors['background-current'], ")")
+    }
+  }, ";label:scrollbarStyles;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1Njcm9sbGJhcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1TIiwiZmlsZSI6Ii4uLy4uL3NyYy9nbG9iYWxzL1Njcm9sbGJhcnMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwsIFRoZW1lLCB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxiYXJTdHlsZXMgPSAodGhlbWU6IFRoZW1lKSA9PiB7XG4gIGNvbnN0IGNvbG9ycyA9IHRoZW1lLm1vZGVzW3RoZW1lLm1vZGVdO1xuXG4gIHJldHVybiBjc3Moe1xuICAgIHNjcm9sbGJhckNvbG9yOiBgdmFyKC0tY29sb3ItJHtjb2xvcnMuc2Nyb2xsYmFyfSkgdmFyKC0tY29sb3ItJHtjb2xvcnNbJ2JhY2tncm91bmQtY3VycmVudCddfSlgLFxuICAgIHNjcm9sbGJhcldpZHRoOiBgdGhpbmAsXG5cbiAgICAnJjo6LXdlYmtpdC1zY3JvbGxiYXInOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGB0cmFuc3BhcmVudGAsXG4gICAgICB3aWR0aDogYC43NWVtYCxcbiAgICB9LFxuXG4gICAgJyY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrJzoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBgdmFyKC0tY29sb3ItJHtjb2xvcnNbJ2JhY2tncm91bmQtY3VycmVudCddfSlgLFxuICAgIH0sXG5cbiAgICAnJjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWInOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGB2YXIoLS1jb2xvci0ke2NvbG9ycy5zY3JvbGxiYXJ9KWAsXG4gICAgICBib3JkZXJSYWRpdXM6IGAyMHB4YCxcbiAgICAgIGJvcmRlcjogYDNweCBzb2xpZCB2YXIoLS1jb2xvci0ke2NvbG9yc1snYmFja2dyb3VuZC1jdXJyZW50J119KWAsXG4gICAgfSxcbiAgfSk7XG59O1xuXG5leHBvcnQgY29uc3QgU2Nyb2xsYmFycyA9ICgpID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCBoYXNHbG9iYWxCZyA9IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zdHlsZS5nZXRQcm9wZXJ0eVZhbHVlKFxuICAgICctLWhhcy1nbG9iYWwtYmFja2dyb3VuZCdcbiAgKTtcblxuICBpZiAoaGFzR2xvYmFsQmcpIHJldHVybiBudWxsO1xuXG4gIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1oYXMtZ2xvYmFsLWJhY2tncm91bmQnLCAndHJ1ZScpO1xuXG4gIHJldHVybiAoXG4gICAgPEdsb2JhbFxuICAgICAgc3R5bGVzPXt7XG4gICAgICAgIFtgaHRtbCwgYm9keWBdOiBzY3JvbGxiYXJTdHlsZXModGhlbWUpLFxuICAgICAgfX1cbiAgICAvPlxuICApO1xufTtcbiJdfQ== */"));
+};
 export var Scrollbars = function Scrollbars() {
-  var _useColorModes = useColorModes(),
-      _useColorModes2 = _slicedToArray(_useColorModes, 4),
-      activeColors = _useColorModes2[1],
-      getColorValue = _useColorModes2[3];
-
+  var theme = useTheme();
+  var hasGlobalBg = document.documentElement.style.getPropertyValue('--has-global-background');
+  if (hasGlobalBg) return null;
+  document.documentElement.style.setProperty('--has-global-background', 'true');
   return /*#__PURE__*/React.createElement(Global, {
-    styles: /*#__PURE__*/css("*{scrollbar-color:", getColorValue(activeColors.scrollbar), " ", getColorValue(activeColors['background-current']), ";scrollbar-width:thin;}*::-webkit-scrollbar{background:transparent;width:12px;}*::-webkit-scrollbar-track{background:", getColorValue(activeColors['background-current']), ";}*::-webkit-scrollbar-thumb{background-color:", getColorValue(activeColors.scrollbar), ";border-radius:20px;border:3px solid ", getColorValue(activeColors['background-current']), ";};label:Scrollbars;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1Njcm9sbGJhcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVpQiIsImZpbGUiOiIuLi8uLi9zcmMvZ2xvYmFscy9TY3JvbGxiYXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdXNlQ29sb3JNb2RlcyB9IGZyb20gJy4uL0NvbG9yTW9kZSc7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxiYXJzID0gKCkgPT4ge1xuICBjb25zdCBbLCBhY3RpdmVDb2xvcnMsICwgZ2V0Q29sb3JWYWx1ZV0gPSB1c2VDb2xvck1vZGVzKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8R2xvYmFsXG4gICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgKiB7XG4gICAgICAgICAgc2Nyb2xsYmFyLWNvbG9yOiAke2dldENvbG9yVmFsdWUoYWN0aXZlQ29sb3JzLnNjcm9sbGJhcil9XG4gICAgICAgICAgICAke2dldENvbG9yVmFsdWUoYWN0aXZlQ29sb3JzWydiYWNrZ3JvdW5kLWN1cnJlbnQnXSl9O1xuICAgICAgICAgIHNjcm9sbGJhci13aWR0aDogdGhpbjtcbiAgICAgICAgfVxuXG4gICAgICAgIC8qIFdvcmtzIG9uIENocm9tZSwgRWRnZSwgYW5kIFNhZmFyaSAqL1xuICAgICAgICAqOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICAgICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgd2lkdGg6IDEycHg7XG4gICAgICAgIH1cblxuICAgICAgICAqOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG4gICAgICAgICAgYmFja2dyb3VuZDogJHtnZXRDb2xvclZhbHVlKGFjdGl2ZUNvbG9yc1snYmFja2dyb3VuZC1jdXJyZW50J10pfTtcbiAgICAgICAgfVxuXG4gICAgICAgICo6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yVmFsdWUoYWN0aXZlQ29sb3JzLnNjcm9sbGJhcil9O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDIwcHg7XG4gICAgICAgICAgYm9yZGVyOiAzcHggc29saWQgJHtnZXRDb2xvclZhbHVlKGFjdGl2ZUNvbG9yc1snYmFja2dyb3VuZC1jdXJyZW50J10pfTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAvPlxuICApO1xufTtcbiJdfQ== */"))
+    styles: /*#__PURE__*/_css(_defineProperty({}, "html, body", scrollbarStyles(theme)), ";label:Scrollbars;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1Njcm9sbGJhcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDTSIsImZpbGUiOiIuLi8uLi9zcmMvZ2xvYmFscy9TY3JvbGxiYXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsLCBUaGVtZSwgdXNlVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsYmFyU3R5bGVzID0gKHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCBjb2xvcnMgPSB0aGVtZS5tb2Rlc1t0aGVtZS5tb2RlXTtcblxuICByZXR1cm4gY3NzKHtcbiAgICBzY3JvbGxiYXJDb2xvcjogYHZhcigtLWNvbG9yLSR7Y29sb3JzLnNjcm9sbGJhcn0pIHZhcigtLWNvbG9yLSR7Y29sb3JzWydiYWNrZ3JvdW5kLWN1cnJlbnQnXX0pYCxcbiAgICBzY3JvbGxiYXJXaWR0aDogYHRoaW5gLFxuXG4gICAgJyY6Oi13ZWJraXQtc2Nyb2xsYmFyJzoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBgdHJhbnNwYXJlbnRgLFxuICAgICAgd2lkdGg6IGAuNzVlbWAsXG4gICAgfSxcblxuICAgICcmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayc6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogYHZhcigtLWNvbG9yLSR7Y29sb3JzWydiYWNrZ3JvdW5kLWN1cnJlbnQnXX0pYCxcbiAgICB9LFxuXG4gICAgJyY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iJzoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBgdmFyKC0tY29sb3ItJHtjb2xvcnMuc2Nyb2xsYmFyfSlgLFxuICAgICAgYm9yZGVyUmFkaXVzOiBgMjBweGAsXG4gICAgICBib3JkZXI6IGAzcHggc29saWQgdmFyKC0tY29sb3ItJHtjb2xvcnNbJ2JhY2tncm91bmQtY3VycmVudCddfSlgLFxuICAgIH0sXG4gIH0pO1xufTtcblxuZXhwb3J0IGNvbnN0IFNjcm9sbGJhcnMgPSAoKSA9PiB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgaGFzR2xvYmFsQmcgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuZ2V0UHJvcGVydHlWYWx1ZShcbiAgICAnLS1oYXMtZ2xvYmFsLWJhY2tncm91bmQnXG4gICk7XG5cbiAgaWYgKGhhc0dsb2JhbEJnKSByZXR1cm4gbnVsbDtcblxuICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0taGFzLWdsb2JhbC1iYWNrZ3JvdW5kJywgJ3RydWUnKTtcblxuICByZXR1cm4gKFxuICAgIDxHbG9iYWxcbiAgICAgIHN0eWxlcz17e1xuICAgICAgICBbYGh0bWwsIGJvZHlgXTogc2Nyb2xsYmFyU3R5bGVzKHRoZW1lKSxcbiAgICAgIH19XG4gICAgLz5cbiAgKTtcbn07XG4iXX0= */"))
   });
 };

package/dist/globals/Scrollbars.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbars.js","sourceRoot":"","sources":["../../src/globals/Scrollbars.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,EAAE,YAAY,EAAE,AAAD,EAAG,aAAa,CAAC,GAAG,aAAa,EAAE,CAAC;IAE1D,OAAO,CACL,oBAAC,MAAM,IACL,MAAM,EAAE,GAAG,CAAA;;6BAEY,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC;cACpD,aAAa,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;;;;;;;;;;;wBAWvC,aAAa,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;;;;8BAI3C,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC;;8BAErC,aAAa,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;;OAExE,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Scrollbars.js","sourceRoot":"","sources":["../../src/globals/Scrollbars.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,EAAE;IAC9C,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,GAAG,CAAC;QACT,cAAc,EAAE,eAAe,MAAM,CAAC,SAAS,iBAAiB,MAAM,CAAC,oBAAoB,CAAC,GAAG;QAC/F,cAAc,EAAE,MAAM;QAEtB,sBAAsB,EAAE;YACtB,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,OAAO;SACf;QAED,4BAA4B,EAAE;YAC5B,eAAe,EAAE,eAAe,MAAM,CAAC,oBAAoB,CAAC,GAAG;SAChE;QAED,4BAA4B,EAAE;YAC5B,eAAe,EAAE,eAAe,MAAM,CAAC,SAAS,GAAG;YACnD,YAAY,EAAE,MAAM;YACpB,MAAM,EAAE,yBAAyB,MAAM,CAAC,oBAAoB,CAAC,GAAG;SACjE;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,gBAAgB,CACjE,yBAAyB,CAC1B,CAAC;IAEF,IAAI,WAAW;QAAE,OAAO,IAAI,CAAC;IAE7B,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAE9E,OAAO,CACL,oBAAC,MAAM,IACL,MAAM,EAAE;YACN,CAAC,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC;SACvC,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/variance/utils.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "13.0.3-alpha.2b82d6.0",
+  "version": "13.0.3-alpha.38607e.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ac9ec095dab92ecfd5d07cf88dc997f5d644bbae"
+  "gitHead": "4dc7514d98249e110983eacb8edc1a649563d735"
 }