@onlynative/components 0.0.0-alpha.3 → 0.0.0-alpha.4

package/dist/appbar/index.js

@@ -100,8 +100,7 @@ function selectRTL(ltr, rtl) {
 
 // src/appbar/AppBar.tsx
 var import_react3 = require("react");
-var import_react_native6 = require("react-native");
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_react_native7 = require("react-native");
 
 // src/icon-button/IconButton.tsx
 var import_core = require("@onlynative/core");
@@ -595,10 +594,22 @@ function IconButton({
   );
 }
 
+// src/safe-area.tsx
+var import_react_native4 = require("react-native");
+var SafeAreaViewComponent = import_react_native4.View;
+try {
+  const safeArea = require("react-native-safe-area-context");
+  SafeAreaViewComponent = safeArea.SafeAreaView;
+} catch {
+  console.warn(
+    '[@onlynative/components] "react-native-safe-area-context" is not installed. Layout and AppBar will render without safe area insets. Run `npx expo install react-native-safe-area-context` to fix this.'
+  );
+}
+
 // src/typography/Typography.tsx
 var import_core2 = require("@onlynative/core");
 var import_react2 = require("react");
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var HEADING_VARIANTS = /* @__PURE__ */ new Set([
   "displayLarge",
@@ -613,7 +624,7 @@ function Typography({
   variant = "bodyMedium",
   color,
   style,
-  as: Component = import_react_native4.Text,
+  as: Component = import_react_native5.Text,
   accessibilityRole,
   ...textProps
 }) {
@@ -622,7 +633,7 @@ function Typography({
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
   const lineHeightFix = (0, import_react2.useMemo)(() => {
     if (!style) return void 0;
-    const flat = import_react_native4.StyleSheet.flatten(style);
+    const flat = import_react_native5.StyleSheet.flatten(style);
     if (!(flat == null ? void 0 : flat.fontSize) || flat.lineHeight) return void 0;
     const ratio = typographyStyle.lineHeight / typographyStyle.fontSize;
     return { lineHeight: Math.ceil(flat.fontSize * ratio) };
@@ -646,7 +657,7 @@ function Typography({
 
 // src/appbar/styles.ts
 var import_core3 = require("@onlynative/core");
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 function getColorSchemeColors(theme, colorScheme) {
   switch (colorScheme) {
     case "surfaceContainerLowest":
@@ -703,7 +714,7 @@ function getColorSchemeColors(theme, colorScheme) {
 function createStyles2(theme, schemeColors) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core3.defaultTopAppBarTokens;
-  return import_react_native5.StyleSheet.create({
+  return import_react_native6.StyleSheet.create({
     root: {
       backgroundColor: schemeColors.containerColor
     },
@@ -792,7 +803,7 @@ function createStyles2(theme, schemeColors) {
 // src/appbar/AppBar.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function getBackIcon() {
-  if (import_react_native6.Platform.OS === "ios") {
+  if (import_react_native7.Platform.OS === "ios") {
     return selectRTL("chevron-left", "chevron-right");
   }
   return selectRTL("arrow-left", "arrow-right");
@@ -821,9 +832,9 @@ function getSizeStyle2(styles, size) {
 }
 function withTopInset(enabled, content, style) {
   if (enabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_safe_area_context.SafeAreaView, { edges: ["top"], style, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SafeAreaViewComponent, { edges: ["top"], style, children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style, children: content });
 }
 function measureWidth(event) {
   return Math.round(event.nativeEvent.layout.width);
@@ -884,7 +895,7 @@ function AppBar({
     if (!canGoBack) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: styles.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       IconButton,
       {
         icon: getBackIcon(),
@@ -903,8 +914,8 @@ function AppBar({
     if (!actions || actions.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native6.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: styles.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native7.View,
       {
         style: styles.iconFrame,
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -947,9 +958,9 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const topRow = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: styles.topRow, children: [
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native7.View, { style: styles.topRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native6.View,
+      import_react_native7.View,
       {
         collapsable: false,
         onLayout: onLeadingLayout,
@@ -957,9 +968,9 @@ function AppBar({
         children: leadingContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: styles.topRowSpacer }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native6.View,
+      import_react_native7.View,
       {
         collapsable: false,
         onLayout: onActionsLayout,
@@ -981,10 +992,10 @@ function AppBar({
     containerOverride
   ];
   if (isExpanded) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: [styles.expandedContainer, getSizeStyle2(styles, size)], children: [
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native7.View, { style: [styles.expandedContainer, getSizeStyle2(styles, size)], children: [
       topRow,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native6.View,
+        import_react_native7.View,
         {
           style: [
             styles.expandedTitleContainer,
@@ -1008,11 +1019,11 @@ function AppBar({
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: styles.smallContainer, children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native7.View, { style: styles.smallContainer, children: [
     topRow,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [styles.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: [styles.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Typography,
       {
         ...APP_BAR_TITLE_TEXT_PROPS,
@@ -1027,7 +1038,7 @@ function AppBar({
       }
     ) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.ts

@@ -16,6 +16,5 @@ export { Avatar, AvatarProps, AvatarSize } from './avatar/index.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-native';
-import 'react-native-safe-area-context';
 import '@onlynative/core';
 import '@expo/vector-icons/MaterialCommunityIcons';

package/dist/index.js

@@ -105,8 +105,21 @@ function Typography({
 // src/layout/Layout.tsx
 var import_core2 = require("@onlynative/core");
 var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+
+// src/safe-area.tsx
 var import_react_native2 = require("react-native");
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var SafeAreaViewComponent = import_react_native2.View;
+try {
+  const safeArea = require("react-native-safe-area-context");
+  SafeAreaViewComponent = safeArea.SafeAreaView;
+} catch {
+  console.warn(
+    '[@onlynative/components] "react-native-safe-area-context" is not installed. Layout and AppBar will render without safe area insets. Run `npx expo install react-native-safe-area-context` to fix this.'
+  );
+}
+
+// src/layout/Layout.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultEdges = ["bottom"];
 function resolveEdges(immersive, edges) {
@@ -118,7 +131,7 @@ function resolveEdges(immersive, edges) {
   }
   return defaultEdges;
 }
-var styles = import_react_native2.StyleSheet.create({
+var styles = import_react_native3.StyleSheet.create({
   root: {
     flex: 1
   }
@@ -127,7 +140,7 @@ function removeBackgroundColor(style) {
   if (!style) {
     return void 0;
   }
-  const flattenedStyle = import_react_native2.StyleSheet.flatten(style);
+  const flattenedStyle = import_react_native3.StyleSheet.flatten(style);
   if (!flattenedStyle || flattenedStyle.backgroundColor === void 0) {
     return style;
   }
@@ -150,7 +163,7 @@ function Layout({ immersive, edges, children, style }) {
     [immersive, edges]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native_safe_area_context.SafeAreaView,
+    SafeAreaViewComponent,
     {
       style: [styles.root, themeBackgroundStyle, styleWithoutBackground],
       edges: safeAreaEdges,
@@ -162,7 +175,7 @@ function Layout({ immersive, edges, children, style }) {
 // src/layout/Box.tsx
 var import_core3 = require("@onlynative/core");
 var import_react3 = require("react");
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 
 // src/layout/resolveSpacing.ts
 function resolveSpacing(spacing, value) {
@@ -260,7 +273,7 @@ function Box({
     justify,
     bg
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { ...viewProps, style: [layoutStyle, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { ...viewProps, style: [layoutStyle, style] });
 }
 
 // src/layout/Column.tsx
@@ -279,7 +292,7 @@ function Column({ inverted = false, style, ...boxProps }) {
 // src/layout/Grid.tsx
 var import_core4 = require("@onlynative/core");
 var import_react6 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 
 // src/layout/Row.tsx
 var import_react5 = require("react");
@@ -333,7 +346,7 @@ function Grid({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { wrap: true, rowGap: resolvedRowGap, ...rowProps, style: [rowStyle, style], children: import_react6.default.Children.map(
     children,
-    (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: cellStyle, children: child }) : null
+    (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: cellStyle, children: child }) : null
   ) });
 }
 
@@ -385,9 +398,9 @@ function blendColor(base, overlay, overlayAlpha) {
 }
 
 // ../utils/src/elevation.ts
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 function elevationStyle(level) {
-  if (import_react_native5.Platform.OS === "web") {
+  if (import_react_native6.Platform.OS === "web") {
     const { shadowOffset, shadowOpacity, shadowRadius } = level;
     if (shadowOpacity === 0) {
       return { boxShadow: "none" };
@@ -430,7 +443,7 @@ function getMaterialCommunityIcons() {
 }
 
 // ../utils/src/pressable.ts
-var import_react_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
   if (typeof style === "function") {
     return (state) => [
@@ -450,25 +463,25 @@ function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, sty
   ];
 }
 function resolveColorFromStyle(...styles3) {
-  const flattened = import_react_native6.StyleSheet.flatten(styles3);
+  const flattened = import_react_native7.StyleSheet.flatten(styles3);
   return typeof (flattened == null ? void 0 : flattened.color) === "string" ? flattened.color : void 0;
 }
 
 // ../utils/src/rtl.ts
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 function transformOrigin(vertical = "top") {
-  return import_react_native7.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+  return import_react_native8.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
 }
 function selectRTL(ltr, rtl) {
-  return import_react_native7.I18nManager.isRTL ? rtl : ltr;
+  return import_react_native8.I18nManager.isRTL ? rtl : ltr;
 }
 
 // src/button/Button.tsx
 var import_react7 = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 
 // src/button/styles.ts
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 function getVariantColors(theme, variant) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
@@ -649,7 +662,7 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
   const elevationLevel1 = elevationStyle(theme.elevation.level1);
   const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native8.StyleSheet.create({
+  return import_react_native9.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -747,12 +760,12 @@ function Button({
     [isDisabled, styles3.disabledLabel, styles3.label, labelStyleOverride]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_react_native9.Pressable,
+    import_react_native10.Pressable,
     {
       ...props,
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native9.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native10.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolvePressableStyle(
         styles3.container,
@@ -772,7 +785,7 @@ function Button({
             style: styles3.leadingIcon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.Text, { style: computedLabelStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.Text, { style: computedLabelStyle, children }),
         trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MaterialCommunityIcons,
           {
@@ -790,15 +803,15 @@ function Button({
 // src/icon-button/IconButton.tsx
 var import_core6 = require("@onlynative/core");
 var import_react8 = require("react");
-var import_react_native11 = require("react-native");
+var import_react_native12 = require("react-native");
 
 // src/icon-button/styles.ts
-var import_react_native10 = require("react-native");
+var import_react_native11 = require("react-native");
 function createStyles2(theme) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
-  return import_react_native10.StyleSheet.create({
+  return import_react_native11.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -1238,7 +1251,7 @@ function IconButton({
     };
   }, [containerColor, resolvedIconColor, theme.stateLayer]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_native11.Pressable,
+    import_react_native12.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -1282,12 +1295,11 @@ function IconButton({
 // src/appbar/AppBar.tsx
 var import_core8 = require("@onlynative/core");
 var import_react9 = require("react");
-var import_react_native13 = require("react-native");
-var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_react_native14 = require("react-native");
 
 // src/appbar/styles.ts
 var import_core7 = require("@onlynative/core");
-var import_react_native12 = require("react-native");
+var import_react_native13 = require("react-native");
 function getColorSchemeColors(theme, colorScheme) {
   switch (colorScheme) {
     case "surfaceContainerLowest":
@@ -1344,7 +1356,7 @@ function getColorSchemeColors(theme, colorScheme) {
 function createStyles3(theme, schemeColors) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core7.defaultTopAppBarTokens;
-  return import_react_native12.StyleSheet.create({
+  return import_react_native13.StyleSheet.create({
     root: {
       backgroundColor: schemeColors.containerColor
     },
@@ -1433,7 +1445,7 @@ function createStyles3(theme, schemeColors) {
 // src/appbar/AppBar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function getBackIcon() {
-  if (import_react_native13.Platform.OS === "ios") {
+  if (import_react_native14.Platform.OS === "ios") {
     return selectRTL("chevron-left", "chevron-right");
   }
   return selectRTL("arrow-left", "arrow-right");
@@ -1462,9 +1474,9 @@ function getSizeStyle2(styles3, size) {
 }
 function withTopInset(enabled, content, style) {
   if (enabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context2.SafeAreaView, { edges: ["top"], style, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SafeAreaViewComponent, { edges: ["top"], style, children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style, children: content });
 }
 function measureWidth(event) {
   return Math.round(event.nativeEvent.layout.width);
@@ -1525,7 +1537,7 @@ function AppBar({
     if (!canGoBack) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles3.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       IconButton,
       {
         icon: getBackIcon(),
@@ -1544,8 +1556,8 @@ function AppBar({
     if (!actions || actions.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native13.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles3.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native14.View,
       {
         style: styles3.iconFrame,
         children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1588,9 +1600,9 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: styles3.topRow, children: [
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles3.topRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native13.View,
+      import_react_native14.View,
       {
         collapsable: false,
         onLayout: onLeadingLayout,
@@ -1598,9 +1610,9 @@ function AppBar({
         children: leadingContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles3.topRowSpacer }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native13.View,
+      import_react_native14.View,
       {
         collapsable: false,
         onLayout: onActionsLayout,
@@ -1622,10 +1634,10 @@ function AppBar({
     containerOverride
   ];
   if (isExpanded) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: [styles3.expandedContainer, getSizeStyle2(styles3, size)], children: [
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: [styles3.expandedContainer, getSizeStyle2(styles3, size)], children: [
       topRow,
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_react_native13.View,
+        import_react_native14.View,
         {
           style: [
             styles3.expandedTitleContainer,
@@ -1649,11 +1661,11 @@ function AppBar({
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: styles3.smallContainer, children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles3.smallContainer, children: [
     topRow,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: [styles3.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: [styles3.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Typography,
       {
         ...APP_BAR_TITLE_TEXT_PROPS,
@@ -1668,16 +1680,16 @@ function AppBar({
       }
     ) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
 }
 
 // src/card/Card.tsx
 var import_core9 = require("@onlynative/core");
 var import_react10 = require("react");
-var import_react_native15 = require("react-native");
+var import_react_native16 = require("react-native");
 
 // src/card/styles.ts
-var import_react_native14 = require("react-native");
+var import_react_native15 = require("react-native");
 function getVariantColors2(theme, variant) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
@@ -1761,7 +1773,7 @@ function createStyles4(theme, variant, containerColor) {
   const elevationLevel1 = elevationStyle(theme.elevation.level1);
   const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native14.StyleSheet.create({
+  return import_react_native15.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerMedium,
       backgroundColor: colors.backgroundColor,
@@ -1811,15 +1823,15 @@ function Card({
     [theme, variant, containerColor]
   );
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native15.View, { ...props, style: [styles3.container, style], children });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { ...props, style: [styles3.container, style], children });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native15.Pressable,
+    import_react_native16.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native15.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native16.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvePressableStyle(
@@ -1830,7 +1842,7 @@ function Card({
         isDisabled,
         style
       ),
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native15.View, { style: styles3.disabledContent, children }) : children
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { style: styles3.disabledContent, children }) : children
     }
   );
 }
@@ -1838,10 +1850,10 @@ function Card({
 // src/chip/Chip.tsx
 var import_core10 = require("@onlynative/core");
 var import_react11 = require("react");
-var import_react_native17 = require("react-native");
+var import_react_native18 = require("react-native");
 
 // src/chip/styles.ts
-var import_react_native16 = require("react-native");
+var import_react_native17 = require("react-native");
 function getVariantColors3(theme, variant, elevated, selected) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
@@ -1969,7 +1981,7 @@ function createStyles5(theme, variant, elevated, selected, hasLeadingContent, ha
   const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const isElevated = elevated && variant !== "input";
   const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
-  return import_react_native16.StyleSheet.create({
+  return import_react_native17.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -2090,7 +2102,7 @@ function Chip({
   );
   const renderLeadingContent = () => {
     if (variant === "input" && avatar) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native17.View, { style: styles3.avatar, children: avatar });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.View, { style: styles3.avatar, children: avatar });
     }
     if (leadingIcon) {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2117,7 +2129,7 @@ function Chip({
     return null;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_react_native17.Pressable,
+    import_react_native18.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -2125,7 +2137,7 @@ function Chip({
         disabled: isDisabled,
         ...variant === "filter" ? { selected: isSelected } : void 0
       },
-      hitSlop: import_react_native17.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native18.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolvePressableStyle(
         styles3.container,
@@ -2137,9 +2149,9 @@ function Chip({
       ),
       children: [
         renderLeadingContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native17.Text, { style: computedLabelStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.Text, { style: computedLabelStyle, children }),
         showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native17.Pressable,
+          import_react_native18.Pressable,
           {
             onPress: onClose,
             accessibilityRole: "button",
@@ -2164,10 +2176,10 @@ function Chip({
 // src/checkbox/Checkbox.tsx
 var import_core11 = require("@onlynative/core");
 var import_react12 = require("react");
-var import_react_native19 = require("react-native");
+var import_react_native20 = require("react-native");
 
 // src/checkbox/styles.ts
-var import_react_native18 = require("react-native");
+var import_react_native19 = require("react-native");
 function getColors(theme, checked) {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (checked) {
@@ -2243,7 +2255,7 @@ function createStyles6(theme, checked, containerColor, contentColor) {
   );
   const size = 18;
   const touchTarget = 48;
-  return import_react_native18.StyleSheet.create({
+  return import_react_native19.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2318,7 +2330,7 @@ function Checkbox({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native19.Pressable,
+    import_react_native20.Pressable,
     {
       ...props,
       accessibilityRole: "checkbox",
@@ -2326,7 +2338,7 @@ function Checkbox({
         disabled: isDisabled,
         checked: isChecked
       },
-      hitSlop: import_react_native19.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native20.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolvePressableStyle(
@@ -2337,7 +2349,7 @@ function Checkbox({
         isDisabled,
         style
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native19.View, { style: [styles3.box, isDisabled ? styles3.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native20.View, { style: [styles3.box, isDisabled ? styles3.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         MaterialCommunityIcons,
         {
           name: "check",
@@ -2352,10 +2364,10 @@ function Checkbox({
 // src/radio/Radio.tsx
 var import_core12 = require("@onlynative/core");
 var import_react13 = require("react");
-var import_react_native21 = require("react-native");
+var import_react_native22 = require("react-native");
 
 // src/radio/styles.ts
-var import_react_native20 = require("react-native");
+var import_react_native21 = require("react-native");
 function getColors2(theme, selected) {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
@@ -2419,7 +2431,7 @@ function createStyles7(theme, selected, containerColor, contentColor) {
   const outerSize = 20;
   const innerSize = 10;
   const touchTarget = 48;
-  return import_react_native20.StyleSheet.create({
+  return import_react_native21.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2486,7 +2498,7 @@ function Radio({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native21.Pressable,
+    import_react_native22.Pressable,
     {
       ...props,
       accessibilityRole: "radio",
@@ -2494,7 +2506,7 @@ function Radio({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native21.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native22.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolvePressableStyle(
@@ -2506,11 +2518,11 @@ function Radio({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native21.View,
+        import_react_native22.View,
         {
           style: [styles3.outer, isDisabled ? styles3.disabledOuter : void 0],
           children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react_native21.View,
+            import_react_native22.View,
             {
               style: [
                 styles3.inner,
@@ -2527,10 +2539,10 @@ function Radio({
 // src/switch/Switch.tsx
 var import_core13 = require("@onlynative/core");
 var import_react14 = require("react");
-var import_react_native23 = require("react-native");
+var import_react_native24 = require("react-native");
 
 // src/switch/styles.ts
-var import_react_native22 = require("react-native");
+var import_react_native23 = require("react-native");
 function getColors3(theme, selected) {
   const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
@@ -2618,7 +2630,7 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
   const trackHeight = 32;
   const trackPadding = 4;
   const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
-  return import_react_native22.StyleSheet.create({
+  return import_react_native23.StyleSheet.create({
     track: {
       width: trackWidth,
       height: trackHeight,
@@ -2699,7 +2711,7 @@ function Switch({
   const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_native23.Pressable,
+    import_react_native24.Pressable,
     {
       ...props,
       accessibilityRole: "switch",
@@ -2707,7 +2719,7 @@ function Switch({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native23.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native24.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolvePressableStyle(
@@ -2719,7 +2731,7 @@ function Switch({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_react_native23.View,
+        import_react_native24.View,
         {
           style: [styles3.thumb, isDisabled ? styles3.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -2739,10 +2751,10 @@ function Switch({
 // src/text-field/TextField.tsx
 var import_core14 = require("@onlynative/core");
 var import_react15 = require("react");
-var import_react_native25 = require("react-native");
+var import_react_native26 = require("react-native");
 
 // src/text-field/styles.ts
-var import_react_native24 = require("react-native");
+var import_react_native25 = require("react-native");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -2801,7 +2813,7 @@ function createStyles9(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native24.StyleSheet.create({
+    styles: import_react_native25.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -2978,13 +2990,13 @@ function TextField({
   const isControlled = value !== void 0;
   const hasValue = isControlled ? value !== "" : internalHasText;
   const isLabelFloated = isFocused || hasValue;
-  const labelAnimRef = (0, import_react15.useRef)(new import_react_native25.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnimRef = (0, import_react15.useRef)(new import_react_native26.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
   (0, import_react15.useEffect)(() => {
-    import_react_native25.Animated.timing(labelAnim, {
+    import_react_native26.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native25.Platform.OS !== "web"
+      useNativeDriver: import_react_native26.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react15.useMemo)(() => {
@@ -3062,9 +3074,9 @@ function TextField({
     [styles3, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native25.View, { style: [styles3.root, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native25.View, { style: containerStyle, children: [
-      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: [styles3.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles3.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         MaterialCommunityIcons,
         {
           name: leadingIcon,
@@ -3073,14 +3085,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native25.View,
+        import_react_native26.View,
         {
           style: [
             styles3.inputWrapper,
             label ? styles3.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_react_native25.TextInput,
+            import_react_native26.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -3106,14 +3118,14 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native25.Pressable,
+        import_react_native26.Pressable,
         {
           onPress: onTrailingIconPress,
           disabled: isDisabled || !onTrailingIconPress,
           accessibilityRole: "button",
           hitSlop: 12,
           style: styles3.trailingIconPressable,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles3.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             MaterialCommunityIcons,
             {
               name: trailingIcon,
@@ -3124,7 +3136,7 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native25.Animated.Text,
+        import_react_native26.Animated.Text,
         {
           numberOfLines: 1,
           style: [
@@ -3144,10 +3156,10 @@ function TextField({
           children: label
         }
       ) : null,
-      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: indicatorStyle }) : null
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: indicatorStyle }) : null
     ] }) }),
-    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native25.Text,
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles3.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native26.Text,
       {
         style: [
           styles3.supportingText,
@@ -3162,10 +3174,10 @@ function TextField({
 // src/list/List.tsx
 var import_core15 = require("@onlynative/core");
 var import_react16 = require("react");
-var import_react_native27 = require("react-native");
+var import_react_native28 = require("react-native");
 
 // src/list/styles.ts
-var import_react_native26 = require("react-native");
+var import_react_native27 = require("react-native");
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -3174,7 +3186,7 @@ var MIN_HEIGHT = {
   3: 88
 };
 function createListStyles(theme) {
-  return import_react_native26.StyleSheet.create({
+  return import_react_native27.StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm
     }
@@ -3211,7 +3223,7 @@ function getItemColors(theme, containerColor) {
 }
 function createListItemStyles(theme, lines, containerColor) {
   const colors = getItemColors(theme, containerColor);
-  return import_react_native26.StyleSheet.create({
+  return import_react_native27.StyleSheet.create({
     container: {
       flexDirection: "row",
       alignItems: lines === 3 ? "flex-start" : "center",
@@ -3266,7 +3278,7 @@ function createListItemStyles(theme, lines, containerColor) {
   });
 }
 function createDividerStyles(theme, inset) {
-  return import_react_native26.StyleSheet.create({
+  return import_react_native27.StyleSheet.create({
     divider: {
       height: 1,
       backgroundColor: theme.colors.outlineVariant,
@@ -3280,13 +3292,13 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 function List({ children, style, ...props }) {
   const theme = (0, import_core15.useTheme)();
   const styles3 = (0, import_react16.useMemo)(() => createListStyles(theme), [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native27.View, { ...props, style: [styles3.container, style], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native28.View, { ...props, style: [styles3.container, style], children });
 }
 
 // src/list/ListItem.tsx
 var import_core16 = require("@onlynative/core");
 var import_react17 = require("react");
-var import_react_native28 = require("react-native");
+var import_react_native29 = require("react-native");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
   if (supportingText && overlineText || supportingText && supportingTextNumberOfLines && supportingTextNumberOfLines > 1) {
@@ -3322,12 +3334,12 @@ function ListItem({
     [theme, lines, containerColor]
   );
   const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.View, { style: styles3.leadingContent, children: leadingContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native28.View, { style: styles3.textBlock, children: [
-      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.overlineText, numberOfLines: 1, children: overlineText }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.headlineText, numberOfLines: 1, children: headlineText }),
+    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { style: styles3.leadingContent, children: leadingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles3.textBlock, children: [
+      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles3.overlineText, numberOfLines: 1, children: overlineText }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles3.headlineText, numberOfLines: 1, children: headlineText }),
       supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react_native28.Text,
+        import_react_native29.Text,
         {
           style: styles3.supportingText,
           numberOfLines: supportingTextNumberOfLines,
@@ -3335,21 +3347,21 @@ function ListItem({
         }
       )
     ] }),
-    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native28.View, { style: styles3.trailingBlock, children: [
-      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
+    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles3.trailingBlock, children: [
+      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles3.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
       trailingContent
     ] })
   ] });
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.View, { ...props, style: [styles3.container, style], children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { ...props, style: [styles3.container, style], children: content });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_native28.Pressable,
+    import_react_native29.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native28.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native29.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvePressableStyle(
@@ -3360,7 +3372,7 @@ function ListItem({
         isDisabled,
         style
       ),
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.View, { style: styles3.disabledContentWrapper, children: content }) : content
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { style: styles3.disabledContentWrapper, children: content }) : content
     }
   );
 }
@@ -3368,7 +3380,7 @@ function ListItem({
 // src/list/ListDivider.tsx
 var import_core17 = require("@onlynative/core");
 var import_react18 = require("react");
-var import_react_native29 = require("react-native");
+var import_react_native30 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ListDivider({
   inset = false,
@@ -3380,16 +3392,16 @@ function ListDivider({
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native29.View, { ...props, style: [styles3.divider, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native30.View, { ...props, style: [styles3.divider, style] });
 }
 
 // src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
 var import_react19 = require("react");
-var import_react_native31 = require("react-native");
+var import_react_native32 = require("react-native");
 
 // src/keyboard-avoiding-wrapper/styles.ts
-var import_react_native30 = require("react-native");
-var styles2 = import_react_native30.StyleSheet.create({
+var import_react_native31 = require("react-native");
+var styles2 = import_react_native31.StyleSheet.create({
   root: {
     flex: 1
   },
@@ -3400,7 +3412,7 @@ var styles2 = import_react_native30.StyleSheet.create({
 
 // src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var isIOS = import_react_native31.Platform.OS === "ios";
+var isIOS = import_react_native32.Platform.OS === "ios";
 function KeyboardAvoidingWrapper({
   children,
   behavior = "padding",
@@ -3416,25 +3428,25 @@ function KeyboardAvoidingWrapper({
     const subscriptions = [];
     if (onKeyboardShow) {
       const showEvent = isIOS ? "keyboardWillShow" : "keyboardDidShow";
-      subscriptions.push(import_react_native31.Keyboard.addListener(showEvent, onKeyboardShow));
+      subscriptions.push(import_react_native32.Keyboard.addListener(showEvent, onKeyboardShow));
     }
     if (onKeyboardHide) {
       const hideEvent = isIOS ? "keyboardWillHide" : "keyboardDidHide";
-      subscriptions.push(import_react_native31.Keyboard.addListener(hideEvent, onKeyboardHide));
+      subscriptions.push(import_react_native32.Keyboard.addListener(hideEvent, onKeyboardHide));
     }
     return () => {
       subscriptions.forEach((sub) => sub.remove());
     };
   }, [onKeyboardShow, onKeyboardHide]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react_native31.KeyboardAvoidingView,
+    import_react_native32.KeyboardAvoidingView,
     {
       style: [styles2.root, style],
       behavior,
       keyboardVerticalOffset,
       enabled: !isIOS && enabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react_native31.ScrollView,
+        import_react_native32.ScrollView,
         {
           automaticallyAdjustKeyboardInsets: isIOS && enabled,
           keyboardShouldPersistTaps: "handled",
@@ -3451,12 +3463,12 @@ function KeyboardAvoidingWrapper({
 // src/avatar/Avatar.tsx
 var import_core18 = require("@onlynative/core");
 var import_react20 = require("react");
-var import_react_native33 = require("react-native");
+var import_react_native34 = require("react-native");
 
 // src/avatar/styles.ts
-var import_react_native32 = require("react-native");
+var import_react_native33 = require("react-native");
 function createStyles10(theme) {
-  return import_react_native32.StyleSheet.create({
+  return import_react_native33.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -3551,7 +3563,7 @@ function Avatar({
     }),
     [bgColor, fgColor, theme.stateLayer]
   );
-  const content = imageUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native33.Image, { source: { uri: imageUri }, style: styles3.image, accessible: false }) : label && !icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native33.Text, { style: initialsStyle, numberOfLines: 1, allowFontScaling: false, children: initials }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const content = imageUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native34.Image, { source: { uri: imageUri }, style: styles3.image, accessible: false }) : label && !icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native34.Text, { style: initialsStyle, numberOfLines: 1, allowFontScaling: false, children: initials }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     MaterialCommunityIcons,
     {
       name: icon != null ? icon : "account",
@@ -3561,7 +3573,7 @@ function Avatar({
   );
   if (!isInteractive) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react_native33.View,
+      import_react_native34.View,
       {
         ...props,
         accessibilityLabel,
@@ -3571,7 +3583,7 @@ function Avatar({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_native33.Pressable,
+    import_react_native34.Pressable,
     {
       ...props,
       accessibilityRole: "button",

package/dist/layout/index.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { StyleProp, ViewStyle, ViewProps, FlexAlignType } from 'react-native';
-import { Edge } from 'react-native-safe-area-context';
 import { MaterialTheme } from '@onlynative/core';
 
+type Edge = 'top' | 'right' | 'bottom' | 'left';
+
 interface LayoutProps extends PropsWithChildren {
     /**
      * When `true`, removes all safe area insets for full-screen layout.

package/dist/layout/index.js

@@ -41,8 +41,21 @@ module.exports = __toCommonJS(layout_exports);
 // src/layout/Layout.tsx
 var import_core = require("@onlynative/core");
 var import_react = require("react");
+var import_react_native2 = require("react-native");
+
+// src/safe-area.tsx
 var import_react_native = require("react-native");
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var SafeAreaViewComponent = import_react_native.View;
+try {
+  const safeArea = require("react-native-safe-area-context");
+  SafeAreaViewComponent = safeArea.SafeAreaView;
+} catch {
+  console.warn(
+    '[@onlynative/components] "react-native-safe-area-context" is not installed. Layout and AppBar will render without safe area insets. Run `npx expo install react-native-safe-area-context` to fix this.'
+  );
+}
+
+// src/layout/Layout.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultEdges = ["bottom"];
 function resolveEdges(immersive, edges) {
@@ -54,7 +67,7 @@ function resolveEdges(immersive, edges) {
   }
   return defaultEdges;
 }
-var styles = import_react_native.StyleSheet.create({
+var styles = import_react_native2.StyleSheet.create({
   root: {
     flex: 1
   }
@@ -63,7 +76,7 @@ function removeBackgroundColor(style) {
   if (!style) {
     return void 0;
   }
-  const flattenedStyle = import_react_native.StyleSheet.flatten(style);
+  const flattenedStyle = import_react_native2.StyleSheet.flatten(style);
   if (!flattenedStyle || flattenedStyle.backgroundColor === void 0) {
     return style;
   }
@@ -86,7 +99,7 @@ function Layout({ immersive, edges, children, style }) {
     [immersive, edges]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native_safe_area_context.SafeAreaView,
+    SafeAreaViewComponent,
     {
       style: [styles.root, themeBackgroundStyle, styleWithoutBackground],
       edges: safeAreaEdges,
@@ -98,7 +111,7 @@ function Layout({ immersive, edges, children, style }) {
 // src/layout/Box.tsx
 var import_core2 = require("@onlynative/core");
 var import_react2 = require("react");
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 
 // src/layout/resolveSpacing.ts
 function resolveSpacing(spacing, value) {
@@ -196,7 +209,7 @@ function Box({
     justify,
     bg
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { ...viewProps, style: [layoutStyle, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { ...viewProps, style: [layoutStyle, style] });
 }
 
 // src/layout/Column.tsx
@@ -215,7 +228,7 @@ function Column({ inverted = false, style, ...boxProps }) {
 // src/layout/Grid.tsx
 var import_core3 = require("@onlynative/core");
 var import_react5 = __toESM(require("react"));
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 
 // src/layout/Row.tsx
 var import_react4 = require("react");
@@ -269,7 +282,7 @@ function Grid({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { wrap: true, rowGap: resolvedRowGap, ...rowProps, style: [rowStyle, style], children: import_react5.default.Children.map(
     children,
-    (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: cellStyle, children: child }) : null
+    (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: cellStyle, children: child }) : null
   ) });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/llms.txt

@@ -1,7 +1,7 @@
 # @onlynative/components — MD3 UI Components for React Native
 
-> Version: 0.0.0-alpha.3
-> Peer deps: @onlynative/core >=0.0.0-alpha.3, react >=18, react-native >=0.72, react-native-safe-area-context >=4
+> Version: 0.0.0-alpha.4
+> Peer deps: @onlynative/core >=0.0.0-alpha.4, react >=18, react-native >=0.72, react-native-safe-area-context >=4
 > Optional: @expo/vector-icons >=14 (only needed for icon props)
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlynative/components",
-  "version": "0.0.0-alpha.3",
+  "version": "0.0.0-alpha.4",
   "description": "Material Design 3 UI components for React Native, part of OnlyNative UI.",
   "private": false,
   "sideEffects": false,
@@ -155,7 +155,7 @@
   ],
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.0.0-alpha.3",
+    "@onlynative/core": ">=0.0.0-alpha.4",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"
@@ -163,6 +163,9 @@
   "peerDependenciesMeta": {
     "@expo/vector-icons": {
       "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -176,7 +179,7 @@
     "react-test-renderer": "19.1.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "@onlynative/core": "0.0.0-alpha.3",
+    "@onlynative/core": "0.0.0-alpha.4",
     "@onlynative/utils": "0.1.0-alpha.3"
   },
   "scripts": {