react-native-better-html 1.0.18 → 1.0.20

package/dist/index.js

@@ -43,44 +43,49 @@ __export(index_exports, {
   Switch: () => Switch_default,
   Text: () => Text_default,
   View: () => View_default,
+  alertControls: () => alertControls,
+  alertsPlugin: () => alertsPlugin,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core14.colorThemeControls,
-  countries: () => import_react_better_core14.countries,
-  darkenColor: () => import_react_better_core14.darkenColor,
+  colorThemeControls: () => import_react_better_core17.colorThemeControls,
+  countries: () => import_react_better_core17.countries,
+  darkenColor: () => import_react_better_core17.darkenColor,
+  defaultAlertsPluginOptions: () => defaultAlertsPluginOptions,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  desaturateColor: () => import_react_better_core14.desaturateColor,
-  eventPreventDefault: () => import_react_better_core14.eventPreventDefault,
-  eventPreventStop: () => import_react_better_core14.eventPreventStop,
-  eventStopPropagation: () => import_react_better_core14.eventStopPropagation,
-  formatPhoneNumber: () => import_react_better_core14.formatPhoneNumber,
+  desaturateColor: () => import_react_better_core17.desaturateColor,
+  eventPreventDefault: () => import_react_better_core17.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core17.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core17.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core17.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core14.generateRandomString,
+  generateRandomString: () => import_react_better_core17.generateRandomString,
   getFormErrorObject: () => getFormErrorObject,
-  getPluralWord: () => import_react_better_core14.getPluralWord,
-  lightenColor: () => import_react_better_core14.lightenColor,
-  loaderControls: () => import_react_better_core14.loaderControls,
+  getPluralWord: () => import_react_better_core17.getPluralWord,
+  lightenColor: () => import_react_better_core17.lightenColor,
+  loaderControls: () => import_react_better_core17.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core14.saturateColor,
+  saturateColor: () => import_react_better_core17.saturateColor,
+  useAlertControls: () => useAlertControls,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core14.useBooleanState,
-  useDebounceState: () => import_react_better_core14.useDebounceState,
+  useBooleanState: () => import_react_better_core17.useBooleanState,
+  useDebounceState: () => import_react_better_core17.useDebounceState,
   useDevice: () => useDevice,
   useEventEmitter: () => useEventEmitter,
   useForm: () => useForm,
   useKeyboard: () => useKeyboard,
-  useLoader: () => import_react_better_core14.useLoader,
-  useLoaderControls: () => import_react_better_core14.useLoaderControls,
-  useTheme: () => import_react_better_core14.useTheme
+  useLoader: () => import_react_better_core17.useLoader,
+  useLoaderControls: () => import_react_better_core17.useLoaderControls,
+  useTheme: () => import_react_better_core17.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core14 = require("react-better-core");
+var import_react_better_core17 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
-var import_react = require("react");
-var import_react_better_core = require("react-better-core");
+var import_react12 = require("react");
+var import_react_better_core11 = require("react-better-core");
 
 // src/constants/app.ts
 var appConfig = {};
+var defaultAlertDuration = 2.3 * 1e3;
 
 // src/constants/theme.ts
 var theme = {};
@@ -122,115 +127,15 @@ 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 {
-    p05: externalBetterCoreContextValue.colorTheme === "dark" ? 0.85 : 0.95,
-    p1: externalBetterCoreContextValue.colorTheme === "dark" ? 0.6 : 0.8,
-    p2: externalBetterCoreContextValue.colorTheme === "dark" ? 0.5 : 0.7,
-    p3: externalBetterCoreContextValue.colorTheme === "dark" ? 0.4 : 0.6
-  };
-};
+// src/components/alerts/AlertsHolder.tsx
+var import_react11 = require("react");
+var import_react_better_core10 = require("react-better-core");
 
 // src/utils/hooks.ts
-var import_react2 = require("react");
+var import_react = 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");
+var import_react_better_core = require("react-better-core");
 
 // src/constants/css.ts
 var cssProps = /* @__PURE__ */ new Set([
@@ -423,7 +328,7 @@ var animateTransitionProps = /* @__PURE__ */ new Set([
 
 // src/utils/hooks.ts
 function useDevice() {
-  const theme2 = (0, import_react_better_core2.useTheme)();
+  const theme2 = (0, import_react_better_core.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");
@@ -448,10 +353,10 @@ function useDevice() {
   };
 }
 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 [keyboardOpened, setKeyboardOpened] = (0, import_react_better_core.useBooleanState)();
+  const [keyboardWillOpen, setKeyboardWillOpen] = (0, import_react_better_core.useBooleanState)();
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
     const keyboardDidShow = (event) => {
       setKeyboardOpened.setTrue();
       setKeyboardHeight(event.endCoordinates.height);
@@ -478,7 +383,7 @@ function useKeyboard() {
   };
 }
 function useComponentPropsGrouper(props, prefix) {
-  return (0, import_react2.useMemo)(() => {
+  return (0, import_react.useMemo)(() => {
     const style = {};
     const withPrefixStyle = {};
     const restProps = {};
@@ -504,14 +409,14 @@ function useComponentPropsGrouper(props, prefix) {
 }
 function useForm(options) {
   const { defaultValues, requiredFields, additional, onSubmit, validate } = options;
-  const inputFieldRefs = (0, import_react2.useRef)(
+  const inputFieldRefs = (0, import_react.useRef)(
     {}
   );
-  const [values, setValues] = (0, import_react2.useState)(defaultValues);
-  const [errors, setErrors] = (0, import_react2.useState)({});
-  const [isSubmitting, setIsSubmitting] = (0, import_react_better_core2.useBooleanState)();
+  const [values, setValues] = (0, import_react.useState)(defaultValues);
+  const [errors, setErrors] = (0, import_react.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react_better_core.useBooleanState)();
   const numberOfInputFields = Object.keys(defaultValues).length;
-  const setFieldValue = (0, import_react2.useCallback)(
+  const setFieldValue = (0, import_react.useCallback)(
     (field, value) => {
       setValues((oldValue) => ({
         ...oldValue,
@@ -524,7 +429,7 @@ function useForm(options) {
     },
     []
   );
-  const setFieldsValue = (0, import_react2.useCallback)((values2) => {
+  const setFieldsValue = (0, import_react.useCallback)((values2) => {
     setValues((oldValue) => ({
       ...oldValue,
       ...values2
@@ -535,15 +440,15 @@ function useForm(options) {
       return newErrors;
     });
   }, []);
-  const focusField = (0, import_react2.useCallback)((field) => {
+  const focusField = (0, import_react.useCallback)((field) => {
     inputFieldRefs.current[field]?.focus();
   }, []);
-  const validateForm = (0, import_react2.useCallback)(() => {
+  const validateForm = (0, import_react.useCallback)(() => {
     const validationErrors = validate?.(values) || {};
     setErrors(validationErrors);
     return validationErrors;
   }, [validate, values]);
-  const onSubmitFunction = (0, import_react2.useCallback)(
+  const onSubmitFunction = (0, import_react.useCallback)(
     async (event) => {
       event?.preventDefault();
       setIsSubmitting.setTrue();
@@ -561,7 +466,7 @@ function useForm(options) {
     },
     [values, validateForm, onSubmit, focusField]
   );
-  const getInputFieldProps = (0, import_react2.useCallback)(
+  const getInputFieldProps = (0, import_react.useCallback)(
     (field) => {
       const thisInputFieldIndex = Object.keys(values).findIndex((key) => key === field);
       const isLastInputField = thisInputFieldIndex === numberOfInputFields - 1;
@@ -586,7 +491,7 @@ function useForm(options) {
     },
     [values, setFieldValue, errors, requiredFields, additional, onSubmitFunction]
   );
-  const getSwitchProps = (0, import_react2.useCallback)(
+  const getSwitchProps = (0, import_react.useCallback)(
     (field, insideListItem) => {
       return insideListItem ? {
         switchIsEnabled: values[field],
@@ -602,19 +507,19 @@ function useForm(options) {
     },
     [values, setFieldValue]
   );
-  const reset = (0, import_react2.useCallback)(() => {
+  const reset = (0, import_react.useCallback)(() => {
     setValues(defaultValues);
     setErrors({});
   }, [defaultValues]);
-  const isDirty = (0, import_react2.useMemo)(
+  const isDirty = (0, import_react.useMemo)(
     () => Object.keys(defaultValues).some((key) => defaultValues[key] !== values[key]),
     [defaultValues, values]
   );
-  const isValid = (0, import_react2.useMemo)(() => {
+  const isValid = (0, import_react.useMemo)(() => {
     const validationErrors = validate?.(values) || {};
     return Object.keys(validationErrors).length === 0;
   }, [validate, values]);
-  const canSubmit = (0, import_react2.useMemo)(() => {
+  const canSubmit = (0, import_react.useMemo)(() => {
     const requiredFieldsHaveValues = requiredFields?.every((field) => values[field] !== void 0 && values[field] !== "") ?? true;
     return isValid && requiredFieldsHaveValues;
   }, [isValid, requiredFields]);
@@ -649,42 +554,11 @@ function useEventEmitter() {
   };
 }
 
-// src/utils/functions.ts
-var getFormErrorObject = (formValues) => {
-  return {};
-};
-
-// 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_react2 = 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 import_react_better_core2 = require("react-better-core");
+var import_jsx_runtime = require("react/jsx-runtime");
 var touchableHighlightStyleMoveToContent = [
   "width",
   "backgroundColor",
@@ -736,8 +610,8 @@ var ViewComponent = function View({
   children,
   ...props
 }) {
-  const theme2 = (0, import_react_better_core3.useTheme)();
-  const style = (0, import_react3.useMemo)(
+  const theme2 = (0, import_react_better_core2.useTheme)();
+  const style = (0, import_react2.useMemo)(
     () => ({
       flexDirection: isRow ? "row" : "column",
       ...props,
@@ -750,7 +624,7 @@ var ViewComponent = function View({
     }),
     [isRow, props]
   );
-  const touchableHighlightStyle = (0, import_react3.useMemo)(
+  const touchableHighlightStyle = (0, import_react2.useMemo)(
     () => ({
       ...style,
       ...touchableHighlightStyleMoveToContent.reduce((previousValue, currentValue) => {
@@ -763,21 +637,21 @@ var ViewComponent = function View({
     }),
     [style]
   );
-  const touchableHighlightContentProps = (0, import_react3.useMemo)(
+  const touchableHighlightContentProps = (0, import_react2.useMemo)(
     () => touchableHighlightStyleMoveToContent.reduce((previousValue, currentValue) => {
       previousValue[currentValue] = props[currentValue];
       return previousValue;
     }, {}),
     [props]
   );
-  const touchableNativeFeedbackHolderStyle = (0, import_react3.useMemo)(
+  const touchableNativeFeedbackHolderStyle = (0, import_react2.useMemo)(
     () => touchableNativeFeedbackStyleMoveToHolder.reduce((previousValue, currentValue) => {
       previousValue[currentValue] = props[currentValue];
       return previousValue;
     }, {}),
     [props]
   );
-  const touchableNativeFeedbackContentStyle = (0, import_react3.useMemo)(
+  const touchableNativeFeedbackContentStyle = (0, import_react2.useMemo)(
     () => ({
       ...style,
       ...touchableNativeFeedbackStyleMoveToHolder.reduce(
@@ -792,7 +666,7 @@ var ViewComponent = function View({
     }),
     [style]
   );
-  const pressEvents = (0, import_react3.useMemo)(
+  const pressEvents = (0, import_react2.useMemo)(
     () => !disabled ? {
       onPress: (event) => {
         onPress?.(event);
@@ -806,7 +680,7 @@ var ViewComponent = function View({
   );
   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)(
+  return isPressable ? pressType === "opacity" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native2.TouchableOpacity,
     {
       style,
@@ -816,7 +690,7 @@ var ViewComponent = function View({
       ...props,
       children
     }
-  ) : pressType === "highlight" ? import_react_native2.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  ) : pressType === "highlight" ? import_react_native2.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native2.TouchableHighlight,
     {
       activeOpacity: pressStrength2,
@@ -824,7 +698,7 @@ var ViewComponent = function View({
       style: touchableHighlightStyle,
       ...pressEvents,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         ViewComponent,
         {
           width: "100%",
@@ -839,7 +713,7 @@ var ViewComponent = function View({
         }
       )
     }
-  ) : import_react_native2.Platform.OS === "android" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  ) : import_react_native2.Platform.OS === "android" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ViewComponent,
     {
       ...touchableNativeFeedbackHolderStyle,
@@ -851,7 +725,7 @@ var ViewComponent = function View({
       boxShadow: androidBoxShadow,
       overflow: "hidden",
       pointerEvents: "box-none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_native2.TouchableNativeFeedback,
         {
           ...pressEvents,
@@ -862,15 +736,15 @@ var ViewComponent = function View({
           ),
           useForeground: true,
           touchSoundDisabled: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ViewComponent, { flex: 1, ...touchableNativeFeedbackContentStyle, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.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 });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime.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)(
+  const theme2 = (0, import_react_better_core2.useTheme)();
+  const shadowProps = (0, import_react2.useMemo)(
     () => withShadow ? {
       shadowOpacity: 0.2,
       shadowOffsetHeight: 10,
@@ -879,7 +753,7 @@ ViewComponent.box = function Box({ withShadow, ...props }) {
     } : {},
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ViewComponent,
     {
       width: "100%",
@@ -894,18 +768,52 @@ ViewComponent.box = function Box({ withShadow, ...props }) {
     }
   );
 };
-var View2 = (0, import_react3.memo)(ViewComponent);
+var View2 = (0, import_react2.memo)(ViewComponent);
 View2.box = ViewComponent.box;
 var View_default = View2;
 
+// src/components/alerts/Alert.tsx
+var import_react10 = require("react");
+var import_react_better_core9 = require("react-better-core");
+
+// src/plugins/alerts.ts
+var defaultAlertsPluginOptions = {
+  align: "right",
+  defaultDuration: "auto",
+  defaultDisplay: {},
+  withCloseButton: true
+};
+var alertsPlugin = (options) => ({
+  name: "alerts",
+  initialize: () => {
+  },
+  getConfig: () => ({
+    ...defaultAlertsPluginOptions,
+    ...options
+  })
+});
+
+// src/plugins/asyncStorage.ts
+var defaultAsyncStoragePluginOptions = {};
+var asyncStoragePlugin = (options) => ({
+  name: "asyncStorage",
+  initialize: () => {
+    console.log("asyncStorage plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultAsyncStoragePluginOptions,
+    ...options
+  })
+});
+
 // src/components/Text.tsx
-var import_react4 = require("react");
+var import_react3 = 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 import_react_better_core3 = require("react-better-core");
+var import_jsx_runtime2 = 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)(
+  const theme2 = (0, import_react_better_core3.useTheme)();
+  const style = (0, import_react3.useMemo)(
     () => ({
       fontSize: 16,
       color: theme2.colors.textPrimary,
@@ -913,27 +821,27 @@ var TextComponent = function Text({ selectionColor, children, ...props }) {
     }),
     [theme2, props]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { selectionColor: selectionColor ?? theme2.colors.primary, style, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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 });
+  const theme2 = (0, import_react_better_core3.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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 });
+  const theme2 = (0, import_react_better_core3.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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 });
+  const theme2 = (0, import_react_better_core3.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme2.colors.textSecondary, ...props });
 };
-var Text2 = (0, import_react4.memo)(TextComponent);
+var Text2 = (0, import_react3.memo)(TextComponent);
 Text2.title = TextComponent.title;
 Text2.subtitle = TextComponent.subtitle;
 Text2.body = TextComponent.body;
@@ -941,75 +849,175 @@ 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/Icon.tsx
+var import_react4 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_svg = require("react-native-svg");
+var import_react_better_core5 = require("react-better-core");
+var import_expo_symbols = require("expo-symbols");
 
-// 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
-      }
+// src/utils/variableFunctions.ts
+var import_react_better_core4 = require("react-better-core");
+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 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]
+  }
+  return value !== void 0;
+};
+var checkBetterComponentsContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterComponentsProvider>\`. Make sure to add one at the root of your component tree.`
     );
-    const transformOrigin = (0, import_react5.useMemo)(
-      () => transformOriginX !== void 0 || transformOriginY !== void 0 ? {
-        x: transformOriginX ?? 0,
-        y: transformOriginY ?? 0
-      } : void 0,
-      [transformOriginX, transformOriginY]
+  }
+  return value !== void 0;
+};
+var alertControls = {
+  createAlert: (alert) => {
+    if (!checkBetterComponentsContextValue(externalBetterComponentsContextValue, "alertControls.createAlert"))
+      return void 0;
+    const readyAlert = {
+      id: (0, import_react_better_core4.generateRandomString)(36),
+      ...alert
+    };
+    externalBetterComponentsContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
+    return readyAlert;
+  },
+  removeAlert: (alertId) => {
+    if (!checkBetterComponentsContextValue(externalBetterComponentsContextValue, "alertControls.removeAlert"))
+      return;
+    externalBetterComponentsContextValue.setAlerts(
+      (oldValue) => oldValue.filter((alert) => alert.id !== alertId)
     );
-    const content = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_motion.Motion.Text,
-      {
-        style: initialProps.style,
+  }
+};
+var pressStrength = () => {
+  if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "pressStrength")) return void 0;
+  return {
+    p05: externalBetterCoreContextValue.colorTheme === "dark" ? 0.85 : 0.95,
+    p1: externalBetterCoreContextValue.colorTheme === "dark" ? 0.6 : 0.8,
+    p2: externalBetterCoreContextValue.colorTheme === "dark" ? 0.5 : 0.7,
+    p3: externalBetterCoreContextValue.colorTheme === "dark" ? 0.4 : 0.6
+  };
+};
+
+// src/components/Icon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react5 = require("react");
+function Icon({ name, nameIOS, size = 16, color, ...props }) {
+  const theme2 = (0, import_react_better_core5.useTheme)();
+  const { icons: icons2 } = (0, import_react_better_core5.useBetterCoreContext)();
+  const svgColor = color ?? theme2.colors.textPrimary;
+  (0, import_react4.useEffect)(() => {
+    if (!icons2[name.toString()])
+      console.warn(
+        `The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterComponentsProvider>\` config value prop.`
+      );
+  }, [icons2, name]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    View_default,
+    {
+      width: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingHorizontal?.toString() ?? "0") ?? 0),
+      height: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingVertical?.toString() ?? "0") ?? 0),
+      alignItems: "center",
+      justifyContent: "center",
+      pressType: "opacity",
+      pressStrength: pressStrength().p2,
+      ...props,
+      children: import_react_native4.Platform.OS === "ios" && nameIOS ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_expo_symbols.SymbolView, { name: nameIOS, tintColor: svgColor, size: size * 1.12 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native_svg.Svg,
+        {
+          width: size,
+          height: size,
+          viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
+          fill: "none",
+          children: icons2[name.toString()]?.paths.map(({ type, ...path }) => /* @__PURE__ */ (0, import_react5.createElement)(
+            import_react_native_svg.Path,
+            {
+              ...path,
+              fill: type === "fill" ? svgColor : void 0,
+              stroke: type === "stroke" ? svgColor : void 0,
+              key: path.d
+            }
+          ))
+        }
+      )
+    }
+  );
+}
+var Icon_default = (0, import_react4.memo)(Icon);
+
+// src/components/Button.tsx
+var import_react9 = require("react");
+var import_react_native7 = require("react-native");
+var import_react_better_core8 = require("react-better-core");
+
+// src/components/Animate.tsx
+var import_react6 = 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_react6.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_react6.useMemo)(
+      () => ({
+        type: "timing",
+        duration: defaultTransitionDuration,
+        ...transitionProps.withPrefixStyle
+      }),
+      [transitionProps.withPrefixStyle]
+    );
+    const transformOrigin = (0, import_react6.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_react6.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_react6.useMemo)(
+      () => ({
+        type: "timing",
+        duration: defaultTransitionDuration,
+        ...transitionProps.withPrefixStyle
+      }),
+      [transitionProps.withPrefixStyle]
+    );
+    const transformOrigin = (0, import_react6.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,
@@ -1024,16 +1032,16 @@ var Animate = {
 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_react7 = require("react");
+var import_react_native5 = require("react-native");
+var import_react_better_core6 = 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 }) });
+  const theme2 = (0, import_react_better_core6.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(View_default, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.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)();
+  const theme2 = (0, import_react_better_core6.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     View_default,
     {
@@ -1050,7 +1058,7 @@ LoaderComponent.box = function Box2({ text = "Loading...", size = "large", color
   );
 };
 LoaderComponent.text = function LoaderText({ text = "Loading...", size, color, ...props }) {
-  const theme2 = (0, import_react_better_core5.useTheme)();
+  const theme2 = (0, import_react_better_core6.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     View_default,
     {
@@ -1067,20 +1075,89 @@ LoaderComponent.text = function LoaderText({ text = "Loading...", size, color, .
     }
   );
 };
-var Loader2 = (0, import_react6.memo)(LoaderComponent);
+var Loader2 = (0, import_react7.memo)(LoaderComponent);
 Loader2.box = LoaderComponent.box;
 Loader2.text = LoaderComponent.text;
 var Loader_default = Loader2;
 
-// src/components/Button.tsx
+// src/components/Image.tsx
+var import_react8 = require("react");
+var import_react_better_core7 = require("react-better-core");
+var import_react_native6 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var ImageComponent = function Image({ name, source, withDevFittingMode, ...props }) {
+  const { assets: assets2 } = (0, import_react_better_core7.useBetterCoreContext)();
+  const style = (0, import_react8.useMemo)(
+    () => ({
+      width: 100,
+      height: 100,
+      ...withDevFittingMode ? {
+        borderWidth: 1,
+        borderColor: "#eb39f7"
+      } : {},
+      ...props
+    }),
+    [withDevFittingMode, props]
+  );
+  (0, import_react8.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_runtime6.jsx)(import_react_native6.Image, { source: name ? assets2[name.toString()] : source, style, ...props });
+};
+ImageComponent.profileImage = function ProfileImage({
+  size = 50,
+  letters,
+  color,
+  backgroundColor,
+  ...props
+}) {
+  const theme2 = (0, import_react_better_core7.useTheme)();
+  return letters ? /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: color ?? theme2.colors.textPrimary, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ImageComponent,
+    {
+      width: size,
+      height: size,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      objectFit: "cover",
+      ...props
+    }
+  );
+};
+var Image2 = (0, import_react8.memo)(ImageComponent);
+Image2.profileImage = ImageComponent.profileImage;
+var Image_default = Image2;
+
+// src/components/Button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ButtonComponent = function Button({
+  value,
   text,
   textFontSize = 16,
   textFontWeight = 700,
   textDecorationLine,
   textColor,
   icon,
+  iconIOS,
   iconPosition = "left",
   iconColor,
   iconSize,
@@ -1095,10 +1172,12 @@ var ButtonComponent = function Button({
   flex,
   alignSelf,
   disabled,
+  onPress,
+  onPressWithValue,
   ...props
 }) {
-  const theme2 = (0, import_react_better_core6.useTheme)();
-  const isLoadingLoader = (0, import_react_better_core6.useLoader)(loaderName);
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  const isLoadingLoader = (0, import_react_better_core8.useLoader)(loaderName);
   const isLoadingElement = isLoading || isLoadingLoader;
   const isDisabled = disabled || isLoadingElement;
   const lineHeight = 20;
@@ -1106,7 +1185,24 @@ var ButtonComponent = function Button({
   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)(
+  const onPressElement = (0, import_react9.useCallback)(
+    (event) => {
+      onPress?.(event);
+      onPressWithValue?.(value);
+    },
+    [onPress, onPressWithValue, value]
+  );
+  const iconComponent = icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(View_default, { height: 20, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Icon_default,
+    {
+      name: icon,
+      nameIOS: iconIOS,
+      color: iconColor ?? textColor ?? theme2.colors.base,
+      size: iconSize ?? textFontSize ?? 16
+    }
+  ) }) : void 0;
+  const imageComponent = image ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Image_default, { name: image, width: imageWidth ?? textFontSize ?? 16, height: imageHeight }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Animate_default.View,
     {
       position: "relative",
@@ -1114,12 +1210,12 @@ var ButtonComponent = function Button({
       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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         View_default,
         {
           position: "relative",
           width: !isSmall ? "100%" : void 0,
-          height: import_react_native5.Platform.OS === "android" ? buttonHeight : void 0,
+          height: import_react_native7.Platform.OS === "android" ? buttonHeight : void 0,
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: theme2.colors.primary,
@@ -1127,22 +1223,29 @@ var ButtonComponent = function Button({
           paddingVertical,
           paddingHorizontal,
           disabled: isDisabled,
+          onPress: onPressElement,
           ...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)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Animate_default.View, { initialOpacity: 1, animateOpacity: isLoadingElement ? 0 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(View_default, { isRow: true, alignItems: "center", justifyContent: "center", gap: theme2.styles.gap, children: [
+              iconPosition === "left" && iconComponent,
+              imagePosition === "left" && imageComponent,
+              text && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                Text_default,
+                {
+                  fontSize: textFontSize,
+                  fontWeight: textFontWeight,
+                  textDecorationLine,
+                  textDecorationColor: color,
+                  textAlign: "center",
+                  lineHeight,
+                  color,
+                  children: text
+                }
+              ),
+              iconPosition === "right" && iconComponent,
+              imagePosition === "right" && imageComponent
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Animate_default.View,
               {
                 position: "absolute",
@@ -1153,7 +1256,7 @@ var ButtonComponent = function Button({
                 justifyContent: "center",
                 initialOpacity: 0,
                 animateOpacity: isLoadingElement ? 1 : 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader_default, { color })
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loader_default, { color })
               }
             )
           ]
@@ -1161,54 +1264,374 @@ var ButtonComponent = function Button({
       )
     }
   );
-};
-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().p05,
-      animateOpacity: props.disabled ? 0.4 : 1,
-      ...props
-    }
+};
+ButtonComponent.secondary = function Secondary(props) {
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ButtonComponent,
+    {
+      backgroundColor: theme2.colors.backgroundContent,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      textColor: theme2.colors.textPrimary,
+      pressStrength: pressStrength().p05,
+      animateOpacity: props.disabled ? 0.4 : 1,
+      ...props
+    }
+  );
+};
+ButtonComponent.destructive = function Destructive(props) {
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonComponent, { backgroundColor: theme2.colors.error, ...props });
+};
+ButtonComponent.text = function ButtonText(props) {
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ButtonComponent,
+    {
+      width: "auto",
+      textFontWeight: 400,
+      textColor: theme2.colors.textPrimary,
+      textDecorationLine: "underline",
+      backgroundColor: "transparent",
+      paddingHorizontal: theme2.styles.space,
+      paddingVertical: theme2.styles.gap,
+      isSmall: true,
+      pressType: "opacity",
+      ...props
+    }
+  );
+};
+ButtonComponent.icon = function ButtonIcon({ size = 16, ...props }) {
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  const buttonSize = size + theme2.styles.space;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ButtonComponent,
+    {
+      width: buttonSize,
+      height: buttonSize,
+      textColor: theme2.colors.textPrimary,
+      backgroundColor: "transparent",
+      hitSlop: theme2.styles.gap / 2,
+      borderRadius: 999,
+      iconSize: size,
+      paddingVertical: 0,
+      paddingHorizontal: 0,
+      pressType: "opacity",
+      ...props
+    }
+  );
+};
+var Button2 = (0, import_react9.memo)(ButtonComponent);
+Button2.secondary = ButtonComponent.secondary;
+Button2.destructive = ButtonComponent.destructive;
+Button2.text = ButtonComponent.text;
+Button2.icon = ButtonComponent.icon;
+var Button_default = Button2;
+
+// src/components/alerts/Alert.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var getAlertDurationFromAuto = (duration, alert) => {
+  if (duration === "auto") {
+    const titleLength = alert.title?.length ?? 0;
+    const messageLength = alert.message?.length ?? 0;
+    return Math.max(defaultAlertDuration, (titleLength + messageLength) * 30);
+  }
+  return duration;
+};
+function Alert({ alert }) {
+  const theme2 = (0, import_react_better_core9.useTheme)();
+  const device = useDevice();
+  const alertControls2 = useAlertControls();
+  const alertsPlugin2 = usePlugin("alerts");
+  const pluginConfig = alertsPlugin2?.getConfig() ?? {};
+  const defaultAlertDurationNumber = getAlertDurationFromAuto(
+    alert.duration ?? pluginConfig.defaultDuration ?? defaultAlertsPluginOptions.defaultDuration,
+    alert
+  );
+  const defaultAlertDisplay = alert.display ?? pluginConfig.defaultDisplay?.[alert.type] ?? defaultAlertsPluginOptions.defaultDisplay[alert.type] ?? "default";
+  const calledOnCloseRef = (0, import_react10.useRef)(false);
+  const [isRemoved, setIsRemoved] = (0, import_react_better_core9.useBooleanState)();
+  const onPressCloseAlert = (0, import_react10.useCallback)(() => {
+    setIsRemoved.setTrue();
+    setTimeout(() => {
+      alertControls2.removeAlert(alert.id);
+      if (!calledOnCloseRef.current) {
+        alert.onClose?.(alert);
+        calledOnCloseRef.current = true;
+      }
+    }, defaultTransitionDuration);
+  }, [alert]);
+  const alertData = (0, import_react10.useMemo)(
+    () => ({
+      info: {
+        icon: "infoI",
+        iconIOS: "info",
+        backgroundColor: theme2.colors.info,
+        title: "Info"
+      },
+      success: {
+        icon: "check",
+        backgroundColor: theme2.colors.success,
+        title: "Success"
+      },
+      warning: {
+        icon: "warningTriangle",
+        backgroundColor: theme2.colors.warn,
+        title: "Warning"
+      },
+      error: {
+        icon: "XMark",
+        backgroundColor: theme2.colors.error,
+        title: "Error"
+      }
+    }),
+    [theme2]
+  );
+  (0, import_react10.useEffect)(() => {
+    const timeout = setTimeout(onPressCloseAlert, defaultAlertDurationNumber);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [onPressCloseAlert, defaultAlertDurationNumber]);
+  const iconSize = 16;
+  const iconPadding = (theme2.styles.space + theme2.styles.gap) / 2;
+  return defaultAlertDisplay === "prominent" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Animate_default.View,
+    {
+      maxWidth: "100%",
+      initialOpacity: 0,
+      animateOpacity: isRemoved ? 0 : 1,
+      initialX: 40,
+      animateX: isRemoved ? 40 : 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(View_default.box, { width: "auto", withShadow: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          View_default,
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: alertData[alert.type].backgroundColor,
+            borderRadius: 999,
+            padding: iconPadding,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Icon_default,
+              {
+                name: alertData[alert.type].icon,
+                nameIOS: alertData[alert.type].iconIOS,
+                size: iconSize,
+                color: alertData[alert.type].iconColor ?? theme2.colors.base
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          View_default,
+          {
+            maxWidth: device.windowDimensions.width - theme2.styles.space - theme2.styles.space - (iconPadding + iconSize + iconPadding) - theme2.styles.space - 60 - theme2.styles.space - theme2.styles.space - theme2.styles.space,
+            gap: theme2.styles.gap / 3,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { fontSize: 18, fontWeight: 700, children: alert.title ?? alertData[alert.type].title }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default.body, { children: alert.message })
+            ]
+          }
+        ),
+        pluginConfig.withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button_default.icon, { icon: "XMark", onPress: onPressCloseAlert })
+      ] }) })
+    }
+  );
+}
+var Alert_default = (0, import_react10.memo)(Alert);
+
+// src/components/alerts/AlertsHolder.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function AlertsHolder() {
+  const theme2 = (0, import_react_better_core10.useTheme)();
+  const device = useDevice();
+  const alertsPlugin2 = usePlugin("alerts");
+  const { alerts } = useBetterComponentsContextInternal();
+  const pluginConfig = alertsPlugin2?.getConfig() ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    View_default,
+    {
+      position: "absolute",
+      width: "100%",
+      top: device.safeArea.afterCalculations.top + theme2.styles.gap / 2,
+      left: 0,
+      gap: theme2.styles.gap,
+      alignItems: pluginConfig.align === "left" ? "flex-start" : pluginConfig.align === "center" ? "center" : pluginConfig.align === "right" ? "flex-end" : void 0,
+      paddingHorizontal: theme2.styles.space,
+      pointerEvents: "box-none",
+      zIndex: 1e3,
+      children: alerts.map((alert) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Alert_default, { alert }, alert.id))
+    }
+  );
+}
+var AlertsHolder_default = (0, import_react11.memo)(AlertsHolder);
+
+// src/components/BetterComponentsProvider.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var betterComponentsContext = (0, import_react12.createContext)(void 0);
+var externalBetterCoreContextValue;
+var externalBetterComponentsContextValue;
+var useBetterComponentsContext = () => {
+  const coreContext = (0, import_react_better_core11.useBetterCoreContext)();
+  const context = (0, import_react12.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
+  };
+};
+var useBetterComponentsContextInternal = () => {
+  const context = (0, import_react12.useContext)(betterComponentsContext);
+  if (context === void 0)
+    throw new Error(
+      "`useBetterComponentsContextInternal()` must be used within a `<BetterComponentsProvider>`. Make sure to add one at the root of your component tree."
+    );
+  return context;
+};
+var useAlertControls = () => {
+  const context = (0, import_react12.useContext)(betterComponentsContext);
+  if (context === void 0)
+    throw new Error(
+      "`useAlertControls()` must be used within a `<BetterComponentsProvider>`. Make sure to add one at the root of your component tree."
+    );
+  const createAlert = (0, import_react12.useCallback)((alert) => {
+    const readyAlert = {
+      id: (0, import_react_better_core11.generateRandomString)(36),
+      ...alert
+    };
+    context.setAlerts((oldValue) => [...oldValue, readyAlert]);
+    return readyAlert;
+  }, []);
+  const removeAlert = (0, import_react12.useCallback)((alertId) => {
+    context.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
+  }, []);
+  return {
+    createAlert,
+    removeAlert
+  };
+};
+var usePlugin = (pluginName) => {
+  const context = (0, import_react12.useContext)(betterComponentsContext);
+  if (context === void 0) {
+    throw new Error(
+      "`usePlugin()` must be used within a `<BetterComponentsProvider>`. Make sure to add one at the root of your component tree."
+    );
+  }
+  return (0, import_react12.useMemo)(
+    () => context.plugins.find((plugin) => plugin.name === pluginName),
+    [context.plugins, pluginName]
+  );
+};
+function BetterComponentsProviderInternalContent({ children }) {
+  const alertsPlugin2 = usePlugin("alerts");
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    children,
+    alertsPlugin2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AlertsHolder_default, {})
+  ] });
+}
+function BetterComponentsProviderInternal({
+  config,
+  plugins,
+  children
+}) {
+  const betterCoreContext = (0, import_react_better_core11.useBetterCoreContext)();
+  const [alerts, setAlerts] = (0, import_react12.useState)([]);
+  const readyConfig = (0, import_react12.useMemo)(
+    () => ({
+      app: {
+        ...appConfig,
+        ...config?.app
+      },
+      alerts,
+      setAlerts,
+      plugins: plugins ?? [],
+      componentsState: {}
+    }),
+    [config, alerts, plugins]
+  );
+  (0, import_react12.useEffect)(() => {
+    if (!plugins) return;
+    plugins.forEach((plugin) => {
+      plugin.initialize?.();
+    });
+  }, []);
+  externalBetterCoreContextValue = betterCoreContext;
+  externalBetterComponentsContextValue = readyConfig;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(betterComponentsContext.Provider, { value: readyConfig, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BetterComponentsProviderInternalContent, { children }) });
+}
+function BetterComponentsProvider({ config, ...props }) {
+  const coreConfig = (0, import_react12.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]
   );
-};
-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
-    }
+  const componentsConfig = (0, import_react12.useMemo)(
+    () => ({
+      app: config?.app
+    }),
+    [config]
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_better_core11.BetterCoreProvider, { config: coreConfig, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BetterComponentsProviderInternal, { config: componentsConfig, ...props }) });
+}
+var BetterComponentsProvider_default = (0, import_react12.memo)(BetterComponentsProvider);
+
+// src/utils/functions.ts
+var getFormErrorObject = (formValues) => {
+  return {};
 };
-var Button2 = (0, import_react7.memo)(ButtonComponent);
-Button2.secondary = ButtonComponent.secondary;
-Button2.destructive = ButtonComponent.destructive;
-Button2.text = ButtonComponent.text;
-var Button_default = Button2;
+
+// 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/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 import_react13 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_better_core12 = require("react-better-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ScreenHolderComponent = ({
   noScroll,
   noSideSpace,
@@ -1225,17 +1648,17 @@ var ScreenHolderComponent = ({
   withNoHeader,
   children
 }) => {
-  const theme2 = (0, import_react_better_core7.useTheme)();
+  const theme2 = (0, import_react_better_core12.useTheme)();
   const device = useDevice();
   const keyboard = useKeyboard();
-  const [isRefreshing, setIsRefreshing] = (0, import_react_better_core7.useBooleanState)();
-  const keyboardAvoidingViewStyle = (0, import_react8.useMemo)(
+  const [isRefreshing, setIsRefreshing] = (0, import_react_better_core12.useBooleanState)();
+  const keyboardAvoidingViewStyle = (0, import_react13.useMemo)(
     () => ({
       flex: 1
     }),
     []
   );
-  const onRefreshElement = (0, import_react8.useCallback)(() => {
+  const onRefreshElement = (0, import_react13.useCallback)(() => {
     setIsRefreshing.setTrue();
     onRefresh?.();
     setTimeout(() => {
@@ -1243,36 +1666,36 @@ var ScreenHolderComponent = ({
       onRefreshEnd?.();
     }, refreshTimeout * 1e3);
   }, [onRefresh, onRefreshEnd, refreshTimeout]);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime11.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),
+      paddingBottom: import_react_native8.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,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    import_react_native8.KeyboardAvoidingView,
     {
       style: keyboardAvoidingViewStyle,
-      keyboardVerticalOffset: keyboardVerticalOffset ?? (withNoHeader ? import_react_native6.Platform.OS === "ios" ? 0 : theme2.styles.gap : 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",
+      keyboardVerticalOffset: keyboardVerticalOffset ?? (withNoHeader ? import_react_native8.Platform.OS === "ios" ? 0 : theme2.styles.gap : keepFooterOnKeyboardOpened ? import_react_native8.Platform.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0),
+      behavior: import_react_native8.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,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native8.ScrollView,
           {
-            refreshControl: withRefresh ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            refreshControl: withRefresh ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.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 }) : !withNoHeader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        keepFooterOnKeyboardOpened || (import_react_native8.Platform.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(View_default, { children: footer }) : !withNoHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           View_default,
           {
             width: "100%",
-            height: device.safeArea.afterCalculations.bottom + (import_react_native6.Platform.OS === "android" ? theme2.styles.gap : 0)
+            height: device.safeArea.afterCalculations.bottom + (import_react_native8.Platform.OS === "android" ? theme2.styles.gap : 0)
           }
         )
       ]
@@ -1286,149 +1709,31 @@ ScreenHolderComponent.footer = function Footer({
   withNoHeader,
   children
 }) {
-  const theme2 = (0, import_react_better_core7.useTheme)();
+  const theme2 = (0, import_react_better_core12.useTheme)();
   const device = useDevice();
   const keyboard = useKeyboard();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     View_default,
     {
       backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
       paddingHorizontal: !noSideSpace ? theme2.styles.space : void 0,
       paddingTop: theme2.styles.gap,
-      paddingBottom: (import_react_native6.Platform.OS === "ios" ? keyboard.willOpen : keyboard.isOpened) && withNoHeader ? theme2.styles.gap : insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : void 0,
+      paddingBottom: (import_react_native8.Platform.OS === "ios" ? keyboard.willOpen : keyboard.isOpened) && withNoHeader ? theme2.styles.gap : insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : void 0,
       children
     }
   );
 };
-var ScreenHolder = (0, import_react8.memo)(ScreenHolderComponent);
+var ScreenHolder = (0, import_react13.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,
-  color,
-  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, color: color ?? theme2.colors.textPrimary, 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/Icon.tsx
-var import_react10 = require("react");
-var import_react_native8 = require("react-native");
-var import_react_native_svg = require("react-native-svg");
-var import_react_better_core9 = require("react-better-core");
-var import_expo_symbols = require("expo-symbols");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var import_react11 = require("react");
-function Icon({ name, nameIOS, size = 16, color, ...props }) {
-  const theme2 = (0, import_react_better_core9.useTheme)();
-  const { icons: icons2 } = (0, import_react_better_core9.useBetterCoreContext)();
-  const svgColor = color ?? theme2.colors.textPrimary;
-  (0, import_react10.useEffect)(() => {
-    if (!icons2[name.toString()])
-      console.warn(
-        `The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterComponentsProvider>\` config value prop.`
-      );
-  }, [icons2, name]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    View_default,
-    {
-      width: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingHorizontal?.toString() ?? "0") ?? 0),
-      height: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingVertical?.toString() ?? "0") ?? 0),
-      alignItems: "center",
-      justifyContent: "center",
-      pressType: "opacity",
-      pressStrength: pressStrength().p2,
-      ...props,
-      children: import_react_native8.Platform.OS === "ios" && nameIOS ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_symbols.SymbolView, { name: nameIOS, tintColor: svgColor, size }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_react_native_svg.Svg,
-        {
-          width: size,
-          height: size,
-          viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
-          fill: "none",
-          children: icons2[name.toString()]?.paths.map(({ type, ...path }) => /* @__PURE__ */ (0, import_react11.createElement)(
-            import_react_native_svg.Path,
-            {
-              ...path,
-              fill: type === "fill" ? svgColor : void 0,
-              stroke: type === "stroke" ? svgColor : void 0,
-              key: path.d
-            }
-          ))
-        }
-      )
-    }
-  );
-}
-var Icon_default = (0, import_react10.memo)(Icon);
-
 // src/components/InputField.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_react_native9 = require("react-native");
 var import_datetimepicker = __toESM(require("@react-native-community/datetimepicker"));
-var import_react_better_core10 = require("react-better-core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var InputFieldComponent = (0, import_react12.forwardRef)(
+var import_react_better_core13 = require("react-better-core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var InputFieldComponent = (0, import_react14.forwardRef)(
   ({
     flex,
     placeholder,
@@ -1479,12 +1784,12 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     onPressEnter,
     ...props
   }, ref) => {
-    const theme2 = (0, import_react_better_core10.useTheme)();
-    const { colorTheme } = (0, import_react_better_core10.useBetterCoreContext)();
-    const textInputRef = (0, import_react12.useRef)(null);
-    const [internalValue, setInternalValue] = (0, import_react12.useState)(value?.toString() || defaultValue || "");
-    const [internalDateValue, setInternalDateValue] = (0, import_react12.useState)();
-    const [isFocused, setIsFocused] = (0, import_react_better_core10.useBooleanState)();
+    const theme2 = (0, import_react_better_core13.useTheme)();
+    const { colorTheme } = (0, import_react_better_core13.useBetterCoreContext)();
+    const textInputRef = (0, import_react14.useRef)(null);
+    const [internalValue, setInternalValue] = (0, import_react14.useState)(value?.toString() || defaultValue || "");
+    const [internalDateValue, setInternalDateValue] = (0, import_react14.useState)();
+    const [isFocused, setIsFocused] = (0, import_react_better_core13.useBooleanState)();
     const isIOSDateTime = import_react_native9.Platform.OS === "ios" && (type === "date" || type === "time");
     const iconSize = 16;
     const iconPadding = onPressRightIcon ? theme2.styles.gap : 0;
@@ -1493,14 +1798,14 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
     const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
     const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (import_react_native9.Platform.OS === "android" ? 2 : 0);
-    const onChangeRNDateTimePicker = (0, import_react12.useCallback)(
+    const onChangeRNDateTimePicker = (0, import_react14.useCallback)(
       (event, data) => {
         setInternalDateValue(data);
         onChange?.(data?.toISOString() ?? "");
       },
       [onChange]
     );
-    const onPressInputField = (0, import_react12.useCallback)(
+    const onPressInputField = (0, import_react14.useCallback)(
       (event) => {
         onPress?.(event);
         if (type === "date" || type === "time") {
@@ -1528,22 +1833,22 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
       },
       [onPress, type, internalDateValue, onChangeRNDateTimePicker]
     );
-    const onFocusElement = (0, import_react12.useCallback)((event) => {
+    const onFocusElement = (0, import_react14.useCallback)((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
     }, []);
-    const onBlurElement = (0, import_react12.useCallback)((event) => {
+    const onBlurElement = (0, import_react14.useCallback)((event) => {
       setIsFocused.setFalse();
       onBlur?.(event);
     }, []);
-    const onChangeText = (0, import_react12.useCallback)(
+    const onChangeText = (0, import_react14.useCallback)(
       (text) => {
         setInternalValue(text);
         onChange?.(text);
       },
       [onChange]
     );
-    const textInputStyle = (0, import_react12.useMemo)(
+    const textInputStyle = (0, import_react14.useMemo)(
       () => ({
         flex: 1,
         fontSize,
@@ -1568,14 +1873,14 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
         rightIcon
       ]
     );
-    const rnDateTimePickerStyle = (0, import_react12.useMemo)(
+    const rnDateTimePickerStyle = (0, import_react14.useMemo)(
       () => ({
         flex: iOSDateTimeFullSize ? 1 : void 0,
         marginLeft: -8 + (iOSDateTimeFullSize ? 0 : theme2.styles.space)
       }),
       [iOSDateTimeFullSize]
     );
-    (0, import_react12.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (value === void 0) return;
       setInternalValue(value.toString());
       try {
@@ -1583,7 +1888,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
       } catch (error) {
       }
     }, [value]);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (type !== "date" && type !== "time") return;
       const date = internalDateValue?.toISOString().split("T")[0] ?? "";
       const hours = internalDateValue ? internalDateValue.getHours().toString() : "00";
@@ -1592,7 +1897,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
         type === "date" ? date : internalDateValue ? `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}` : ""
       );
     }, [internalDateValue]);
-    (0, import_react12.useImperativeHandle)(
+    (0, import_react14.useImperativeHandle)(
       ref,
       () => {
         return textInputRef.current;
@@ -1600,12 +1905,12 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
       []
     );
     const withPressInputField = !!onPress || type === "date" || type === "time";
-    const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core10.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core10.lightenColor)(theme2.colors.backgroundContent, 0.1);
-    const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
+    const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core13.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core13.lightenColor)(theme2.colors.backgroundContent, 0.1);
+    const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
+      required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       Animate_default.View,
       {
         flex,
@@ -1615,8 +1920,8 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
         ...props,
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
+            prefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               View_default,
               {
                 isRow: true,
@@ -1631,7 +1936,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
                 onPress: onPressPrefix,
-                children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   Text_default,
                   {
                     fontWeight: 700,
@@ -1642,9 +1947,9 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                 ) : prefix
               }
             ),
-            isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
               !iOSDateTimeFullSize ? labelComponent : void 0,
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 import_datetimepicker.default,
                 {
                   value: internalDateValue ?? /* @__PURE__ */ new Date(),
@@ -1656,7 +1961,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                   onChange: onChangeRNDateTimePicker
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               View_default,
               {
                 flex: 1,
@@ -1667,7 +1972,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                 borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 pressStrength: 1,
                 onPress: import_react_native9.Platform.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                   Animate_default.View,
                   {
                     position: "relative",
@@ -1683,7 +1988,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                     animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
                     overflow: "hidden",
                     children: [
-                      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         Icon_default,
                         {
                           position: "absolute",
@@ -1696,7 +2001,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                           onPress: onPressLeftIcon
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         import_react_native9.TextInput,
                         {
                           style: textInputStyle,
@@ -1729,7 +2034,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                           ref: textInputRef
                         }
                       ),
-                      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         Icon_default,
                         {
                           position: "absolute",
@@ -1747,7 +2052,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                 )
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               View_default,
               {
                 isRow: true,
@@ -1761,7 +2066,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
                 onPress: onPressSuffix,
-                children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   Text_default,
                   {
                     fontWeight: 700,
@@ -1773,7 +2078,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
               }
             )
           ] }),
-          infoMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          infoMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -1785,7 +2090,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
               children: infoMessage
             }
           ),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -1802,8 +2107,8 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     );
   }
 );
-InputFieldComponent.email = (0, import_react12.forwardRef)(function Email(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+InputFieldComponent.email = (0, import_react14.forwardRef)(function Email(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     InputFieldComponent,
     {
       placeholder: "your@email.here",
@@ -1816,21 +2121,21 @@ InputFieldComponent.email = (0, import_react12.forwardRef)(function Email(props,
     }
   );
 });
-InputFieldComponent.password = (0, import_react12.forwardRef)(function Password(props, ref) {
-  const inputFieldRef = (0, import_react12.useRef)(null);
-  const [showPassword, setShowPassword] = (0, import_react_better_core10.useBooleanState)();
-  const onPressEye = (0, import_react12.useCallback)(() => {
+InputFieldComponent.password = (0, import_react14.forwardRef)(function Password(props, ref) {
+  const inputFieldRef = (0, import_react14.useRef)(null);
+  const [showPassword, setShowPassword] = (0, import_react_better_core13.useBooleanState)();
+  const onPressEye = (0, import_react14.useCallback)(() => {
     setShowPassword.toggle();
     inputFieldRef.current?.focus();
   }, []);
-  (0, import_react12.useImperativeHandle)(
+  (0, import_react14.useImperativeHandle)(
     ref,
     () => {
       return inputFieldRef.current;
     },
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     InputFieldComponent,
     {
       secureTextEntry: !showPassword,
@@ -1845,12 +2150,12 @@ InputFieldComponent.password = (0, import_react12.forwardRef)(function Password(
     }
   );
 });
-InputFieldComponent.search = (0, import_react12.forwardRef)(function Search(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
+InputFieldComponent.search = (0, import_react14.forwardRef)(function Search(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
 });
-InputFieldComponent.code = (0, import_react12.forwardRef)(function Password2({ isSmall, ...props }, ref) {
-  const theme2 = (0, import_react_better_core10.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+InputFieldComponent.code = (0, import_react14.forwardRef)(function Password2({ isSmall, ...props }, ref) {
+  const theme2 = (0, import_react_better_core13.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     InputFieldComponent,
     {
       flex: 1,
@@ -1865,7 +2170,7 @@ InputFieldComponent.code = (0, import_react12.forwardRef)(function Password2({ i
     }
   );
 });
-var InputField = (0, import_react12.memo)(InputFieldComponent);
+var InputField = (0, import_react14.memo)(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
 InputField.search = InputFieldComponent.search;
@@ -1873,32 +2178,32 @@ InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/Switch.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_react_native10 = require("react-native");
-var import_react_better_core11 = require("react-better-core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react_better_core14 = require("react-better-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
-  const theme2 = (0, import_react_better_core11.useTheme)();
-  const [enabled, setEnabled] = (0, import_react_better_core11.useBooleanState)(isEnabled ?? defaultIsEnabled);
-  const onPressElement = (0, import_react13.useCallback)(() => {
+  const theme2 = (0, import_react_better_core14.useTheme)();
+  const [enabled, setEnabled] = (0, import_react_better_core14.useBooleanState)(isEnabled ?? defaultIsEnabled);
+  const onPressElement = (0, import_react15.useCallback)(() => {
     onChange?.(!enabled);
     setEnabled.toggle();
   }, [onChange, enabled]);
-  const trackColor = (0, import_react13.useMemo)(
+  const trackColor = (0, import_react15.useMemo)(
     () => ({
       false: theme2.colors.border,
       true: theme2.colors.primary
     }),
     [theme2.colors]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (isEnabled === void 0) return;
     setEnabled.setState(isEnabled);
   }, [isEnabled]);
   const ballSize = 26;
   const ballGap = 3;
   const holderWidth = ballSize * 2.1;
-  return import_react_native10.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return import_react_native10.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_native10.Switch,
     {
       trackColor,
@@ -1907,7 +2212,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       value: enabled,
       disabled
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     View_default,
     {
       width: holderWidth,
@@ -1915,7 +2220,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       pressStrength: pressStrength().p05,
       disabled,
       onPress: !disabled ? onPressElement : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Animate_default.View,
         {
           width: "100%",
@@ -1925,7 +2230,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
           animateOpacity: disabled ? 0.6 : 1,
           initialBackgroundColor: theme2.colors.border,
           animateBackgroundColor: enabled ? theme2.colors.primary : theme2.colors.border,
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Animate_default.View,
             {
               width: ballSize,
@@ -1942,16 +2247,16 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
     }
   );
 }
-var Switch_default = (0, import_react13.memo)(Switch);
+var Switch_default = (0, import_react15.memo)(Switch);
 
 // src/components/StatusBar.tsx
-var import_react14 = require("react");
-var import_react_better_core12 = require("react-better-core");
+var import_react16 = require("react");
+var import_react_better_core15 = require("react-better-core");
 var import_react_native11 = require("react-native");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
-  const theme2 = (0, import_react_better_core12.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const theme2 = (0, import_react_better_core15.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_react_native11.StatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
@@ -1960,29 +2265,31 @@ function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarSty
     }
   );
 }
-var StatusBar_default = (0, import_react14.memo)(StatusBar);
+var StatusBar_default = (0, import_react16.memo)(StatusBar);
 
 // src/components/ListItem.tsx
-var import_react15 = require("react");
-var import_react_better_core13 = require("react-better-core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_react_better_core16 = require("react-better-core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ListItem({
   icon,
   iconIOS,
   title,
   description,
+  descriptionSelectable,
   rightElement,
   backgroundColor,
   insideScreenHolder,
   onPress,
-  rightArrowValue,
+  rightValue,
+  rightValueSelectable,
   switchIsEnabled,
   switchOnChange
 }) {
-  const theme2 = (0, import_react_better_core13.useTheme)();
+  const theme2 = (0, import_react_better_core16.useTheme)();
   const device = useDevice();
   const sideSpace = theme2.styles.space;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     View_default,
     {
       width: insideScreenHolder ? device.windowDimensions.width : "100%",
@@ -1992,41 +2299,28 @@ function ListItem({
       paddingHorizontal: sideSpace,
       pressStrength: pressStrength().p05,
       onPress,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { flex: 1, children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default.body, { children: description })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default.body, { selectable: descriptionSelectable, children: description })
         ] }) }),
-        rightElement ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: rightElement === "arrow" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
-          rightArrowValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontSize: 14, fontWeight: 700, children: rightArrowValue }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        rightElement ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
+          rightElement === "arrow" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Icon_default,
             {
               name: "chevronRight",
               nameIOS: "chevron.right",
-              color: rightArrowValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
+              color: rightValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
             }
           )
-        ] }) : rightElement === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : void 0 }) : void 0
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : void 0 }) : void 0
       ] })
     }
   );
 }
-var ListItem_default = (0, import_react15.memo)(ListItem);
-
-// src/plugins/asyncStorage.ts
-var defaultAsyncStoragePluginOptions = {};
-var asyncStoragePlugin = (options) => ({
-  name: "asyncStorage",
-  initialize: () => {
-    console.log("asyncStorage plugin initialized");
-  },
-  getConfig: () => ({
-    ...defaultAsyncStoragePluginOptions,
-    ...options
-  })
-});
+var ListItem_default = (0, import_react17.memo)(ListItem);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Animate,
@@ -2042,10 +2336,13 @@ var asyncStoragePlugin = (options) => ({
   Switch,
   Text,
   View,
+  alertControls,
+  alertsPlugin,
   asyncStoragePlugin,
   colorThemeControls,
   countries,
   darkenColor,
+  defaultAlertsPluginOptions,
   defaultAsyncStoragePluginOptions,
   desaturateColor,
   eventPreventDefault,
@@ -2060,6 +2357,7 @@ var asyncStoragePlugin = (options) => ({
   loaderControls,
   pressStrength,
   saturateColor,
+  useAlertControls,
   useBetterComponentsContext,
   useBooleanState,
   useDebounceState,