@codecademy/gamut

Index: package/dist/Form/SelectDropdown/styles.js
===================================================================
--- package/dist/Form/SelectDropdown/styles.js
+++ package/dist/Form/SelectDropdown/styles.js
@@ -119,10 +119,10 @@
       ...provided,
       ...textColor({
         theme
       }),
-      padding: '0',
-      margin: '0'
+      margin: '0',
+      padding: '0'
     }),
     menu: (provided, state) => {
       const {
         dropdownWidth,
@@ -137,10 +137,10 @@
           error: state.selectProps.error,
           theme
         }),
         ...(dropdownWidth ? {
-          width: dropdownWidth,
-          minWidth: dropdownWidth
+          minWidth: dropdownWidth,
+          width: dropdownWidth
         } : {}),
         ...(menuAlignment === 'right' ? {
           left: 'auto',
           right: 0
@@ -157,20 +157,22 @@
     },
     multiValue: (provided, state) => ({
       ...provided,
       ...tagBaseStyles,
-      height: '24px',
-      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-      color: theme.colors.background,
       backgroundColor: 'transparent',
-      borderRadius: theme.borderRadii.md
+      color: theme.colors.background,
+      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+      height: '24px'
     }),
     multiValueLabel: provided => ({
       ...provided,
-      color: theme.colors.background,
       backgroundColor: theme.colors['text-secondary'],
-      borderRadius: `${theme.borderRadii.md} 0 0 ${theme.borderRadii.md}`,
-      fontSize: `${tagLabelFontSize}px`,
+      borderEndEndRadius: 0,
+      borderEndStartRadius: theme.borderRadii.md,
+      borderStartEndRadius: 0,
+      borderStartStartRadius: theme.borderRadii.md,
+      color: theme.colors.background,
+      fontSize: tagLabelFontSize,
       height: '100%',
       padding: `0 ${tagLabelPadding}px`,
       paddingLeft: `${tagLabelPadding}px`,
       // default label has an explicit rule for padding left so we need this to override it
@@ -178,44 +180,47 @@
     }),
     multiValueRemove: (provided, state) => ({
       ...provided,
       ...dismissSharedStyles,
-      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-      pointerEvents: state.isDisabled ? 'none' : 'visible',
       backgroundColor: theme.colors['text-secondary'],
-      borderRadius: `0 ${theme.borderRadii.md} ${theme.borderRadii.md} 0`,
+      borderEndEndRadius: theme.borderRadii.md,
+      borderEndStartRadius: 0,
+      borderStartEndRadius: theme.borderRadii.md,
+      borderStartStartRadius: 0,
+      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
       padding: 0,
       // default remove has padding left and right that we don't need
+      pointerEvents: state.isDisabled ? 'none' : 'visible',
       ':hover': {
         backgroundColor: theme.colors['secondary-hover']
       }
     }),
     option: (provided, state) => ({
-      padding: state.selectProps.size === 'small' ? '3px 14px' : '11px 14px',
-      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
       ...getOptionBackground(state.isSelected, state.isFocused)({
         theme
       }),
-      display: 'flex',
       alignItems: 'center',
-      color: state.isDisabled ? 'text-disabled' : 'default'
+      color: state.isDisabled ? 'text-disabled' : 'default',
+      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+      display: 'flex',
+      padding: state.selectProps.size === 'small' ? '3px 14px' : '11px 14px'
     }),
     placeholder: provided => ({
       ...provided,
       ...placeholderColor({
         theme
       }),
-      whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
     }),
     singleValue: provided => ({
       ...provided,
       ...textColor({
         theme
       }),
-      display: 'flex',
       alignItems: 'center',
+      display: 'flex',
       marginLeft: 0
     }),
     valueContainer: provided => ({
       ...provided,