@codecademy/gamut

Index: package/dist/Form/SelectDropdown/elements/containers.js
===================================================================
--- package/dist/Form/SelectDropdown/elements/containers.js
+++ package/dist/Form/SelectDropdown/elements/containers.js
@@ -1,6 +1,7 @@
-import { createContext, useLayoutEffect } from 'react';
+import { createContext, useEffect, 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.
  * Provides access to focus state and refs for keyboard navigation.
@@ -12,8 +13,25 @@
   removeAllButtonRef: undefined
 });
 
 /**
+ * Wraps react-select's `NoOptionsMessage` to report its text via
+ * `onAnnouncementChange` for screen-reader announcement (see
+ * `useNoOptionsAnnouncement`). react-select controls this component's
+ * mount/unmount, so a mount/unmount effect is the only way to detect the
+ * "no options" state - there's no prop or event exposed for it.
+ */
+export const createNoOptionsMessage = onAnnouncementChange => function NoOptionsMessage(props) {
+  useEffect(() => {
+    onAnnouncementChange(props.children);
+    return () => onAnnouncementChange('');
+  }, [props.children]);
+  return /*#__PURE__*/_jsx(SelectDropdownElements.NoOptionsMessage, {
+    ...props
+  });
+};
+
+/**
  * Custom container component that adds a hidden input for form submission.
  * Renders the selected values as a comma-separated string in the hidden input.
  */
 export const CustomContainer = ({
@@ -115,14 +133,29 @@
 };
 
 /**
  * Typed wrapper around react-select component.
- * Provides type safety for the underlying react-select implementation.
+ * 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.
  */
 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
   });