From 2617c268a716648eba80c06612396621ce7ccfc5 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 10:55:18 +0100
Subject: [PATCH 1/9] Remove multivalue styles

---
 src/components/select/Select.tsx | 45 --------------------------------
 1 file changed, 45 deletions(-)

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 4e3229cb6..2005a75ee 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -309,48 +309,6 @@ 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>,
@@ -442,9 +400,6 @@ 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,

From 8c1c768278b55457469786e5e114ba225a6fa8b0 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 10:57:21 +0100
Subject: [PATCH 2/9] Support mouseUp and mouseDown in the tag component

---
 src/components/tag/Tag.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
index 92d6f6c35..e9aa4434e 100644
--- a/src/components/tag/Tag.tsx
+++ b/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>

From c1d70f2fc48d0c53b043f96195be419fcb923e04 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 10:59:10 +0100
Subject: [PATCH 3/9] Render Tags for multivalues

---
 src/components/select/Select.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 2005a75ee..6e08c707e 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -12,6 +12,7 @@ import ReactSelect, {
   GroupHeadingProps,
   GroupProps,
   MenuListProps,
+  MultiValueProps,
   OptionProps,
   OptionsOrGroups,
   PlaceholderProps,
@@ -28,6 +29,7 @@ import Icon from '../icon';
 import ValidationText from '../validationText';
 import theme from './theme.css';
 import { Option as OptionType } from './types';
+import Tag from '../tag';
 
 const minHeightBySizeMap: Record<string, number> = {
   tiny: 24,
@@ -121,6 +123,26 @@ const ClearIndicator = <Option extends OptionType, IsMulti extends boolean>(
   );
 };
 
+const MultiValue = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  props: MultiValueProps<Option, IsMulti, Group>,
+) => {
+  const {
+    children,
+    removeProps: { onClick, onMouseDown, onMouseUp, ...rest },
+  } = props;
+
+  return (
+    <Tag
+      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');
@@ -427,6 +449,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
           ClearIndicator,
           DropdownIndicator,
           IndicatorSeparator: null,
+          MultiValue,
           ...components,
         }}
         hideSelectedOptions={false}

From 437b428c151c3bf2adf9d8a455fff8766a85c809 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 10:59:55 +0100
Subject: [PATCH 4/9] Update tag size based on select size

---
 src/components/select/Select.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 6e08c707e..3ef7a43e3 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -30,6 +30,7 @@ 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,
@@ -41,6 +42,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,
@@ -64,7 +67,7 @@ export interface SelectProps<
   /** 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) */
@@ -123,6 +126,13 @@ const ClearIndicator = <Option extends OptionType, IsMulti extends boolean>(
   );
 };
 
+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>,
 ) => {
@@ -130,9 +140,15 @@ const MultiValue = <Option, IsMulti extends boolean, Group extends GroupBase<Opt
     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}
@@ -429,7 +445,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
   });
 
   const boxProps = pickBoxProps(otherProps);
-  const restProps = { ...omitBoxProps(otherProps), ...{ inverse } };
+  const restProps = { ...omitBoxProps(otherProps), ...{ inverse, size } };
 
   const wrapperClassnames = cx(theme[`is-${size}`], {
     [theme['has-error']]: error,

From acebf21120a9b720b6bcff6e5e6231ca49f5df13 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 11:00:27 +0100
Subject: [PATCH 5/9] Adjust valuecontainer styles

---
 src/components/select/Select.tsx                   |  6 +++---
 .../__tests__/__snapshots__/Select.spec.tsx.snap   | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 3ef7a43e3..9028551af 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -18,7 +18,6 @@ import ReactSelect, {
   PlaceholderProps,
   Props,
   StylesConfig,
-  ValueContainerProps,
 } from 'react-select';
 import ReactCreatableSelect from 'react-select/creatable';
 import SelectType from 'react-select/dist/declarations/src/Select';
@@ -420,13 +419,14 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     color: inverse ? COLOR.NEUTRAL.LIGHTEST : 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' ? '3px' : '0 3px',
       width: '0',
+      gap: '3px',
     };
   };
 
diff --git a/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap b/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap
index 0b9d11b9e..82d52bd6c 100644
--- a/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap
+++ b/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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"

