From 20b532bb6e9df1478d916926c0d34c2008061955 Mon Sep 17 00:00:00 2001
From: Vlad Moroz <vlad@workos.com>
Date: Tue, 4 Jun 2024 18:20:04 +0200
Subject: [PATCH] Test commit for Chromatic/Storybook

---
 packages/react/select/src/Select.stories.tsx | 860 +++++++++----------
 1 file changed, 427 insertions(+), 433 deletions(-)

diff --git a/packages/react/select/src/Select.stories.tsx b/packages/react/select/src/Select.stories.tsx
index a80aeeac0..bacf39dbc 100644
--- a/packages/react/select/src/Select.stories.tsx
+++ b/packages/react/select/src/Select.stories.tsx
@@ -19,37 +19,37 @@ export const Styled = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()} position={position} sideOffset={5}>
-              <Select.Viewport className={viewportClass()}>
-                <Select.Item className={itemClass()} value="one">
-                  <Select.ItemText>
-                    One<span aria-hidden> 👍</span>
-                  </Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="two">
-                  <Select.ItemText>
-                    Two<span aria-hidden> 👌</span>
-                  </Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="three">
-                  <Select.ItemText>
-                    Three<span aria-hidden> 🤘</span>
-                  </Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-              </Select.Viewport>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()} position={position} sideOffset={5}>
+            <Select.Viewport className={viewportClass()}>
+              <Select.Item className={itemClass()} value="one">
+                <Select.ItemText>
+                  One<span aria-hidden> 👍</span>
+                </Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="two">
+                <Select.ItemText>
+                  Two<span aria-hidden> 👌</span>
+                </Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="three">
+                <Select.ItemText>
+                  Three<span aria-hidden> 🤘</span>
+                </Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+            </Select.Viewport>
+            <Select.Arrow />
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
     ))}
@@ -80,37 +80,37 @@ export const Controlled = () => {
               </Select.Value>
               <Select.Icon />
             </Select.Trigger>
-            <Select.Portal>
-              <Select.Content className={contentClass()} position={position} sideOffset={5}>
-                <Select.Viewport className={viewportClass()}>
-                  <Select.Item className={itemClass()} value="fr">
-                    <Select.ItemText>
-                      France<span aria-hidden> 🇫🇷</span>
-                    </Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                  <Select.Item className={itemClass()} value="uk">
-                    <Select.ItemText>
-                      United Kingdom<span aria-hidden> 🇬🇧</span>
-                    </Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                  <Select.Item className={itemClass()} value="es">
-                    <Select.ItemText>
-                      Spain<span aria-hidden> 🇪🇸</span>
-                    </Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                </Select.Viewport>
-                <Select.Arrow />
-              </Select.Content>
-            </Select.Portal>
+            {/* <Select.Portal> */}
+            <Select.Content className={contentClass()} position={position} sideOffset={5}>
+              <Select.Viewport className={viewportClass()}>
+                <Select.Item className={itemClass()} value="fr">
+                  <Select.ItemText>
+                    France<span aria-hidden> 🇫🇷</span>
+                  </Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+                <Select.Item className={itemClass()} value="uk">
+                  <Select.ItemText>
+                    United Kingdom<span aria-hidden> 🇬🇧</span>
+                  </Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+                <Select.Item className={itemClass()} value="es">
+                  <Select.ItemText>
+                    Spain<span aria-hidden> 🇪🇸</span>
+                  </Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+              </Select.Viewport>
+              <Select.Arrow />
+            </Select.Content>
+            {/* </Select.Portal> */}
           </Select.Root>
         </Label>
       ))}
