update multiselect styles

src/shared/components/context-menu/context-menu.module.css

@@ -84,11 +84,11 @@
         position: absolute;
         top: 50%;
         left: 2px;
-        width: 4px;
+        width: 2px;
         height: 50%;
         content: '';
         background-color: var(--theme-colors-primary-filled);
-        border-radius: var(--theme-border-radius-xl);
+        border-radius: var(--theme-radius-xl);
         transform: translateY(-50%);
     }
 }

src/shared/components/dropdown-menu/dropdown-menu.module.css

@@ -26,11 +26,11 @@
         position: absolute;
         top: 50%;
         left: 2px;
-        width: 4px;
+        width: 2px;
         height: 50%;
         content: '';
         background-color: var(--theme-colors-primary-filled);
-        border-radius: var(--theme-border-radius-xl);
+        border-radius: var(--theme-radius-xl);
         transform: translateY(-50%);
     }
 }

src/shared/components/multi-select/multi-select.module.css

@@ -44,11 +44,11 @@
             position: absolute;
             top: 50%;
             left: 2px;
-            width: 4px;
+            width: 2px;
             height: 50%;
             content: '';
             background-color: var(--theme-colors-primary-filled);
-            border-radius: var(--theme-border-radius-xl);
+            border-radius: var(--theme-radius-xl);
             transform: translateY(-50%);
         }
     }
@@ -57,3 +57,17 @@
 .option:hover {
     background: lighten(var(--theme-colors-surface), 5%);
 }
+
+.pill {
+    font-size: var(--theme-font-size-sm);
+    background: var(--theme-colors-background);
+    border-radius: var(--theme-radius-sm);
+}
+
+.pills-list {
+    padding-right: var(--theme-spacing-lg);
+}
+
+.clear-button {
+    background: transparent !important;
+}

src/shared/components/multi-select/multi-select.tsx

@@ -25,9 +25,17 @@ export const MultiSelect = ({
                 input: styles.input,
                 label: styles.label,
                 option: styles.option,
+                pill: styles.pill,
+                pillsList: styles.pillsList,
                 root: styles.root,
                 ...classNames,
             }}
+            clearButtonProps={{
+                classNames: {
+                    root: styles.clearButton,
+                },
+                variant: 'transparent',
+            }}
             style={{ maxWidth, width }}
             variant={variant}
             withCheckIcon={false}

src/shared/components/select/select.module.css

@@ -44,11 +44,11 @@
             position: absolute;
             top: 50%;
             left: 2px;
-            width: 4px;
+            width: 2px;
             height: 50%;
             content: '';
             background-color: var(--theme-colors-primary-filled);
-            border-radius: var(--theme-border-radius-xl);
+            border-radius: var(--theme-radius-xl);
             transform: translateY(-50%);
         }
     }