@onlynative/components 0.1.1-alpha.0 → 0.1.1-alpha.2

package/dist/index.js

@@ -338,30 +338,128 @@ function Grid({
 
 // src/button/Button.tsx
 var import_react7 = require("react");
-var import_react_native6 = require("react-native");
-var import_react_native7 = require("react-native");
 var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 var import_core5 = require("@onlynative/core");
-var import_utils2 = require("@onlynative/utils");
 
-// src/button/styles.ts
+// ../utils/dist/chunk-OQRDRRQA.mjs
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ../utils/dist/index.mjs
 var import_react_native5 = require("react-native");
-var import_utils = require("@onlynative/utils");
+var import_react_native6 = require("react-native");
+function parseHexColor(color) {
+  const normalized = color.replace("#", "");
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return null;
+  }
+  return { r, g, b };
+}
+function clampAlpha(alpha) {
+  return Math.max(0, Math.min(1, alpha));
+}
+function alphaColor(color, alpha) {
+  const channels = parseHexColor(color);
+  const boundedAlpha = clampAlpha(alpha);
+  if (!channels) {
+    return color;
+  }
+  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
+}
+function blendColor(base, overlay, overlayAlpha) {
+  const baseChannels = parseHexColor(base);
+  const overlayChannels = parseHexColor(overlay);
+  const boundedAlpha = clampAlpha(overlayAlpha);
+  if (!baseChannels || !overlayChannels) {
+    return alphaColor(overlay, boundedAlpha);
+  }
+  const r = Math.round(
+    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
+  );
+  const g = Math.round(
+    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
+  );
+  const b = Math.round(
+    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
+  );
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function elevationStyle(level) {
+  if (import_react_native5.Platform.OS === "web") {
+    const { shadowOffset, shadowOpacity, shadowRadius } = level;
+    if (shadowOpacity === 0) {
+      return { boxShadow: "none" };
+    }
+    return {
+      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
+    };
+  }
+  return {
+    shadowColor: level.shadowColor,
+    shadowOffset: {
+      width: level.shadowOffset.width,
+      height: level.shadowOffset.height
+    },
+    shadowOpacity: level.shadowOpacity,
+    shadowRadius: level.shadowRadius,
+    elevation: level.elevation
+  };
+}
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = __require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+function transformOrigin(vertical = "top") {
+  return import_react_native6.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+}
+function selectRTL(ltr, rtl) {
+  return import_react_native6.I18nManager.isRTL ? rtl : ltr;
+}
+
+// src/button/styles.ts
+var import_react_native7 = require("react-native");
 function getVariantColors(theme, variant) {
-  const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledLabelColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
-  const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   if (variant === "outlined") {
     return {
       backgroundColor: "transparent",
       textColor: theme.colors.primary,
       borderColor: theme.colors.outline,
       borderWidth: 1,
-      hoveredBackgroundColor: (0, import_utils.alphaColor)(
+      hoveredBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.alphaColor)(
+      pressedBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -376,11 +474,11 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.primary,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils.alphaColor)(
+      hoveredBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.alphaColor)(
+      pressedBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -395,12 +493,12 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.primary,
       borderColor: theme.colors.surfaceContainerLow,
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.surfaceContainerLow,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.surfaceContainerLow,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
@@ -416,12 +514,12 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.onSecondaryContainer,
       borderColor: theme.colors.secondaryContainer,
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
@@ -436,12 +534,12 @@ function getVariantColors(theme, variant) {
     textColor: theme.colors.onPrimary,
     borderColor: theme.colors.primary,
     borderWidth: 0,
-    hoveredBackgroundColor: (0, import_utils.blendColor)(
+    hoveredBackgroundColor: blendColor(
       theme.colors.primary,
       theme.colors.onPrimary,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils.blendColor)(
+    pressedBackgroundColor: blendColor(
       theme.colors.primary,
       theme.colors.onPrimary,
       theme.stateLayer.pressedOpacity
@@ -473,33 +571,33 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.textColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = (0, import_utils.blendColor)(
+    result.hoveredBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = (0, import_utils.blendColor)(
+    result.pressedBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
     );
   } else if (contentColor) {
     if (colors.backgroundColor === "transparent") {
-      result.hoveredBackgroundColor = (0, import_utils.alphaColor)(
+      result.hoveredBackgroundColor = alphaColor(
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = (0, import_utils.alphaColor)(
+      result.pressedBackgroundColor = alphaColor(
         contentColor,
         theme.stateLayer.pressedOpacity
       );
     } else {
-      result.hoveredBackgroundColor = (0, import_utils.blendColor)(
+      result.hoveredBackgroundColor = blendColor(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = (0, import_utils.blendColor)(
+      result.pressedBackgroundColor = blendColor(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.pressedOpacity
@@ -523,11 +621,11 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
     hasLeadingIcon,
     hasTrailingIcon
   );
-  const elevationLevel0 = (0, import_utils.elevationStyle)(theme.elevation.level0);
-  const elevationLevel1 = (0, import_utils.elevationStyle)(theme.elevation.level1);
-  const elevationLevel2 = (0, import_utils.elevationStyle)(theme.elevation.level2);
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native5.StyleSheet.create({
+  return import_react_native7.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -626,9 +724,9 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
-  const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils2.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const resolvedIconColor = (0, import_react7.useMemo)(() => {
-    const base = import_react_native7.StyleSheet.flatten([
+    const base = import_react_native9.StyleSheet.flatten([
       styles3.label,
       isDisabled ? styles3.disabledLabel : void 0
     ]);
@@ -643,12 +741,12 @@ function Button({
     [isDisabled, styles3.disabledLabel, styles3.label, labelStyleOverride]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_react_native6.Pressable,
+    import_react_native8.Pressable,
     {
       ...props,
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native6.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native8.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolveStyle(
         styles3.container,
@@ -668,7 +766,7 @@ function Button({
             style: styles3.leadingIcon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.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,
           {
@@ -685,18 +783,16 @@ function Button({
 
 // src/icon-button/IconButton.tsx
 var import_react8 = require("react");
-var import_react_native10 = require("react-native");
+var import_react_native12 = require("react-native");
 var import_core6 = require("@onlynative/core");
-var import_utils4 = require("@onlynative/utils");
 
 // src/icon-button/styles.ts
-var import_react_native9 = require("react-native");
-var import_utils3 = require("@onlynative/utils");
+var import_react_native11 = require("react-native");
 function createStyles2(theme) {
-  const disabledContainerColor = (0, import_utils3.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = (0, import_utils3.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
-  return import_react_native9.StyleSheet.create({
+  return import_react_native11.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -762,160 +858,160 @@ function createStyles2(theme) {
     },
     // Hover states (M3: 8% state layer)
     hoveredFilled: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleUnselected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleSelected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonal: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleUnselected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleSelected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlined: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleUnselected: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleSelected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandard: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleUnselected: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleSelected: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     // Pressed states (M3: 12% state layer)
     pressedFilled: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleUnselected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleSelected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonal: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleUnselected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleSelected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlined: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleUnselected: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleSelected: {
-      backgroundColor: (0, import_utils3.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandard: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleUnselected: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleSelected: {
-      backgroundColor: (0, import_utils3.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
@@ -948,7 +1044,7 @@ function createStyles2(theme) {
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function getIconColor(variant, theme, disabled, isToggle, selected) {
   if (disabled) {
-    return (0, import_utils4.alphaColor)(theme.colors.onSurface, 0.38);
+    return alphaColor(theme.colors.onSurface, 0.38);
   }
   if (isToggle) {
     if (variant === "filled") {
@@ -1098,7 +1194,7 @@ function IconButton({
   ...props
 }) {
   var _a;
-  const MaterialCommunityIcons = (0, import_utils4.getMaterialCommunityIcons)();
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core6.useTheme)();
   const styles3 = (0, import_react8.useMemo)(() => createStyles2(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -1118,14 +1214,14 @@ function IconButton({
         borderWidth: 0
       },
       hovered: {
-        backgroundColor: (0, import_utils4.blendColor)(
+        backgroundColor: blendColor(
           containerColor,
           overlay,
           theme.stateLayer.hoveredOpacity
         )
       },
       pressed: {
-        backgroundColor: (0, import_utils4.blendColor)(
+        backgroundColor: blendColor(
           containerColor,
           overlay,
           theme.stateLayer.pressedOpacity
@@ -1134,7 +1230,7 @@ function IconButton({
     };
   }, [containerColor, resolvedIconColor, theme.stateLayer]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_native10.Pressable,
+    import_react_native12.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -1177,29 +1273,81 @@ function IconButton({
 
 // src/appbar/AppBar.tsx
 var import_react9 = require("react");
-var import_react_native12 = require("react-native");
+var import_react_native14 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_core8 = require("@onlynative/core");
-var import_utils5 = require("@onlynative/utils");
 
 // src/appbar/styles.ts
-var import_react_native11 = require("react-native");
+var import_react_native13 = require("react-native");
 var import_core7 = require("@onlynative/core");
-function createStyles3(theme) {
+function getColorSchemeColors(theme, colorScheme) {
+  switch (colorScheme) {
+    case "surfaceContainerLowest":
+      return {
+        containerColor: theme.colors.surfaceContainerLowest,
+        elevatedContainerColor: theme.colors.surfaceContainerLowest,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerLow":
+      return {
+        containerColor: theme.colors.surfaceContainerLow,
+        elevatedContainerColor: theme.colors.surfaceContainerLow,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainer":
+      return {
+        containerColor: theme.colors.surfaceContainer,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHigh":
+      return {
+        containerColor: theme.colors.surfaceContainerHigh,
+        elevatedContainerColor: theme.colors.surfaceContainerHigh,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHighest":
+      return {
+        containerColor: theme.colors.surfaceContainerHighest,
+        elevatedContainerColor: theme.colors.surfaceContainerHighest,
+        contentColor: theme.colors.onSurface
+      };
+    case "primary":
+      return {
+        containerColor: theme.colors.primary,
+        elevatedContainerColor: theme.colors.primary,
+        contentColor: theme.colors.onPrimary
+      };
+    case "primaryContainer":
+      return {
+        containerColor: theme.colors.primaryContainer,
+        elevatedContainerColor: theme.colors.primaryContainer,
+        contentColor: theme.colors.onPrimaryContainer
+      };
+    case "surface":
+    default:
+      return {
+        containerColor: theme.colors.surface,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+  }
+}
+function createStyles3(theme, schemeColors) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core7.defaultTopAppBarTokens;
-  return import_react_native11.StyleSheet.create({
+  return import_react_native13.StyleSheet.create({
     root: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     safeArea: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     elevatedRoot: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     elevatedSafeArea: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     smallContainer: {
       height: topAppBar.smallContainerHeight,
@@ -1277,10 +1425,10 @@ function createStyles3(theme) {
 // src/appbar/AppBar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function getBackIcon() {
-  if (import_react_native12.Platform.OS === "ios") {
-    return (0, import_utils5.selectRTL)("chevron-left", "chevron-right");
+  if (import_react_native14.Platform.OS === "ios") {
+    return selectRTL("chevron-left", "chevron-right");
   }
-  return (0, import_utils5.selectRTL)("arrow-left", "arrow-right");
+  return selectRTL("arrow-left", "arrow-right");
 }
 var titleVariantBySize = {
   small: "titleLarge",
@@ -1308,7 +1456,7 @@ 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)(import_react_native12.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);
@@ -1316,6 +1464,7 @@ function measureWidth(event) {
 function AppBar({
   title,
   variant = "small",
+  colorScheme = "surface",
   canGoBack = false,
   onBackPress,
   insetTop = false,
@@ -1331,12 +1480,20 @@ function AppBar({
   var _a;
   const theme = (0, import_core8.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core8.defaultTopAppBarTokens;
-  const styles3 = (0, import_react9.useMemo)(() => createStyles3(theme), [theme]);
+  const schemeColors = (0, import_react9.useMemo)(
+    () => getColorSchemeColors(theme, colorScheme),
+    [theme, colorScheme]
+  );
+  const resolvedContentColor = contentColor != null ? contentColor : schemeColors.contentColor;
+  const styles3 = (0, import_react9.useMemo)(
+    () => createStyles3(theme, schemeColors),
+    [theme, schemeColors]
+  );
   const [leadingWidth, setLeadingWidth] = (0, import_react9.useState)(0);
   const [actionsWidth, setActionsWidth] = (0, import_react9.useState)(0);
   const titleColorStyle = (0, import_react9.useMemo)(
-    () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
-    [contentColor, theme.colors.onSurface]
+    () => ({ color: resolvedContentColor }),
+    [resolvedContentColor]
   );
   const size = resolveSize(variant);
   const titleVariant = titleVariantBySize[size];
@@ -1360,25 +1517,18 @@ function AppBar({
     if (!canGoBack) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.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(),
         size: "medium",
         variant: "standard",
-        iconColor: contentColor != null ? contentColor : theme.colors.onSurface,
+        iconColor: resolvedContentColor,
         accessibilityLabel: "Go back",
         onPress: onBackPress
       }
     ) });
-  }, [
-    canGoBack,
-    contentColor,
-    leading,
-    onBackPress,
-    styles3.iconFrame,
-    theme.colors.onSurface
-  ]);
+  }, [canGoBack, resolvedContentColor, leading, onBackPress, styles3.iconFrame]);
   const actionsContent = (0, import_react9.useMemo)(() => {
     if (trailing) {
       return trailing;
@@ -1386,8 +1536,8 @@ function AppBar({
     if (!actions || actions.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: styles3.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native12.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)(
@@ -1396,7 +1546,7 @@ function AppBar({
             icon: action.icon,
             size: "medium",
             variant: "standard",
-            iconColor: contentColor,
+            iconColor: resolvedContentColor,
             accessibilityLabel: action.accessibilityLabel,
             onPress: action.onPress,
             disabled: action.disabled
@@ -1405,7 +1555,7 @@ function AppBar({
       },
       `${String(action.icon)}-${index}`
     )) });
-  }, [actions, contentColor, styles3.actionsRow, styles3.iconFrame, trailing]);
+  }, [actions, resolvedContentColor, styles3.actionsRow, styles3.iconFrame, trailing]);
   const onLeadingLayout = (0, import_react9.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
@@ -1424,9 +1574,9 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.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_native12.View,
+      import_react_native14.View,
       {
         collapsable: false,
         onLayout: onLeadingLayout,
@@ -1434,9 +1584,9 @@ function AppBar({
         children: leadingContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.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_native12.View,
+      import_react_native14.View,
       {
         collapsable: false,
         onLayout: onActionsLayout,
@@ -1458,10 +1608,10 @@ function AppBar({
     containerOverride
   ];
   if (isExpanded) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.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_native12.View,
+        import_react_native14.View,
         {
           style: [
             styles3.expandedTitleContainer,
@@ -1485,11 +1635,11 @@ function AppBar({
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.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_native12.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_native12.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,
@@ -1504,30 +1654,29 @@ function AppBar({
       }
     ) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.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_react10 = require("react");
-var import_react_native14 = require("react-native");
+var import_react_native16 = require("react-native");
 var import_core9 = require("@onlynative/core");
 
 // src/card/styles.ts
-var import_react_native13 = require("react-native");
-var import_utils6 = require("@onlynative/utils");
+var import_react_native15 = require("react-native");
 function getVariantColors2(theme, variant) {
-  const disabledContainerColor = (0, import_utils6.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = (0, import_utils6.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   if (variant === "outlined") {
     return {
       backgroundColor: theme.colors.surface,
       borderColor: theme.colors.outline,
       borderWidth: 1,
-      hoveredBackgroundColor: (0, import_utils6.alphaColor)(
+      hoveredBackgroundColor: alphaColor(
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils6.alphaColor)(
+      pressedBackgroundColor: alphaColor(
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
       ),
@@ -1540,12 +1689,12 @@ function getVariantColors2(theme, variant) {
       backgroundColor: theme.colors.surfaceContainerHighest,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils6.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.surfaceContainerHighest,
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils6.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.surfaceContainerHighest,
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
@@ -1558,12 +1707,12 @@ function getVariantColors2(theme, variant) {
     backgroundColor: theme.colors.surface,
     borderColor: "transparent",
     borderWidth: 0,
-    hoveredBackgroundColor: (0, import_utils6.blendColor)(
+    hoveredBackgroundColor: blendColor(
       theme.colors.surface,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils6.blendColor)(
+    pressedBackgroundColor: blendColor(
       theme.colors.surface,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -1579,12 +1728,12 @@ function applyColorOverrides2(theme, colors, containerColor) {
     backgroundColor: containerColor,
     borderColor: containerColor,
     borderWidth: 0,
-    hoveredBackgroundColor: (0, import_utils6.blendColor)(
+    hoveredBackgroundColor: blendColor(
       containerColor,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils6.blendColor)(
+    pressedBackgroundColor: blendColor(
       containerColor,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -1594,11 +1743,11 @@ function applyColorOverrides2(theme, colors, containerColor) {
 function createStyles4(theme, variant, containerColor) {
   const baseColors = getVariantColors2(theme, variant);
   const colors = applyColorOverrides2(theme, baseColors, containerColor);
-  const elevationLevel0 = (0, import_utils6.elevationStyle)(theme.elevation.level0);
-  const elevationLevel1 = (0, import_utils6.elevationStyle)(theme.elevation.level1);
-  const elevationLevel2 = (0, import_utils6.elevationStyle)(theme.elevation.level2);
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native13.StyleSheet.create({
+  return import_react_native15.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerMedium,
       backgroundColor: colors.backgroundColor,
@@ -1648,7 +1797,7 @@ function Card({
     [theme, variant, containerColor]
   );
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native14.View, { ...props, style: [styles3.container, style], children });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { ...props, style: [styles3.container, style], children });
   }
   const resolvedStyle = (state) => [
     styles3.container,
@@ -1659,45 +1808,43 @@ function Card({
     typeof style === "function" ? style(state) : style
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native14.Pressable,
+    import_react_native16.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native14.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native16.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native14.View, { style: styles3.disabledContent, children }) : children
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { style: styles3.disabledContent, children }) : children
     }
   );
 }
 
 // src/chip/Chip.tsx
 var import_react11 = require("react");
-var import_react_native16 = require("react-native");
+var import_react_native18 = require("react-native");
 var import_core10 = require("@onlynative/core");
-var import_utils8 = require("@onlynative/utils");
 
 // src/chip/styles.ts
-var import_react_native15 = require("react-native");
-var import_utils7 = require("@onlynative/utils");
+var import_react_native17 = require("react-native");
 function getVariantColors3(theme, variant, elevated, selected) {
-  const disabledContainerColor = (0, import_utils7.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledLabelColor = (0, import_utils7.alphaColor)(theme.colors.onSurface, 0.38);
-  const disabledOutlineColor = (0, import_utils7.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   if (variant === "filter" && selected) {
     return {
       backgroundColor: theme.colors.secondaryContainer,
       textColor: theme.colors.onSecondaryContainer,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils7.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils7.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
@@ -1714,12 +1861,12 @@ function getVariantColors3(theme, variant, elevated, selected) {
       textColor: textColor2,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils7.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.surfaceContainerLow,
         textColor2,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils7.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.surfaceContainerLow,
         textColor2,
         theme.stateLayer.pressedOpacity
@@ -1735,12 +1882,12 @@ function getVariantColors3(theme, variant, elevated, selected) {
     textColor,
     borderColor: theme.colors.outline,
     borderWidth: 1,
-    hoveredBackgroundColor: (0, import_utils7.blendColor)(
+    hoveredBackgroundColor: blendColor(
       theme.colors.surface,
       textColor,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils7.blendColor)(
+    pressedBackgroundColor: blendColor(
       theme.colors.surface,
       textColor,
       theme.stateLayer.pressedOpacity
@@ -1760,33 +1907,33 @@ function applyColorOverrides3(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.textColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = (0, import_utils7.blendColor)(
+    result.hoveredBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = (0, import_utils7.blendColor)(
+    result.pressedBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
     );
   } else if (contentColor) {
     if (colors.backgroundColor === "transparent") {
-      result.hoveredBackgroundColor = (0, import_utils7.alphaColor)(
+      result.hoveredBackgroundColor = alphaColor(
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = (0, import_utils7.alphaColor)(
+      result.pressedBackgroundColor = alphaColor(
         contentColor,
         theme.stateLayer.pressedOpacity
       );
     } else {
-      result.hoveredBackgroundColor = (0, import_utils7.blendColor)(
+      result.hoveredBackgroundColor = blendColor(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = (0, import_utils7.blendColor)(
+      result.pressedBackgroundColor = blendColor(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.pressedOpacity
@@ -1804,12 +1951,12 @@ function createStyles5(theme, variant, elevated, selected, hasLeadingContent, ha
     contentColor
   );
   const labelStyle = theme.typography.labelLarge;
-  const elevationLevel0 = (0, import_utils7.elevationStyle)(theme.elevation.level0);
-  const elevationLevel1 = (0, import_utils7.elevationStyle)(theme.elevation.level1);
-  const elevationLevel2 = (0, import_utils7.elevationStyle)(theme.elevation.level2);
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const isElevated = elevated && variant !== "input";
   const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
-  return import_react_native15.StyleSheet.create({
+  return import_react_native17.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -1907,7 +2054,7 @@ function Chip({
     variant === "input" && avatar || leadingIcon || variant === "filter" && isSelected
   );
   const needsIcons = Boolean(leadingIcon) || variant === "filter" && isSelected || showCloseIcon;
-  const MaterialCommunityIcons = needsIcons ? (0, import_utils8.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = needsIcons ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core10.useTheme)();
   const styles3 = (0, import_react11.useMemo)(
     () => createStyles5(
@@ -1932,7 +2079,7 @@ function Chip({
     ]
   );
   const resolvedIconColor = (0, import_react11.useMemo)(() => {
-    const base = import_react_native16.StyleSheet.flatten([
+    const base = import_react_native18.StyleSheet.flatten([
       styles3.label,
       isDisabled ? styles3.disabledLabel : void 0
     ]);
@@ -1948,7 +2095,7 @@ function Chip({
   );
   const renderLeadingContent = () => {
     if (variant === "input" && avatar) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native16.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)(
@@ -1975,7 +2122,7 @@ function Chip({
     return null;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_react_native16.Pressable,
+    import_react_native18.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -1983,7 +2130,7 @@ function Chip({
         disabled: isDisabled,
         ...variant === "filter" ? { selected: isSelected } : void 0
       },
-      hitSlop: import_react_native16.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native18.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolveStyle2(
         styles3.container,
@@ -1995,9 +2142,9 @@ function Chip({
       ),
       children: [
         renderLeadingContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native16.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_native16.Pressable,
+          import_react_native18.Pressable,
           {
             onPress: onClose,
             accessibilityRole: "button",
@@ -2021,27 +2168,25 @@ function Chip({
 
 // src/checkbox/Checkbox.tsx
 var import_react12 = require("react");
-var import_react_native18 = require("react-native");
+var import_react_native20 = require("react-native");
 var import_core11 = require("@onlynative/core");
-var import_utils10 = require("@onlynative/utils");
 
 // src/checkbox/styles.ts
-var import_react_native17 = require("react-native");
-var import_utils9 = require("@onlynative/utils");
+var import_react_native19 = require("react-native");
 function getColors(theme, checked) {
-  const disabledOnSurface38 = (0, import_utils9.alphaColor)(theme.colors.onSurface, 0.38);
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (checked) {
     return {
       backgroundColor: theme.colors.primary,
       borderColor: "transparent",
       borderWidth: 0,
       iconColor: theme.colors.onPrimary,
-      hoveredBackgroundColor: (0, import_utils9.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils9.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
@@ -2057,11 +2202,11 @@ function getColors(theme, checked) {
     borderColor: theme.colors.onSurfaceVariant,
     borderWidth: 2,
     iconColor: "transparent",
-    hoveredBackgroundColor: (0, import_utils9.alphaColor)(
+    hoveredBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils9.alphaColor)(
+    pressedBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     ),
@@ -2081,12 +2226,12 @@ function applyColorOverrides4(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.iconColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = (0, import_utils9.blendColor)(
+    result.hoveredBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = (0, import_utils9.blendColor)(
+    result.pressedBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
@@ -2103,7 +2248,7 @@ function createStyles6(theme, checked, containerColor, contentColor) {
   );
   const size = 18;
   const touchTarget = 48;
-  return import_react_native17.StyleSheet.create({
+  return import_react_native19.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2177,14 +2322,14 @@ function Checkbox({
 }) {
   const isDisabled = Boolean(disabled);
   const isChecked = Boolean(value);
-  const MaterialCommunityIcons = isChecked ? (0, import_utils10.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = isChecked ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core11.useTheme)();
   const styles3 = (0, import_react12.useMemo)(
     () => createStyles6(theme, isChecked, containerColor, contentColor),
     [theme, isChecked, containerColor, contentColor]
   );
   const resolvedIconColor = (0, import_react12.useMemo)(() => {
-    const base = import_react_native18.StyleSheet.flatten([
+    const base = import_react_native20.StyleSheet.flatten([
       styles3.iconColor,
       isDisabled ? styles3.disabledIconColor : void 0
     ]);
@@ -2196,7 +2341,7 @@ function Checkbox({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native18.Pressable,
+    import_react_native20.Pressable,
     {
       ...props,
       accessibilityRole: "checkbox",
@@ -2204,7 +2349,7 @@ function Checkbox({
         disabled: isDisabled,
         checked: isChecked
       },
-      hitSlop: import_react_native18.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native20.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle3(
@@ -2215,7 +2360,7 @@ function Checkbox({
         isDisabled,
         style
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native18.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",
@@ -2229,23 +2374,22 @@ function Checkbox({
 
 // src/radio/Radio.tsx
 var import_react13 = require("react");
-var import_react_native20 = require("react-native");
+var import_react_native22 = require("react-native");
 var import_core12 = require("@onlynative/core");
 
 // src/radio/styles.ts
-var import_react_native19 = require("react-native");
-var import_utils11 = require("@onlynative/utils");
+var import_react_native21 = require("react-native");
 function getColors2(theme, selected) {
-  const disabledOnSurface38 = (0, import_utils11.alphaColor)(theme.colors.onSurface, 0.38);
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
     return {
       borderColor: theme.colors.primary,
       dotColor: theme.colors.primary,
-      hoveredBackgroundColor: (0, import_utils11.alphaColor)(
+      hoveredBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils11.alphaColor)(
+      pressedBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -2256,11 +2400,11 @@ function getColors2(theme, selected) {
   return {
     borderColor: theme.colors.onSurfaceVariant,
     dotColor: "transparent",
-    hoveredBackgroundColor: (0, import_utils11.alphaColor)(
+    hoveredBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils11.alphaColor)(
+    pressedBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     ),
@@ -2274,11 +2418,11 @@ function applyColorOverrides5(theme, colors, containerColor, contentColor) {
   if (containerColor) {
     result.borderColor = containerColor;
     result.dotColor = containerColor;
-    result.hoveredBackgroundColor = (0, import_utils11.alphaColor)(
+    result.hoveredBackgroundColor = alphaColor(
       containerColor,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = (0, import_utils11.alphaColor)(
+    result.pressedBackgroundColor = alphaColor(
       containerColor,
       theme.stateLayer.pressedOpacity
     );
@@ -2298,7 +2442,7 @@ function createStyles7(theme, selected, containerColor, contentColor) {
   const outerSize = 20;
   const innerSize = 10;
   const touchTarget = 48;
-  return import_react_native19.StyleSheet.create({
+  return import_react_native21.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2383,7 +2527,7 @@ function Radio({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native20.Pressable,
+    import_react_native22.Pressable,
     {
       ...props,
       accessibilityRole: "radio",
@@ -2391,7 +2535,7 @@ function Radio({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native20.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native22.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle4(
@@ -2403,11 +2547,11 @@ function Radio({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native20.View,
+        import_react_native22.View,
         {
           style: [styles3.outer, isDisabled ? styles3.disabledOuter : void 0],
           children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react_native20.View,
+            import_react_native22.View,
             {
               style: [
                 styles3.inner,
@@ -2423,27 +2567,25 @@ function Radio({
 
 // src/switch/Switch.tsx
 var import_react14 = require("react");
-var import_react_native22 = require("react-native");
+var import_react_native24 = require("react-native");
 var import_core13 = require("@onlynative/core");
-var import_utils13 = require("@onlynative/utils");
 
 // src/switch/styles.ts
-var import_react_native21 = require("react-native");
-var import_utils12 = require("@onlynative/utils");
+var import_react_native23 = require("react-native");
 function getColors3(theme, selected) {
-  const disabledOnSurface12 = (0, import_utils12.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledOnSurface38 = (0, import_utils12.alphaColor)(theme.colors.onSurface, 0.38);
+  const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
     return {
       trackColor: theme.colors.primary,
       thumbColor: theme.colors.onPrimary,
       iconColor: theme.colors.onPrimaryContainer,
-      hoveredTrackColor: (0, import_utils12.blendColor)(
+      hoveredTrackColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedTrackColor: (0, import_utils12.blendColor)(
+      pressedTrackColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
@@ -2460,12 +2602,12 @@ function getColors3(theme, selected) {
     trackColor: theme.colors.surfaceContainerHighest,
     thumbColor: theme.colors.outline,
     iconColor: theme.colors.surfaceContainerHighest,
-    hoveredTrackColor: (0, import_utils12.blendColor)(
+    hoveredTrackColor: blendColor(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedTrackColor: (0, import_utils12.blendColor)(
+    pressedTrackColor: blendColor(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -2489,12 +2631,12 @@ function applyColorOverrides6(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.thumbColor;
     result.trackColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredTrackColor = (0, import_utils12.blendColor)(
+    result.hoveredTrackColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedTrackColor = (0, import_utils12.blendColor)(
+    result.pressedTrackColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
@@ -2517,7 +2659,7 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
   const trackHeight = 32;
   const trackPadding = 4;
   const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
-  return import_react_native21.StyleSheet.create({
+  return import_react_native23.StyleSheet.create({
     track: {
       width: trackWidth,
       height: trackHeight,
@@ -2556,7 +2698,7 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
       color: colors.iconColor
     },
     disabledIconColor: {
-      color: (0, import_utils12.alphaColor)(theme.colors.onSurface, 0.38)
+      color: alphaColor(theme.colors.onSurface, 0.38)
     }
   });
 }
@@ -2601,7 +2743,7 @@ function Switch({
     [theme, isSelected, hasIcon, containerColor, contentColor]
   );
   const resolvedIconColor = (0, import_react14.useMemo)(() => {
-    const base = import_react_native22.StyleSheet.flatten([
+    const base = import_react_native24.StyleSheet.flatten([
       styles3.iconColor,
       isDisabled ? styles3.disabledIconColor : void 0
     ]);
@@ -2613,10 +2755,10 @@ function Switch({
     }
   };
   const iconName = isSelected ? selectedIcon : unselectedIcon;
-  const MaterialCommunityIcons = iconName ? (0, import_utils13.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_native22.Pressable,
+    import_react_native24.Pressable,
     {
       ...props,
       accessibilityRole: "switch",
@@ -2624,7 +2766,7 @@ function Switch({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native22.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native24.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle5(
@@ -2636,7 +2778,7 @@ function Switch({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_react_native22.View,
+        import_react_native24.View,
         {
           style: [styles3.thumb, isDisabled ? styles3.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -2655,13 +2797,11 @@ function Switch({
 
 // src/text-field/TextField.tsx
 var import_react15 = require("react");
-var import_react_native24 = require("react-native");
+var import_react_native26 = require("react-native");
 var import_core14 = require("@onlynative/core");
-var import_utils15 = require("@onlynative/utils");
 
 // src/text-field/styles.ts
-var import_react_native23 = require("react-native");
-var import_utils14 = require("@onlynative/utils");
+var import_react_native25 = require("react-native");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -2686,15 +2826,15 @@ function getVariantColors4(theme, variant) {
     focusedLabelColor: theme.colors.primary,
     errorLabelColor: theme.colors.error,
     textColor: theme.colors.onSurface,
-    disabledTextColor: (0, import_utils14.alphaColor)(theme.colors.onSurface, disabledOpacity),
-    disabledLabelColor: (0, import_utils14.alphaColor)(theme.colors.onSurface, disabledOpacity),
-    disabledBorderColor: (0, import_utils14.alphaColor)(theme.colors.onSurface, 0.12),
+    disabledTextColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledLabelColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledBorderColor: alphaColor(theme.colors.onSurface, 0.12),
     placeholderColor: theme.colors.onSurfaceVariant,
     supportingTextColor: theme.colors.onSurfaceVariant,
     errorSupportingTextColor: theme.colors.error,
     iconColor: theme.colors.onSurfaceVariant,
     errorIconColor: theme.colors.error,
-    disabledIconColor: (0, import_utils14.alphaColor)(theme.colors.onSurface, disabledOpacity)
+    disabledIconColor: alphaColor(theme.colors.onSurface, disabledOpacity)
   };
   if (variant === "outlined") {
     return {
@@ -2709,7 +2849,7 @@ function getVariantColors4(theme, variant) {
     ...common,
     backgroundColor: theme.colors.surfaceContainerHighest,
     borderColor: theme.colors.onSurfaceVariant,
-    disabledBackgroundColor: (0, import_utils14.alphaColor)(theme.colors.onSurface, 0.04),
+    disabledBackgroundColor: alphaColor(theme.colors.onSurface, 0.04),
     labelColor: theme.colors.onSurfaceVariant
   };
 }
@@ -2720,7 +2860,7 @@ function createStyles9(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native23.StyleSheet.create({
+    styles: import_react_native25.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -2791,7 +2931,7 @@ function createStyles9(theme, variant) {
         fontWeight: bodySmall.fontWeight,
         letterSpacing: bodySmall.letterSpacing,
         color: colors.labelColor,
-        transformOrigin: (0, import_utils14.transformOrigin)("top")
+        transformOrigin: transformOrigin("top")
       },
       labelNotch: {
         paddingHorizontal: 4
@@ -2884,7 +3024,7 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
-  const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils15.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const { colors, styles: styles3 } = (0, import_react15.useMemo)(
     () => createStyles9(theme, variant),
     [theme, variant]
@@ -2897,13 +3037,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_native24.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_native24.Animated.timing(labelAnim, {
+    import_react_native26.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native24.Platform.OS !== "web"
+      useNativeDriver: import_react_native26.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react15.useMemo)(() => {
@@ -2981,9 +3121,9 @@ function TextField({
     [styles3, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native24.View, { style: [styles3.root, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native24.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native24.View, { style: containerStyle, children: [
-      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native24.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,
@@ -2992,14 +3132,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native24.View,
+        import_react_native26.View,
         {
           style: [
             styles3.inputWrapper,
             label ? styles3.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_react_native24.TextInput,
+            import_react_native26.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -3025,14 +3165,14 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native24.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_native24.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,
@@ -3043,7 +3183,7 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native24.Animated.Text,
+        import_react_native26.Animated.Text,
         {
           numberOfLines: 1,
           style: [
@@ -3063,10 +3203,10 @@ function TextField({
           children: label
         }
       ) : null,
-      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native24.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_native24.View, { style: styles3.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native24.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,
@@ -3080,12 +3220,11 @@ function TextField({
 
 // src/list/List.tsx
 var import_react16 = require("react");
-var import_react_native26 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_core15 = require("@onlynative/core");
 
 // src/list/styles.ts
-var import_react_native25 = require("react-native");
-var import_utils16 = require("@onlynative/utils");
+var import_react_native27 = require("react-native");
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -3094,7 +3233,7 @@ var MIN_HEIGHT = {
   3: 88
 };
 function createListStyles(theme) {
-  return import_react_native25.StyleSheet.create({
+  return import_react_native27.StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm
     }
@@ -3105,12 +3244,12 @@ function getItemColors(theme, containerColor) {
   if (containerColor) {
     return {
       backgroundColor: containerColor,
-      hoveredBackgroundColor: (0, import_utils16.blendColor)(
+      hoveredBackgroundColor: blendColor(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils16.blendColor)(
+      pressedBackgroundColor: blendColor(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
@@ -3119,11 +3258,11 @@ function getItemColors(theme, containerColor) {
   }
   return {
     backgroundColor: base,
-    hoveredBackgroundColor: (0, import_utils16.alphaColor)(
+    hoveredBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils16.alphaColor)(
+    pressedBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     )
@@ -3131,7 +3270,7 @@ function getItemColors(theme, containerColor) {
 }
 function createListItemStyles(theme, lines, containerColor) {
   const colors = getItemColors(theme, containerColor);
-  return import_react_native25.StyleSheet.create({
+  return import_react_native27.StyleSheet.create({
     container: {
       flexDirection: "row",
       alignItems: lines === 3 ? "flex-start" : "center",
@@ -3186,7 +3325,7 @@ function createListItemStyles(theme, lines, containerColor) {
   });
 }
 function createDividerStyles(theme, inset) {
-  return import_react_native25.StyleSheet.create({
+  return import_react_native27.StyleSheet.create({
     divider: {
       height: 1,
       backgroundColor: theme.colors.outlineVariant,
@@ -3200,12 +3339,12 @@ 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_native26.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_react17 = require("react");
-var import_react_native27 = require("react-native");
+var import_react_native29 = require("react-native");
 var import_core16 = require("@onlynative/core");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
@@ -3238,12 +3377,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_native27.View, { style: styles3.leadingContent, children: leadingContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native27.View, { style: styles3.textBlock, children: [
-      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native27.Text, { style: styles3.overlineText, numberOfLines: 1, children: overlineText }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native27.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_native27.Text,
+        import_react_native29.Text,
         {
           style: styles3.supportingText,
           numberOfLines: supportingTextNumberOfLines,
@@ -3251,13 +3390,13 @@ function ListItem({
         }
       )
     ] }),
-    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native27.View, { style: styles3.trailingBlock, children: [
-      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native27.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_native27.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 });
   }
   const resolvedStyle = (state) => [
     styles3.container,
@@ -3268,23 +3407,23 @@ function ListItem({
     typeof style === "function" ? style(state) : style
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_native27.Pressable,
+    import_react_native29.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native27.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native29.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native27.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
     }
   );
 }
 
 // src/list/ListDivider.tsx
 var import_react18 = require("react");
-var import_react_native28 = require("react-native");
+var import_react_native30 = require("react-native");
 var import_core17 = require("@onlynative/core");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ListDivider({
@@ -3297,16 +3436,16 @@ function ListDivider({
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native28.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_native30 = require("react-native");
+var import_react_native32 = require("react-native");
 
 // src/keyboard-avoiding-wrapper/styles.ts
-var import_react_native29 = require("react-native");
-var styles2 = import_react_native29.StyleSheet.create({
+var import_react_native31 = require("react-native");
+var styles2 = import_react_native31.StyleSheet.create({
   root: {
     flex: 1
   },
@@ -3317,7 +3456,7 @@ var styles2 = import_react_native29.StyleSheet.create({
 
 // src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var isIOS = import_react_native30.Platform.OS === "ios";
+var isIOS = import_react_native32.Platform.OS === "ios";
 function KeyboardAvoidingWrapper({
   children,
   behavior = "padding",
@@ -3334,13 +3473,13 @@ function KeyboardAvoidingWrapper({
     if (onKeyboardShow) {
       const showEvent = isIOS ? "keyboardWillShow" : "keyboardDidShow";
       subscriptions.push(
-        import_react_native30.Keyboard.addListener(showEvent, onKeyboardShow)
+        import_react_native32.Keyboard.addListener(showEvent, onKeyboardShow)
       );
     }
     if (onKeyboardHide) {
       const hideEvent = isIOS ? "keyboardWillHide" : "keyboardDidHide";
       subscriptions.push(
-        import_react_native30.Keyboard.addListener(hideEvent, onKeyboardHide)
+        import_react_native32.Keyboard.addListener(hideEvent, onKeyboardHide)
       );
     }
     return () => {
@@ -3348,14 +3487,14 @@ function KeyboardAvoidingWrapper({
     };
   }, [onKeyboardShow, onKeyboardHide]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react_native30.KeyboardAvoidingView,
+    import_react_native32.KeyboardAvoidingView,
     {
       style: [styles2.root, style],
       behavior,
       keyboardVerticalOffset,
       enabled: !isIOS && enabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react_native30.ScrollView,
+        import_react_native32.ScrollView,
         {
           automaticallyAdjustKeyboardInsets: isIOS && enabled,
           keyboardShouldPersistTaps: "handled",