From 1d193adf9ada08e6c3c65f18e0394bba9d976b67 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 11:12:06 +0100
Subject: [PATCH 6/9] Remove inverse

---
 src/components/select/Select.tsx         | 108 ++++-------------------
 src/components/select/select.stories.tsx |   1 -
 src/components/select/theme.css          |   6 --
 3 files changed, 16 insertions(+), 99 deletions(-)

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 9028551af..c287f495c 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -7,7 +7,6 @@ import ReactSelect, {
   ClearIndicatorProps,
   ControlProps,
   CSSObjectWithLabel,
-  DropdownIndicatorProps,
   GroupBase,
   GroupHeadingProps,
   GroupProps,
@@ -15,7 +14,6 @@ import ReactSelect, {
   MultiValueProps,
   OptionProps,
   OptionsOrGroups,
-  PlaceholderProps,
   Props,
   StylesConfig,
 } from 'react-select';
@@ -57,8 +55,6 @@ 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  */
@@ -88,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>
@@ -110,15 +102,13 @@ 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>
@@ -167,7 +157,6 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     components,
     creatable = false,
     error,
-    inverse = false,
     helpText,
     menuHorizontalOffset,
     size = 'medium',
@@ -198,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,
@@ -267,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': {
@@ -282,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',
@@ -335,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,
@@ -350,7 +308,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     base: CSSObjectWithLabel,
     { isDisabled, isFocused, isSelected }: OptionProps<Option>,
   ): CSSObjectWithLabel => {
-    const commonStyles: CSSObjectWithLabel = {
+    return {
       ...base,
       ...(truncateOptionText
         ? {
@@ -362,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': {
@@ -393,30 +329,19 @@ 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) => {
@@ -445,11 +370,10 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
   });
 
   const boxProps = pickBoxProps(otherProps);
-  const restProps = { ...omitBoxProps(otherProps), ...{ inverse, size } };
+  const restProps = { ...omitBoxProps(otherProps), ...{ size } };
 
   const wrapperClassnames = cx(theme[`is-${size}`], {
     [theme['has-error']]: error,
-    [theme['is-inverse']]: inverse,
   });
 
   const Element = creatable
@@ -477,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>
   );
 }
diff --git a/src/components/select/select.stories.tsx b/src/components/select/select.stories.tsx
index 6040d37b1..77b404ae9 100644
--- a/src/components/select/select.stories.tsx
+++ b/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> = () => {
diff --git a/src/components/select/theme.css b/src/components/select/theme.css
index b1429230b..a182529f3 100644
--- a/src/components/select/theme.css
+++ b/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 {

From 833fdab2861f9a38328b9edddc4bac939c6e7d30 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 11:23:00 +0100
Subject: [PATCH 7/9] Adjust padding to account for the 1px border

---
 src/components/select/Select.tsx                   |  2 +-
 .../__tests__/__snapshots__/Select.spec.tsx.snap   | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index c287f495c..b50ecbba6 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -349,7 +349,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
       ...base,
       minHeight: minHeightBySizeMap[size] - 2,
       lineHeight: 'normal',
-      padding: size !== 'tiny' ? '3px' : '0 3px',
+      padding: size !== 'tiny' ? '2px' : '0 2px',
       width: '0',
       gap: '3px',
     };
diff --git a/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap b/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap
index 82d52bd6c..fc641437e 100644
--- a/src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap
+++ b/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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-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-132ryyc-ValueContainer"
+          class=" css-cqth4k-ValueContainer"
         >
           <div
             class=" css-crj073-placeholder"

From 18febfc95fb25f5f45a2ffeef1fea1063f733c69 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 11:29:45 +0100
Subject: [PATCH 8/9] Update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b3cf5825..f969d5f18 100644
--- a/CHANGELOG.md
+++ b/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
 

From 98948c8b12259e80a91fe4ae9e08e67d6f543a7c Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Wed, 29 Nov 2023 11:29:58 +0100
Subject: [PATCH 9/9] Fix typos

---
 CHANGELOG.md | 82 ++++++++++++++++++++++++++--------------------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f969d5f18..0a4f17362 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,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