@codecademy/gamut

Index: package/dist/Form/SelectDropdown/styles.js
===================================================================
--- package/dist/Form/SelectDropdown/styles.js
+++ package/dist/Form/SelectDropdown/styles.js
@@ -1,11 +1,10 @@
-import { css, states, variant } from '@codecademy/gamut-styles';
+import { css, states, variant, zIndexes } from '@codecademy/gamut-styles';
 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,9 +44,9 @@
   error: {
     borderColorTop: 'feedback-error'
   }
 });
-const dropdownBorderStyles = (zIndex = 2) => css({
+const dropdownBorderStyles = (zIndex = zIndexes.popover) => css({
   ...formBaseComponentStyles,
   border: 1,
   borderColor: 'currentColor',
   position: 'absolute',
@@ -146,8 +145,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: zIndex ?? zIndexes.popover
+    }),
     menuList: (provided, state) => {
       const sizeInteger = state.selectProps.size === 'small' ? 2 : 3;
       const maxHeight = `${(state.selectProps.shownOptionsLimit ?? 6) * sizeInteger}rem`;
       return {