react-native-better-html 1.0.2 → 1.0.4

package/dist/index.js

@@ -0,0 +1,1374 @@
+"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)
+    __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 __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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Animate: () => Animate_default,
+  BetterComponentsProvider: () => BetterComponentsProvider_default,
+  Button: () => Button_default,
+  Image: () => Image_default,
+  InputField: () => InputField_default,
+  Loader: () => Loader_default,
+  ScreenHolder: () => ScreenHolder_default,
+  Text: () => Text_default,
+  View: () => View_default,
+  asyncStoragePlugin: () => asyncStoragePlugin,
+  colorThemeControls: () => import_react_better_core10.colorThemeControls,
+  countries: () => import_react_better_core10.countries,
+  darkenColor: () => import_react_better_core10.darkenColor,
+  defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
+  desaturateColor: () => import_react_better_core10.desaturateColor,
+  eventPreventDefault: () => import_react_better_core10.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core10.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core10.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core10.formatPhoneNumber,
+  generateAsyncStorage: () => generateAsyncStorage,
+  generateRandomString: () => import_react_better_core10.generateRandomString,
+  getPluralWord: () => import_react_better_core10.getPluralWord,
+  lightenColor: () => import_react_better_core10.lightenColor,
+  loaderControls: () => import_react_better_core10.loaderControls,
+  pressStrength: () => pressStrength,
+  saturateColor: () => import_react_better_core10.saturateColor,
+  useBetterComponentsContext: () => useBetterComponentsContext,
+  useBooleanState: () => import_react_better_core10.useBooleanState,
+  useDebounceState: () => import_react_better_core10.useDebounceState,
+  useDevice: () => useDevice,
+  useKeyboard: () => useKeyboard,
+  useLoader: () => import_react_better_core10.useLoader,
+  useLoaderControls: () => import_react_better_core10.useLoaderControls,
+  useTheme: () => import_react_better_core10.useTheme
+});
+module.exports = __toCommonJS(index_exports);
+var import_react_better_core10 = require("react-better-core");
+
+// src/components/BetterComponentsProvider.tsx
+var import_react = require("react");
+var import_react_better_core = require("react-better-core");
+
+// src/constants/app.ts
+var appConfig = {};
+
+// src/constants/theme.ts
+var theme = {};
+
+// src/constants/icons.ts
+var icons = {};
+
+// src/constants/assets.ts
+var assets = {};
+
+// src/components/BetterComponentsProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var betterComponentsContext = (0, import_react.createContext)(void 0);
+var externalBetterCoreContextValue;
+var externalBetterComponentsContextValue;
+var useBetterComponentsContext = () => {
+  const coreContext = (0, import_react_better_core.useBetterCoreContext)();
+  const context = (0, import_react.useContext)(betterComponentsContext);
+  if (context === void 0)
+    throw new Error(
+      "`useBetterComponentsContext()` must be used within a `<BetterComponentsProvider>`. Make sure to add one at the root of your component tree."
+    );
+  const { plugins, componentsState, ...rest } = context;
+  return {
+    ...coreContext,
+    ...rest
+  };
+};
+function BetterComponentsProviderInternalContent({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+}
+function BetterComponentsProviderInternal({
+  config,
+  plugins,
+  children
+}) {
+  const betterCoreContext = (0, import_react_better_core.useBetterCoreContext)();
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = (0, import_react_better_core.useBooleanState)();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = (0, import_react_better_core.useBooleanState)();
+  const readyConfig = (0, import_react.useMemo)(
+    () => ({
+      app: {
+        ...appConfig,
+        ...config?.app
+      },
+      sideMenuIsCollapsed,
+      setSideMenuIsCollapsed,
+      sideMenuIsOpenMobile,
+      setSideMenuIsOpenMobile,
+      plugins: plugins ?? [],
+      componentsState: {}
+    }),
+    [config, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!plugins) return;
+    plugins.forEach((plugin) => {
+      plugin.initialize?.();
+    });
+  }, []);
+  externalBetterCoreContextValue = betterCoreContext;
+  externalBetterComponentsContextValue = readyConfig;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(betterComponentsContext.Provider, { value: readyConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BetterComponentsProviderInternalContent, { children }) });
+}
+function BetterComponentsProvider({ config, ...props }) {
+  const coreConfig = (0, import_react.useMemo)(
+    () => ({
+      theme: {
+        ...theme,
+        ...config?.theme
+      },
+      // colorTheme: config?.colorTheme ?? (localStorage.getItem("theme") === "dark" ? "dark" : "light"),
+      colorTheme: config?.colorTheme ?? "light",
+      icons: {
+        ...icons,
+        ...config?.icons
+      },
+      assets: {
+        ...assets,
+        ...config?.assets
+      },
+      loaders: config?.loaders
+    }),
+    [config]
+  );
+  const componentsConfig = (0, import_react.useMemo)(
+    () => ({
+      app: config?.app
+    }),
+    [config]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_better_core.BetterCoreProvider, { config: coreConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BetterComponentsProviderInternal, { config: componentsConfig, ...props }) });
+}
+var BetterComponentsProvider_default = (0, import_react.memo)(BetterComponentsProvider);
+
+// src/utils/variableFunctions.ts
+var checkBetterCoreContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var pressStrength = () => {
+  if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "pressStrength")) return void 0;
+  return {
+    z05: externalBetterCoreContextValue.colorTheme === "dark" ? 0.85 : 0.95,
+    z1: externalBetterCoreContextValue.colorTheme === "dark" ? 0.6 : 0.8,
+    z2: externalBetterCoreContextValue.colorTheme === "dark" ? 0.5 : 0.7,
+    z3: externalBetterCoreContextValue.colorTheme === "dark" ? 0.4 : 0.6
+  };
+};
+
+// src/utils/hooks.ts
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_react_better_core2 = require("react-better-core");
+
+// src/constants/css.ts
+var cssProps = /* @__PURE__ */ new Set([
+  "aligncontent",
+  "alignitems",
+  "alignself",
+  "aspectratio",
+  "borderbottomwidth",
+  "borderendwidth",
+  "borderleftwidth",
+  "borderrightwidth",
+  "borderstartwidth",
+  "bordertopwidth",
+  "borderwidth",
+  "bottom",
+  "boxsizing",
+  "display",
+  "end",
+  "flex",
+  "flexbasis",
+  "flexdirection",
+  "rowgap",
+  "gap",
+  "columngap",
+  "flexgrow",
+  "flexshrink",
+  "flexwrap",
+  "height",
+  "justifycontent",
+  "left",
+  "margin",
+  "marginbottom",
+  "marginend",
+  "marginhorizontal",
+  "marginleft",
+  "marginright",
+  "marginstart",
+  "margintop",
+  "marginvertical",
+  "maxheight",
+  "maxwidth",
+  "minheight",
+  "minwidth",
+  "overflow",
+  "padding",
+  "paddingbottom",
+  "paddingend",
+  "paddinghorizontal",
+  "paddingleft",
+  "paddingright",
+  "paddingstart",
+  "paddingtop",
+  "paddingvertical",
+  "position",
+  "right",
+  "start",
+  "top",
+  "width",
+  "zindex",
+  "direction",
+  "inset",
+  "insetblock",
+  "insetblockend",
+  "insetblockstart",
+  "insetinline",
+  "insetinlineend",
+  "insetinlinestart",
+  "marginblock",
+  "marginblockend",
+  "marginblockstart",
+  "margininline",
+  "margininlineend",
+  "margininlinestart",
+  "paddingblock",
+  "paddingblockend",
+  "paddingblockstart",
+  "paddinginline",
+  "paddinginlineend",
+  "paddinginlinestart",
+  "shadowcolor",
+  "shadowoffset",
+  "shadowopacity",
+  "shadowradius",
+  "transform",
+  "transformorigin",
+  "transformmatrix",
+  "rotation",
+  "scalex",
+  "scaley",
+  "translatex",
+  "translatey",
+  "backfacevisibility",
+  "backgroundcolor",
+  "borderblockcolor",
+  "borderblockendcolor",
+  "borderblockstartcolor",
+  "borderbottomcolor",
+  "borderbottomendradius",
+  "borderbottomleftradius",
+  "borderbottomrightradius",
+  "borderbottomstartradius",
+  "bordercolor",
+  "bordercurve",
+  "borderendcolor",
+  "borderendendradius",
+  "borderendstartradius",
+  "borderleftcolor",
+  "borderradius",
+  "borderrightcolor",
+  "borderstartcolor",
+  "borderstartendradius",
+  "borderstartstartradius",
+  "borderstyle",
+  "bordertopcolor",
+  "bordertopendradius",
+  "bordertopleftradius",
+  "bordertoprightradius",
+  "bordertopstartradius",
+  "outlinecolor",
+  "outlineoffset",
+  "outlinestyle",
+  "outlinewidth",
+  "opacity",
+  "elevation",
+  "pointerevents",
+  "isolation",
+  "cursor",
+  "boxshadow",
+  "filter",
+  "mixblendmode",
+  "fontvariant",
+  "textdecorationcolor",
+  "textdecorationstyle",
+  "writingdirection",
+  "textalignvertical",
+  "verticalalign",
+  "includefontpadding",
+  "color",
+  "fontfamily",
+  "fontsize",
+  "fontstyle",
+  "fontweight",
+  "letterspacing",
+  "lineheight",
+  "textalign",
+  "textdecorationline",
+  "textdecorationstyle",
+  "textdecorationcolor",
+  "textshadowcolor",
+  "textshadowoffset",
+  "textshadowradius",
+  "texttransform",
+  "userselect"
+]);
+var animateProps = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "skewX",
+  "skewY",
+  "perspective",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "matrix"
+]);
+var animateTransitionProps = /* @__PURE__ */ new Set([
+  "type",
+  "ease",
+  "easing",
+  "duration",
+  "delay",
+  "type",
+  "friction",
+  "tension",
+  "speed",
+  "bounciness",
+  "stiffness",
+  "damping",
+  "mass",
+  "overshootClamping",
+  "restDisplacementThreshold",
+  "restSpeedThreshold",
+  "velocity",
+  "loop"
+]);
+
+// src/utils/hooks.ts
+function useDevice() {
+  const theme2 = (0, import_react_better_core2.useTheme)();
+  const safeAreaInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const screenDimensions = import_react_native.Dimensions.get("screen");
+  const windowDimensions = import_react_native.Dimensions.get("window");
+  const isSmallDevice = windowDimensions.height <= 700;
+  return {
+    safeArea: {
+      ...safeAreaInsets,
+      /** @description The safe area insets after calculations. Recommended to use this instead of the raw insets. */
+      afterCalculations: {
+        top: safeAreaInsets.top < 25 ? 32 : safeAreaInsets.top < 40 ? 40 : safeAreaInsets.top,
+        bottom: (safeAreaInsets.bottom === 0 ? theme2.styles.space : safeAreaInsets.bottom) + (isSmallDevice ? 0 : theme2.styles.space * 2),
+        left: safeAreaInsets.left,
+        right: safeAreaInsets.right
+      }
+    },
+    /** @description The dimensions of the device screen. */
+    screenDimensions,
+    /** @description The dimensions of the app window. */
+    windowDimensions,
+    /** @description Whether the device is small. */
+    isSmallDevice
+  };
+}
+function useKeyboard() {
+  const [keyboardOpened, setKeyboardOpened] = (0, import_react_better_core2.useBooleanState)();
+  const [keyboardWillOpen, setKeyboardWillOpen] = (0, import_react_better_core2.useBooleanState)();
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    const keyboardDidShow = (event) => {
+      setKeyboardOpened.setTrue();
+      setKeyboardHeight(event.endCoordinates.height);
+    };
+    const keyboardDidHide = () => {
+      setKeyboardOpened.setFalse();
+      setKeyboardHeight(0);
+    };
+    const willShowSubscription = import_react_native.Keyboard.addListener("keyboardWillShow", setKeyboardWillOpen.setTrue);
+    const willHideSubscription = import_react_native.Keyboard.addListener("keyboardWillHide", setKeyboardWillOpen.setFalse);
+    const didShowSubscription = import_react_native.Keyboard.addListener("keyboardDidShow", keyboardDidShow);
+    const didHideSubscription = import_react_native.Keyboard.addListener("keyboardDidHide", keyboardDidHide);
+    return () => {
+      willShowSubscription.remove();
+      willHideSubscription.remove();
+      didShowSubscription.remove();
+      didHideSubscription.remove();
+    };
+  }, []);
+  return {
+    isOpened: keyboardOpened,
+    willOpen: keyboardWillOpen,
+    height: keyboardHeight
+  };
+}
+function useComponentPropsGrouper(props, prefix) {
+  return (0, import_react2.useMemo)(() => {
+    const style = {};
+    const withPrefixStyle = {};
+    const restProps = {};
+    for (const key in props) {
+      const keyName = key;
+      if (cssProps.has(keyName.toLowerCase())) {
+        style[keyName] = props[keyName];
+      } else if (keyName.startsWith(prefix) && (cssProps.has(keyName.slice(prefix.length).toLowerCase()) || animateProps.has(keyName.slice(prefix.length).toLowerCase()) || animateTransitionProps.has(keyName.slice(prefix.length).toLowerCase()))) {
+        const realKey = `${keyName.slice(prefix.length, prefix.length + 1).toLowerCase()}${keyName.slice(
+          prefix.length + 1
+        )}`;
+        withPrefixStyle[realKey] = props[keyName];
+      } else {
+        restProps[keyName] = props[keyName];
+      }
+    }
+    return {
+      style,
+      withPrefixStyle,
+      restProps
+    };
+  }, [props, prefix]);
+}
+
+// src/utils/asyncStorage.ts
+var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
+function generateAsyncStorage() {
+  return {
+    setItem: async (name, value) => {
+      if (value) await import_async_storage.default.setItem(name.toString(), JSON.stringify(value));
+      else await import_async_storage.default.removeItem(name.toString());
+    },
+    getItem: async (name) => {
+      const item = await import_async_storage.default.getItem(name.toString());
+      if (item === null) return void 0;
+      try {
+        return JSON.parse(item);
+      } catch (error) {
+        return void 0;
+      }
+    },
+    removeItem: async (name) => {
+      await import_async_storage.default.removeItem(name.toString());
+    },
+    removeAllItems: () => {
+      import_async_storage.default.clear();
+    }
+  };
+}
+
+// src/components/View.tsx
+var import_react3 = require("react");
+var import_react_native2 = require("react-native");
+var import_react_better_core3 = require("react-better-core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var touchableHighlightStyleMoveToContent = [
+  "backgroundColor",
+  "padding",
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingHorizontal",
+  "paddingVertical",
+  "borderWidth",
+  "borderTopWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderRightWidth",
+  "borderColor",
+  "borderTopColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderRightColor"
+];
+var touchableNativeFeedbackStyleMoveToHolder = [
+  "width",
+  "height",
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginHorizontal",
+  "marginVertical"
+];
+function alphaToHex(alpha) {
+  const clamped = Math.min(1, Math.max(0, alpha));
+  const value = Math.round(clamped * 255);
+  return value.toString(16).padStart(2, "0");
+}
+var ViewComponent = function View({
+  isRow,
+  value,
+  disabled,
+  pressType = "highlight",
+  pressStrength: pressStrength2 = 0.8,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+  onPressWithValue,
+  children,
+  ...props
+}) {
+  const theme2 = (0, import_react_better_core3.useTheme)();
+  const style = (0, import_react3.useMemo)(
+    () => ({
+      flexDirection: isRow ? "row" : "column",
+      ...props,
+      ...props.shadowOffsetWidth !== void 0 || props.shadowOffsetHeight !== void 0 ? {
+        shadowOffset: {
+          width: props.shadowOffsetWidth ?? 0,
+          height: props.shadowOffsetHeight ?? 0
+        }
+      } : {}
+    }),
+    [isRow, props]
+  );
+  const touchableHighlightStyle = (0, import_react3.useMemo)(
+    () => ({
+      ...style,
+      ...touchableHighlightStyleMoveToContent.reduce((previousValue, currentValue) => {
+        if (currentValue === "shadowOffsetWidth" || currentValue === "shadowOffsetHeight")
+          previousValue.shadowOffset = void 0;
+        else previousValue[currentValue] = void 0;
+        return previousValue;
+      }, {})
+    }),
+    [style]
+  );
+  const touchableHighlightContentProps = (0, import_react3.useMemo)(
+    () => touchableHighlightStyleMoveToContent.reduce((previousValue, currentValue) => {
+      previousValue[currentValue] = props[currentValue];
+      return previousValue;
+    }, {}),
+    [props]
+  );
+  const touchableNativeFeedbackHolderStyle = (0, import_react3.useMemo)(
+    () => touchableNativeFeedbackStyleMoveToHolder.reduce((previousValue, currentValue) => {
+      previousValue[currentValue] = props[currentValue];
+      return previousValue;
+    }, {}),
+    [props]
+  );
+  const touchableNativeFeedbackContentStyle = (0, import_react3.useMemo)(
+    () => ({
+      ...style,
+      ...touchableNativeFeedbackStyleMoveToHolder.reduce(
+        (previousValue, currentValue) => {
+          if (currentValue === "shadowOffsetWidth" || currentValue === "shadowOffsetHeight")
+            previousValue.shadowOffset = void 0;
+          else previousValue[currentValue] = void 0;
+          return previousValue;
+        },
+        {}
+      )
+    }),
+    [style]
+  );
+  const pressEvents = (0, import_react3.useMemo)(
+    () => !disabled ? {
+      onPress: (event) => {
+        onPress?.(event);
+        if (value !== void 0) onPressWithValue?.(value);
+      },
+      onPressIn,
+      onPressOut,
+      onLongPress
+    } : {},
+    [disabled, onPress, onPressIn, onPressOut, onLongPress, onPressWithValue, value]
+  );
+  const androidBoxShadow = import_react_native2.Platform.OS === "android" ? props.shadowOffsetWidth !== void 0 || props.shadowOffsetHeight !== void 0 ? `${props.shadowOffsetWidth ?? 0}px ${props.shadowOffsetHeight ?? 0}px ${props.shadowRadius}px ${props.shadowColor?.toString() ?? "#000000"}` : void 0 : void 0;
+  const isPressable = onPress || onPressIn || onPressOut || onLongPress || onPressWithValue;
+  return isPressable ? pressType === "opacity" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.TouchableOpacity,
+    {
+      style,
+      activeOpacity: pressStrength2,
+      boxShadow: androidBoxShadow,
+      ...pressEvents,
+      ...props,
+      children
+    }
+  ) : pressType === "highlight" ? import_react_native2.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.TouchableHighlight,
+    {
+      activeOpacity: pressStrength2,
+      underlayColor: theme2.colors.textPrimary,
+      style: touchableHighlightStyle,
+      ...pressEvents,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ViewComponent,
+        {
+          width: "100%",
+          borderRadius: props.borderRadius,
+          borderTopLeftRadius: props.borderTopLeftRadius,
+          borderTopRightRadius: props.borderTopRightRadius,
+          borderBottomLeftRadius: props.borderBottomLeftRadius,
+          borderBottomRightRadius: props.borderBottomRightRadius,
+          ...touchableHighlightContentProps,
+          children
+        }
+      )
+    }
+  ) : import_react_native2.Platform.OS === "android" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ViewComponent,
+    {
+      ...touchableNativeFeedbackHolderStyle,
+      borderRadius: props.borderRadius,
+      borderTopLeftRadius: props.borderTopLeftRadius,
+      borderTopRightRadius: props.borderTopRightRadius,
+      borderBottomLeftRadius: props.borderBottomLeftRadius,
+      borderBottomRightRadius: props.borderBottomRightRadius,
+      boxShadow: androidBoxShadow,
+      overflow: "hidden",
+      pointerEvents: "box-none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.TouchableNativeFeedback,
+        {
+          ...pressEvents,
+          ...props,
+          background: import_react_native2.TouchableNativeFeedback.Ripple(
+            `${theme2.colors.textPrimary}${alphaToHex(1 - pressStrength2)}`,
+            false
+          ),
+          useForeground: true,
+          touchSoundDisabled: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ViewComponent, { flex: 1, ...touchableNativeFeedbackContentStyle, children })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { boxShadow: androidBoxShadow, style, ...props, children });
+};
+ViewComponent.box = function Box({ withShadow, ...props }) {
+  const theme2 = (0, import_react_better_core3.useTheme)();
+  const shadowProps = (0, import_react3.useMemo)(
+    () => withShadow ? {
+      shadowOpacity: 0.2,
+      shadowOffsetHeight: 10,
+      shadowRadius: 10,
+      shadowColor: import_react_native2.Platform.OS === "android" ? "#00000020" : void 0
+    } : {},
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ViewComponent,
+    {
+      width: "100%",
+      backgroundColor: theme2.colors.backgroundContent,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: theme2.styles.borderRadius,
+      paddingHorizontal: theme2.styles.space,
+      paddingVertical: theme2.styles.gap,
+      ...shadowProps,
+      ...props
+    }
+  );
+};
+var View2 = (0, import_react3.memo)(ViewComponent);
+View2.box = ViewComponent.box;
+var View_default = View2;
+
+// src/components/Text.tsx
+var import_react4 = require("react");
+var import_react_native3 = require("react-native");
+var import_react_better_core4 = require("react-better-core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TextComponent = function Text({ selectionColor, children, ...props }) {
+  const theme2 = (0, import_react_better_core4.useTheme)();
+  const style = (0, import_react4.useMemo)(
+    () => ({
+      fontSize: 16,
+      color: theme2.colors.textPrimary,
+      ...props
+    }),
+    [theme2, props]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { selectionColor: selectionColor ?? theme2.colors.primary, style, ...props, children });
+};
+TextComponent.title = function Title(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextComponent, { fontSize: 32, fontWeight: 700, ...props });
+};
+TextComponent.subtitle = function Subtitle(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextComponent, { fontSize: 24, fontWeight: 700, ...props });
+};
+TextComponent.body = function Body(props) {
+  const theme2 = (0, import_react_better_core4.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextComponent, { color: theme2.colors.textSecondary, ...props });
+};
+TextComponent.caption = function Caption(props) {
+  const theme2 = (0, import_react_better_core4.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextComponent, { fontSize: 14, color: theme2.colors.textSecondary, ...props });
+};
+TextComponent.unknown = function Unknown(props) {
+  const theme2 = (0, import_react_better_core4.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme2.colors.textSecondary, ...props });
+};
+var Text2 = (0, import_react4.memo)(TextComponent);
+Text2.title = TextComponent.title;
+Text2.subtitle = TextComponent.subtitle;
+Text2.body = TextComponent.body;
+Text2.caption = TextComponent.caption;
+Text2.unknown = TextComponent.unknown;
+var Text_default = Text2;
+
+// src/components/Button.tsx
+var import_react7 = require("react");
+var import_react_native5 = require("react-native");
+var import_react_better_core6 = require("react-better-core");
+
+// src/components/Animate.tsx
+var import_react5 = require("react");
+var import_motion = require("@legendapp/motion");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var defaultTransitionDuration = 0.15 * 1e3;
+var Animate = {
+  View: (0, import_react5.memo)(function View3({ transformOriginX, transformOriginY, children, ...props }) {
+    const initialProps = useComponentPropsGrouper(props, "initial");
+    const animateProps2 = useComponentPropsGrouper(props, "animate");
+    const whileTapProps = useComponentPropsGrouper(props, "whileTap");
+    const transitionProps = useComponentPropsGrouper(props, "transition");
+    const transition = (0, import_react5.useMemo)(
+      () => ({
+        type: "timing",
+        duration: defaultTransitionDuration,
+        ...transitionProps.withPrefixStyle
+      }),
+      [transitionProps.withPrefixStyle]
+    );
+    const transformOrigin = (0, import_react5.useMemo)(
+      () => transformOriginX !== void 0 || transformOriginY !== void 0 ? {
+        x: transformOriginX ?? 0,
+        y: transformOriginY ?? 0
+      } : void 0,
+      [transformOriginX, transformOriginY]
+    );
+    const content = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_motion.Motion.View,
+      {
+        style: initialProps.style,
+        initial: initialProps.withPrefixStyle,
+        animate: animateProps2.withPrefixStyle,
+        transition,
+        whileTap: whileTapProps.withPrefixStyle,
+        transformOrigin,
+        children
+      }
+    );
+    return Object.keys(whileTapProps.withPrefixStyle).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_motion.Motion.Pressable, { children: content }) : content;
+  }),
+  Text: (0, import_react5.memo)(function Text3({ transformOriginX, transformOriginY, children, ...props }) {
+    const initialProps = useComponentPropsGrouper(props, "initial");
+    const animateProps2 = useComponentPropsGrouper(props, "animate");
+    const whileTapProps = useComponentPropsGrouper(props, "whileTap");
+    const transitionProps = useComponentPropsGrouper(props, "transition");
+    const transition = (0, import_react5.useMemo)(
+      () => ({
+        type: "timing",
+        duration: defaultTransitionDuration,
+        ...transitionProps.withPrefixStyle
+      }),
+      [transitionProps.withPrefixStyle]
+    );
+    const transformOrigin = (0, import_react5.useMemo)(
+      () => transformOriginX !== void 0 || transformOriginY !== void 0 ? {
+        x: transformOriginX ?? 0,
+        y: transformOriginY ?? 0
+      } : void 0,
+      [transformOriginX, transformOriginY]
+    );
+    const content = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_motion.Motion.Text,
+      {
+        style: initialProps.style,
+        initial: initialProps.withPrefixStyle,
+        animate: animateProps2.withPrefixStyle,
+        transition,
+        whileTap: whileTapProps.withPrefixStyle,
+        transformOrigin,
+        children
+      }
+    );
+    return Object.keys(whileTapProps.withPrefixStyle).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_motion.Motion.Pressable, { children: content }) : content;
+  })
+};
+var Animate_default = Animate;
+
+// src/components/Loader.tsx
+var import_react6 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_better_core5 = require("react-better-core");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var LoaderComponent = function Loader({ size = "small", color, ...props }) {
+  const theme2 = (0, import_react_better_core5.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(View_default, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.ActivityIndicator, { size, color: color ?? theme2.colors.textPrimary }) });
+};
+LoaderComponent.box = function Box2({ text = "Loading...", size = "large", color, ...props }) {
+  const theme2 = (0, import_react_better_core5.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    View_default,
+    {
+      width: "100%",
+      alignItems: "center",
+      gap: theme2.styles.gap,
+      marginVertical: theme2.styles.space,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader2, { size, color }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text_default, { textAlign: "center", color: color ?? theme2.colors.textSecondary, children: text })
+      ]
+    }
+  );
+};
+LoaderComponent.text = function LoaderText({ text = "Loading...", size, color, ...props }) {
+  const theme2 = (0, import_react_better_core5.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    View_default,
+    {
+      isRow: true,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: theme2.styles.gap,
+      marginVertical: theme2.styles.space,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader2, { size, color }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text_default, { textAlign: "center", color: color ?? theme2.colors.textSecondary, children: text })
+      ]
+    }
+  );
+};
+var Loader2 = (0, import_react6.memo)(LoaderComponent);
+Loader2.box = LoaderComponent.box;
+Loader2.text = LoaderComponent.text;
+var Loader_default = Loader2;
+
+// src/components/Button.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ButtonComponent = function Button({
+  text,
+  textFontSize = 16,
+  textFontWeight = 700,
+  textDecorationLine,
+  textColor,
+  icon,
+  iconPosition = "left",
+  iconColor,
+  iconSize,
+  image,
+  imagePosition = "left",
+  imageWidth,
+  imageHeight,
+  loaderName,
+  isLoading,
+  isSmall,
+  animateOpacity,
+  flex,
+  alignSelf,
+  disabled,
+  ...props
+}) {
+  const theme2 = (0, import_react_better_core6.useTheme)();
+  const isLoadingLoader = (0, import_react_better_core6.useLoader)(loaderName);
+  const isLoadingElement = isLoading || isLoadingLoader;
+  const isDisabled = disabled || isLoadingElement;
+  const lineHeight = 20;
+  const color = textColor ?? theme2.colors.base;
+  const paddingVertical = props.paddingVertical ? parseFloat(props.paddingVertical.toString()) : theme2.styles.space;
+  const paddingHorizontal = props.paddingHorizontal ? parseFloat(props.paddingHorizontal.toString()) : theme2.styles.space + theme2.styles.gap;
+  const buttonHeight = paddingVertical + lineHeight + paddingVertical;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Animate_default.View,
+    {
+      position: "relative",
+      flex,
+      alignSelf: alignSelf ?? (isSmall === "left" ? "flex-start" : isSmall === "right" ? "flex-end" : isSmall === "center" ? "center" : isSmall ? "baseline" : void 0),
+      initialOpacity: 1,
+      animateOpacity: animateOpacity ?? (disabled ? 0.6 : 1),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        View_default,
+        {
+          position: "relative",
+          width: !isSmall ? "100%" : void 0,
+          height: import_react_native5.Platform.OS === "android" ? buttonHeight : void 0,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: theme2.colors.primary,
+          borderRadius: theme2.styles.borderRadius,
+          paddingVertical,
+          paddingHorizontal,
+          disabled: isDisabled,
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Animate_default.View, { initialOpacity: 1, animateOpacity: isLoadingElement ? 0 : 1, children: text && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Text_default,
+              {
+                fontSize: textFontSize,
+                fontWeight: textFontWeight,
+                textDecorationLine,
+                textDecorationColor: color,
+                textAlign: "center",
+                lineHeight,
+                color,
+                children: text
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Animate_default.View,
+              {
+                position: "absolute",
+                width: "100%",
+                height: buttonHeight,
+                left: paddingHorizontal,
+                alignItems: "center",
+                justifyContent: "center",
+                initialOpacity: 0,
+                animateOpacity: isLoadingElement ? 1 : 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader_default, { color })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+ButtonComponent.secondary = function Secondary(props) {
+  const theme2 = (0, import_react_better_core6.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ButtonComponent,
+    {
+      backgroundColor: theme2.colors.backgroundContent,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      textColor: theme2.colors.textPrimary,
+      pressStrength: pressStrength().z05,
+      animateOpacity: props.disabled ? 0.4 : 1,
+      ...props
+    }
+  );
+};
+ButtonComponent.destructive = function Destructive(props) {
+  const theme2 = (0, import_react_better_core6.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonComponent, { backgroundColor: theme2.colors.error, ...props });
+};
+ButtonComponent.text = function ButtonText(props) {
+  const theme2 = (0, import_react_better_core6.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ButtonComponent,
+    {
+      width: "auto",
+      textColor: theme2.colors.textPrimary,
+      textDecorationLine: "underline",
+      backgroundColor: "transparent",
+      paddingHorizontal: theme2.styles.space,
+      paddingVertical: theme2.styles.gap,
+      isSmall: true,
+      pressType: "opacity",
+      ...props
+    }
+  );
+};
+var Button2 = (0, import_react7.memo)(ButtonComponent);
+Button2.secondary = ButtonComponent.secondary;
+Button2.destructive = ButtonComponent.destructive;
+Button2.text = ButtonComponent.text;
+var Button_default = Button2;
+
+// src/components/ScreenHolder.tsx
+var import_react8 = require("react");
+var import_react_native6 = require("react-native");
+var import_react_better_core7 = require("react-better-core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ScreenHolderComponent = ({
+  noScroll,
+  noSideSpace,
+  refreshTimeout = 1,
+  onRefresh,
+  onRefreshEnd,
+  backgroundColor,
+  insideTopSafeArea,
+  insideBottomSafeArea,
+  bottomSpace = 0,
+  footer,
+  keepFooterOnKeyboardOpened,
+  children
+}) => {
+  const theme2 = (0, import_react_better_core7.useTheme)();
+  const device = useDevice();
+  const keyboard = useKeyboard();
+  const [isRefreshing, setIsRefreshing] = (0, import_react_better_core7.useBooleanState)();
+  const keyboardAvoidingViewStyle = (0, import_react8.useMemo)(
+    () => ({
+      flex: 1
+    }),
+    []
+  );
+  const onRefreshElement = (0, import_react8.useCallback)(() => {
+    setIsRefreshing.setTrue();
+    onRefresh?.();
+    setTimeout(() => {
+      setIsRefreshing.setFalse();
+      onRefreshEnd?.();
+    }, refreshTimeout * 1e3);
+  }, [onRefresh, onRefreshEnd, refreshTimeout]);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    View_default,
+    {
+      flex: 1,
+      paddingHorizontal: !noSideSpace ? theme2.styles.space : void 0,
+      paddingTop: theme2.styles.gap + (insideTopSafeArea ? device.safeArea.afterCalculations.top : 0),
+      paddingBottom: import_react_native6.Platform.OS === "ios" && keyboard.isOpened ? device.safeArea.afterCalculations.top : bottomSpace + (insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : 0),
+      children
+    }
+  );
+  const withRefresh = onRefresh || onRefreshEnd;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react_native6.KeyboardAvoidingView,
+    {
+      style: keyboardAvoidingViewStyle,
+      keyboardVerticalOffset: keepFooterOnKeyboardOpened ? import_react_native6.Platform.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0,
+      behavior: import_react_native6.Platform.OS === "ios" ? "padding" : "height",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native6.ScrollView,
+          {
+            refreshControl: withRefresh ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            children: content
+          }
+        ) }),
+        keepFooterOnKeyboardOpened || (import_react_native6.Platform.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { children: footer }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { width: "100%", height: device.safeArea.afterCalculations.bottom })
+      ]
+    }
+  ) });
+};
+ScreenHolderComponent.footer = function Footer({
+  noSideSpace,
+  backgroundColor,
+  insideBottomSafeArea,
+  children
+}) {
+  const theme2 = (0, import_react_better_core7.useTheme)();
+  const device = useDevice();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    View_default,
+    {
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
+      paddingHorizontal: !noSideSpace ? theme2.styles.space : void 0,
+      paddingTop: theme2.styles.gap,
+      paddingBottom: insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : void 0,
+      children
+    }
+  );
+};
+var ScreenHolder = (0, import_react8.memo)(ScreenHolderComponent);
+ScreenHolder.footer = ScreenHolderComponent.footer;
+var ScreenHolder_default = ScreenHolder;
+
+// src/components/Image.tsx
+var import_react9 = require("react");
+var import_react_better_core8 = require("react-better-core");
+var import_react_native7 = require("react-native");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ImageComponent = function Image({ name, source, withDevFittingMode, ...props }) {
+  const { assets: assets2 } = (0, import_react_better_core8.useBetterCoreContext)();
+  const style = (0, import_react9.useMemo)(
+    () => ({
+      width: 100,
+      height: 100,
+      ...withDevFittingMode ? {
+        borderWidth: 1,
+        borderColor: "#eb39f7"
+      } : {},
+      ...props
+    }),
+    [withDevFittingMode, props]
+  );
+  (0, import_react9.useEffect)(() => {
+    if (!name) return;
+    if (!assets2[name.toString()])
+      console.warn(
+        `The asset \`${name}\` you are trying to use does not exist. Make sure to add it to the \`assets\` object in \`<BetterComponentsProvider>\` config value prop.`
+      );
+  }, [assets2, name]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Image, { source: name ? assets2[name.toString()] : source, style, ...props });
+};
+ImageComponent.profileImage = function ProfileImage({ size = 50, letters, backgroundColor, ...props }) {
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  return letters ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    View_default,
+    {
+      width: size,
+      height: size,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      alignItems: "center",
+      justifyContent: "center",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ImageComponent,
+    {
+      width: size,
+      height: size,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      objectFit: "cover",
+      ...props
+    }
+  );
+};
+var Image2 = (0, import_react9.memo)(ImageComponent);
+Image2.profileImage = ImageComponent.profileImage;
+var Image_default = Image2;
+
+// src/components/InputField.tsx
+var import_react10 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_better_core9 = require("react-better-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var InputFieldComponent = (0, import_react10.forwardRef)(
+  ({
+    placeholder,
+    prefix,
+    suffix,
+    defaultValue,
+    editable = true,
+    autoFocus,
+    autoCapitalize,
+    autoComplete,
+    autoCorrect,
+    keyboardAppearance = "default",
+    keyboardType,
+    secureTextEntry,
+    onFocus,
+    onBlur
+  }, ref) => {
+    const theme2 = (0, import_react_better_core9.useTheme)();
+    const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
+    const [isFocused, setIsFocused] = (0, import_react_better_core9.useBooleanState)();
+    const paddingHorizontal = theme2.styles.space;
+    const paddingVertical = (theme2.styles.space + theme2.styles.gap) / 2;
+    const onFocusElement = (0, import_react10.useCallback)((event) => {
+      setIsFocused.setTrue();
+      onFocus?.(event);
+    }, []);
+    const onBlurElement = (0, import_react10.useCallback)((event) => {
+      setIsFocused.setFalse();
+      onBlur?.(event);
+    }, []);
+    const textInputStyle = (0, import_react10.useMemo)(
+      () => ({
+        flex: 1,
+        fontSize: 16,
+        lineHeight: 20,
+        color: theme2.colors.textPrimary,
+        paddingHorizontal,
+        paddingVertical
+      }),
+      [theme2.colors, paddingHorizontal, paddingVertical]
+    );
+    (0, import_react10.useImperativeHandle)(
+      ref,
+      () => {
+        return {};
+      },
+      []
+    );
+    const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core9.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core9.lightenColor)(theme2.colors.backgroundContent, 0.1);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        View_default,
+        {
+          isRow: true,
+          height: "100%",
+          backgroundColor: prefixSuffixBackgroundColor,
+          alignItems: "center",
+          borderWidth: 1,
+          borderRightWidth: 0,
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          borderColor: theme2.colors.border,
+          paddingHorizontal,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: prefix })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Animate_default.View,
+        {
+          flex: 1,
+          backgroundColor: theme2.colors.backgroundContent,
+          borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+          borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+          borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+          borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+          borderWidth: 1,
+          initialBorderColor: theme2.colors.border,
+          animateBorderColor: isFocused ? theme2.colors.primary : theme2.colors.border,
+          overflow: "hidden",
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_react_native8.TextInput,
+            {
+              style: textInputStyle,
+              defaultValue,
+              autoCapitalize,
+              autoComplete,
+              autoCorrect,
+              autoFocus,
+              placeholder,
+              placeholderTextColor: theme2.colors.textSecondary + "80",
+              readOnly: !editable,
+              keyboardAppearance,
+              keyboardType,
+              cursorColor: theme2.colors.primary,
+              selectionColor: theme2.colors.primary,
+              secureTextEntry,
+              onFocus: onFocusElement,
+              onBlur: onBlurElement
+            }
+          )
+        }
+      ),
+      suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        View_default,
+        {
+          isRow: true,
+          height: "100%",
+          backgroundColor: prefixSuffixBackgroundColor,
+          alignItems: "center",
+          borderWidth: 1,
+          borderLeftWidth: 0,
+          borderTopRightRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
+          borderColor: theme2.colors.border,
+          paddingHorizontal,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: suffix })
+        }
+      )
+    ] });
+  }
+);
+InputFieldComponent.email = (0, import_react10.forwardRef)(function Email(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputFieldComponent,
+    {
+      placeholder: "your@email.here",
+      autoComplete: "email",
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+InputFieldComponent.password = (0, import_react10.forwardRef)(function Password(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputFieldComponent,
+    {
+      secureTextEntry: true,
+      placeholder: "******",
+      autoCapitalize: "none",
+      autoComplete: "password",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+var InputField = (0, import_react10.memo)(InputFieldComponent);
+InputField.email = InputFieldComponent.email;
+InputField.password = InputFieldComponent.password;
+var InputField_default = InputField;
+
+// src/plugins/asyncStorage.ts
+var defaultAsyncStoragePluginOptions = {};
+var asyncStoragePlugin = (options) => ({
+  name: "asyncStorage",
+  initialize: () => {
+    console.log("asyncStorage plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultAsyncStoragePluginOptions,
+    ...options
+  })
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Animate,
+  BetterComponentsProvider,
+  Button,
+  Image,
+  InputField,
+  Loader,
+  ScreenHolder,
+  Text,
+  View,
+  asyncStoragePlugin,
+  colorThemeControls,
+  countries,
+  darkenColor,
+  defaultAsyncStoragePluginOptions,
+  desaturateColor,
+  eventPreventDefault,
+  eventPreventStop,
+  eventStopPropagation,
+  formatPhoneNumber,
+  generateAsyncStorage,
+  generateRandomString,
+  getPluralWord,
+  lightenColor,
+  loaderControls,
+  pressStrength,
+  saturateColor,
+  useBetterComponentsContext,
+  useBooleanState,
+  useDebounceState,
+  useDevice,
+  useKeyboard,
+  useLoader,
+  useLoaderControls,
+  useTheme
+});
+//# sourceMappingURL=index.js.map