@@ -137,33 +137,31 @@ export const Position = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()} position={position} sideOffset={5}>
-              <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
-              <Select.Viewport className={viewportClass()}>
-                {Array.from({ length: 50 }, (_, i) => {
-                  const value = `item-${i + 1}`;
-                  return (
-                    <Select.Item
-                      key={value}
-                      className={itemClass()}
-                      value={value}
-                      disabled={i > 5 && i < 9}
-                    >
-                      <Select.ItemText>item {i + 1}</Select.ItemText>
-                      <Select.ItemIndicator className={indicatorClass()}>
-                        <TickIcon />
-                      </Select.ItemIndicator>
-                    </Select.Item>
-                  );
-                })}
-              </Select.Viewport>
-              <Select.ScrollDownButton className={scrollDownButtonClass()}>
-                ▼
-              </Select.ScrollDownButton>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()} position={position} sideOffset={5}>
+            <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
+            <Select.Viewport className={viewportClass()}>
+              {Array.from({ length: 50 }, (_, i) => {
+                const value = `item-${i + 1}`;
+                return (
+                  <Select.Item
+                    key={value}
+                    className={itemClass()}
+                    value={value}
+                    disabled={i > 5 && i < 9}
+                  >
+                    <Select.ItemText>item {i + 1}</Select.ItemText>
+                    <Select.ItemIndicator className={indicatorClass()}>
+                      <TickIcon />
+                    </Select.ItemIndicator>
+                  </Select.Item>
+                );
+              })}
+            </Select.Viewport>
+            <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
+            <Select.Arrow />
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
     ))}
@@ -188,31 +186,31 @@ export const NoDefaultValue = () => (
             <Select.Value placeholder="Pick an option" />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()} position={position} sideOffset={5}>
-              <Select.Viewport className={viewportClass()}>
-                <Select.Item className={itemClass()} value="one" disabled>
-                  <Select.ItemText>One</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="two">
-                  <Select.ItemText>Two</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="three">
-                  <Select.ItemText>Three</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-              </Select.Viewport>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()} position={position} sideOffset={5}>
+            <Select.Viewport className={viewportClass()}>
+              <Select.Item className={itemClass()} value="one" disabled>
+                <Select.ItemText>One</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="two">
+                <Select.ItemText>Two</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="three">
+                <Select.ItemText>Three</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+            </Select.Viewport>
+            <Select.Arrow />
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
     ))}
@@ -237,27 +235,25 @@ export const Typeahead = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()} position={position} sideOffset={5}>
-              <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
-              <Select.Viewport className={viewportClass()}>
-                {foodGroups.map((foodGroup) =>
-                  foodGroup.foods.map((food) => (
-                    <Select.Item key={food.value} className={itemClass()} value={food.value}>
-                      <Select.ItemText>{food.label}</Select.ItemText>
-                      <Select.ItemIndicator className={indicatorClass()}>
-                        <TickIcon />
-                      </Select.ItemIndicator>
-                    </Select.Item>
-                  ))
-                )}
-              </Select.Viewport>
-              <Select.ScrollDownButton className={scrollDownButtonClass()}>
-                ▼
-              </Select.ScrollDownButton>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()} position={position} sideOffset={5}>
+            <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
+            <Select.Viewport className={viewportClass()}>
+              {foodGroups.map((foodGroup) =>
+                foodGroup.foods.map((food) => (
+                  <Select.Item key={food.value} className={itemClass()} value={food.value}>
+                    <Select.ItemText>{food.label}</Select.ItemText>
+                    <Select.ItemIndicator className={indicatorClass()}>
+                      <TickIcon />
+                    </Select.ItemIndicator>
+                  </Select.Item>
+                ))
+              )}
+            </Select.Viewport>
+            <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
+            <Select.Arrow />
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
     ))}
