Added custom width for combobox

src/components/Combobox/Combobox.sass

@@ -1,7 +1,6 @@
 .combobox__control
   display: inline-flex
   justify-content: space-between
-  width: 500px
   border-radius: 6px
   font-size: 16px
   line-height: 1
@@ -34,7 +33,7 @@
   width: 40rem
 
   &::placeholder
-    color: #517aa2d2
+    color: #a3bfd9d2
 
 .combobox__trigger
   appearance: none
@@ -71,14 +70,13 @@
   user-select: none
 
 .combobox__content
-  background-color: #0d131ae0
+  background-color: #0d131af4
   backdrop-filter: blur(8px)
   border-radius: 6px
   border: 1px solid hsl(240 6% 90%)
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
   transform-origin: var(--kb-combobox-content-transform-origin)
   animation: contentHide 250ms ease-in forwards
-  color: red
 
   &[data-expanded]
     animation: contentShow 250ms ease-out
@@ -113,7 +111,7 @@
 
   &[data-highlighted]
     outline: none
-    background-color: hsl(200 98% 39%)
+    background-color: #37506df4
     color: white
 
 .combobox__section

src/components/Combobox/Combobox.tsx

@@ -8,6 +8,7 @@ interface Props {
   placeholder: string
   value: string
   onChange: (value: string | null) => void
+  width?: string
 }
 
 export default (props: Props) => {
@@ -28,7 +29,7 @@ export default (props: Props) => {
           </Combobox.Item>
         )}
       >
-        <Combobox.Control class="combobox__control" aria-label="Assessors">
+        <Combobox.Control class="combobox__control" aria-label="Assessors" style={`width: ${props.width || '500px'}`}>
           <Combobox.Input class="combobox__input" />
           <Combobox.Trigger class="combobox__trigger">
             <Combobox.Icon class="combobox__icon">