@sikka/hawa 0.47.0-next → 0.48.1-next

package/dist/blocks/index.mjs

@@ -17,7 +17,7 @@ import {
   TabsList,
   TabsTrigger,
   Textarea
-} from "../chunk-342KIV4R.mjs";
+} from "../chunk-GBLWUEYN.mjs";
 import {
   getHotkeyHandler
 } from "../chunk-WL7C2A5D.mjs";
@@ -483,6 +483,12 @@ var LoginForm = ({
 import React3, { useState as useState2 } from "react";
 import { Controller as Controller2, FormProvider, useForm as useForm2 } from "react-hook-form";
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
+import {
+  isPossiblePhoneNumber as isPossiblePhoneNumber2,
+  isValidPhoneNumber as isValidPhoneNumber2,
+  parsePhoneNumber as parsePhoneNumber2,
+  validatePhoneNumberLength as validatePhoneNumberLength2
+} from "libphonenumber-js";
 import * as z2 from "zod";
 var RegisterForm = ({
   texts,
@@ -490,10 +496,15 @@ var RegisterForm = ({
   minPasswordLength = 8,
   showTermsOption = false,
   showNewsletterOption = false,
+  registerTypes,
   ...props
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const [passwordVisible, setPasswordVisible] = useState2(false);
+  const [selectedRegisterType, setSelectedRegisterType] = useState2({
+    value: ((_a = registerTypes == null ? void 0 : registerTypes[0]) == null ? void 0 : _a.value) || "password",
+    label: ((_b = registerTypes == null ? void 0 : registerTypes[0]) == null ? void 0 : _b.label) || "Password"
+  });
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
     continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -505,8 +516,12 @@ var RegisterForm = ({
   };
   const methods = useForm2();
   let fieldSchemas = {};
+  const hasPhoneType = registerTypes == null ? void 0 : registerTypes.some((type) => type.value === "phone");
+  if (hasPhoneType && selectedRegisterType.value === "phone") {
+    registerFields = ["phone"];
+  }
   registerFields.forEach((field) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
     switch (field) {
       case "fullname":
         fieldSchemas["fullName"] = z2.string().optional();
@@ -531,347 +546,502 @@ var RegisterForm = ({
           { message: ((_g2 = texts == null ? void 0 : texts.username) == null ? void 0 : _g2.invalid) || "Invalid username" }
         );
         break;
+      case "phone":
+        fieldSchemas["phone"] = z2.string({
+          required_error: ((_h2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _h2.required) || "Phone Number Required"
+        }).refine(
+          (value) => {
+            let isPhoneValid = isPossiblePhoneNumber2(value) && isValidPhoneNumber2(value) && validatePhoneNumberLength2(value) === void 0;
+            return isPhoneValid;
+          },
+          { message: ((_i2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _i2.invalid) || "Phone Number Invalid" }
+        );
+        break;
     }
   });
-  const formSchema = z2.object({
-    ...fieldSchemas,
-    password: z2.string({
-      required_error: ((_a = texts == null ? void 0 : texts.password) == null ? void 0 : _a.required) || "Password is required"
-    }).min(minPasswordLength, {
-      message: ((_b = texts == null ? void 0 : texts.password) == null ? void 0 : _b.tooShort) || "Password is too short"
-    }).refine((value) => value !== "", {
-      message: ((_c = texts == null ? void 0 : texts.password) == null ? void 0 : _c.required) || "Password is required"
-    }),
-    confirm_password: z2.string({
-      required_error: ((_d = texts == null ? void 0 : texts.confirm) == null ? void 0 : _d.required) || "Confirm password required"
-    }).min(minPasswordLength, {
-      message: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.tooShort) || "Password is too short"
-    }).refine((value) => value !== "", {
-      message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.required) || "Confirm password is required"
-    }),
-    refCode: z2.string().optional(),
-    reference: z2.string().optional(),
-    terms_accepted: z2.boolean({ required_error: (texts == null ? void 0 : texts.termsRequired) || "Terms required" }).refine((value) => value, {
-      message: (texts == null ? void 0 : texts.termsRequired) || "Terms required"
-    }),
-    newsletter_accepted: z2.boolean().optional()
-  }).refine((data) => data.password === data.confirm_password, {
-    message: ((_g = texts == null ? void 0 : texts.confirm) == null ? void 0 : _g.dontMatch) || "Passwords don't match",
-    path: ["confirm_password"]
-  });
+  let formSchema;
+  if (selectedRegisterType.value === "phone") {
+    formSchema = z2.object({
+      phone: z2.string({
+        required_error: ((_c = texts == null ? void 0 : texts.phone) == null ? void 0 : _c.required) || "Phone Number Required"
+      }).refine(
+        (value) => {
+          let isPhoneValid = isPossiblePhoneNumber2(value) && isValidPhoneNumber2(value) && validatePhoneNumberLength2(value) === void 0;
+          return isPhoneValid;
+        },
+        { message: ((_d = texts == null ? void 0 : texts.phone) == null ? void 0 : _d.invalid) || "Phone Number Invalid" }
+      ),
+      refCode: z2.string().optional(),
+      reference: z2.string().optional(),
+      terms_accepted: z2.boolean({ required_error: (texts == null ? void 0 : texts.termsRequired) || "Terms required" }).refine((value) => value, {
+        message: (texts == null ? void 0 : texts.termsRequired) || "Terms required"
+      }),
+      newsletter_accepted: z2.boolean().optional()
+    });
+  } else {
+    formSchema = z2.object({
+      ...fieldSchemas,
+      password: z2.string({
+        required_error: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.required) || "Password is required"
+      }).min(minPasswordLength, {
+        message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.tooShort) || "Password is too short"
+      }).refine((value) => value !== "", {
+        message: ((_g = texts == null ? void 0 : texts.password) == null ? void 0 : _g.required) || "Password is required"
+      }),
+      confirm_password: z2.string({
+        required_error: ((_h = texts == null ? void 0 : texts.confirm) == null ? void 0 : _h.required) || "Confirm password required"
+      }).min(minPasswordLength, {
+        message: ((_i = texts == null ? void 0 : texts.password) == null ? void 0 : _i.tooShort) || "Password is too short"
+      }).refine((value) => value !== "", {
+        message: ((_j = texts == null ? void 0 : texts.password) == null ? void 0 : _j.required) || "Confirm password is required"
+      }),
+      refCode: z2.string().optional(),
+      reference: z2.string().optional(),
+      terms_accepted: z2.boolean({ required_error: (texts == null ? void 0 : texts.termsRequired) || "Terms required" }).refine((value) => value, {
+        message: (texts == null ? void 0 : texts.termsRequired) || "Terms required"
+      }),
+      newsletter_accepted: z2.boolean().optional()
+    }).refine((data) => data.password === data.confirm_password, {
+      message: ((_k = texts == null ? void 0 : texts.confirm) == null ? void 0 : _k.dontMatch) || "Passwords don't match",
+      path: ["confirm_password"]
+    });
+  }
   const { handleSubmit, control, formState } = useForm2({
     resolver: zodResolver2(formSchema)
   });
-  return /* @__PURE__ */ React3.createElement(
-    "div",
+  return /* @__PURE__ */ React3.createElement("div", { className: cn("hawa-flex hawa-flex-col", (_l = props.classNames) == null ? void 0 : _l.root) }, /* @__PURE__ */ React3.createElement(
+    Card,
     {
+      dir: props.direction,
       className: cn(
-        "hawa-flex hawa-flex-col hawa-gap-4",
-        (_h = props.classNames) == null ? void 0 : _h.root
+        (_m = props.classNames) == null ? void 0 : _m.card,
+        props.cardless && "hawa-border-none hawa-bg-transparent !hawa-shadow-none !hawa-drop-shadow-none"
       )
     },
     /* @__PURE__ */ React3.createElement(
-      Card,
+      CardContent,
       {
-        dir: props.direction,
-        className: cn(
-          (_i = props.classNames) == null ? void 0 : _i.card,
-          props.cardless && "hawa-border-none hawa-bg-transparent !hawa-shadow-none !hawa-drop-shadow-none"
-        )
+        headless: registerTypes ? registerTypes.length <= 1 : true,
+        noPadding: props.cardless
       },
-      /* @__PURE__ */ React3.createElement(CardContent, { headless: true, noPadding: props.cardless }, /* @__PURE__ */ React3.createElement("div", null, props.showError && /* @__PURE__ */ React3.createElement(
-        Alert,
+      /* @__PURE__ */ React3.createElement(
+        "div",
         {
-          direction: props.direction,
-          title: props.errorTitle,
-          text: props.errorText,
-          severity: "error",
-          onAlertClosed: () => {
-            if (props.onErrorDismissed) {
-              props.onErrorDismissed();
+          className: cn(registerTypes && registerTypes.length > 1 ? "hawa-mt-6 hawa-mb-0" : "")
+        },
+        props.showError && /* @__PURE__ */ React3.createElement(
+          Alert,
+          {
+            direction: props.direction,
+            title: props.errorTitle,
+            text: props.errorText,
+            severity: "error",
+            onAlertClosed: () => {
+              if (props.onErrorDismissed) {
+                props.onErrorDismissed();
+              }
             }
           }
-        }
-      ), /* @__PURE__ */ React3.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React3.createElement(
-        "form",
-        {
-          noValidate: true,
-          onSubmit: handleSubmit((e) => {
-            if (props.onRegister) {
-              return props.onRegister(e);
-            } else {
-              console.log(
-                "Form is submitted but onRegister prop is missing"
-              );
-            }
-          }),
-          className: "hawa-flex hawa-flex-col hawa-gap-4"
-        },
-        /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, registerFields.map((fld, i) => {
-          if (fld === "fullname") {
-            return /* @__PURE__ */ React3.createElement(
-              Controller2,
+        ),
+        /* @__PURE__ */ React3.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React3.createElement(
+          "form",
+          {
+            noValidate: true,
+            onSubmit: handleSubmit((e) => {
+              if (props.onRegister) {
+                return props.onRegister(e);
+              } else {
+                console.log("Form is submitted but onRegister prop is missing");
+              }
+            }),
+            className: "hawa-flex hawa-flex-col hawa-gap-4"
+          },
+          /* @__PURE__ */ React3.createElement(
+            Tabs,
+            {
+              dir: props.direction,
+              value: selectedRegisterType.value,
+              onValueChange: (e) => {
+                if (props.onRegisterTypeChange) {
+                  props.onRegisterTypeChange(e);
+                }
+                setSelectedRegisterType(
+                  (registerTypes == null ? void 0 : registerTypes.find((r) => r.value === e)) || registerTypes && registerTypes[0] || {
+                    label: "Password",
+                    value: "password"
+                  }
+                );
+              }
+            },
+            registerTypes && registerTypes.length > 1 && /* @__PURE__ */ React3.createElement(CardHeader, { className: "hawa-w-full hawa-px-0 hawa-py-0 hawa-mb-4" }, /* @__PURE__ */ React3.createElement(TabsList, { className: "hawa-w-full" }, registerTypes.map((registerType) => /* @__PURE__ */ React3.createElement(TabsTrigger, { value: registerType.value }, registerType.label)))),
+            /* @__PURE__ */ React3.createElement(
+              TabsContent,
               {
-                key: i,
-                control,
-                name: "fullName",
-                render: ({ field }) => {
-                  var _a2, _b2, _c2;
+                value: "password",
+                className: cn(
+                  "hawa-flex hawa-flex-col hawa-gap-4",
+                  selectedRegisterType.value === "password" ? "hawa-block" : "hawa-hidden"
+                ),
+                dir: props.direction
+              },
+              /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, registerFields.map((fld, i) => {
+                if (fld === "fullname") {
                   return /* @__PURE__ */ React3.createElement(
-                    Input,
+                    Controller2,
                     {
-                      width: "full",
-                      label: ((_a2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _a2.label) || "Full Name",
-                      placeholder: (_b2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _b2.placeholder,
-                      helperText: (_c2 = formState.errors.fullName) == null ? void 0 : _c2.message,
-                      ...field
+                      key: i,
+                      control,
+                      name: "fullName",
+                      render: ({ field }) => {
+                        var _a2, _b2, _c2;
+                        return /* @__PURE__ */ React3.createElement(
+                          Input,
+                          {
+                            width: "full",
+                            label: ((_a2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _a2.label) || "Full Name",
+                            placeholder: (_b2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _b2.placeholder,
+                            helperText: (_c2 = formState.errors.fullName) == null ? void 0 : _c2.message,
+                            ...field
+                          }
+                        );
+                      }
                     }
                   );
                 }
-              }
-            );
-          }
-          if (fld === "email") {
-            return /* @__PURE__ */ React3.createElement(
-              Controller2,
-              {
-                key: i,
-                control,
-                name: "email",
-                render: ({ field }) => {
-                  var _a2, _b2, _c2;
+                if (fld === "email") {
                   return /* @__PURE__ */ React3.createElement(
-                    Input,
+                    Controller2,
                     {
-                      dir: "ltr",
-                      inputProps: {
-                        className: props.direction === "rtl" ? "hawa-text-right" : "hawa-text-left"
-                      },
-                      width: "full",
-                      autoComplete: "email",
-                      label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
-                      helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
-                      placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "Enter your email",
-                      ...field,
-                      onChange: (e) => {
-                        field.onChange(
-                          e.target.value.toLowerCase().trim()
+                      key: i,
+                      control,
+                      name: "email",
+                      render: ({ field }) => {
+                        var _a2, _b2, _c2;
+                        return /* @__PURE__ */ React3.createElement(
+                          Input,
+                          {
+                            dir: "ltr",
+                            inputProps: {
+                              className: props.direction === "rtl" ? "hawa-text-right" : "hawa-text-left"
+                            },
+                            width: "full",
+                            autoComplete: "email",
+                            label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
+                            helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
+                            placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "Enter your email",
+                            ...field,
+                            onChange: (e) => {
+                              field.onChange(e.target.value.toLowerCase().trim());
+                            }
+                          }
                         );
                       }
                     }
                   );
                 }
-              }
-            );
-          }
-          if (fld === "username") {
-            return /* @__PURE__ */ React3.createElement(
-              Controller2,
-              {
-                key: i,
-                control,
-                name: "username",
-                render: ({ field }) => {
-                  var _a2, _b2, _c2, _d2;
+                if (fld === "username") {
                   return /* @__PURE__ */ React3.createElement(
-                    Input,
+                    Controller2,
                     {
-                      width: "full",
-                      autoComplete: "username",
-                      label: ((_a2 = texts == null ? void 0 : texts.username) == null ? void 0 : _a2.label) || "Username",
-                      labelProps: {
-                        ...(_b2 = props.usernameOptions) == null ? void 0 : _b2.label
-                      },
-                      helperText: (_c2 = formState.errors.username) == null ? void 0 : _c2.message,
-                      placeholder: (_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.placeholder,
-                      ...field
+                      key: i,
+                      control,
+                      name: "username",
+                      render: ({ field }) => {
+                        var _a2, _b2, _c2, _d2;
+                        return /* @__PURE__ */ React3.createElement(
+                          Input,
+                          {
+                            width: "full",
+                            autoComplete: "username",
+                            label: ((_a2 = texts == null ? void 0 : texts.username) == null ? void 0 : _a2.label) || "Username",
+                            labelProps: {
+                              ...(_b2 = props.usernameOptions) == null ? void 0 : _b2.label
+                            },
+                            helperText: (_c2 = formState.errors.username) == null ? void 0 : _c2.message,
+                            placeholder: (_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.placeholder,
+                            ...field
+                          }
+                        );
+                      }
                     }
                   );
                 }
-              }
-            );
-          }
-        })),
-        /* @__PURE__ */ React3.createElement(
-          Controller2,
-          {
-            control,
-            name: "password",
-            render: ({ field }) => {
-              var _a2, _b2, _c2;
-              return /* @__PURE__ */ React3.createElement(
-                Input,
+              })),
+              /* @__PURE__ */ React3.createElement(
+                Controller2,
                 {
-                  width: "full",
-                  type: passwordVisible ? "text" : "password",
-                  endIcon: /* @__PURE__ */ React3.createElement(
-                    "div",
-                    {
-                      className: "hawa-cursor-pointer",
-                      onClick: () => setPasswordVisible(!passwordVisible)
-                    },
-                    passwordVisible ? /* @__PURE__ */ React3.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React3.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
-                    " "
-                  ),
-                  autoComplete: "new-password",
-                  label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
-                  placeholder: (_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder,
-                  helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
-                  ...field
+                  control,
+                  name: "password",
+                  render: ({ field }) => {
+                    var _a2, _b2, _c2;
+                    return /* @__PURE__ */ React3.createElement(
+                      Input,
+                      {
+                        width: "full",
+                        type: passwordVisible ? "text" : "password",
+                        autoComplete: "new-password",
+                        label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
+                        placeholder: (_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder,
+                        helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
+                        endIcon: /* @__PURE__ */ React3.createElement(
+                          "div",
+                          {
+                            className: "hawa-cursor-pointer",
+                            onClick: () => setPasswordVisible(!passwordVisible)
+                          },
+                          passwordVisible ? /* @__PURE__ */ React3.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React3.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+                          " "
+                        ),
+                        ...field
+                      }
+                    );
+                  }
                 }
-              );
-            }
-          }
-        ),
-        /* @__PURE__ */ React3.createElement(
-          Controller2,
-          {
-            control,
-            name: "confirm_password",
-            render: ({ field }) => {
-              var _a2, _b2, _c2;
-              return /* @__PURE__ */ React3.createElement(
-                Input,
+              ),
+              /* @__PURE__ */ React3.createElement(
+                Controller2,
                 {
-                  width: "full",
-                  type: "password",
-                  autoComplete: "new-password",
-                  label: ((_a2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _a2.label) || "Confirm Password",
-                  placeholder: ((_b2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _b2.placeholder) || "Confirm your Password",
-                  helperText: (_c2 = formState.errors.confirm_password) == null ? void 0 : _c2.message,
-                  ...field
+                  control,
+                  name: "confirm_password",
+                  render: ({ field }) => {
+                    var _a2, _b2, _c2;
+                    return /* @__PURE__ */ React3.createElement(
+                      Input,
+                      {
+                        width: "full",
+                        type: passwordVisible ? "text" : "password",
+                        autoComplete: "new-password",
+                        label: ((_a2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _a2.label) || "Confirm Password",
+                        placeholder: ((_b2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _b2.placeholder) || "Confirm your Password",
+                        helperText: (_c2 = formState.errors.confirm_password) == null ? void 0 : _c2.message,
+                        endIcon: /* @__PURE__ */ React3.createElement(
+                          "div",
+                          {
+                            className: "hawa-cursor-pointer",
+                            onClick: () => setPasswordVisible(!passwordVisible)
+                          },
+                          passwordVisible ? /* @__PURE__ */ React3.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React3.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+                          " "
+                        ),
+                        ...field
+                      }
+                    );
+                  }
                 }
-              );
-            }
-          }
-        ),
-        props.additionalInputs,
-        props.showRefCode && /* @__PURE__ */ React3.createElement(
-          Controller2,
-          {
-            control,
-            name: "refCode",
-            render: ({ field }) => {
-              var _a2;
-              return /* @__PURE__ */ React3.createElement(
-                Input,
+              ),
+              props.additionalInputs,
+              props.showRefCode && /* @__PURE__ */ React3.createElement(
+                Controller2,
                 {
-                  width: "full",
-                  label: texts == null ? void 0 : texts.refCode,
-                  placeholder: (texts == null ? void 0 : texts.refCodePlaceholder) || "Enter the referral code",
-                  helperText: (_a2 = formState.errors.refCode) == null ? void 0 : _a2.message,
-                  ...field
+                  control,
+                  name: "refCode",
+                  render: ({ field }) => {
+                    var _a2;
+                    return /* @__PURE__ */ React3.createElement(
+                      Input,
+                      {
+                        width: "full",
+                        label: texts == null ? void 0 : texts.refCode,
+                        placeholder: (texts == null ? void 0 : texts.refCodePlaceholder) || "Enter the referral code",
+                        helperText: (_a2 = formState.errors.refCode) == null ? void 0 : _a2.message,
+                        ...field
+                      }
+                    );
+                  }
                 }
-              );
-            }
-          }
-        ),
-        props.showUserSource && /* @__PURE__ */ React3.createElement(
-          Controller2,
-          {
-            control,
-            name: "reference",
-            render: ({ field }) => {
-              var _a2, _b2;
-              return /* @__PURE__ */ React3.createElement(
-                Select,
+              ),
+              props.showUserSource && /* @__PURE__ */ React3.createElement(
+                Controller2,
                 {
-                  label: ((_a2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _a2.label) || "How did you learn about us?",
-                  placeholder: (_b2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _b2.placeholder,
-                  isCreatable: false,
-                  isMulti: false,
-                  isSearchable: false,
-                  isClearable: false,
-                  options: props.userReferenceOptions || [],
-                  onChange: (e) => field.onChange(e)
+                  control,
+                  name: "reference",
+                  render: ({ field }) => {
+                    var _a2, _b2;
+                    return /* @__PURE__ */ React3.createElement(
+                      Select,
+                      {
+                        label: ((_a2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _a2.label) || "How did you learn about us?",
+                        placeholder: (_b2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _b2.placeholder,
+                        isCreatable: false,
+                        isMulti: false,
+                        isSearchable: false,
+                        isClearable: false,
+                        options: props.userReferenceOptions || [],
+                        onChange: (e) => field.onChange(e)
+                      }
+                    );
+                  }
                 }
-              );
-            }
-          }
-        ),
-        showTermsOption || showNewsletterOption ? /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-3 hawa-mb-2" }, showTermsOption && /* @__PURE__ */ React3.createElement(
-          Controller2,
-          {
-            control,
-            name: "terms_accepted",
-            render: ({ field }) => {
-              var _a2, _b2;
-              return /* @__PURE__ */ React3.createElement(
-                Checkbox,
+              )
+            ),
+            /* @__PURE__ */ React3.createElement(
+              TabsContent,
+              {
+                value: "phone",
+                className: cn(
+                  "hawa-flex hawa-flex-col hawa-gap-4",
+                  selectedRegisterType.value === "phone" ? "hawa-block" : "hawa-hidden"
+                ),
+                dir: props.direction
+              },
+              /* @__PURE__ */ React3.createElement(
+                Controller2,
                 {
-                  id: "terms_accepted",
-                  helperText: (_b2 = (_a2 = formState.errors.terms_accepted) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString(),
-                  onCheckedChange: (e) => field.onChange(e),
-                  label: /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-0.5 hawa-whitespace-nowrap hawa-flex-wrap" }, (texts == null ? void 0 : texts.iAcceptText) || "I accept the", " ", /* @__PURE__ */ React3.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React3.createElement(
-                    "span",
-                    {
-                      onClick: (e) => {
-                        e.preventDefault();
-                        if (props.onRouteToTOS) {
-                          props.onRouteToTOS();
+                  control,
+                  name: "phone",
+                  render: ({ field }) => {
+                    var _a2, _b2;
+                    return /* @__PURE__ */ React3.createElement(
+                      PhoneInput,
+                      {
+                        label: ((_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label) || "Phone Number",
+                        helperText: (_b2 = formState.errors.phone) == null ? void 0 : _b2.message,
+                        preferredCountry: { label: "+966" },
+                        ...props.phoneInputProps,
+                        handleChange: (e) => {
+                          if (isValidPhoneNumber2(e) && isPossiblePhoneNumber2(e) && validatePhoneNumberLength2(e) === void 0) {
+                            let parsed = parsePhoneNumber2(e);
+                            field.onChange(parsed.number);
+                          } else {
+                            field.onChange(e);
+                          }
                         }
-                      },
-                      className: "clickable-link"
-                    },
-                    (texts == null ? void 0 : texts.termsText) || "Terms of Service"
-                  )))
+                      }
+                    );
+                  }
                 }
-              );
-            }
-          }
-        ), showNewsletterOption && /* @__PURE__ */ React3.createElement(
-          Controller2,
-          {
-            control,
-            name: "newsletter_accepted",
-            render: ({ field }) => /* @__PURE__ */ React3.createElement(
-              Checkbox,
+              ),
+              props.additionalInputs,
+              props.showRefCode && /* @__PURE__ */ React3.createElement(
+                Controller2,
+                {
+                  control,
+                  name: "refCode",
+                  render: ({ field }) => {
+                    var _a2;
+                    return /* @__PURE__ */ React3.createElement(
+                      Input,
+                      {
+                        width: "full",
+                        label: texts == null ? void 0 : texts.refCode,
+                        placeholder: (texts == null ? void 0 : texts.refCodePlaceholder) || "Enter the referral code",
+                        helperText: (_a2 = formState.errors.refCode) == null ? void 0 : _a2.message,
+                        ...field
+                      }
+                    );
+                  }
+                }
+              ),
+              props.showUserSource && /* @__PURE__ */ React3.createElement(
+                Controller2,
+                {
+                  control,
+                  name: "reference",
+                  render: ({ field }) => {
+                    var _a2, _b2;
+                    return /* @__PURE__ */ React3.createElement(
+                      Select,
+                      {
+                        label: ((_a2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _a2.label) || "How did you learn about us?",
+                        placeholder: (_b2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _b2.placeholder,
+                        isCreatable: false,
+                        isMulti: false,
+                        isSearchable: false,
+                        isClearable: false,
+                        options: props.userReferenceOptions || [],
+                        onChange: (e) => field.onChange(e)
+                      }
+                    );
+                  }
+                }
+              )
+            ),
+            showTermsOption || showNewsletterOption ? /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-3 hawa-mb-2" }, showTermsOption && /* @__PURE__ */ React3.createElement(
+              Controller2,
               {
-                id: "newsletter_accepted",
-                label: (texts == null ? void 0 : texts.subscribeToNewsletter) || "Subscribe to our newsletter",
-                onCheckedChange: field.onChange
+                control,
+                name: "terms_accepted",
+                render: ({ field }) => {
+                  var _a2, _b2;
+                  return /* @__PURE__ */ React3.createElement(
+                    Checkbox,
+                    {
+                      id: "terms_accepted",
+                      helperText: (_b2 = (_a2 = formState.errors.terms_accepted) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString(),
+                      onCheckedChange: (e) => field.onChange(e),
+                      label: /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-0.5 hawa-whitespace-nowrap hawa-flex-wrap" }, (texts == null ? void 0 : texts.iAcceptText) || "I accept the", " ", /* @__PURE__ */ React3.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React3.createElement(
+                        "span",
+                        {
+                          onClick: (e) => {
+                            e.preventDefault();
+                            if (props.onRouteToTOS) {
+                              props.onRouteToTOS();
+                            }
+                          },
+                          className: "clickable-link"
+                        },
+                        (texts == null ? void 0 : texts.termsText) || "Terms of Service"
+                      )))
+                    }
+                  );
+                }
               }
-            )
-          }
-        )) : null,
-        /* @__PURE__ */ React3.createElement(
-          Button,
-          {
-            className: "hawa-w-full",
-            type: "submit",
-            isLoading: props.isLoading,
-            disabled: props.isLoading
-          },
-          (texts == null ? void 0 : texts.registerText) || "Register"
-        ),
-        props.additionalButtons
-      )), props.onRouteToLogin && /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ React3.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React3.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
-      props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React3.createElement(
-        CardFooter,
-        {
-          noPadding: props.cardless,
-          className: cn(
-            props.logosOnly ? "hawa-flex hawa-flex-row hawa-justify-center hawa-gap-2" : "hawa-grid hawa-grid-cols-1 hawa-gap-2"
-          )
-        },
-        /* @__PURE__ */ React3.createElement(
-          AuthButtons,
-          {
-            texts: thirdPartyAuthTexts,
-            viaGoogle: props.viaGoogle,
-            viaGithub: props.viaGithub,
-            viaTwitter: props.viaTwitter,
-            isGoogleLoading: props.isGoogleLoading,
-            isGithubLoading: props.isGithubLoading,
-            isTwitterLoading: props.isTwitterLoading,
-            handleGoogle: props.onGoogleRegister,
-            handleGithub: props.onGithubRegister,
-            handleTwitter: props.onTwitterRegister
-          }
+            ), showNewsletterOption && /* @__PURE__ */ React3.createElement(
+              Controller2,
+              {
+                control,
+                name: "newsletter_accepted",
+                render: ({ field }) => /* @__PURE__ */ React3.createElement(
+                  Checkbox,
+                  {
+                    id: "newsletter_accepted",
+                    label: (texts == null ? void 0 : texts.subscribeToNewsletter) || "Subscribe to our newsletter",
+                    onCheckedChange: field.onChange
+                  }
+                )
+              }
+            )) : null
+          ),
+          /* @__PURE__ */ React3.createElement(
+            Button,
+            {
+              className: "hawa-w-full",
+              type: "submit",
+              isLoading: props.isLoading,
+              disabled: props.isLoading
+            },
+            (texts == null ? void 0 : texts.registerText) || "Register"
+          ),
+          props.additionalButtons
+        )),
+        props.onRouteToLogin && /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ React3.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React3.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login"))
+      )
+    ),
+    props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React3.createElement(
+      CardFooter,
+      {
+        noPadding: props.cardless,
+        className: cn(
+          props.logosOnly ? "hawa-flex hawa-flex-row hawa-justify-center hawa-gap-2" : "hawa-grid hawa-grid-cols-1 hawa-gap-2"
         )
-      ) : null
-    )
-  );
+      },
+      /* @__PURE__ */ React3.createElement(
+        AuthButtons,
+        {
+          texts: thirdPartyAuthTexts,
+          viaGoogle: props.viaGoogle,
+          viaGithub: props.viaGithub,
+          viaTwitter: props.viaTwitter,
+          isGoogleLoading: props.isGoogleLoading,
+          isGithubLoading: props.isGithubLoading,
+          isTwitterLoading: props.isTwitterLoading,
+          handleGoogle: props.onGoogleRegister,
+          handleGithub: props.onGithubRegister,
+          handleTwitter: props.onTwitterRegister
+        }
+      )
+    ) : null
+  ));
 };
 
 // blocks/auth/AppLanding.tsx