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

package/dist/index.js

@@ -54,9 +54,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/typography/Typography.tsx
+var import_core = require("@onlynative/core");
 var import_react = require("react");
 var import_react_native = require("react-native");
-var import_core = require("@onlynative/core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var HEADING_VARIANTS = /* @__PURE__ */ new Set([
   "displayLarge",
@@ -103,10 +103,10 @@ function Typography({
 }
 
 // src/layout/Layout.tsx
+var import_core2 = require("@onlynative/core");
 var import_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_core2 = require("@onlynative/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultEdges = ["bottom"];
 function resolveEdges(immersive, edges) {
@@ -160,9 +160,9 @@ function Layout({ immersive, edges, children, style }) {
 }
 
 // src/layout/Box.tsx
+var import_core3 = require("@onlynative/core");
 var import_react3 = require("react");
 var import_react_native3 = require("react-native");
-var import_core3 = require("@onlynative/core");
 
 // src/layout/resolveSpacing.ts
 function resolveSpacing(spacing, value) {
@@ -277,9 +277,9 @@ function Column({ inverted = false, style, ...boxProps }) {
 }
 
 // src/layout/Grid.tsx
+var import_core4 = require("@onlynative/core");
 var import_react6 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
-var import_core4 = require("@onlynative/core");
 
 // src/layout/Row.tsx
 var import_react5 = require("react");
@@ -338,23 +338,9 @@ function Grid({
 }
 
 // src/button/Button.tsx
-var import_react7 = require("react");
-var import_react_native8 = require("react-native");
-var import_react_native9 = require("react-native");
-var import_react_native10 = require("react-native");
 var import_core5 = require("@onlynative/core");
 
-// ../utils/dist/chunk-OQRDRRQA.mjs
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../utils/dist/index.mjs
-var import_react_native5 = require("react-native");
-var import_react_native6 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -397,6 +383,9 @@ function blendColor(base, overlay, overlayAlpha) {
   );
   return `rgb(${r}, ${g}, ${b})`;
 }
+
+// ../utils/src/elevation.ts
+var import_react_native5 = require("react-native");
 function elevationStyle(level) {
   if (import_react_native5.Platform.OS === "web") {
     const { shadowOffset, shadowOpacity, shadowRadius } = level;
@@ -418,13 +407,15 @@ function elevationStyle(level) {
     elevation: level.elevation
   };
 }
+
+// ../utils/src/icon.ts
 var _MCIcons = null;
 var _resolved = false;
 function getMaterialCommunityIcons() {
   if (!_resolved) {
     _resolved = true;
     try {
-      const mod = __require("@expo/vector-icons/MaterialCommunityIcons");
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
       _MCIcons = mod.default || mod;
     } catch {
       _MCIcons = null;
@@ -437,15 +428,47 @@ function getMaterialCommunityIcons() {
   }
   return _MCIcons;
 }
+
+// ../utils/src/pressable.ts
+var import_react_native6 = require("react-native");
+function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      base,
+      state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+      state.pressed && !isDisabled ? pressed : void 0,
+      isDisabled ? disabled : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    base,
+    state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+    state.pressed && !isDisabled ? pressed : void 0,
+    isDisabled ? disabled : void 0,
+    style
+  ];
+}
+function resolveColorFromStyle(...styles3) {
+  const flattened = import_react_native6.StyleSheet.flatten(styles3);
+  return typeof (flattened == null ? void 0 : flattened.color) === "string" ? flattened.color : void 0;
+}
+
+// ../utils/src/rtl.ts
+var import_react_native7 = require("react-native");
 function transformOrigin(vertical = "top") {
-  return import_react_native6.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+  return import_react_native7.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
 }
 function selectRTL(ltr, rtl) {
-  return import_react_native6.I18nManager.isRTL ? rtl : ltr;
+  return import_react_native7.I18nManager.isRTL ? rtl : ltr;
 }
 
+// src/button/Button.tsx
+var import_react7 = require("react");
+var import_react_native9 = require("react-native");
+
 // src/button/styles.ts
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 function getVariantColors(theme, variant) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
@@ -626,7 +649,7 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
   const elevationLevel1 = elevationStyle(theme.elevation.level1);
   const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native7.StyleSheet.create({
+  return import_react_native8.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -679,24 +702,6 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
 
 // src/button/Button.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function resolveStyle(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
-  if (typeof style === "function") {
-    return (state) => [
-      containerStyle,
-      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-      state.pressed && !disabled ? pressedContainerStyle : void 0,
-      disabled ? disabledContainerStyle : void 0,
-      style(state)
-    ];
-  }
-  return (state) => [
-    containerStyle,
-    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-    state.pressed && !disabled ? pressedContainerStyle : void 0,
-    disabled ? disabledContainerStyle : void 0,
-    style
-  ];
-}
 function Button({
   children,
   style,
@@ -726,13 +731,13 @@ function Button({
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
   const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
-  const resolvedIconColor = (0, import_react7.useMemo)(() => {
-    const base = import_react_native9.StyleSheet.flatten([
+  const resolvedIconColor = (0, import_react7.useMemo)(
+    () => resolveColorFromStyle(
       styles3.label,
       isDisabled ? styles3.disabledLabel : void 0
-    ]);
-    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles3.label, styles3.disabledLabel, isDisabled]);
+    ),
+    [styles3.label, styles3.disabledLabel, isDisabled]
+  );
   const computedLabelStyle = (0, import_react7.useMemo)(
     () => [
       styles3.label,
@@ -742,14 +747,14 @@ function Button({
     [isDisabled, styles3.disabledLabel, styles3.label, labelStyleOverride]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_react_native8.Pressable,
+    import_react_native9.Pressable,
     {
       ...props,
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native8.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native9.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
-      style: resolveStyle(
+      style: resolvePressableStyle(
         styles3.container,
         styles3.hoveredContainer,
         styles3.pressedContainer,
@@ -767,7 +772,7 @@ function Button({
             style: styles3.leadingIcon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.Text, { style: computedLabelStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.Text, { style: computedLabelStyle, children }),
         trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MaterialCommunityIcons,
           {
@@ -783,17 +788,17 @@ function Button({
 }
 
 // src/icon-button/IconButton.tsx
-var import_react8 = require("react");
-var import_react_native12 = require("react-native");
 var import_core6 = require("@onlynative/core");
+var import_react8 = require("react");
+var import_react_native11 = require("react-native");
 
 // src/icon-button/styles.ts
-var import_react_native11 = require("react-native");
+var import_react_native10 = require("react-native");
 function createStyles2(theme) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
-  return import_react_native11.StyleSheet.create({
+  return import_react_native10.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -1028,11 +1033,13 @@ function createStyles2(theme) {
       borderColor: disabledContainerColor,
       cursor: "auto"
     },
+    // eslint-disable-next-line react-native/no-color-literals
     disabledOutlined: {
       backgroundColor: "transparent",
       borderColor: disabledOutlineColor,
       cursor: "auto"
     },
+    // eslint-disable-next-line react-native/no-color-literals
     disabledStandard: {
       backgroundColor: "transparent",
       borderColor: "transparent",
@@ -1231,7 +1238,7 @@ function IconButton({
     };
   }, [containerColor, resolvedIconColor, theme.stateLayer]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_native12.Pressable,
+    import_react_native11.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -1273,14 +1280,14 @@ function IconButton({
 }
 
 // src/appbar/AppBar.tsx
+var import_core8 = require("@onlynative/core");
 var import_react9 = require("react");
-var import_react_native14 = require("react-native");
+var import_react_native13 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
-var import_core8 = require("@onlynative/core");
 
 // src/appbar/styles.ts
-var import_react_native13 = require("react-native");
 var import_core7 = require("@onlynative/core");
+var import_react_native12 = require("react-native");
 function getColorSchemeColors(theme, colorScheme) {
   switch (colorScheme) {
     case "surfaceContainerLowest":
@@ -1337,7 +1344,7 @@ function getColorSchemeColors(theme, colorScheme) {
 function createStyles3(theme, schemeColors) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core7.defaultTopAppBarTokens;
-  return import_react_native13.StyleSheet.create({
+  return import_react_native12.StyleSheet.create({
     root: {
       backgroundColor: schemeColors.containerColor
     },
@@ -1426,7 +1433,7 @@ function createStyles3(theme, schemeColors) {
 // src/appbar/AppBar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function getBackIcon() {
-  if (import_react_native14.Platform.OS === "ios") {
+  if (import_react_native13.Platform.OS === "ios") {
     return selectRTL("chevron-left", "chevron-right");
   }
   return selectRTL("arrow-left", "arrow-right");
@@ -1457,7 +1464,7 @@ function withTopInset(enabled, content, style) {
   if (enabled) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context2.SafeAreaView, { edges: ["top"], style, children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style, children: content });
 }
 function measureWidth(event) {
   return Math.round(event.nativeEvent.layout.width);
@@ -1518,7 +1525,7 @@ function AppBar({
     if (!canGoBack) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles3.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       IconButton,
       {
         icon: getBackIcon(),
@@ -1537,8 +1544,8 @@ function AppBar({
     if (!actions || actions.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles3.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native14.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native13.View,
       {
         style: styles3.iconFrame,
         children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1556,7 +1563,13 @@ function AppBar({
       },
       `${String(action.icon)}-${index}`
     )) });
-  }, [actions, resolvedContentColor, styles3.actionsRow, styles3.iconFrame, trailing]);
+  }, [
+    actions,
+    resolvedContentColor,
+    styles3.actionsRow,
+    styles3.iconFrame,
+    trailing
+  ]);
   const onLeadingLayout = (0, import_react9.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
@@ -1575,9 +1588,9 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles3.topRow, children: [
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: styles3.topRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native14.View,
+      import_react_native13.View,
       {
         collapsable: false,
         onLayout: onLeadingLayout,
@@ -1585,9 +1598,9 @@ function AppBar({
         children: leadingContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles3.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.topRowSpacer }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native14.View,
+      import_react_native13.View,
       {
         collapsable: false,
         onLayout: onActionsLayout,
@@ -1609,10 +1622,10 @@ function AppBar({
     containerOverride
   ];
   if (isExpanded) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: [styles3.expandedContainer, getSizeStyle2(styles3, size)], children: [
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: [styles3.expandedContainer, getSizeStyle2(styles3, size)], children: [
       topRow,
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_react_native14.View,
+        import_react_native13.View,
         {
           style: [
             styles3.expandedTitleContainer,
@@ -1636,11 +1649,11 @@ 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_native13.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles3.smallContainer, children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: styles3.smallContainer, children: [
     topRow,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: [styles3.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: [styles3.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Typography,
       {
         ...APP_BAR_TITLE_TEXT_PROPS,
@@ -1655,16 +1668,16 @@ function AppBar({
       }
     ) })
   ] });
-  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_native13.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_core9 = require("@onlynative/core");
+var import_react10 = require("react");
+var import_react_native15 = require("react-native");
 
 // src/card/styles.ts
-var import_react_native15 = require("react-native");
+var import_react_native14 = require("react-native");
 function getVariantColors2(theme, variant) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
@@ -1748,7 +1761,7 @@ function createStyles4(theme, variant, containerColor) {
   const elevationLevel1 = elevationStyle(theme.elevation.level1);
   const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native15.StyleSheet.create({
+  return import_react_native14.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerMedium,
       backgroundColor: colors.backgroundColor,
@@ -1798,38 +1811,37 @@ function Card({
     [theme, variant, containerColor]
   );
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { ...props, style: [styles3.container, style], children });
-  }
-  const resolvedStyle = (state) => [
-    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_native15.View, { ...props, style: [styles3.container, style], children });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native16.Pressable,
+    import_react_native15.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native16.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native15.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
-      style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { style: styles3.disabledContent, children }) : children
+      style: resolvePressableStyle(
+        [styles3.container, styles3.interactiveContainer],
+        styles3.hoveredContainer,
+        styles3.pressedContainer,
+        styles3.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native15.View, { style: styles3.disabledContent, children }) : children
     }
   );
 }
 
 // src/chip/Chip.tsx
-var import_react11 = require("react");
-var import_react_native18 = require("react-native");
 var import_core10 = require("@onlynative/core");
+var import_react11 = require("react");
+var import_react_native17 = require("react-native");
 
 // src/chip/styles.ts
-var import_react_native17 = require("react-native");
+var import_react_native16 = require("react-native");
 function getVariantColors3(theme, variant, elevated, selected) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
   const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
@@ -1957,7 +1969,7 @@ function createStyles5(theme, variant, elevated, selected, hasLeadingContent, ha
   const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const isElevated = elevated && variant !== "input";
   const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
-  return import_react_native17.StyleSheet.create({
+  return import_react_native16.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -2014,24 +2026,6 @@ function createStyles5(theme, variant, elevated, selected, hasLeadingContent, ha
 
 // src/chip/Chip.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function resolveStyle2(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
-  if (typeof style === "function") {
-    return (state) => [
-      containerStyle,
-      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-      state.pressed && !disabled ? pressedContainerStyle : void 0,
-      disabled ? disabledContainerStyle : void 0,
-      style(state)
-    ];
-  }
-  return (state) => [
-    containerStyle,
-    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-    state.pressed && !disabled ? pressedContainerStyle : void 0,
-    disabled ? disabledContainerStyle : void 0,
-    style
-  ];
-}
 function Chip({
   children,
   style,
@@ -2079,13 +2073,13 @@ function Chip({
       contentColor
     ]
   );
-  const resolvedIconColor = (0, import_react11.useMemo)(() => {
-    const base = import_react_native18.StyleSheet.flatten([
+  const resolvedIconColor = (0, import_react11.useMemo)(
+    () => resolveColorFromStyle(
       styles3.label,
       isDisabled ? styles3.disabledLabel : void 0
-    ]);
-    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles3.label, styles3.disabledLabel, isDisabled]);
+    ),
+    [styles3.label, styles3.disabledLabel, isDisabled]
+  );
   const computedLabelStyle = (0, import_react11.useMemo)(
     () => [
       styles3.label,
@@ -2096,7 +2090,7 @@ function Chip({
   );
   const renderLeadingContent = () => {
     if (variant === "input" && avatar) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.View, { style: styles3.avatar, children: avatar });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native17.View, { style: styles3.avatar, children: avatar });
     }
     if (leadingIcon) {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2123,7 +2117,7 @@ function Chip({
     return null;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_react_native18.Pressable,
+    import_react_native17.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -2131,9 +2125,9 @@ function Chip({
         disabled: isDisabled,
         ...variant === "filter" ? { selected: isSelected } : void 0
       },
-      hitSlop: import_react_native18.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native17.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
-      style: resolveStyle2(
+      style: resolvePressableStyle(
         styles3.container,
         styles3.hoveredContainer,
         styles3.pressedContainer,
@@ -2143,9 +2137,9 @@ function Chip({
       ),
       children: [
         renderLeadingContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.Text, { style: computedLabelStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native17.Text, { style: computedLabelStyle, children }),
         showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native18.Pressable,
+          import_react_native17.Pressable,
           {
             onPress: onClose,
             accessibilityRole: "button",
@@ -2168,12 +2162,12 @@ function Chip({
 }
 
 // src/checkbox/Checkbox.tsx
-var import_react12 = require("react");
-var import_react_native20 = require("react-native");
 var import_core11 = require("@onlynative/core");
+var import_react12 = require("react");
+var import_react_native19 = require("react-native");
 
 // src/checkbox/styles.ts
-var import_react_native19 = require("react-native");
+var import_react_native18 = require("react-native");
 function getColors(theme, checked) {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (checked) {
@@ -2249,7 +2243,7 @@ function createStyles6(theme, checked, containerColor, contentColor) {
   );
   const size = 18;
   const touchTarget = 48;
-  return import_react_native19.StyleSheet.create({
+  return import_react_native18.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2294,24 +2288,6 @@ function createStyles6(theme, checked, containerColor, contentColor) {
 
 // src/checkbox/Checkbox.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function resolveStyle3(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
-  if (typeof style === "function") {
-    return (state) => [
-      containerStyle,
-      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-      state.pressed && !disabled ? pressedContainerStyle : void 0,
-      disabled ? disabledContainerStyle : void 0,
-      style(state)
-    ];
-  }
-  return (state) => [
-    containerStyle,
-    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-    state.pressed && !disabled ? pressedContainerStyle : void 0,
-    disabled ? disabledContainerStyle : void 0,
-    style
-  ];
-}
 function Checkbox({
   style,
   value = false,
@@ -2329,20 +2305,20 @@ function Checkbox({
     () => createStyles6(theme, isChecked, containerColor, contentColor),
     [theme, isChecked, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react12.useMemo)(() => {
-    const base = import_react_native20.StyleSheet.flatten([
+  const resolvedIconColor = (0, import_react12.useMemo)(
+    () => resolveColorFromStyle(
       styles3.iconColor,
       isDisabled ? styles3.disabledIconColor : void 0
-    ]);
-    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles3.iconColor, styles3.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_native19.Pressable,
     {
       ...props,
       accessibilityRole: "checkbox",
@@ -2350,10 +2326,10 @@ function Checkbox({
         disabled: isDisabled,
         checked: isChecked
       },
-      hitSlop: import_react_native20.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native19.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
-      style: resolveStyle3(
+      style: resolvePressableStyle(
         styles3.container,
         styles3.hoveredContainer,
         styles3.pressedContainer,
@@ -2361,7 +2337,7 @@ function Checkbox({
         isDisabled,
         style
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native20.View, { style: [styles3.box, isDisabled ? styles3.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native19.View, { style: [styles3.box, isDisabled ? styles3.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         MaterialCommunityIcons,
         {
           name: "check",
@@ -2374,12 +2350,12 @@ function Checkbox({
 }
 
 // src/radio/Radio.tsx
-var import_react13 = require("react");
-var import_react_native22 = require("react-native");
 var import_core12 = require("@onlynative/core");
+var import_react13 = require("react");
+var import_react_native21 = require("react-native");
 
 // src/radio/styles.ts
-var import_react_native21 = require("react-native");
+var import_react_native20 = require("react-native");
 function getColors2(theme, selected) {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
@@ -2443,7 +2419,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_native20.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -2488,24 +2464,6 @@ function createStyles7(theme, selected, containerColor, contentColor) {
 
 // src/radio/Radio.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function resolveStyle4(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
-  if (typeof style === "function") {
-    return (state) => [
-      containerStyle,
-      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-      state.pressed && !disabled ? pressedContainerStyle : void 0,
-      disabled ? disabledContainerStyle : void 0,
-      style(state)
-    ];
-  }
-  return (state) => [
-    containerStyle,
-    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-    state.pressed && !disabled ? pressedContainerStyle : void 0,
-    disabled ? disabledContainerStyle : void 0,
-    style
-  ];
-}
 function Radio({
   style,
   value = false,
@@ -2528,7 +2486,7 @@ function Radio({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native22.Pressable,
+    import_react_native21.Pressable,
     {
       ...props,
       accessibilityRole: "radio",
@@ -2536,10 +2494,10 @@ function Radio({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native22.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native21.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
-      style: resolveStyle4(
+      style: resolvePressableStyle(
         styles3.container,
         styles3.hoveredContainer,
         styles3.pressedContainer,
@@ -2548,11 +2506,11 @@ function Radio({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native22.View,
+        import_react_native21.View,
         {
           style: [styles3.outer, isDisabled ? styles3.disabledOuter : void 0],
           children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react_native22.View,
+            import_react_native21.View,
             {
               style: [
                 styles3.inner,
@@ -2567,12 +2525,12 @@ function Radio({
 }
 
 // src/switch/Switch.tsx
-var import_react14 = require("react");
-var import_react_native24 = require("react-native");
 var import_core13 = require("@onlynative/core");
+var import_react14 = require("react");
+var import_react_native23 = require("react-native");
 
 // src/switch/styles.ts
-var import_react_native23 = require("react-native");
+var import_react_native22 = require("react-native");
 function getColors3(theme, selected) {
   const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
@@ -2660,7 +2618,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_native22.StyleSheet.create({
     track: {
       width: trackWidth,
       height: trackHeight,
@@ -2706,24 +2664,6 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
 
 // src/switch/Switch.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function resolveStyle5(trackStyle, hoveredTrackStyle, pressedTrackStyle, disabledTrackStyle, disabled, style) {
-  if (typeof style === "function") {
-    return (state) => [
-      trackStyle,
-      state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
-      state.pressed && !disabled ? pressedTrackStyle : void 0,
-      disabled ? disabledTrackStyle : void 0,
-      style(state)
-    ];
-  }
-  return (state) => [
-    trackStyle,
-    state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
-    state.pressed && !disabled ? pressedTrackStyle : void 0,
-    disabled ? disabledTrackStyle : void 0,
-    style
-  ];
-}
 function Switch({
   style,
   value = false,
@@ -2743,13 +2683,13 @@ function Switch({
     () => createStyles8(theme, isSelected, hasIcon, containerColor, contentColor),
     [theme, isSelected, hasIcon, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react14.useMemo)(() => {
-    const base = import_react_native24.StyleSheet.flatten([
+  const resolvedIconColor = (0, import_react14.useMemo)(
+    () => resolveColorFromStyle(
       styles3.iconColor,
       isDisabled ? styles3.disabledIconColor : void 0
-    ]);
-    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles3.iconColor, styles3.disabledIconColor, isDisabled]);
+    ),
+    [styles3.iconColor, styles3.disabledIconColor, isDisabled]
+  );
   const handlePress = () => {
     if (!isDisabled) {
       onValueChange == null ? void 0 : onValueChange(!isSelected);
@@ -2759,7 +2699,7 @@ function Switch({
   const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_native24.Pressable,
+    import_react_native23.Pressable,
     {
       ...props,
       accessibilityRole: "switch",
@@ -2767,10 +2707,10 @@ function Switch({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native24.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native23.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
-      style: resolveStyle5(
+      style: resolvePressableStyle(
         styles3.track,
         styles3.hoveredTrack,
         styles3.pressedTrack,
@@ -2779,7 +2719,7 @@ function Switch({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_react_native24.View,
+        import_react_native23.View,
         {
           style: [styles3.thumb, isDisabled ? styles3.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -2797,12 +2737,12 @@ function Switch({
 }
 
 // src/text-field/TextField.tsx
-var import_react15 = require("react");
-var import_react_native26 = require("react-native");
 var import_core14 = require("@onlynative/core");
+var import_react15 = require("react");
+var import_react_native25 = require("react-native");
 
 // src/text-field/styles.ts
-var import_react_native25 = require("react-native");
+var import_react_native24 = require("react-native");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -2861,7 +2801,7 @@ function createStyles9(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native25.StyleSheet.create({
+    styles: import_react_native24.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -3038,13 +2978,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_native25.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
   (0, import_react15.useEffect)(() => {
-    import_react_native26.Animated.timing(labelAnim, {
+    import_react_native25.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native26.Platform.OS !== "web"
+      useNativeDriver: import_react_native25.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react15.useMemo)(() => {
@@ -3122,9 +3062,9 @@ function TextField({
     [styles3, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: [styles3.root, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: containerStyle, children: [
-      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles3.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native25.View, { style: [styles3.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native25.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         MaterialCommunityIcons,
         {
           name: leadingIcon,
@@ -3133,14 +3073,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native26.View,
+        import_react_native25.View,
         {
           style: [
             styles3.inputWrapper,
             label ? styles3.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_react_native26.TextInput,
+            import_react_native25.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -3166,14 +3106,14 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native26.Pressable,
+        import_react_native25.Pressable,
         {
           onPress: onTrailingIconPress,
           disabled: isDisabled || !onTrailingIconPress,
           accessibilityRole: "button",
           hitSlop: 12,
           style: styles3.trailingIconPressable,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles3.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             MaterialCommunityIcons,
             {
               name: trailingIcon,
@@ -3184,7 +3124,7 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_native26.Animated.Text,
+        import_react_native25.Animated.Text,
         {
           numberOfLines: 1,
           style: [
@@ -3204,10 +3144,10 @@ function TextField({
           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_native25.View, { style: indicatorStyle }) : null
     ] }) }),
-    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles3.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native26.Text,
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native25.Text,
       {
         style: [
           styles3.supportingText,
@@ -3220,12 +3160,12 @@ function TextField({
 }
 
 // src/list/List.tsx
-var import_react16 = require("react");
-var import_react_native28 = require("react-native");
 var import_core15 = require("@onlynative/core");
+var import_react16 = require("react");
+var import_react_native27 = require("react-native");
 
 // src/list/styles.ts
-var import_react_native27 = require("react-native");
+var import_react_native26 = require("react-native");
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -3234,7 +3174,7 @@ var MIN_HEIGHT = {
   3: 88
 };
 function createListStyles(theme) {
-  return import_react_native27.StyleSheet.create({
+  return import_react_native26.StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm
     }
@@ -3271,7 +3211,7 @@ function getItemColors(theme, containerColor) {
 }
 function createListItemStyles(theme, lines, containerColor) {
   const colors = getItemColors(theme, containerColor);
-  return import_react_native27.StyleSheet.create({
+  return import_react_native26.StyleSheet.create({
     container: {
       flexDirection: "row",
       alignItems: lines === 3 ? "flex-start" : "center",
@@ -3326,7 +3266,7 @@ function createListItemStyles(theme, lines, containerColor) {
   });
 }
 function createDividerStyles(theme, inset) {
-  return import_react_native27.StyleSheet.create({
+  return import_react_native26.StyleSheet.create({
     divider: {
       height: 1,
       backgroundColor: theme.colors.outlineVariant,
@@ -3340,13 +3280,13 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 function List({ children, style, ...props }) {
   const theme = (0, import_core15.useTheme)();
   const styles3 = (0, import_react16.useMemo)(() => createListStyles(theme), [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native28.View, { ...props, style: [styles3.container, style], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native27.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_core16 = require("@onlynative/core");
+var import_react17 = require("react");
+var import_react_native28 = require("react-native");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
   if (supportingText && overlineText || supportingText && supportingTextNumberOfLines && supportingTextNumberOfLines > 1) {
@@ -3372,18 +3312,22 @@ function ListItem({
   const isDisabled = Boolean(disabled);
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core16.useTheme)();
-  const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines);
+  const lines = getLines(
+    supportingText,
+    overlineText,
+    supportingTextNumberOfLines
+  );
   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: styles3.leadingContent, children: leadingContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles3.textBlock, children: [
-      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles3.overlineText, numberOfLines: 1, children: overlineText }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles3.headlineText, numberOfLines: 1, children: headlineText }),
+    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.View, { style: styles3.leadingContent, children: leadingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native28.View, { style: styles3.textBlock, children: [
+      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.overlineText, numberOfLines: 1, children: overlineText }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.headlineText, numberOfLines: 1, children: headlineText }),
       supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react_native29.Text,
+        import_react_native28.Text,
         {
           style: styles3.supportingText,
           numberOfLines: supportingTextNumberOfLines,
@@ -3391,41 +3335,40 @@ function ListItem({
         }
       )
     ] }),
-    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles3.trailingBlock, children: [
-      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles3.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
+    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native28.View, { style: styles3.trailingBlock, children: [
+      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
       trailingContent
     ] })
   ] });
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { ...props, style: [styles3.container, style], children: content });
-  }
-  const resolvedStyle = (state) => [
-    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_native28.View, { ...props, style: [styles3.container, style], children: content });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_native29.Pressable,
+    import_react_native28.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native29.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native28.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
-      style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { style: styles3.disabledContentWrapper, children: content }) : content
+      style: resolvePressableStyle(
+        [styles3.container, styles3.interactiveContainer],
+        styles3.hoveredContainer,
+        styles3.pressedContainer,
+        styles3.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.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_core17 = require("@onlynative/core");
+var import_react18 = require("react");
+var import_react_native29 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ListDivider({
   inset = false,
@@ -3437,16 +3380,16 @@ function ListDivider({
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native30.View, { ...props, style: [styles3.divider, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native29.View, { ...props, style: [styles3.divider, style] });
 }
 
 // src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
 var import_react19 = require("react");
-var import_react_native32 = require("react-native");
+var import_react_native31 = require("react-native");
 
 // src/keyboard-avoiding-wrapper/styles.ts
-var import_react_native31 = require("react-native");
-var styles2 = import_react_native31.StyleSheet.create({
+var import_react_native30 = require("react-native");
+var styles2 = import_react_native30.StyleSheet.create({
   root: {
     flex: 1
   },
@@ -3457,7 +3400,7 @@ var styles2 = import_react_native31.StyleSheet.create({
 
 // src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var isIOS = import_react_native32.Platform.OS === "ios";
+var isIOS = import_react_native31.Platform.OS === "ios";
 function KeyboardAvoidingWrapper({
   children,
   behavior = "padding",
@@ -3473,29 +3416,25 @@ function KeyboardAvoidingWrapper({
     const subscriptions = [];
     if (onKeyboardShow) {
       const showEvent = isIOS ? "keyboardWillShow" : "keyboardDidShow";
-      subscriptions.push(
-        import_react_native32.Keyboard.addListener(showEvent, onKeyboardShow)
-      );
+      subscriptions.push(import_react_native31.Keyboard.addListener(showEvent, onKeyboardShow));
     }
     if (onKeyboardHide) {
       const hideEvent = isIOS ? "keyboardWillHide" : "keyboardDidHide";
-      subscriptions.push(
-        import_react_native32.Keyboard.addListener(hideEvent, onKeyboardHide)
-      );
+      subscriptions.push(import_react_native31.Keyboard.addListener(hideEvent, onKeyboardHide));
     }
     return () => {
       subscriptions.forEach((sub) => sub.remove());
     };
   }, [onKeyboardShow, onKeyboardHide]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react_native32.KeyboardAvoidingView,
+    import_react_native31.KeyboardAvoidingView,
     {
       style: [styles2.root, style],
       behavior,
       keyboardVerticalOffset,
       enabled: !isIOS && enabled,
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react_native32.ScrollView,
+        import_react_native31.ScrollView,
         {
           automaticallyAdjustKeyboardInsets: isIOS && enabled,
           keyboardShouldPersistTaps: "handled",
@@ -3510,14 +3449,14 @@ function KeyboardAvoidingWrapper({
 }
 
 // src/avatar/Avatar.tsx
-var import_react20 = require("react");
-var import_react_native34 = require("react-native");
 var import_core18 = require("@onlynative/core");
+var import_react20 = require("react");
+var import_react_native33 = require("react-native");
 
 // src/avatar/styles.ts
-var import_react_native33 = require("react-native");
+var import_react_native32 = require("react-native");
 function createStyles10(theme) {
-  return import_react_native33.StyleSheet.create({
+  return import_react_native32.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -3612,7 +3551,7 @@ function Avatar({
     }),
     [bgColor, fgColor, theme.stateLayer]
   );
-  const content = imageUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native34.Image, { source: { uri: imageUri }, style: styles3.image, accessible: false }) : label && !icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native34.Text, { style: initialsStyle, numberOfLines: 1, allowFontScaling: false, children: initials }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const content = imageUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native33.Image, { source: { uri: imageUri }, style: styles3.image, accessible: false }) : label && !icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native33.Text, { style: initialsStyle, numberOfLines: 1, allowFontScaling: false, children: initials }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     MaterialCommunityIcons,
     {
       name: icon != null ? icon : "account",
@@ -3622,7 +3561,7 @@ function Avatar({
   );
   if (!isInteractive) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react_native34.View,
+      import_react_native33.View,
       {
         ...props,
         accessibilityLabel,
@@ -3632,7 +3571,7 @@ function Avatar({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_native34.Pressable,
+    import_react_native33.Pressable,
     {
       ...props,
       accessibilityRole: "button",