@codecademy/gamut 72.2.4-alpha.787061.0 → 72.2.4-alpha.dfb42c.0

package/agent-tools/skills/gamut-forms/SKILL.md

@@ -26,22 +26,6 @@ For typical product forms, prefer `GridForm` (declarative `fields`, `LayoutGrid`
 
 ---
 
-## SelectDropdown vs Select
-
-Use `Select` for standard single-select fields where bundle size matters and no special styling is needed. Use `SelectDropdown` when the design calls for any of:
-
-- Styled dropdown menu (react-select appearance)
-- Search / typeahead
-- Multi-select with tags
-- Creatable options
-- Option icons, subtitles, right labels, abbreviations, or grouped options
-
-`SelectDropdown` carries a larger JS dependency (react-select); don't reach for it as a default drop-in for `Select`.
-
-For full SelectDropdown API detail — controlled vs uncontrolled patterns, creatable options, react-select action metadata — use [`gamut-select-dropdown`](../gamut-select-dropdown/SKILL.md). Generic `FormGroup` wiring (labels, errors, live regions) still applies as documented below.
-
----
-
 ## `FormGroup` (baseline)
 
 `packages/gamut/src/Form/elements/FormGroup.tsx`

package/dist/Anchor/index.js

@@ -1,6 +1,6 @@
 import _styled from "@emotion/styled/base";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { styledOptions, system, variant } from '@codecademy/gamut-styles';
+import { styledOptions, system, variant, zIndices } from '@codecademy/gamut-styles';
 import { variance } from '@codecademy/variance';
 import { forwardRef } from 'react';
 import { ButtonBase, ButtonSelectors } from '../ButtonBase/ButtonBase';
@@ -15,7 +15,7 @@ const outlineFocusVisible = {
     border: 2,
     borderColor: 'primary',
     opacity: 0,
-    zIndex: 0
+    zIndex: zIndices.base
   },
   [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: {
     opacity: 1
@@ -95,7 +95,7 @@ const anchorProps = variance.compose(system.layout, system.space, system.typogra
 export const AnchorBase = /*#__PURE__*/_styled('a', _extends({}, {
   target: "e14vpv2g0",
   label: "AnchorBase"
-}, styledOptions()))(anchorVariants, anchorProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BbmNob3IvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZHMEIiLCJmaWxlIjoiLi4vLi4vc3JjL0FuY2hvci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWRPcHRpb25zLCBzeXN0ZW0sIHZhcmlhbnQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcywgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBDb21wb25lbnRQcm9wcywgZm9yd2FyZFJlZiwgSFRNTFByb3BzLCBSZWZPYmplY3QgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJ1dHRvbkJhc2UsIEJ1dHRvblNlbGVjdG9ycyB9IGZyb20gJy4uL0J1dHRvbkJhc2UvQnV0dG9uQmFzZSc7XG5pbXBvcnQgeyBBcHBlbmRlZEljb25Qcm9wcywgYXBwZW5kSWNvblRvQ29udGVudCB9IGZyb20gJy4uL2hlbHBlcnMnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEFuY2hvclByb3BzXG4gIGV4dGVuZHMgU3R5bGVQcm9wczx0eXBlb2YgYW5jaG9yUHJvcHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIGFuY2hvclZhcmlhbnRzPiB7XG4gIG9uQ2xpY2s/OiBIVE1MUHJvcHM8SFRNTEFuY2hvckVsZW1lbnQ+WydvbkNsaWNrJ107XG59XG5cbmNvbnN0IG91dGxpbmVGb2N1c1Zpc2libGUgPSB7XG4gIFtCdXR0b25TZWxlY3RvcnMuT1VUTElORV06IHtcbiAgICBjb250ZW50OiBcIicnXCIsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgaW5zZXQ6IC00LFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICBib3JkZXI6IDIsXG4gICAgYm9yZGVyQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvcGFjaXR5OiAwLFxuICAgIHpJbmRleDogMCxcbiAgfSxcblxuICBbQnV0dG9uU2VsZWN0b3JzLk9VVExJTkVfRk9DVVNfVklTSUJMRV06IHtcbiAgICBvcGFjaXR5OiAxLFxuICB9LFxufSBhcyBjb25zdDtcblxuY29uc3QgdW5kZXJsaW5lRm9jdXNWaXNpYmxlID0ge1xuICBbQnV0dG9uU2VsZWN0b3JzLkZPQ1VTX1ZJU0lCTEVdOiB7XG4gICAgb3V0bGluZTogJ2N1cnJlbnRDb2xvciBzb2xpZCAycHgnLFxuICAgIGJvcmRlclJhZGl1czogJ3NtJyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMS41cHgnLFxuICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgfSxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IGFuY2hvclZhcmlhbnRzID0gdmFyaWFudCh7XG4gIGJhc2U6IHtcbiAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJyxcbiAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICBib3hTaGFkb3c6ICdub25lJyxcbiAgICBib3JkZXI6ICdub25lJyxcbiAgICBwOiAwLFxuICAgIGZvbnRTaXplOiAnaW5oZXJpdCcsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICBbQnV0dG9uU2VsZWN0b3JzLkhPVkVSXToge1xuICAgICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgIH0sXG4gICAgW0J1dHRvblNlbGVjdG9ycy5ESVNBQkxFRF06IHtcbiAgICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICAgIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gICAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIH0sXG4gIH0sXG4gIHZhcmlhbnRzOiB7XG4gICAgc3RhbmRhcmQ6IHtcbiAgICAgIGNvbG9yOiAncHJpbWFyeScsXG4gICAgICBmb250V2VpZ2h0OiAnYm9sZCcsXG4gICAgICBXZWJraXRGb250U21vb3RoaW5nOiAnYW50aWFsaWFzZWQnLFxuICAgICAgTW96T3N4Rm9udFNtb290aGluZzogJ2dyYXlzY2FsZScsXG4gICAgICBbQnV0dG9uU2VsZWN0b3JzLkhPVkVSXToge1xuICAgICAgICB0ZXh0RGVjb3JhdGlvbjogJ3VuZGVybGluZScsXG4gICAgICB9LFxuICAgICAgW0J1dHRvblNlbGVjdG9ycy5GT0NVU19WSVNJQkxFXToge1xuICAgICAgICBXZWJraXRGb250U21vb3RoaW5nOiAnYW50aWFsaWFzZWQnLFxuICAgICAgICBNb3pPc3hGb250U21vb3RoaW5nOiAnZ3JheXNjYWxlJyxcbiAgICAgICAgb3V0bGluZTogJ25vbmUnLFxuICAgICAgfSxcbiAgICAgIC4uLm91dGxpbmVGb2N1c1Zpc2libGUsXG4gICAgfSxcbiAgICBpbmxpbmU6IHtcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUnLFxuICAgICAgd2hpdGVTcGFjZTogJ2luaXRpYWwnLFxuICAgICAgdGV4dERlY29yYXRpb246ICd1bmRlcmxpbmUnLFxuICAgICAgLi4udW5kZXJsaW5lRm9jdXNWaXNpYmxlLFxuICAgIH0sXG4gICAgaW50ZXJmYWNlOiB7XG4gICAgICBjb2xvcjogJ3RleHQnLFxuICAgICAgd2hpdGVTcGFjZTogJ2luaXRpYWwnLFxuICAgICAgW0J1dHRvblNlbGVjdG9ycy5IT1ZFUl06IHtcbiAgICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIH0sXG4gICAgICBbQnV0dG9uU2VsZWN0b3JzLkZPQ1VTX1ZJU0lCTEVdOiB7XG4gICAgICAgIGNvbG9yOiAncHJpbWFyeScsXG4gICAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICAgIH0sXG4gICAgICAuLi5vdXRsaW5lRm9jdXNWaXNpYmxlLFxuICAgIH0sXG4gICAgJ3N0YW5kYXJkLXNlY29uZGFyeSc6IHtcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgICB0ZXh0RGVjb3JhdGlvbjogJ3VuZGVybGluZScsXG4gICAgICAuLi51bmRlcmxpbmVGb2N1c1Zpc2libGUsXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5jb25zdCBhbmNob3JQcm9wcyA9IHZhcmlhbmNlLmNvbXBvc2UoXG4gIHN5c3RlbS5sYXlvdXQsXG4gIHN5c3RlbS5zcGFjZSxcbiAgc3lzdGVtLnR5cG9ncmFwaHlcbik7XG5cbmV4cG9ydCBjb25zdCBBbmNob3JCYXNlID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpPEFuY2hvclByb3BzPihcbiAgYW5jaG9yVmFyaWFudHMsXG4gIGFuY2hvclByb3BzXG4pO1xuXG50eXBlIEFuY2hvckJhc2VQcm9wcyA9XG4gIHwgQ29tcG9uZW50UHJvcHM8dHlwZW9mIEFuY2hvckJhc2U+XG4gIHwgKEV4Y2x1ZGU8Q29tcG9uZW50UHJvcHM8dHlwZW9mIEFuY2hvckJhc2U+LCAncmVmJz4gJlxuICAgICAgQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJ1dHRvbkJhc2U+KTtcblxudHlwZSBBbmNob3JFeHRQcm9wcyA9IFBhcnRpYWw8QXBwZW5kZWRJY29uUHJvcHM+ICYgQW5jaG9yQmFzZVByb3BzO1xuXG5leHBvcnQgY29uc3QgQW5jaG9yID0gZm9yd2FyZFJlZjxcbiAgSFRNTEFuY2hvckVsZW1lbnQgfCBIVE1MQnV0dG9uRWxlbWVudCxcbiAgQW5jaG9yRXh0UHJvcHNcbj4oXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGljb24sXG4gICAgICBpY29uT2Zmc2V0LFxuICAgICAgaWNvblBvc2l0aW9uID0gJ2xlZnQnLFxuICAgICAgaWNvblNpemUgPSAxNixcbiAgICAgIGljb25BbmRUZXh0R2FwID0gOCxcbiAgICAgIGlzSW5saW5lSWNvbiA9IHRydWUsXG4gICAgICB2YXJpYW50ID0gJ2lubGluZScsXG4gICAgICAuLi5yZXN0XG4gICAgfSxcbiAgICByZWZcbiAgKSA9PiB7XG4gICAgY29uc3QgY29udGVudCA9IGFwcGVuZEljb25Ub0NvbnRlbnQoe1xuICAgICAgY2hpbGRyZW4sXG4gICAgICBpY29uLFxuICAgICAgaWNvbk9mZnNldCxcbiAgICAgIGljb25Qb3NpdGlvbixcbiAgICAgIGljb25TaXplLFxuICAgICAgaWNvbkFuZFRleHRHYXAsXG4gICAgICBpc0lubGluZUljb24sXG4gICAgfSk7XG4gICAgaWYgKCFyZXN0LmhyZWYpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxBbmNob3JCYXNlXG4gICAgICAgICAgYXM9e0J1dHRvbkJhc2V9XG4gICAgICAgICAgcmVmPXtyZWYgYXMgUmVmT2JqZWN0PEhUTUxBbmNob3JFbGVtZW50Pn1cbiAgICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICA+XG4gICAgICAgICAge2NvbnRlbnR9XG4gICAgICAgIDwvQW5jaG9yQmFzZT5cbiAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDxBbmNob3JCYXNlXG4gICAgICAgIHJlZj17cmVmIGFzIFJlZk9iamVjdDxIVE1MQW5jaG9yRWxlbWVudD59XG4gICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgPlxuICAgICAgICB7Y29udGVudH1cbiAgICAgIDwvQW5jaG9yQmFzZT5cbiAgICApO1xuICB9XG4pO1xuIl19 */");
+}, styledOptions()))(anchorVariants, anchorProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BbmNob3IvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtIMEIiLCJmaWxlIjoiLi4vLi4vc3JjL0FuY2hvci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzdHlsZWRPcHRpb25zLFxuICBzeXN0ZW0sXG4gIHZhcmlhbnQsXG4gIHpJbmRpY2VzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcywgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBDb21wb25lbnRQcm9wcywgZm9yd2FyZFJlZiwgSFRNTFByb3BzLCBSZWZPYmplY3QgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJ1dHRvbkJhc2UsIEJ1dHRvblNlbGVjdG9ycyB9IGZyb20gJy4uL0J1dHRvbkJhc2UvQnV0dG9uQmFzZSc7XG5pbXBvcnQgeyBBcHBlbmRlZEljb25Qcm9wcywgYXBwZW5kSWNvblRvQ29udGVudCB9IGZyb20gJy4uL2hlbHBlcnMnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEFuY2hvclByb3BzXG4gIGV4dGVuZHMgU3R5bGVQcm9wczx0eXBlb2YgYW5jaG9yUHJvcHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIGFuY2hvclZhcmlhbnRzPiB7XG4gIG9uQ2xpY2s/OiBIVE1MUHJvcHM8SFRNTEFuY2hvckVsZW1lbnQ+WydvbkNsaWNrJ107XG59XG5cbmNvbnN0IG91dGxpbmVGb2N1c1Zpc2libGUgPSB7XG4gIFtCdXR0b25TZWxlY3RvcnMuT1VUTElORV06IHtcbiAgICBjb250ZW50OiBcIicnXCIsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgaW5zZXQ6IC00LFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICBib3JkZXI6IDIsXG4gICAgYm9yZGVyQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvcGFjaXR5OiAwLFxuICAgIHpJbmRleDogekluZGljZXMuYmFzZSxcbiAgfSxcblxuICBbQnV0dG9uU2VsZWN0b3JzLk9VVExJTkVfRk9DVVNfVklTSUJMRV06IHtcbiAgICBvcGFjaXR5OiAxLFxuICB9LFxufSBhcyBjb25zdDtcblxuY29uc3QgdW5kZXJsaW5lRm9jdXNWaXNpYmxlID0ge1xuICBbQnV0dG9uU2VsZWN0b3JzLkZPQ1VTX1ZJU0lCTEVdOiB7XG4gICAgb3V0bGluZTogJ2N1cnJlbnRDb2xvciBzb2xpZCAycHgnLFxuICAgIGJvcmRlclJhZGl1czogJ3NtJyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMS41cHgnLFxuICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgfSxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IGFuY2hvclZhcmlhbnRzID0gdmFyaWFudCh7XG4gIGJhc2U6IHtcbiAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJyxcbiAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICBib3hTaGFkb3c6ICdub25lJyxcbiAgICBib3JkZXI6ICdub25lJyxcbiAgICBwOiAwLFxuICAgIGZvbnRTaXplOiAnaW5oZXJpdCcsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICBbQnV0dG9uU2VsZWN0b3JzLkhPVkVSXToge1xuICAgICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgIH0sXG4gICAgW0J1dHRvblNlbGVjdG9ycy5ESVNBQkxFRF06IHtcbiAgICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICAgIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gICAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIH0sXG4gIH0sXG4gIHZhcmlhbnRzOiB7XG4gICAgc3RhbmRhcmQ6IHtcbiAgICAgIGNvbG9yOiAncHJpbWFyeScsXG4gICAgICBmb250V2VpZ2h0OiAnYm9sZCcsXG4gICAgICBXZWJraXRGb250U21vb3RoaW5nOiAnYW50aWFsaWFzZWQnLFxuICAgICAgTW96T3N4Rm9udFNtb290aGluZzogJ2dyYXlzY2FsZScsXG4gICAgICBbQnV0dG9uU2VsZWN0b3JzLkhPVkVSXToge1xuICAgICAgICB0ZXh0RGVjb3JhdGlvbjogJ3VuZGVybGluZScsXG4gICAgICB9LFxuICAgICAgW0J1dHRvblNlbGVjdG9ycy5GT0NVU19WSVNJQkxFXToge1xuICAgICAgICBXZWJraXRGb250U21vb3RoaW5nOiAnYW50aWFsaWFzZWQnLFxuICAgICAgICBNb3pPc3hGb250U21vb3RoaW5nOiAnZ3JheXNjYWxlJyxcbiAgICAgICAgb3V0bGluZTogJ25vbmUnLFxuICAgICAgfSxcbiAgICAgIC4uLm91dGxpbmVGb2N1c1Zpc2libGUsXG4gICAgfSxcbiAgICBpbmxpbmU6IHtcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUnLFxuICAgICAgd2hpdGVTcGFjZTogJ2luaXRpYWwnLFxuICAgICAgdGV4dERlY29yYXRpb246ICd1bmRlcmxpbmUnLFxuICAgICAgLi4udW5kZXJsaW5lRm9jdXNWaXNpYmxlLFxuICAgIH0sXG4gICAgaW50ZXJmYWNlOiB7XG4gICAgICBjb2xvcjogJ3RleHQnLFxuICAgICAgd2hpdGVTcGFjZTogJ2luaXRpYWwnLFxuICAgICAgW0J1dHRvblNlbGVjdG9ycy5IT1ZFUl06IHtcbiAgICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIH0sXG4gICAgICBbQnV0dG9uU2VsZWN0b3JzLkZPQ1VTX1ZJU0lCTEVdOiB7XG4gICAgICAgIGNvbG9yOiAncHJpbWFyeScsXG4gICAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICAgIH0sXG4gICAgICAuLi5vdXRsaW5lRm9jdXNWaXNpYmxlLFxuICAgIH0sXG4gICAgJ3N0YW5kYXJkLXNlY29uZGFyeSc6IHtcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgICB0ZXh0RGVjb3JhdGlvbjogJ3VuZGVybGluZScsXG4gICAgICAuLi51bmRlcmxpbmVGb2N1c1Zpc2libGUsXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5jb25zdCBhbmNob3JQcm9wcyA9IHZhcmlhbmNlLmNvbXBvc2UoXG4gIHN5c3RlbS5sYXlvdXQsXG4gIHN5c3RlbS5zcGFjZSxcbiAgc3lzdGVtLnR5cG9ncmFwaHlcbik7XG5cbmV4cG9ydCBjb25zdCBBbmNob3JCYXNlID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpPEFuY2hvclByb3BzPihcbiAgYW5jaG9yVmFyaWFudHMsXG4gIGFuY2hvclByb3BzXG4pO1xuXG50eXBlIEFuY2hvckJhc2VQcm9wcyA9XG4gIHwgQ29tcG9uZW50UHJvcHM8dHlwZW9mIEFuY2hvckJhc2U+XG4gIHwgKEV4Y2x1ZGU8Q29tcG9uZW50UHJvcHM8dHlwZW9mIEFuY2hvckJhc2U+LCAncmVmJz4gJlxuICAgICAgQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJ1dHRvbkJhc2U+KTtcblxudHlwZSBBbmNob3JFeHRQcm9wcyA9IFBhcnRpYWw8QXBwZW5kZWRJY29uUHJvcHM+ICYgQW5jaG9yQmFzZVByb3BzO1xuXG5leHBvcnQgY29uc3QgQW5jaG9yID0gZm9yd2FyZFJlZjxcbiAgSFRNTEFuY2hvckVsZW1lbnQgfCBIVE1MQnV0dG9uRWxlbWVudCxcbiAgQW5jaG9yRXh0UHJvcHNcbj4oXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGljb24sXG4gICAgICBpY29uT2Zmc2V0LFxuICAgICAgaWNvblBvc2l0aW9uID0gJ2xlZnQnLFxuICAgICAgaWNvblNpemUgPSAxNixcbiAgICAgIGljb25BbmRUZXh0R2FwID0gOCxcbiAgICAgIGlzSW5saW5lSWNvbiA9IHRydWUsXG4gICAgICB2YXJpYW50ID0gJ2lubGluZScsXG4gICAgICAuLi5yZXN0XG4gICAgfSxcbiAgICByZWZcbiAgKSA9PiB7XG4gICAgY29uc3QgY29udGVudCA9IGFwcGVuZEljb25Ub0NvbnRlbnQoe1xuICAgICAgY2hpbGRyZW4sXG4gICAgICBpY29uLFxuICAgICAgaWNvbk9mZnNldCxcbiAgICAgIGljb25Qb3NpdGlvbixcbiAgICAgIGljb25TaXplLFxuICAgICAgaWNvbkFuZFRleHRHYXAsXG4gICAgICBpc0lubGluZUljb24sXG4gICAgfSk7XG4gICAgaWYgKCFyZXN0LmhyZWYpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxBbmNob3JCYXNlXG4gICAgICAgICAgYXM9e0J1dHRvbkJhc2V9XG4gICAgICAgICAgcmVmPXtyZWYgYXMgUmVmT2JqZWN0PEhUTUxBbmNob3JFbGVtZW50Pn1cbiAgICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICA+XG4gICAgICAgICAge2NvbnRlbnR9XG4gICAgICAgIDwvQW5jaG9yQmFzZT5cbiAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDxBbmNob3JCYXNlXG4gICAgICAgIHJlZj17cmVmIGFzIFJlZk9iamVjdDxIVE1MQW5jaG9yRWxlbWVudD59XG4gICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgPlxuICAgICAgICB7Y29udGVudH1cbiAgICAgIDwvQW5jaG9yQmFzZT5cbiAgICApO1xuICB9XG4pO1xuIl19 */");
 export const Anchor = /*#__PURE__*/forwardRef(({
   children,
   icon,

package/dist/BarChart/layout/GridLines.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-import { css } from '@codecademy/gamut-styles';
+import { css, zIndices } from '@codecademy/gamut-styles';
 import React, { useMemo } from 'react';
 import { Box } from '../../Box';
 import { useLabelPositions } from '../utils/hooks';
@@ -12,8 +12,8 @@ const GridLineWrapper = /*#__PURE__*/_styled(Box, {
   inset: 0,
   pointerEvents: 'none',
   position: 'absolute',
-  zIndex: 0
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9HcmlkTGluZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgU2NhbGVBeGlzTGF5b3V0UHJvcHMgfSBmcm9tICcuLi9zaGFyZWQvdHlwZXMnO1xuaW1wb3J0IHsgdXNlTGFiZWxQb3NpdGlvbnMgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5pbXBvcnQgeyBMYWJlbFNwYWNlciB9IGZyb20gJy4vTGFiZWxTcGFjZXInO1xuXG5jb25zdCBHcmlkTGluZVdyYXBwZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBpbnNldDogMCxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgekluZGV4OiAwLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmVDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGJvcmRlclg6IDEsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIGNfeHM6ICdibG9jaycgfSxcbiAgICBpbnNldDogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lID0gc3R5bGVkKEJveCk8eyBwb3NpdGlvblBlcmNlbnQ6IG51bWJlciB9PihcbiAgY3NzKHtcbiAgICBib3JkZXJMZWZ0OiAxLFxuICAgIGJvcmRlckNvbG9yTGVmdDogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCB9KSA9PiAoe1xuICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKC01MCUpJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBHcmlkTGluZXM6IFJlYWN0LkZDPFNjYWxlQXhpc0xheW91dFByb3BzPiA9ICh7XG4gIG1heFNjYWxlVmFsdWUsXG4gIHRpY2tDb3VudCxcbn0pID0+IHtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7XG4gICAgbWF4U2NhbGVWYWx1ZSxcbiAgICB0aWNrQ291bnQsXG4gIH0pO1xuXG4gIGNvbnN0IGxpbmVzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHBvc2l0aW9uUGVyY2VudCwgdmFsdWUgfSkgPT4gKFxuICAgICAgICA8R3JpZExpbmVcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIGtleT17YGdyaWRsaW5lLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICAgIC8+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnNdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPExhYmVsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L0xhYmVsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+  zIndex: zIndices.base
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9HcmlkTGluZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCB6SW5kaWNlcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFNjYWxlQXhpc0xheW91dFByb3BzIH0gZnJvbSAnLi4vc2hhcmVkL3R5cGVzJztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgaW5zZXQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHpJbmRleDogekluZGljZXMuYmFzZSxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBib3JkZXJYOiAxLFxuICAgIGRpc3BsYXk6IHsgXzogJ25vbmUnLCBjX3hzOiAnYmxvY2snIH0sXG4gICAgaW5zZXQ6IDAsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmVzOiBSZWFjdC5GQzxTY2FsZUF4aXNMYXlvdXRQcm9wcz4gPSAoe1xuICBtYXhTY2FsZVZhbHVlLFxuICB0aWNrQ291bnQsXG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoe1xuICAgIG1heFNjYWxlVmFsdWUsXG4gICAgdGlja0NvdW50LFxuICB9KTtcblxuICBjb25zdCBsaW5lcyA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIGxhYmVsUG9zaXRpb25zLm1hcCgoeyBwb3NpdGlvblBlcmNlbnQsIHZhbHVlIH0pID0+IChcbiAgICAgICAgPEdyaWRMaW5lXG4gICAgICAgICAgYXJpYS1oaWRkZW5cbiAgICAgICAgICBrZXk9e2BncmlkbGluZS0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgICAgIHBvc2l0aW9uUGVyY2VudD17cG9zaXRpb25QZXJjZW50fVxuICAgICAgICAvPlxuICAgICAgKSksXG4gICAgW2xhYmVsUG9zaXRpb25zXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWRMaW5lV3JhcHBlciBhcmlhLWhpZGRlbj5cbiAgICAgIDxMYWJlbFNwYWNlcj5cbiAgICAgICAgPEdyaWRMaW5lQ29udGFpbmVyPntsaW5lc308L0dyaWRMaW5lQ29udGFpbmVyPlxuICAgICAgPC9MYWJlbFNwYWNlcj5cbiAgICA8L0dyaWRMaW5lV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */");
 const GridLineContainer = /*#__PURE__*/_styled(Box, {
   target: "ejng4zk1",
   label: "GridLineContainer"
@@ -26,7 +26,7 @@ const GridLineContainer = /*#__PURE__*/_styled(Box, {
   },
   inset: 0,
   position: 'absolute'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFNjYWxlQXhpc0xheW91dFByb3BzIH0gZnJvbSAnLi4vc2hhcmVkL3R5cGVzJztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgaW5zZXQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHpJbmRleDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBib3JkZXJYOiAxLFxuICAgIGRpc3BsYXk6IHsgXzogJ25vbmUnLCBjX3hzOiAnYmxvY2snIH0sXG4gICAgaW5zZXQ6IDAsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmVzOiBSZWFjdC5GQzxTY2FsZUF4aXNMYXlvdXRQcm9wcz4gPSAoe1xuICBtYXhTY2FsZVZhbHVlLFxuICB0aWNrQ291bnQsXG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoe1xuICAgIG1heFNjYWxlVmFsdWUsXG4gICAgdGlja0NvdW50LFxuICB9KTtcblxuICBjb25zdCBsaW5lcyA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIGxhYmVsUG9zaXRpb25zLm1hcCgoeyBwb3NpdGlvblBlcmNlbnQsIHZhbHVlIH0pID0+IChcbiAgICAgICAgPEdyaWRMaW5lXG4gICAgICAgICAgYXJpYS1oaWRkZW5cbiAgICAgICAgICBrZXk9e2BncmlkbGluZS0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgICAgIHBvc2l0aW9uUGVyY2VudD17cG9zaXRpb25QZXJjZW50fVxuICAgICAgICAvPlxuICAgICAgKSksXG4gICAgW2xhYmVsUG9zaXRpb25zXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWRMaW5lV3JhcHBlciBhcmlhLWhpZGRlbj5cbiAgICAgIDxMYWJlbFNwYWNlcj5cbiAgICAgICAgPEdyaWRMaW5lQ29udGFpbmVyPntsaW5lc308L0dyaWRMaW5lQ29udGFpbmVyPlxuICAgICAgPC9MYWJlbFNwYWNlcj5cbiAgICA8L0dyaWRMaW5lV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgekluZGljZXMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyBTY2FsZUF4aXNMYXlvdXRQcm9wcyB9IGZyb20gJy4uL3NoYXJlZC90eXBlcyc7XG5pbXBvcnQgeyB1c2VMYWJlbFBvc2l0aW9ucyB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcbmltcG9ydCB7IExhYmVsU3BhY2VyIH0gZnJvbSAnLi9MYWJlbFNwYWNlcic7XG5cbmNvbnN0IEdyaWRMaW5lV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGluc2V0OiAwLFxuICAgIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB6SW5kZXg6IHpJbmRpY2VzLmJhc2UsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZUNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgYm9yZGVyWDogMSxcbiAgICBkaXNwbGF5OiB7IF86ICdub25lJywgY194czogJ2Jsb2NrJyB9LFxuICAgIGluc2V0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmUgPSBzdHlsZWQoQm94KTx7IHBvc2l0aW9uUGVyY2VudDogbnVtYmVyIH0+KFxuICBjc3Moe1xuICAgIGJvcmRlckxlZnQ6IDEsXG4gICAgYm9yZGVyQ29sb3JMZWZ0OiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50IH0pID0+ICh7XG4gICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTUwJSknLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lczogUmVhY3QuRkM8U2NhbGVBeGlzTGF5b3V0UHJvcHM+ID0gKHtcbiAgbWF4U2NhbGVWYWx1ZSxcbiAgdGlja0NvdW50LFxufSkgPT4ge1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHtcbiAgICBtYXhTY2FsZVZhbHVlLFxuICAgIHRpY2tDb3VudCxcbiAgfSk7XG5cbiAgY29uc3QgbGluZXMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBsYWJlbFBvc2l0aW9ucy5tYXAoKHsgcG9zaXRpb25QZXJjZW50LCB2YWx1ZSB9KSA9PiAoXG4gICAgICAgIDxHcmlkTGluZVxuICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAga2V5PXtgZ3JpZGxpbmUtJHt2YWx1ZX0tJHtwb3NpdGlvblBlcmNlbnR9YH1cbiAgICAgICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAgICAgLz5cbiAgICAgICkpLFxuICAgIFtsYWJlbFBvc2l0aW9uc11cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxHcmlkTGluZVdyYXBwZXIgYXJpYS1oaWRkZW4+XG4gICAgICA8TGFiZWxTcGFjZXI+XG4gICAgICAgIDxHcmlkTGluZUNvbnRhaW5lcj57bGluZXN9PC9HcmlkTGluZUNvbnRhaW5lcj5cbiAgICAgIDwvTGFiZWxTcGFjZXI+XG4gICAgPC9HcmlkTGluZVdyYXBwZXI+XG4gICk7XG59O1xuIl19 */");
 const GridLine = /*#__PURE__*/_styled(Box, {
   target: "ejng4zk0",
   label: "GridLine"
@@ -42,7 +42,7 @@ const GridLine = /*#__PURE__*/_styled(Box, {
 }) => ({
   left: `${positionPercent}%`,
   transform: 'translateX(-50%)'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QmlCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFNjYWxlQXhpc0xheW91dFByb3BzIH0gZnJvbSAnLi4vc2hhcmVkL3R5cGVzJztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgaW5zZXQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHpJbmRleDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBib3JkZXJYOiAxLFxuICAgIGRpc3BsYXk6IHsgXzogJ25vbmUnLCBjX3hzOiAnYmxvY2snIH0sXG4gICAgaW5zZXQ6IDAsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmVzOiBSZWFjdC5GQzxTY2FsZUF4aXNMYXlvdXRQcm9wcz4gPSAoe1xuICBtYXhTY2FsZVZhbHVlLFxuICB0aWNrQ291bnQsXG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoe1xuICAgIG1heFNjYWxlVmFsdWUsXG4gICAgdGlja0NvdW50LFxuICB9KTtcblxuICBjb25zdCBsaW5lcyA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIGxhYmVsUG9zaXRpb25zLm1hcCgoeyBwb3NpdGlvblBlcmNlbnQsIHZhbHVlIH0pID0+IChcbiAgICAgICAgPEdyaWRMaW5lXG4gICAgICAgICAgYXJpYS1oaWRkZW5cbiAgICAgICAgICBrZXk9e2BncmlkbGluZS0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgICAgIHBvc2l0aW9uUGVyY2VudD17cG9zaXRpb25QZXJjZW50fVxuICAgICAgICAvPlxuICAgICAgKSksXG4gICAgW2xhYmVsUG9zaXRpb25zXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWRMaW5lV3JhcHBlciBhcmlhLWhpZGRlbj5cbiAgICAgIDxMYWJlbFNwYWNlcj5cbiAgICAgICAgPEdyaWRMaW5lQ29udGFpbmVyPntsaW5lc308L0dyaWRMaW5lQ29udGFpbmVyPlxuICAgICAgPC9MYWJlbFNwYWNlcj5cbiAgICA8L0dyaWRMaW5lV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QmlCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgekluZGljZXMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyBTY2FsZUF4aXNMYXlvdXRQcm9wcyB9IGZyb20gJy4uL3NoYXJlZC90eXBlcyc7XG5pbXBvcnQgeyB1c2VMYWJlbFBvc2l0aW9ucyB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcbmltcG9ydCB7IExhYmVsU3BhY2VyIH0gZnJvbSAnLi9MYWJlbFNwYWNlcic7XG5cbmNvbnN0IEdyaWRMaW5lV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGluc2V0OiAwLFxuICAgIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB6SW5kZXg6IHpJbmRpY2VzLmJhc2UsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZUNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgYm9yZGVyWDogMSxcbiAgICBkaXNwbGF5OiB7IF86ICdub25lJywgY194czogJ2Jsb2NrJyB9LFxuICAgIGluc2V0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmUgPSBzdHlsZWQoQm94KTx7IHBvc2l0aW9uUGVyY2VudDogbnVtYmVyIH0+KFxuICBjc3Moe1xuICAgIGJvcmRlckxlZnQ6IDEsXG4gICAgYm9yZGVyQ29sb3JMZWZ0OiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50IH0pID0+ICh7XG4gICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTUwJSknLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lczogUmVhY3QuRkM8U2NhbGVBeGlzTGF5b3V0UHJvcHM+ID0gKHtcbiAgbWF4U2NhbGVWYWx1ZSxcbiAgdGlja0NvdW50LFxufSkgPT4ge1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHtcbiAgICBtYXhTY2FsZVZhbHVlLFxuICAgIHRpY2tDb3VudCxcbiAgfSk7XG5cbiAgY29uc3QgbGluZXMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBsYWJlbFBvc2l0aW9ucy5tYXAoKHsgcG9zaXRpb25QZXJjZW50LCB2YWx1ZSB9KSA9PiAoXG4gICAgICAgIDxHcmlkTGluZVxuICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAga2V5PXtgZ3JpZGxpbmUtJHt2YWx1ZX0tJHtwb3NpdGlvblBlcmNlbnR9YH1cbiAgICAgICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAgICAgLz5cbiAgICAgICkpLFxuICAgIFtsYWJlbFBvc2l0aW9uc11cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxHcmlkTGluZVdyYXBwZXIgYXJpYS1oaWRkZW4+XG4gICAgICA8TGFiZWxTcGFjZXI+XG4gICAgICAgIDxHcmlkTGluZUNvbnRhaW5lcj57bGluZXN9PC9HcmlkTGluZUNvbnRhaW5lcj5cbiAgICAgIDwvTGFiZWxTcGFjZXI+XG4gICAgPC9HcmlkTGluZVdyYXBwZXI+XG4gICk7XG59O1xuIl19 */");
 export const GridLines = ({
   maxScaleValue,
   tickCount

package/dist/BodyPortal/index.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 interface BodyPortalProps {
     /**
-     * TEMPORARY: a stopgap solution to avoid zIndex conflicts -
-     * will be reworked with: GM-624
-     * previously, zIndex was set to 1 in the CSS function
+     * Stacking layer for the portaled content. Pass a `zIndices` token
+     * (e.g. `zIndices.modal`) or a raw number as an escape hatch. Defaults to
+     * `zIndices.portal` — the floor of the portal band — so un-tokenized portal content
+     * stays above local page content instead of silently landing at a low value.
      */
     zIndex?: number;
 }

package/dist/BodyPortal/index.js

@@ -1,5 +1,5 @@
 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';
@@ -14,13 +14,13 @@ const PortalWrapper = /*#__PURE__*/_styled("div", {
   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();

package/dist/Box/props.js

@@ -1,4 +1,4 @@
-import { system } from '@codecademy/gamut-styles';
+import { system, zIndices } from '@codecademy/gamut-styles';
 import { variance } from '@codecademy/variance';
 export const boxProps = variance.compose(system.space, system.border, system.layout, system.color, system.shadow, system.positioning, system.background, system.typography, system.flex, system.grid, system.list);
 export const sharedStates = system.states({
@@ -8,7 +8,7 @@ export const sharedStates = system.states({
   },
   context: {
     position: 'relative',
-    zIndex: 1
+    zIndex: zIndices.foreground
   },
   'no-select': {
     WebkitTouchCallout: 'none',

package/dist/Button/shared/styles.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-import { fontSmoothPixel, modeColorProps, styledOptions, system, transitionConcat } from '@codecademy/gamut-styles';
+import { fontSmoothPixel, modeColorProps, styledOptions, system, transitionConcat, zIndices } from '@codecademy/gamut-styles';
 import { variance } from '@codecademy/variance';
 import { ButtonBase, ButtonSelectors } from '../../ButtonBase/ButtonBase';
 export const config = styledOptions(['size']);
@@ -37,7 +37,7 @@ export const buttonStyles = system.css({
     border: 2,
     inset: -5,
     opacity: 0,
-    zIndex: 0
+    zIndex: zIndices.base
   },
   [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: {
     opacity: 1

package/dist/DataList/EmptyRows.js

@@ -1,3 +1,4 @@
+import { zIndices } from '@codecademy/gamut-styles';
 import { FlexBox } from '../Box';
 import { FillButton } from '../Button';
 import { Text } from '../Typography';
@@ -15,7 +16,7 @@ export const EmptyRows = () => {
     position: "sticky",
     top: "calc(50% - 66px)",
     width: "320px",
-    zIndex: 1,
+    zIndex: zIndices.foreground,
     children: /*#__PURE__*/_jsxs(FlexBox, {
       as: "tr",
       center: true,

package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarWrapper.js

@@ -1,4 +1,5 @@
 import { CheckerDense } from '@codecademy/gamut-patterns';
+import { zIndices } from '@codecademy/gamut-styles';
 import * as React from 'react';
 import { Box } from '../../../Box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,7 +17,7 @@ export const CalendarWrapper = ({
     border: 1,
     borderRadius: "sm",
     position: "relative",
-    zIndex: 1,
+    zIndex: zIndices.foreground,
     children: children
   })]
 });

package/dist/DatePicker/DatePickerCalendar/Calendar/utils/elements.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-import { css, states, transitionConcat } from '@codecademy/gamut-styles';
+import { css, states, transitionConcat, zIndices } from '@codecademy/gamut-styles';
 export const CalendarTable = /*#__PURE__*/_styled("table", {
   target: "e1q1mzrf2",
   label: "CalendarTable"
@@ -7,7 +7,7 @@ export const CalendarTable = /*#__PURE__*/_styled("table", {
   /** Row gaps only: 0 between columns, 8px token between rows (incl. under header). */
   borderCollapse: 'separate',
   borderSpacing: '0 8px'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTZCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0YXRlcywgdHJhbnNpdGlvbkNvbmNhdCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTdHlsZVByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgQ2FsZW5kYXJUYWJsZSA9IHN0eWxlZC50YWJsZShcbiAgY3NzKHtcbiAgICAvKiogUm93IGdhcHMgb25seTogMCBiZXR3ZWVuIGNvbHVtbnMsIDhweCB0b2tlbiBiZXR3ZWVuIHJvd3MgKGluY2wuIHVuZGVyIGhlYWRlcikuICovXG4gICAgYm9yZGVyQ29sbGFwc2U6ICdzZXBhcmF0ZScsXG4gICAgYm9yZGVyU3BhY2luZzogJzAgOHB4JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBUYWJsZUhlYWRlciA9IHN0eWxlZC50aChcbiAgY3NzKHtcbiAgICBmb250U2l6ZTogMTQsXG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgfSlcbik7XG5cbmNvbnN0IGRhdGVjZWxsU3RhdGVzID0gc3RhdGVzKHtcbiAgaXNUb2RheToge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICcmOjphZnRlcic6IHtcbiAgICAgIGNvbnRlbnQ6ICdcIlwiJyxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgYm90dG9tOiA0LFxuICAgICAgLyoqIEhhbGYgb2YgZG90IHdpZHRoICg0cHgpIHNvIHRoZSBtYXJrZXIgc2l0cyB1bmRlciB0aGUgY2VudGVyZWQgZGF0ZSBudW1lcmFsLiAqL1xuICAgICAgaW5zZXRJbmxpbmVTdGFydDogJ2NhbGMoNTAlIC0gMnB4KScsXG4gICAgICB3aWR0aDogNCxcbiAgICAgIGhlaWdodDogNCxcbiAgICAgIGJvcmRlclJhZGl1czogJ2Z1bGwnLFxuICAgICAgYmc6ICdoeXBlcicsXG4gICAgfSxcbiAgfSxcbiAgaXNTZWxlY3RlZDoge1xuICAgIGJnOiAndGV4dCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzUmFuZ2VTdGFydDoge1xuICAgIGJvcmRlclJhZGl1c1JpZ2h0OiAnbm9uZScsXG4gIH0sXG4gIGlzUmFuZ2VFbmQ6IHtcbiAgICBib3JkZXJSYWRpdXNMZWZ0OiAnbm9uZScsXG4gIH0sXG4gIGlzSW5SYW5nZToge1xuICAgIGJnOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICBib3JkZXJSYWRpdXM6ICdub25lJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzRGlzYWJsZWQ6IHtcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICB1c2VyU2VsZWN0OiAnbm9uZScsXG4gICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICcmOmhvdmVyLCAmOmZvY3VzJzoge1xuICAgICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICAgY3Vyc29yOiAnbm90LWFsbG93ZWQnLFxuICAgICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIH0sXG4gIH0sXG59KTtcblxudHlwZSBEYXRlQ2VsbFByb3BzID0gU3R5bGVQcm9wczx0eXBlb2YgZGF0ZWNlbGxTdGF0ZXM+O1xuXG5leHBvcnQgY29uc3QgRGF0ZUNlbGwgPSBzdHlsZWQudGQ8RGF0ZUNlbGxQcm9wcz4oXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIHdpZHRoOiAnMzJweCcsXG4gICAgaGVpZ2h0OiAnMzJweCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICBwYWRkaW5nOiAwLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgWydib3JkZXItY29sb3InLCAnY29sb3InLCAnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAnZmFzdCcsXG4gICAgICAnZWFzZS1pbidcbiAgICApLFxuICAgICcmOmhvdmVyJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICAgIFsnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAgICdmYXN0JyxcbiAgICAgICAgJ2Vhc2UtaW4nXG4gICAgICApLFxuICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgb3V0bGluZTogJ25vbmUnLFxuICAgIH0sXG4gICAgJyY6YWN0aXZlJzoge1xuICAgICAgY29sb3I6ICd0ZXh0JyxcbiAgICB9LFxuICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGluc2V0OiAtMyxcbiAgICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgICAgIGJvcmRlcjogMixcbiAgICAgIG9wYWNpdHk6IDAsXG4gICAgICB6SW5kZXg6IDAsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlOjpiZWZvcmUnOiB7XG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gIH0pLFxuICBkYXRlY2VsbFN0YXRlc1xuKTtcbiJdfQ== */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUzZCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBjc3MsXG4gIHN0YXRlcyxcbiAgdHJhbnNpdGlvbkNvbmNhdCxcbiAgekluZGljZXMsXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTdHlsZVByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgQ2FsZW5kYXJUYWJsZSA9IHN0eWxlZC50YWJsZShcbiAgY3NzKHtcbiAgICAvKiogUm93IGdhcHMgb25seTogMCBiZXR3ZWVuIGNvbHVtbnMsIDhweCB0b2tlbiBiZXR3ZWVuIHJvd3MgKGluY2wuIHVuZGVyIGhlYWRlcikuICovXG4gICAgYm9yZGVyQ29sbGFwc2U6ICdzZXBhcmF0ZScsXG4gICAgYm9yZGVyU3BhY2luZzogJzAgOHB4JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBUYWJsZUhlYWRlciA9IHN0eWxlZC50aChcbiAgY3NzKHtcbiAgICBmb250U2l6ZTogMTQsXG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgfSlcbik7XG5cbmNvbnN0IGRhdGVjZWxsU3RhdGVzID0gc3RhdGVzKHtcbiAgaXNUb2RheToge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICcmOjphZnRlcic6IHtcbiAgICAgIGNvbnRlbnQ6ICdcIlwiJyxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgYm90dG9tOiA0LFxuICAgICAgLyoqIEhhbGYgb2YgZG90IHdpZHRoICg0cHgpIHNvIHRoZSBtYXJrZXIgc2l0cyB1bmRlciB0aGUgY2VudGVyZWQgZGF0ZSBudW1lcmFsLiAqL1xuICAgICAgaW5zZXRJbmxpbmVTdGFydDogJ2NhbGMoNTAlIC0gMnB4KScsXG4gICAgICB3aWR0aDogNCxcbiAgICAgIGhlaWdodDogNCxcbiAgICAgIGJvcmRlclJhZGl1czogJ2Z1bGwnLFxuICAgICAgYmc6ICdoeXBlcicsXG4gICAgfSxcbiAgfSxcbiAgaXNTZWxlY3RlZDoge1xuICAgIGJnOiAndGV4dCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzUmFuZ2VTdGFydDoge1xuICAgIGJvcmRlclJhZGl1c1JpZ2h0OiAnbm9uZScsXG4gIH0sXG4gIGlzUmFuZ2VFbmQ6IHtcbiAgICBib3JkZXJSYWRpdXNMZWZ0OiAnbm9uZScsXG4gIH0sXG4gIGlzSW5SYW5nZToge1xuICAgIGJnOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICBib3JkZXJSYWRpdXM6ICdub25lJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzRGlzYWJsZWQ6IHtcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICB1c2VyU2VsZWN0OiAnbm9uZScsXG4gICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICcmOmhvdmVyLCAmOmZvY3VzJzoge1xuICAgICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICAgY3Vyc29yOiAnbm90LWFsbG93ZWQnLFxuICAgICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIH0sXG4gIH0sXG59KTtcblxudHlwZSBEYXRlQ2VsbFByb3BzID0gU3R5bGVQcm9wczx0eXBlb2YgZGF0ZWNlbGxTdGF0ZXM+O1xuXG5leHBvcnQgY29uc3QgRGF0ZUNlbGwgPSBzdHlsZWQudGQ8RGF0ZUNlbGxQcm9wcz4oXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIHdpZHRoOiAnMzJweCcsXG4gICAgaGVpZ2h0OiAnMzJweCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICBwYWRkaW5nOiAwLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgWydib3JkZXItY29sb3InLCAnY29sb3InLCAnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAnZmFzdCcsXG4gICAgICAnZWFzZS1pbidcbiAgICApLFxuICAgICcmOmhvdmVyJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICAgIFsnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAgICdmYXN0JyxcbiAgICAgICAgJ2Vhc2UtaW4nXG4gICAgICApLFxuICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgb3V0bGluZTogJ25vbmUnLFxuICAgIH0sXG4gICAgJyY6YWN0aXZlJzoge1xuICAgICAgY29sb3I6ICd0ZXh0JyxcbiAgICB9LFxuICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGluc2V0OiAtMyxcbiAgICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgICAgIGJvcmRlcjogMixcbiAgICAgIG9wYWNpdHk6IDAsXG4gICAgICB6SW5kZXg6IHpJbmRpY2VzLmJhc2UsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlOjpiZWZvcmUnOiB7XG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gIH0pLFxuICBkYXRlY2VsbFN0YXRlc1xuKTtcbiJdfQ== */");
 export const TableHeader = /*#__PURE__*/_styled("th", {
   target: "e1q1mzrf1",
   label: "TableHeader"
@@ -16,7 +16,7 @@ export const TableHeader = /*#__PURE__*/_styled("th", {
   fontWeight: 'base',
   color: 'text-disabled',
   textAlign: 'center'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTJCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0YXRlcywgdHJhbnNpdGlvbkNvbmNhdCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTdHlsZVByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgQ2FsZW5kYXJUYWJsZSA9IHN0eWxlZC50YWJsZShcbiAgY3NzKHtcbiAgICAvKiogUm93IGdhcHMgb25seTogMCBiZXR3ZWVuIGNvbHVtbnMsIDhweCB0b2tlbiBiZXR3ZWVuIHJvd3MgKGluY2wuIHVuZGVyIGhlYWRlcikuICovXG4gICAgYm9yZGVyQ29sbGFwc2U6ICdzZXBhcmF0ZScsXG4gICAgYm9yZGVyU3BhY2luZzogJzAgOHB4JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBUYWJsZUhlYWRlciA9IHN0eWxlZC50aChcbiAgY3NzKHtcbiAgICBmb250U2l6ZTogMTQsXG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgfSlcbik7XG5cbmNvbnN0IGRhdGVjZWxsU3RhdGVzID0gc3RhdGVzKHtcbiAgaXNUb2RheToge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICcmOjphZnRlcic6IHtcbiAgICAgIGNvbnRlbnQ6ICdcIlwiJyxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgYm90dG9tOiA0LFxuICAgICAgLyoqIEhhbGYgb2YgZG90IHdpZHRoICg0cHgpIHNvIHRoZSBtYXJrZXIgc2l0cyB1bmRlciB0aGUgY2VudGVyZWQgZGF0ZSBudW1lcmFsLiAqL1xuICAgICAgaW5zZXRJbmxpbmVTdGFydDogJ2NhbGMoNTAlIC0gMnB4KScsXG4gICAgICB3aWR0aDogNCxcbiAgICAgIGhlaWdodDogNCxcbiAgICAgIGJvcmRlclJhZGl1czogJ2Z1bGwnLFxuICAgICAgYmc6ICdoeXBlcicsXG4gICAgfSxcbiAgfSxcbiAgaXNTZWxlY3RlZDoge1xuICAgIGJnOiAndGV4dCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzUmFuZ2VTdGFydDoge1xuICAgIGJvcmRlclJhZGl1c1JpZ2h0OiAnbm9uZScsXG4gIH0sXG4gIGlzUmFuZ2VFbmQ6IHtcbiAgICBib3JkZXJSYWRpdXNMZWZ0OiAnbm9uZScsXG4gIH0sXG4gIGlzSW5SYW5nZToge1xuICAgIGJnOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICBib3JkZXJSYWRpdXM6ICdub25lJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzRGlzYWJsZWQ6IHtcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICB1c2VyU2VsZWN0OiAnbm9uZScsXG4gICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICcmOmhvdmVyLCAmOmZvY3VzJzoge1xuICAgICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICAgY3Vyc29yOiAnbm90LWFsbG93ZWQnLFxuICAgICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIH0sXG4gIH0sXG59KTtcblxudHlwZSBEYXRlQ2VsbFByb3BzID0gU3R5bGVQcm9wczx0eXBlb2YgZGF0ZWNlbGxTdGF0ZXM+O1xuXG5leHBvcnQgY29uc3QgRGF0ZUNlbGwgPSBzdHlsZWQudGQ8RGF0ZUNlbGxQcm9wcz4oXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIHdpZHRoOiAnMzJweCcsXG4gICAgaGVpZ2h0OiAnMzJweCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICBwYWRkaW5nOiAwLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgWydib3JkZXItY29sb3InLCAnY29sb3InLCAnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAnZmFzdCcsXG4gICAgICAnZWFzZS1pbidcbiAgICApLFxuICAgICcmOmhvdmVyJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICAgIFsnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAgICdmYXN0JyxcbiAgICAgICAgJ2Vhc2UtaW4nXG4gICAgICApLFxuICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgb3V0bGluZTogJ25vbmUnLFxuICAgIH0sXG4gICAgJyY6YWN0aXZlJzoge1xuICAgICAgY29sb3I6ICd0ZXh0JyxcbiAgICB9LFxuICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGluc2V0OiAtMyxcbiAgICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgICAgIGJvcmRlcjogMixcbiAgICAgIG9wYWNpdHk6IDAsXG4gICAgICB6SW5kZXg6IDAsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlOjpiZWZvcmUnOiB7XG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gIH0pLFxuICBkYXRlY2VsbFN0YXRlc1xuKTtcbiJdfQ== */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIyQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvRGF0ZVBpY2tlci9EYXRlUGlja2VyQ2FsZW5kYXIvQ2FsZW5kYXIvdXRpbHMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgY3NzLFxuICBzdGF0ZXMsXG4gIHRyYW5zaXRpb25Db25jYXQsXG4gIHpJbmRpY2VzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IENhbGVuZGFyVGFibGUgPSBzdHlsZWQudGFibGUoXG4gIGNzcyh7XG4gICAgLyoqIFJvdyBnYXBzIG9ubHk6IDAgYmV0d2VlbiBjb2x1bW5zLCA4cHggdG9rZW4gYmV0d2VlbiByb3dzIChpbmNsLiB1bmRlciBoZWFkZXIpLiAqL1xuICAgIGJvcmRlckNvbGxhcHNlOiAnc2VwYXJhdGUnLFxuICAgIGJvcmRlclNwYWNpbmc6ICcwIDhweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgVGFibGVIZWFkZXIgPSBzdHlsZWQudGgoXG4gIGNzcyh7XG4gICAgZm9udFNpemU6IDE0LFxuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIH0pXG4pO1xuXG5jb25zdCBkYXRlY2VsbFN0YXRlcyA9IHN0YXRlcyh7XG4gIGlzVG9kYXk6IHtcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGJvdHRvbTogNCxcbiAgICAgIC8qKiBIYWxmIG9mIGRvdCB3aWR0aCAoNHB4KSBzbyB0aGUgbWFya2VyIHNpdHMgdW5kZXIgdGhlIGNlbnRlcmVkIGRhdGUgbnVtZXJhbC4gKi9cbiAgICAgIGluc2V0SW5saW5lU3RhcnQ6ICdjYWxjKDUwJSAtIDJweCknLFxuICAgICAgd2lkdGg6IDQsXG4gICAgICBoZWlnaHQ6IDQsXG4gICAgICBib3JkZXJSYWRpdXM6ICdmdWxsJyxcbiAgICAgIGJnOiAnaHlwZXInLFxuICAgIH0sXG4gIH0sXG4gIGlzU2VsZWN0ZWQ6IHtcbiAgICBiZzogJ3RleHQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc1JhbmdlU3RhcnQ6IHtcbiAgICBib3JkZXJSYWRpdXNSaWdodDogJ25vbmUnLFxuICB9LFxuICBpc1JhbmdlRW5kOiB7XG4gICAgYm9yZGVyUmFkaXVzTGVmdDogJ25vbmUnLFxuICB9LFxuICBpc0luUmFuZ2U6IHtcbiAgICBiZzogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnbm9uZScsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc0Rpc2FibGVkOiB7XG4gICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICBjdXJzb3I6ICdub3QtYWxsb3dlZCcsXG4gICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICAgIHVzZXJTZWxlY3Q6ICdub25lJyxcbiAgICB9LFxuICB9LFxufSk7XG5cbnR5cGUgRGF0ZUNlbGxQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIGRhdGVjZWxsU3RhdGVzPjtcblxuZXhwb3J0IGNvbnN0IERhdGVDZWxsID0gc3R5bGVkLnRkPERhdGVDZWxsUHJvcHM+KFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICB3aWR0aDogJzMycHgnLFxuICAgIGhlaWdodDogJzMycHgnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBib3JkZXJSYWRpdXM6ICdtZCcsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChcbiAgICAgIFsnYm9yZGVyLWNvbG9yJywgJ2NvbG9yJywgJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgJ2Zhc3QnLFxuICAgICAgJ2Vhc2UtaW4nXG4gICAgKSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgICBbJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgICAnZmFzdCcsXG4gICAgICAgICdlYXNlLWluJ1xuICAgICAgKSxcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgfSxcbiAgICAnJjo6YmVmb3JlJzoge1xuICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICBpbnNldDogLTMsXG4gICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICBib3JkZXI6IDIsXG4gICAgICBvcGFjaXR5OiAwLFxuICAgICAgekluZGV4OiB6SW5kaWNlcy5iYXNlLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZTo6YmVmb3JlJzoge1xuICAgICAgb3BhY2l0eTogMSxcbiAgICB9LFxuICB9KSxcbiAgZGF0ZWNlbGxTdGF0ZXNcbik7XG4iXX0= */");
 const datecellStates = states({
   isToday: {
     position: 'relative',
@@ -108,9 +108,9 @@ export const DateCell = /*#__PURE__*/_styled("td", {
     borderRadius: 'lg',
     border: 2,
     opacity: 0,
-    zIndex: 0
+    zIndex: zIndices.base
   },
   '&:focus-visible::before': {
     opacity: 1
   }
-}), datecellStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUZ3QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvRGF0ZVBpY2tlci9EYXRlUGlja2VyQ2FsZW5kYXIvQ2FsZW5kYXIvdXRpbHMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBzdGF0ZXMsIHRyYW5zaXRpb25Db25jYXQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IENhbGVuZGFyVGFibGUgPSBzdHlsZWQudGFibGUoXG4gIGNzcyh7XG4gICAgLyoqIFJvdyBnYXBzIG9ubHk6IDAgYmV0d2VlbiBjb2x1bW5zLCA4cHggdG9rZW4gYmV0d2VlbiByb3dzIChpbmNsLiB1bmRlciBoZWFkZXIpLiAqL1xuICAgIGJvcmRlckNvbGxhcHNlOiAnc2VwYXJhdGUnLFxuICAgIGJvcmRlclNwYWNpbmc6ICcwIDhweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgVGFibGVIZWFkZXIgPSBzdHlsZWQudGgoXG4gIGNzcyh7XG4gICAgZm9udFNpemU6IDE0LFxuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIH0pXG4pO1xuXG5jb25zdCBkYXRlY2VsbFN0YXRlcyA9IHN0YXRlcyh7XG4gIGlzVG9kYXk6IHtcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGJvdHRvbTogNCxcbiAgICAgIC8qKiBIYWxmIG9mIGRvdCB3aWR0aCAoNHB4KSBzbyB0aGUgbWFya2VyIHNpdHMgdW5kZXIgdGhlIGNlbnRlcmVkIGRhdGUgbnVtZXJhbC4gKi9cbiAgICAgIGluc2V0SW5saW5lU3RhcnQ6ICdjYWxjKDUwJSAtIDJweCknLFxuICAgICAgd2lkdGg6IDQsXG4gICAgICBoZWlnaHQ6IDQsXG4gICAgICBib3JkZXJSYWRpdXM6ICdmdWxsJyxcbiAgICAgIGJnOiAnaHlwZXInLFxuICAgIH0sXG4gIH0sXG4gIGlzU2VsZWN0ZWQ6IHtcbiAgICBiZzogJ3RleHQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc1JhbmdlU3RhcnQ6IHtcbiAgICBib3JkZXJSYWRpdXNSaWdodDogJ25vbmUnLFxuICB9LFxuICBpc1JhbmdlRW5kOiB7XG4gICAgYm9yZGVyUmFkaXVzTGVmdDogJ25vbmUnLFxuICB9LFxuICBpc0luUmFuZ2U6IHtcbiAgICBiZzogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnbm9uZScsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc0Rpc2FibGVkOiB7XG4gICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICBjdXJzb3I6ICdub3QtYWxsb3dlZCcsXG4gICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICAgIHVzZXJTZWxlY3Q6ICdub25lJyxcbiAgICB9LFxuICB9LFxufSk7XG5cbnR5cGUgRGF0ZUNlbGxQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIGRhdGVjZWxsU3RhdGVzPjtcblxuZXhwb3J0IGNvbnN0IERhdGVDZWxsID0gc3R5bGVkLnRkPERhdGVDZWxsUHJvcHM+KFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICB3aWR0aDogJzMycHgnLFxuICAgIGhlaWdodDogJzMycHgnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBib3JkZXJSYWRpdXM6ICdtZCcsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChcbiAgICAgIFsnYm9yZGVyLWNvbG9yJywgJ2NvbG9yJywgJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgJ2Zhc3QnLFxuICAgICAgJ2Vhc2UtaW4nXG4gICAgKSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgICBbJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgICAnZmFzdCcsXG4gICAgICAgICdlYXNlLWluJ1xuICAgICAgKSxcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgfSxcbiAgICAnJjo6YmVmb3JlJzoge1xuICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICBpbnNldDogLTMsXG4gICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICBib3JkZXI6IDIsXG4gICAgICBvcGFjaXR5OiAwLFxuICAgICAgekluZGV4OiAwLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZTo6YmVmb3JlJzoge1xuICAgICAgb3BhY2l0eTogMSxcbiAgICB9LFxuICB9KSxcbiAgZGF0ZWNlbGxTdGF0ZXNcbik7XG4iXX0= */");
+}), datecellStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJDYWxlbmRhci9DYWxlbmRhci91dGlscy9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0Z3QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvRGF0ZVBpY2tlci9EYXRlUGlja2VyQ2FsZW5kYXIvQ2FsZW5kYXIvdXRpbHMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgY3NzLFxuICBzdGF0ZXMsXG4gIHRyYW5zaXRpb25Db25jYXQsXG4gIHpJbmRpY2VzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IENhbGVuZGFyVGFibGUgPSBzdHlsZWQudGFibGUoXG4gIGNzcyh7XG4gICAgLyoqIFJvdyBnYXBzIG9ubHk6IDAgYmV0d2VlbiBjb2x1bW5zLCA4cHggdG9rZW4gYmV0d2VlbiByb3dzIChpbmNsLiB1bmRlciBoZWFkZXIpLiAqL1xuICAgIGJvcmRlckNvbGxhcHNlOiAnc2VwYXJhdGUnLFxuICAgIGJvcmRlclNwYWNpbmc6ICcwIDhweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgVGFibGVIZWFkZXIgPSBzdHlsZWQudGgoXG4gIGNzcyh7XG4gICAgZm9udFNpemU6IDE0LFxuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIH0pXG4pO1xuXG5jb25zdCBkYXRlY2VsbFN0YXRlcyA9IHN0YXRlcyh7XG4gIGlzVG9kYXk6IHtcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGJvdHRvbTogNCxcbiAgICAgIC8qKiBIYWxmIG9mIGRvdCB3aWR0aCAoNHB4KSBzbyB0aGUgbWFya2VyIHNpdHMgdW5kZXIgdGhlIGNlbnRlcmVkIGRhdGUgbnVtZXJhbC4gKi9cbiAgICAgIGluc2V0SW5saW5lU3RhcnQ6ICdjYWxjKDUwJSAtIDJweCknLFxuICAgICAgd2lkdGg6IDQsXG4gICAgICBoZWlnaHQ6IDQsXG4gICAgICBib3JkZXJSYWRpdXM6ICdmdWxsJyxcbiAgICAgIGJnOiAnaHlwZXInLFxuICAgIH0sXG4gIH0sXG4gIGlzU2VsZWN0ZWQ6IHtcbiAgICBiZzogJ3RleHQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc1JhbmdlU3RhcnQ6IHtcbiAgICBib3JkZXJSYWRpdXNSaWdodDogJ25vbmUnLFxuICB9LFxuICBpc1JhbmdlRW5kOiB7XG4gICAgYm9yZGVyUmFkaXVzTGVmdDogJ25vbmUnLFxuICB9LFxuICBpc0luUmFuZ2U6IHtcbiAgICBiZzogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnbm9uZScsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc0Rpc2FibGVkOiB7XG4gICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICBjdXJzb3I6ICdub3QtYWxsb3dlZCcsXG4gICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICAgIHVzZXJTZWxlY3Q6ICdub25lJyxcbiAgICB9LFxuICB9LFxufSk7XG5cbnR5cGUgRGF0ZUNlbGxQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIGRhdGVjZWxsU3RhdGVzPjtcblxuZXhwb3J0IGNvbnN0IERhdGVDZWxsID0gc3R5bGVkLnRkPERhdGVDZWxsUHJvcHM+KFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICB3aWR0aDogJzMycHgnLFxuICAgIGhlaWdodDogJzMycHgnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBib3JkZXJSYWRpdXM6ICdtZCcsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChcbiAgICAgIFsnYm9yZGVyLWNvbG9yJywgJ2NvbG9yJywgJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgJ2Zhc3QnLFxuICAgICAgJ2Vhc2UtaW4nXG4gICAgKSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgICBbJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgICAnZmFzdCcsXG4gICAgICAgICdlYXNlLWluJ1xuICAgICAgKSxcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgfSxcbiAgICAnJjo6YmVmb3JlJzoge1xuICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICBpbnNldDogLTMsXG4gICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICBib3JkZXI6IDIsXG4gICAgICBvcGFjaXR5OiAwLFxuICAgICAgekluZGV4OiB6SW5kaWNlcy5iYXNlLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZTo6YmVmb3JlJzoge1xuICAgICAgb3BhY2l0eTogMSxcbiAgICB9LFxuICB9KSxcbiAgZGF0ZWNlbGxTdGF0ZXNcbik7XG4iXX0= */");

package/dist/Flyout/index.js

@@ -1,5 +1,5 @@
 import { MiniDeleteIcon } from '@codecademy/gamut-icons';
-import { Background } from '@codecademy/gamut-styles';
+import { Background, zIndices } from '@codecademy/gamut-styles';
 import * as React from 'react';
 import { FlexBox } from '../Box';
 import { IconButton } from '../Button';
@@ -21,6 +21,7 @@ export const Flyout = ({
     escapeCloses: true,
     isOpen: expanded,
     shroud: true,
+    zIndex: zIndices.flyout,
     onRequestClose: onClose,
     children: /*#__PURE__*/_jsx(Background, {
       bg: bg,

package/dist/Form/SelectDropdown/SelectDropdown.js

@@ -1,14 +1,28 @@
 import { useTheme } from '@emotion/react';
-import { useId, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
-import { onFocus } from './core/accessibility';
-import { defaultComponents } from './core/constants';
-import { getMemoizedStyles } from './core/styles';
-import { resolveNoOptionsMessage } from './core/utils';
-import { formatGroupLabel, formatOptionLabel, SelectDropdownContext, TypedReactSelect } from './elements';
-import { useSelectHandlers } from './hooks/useSelectHandlers';
-import { useSelectOptions } from './hooks/useSelectOptions';
+import { parseOptions } from '../utils';
+import { AbbreviatedSingleValue, CustomContainer, CustomInput, CustomValueContainer, DropdownButton, formatGroupLabel, formatOptionLabel, IconOption, MultiValueRemoveButton, MultiValueWithColorMode, onFocus, RemoveAllButton, SelectDropdownContext, TypedReactSelect } from './elements';
+import { getMemoizedStyles } from './styles';
+import { filterValueFromOptions, isMultipleSelectProps, isOptionsGrouped, isSingleSelectProps, removeValueFromSelectedOptions } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const defaultProps = {
+  name: undefined,
+  components: {
+    DropdownIndicator: DropdownButton,
+    IndicatorSeparator: () => null,
+    ClearIndicator: RemoveAllButton,
+    SelectContainer: CustomContainer,
+    ValueContainer: CustomValueContainer,
+    MultiValue: MultiValueWithColorMode,
+    MultiValueRemove: MultiValueRemoveButton,
+    Option: IconOption,
+    SingleValue: AbbreviatedSingleValue,
+    Input: CustomInput
+  }
+};
+const onChangeAction = 'select-option';
+
 /**
  * A flexible dropdown select component built on top of react-select.
  *
@@ -59,58 +73,101 @@ export const SelectDropdown = ({
   disabled,
   dropdownWidth,
   error,
-  formatCreateLabel = inputValue => `Add "${inputValue}"`,
   id,
   inputProps,
   inputWidth,
-  isCreatable = false,
-  isSearchable: isSearchableProp = false,
-  isValidNewOption,
+  isSearchable = false,
   menuAlignment = 'left',
   multiple,
   name,
   onChange,
-  onCreateOption,
-  onInputChange,
   options,
   placeholder = 'Select an option',
   shownOptionsLimit = 6,
   size,
-  validationMessage,
   value,
   zIndex,
   ...rest
 }) => {
-  // isSearchable is forced true when isCreatable is true (CreatableSelect requires a text input)
-  const isSearchable = isCreatable || isSearchableProp;
   const rawInputId = useId();
   const inputId = name ?? `${id}-select-dropdown-${rawInputId}`;
+  const [activated, setActivated] = useState(false);
+  const [currentFocusedValue, setCurrentFocusedValue] = useState(undefined);
+
+  // these are used to programatically manage the focus state of our multi-select options + 'Remove all' button
   const removeAllButtonRef = useRef(null);
   const selectInputRef = useRef(null);
-  const [currentFocusedValue, setCurrentFocusedValue] = useState(undefined);
-  const {
-    selectOptions,
-    parsedValue
-  } = useSelectOptions({
-    options,
-    id,
-    size,
-    value: value
-  });
-  const {
-    activated,
-    multiValues,
-    changeHandler,
-    keyPressHandler
-  } = useSelectHandlers({
-    onChange,
-    multiple,
-    onCreateOption,
-    selectOptions,
-    value,
-    currentFocusedValue,
-    removeAllButtonRef
-  });
+  const selectOptions = useMemo(() => {
+    if (!options || Array.isArray(options) && !options.length || typeof options === 'object' && !Array.isArray(options) && Object.keys(options).length === 0) {
+      return [];
+    }
+    if (isOptionsGrouped(options)) {
+      return options;
+    }
+    return parseOptions({
+      options,
+      id,
+      size
+    });
+  }, [options, id, size]);
+  const parsedValue = useMemo(() => {
+    if (isOptionsGrouped(selectOptions)) {
+      for (const group of selectOptions) {
+        if (group.options) {
+          const foundOption = group.options.find(option => option.value === value);
+          if (foundOption) return foundOption;
+        }
+      }
+      return undefined;
+    }
+    return selectOptions.find(option => option.value === value);
+  }, [selectOptions, value]);
+  const [multiValues, setMultiValues] = useState(multiple &&
+  // To keep this efficient for non-multiSelect
+  filterValueFromOptions(selectOptions, value, isOptionsGrouped(selectOptions)));
+
+  // If the caller changes the initial value, let's update our value to match.
+  useEffect(() => {
+    const newMultiValues = filterValueFromOptions(selectOptions, value, isOptionsGrouped(selectOptions));
+    if (newMultiValues !== multiValues) setMultiValues(newMultiValues);
+
+    //
+    // We only update this when our passed in options or value changes, not multiValues.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options, value]);
+  const changeHandler = useCallback(optionEvent => {
+    setActivated(true);
+
+    // We have to do this because the version of typescript we have doesn't have the transitivity of these type guards yet. But, we will soon!
+    // Should probably come with: https://codecademy.atlassian.net/browse/GM-354
+    const onChangeProps = {
+      onChange,
+      multiple
+    };
+    if (isSingleSelectProps(onChangeProps)) {
+      const singleOptionEvent = optionEvent;
+      onChangeProps.onChange?.(singleOptionEvent, {
+        action: onChangeAction,
+        option: singleOptionEvent
+      });
+    }
+    if (isMultipleSelectProps(onChangeProps)) {
+      setMultiValues(optionEvent);
+      onChangeProps.onChange?.(optionEvent, {
+        action: onChangeAction,
+        option: undefined // At the moment this isn't used, but when multi select is built for real, boom (https://codecademy.atlassian.net/browse/GM-354)
+      });
+    }
+  }, [onChange, multiple]);
+  const keyPressHandler = e => {
+    if (multiple && e.key === 'Enter' && currentFocusedValue && multiValues) {
+      const newMultiValues = removeValueFromSelectedOptions(multiValues, currentFocusedValue);
+      if (newMultiValues !== multiValues) setMultiValues(newMultiValues);
+    }
+    if (removeAllButtonRef.current !== null && e.key === 'ArrowRight' && multiValues && currentFocusedValue === multiValues[multiValues.length - 1].value) {
+      removeAllButtonRef.current.focus();
+    }
+  };
   const theme = useTheme();
   const memoizedStyles = useMemo(() => {
     return getMemoizedStyles(theme, zIndex);
@@ -123,15 +180,14 @@ export const SelectDropdown = ({
       selectInputRef
     },
     children: /*#__PURE__*/_jsx(TypedReactSelect, {
+      ...defaultProps,
       activated: activated,
       "aria-live": "assertive",
       ariaLiveMessages: {
         onFocus
       },
-      components: defaultComponents,
       dropdownWidth: dropdownWidth,
       error: Boolean(error),
-      formatCreateLabel: formatCreateLabel,
       formatGroupLabel: formatGroupLabel,
       formatOptionLabel: formatOptionLabel,
       id: id || rest.htmlFor || rawInputId,
@@ -140,15 +196,13 @@ export const SelectDropdown = ({
         ...inputProps
       },
       inputWidth: inputWidth,
-      isCreatable: isCreatable,
       isDisabled: disabled,
       isMulti: multiple,
       isOptionDisabled: option => option.disabled,
       isSearchable: isSearchable,
-      isValidNewOption: isValidNewOption,
       menuAlignment: menuAlignment,
+      menuPortalTarget: typeof document !== 'undefined' ? document.body : undefined,
       name: name,
-      noOptionsMessage: resolveNoOptionsMessage(validationMessage),
       options: selectOptions,
       placeholder: placeholder,
       selectRef: selectInputRef,
@@ -157,8 +211,7 @@ export const SelectDropdown = ({
       styles: memoizedStyles,
       value: multiple ? multiValues : parsedValue,
       onChange: changeHandler,
-      onInputChange: onInputChange,
-      onKeyDown: multiple ? keyPressHandler : undefined,
+      onKeyDown: multiple ? e => keyPressHandler(e) : undefined,
       ...rest
     })
   });

package/dist/Form/SelectDropdown/elements/constants.d.ts

@@ -15,6 +15,14 @@ export declare const indicatorIcons: {
         size: number;
         icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;
     };
+    smallSearchable: {
+        size: number;
+        icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    };
+    mediumSearchable: {
+        size: number;
+        icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    };
     smallRemove: {
         size: number;
         icon: import("react").ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/Form/SelectDropdown/elements/constants.js

@@ -1,4 +1,4 @@
-import { ArrowChevronDownIcon, CloseIcon, MiniChevronDownIcon, MiniDeleteIcon } from '@codecademy/gamut-icons';
+import { ArrowChevronDownIcon, CloseIcon, MiniChevronDownIcon, MiniDeleteIcon, SearchIcon } from '@codecademy/gamut-icons';
 export const iconSize = {
   small: 12,
   medium: 16
@@ -16,6 +16,14 @@ export const indicatorIcons = {
     size: iconSize.medium,
     icon: ArrowChevronDownIcon
   },
+  smallSearchable: {
+    size: iconSize.small,
+    icon: SearchIcon
+  },
+  mediumSearchable: {
+    size: iconSize.medium,
+    icon: SearchIcon
+  },
   smallRemove: {
     size: iconSize.small,
     icon: MiniDeleteIcon

package/dist/Form/SelectDropdown/elements/containers.d.ts

@@ -24,10 +24,6 @@ export declare const CustomValueContainer: ({ ...rest }: CustomSelectComponentPr
 export declare const CustomInput: ({ ...rest }: CustomSelectComponentProps<typeof SelectDropdownElements.Input>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Typed wrapper around react-select component.
- * Renders CreatableSelect when isCreatable is true, ReactSelect otherwise.
- * Creatable-only props (formatCreateLabel, isValidNewOption) are stripped from
- * the non-creatable path so they don't reach ReactSelect. `onCreateOption` is
- * handled in SelectDropdown's changeHandler — do not pass it to CreatableSelect
- * or react-select will skip onChange on create.
+ * Provides type safety for the underlying react-select implementation.
  */
-export declare function TypedReactSelect<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>>({ selectRef, isCreatable, formatCreateLabel, isValidNewOption, ...props }: Props<OptionType, IsMulti, GroupType> & TypedReactSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function TypedReactSelect<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>>({ selectRef, ...props }: Props<OptionType, IsMulti, GroupType> & TypedReactSelectProps): import("react/jsx-runtime").JSX.Element;