@codecademy/gamut 72.2.3-alpha.e393cd.0 → 72.2.3-alpha.f0a032.0

package/dist/Form/SelectDropdown/SelectDropdown.js

@@ -1,28 +1,14 @@
 import { useTheme } from '@emotion/react';
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useId, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
-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, getCreatedOptionValue, isMultipleSelectProps, isOptionsGrouped, isSingleSelectProps, removeValueFromSelectedOptions } from './utils';
+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 { 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.
  *
@@ -99,87 +85,32 @@ export const SelectDropdown = ({
   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 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)));
-
-  // Sync multi-select value from props when controlled (`value` is a string[]).
-  // Uncontrolled multi (`value` undefined or '') keeps selection in local state.
-  useEffect(() => {
-    if (!multiple || !Array.isArray(value)) return;
-    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, multiple]);
-  const changeHandler = useCallback((optionEvent, actionMeta) => {
-    setActivated(true);
-    if (actionMeta.action === 'create-option') {
-      const createdValue = getCreatedOptionValue(optionEvent, actionMeta, multiple);
-      if (createdValue) {
-        onCreateOption?.(createdValue);
-      }
-    }
-    const onChangeProps = {
-      onChange,
-      multiple
-    };
-    const forwardedMeta = actionMeta.action === 'create-option' ? actionMeta : {
-      action: onChangeAction,
-      option: isMultipleSelectProps(onChangeProps) ? undefined : optionEvent
-    };
-    if (isSingleSelectProps(onChangeProps)) {
-      const singleOptionEvent = optionEvent;
-      onChangeProps.onChange?.(singleOptionEvent, forwardedMeta);
-    }
-    if (isMultipleSelectProps(onChangeProps)) {
-      setMultiValues(optionEvent);
-      onChangeProps.onChange?.(optionEvent, forwardedMeta);
-    }
-  }, [onChange, multiple, onCreateOption]);
-  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 noOptionsMessage = validationMessage === undefined ? undefined // fall back to react-select default ("No options")
-  : typeof validationMessage === 'function' ? validationMessage : () => validationMessage;
+  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 theme = useTheme();
   const memoizedStyles = useMemo(() => {
     return getMemoizedStyles(theme, zIndex);
@@ -192,12 +123,12 @@ 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,
@@ -217,7 +148,7 @@ export const SelectDropdown = ({
       isValidNewOption: isValidNewOption,
       menuAlignment: menuAlignment,
       name: name,
-      noOptionsMessage: noOptionsMessage,
+      noOptionsMessage: resolveNoOptionsMessage(validationMessage),
       options: selectOptions,
       placeholder: placeholder,
       selectRef: selectInputRef,
@@ -227,7 +158,7 @@ export const SelectDropdown = ({
       value: multiple ? multiValues : parsedValue,
       onChange: changeHandler,
       onInputChange: onInputChange,
-      onKeyDown: multiple ? e => keyPressHandler(e) : undefined,
+      onKeyDown: multiple ? keyPressHandler : undefined,
       ...rest
     })
   });

package/dist/Form/SelectDropdown/core/accessibility.d.ts

@@ -0,0 +1,3 @@
+import { AriaOnFocus } from 'react-select';
+import { ExtendedOption } from '../types';
+export declare const onFocus: AriaOnFocus<ExtendedOption>;

package/dist/Form/SelectDropdown/core/accessibility.js

@@ -0,0 +1,12 @@
+export const onFocus = ({
+  focused: {
+    label,
+    subtitle,
+    rightLabel,
+    disabled
+  }
+}) => {
+  const formattedSubtitle = `, ${subtitle}`;
+  const formattedRightLabel = `, ${rightLabel}`;
+  return `You are currently focused on option ${label}${subtitle ? formattedSubtitle : ''} ${rightLabel ? formattedRightLabel : ''}${disabled ? ', disabled' : ''}`;
+};

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

@@ -0,0 +1,13 @@
+export declare const defaultComponents: {
+    DropdownIndicator: (props: import("../types").SizedIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    IndicatorSeparator: () => null;
+    ClearIndicator: (props: import("../types").SizedIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    SelectContainer: ({ children, ...rest }: import("../types").CustomSelectComponentProps<(<Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element)>) => import("react/jsx-runtime").JSX.Element;
+    ValueContainer: ({ ...rest }: import("../types").CustomSelectComponentProps<(<Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element)>) => import("react/jsx-runtime").JSX.Element;
+    MultiValue: (props: import("react-select").MultiValueProps<import("..").ExtendedOption, true, import("react-select").GroupBase<import("..").ExtendedOption>>) => import("react/jsx-runtime").JSX.Element;
+    MultiValueRemove: (props: import("react-select").MultiValueRemoveProps<import("..").ExtendedOption, true, import("react-select").GroupBase<import("..").ExtendedOption>>) => import("react/jsx-runtime").JSX.Element;
+    Option: ({ children, ...rest }: import("../types").CustomSelectComponentProps<(<Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element)>) => import("react/jsx-runtime").JSX.Element;
+    SingleValue: (props: import("react-select").SingleValueProps<import("..").ExtendedOption, false>) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ ...rest }: import("../types").CustomSelectComponentProps<(<Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element)>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ON_CHANGE_ACTION: "select-option";

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

@@ -0,0 +1,14 @@
+import { AbbreviatedSingleValue, CustomContainer, CustomInput, CustomValueContainer, DropdownButton, IconOption, MultiValueRemoveButton, MultiValueWithColorMode, RemoveAllButton } from '../elements';
+export const defaultComponents = {
+  DropdownIndicator: DropdownButton,
+  IndicatorSeparator: () => null,
+  ClearIndicator: RemoveAllButton,
+  SelectContainer: CustomContainer,
+  ValueContainer: CustomValueContainer,
+  MultiValue: MultiValueWithColorMode,
+  MultiValueRemove: MultiValueRemoveButton,
+  Option: IconOption,
+  SingleValue: AbbreviatedSingleValue,
+  Input: CustomInput
+};
+export const ON_CHANGE_ACTION = 'select-option';

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

@@ -1,6 +1,6 @@
 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 { dismissSharedStyles, tagBaseStyles, tagLabelFontSize, tagLabelPadding } from '../../../Tag/styles';
+import { formBaseComponentStyles, formBaseFieldStylesObject, formFieldDisabledStyles, formFieldPaddingStyles, InputSelectors } from '../../styles';
 const selectDropdownStyles = css({
   ...formBaseFieldStylesObject,
   display: 'flex',

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

@@ -1,6 +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, OptionStrict, SelectDropdownGroup, SelectDropdownOptions, SelectDropdownProps, SingleSelectDropdownProps } from '../types';
 export declare const isMultipleSelectProps: (props: BaseOnChangeProps) => props is MultiSelectDropdownProps;
 export declare const isSingleSelectProps: (props: BaseOnChangeProps) => props is SingleSelectDropdownProps;
 /**
@@ -29,4 +30,7 @@ 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/{utils.js → core/utils.js}

@@ -44,6 +44,13 @@ 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/SelectDropdown/elements/controls.d.ts

@@ -1,13 +1,4 @@
-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>;
+import { SizedIndicatorProps } from '../types';
 /**
  * Custom dropdown indicator that shows either a chevron or search icon.
  * The icon type depends on whether the select is searchable or not.

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

@@ -5,27 +5,6 @@ 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.

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

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

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

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

package/dist/Form/SelectDropdown/hooks/useSelectHandlers.d.ts

@@ -0,0 +1,22 @@
+import { KeyboardEvent } from 'react';
+import * as React from 'react';
+import { ActionMeta, Options as OptionsType } from 'react-select';
+import { SelectOptionBase } from '../../utils';
+import { MultiSelectDropdownProps, OptionStrict, SelectDropdownGroup, SelectDropdownProps, SingleSelectDropdownProps } from '../types';
+interface UseSelectHandlersArgs {
+    onChange?: SingleSelectDropdownProps['onChange'] | MultiSelectDropdownProps['onChange'];
+    multiple?: boolean;
+    onCreateOption?: (inputValue: string) => void;
+    selectOptions: SelectOptionBase[] | SelectDropdownGroup[];
+    value?: SelectDropdownProps['value'];
+    currentFocusedValue: unknown;
+    removeAllButtonRef: React.MutableRefObject<HTMLDivElement | null>;
+}
+interface UseSelectHandlersReturn {
+    activated: boolean;
+    multiValues: OptionStrict[] | false;
+    changeHandler: (optionEvent: OptionStrict | OptionsType<OptionStrict>, actionMeta: ActionMeta<OptionStrict>) => void;
+    keyPressHandler: (e: KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare const useSelectHandlers: ({ onChange, multiple, onCreateOption, selectOptions, value, currentFocusedValue, removeAllButtonRef, }: UseSelectHandlersArgs) => UseSelectHandlersReturn;
+export {};

package/dist/Form/SelectDropdown/hooks/useSelectHandlers.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react';
+import { ON_CHANGE_ACTION } from '../core/constants';
+import { filterValueFromOptions, getCreatedOptionValue, isMultipleSelectProps, isOptionsGrouped, isSingleSelectProps, removeValueFromSelectedOptions } from '../core/utils';
+export const useSelectHandlers = ({
+  onChange,
+  multiple,
+  onCreateOption,
+  selectOptions,
+  value,
+  currentFocusedValue,
+  removeAllButtonRef
+}) => {
+  const [activated, setActivated] = useState(false);
+  const [multiValues, setMultiValues] = useState(multiple ? filterValueFromOptions(selectOptions, value, isOptionsGrouped(selectOptions)) : false);
+
+  // Sync multi-select value from props when controlled (`value` is a string[]).
+  // Uncontrolled multi (`value` undefined or '') keeps selection in local state.
+  useEffect(() => {
+    if (!multiple || !Array.isArray(value)) return;
+    const newMultiValues = filterValueFromOptions(selectOptions, value, isOptionsGrouped(selectOptions));
+    if (newMultiValues !== multiValues) setMultiValues(newMultiValues);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectOptions, value, multiple]);
+  const changeHandler = useCallback((optionEvent, actionMeta) => {
+    setActivated(true);
+    if (actionMeta.action === 'create-option') {
+      const createdValue = getCreatedOptionValue(optionEvent, actionMeta, multiple);
+      if (createdValue) onCreateOption?.(createdValue);
+    }
+    const onChangeProps = {
+      onChange,
+      multiple
+    };
+    const forwardedMeta = actionMeta.action === 'create-option' ? actionMeta : {
+      action: ON_CHANGE_ACTION,
+      option: isMultipleSelectProps(onChangeProps) ? undefined : optionEvent
+    };
+    if (isSingleSelectProps(onChangeProps)) {
+      onChangeProps.onChange?.(optionEvent, forwardedMeta);
+    }
+    if (isMultipleSelectProps(onChangeProps)) {
+      setMultiValues(optionEvent);
+      onChangeProps.onChange?.(optionEvent, forwardedMeta);
+    }
+  }, [onChange, multiple, onCreateOption]);
+  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();
+    }
+  };
+  return {
+    activated,
+    multiValues,
+    changeHandler,
+    keyPressHandler
+  };
+};

package/dist/Form/SelectDropdown/hooks/useSelectOptions.d.ts

@@ -0,0 +1,14 @@
+import { SelectOptionBase } from '../../utils';
+import { SelectDropdownGroup, SelectDropdownOptions, SelectDropdownSizes } from '../types';
+interface UseSelectOptionsArgs {
+    options?: SelectDropdownOptions | SelectDropdownGroup[];
+    id?: string;
+    size?: SelectDropdownSizes['size'];
+    value?: string | string[];
+}
+interface UseSelectOptionsReturn {
+    selectOptions: SelectOptionBase[] | SelectDropdownGroup[];
+    parsedValue: SelectOptionBase | undefined;
+}
+export declare const useSelectOptions: ({ options, id, size, value, }: UseSelectOptionsArgs) => UseSelectOptionsReturn;
+export {};

package/dist/Form/SelectDropdown/hooks/useSelectOptions.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { parseOptions } from '../../utils';
+import { isOptionsGrouped } from '../core/utils';
+export const useSelectOptions = ({
+  options,
+  id,
+  size,
+  value
+}) => {
+  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]);
+  return {
+    selectOptions,
+    parsedValue
+  };
+};

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 ProgramaticFocusRef = React.MutableRefObject<HTMLDivElement> | React.MutableRefObject<null>;
+export type ProgrammaticFocusRef = 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?: ProgramaticFocusRef;
+    selectInputRef?: ProgrammaticFocusRef;
     /** Ref to the remove all button for programmatic focus */
-    removeAllButtonRef?: ProgramaticFocusRef;
+    removeAllButtonRef?: ProgrammaticFocusRef;
 }
 /**
  * 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 '../styles';
+import { conditionalBorderStates } from '../core/styles';
 import { InternalInputsProps } from './component-props';
 /**
  * Size variants for the SelectDropdown component.

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/styles';
+export * from '../SelectDropdown/core/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/styles';
+export * from '../SelectDropdown/core/styles';

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "72.2.3-alpha.e393cd.0",
+  "version": "72.2.3-alpha.f0a032.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bin": "./bin/gamut.mjs",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.10-alpha.e393cd.0",
-    "@codecademy/gamut-illustrations": "0.58.16-alpha.e393cd.0",
-    "@codecademy/gamut-patterns": "0.10.35-alpha.e393cd.0",
-    "@codecademy/gamut-styles": "20.0.3-alpha.e393cd.0",
-    "@codecademy/variance": "0.26.2-alpha.e393cd.0",
+    "@codecademy/gamut-icons": "9.57.10-alpha.f0a032.0",
+    "@codecademy/gamut-illustrations": "0.58.16-alpha.f0a032.0",
+    "@codecademy/gamut-patterns": "0.10.35-alpha.f0a032.0",
+    "@codecademy/gamut-styles": "20.0.3-alpha.f0a032.0",
+    "@codecademy/variance": "0.26.2-alpha.f0a032.0",
     "@formatjs/intl-locale": "5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",