@codecademy/gamut

Index: package/dist/Form/SelectDropdown/styles.js
===================================================================
--- package/dist/Form/SelectDropdown/styles.js
+++ package/dist/Form/SelectDropdown/styles.js
@@ -136,8 +136,10 @@
         ...dropdownBorderStates({
           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
         } : {}),
@@ -193,18 +195,34 @@
       ':hover': {
         backgroundColor: theme.colors['secondary-hover']
       }
     }),
-    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'
+    noOptionsMessage: provided => ({
+      ...provided,
+      color: theme.colors['text-secondary']
     }),
+    option: (provided, state) => {
+      const isNew = state.data?.__isNew__;
+      const isSmall = state.selectProps.size === 'small';
+      return {
+        ...getOptionBackground(state.isSelected, state.isFocused)({
+          theme
+        }),
+        alignItems: 'center',
+        color: isNew ? state.isDisabled ? theme.colors['text-disabled'] : theme.colors.primary : state.isDisabled ? theme.colors['text-disabled'] : theme.colors.text,
+        cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        display: 'flex',
+        padding: isSmall ? '3px 14px' : '11px 14px',
+        ...(isNew && {
+          // Gradient creates the 1px divider line centred in the 16px spacer above the option text
+          backgroundImage: `linear-gradient(${theme.colors['text-disabled']} 1px, transparent 1px)`,
+          backgroundPosition: '0 8px',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '100% 1px',
+          paddingTop: isSmall ? '19px' : '27px'
+        })
+      };
+    },
     placeholder: provided => ({
       ...provided,
       ...placeholderColor({
         theme