✨(react) max width for multi select pills

In order to prevent a pill with a long text to stack below the actions
div we decided to introduce the concept of max-width for pills.

packages/react/src/components/Forms/Select/index.scss

@@ -218,6 +218,14 @@
           gap: 0.25rem;
           margin-right: 0.25rem;
           margin-bottom: 0.25rem;
+          max-width: var(--c--components--forms-select--multi-pill-max-width);
+
+          > span {
+            min-width: 0;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
 
           &__clear {
             width: auto;

packages/react/src/components/Forms/Select/multi.mdx

@@ -1,5 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
-import { Select } from "./index";
+import { Canvas, Meta, Story } from '@storybook/blocks';
 import * as Stories from './multi.stories';
 
 <Meta of={Stories} name="Docs"/>
@@ -110,3 +109,4 @@ They are the same as the [Select](?path=/docs/components-forms-select-mono--docs
 |---------------	|-----------------------------	|
 | multi-pill-background-color	| Background color of the pills of the multi select    	|
 | multi-pill-border-radius	| Border radius of the pills of the multi select    	|
+| multi-pill-max-width	| Max width of pills	|

packages/react/src/components/Forms/Select/tokens.ts

@@ -22,4 +22,5 @@ export const tokens = (defaults: DefaultTokens) => ({
   "label-color--focus": defaults.theme.colors["primary-600"],
   "multi-pill-background-color": defaults.theme.colors["greyscale-200"],
   "multi-pill-border-radius": "2px",
+  "multi-pill-max-width": "68%",
 });