@codecademy/gamut 72.2.4-alpha.628984.0 → 72.2.4-alpha.716ed7.0

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

@@ -1,6 +1,5 @@
 import { createContext, useLayoutEffect } from 'react';
 import ReactSelect, { components as SelectDropdownElements } from 'react-select';
-import CreatableSelect from 'react-select/creatable';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * React context for sharing state between SelectDropdown components.
@@ -117,27 +116,12 @@ export const CustomInput = ({
 
 /**
  * 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 function TypedReactSelect({
   selectRef,
-  isCreatable,
-  formatCreateLabel,
-  isValidNewOption,
   ...props
 }) {
-  if (isCreatable) {
-    return /*#__PURE__*/_jsx(CreatableSelect, {
-      ...props,
-      formatCreateLabel: formatCreateLabel,
-      isValidNewOption: isValidNewOption,
-      ref: selectRef
-    });
-  }
   return /*#__PURE__*/_jsx(ReactSelect, {
     ...props,
     ref: selectRef

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

@@ -1,6 +1,20 @@
-import { SizedIndicatorProps } from '../types';
+import { AriaOnFocus } from 'react-select';
+import { ExtendedOption, SizedIndicatorProps } from '../types';
+/**
+ * Generates accessible focus messages for screen readers.
+ * Provides detailed information about the currently focused option.
+ *
+ * @param params - Object containing the focused option details
+ * @returns Formatted accessibility message
+ */
+export declare const onFocus: AriaOnFocus<ExtendedOption>;
 /**
  * Custom dropdown indicator that shows either a chevron or search icon.
  * The icon type depends on whether the select is searchable or not.
  */
 export declare const DropdownButton: (props: SizedIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom remove all button for multi-select mode.
+ * Provides keyboard navigation and accessible removal of all selected values.
+ */
+export declare const RemoveAllButton: (props: SizedIndicatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,50 @@
+import _styled from "@emotion/styled/base";
+import { css, theme } from '@codecademy/gamut-styles';
+import { useContext } from 'react';
 import { components as SelectDropdownElements } from 'react-select';
 import { indicatorIcons } from './constants';
+import { SelectDropdownContext } from './containers';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   DropdownIndicator
 } = SelectDropdownElements;
 
+/**
+ * Generates accessible focus messages for screen readers.
+ * Provides detailed information about the currently focused option.
+ *
+ * @param params - Object containing the focused option details
+ * @returns Formatted accessibility message
+ */
+export const onFocus = ({
+  focused: {
+    label,
+    subtitle,
+    rightLabel,
+    disabled
+  }
+}) => {
+  const formattedSubtitle = `, ${subtitle}`;
+  const formattedRightLabel = `, ${rightLabel}`;
+  const msg = `You are currently focused on option ${label}${subtitle ? formattedSubtitle : ''} ${rightLabel ? formattedRightLabel : ''}${disabled ? ', disabled' : ''}`;
+  return msg;
+};
+
 /**
  * Custom dropdown indicator that shows either a chevron or search icon.
  * The icon type depends on whether the select is searchable or not.
  */
 export const DropdownButton = props => {
   const {
-    size
+    size,
+    isSearchable
   } = props.selectProps;
   const color = props.isDisabled ? 'text-disabled' : 'text';
   const iconSize = size ?? 'medium';
+  const iconType = isSearchable ? 'Searchable' : 'Chevron';
   const {
     ...iconProps
-  } = indicatorIcons[`${iconSize}Chevron`];
+  } = indicatorIcons[`${iconSize}${iconType}`];
   const {
     icon: IndicatorIcon
   } = iconProps;
@@ -28,4 +55,66 @@ export const DropdownButton = props => {
       color: color
     })
   });
+};
+const CustomStyledRemoveAllDiv = /*#__PURE__*/_styled('div', {
+  target: "e1xkmr70",
+  label: "CustomStyledRemoveAllDiv"
+})(css({
+  '&:focus': {
+    outline: `2px solid ${theme.colors.primary}`
+  },
+  '&:focus-visible': {
+    outline: `2px solid ${theme.colors.primary}`
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9Gb3JtL1NlbGVjdERyb3Bkb3duL2VsZW1lbnRzL2NvbnRyb2xzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRGlDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9Gb3JtL1NlbGVjdERyb3Bkb3duL2VsZW1lbnRzL2NvbnRyb2xzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgS2V5Ym9hcmRFdmVudCwgdXNlQ29udGV4dCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7XG4gIEFyaWFPbkZvY3VzLFxuICBjb21wb25lbnRzIGFzIFNlbGVjdERyb3Bkb3duRWxlbWVudHMsXG59IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5cbmltcG9ydCB7IEV4dGVuZGVkT3B0aW9uLCBTaXplZEluZGljYXRvclByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgaW5kaWNhdG9ySWNvbnMgfSBmcm9tICcuL2NvbnN0YW50cyc7XG5pbXBvcnQgeyBTZWxlY3REcm9wZG93bkNvbnRleHQgfSBmcm9tICcuL2NvbnRhaW5lcnMnO1xuXG5jb25zdCB7IERyb3Bkb3duSW5kaWNhdG9yIH0gPSBTZWxlY3REcm9wZG93bkVsZW1lbnRzO1xuXG4vKipcbiAqIEdlbmVyYXRlcyBhY2Nlc3NpYmxlIGZvY3VzIG1lc3NhZ2VzIGZvciBzY3JlZW4gcmVhZGVycy5cbiAqIFByb3ZpZGVzIGRldGFpbGVkIGluZm9ybWF0aW9uIGFib3V0IHRoZSBjdXJyZW50bHkgZm9jdXNlZCBvcHRpb24uXG4gKlxuICogQHBhcmFtIHBhcmFtcyAtIE9iamVjdCBjb250YWluaW5nIHRoZSBmb2N1c2VkIG9wdGlvbiBkZXRhaWxzXG4gKiBAcmV0dXJucyBGb3JtYXR0ZWQgYWNjZXNzaWJpbGl0eSBtZXNzYWdlXG4gKi9cbmV4cG9ydCBjb25zdCBvbkZvY3VzOiBBcmlhT25Gb2N1czxFeHRlbmRlZE9wdGlvbj4gPSAoe1xuICBmb2N1c2VkOiB7IGxhYmVsLCBzdWJ0aXRsZSwgcmlnaHRMYWJlbCwgZGlzYWJsZWQgfSxcbn0pID0+IHtcbiAgY29uc3QgZm9ybWF0dGVkU3VidGl0bGUgPSBgLCAke3N1YnRpdGxlfWA7XG4gIGNvbnN0IGZvcm1hdHRlZFJpZ2h0TGFiZWwgPSBgLCAke3JpZ2h0TGFiZWx9YDtcblxuICBjb25zdCBtc2cgPSBgWW91IGFyZSBjdXJyZW50bHkgZm9jdXNlZCBvbiBvcHRpb24gJHtsYWJlbH0ke1xuICAgIHN1YnRpdGxlID8gZm9ybWF0dGVkU3VidGl0bGUgOiAnJ1xuICB9ICR7cmlnaHRMYWJlbCA/IGZvcm1hdHRlZFJpZ2h0TGFiZWwgOiAnJ30ke2Rpc2FibGVkID8gJywgZGlzYWJsZWQnIDogJyd9YDtcblxuICByZXR1cm4gbXNnO1xufTtcblxuLyoqXG4gKiBDdXN0b20gZHJvcGRvd24gaW5kaWNhdG9yIHRoYXQgc2hvd3MgZWl0aGVyIGEgY2hldnJvbiBvciBzZWFyY2ggaWNvbi5cbiAqIFRoZSBpY29uIHR5cGUgZGVwZW5kcyBvbiB3aGV0aGVyIHRoZSBzZWxlY3QgaXMgc2VhcmNoYWJsZSBvciBub3QuXG4gKi9cbmV4cG9ydCBjb25zdCBEcm9wZG93bkJ1dHRvbiA9IChwcm9wczogU2l6ZWRJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IHNpemUsIGlzU2VhcmNoYWJsZSB9ID0gcHJvcHMuc2VsZWN0UHJvcHM7XG4gIGNvbnN0IGNvbG9yID0gcHJvcHMuaXNEaXNhYmxlZCA/ICd0ZXh0LWRpc2FibGVkJyA6ICd0ZXh0JztcbiAgY29uc3QgaWNvblNpemUgPSBzaXplID8/ICdtZWRpdW0nO1xuICBjb25zdCBpY29uVHlwZSA9IGlzU2VhcmNoYWJsZSA/ICdTZWFyY2hhYmxlJyA6ICdDaGV2cm9uJztcbiAgY29uc3QgeyAuLi5pY29uUHJvcHMgfSA9IGluZGljYXRvckljb25zW2Ake2ljb25TaXplfSR7aWNvblR5cGV9YF07XG4gIGNvbnN0IHsgaWNvbjogSW5kaWNhdG9ySWNvbiB9ID0gaWNvblByb3BzO1xuXG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duSW5kaWNhdG9yIHsuLi5wcm9wc30+XG4gICAgICA8SW5kaWNhdG9ySWNvbiB7Li4uaWNvblByb3BzfSBjb2xvcj17Y29sb3J9IC8+XG4gICAgPC9Ecm9wZG93bkluZGljYXRvcj5cbiAgKTtcbn07XG5cbmNvbnN0IEN1c3RvbVN0eWxlZFJlbW92ZUFsbERpdiA9IHN0eWxlZCgnZGl2JykoXG4gIGNzcyh7XG4gICAgJyY6Zm9jdXMnOiB7XG4gICAgICBvdXRsaW5lOiBgMnB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnByaW1hcnl9YCxcbiAgICB9LFxuICAgICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICBvdXRsaW5lOiBgMnB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnByaW1hcnl9YCxcbiAgICB9LFxuICB9KVxuKTtcblxuLyoqXG4gKiBDdXN0b20gcmVtb3ZlIGFsbCBidXR0b24gZm9yIG11bHRpLXNlbGVjdCBtb2RlLlxuICogUHJvdmlkZXMga2V5Ym9hcmQgbmF2aWdhdGlvbiBhbmQgYWNjZXNzaWJsZSByZW1vdmFsIG9mIGFsbCBzZWxlY3RlZCB2YWx1ZXMuXG4gKi9cbmV4cG9ydCBjb25zdCBSZW1vdmVBbGxCdXR0b24gPSAocHJvcHM6IFNpemVkSW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IC4uLnJlc3RJbm5lclByb3BzIH0sXG4gICAgc2VsZWN0UHJvcHM6IHsgc2l6ZSB9LFxuICB9ID0gcHJvcHM7XG5cbiAgY29uc3QgeyByZW1vdmVBbGxCdXR0b25SZWYsIHNlbGVjdElucHV0UmVmIH0gPSB1c2VDb250ZXh0KFxuICAgIFNlbGVjdERyb3Bkb3duQ29udGV4dFxuICApO1xuXG4gIGNvbnN0IGljb25TaXplID0gc2l6ZSA/PyAnbWVkaXVtJztcbiAgY29uc3QgeyAuLi5pY29uUHJvcHMgfSA9IGluZGljYXRvckljb25zW2Ake2ljb25TaXplfVJlbW92ZWBdO1xuICBjb25zdCB7IGljb246IEluZGljYXRvckljb24gfSA9IGljb25Qcm9wcztcblxuICBjb25zdCBvbktleVByZXNzID0gKGU6IEtleWJvYXJkRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgaWYgKGUua2V5ID09PSAnRW50ZXInICYmIHJlc3RJbm5lclByb3BzLm9uTW91c2VEb3duKSB7XG4gICAgICByZXN0SW5uZXJQcm9wcy5vbk1vdXNlRG93bihlIGFzIGFueSk7XG4gICAgfVxuXG4gICAgaWYgKFxuICAgICAgc2VsZWN0SW5wdXRSZWY/LmN1cnJlbnQgJiZcbiAgICAgIChlLmtleSA9PT0gJ0Fycm93UmlnaHQnIHx8IGUua2V5ID09PSAnQXJyb3dMZWZ0JyB8fCBlLmtleSA9PT0gJ0Fycm93RG93bicpXG4gICAgKSB7XG4gICAgICBzZWxlY3RJbnB1dFJlZj8uY3VycmVudC5mb2N1cygpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBzdHlsZSA9IGdldFN0eWxlcygnY2xlYXJJbmRpY2F0b3InLCBwcm9wcykgYXMgUmVhY3QuQ1NTUHJvcGVydGllcztcblxuICByZXR1cm4gKFxuICAgIDxDdXN0b21TdHlsZWRSZW1vdmVBbGxEaXZcbiAgICAgIGFyaWEtbGFiZWw9XCJSZW1vdmUgYWxsIHNlbGVjdGVkXCJcbiAgICAgIHJvbGU9XCJidXR0b25cIlxuICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlbW92ZUFsbEJ1dHRvblJlZn1cbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgIHN0eWxlPXtzdHlsZX1cbiAgICAgIG9uS2V5RG93bj17b25LZXlQcmVzc31cbiAgICA+XG4gICAgICA8SW5kaWNhdG9ySWNvbiB7Li4uaWNvblByb3BzfSBjb2xvcj1cInRleHRcIiAvPlxuICAgIDwvQ3VzdG9tU3R5bGVkUmVtb3ZlQWxsRGl2PlxuICApO1xufTtcbiJdfQ== */");
+
+/**
+ * Custom remove all button for multi-select mode.
+ * Provides keyboard navigation and accessible removal of all selected values.
+ */
+export const RemoveAllButton = props => {
+  const {
+    getStyles,
+    innerProps: {
+      ...restInnerProps
+    },
+    selectProps: {
+      size
+    }
+  } = props;
+  const {
+    removeAllButtonRef,
+    selectInputRef
+  } = useContext(SelectDropdownContext);
+  const iconSize = size ?? 'medium';
+  const {
+    ...iconProps
+  } = indicatorIcons[`${iconSize}Remove`];
+  const {
+    icon: IndicatorIcon
+  } = iconProps;
+  const onKeyPress = e => {
+    if (e.key === 'Enter' && restInnerProps.onMouseDown) {
+      restInnerProps.onMouseDown(e);
+    }
+    if (selectInputRef?.current && (e.key === 'ArrowRight' || e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+      selectInputRef?.current.focus();
+    }
+  };
+  const style = getStyles('clearIndicator', props);
+  return /*#__PURE__*/_jsx(CustomStyledRemoveAllDiv, {
+    "aria-label": "Remove all selected",
+    role: "button",
+    tabIndex: 0,
+    ...restInnerProps,
+    ref: removeAllButtonRef
+    // eslint-disable-next-line gamut/no-inline-style
+    ,
+    style: style,
+    onKeyDown: onKeyPress,
+    children: /*#__PURE__*/_jsx(IndicatorIcon, {
+      ...iconProps,
+      color: "text"
+    })
+  });
 };

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

@@ -1,6 +1,5 @@
 export { iconSize, selectedIconSize, indicatorIcons } from './constants';
 export { MultiValueWithColorMode, MultiValueRemoveButton, RemoveAllButton, } from './multi-value';
-export { DropdownButton } from './controls';
-export { onFocus } from '../core/accessibility';
+export { DropdownButton, onFocus } from './controls';
 export { SelectDropdownContext, CustomContainer, CustomInput, CustomValueContainer, TypedReactSelect, } from './containers';
 export { IconOption, AbbreviatedSingleValue, formatOptionLabel, formatGroupLabel, } from './options';

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

@@ -1,6 +1,5 @@
 export { iconSize, selectedIconSize, indicatorIcons } from './constants';
 export { MultiValueWithColorMode, MultiValueRemoveButton, RemoveAllButton } from './multi-value';
-export { DropdownButton } from './controls';
-export { onFocus } from '../core/accessibility';
+export { DropdownButton, onFocus } from './controls';
 export { SelectDropdownContext, CustomContainer, CustomInput, CustomValueContainer, TypedReactSelect } from './containers';
 export { IconOption, AbbreviatedSingleValue, formatOptionLabel, formatGroupLabel } from './options';

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

@@ -3,7 +3,6 @@ import { CustomSelectComponentProps, ExtendedOption, SelectDropdownGroup } from
 /**
  * Custom option component that displays a check icon for selected items.
  * Also manages ARIA attributes for accessibility.
- * Skips the check icon for react-select/creatable's "Add" row (__isNew__).
  */
 export declare const IconOption: ({ children, ...rest }: CustomSelectComponentProps<typeof SelectDropdownElements.Option>) => import("react/jsx-runtime").JSX.Element;
 /**

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

@@ -44,7 +44,6 @@ const IconOptionLabel = ({
 /**
  * Custom option component that displays a check icon for selected items.
  * Also manages ARIA attributes for accessibility.
- * Skips the check icon for react-select/creatable's "Add" row (__isNew__).
  */
 export const IconOption = ({
   children,
@@ -55,17 +54,15 @@ export const IconOption = ({
   } = rest.selectProps;
   const {
     isFocused,
-    innerProps,
-    data
+    innerProps
   } = rest;
-  const isNew = data?.__isNew__;
   return /*#__PURE__*/_jsxs(SelectDropdownElements.Option, {
     ...rest,
     innerProps: {
       ...innerProps,
       'aria-selected': isFocused
     },
-    children: [children, !isNew && rest?.isSelected && /*#__PURE__*/_jsx(CheckIcon, {
+    children: [children, rest?.isSelected && /*#__PURE__*/_jsx(CheckIcon, {
       size: selectedIconSize[size ?? 'medium']
     })]
   });

package/dist/Form/SelectDropdown/{core/styles.js → styles.js}

@@ -1,10 +1,9 @@
-import { css, states, variant } from '@codecademy/gamut-styles';
-import { dismissSharedStyles, tagBaseStyles, tagLabelFontSize, tagLabelPadding } from '../../../Tag/styles';
-import { formBaseComponentStyles, formBaseFieldStylesObject, formFieldDisabledStyles, formFieldPaddingStyles, InputSelectors } from '../../styles';
+import { css, states, variant, zIndices } 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',
@@ -62,7 +61,7 @@ const textColor = css({
   color: 'text'
 });
 const placeholderColor = css({
-  color: 'text-secondary'
+  color: 'text-disabled'
 });
 export const getMemoizedStyles = (theme, zIndex) => {
   return {
@@ -137,8 +136,6 @@ export const getMemoizedStyles = (theme, zIndex) => {
           error: state.selectProps.error,
           theme
         }),
-        // Drop react-select's default menu drop shadow; the border above defines the edge.
-        boxShadow: 'none',
         ...(dropdownWidth ? {
           minWidth: dropdownWidth,
           width: dropdownWidth
@@ -149,6 +146,12 @@ export const getMemoizedStyles = (theme, zIndex) => {
         } : {})
       };
     },
+    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 ?? zIndices.popover
+    }),
     menuList: (provided, state) => {
       const sizeInteger = state.selectProps.size === 'small' ? 2 : 3;
       const maxHeight = `${(state.selectProps.shownOptionsLimit ?? 6) * sizeInteger}rem`;
@@ -196,32 +199,16 @@ export const getMemoizedStyles = (theme, zIndex) => {
         backgroundColor: theme.colors['secondary-hover']
       }
     }),
-    noOptionsMessage: provided => ({
-      ...provided,
-      color: theme.colors['text-secondary']
+    option: (provided, state) => ({
+      ...getOptionBackground(state.isSelected, state.isFocused)({
+        theme
+      }),
+      alignItems: 'center',
+      color: state.isDisabled ? 'text-disabled' : 'default',
+      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+      display: 'flex',
+      padding: state.selectProps.size === 'small' ? '3px 14px' : '11px 14px'
     }),
-    option: (provided, state) => {
-      const isNew = state.data?.__isNew__;
-      const isSmall = state.selectProps.size === 'small';
-      return {
-        ...getOptionBackground(state.isSelected, state.isFocused)({
-          theme
-        }),
-        alignItems: 'center',
-        color: state.isDisabled ? theme.colors['text-disabled'] : isNew ? theme.colors.primary : theme.colors.text,
-        cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-        display: 'flex',
-        padding: isSmall ? '3px 14px' : '11px 14px',
-        ...(isNew && {
-          // Gradient creates the 1px divider line at the top edge of the option background
-          backgroundImage: `linear-gradient(${theme.colors['text-disabled']} 1px, transparent 1px)`,
-          backgroundPosition: '0 0',
-          backgroundRepeat: 'no-repeat',
-          backgroundSize: '100% 1px',
-          paddingTop: isSmall ? '11px' : '19px'
-        })
-      };
-    },
     placeholder: provided => ({
       ...provided,
       ...placeholderColor({

package/dist/Form/SelectDropdown/types/component-props.d.ts

@@ -1,5 +1,5 @@
 import { Ref, SelectHTMLAttributes } from 'react';
-import { Options as OptionsType, Props as NamedProps } from 'react-select';
+import { Props as NamedProps } from 'react-select';
 import { SelectComponentProps } from '../../inputs/Select';
 import { OptionStrict, SelectDropdownGroup, SelectDropdownOptions } from './options';
 import { ReactSelectAdditionalProps, SelectDropdownSizes, SharedProps } from './styles';
@@ -28,7 +28,7 @@ export type SelectDropdownBaseProps = Omit<SelectComponentProps, 'onChange' | 'd
  * Core props interface that defines the essential properties for SelectDropdown.
  * This interface combines base props with react-select props and HTML select attributes.
  */
-export interface SelectDropdownCoreProps extends SelectDropdownBaseProps, Omit<NamedProps<OptionStrict, boolean>, 'formatOptionLabel' | 'isDisabled' | 'value' | 'options' | 'components' | 'styles' | 'theme' | 'onChange' | 'multiple' | 'isSearchable'>, Pick<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'disabled' | 'onClick'>, SharedProps {
+export interface SelectDropdownCoreProps extends SelectDropdownBaseProps, Omit<NamedProps<OptionStrict, boolean>, 'formatOptionLabel' | 'isDisabled' | 'value' | 'options' | 'components' | 'styles' | 'theme' | 'onChange' | 'multiple'>, Pick<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'disabled' | 'onClick'>, SharedProps {
     /** Required name attribute for the select input */
     name: string;
     /** Placeholder text shown when no option is selected.
@@ -38,39 +38,6 @@ export interface SelectDropdownCoreProps extends SelectDropdownBaseProps, Omit<N
     placeholder?: string;
     /** Array of options or option groups to display in the dropdown */
     options?: SelectDropdownOptions | SelectDropdownGroup[];
-    /**
-     * Allows users to create new options by typing a value not in the options list.
-     * When true, isSearchable is automatically set to true.
-     * Pair with onCreateOption to persist new options.
-     */
-    isCreatable?: boolean;
-    /**
-     * Called when the user confirms a new option via the "Add" row.
-     * Convenience callback for persisting the new value to your `options` list.
-     * Selection updates are delivered through `onChange` with `action: 'create-option'`.
-     */
-    onCreateOption?: (inputValue: string) => void;
-    /**
-     * Customises the label shown in the "Add" row.
-     * Defaults to: (inputValue) => `Add "${inputValue}"`.
-     */
-    formatCreateLabel?: (inputValue: string) => React.ReactNode;
-    /**
-     * Controls when the "Add" row is visible.
-     * Receives the current input, selected values, and all options.
-     * Defaults to react-select's built-in logic (hidden when input matches an existing option label).
-     * Use cases: minimum-length gating, pattern validation, case-insensitive dedup, max-items cap.
-     */
-    isValidNewOption?: (inputValue: string, value: OptionsType<OptionStrict>, options: OptionsType<OptionStrict>) => boolean;
-    /**
-     * Customizes the message shown inside the dropdown menu when no option matches
-     * the current input (react-select's "No options" state). Useful for surfacing
-     * validation/error text directly in the dropdown. Accepts a node, or a function
-     * receiving the current input value.
-     */
-    validationMessage?: React.ReactNode | ((obj: {
-        inputValue: string;
-    }) => React.ReactNode);
 }
 /**
  * Props for single-select mode.
@@ -92,23 +59,11 @@ export interface MultiSelectDropdownProps extends SelectDropdownCoreProps {
     /** Callback fired when the selected values change */
     onChange?: NamedProps<OptionStrict, true>['onChange'];
 }
-/**
- * Enforces that isSearchable cannot be false when isCreatable is true.
- * Creatable mode requires the search input so users can type new option values.
- */
-type CreatableConstraint = {
-    isCreatable?: false | undefined;
-    isSearchable?: boolean;
-} | {
-    isCreatable: true;
-    isSearchable?: true;
-};
 /**
  * Union type for all SelectDropdown prop variants.
- * Supports both single and multi-select modes through discriminated union,
- * intersected with CreatableConstraint to enforce isSearchable compatibility.
+ * Supports both single and multi-select modes through discriminated union.
  */
-export type SelectDropdownProps = (SingleSelectDropdownProps | MultiSelectDropdownProps) & CreatableConstraint;
+export type SelectDropdownProps = SingleSelectDropdownProps | MultiSelectDropdownProps;
 /**
  * Base interface for onChange-related props.
  * Used internally for type checking and prop validation.
@@ -121,12 +76,9 @@ export interface BaseOnChangeProps {
 }
 /**
  * Props for the typed React Select component wrapper.
- * Extends ReactSelectAdditionalProps with an optional ref and creatable flag.
+ * Extends ReactSelectAdditionalProps with an optional ref.
  */
-export interface TypedReactSelectProps extends ReactSelectAdditionalProps, Pick<SelectDropdownCoreProps, 'formatCreateLabel' | 'isValidNewOption'> {
+export interface TypedReactSelectProps extends ReactSelectAdditionalProps {
     /** Optional ref to the underlying react-select component */
     selectRef?: Ref<any>;
-    /** When true, renders CreatableSelect instead of ReactSelect */
-    isCreatable?: boolean;
 }
-export {};

package/dist/Form/SelectDropdown/types/internal.d.ts

@@ -14,7 +14,7 @@ export type InternalSelectProps = {
  * Ref type for programmatic focus management.
  * Used for managing focus on select input and remove all button.
  */
-export type ProgrammaticFocusRef = React.MutableRefObject<HTMLDivElement> | React.MutableRefObject<null>;
+export type ProgramaticFocusRef = React.MutableRefObject<HTMLDivElement> | React.MutableRefObject<null>;
 /**
  * Context value for SelectDropdown internal state management.
  * Provides access to focus state and refs for keyboard navigation.
@@ -25,9 +25,9 @@ export interface SelectDropdownContextValueTypes {
     /** Function to update the currently focused value */
     setCurrentFocusedValue?: React.Dispatch<React.SetStateAction<unknown>>;
     /** Ref to the select input for programmatic focus */
-    selectInputRef?: ProgrammaticFocusRef;
+    selectInputRef?: ProgramaticFocusRef;
     /** Ref to the remove all button for programmatic focus */
-    removeAllButtonRef?: ProgrammaticFocusRef;
+    removeAllButtonRef?: ProgramaticFocusRef;
 }
 /**
  * Props for sized indicator components (dropdown arrow, search icon, etc.).

package/dist/Form/SelectDropdown/types/styles.d.ts

@@ -1,5 +1,5 @@
 import { StyleProps } from '@codecademy/variance';
-import { conditionalBorderStates } from '../core/styles';
+import { conditionalBorderStates } from '../styles';
 import { InternalInputsProps } from './component-props';
 /**
  * Size variants for the SelectDropdown component.
@@ -69,9 +69,5 @@ export type ControlState = BaseSelectComponentProps & InteractionStates & {
 export type OptionState = BaseSelectComponentProps & InteractionStates & {
     /** Whether the option is selected */
     isSelected: boolean;
-    /** Option data — includes __isNew__ for react-select/creatable's "Add" row */
-    data?: {
-        __isNew__?: boolean;
-    };
 };
 export {};

package/dist/Form/SelectDropdown/{core/utils.d.ts → utils.d.ts}

@@ -1,14 +1,7 @@
-import * as React from 'react';
-import { ActionMeta, Options as OptionsType } from 'react-select';
-import { SelectOptionBase } from '../../utils';
-import { BaseOnChangeProps, ExtendedOption, MultiSelectDropdownProps, OptionStrict, SelectDropdownGroup, SelectDropdownOptions, SelectDropdownProps, SingleSelectDropdownProps } from '../types';
+import { SelectOptionBase } from '../utils';
+import { BaseOnChangeProps, ExtendedOption, MultiSelectDropdownProps, SelectDropdownGroup, SelectDropdownOptions, SelectDropdownProps, SingleSelectDropdownProps } from './types';
 export declare const isMultipleSelectProps: (props: BaseOnChangeProps) => props is MultiSelectDropdownProps;
 export declare const isSingleSelectProps: (props: BaseOnChangeProps) => props is SingleSelectDropdownProps;
-/**
- * Resolves the value for a newly created option from react-select action metadata
- * or the onChange option payload. Returns undefined when no reliable value exists.
- */
-export declare const getCreatedOptionValue: (optionEvent: OptionStrict | OptionsType<OptionStrict>, actionMeta: ActionMeta<OptionStrict>, multiple?: boolean) => string | undefined;
 export declare const isOptionGroup: (obj: unknown) => obj is SelectDropdownGroup;
 export declare const isOptionsGrouped: (options: SelectDropdownOptions) => options is SelectDropdownGroup[];
 /**
@@ -30,7 +23,4 @@ export declare const filterValueFromOptions: (options: SelectOptionBase[] | Sele
  * @param value - The value or values to remove
  * @returns New array with the specified values removed
  */
-export declare const resolveNoOptionsMessage: (validationMessage: SelectDropdownProps["validationMessage"]) => ((obj: {
-    inputValue: string;
-}) => React.ReactNode) | undefined;
 export declare const removeValueFromSelectedOptions: (selectedOptions: ExtendedOption[] | SelectOptionBase[], value: SelectDropdownProps["value"]) => SelectOptionBase[];

package/dist/Form/SelectDropdown/{core/utils.js → utils.js}

@@ -1,21 +1,5 @@
 export const isMultipleSelectProps = props => !!props.multiple;
 export const isSingleSelectProps = props => !props.multiple;
-/**
- * Resolves the value for a newly created option from react-select action metadata
- * or the onChange option payload. Returns undefined when no reliable value exists.
- */
-export const getCreatedOptionValue = (optionEvent, actionMeta, multiple) => {
-  const metaValue = actionMeta.option?.value;
-  if (metaValue) return metaValue;
-  if (!multiple) {
-    const {
-      value
-    } = optionEvent;
-    return value || undefined;
-  }
-  const newOption = optionEvent.find(option => option.__isNew__);
-  return newOption?.value || undefined;
-};
 export const isOptionGroup = obj => obj != null && typeof obj === 'object' && 'options' in obj && obj.options !== undefined;
 export const isOptionsGrouped = options => Array.isArray(options) && options.some(option => isOptionGroup(option));
 
@@ -44,13 +28,6 @@ export const filterValueFromOptions = (options, value, optionsAreGrouped) => {
  * @param value - The value or values to remove
  * @returns New array with the specified values removed
  */
-export const resolveNoOptionsMessage = validationMessage => {
-  if (validationMessage === undefined) return undefined;
-  if (typeof validationMessage === 'function') {
-    return validationMessage;
-  }
-  return () => validationMessage;
-};
 export const removeValueFromSelectedOptions = (selectedOptions, value) => {
   return selectedOptions.filter(option => {
     if (Array.isArray(value)) {

package/dist/Form/styles/index.d.ts

@@ -1,4 +1,4 @@
 export * from './shared-system-props';
 export * from './Checkbox-styles';
 export * from './Radio-styles';
-export * from '../SelectDropdown/core/styles';
+export * from '../SelectDropdown/styles';

package/dist/Form/styles/index.js

@@ -1,4 +1,4 @@
 export * from './shared-system-props';
 export * from './Checkbox-styles';
 export * from './Radio-styles';
-export * from '../SelectDropdown/core/styles';
+export * from '../SelectDropdown/styles';

package/dist/List/TableHeader.js

@@ -1,3 +1,4 @@
+import { zIndices } from '@codecademy/gamut-styles';
 import { forwardRef } from 'react';
 import { Box } from '../Box';
 import { HeaderRowEl } from './elements';
@@ -17,7 +18,7 @@ export const TableHeader = /*#__PURE__*/forwardRef(({
     display: "block",
     position: "sticky",
     top: 0,
-    zIndex: 2,
+    zIndex: zIndices.foreground,
     children: /*#__PURE__*/_jsx(HeaderRowEl, {
       ...rest,
       ref: ref,