Preparing to allow for controlled combobox

src/components/combobox/combobox.stories.tsx

@@ -121,17 +121,17 @@ export const Demo: Story = {
   render: (_) => <LocationDemoComponent />,
 };
 
-export const Demo2: Story = {
+export const Controlled: Story = {
   render: (_) => (
     <Combobox placeholder='Select framework...' values={frameworks} />
   ),
 };
 
 export const MultipleComboboxes: Story = {
   render: (_) => (
-    <div className='~grid ~grid-flow-col ~grid-cols-2 ~gap-2'>
-      <Combobox placeholder='Select framework...' values={frameworks} />
+    <div className='~mt-2 ~grid ~grid-flow-col ~grid-cols-2 ~items-center ~gap-2 md:~grid-cols-[max-content_max-content]'>
       <Combobox placeholder='Select framework...' values={frameworks} />
+      <div>{/* Might want to add a clear filters button here ? */}</div>
     </div>
   ),
 };

src/components/select/select-variants.ts

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const selectVariants = cva([
-  'tw-reset ~flex ~h-9 ~w-full ~items-center ~justify-between ~rounded-md ~border ~border-border ~bg-transparent ~px-3 ~py-2 ~shadow-sm',
+  'tw-reset ~flex ~h-9 ~w-full ~items-center ~justify-between ~rounded-md ~border ~border-border ~bg-background ~px-3 ~py-2 ~shadow-sm',
   '~ring-offset-background',
   'data-[placeholder]:~text-input',
   'focus:~outline-none focus:~ring-1 focus:~ring-ring',

src/components/truncated-text/truncated-text.tsx

@@ -18,7 +18,7 @@ const TruncatedText = ({ children, onTruncation }: Props) => {
   useResizeDetector({ onResize, targetRef });
 
   return (
-    <div className='~truncate ~bg-gray-200' ref={targetRef}>
+    <div className='~truncate' ref={targetRef}>
       {children}
     </div>
   );