@onlynative/components 0.1.0-alpha.2 → 0.1.0

package/dist/keyboard-avoiding-wrapper/index.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { KeyboardAvoidingViewProps, ScrollViewProps, KeyboardEvent, StyleProp, ViewStyle } from 'react-native';
+
+interface KeyboardAvoidingWrapperProps extends PropsWithChildren {
+    /**
+     * Keyboard avoidance strategy.
+     * @default 'padding'
+     */
+    behavior?: KeyboardAvoidingViewProps['behavior'];
+    /**
+     * Extra offset added to the keyboard height calculation.
+     * Useful for accounting for headers or tab bars.
+     * @default 0
+     */
+    keyboardVerticalOffset?: number;
+    /**
+     * Enable or disable the keyboard avoiding behavior.
+     * @default true
+     */
+    enabled?: boolean;
+    /** Props forwarded to the inner `ScrollView`. */
+    scrollViewProps?: ScrollViewProps;
+    /** Called when the keyboard is about to show (iOS) or has shown (Android). */
+    onKeyboardShow?: (event: KeyboardEvent) => void;
+    /** Called when the keyboard is about to hide (iOS) or has hidden (Android). */
+    onKeyboardHide?: (event: KeyboardEvent) => void;
+    /** Style applied to the outer `KeyboardAvoidingView`. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the inner `ScrollView` contentContainerStyle. */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+declare function KeyboardAvoidingWrapper({ children, behavior, keyboardVerticalOffset, enabled, scrollViewProps, onKeyboardShow, onKeyboardHide, style, contentContainerStyle, }: KeyboardAvoidingWrapperProps): react_jsx_runtime.JSX.Element;
+
+export { KeyboardAvoidingWrapper, type KeyboardAvoidingWrapperProps };

package/dist/keyboard-avoiding-wrapper/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/keyboard-avoiding-wrapper/index.ts
+var keyboard_avoiding_wrapper_exports = {};
+__export(keyboard_avoiding_wrapper_exports, {
+  KeyboardAvoidingWrapper: () => KeyboardAvoidingWrapper
+});
+module.exports = __toCommonJS(keyboard_avoiding_wrapper_exports);
+
+// src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
+var import_react = require("react");
+var import_react_native2 = require("react-native");
+
+// src/keyboard-avoiding-wrapper/styles.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  container: {
+    flexGrow: 1
+  }
+});
+
+// src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var isIOS = import_react_native2.Platform.OS === "ios";
+function KeyboardAvoidingWrapper({
+  children,
+  behavior = "padding",
+  keyboardVerticalOffset = 0,
+  enabled = true,
+  scrollViewProps,
+  onKeyboardShow,
+  onKeyboardHide,
+  style,
+  contentContainerStyle
+}) {
+  (0, import_react.useEffect)(() => {
+    const subscriptions = [];
+    if (onKeyboardShow) {
+      const showEvent = isIOS ? "keyboardWillShow" : "keyboardDidShow";
+      subscriptions.push(
+        import_react_native2.Keyboard.addListener(showEvent, onKeyboardShow)
+      );
+    }
+    if (onKeyboardHide) {
+      const hideEvent = isIOS ? "keyboardWillHide" : "keyboardDidHide";
+      subscriptions.push(
+        import_react_native2.Keyboard.addListener(hideEvent, onKeyboardHide)
+      );
+    }
+    return () => {
+      subscriptions.forEach((sub) => sub.remove());
+    };
+  }, [onKeyboardShow, onKeyboardHide]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native2.KeyboardAvoidingView,
+    {
+      style: [styles.root, style],
+      behavior,
+      keyboardVerticalOffset,
+      enabled: !isIOS && enabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native2.ScrollView,
+        {
+          automaticallyAdjustKeyboardInsets: isIOS && enabled,
+          keyboardShouldPersistTaps: "handled",
+          showsVerticalScrollIndicator: false,
+          ...scrollViewProps,
+          contentContainerStyle: [styles.container, contentContainerStyle],
+          children
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KeyboardAvoidingWrapper
+});

package/dist/list/index.js

@@ -33,52 +33,7 @@ var import_core = require("@onlynative/core");
 
 // src/list/styles.ts
 var import_react_native = 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/list/styles.ts
+var import_utils = require("@onlynative/utils");
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -98,12 +53,12 @@ function getItemColors(theme, containerColor) {
   if (containerColor) {
     return {
       backgroundColor: containerColor,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils.blendColor)(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils.blendColor)(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
@@ -112,11 +67,11 @@ function getItemColors(theme, containerColor) {
   }
   return {
     backgroundColor: base,
-    hoveredBackgroundColor: alphaColor(
+    hoveredBackgroundColor: (0, import_utils.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: alphaColor(
+    pressedBackgroundColor: (0, import_utils.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     )

package/dist/radio/index.js

@@ -31,45 +31,18 @@ var import_core = require("@onlynative/core");
 
 // src/radio/styles.ts
 var import_react_native = 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})`;
-}
-
-// src/radio/styles.ts
+var import_utils = require("@onlynative/utils");
 function getColors(theme, selected) {
-  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOnSurface38 = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
   if (selected) {
     return {
       borderColor: theme.colors.primary,
       dotColor: theme.colors.primary,
-      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
       ),
@@ -80,11 +53,11 @@ function getColors(theme, selected) {
   return {
     borderColor: theme.colors.onSurfaceVariant,
     dotColor: "transparent",
-    hoveredBackgroundColor: alphaColor(
+    hoveredBackgroundColor: (0, import_utils.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: alphaColor(
+    pressedBackgroundColor: (0, import_utils.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     ),
@@ -98,11 +71,11 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
   if (containerColor) {
     result.borderColor = containerColor;
     result.dotColor = containerColor;
-    result.hoveredBackgroundColor = alphaColor(
+    result.hoveredBackgroundColor = (0, import_utils.alphaColor)(
       containerColor,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = alphaColor(
+    result.pressedBackgroundColor = (0, import_utils.alphaColor)(
       containerColor,
       theme.stateLayer.pressedOpacity
     );

package/dist/switch/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/switch/index.ts
@@ -35,73 +25,28 @@ __export(switch_exports, {
 module.exports = __toCommonJS(switch_exports);
 
 // src/switch/Switch.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native2 = require("react-native");
 var import_core = require("@onlynative/core");
+var import_utils2 = require("@onlynative/utils");
 
 // src/switch/styles.ts
 var import_react_native = 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/switch/styles.ts
+var import_utils = require("@onlynative/utils");
 function getColors(theme, selected) {
-  const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOnSurface12 = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledOnSurface38 = (0, import_utils.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_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedTrackColor: blendColor(
+      pressedTrackColor: (0, import_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
@@ -118,12 +63,12 @@ function getColors(theme, selected) {
     trackColor: theme.colors.surfaceContainerHighest,
     thumbColor: theme.colors.outline,
     iconColor: theme.colors.surfaceContainerHighest,
-    hoveredTrackColor: blendColor(
+    hoveredTrackColor: (0, import_utils.blendColor)(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedTrackColor: blendColor(
+    pressedTrackColor: (0, import_utils.blendColor)(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -147,12 +92,12 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.thumbColor;
     result.trackColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredTrackColor = blendColor(
+    result.hoveredTrackColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedTrackColor = blendColor(
+    result.pressedTrackColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
@@ -214,7 +159,7 @@ function createStyles(theme, selected, hasIcon, containerColor, contentColor) {
       color: colors.iconColor
     },
     disabledIconColor: {
-      color: alphaColor(theme.colors.onSurface, 0.38)
+      color: (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38)
     }
   });
 }
@@ -271,6 +216,7 @@ function Switch({
     }
   };
   const iconName = isSelected ? selectedIcon : unselectedIcon;
+  const MaterialCommunityIcons = iconName ? (0, import_utils2.getMaterialCommunityIcons)() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native2.Pressable,
@@ -297,7 +243,7 @@ function Switch({
         {
           style: [styles.thumb, isDisabled ? styles.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_MaterialCommunityIcons.default,
+            MaterialCommunityIcons,
             {
               name: iconName,
               size: iconSize,

package/dist/text-field/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/text-field/index.ts
@@ -35,47 +25,14 @@ __export(text_field_exports, {
 module.exports = __toCommonJS(text_field_exports);
 
 // src/text-field/TextField.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
-var import_react_native3 = require("react-native");
+var import_react_native2 = require("react-native");
 var import_core = require("@onlynative/core");
+var import_utils2 = require("@onlynative/utils");
 
 // src/text-field/styles.ts
-var import_react_native2 = 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})`;
-}
-
-// src/utils/rtl.ts
 var import_react_native = require("react-native");
-function transformOrigin(vertical = "top") {
-  return import_react_native.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
-}
-
-// src/text-field/styles.ts
+var import_utils = require("@onlynative/utils");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -100,15 +57,15 @@ function getVariantColors(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_utils.alphaColor)(theme.colors.onSurface, disabledOpacity),
+    disabledLabelColor: (0, import_utils.alphaColor)(theme.colors.onSurface, disabledOpacity),
+    disabledBorderColor: (0, import_utils.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_utils.alphaColor)(theme.colors.onSurface, disabledOpacity)
   };
   if (variant === "outlined") {
     return {
@@ -123,7 +80,7 @@ function getVariantColors(theme, variant) {
     ...common,
     backgroundColor: theme.colors.surfaceContainerHighest,
     borderColor: theme.colors.onSurfaceVariant,
-    disabledBackgroundColor: alphaColor(theme.colors.onSurface, 0.04),
+    disabledBackgroundColor: (0, import_utils.alphaColor)(theme.colors.onSurface, 0.04),
     labelColor: theme.colors.onSurfaceVariant
   };
 }
@@ -134,7 +91,7 @@ function createStyles(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native2.StyleSheet.create({
+    styles: import_react_native.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -205,7 +162,7 @@ function createStyles(theme, variant) {
         fontWeight: bodySmall.fontWeight,
         letterSpacing: bodySmall.letterSpacing,
         color: colors.labelColor,
-        transformOrigin: transformOrigin("top")
+        transformOrigin: (0, import_utils.transformOrigin)("top")
       },
       labelNotch: {
         paddingHorizontal: 4
@@ -298,6 +255,7 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils2.getMaterialCommunityIcons)() : null;
   const { colors, styles } = (0, import_react.useMemo)(
     () => createStyles(theme, variant),
     [theme, variant]
@@ -310,13 +268,13 @@ function TextField({
   const isControlled = value !== void 0;
   const hasValue = isControlled ? value !== "" : internalHasText;
   const isLabelFloated = isFocused || hasValue;
-  const labelAnimRef = (0, import_react.useRef)(new import_react_native3.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnimRef = (0, import_react.useRef)(new import_react_native2.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
   (0, import_react.useEffect)(() => {
-    import_react_native3.Animated.timing(labelAnim, {
+    import_react_native2.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native3.Platform.OS !== "web"
+      useNativeDriver: import_react_native2.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react.useMemo)(() => {
@@ -394,10 +352,10 @@ function TextField({
     [styles, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: [styles.root, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: containerStyle, children: [
-      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        MaterialCommunityIcons,
         {
           name: leadingIcon,
           size: ICON_SIZE2,
@@ -405,14 +363,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native3.View,
+        import_react_native2.View,
         {
           style: [
             styles.inputWrapper,
             label ? styles.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native3.TextInput,
+            import_react_native2.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -438,15 +396,15 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native3.Pressable,
+        import_react_native2.Pressable,
         {
           onPress: onTrailingIconPress,
           disabled: isDisabled || !onTrailingIconPress,
           accessibilityRole: "button",
           hitSlop: 12,
           style: styles.trailingIconPressable,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_MaterialCommunityIcons.default,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            MaterialCommunityIcons,
             {
               name: trailingIcon,
               size: ICON_SIZE2,
@@ -456,7 +414,7 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native3.Animated.Text,
+        import_react_native2.Animated.Text,
         {
           numberOfLines: 1,
           style: [
@@ -476,10 +434,10 @@ function TextField({
           children: label
         }
       ) : null,
-      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: indicatorStyle }) : null
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: indicatorStyle }) : null
     ] }) }),
-    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native3.Text,
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native2.Text,
       {
         style: [
           styles.supportingText,