diff --git a/.changeset/metal-students-add.md b/.changeset/metal-students-add.md
new file mode 100644
index 0000000..e5f78f9
--- /dev/null
+++ b/.changeset/metal-students-add.md
@@ -0,0 +1,5 @@
+---
+'@sweatpants/react': patch
+---
+
+Fix DateField z-index when rendered inside a Drawer
diff --git a/libra/components/Drawer.libra.tsx b/libra/components/Drawer.libra.tsx
index 6c22790..d1e7e85 100644
--- a/libra/components/Drawer.libra.tsx
+++ b/libra/components/Drawer.libra.tsx
@@ -1,4 +1,11 @@
-import { Button, Text, Drawer, Stack } from '../../packages/react/src';
+import {
+  Button,
+  Text,
+  Drawer,
+  Stack,
+  DateField,
+  Select
+} from '../../packages/react/src';
 
 directory('Drawer', () => {
   add('Default', () => {
@@ -8,6 +15,11 @@ directory('Drawer', () => {
           <Text looksLike="h4" element="h2">
             Drawer
           </Text>
+          <DateField id="date" />
+          <Select id="select">
+            <Select.Item value="foo">Foo</Select.Item>
+            <Select.Item value="bar">Bar</Select.Item>
+          </Select>
           <Button>Button</Button>
         </Stack>
       </Drawer>
diff --git a/package-lock.json b/package-lock.json
index 7c48b62..2ca0b2e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2254,6 +2254,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.4.tgz",
       "integrity": "sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==",
+      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/primitive": "1.0.1",
@@ -2304,6 +2305,7 @@
     },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.0.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
@@ -2346,6 +2348,7 @@
     },
     "node_modules/@radix-ui/react-focus-scope": {
       "version": "1.0.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
@@ -2531,6 +2534,7 @@
     },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
@@ -2562,6 +2566,7 @@
     },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.0.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
@@ -2630,6 +2635,7 @@
     },
     "node_modules/@radix-ui/react-select": {
       "version": "1.2.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
@@ -13599,9 +13605,9 @@
       "version": "0.7.18",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-dialog": "1.0.4",
+        "@radix-ui/react-dialog": "1.0.5",
         "@radix-ui/react-popover": "1.0.7",
-        "@radix-ui/react-select": "1.2.2",
+        "@radix-ui/react-select": "2.0.0",
         "@radix-ui/react-slot": "1.0.2",
         "@react-hook/resize-observer": "1.2.6",
         "date-fns": "2.30.0",
@@ -13617,6 +13623,192 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
+    },
+    "packages/react/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "packages/react/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "packages/react/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "packages/react/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "packages/react/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "packages/react/node_modules/@radix-ui/react-select": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
+      "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/packages/react/package.json b/packages/react/package.json
index ff90661..f550a34 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -29,9 +29,9 @@
     "@types/date-fns": "2.6.0"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "1.0.4",
+    "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-popover": "1.0.7",
-    "@radix-ui/react-select": "1.2.2",
+    "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-slot": "1.0.2",
     "@react-hook/resize-observer": "1.2.6",
     "date-fns": "2.30.0",
diff --git a/packages/react/src/date-field/DateField.tsx b/packages/react/src/date-field/DateField.tsx
index 143a283..64c3516 100644
--- a/packages/react/src/date-field/DateField.tsx
+++ b/packages/react/src/date-field/DateField.tsx
@@ -27,12 +27,14 @@ export type DateFieldProps = Omit<
   onValueChange?: (value: Date) => void;
   fromDate?: Date;
   toDate?: Date;
+  className?: string;
 };
 
 const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
   (props, userRef) => {
     const {
       align = 'left',
+      className,
       id,
       defaultValue,
       value,
@@ -45,6 +47,8 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
       toDate = addYears(new Date(), 20)
     } = props;
 
+    const [open, setOpen] = useState(false);
+
     const dayToString = (day: Date) => {
       return format(day, 'MM/dd/yyyy');
     };
@@ -106,11 +110,12 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
     };
 
     return (
-      <Popover.Root>
-        <Popover.Trigger>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild>
           <TextField
             align={align}
             autoComplete="off"
+            className={className}
             size={size}
             id={id}
             type="text"
@@ -119,26 +124,32 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
             hideLabel={hideLabel}
             placeholder="MM/DD/YYYY"
             value={internalValue}
-            onChange={handleFieldOnChange}
+            onChange={(e) => {
+              if (!open) {
+                setOpen(true);
+              }
+              handleFieldOnChange(e);
+            }}
             ref={userRef}
           />
         </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content asChild onOpenAutoFocus={(e) => e.preventDefault()}>
-            <Card kind="elevated" className={css({ m: '3' })}>
-              <DatePicker
-                onMonthChange={(d) => {
-                  setDisplayMonth(d);
-                }}
-                month={displayMonth}
-                selected={datePickerValue}
-                onSelect={onDatePickerSelect}
-                fromDate={fromDate}
-                toDate={toDate}
-              />
-            </Card>
-          </Popover.Content>
-        </Popover.Portal>
+        <Popover.Content asChild onOpenAutoFocus={(e) => e.preventDefault()}>
+          <Card
+            kind="elevated"
+            className={css({ position: 'relative', m: '3', zIndex: '20' })}
+          >
+            <DatePicker
+              onMonthChange={(d) => {
+                setDisplayMonth(d);
+              }}
+              month={displayMonth}
+              selected={datePickerValue}
+              onSelect={onDatePickerSelect}
+              fromDate={fromDate}
+              toDate={toDate}
+            />
+          </Card>
+        </Popover.Content>
       </Popover.Root>
     );
   }