diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/bottomsheet.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/bottomsheet.mdx
index b47dee34517b96..d2ef15ad5675d7 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/bottomsheet.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/bottomsheet.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI BottomSheet matches the official SwiftUI [sheet API](<https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)>) and presents content from the bottom of the screen.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/bottomsheet/ios-light.webp"
-    darkSource="/static/images/expo-ui/bottomsheet/ios-dark.webp"
-    alt="A BottomSheet at medium detent showing a Sort By list with Most Recent selected"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/bottomsheet/ios-light.webp"
+  darkSource="/static/images/expo-ui/bottomsheet/ios-dark.webp"
+  alt="A BottomSheet at medium detent showing a Sort By list with Most Recent selected"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/button.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/button.mdx
index ace80418e1bb92..878fcff14d066c 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/button.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/button.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Button matches the official SwiftUI [Button API](https://developer.apple.com/documentation/swiftui/button) and supports styling via the [`buttonStyle`](modifiers/#buttonstylestyle), [`controlSize`](modifiers/#controlsizesize), and other modifiers.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/button/ios-light.webp"
-    darkSource="/static/images/expo-ui/button/ios-dark.webp"
-    alt="Two iOS 26 Liquid Glass buttons — a glassProminent Get started above a glass Learn more"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/button/ios-light.webp"
+  darkSource="/static/images/expo-ui/button/ios-dark.webp"
+  alt="Two iOS 26 Liquid Glass buttons — a glassProminent Get started above a glass Learn more"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/colorpicker.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/colorpicker.mdx
index 6f691f5c921bd8..0b37d631ebd10b 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/colorpicker.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/colorpicker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ColorPicker matches the official SwiftUI [ColorPicker API](https://developer.apple.com/documentation/swiftui/colorpicker) and allows app users to select colors from a palette.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/colorpicker/ios-light.webp"
-    darkSource="/static/images/expo-ui/colorpicker/ios-dark.webp"
-    alt="ColorPicker row inside a Form, showing the current color swatch"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/colorpicker/ios-light.webp"
+  darkSource="/static/images/expo-ui/colorpicker/ios-dark.webp"
+  alt="ColorPicker row inside a Form, showing the current color swatch"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx
index 90661e27d3249a..b9183e69fd4065 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ConfirmationDialog matches the official SwiftUI [confirmationDialog API](<https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:actions:message:)>) and presents an action sheet-style dialog with a title, actions, and an optional message.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/confirmationdialog/ios-light.webp"
-    darkSource="/static/images/expo-ui/confirmationdialog/ios-dark.webp"
-    alt="ConfirmationDialog asking the user to confirm a destructive action"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/confirmationdialog/ios-light.webp"
+  darkSource="/static/images/expo-ui/confirmationdialog/ios-dark.webp"
+  alt="ConfirmationDialog asking the user to confirm a destructive action"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/contextmenu.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/contextmenu.mdx
index 956308b09dcf56..29eb930b36ce84 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/contextmenu.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/contextmenu.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ContextMenu matches the official SwiftUI [contextMenu API](<https://developer.apple.com/documentation/swiftui/view/contextmenu(menuitems:)>) and displays a menu when long-pressed. For single-tap menu interactions, use [`Menu`](menu) instead.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/contextmenu/ios-light.webp"
-    darkSource="/static/images/expo-ui/contextmenu/ios-dark.webp"
-    alt="A long-pressed tile shown as an enlarged preview with a Share, Favorite, Delete menu beneath it"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/contextmenu/ios-light.webp"
+  darkSource="/static/images/expo-ui/contextmenu/ios-dark.webp"
+  alt="A long-pressed tile shown as an enlarged preview with a Share, Favorite, Delete menu beneath it"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/controlgroup.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/controlgroup.mdx
index f9ff07aeac520e..a485ee7bd311b0 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/controlgroup.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/controlgroup.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ControlGroup matches the official SwiftUI [ControlGroup API](https://developer.apple.com/documentation/swiftui/controlgroup). When placed inside a [`Menu`](menu), the children are rendered as a compact horizontal row of buttons.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/controlgroup/ios-light.webp"
-    darkSource="/static/images/expo-ui/controlgroup/ios-dark.webp"
-    alt="An open Menu showing a ControlGroup row of Add, Favorite, Share icon buttons above Rename and Delete entries"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/controlgroup/ios-light.webp"
+  darkSource="/static/images/expo-ui/controlgroup/ios-dark.webp"
+  alt="An open Menu showing a ControlGroup row of Add, Favorite, Share icon buttons above Rename and Delete entries"
+/>
 
 > **Note:** On tvOS, `ControlGroup` requires tvOS 17.0 or later.
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/datepicker.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/datepicker.mdx
index 31cb0df51f34c4..d7c53184abdc25 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/datepicker.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/datepicker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI DatePicker matches the official SwiftUI [DatePicker API](https://developer.apple.com/documentation/swiftui/datepicker) and supports styling via the [`datePickerStyle`](modifiers/#datepickerstylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/datepicker/ios-light.webp"
-    darkSource="/static/images/expo-ui/datepicker/ios-dark.webp"
-    alt="Date and time DatePicker rows inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/datepicker/ios-light.webp"
+  darkSource="/static/images/expo-ui/datepicker/ios-dark.webp"
+  alt="Date and time DatePicker rows inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/disclosuregroup.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/disclosuregroup.mdx
index bcecc4b324b838..190ee629212ffa 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/disclosuregroup.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/disclosuregroup.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI DisclosureGroup matches the official SwiftUI [DisclosureGroup API](https://developer.apple.com/documentation/swiftui/disclosuregroup) and displays a disclosure indicator that reveals or hides content.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/disclosuregroup/ios-light.webp"
-    darkSource="/static/images/expo-ui/disclosuregroup/ios-dark.webp"
-    alt="DisclosureGroup expanded inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/disclosuregroup/ios-light.webp"
+  darkSource="/static/images/expo-ui/disclosuregroup/ios-dark.webp"
+  alt="DisclosureGroup expanded inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/divider.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/divider.mdx
index d511375821a28e..b9da647dc2ac8a 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/divider.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/divider.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Divider matches the official SwiftUI [Divider API](https://developer.apple.com/documentation/swiftui/divider) and creates a visual separator between content.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/divider/ios-light.webp"
-    darkSource="/static/images/expo-ui/divider/ios-dark.webp"
-    alt="Divider separating a heading from body text"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/divider/ios-light.webp"
+  darkSource="/static/images/expo-ui/divider/ios-dark.webp"
+  alt="Divider separating a heading from body text"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/form.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/form.mdx
index 818c413fb2e5ad..cacbbf879d6c4a 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/form.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/form.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Form matches the official SwiftUI [Form API](https://developer.apple.com/documentation/swiftui/form). It provides a container for grouping controls used for data entry, such as in settings or inspection panes.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/form/ios-light.webp"
-    darkSource="/static/images/expo-ui/form/ios-dark.webp"
-    alt="A Form with two grouped Sections of Toggles and a footer caption"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/form/ios-light.webp"
+  darkSource="/static/images/expo-ui/form/ios-dark.webp"
+  alt="A Form with two grouped Sections of Toggles and a footer caption"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/gauge.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/gauge.mdx
index c677a9ac1a08c4..cd7da2fa683d2e 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/gauge.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/gauge.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Gauge matches the official SwiftUI [Gauge API](https://developer.apple.com/documentation/swiftui/gauge) and supports styling via the [`gaugeStyle`](modifiers/#gaugestylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/gauge/ios-light.webp"
-    darkSource="/static/images/expo-ui/gauge/ios-dark.webp"
-    alt="Circular capacity Gauge showing 70%"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/gauge/ios-light.webp"
+  darkSource="/static/images/expo-ui/gauge/ios-dark.webp"
+  alt="Circular capacity Gauge showing 70%"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/group.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/group.mdx
index ce33d4c26b2a17..6cd4050aadc0a7 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/group.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/group.mdx
@@ -8,19 +8,9 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
 
 Expo UI Group matches the official SwiftUI [Group API](https://developer.apple.com/documentation/swiftui/group) and groups views together without introducing additional layout structure.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/group/ios-light.webp"
-    darkSource="/static/images/expo-ui/group/ios-dark.webp"
-    alt="Three text items rendered in blue bold via a single foregroundStyle modifier applied to a Group"
-    disableSrcSet
-  />
-</div>
-
 ## Installation
 
 <APIInstallSection />
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/hstack.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/hstack.mdx
index bcb48a8e107cac..0f16ad27747ce8 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/hstack.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/hstack.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI HStack matches the official SwiftUI [HStack API](https://developer.apple.com/documentation/swiftui/hstack) and arranges its children horizontally.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/hstack/ios-light.webp"
-    darkSource="/static/images/expo-ui/hstack/ios-dark.webp"
-    alt="Four numbered colored rounded squares arranged horizontally in an HStack"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/hstack/ios-light.webp"
+  darkSource="/static/images/expo-ui/hstack/ios-dark.webp"
+  alt="Four numbered colored rounded squares arranged horizontally in an HStack"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/image.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/image.mdx
index fd0fb44feb8f92..4279dbee9a7d4b 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/image.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/image.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Image displays SF Symbols using the SwiftUI [Image API](https://developer.apple.com/documentation/swiftui/image). SF Symbols are a library of configurable symbols provided by Apple.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/image/ios-light.webp"
-    darkSource="/static/images/expo-ui/image/ios-dark.webp"
-    alt="A row of colored SF Symbol images"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/image/ios-light.webp"
+  darkSource="/static/images/expo-ui/image/ios-dark.webp"
+  alt="A row of colored SF Symbol images"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx
index 824b7834c5f2a7..2096b4e29a7ff3 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Label matches the official SwiftUI [Label API](https://developer.apple.com/documentation/swiftui/label) and displays a title alongside an icon.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/label/ios-light.webp"
-    darkSource="/static/images/expo-ui/label/ios-dark.webp"
-    alt="Three Label rows with SF Symbols inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/label/ios-light.webp"
+  darkSource="/static/images/expo-ui/label/ios-dark.webp"
+  alt="Three Label rows with SF Symbols inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/link.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/link.mdx
index 7855d2b712f371..6bc52c93720f33 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/link.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/link.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Link matches the official SwiftUI [Link API](https://developer.apple.com/documentation/swiftui/link).
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/link/ios-light.webp"
-    darkSource="/static/images/expo-ui/link/ios-dark.webp"
-    alt="Three Link rows opening external URLs"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/link/ios-light.webp"
+  darkSource="/static/images/expo-ui/link/ios-dark.webp"
+  alt="Three Link rows opening external URLs"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/list.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/list.mdx
index 11bee532346722..2af64a0eb66606 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/list.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/list.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI List matches the official SwiftUI [List API](https://developer.apple.com/documentation/swiftui/list) and supports styling via the [`listStyle`](modifiers/#liststylestyle) modifier, various row/section modifiers, as well as selection, reordering, and editing capabilities.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/list/ios-light.webp"
-    darkSource="/static/images/expo-ui/list/ios-dark.webp"
-    alt="A List with Favorites and Recents sections, each row showing a colored SF Symbol icon and a label"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/list/ios-light.webp"
+  darkSource="/static/images/expo-ui/list/ios-dark.webp"
+  alt="A List with Favorites and Recents sections, each row showing a colored SF Symbol icon and a label"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/menu.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/menu.mdx
index 10b59def5254ba..2da22237d5725c 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/menu.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/menu.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Menu matches the official SwiftUI [Menu API](https://developer.apple.com/documentation/swiftui/menu) and supports styling via the [`buttonStyle`](modifiers/#buttonstylestyle) modifier. Menu opens on a single tap. For long-press interactions, use [`ContextMenu`](contextmenu) instead.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/menu/ios-light.webp"
-    darkSource="/static/images/expo-ui/menu/ios-dark.webp"
-    alt="Open Menu showing Settings, Profile and a destructive Delete item"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/menu/ios-light.webp"
+  darkSource="/static/images/expo-ui/menu/ios-dark.webp"
+  alt="Open Menu showing Settings, Profile and a destructive Delete item"
+/>
 
 > **Note:** On tvOS, Menu requires tvOS 17.0 or later.
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/overlay.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/overlay.mdx
index 81bd323851a1b7..f870f46a8f5809 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/overlay.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/overlay.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvOS', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Overlay matches the official SwiftUI [overlay](<https://developer.apple.com/documentation/swiftui/view/overlay(alignment:content:)>) modifier and provides a way to layer secondary content on top of a view, positioned with a specified alignment.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/overlay/ios-light.webp"
-    darkSource="/static/images/expo-ui/overlay/ios-dark.webp"
-    alt="A bell icon with a red 3 notification badge overlaid at the top-trailing corner"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/overlay/ios-light.webp"
+  darkSource="/static/images/expo-ui/overlay/ios-dark.webp"
+  alt="A bell icon with a red 3 notification badge overlaid at the top-trailing corner"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/picker.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/picker.mdx
index 41060ebb438968..d9179d99a41552 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/picker.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/picker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Picker matches the official SwiftUI [Picker API](https://developer.apple.com/documentation/swiftui/picker) and supports all picker styles via the [`pickerStyle`](modifiers/#pickerstylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/picker/ios-light.webp"
-    darkSource="/static/images/expo-ui/picker/ios-dark.webp"
-    alt="Menu-style Picker showing fruit options with the current selection checked"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/picker/ios-light.webp"
+  darkSource="/static/images/expo-ui/picker/ios-dark.webp"
+  alt="Menu-style Picker showing fruit options with the current selection checked"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/popover.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/popover.mdx
index 6e24c8b3d2ff8a..fc829acc352b84 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/popover.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/popover.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Popover matches the official SwiftUI [Popover API](<https://developer.apple.com/documentation/swiftui/view/popover(ispresented:attachmentanchor:arrowedge:content:)>) and provides a way to present content in a floating overlay anchored to a trigger element.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/popover/ios-light.webp"
-    darkSource="/static/images/expo-ui/popover/ios-dark.webp"
-    alt="Popover floating above its trigger button"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/popover/ios-light.webp"
+  darkSource="/static/images/expo-ui/popover/ios-dark.webp"
+  alt="Popover floating above its trigger button"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/progressview.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/progressview.mdx
index 1b7817d78a0ba8..cbe18d1e59b9b9 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/progressview.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/progressview.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ProgressView matches the official SwiftUI [ProgressView API](https://developer.apple.com/documentation/swiftui/progressview) and supports styling via the [`progressViewStyle`](modifiers/#progressviewstylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/progressview/ios-light.webp"
-    darkSource="/static/images/expo-ui/progressview/ios-dark.webp"
-    alt="Indeterminate spinner and a determinate ProgressView with a label"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/progressview/ios-light.webp"
+  darkSource="/static/images/expo-ui/progressview/ios-dark.webp"
+  alt="Indeterminate spinner and a determinate ProgressView with a label"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/scrollview.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/scrollview.mdx
index bba87442a39cd8..860396b0316851 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/scrollview.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/scrollview.mdx
@@ -8,19 +8,9 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
 
 Expo UI ScrollView matches the official SwiftUI [ScrollView API](https://developer.apple.com/documentation/swiftui/scrollview) and provides a scrollable container for its children.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/scrollview/ios-light.webp"
-    darkSource="/static/images/expo-ui/scrollview/ios-dark.webp"
-    alt="A horizontal ScrollView with colored Featured cards extending off the right edge"
-    disableSrcSet
-  />
-</div>
-
 ## Installation
 
 <APIInstallSection />
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/section.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/section.mdx
index 3b59105c76cc76..2303a0cc71d391 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/section.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/section.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Section matches the official SwiftUI [Section API](https://developer.apple.com/documentation/swiftui/section) and is used to group related content within [`List`](list), [`Form`](form) or [`Picker`](picker) components.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/section/ios-light.webp"
-    darkSource="/static/images/expo-ui/section/ios-dark.webp"
-    alt="Two Sections within a Form, each with a header and grouped Toggles"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/section/ios-light.webp"
+  darkSource="/static/images/expo-ui/section/ios-dark.webp"
+  alt="Two Sections within a Form, each with a header and grouped Toggles"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/securefield.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/securefield.mdx
index b2ffab241e288c..daf576aeedb631 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/securefield.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/securefield.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI SecureField matches the official SwiftUI [SecureField API](https://developer.apple.com/documentation/swiftui/securefield) and provides a text field that masks user input for passwords and other sensitive text.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/securefield/ios-light.webp"
-    darkSource="/static/images/expo-ui/securefield/ios-dark.webp"
-    alt="Three SecureField rows for changing a password"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/securefield/ios-light.webp"
+  darkSource="/static/images/expo-ui/securefield/ios-dark.webp"
+  alt="Three SecureField rows for changing a password"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/slider.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/slider.mdx
index b096864bdf9076..f48508d368155f 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/slider.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/slider.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Slider matches the official SwiftUI [Slider API](https://developer.apple.com/documentation/swiftui/slider) and allows selecting values from a bounded range.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/slider/ios-light.webp"
-    darkSource="/static/images/expo-ui/slider/ios-dark.webp"
-    alt="Slider with brightness icons on either side, in a Form section"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/slider/ios-light.webp"
+  darkSource="/static/images/expo-ui/slider/ios-dark.webp"
+  alt="Slider with brightness icons on either side, in a Form section"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/spacer.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/spacer.mdx
index 448b895a224532..ab0df47a53155c 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/spacer.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/spacer.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Spacer matches the official SwiftUI [Spacer API](https://developer.apple.com/documentation/swiftui/spacer) and expands to fill available space in a stack.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/spacer/ios-light.webp"
-    darkSource="/static/images/expo-ui/spacer/ios-dark.webp"
-    alt="A red A square at the leading edge and a blue B square at the trailing edge of an HStack, separated by a Spacer"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/spacer/ios-light.webp"
+  darkSource="/static/images/expo-ui/spacer/ios-dark.webp"
+  alt="A red A square at the leading edge and a blue B square at the trailing edge of an HStack, separated by a Spacer"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/tabview.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/tabview.mdx
index 062ede0d9ef456..f6717dcb65520c 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/tabview.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/tabview.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI TabView matches the official SwiftUI [TabView API](https://developer.apple.com/documentation/swiftui/tabview) and switches between styles via the [`tabViewStyle`](modifiers/#tabviewstyleconfig) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/tabview/ios-light.webp"
-    darkSource="/static/images/expo-ui/tabview/ios-dark.webp"
-    alt="A TabView with a bottom tab bar showing Home, Search, and Profile tabs in iOS 26 Liquid Glass style"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/tabview/ios-light.webp"
+  darkSource="/static/images/expo-ui/tabview/ios-dark.webp"
+  alt="A TabView with a bottom tab bar showing Home, Search, and Profile tabs in iOS 26 Liquid Glass style"
+/>
 
 > **Note:** For routed bottom-tab navigation across full-screen routes, use [expo-router/unstable-native-tabs`](/router/advanced/native-tabs/) instead.
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/text.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/text.mdx
index 9ba0fd860f7988..10871590ba157c 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/text.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/text.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Text matches the official SwiftUI [Text API](https://developer.apple.com/documentation/swiftui/text).
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/text/ios-light.webp"
-    darkSource="/static/images/expo-ui/text/ios-dark.webp"
-    alt="Text rendered with different font sizes, weights, and a hierarchical secondary style"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/text/ios-light.webp"
+  darkSource="/static/images/expo-ui/text/ios-dark.webp"
+  alt="Text rendered with different font sizes, weights, and a hierarchical secondary style"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/textfield.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/textfield.mdx
index e87c5e5bf25107..7dd6e92b4721fb 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/textfield.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/textfield.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI TextField matches the official SwiftUI [TextField API](https://developer.apple.com/documentation/swiftui/textfield) and supports single-line and multiline input, keyboard configuration, submit handling, and an imperative `ref` for programmatic control.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/textfield/ios-light.webp"
-    darkSource="/static/images/expo-ui/textfield/ios-dark.webp"
-    alt="TextField and SecureField inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/textfield/ios-light.webp"
+  darkSource="/static/images/expo-ui/textfield/ios-dark.webp"
+  alt="TextField and SecureField inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/toggle.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/toggle.mdx
index 330905081bd2ad..af104af2faf538 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/toggle.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/toggle.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Toggle matches the official SwiftUI [Toggle API](https://developer.apple.com/documentation/swiftui/toggle) and supports styling via the [`toggleStyle`](modifiers/#togglestylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/toggle/ios-light.webp"
-    darkSource="/static/images/expo-ui/toggle/ios-dark.webp"
-    alt="Toggle rows inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/toggle/ios-light.webp"
+  darkSource="/static/images/expo-ui/toggle/ios-dark.webp"
+  alt="Toggle rows inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/vstack.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/vstack.mdx
index 2a9bb3bc1cd58a..3d22caf8380095 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/vstack.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/vstack.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI VStack matches the official SwiftUI [VStack API](https://developer.apple.com/documentation/swiftui/vstack) and arranges its children vertically.
 
-<div className="mx-auto max-w-[200px]">
-  <Diagram
-    source="/static/images/expo-ui/vstack/ios-light.webp"
-    darkSource="/static/images/expo-ui/vstack/ios-dark.webp"
-    alt="Four numbered colored rounded squares stacked vertically in a VStack"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/vstack/ios-light.webp"
+  darkSource="/static/images/expo-ui/vstack/ios-dark.webp"
+  alt="Four numbered colored rounded squares stacked vertically in a VStack"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/zstack.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/zstack.mdx
index fd570748f029fd..698de635252589 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/zstack.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/zstack.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ZStack matches the official SwiftUI [ZStack API](https://developer.apple.com/documentation/swiftui/zstack) and overlays its children on top of each other.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/zstack/ios-light.webp"
-    darkSource="/static/images/expo-ui/zstack/ios-dark.webp"
-    alt="Three colored rounded squares stacked along the z-axis with diagonal offsets in a ZStack"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/zstack/ios-light.webp"
+  darkSource="/static/images/expo-ui/zstack/ios-dark.webp"
+  alt="Three colored rounded squares stacked along the z-axis with diagonal offsets in a ZStack"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/bottomsheet.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/bottomsheet.mdx
index 1209871f4911f4..224f4b1d94f66d 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/bottomsheet.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/bottomsheet.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI BottomSheet matches the official SwiftUI [sheet API](<https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)>) and presents content from the bottom of the screen.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/bottomsheet/ios-light.webp"
-    darkSource="/static/images/expo-ui/bottomsheet/ios-dark.webp"
-    alt="A BottomSheet at medium detent showing a Sort By list with Most Recent selected"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/bottomsheet/ios-light.webp"
+  darkSource="/static/images/expo-ui/bottomsheet/ios-dark.webp"
+  alt="A BottomSheet at medium detent showing a Sort By list with Most Recent selected"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/button.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/button.mdx
index dccab2cc435c1b..d2d195844abb0e 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/button.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/button.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Button matches the official SwiftUI [Button API](https://developer.apple.com/documentation/swiftui/button) and supports styling via the [`buttonStyle`](modifiers/#buttonstylestyle), [`controlSize`](modifiers/#controlsizesize), and other modifiers.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/button/ios-light.webp"
-    darkSource="/static/images/expo-ui/button/ios-dark.webp"
-    alt="Two iOS 26 Liquid Glass buttons — a glassProminent Get started above a glass Learn more"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/button/ios-light.webp"
+  darkSource="/static/images/expo-ui/button/ios-dark.webp"
+  alt="Two iOS 26 Liquid Glass buttons — a glassProminent Get started above a glass Learn more"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/colorpicker.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/colorpicker.mdx
index 4afa687bbd82d5..74dd9c0019c643 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/colorpicker.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/colorpicker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ColorPicker matches the official SwiftUI [ColorPicker API](https://developer.apple.com/documentation/swiftui/colorpicker) and allows app users to select colors from a palette.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/colorpicker/ios-light.webp"
-    darkSource="/static/images/expo-ui/colorpicker/ios-dark.webp"
-    alt="ColorPicker row inside a Form, showing the current color swatch"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/colorpicker/ios-light.webp"
+  darkSource="/static/images/expo-ui/colorpicker/ios-dark.webp"
+  alt="ColorPicker row inside a Form, showing the current color swatch"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/confirmationdialog.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/confirmationdialog.mdx
index cc05d58a8edfdf..389e57bf122490 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/confirmationdialog.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/confirmationdialog.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ConfirmationDialog matches the official SwiftUI [confirmationDialog API](<https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:actions:message:)>) and presents an action sheet-style dialog with a title, actions, and an optional message.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/confirmationdialog/ios-light.webp"
-    darkSource="/static/images/expo-ui/confirmationdialog/ios-dark.webp"
-    alt="ConfirmationDialog asking the user to confirm a destructive action"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/confirmationdialog/ios-light.webp"
+  darkSource="/static/images/expo-ui/confirmationdialog/ios-dark.webp"
+  alt="ConfirmationDialog asking the user to confirm a destructive action"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/contextmenu.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/contextmenu.mdx
index a7fdddb2d33233..774345db45e30c 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/contextmenu.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/contextmenu.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ContextMenu matches the official SwiftUI [contextMenu API](<https://developer.apple.com/documentation/swiftui/view/contextmenu(menuitems:)>) and displays a menu when long-pressed. For single-tap menu interactions, use [`Menu`](menu) instead.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/contextmenu/ios-light.webp"
-    darkSource="/static/images/expo-ui/contextmenu/ios-dark.webp"
-    alt="A long-pressed tile shown as an enlarged preview with a Share, Favorite, Delete menu beneath it"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/contextmenu/ios-light.webp"
+  darkSource="/static/images/expo-ui/contextmenu/ios-dark.webp"
+  alt="A long-pressed tile shown as an enlarged preview with a Share, Favorite, Delete menu beneath it"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/controlgroup.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/controlgroup.mdx
index 22fdd7325dcf88..f79e17cb533f23 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/controlgroup.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/controlgroup.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ControlGroup matches the official SwiftUI [ControlGroup API](https://developer.apple.com/documentation/swiftui/controlgroup). When placed inside a [`Menu`](menu), the children are rendered as a compact horizontal row of buttons.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/controlgroup/ios-light.webp"
-    darkSource="/static/images/expo-ui/controlgroup/ios-dark.webp"
-    alt="An open Menu showing a ControlGroup row of Add, Favorite, Share icon buttons above Rename and Delete entries"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/controlgroup/ios-light.webp"
+  darkSource="/static/images/expo-ui/controlgroup/ios-dark.webp"
+  alt="An open Menu showing a ControlGroup row of Add, Favorite, Share icon buttons above Rename and Delete entries"
+/>
 
 > **Note:** On tvOS, `ControlGroup` requires tvOS 17.0 or later.
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/datepicker.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/datepicker.mdx
index ec42b408b5c7cb..663d1ff86d840c 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/datepicker.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/datepicker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI DatePicker matches the official SwiftUI [DatePicker API](https://developer.apple.com/documentation/swiftui/datepicker) and supports styling via the [`datePickerStyle`](modifiers/#datepickerstylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/datepicker/ios-light.webp"
-    darkSource="/static/images/expo-ui/datepicker/ios-dark.webp"
-    alt="Date and time DatePicker rows inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/datepicker/ios-light.webp"
+  darkSource="/static/images/expo-ui/datepicker/ios-dark.webp"
+  alt="Date and time DatePicker rows inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/disclosuregroup.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/disclosuregroup.mdx
index 50401ddeef0d72..13645e08ae0a75 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/disclosuregroup.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/disclosuregroup.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI DisclosureGroup matches the official SwiftUI [DisclosureGroup API](https://developer.apple.com/documentation/swiftui/disclosuregroup) and displays a disclosure indicator that reveals or hides content.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/disclosuregroup/ios-light.webp"
-    darkSource="/static/images/expo-ui/disclosuregroup/ios-dark.webp"
-    alt="DisclosureGroup expanded inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/disclosuregroup/ios-light.webp"
+  darkSource="/static/images/expo-ui/disclosuregroup/ios-dark.webp"
+  alt="DisclosureGroup expanded inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/divider.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/divider.mdx
index 9eb4c2c331f11a..d7e5cffd6f2d39 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/divider.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/divider.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Divider matches the official SwiftUI [Divider API](https://developer.apple.com/documentation/swiftui/divider) and creates a visual separator between content.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/divider/ios-light.webp"
-    darkSource="/static/images/expo-ui/divider/ios-dark.webp"
-    alt="Divider separating a heading from body text"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/divider/ios-light.webp"
+  darkSource="/static/images/expo-ui/divider/ios-dark.webp"
+  alt="Divider separating a heading from body text"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/form.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/form.mdx
index c3c7a501ba9ca7..2a2e4e22cf6807 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/form.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/form.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Form matches the official SwiftUI [Form API](https://developer.apple.com/documentation/swiftui/form). It provides a container for grouping controls used for data entry, such as in settings or inspection panes.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/form/ios-light.webp"
-    darkSource="/static/images/expo-ui/form/ios-dark.webp"
-    alt="A Form with two grouped Sections of Toggles and a footer caption"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/form/ios-light.webp"
+  darkSource="/static/images/expo-ui/form/ios-dark.webp"
+  alt="A Form with two grouped Sections of Toggles and a footer caption"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/gauge.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/gauge.mdx
index 28b8b11206d7fb..415bf3d2a7a807 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/gauge.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/gauge.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Gauge matches the official SwiftUI [Gauge API](https://developer.apple.com/documentation/swiftui/gauge) and supports styling via the [`gaugeStyle`](modifiers/#gaugestylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/gauge/ios-light.webp"
-    darkSource="/static/images/expo-ui/gauge/ios-dark.webp"
-    alt="Circular capacity Gauge showing 70%"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/gauge/ios-light.webp"
+  darkSource="/static/images/expo-ui/gauge/ios-dark.webp"
+  alt="Circular capacity Gauge showing 70%"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/group.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/group.mdx
index 5a24f8aaf6b7c3..a330aa6fb8989c 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/group.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/group.mdx
@@ -8,19 +8,9 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
 
 Expo UI Group matches the official SwiftUI [Group API](https://developer.apple.com/documentation/swiftui/group) and groups views together without introducing additional layout structure.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/group/ios-light.webp"
-    darkSource="/static/images/expo-ui/group/ios-dark.webp"
-    alt="Three text items rendered in blue bold via a single foregroundStyle modifier applied to a Group"
-    disableSrcSet
-  />
-</div>
-
 ## Installation
 
 <APIInstallSection />
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/hstack.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/hstack.mdx
index ab30d279c4bb0e..7dac89e22406aa 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/hstack.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/hstack.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI HStack matches the official SwiftUI [HStack API](https://developer.apple.com/documentation/swiftui/hstack) and arranges its children horizontally.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/hstack/ios-light.webp"
-    darkSource="/static/images/expo-ui/hstack/ios-dark.webp"
-    alt="Four numbered colored rounded squares arranged horizontally in an HStack"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/hstack/ios-light.webp"
+  darkSource="/static/images/expo-ui/hstack/ios-dark.webp"
+  alt="Four numbered colored rounded squares arranged horizontally in an HStack"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/image.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/image.mdx
index df9a93c8650f9d..9783f4106f4b1a 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/image.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/image.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Image displays SF Symbols using the SwiftUI [Image API](https://developer.apple.com/documentation/swiftui/image). SF Symbols are a library of configurable symbols provided by Apple.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/image/ios-light.webp"
-    darkSource="/static/images/expo-ui/image/ios-dark.webp"
-    alt="A row of colored SF Symbol images"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/image/ios-light.webp"
+  darkSource="/static/images/expo-ui/image/ios-dark.webp"
+  alt="A row of colored SF Symbol images"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/label.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/label.mdx
index b425c5a9c130cb..c4e65e48f16ea0 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/label.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/label.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Label matches the official SwiftUI [Label API](https://developer.apple.com/documentation/swiftui/label) and displays a title alongside an icon.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/label/ios-light.webp"
-    darkSource="/static/images/expo-ui/label/ios-dark.webp"
-    alt="Three Label rows with SF Symbols inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/label/ios-light.webp"
+  darkSource="/static/images/expo-ui/label/ios-dark.webp"
+  alt="Three Label rows with SF Symbols inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/link.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/link.mdx
index 782ea74032ef4a..f9aea454be9e8b 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/link.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/link.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Link matches the official SwiftUI [Link API](https://developer.apple.com/documentation/swiftui/link).
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/link/ios-light.webp"
-    darkSource="/static/images/expo-ui/link/ios-dark.webp"
-    alt="Three Link rows opening external URLs"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/link/ios-light.webp"
+  darkSource="/static/images/expo-ui/link/ios-dark.webp"
+  alt="Three Link rows opening external URLs"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/list.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/list.mdx
index 630841bde7a69e..55f5e0f2cd4c01 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/list.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/list.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI List matches the official SwiftUI [List API](https://developer.apple.com/documentation/swiftui/list) and supports styling via the [`listStyle`](modifiers/#liststylestyle) modifier, various row/section modifiers, as well as selection, reordering, and editing capabilities.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/list/ios-light.webp"
-    darkSource="/static/images/expo-ui/list/ios-dark.webp"
-    alt="A List with Favorites and Recents sections, each row showing a colored SF Symbol icon and a label"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/list/ios-light.webp"
+  darkSource="/static/images/expo-ui/list/ios-dark.webp"
+  alt="A List with Favorites and Recents sections, each row showing a colored SF Symbol icon and a label"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/menu.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/menu.mdx
index 14c83e61d2172d..e679d234f09a91 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/menu.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/menu.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Menu matches the official SwiftUI [Menu API](https://developer.apple.com/documentation/swiftui/menu) and supports styling via the [`buttonStyle`](modifiers/#buttonstylestyle) modifier. Menu opens on a single tap. For long-press interactions, use [`ContextMenu`](contextmenu) instead.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/menu/ios-light.webp"
-    darkSource="/static/images/expo-ui/menu/ios-dark.webp"
-    alt="Open Menu showing Settings, Profile and a destructive Delete item"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/menu/ios-light.webp"
+  darkSource="/static/images/expo-ui/menu/ios-dark.webp"
+  alt="Open Menu showing Settings, Profile and a destructive Delete item"
+/>
 
 > **Note:** On tvOS, Menu requires tvOS 17.0 or later.
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/overlay.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/overlay.mdx
index f85820d26d61dc..4d7449e0406fe0 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/overlay.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/overlay.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvOS', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Overlay matches the official SwiftUI [overlay](<https://developer.apple.com/documentation/swiftui/view/overlay(alignment:content:)>) modifier and provides a way to layer secondary content on top of a view, positioned with a specified alignment.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/overlay/ios-light.webp"
-    darkSource="/static/images/expo-ui/overlay/ios-dark.webp"
-    alt="A bell icon with a red 3 notification badge overlaid at the top-trailing corner"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/overlay/ios-light.webp"
+  darkSource="/static/images/expo-ui/overlay/ios-dark.webp"
+  alt="A bell icon with a red 3 notification badge overlaid at the top-trailing corner"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/picker.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/picker.mdx
index 946fcd019d0c33..8f0c7230d71e79 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/picker.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/picker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Picker matches the official SwiftUI [Picker API](https://developer.apple.com/documentation/swiftui/picker) and supports all picker styles via the [`pickerStyle`](modifiers/#pickerstylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/picker/ios-light.webp"
-    darkSource="/static/images/expo-ui/picker/ios-dark.webp"
-    alt="Menu-style Picker showing fruit options with the current selection checked"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/picker/ios-light.webp"
+  darkSource="/static/images/expo-ui/picker/ios-dark.webp"
+  alt="Menu-style Picker showing fruit options with the current selection checked"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/popover.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/popover.mdx
index 8d3d07e90e171a..6794c27acc7942 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/popover.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/popover.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Popover matches the official SwiftUI [Popover API](<https://developer.apple.com/documentation/swiftui/view/popover(ispresented:attachmentanchor:arrowedge:content:)>) and provides a way to present content in a floating overlay anchored to a trigger element.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/popover/ios-light.webp"
-    darkSource="/static/images/expo-ui/popover/ios-dark.webp"
-    alt="Popover floating above its trigger button"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/popover/ios-light.webp"
+  darkSource="/static/images/expo-ui/popover/ios-dark.webp"
+  alt="Popover floating above its trigger button"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/progressview.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/progressview.mdx
index 8a8615624f1fe6..9c254584b3a5de 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/progressview.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/progressview.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ProgressView matches the official SwiftUI [ProgressView API](https://developer.apple.com/documentation/swiftui/progressview) and supports styling via the [`progressViewStyle`](modifiers/#progressviewstylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/progressview/ios-light.webp"
-    darkSource="/static/images/expo-ui/progressview/ios-dark.webp"
-    alt="Indeterminate spinner and a determinate ProgressView with a label"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/progressview/ios-light.webp"
+  darkSource="/static/images/expo-ui/progressview/ios-dark.webp"
+  alt="Indeterminate spinner and a determinate ProgressView with a label"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/scrollview.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/scrollview.mdx
index b69b27b2c85b01..2aae9c114c6957 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/scrollview.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/scrollview.mdx
@@ -8,19 +8,9 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
 
 Expo UI ScrollView matches the official SwiftUI [ScrollView API](https://developer.apple.com/documentation/swiftui/scrollview) and provides a scrollable container for its children.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/scrollview/ios-light.webp"
-    darkSource="/static/images/expo-ui/scrollview/ios-dark.webp"
-    alt="A horizontal ScrollView with colored Featured cards extending off the right edge"
-    disableSrcSet
-  />
-</div>
-
 ## Installation
 
 <APIInstallSection />
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/section.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/section.mdx
index 7d51e726658698..d01b2e8dbb2fa1 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/section.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/section.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Section matches the official SwiftUI [Section API](https://developer.apple.com/documentation/swiftui/section) and is used to group related content within [`List`](list), [`Form`](form) or [`Picker`](picker) components.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/section/ios-light.webp"
-    darkSource="/static/images/expo-ui/section/ios-dark.webp"
-    alt="Two Sections within a Form, each with a header and grouped Toggles"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/section/ios-light.webp"
+  darkSource="/static/images/expo-ui/section/ios-dark.webp"
+  alt="Two Sections within a Form, each with a header and grouped Toggles"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/securefield.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/securefield.mdx
index 300025663d8409..01a96f877ba8b9 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/securefield.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/securefield.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI SecureField matches the official SwiftUI [SecureField API](https://developer.apple.com/documentation/swiftui/securefield) and provides a text field that masks user input for passwords and other sensitive text.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/securefield/ios-light.webp"
-    darkSource="/static/images/expo-ui/securefield/ios-dark.webp"
-    alt="Three SecureField rows for changing a password"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/securefield/ios-light.webp"
+  darkSource="/static/images/expo-ui/securefield/ios-dark.webp"
+  alt="Three SecureField rows for changing a password"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/slider.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/slider.mdx
index a7986c87cf7eae..2864d491ce71ab 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/slider.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/slider.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Slider matches the official SwiftUI [Slider API](https://developer.apple.com/documentation/swiftui/slider) and allows selecting values from a bounded range.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/slider/ios-light.webp"
-    darkSource="/static/images/expo-ui/slider/ios-dark.webp"
-    alt="Slider with brightness icons on either side, in a Form section"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/slider/ios-light.webp"
+  darkSource="/static/images/expo-ui/slider/ios-dark.webp"
+  alt="Slider with brightness icons on either side, in a Form section"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/spacer.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/spacer.mdx
index 090f38d5c10ca9..f19c1a50a12f17 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/spacer.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/spacer.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Spacer matches the official SwiftUI [Spacer API](https://developer.apple.com/documentation/swiftui/spacer) and expands to fill available space in a stack.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/spacer/ios-light.webp"
-    darkSource="/static/images/expo-ui/spacer/ios-dark.webp"
-    alt="A red A square at the leading edge and a blue B square at the trailing edge of an HStack, separated by a Spacer"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/spacer/ios-light.webp"
+  darkSource="/static/images/expo-ui/spacer/ios-dark.webp"
+  alt="A red A square at the leading edge and a blue B square at the trailing edge of an HStack, separated by a Spacer"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/tabview.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/tabview.mdx
index d85fb16ce06192..b6c56aef1599c1 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/tabview.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/tabview.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI TabView matches the official SwiftUI [TabView API](https://developer.apple.com/documentation/swiftui/tabview) and switches between styles via the [`tabViewStyle`](modifiers/#tabviewstyleconfig) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/tabview/ios-light.webp"
-    darkSource="/static/images/expo-ui/tabview/ios-dark.webp"
-    alt="A TabView with a bottom tab bar showing Home, Search, and Profile tabs in iOS 26 Liquid Glass style"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/tabview/ios-light.webp"
+  darkSource="/static/images/expo-ui/tabview/ios-dark.webp"
+  alt="A TabView with a bottom tab bar showing Home, Search, and Profile tabs in iOS 26 Liquid Glass style"
+/>
 
 > **Note:** For routed bottom-tab navigation across full-screen routes, use [expo-router/unstable-native-tabs`](/router/advanced/native-tabs/) instead.
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/text.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/text.mdx
index 8df56627049732..dbe96c8c50675f 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/text.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/text.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Text matches the official SwiftUI [Text API](https://developer.apple.com/documentation/swiftui/text).
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/text/ios-light.webp"
-    darkSource="/static/images/expo-ui/text/ios-dark.webp"
-    alt="Text rendered with different font sizes, weights, and a hierarchical secondary style"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/text/ios-light.webp"
+  darkSource="/static/images/expo-ui/text/ios-dark.webp"
+  alt="Text rendered with different font sizes, weights, and a hierarchical secondary style"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/textfield.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/textfield.mdx
index 90d9de3fc256c6..bb3ccfe2f4be58 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/textfield.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/textfield.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI TextField matches the official SwiftUI [TextField API](https://developer.apple.com/documentation/swiftui/textfield) and supports single-line and multiline input, keyboard configuration, submit handling, and an imperative `ref` for programmatic control.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/textfield/ios-light.webp"
-    darkSource="/static/images/expo-ui/textfield/ios-dark.webp"
-    alt="TextField and SecureField inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/textfield/ios-light.webp"
+  darkSource="/static/images/expo-ui/textfield/ios-dark.webp"
+  alt="TextField and SecureField inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/toggle.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/toggle.mdx
index ac5d04a7cbfd13..bd0335dca32516 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/toggle.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/toggle.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Toggle matches the official SwiftUI [Toggle API](https://developer.apple.com/documentation/swiftui/toggle) and supports styling via the [`toggleStyle`](modifiers/#togglestylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/toggle/ios-light.webp"
-    darkSource="/static/images/expo-ui/toggle/ios-dark.webp"
-    alt="Toggle rows inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/toggle/ios-light.webp"
+  darkSource="/static/images/expo-ui/toggle/ios-dark.webp"
+  alt="Toggle rows inside a Form"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/vstack.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/vstack.mdx
index 002f8709030e83..7e14dd6d80a6c5 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/vstack.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/vstack.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI VStack matches the official SwiftUI [VStack API](https://developer.apple.com/documentation/swiftui/vstack) and arranges its children vertically.
 
-<div className="mx-auto max-w-[200px]">
-  <Diagram
-    source="/static/images/expo-ui/vstack/ios-light.webp"
-    darkSource="/static/images/expo-ui/vstack/ios-dark.webp"
-    alt="Four numbered colored rounded squares stacked vertically in a VStack"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/vstack/ios-light.webp"
+  darkSource="/static/images/expo-ui/vstack/ios-dark.webp"
+  alt="Four numbered colored rounded squares stacked vertically in a VStack"
+/>
 
 ## Installation
 
diff --git a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/zstack.mdx b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/zstack.mdx
index 9d14202aee3f3a..10b217be90bbf0 100644
--- a/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/zstack.mdx
+++ b/docs/pages/versions/v56.0.0/sdk/ui/swift-ui/zstack.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ZStack matches the official SwiftUI [ZStack API](https://developer.apple.com/documentation/swiftui/zstack) and overlays its children on top of each other.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/zstack/ios-light.webp"
-    darkSource="/static/images/expo-ui/zstack/ios-dark.webp"
-    alt="Three colored rounded squares stacked along the z-axis with diagonal offsets in a ZStack"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/zstack/ios-light.webp"
+  darkSource="/static/images/expo-ui/zstack/ios-dark.webp"
+  alt="Three colored rounded squares stacked along the z-axis with diagonal offsets in a ZStack"
+/>
 
 ## Installation
 
diff --git a/docs/public/static/images/expo-ui/bottomsheet/ios-dark.webp b/docs/public/static/images/expo-ui/bottomsheet/ios-dark.webp
index 0d3c7b30a9799e..bf28465e042bce 100644
Binary files a/docs/public/static/images/expo-ui/bottomsheet/ios-dark.webp and b/docs/public/static/images/expo-ui/bottomsheet/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/bottomsheet/ios-light.webp b/docs/public/static/images/expo-ui/bottomsheet/ios-light.webp
index 323407ac710bb7..1560c9668095b2 100644
Binary files a/docs/public/static/images/expo-ui/bottomsheet/ios-light.webp and b/docs/public/static/images/expo-ui/bottomsheet/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/button/ios-dark.webp b/docs/public/static/images/expo-ui/button/ios-dark.webp
index c5c6c93006899f..149c70c985ad9c 100644
Binary files a/docs/public/static/images/expo-ui/button/ios-dark.webp and b/docs/public/static/images/expo-ui/button/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/button/ios-light.webp b/docs/public/static/images/expo-ui/button/ios-light.webp
index 51e1644c6f2355..90692a9b5604f9 100644
Binary files a/docs/public/static/images/expo-ui/button/ios-light.webp and b/docs/public/static/images/expo-ui/button/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/colorpicker/ios-dark.webp b/docs/public/static/images/expo-ui/colorpicker/ios-dark.webp
index 498213ef6b0f95..778dc366962574 100644
Binary files a/docs/public/static/images/expo-ui/colorpicker/ios-dark.webp and b/docs/public/static/images/expo-ui/colorpicker/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/colorpicker/ios-light.webp b/docs/public/static/images/expo-ui/colorpicker/ios-light.webp
index a78306f4d9df1b..50800910058933 100644
Binary files a/docs/public/static/images/expo-ui/colorpicker/ios-light.webp and b/docs/public/static/images/expo-ui/colorpicker/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/confirmationdialog/ios-dark.webp b/docs/public/static/images/expo-ui/confirmationdialog/ios-dark.webp
index d5348af987db17..3565413b0a6a6d 100644
Binary files a/docs/public/static/images/expo-ui/confirmationdialog/ios-dark.webp and b/docs/public/static/images/expo-ui/confirmationdialog/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/confirmationdialog/ios-light.webp b/docs/public/static/images/expo-ui/confirmationdialog/ios-light.webp
index 8355e4ea6cf19a..af067fd430a815 100644
Binary files a/docs/public/static/images/expo-ui/confirmationdialog/ios-light.webp and b/docs/public/static/images/expo-ui/confirmationdialog/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/contextmenu/ios-dark.webp b/docs/public/static/images/expo-ui/contextmenu/ios-dark.webp
index ae5b927dac3d8b..1f59ec3fe47e50 100644
Binary files a/docs/public/static/images/expo-ui/contextmenu/ios-dark.webp and b/docs/public/static/images/expo-ui/contextmenu/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/contextmenu/ios-light.webp b/docs/public/static/images/expo-ui/contextmenu/ios-light.webp
index e068ee3b0cbf5b..0a914451e7e9ce 100644
Binary files a/docs/public/static/images/expo-ui/contextmenu/ios-light.webp and b/docs/public/static/images/expo-ui/contextmenu/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/controlgroup/ios-dark.webp b/docs/public/static/images/expo-ui/controlgroup/ios-dark.webp
index e9f5dce472a96f..49d7498ffc0b47 100644
Binary files a/docs/public/static/images/expo-ui/controlgroup/ios-dark.webp and b/docs/public/static/images/expo-ui/controlgroup/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/controlgroup/ios-light.webp b/docs/public/static/images/expo-ui/controlgroup/ios-light.webp
index 9cf18eebe0806d..d6373316acbada 100644
Binary files a/docs/public/static/images/expo-ui/controlgroup/ios-light.webp and b/docs/public/static/images/expo-ui/controlgroup/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/datepicker/ios-dark.webp b/docs/public/static/images/expo-ui/datepicker/ios-dark.webp
index 66e94013cb59c9..42843eaf3d760a 100644
Binary files a/docs/public/static/images/expo-ui/datepicker/ios-dark.webp and b/docs/public/static/images/expo-ui/datepicker/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/datepicker/ios-light.webp b/docs/public/static/images/expo-ui/datepicker/ios-light.webp
index c126d5c3152974..0f91014d743f66 100644
Binary files a/docs/public/static/images/expo-ui/datepicker/ios-light.webp and b/docs/public/static/images/expo-ui/datepicker/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/disclosuregroup/ios-dark.webp b/docs/public/static/images/expo-ui/disclosuregroup/ios-dark.webp
index 6ac252c7e14e54..9179131cf4cc9b 100644
Binary files a/docs/public/static/images/expo-ui/disclosuregroup/ios-dark.webp and b/docs/public/static/images/expo-ui/disclosuregroup/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/disclosuregroup/ios-light.webp b/docs/public/static/images/expo-ui/disclosuregroup/ios-light.webp
index 06d85bf3e3c1ef..01cc2d80476bed 100644
Binary files a/docs/public/static/images/expo-ui/disclosuregroup/ios-light.webp and b/docs/public/static/images/expo-ui/disclosuregroup/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/divider/ios-dark.webp b/docs/public/static/images/expo-ui/divider/ios-dark.webp
index d7df206c779e42..aac5e5661a0cf0 100644
Binary files a/docs/public/static/images/expo-ui/divider/ios-dark.webp and b/docs/public/static/images/expo-ui/divider/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/divider/ios-light.webp b/docs/public/static/images/expo-ui/divider/ios-light.webp
index c88fa607cecf16..00b83f7895759c 100644
Binary files a/docs/public/static/images/expo-ui/divider/ios-light.webp and b/docs/public/static/images/expo-ui/divider/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/form/ios-dark.webp b/docs/public/static/images/expo-ui/form/ios-dark.webp
index d34a311207b31f..08f5b15bce5c91 100644
Binary files a/docs/public/static/images/expo-ui/form/ios-dark.webp and b/docs/public/static/images/expo-ui/form/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/form/ios-light.webp b/docs/public/static/images/expo-ui/form/ios-light.webp
index 2114d7cfea5662..1d3c039a53ad7f 100644
Binary files a/docs/public/static/images/expo-ui/form/ios-light.webp and b/docs/public/static/images/expo-ui/form/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/gauge/ios-dark.webp b/docs/public/static/images/expo-ui/gauge/ios-dark.webp
index f36546f74e5ee8..475d5843bcdecc 100644
Binary files a/docs/public/static/images/expo-ui/gauge/ios-dark.webp and b/docs/public/static/images/expo-ui/gauge/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/gauge/ios-light.webp b/docs/public/static/images/expo-ui/gauge/ios-light.webp
index 9de07c29960c0f..1b5f86c0644693 100644
Binary files a/docs/public/static/images/expo-ui/gauge/ios-light.webp and b/docs/public/static/images/expo-ui/gauge/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/group/ios-dark.webp b/docs/public/static/images/expo-ui/group/ios-dark.webp
deleted file mode 100644
index 685dbfcf048675..00000000000000
Binary files a/docs/public/static/images/expo-ui/group/ios-dark.webp and /dev/null differ
diff --git a/docs/public/static/images/expo-ui/group/ios-light.webp b/docs/public/static/images/expo-ui/group/ios-light.webp
deleted file mode 100644
index d7b2c521394e68..00000000000000
Binary files a/docs/public/static/images/expo-ui/group/ios-light.webp and /dev/null differ
diff --git a/docs/public/static/images/expo-ui/hstack/ios-dark.webp b/docs/public/static/images/expo-ui/hstack/ios-dark.webp
index 4cb4cb48a4483d..ba94a3494fd513 100644
Binary files a/docs/public/static/images/expo-ui/hstack/ios-dark.webp and b/docs/public/static/images/expo-ui/hstack/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/hstack/ios-light.webp b/docs/public/static/images/expo-ui/hstack/ios-light.webp
index 9085637670e685..2d9db97adb31a8 100644
Binary files a/docs/public/static/images/expo-ui/hstack/ios-light.webp and b/docs/public/static/images/expo-ui/hstack/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/image/ios-dark.webp b/docs/public/static/images/expo-ui/image/ios-dark.webp
index 870042b9fce5d2..9323562835c985 100644
Binary files a/docs/public/static/images/expo-ui/image/ios-dark.webp and b/docs/public/static/images/expo-ui/image/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/image/ios-light.webp b/docs/public/static/images/expo-ui/image/ios-light.webp
index 5e598e94c97247..30971034e64b58 100644
Binary files a/docs/public/static/images/expo-ui/image/ios-light.webp and b/docs/public/static/images/expo-ui/image/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/label/ios-dark.webp b/docs/public/static/images/expo-ui/label/ios-dark.webp
index e062dbaaf67d60..d7092d02f0a7e5 100644
Binary files a/docs/public/static/images/expo-ui/label/ios-dark.webp and b/docs/public/static/images/expo-ui/label/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/label/ios-light.webp b/docs/public/static/images/expo-ui/label/ios-light.webp
index 2b6979dd7620e3..87b3c755e9a694 100644
Binary files a/docs/public/static/images/expo-ui/label/ios-light.webp and b/docs/public/static/images/expo-ui/label/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/link/ios-dark.webp b/docs/public/static/images/expo-ui/link/ios-dark.webp
index b94ac0dba3ba15..7389ab1c11b1e2 100644
Binary files a/docs/public/static/images/expo-ui/link/ios-dark.webp and b/docs/public/static/images/expo-ui/link/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/link/ios-light.webp b/docs/public/static/images/expo-ui/link/ios-light.webp
index c549ecd6becc73..ff64f856f6952d 100644
Binary files a/docs/public/static/images/expo-ui/link/ios-light.webp and b/docs/public/static/images/expo-ui/link/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/list/ios-dark.webp b/docs/public/static/images/expo-ui/list/ios-dark.webp
index 62a46e4480d71e..ae9b6a66e084c6 100644
Binary files a/docs/public/static/images/expo-ui/list/ios-dark.webp and b/docs/public/static/images/expo-ui/list/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/list/ios-light.webp b/docs/public/static/images/expo-ui/list/ios-light.webp
index 98d7da7d5155d7..a7b482870d69aa 100644
Binary files a/docs/public/static/images/expo-ui/list/ios-light.webp and b/docs/public/static/images/expo-ui/list/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/menu/ios-dark.webp b/docs/public/static/images/expo-ui/menu/ios-dark.webp
index d6049a0f2ed46c..0aed9bab4f7317 100644
Binary files a/docs/public/static/images/expo-ui/menu/ios-dark.webp and b/docs/public/static/images/expo-ui/menu/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/menu/ios-light.webp b/docs/public/static/images/expo-ui/menu/ios-light.webp
index d00df5253931f2..5951e629f0340b 100644
Binary files a/docs/public/static/images/expo-ui/menu/ios-light.webp and b/docs/public/static/images/expo-ui/menu/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/overlay/ios-dark.webp b/docs/public/static/images/expo-ui/overlay/ios-dark.webp
index 32df7c1df288ac..df92f53b8cf2e4 100644
Binary files a/docs/public/static/images/expo-ui/overlay/ios-dark.webp and b/docs/public/static/images/expo-ui/overlay/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/overlay/ios-light.webp b/docs/public/static/images/expo-ui/overlay/ios-light.webp
index 9608291934dabf..ca91438ddc42c5 100644
Binary files a/docs/public/static/images/expo-ui/overlay/ios-light.webp and b/docs/public/static/images/expo-ui/overlay/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/picker/ios-dark.webp b/docs/public/static/images/expo-ui/picker/ios-dark.webp
index e2f7ceb4578eac..1949b4fcd73639 100644
Binary files a/docs/public/static/images/expo-ui/picker/ios-dark.webp and b/docs/public/static/images/expo-ui/picker/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/picker/ios-light.webp b/docs/public/static/images/expo-ui/picker/ios-light.webp
index f7347febab767d..71ba3afb1e0314 100644
Binary files a/docs/public/static/images/expo-ui/picker/ios-light.webp and b/docs/public/static/images/expo-ui/picker/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/popover/ios-dark.webp b/docs/public/static/images/expo-ui/popover/ios-dark.webp
index 3e5369abed9154..0f5d7cb7f3175d 100644
Binary files a/docs/public/static/images/expo-ui/popover/ios-dark.webp and b/docs/public/static/images/expo-ui/popover/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/popover/ios-light.webp b/docs/public/static/images/expo-ui/popover/ios-light.webp
index f1de4f1b52428b..d902ff01dc5900 100644
Binary files a/docs/public/static/images/expo-ui/popover/ios-light.webp and b/docs/public/static/images/expo-ui/popover/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/progressview/ios-dark.webp b/docs/public/static/images/expo-ui/progressview/ios-dark.webp
index 77bb5b3d483ea9..b64bfff1a93c25 100644
Binary files a/docs/public/static/images/expo-ui/progressview/ios-dark.webp and b/docs/public/static/images/expo-ui/progressview/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/progressview/ios-light.webp b/docs/public/static/images/expo-ui/progressview/ios-light.webp
index d3988f9e70fea8..2624dc14003d5c 100644
Binary files a/docs/public/static/images/expo-ui/progressview/ios-light.webp and b/docs/public/static/images/expo-ui/progressview/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/scrollview/ios-dark.webp b/docs/public/static/images/expo-ui/scrollview/ios-dark.webp
index 39a253f3abd2fb..85ce6de00b51de 100644
Binary files a/docs/public/static/images/expo-ui/scrollview/ios-dark.webp and b/docs/public/static/images/expo-ui/scrollview/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/scrollview/ios-light.webp b/docs/public/static/images/expo-ui/scrollview/ios-light.webp
index 2bf507fe58e7ab..826ac1af4e69d8 100644
Binary files a/docs/public/static/images/expo-ui/scrollview/ios-light.webp and b/docs/public/static/images/expo-ui/scrollview/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/section/ios-dark.webp b/docs/public/static/images/expo-ui/section/ios-dark.webp
index 5e6ec1efcf662c..9e6f73b5c8ddf8 100644
Binary files a/docs/public/static/images/expo-ui/section/ios-dark.webp and b/docs/public/static/images/expo-ui/section/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/section/ios-light.webp b/docs/public/static/images/expo-ui/section/ios-light.webp
index 3f066623a24934..2193c1c97ca8b1 100644
Binary files a/docs/public/static/images/expo-ui/section/ios-light.webp and b/docs/public/static/images/expo-ui/section/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/securefield/ios-dark.webp b/docs/public/static/images/expo-ui/securefield/ios-dark.webp
index 854a67f2883ab0..3bfd043c11871a 100644
Binary files a/docs/public/static/images/expo-ui/securefield/ios-dark.webp and b/docs/public/static/images/expo-ui/securefield/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/securefield/ios-light.webp b/docs/public/static/images/expo-ui/securefield/ios-light.webp
index 2f3cff2948c9d0..0a69f2805eee13 100644
Binary files a/docs/public/static/images/expo-ui/securefield/ios-light.webp and b/docs/public/static/images/expo-ui/securefield/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/slider/ios-dark.webp b/docs/public/static/images/expo-ui/slider/ios-dark.webp
index 4a83fb6665d5c0..b36bf9ef49a521 100644
Binary files a/docs/public/static/images/expo-ui/slider/ios-dark.webp and b/docs/public/static/images/expo-ui/slider/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/slider/ios-light.webp b/docs/public/static/images/expo-ui/slider/ios-light.webp
index 0bd07abd981483..b90e9c7a770e71 100644
Binary files a/docs/public/static/images/expo-ui/slider/ios-light.webp and b/docs/public/static/images/expo-ui/slider/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/spacer/ios-dark.webp b/docs/public/static/images/expo-ui/spacer/ios-dark.webp
index a9de7050c079e7..27287036b6f185 100644
Binary files a/docs/public/static/images/expo-ui/spacer/ios-dark.webp and b/docs/public/static/images/expo-ui/spacer/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/spacer/ios-light.webp b/docs/public/static/images/expo-ui/spacer/ios-light.webp
index 033bad73a49bb3..943cba53ea5da3 100644
Binary files a/docs/public/static/images/expo-ui/spacer/ios-light.webp and b/docs/public/static/images/expo-ui/spacer/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/tabview/ios-dark.webp b/docs/public/static/images/expo-ui/tabview/ios-dark.webp
index a619e1006277e4..63c242cc414ced 100644
Binary files a/docs/public/static/images/expo-ui/tabview/ios-dark.webp and b/docs/public/static/images/expo-ui/tabview/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/tabview/ios-light.webp b/docs/public/static/images/expo-ui/tabview/ios-light.webp
index 11fa6154aceb76..574a0eddded546 100644
Binary files a/docs/public/static/images/expo-ui/tabview/ios-light.webp and b/docs/public/static/images/expo-ui/tabview/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/text/ios-dark.webp b/docs/public/static/images/expo-ui/text/ios-dark.webp
index 10d601a9efa615..257df16b3e793b 100644
Binary files a/docs/public/static/images/expo-ui/text/ios-dark.webp and b/docs/public/static/images/expo-ui/text/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/text/ios-light.webp b/docs/public/static/images/expo-ui/text/ios-light.webp
index 62863ec170fb43..ac803ca18c7797 100644
Binary files a/docs/public/static/images/expo-ui/text/ios-light.webp and b/docs/public/static/images/expo-ui/text/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/textfield/ios-dark.webp b/docs/public/static/images/expo-ui/textfield/ios-dark.webp
index 4eff7c678fdd2a..64561d351c6f55 100644
Binary files a/docs/public/static/images/expo-ui/textfield/ios-dark.webp and b/docs/public/static/images/expo-ui/textfield/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/textfield/ios-light.webp b/docs/public/static/images/expo-ui/textfield/ios-light.webp
index 90996faa40e4e0..60409142186fc7 100644
Binary files a/docs/public/static/images/expo-ui/textfield/ios-light.webp and b/docs/public/static/images/expo-ui/textfield/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/toggle/ios-dark.webp b/docs/public/static/images/expo-ui/toggle/ios-dark.webp
index 96482eeb819859..042f730c0bbbb5 100644
Binary files a/docs/public/static/images/expo-ui/toggle/ios-dark.webp and b/docs/public/static/images/expo-ui/toggle/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/toggle/ios-light.webp b/docs/public/static/images/expo-ui/toggle/ios-light.webp
index b9504ef0198abc..c43823ece80e1b 100644
Binary files a/docs/public/static/images/expo-ui/toggle/ios-light.webp and b/docs/public/static/images/expo-ui/toggle/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/vstack/ios-dark.webp b/docs/public/static/images/expo-ui/vstack/ios-dark.webp
index feda3c6c93b783..055c83b2f8a267 100644
Binary files a/docs/public/static/images/expo-ui/vstack/ios-dark.webp and b/docs/public/static/images/expo-ui/vstack/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/vstack/ios-light.webp b/docs/public/static/images/expo-ui/vstack/ios-light.webp
index 13f4e12aaced5f..9302c3c9c03525 100644
Binary files a/docs/public/static/images/expo-ui/vstack/ios-light.webp and b/docs/public/static/images/expo-ui/vstack/ios-light.webp differ
diff --git a/docs/public/static/images/expo-ui/zstack/ios-dark.webp b/docs/public/static/images/expo-ui/zstack/ios-dark.webp
index 1a5316f1c06757..4ced0993812618 100644
Binary files a/docs/public/static/images/expo-ui/zstack/ios-dark.webp and b/docs/public/static/images/expo-ui/zstack/ios-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/zstack/ios-light.webp b/docs/public/static/images/expo-ui/zstack/ios-light.webp
index dcfac35b8f9254..3e3fcd2f8e42a6 100644
Binary files a/docs/public/static/images/expo-ui/zstack/ios-light.webp and b/docs/public/static/images/expo-ui/zstack/ios-light.webp differ
diff --git a/docs/ui/components/Diagram/ComponentDiagram.tsx b/docs/ui/components/Diagram/ComponentDiagram.tsx
new file mode 100644
index 00000000000000..d431921683e52f
--- /dev/null
+++ b/docs/ui/components/Diagram/ComponentDiagram.tsx
@@ -0,0 +1,42 @@
+import { useTheme } from '@expo/styleguide';
+import { useEffect, useState } from 'react';
+
+import { prefersDarkTheme } from '~/common/window';
+
+import { DotGrid } from './DotGrid';
+
+type Props = {
+  source: string;
+  alt: string;
+  darkSource?: string;
+  mode: 'landscape' | 'portrait';
+};
+
+const ASPECT_CLASS = {
+  landscape: 'aspect-[3/2] w-[540px]',
+  portrait: 'aspect-[9/16] w-[220px]',
+} as const;
+
+export const ComponentDiagram = ({ source, darkSource, alt, mode }: Props) => {
+  const { themeName } = useTheme();
+  const [isDark, setDark] = useState(themeName === 'dark');
+
+  useEffect(() => {
+    if (themeName === 'auto') {
+      setDark(prefersDarkTheme());
+    } else {
+      setDark(themeName === 'dark');
+    }
+  }, [themeName]);
+
+  return (
+    <div
+      className={`border-default bg-default relative mx-auto my-6 max-w-full overflow-hidden rounded-md border ${ASPECT_CLASS[mode]}`}>
+      <DotGrid />
+      <picture className="relative block size-full">
+        {isDark && darkSource && <source srcSet={darkSource} />}
+        <img src={source} alt={alt} className="size-full object-cover" />
+      </picture>
+    </div>
+  );
+};
diff --git a/docs/ui/components/Diagram/index.ts b/docs/ui/components/Diagram/index.ts
index cb4e27b1baacf7..202ed0caee4bff 100644
--- a/docs/ui/components/Diagram/index.ts
+++ b/docs/ui/components/Diagram/index.ts
@@ -1 +1,2 @@
 export { Diagram } from './Diagram';
+export { ComponentDiagram } from './ComponentDiagram';
diff --git a/package.json b/package.json
index 1cbd454ab76659..26f3c404062461 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
+    "@types/node": "^22.14.0",
     "@vercel/ncc": "^0.38.4",
     "expo-module-scripts": "workspace:*",
     "expotools": "workspace:*",
diff --git a/packages/expo-modules-jsi/CHANGELOG.md b/packages/expo-modules-jsi/CHANGELOG.md
index 8756bc2afd5d94..d257b229d0638a 100644
--- a/packages/expo-modules-jsi/CHANGELOG.md
+++ b/packages/expo-modules-jsi/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 ### 🐛 Bug fixes
 
+- [iOS] Fixed `ExpoModulesJSI.xcframework` build failing under `useFrameworks: "static"` + `buildReactNativeFromSource: true` due to missing header search paths. ([#45508](https://github.com/expo/expo/pull/45508) by [@chrfalch](https://github.com/chrfalch))
+
 ### 💡 Others
 
 ## 56.0.1 — 2026-05-06
diff --git a/packages/expo-modules-jsi/apple/Package.swift b/packages/expo-modules-jsi/apple/Package.swift
index 951bed943a0632..d816d5df3081fa 100644
--- a/packages/expo-modules-jsi/apple/Package.swift
+++ b/packages/expo-modules-jsi/apple/Package.swift
@@ -7,15 +7,16 @@ import Foundation
 let packageDir = URL(fileURLWithPath: #filePath).deletingLastPathComponent().path
 let podsRoot = resolvePodsRoot()
 
-// Header roots needed by ExpoModulesJSI and ExpoModulesJSI-Cxx. The same paths
-// exist in both prebuilt and source-built React Native layouts, so we don't
-// need to detect the mode.
+// Header roots for ExpoModulesJSI and ExpoModulesJSI-Cxx. The
+// Pods/Headers/Public paths cover no-frameworks and prebuilt-RN; the trailing
+// entries fall back to canonical sources for the static + source-built RN
+// combo, where each React-X / third-party-deps pod compiles as a static
+// framework and its headers don't get mirrored to Pods/Headers/Public. Clang
+// ignores missing `-I` paths, so they're no-ops elsewhere. `RN_ROOT` is
+// forwarded from build-xcframework.sh (Node-resolved for hoisted monorepos).
 let publicHeaders = "\(podsRoot)/Headers/Public"
-// In source-built RN, third-party deps (folly, boost, etc.) live under
-// per-pod dirs like RCT-Folly/folly/. In prebuilt RN they're bundled into
-// ReactNativeDependencies. Some pods nest their headers (e.g. RCT-Folly/folly/),
-// others place them directly (e.g. boost/preprocessor/), so we include both
-// the Headers/Public root and the per-pod dirs for the nested ones.
+let reactNative = ProcessInfo.processInfo.environment["RN_ROOT"]
+  ?? "\(podsRoot)/../../node_modules/react-native"
 let headerSearchPaths = [
   publicHeaders,
   "\(publicHeaders)/React-jsi",
@@ -33,6 +34,14 @@ let headerSearchPaths = [
   "\(publicHeaders)/DoubleConversion",
   "\(publicHeaders)/fmt",
   "\(publicHeaders)/fast_float",
+  "\(reactNative)/ReactCommon",
+  "\(reactNative)/ReactCommon/jsi",
+  "\(reactNative)/ReactCommon/runtimeexecutor",
+  "\(reactNative)/ReactCommon/callinvoker",
+  "\(podsRoot)/RCT-Folly",
+  "\(podsRoot)/fmt/include",
+  "\(podsRoot)/glog/src",
+  "\(podsRoot)/DoubleConversion",
 ]
 
 // Path to the generated module map for the `jsi` Clang module. The
diff --git a/packages/expo-modules-jsi/apple/scripts/build-xcframework.sh b/packages/expo-modules-jsi/apple/scripts/build-xcframework.sh
index e31caf336ff226..f4808e0de2ca94 100755
--- a/packages/expo-modules-jsi/apple/scripts/build-xcframework.sh
+++ b/packages/expo-modules-jsi/apple/scripts/build-xcframework.sh
@@ -124,10 +124,10 @@ build_slice() {
 
   # Use env -i to clear inherited Xcode environment variables from the parent build.
   # Without this, the nested xcodebuild inherits SDKROOT, PLATFORM_NAME, etc.
-  # which causes SDK/platform mismatches. PODS_ROOT is forwarded explicitly
-  # because Package.swift reads it to resolve header search paths.
+  # which causes SDK/platform mismatches. PODS_ROOT and RN_ROOT are forwarded
+  # explicitly because Package.swift reads them to resolve header search paths.
   # Run from PACKAGE_DIR so xcodebuild finds the SPM package, not the Pods project.
-  (cd "$PACKAGE_DIR" && env -i PATH="$PATH" HOME="$HOME" PODS_ROOT="$PODS_ROOT" \
+  (cd "$PACKAGE_DIR" && env -i PATH="$PATH" HOME="$HOME" PODS_ROOT="$PODS_ROOT" RN_ROOT="$RN_ROOT" \
     xcodebuild \
     build \
     -scheme "$PACKAGE_NAME" \
@@ -233,6 +233,18 @@ fi
 # whether PODS_ROOT was passed as relative or absolute.
 PODS_ROOT="$(cd "$PODS_ROOT" && pwd)"
 
+# Resolve react-native via Node so the build works in any node_modules layout
+# (hoisted monorepos, yarn/pnpm workspaces). Falls back to the relative path
+# when `node` is unavailable. Forwarded to Package.swift and the modulemap
+# generator below.
+RN_ROOT="$(node -p 'require("path").dirname(require.resolve("react-native/package.json"))' 2>/dev/null \
+  || echo "${PODS_ROOT}/../../node_modules/react-native")"
+
+# log detected configuration to verify the fallback path triggers.
+mode="$( [[ -d "${PODS_ROOT}/React-Core-prebuilt/React.xcframework" ]] && echo "prebuilt RN" || echo "source-built RN")"
+[[ -f "${PODS_ROOT}/Target Support Files/React-jsi/React-jsi-umbrella.h" ]] && mode="${mode}, static frameworks"
+log "Detected: ${mode} (RN_ROOT=${RN_ROOT})"
+
 # React Native version — forces a rebuild after an RN upgrade. The local
 # podspec is regenerated by `pod install` and only changes when the underlying
 # RN version changes.
@@ -241,7 +253,7 @@ if [[ -f "${PODS_ROOT}/Local Podspecs/React-Core.podspec.json" ]]; then
 fi
 
 # Generate the module map for the `jsi` Clang module.
-env PODS_ROOT="$PODS_ROOT" "${PACKAGE_DIR}/scripts/generate-modulemap.sh"
+env PODS_ROOT="$PODS_ROOT" RN_ROOT="$RN_ROOT" "${PACKAGE_DIR}/scripts/generate-modulemap.sh"
 GENERATED_MODULE_MAP="${PACKAGE_DIR}/.generated/module.modulemap"
 SOURCE_FILES+=("$GENERATED_MODULE_MAP")
 
diff --git a/packages/expo-modules-jsi/apple/scripts/generate-modulemap.sh b/packages/expo-modules-jsi/apple/scripts/generate-modulemap.sh
index f1b8115bdf7f29..71b23f73b78e91 100755
--- a/packages/expo-modules-jsi/apple/scripts/generate-modulemap.sh
+++ b/packages/expo-modules-jsi/apple/scripts/generate-modulemap.sh
@@ -3,11 +3,13 @@
 # Writes `.generated/module.modulemap` for the `jsi` Clang module.
 #
 # The umbrella header is referenced by absolute path so the modulemap works
-# regardless of where Pods lives. The same Pods/Headers/Public/React-jsi/jsi/jsi.h
-# path exists in both prebuilt and source-built React Native layouts. Stored
-# outside `.build/` so SwiftPM state can be wiped without losing this file.
+# regardless of where Pods lives. The `Pods/Headers/Public` path exists in
+# non-frameworks and prebuilt-RN layouts; under static frameworks +
+# source-built RN it doesn't, so we fall back to the canonical RN source.
+# Stored outside `.build/` so SwiftPM state can be wiped without losing this
+# file.
 #
-# Idempotent: re-running with the same PODS_ROOT rewrites identical content.
+# Idempotent: re-running with the same inputs rewrites identical content.
 # Switching PODS_ROOT updates the umbrella header path.
 #
 # Used by build-xcframework.sh and test.sh; can also be run manually before
@@ -34,10 +36,17 @@ GENERATED_DIR="${PACKAGE_DIR}/.generated"
 GENERATED_MODULE_MAP="${GENERATED_DIR}/module.modulemap"
 mkdir -p "$GENERATED_DIR"
 
+JSI_UMBRELLA="${PODS_ROOT}/Headers/Public/React-jsi/jsi/jsi.h"
+if [[ ! -f "$JSI_UMBRELLA" ]]; then
+  RN="${RN_ROOT:-$(node -p 'require("path").dirname(require.resolve("react-native/package.json"))' 2>/dev/null || echo "${PODS_ROOT}/../../node_modules/react-native")}"
+  JSI_UMBRELLA="${RN}/ReactCommon/jsi/jsi/jsi.h"
+fi
+[[ -f "$JSI_UMBRELLA" ]] || { echo "error: cannot locate jsi.h" >&2; exit 1; }
+
 # Avoid touching the file when contents would be identical, so the xcframework
-# hash cache and Xcode don't see a spurious change when PODS_ROOT is unchanged.
+# hash cache and Xcode don't see a spurious change when inputs are unchanged.
 NEW_CONTENT="module jsi {
-  umbrella header \"${PODS_ROOT}/Headers/Public/React-jsi/jsi/jsi.h\"
+  umbrella header \"${JSI_UMBRELLA}\"
 
   export *
   module * { export * }
diff --git a/packages/expo-ui/CHANGELOG.md b/packages/expo-ui/CHANGELOG.md
index 972153d75ec1e9..fc82a28edcbb32 100644
--- a/packages/expo-ui/CHANGELOG.md
+++ b/packages/expo-ui/CHANGELOG.md
@@ -10,6 +10,8 @@
 
 ### 💡 Others
 
+- [universal] Refactored web components to use `StyleSheet.create` instead of inline styles, added `react-native-web` type declarations, and tightened prop handling. ([#45485](https://github.com/expo/expo/pull/45485) by [@zoontek](https://github.com/zoontek))
+
 ## 56.0.3 — 2026-05-07
 
 _This version does not introduce any user-facing changes._
diff --git a/packages/expo-ui/build/universal/Button/index.d.ts.map b/packages/expo-ui/build/universal/Button/index.d.ts.map
index 848a5a38a6210e..7874d9f766f0c4 100644
--- a/packages/expo-ui/build/universal/Button/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Button/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,SAAS,CAAC;AA2C1D;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,OAAkB,EAClB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,WAAW,2CAyBb;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,SAAS,CAAC;AAoC1D;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,OAAkB,EAClB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,GACP,EAAE,WAAW,2CAoBb;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/Checkbox/index.d.ts.map b/packages/expo-ui/build/universal/Checkbox/index.d.ts.map
index 00d63f9bc342c1..f11718c256ea15 100644
--- a/packages/expo-ui/build/universal/Checkbox/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Checkbox/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,aAAa,2CAaxF;AAcD,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAwB7C;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAgB,EAAE,MAAM,EAAE,EAAE,aAAa,2CAahG;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/Column/index.d.ts.map b/packages/expo-ui/build/universal/Column/index.d.ts.map
index 383c24ef9da075..ef880b00afaf87 100644
--- a/packages/expo-ui/build/universal/Column/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Column/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Column/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAmB,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,WAAW,2CAmBb;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Column/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAmB3C;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAmB,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,GACP,EAAE,WAAW,2CAqBb;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/FieldGroup/FieldGroup.d.ts.map b/packages/expo-ui/build/universal/FieldGroup/FieldGroup.d.ts.map
index 0e941a46fe3f23..fa452c904d212f 100644
--- a/packages/expo-ui/build/universal/FieldGroup/FieldGroup.d.ts.map
+++ b/packages/expo-ui/build/universal/FieldGroup/FieldGroup.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/universal/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,MAAM,GACP,EAAE,eAAe,2CAkBjB"}
\ No newline at end of file
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/universal/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAqB/C;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAc,EACd,MAAM,GACP,EAAE,eAAe,2CAkBjB"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/FieldGroup/FieldSection.d.ts.map b/packages/expo-ui/build/universal/FieldGroup/FieldSection.d.ts.map
index 15995754f5a1d4..7d8f5b6b14d504 100644
--- a/packages/expo-ui/build/universal/FieldGroup/FieldSection.d.ts.map
+++ b/packages/expo-ui/build/universal/FieldGroup/FieldSection.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"FieldSection.d.ts","sourceRoot":"","sources":["../../../src/universal/FieldGroup/FieldSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,MAAM,EACN,cAAsB,GACvB,EAAE,iBAAiB,2CA2CnB"}
\ No newline at end of file
+{"version":3,"file":"FieldSection.d.ts","sourceRoot":"","sources":["../../../src/universal/FieldGroup/FieldSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAuDjD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,MAAM,EACN,cAAsB,GACvB,EAAE,iBAAiB,2CAsCnB"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/Row/index.d.ts.map b/packages/expo-ui/build/universal/Row/index.d.ts.map
index 894d2d9fb09da4..e88687baa652a6 100644
--- a/packages/expo-ui/build/universal/Row/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Row/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Row/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUxC;;GAEG;AACH,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,SAAmB,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,QAAQ,2CAyBV;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Row/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA2BxC;;GAEG;AACH,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,SAAmB,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,GACP,EAAE,QAAQ,2CAqBV;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/ScrollView/index.d.ts.map b/packages/expo-ui/build/universal/ScrollView/index.d.ts.map
index 07152e1eecf690..c66ee7df22c4f7 100644
--- a/packages/expo-ui/build/universal/ScrollView/index.d.ts.map
+++ b/packages/expo-ui/build/universal/ScrollView/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/ScrollView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,eAAsB,EACtB,KAAK,EAGL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,eAAe,2CA+BjB;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/ScrollView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkB/C;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,eAAsB,EACtB,KAAK,EAGL,QAAQ,EACR,WAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,GACP,EAAE,eAAe,2CA2BjB;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/Slider/index.d.ts.map b/packages/expo-ui/build/universal/Slider/index.d.ts.map
index bd13b9b090ca8c..74a04904dea1ca 100644
--- a/packages/expo-ui/build/universal/Slider/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Slider/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Slider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,GACP,EAAE,WAAW,2CAgBb;AAYD,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Slider/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiB3C;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAO,EACP,IAAI,EACJ,QAAgB,EAChB,MAAM,GACP,EAAE,WAAW,2CAeb;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/Spacer/index.d.ts.map b/packages/expo-ui/build/universal/Spacer/index.d.ts.map
index e86326560873d4..357e6f1b5b3acb 100644
--- a/packages/expo-ui/build/universal/Spacer/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Spacer/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Spacer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,MAAM,GACP,EAAE,WAAW,2CAWb;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Spacer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQ3C;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAc,EACd,MAAM,GACP,EAAE,WAAW,2CAcb;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/Switch/index.d.ts.map b/packages/expo-ui/build/universal/Switch/index.d.ts.map
index 4c207088e3ec74..9e23ce828cc517 100644
--- a/packages/expo-ui/build/universal/Switch/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Switch/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,WAAW,2CAoBpF;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAc3C;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAgB,EAAE,MAAM,EAAE,EAAE,WAAW,2CAa5F;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/build/universal/Text/index.d.ts.map b/packages/expo-ui/build/universal/Text/index.d.ts.map
index 7ea8050a03e1a1..df0f5f7e428c51 100644
--- a/packages/expo-ui/build/universal/Text/index.d.ts.map
+++ b/packages/expo-ui/build/universal/Text/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,SAAS,2CA+BX;AAkBD,cAAc,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/Text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAUzC;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,GACP,EAAE,SAAS,2CAqBX;AAED,cAAc,SAAS,CAAC"}
\ No newline at end of file
diff --git a/packages/expo-ui/src/ts-declarations/react-native-web.d.ts b/packages/expo-ui/src/ts-declarations/react-native-web.d.ts
new file mode 100644
index 00000000000000..10ce2ee2a701a1
--- /dev/null
+++ b/packages/expo-ui/src/ts-declarations/react-native-web.d.ts
@@ -0,0 +1,112 @@
+import * as ReactNative from 'react-native';
+
+declare module 'react-native' {
+  export const unstable_createElement: <P>(
+    type: React.ElementType,
+    props?: P
+  ) => React.ReactElement<P>;
+
+  type DisplayValue = ReactNative.FlexStyle['display'] | 'inline-flex';
+
+  type WebRole =
+    | ReactNative.Role
+    /**
+     * Accessibility roles mapped to components
+     * @see https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
+     */
+    | 'article' // <article />
+    | 'banner' // <header />
+    | 'blockquote' // <blockquote />
+    | 'button' // <button />
+    | 'code' // <code />
+    | 'complementary' // <aside />
+    | 'contentinfo' // <footer />
+    | 'deletion' // <del />
+    | 'emphasis' // <em />
+    | 'figure' // <figure />
+    | 'form' // <form />
+    | 'heading' // <h{1,6} />
+    | 'insertion' // <ins />
+    | 'label' // <label />
+    | 'list' // <ul />
+    | 'listitem' // <li />
+    | 'main' // <main />
+    | 'navigation' // <nav />
+    | 'paragraph' // <p />
+    | 'region' // <section />
+    | 'strong'; // <strong />
+
+  interface WebAccessibilityProps {
+    /**
+     * Additional accessibility props
+     */
+    tabIndex?: 0 | -1;
+
+    /**
+     * Aria props (additional, minus existants)
+     * @see https://necolas.github.io/react-native-web/docs/accessibility
+     * @see https://reactnative.dev/docs/accessibility#aria-valuemax
+     */
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean;
+    'aria-autocomplete'?: string;
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-errormessage'?: string;
+    'aria-flowto'?: string;
+    'aria-haspopup'?: string;
+    'aria-invalid'?: boolean;
+    'aria-keyshortcuts'?: string;
+    'aria-level'?: number;
+    'aria-multiline'?: boolean;
+    'aria-multiselectable'?: boolean;
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean;
+    'aria-readonly'?: boolean;
+    'aria-required'?: boolean;
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-setsize'?: number;
+    'aria-sort'?: 'ascending' | 'descending' | 'none' | 'other';
+  }
+
+  export interface PressableStateCallbackType {
+    readonly focused: boolean;
+    readonly hovered: boolean;
+    readonly pressed: boolean;
+  }
+
+  export interface ImageProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface TextProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface ViewProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface ImageStyle {
+    display?: DisplayValue;
+  }
+
+  export interface TextStyle {
+    display?: DisplayValue;
+  }
+
+  export interface ViewStyle {
+    display?: DisplayValue;
+  }
+}
diff --git a/packages/expo-ui/src/universal/Button/index.tsx b/packages/expo-ui/src/universal/Button/index.tsx
index 01cb6aa3022e71..6dd108d51a2145 100644
--- a/packages/expo-ui/src/universal/Button/index.tsx
+++ b/packages/expo-ui/src/universal/Button/index.tsx
@@ -1,48 +1,40 @@
-import { useState } from 'react';
-import { Pressable, Text, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, Text, type TextStyle, type ViewStyle } from 'react-native';
 
 import type { ButtonProps, ButtonVariant } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
-const variantStyles: Record<ButtonVariant, ViewStyle> = {
-  filled: {
-    backgroundColor: '#007AFF',
+const styles = StyleSheet.create({
+  button: {
     paddingHorizontal: 16,
     paddingVertical: 10,
     borderRadius: 8,
+    userSelect: 'none',
   },
+  disabled: { opacity: 0.5 },
+  hidden: { display: 'none' },
+  label: { textAlign: 'center' },
+});
+
+const variantStyles = StyleSheet.create({
+  filled: { backgroundColor: '#007AFF' },
   outlined: {
-    backgroundColor: 'transparent',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
     borderColor: '#007AFF',
+    borderWidth: 1,
   },
-  text: {
-    backgroundColor: 'transparent',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-  },
-};
+  text: {},
+} satisfies Record<ButtonVariant, ViewStyle>);
 
-const variantHoverStyles: Record<ButtonVariant, ViewStyle> = {
-  filled: {
-    backgroundColor: '#0066DB',
-  },
-  outlined: {
-    backgroundColor: 'rgba(0, 122, 255, 0.08)',
-  },
-  text: {
-    backgroundColor: 'rgba(0, 122, 255, 0.08)',
-  },
-};
+const variantHoverStyles = StyleSheet.create({
+  filled: { backgroundColor: '#0066DB' },
+  outlined: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
+  text: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
+} satisfies Record<ButtonVariant, ViewStyle>);
 
-const variantTextColors: Record<ButtonVariant, string> = {
-  filled: '#FFFFFF',
-  outlined: '#007AFF',
-  text: '#007AFF',
-};
+const variantLabelStyles = StyleSheet.create({
+  filled: { color: '#FFFFFF' },
+  outlined: { color: '#007AFF' },
+  text: { color: '#007AFF' },
+} satisfies Record<ButtonVariant, TextStyle>);
 
 /**
  * A pressable button that supports multiple visual variants.
@@ -55,32 +47,27 @@ export function Button({
   style,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ButtonProps) {
   useUniversalLifecycle(onAppear, onDisappear);
-  const [hovered, setHovered] = useState(false);
-
-  const pressableStyle: ViewStyle = {
-    ...variantStyles[variant],
-    ...style,
-    ...(hovered && !disabled ? variantHoverStyles[variant] : undefined),
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5 } : undefined),
-  };
 
   return (
     <Pressable
-      style={pressableStyle}
+      role="button"
       onPress={onPress}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
       disabled={disabled}
-      testID={testID}>
-      {children ?? (
-        <Text style={{ color: variantTextColors[variant], textAlign: 'center' }}>{label}</Text>
-      )}
+      testID={testID}
+      style={({ hovered }) => [
+        styles.button,
+        variantStyles[variant],
+        style,
+        hovered && !disabled && variantHoverStyles[variant],
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
+      {children ?? <Text style={[styles.label, variantLabelStyles[variant]]}>{label}</Text>}
     </Pressable>
   );
 }
diff --git a/packages/expo-ui/src/universal/Checkbox/index.tsx b/packages/expo-ui/src/universal/Checkbox/index.tsx
index 5e9f49fbfb892e..d6679a25052552 100644
--- a/packages/expo-ui/src/universal/Checkbox/index.tsx
+++ b/packages/expo-ui/src/universal/Checkbox/index.tsx
@@ -1,33 +1,46 @@
+import type { ComponentProps } from 'react';
+import { StyleSheet, Text, unstable_createElement, View, type ViewProps } from 'react-native';
+
 import type { CheckboxProps } from './types';
 
+const styles = StyleSheet.create({
+  label: {
+    flexDirection: 'row',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 8,
+    cursor: 'pointer',
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'auto',
+  },
+  cursorInherit: {
+    // @ts-expect-error
+    cursor: 'inherit',
+  },
+});
+
+const NativeCheckbox = (
+  props: Omit<ComponentProps<'input'>, 'style' | 'type'> & { style?: ViewProps['style'] }
+) => unstable_createElement('input', { ...props, type: 'checkbox' });
+
 /**
  * A toggle control that represents a checked or unchecked state.
  */
-export function Checkbox({ value, onValueChange, label, disabled, testID }: CheckboxProps) {
+export function Checkbox({ value, onValueChange, label, disabled = false, testID }: CheckboxProps) {
   return (
-    <label style={{ ...labelStyle, ...(disabled ? disabledStyle : undefined) }}>
-      <input
-        type="checkbox"
+    <View role="label" aria-disabled={disabled} style={[styles.label, disabled && styles.disabled]}>
+      <NativeCheckbox
         checked={value}
         onChange={(e) => onValueChange(e.target.checked)}
         disabled={disabled}
         data-testid={testID}
+        style={styles.cursorInherit}
       />
-      {label != null && <span>{label}</span>}
-    </label>
+      {label != null && <Text>{label}</Text>}
+    </View>
   );
 }
 
-const labelStyle: React.CSSProperties = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: 8,
-  cursor: 'pointer',
-};
-
-const disabledStyle: React.CSSProperties = {
-  opacity: 0.5,
-  cursor: 'default',
-};
-
 export * from './types';
diff --git a/packages/expo-ui/src/universal/Column/index.tsx b/packages/expo-ui/src/universal/Column/index.tsx
index d62eac77a0fbd7..3cada237576e20 100644
--- a/packages/expo-ui/src/universal/Column/index.tsx
+++ b/packages/expo-ui/src/universal/Column/index.tsx
@@ -1,14 +1,23 @@
-import { Pressable, View, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import type { ColumnProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 import type { UniversalAlignment } from '../types';
 
-const alignmentMap: Record<UniversalAlignment, ViewStyle['alignItems']> = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-};
+const styles = StyleSheet.create({
+  column: { flexDirection: 'column' },
+  hidden: { display: 'none' },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
+const alignmentStyles = StyleSheet.create({
+  start: { alignItems: 'flex-start' },
+  center: { alignItems: 'center' },
+  end: { alignItems: 'flex-end' },
+} satisfies Record<UniversalAlignment, ViewStyle>);
 
 /**
  * A vertical layout container that arranges its children from top to bottom.
@@ -21,25 +30,27 @@ export function Column({
   onPress,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ColumnProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const viewStyle: ViewStyle = {
-    flexDirection: 'column',
-    alignItems: alignmentMap[alignment],
-    gap: spacing,
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined),
-  };
-
   const Container = onPress ? Pressable : View;
 
   return (
-    <Container style={viewStyle} onPress={onPress} disabled={disabled} testID={testID}>
+    <Container
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      style={[
+        styles.column,
+        alignmentStyles[alignment],
+        spacing != null && { gap: spacing },
+        style,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </Container>
   );
diff --git a/packages/expo-ui/src/universal/FieldGroup/FieldGroup.tsx b/packages/expo-ui/src/universal/FieldGroup/FieldGroup.tsx
index 266cd5d9f38e5b..fdf81da8133cf4 100644
--- a/packages/expo-ui/src/universal/FieldGroup/FieldGroup.tsx
+++ b/packages/expo-ui/src/universal/FieldGroup/FieldGroup.tsx
@@ -1,9 +1,27 @@
-import { ScrollView, useColorScheme, type ViewStyle } from 'react-native';
+import { ScrollView, StyleSheet, useColorScheme } from 'react-native';
 
 import { groupFieldGroupChildren } from './groupChildren';
 import type { FieldGroupProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#f2f2f7',
+    flex: 1,
+  },
+  containerDark: {
+    backgroundColor: '#000000',
+  },
+  hidden: {
+    display: 'none',
+  },
+  contentContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 24,
+  },
+});
+
 /**
  * A scrollable container for grouped settings-style rows, mirroring the look
  * of an iOS Settings screen. Render one or more
@@ -16,7 +34,7 @@ export function FieldGroup({
   style,
   onAppear,
   onDisappear,
-  hidden,
+  hidden = false,
   testID,
 }: FieldGroupProps) {
   useUniversalLifecycle(onAppear, onDisappear);
@@ -26,36 +44,14 @@ export function FieldGroup({
   return (
     <ScrollView
       style={[
-        containerBaseStyle,
-        isDarkScheme ? containerDarkStyle : containerLightStyle,
+        styles.container,
+        isDarkScheme && styles.containerDark,
         style,
-        hidden ? hiddenStyle : null,
+        hidden && styles.hidden,
       ]}
-      contentContainerStyle={contentContainerStyle}
+      contentContainerStyle={styles.contentContainer}
       testID={testID}>
       {groupFieldGroupChildren(children)}
     </ScrollView>
   );
 }
-
-const containerBaseStyle: ViewStyle = {
-  flex: 1,
-};
-
-const containerLightStyle: ViewStyle = {
-  backgroundColor: '#f2f2f7',
-};
-
-const containerDarkStyle: ViewStyle = {
-  backgroundColor: '#000000',
-};
-
-const hiddenStyle: ViewStyle = {
-  display: 'none',
-};
-
-const contentContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingVertical: 16,
-  gap: 24,
-};
diff --git a/packages/expo-ui/src/universal/FieldGroup/FieldSection.tsx b/packages/expo-ui/src/universal/FieldGroup/FieldSection.tsx
index 6c89014eb5bf71..c3b478d952617e 100644
--- a/packages/expo-ui/src/universal/FieldGroup/FieldSection.tsx
+++ b/packages/expo-ui/src/universal/FieldGroup/FieldSection.tsx
@@ -1,10 +1,62 @@
 import { Fragment } from 'react';
-import { Text, useColorScheme, View, type TextStyle, type ViewStyle } from 'react-native';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
 
 import { extractFieldSectionSlots } from './FieldSectionSlots';
 import type { FieldSectionProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  hidden: {
+    display: 'none',
+  },
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  headerText: {
+    color: '#6c6c70',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  headerTextDark: {
+    color: '#98989e',
+  },
+  headerTextUppercase: {
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    fontSize: 13,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  cardDark: {
+    backgroundColor: '#1c1c1e',
+  },
+  // Gives each row the same minimum height SwiftUI `Form` uses for single-line
+  // rows on iOS, so a text-only row doesn't collapse to its text intrinsic
+  // size. Taller content (e.g. a Switch) grows the row naturally. Horizontal
+  // padding matches SwiftUI `Form`'s built-in row leading/trailing inset.
+  rowWrapper: {
+    minHeight: 44,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  divider: {
+    backgroundColor: '#e5e5ea',
+    height: 1,
+    marginLeft: 16,
+  },
+  dividerDark: {
+    backgroundColor: '#38383a',
+  },
+  footerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+});
+
 /**
  * A grouped list of rows within a [`FieldGroup`](#fieldgroup). Each direct
  * child is rendered as a single row. Use `title` for a simple caption header,
@@ -27,105 +79,35 @@ export function FieldSection({
 
   const { header, footer, rows } = extractFieldSectionSlots(children);
 
-  const containerStyle: ViewStyle = {
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-  };
-
   const headerNode =
     header ??
     (title ? (
       <Text
         style={[
-          headerTextStyle,
-          isDarkScheme ? headerTextDarkStyle : headerTextLightStyle,
-          titleUppercase ? headerTextUppercaseStyle : null,
+          styles.headerText,
+          isDarkScheme && styles.headerTextDark,
+          titleUppercase && styles.headerTextUppercase,
         ]}>
         {title}
       </Text>
     ) : null);
 
   return (
-    <View style={containerStyle} testID={testID}>
-      {headerNode ? <View style={headerContainerStyle}>{headerNode}</View> : null}
+    <View style={[style, hidden && styles.hidden]} testID={testID}>
+      {headerNode ? <View style={styles.headerContainer}>{headerNode}</View> : null}
       {rows.length > 0 ? (
-        <View style={[cardBaseStyle, isDarkScheme ? cardDarkStyle : cardLightStyle]}>
+        <View style={[styles.card, isDarkScheme && styles.cardDark]}>
           {rows.map((child, index) => (
             <Fragment key={index}>
-              <View style={rowWrapperStyle}>{child}</View>
+              <View style={styles.rowWrapper}>{child}</View>
               {index < rows.length - 1 ? (
-                <View style={[dividerStyle, isDarkScheme ? dividerDarkStyle : dividerLightStyle]} />
+                <View style={[styles.divider, isDarkScheme && styles.dividerDark]} />
               ) : null}
             </Fragment>
           ))}
         </View>
       ) : null}
-      {footer ? <View style={footerContainerStyle}>{footer}</View> : null}
+      {footer ? <View style={styles.footerContainer}>{footer}</View> : null}
     </View>
   );
 }
-
-const headerContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingBottom: 8,
-};
-
-const headerTextStyle: TextStyle = {
-  fontSize: 14,
-  fontWeight: '500',
-};
-
-const headerTextLightStyle: TextStyle = {
-  color: '#6c6c70',
-};
-
-const headerTextDarkStyle: TextStyle = {
-  color: '#98989e',
-};
-
-const headerTextUppercaseStyle: TextStyle = {
-  textTransform: 'uppercase',
-  letterSpacing: 0.5,
-  fontSize: 13,
-};
-
-const cardBaseStyle: ViewStyle = {
-  borderRadius: 12,
-  overflow: 'hidden',
-};
-
-const cardLightStyle: ViewStyle = {
-  backgroundColor: '#ffffff',
-};
-
-const cardDarkStyle: ViewStyle = {
-  backgroundColor: '#1c1c1e',
-};
-
-// Gives each row the same minimum height SwiftUI `Form` uses for single-line
-// rows on iOS, so a text-only row doesn't collapse to its text intrinsic
-// size. Taller content (e.g. a Switch) grows the row naturally. Horizontal
-// padding matches SwiftUI `Form`'s built-in row leading/trailing inset.
-const rowWrapperStyle: ViewStyle = {
-  minHeight: 44,
-  justifyContent: 'center',
-  paddingHorizontal: 16,
-};
-
-const dividerStyle: ViewStyle = {
-  height: 1,
-  marginLeft: 16,
-};
-
-const dividerLightStyle: ViewStyle = {
-  backgroundColor: '#e5e5ea',
-};
-
-const dividerDarkStyle: ViewStyle = {
-  backgroundColor: '#38383a',
-};
-
-const footerContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingTop: 8,
-};
diff --git a/packages/expo-ui/src/universal/Row/index.tsx b/packages/expo-ui/src/universal/Row/index.tsx
index 1cfe6f75882712..5376e914036bee 100644
--- a/packages/expo-ui/src/universal/Row/index.tsx
+++ b/packages/expo-ui/src/universal/Row/index.tsx
@@ -1,14 +1,31 @@
-import { Pressable, View, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import type { RowProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 import type { UniversalAlignment } from '../types';
 
-const alignmentMap: Record<UniversalAlignment, ViewStyle['alignItems']> = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-};
+const styles = StyleSheet.create({
+  row: {
+    // Fill the parent's cross-axis by default so a `<Spacer flexible />`
+    // child has room to grow. Without this, a Row placed inside a `Column`
+    // with alignment other than 'stretch' is content-sized on web, which
+    // leaves flex children with no leftover space. SwiftUI and Compose
+    // achieve the same effect via their own layout phases.
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+  },
+  hidden: { display: 'none' },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
+const alignmentStyles = StyleSheet.create({
+  start: { alignItems: 'flex-start' },
+  center: { alignItems: 'center' },
+  end: { alignItems: 'flex-end' },
+} satisfies Record<UniversalAlignment, ViewStyle>);
 
 /**
  * A horizontal layout container that arranges its children from start to end.
@@ -21,31 +38,27 @@ export function Row({
   onPress,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: RowProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const viewStyle: ViewStyle = {
-    // Fill the parent's cross-axis by default so a `<Spacer flexible />`
-    // child has room to grow. Without this, a Row placed inside a `Column`
-    // with alignment other than 'stretch' is content-sized on web, which
-    // leaves flex children with no leftover space. SwiftUI and Compose
-    // achieve the same effect via their own layout phases.
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-    alignItems: alignmentMap[alignment],
-    gap: spacing,
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined),
-  };
-
   const Container = onPress ? Pressable : View;
 
   return (
-    <Container style={viewStyle} onPress={onPress} disabled={disabled} testID={testID}>
+    <Container
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      style={[
+        styles.row,
+        alignmentStyles[alignment],
+        spacing != null && { gap: spacing },
+        style,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </Container>
   );
diff --git a/packages/expo-ui/src/universal/ScrollView/index.tsx b/packages/expo-ui/src/universal/ScrollView/index.tsx
index 48cf26f9119df1..4b2dbbd1417014 100644
--- a/packages/expo-ui/src/universal/ScrollView/index.tsx
+++ b/packages/expo-ui/src/universal/ScrollView/index.tsx
@@ -1,8 +1,23 @@
-import { ScrollView as RNScrollView, type ViewStyle } from 'react-native';
+import { ScrollView as RNScrollView, StyleSheet } from 'react-native';
 
 import type { ScrollViewProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  container: {
+    // Constrain to viewport width so horizontal content overflows and scrolls
+    // instead of expanding the parent layout.
+    // @ts-expect-error
+    maxWidth: '100vw',
+  },
+  noGrow: { flexGrow: 0 },
+  hidden: { display: 'none' },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
 /**
  * A scrollable container that supports vertical or horizontal scrolling.
  */
@@ -15,24 +30,14 @@ export function ScrollView({
   // API compatibility but silently ignored (RN ScrollView has no press handler).
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ScrollViewProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
   const isHorizontal = direction === 'horizontal';
 
-  const containerStyle: ViewStyle = {
-    // Constrain to viewport width so horizontal content overflows and scrolls
-    // instead of expanding the parent layout.
-    maxWidth: '100vw' as any,
-    ...style,
-    ...(style?.height != null ? { flexGrow: 0 } : undefined),
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined),
-  };
-
   // react-native-web does not support separate vertical and horizontal indicator props,
   // so we map both to its single `showsIndicators` prop.
   const showVerticalIndicator = showsIndicators;
@@ -43,9 +48,15 @@ export function ScrollView({
       horizontal={isHorizontal}
       showsVerticalScrollIndicator={showVerticalIndicator}
       showsHorizontalScrollIndicator={showHorizontalIndicator}
-      style={containerStyle}
       nestedScrollEnabled
-      testID={testID}>
+      testID={testID}
+      style={[
+        styles.container,
+        style,
+        style?.height != null && styles.noGrow,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </RNScrollView>
   );
diff --git a/packages/expo-ui/src/universal/Slider/index.tsx b/packages/expo-ui/src/universal/Slider/index.tsx
index 12a49381be7e06..89cc009986289e 100644
--- a/packages/expo-ui/src/universal/Slider/index.tsx
+++ b/packages/expo-ui/src/universal/Slider/index.tsx
@@ -1,7 +1,23 @@
-import { View, type ViewStyle } from 'react-native';
+import type { ComponentProps } from 'react';
+import { StyleSheet, unstable_createElement, View, type ViewProps } from 'react-native';
 
 import type { SliderProps } from './types';
 
+const styles = StyleSheet.create({
+  view: {
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+  },
+  input: {
+    width: '100%',
+    cursor: 'pointer',
+  },
+});
+
+const NativeSlider = (
+  props: Omit<ComponentProps<'input'>, 'style' | 'type'> & { style?: ViewProps['style'] }
+) => unstable_createElement('input', { ...props, type: 'range' });
+
 /**
  * A control for selecting a value from a continuous or stepped range.
  */
@@ -11,13 +27,12 @@ export function Slider({
   min = 0,
   max = 1,
   step,
-  disabled,
+  disabled = false,
   testID,
 }: SliderProps) {
   return (
-    <View style={containerStyle}>
-      <input
-        type="range"
+    <View style={styles.view}>
+      <NativeSlider
         value={value}
         min={min}
         max={max}
@@ -25,20 +40,10 @@ export function Slider({
         disabled={disabled}
         onChange={(e) => onValueChange(parseFloat(e.target.value))}
         data-testid={testID}
-        style={inputStyle}
+        style={styles.input}
       />
     </View>
   );
 }
 
-const containerStyle: ViewStyle = {
-  alignSelf: 'stretch',
-  justifyContent: 'center',
-};
-
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  cursor: 'pointer',
-};
-
 export * from './types';
diff --git a/packages/expo-ui/src/universal/Spacer/index.tsx b/packages/expo-ui/src/universal/Spacer/index.tsx
index 9981d10529a9a2..7a21bec9c5c122 100644
--- a/packages/expo-ui/src/universal/Spacer/index.tsx
+++ b/packages/expo-ui/src/universal/Spacer/index.tsx
@@ -1,8 +1,13 @@
-import { View, type ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import type { SpacerProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  flexible: { flex: 1 },
+  hidden: { display: 'none' },
+});
+
 /**
  * A layout spacer that produces empty space between siblings in a
  * `Row` or `Column`.
@@ -13,19 +18,22 @@ export function Spacer({
   style,
   onAppear,
   onDisappear,
-  hidden,
+  hidden = false,
   testID,
 }: SpacerProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const viewStyle: ViewStyle = {
-    ...(flexible ? { flex: 1 } : undefined),
-    ...(size != null ? { width: size, height: size } : undefined),
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-  };
-
-  return <View style={viewStyle} testID={testID} />;
+  return (
+    <View
+      testID={testID}
+      style={[
+        flexible && styles.flexible,
+        size != null && { width: size, height: size },
+        style,
+        hidden && styles.hidden,
+      ]}
+    />
+  );
 }
 
 export * from './types';
diff --git a/packages/expo-ui/src/universal/Switch/index.tsx b/packages/expo-ui/src/universal/Switch/index.tsx
index 52d02b8f754b47..6580a60d7c5fad 100644
--- a/packages/expo-ui/src/universal/Switch/index.tsx
+++ b/packages/expo-ui/src/universal/Switch/index.tsx
@@ -1,21 +1,26 @@
-import { Switch as RNSwitch, View, Text } from 'react-native';
+import { Switch as RNSwitch, View, Text, StyleSheet } from 'react-native';
 
 import type { SwitchProps } from './types';
 
+const styles = StyleSheet.create({
+  view: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
 /**
  * A toggle control that switches between on and off states.
  */
-export function Switch({ value, onValueChange, label, disabled, testID }: SwitchProps) {
+export function Switch({ value, onValueChange, label, disabled = false, testID }: SwitchProps) {
   if (label) {
     return (
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 8,
-          opacity: disabled ? 0.5 : 1,
-        }}>
+      <View style={[styles.view, disabled && styles.disabled]}>
         <Text>{label}</Text>
         <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
       </View>
diff --git a/packages/expo-ui/src/universal/Text/index.tsx b/packages/expo-ui/src/universal/Text/index.tsx
index f2a2e3ff4a372d..33695801149763 100644
--- a/packages/expo-ui/src/universal/Text/index.tsx
+++ b/packages/expo-ui/src/universal/Text/index.tsx
@@ -1,8 +1,15 @@
-import { Text as RNText, useColorScheme, type TextStyle } from 'react-native';
+import { Text as RNText, StyleSheet, useColorScheme } from 'react-native';
 
 import type { TextProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  light: { color: '#000000' },
+  dark: { color: '#FFFFFF' },
+  hidden: { display: 'none' },
+  disabled: { opacity: 0.5 },
+});
+
 /**
  * A component for displaying styled text content.
  */
@@ -14,56 +21,30 @@ export function Text({
   onPress,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: TextProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
   const isDarkScheme = useColorScheme() === 'dark';
 
-  const textStyleOverrides: TextStyle = {
-    ...(textStyle?.fontSize != null ? { fontSize: textStyle.fontSize } : undefined),
-    ...(textStyle?.fontWeight != null ? { fontWeight: textStyle.fontWeight } : undefined),
-    ...(textStyle?.fontFamily != null ? { fontFamily: textStyle.fontFamily } : undefined),
-    ...(textStyle?.color != null ? { color: textStyle.color } : undefined),
-    ...(textStyle?.lineHeight != null ? { lineHeight: textStyle.lineHeight } : undefined),
-    ...(textStyle?.letterSpacing != null ? { letterSpacing: textStyle.letterSpacing } : undefined),
-    ...(textStyle?.textAlign != null ? { textAlign: textStyle.textAlign } : undefined),
-  };
-
   return (
     <RNText
-      style={[
-        isDarkScheme ? textDarkStyle : textLightStyle,
-        style,
-        textStyleOverrides,
-        hidden ? hiddenStyle : null,
-        disabled ? disabledStyle : null,
-      ]}
       numberOfLines={numberOfLines}
       onPress={onPress}
       disabled={disabled}
-      testID={testID}>
+      testID={testID}
+      style={[
+        isDarkScheme ? styles.dark : styles.light,
+        style,
+        textStyle,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </RNText>
   );
 }
 
-const textLightStyle: TextStyle = {
-  color: '#000000',
-};
-
-const textDarkStyle: TextStyle = {
-  color: '#FFFFFF',
-};
-
-const hiddenStyle: TextStyle = {
-  display: 'none',
-};
-
-const disabledStyle: TextStyle = {
-  opacity: 0.5,
-};
-
 export * from './types';
diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md
index 1d54e398eca095..73dd7f491f2392 100644
--- a/packages/expo/CHANGELOG.md
+++ b/packages/expo/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 ### 🐛 Bug fixes
 
+- Bump to `whatwg-url-minimum@0.1.2` to fix missing `Symbol.toStringTag`s on `URL` and `URLSearchParams` ([#45521](https://github.com/expo/expo/pull/45521) by [@kitten](https://github.com/kitten))
+
 ### 💡 Others
 
 - Remove pinned dependencies ([#45520](https://github.com/expo/expo/pull/45520) by [@kitten](https://githun.com/kitten))
diff --git a/packages/expo/package.json b/packages/expo/package.json
index d1970972e89389..d6272cde02a0e7 100644
--- a/packages/expo/package.json
+++ b/packages/expo/package.json
@@ -97,7 +97,7 @@
     "expo-modules-core": "workspace:~56.0.4",
     "pretty-format": "^29.7.0",
     "react-refresh": "^0.14.2",
-    "whatwg-url-minimum": "^0.1.1"
+    "whatwg-url-minimum": "^0.1.2"
   },
   "devDependencies": {
     "@expo/dom-webview": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2829e1146ae3b3..a5346e41ffb153 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,6 +61,9 @@ importers:
       '@types/jest':
         specifier: ^29.5.12
         version: 29.5.14
+      '@types/node':
+        specifier: ^22.14.0
+        version: 22.19.15
       '@vercel/ncc':
         specifier: ^0.38.4
         version: 0.38.4
@@ -72,10 +75,10 @@ importers:
         version: link:tools
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
+        version: 29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))
       ts-node:
         specifier: ^10.9.2
-        version: 10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)
+        version: 10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)
       typescript:
         specifier: ^6.0.2
         version: 6.0.3
@@ -1181,7 +1184,7 @@ importers:
         version: link:../../packages/expo-module-scripts
       jest:
         specifier: ^29.2.1
-        version: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
+        version: 29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))
       react-test-renderer:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
@@ -2510,7 +2513,7 @@ importers:
         version: 6.1.3
       typescript-plugin-css-modules:
         specifier: ^5.2.0
-        version: 5.2.0(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))(typescript@6.0.3)
+        version: 5.2.0(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))(typescript@6.0.3)
 
   packages/@expo/metro-config:
     dependencies:
@@ -3380,7 +3383,7 @@ importers:
         version: eslint@8.57.1
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
+        version: 29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))
       prettier:
         specifier: ^3.5.3
         version: 3.5.3
@@ -3417,10 +3420,10 @@ importers:
         version: 6.5.0(eslint@9.39.4(jiti@1.21.7))
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
+        version: 29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))
       ts-jest:
         specifier: ^29.1.2
-        version: 29.4.9(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(typescript@6.0.3)
+        version: 29.4.9(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(typescript@6.0.3)
 
   packages/expo:
     dependencies:
@@ -3500,8 +3503,8 @@ importers:
         specifier: ^0.14.2
         version: 0.14.2
       whatwg-url-minimum:
-        specifier: ^0.1.1
-        version: 0.1.1
+        specifier: ^0.1.2
+        version: 0.1.2
     devDependencies:
       '@expo/metro-runtime':
         specifier: workspace:*
@@ -3789,7 +3792,7 @@ importers:
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/react':
         specifier: ~19.2.0
         version: 19.2.14
@@ -3981,7 +3984,7 @@ importers:
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/react':
         specifier: ~19.2.0
         version: 19.2.14
@@ -4414,7 +4417,7 @@ importers:
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/react':
         specifier: ~19.2.0
         version: 19.2.14
@@ -4535,7 +4538,7 @@ importers:
     devDependencies:
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/react':
         specifier: ~19.2.0
         version: 19.2.14
@@ -4566,7 +4569,7 @@ importers:
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/react':
         specifier: ~19.2.0
         version: 19.2.14
@@ -4791,7 +4794,7 @@ importers:
         version: 0.85.3(@babel/core@7.29.0)(react@19.2.3)
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/jest':
         specifier: ^29.2.1
         version: 29.5.14
@@ -4815,13 +4818,13 @@ importers:
         version: prettier@2.8.8
       jest-watch-typeahead:
         specifier: 2.2.1
-        version: 2.2.1(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))
+        version: 2.2.1(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))
       resolve-workspace-root:
         specifier: ^2.0.0
         version: 2.0.1
       ts-jest:
         specifier: ~29.4.7
-        version: 29.4.9(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(typescript@6.0.3)
+        version: 29.4.9(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(typescript@6.0.3)
     devDependencies:
       '@babel/core':
         specifier: ^7.26.0
@@ -4877,11 +4880,11 @@ importers:
         version: 0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3)
       react-native-worklets:
         specifier: ^0.7.4 || ^0.8.0
-        version: 0.8.1(patch_hash=3f49a21b44ba558989a3366eeff9c92ee331e18b736dbe89c5962ecc6f2802f1)(@babel/core@7.29.0)(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react@19.2.3)
+        version: 0.8.3(patch_hash=3f49a21b44ba558989a3366eeff9c92ee331e18b736dbe89c5962ecc6f2802f1)(@babel/core@7.29.0)(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react@19.2.3)
     devDependencies:
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/invariant':
         specifier: ^2.2.33
         version: 2.2.37
@@ -5234,7 +5237,7 @@ importers:
     devDependencies:
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/react':
         specifier: ~19.2.0
         version: 19.2.14
@@ -5927,7 +5930,7 @@ importers:
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@testing-library/react-native':
         specifier: ^13.3.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/react':
         specifier: ~19.2.2
         version: 19.2.14
@@ -6005,7 +6008,7 @@ importers:
         version: 2.0.0
       jest-watch-typeahead:
         specifier: 2.2.1
-        version: 2.2.1(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))
+        version: 2.2.1(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)))
       json5:
         specifier: ^2.2.3
         version: 2.2.3
@@ -6205,7 +6208,7 @@ importers:
         version: 13.0.6
       inquirer:
         specifier: ^8.2.2
-        version: 8.2.7(@types/node@22.13.17)
+        version: 8.2.7(@types/node@22.19.15)
       jsondiffpatch:
         specifier: ^0.4.1
         version: 0.4.1
@@ -6301,8 +6304,8 @@ importers:
         specifier: ^8.2.10
         version: 8.2.12
       '@types/node':
-        specifier: ~22.13.17
-        version: 22.13.17
+        specifier: ^22.14.0
+        version: 22.19.15
       '@types/npm-registry-fetch':
         specifier: ^8.0.7
         version: 8.0.9
@@ -7479,7 +7482,7 @@ packages:
 
   '@expo/bunyan@4.0.1':
     resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==}
-    engines: {'0': node >=0.10.0}
+    engines: {node: '>=0.10.0'}
 
   '@expo/code-signing-certificates@0.0.6':
     resolution: {integrity: sha512-iNe0puxwBNEcuua9gmTGzq+SuMDa0iATai1FlFTMHJ/vUmKvN/V//drXoLJkVb5i5H3iE/n/qIJxyoBnXouD0w==}
@@ -9332,15 +9335,9 @@ packages:
   '@types/node-forge@1.3.14':
     resolution: {integrity: sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==}
 
-  '@types/node@22.13.17':
-    resolution: {integrity: sha512-nAJuQXoyPj04uLgu+obZcSmsfOenUg6DxPKogeUy6yNCFwWaj5sBF8/G/pNo8EtBJjAfSVgfIlugR/BCOleO+g==}
-
   '@types/node@22.19.15':
     resolution: {integrity: sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==}
 
-  '@types/node@25.5.0':
-    resolution: {integrity: sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==}
-
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
@@ -9560,6 +9557,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@unrs/resolver-binding-android-arm-eabi@1.11.1':
     resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
@@ -14254,14 +14252,6 @@ packages:
       react: 19.2.3
       react-native: 0.85.3
 
-  react-native-worklets@0.8.1:
-    resolution: {integrity: sha512-oWP/lStsAHU6oYCaWDXrda/wOHVdhusQJz1e6x9gPnXdFf4ndNDAOtWCmk2zGrAnlapfyA3rM6PCQq94mPg9cw==}
-    peerDependencies:
-      '@babel/core': '*'
-      '@react-native/metro-config': '*'
-      react: 19.2.3
-      react-native: 0.85.3
-
   react-native-worklets@0.8.3:
     resolution: {integrity: sha512-oCBJROyLU7yG/1R8s0INMflygTH71bx+5XcYkH0CM938TlhSoVbiunE1WVW5FZa51vwYqfLie/IXMX2s1Kh3eg==}
     peerDependencies:
@@ -15442,15 +15432,9 @@ packages:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
-  undici-types@6.20.0:
-    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
-
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici-types@7.18.2:
-    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
-
   undici@6.24.1:
     resolution: {integrity: sha512-sC+b0tB1whOCzbtlx20fx3WgCXwkW627p4EA9uM+/tNNPkSS+eSEld6pAs9nDv7WbY1UUljBMYPtu9BCOrCWKA==}
     engines: {node: '>=18.17'}
@@ -15874,8 +15858,8 @@ packages:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
 
-  whatwg-url-minimum@0.1.1:
-    resolution: {integrity: sha512-u2FNVjFVFZhdjb502KzXy1gKn1mEisQRJssmSJT8CPhZdZa0AP6VCbWlXERKyGu0l09t0k50FiDiralpGhBxgA==}
+  whatwg-url-minimum@0.1.2:
+    resolution: {integrity: sha512-XPEm0XFQWNVG292lII1PrRRJl3sItrs7CettZ4ncYxuDVpLyy+NwlGyut2hXI0JswcJUxeCH+CyOJK0ZzAXD6A==}
 
   whatwg-url@11.0.0:
     resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
@@ -17926,12 +17910,12 @@ snapshots:
   '@img/sharp-win32-x64@0.34.2':
     optional: true
 
-  '@inquirer/external-editor@1.0.3(@types/node@22.13.17)':
+  '@inquirer/external-editor@1.0.3(@types/node@22.19.15)':
     dependencies:
       chardet: 2.1.1
       iconv-lite: 0.7.2
     optionalDependencies:
-      '@types/node': 22.13.17
+      '@types/node': 22.19.15
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -18004,41 +17988,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))':
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/reporters': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 22.19.15
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-      jest-haste-map: 29.7.0
-      jest-message-util: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-resolve-dependencies: 29.7.0
-      jest-runner: 29.7.0
-      jest-runtime: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      jest-watcher: 29.7.0
-      micromatch: 4.0.8
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-ansi: 6.0.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   '@jest/create-cache-key-function@29.7.0':
     dependencies:
       '@jest/types': 29.6.3
@@ -18876,7 +18825,9 @@ snapshots:
       metro-runtime: 0.84.4
     transitivePeerDependencies:
       - '@babel/core'
+      - bufferutil
       - supports-color
+      - utf-8-validate
 
   '@react-native/normalize-colors@0.74.89': {}
 
@@ -19181,18 +19132,6 @@ snapshots:
     optionalDependencies:
       jest: 29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))
 
-  '@testing-library/react-native@13.3.3(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      jest-matcher-utils: 30.3.0
-      picocolors: 1.1.1
-      pretty-format: 30.3.0
-      react: 19.2.3
-      react-native: 0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3)
-      react-test-renderer: 19.2.3(react@19.2.3)
-      redent: 3.0.0
-    optionalDependencies:
-      jest: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-
   '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -19506,18 +19445,10 @@ snapshots:
     dependencies:
       '@types/node': 22.19.15
 
-  '@types/node@22.13.17':
-    dependencies:
-      undici-types: 6.20.0
-
   '@types/node@22.19.15':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@25.5.0':
-    dependencies:
-      undici-types: 7.18.2
-
   '@types/normalize-package-data@2.4.4': {}
 
   '@types/npm-package-arg@6.1.4': {}
@@ -20896,21 +20827,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  create-jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)):
-    dependencies:
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-      jest-util: 29.7.0
-      prompts: 2.4.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   create-require@1.1.1: {}
 
   cross-fetch@3.2.0(encoding@0.1.13):
@@ -22732,9 +22648,9 @@ snapshots:
     dependencies:
       css-in-js-utils: 3.1.0
 
-  inquirer@8.2.7(@types/node@22.13.17):
+  inquirer@8.2.7(@types/node@22.19.15):
     dependencies:
-      '@inquirer/external-editor': 1.0.3(@types/node@22.13.17)
+      '@inquirer/external-editor': 1.0.3(@types/node@22.19.15)
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       cli-cursor: 3.1.0
@@ -23144,25 +23060,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-cli@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)):
-    dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-      exit: 0.1.2
-      import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jest-config@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)):
     dependencies:
       '@babel/core': 7.29.0
@@ -23194,68 +23091,6 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-config@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.29.0)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.8
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    optionalDependencies:
-      '@types/node': 22.19.15
-      ts-node: 10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
-  jest-config@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.29.0)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.8
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    optionalDependencies:
-      '@types/node': 25.5.0
-      ts-node: 10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
   jest-diff@29.7.0:
     dependencies:
       chalk: 4.1.2
@@ -23499,11 +23334,11 @@ snapshots:
       chalk: 3.0.0
       prompts: 2.4.2
 
-  jest-watch-typeahead@2.2.1(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))):
+  jest-watch-typeahead@2.2.1(jest@29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))):
     dependencies:
       ansi-escapes: 6.2.1
       chalk: 4.1.2
-      jest: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
+      jest: 29.7.0(@types/node@22.19.15)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))
       jest-regex-util: 29.6.3
       jest-watcher: 29.7.0
       slash: 5.1.0
@@ -23546,18 +23381,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)):
-    dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-      '@jest/types': 29.6.3
-      import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jimp-compact@0.16.1: {}
 
   jiti@1.21.7: {}
@@ -24917,13 +24740,13 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.49
 
-  postcss-load-config@3.1.4(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)):
+  postcss-load-config@3.1.4(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.3
     optionalDependencies:
       postcss: 8.4.49
-      ts-node: 10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)
+      ts-node: 10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3)
 
   postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.4.49)(tsx@4.21.0)(yaml@2.8.3):
     dependencies:
@@ -25361,26 +25184,6 @@ snapshots:
       react: 19.2.3
       react-native: 0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3)
 
-  react-native-worklets@0.8.1(patch_hash=3f49a21b44ba558989a3366eeff9c92ee331e18b736dbe89c5962ecc6f2802f1)(@babel/core@7.29.0)(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react@19.2.3):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@react-native/metro-config': 0.85.3(@babel/core@7.29.0)
-      convert-source-map: 2.0.0
-      react: 19.2.3
-      react-native: 0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3)
-      semver: 7.7.4
-    transitivePeerDependencies:
-      - supports-color
-
   react-native-worklets@0.8.3(patch_hash=3f49a21b44ba558989a3366eeff9c92ee331e18b736dbe89c5962ecc6f2802f1)(@babel/core@7.29.0)(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(react-native@0.85.3(@babel/core@7.29.0)(@react-native/jest-preset@0.85.3(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react@19.2.3):
     dependencies:
       '@babel/core': 7.29.0
@@ -26563,26 +26366,6 @@ snapshots:
       babel-jest: 29.7.0(@babel/core@7.29.0)
       jest-util: 29.7.0
 
-  ts-jest@29.4.9(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3)))(typescript@6.0.3):
-    dependencies:
-      bs-logger: 0.2.6
-      fast-json-stable-stringify: 2.1.0
-      handlebars: 4.7.9
-      jest: 29.7.0(@types/node@25.5.0)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
-      json5: 2.2.3
-      lodash.memoize: 4.1.2
-      make-error: 1.3.6
-      semver: 7.7.4
-      type-fest: 4.41.0
-      typescript: 6.0.3
-      yargs-parser: 21.1.1
-    optionalDependencies:
-      '@babel/core': 7.29.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.29.0)
-      jest-util: 29.7.0
-
   ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
@@ -26603,26 +26386,6 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.15.18
 
-  ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.12
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 25.5.0
-      acorn: 8.16.0
-      acorn-walk: 8.3.5
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.4
-      make-error: 1.3.6
-      typescript: 6.0.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optionalDependencies:
-      '@swc/core': 1.15.18
-
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -26744,7 +26507,7 @@ snapshots:
       typescript: 5.9.3
       yaml: 2.8.3
 
-  typescript-plugin-css-modules@5.2.0(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))(typescript@6.0.3):
+  typescript-plugin-css-modules@5.2.0(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))(typescript@6.0.3):
     dependencies:
       '@types/postcss-modules-local-by-default': 4.0.2
       '@types/postcss-modules-scope': 3.0.4
@@ -26753,7 +26516,7 @@ snapshots:
       less: 4.6.4
       lodash.camelcase: 4.3.0
       postcss: 8.4.49
-      postcss-load-config: 3.1.4(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@25.5.0)(typescript@6.0.3))
+      postcss-load-config: 3.1.4(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.15.18)(@types/node@22.19.15)(typescript@6.0.3))
       postcss-modules-extract-imports: 3.1.0(postcss@8.4.49)
       postcss-modules-local-by-default: 4.2.0(postcss@8.4.49)
       postcss-modules-scope: 3.2.1(postcss@8.4.49)
@@ -26798,12 +26561,8 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  undici-types@6.20.0: {}
-
   undici-types@6.21.0: {}
 
-  undici-types@7.18.2: {}
-
   undici@6.24.1: {}
 
   unfetch@4.2.0: {}
@@ -27333,7 +27092,7 @@ snapshots:
 
   whatwg-mimetype@3.0.0: {}
 
-  whatwg-url-minimum@0.1.1: {}
+  whatwg-url-minimum@0.1.2: {}
 
   whatwg-url@11.0.0:
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index bf4a82a95616e0..d64a2bf5224250 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -47,3 +47,4 @@ minimumReleaseAgeExclude:
   - multitars
   - 'react-native-worklets'
   - 'react-native-screens'
+  - 'whatwg-url-minimum'
diff --git a/tools/package.json b/tools/package.json
index d8cb0b5964dfdc..dbc73bfb9a3f8f 100644
--- a/tools/package.json
+++ b/tools/package.json
@@ -82,7 +82,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/getenv": "^1.0.3",
     "@types/inquirer": "^8.2.10",
-    "@types/node": "~22.13.17",
+    "@types/node": "^22.14.0",
     "@types/npm-registry-fetch": "^8.0.7",
     "@types/semver": "^7.5.8",
     "@types/uuid": "^9.0.2",