@@ -282,46 +278,44 @@ export const WithGroups = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()} position={position} sideOffset={5}>
-              <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
-              <Select.Viewport className={viewportClass()}>
-                {foodGroups.map((foodGroup, index) => {
-                  const hasLabel = foodGroup.label !== undefined;
-                  return (
-                    <React.Fragment key={index}>
-                      <Select.Group className={groupStyles()}>
-                        {hasLabel && (
-                          <Select.Label className={labelClass()} key={foodGroup.label}>
-                            {foodGroup.label}
-                          </Select.Label>
-                        )}
-                        {foodGroup.foods.map((food) => (
-                          <Select.Item
-                            key={food.value}
-                            className={hasLabel ? itemInGroupClass() : itemClass()}
-                            value={food.value}
-                          >
-                            <Select.ItemText>{food.label}</Select.ItemText>
-                            <Select.ItemIndicator className={indicatorClass()}>
-                              <TickIcon />
-                            </Select.ItemIndicator>
-                          </Select.Item>
-                        ))}
-                      </Select.Group>
-                      {index < foodGroups.length - 1 && (
-                        <Select.Separator className={separatorClass()} />
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()} position={position} sideOffset={5}>
+            <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
+            <Select.Viewport className={viewportClass()}>
+              {foodGroups.map((foodGroup, index) => {
+                const hasLabel = foodGroup.label !== undefined;
+                return (
+                  <React.Fragment key={index}>
+                    <Select.Group className={groupStyles()}>
+                      {hasLabel && (
+                        <Select.Label className={labelClass()} key={foodGroup.label}>
+                          {foodGroup.label}
+                        </Select.Label>
                       )}
-                    </React.Fragment>
-                  );
-                })}
-              </Select.Viewport>
-              <Select.ScrollDownButton className={scrollDownButtonClass()}>
-                ▼
-              </Select.ScrollDownButton>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
+                      {foodGroup.foods.map((food) => (
+                        <Select.Item
+                          key={food.value}
+                          className={hasLabel ? itemInGroupClass() : itemClass()}
+                          value={food.value}
+                        >
+                          <Select.ItemText>{food.label}</Select.ItemText>
+                          <Select.ItemIndicator className={indicatorClass()}>
+                            <TickIcon />
+                          </Select.ItemIndicator>
+                        </Select.Item>
+                      ))}
+                    </Select.Group>
+                    {index < foodGroups.length - 1 && (
+                      <Select.Separator className={separatorClass()} />
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </Select.Viewport>
+            <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
+            <Select.Arrow />
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
     ))}
@@ -330,30 +324,30 @@ export const WithGroups = () => (
 
 export const Labelling = () => {
   const content = (
-    <Select.Portal>
-      <Select.Content className={contentClass()}>
-        <Select.Viewport className={viewportClass()}>
-          <Select.Item className={itemClass()} value="0-18">
-            <Select.ItemText>0 to 18</Select.ItemText>
-            <Select.ItemIndicator className={indicatorClass()}>
-              <TickIcon />
-            </Select.ItemIndicator>
-          </Select.Item>
-          <Select.Item className={itemClass()} value="18-40">
-            <Select.ItemText>18 to 40</Select.ItemText>
-            <Select.ItemIndicator className={indicatorClass()}>
-              <TickIcon />
-            </Select.ItemIndicator>
-          </Select.Item>
-          <Select.Item className={itemClass()} value="40+">
-            <Select.ItemText>Over 40</Select.ItemText>
-            <Select.ItemIndicator className={indicatorClass()}>
-              <TickIcon />
-            </Select.ItemIndicator>
-          </Select.Item>
-        </Select.Viewport>
-      </Select.Content>
-    </Select.Portal>
+    // <Select.Portal>
+    <Select.Content className={contentClass()}>
+      <Select.Viewport className={viewportClass()}>
+        <Select.Item className={itemClass()} value="0-18">
+          <Select.ItemText>0 to 18</Select.ItemText>
+          <Select.ItemIndicator className={indicatorClass()}>
+            <TickIcon />
+          </Select.ItemIndicator>
+        </Select.Item>
+        <Select.Item className={itemClass()} value="18-40">
+          <Select.ItemText>18 to 40</Select.ItemText>
+          <Select.ItemIndicator className={indicatorClass()}>
+            <TickIcon />
+          </Select.ItemIndicator>
+        </Select.Item>
+        <Select.Item className={itemClass()} value="40+">
+          <Select.ItemText>Over 40</Select.ItemText>
+          <Select.ItemIndicator className={indicatorClass()}>
+            <TickIcon />
+          </Select.ItemIndicator>
+        </Select.Item>
+      </Select.Viewport>
+    </Select.Content>
+    // {/* </Select.Portal> */}
   );
   return (
     <div style={{ padding: 50 }}>
@@ -411,37 +405,37 @@ export const RightToLeft = () => (
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()} position={position} sideOffset={5}>
-              <Select.Viewport className={viewportClass()}>
-                <Select.Item className={itemClass()} value="one">
-                  <Select.ItemText>
-                    تفاح<span aria-hidden> 🍎</span>
-                  </Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="two">
-                  <Select.ItemText>
-                    حفنة من الموز<span aria-hidden> 🍌</span>
-                  </Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="three">
-                  <Select.ItemText>
-                    الفراولة<span aria-hidden> 🍓</span>
-                  </Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-              </Select.Viewport>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()} position={position} sideOffset={5}>
+            <Select.Viewport className={viewportClass()}>
+              <Select.Item className={itemClass()} value="one">
+                <Select.ItemText>
+                  تفاح<span aria-hidden> 🍎</span>
+                </Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="two">
+                <Select.ItemText>
+                  حفنة من الموز<span aria-hidden> 🍌</span>
+                </Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="three">
+                <Select.ItemText>
+                  الفراولة<span aria-hidden> 🍓</span>
+                </Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+            </Select.Viewport>
+            <Select.Arrow />
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
     ))}
@@ -477,30 +471,30 @@ export const WithinForm = () => {
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()}>
-              <Select.Viewport className={viewportClass()}>
-                <Select.Item className={itemClass()} value="fr">
-                  <Select.ItemText>France</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="uk">
-                  <Select.ItemText>United Kingdom</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="es">
-                  <Select.ItemText>Spain</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()}>
+            <Select.Viewport className={viewportClass()}>
+              <Select.Item className={itemClass()} value="fr">
+                <Select.ItemText>France</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="uk">
+                <Select.ItemText>United Kingdom</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="es">
+                <Select.ItemText>Spain</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+            </Select.Viewport>
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
       <br />
@@ -540,30 +534,30 @@ export const DisabledWithinForm = () => {
             <Select.Value />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()}>
-              <Select.Viewport className={viewportClass()}>
-                <Select.Item className={itemClass()} value="fr">
-                  <Select.ItemText>France</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="uk">
-                  <Select.ItemText>United Kingdom</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="es">
-                  <Select.ItemText>Spain</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()}>
+            <Select.Viewport className={viewportClass()}>
+              <Select.Item className={itemClass()} value="fr">
+                <Select.ItemText>France</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="uk">
+                <Select.ItemText>United Kingdom</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="es">
+                <Select.ItemText>Spain</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+            </Select.Viewport>
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
       <br />
@@ -603,30 +597,30 @@ export const RequiredWithinForm = () => {
             <Select.Value placeholder="Pick an option" />
             <Select.Icon />
           </Select.Trigger>
-          <Select.Portal>
-            <Select.Content className={contentClass()}>
-              <Select.Viewport className={viewportClass()}>
-                <Select.Item className={itemClass()} value="fr">
-                  <Select.ItemText>France</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="uk">
-                  <Select.ItemText>United Kingdom</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-                <Select.Item className={itemClass()} value="es">
-                  <Select.ItemText>Spain</Select.ItemText>
-                  <Select.ItemIndicator className={indicatorClass()}>
-                    <TickIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
+          {/* <Select.Portal> */}
+          <Select.Content className={contentClass()}>
+            <Select.Viewport className={viewportClass()}>
+              <Select.Item className={itemClass()} value="fr">
+                <Select.ItemText>France</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="uk">
+                <Select.ItemText>United Kingdom</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+              <Select.Item className={itemClass()} value="es">
+                <Select.ItemText>Spain</Select.ItemText>
+                <Select.ItemIndicator className={indicatorClass()}>
+                  <TickIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+            </Select.Viewport>
+          </Select.Content>
+          {/* </Select.Portal> */}
         </Select.Root>
       </Label>
       <br />
@@ -652,24 +646,24 @@ export const WithinDialog = () => (
                 <Select.Value />
                 <Select.Icon />
               </Select.Trigger>
-              <Select.Portal>
-                <Select.Content className={contentClass()}>
-                  <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
-                  <Select.Viewport className={viewportClass()}>
-                    {Array.from({ length: 30 }, (_, i) => (
-                      <Select.Item key={i} className={itemClass()} value={String(i)}>
-                        <Select.ItemText>Item {i}</Select.ItemText>
-                        <Select.ItemIndicator className={indicatorClass()}>
-                          <TickIcon />
-                        </Select.ItemIndicator>
-                      </Select.Item>
-                    ))}
-                  </Select.Viewport>
-                  <Select.ScrollDownButton className={scrollDownButtonClass()}>
-                    ▼
-                  </Select.ScrollDownButton>
-                </Select.Content>
-              </Select.Portal>
+              {/* <Select.Portal> */}
+              <Select.Content className={contentClass()}>
+                <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
+                <Select.Viewport className={viewportClass()}>
+                  {Array.from({ length: 30 }, (_, i) => (
+                    <Select.Item key={i} className={itemClass()} value={String(i)}>
+                      <Select.ItemText>Item {i}</Select.ItemText>
+                      <Select.ItemIndicator className={indicatorClass()}>
+                        <TickIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>
+                  ))}
+                </Select.Viewport>
+                <Select.ScrollDownButton className={scrollDownButtonClass()}>
+                  ▼
+                </Select.ScrollDownButton>
+              </Select.Content>
+              {/* </Select.Portal> */}
             </Select.Root>
           </Label>
           <Dialog.Close>Close Dialog</Dialog.Close>
@@ -733,22 +727,22 @@ export const ChromaticNoDefaultValue = () => (
         <Select.Value />
         <Select.Icon />
       </Select.Trigger>
-      <Select.Portal>
-        <Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
-          <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
-          <Select.Viewport className={viewportClass()}>
-            {Array.from({ length: 10 }, (_, i) => (
-              <Select.Item key={i} className={itemClass()} value={String(i)} disabled={i < 5}>
-                <Select.ItemText>{String(i)}</Select.ItemText>
-                <Select.ItemIndicator className={indicatorClass()}>
-                  <TickIcon />
-                </Select.ItemIndicator>
-              </Select.Item>
-            ))}
-          </Select.Viewport>
-          <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
-        </Select.Content>
-      </Select.Portal>
+      {/* <Select.Portal> */}
+      <Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
+        <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
+        <Select.Viewport className={viewportClass()}>
+          {Array.from({ length: 10 }, (_, i) => (
+            <Select.Item key={i} className={itemClass()} value={String(i)} disabled={i < 5}>
+              <Select.ItemText>{String(i)}</Select.ItemText>
+              <Select.ItemIndicator className={indicatorClass()}>
+                <TickIcon />
+              </Select.ItemIndicator>
+            </Select.Item>
+          ))}
+        </Select.Viewport>
+        <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
+      </Select.Content>
+      {/* </Select.Portal> */}
     </Select.Root>
 
     <Select.Root open>
@@ -756,22 +750,22 @@ export const ChromaticNoDefaultValue = () => (
         <Select.Value placeholder="Pick an option" />
         <Select.Icon />
       </Select.Trigger>
-      <Select.Portal>
-        <Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
-          <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
-          <Select.Viewport className={viewportClass()}>
-            {Array.from({ length: 10 }, (_, i) => (
-              <Select.Item key={i} className={itemClass()} value={String(i)} disabled={i < 5}>
-                <Select.ItemText>{String(i)}</Select.ItemText>
-                <Select.ItemIndicator className={indicatorClass()}>
-                  <TickIcon />
-                </Select.ItemIndicator>
-              </Select.Item>
-            ))}
-          </Select.Viewport>
-          <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
-        </Select.Content>
-      </Select.Portal>
+      {/* <Select.Portal> */}
+      <Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
+        <Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
+        <Select.Viewport className={viewportClass()}>
+          {Array.from({ length: 10 }, (_, i) => (
+            <Select.Item key={i} className={itemClass()} value={String(i)} disabled={i < 5}>
+              <Select.ItemText>{String(i)}</Select.ItemText>
+              <Select.ItemIndicator className={indicatorClass()}>
+                <TickIcon />
+              </Select.ItemIndicator>
+            </Select.Item>
+          ))}
+        </Select.Viewport>
+        <Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
+      </Select.Content>
+      {/* </Select.Portal> */}
     </Select.Root>
   </div>
 );
@@ -803,30 +797,30 @@ export const Cypress = () => {
               <Select.Value />
               <Select.Icon />
             </Select.Trigger>
-            <Select.Portal>
-              <Select.Content className={contentClass()}>
-                <Select.Viewport className={viewportClass()}>
-                  <Select.Item className={itemClass()} value="S">
-                    <Select.ItemText>Small</Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                  <Select.Item className={itemClass()} value="M">
-                    <Select.ItemText>Medium</Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                  <Select.Item className={itemClass()} value="L">
-                    <Select.ItemText>Large</Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                </Select.Viewport>
-              </Select.Content>
-            </Select.Portal>
+            {/* <Select.Portal> */}
+            <Select.Content className={contentClass()}>
+              <Select.Viewport className={viewportClass()}>
+                <Select.Item className={itemClass()} value="S">
+                  <Select.ItemText>Small</Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+                <Select.Item className={itemClass()} value="M">
+                  <Select.ItemText>Medium</Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+                <Select.Item className={itemClass()} value="L">
+                  <Select.ItemText>Large</Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+              </Select.Viewport>
+            </Select.Content>
+            {/* </Select.Portal> */}
           </Select.Root>
         </Label>
         <button type="submit">buy</button>
@@ -843,36 +837,36 @@ export const Cypress = () => {
               <Select.Value placeholder="…" />
               <Select.Icon />
             </Select.Trigger>
-            <Select.Portal>
-              <Select.Content className={contentClass()}>
-                <Select.Viewport className={viewportClass()}>
-                  <Select.Item className={itemClass()} value="S">
-                    <Select.ItemText>Model S</Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                  <Select.Item className={itemClass()} value="3">
-                    <Select.ItemText>Modal 3</Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                  <Select.Item className={itemClass()} value="X">
-                    <Select.ItemText>Model X</Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                  <Select.Item className={itemClass()} value="Y">
-                    <Select.ItemText>Model Y</Select.ItemText>
-                    <Select.ItemIndicator className={indicatorClass()}>
-                      <TickIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                </Select.Viewport>
-              </Select.Content>
-            </Select.Portal>
+            {/* <Select.Portal> */}
+            <Select.Content className={contentClass()}>
+              <Select.Viewport className={viewportClass()}>
+                <Select.Item className={itemClass()} value="S">
+                  <Select.ItemText>Model S</Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+                <Select.Item className={itemClass()} value="3">
+                  <Select.ItemText>Modal 3</Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+                <Select.Item className={itemClass()} value="X">
+                  <Select.ItemText>Model X</Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+                <Select.Item className={itemClass()} value="Y">
+                  <Select.ItemText>Model Y</Select.ItemText>
+                  <Select.ItemIndicator className={indicatorClass()}>
+                    <TickIcon />
+                  </Select.ItemIndicator>
+                </Select.Item>
+              </Select.Viewport>
+            </Select.Content>
+            {/* </Select.Portal> */}
           </Select.Root>
         </Label>
 
@@ -901,35 +895,35 @@ const ChromaticSelect = React.forwardRef<
       <Select.Value />
       <Select.Icon />
     </Select.Trigger>
-    <Select.Portal>
-      <Select.Content
-        className={paddedElement === 'content' ? contentClassWithPadding() : contentClass()}
-        style={{ opacity: 0.7 }}
+    {/* <Select.Portal> */}
+    <Select.Content
+      className={paddedElement === 'content' ? contentClassWithPadding() : contentClass()}
+      style={{ opacity: 0.7 }}
+    >
+      <Select.ScrollUpButton
+        className={scrollUpButtonClass()}
+        style={paddedElement === 'content' ? { marginTop: -5 } : undefined}
       >
-        <Select.ScrollUpButton
-          className={scrollUpButtonClass()}
-          style={paddedElement === 'content' ? { marginTop: -5 } : undefined}
-        >
-          ▲
-        </Select.ScrollUpButton>
-        <Select.Viewport className={paddedElement === 'viewport' ? viewportClass() : undefined}>
-          {Array.from({ length: count }, (_, i) => (
-            <Select.Item key={i} className={itemClass()} value={String(i)}>
-              <Select.ItemText>{String(i)}</Select.ItemText>
-              <Select.ItemIndicator className={indicatorClass()}>
-                <TickIcon />
-              </Select.ItemIndicator>
-            </Select.Item>
-          ))}
-        </Select.Viewport>
-        <Select.ScrollDownButton
-          className={scrollDownButtonClass()}
-          style={paddedElement === 'content' ? { marginBottom: -5 } : undefined}
-        >
-          ▼
-        </Select.ScrollDownButton>
-      </Select.Content>
-    </Select.Portal>
+        ▲
+      </Select.ScrollUpButton>
+      <Select.Viewport className={paddedElement === 'viewport' ? viewportClass() : undefined}>
+        {Array.from({ length: count }, (_, i) => (
+          <Select.Item key={i} className={itemClass()} value={String(i)}>
+            <Select.ItemText>{String(i)}</Select.ItemText>
+            <Select.ItemIndicator className={indicatorClass()}>
+              <TickIcon />
+            </Select.ItemIndicator>
+          </Select.Item>
+        ))}
+      </Select.Viewport>
+      <Select.ScrollDownButton
+        className={scrollDownButtonClass()}
+        style={paddedElement === 'content' ? { marginBottom: -5 } : undefined}
+      >
+        ▼
+      </Select.ScrollDownButton>
+    </Select.Content>
+    {/* </Select.Portal> */}
   </Select.Root>
 ));