@codecademy/gamut

Index: package/dist/Form/SelectDropdown/core/styles.js
===================================================================
--- package/dist/Form/SelectDropdown/core/styles.js
+++ package/dist/Form/SelectDropdown/core/styles.js
@@ -2,10 +2,9 @@
 import { dismissSharedStyles, tagBaseStyles, tagLabelFontSize, tagLabelPadding } from '../../../Tag/styles';
 import { formBaseComponentStyles, formBaseFieldStylesObject, formFieldDisabledStyles, formFieldPaddingStyles, InputSelectors } from '../../styles';
 const selectDropdownStyles = css({
   ...formBaseFieldStylesObject,
-  display: 'flex',
-  zIndex: 3
+  display: 'flex'
 });
 const selectFocusStyles = {
   color: 'primary',
   borderColor: 'currentColor',
@@ -45,17 +44,23 @@
   error: {
     borderColorTop: 'feedback-error'
   }
 });
-const dropdownBorderStyles = (zIndex = 2) => css({
+const dropdownBorderStyles = (zIndex = 'popover') => css({
   ...formBaseComponentStyles,
   border: 1,
   borderColor: 'currentColor',
   position: 'absolute',
   marginTop: 0,
   borderRadius: 'none',
   zIndex
 });
+
+// react-select needs a raw z-index value, so we're resolving the value to ensure the CSS is correct.
+const resolveZIndex = (value, theme) => {
+  const tokens = theme.zIndexes;
+  return typeof value === 'string' && value in tokens ? tokens[value] : value;
+};
 const getOptionBackground = (isSelected, isFocused) => css({
   bg: isFocused ? 'background-hover' : isSelected ? 'background-selected' : 'transparent'
 });
 const textColor = css({
@@ -148,8 +153,14 @@
           right: 0
         } : {})
       };
     },
+    menuPortal: provided => ({
+      ...provided,
+      // The menu is portaled to the body, so it stacks at the page root as a popover —
+      // above sticky headers and modal content. A raw `zIndex` prop overrides as an escape hatch.
+      zIndex: resolveZIndex(zIndex ?? 'popover', theme)
+    }),
     menuList: (provided, state) => {
       const sizeInteger = state.selectProps.size === 'small' ? 2 : 3;
       const maxHeight = `${(state.selectProps.shownOptionsLimit ?? 6) * sizeInteger}rem`;
       return {