@codecademy/gamut

Index: package/dist/BodyPortal/index.js
===================================================================
--- package/dist/BodyPortal/index.js
+++ package/dist/BodyPortal/index.js
@@ -1,6 +1,6 @@
 import _styled from "@emotion/styled/base";
-import { ColorMode, system, useCurrentMode } from '@codecademy/gamut-styles';
+import { ColorMode, system, useCurrentMode, zIndices } from '@codecademy/gamut-styles';
 import { useState } from 'react';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { useIsomorphicLayoutEffect } from 'react-use';
@@ -13,15 +13,15 @@
   top: 0,
   left: 0,
   right: 0,
   height: 0
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Cb2R5UG9ydGFsL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPc0IiLCJmaWxlIjoiLi4vLi4vc3JjL0JvZHlQb3J0YWwvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JNb2RlLCBzeXN0ZW0sIHVzZUN1cnJlbnRNb2RlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSc7XG5pbXBvcnQgeyB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0IH0gZnJvbSAncmVhY3QtdXNlJztcblxuY29uc3QgUG9ydGFsV3JhcHBlciA9IHN0eWxlZFxuICAuZGl2KFxuICAgIHN5c3RlbS5jc3Moe1xuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICB0b3A6IDAsXG4gICAgICBsZWZ0OiAwLFxuICAgICAgcmlnaHQ6IDAsXG4gICAgICBoZWlnaHQ6IDAsXG4gICAgfSlcbiAgKVxuICAud2l0aENvbXBvbmVudChDb2xvck1vZGUpO1xuXG5pbnRlcmZhY2UgQm9keVBvcnRhbFByb3BzIHtcbiAgLyoqXG4gICAqIFRFTVBPUkFSWTogYSBzdG9wZ2FwIHNvbHV0aW9uIHRvIGF2b2lkIHpJbmRleCBjb25mbGljdHMgLVxuICAgKiB3aWxsIGJlIHJld29ya2VkIHdpdGg6IEdNLTYyNFxuICAgKiBwcmV2aW91c2x5LCB6SW5kZXggd2FzIHNldCB0byAxIGluIHRoZSBDU1MgZnVuY3Rpb25cbiAgICovXG4gIHpJbmRleD86IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IEJvZHlQb3J0YWw6IFJlYWN0LkZDPFJlYWN0LlByb3BzV2l0aENoaWxkcmVuPEJvZHlQb3J0YWxQcm9wcz4+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIHpJbmRleCA9IDEsXG59KSA9PiB7XG4gIGNvbnN0IFtyZWFkeSwgc2V0UmVhZHldID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBtb2RlID0gdXNlQ3VycmVudE1vZGUoKTtcblxuICAvKiogRGVsYXkgaW5pdGlhbCByZW5kZXIgb25jZSB0byBlbnN1cmUgdGhhdCByZWh5ZHJhdGlvbiBkb2VzIG5vdCBjb25mbGljdCB3aXRoIHBvcnRhbCBtb3VudGluZyAqL1xuICB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBzZXRSZWFkeSh0eXBlb2YgZG9jdW1lbnQgIT09ICd1bmRlZmluZWQnKTtcbiAgfSwgW10pO1xuXG4gIGlmICghcmVhZHkpIHJldHVybiBudWxsO1xuXG4gIHJldHVybiBSZWFjdERPTS5jcmVhdGVQb3J0YWwoXG4gICAgPFBvcnRhbFdyYXBwZXIgYWx3YXlzU2V0VmFyaWFibGVzIG1vZGU9e21vZGV9IHpJbmRleD17ekluZGV4fT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1BvcnRhbFdyYXBwZXI+LFxuICAgIGRvY3VtZW50LmJvZHlcbiAgKTtcbn07XG4iXX0= */").withComponent(ColorMode, {
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Cb2R5UG9ydGFsL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZc0IiLCJmaWxlIjoiLi4vLi4vc3JjL0JvZHlQb3J0YWwvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29sb3JNb2RlLFxuICBzeXN0ZW0sXG4gIHVzZUN1cnJlbnRNb2RlLFxuICB6SW5kaWNlcyxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSc7XG5pbXBvcnQgeyB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0IH0gZnJvbSAncmVhY3QtdXNlJztcblxuY29uc3QgUG9ydGFsV3JhcHBlciA9IHN0eWxlZFxuICAuZGl2KFxuICAgIHN5c3RlbS5jc3Moe1xuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICB0b3A6IDAsXG4gICAgICBsZWZ0OiAwLFxuICAgICAgcmlnaHQ6IDAsXG4gICAgICBoZWlnaHQ6IDAsXG4gICAgfSlcbiAgKVxuICAud2l0aENvbXBvbmVudChDb2xvck1vZGUpO1xuXG5pbnRlcmZhY2UgQm9keVBvcnRhbFByb3BzIHtcbiAgLyoqXG4gICAqIFN0YWNraW5nIGxheWVyIGZvciB0aGUgcG9ydGFsZWQgY29udGVudC4gUGFzcyBhIGB6SW5kaWNlc2AgdG9rZW5cbiAgICogKGUuZy4gYHpJbmRpY2VzLm1vZGFsYCkgb3IgYSByYXcgbnVtYmVyIGFzIGFuIGVzY2FwZSBoYXRjaC4gRGVmYXVsdHMgdG9cbiAgICogYHpJbmRpY2VzLnBvcnRhbGAg4oCUIHRoZSBmbG9vciBvZiB0aGUgcG9ydGFsIGJhbmQg4oCUIHNvIHVuLXRva2VuaXplZCBwb3J0YWwgY29udGVudFxuICAgKiBzdGF5cyBhYm92ZSBsb2NhbCBwYWdlIGNvbnRlbnQgaW5zdGVhZCBvZiBzaWxlbnRseSBsYW5kaW5nIGF0IGEgbG93IHZhbHVlLlxuICAgKi9cbiAgekluZGV4PzogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgQm9keVBvcnRhbDogUmVhY3QuRkM8UmVhY3QuUHJvcHNXaXRoQ2hpbGRyZW48Qm9keVBvcnRhbFByb3BzPj4gPSAoe1xuICBjaGlsZHJlbixcbiAgekluZGV4ID0gekluZGljZXMucG9ydGFsLFxufSkgPT4ge1xuICBjb25zdCBbcmVhZHksIHNldFJlYWR5XSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgbW9kZSA9IHVzZUN1cnJlbnRNb2RlKCk7XG5cbiAgLyoqIERlbGF5IGluaXRpYWwgcmVuZGVyIG9uY2UgdG8gZW5zdXJlIHRoYXQgcmVoeWRyYXRpb24gZG9lcyBub3QgY29uZmxpY3Qgd2l0aCBwb3J0YWwgbW91bnRpbmcgKi9cbiAgdXNlSXNvbW9ycGhpY0xheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgc2V0UmVhZHkodHlwZW9mIGRvY3VtZW50ICE9PSAndW5kZWZpbmVkJyk7XG4gIH0sIFtdKTtcblxuICBpZiAoIXJlYWR5KSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gUmVhY3RET00uY3JlYXRlUG9ydGFsKFxuICAgIDxQb3J0YWxXcmFwcGVyIGFsd2F5c1NldFZhcmlhYmxlcyBtb2RlPXttb2RlfSB6SW5kZXg9e3pJbmRleH0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9Qb3J0YWxXcmFwcGVyPixcbiAgICBkb2N1bWVudC5ib2R5XG4gICk7XG59O1xuIl19 */").withComponent(ColorMode, {
   target: "e1litdw31",
   label: "PortalWrapper"
 });
 export const BodyPortal = ({
   children,
-  zIndex = 1
+  zIndex = zIndices.portal
 }) => {
   const [ready, setReady] = useState(false);
   const mode = useCurrentMode();