@onlynative/components 0.1.0-alpha.3 → 0.1.0

package/dist/index.js

@@ -39,6 +39,7 @@ __export(index_exports, {
   Column: () => Column,
   Grid: () => Grid,
   IconButton: () => IconButton,
+  KeyboardAvoidingWrapper: () => KeyboardAvoidingWrapper,
   Layout: () => Layout,
   List: () => List,
   ListDivider: () => ListDivider,
@@ -337,119 +338,30 @@ 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_core5 = require("@onlynative/core");
-
-// src/utils/icon.ts
-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;
-}
+var import_utils2 = require("@onlynative/utils");
 
 // src/button/styles.ts
-var import_react_native6 = require("react-native");
-
-// src/utils/color.ts
-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})`;
-}
-
-// src/utils/elevation.ts
 var import_react_native5 = require("react-native");
-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
-  };
-}
-
-// src/button/styles.ts
+var import_utils = require("@onlynative/utils");
 function getVariantColors(theme, variant) {
-  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
-  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  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);
   if (variant === "outlined") {
     return {
       backgroundColor: "transparent",
       textColor: theme.colors.primary,
       borderColor: theme.colors.outline,
       borderWidth: 1,
-      hoveredBackgroundColor: alphaColor(
+      hoveredBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: alphaColor(
+      pressedBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -464,11 +376,11 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.primary,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: alphaColor(
+      hoveredBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: alphaColor(
+      pressedBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -483,12 +395,12 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.primary,
       borderColor: theme.colors.surfaceContainerLow,
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.surfaceContainerLow,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.surfaceContainerLow,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
@@ -504,12 +416,12 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.onSecondaryContainer,
       borderColor: theme.colors.secondaryContainer,
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
@@ -524,12 +436,12 @@ function getVariantColors(theme, variant) {
     textColor: theme.colors.onPrimary,
     borderColor: theme.colors.primary,
     borderWidth: 0,
-    hoveredBackgroundColor: blendColor(
+    hoveredBackgroundColor: (0, import_utils.blendColor)(
       theme.colors.primary,
       theme.colors.onPrimary,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: blendColor(
+    pressedBackgroundColor: (0, import_utils.blendColor)(
       theme.colors.primary,
       theme.colors.onPrimary,
       theme.stateLayer.pressedOpacity
@@ -561,33 +473,33 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.textColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = blendColor(
+    result.hoveredBackgroundColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = blendColor(
+    result.pressedBackgroundColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
     );
   } else if (contentColor) {
     if (colors.backgroundColor === "transparent") {
-      result.hoveredBackgroundColor = alphaColor(
+      result.hoveredBackgroundColor = (0, import_utils.alphaColor)(
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = alphaColor(
+      result.pressedBackgroundColor = (0, import_utils.alphaColor)(
         contentColor,
         theme.stateLayer.pressedOpacity
       );
     } else {
-      result.hoveredBackgroundColor = blendColor(
+      result.hoveredBackgroundColor = (0, import_utils.blendColor)(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = blendColor(
+      result.pressedBackgroundColor = (0, import_utils.blendColor)(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.pressedOpacity
@@ -611,11 +523,11 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
     hasLeadingIcon,
     hasTrailingIcon
   );
-  const elevationLevel0 = elevationStyle(theme.elevation.level0);
-  const elevationLevel1 = elevationStyle(theme.elevation.level1);
-  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  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 baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native6.StyleSheet.create({
+  return import_react_native5.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -703,7 +615,7 @@ function Button({
   const hasLeading = Boolean(leadingIcon);
   const hasTrailing = Boolean(trailingIcon);
   const theme = (0, import_core5.useTheme)();
-  const styles2 = (0, import_react7.useMemo)(
+  const styles3 = (0, import_react7.useMemo)(
     () => createStyles(
       theme,
       variant,
@@ -714,35 +626,35 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
-  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils2.getMaterialCommunityIcons)() : null;
   const resolvedIconColor = (0, import_react7.useMemo)(() => {
-    const base = import_react_native8.StyleSheet.flatten([
-      styles2.label,
-      isDisabled ? styles2.disabledLabel : void 0
+    const base = import_react_native7.StyleSheet.flatten([
+      styles3.label,
+      isDisabled ? styles3.disabledLabel : void 0
     ]);
     return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles2.label, styles2.disabledLabel, isDisabled]);
+  }, [styles3.label, styles3.disabledLabel, isDisabled]);
   const computedLabelStyle = (0, import_react7.useMemo)(
     () => [
-      styles2.label,
-      isDisabled ? styles2.disabledLabel : void 0,
+      styles3.label,
+      isDisabled ? styles3.disabledLabel : void 0,
       labelStyleOverride
     ],
-    [isDisabled, styles2.disabledLabel, styles2.label, labelStyleOverride]
+    [isDisabled, styles3.disabledLabel, styles3.label, labelStyleOverride]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_react_native7.Pressable,
+    import_react_native6.Pressable,
     {
       ...props,
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native7.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native6.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolveStyle(
-        styles2.container,
-        styles2.hoveredContainer,
-        styles2.pressedContainer,
-        styles2.disabledContainer,
+        styles3.container,
+        styles3.hoveredContainer,
+        styles3.pressedContainer,
+        styles3.disabledContainer,
         isDisabled,
         style
       ),
@@ -753,17 +665,17 @@ function Button({
             name: leadingIcon,
             size: iconSize,
             color: resolvedIconColor,
-            style: styles2.leadingIcon
+            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_native8.Text, { style: computedLabelStyle, children }),
         trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MaterialCommunityIcons,
           {
             name: trailingIcon,
             size: iconSize,
             color: resolvedIconColor,
-            style: styles2.trailingIcon
+            style: styles3.trailingIcon
           }
         ) : null
       ]
@@ -773,16 +685,18 @@ function Button({
 
 // src/icon-button/IconButton.tsx
 var import_react8 = require("react");
-var import_react_native11 = require("react-native");
+var import_react_native10 = require("react-native");
 var import_core6 = require("@onlynative/core");
+var import_utils4 = require("@onlynative/utils");
 
 // src/icon-button/styles.ts
-var import_react_native10 = require("react-native");
+var import_react_native9 = require("react-native");
+var import_utils3 = require("@onlynative/utils");
 function createStyles2(theme) {
-  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = (0, import_utils3.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = (0, import_utils3.alphaColor)(theme.colors.onSurface, 0.12);
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
-  return import_react_native10.StyleSheet.create({
+  return import_react_native9.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -848,160 +762,160 @@ function createStyles2(theme) {
     },
     // Hover states (M3: 8% state layer)
     hoveredFilled: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonal: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlined: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandard: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleSelected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     // Pressed states (M3: 12% state layer)
     pressedFilled: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonal: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlined: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils3.blendColor)(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandard: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleSelected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils3.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
@@ -1034,7 +948,7 @@ function createStyles2(theme) {
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function getIconColor(variant, theme, disabled, isToggle, selected) {
   if (disabled) {
-    return alphaColor(theme.colors.onSurface, 0.38);
+    return (0, import_utils4.alphaColor)(theme.colors.onSurface, 0.38);
   }
   if (isToggle) {
     if (variant === "filled") {
@@ -1056,38 +970,38 @@ function getIconColor(variant, theme, disabled, isToggle, selected) {
   }
   return theme.colors.onSurfaceVariant;
 }
-function getColorStyle(styles2, variant, isToggle, selected) {
+function getColorStyle(styles3, variant, isToggle, selected) {
   if (isToggle) {
     if (variant === "tonal") {
-      return selected ? styles2.colorTonalToggleSelected : styles2.colorTonalToggleUnselected;
+      return selected ? styles3.colorTonalToggleSelected : styles3.colorTonalToggleUnselected;
     }
     if (variant === "outlined") {
-      return selected ? styles2.colorOutlinedToggleSelected : styles2.colorOutlined;
+      return selected ? styles3.colorOutlinedToggleSelected : styles3.colorOutlined;
     }
     if (variant === "standard") {
-      return selected ? styles2.colorStandardToggleSelected : styles2.colorStandard;
+      return selected ? styles3.colorStandardToggleSelected : styles3.colorStandard;
     }
-    return selected ? styles2.colorFilledToggleSelected : styles2.colorFilledToggleUnselected;
+    return selected ? styles3.colorFilledToggleSelected : styles3.colorFilledToggleUnselected;
   }
   if (variant === "tonal") {
-    return styles2.colorTonal;
+    return styles3.colorTonal;
   }
   if (variant === "outlined") {
-    return styles2.colorOutlined;
+    return styles3.colorOutlined;
   }
   if (variant === "standard") {
-    return styles2.colorStandard;
+    return styles3.colorStandard;
   }
-  return styles2.colorFilled;
+  return styles3.colorFilled;
 }
-function getSizeStyle(styles2, size) {
+function getSizeStyle(styles3, size) {
   if (size === "small") {
-    return styles2.sizeSmall;
+    return styles3.sizeSmall;
   }
   if (size === "large") {
-    return styles2.sizeLarge;
+    return styles3.sizeLarge;
   }
-  return styles2.sizeMedium;
+  return styles3.sizeMedium;
 }
 function getIconPixelSize(size) {
   if (size === "small") {
@@ -1107,65 +1021,65 @@ function getDefaultHitSlop(size) {
   }
   return 4;
 }
-function getHoveredStyle(styles2, variant, isToggle, selected) {
+function getHoveredStyle(styles3, variant, isToggle, selected) {
   if (isToggle) {
     if (variant === "tonal") {
-      return selected ? styles2.hoveredTonalToggleSelected : styles2.hoveredTonalToggleUnselected;
+      return selected ? styles3.hoveredTonalToggleSelected : styles3.hoveredTonalToggleUnselected;
     }
     if (variant === "outlined") {
-      return selected ? styles2.hoveredOutlinedToggleSelected : styles2.hoveredOutlinedToggleUnselected;
+      return selected ? styles3.hoveredOutlinedToggleSelected : styles3.hoveredOutlinedToggleUnselected;
     }
     if (variant === "standard") {
-      return selected ? styles2.hoveredStandardToggleSelected : styles2.hoveredStandardToggleUnselected;
+      return selected ? styles3.hoveredStandardToggleSelected : styles3.hoveredStandardToggleUnselected;
     }
-    return selected ? styles2.hoveredFilledToggleSelected : styles2.hoveredFilledToggleUnselected;
+    return selected ? styles3.hoveredFilledToggleSelected : styles3.hoveredFilledToggleUnselected;
   }
   if (variant === "tonal") {
-    return styles2.hoveredTonal;
+    return styles3.hoveredTonal;
   }
   if (variant === "outlined") {
-    return styles2.hoveredOutlined;
+    return styles3.hoveredOutlined;
   }
   if (variant === "standard") {
-    return styles2.hoveredStandard;
+    return styles3.hoveredStandard;
   }
-  return styles2.hoveredFilled;
+  return styles3.hoveredFilled;
 }
-function getPressedStyle(styles2, variant, isToggle, selected) {
+function getPressedStyle(styles3, variant, isToggle, selected) {
   if (isToggle) {
     if (variant === "tonal") {
-      return selected ? styles2.pressedTonalToggleSelected : styles2.pressedTonalToggleUnselected;
+      return selected ? styles3.pressedTonalToggleSelected : styles3.pressedTonalToggleUnselected;
     }
     if (variant === "outlined") {
-      return selected ? styles2.pressedOutlinedToggleSelected : styles2.pressedOutlinedToggleUnselected;
+      return selected ? styles3.pressedOutlinedToggleSelected : styles3.pressedOutlinedToggleUnselected;
     }
     if (variant === "standard") {
-      return selected ? styles2.pressedStandardToggleSelected : styles2.pressedStandardToggleUnselected;
+      return selected ? styles3.pressedStandardToggleSelected : styles3.pressedStandardToggleUnselected;
     }
-    return selected ? styles2.pressedFilledToggleSelected : styles2.pressedFilledToggleUnselected;
+    return selected ? styles3.pressedFilledToggleSelected : styles3.pressedFilledToggleUnselected;
   }
   if (variant === "tonal") {
-    return styles2.pressedTonal;
+    return styles3.pressedTonal;
   }
   if (variant === "outlined") {
-    return styles2.pressedOutlined;
+    return styles3.pressedOutlined;
   }
   if (variant === "standard") {
-    return styles2.pressedStandard;
+    return styles3.pressedStandard;
   }
-  return styles2.pressedFilled;
+  return styles3.pressedFilled;
 }
-function getDisabledStyle(styles2, variant) {
+function getDisabledStyle(styles3, variant) {
   if (variant === "tonal") {
-    return styles2.disabledTonal;
+    return styles3.disabledTonal;
   }
   if (variant === "outlined") {
-    return styles2.disabledOutlined;
+    return styles3.disabledOutlined;
   }
   if (variant === "standard") {
-    return styles2.disabledStandard;
+    return styles3.disabledStandard;
   }
-  return styles2.disabledFilled;
+  return styles3.disabledFilled;
 }
 function IconButton({
   icon,
@@ -1184,9 +1098,9 @@ function IconButton({
   ...props
 }) {
   var _a;
-  const MaterialCommunityIcons = getMaterialCommunityIcons();
+  const MaterialCommunityIcons = (0, import_utils4.getMaterialCommunityIcons)();
   const theme = (0, import_core6.useTheme)();
-  const styles2 = (0, import_react8.useMemo)(() => createStyles2(theme), [theme]);
+  const styles3 = (0, import_react8.useMemo)(() => createStyles2(theme), [theme]);
   const isDisabled = Boolean(disabled);
   const isToggle = selected !== void 0;
   const isSelected = Boolean(selected);
@@ -1204,14 +1118,14 @@ function IconButton({
         borderWidth: 0
       },
       hovered: {
-        backgroundColor: blendColor(
+        backgroundColor: (0, import_utils4.blendColor)(
           containerColor,
           overlay,
           theme.stateLayer.hoveredOpacity
         )
       },
       pressed: {
-        backgroundColor: blendColor(
+        backgroundColor: (0, import_utils4.blendColor)(
           containerColor,
           overlay,
           theme.stateLayer.pressedOpacity
@@ -1220,7 +1134,7 @@ function IconButton({
     };
   }, [containerColor, resolvedIconColor, theme.stateLayer]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_native11.Pressable,
+    import_react_native10.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -1234,13 +1148,13 @@ function IconButton({
         hovered
       }) => {
         const base = [
-          styles2.container,
-          getSizeStyle(styles2, size),
-          getColorStyle(styles2, variant, isToggle, isSelected),
+          styles3.container,
+          getSizeStyle(styles3, size),
+          getColorStyle(styles3, variant, isToggle, isSelected),
           containerOverrides == null ? void 0 : containerOverrides.base,
-          hovered && !pressed && !isDisabled ? containerOverrides ? containerOverrides.hovered : getHoveredStyle(styles2, variant, isToggle, isSelected) : void 0,
-          pressed && !isDisabled ? containerOverrides ? containerOverrides.pressed : getPressedStyle(styles2, variant, isToggle, isSelected) : void 0,
-          isDisabled ? getDisabledStyle(styles2, variant) : void 0
+          hovered && !pressed && !isDisabled ? containerOverrides ? containerOverrides.hovered : getHoveredStyle(styles3, variant, isToggle, isSelected) : void 0,
+          pressed && !isDisabled ? containerOverrides ? containerOverrides.pressed : getPressedStyle(styles3, variant, isToggle, isSelected) : void 0,
+          isDisabled ? getDisabledStyle(styles3, variant) : void 0
         ];
         if (typeof style === "function") {
           base.push(style({ pressed }));
@@ -1263,26 +1177,18 @@ function IconButton({
 
 // src/appbar/AppBar.tsx
 var import_react9 = require("react");
-var import_react_native14 = require("react-native");
+var import_react_native12 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_core8 = require("@onlynative/core");
-
-// src/utils/rtl.ts
-var import_react_native12 = require("react-native");
-function transformOrigin(vertical = "top") {
-  return import_react_native12.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
-}
-function selectRTL(ltr, rtl) {
-  return import_react_native12.I18nManager.isRTL ? rtl : ltr;
-}
+var import_utils5 = require("@onlynative/utils");
 
 // src/appbar/styles.ts
-var import_react_native13 = require("react-native");
+var import_react_native11 = require("react-native");
 var import_core7 = require("@onlynative/core");
 function createStyles3(theme) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core7.defaultTopAppBarTokens;
-  return import_react_native13.StyleSheet.create({
+  return import_react_native11.StyleSheet.create({
     root: {
       backgroundColor: theme.colors.surface
     },
@@ -1371,10 +1277,10 @@ function createStyles3(theme) {
 // src/appbar/AppBar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function getBackIcon() {
-  if (import_react_native14.Platform.OS === "ios") {
-    return selectRTL("chevron-left", "chevron-right");
+  if (import_react_native12.Platform.OS === "ios") {
+    return (0, import_utils5.selectRTL)("chevron-left", "chevron-right");
   }
-  return selectRTL("arrow-left", "arrow-right");
+  return (0, import_utils5.selectRTL)("arrow-left", "arrow-right");
 }
 var titleVariantBySize = {
   small: "titleLarge",
@@ -1392,17 +1298,17 @@ function resolveSize(variant) {
   }
   return "small";
 }
-function getSizeStyle2(styles2, size) {
+function getSizeStyle2(styles3, size) {
   if (size === "large") {
-    return styles2.largeContainer;
+    return styles3.largeContainer;
   }
-  return styles2.mediumContainer;
+  return styles3.mediumContainer;
 }
 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_native14.View, { style, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style, children: content });
 }
 function measureWidth(event) {
   return Math.round(event.nativeEvent.layout.width);
@@ -1425,7 +1331,7 @@ function AppBar({
   var _a;
   const theme = (0, import_core8.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core8.defaultTopAppBarTokens;
-  const styles2 = (0, import_react9.useMemo)(() => createStyles3(theme), [theme]);
+  const styles3 = (0, import_react9.useMemo)(() => createStyles3(theme), [theme]);
   const [leadingWidth, setLeadingWidth] = (0, import_react9.useState)(0);
   const [actionsWidth, setActionsWidth] = (0, import_react9.useState)(0);
   const titleColorStyle = (0, import_react9.useMemo)(
@@ -1454,7 +1360,7 @@ function AppBar({
     if (!canGoBack) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles2.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: styles3.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       IconButton,
       {
         icon: getBackIcon(),
@@ -1470,7 +1376,7 @@ function AppBar({
     contentColor,
     leading,
     onBackPress,
-    styles2.iconFrame,
+    styles3.iconFrame,
     theme.colors.onSurface
   ]);
   const actionsContent = (0, import_react9.useMemo)(() => {
@@ -1480,10 +1386,10 @@ function AppBar({
     if (!actions || actions.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles2.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native14.View,
+    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,
       {
-        style: styles2.iconFrame,
+        style: styles3.iconFrame,
         children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           IconButton,
           {
@@ -1499,7 +1405,7 @@ function AppBar({
       },
       `${String(action.icon)}-${index}`
     )) });
-  }, [actions, contentColor, styles2.actionsRow, styles2.iconFrame, trailing]);
+  }, [actions, contentColor, styles3.actionsRow, styles3.iconFrame, trailing]);
   const onLeadingLayout = (0, import_react9.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
@@ -1518,48 +1424,48 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles2.topRow, children: [
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.View, { style: styles3.topRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native14.View,
+      import_react_native12.View,
       {
         collapsable: false,
         onLayout: onLeadingLayout,
-        style: styles2.sideSlot,
+        style: styles3.sideSlot,
         children: leadingContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles2.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: styles3.topRowSpacer }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native14.View,
+      import_react_native12.View,
       {
         collapsable: false,
         onLayout: onActionsLayout,
-        style: styles2.sideSlot,
+        style: styles3.sideSlot,
         children: actionsContent
       }
     )
   ] });
   const containerOverride = containerColor ? { backgroundColor: containerColor } : void 0;
   const rootStyle = [
-    styles2.root,
-    elevated ? styles2.elevatedRoot : void 0,
+    styles3.root,
+    elevated ? styles3.elevatedRoot : void 0,
     containerOverride,
     style
   ];
   const safeAreaStyle = [
-    styles2.safeArea,
-    elevated ? styles2.elevatedSafeArea : void 0,
+    styles3.safeArea,
+    elevated ? styles3.elevatedSafeArea : void 0,
     containerOverride
   ];
   if (isExpanded) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: [styles2.expandedContainer, getSizeStyle2(styles2, size)], children: [
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.View, { style: [styles3.expandedContainer, getSizeStyle2(styles3, size)], children: [
       topRow,
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_react_native14.View,
+        import_react_native12.View,
         {
           style: [
-            styles2.expandedTitleContainer,
-            size === "large" ? styles2.largeTitlePadding : styles2.mediumTitlePadding,
+            styles3.expandedTitleContainer,
+            size === "large" ? styles3.largeTitlePadding : styles3.mediumTitlePadding,
             expandedTitleInsetStyle
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1568,9 +1474,9 @@ function AppBar({
               ...APP_BAR_TITLE_TEXT_PROPS,
               variant: titleVariant,
               style: [
-                styles2.title,
+                styles3.title,
                 titleColorStyle,
-                styles2.startAlignedTitle,
+                styles3.startAlignedTitle,
                 titleStyle
               ],
               children: title
@@ -1579,48 +1485,49 @@ function AppBar({
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles2.smallContainer, children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.View, { style: styles3.smallContainer, children: [
     topRow,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: [styles2.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [styles3.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Typography,
       {
         ...APP_BAR_TITLE_TEXT_PROPS,
         variant: titleVariant,
         style: [
-          styles2.title,
+          styles3.title,
           titleColorStyle,
-          isCenterAligned ? styles2.centeredTitle : styles2.startAlignedTitle,
+          isCenterAligned ? styles3.centeredTitle : styles3.startAlignedTitle,
           titleStyle
         ],
         children: title
       }
     ) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
 }
 
 // src/card/Card.tsx
 var import_react10 = require("react");
-var import_react_native16 = require("react-native");
+var import_react_native14 = require("react-native");
 var import_core9 = require("@onlynative/core");
 
 // src/card/styles.ts
-var import_react_native15 = require("react-native");
+var import_react_native13 = require("react-native");
+var import_utils6 = require("@onlynative/utils");
 function getVariantColors2(theme, variant) {
-  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = (0, import_utils6.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = (0, import_utils6.alphaColor)(theme.colors.onSurface, 0.12);
   if (variant === "outlined") {
     return {
       backgroundColor: theme.colors.surface,
       borderColor: theme.colors.outline,
       borderWidth: 1,
-      hoveredBackgroundColor: alphaColor(
+      hoveredBackgroundColor: (0, import_utils6.alphaColor)(
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: alphaColor(
+      pressedBackgroundColor: (0, import_utils6.alphaColor)(
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
       ),
@@ -1633,12 +1540,12 @@ function getVariantColors2(theme, variant) {
       backgroundColor: theme.colors.surfaceContainerHighest,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils6.blendColor)(
         theme.colors.surfaceContainerHighest,
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils6.blendColor)(
         theme.colors.surfaceContainerHighest,
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
@@ -1651,12 +1558,12 @@ function getVariantColors2(theme, variant) {
     backgroundColor: theme.colors.surface,
     borderColor: "transparent",
     borderWidth: 0,
-    hoveredBackgroundColor: blendColor(
+    hoveredBackgroundColor: (0, import_utils6.blendColor)(
       theme.colors.surface,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: blendColor(
+    pressedBackgroundColor: (0, import_utils6.blendColor)(
       theme.colors.surface,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -1672,12 +1579,12 @@ function applyColorOverrides2(theme, colors, containerColor) {
     backgroundColor: containerColor,
     borderColor: containerColor,
     borderWidth: 0,
-    hoveredBackgroundColor: blendColor(
+    hoveredBackgroundColor: (0, import_utils6.blendColor)(
       containerColor,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: blendColor(
+    pressedBackgroundColor: (0, import_utils6.blendColor)(
       containerColor,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -1687,11 +1594,11 @@ function applyColorOverrides2(theme, colors, containerColor) {
 function createStyles4(theme, variant, containerColor) {
   const baseColors = getVariantColors2(theme, variant);
   const colors = applyColorOverrides2(theme, baseColors, containerColor);
-  const elevationLevel0 = elevationStyle(theme.elevation.level0);
-  const elevationLevel1 = elevationStyle(theme.elevation.level1);
-  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  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 baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native15.StyleSheet.create({
+  return import_react_native13.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerMedium,
       backgroundColor: colors.backgroundColor,
@@ -1736,59 +1643,61 @@ function Card({
   const isDisabled = Boolean(disabled);
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core9.useTheme)();
-  const styles2 = (0, import_react10.useMemo)(
+  const styles3 = (0, import_react10.useMemo)(
     () => createStyles4(theme, variant, containerColor),
     [theme, variant, containerColor]
   );
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { ...props, style: [styles2.container, style], children });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native14.View, { ...props, style: [styles3.container, style], children });
   }
   const resolvedStyle = (state) => [
-    styles2.container,
-    styles2.interactiveContainer,
-    state.hovered && !state.pressed && !isDisabled ? styles2.hoveredContainer : void 0,
-    state.pressed && !isDisabled ? styles2.pressedContainer : void 0,
-    isDisabled ? styles2.disabledContainer : void 0,
+    styles3.container,
+    styles3.interactiveContainer,
+    state.hovered && !state.pressed && !isDisabled ? styles3.hoveredContainer : void 0,
+    state.pressed && !isDisabled ? styles3.pressedContainer : void 0,
+    isDisabled ? styles3.disabledContainer : void 0,
     typeof style === "function" ? style(state) : style
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native16.Pressable,
+    import_react_native14.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native16.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native14.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { style: styles2.disabledContent, children }) : children
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native14.View, { style: styles3.disabledContent, children }) : children
     }
   );
 }
 
 // src/chip/Chip.tsx
 var import_react11 = require("react");
-var import_react_native18 = require("react-native");
+var import_react_native16 = require("react-native");
 var import_core10 = require("@onlynative/core");
+var import_utils8 = require("@onlynative/utils");
 
 // src/chip/styles.ts
-var import_react_native17 = require("react-native");
+var import_react_native15 = require("react-native");
+var import_utils7 = require("@onlynative/utils");
 function getVariantColors3(theme, variant, elevated, selected) {
-  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
-  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  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);
   if (variant === "filter" && selected) {
     return {
       backgroundColor: theme.colors.secondaryContainer,
       textColor: theme.colors.onSecondaryContainer,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils7.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils7.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
@@ -1805,12 +1714,12 @@ function getVariantColors3(theme, variant, elevated, selected) {
       textColor: textColor2,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils7.blendColor)(
         theme.colors.surfaceContainerLow,
         textColor2,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils7.blendColor)(
         theme.colors.surfaceContainerLow,
         textColor2,
         theme.stateLayer.pressedOpacity
@@ -1826,12 +1735,12 @@ function getVariantColors3(theme, variant, elevated, selected) {
     textColor,
     borderColor: theme.colors.outline,
     borderWidth: 1,
-    hoveredBackgroundColor: blendColor(
+    hoveredBackgroundColor: (0, import_utils7.blendColor)(
       theme.colors.surface,
       textColor,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: blendColor(
+    pressedBackgroundColor: (0, import_utils7.blendColor)(
       theme.colors.surface,
       textColor,
       theme.stateLayer.pressedOpacity
@@ -1851,33 +1760,33 @@ function applyColorOverrides3(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.textColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = blendColor(
+    result.hoveredBackgroundColor = (0, import_utils7.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = blendColor(
+    result.pressedBackgroundColor = (0, import_utils7.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
     );
   } else if (contentColor) {
     if (colors.backgroundColor === "transparent") {
-      result.hoveredBackgroundColor = alphaColor(
+      result.hoveredBackgroundColor = (0, import_utils7.alphaColor)(
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = alphaColor(
+      result.pressedBackgroundColor = (0, import_utils7.alphaColor)(
         contentColor,
         theme.stateLayer.pressedOpacity
       );
     } else {
-      result.hoveredBackgroundColor = blendColor(
+      result.hoveredBackgroundColor = (0, import_utils7.blendColor)(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = blendColor(
+      result.pressedBackgroundColor = (0, import_utils7.blendColor)(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.pressedOpacity
@@ -1895,12 +1804,12 @@ function createStyles5(theme, variant, elevated, selected, hasLeadingContent, ha
     contentColor
   );
   const labelStyle = theme.typography.labelLarge;
-  const elevationLevel0 = elevationStyle(theme.elevation.level0);
-  const elevationLevel1 = elevationStyle(theme.elevation.level1);
-  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  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 isElevated = elevated && variant !== "input";
   const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
-  return import_react_native17.StyleSheet.create({
+  return import_react_native15.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -1998,9 +1907,9 @@ function Chip({
     variant === "input" && avatar || leadingIcon || variant === "filter" && isSelected
   );
   const needsIcons = Boolean(leadingIcon) || variant === "filter" && isSelected || showCloseIcon;
-  const MaterialCommunityIcons = needsIcons ? getMaterialCommunityIcons() : null;
+  const MaterialCommunityIcons = needsIcons ? (0, import_utils8.getMaterialCommunityIcons)() : null;
   const theme = (0, import_core10.useTheme)();
-  const styles2 = (0, import_react11.useMemo)(
+  const styles3 = (0, import_react11.useMemo)(
     () => createStyles5(
       theme,
       variant,
@@ -2023,23 +1932,23 @@ function Chip({
     ]
   );
   const resolvedIconColor = (0, import_react11.useMemo)(() => {
-    const base = import_react_native18.StyleSheet.flatten([
-      styles2.label,
-      isDisabled ? styles2.disabledLabel : void 0
+    const base = import_react_native16.StyleSheet.flatten([
+      styles3.label,
+      isDisabled ? styles3.disabledLabel : void 0
     ]);
     return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles2.label, styles2.disabledLabel, isDisabled]);
+  }, [styles3.label, styles3.disabledLabel, isDisabled]);
   const computedLabelStyle = (0, import_react11.useMemo)(
     () => [
-      styles2.label,
-      isDisabled ? styles2.disabledLabel : void 0,
+      styles3.label,
+      isDisabled ? styles3.disabledLabel : void 0,
       labelStyleOverride
     ],
-    [isDisabled, styles2.disabledLabel, styles2.label, labelStyleOverride]
+    [isDisabled, styles3.disabledLabel, styles3.label, labelStyleOverride]
   );
   const renderLeadingContent = () => {
     if (variant === "input" && avatar) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.View, { style: styles2.avatar, children: avatar });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native16.View, { style: styles3.avatar, children: avatar });
     }
     if (leadingIcon) {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2048,7 +1957,7 @@ function Chip({
           name: leadingIcon,
           size: iconSize,
           color: resolvedIconColor,
-          style: styles2.leadingIcon
+          style: styles3.leadingIcon
         }
       );
     }
@@ -2059,14 +1968,14 @@ function Chip({
           name: "check",
           size: iconSize,
           color: resolvedIconColor,
-          style: styles2.leadingIcon
+          style: styles3.leadingIcon
         }
       );
     }
     return null;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_react_native18.Pressable,
+    import_react_native16.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -2074,27 +1983,27 @@ function Chip({
         disabled: isDisabled,
         ...variant === "filter" ? { selected: isSelected } : void 0
       },
-      hitSlop: import_react_native18.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native16.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolveStyle2(
-        styles2.container,
-        styles2.hoveredContainer,
-        styles2.pressedContainer,
-        styles2.disabledContainer,
+        styles3.container,
+        styles3.hoveredContainer,
+        styles3.pressedContainer,
+        styles3.disabledContainer,
         isDisabled,
         style
       ),
       children: [
         renderLeadingContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.Text, { style: computedLabelStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native16.Text, { style: computedLabelStyle, children }),
         showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native18.Pressable,
+          import_react_native16.Pressable,
           {
             onPress: onClose,
             accessibilityRole: "button",
             accessibilityLabel: "Remove",
             hitSlop: 4,
-            style: styles2.closeButton,
+            style: styles3.closeButton,
             children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               MaterialCommunityIcons,
               {
@@ -2112,25 +2021,27 @@ function Chip({
 
 // src/checkbox/Checkbox.tsx
 var import_react12 = require("react");
-var import_react_native20 = require("react-native");
+var import_react_native18 = require("react-native");
 var import_core11 = require("@onlynative/core");
+var import_utils10 = require("@onlynative/utils");
 
 // src/checkbox/styles.ts
-var import_react_native19 = require("react-native");
+var import_react_native17 = require("react-native");
+var import_utils9 = require("@onlynative/utils");
 function getColors(theme, checked) {
-  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOnSurface38 = (0, import_utils9.alphaColor)(theme.colors.onSurface, 0.38);
   if (checked) {
     return {
       backgroundColor: theme.colors.primary,
       borderColor: "transparent",
       borderWidth: 0,
       iconColor: theme.colors.onPrimary,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils9.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils9.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
@@ -2146,11 +2057,11 @@ function getColors(theme, checked) {
     borderColor: theme.colors.onSurfaceVariant,
     borderWidth: 2,
     iconColor: "transparent",
-    hoveredBackgroundColor: alphaColor(
+    hoveredBackgroundColor: (0, import_utils9.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: alphaColor(
+    pressedBackgroundColor: (0, import_utils9.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     ),
@@ -2170,12 +2081,12 @@ function applyColorOverrides4(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.iconColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = blendColor(
+    result.hoveredBackgroundColor = (0, import_utils9.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = blendColor(
+    result.pressedBackgroundColor = (0, import_utils9.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
@@ -2192,7 +2103,7 @@ function createStyles6(theme, checked, containerColor, contentColor) {
   );
   const size = 18;
   const touchTarget = 48;
-  return import_react_native19.StyleSheet.create({
+  return import_react_native17.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2266,26 +2177,26 @@ function Checkbox({
 }) {
   const isDisabled = Boolean(disabled);
   const isChecked = Boolean(value);
-  const MaterialCommunityIcons = isChecked ? getMaterialCommunityIcons() : null;
+  const MaterialCommunityIcons = isChecked ? (0, import_utils10.getMaterialCommunityIcons)() : null;
   const theme = (0, import_core11.useTheme)();
-  const styles2 = (0, import_react12.useMemo)(
+  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_native20.StyleSheet.flatten([
-      styles2.iconColor,
-      isDisabled ? styles2.disabledIconColor : void 0
+    const base = import_react_native18.StyleSheet.flatten([
+      styles3.iconColor,
+      isDisabled ? styles3.disabledIconColor : void 0
     ]);
     return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles2.iconColor, styles2.disabledIconColor, isDisabled]);
+  }, [styles3.iconColor, styles3.disabledIconColor, isDisabled]);
   const handlePress = () => {
     if (!isDisabled) {
       onValueChange == null ? void 0 : onValueChange(!isChecked);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native20.Pressable,
+    import_react_native18.Pressable,
     {
       ...props,
       accessibilityRole: "checkbox",
@@ -2293,18 +2204,18 @@ function Checkbox({
         disabled: isDisabled,
         checked: isChecked
       },
-      hitSlop: import_react_native20.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native18.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle3(
-        styles2.container,
-        styles2.hoveredContainer,
-        styles2.pressedContainer,
-        styles2.disabledContainer,
+        styles3.container,
+        styles3.hoveredContainer,
+        styles3.pressedContainer,
+        styles3.disabledContainer,
         isDisabled,
         style
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native20.View, { style: [styles2.box, isDisabled ? styles2.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      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)(
         MaterialCommunityIcons,
         {
           name: "check",
@@ -2318,22 +2229,23 @@ function Checkbox({
 
 // src/radio/Radio.tsx
 var import_react13 = require("react");
-var import_react_native22 = require("react-native");
+var import_react_native20 = require("react-native");
 var import_core12 = require("@onlynative/core");
 
 // src/radio/styles.ts
-var import_react_native21 = require("react-native");
+var import_react_native19 = require("react-native");
+var import_utils11 = require("@onlynative/utils");
 function getColors2(theme, selected) {
-  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOnSurface38 = (0, import_utils11.alphaColor)(theme.colors.onSurface, 0.38);
   if (selected) {
     return {
       borderColor: theme.colors.primary,
       dotColor: theme.colors.primary,
-      hoveredBackgroundColor: alphaColor(
+      hoveredBackgroundColor: (0, import_utils11.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: alphaColor(
+      pressedBackgroundColor: (0, import_utils11.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -2344,11 +2256,11 @@ function getColors2(theme, selected) {
   return {
     borderColor: theme.colors.onSurfaceVariant,
     dotColor: "transparent",
-    hoveredBackgroundColor: alphaColor(
+    hoveredBackgroundColor: (0, import_utils11.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: alphaColor(
+    pressedBackgroundColor: (0, import_utils11.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     ),
@@ -2362,11 +2274,11 @@ function applyColorOverrides5(theme, colors, containerColor, contentColor) {
   if (containerColor) {
     result.borderColor = containerColor;
     result.dotColor = containerColor;
-    result.hoveredBackgroundColor = alphaColor(
+    result.hoveredBackgroundColor = (0, import_utils11.alphaColor)(
       containerColor,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = alphaColor(
+    result.pressedBackgroundColor = (0, import_utils11.alphaColor)(
       containerColor,
       theme.stateLayer.pressedOpacity
     );
@@ -2386,7 +2298,7 @@ function createStyles7(theme, selected, containerColor, contentColor) {
   const outerSize = 20;
   const innerSize = 10;
   const touchTarget = 48;
-  return import_react_native21.StyleSheet.create({
+  return import_react_native19.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2461,7 +2373,7 @@ function Radio({
   const isDisabled = Boolean(disabled);
   const isSelected = Boolean(value);
   const theme = (0, import_core12.useTheme)();
-  const styles2 = (0, import_react13.useMemo)(
+  const styles3 = (0, import_react13.useMemo)(
     () => createStyles7(theme, isSelected, containerColor, contentColor),
     [theme, isSelected, containerColor, contentColor]
   );
@@ -2471,7 +2383,7 @@ function Radio({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native22.Pressable,
+    import_react_native20.Pressable,
     {
       ...props,
       accessibilityRole: "radio",
@@ -2479,27 +2391,27 @@ function Radio({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native22.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native20.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle4(
-        styles2.container,
-        styles2.hoveredContainer,
-        styles2.pressedContainer,
-        styles2.disabledContainer,
+        styles3.container,
+        styles3.hoveredContainer,
+        styles3.pressedContainer,
+        styles3.disabledContainer,
         isDisabled,
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native22.View,
+        import_react_native20.View,
         {
-          style: [styles2.outer, isDisabled ? styles2.disabledOuter : void 0],
+          style: [styles3.outer, isDisabled ? styles3.disabledOuter : void 0],
           children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react_native22.View,
+            import_react_native20.View,
             {
               style: [
-                styles2.inner,
-                isDisabled ? styles2.disabledInner : void 0
+                styles3.inner,
+                isDisabled ? styles3.disabledInner : void 0
               ]
             }
           ) : null
@@ -2511,25 +2423,27 @@ function Radio({
 
 // src/switch/Switch.tsx
 var import_react14 = require("react");
-var import_react_native24 = require("react-native");
+var import_react_native22 = require("react-native");
 var import_core13 = require("@onlynative/core");
+var import_utils13 = require("@onlynative/utils");
 
 // src/switch/styles.ts
-var import_react_native23 = require("react-native");
+var import_react_native21 = require("react-native");
+var import_utils12 = require("@onlynative/utils");
 function getColors3(theme, selected) {
-  const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOnSurface12 = (0, import_utils12.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledOnSurface38 = (0, import_utils12.alphaColor)(theme.colors.onSurface, 0.38);
   if (selected) {
     return {
       trackColor: theme.colors.primary,
       thumbColor: theme.colors.onPrimary,
       iconColor: theme.colors.onPrimaryContainer,
-      hoveredTrackColor: blendColor(
+      hoveredTrackColor: (0, import_utils12.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedTrackColor: blendColor(
+      pressedTrackColor: (0, import_utils12.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
@@ -2546,12 +2460,12 @@ function getColors3(theme, selected) {
     trackColor: theme.colors.surfaceContainerHighest,
     thumbColor: theme.colors.outline,
     iconColor: theme.colors.surfaceContainerHighest,
-    hoveredTrackColor: blendColor(
+    hoveredTrackColor: (0, import_utils12.blendColor)(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedTrackColor: blendColor(
+    pressedTrackColor: (0, import_utils12.blendColor)(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -2575,12 +2489,12 @@ function applyColorOverrides6(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.thumbColor;
     result.trackColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredTrackColor = blendColor(
+    result.hoveredTrackColor = (0, import_utils12.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedTrackColor = blendColor(
+    result.pressedTrackColor = (0, import_utils12.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
@@ -2603,7 +2517,7 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
   const trackHeight = 32;
   const trackPadding = 4;
   const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
-  return import_react_native23.StyleSheet.create({
+  return import_react_native21.StyleSheet.create({
     track: {
       width: trackWidth,
       height: trackHeight,
@@ -2642,7 +2556,7 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
       color: colors.iconColor
     },
     disabledIconColor: {
-      color: alphaColor(theme.colors.onSurface, 0.38)
+      color: (0, import_utils12.alphaColor)(theme.colors.onSurface, 0.38)
     }
   });
 }
@@ -2682,27 +2596,27 @@ function Switch({
   const isSelected = Boolean(value);
   const hasIcon = isSelected || Boolean(unselectedIcon);
   const theme = (0, import_core13.useTheme)();
-  const styles2 = (0, import_react14.useMemo)(
+  const styles3 = (0, import_react14.useMemo)(
     () => createStyles8(theme, isSelected, hasIcon, containerColor, contentColor),
     [theme, isSelected, hasIcon, containerColor, contentColor]
   );
   const resolvedIconColor = (0, import_react14.useMemo)(() => {
-    const base = import_react_native24.StyleSheet.flatten([
-      styles2.iconColor,
-      isDisabled ? styles2.disabledIconColor : void 0
+    const base = import_react_native22.StyleSheet.flatten([
+      styles3.iconColor,
+      isDisabled ? styles3.disabledIconColor : void 0
     ]);
     return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles2.iconColor, styles2.disabledIconColor, isDisabled]);
+  }, [styles3.iconColor, styles3.disabledIconColor, isDisabled]);
   const handlePress = () => {
     if (!isDisabled) {
       onValueChange == null ? void 0 : onValueChange(!isSelected);
     }
   };
   const iconName = isSelected ? selectedIcon : unselectedIcon;
-  const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
+  const MaterialCommunityIcons = iconName ? (0, import_utils13.getMaterialCommunityIcons)() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_native24.Pressable,
+    import_react_native22.Pressable,
     {
       ...props,
       accessibilityRole: "switch",
@@ -2710,21 +2624,21 @@ function Switch({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native24.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native22.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle5(
-        styles2.track,
-        styles2.hoveredTrack,
-        styles2.pressedTrack,
-        styles2.disabledTrack,
+        styles3.track,
+        styles3.hoveredTrack,
+        styles3.pressedTrack,
+        styles3.disabledTrack,
         isDisabled,
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_react_native24.View,
+        import_react_native22.View,
         {
-          style: [styles2.thumb, isDisabled ? styles2.disabledThumb : void 0],
+          style: [styles3.thumb, isDisabled ? styles3.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             MaterialCommunityIcons,
             {
@@ -2741,11 +2655,13 @@ function Switch({
 
 // src/text-field/TextField.tsx
 var import_react15 = require("react");
-var import_react_native26 = require("react-native");
+var import_react_native24 = require("react-native");
 var import_core14 = require("@onlynative/core");
+var import_utils15 = require("@onlynative/utils");
 
 // src/text-field/styles.ts
-var import_react_native25 = require("react-native");
+var import_react_native23 = require("react-native");
+var import_utils14 = require("@onlynative/utils");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -2770,15 +2686,15 @@ function getVariantColors4(theme, variant) {
     focusedLabelColor: theme.colors.primary,
     errorLabelColor: theme.colors.error,
     textColor: theme.colors.onSurface,
-    disabledTextColor: alphaColor(theme.colors.onSurface, disabledOpacity),
-    disabledLabelColor: alphaColor(theme.colors.onSurface, disabledOpacity),
-    disabledBorderColor: alphaColor(theme.colors.onSurface, 0.12),
+    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),
     placeholderColor: theme.colors.onSurfaceVariant,
     supportingTextColor: theme.colors.onSurfaceVariant,
     errorSupportingTextColor: theme.colors.error,
     iconColor: theme.colors.onSurfaceVariant,
     errorIconColor: theme.colors.error,
-    disabledIconColor: alphaColor(theme.colors.onSurface, disabledOpacity)
+    disabledIconColor: (0, import_utils14.alphaColor)(theme.colors.onSurface, disabledOpacity)
   };
   if (variant === "outlined") {
     return {
@@ -2793,7 +2709,7 @@ function getVariantColors4(theme, variant) {
     ...common,
     backgroundColor: theme.colors.surfaceContainerHighest,
     borderColor: theme.colors.onSurfaceVariant,
-    disabledBackgroundColor: alphaColor(theme.colors.onSurface, 0.04),
+    disabledBackgroundColor: (0, import_utils14.alphaColor)(theme.colors.onSurface, 0.04),
     labelColor: theme.colors.onSurfaceVariant
   };
 }
@@ -2804,7 +2720,7 @@ function createStyles9(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native25.StyleSheet.create({
+    styles: import_react_native23.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -2875,7 +2791,7 @@ function createStyles9(theme, variant) {
         fontWeight: bodySmall.fontWeight,
         letterSpacing: bodySmall.letterSpacing,
         color: colors.labelColor,
-        transformOrigin: transformOrigin("top")
+        transformOrigin: (0, import_utils14.transformOrigin)("top")
       },
       labelNotch: {
         paddingHorizontal: 4
@@ -2968,8 +2884,8 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
-  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
-  const { colors, styles: styles2 } = (0, import_react15.useMemo)(
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils15.getMaterialCommunityIcons)() : null;
+  const { colors, styles: styles3 } = (0, import_react15.useMemo)(
     () => createStyles9(theme, variant),
     [theme, variant]
   );
@@ -2981,13 +2897,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_native26.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnimRef = (0, import_react15.useRef)(new import_react_native24.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
   (0, import_react15.useEffect)(() => {
-    import_react_native26.Animated.timing(labelAnim, {
+    import_react_native24.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native26.Platform.OS !== "web"
+      useNativeDriver: import_react_native24.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react15.useMemo)(() => {
@@ -3047,27 +2963,27 @@ function TextField({
   const iconColor = isDisabled ? colors.disabledIconColor : isError ? colors.errorIconColor : contentColor != null ? contentColor : colors.iconColor;
   const containerStyle = (0, import_react15.useMemo)(
     () => [
-      styles2.container,
+      styles3.container,
       containerColor && !isDisabled ? { backgroundColor: containerColor } : void 0,
-      isFocused && styles2.containerFocused,
-      isError && !isFocused && styles2.containerError,
-      isDisabled && styles2.containerDisabled
+      isFocused && styles3.containerFocused,
+      isError && !isFocused && styles3.containerError,
+      isDisabled && styles3.containerDisabled
     ],
-    [styles2, isFocused, isError, isDisabled, containerColor]
+    [styles3, isFocused, isError, isDisabled, containerColor]
   );
   const indicatorStyle = (0, import_react15.useMemo)(
     () => [
-      styles2.indicator,
-      isFocused && styles2.indicatorFocused,
-      isError && !isFocused && styles2.indicatorError,
-      isDisabled && styles2.indicatorDisabled
+      styles3.indicator,
+      isFocused && styles3.indicatorFocused,
+      isError && !isFocused && styles3.indicatorError,
+      isDisabled && styles3.indicatorDisabled
     ],
-    [styles2, isFocused, isError, isDisabled]
+    [styles3, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: [styles2.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: styles2.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  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)(
         MaterialCommunityIcons,
         {
           name: leadingIcon,
@@ -3076,14 +2992,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native26.View,
+        import_react_native24.View,
         {
           style: [
-            styles2.inputWrapper,
-            label ? styles2.inputWrapperWithLabel : void 0
+            styles3.inputWrapper,
+            label ? styles3.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_react_native26.TextInput,
+            import_react_native24.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -3096,8 +3012,8 @@ function TextField({
               placeholderTextColor: colors.placeholderColor,
               multiline,
               style: [
-                styles2.input,
-                isDisabled ? styles2.inputDisabled : void 0,
+                styles3.input,
+                isDisabled ? styles3.inputDisabled : void 0,
                 contentColor && !isDisabled ? { color: contentColor } : void 0,
                 inputStyle
               ],
@@ -3109,14 +3025,14 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native26.Pressable,
+        import_react_native24.Pressable,
         {
           onPress: onTrailingIconPress,
           disabled: isDisabled || !onTrailingIconPress,
           accessibilityRole: "button",
           hitSlop: 12,
-          style: styles2.trailingIconPressable,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles2.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          style: styles3.trailingIconPressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native24.View, { style: styles3.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             MaterialCommunityIcons,
             {
               name: trailingIcon,
@@ -3127,11 +3043,11 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native26.Animated.Text,
+        import_react_native24.Animated.Text,
         {
           numberOfLines: 1,
           style: [
-            styles2.label,
+            styles3.label,
             {
               top: labelStaticTop,
               start: labelStart,
@@ -3142,19 +3058,19 @@ function TextField({
                 { scale: labelScale }
               ]
             },
-            variant === "outlined" && isLabelFloated ? styles2.labelNotch : void 0
+            variant === "outlined" && isLabelFloated ? styles3.labelNotch : void 0
           ],
           children: label
         }
       ) : null,
-      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: indicatorStyle }) : null
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native24.View, { style: indicatorStyle }) : null
     ] }) }),
-    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles2.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native26.Text,
+    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,
       {
         style: [
-          styles2.supportingText,
-          isError ? styles2.errorSupportingText : void 0
+          styles3.supportingText,
+          isError ? styles3.errorSupportingText : void 0
         ],
         children: displaySupportingText
       }
@@ -3164,11 +3080,12 @@ function TextField({
 
 // src/list/List.tsx
 var import_react16 = require("react");
-var import_react_native28 = require("react-native");
+var import_react_native26 = require("react-native");
 var import_core15 = require("@onlynative/core");
 
 // src/list/styles.ts
-var import_react_native27 = require("react-native");
+var import_react_native25 = require("react-native");
+var import_utils16 = require("@onlynative/utils");
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -3177,7 +3094,7 @@ var MIN_HEIGHT = {
   3: 88
 };
 function createListStyles(theme) {
-  return import_react_native27.StyleSheet.create({
+  return import_react_native25.StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm
     }
@@ -3188,12 +3105,12 @@ function getItemColors(theme, containerColor) {
   if (containerColor) {
     return {
       backgroundColor: containerColor,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils16.blendColor)(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils16.blendColor)(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
@@ -3202,11 +3119,11 @@ function getItemColors(theme, containerColor) {
   }
   return {
     backgroundColor: base,
-    hoveredBackgroundColor: alphaColor(
+    hoveredBackgroundColor: (0, import_utils16.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: alphaColor(
+    pressedBackgroundColor: (0, import_utils16.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     )
@@ -3214,7 +3131,7 @@ function getItemColors(theme, containerColor) {
 }
 function createListItemStyles(theme, lines, containerColor) {
   const colors = getItemColors(theme, containerColor);
-  return import_react_native27.StyleSheet.create({
+  return import_react_native25.StyleSheet.create({
     container: {
       flexDirection: "row",
       alignItems: lines === 3 ? "flex-start" : "center",
@@ -3269,7 +3186,7 @@ function createListItemStyles(theme, lines, containerColor) {
   });
 }
 function createDividerStyles(theme, inset) {
-  return import_react_native27.StyleSheet.create({
+  return import_react_native25.StyleSheet.create({
     divider: {
       height: 1,
       backgroundColor: theme.colors.outlineVariant,
@@ -3282,13 +3199,13 @@ function createDividerStyles(theme, inset) {
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function List({ children, style, ...props }) {
   const theme = (0, import_core15.useTheme)();
-  const styles2 = (0, import_react16.useMemo)(() => createListStyles(theme), [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native28.View, { ...props, style: [styles2.container, style], children });
+  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 });
 }
 
 // src/list/ListItem.tsx
 var import_react17 = require("react");
-var import_react_native29 = require("react-native");
+var import_react_native27 = require("react-native");
 var import_core16 = require("@onlynative/core");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
@@ -3316,58 +3233,58 @@ function ListItem({
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core16.useTheme)();
   const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines);
-  const styles2 = (0, import_react17.useMemo)(
+  const styles3 = (0, import_react17.useMemo)(
     () => createListItemStyles(theme, lines, containerColor),
     [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_native29.View, { style: styles2.leadingContent, children: leadingContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles2.textBlock, children: [
-      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles2.overlineText, numberOfLines: 1, children: overlineText }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles2.headlineText, numberOfLines: 1, children: headlineText }),
+    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 }),
       supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react_native29.Text,
+        import_react_native27.Text,
         {
-          style: styles2.supportingText,
+          style: styles3.supportingText,
           numberOfLines: supportingTextNumberOfLines,
           children: supportingText
         }
       )
     ] }),
-    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles2.trailingBlock, children: [
-      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles2.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
+    (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
     ] })
   ] });
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { ...props, style: [styles2.container, style], children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native27.View, { ...props, style: [styles3.container, style], children: content });
   }
   const resolvedStyle = (state) => [
-    styles2.container,
-    styles2.interactiveContainer,
-    state.hovered && !state.pressed && !isDisabled ? styles2.hoveredContainer : void 0,
-    state.pressed && !isDisabled ? styles2.pressedContainer : void 0,
-    isDisabled ? styles2.disabledContainer : void 0,
+    styles3.container,
+    styles3.interactiveContainer,
+    state.hovered && !state.pressed && !isDisabled ? styles3.hoveredContainer : void 0,
+    state.pressed && !isDisabled ? styles3.pressedContainer : void 0,
+    isDisabled ? styles3.disabledContainer : void 0,
     typeof style === "function" ? style(state) : style
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_native29.Pressable,
+    import_react_native27.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native29.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native27.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { style: styles2.disabledContentWrapper, children: content }) : content
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native27.View, { style: styles3.disabledContentWrapper, children: content }) : content
     }
   );
 }
 
 // src/list/ListDivider.tsx
 var import_react18 = require("react");
-var import_react_native30 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_core17 = require("@onlynative/core");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ListDivider({
@@ -3376,11 +3293,80 @@ function ListDivider({
   ...props
 }) {
   const theme = (0, import_core17.useTheme)();
-  const styles2 = (0, import_react18.useMemo)(
+  const styles3 = (0, import_react18.useMemo)(
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native30.View, { ...props, style: [styles2.divider, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native28.View, { ...props, style: [styles3.divider, style] });
+}
+
+// src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
+var import_react19 = require("react");
+var import_react_native30 = require("react-native");
+
+// src/keyboard-avoiding-wrapper/styles.ts
+var import_react_native29 = require("react-native");
+var styles2 = import_react_native29.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  container: {
+    flexGrow: 1
+  }
+});
+
+// src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var isIOS = import_react_native30.Platform.OS === "ios";
+function KeyboardAvoidingWrapper({
+  children,
+  behavior = "padding",
+  keyboardVerticalOffset = 0,
+  enabled = true,
+  scrollViewProps,
+  onKeyboardShow,
+  onKeyboardHide,
+  style,
+  contentContainerStyle
+}) {
+  (0, import_react19.useEffect)(() => {
+    const subscriptions = [];
+    if (onKeyboardShow) {
+      const showEvent = isIOS ? "keyboardWillShow" : "keyboardDidShow";
+      subscriptions.push(
+        import_react_native30.Keyboard.addListener(showEvent, onKeyboardShow)
+      );
+    }
+    if (onKeyboardHide) {
+      const hideEvent = isIOS ? "keyboardWillHide" : "keyboardDidHide";
+      subscriptions.push(
+        import_react_native30.Keyboard.addListener(hideEvent, onKeyboardHide)
+      );
+    }
+    return () => {
+      subscriptions.forEach((sub) => sub.remove());
+    };
+  }, [onKeyboardShow, onKeyboardHide]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react_native30.KeyboardAvoidingView,
+    {
+      style: [styles2.root, style],
+      behavior,
+      keyboardVerticalOffset,
+      enabled: !isIOS && enabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react_native30.ScrollView,
+        {
+          automaticallyAdjustKeyboardInsets: isIOS && enabled,
+          keyboardShouldPersistTaps: "handled",
+          showsVerticalScrollIndicator: false,
+          ...scrollViewProps,
+          contentContainerStyle: [styles2.container, contentContainerStyle],
+          children
+        }
+      )
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -3393,6 +3379,7 @@ function ListDivider({
   Column,
   Grid,
   IconButton,
+  KeyboardAvoidingWrapper,
   Layout,
   List,
   ListDivider,