Update multiselect style

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Added
 
+- `Select`: Render multiselect values as Tags ([@lorgan3](https://github.com/lorgan3)) in [#2814](https://github.com/teamleadercrm/ui/pull/2814)
+
 ### Changed
 
 - [BREAKING] The ES Modules build has been moved to the dist folder, so you now need update the css import to `@teamleader/ui/dist/index.css` ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2809](https://github.com/teamleadercrm/ui/pull/2809)
@@ -11,6 +13,7 @@
 ### Removed
 
 - [BREAKING] The CommonJS build has been removed. We now only have an ES Modules build. ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2809](https://github.com/teamleadercrm/ui/pull/2809)
+- `Select`: `inverse` prop ([@lorgan3](https://github.com/lorgan3)) in [#2814](https://github.com/teamleadercrm/ui/pull/2814)
 
 ## [23.2.0] - 2023-11-14
 
@@ -22,47 +25,47 @@
 
 ### Changed
 
-- `WysiwygEditor`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `ValidationText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `WarningText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `SuccessText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `HelpText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `ErrorText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Monospaced`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Marker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Toggle`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `ToastContainer`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Toast`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Tag`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `TabGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `SplitButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `RadioButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `ProgressTracker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Pagination`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `OverviewPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Message`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MarketingHeading2`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MarketingHeading1`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MarketingMarker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MarketingLockBadge`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MarketingButtonGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `LoadingBar`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `LabelValuePair`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Island`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `GridItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `EmptyState`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `DetailPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `DatePicker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `DataGrid`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Counter`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Container`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Banner`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `AdvancedCollapsible`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MarketingStatusLabel`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `MarketingMenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Label`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
-- `Bullet`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `WysiwygEditor`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ValidationText`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `WarningText`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SuccessText`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `HelpText`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ErrorText`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Monospaced`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Marker`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toggle`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ToastContainer`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toast`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Tag`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `TabGroup`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SplitButton`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `RadioButton`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ProgressTracker`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Pagination`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `OverviewPage`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Message`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading2`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading1`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMarker`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingLockBadge`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingButtonGroup`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LoadingBar`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LabelValuePair`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Island`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `GridItem`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `EmptyState`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DetailPage`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DatePicker`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DataGrid`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Counter`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Container`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Banner`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `AdvancedCollapsible`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingStatusLabel`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MenuItem`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMenuItem`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Label`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Bullet`: implemented ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
 
 ## [23.0.1] - 2023-10-30
 

src/components/select/Select.tsx

@@ -7,17 +7,15 @@ import ReactSelect, {
   ClearIndicatorProps,
   ControlProps,
   CSSObjectWithLabel,
-  DropdownIndicatorProps,
   GroupBase,
   GroupHeadingProps,
   GroupProps,
   MenuListProps,
+  MultiValueProps,
   OptionProps,
   OptionsOrGroups,
-  PlaceholderProps,
   Props,
   StylesConfig,
-  ValueContainerProps,
 } from 'react-select';
 import ReactCreatableSelect from 'react-select/creatable';
 import SelectType from 'react-select/dist/declarations/src/Select';
@@ -28,6 +26,8 @@ import Icon from '../icon';
 import ValidationText from '../validationText';
 import theme from './theme.css';
 import { Option as OptionType } from './types';
+import Tag from '../tag';
+import { TagSize } from '../tag/Tag';
 
 const minHeightBySizeMap: Record<string, number> = {
   tiny: 24,
@@ -39,6 +39,8 @@ const minHeightBySizeMap: Record<string, number> = {
 export interface SelectRef<Option extends OptionType = OptionType, IsMulti extends boolean = false>
   extends SelectType<Option, IsMulti> {}
 
+export type SelectSize = Exclude<(typeof SIZES)[number], 'smallest' | 'hero' | 'fullscreen'>;
+
 export interface SelectProps<
   Option extends OptionType = OptionType,
   IsMulti extends boolean = false,
@@ -53,16 +55,14 @@ export interface SelectProps<
   error?: ReactNode;
   /** The text string to use as help text below the input. */
   helpText?: string;
-  /** Boolean indicating whether the select should render as inverse. */
-  inverse?: boolean;
   /** A custom width for the menu dropdown */
   menuWidth?: string;
   /** A custom horizontal offset for the menu dropdown, useful when also using a custom menuWidth  */
   menuHorizontalOffset?: string;
   /** Boolean indicating whether the select option text should render on one single line. */
   truncateOptionText?: boolean;
   /** Size of the input element. */
-  size?: Exclude<(typeof SIZES)[number], 'smallest' | 'hero' | 'fullscreen'>;
+  size?: SelectSize;
   /** The text string/element to use as success message below the input. */
   success?: ReactNode;
   /** Selected option value(s) */
@@ -84,19 +84,15 @@ export interface SelectProps<
   isMulti?: IsMulti;
 }
 
-const DropdownIndicator = <Option extends OptionType, IsMulti extends boolean>(
-  dropdownIndicatorProps: DropdownIndicatorProps<Option, IsMulti>,
-) => {
-  // @ts-ignore
-  const inverse = dropdownIndicatorProps.selectProps.inverse;
+const DropdownIndicator = () => {
   return (
     <Icon
       alignItems="center"
       className={theme['dropdown-indicator']}
-      color={inverse ? 'teal' : 'neutral'}
+      color="neutral"
       display="flex"
       justifyContent="center"
-      tint={inverse ? 'lightest' : 'darkest'}
+      tint="darkest"
     >
       <IconChevronDownSmallOutline />
     </Icon>
@@ -106,21 +102,52 @@ const DropdownIndicator = <Option extends OptionType, IsMulti extends boolean>(
 const ClearIndicator = <Option extends OptionType, IsMulti extends boolean>(
   clearIndicatorProps: ClearIndicatorProps<Option, IsMulti>,
 ) => {
-  // @ts-ignore
-  const inverse = clearIndicatorProps.selectProps.inverse;
   return (
     <Icon
       {...clearIndicatorProps.innerProps}
-      color={inverse ? 'teal' : 'neutral'}
+      color="neutral"
       display="flex"
-      tint={inverse ? 'lightest' : 'darkest'}
-      className={cx(theme['clear-indicator'], { [theme['clear-indicator--inverse']]: inverse })}
+      tint="darkest"
+      className={theme['clear-indicator']}
     >
       <IconCloseBadgedSmallFilled />
     </Icon>
   );
 };
 
+const SELECT_TO_TAG_SIZE: Record<SelectSize, TagSize> = {
+  tiny: 'small',
+  small: 'medium',
+  medium: 'large',
+  large: 'large',
+};
+
+const MultiValue = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  props: MultiValueProps<Option, IsMulti, Group>,
+) => {
+  const {
+    children,
+    removeProps: { onClick, onMouseDown, onMouseUp, ...rest },
+  } = props;
+  const size = (
+    props.selectProps as Props<Option, IsMulti, Group> & {
+      size: SelectSize;
+    }
+  ).size;
+
+  return (
+    <Tag
+      size={SELECT_TO_TAG_SIZE[size]}
+      onRemoveClick={onClick}
+      onRemoveMouseDown={onMouseDown}
+      onRemoveMouseUp={onMouseUp}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};
+
 export const selectOverlayNode =
   document.querySelector<HTMLDivElement>('div[data-teamleader-ui="select-overlay"]') || document.createElement('div');
 selectOverlayNode.setAttribute('data-teamleader-ui', 'select-overlay');
@@ -130,7 +157,6 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     components,
     creatable = false,
     error,
-    inverse = false,
     helpText,
     menuHorizontalOffset,
     size = 'medium',
@@ -161,37 +187,6 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
 
     const cursor = isDisabled ? 'default' : isSearchable || isSearchable === undefined ? 'text' : 'pointer';
 
-    if (inverse) {
-      return {
-        ...commonStyles,
-        backgroundColor: isDisabled ? COLOR.TEAL.DARK : COLOR.TEAL.NORMAL,
-        '&:hover': {
-          borderColor: !error && !warning && !success ? COLOR.TEAL.LIGHT : undefined,
-        },
-        borderColor: error
-          ? COLOR.RUBY.LIGHT
-          : warning
-          ? COLOR.GOLD.LIGHT
-          : success
-          ? COLOR.MINT.LIGHT
-          : isDisabled
-          ? COLOR.TEAL.DARK
-          : isFocused
-          ? COLOR.TEAL.LIGHT
-          : COLOR.TEAL.NORMAL,
-        boxShadow: error
-          ? `0 0 0 1px ${COLOR.RUBY.LIGHT}`
-          : warning
-          ? `0 0 0 1px ${COLOR.GOLD.LIGHT}`
-          : success
-          ? `0 0 0 1px ${COLOR.MINT.LIGHT}`
-          : isFocused
-          ? `0 0 0 1px ${COLOR.TEAL.LIGHT}`
-          : 'none',
-        cursor,
-      };
-    }
-
     return {
       ...commonStyles,
       backgroundColor: isDisabled ? COLOR.NEUTRAL.NORMAL : COLOR.NEUTRAL.LIGHTEST,
@@ -230,7 +225,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
       ...base,
       paddingTop: props.data.label ? 3 : 0,
       paddingBottom: 3,
-      borderBottomColor: inverse ? COLOR.TEAL.LIGHT : COLOR.NEUTRAL.NORMAL,
+      borderBottomColor: COLOR.NEUTRAL.NORMAL,
       borderBottomStyle: 'solid',
       borderBottomWidth: '1px',
       '&:last-child': {
@@ -245,7 +240,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
   ) => {
     return {
       ...base,
-      color: inverse ? COLOR.NEUTRAL.LIGHTEST : COLOR.TEAL.DARKEST,
+      color: COLOR.TEAL.DARKEST,
       fontSize: '12px',
       fontWeight: 700,
       letterSpacing: '0.6px',
@@ -298,7 +293,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     return {
       ...base,
       ...(menuWidth && { width: menuWidth }),
-      backgroundColor: inverse ? COLOR.TEAL.NORMAL : COLOR.NEUTRAL.LIGHTEST,
+      backgroundColor: COLOR.NEUTRAL.LIGHTEST,
       fontFamily: 'Inter',
       fontSize: '14px',
       fontWeight: 400,
@@ -309,53 +304,11 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     };
   };
 
-  const getMultiValueStyles = (base: CSSObjectWithLabel) => {
-    return {
-      ...base,
-      borderColor: inverse ? COLOR.TEAL.DARK : COLOR.NEUTRAL.NORMAL,
-      borderStyle: 'solid',
-      borderWidth: '1px',
-      borderRadius: '4px',
-      margin: '1px',
-    };
-  };
-
-  const getMultiValueLabelStyles = (base: CSSObjectWithLabel) => {
-    return {
-      ...base,
-      backgroundColor: inverse ? COLOR.TEAL.DARK : COLOR.NEUTRAL.LIGHT,
-      borderRadius: 0,
-      color: inverse ? COLOR.NEUTRAL.LIGHTEST : COLOR.TEAL.DARKEST,
-      fontFamily: 'Inter',
-      fontWeight: 500,
-      fontSize: size === 'tiny' || size === 'small' ? '12px' : size === 'large' ? '16px' : '14px',
-      lineHeight: size === 'tiny' || size === 'small' ? '1' : '18px',
-      padding: size === 'tiny' ? '3px' : size === 'large' ? '9px' : '6px',
-    };
-  };
-
-  const getMultiValueRemoveStyles = (base: CSSObjectWithLabel) => {
-    return {
-      ...base,
-      backgroundColor: inverse ? COLOR.TEAL.DARK : COLOR.NEUTRAL.LIGHT,
-      borderRadius: 0,
-      color: inverse ? COLOR.NEUTRAL.LIGHTEST : COLOR.TEAL.DARKEST,
-      '&:hover': {
-        backgroundColor: inverse ? COLOR.TEAL.DARKEST : COLOR.NEUTRAL.NORMAL,
-        color: inverse ? COLOR.NEUTRAL.LIGHTEST : COLOR.TEAL.DARKEST,
-      },
-      paddingLeft: size === 'tiny' ? '3px' : '6px',
-      paddingRight: size === 'tiny' ? '3px' : '6px',
-      transition: 'background-color .35s cubic-bezier(.4, 0, .2, 1)',
-      cursor: 'pointer',
-    };
-  };
-
   const getOptionStyles = (
     base: CSSObjectWithLabel,
     { isDisabled, isFocused, isSelected }: OptionProps<Option>,
   ): CSSObjectWithLabel => {
-    const commonStyles: CSSObjectWithLabel = {
+    return {
       ...base,
       ...(truncateOptionText
         ? {
@@ -367,28 +320,6 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
           }),
       padding: '8px 12px',
       cursor: isDisabled ? 'default' : 'pointer',
-    };
-
-    if (inverse) {
-      return {
-        ...commonStyles,
-        color: isDisabled
-          ? COLOR.TEAL.LIGHT
-          : isSelected
-          ? COLOR.NEUTRAL.LIGHTEST
-          : isFocused
-          ? COLOR.TEAL.DARK
-          : COLOR.NEUTRAL.LIGHTEST,
-        backgroundColor: isSelected ? COLOR.TEAL.DARK : isFocused ? COLOR.TEAL.LIGHT : COLOR.TEAL.NORMAL,
-        '&:active': {
-          backgroundColor: isDisabled ? COLOR.TEAL.NORMAL : COLOR.TEAL.DARK,
-          color: isDisabled ? COLOR.TEAL.LIGHT : COLOR.NEUTRAL.LIGHTEST,
-        },
-      };
-    }
-
-    return {
-      ...commonStyles,
       color: isDisabled ? COLOR.NEUTRAL.DARK : COLOR.TEAL.DARK,
       backgroundColor: isSelected ? COLOR.AQUA.LIGHTEST : isFocused ? COLOR.NEUTRAL.LIGHT : COLOR.NEUTRAL.LIGHTEST,
       '&:active': {
@@ -398,39 +329,29 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     };
   };
 
-  const getPlaceholderStyles = (base: CSSObjectWithLabel, { isDisabled }: PlaceholderProps<Option>) => {
-    const commonStyles: CSSObjectWithLabel = {
+  const getPlaceholderStyles = (base: CSSObjectWithLabel) => {
+    return {
       ...base,
       marginLeft: '2px',
       marginRight: '2px',
-      whiteSpace: 'nowrap',
-    };
-
-    if (inverse) {
-      return {
-        ...commonStyles,
-        color: isDisabled ? COLOR.TEAL.NORMAL : COLOR.TEAL.LIGHT,
-      };
-    }
-
-    return {
-      ...commonStyles,
+      whiteSpace: 'nowrap' as const,
       color: COLOR.NEUTRAL.DARKEST,
     };
   };
 
   const getSingleValueStyles = (base: CSSObjectWithLabel) => ({
     ...base,
-    color: inverse ? COLOR.NEUTRAL.LIGHTEST : COLOR.TEAL.DARKEST,
+    color: COLOR.TEAL.DARKEST,
   });
 
-  const getValueContainerStyles = (base: CSSObjectWithLabel, { isMulti, hasValue }: ValueContainerProps<Option>) => {
+  const getValueContainerStyles = (base: CSSObjectWithLabel) => {
     return {
       ...base,
       minHeight: minHeightBySizeMap[size] - 2,
       lineHeight: 'normal',
-      padding: isMulti && hasValue && size !== 'large' ? 0 : '0 4px',
+      padding: size !== 'tiny' ? '2px' : '0 2px',
       width: '0',
+      gap: '3px',
     };
   };
 
@@ -442,21 +363,17 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     menu: getMenuStyles,
     menuList: getMenuListStyles,
     menuPortal: getMenuPortalStyles,
-    multiValue: getMultiValueStyles,
-    multiValueLabel: getMultiValueLabelStyles,
-    multiValueRemove: getMultiValueRemoveStyles,
     option: getOptionStyles,
     placeholder: getPlaceholderStyles,
     singleValue: getSingleValueStyles,
     valueContainer: getValueContainerStyles,
   });
 
   const boxProps = pickBoxProps(otherProps);
-  const restProps = { ...omitBoxProps(otherProps), ...{ inverse } };
+  const restProps = { ...omitBoxProps(otherProps), ...{ size } };
 
   const wrapperClassnames = cx(theme[`is-${size}`], {
     [theme['has-error']]: error,
-    [theme['is-inverse']]: inverse,
   });
 
   const Element = creatable
@@ -472,6 +389,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
           ClearIndicator,
           DropdownIndicator,
           IndicatorSeparator: null,
+          MultiValue,
           ...components,
         }}
         hideSelectedOptions={false}
@@ -483,7 +401,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
         isSearchable={isSearchable}
         {...restProps}
       />
-      <ValidationText error={error} help={helpText} inverse={inverse} success={success} warning={warning} />
+      <ValidationText error={error} help={helpText} success={success} warning={warning} />
     </Box>
   );
 }

src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap

@@ -23,7 +23,7 @@ exports[`Component - Select does not render a clear button when no value is prov
         class=" css-8v26ep-control"
       >
         <div
-          class=" css-wbqiiw-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"
@@ -107,7 +107,7 @@ exports[`Component - Select renders 1`] = `
         class=" css-8v26ep-control"
       >
         <div
-          class=" css-wbqiiw-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"
@@ -191,7 +191,7 @@ exports[`Component - Select renders a clear button when a value is provided 1`]
         class=" css-8v26ep-control"
       >
         <div
-          class=" css-wbqiiw-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-1i5bhiv-singleValue"
@@ -294,7 +294,7 @@ exports[`Component - Select renders a help text 1`] = `
         class=" css-8v26ep-control"
       >
         <div
-          class=" css-wbqiiw-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"
@@ -384,7 +384,7 @@ exports[`Component - Select renders a success message 1`] = `
         class=" css-1ecujp2-control"
       >
         <div
-          class=" css-wbqiiw-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"
@@ -476,7 +476,7 @@ exports[`Component - Select renders a warning message 1`] = `
         class=" css-1qn4nre-control"
       >
         <div
-          class=" css-wbqiiw-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"
@@ -568,7 +568,7 @@ exports[`Component - Select renders an error message 1`] = `
         class=" css-153luwj-control"
       >
         <div
-          class=" css-wbqiiw-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"

src/components/select/select.stories.tsx

@@ -87,7 +87,6 @@ basic.args = {
   size: 'medium',
   menuWidth: undefined,
   menuHorizontalOffset: undefined,
-  inverse: false,
 };
 
 export const Grouped: ComponentStory<typeof Select> = () => {

src/components/select/theme.css

@@ -15,12 +15,6 @@
   &:hover {
     color: var(--color-teal-darkest);
   }
-
-  &--inverse {
-    &:hover {
-      color: var(--color-neutral-lightest);
-    }
-  }
 }
 
 .is-large .dropdown-indicator {

src/components/tag/Tag.tsx

@@ -9,19 +9,19 @@ import IconButton from '../iconButton';
 import { UITextBody, UITextDisplay, UITextSmall } from '../typography';
 import theme from './theme.css';
 
+export type TagSize = Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+
 export interface TagProps extends Omit<BoxProps, 'className' | 'size'> {
-  /** The tint of the components color */
   children: ReactNode;
-  /** The tint of the components color */
   className?: string;
-  /** The tint of the components color */
   onRemoveClick?: React.MouseEventHandler;
-  /** The tint of the components color */
-  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  onRemoveMouseDown?: React.MouseEventHandler;
+  onRemoveMouseUp?: React.MouseEventHandler;
+  size?: TagSize;
 }
 
 const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
-  ({ children, className, onRemoveClick, size = 'medium', ...others }, ref) => {
+  ({ children, className, onRemoveClick, onRemoveMouseDown, onRemoveMouseUp, size = 'medium', ...others }, ref) => {
     const classNames = cx(theme[`is-${size}`], theme['wrapper'], className);
 
     const TextElement = size === 'small' ? UITextSmall : size === 'large' ? UITextDisplay : UITextBody;
@@ -44,6 +44,8 @@ const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
             flexShrink={0}
             icon={<IconCloseSmallOutline />}
             onClick={onRemoveClick}
+            onMouseDown={onRemoveMouseDown}
+            onMouseUp={onRemoveMouseUp}
           />
         )}
       </Box>