diff --git a/.storybook/main.ts b/.storybook/main.ts
index f55e3449..1759d3be 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -16,8 +16,8 @@ const storybookConfig: StorybookConfig = {
   },
   stories: [
     // NB: intentional pattern duplication (with capture group below) to ensure introduction page is loaded first
-    "../src/stories/introduction.stories.mdx",
-    "../src/**/*.stories.@(ts|tsx|mdx)",
+    "../src/stories/introduction.mdx",
+    "../src/**/*.stories.tsx",
   ],
   // inject CSS into Storybook UI
   managerHead: (head) => `
diff --git a/bun.lockb b/bun.lockb
index f51ea504..b061394e 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index ce8ebf02..6d138d7a 100644
--- a/package.json
+++ b/package.json
@@ -54,72 +54,72 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@ark-ui/anatomy": "^1.3.0",
-    "@ark-ui/react": "1.2",
+    "@ark-ui/anatomy": "^3.3.1",
+    "@ark-ui/react": "3.3",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
-    "@commitlint/types": "^18.6.0",
+    "@changesets/cli": "^2.27.5",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/types": "^19.0.3",
     "@omnidev/knit": "^0.1.2",
-    "@pandacss/dev": "^0.28.0",
-    "@pandacss/types": "^0.28.0",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/builder-webpack5": "^7.6.10",
+    "@pandacss/dev": "^0.41.0",
+    "@pandacss/types": "^0.41.0",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-coverage": "^1.0.4",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/builder-webpack5": "^8.1.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.10",
-    "@storybook/nextjs": "^7.6.10",
-    "@storybook/react": "^7.6.10",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/nextjs": "^8.1.10",
+    "@storybook/react": "^8.1.10",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/test-runner": "^0.16.0",
+    "@storybook/test-runner": "^0.18.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.10",
-    "@storybook/types": "^7.6.10",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/theming": "^8.1.10",
+    "@storybook/types": "^8.1.10",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.11.10",
-    "@types/react": "^18.2.48",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@types/node": "^20.14.6",
+    "@types/react": "^18.3.3",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
     "concurrently": "^8.2.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.5.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-plugin-typescript-sort-keys": "^3.1.0",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "framer-motion": "^11.0.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-typescript-sort-keys": "^3.2.0",
+    "eslint-plugin-unused-imports": "^4.0.0",
+    "framer-motion": "^11.2.11",
     "http-server": "^14.1.1",
-    "husky": "^9.0.7",
+    "husky": "^9.0.11",
     "jsonfile": "^6.1.0",
-    "lint-staged": "^15.2.0",
-    "next": "^14.1.0",
-    "postcss": "^8.4.33",
-    "prettier": "^3.2.4",
-    "radash": "^11.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
-    "sonner": "^1.3.1",
-    "storybook": "^7.6.10",
-    "storybook-dark-mode": "^3.0.3",
+    "lint-staged": "^15.2.7",
+    "next": "^14.2.4",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.2",
+    "radash": "^12.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "sonner": "^1.5.0",
+    "storybook": "^8.1.10",
+    "storybook-dark-mode": "^4.0.2",
     "ts-node": "^10.9.2",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3",
-    "usehooks-ts": "^2.10.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.2",
+    "usehooks-ts": "^3.1.0",
     "wait-on": "^7.2.0",
-    "webpack": "^5.90.0"
+    "webpack": "^5.92.1"
   }
 }
diff --git a/src/components/core/Accordion/Accordion.tsx b/src/components/core/Accordion/Accordion.tsx
index ec656b1c..8dfdab43 100644
--- a/src/components/core/Accordion/Accordion.tsx
+++ b/src/components/core/Accordion/Accordion.tsx
@@ -1,3 +1,4 @@
+import { AccordionContext } from "@ark-ui/react";
 import {
   FiChevronDown as ChevronDownIcon,
   FiMinus as MinusIcon,
@@ -39,33 +40,44 @@ const Accordion = ({ items, plusMinus, ...rest }: Props) => {
   if (!isClient) return null;
 
   return (
-    <PrimitiveAccordion present collapsible multiple {...rest}>
+    <PrimitiveAccordion
+      // present
+      collapsible
+      multiple
+      {...rest}
+    >
       {items.map(({ id, value, triggerLabel, content, icon }) => (
         <PrimitiveAccordionItem key={id} value={value}>
-          {({ isOpen }) => (
-            <>
-              <PrimitiveAccordionItemTrigger>
-                {triggerLabel ?? value}
-                <PrimitiveAccordionItemIndicator>
-                  <Icon color="inherit">
-                    {plusMinus ? (
-                      isOpen ? (
-                        <MinusIcon />
+          <PrimitiveAccordionItemTrigger>
+            {triggerLabel ?? value}
+
+            <PrimitiveAccordionItemIndicator>
+              <AccordionContext>
+                {({ value }) => (
+                  <>
+                    <Icon color="inherit">
+                      {plusMinus ? (
+                        value ? (
+                          <MinusIcon />
+                        ) : (
+                          <PlusIcon />
+                        )
                       ) : (
-                        <PlusIcon />
-                      )
-                    ) : (
-                      icon ?? <ChevronDownIcon />
-                    )}
-                  </Icon>
-                </PrimitiveAccordionItemIndicator>
-              </PrimitiveAccordionItemTrigger>
-              <PrimitiveAccordionItemContent>
-                {/* NB: div wrapper enforces body content to collapse properly if, for example, a string is passed */}
-                <div>{content}</div>
-              </PrimitiveAccordionItemContent>
-            </>
-          )}
+                        icon ?? <ChevronDownIcon />
+                      )}
+                    </Icon>
+
+                    {value}
+                  </>
+                )}
+              </AccordionContext>
+            </PrimitiveAccordionItemIndicator>
+          </PrimitiveAccordionItemTrigger>
+
+          <PrimitiveAccordionItemContent>
+            {/* NB: div wrapper enforces body content to collapse properly if, for example, a string is passed */}
+            <div>{content}</div>
+          </PrimitiveAccordionItemContent>
         </PrimitiveAccordionItem>
       ))}
     </PrimitiveAccordion>
diff --git a/src/components/core/Checkbox/Checkbox.tsx b/src/components/core/Checkbox/Checkbox.tsx
index 3dee3c26..d63a8527 100644
--- a/src/components/core/Checkbox/Checkbox.tsx
+++ b/src/components/core/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+import { CheckboxContext } from "@ark-ui/react";
+
 import {
   PrimitiveCheckbox,
   PrimitiveCheckboxControl,
@@ -26,10 +28,10 @@ const Checkbox = ({ label, ...rest }: Props) => {
 
   return (
     <PrimitiveCheckbox {...rest}>
-      {({ isChecked }) => (
-        <>
-          <PrimitiveCheckboxControl>
-            {isChecked && (
+      <PrimitiveCheckboxControl>
+        <CheckboxContext>
+          {({ checked }) =>
+            checked && (
               <svg
                 viewBox="0 0 14 14"
                 fill="none"
@@ -43,11 +45,12 @@ const Checkbox = ({ label, ...rest }: Props) => {
                   strokeLinejoin="round"
                 />
               </svg>
-            )}
-          </PrimitiveCheckboxControl>
-          {label && <PrimitiveCheckboxLabel>{label}</PrimitiveCheckboxLabel>}
-        </>
-      )}
+            )
+          }
+        </CheckboxContext>
+      </PrimitiveCheckboxControl>
+
+      {label && <PrimitiveCheckboxLabel>{label}</PrimitiveCheckboxLabel>}
     </PrimitiveCheckbox>
   );
 };
diff --git a/src/components/core/Combobox/Combobox.tsx b/src/components/core/Combobox/Combobox.tsx
index 19a97320..f56d8b0b 100644
--- a/src/components/core/Combobox/Combobox.tsx
+++ b/src/components/core/Combobox/Combobox.tsx
@@ -19,6 +19,7 @@ import {
 } from "components/primitives";
 import { Flex } from "generated/panda/jsx";
 
+import type { ComboboxInputValueChangeDetails } from "@ark-ui/react";
 import type { Props as InputProps } from "components/core/Input/Input";
 import type {
   PrimitiveComboboxContentProps,
@@ -90,15 +91,11 @@ const Combobox = ({
   const allItems = groups.flatMap((group) => group.items);
   const [filteredItems, setFilteredItems] = useState(allItems);
 
-  const handleChange = (
-    evt: Parameters<
-      NonNullable<PrimitiveComboboxProps["onInputValueChange"]>
-    >[0],
-  ) => {
+  const handleChange = ({ inputValue }: ComboboxInputValueChangeDetails) => {
     const filtered = allItems.filter(
       (item) =>
-        item.label.toLowerCase().includes(evt.value.toLowerCase()) ||
-        item.value.toLowerCase().includes(evt.value.toLowerCase()),
+        item.label.toLowerCase().includes(inputValue.toLowerCase()) ||
+        item.value.toLowerCase().includes(inputValue.toLowerCase()),
     );
 
     setFilteredItems(filtered.length ? filtered : allItems);
@@ -159,10 +156,7 @@ const Combobox = ({
                     {...itemGroupProps}
                   >
                     {group.label.display && (
-                      <PrimitiveComboboxItemGroupLabel
-                        htmlFor={group.label.id}
-                        {...group.label.props}
-                      >
+                      <PrimitiveComboboxItemGroupLabel {...group.label.props}>
                         {group.label.plural}
                       </PrimitiveComboboxItemGroupLabel>
                     )}
diff --git a/src/components/core/DatePicker/DatePicker.tsx b/src/components/core/DatePicker/DatePicker.tsx
index ead08479..1070e7f2 100644
--- a/src/components/core/DatePicker/DatePicker.tsx
+++ b/src/components/core/DatePicker/DatePicker.tsx
@@ -1,3 +1,4 @@
+import { DatePickerContext } from "@ark-ui/react";
 import {
   FiCalendar as CalendarIcon,
   FiChevronLeft as ChevronLeftIcon,
@@ -97,54 +98,52 @@ const DatePicker = ({
       <PrimitiveDatePickerPositioner>
         <PrimitiveDatePickerContent>
           <PrimitiveDatePickerView view="day">
-            {(api) => (
-              <>
-                <PrimitiveDatePickerViewControl>
-                  <PrimitiveDatePickerPrevTrigger
-                    asChild
-                    aria-label="Previous month"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <Icon w={5} h={5}>
-                        <ChevronLeftIcon />
-                      </Icon>
-                    </Button>
-                  </PrimitiveDatePickerPrevTrigger>
+            <PrimitiveDatePickerViewControl>
+              <PrimitiveDatePickerPrevTrigger
+                asChild
+                aria-label="Previous month"
+              >
+                <Button variant="ghost" size="sm">
+                  <Icon w={5} h={5}>
+                    <ChevronLeftIcon />
+                  </Icon>
+                </Button>
+              </PrimitiveDatePickerPrevTrigger>
 
-                  <PrimitiveDatePickerViewTrigger
-                    asChild
-                    aria-label="View trigger"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <PrimitiveDatePickerRangeText />
-                    </Button>
-                  </PrimitiveDatePickerViewTrigger>
+              <PrimitiveDatePickerViewTrigger asChild aria-label="View trigger">
+                <Button variant="ghost" size="sm">
+                  <PrimitiveDatePickerRangeText />
+                </Button>
+              </PrimitiveDatePickerViewTrigger>
 
-                  <PrimitiveDatePickerNextTrigger
-                    asChild
-                    aria-label="Next month"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <Icon w={5} h={5}>
-                        <ChevronRightIcon />
-                      </Icon>
-                    </Button>
-                  </PrimitiveDatePickerNextTrigger>
-                </PrimitiveDatePickerViewControl>
+              <PrimitiveDatePickerNextTrigger asChild aria-label="Next month">
+                <Button variant="ghost" size="sm">
+                  <Icon w={5} h={5}>
+                    <ChevronRightIcon />
+                  </Icon>
+                </Button>
+              </PrimitiveDatePickerNextTrigger>
+            </PrimitiveDatePickerViewControl>
 
-                <PrimitiveDatePickerTable>
-                  <PrimitiveDatePickerTableHead>
-                    <PrimitiveDatePickerTableRow>
-                      {api.weekDays.map((weekDay, id) => (
+            <PrimitiveDatePickerTable>
+              <PrimitiveDatePickerTableHead>
+                <PrimitiveDatePickerTableRow>
+                  <DatePickerContext>
+                    {(api) =>
+                      api.weekDays.map((weekDay, id) => (
                         <PrimitiveDatePickerTableHeader key={id}>
                           {weekDay.narrow}
                         </PrimitiveDatePickerTableHeader>
-                      ))}
-                    </PrimitiveDatePickerTableRow>
-                  </PrimitiveDatePickerTableHead>
+                      ))
+                    }
+                  </DatePickerContext>
+                </PrimitiveDatePickerTableRow>
+              </PrimitiveDatePickerTableHead>
 
-                  <PrimitiveDatePickerTableBody>
-                    {api.weeks.map((week, id) => (
+              <PrimitiveDatePickerTableBody>
+                <DatePickerContext>
+                  {(api) =>
+                    api.weeks.map((week, id) => (
                       <PrimitiveDatePickerTableRow key={id}>
                         {week.map((day, id) => (
                           <PrimitiveDatePickerTableCell key={id} value={day}>
@@ -154,114 +153,113 @@ const DatePicker = ({
                           </PrimitiveDatePickerTableCell>
                         ))}
                       </PrimitiveDatePickerTableRow>
-                    ))}
-                  </PrimitiveDatePickerTableBody>
-                </PrimitiveDatePickerTable>
-              </>
-            )}
+                    ))
+                  }
+                </DatePickerContext>
+              </PrimitiveDatePickerTableBody>
+            </PrimitiveDatePickerTable>
           </PrimitiveDatePickerView>
 
           <PrimitiveDatePickerView view="month">
-            {(api) => (
-              <>
-                <PrimitiveDatePickerViewControl>
-                  <PrimitiveDatePickerPrevTrigger
-                    asChild
-                    aria-label="Previous year"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <Icon w={5} h={5}>
-                        <ChevronLeftIcon />
-                      </Icon>
-                    </Button>
-                  </PrimitiveDatePickerPrevTrigger>
+            <DatePickerContext>
+              {(api) => (
+                <>
+                  <PrimitiveDatePickerViewControl>
+                    <PrimitiveDatePickerPrevTrigger
+                      asChild
+                      aria-label="Previous year"
+                    >
+                      <Button variant="ghost" size="sm">
+                        <Icon w={5} h={5}>
+                          <ChevronLeftIcon />
+                        </Icon>
+                      </Button>
+                    </PrimitiveDatePickerPrevTrigger>
 
-                  <PrimitiveDatePickerViewTrigger
-                    asChild
-                    aria-label="View trigger"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <PrimitiveDatePickerRangeText />
-                    </Button>
-                  </PrimitiveDatePickerViewTrigger>
+                    <PrimitiveDatePickerViewTrigger
+                      asChild
+                      aria-label="View trigger"
+                    >
+                      <Button variant="ghost" size="sm">
+                        <PrimitiveDatePickerRangeText />
+                      </Button>
+                    </PrimitiveDatePickerViewTrigger>
 
-                  <PrimitiveDatePickerNextTrigger
-                    asChild
-                    aria-label="Next year"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <Icon w={5} h={5}>
-                        <ChevronRightIcon />
-                      </Icon>
-                    </Button>
-                  </PrimitiveDatePickerNextTrigger>
-                </PrimitiveDatePickerViewControl>
+                    <PrimitiveDatePickerNextTrigger
+                      asChild
+                      aria-label="Next year"
+                    >
+                      <Button variant="ghost" size="sm">
+                        <Icon w={5} h={5}>
+                          <ChevronRightIcon />
+                        </Icon>
+                      </Button>
+                    </PrimitiveDatePickerNextTrigger>
+                  </PrimitiveDatePickerViewControl>
 
-                <PrimitiveDatePickerTable>
-                  <PrimitiveDatePickerTableBody>
-                    {api
-                      .getMonthsGrid({ columns: 4, format: "short" })
-                      .map((months, id) => (
-                        <PrimitiveDatePickerTableRow key={id}>
-                          {months.map((month, id) => (
-                            <PrimitiveDatePickerTableCell
-                              key={id}
-                              value={month.value}
-                            >
-                              <PrimitiveDatePickerTableCellTrigger asChild>
-                                <Button variant="ghost" justifyContent="center">
-                                  {month.label}
-                                </Button>
-                              </PrimitiveDatePickerTableCellTrigger>
-                            </PrimitiveDatePickerTableCell>
-                          ))}
-                        </PrimitiveDatePickerTableRow>
-                      ))}
-                  </PrimitiveDatePickerTableBody>
-                </PrimitiveDatePickerTable>
-              </>
-            )}
+                  <PrimitiveDatePickerTable>
+                    <PrimitiveDatePickerTableBody>
+                      {api
+                        .getMonthsGrid({ columns: 4, format: "short" })
+                        .map((months, id) => (
+                          <PrimitiveDatePickerTableRow key={id}>
+                            {months.map((month, id) => (
+                              <PrimitiveDatePickerTableCell
+                                key={id}
+                                value={month.value}
+                              >
+                                <PrimitiveDatePickerTableCellTrigger asChild>
+                                  <Button
+                                    variant="ghost"
+                                    justifyContent="center"
+                                  >
+                                    {month.label}
+                                  </Button>
+                                </PrimitiveDatePickerTableCellTrigger>
+                              </PrimitiveDatePickerTableCell>
+                            ))}
+                          </PrimitiveDatePickerTableRow>
+                        ))}
+                    </PrimitiveDatePickerTableBody>
+                  </PrimitiveDatePickerTable>
+                </>
+              )}
+            </DatePickerContext>
           </PrimitiveDatePickerView>
 
           <PrimitiveDatePickerView view="year">
-            {(api) => (
-              <>
-                <PrimitiveDatePickerViewControl>
-                  <PrimitiveDatePickerPrevTrigger
-                    asChild
-                    aria-label="Previous decade"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <Icon w={5} h={5}>
-                        <ChevronLeftIcon />
-                      </Icon>
-                    </Button>
-                  </PrimitiveDatePickerPrevTrigger>
+            <PrimitiveDatePickerViewControl>
+              <PrimitiveDatePickerPrevTrigger
+                asChild
+                aria-label="Previous decade"
+              >
+                <Button variant="ghost" size="sm">
+                  <Icon w={5} h={5}>
+                    <ChevronLeftIcon />
+                  </Icon>
+                </Button>
+              </PrimitiveDatePickerPrevTrigger>
 
-                  <PrimitiveDatePickerViewTrigger
-                    asChild
-                    aria-label="View trigger"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <PrimitiveDatePickerRangeText />
-                    </Button>
-                  </PrimitiveDatePickerViewTrigger>
+              <PrimitiveDatePickerViewTrigger asChild aria-label="View trigger">
+                <Button variant="ghost" size="sm">
+                  <PrimitiveDatePickerRangeText />
+                </Button>
+              </PrimitiveDatePickerViewTrigger>
 
-                  <PrimitiveDatePickerNextTrigger
-                    asChild
-                    aria-label="Next decade"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <Icon w={5} h={5}>
-                        <ChevronRightIcon />
-                      </Icon>
-                    </Button>
-                  </PrimitiveDatePickerNextTrigger>
-                </PrimitiveDatePickerViewControl>
+              <PrimitiveDatePickerNextTrigger asChild aria-label="Next decade">
+                <Button variant="ghost" size="sm">
+                  <Icon w={5} h={5}>
+                    <ChevronRightIcon />
+                  </Icon>
+                </Button>
+              </PrimitiveDatePickerNextTrigger>
+            </PrimitiveDatePickerViewControl>
 
-                <PrimitiveDatePickerTable>
-                  <PrimitiveDatePickerTableBody>
-                    {api.getYearsGrid({ columns: 4 }).map((years, id) => (
+            <PrimitiveDatePickerTable>
+              <PrimitiveDatePickerTableBody>
+                <DatePickerContext>
+                  {(api) =>
+                    api.getYearsGrid({ columns: 4 }).map((years, id) => (
                       <PrimitiveDatePickerTableRow key={id}>
                         {years.map((year, id) => (
                           <PrimitiveDatePickerTableCell
@@ -276,11 +274,11 @@ const DatePicker = ({
                           </PrimitiveDatePickerTableCell>
                         ))}
                       </PrimitiveDatePickerTableRow>
-                    ))}
-                  </PrimitiveDatePickerTableBody>
-                </PrimitiveDatePickerTable>
-              </>
-            )}
+                    ))
+                  }
+                </DatePickerContext>
+              </PrimitiveDatePickerTableBody>
+            </PrimitiveDatePickerTable>
           </PrimitiveDatePickerView>
         </PrimitiveDatePickerContent>
       </PrimitiveDatePickerPositioner>
diff --git a/src/components/core/Drawer/Drawer.stories.tsx b/src/components/core/Drawer/Drawer.stories.tsx
index 2ac9f1a7..579eb24e 100644
--- a/src/components/core/Drawer/Drawer.stories.tsx
+++ b/src/components/core/Drawer/Drawer.stories.tsx
@@ -80,7 +80,8 @@ export const WithContext: Story = {
       title="Drawer Title"
       description="Drawer Description"
     >
-      {({ isOpen }) => <Text mt={2}>Open: {String(isOpen)}</Text>}
+      {/* @ts-ignore TODO */}
+      {({ open }) => <Text mt={2}>Open: {String(open)}</Text>}
     </Drawer>
   ),
 };
diff --git a/src/components/core/Drawer/Drawer.tsx b/src/components/core/Drawer/Drawer.tsx
index 6ccc09ac..cc0dcaa6 100644
--- a/src/components/core/Drawer/Drawer.tsx
+++ b/src/components/core/Drawer/Drawer.tsx
@@ -44,38 +44,33 @@ const Drawer = ({
   ...rest
 }: Props) => (
   <PrimitiveDrawer lazyMount unmountOnExit {...rest}>
-    {(ctx) => (
-      <>
-        {trigger && (
-          <PrimitiveDrawerTrigger asChild>{trigger}</PrimitiveDrawerTrigger>
-        )}
+    {trigger && (
+      <PrimitiveDrawerTrigger asChild>{trigger}</PrimitiveDrawerTrigger>
+    )}
 
-        <Portal container={containerRef}>
-          <PrimitiveDrawerBackdrop />
+    <Portal container={containerRef}>
+      <PrimitiveDrawerBackdrop />
 
-          <PrimitiveDrawerPositioner>
-            <PrimitiveDrawerContent {...contentProps}>
-              {title && <PrimitiveDrawerTitle>{title}</PrimitiveDrawerTitle>}
+      <PrimitiveDrawerPositioner>
+        <PrimitiveDrawerContent {...contentProps}>
+          {title && <PrimitiveDrawerTitle>{title}</PrimitiveDrawerTitle>}
 
-              {description && (
-                <PrimitiveDrawerDescription>
-                  {description}
-                </PrimitiveDrawerDescription>
-              )}
+          {description && (
+            <PrimitiveDrawerDescription>
+              {description}
+            </PrimitiveDrawerDescription>
+          )}
 
-              {/* forward nested context/state if utilized, otherwise directly render children */}
-              {typeof children === "function" ? children(ctx) : children}
+          {children}
 
-              <PrimitiveDrawerCloseTrigger>
-                <Icon>
-                  <CloseIcon />
-                </Icon>
-              </PrimitiveDrawerCloseTrigger>
-            </PrimitiveDrawerContent>
-          </PrimitiveDrawerPositioner>
-        </Portal>
-      </>
-    )}
+          <PrimitiveDrawerCloseTrigger>
+            <Icon>
+              <CloseIcon />
+            </Icon>
+          </PrimitiveDrawerCloseTrigger>
+        </PrimitiveDrawerContent>
+      </PrimitiveDrawerPositioner>
+    </Portal>
   </PrimitiveDrawer>
 );
 
diff --git a/src/components/core/Flyout/Flyout.tsx b/src/components/core/Flyout/Flyout.tsx
index 8a6cdb86..6b931561 100644
--- a/src/components/core/Flyout/Flyout.tsx
+++ b/src/components/core/Flyout/Flyout.tsx
@@ -50,7 +50,9 @@ const Flyout = ({ trigger, title, contentProps, children, ...rest }: Props) => {
           <PrimitiveFlyoutArrow>
             <PrimitiveFlyoutArrowTip />
           </PrimitiveFlyoutArrow>
+
           {title && <PrimitiveFlyoutTitle>{title}</PrimitiveFlyoutTitle>}
+
           <PrimitiveFlyoutDescription asChild>
             {children}
           </PrimitiveFlyoutDescription>
diff --git a/src/components/core/Menu/Menu.recipe.ts b/src/components/core/Menu/Menu.recipe.ts
index 98a518a8..93e75687 100644
--- a/src/components/core/Menu/Menu.recipe.ts
+++ b/src/components/core/Menu/Menu.recipe.ts
@@ -60,7 +60,6 @@ export const menuRecipe = defineSlotRecipe({
       gap: 1,
     },
     item: itemStyle,
-    optionItem: itemStyle,
     triggerItem: itemStyle,
     positioner: {
       zIndex: "menu",
@@ -85,10 +84,6 @@ export const menuRecipe = defineSlotRecipe({
           h: 9,
           px: 2,
         },
-        optionItem: {
-          h: 9,
-          px: 2,
-        },
         triggerItem: {
           h: 9,
           px: 2,
@@ -105,10 +100,6 @@ export const menuRecipe = defineSlotRecipe({
           h: 10,
           px: 2.5,
         },
-        optionItem: {
-          h: 10,
-          px: 2.5,
-        },
         triggerItem: {
           h: 10,
           px: 2.5,
@@ -125,10 +116,6 @@ export const menuRecipe = defineSlotRecipe({
           h: 11,
           px: 3,
         },
-        optionItem: {
-          h: 11,
-          px: 3,
-        },
         triggerItem: {
           h: 11,
           px: 3,
diff --git a/src/components/core/Menu/Menu.stories.tsx b/src/components/core/Menu/Menu.stories.tsx
index e9de4261..bbd303a1 100644
--- a/src/components/core/Menu/Menu.stories.tsx
+++ b/src/components/core/Menu/Menu.stories.tsx
@@ -131,8 +131,9 @@ export const WithContext: Story = {
       trigger={<Button>Open Menu</Button>}
       groups={WITH_CONTEXT_GROUPS()}
     >
-      {({ close: onClose }) => (
-        <Button borderRadius="unset" variant="ghost" w="full" onClick={onClose}>
+      {/* @ts-ignore TODO */}
+      {({ close }) => (
+        <Button borderRadius="unset" variant="ghost" w="full" onClick={close}>
           Close
         </Button>
       )}
diff --git a/src/components/core/Menu/Menu.tsx b/src/components/core/Menu/Menu.tsx
index e4c3ae77..266fa8bc 100644
--- a/src/components/core/Menu/Menu.tsx
+++ b/src/components/core/Menu/Menu.tsx
@@ -43,44 +43,39 @@ const Menu = ({ children, trigger, triggerItem, groups, ...rest }: Props) => {
 
   return (
     <PrimitiveMenu {...rest}>
-      {(ctx) => (
-        <>
-          {trigger && (
-            <PrimitiveMenuTrigger asChild>{trigger}</PrimitiveMenuTrigger>
-          )}
-
-          {triggerItem && (
-            <PrimitiveMenuTriggerItem asChild>
-              {triggerItem}
-            </PrimitiveMenuTriggerItem>
-          )}
+      {trigger && (
+        <PrimitiveMenuTrigger asChild>{trigger}</PrimitiveMenuTrigger>
+      )}
 
-          <PrimitiveMenuPositioner>
-            <PrimitiveMenuContent>
-              {groups?.map(({ id, label, separator, items }) => (
-                <PrimitiveMenuItemGroup key={id} id={id}>
-                  {label && (
-                    <PrimitiveMenuItemGroupLabel htmlFor={id}>
-                      {label}
-                    </PrimitiveMenuItemGroupLabel>
-                  )}
+      {triggerItem && (
+        <PrimitiveMenuTriggerItem asChild>
+          {triggerItem}
+        </PrimitiveMenuTriggerItem>
+      )}
 
-                  {items.map(({ id, child }) => (
-                    <PrimitiveMenuItem key={id} id={id} asChild>
-                      {child}
-                    </PrimitiveMenuItem>
-                  ))}
+      <PrimitiveMenuPositioner>
+        <PrimitiveMenuContent>
+          {groups?.map(({ id, label, separator, items }) => (
+            <PrimitiveMenuItemGroup key={id} id={id}>
+              {label && (
+                <PrimitiveMenuItemGroupLabel>
+                  {label}
+                </PrimitiveMenuItemGroupLabel>
+              )}
 
-                  {separator && <PrimitiveMenuSeparator />}
-                </PrimitiveMenuItemGroup>
+              {items.map(({ id, child }) => (
+                <PrimitiveMenuItem key={id} value={id} asChild>
+                  {child}
+                </PrimitiveMenuItem>
               ))}
 
-              {/* forward nested context/state if utilized, otherwise directly render children */}
-              {typeof children === "function" ? children(ctx) : children}
-            </PrimitiveMenuContent>
-          </PrimitiveMenuPositioner>
-        </>
-      )}
+              {separator && <PrimitiveMenuSeparator />}
+            </PrimitiveMenuItemGroup>
+          ))}
+
+          {children}
+        </PrimitiveMenuContent>
+      </PrimitiveMenuPositioner>
     </PrimitiveMenu>
   );
 };
diff --git a/src/components/core/Modal/Modal.stories.tsx b/src/components/core/Modal/Modal.stories.tsx
index 50554c08..a265de9d 100644
--- a/src/components/core/Modal/Modal.stories.tsx
+++ b/src/components/core/Modal/Modal.stories.tsx
@@ -59,7 +59,8 @@ export const WithContext: Story = {
       title="Modal Title"
       description="Modal Description"
     >
-      {({ isOpen }) => <Text mt={2}>Open: {String(isOpen)}</Text>}
+      {/* @ts-ignore TODO */}
+      {({ open }) => <Text mt={2}>Open: {String(open)}</Text>}
     </Modal>
   ),
 };
diff --git a/src/components/core/Modal/Modal.tsx b/src/components/core/Modal/Modal.tsx
index 64802001..a433a81b 100644
--- a/src/components/core/Modal/Modal.tsx
+++ b/src/components/core/Modal/Modal.tsx
@@ -38,38 +38,31 @@ const Modal = ({
   ...rest
 }: Props) => (
   <PrimitiveModal lazyMount unmountOnExit {...rest}>
-    {(ctx) => (
-      <>
-        {trigger && (
-          <PrimitiveModalTrigger asChild>{trigger}</PrimitiveModalTrigger>
-        )}
+    {trigger && (
+      <PrimitiveModalTrigger asChild>{trigger}</PrimitiveModalTrigger>
+    )}
 
-        <Portal container={containerRef}>
-          <PrimitiveModalBackdrop />
+    <Portal container={containerRef}>
+      <PrimitiveModalBackdrop />
 
-          <PrimitiveModalPositioner>
-            <PrimitiveModalContent>
-              {title && <PrimitiveModalTitle>{title}</PrimitiveModalTitle>}
+      <PrimitiveModalPositioner>
+        <PrimitiveModalContent>
+          {title && <PrimitiveModalTitle>{title}</PrimitiveModalTitle>}
 
-              {description && (
-                <PrimitiveModalDescription>
-                  {description}
-                </PrimitiveModalDescription>
-              )}
+          {description && (
+            <PrimitiveModalDescription>{description}</PrimitiveModalDescription>
+          )}
 
-              {/* forward nested context/state if utilized, otherwise directly render children */}
-              {typeof children === "function" ? children(ctx) : children}
+          {children}
 
-              <PrimitiveModalCloseTrigger>
-                <Icon>
-                  <CloseIcon />
-                </Icon>
-              </PrimitiveModalCloseTrigger>
-            </PrimitiveModalContent>
-          </PrimitiveModalPositioner>
-        </Portal>
-      </>
-    )}
+          <PrimitiveModalCloseTrigger>
+            <Icon>
+              <CloseIcon />
+            </Icon>
+          </PrimitiveModalCloseTrigger>
+        </PrimitiveModalContent>
+      </PrimitiveModalPositioner>
+    </Portal>
   </PrimitiveModal>
 );
 
diff --git a/src/components/core/NumberInput/NumberInput.tsx b/src/components/core/NumberInput/NumberInput.tsx
index d14fb078..034e52d4 100644
--- a/src/components/core/NumberInput/NumberInput.tsx
+++ b/src/components/core/NumberInput/NumberInput.tsx
@@ -57,19 +57,23 @@ const NumberInput = ({
   return (
     <PrimitiveNumberInput {...rest}>
       <PrimitiveNumberInputScrubber />
+
       {label && <PrimitiveNumberInputLabel>{label}</PrimitiveNumberInputLabel>}
+
       <Flex>
         {leftAddon && (
           <PrimitiveNumberInputAddon borderLeftRadius="sm">
             {leftAddon}
           </PrimitiveNumberInputAddon>
         )}
+
         <Flex pos="relative" w="100%">
           {inputLeftElement && (
             <PrimitiveNumberInputLeftElement>
               {inputLeftElement}
             </PrimitiveNumberInputLeftElement>
           )}
+
           <PrimitiveNumberInputInput
             {...inputProps}
             placeholder={placeholder}
@@ -80,17 +84,20 @@ const NumberInput = ({
             pl={inputLeftElement ? 10 : 3}
             pr={inputRightElement ? 10 : 3}
           />
+
           {inputRightElement && (
             <PrimitiveNumberInputRightElement>
               {inputRightElement}
             </PrimitiveNumberInputRightElement>
           )}
         </Flex>
+
         {rightAddon && (
           <PrimitiveNumberInputAddon borderRightRadius="sm">
             {rightAddon}
           </PrimitiveNumberInputAddon>
         )}
+
         {stepper && (
           <PrimitiveNumberInputControl className="group">
             <PrimitiveNumberInputDecrementTrigger>
@@ -98,6 +105,7 @@ const NumberInput = ({
                 <FiMinus />
               </Icon>
             </PrimitiveNumberInputDecrementTrigger>
+
             <panda.div
               w="1px"
               h="75%"
@@ -105,6 +113,7 @@ const NumberInput = ({
               my="auto"
               bgColor={{ base: "fg.default", _groupDisabled: "fg.disabled" }}
             />
+
             <PrimitiveNumberInputIncrementTrigger>
               <Icon color="inherit">
                 <FiPlus />
diff --git a/src/components/core/Slider/Slider.tsx b/src/components/core/Slider/Slider.tsx
index 8c5bb50d..71a5043c 100644
--- a/src/components/core/Slider/Slider.tsx
+++ b/src/components/core/Slider/Slider.tsx
@@ -36,6 +36,7 @@ const Slider = ({ label, markers, maxW, ...rest }: Props) => {
   return (
     <PrimitiveSlider {...rest}>
       {label && <PrimitiveSliderLabel>{label}</PrimitiveSliderLabel>}
+
       <PrimitiveSliderControl maxW={maxW}>
         <PrimitiveSliderTrack maxW={maxW}>
           <PrimitiveSliderRange />
@@ -43,6 +44,7 @@ const Slider = ({ label, markers, maxW, ...rest }: Props) => {
 
         <PrimitiveSliderThumb index={0} />
       </PrimitiveSliderControl>
+
       {markers && (
         <PrimitiveSliderMarkerGroup maxW={maxW}>
           {markers.map(({ id, value, label }) => (
diff --git a/src/components/core/Toggle/Toggle.tsx b/src/components/core/Toggle/Toggle.tsx
index 9bb10a72..511d6200 100644
--- a/src/components/core/Toggle/Toggle.tsx
+++ b/src/components/core/Toggle/Toggle.tsx
@@ -24,6 +24,7 @@ const Toggle = ({ label, ...rest }: Props) => {
       <PrimitiveToggleControl>
         <PrimitiveToggleThumb />
       </PrimitiveToggleControl>
+
       {label && <PrimitiveToggleLabel>{label}</PrimitiveToggleLabel>}
     </PrimitiveToggle>
   );
diff --git a/src/components/core/Tooltip/Tooltip.tsx b/src/components/core/Tooltip/Tooltip.tsx
index 17e216ff..c10f8371 100644
--- a/src/components/core/Tooltip/Tooltip.tsx
+++ b/src/components/core/Tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import { Portal } from "@ark-ui/react";
+import { Portal, TooltipContext } from "@ark-ui/react";
 
 import {
   PrimitiveTooltip,
@@ -42,15 +42,15 @@ const Tooltip = ({
   ...rest
 }: Props) => (
   <PrimitiveTooltip openDelay={openDelay} closeDelay={closeDelay} {...rest}>
-    {({ isOpen }) => (
-      <>
-        {trigger && (
-          <PrimitiveTooltipTrigger asChild>{trigger}</PrimitiveTooltipTrigger>
-        )}
+    {trigger && (
+      <PrimitiveTooltipTrigger asChild>{trigger}</PrimitiveTooltipTrigger>
+    )}
 
-        <Portal container={containerRef}>
-          <PrimitiveTooltipPositioner>
-            {isOpen && (
+    <Portal container={containerRef}>
+      <PrimitiveTooltipPositioner>
+        <TooltipContext>
+          {({ open }) =>
+            open && (
               <>
                 {arrow && (
                   <PrimitiveTooltipArrow bgColor={bgColor}>
@@ -62,11 +62,11 @@ const Tooltip = ({
                   {tooltipContent}
                 </PrimitiveTooltipContent>
               </>
-            )}
-          </PrimitiveTooltipPositioner>
-        </Portal>
-      </>
-    )}
+            )
+          }
+        </TooltipContext>
+      </PrimitiveTooltipPositioner>
+    </Portal>
   </PrimitiveTooltip>
 );
 
diff --git a/src/components/primitives/Accordion/Accordion.tsx b/src/components/primitives/Accordion/Accordion.tsx
index 220dc1e6..e2327873 100644
--- a/src/components/primitives/Accordion/Accordion.tsx
+++ b/src/components/primitives/Accordion/Accordion.tsx
@@ -2,7 +2,7 @@
  * @file Accordion primitives.
  */
 import {
-  Accordion,
+  AccordionRoot,
   AccordionItem,
   AccordionItemTrigger,
   AccordionItemIndicator,
@@ -19,10 +19,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(accordion);
 
 export type PrimitiveAccordionProps = ComponentProps<typeof PrimitiveAccordion>;
-const PrimitiveAccordion: PandaComponent<typeof Accordion> = withProvider(
-  panda(Accordion),
-  "root",
-);
+const PrimitiveAccordion = withProvider(panda(AccordionRoot), "root");
 
 export type PrimitiveAccordionItemProps = ComponentProps<
   typeof PrimitiveAccordionItem
diff --git a/src/components/primitives/Avatar/Avatar.tsx b/src/components/primitives/Avatar/Avatar.tsx
index 4cf638f3..32c84c17 100644
--- a/src/components/primitives/Avatar/Avatar.tsx
+++ b/src/components/primitives/Avatar/Avatar.tsx
@@ -1,22 +1,18 @@
 /**
  * @file Avatar primitives.
  */
-import { Avatar, AvatarFallback, AvatarImage } from "@ark-ui/react";
+import { AvatarRoot, AvatarFallback, AvatarImage } from "@ark-ui/react";
 
 import { panda } from "generated/panda/jsx";
 import { avatar } from "generated/panda/recipes";
 import { createStyleContext } from "lib/util";
 
-import type { PandaComponent } from "generated/panda/types/jsx";
 import type { ComponentProps } from "react";
 
 const { withProvider, withContext } = createStyleContext(avatar);
 
 export type PrimitiveAvatarProps = ComponentProps<typeof PrimitiveAvatar>;
-const PrimitiveAvatar: PandaComponent<typeof Avatar> = withProvider(
-  panda(Avatar),
-  "root",
-);
+const PrimitiveAvatar = withProvider(panda(AvatarRoot), "root");
 
 export type PrimitiveAvatarFallbackProps = ComponentProps<
   typeof PrimitiveAvatarFallback
diff --git a/src/components/primitives/Carousel/Carousel.tsx b/src/components/primitives/Carousel/Carousel.tsx
index e1a5a161..3e827580 100644
--- a/src/components/primitives/Carousel/Carousel.tsx
+++ b/src/components/primitives/Carousel/Carousel.tsx
@@ -2,7 +2,7 @@
  * @file Carousel primitives.
  */
 import {
-  Carousel,
+  CarouselRoot,
   CarouselControl,
   CarouselNextTrigger,
   CarouselPrevTrigger,
@@ -23,10 +23,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(carousel);
 
 export type PrimitiveCarouselProps = ComponentProps<typeof PrimitiveCarousel>;
-const PrimitiveCarousel: PandaComponent<typeof Carousel> = withProvider(
-  panda(Carousel),
-  "root",
-);
+const PrimitiveCarousel = withProvider(panda(CarouselRoot), "root");
 
 export type PrimitiveCarouselControlProps = ComponentProps<
   typeof PrimitiveCarouselControl
diff --git a/src/components/primitives/Checkbox/Checkbox.tsx b/src/components/primitives/Checkbox/Checkbox.tsx
index ec3f91f0..bc0f3873 100644
--- a/src/components/primitives/Checkbox/Checkbox.tsx
+++ b/src/components/primitives/Checkbox/Checkbox.tsx
@@ -1,7 +1,7 @@
 /**
  * @file Checkbox primitives.
  */
-import { Checkbox, CheckboxControl, CheckboxLabel } from "@ark-ui/react";
+import { CheckboxRoot, CheckboxControl, CheckboxLabel } from "@ark-ui/react";
 
 import { panda } from "generated/panda/jsx";
 import { checkbox } from "generated/panda/recipes";
@@ -12,7 +12,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(checkbox);
 
 export type PrimitiveCheckboxProps = ComponentProps<typeof PrimitiveCheckbox>;
-const PrimitiveCheckbox = withProvider(panda(Checkbox), "root");
+const PrimitiveCheckbox = withProvider(panda(CheckboxRoot), "root");
 
 export type PrimitiveCheckboxControlProps = ComponentProps<
   typeof PrimitiveCheckboxControl
diff --git a/src/components/primitives/Combobox/Combobox.tsx b/src/components/primitives/Combobox/Combobox.tsx
index b6101794..69e2c835 100644
--- a/src/components/primitives/Combobox/Combobox.tsx
+++ b/src/components/primitives/Combobox/Combobox.tsx
@@ -2,7 +2,7 @@
  * @file Combobox primitives.
  */
 import {
-  Combobox,
+  ComboboxRoot,
   ComboboxClearTrigger,
   ComboboxContent,
   ComboboxControl,
@@ -26,7 +26,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(combobox);
 
 export type PrimitiveComboboxProps = ComponentProps<typeof PrimitiveCombobox>;
-const PrimitiveCombobox = withProvider(panda(Combobox), "root");
+const PrimitiveCombobox = withProvider(panda(ComboboxRoot), "root");
 
 export type PrimitiveComboboxClearTriggerProps = ComponentProps<
   typeof PrimitiveComboboxClearTrigger
diff --git a/src/components/primitives/Drawer/Drawer.tsx b/src/components/primitives/Drawer/Drawer.tsx
index f5793df1..577ab3d3 100644
--- a/src/components/primitives/Drawer/Drawer.tsx
+++ b/src/components/primitives/Drawer/Drawer.tsx
@@ -2,7 +2,7 @@
  * @file Drawer primitives.
  */
 import {
-  Dialog,
+  DialogRoot,
   DialogBackdrop,
   DialogCloseTrigger,
   DialogPositioner,
@@ -21,7 +21,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(drawer);
 
 export type PrimitiveDrawerProps = ComponentProps<typeof PrimitiveDrawer>;
-const PrimitiveDrawer = withProvider(panda(Dialog), "root");
+const PrimitiveDrawer = withProvider(panda(DialogRoot), "root");
 
 export type PrimitiveDrawerTriggerProps = ComponentProps<
   typeof PrimitiveDrawerTrigger
diff --git a/src/components/primitives/Flyout/Flyout.tsx b/src/components/primitives/Flyout/Flyout.tsx
index 29111999..7cca609b 100644
--- a/src/components/primitives/Flyout/Flyout.tsx
+++ b/src/components/primitives/Flyout/Flyout.tsx
@@ -2,7 +2,7 @@
  * @file Flyout primitives.
  */
 import {
-  Popover,
+  PopoverRoot,
   PopoverArrow,
   PopoverArrowTip,
   PopoverCloseTrigger,
@@ -22,7 +22,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(flyout);
 
 export type PrimitiveFlyoutProps = ComponentProps<typeof PrimitiveFlyout>;
-const PrimitiveFlyout = withProvider(panda(Popover), "root");
+const PrimitiveFlyout = withProvider(panda(PopoverRoot), "root");
 
 export type PrimitiveFlyoutArrowProps = ComponentProps<
   typeof PrimitiveFlyoutArrow
diff --git a/src/components/primitives/Menu/Menu.tsx b/src/components/primitives/Menu/Menu.tsx
index 82c664f9..beecadbb 100644
--- a/src/components/primitives/Menu/Menu.tsx
+++ b/src/components/primitives/Menu/Menu.tsx
@@ -2,7 +2,7 @@
  * @file Menu primitives.
  */
 import {
-  Menu,
+  MenuRoot,
   MenuArrow,
   MenuArrowTip,
   MenuContent,
@@ -10,7 +10,6 @@ import {
   MenuItem,
   MenuItemGroup,
   MenuItemGroupLabel,
-  MenuOptionItem,
   MenuPositioner,
   MenuSeparator,
   MenuTrigger,
@@ -27,8 +26,8 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(menu);
 
 export type PrimitiveMenuProps = ComponentProps<typeof PrimitiveMenu>;
-const PrimitiveMenu: PandaComponent<typeof Menu> = withProvider(
-  panda(Menu),
+const PrimitiveMenu: PandaComponent<typeof MenuRoot> = withProvider(
+  panda(MenuRoot),
   "root",
 );
 
@@ -76,12 +75,6 @@ export const PrimitiveMenuItemGroupLabel = withContext(
   "itemGroupLabel",
 );
 
-export type PrimitiveMenuOptionItemProps = ComponentProps<
-  typeof PrimitiveMenuOptionItem
->;
-export const PrimitiveMenuOptionItem: PandaComponent<typeof MenuOptionItem> =
-  withContext(panda(MenuOptionItem), "optionItem");
-
 export type PrimitiveMenuPositionerProps = ComponentProps<
   typeof PrimitiveMenuPositioner
 >;
diff --git a/src/components/primitives/Modal/Modal.tsx b/src/components/primitives/Modal/Modal.tsx
index c431e85a..bfc0ea14 100644
--- a/src/components/primitives/Modal/Modal.tsx
+++ b/src/components/primitives/Modal/Modal.tsx
@@ -2,7 +2,7 @@
  * @file Modal primitives.
  */
 import {
-  Dialog,
+  DialogRoot,
   DialogBackdrop,
   DialogCloseTrigger,
   DialogPositioner,
@@ -21,7 +21,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(modal);
 
 export type PrimitiveModalProps = ComponentProps<typeof PrimitiveModal>;
-const PrimitiveModal = withProvider(panda(Dialog), "root");
+const PrimitiveModal = withProvider(panda(DialogRoot), "root");
 
 export type PrimitiveModalTriggerProps = ComponentProps<
   typeof PrimitiveModalTrigger
diff --git a/src/components/primitives/NumberInput/NumberInput.tsx b/src/components/primitives/NumberInput/NumberInput.tsx
index ba2d4b08..4f6a41c4 100644
--- a/src/components/primitives/NumberInput/NumberInput.tsx
+++ b/src/components/primitives/NumberInput/NumberInput.tsx
@@ -2,7 +2,7 @@
  * @file Number input primitives.
  */
 import {
-  NumberInput,
+  NumberInputRoot,
   NumberInputControl,
   NumberInputDecrementTrigger,
   NumberInputIncrementTrigger,
@@ -15,7 +15,6 @@ import { panda } from "generated/panda/jsx";
 import { numberInput } from "generated/panda/recipes";
 import { createStyleContext } from "lib/util";
 
-import type { PandaComponent } from "generated/panda/types/jsx";
 import type { ComponentProps } from "react";
 
 const { withProvider, withContext } = createStyleContext(numberInput);
@@ -23,10 +22,7 @@ const { withProvider, withContext } = createStyleContext(numberInput);
 export type PrimitiveNumberInputProps = ComponentProps<
   typeof PrimitiveNumberInput
 >;
-const PrimitiveNumberInput: PandaComponent<typeof NumberInput> = withProvider(
-  panda(NumberInput),
-  "root",
-);
+const PrimitiveNumberInput = withProvider(panda(NumberInputRoot), "root");
 
 export type PrimitiveNumberInputControlProps = ComponentProps<
   typeof PrimitiveNumberInputControl
diff --git a/src/components/primitives/RadioGroup/RadioGroup.tsx b/src/components/primitives/RadioGroup/RadioGroup.tsx
index 67c0a746..48751d34 100644
--- a/src/components/primitives/RadioGroup/RadioGroup.tsx
+++ b/src/components/primitives/RadioGroup/RadioGroup.tsx
@@ -4,7 +4,7 @@
 import {
   RadioGroupItem,
   RadioGroupItemControl,
-  RadioGroup,
+  RadioGroupRoot,
   RadioGroupLabel,
   RadioGroupItemText,
 } from "@ark-ui/react";
@@ -21,10 +21,7 @@ const { withProvider, withContext } = createStyleContext(radioGroup);
 export type PrimitiveRadioGroupProps = ComponentProps<
   typeof PrimitiveRadioGroup
 >;
-const PrimitiveRadioGroup: PandaComponent<typeof RadioGroup> = withProvider(
-  panda(RadioGroup),
-  "root",
-);
+const PrimitiveRadioGroup = withProvider(panda(RadioGroupRoot), "root");
 
 export type PrimitiveRadioGroupItemControlProps = ComponentProps<
   typeof PrimitiveRadioGroupItemControl
diff --git a/src/components/primitives/Slider/Slider.tsx b/src/components/primitives/Slider/Slider.tsx
index c4154e96..16f6cc2c 100644
--- a/src/components/primitives/Slider/Slider.tsx
+++ b/src/components/primitives/Slider/Slider.tsx
@@ -2,7 +2,7 @@
  * @file Slider primitives.
  */
 import {
-  Slider,
+  SliderRoot,
   SliderControl,
   SliderLabel,
   SliderMarker,
@@ -21,7 +21,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(slider);
 
 export type PrimitiveSliderProps = ComponentProps<typeof PrimitiveSlider>;
-const PrimitiveSlider = withProvider(panda(Slider), "root");
+const PrimitiveSlider = withProvider(panda(SliderRoot), "root");
 
 export type PrimitiveSliderControlProps = ComponentProps<
   typeof PrimitiveSliderControl
diff --git a/src/components/primitives/Tabs/Tabs.tsx b/src/components/primitives/Tabs/Tabs.tsx
index be148367..514316fa 100644
--- a/src/components/primitives/Tabs/Tabs.tsx
+++ b/src/components/primitives/Tabs/Tabs.tsx
@@ -2,7 +2,7 @@
  * @file Tabs primitives.
  */
 import {
-  Tabs,
+  TabsRoot,
   TabContent,
   TabIndicator,
   TabList,
@@ -19,10 +19,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(tabs);
 
 export type PrimitiveTabsProps = ComponentProps<typeof PrimitiveTabs>;
-const PrimitiveTabs: PandaComponent<typeof Tabs> = withProvider(
-  panda(Tabs),
-  "root",
-);
+const PrimitiveTabs = withProvider(panda(TabsRoot), "root");
 
 export type PrimitiveTabContentProps = ComponentProps<
   typeof PrimitiveTabContent
diff --git a/src/components/primitives/Toggle/Toggle.tsx b/src/components/primitives/Toggle/Toggle.tsx
index df3f5590..272d06a9 100644
--- a/src/components/primitives/Toggle/Toggle.tsx
+++ b/src/components/primitives/Toggle/Toggle.tsx
@@ -1,7 +1,12 @@
 /**
  * @file Toggle primitives.
  */
-import { Switch, SwitchControl, SwitchThumb, SwitchLabel } from "@ark-ui/react";
+import {
+  SwitchRoot,
+  SwitchControl,
+  SwitchThumb,
+  SwitchLabel,
+} from "@ark-ui/react";
 
 import { panda } from "generated/panda/jsx";
 import { toggle } from "generated/panda/recipes";
@@ -13,7 +18,7 @@ const { withProvider, withContext } = createStyleContext(toggle);
 
 export type PrimitiveToggleProps = ComponentProps<typeof PrimitiveToggle>;
 // NB: Using `Toggle` instead of `Switch` here to avoid recipe issues with `switch` being a reserved word.
-const PrimitiveToggle = withProvider(panda(Switch), "root");
+const PrimitiveToggle = withProvider(panda(SwitchRoot), "root");
 
 export type PrimitiveToggleControlProps = ComponentProps<
   typeof PrimitiveToggleControl
diff --git a/src/components/primitives/Tooltip/Tooltip.tsx b/src/components/primitives/Tooltip/Tooltip.tsx
index f4eef458..d3408910 100644
--- a/src/components/primitives/Tooltip/Tooltip.tsx
+++ b/src/components/primitives/Tooltip/Tooltip.tsx
@@ -2,7 +2,7 @@
  * @file Tooltip primitives.
  */
 import {
-  Tooltip,
+  TooltipRoot,
   TooltipArrow,
   TooltipArrowTip,
   TooltipContent,
@@ -19,7 +19,7 @@ import type { ComponentProps } from "react";
 const { withProvider, withContext } = createStyleContext(tooltip);
 
 export type PrimitiveTooltipProps = ComponentProps<typeof PrimitiveTooltip>;
-const PrimitiveTooltip = withProvider(panda(Tooltip), "root");
+const PrimitiveTooltip = withProvider(panda(TooltipRoot), "root");
 
 export type PrimitiveTooltipArrowProps = ComponentProps<
   typeof PrimitiveTooltipArrow
diff --git a/src/components/utility/Collapse/Collapse.tsx b/src/components/utility/Collapse/Collapse.tsx
index 9824c933..ba2957d7 100644
--- a/src/components/utility/Collapse/Collapse.tsx
+++ b/src/components/utility/Collapse/Collapse.tsx
@@ -70,6 +70,7 @@ const Collapse = ({
         {...triggerProps}
       >
         {label}
+
         <Icon
           color="inherit"
           transform={isOpen && !icon ? "rotate(-180deg)" : undefined}
@@ -79,6 +80,7 @@ const Collapse = ({
           {icon ?? defaultIcon}
         </Icon>
       </Button>
+
       <AnimatePresence initial={animateOnMount}>
         {isOpen && (
           <motion.div
diff --git a/src/stories/introduction.stories.mdx b/src/stories/introduction.mdx
similarity index 100%
rename from src/stories/introduction.stories.mdx
rename to src/stories/introduction.mdx
diff --git a/tsconfig.json b/tsconfig.json
index e0a20acc..356c5651 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,30 +7,17 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "noEmit": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
     "target": "esnext",
-    "typeRoots": [
-      "generated/panda",
-      "node_modules/@types"
-    ]
+    "typeRoots": ["generated/panda", "node_modules/@types"]
   },
-  "include": [
-    "src",
-    "*.config.ts",
-    "*.config.cjs",
-    ".storybook/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "include": ["src", "*.config.ts", "*.config.cjs", ".storybook/**/*.ts"],
+  "exclude": ["node_modules"]
+}