@sikka/hawa 0.46.4-next → 0.48.0-next

package/dist/index.mjs

@@ -5546,6 +5546,7 @@ import clsx3 from "clsx";
 var Select = ({
   labelProps,
   labelKey = "label",
+  valueKey = "value",
   ...props
 }) => {
   const NoOption = () => {
@@ -5565,13 +5566,7 @@ var Select = ({
       children
     );
   };
-  const Option = ({
-    children,
-    innerProps,
-    innerRef,
-    isFocused,
-    isSelected
-  }) => {
+  const Option = ({ children, innerProps, innerRef, isFocused, isSelected }) => {
     return /* @__PURE__ */ React43.createElement(
       "div",
       {
@@ -5586,14 +5581,7 @@ var Select = ({
       children
     );
   };
-  const Menu2 = ({
-    cx,
-    children,
-    getStyles,
-    innerProps,
-    innerRef,
-    ...menuProps
-  }) => {
+  const Menu2 = ({ cx, children, getStyles, innerProps, innerRef, ...menuProps }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
     return /* @__PURE__ */ React43.createElement(
       "div",
@@ -5622,71 +5610,72 @@ var Select = ({
       )
     },
     props.label && /* @__PURE__ */ React43.createElement(Label2, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ React43.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
-      //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ React43.createElement(
-        ReactSelect,
-        {
-          noOptionsMessage: NoOption,
-          classNames: {
-            control: () => cn(
-              props.phoneCode && "hawa-rounded-r-none",
-              props.controlClassNames
-            ),
-            container: () => cn(
-              selectContainerStyles,
-              props.phoneCode && phoneCodeStyles,
-              props.isMulti && "hawa-ps-0 "
-            ),
-            placeholder: () => cn(
-              selectPlaceholderStyles,
-              props.disabled && "hawa-text-muted-foreground"
-            ),
-            valueContainer: () => "hawa-text-foreground hawa-px-1 ",
-            singleValue: () => cn(
-              props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
-            ),
-            indicatorsContainer: () => cn(
-              selectIndicatorContainerStyles,
-              props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
-              props.disabled && "hawa-opacity-30"
-            )
-          },
-          unstyled: true,
-          autoFocus: false,
-          components: props.hideIndicator ? { Option, Menu: Menu2, IndicatorsContainer: () => null } : {
+    props.isLoading ? /* @__PURE__ */ React43.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? /* @__PURE__ */ React43.createElement(
+      ReactSelect,
+      {
+        noOptionsMessage: NoOption,
+        classNames: {
+          control: () => cn(props.phoneCode && "hawa-rounded-r-none", props.controlClassNames),
+          container: () => cn(
+            selectContainerStyles,
+            props.phoneCode && phoneCodeStyles,
+            props.isMulti && "hawa-ps-0 "
+          ),
+          placeholder: () => cn(selectPlaceholderStyles, props.disabled && "hawa-text-muted-foreground"),
+          valueContainer: () => "hawa-text-foreground hawa-px-1",
+          singleValue: () => cn(
+            props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
+          ),
+          indicatorsContainer: () => cn(
+            selectIndicatorContainerStyles,
+            props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
+            props.disabled && "hawa-opacity-30"
+          )
+        },
+        unstyled: true,
+        autoFocus: false,
+        components: props.hideIndicator ? {
+          Option: (optionProps) => /* @__PURE__ */ React43.createElement(
             Option,
-            Menu: Menu2,
-            ValueContainer: (e) => /* @__PURE__ */ React43.createElement(
-              "div",
-              {
-                className: cn(
-                  e.className,
-                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
-                ),
-                ...e
-              }
-            ),
-            MultiValueContainer: (e) => /* @__PURE__ */ React43.createElement(
-              "div",
-              {
-                className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
-                ...e
-              }
-            )
-          },
-          onChange: (newValue, action) => props.onChange(newValue, action),
-          options: props.options,
-          getOptionLabel: props.getOptionLabel,
-          defaultValue: props.defaultValue,
-          value: props.value,
-          placeholder: props.placeholder,
-          isDisabled: props.disabled,
-          isClearable: props.isClearable,
-          isMulti: props.isMulti,
-          isSearchable: props.isSearchable
-        }
-      )
+            {
+              ...optionProps,
+              isSelected: optionProps.data[valueKey] === props.value[valueKey]
+            }
+          ),
+          Menu: Menu2,
+          IndicatorsContainer: () => null
+        } : {
+          Option,
+          Menu: Menu2,
+          ValueContainer: (e) => /* @__PURE__ */ React43.createElement(
+            "div",
+            {
+              className: cn(
+                e.className,
+                "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-2 hawa-w-full hawa-cursor-pointer"
+              ),
+              ...e
+            }
+          ),
+          MultiValueContainer: (e) => /* @__PURE__ */ React43.createElement(
+            "div",
+            {
+              className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
+              ...e
+            }
+          )
+        },
+        onChange: (newValue, action) => props.onChange(newValue, action),
+        options: props.options,
+        getOptionLabel: props.getOptionLabel,
+        defaultValue: props.defaultValue,
+        value: props.value,
+        placeholder: props.placeholder,
+        isDisabled: props.disabled,
+        isClearable: props.isClearable,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable
+      }
     ) : /* @__PURE__ */ React43.createElement(
       CreatableSelect,
       {
@@ -7676,11 +7665,13 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
+  var _a;
   const [phoneNumber, setPhoneNumber] = useState29("");
-  const [countryCode, setCountryCode] = useState29(props.preferredCountry);
+  const [countryCode, setCountryCode] = useState29(
+    props.preferredCountry || { label: "+966" }
+  );
   const inputRef = useRef17(null);
   const handleInputChange = (e) => {
-    console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
     if (input === "" || validChars.test(input)) {
@@ -7702,11 +7693,13 @@ var PhoneInput = ({
       isMulti: false,
       isSearchable: true,
       isClearable: false,
-      placeholder: "Code",
+      placeholder: (_a = props.preferredCountry) == null ? void 0 : _a.label,
       options: countryCodes || countries_default,
-      onChange: setCountryCode,
-      value: countryCode == null ? void 0 : countryCode.label,
-      defaultValue: props.preferredCountry
+      onChange: (e) => setCountryCode({ label: e.label, value: e.label }),
+      valueKey: "label",
+      labelKey: "label",
+      value: { label: countryCode == null ? void 0 : countryCode.label, value: countryCode == null ? void 0 : countryCode.label },
+      defaultValue: { label: countryCode == null ? void 0 : countryCode.label, value: countryCode == null ? void 0 : countryCode.label }
     }
   ), /* @__PURE__ */ React49.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React49.createElement(
     "input",
@@ -7819,14 +7812,7 @@ var PinInputRoot = React50.forwardRef(({ className, containerClassName, ...props
   }
 ));
 PinInputRoot.displayName = "PinInputRoot";
-var PinInputGroup = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React50.createElement(
-  "div",
-  {
-    ref,
-    className: cn("hawa-flex hawa-items-center", className),
-    ...props
-  }
-));
+var PinInputGroup = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React50.createElement("div", { ref, className: cn("hawa-flex hawa-items-center", className), ...props }));
 PinInputGroup.displayName = "PinInputGroup";
 var PinInputSlot = React50.forwardRef(({ index, className, ...props }, ref) => {
   const pinInputContext = React50.useContext(OTPInputContext);
@@ -7849,22 +7835,12 @@ var PinInputSlot = React50.forwardRef(({ index, className, ...props }, ref) => {
 PinInputSlot.displayName = "PinInputSlot";
 var PinInputSeperator = React50.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React50.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React50.createElement(Dot, null)));
 PinInputSeperator.displayName = "PinInputSeperator";
-var PinInput = ({
-  separatorPosition = 0,
-  ...props
-}) => {
+var PinInput = ({ separatorPosition = 0, ...props }) => {
   const maxLength = props.maxLength || 6;
   const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
   const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
   const secondGroupLength = maxLength - firstGroupLength;
-  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
-    PinInputSlot,
-    {
-      key: index,
-      index,
-      className: "hawa-w-full hawa-border"
-    }
-  ))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2", dir: "ltr" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full hawa-border" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
     PinInputSlot,
     {
       key: index + firstGroupLength,
@@ -11088,14 +11064,7 @@ var LoginForm = ({
         (texts == null ? void 0 : texts.loginText) || "Login"
       ),
       props.additionalButtons && props.additionalButtons,
-      props.allowRegister && /* @__PURE__ */ React82.createElement("div", { className: "hawa-select-none hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-gray-300" }, (texts == null ? void 0 : texts.newUserText) || "New user?", " ", /* @__PURE__ */ React82.createElement(
-        "span",
-        {
-          onClick: props.onRouteToRegister,
-          className: "clickable-link"
-        },
-        (texts == null ? void 0 : texts.createAccount) || "Create Account"
-      ))
+      props.allowRegister && /* @__PURE__ */ React82.createElement("div", { className: "hawa-select-none hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-gray-300" }, (texts == null ? void 0 : texts.newUserText) || "New user?", " ", /* @__PURE__ */ React82.createElement("span", { onClick: props.onRouteToRegister, className: "clickable-link" }, (texts == null ? void 0 : texts.createAccount) || "Create Account"))
     )),
     props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React82.createElement(
       CardFooter,
@@ -11128,6 +11097,12 @@ var LoginForm = ({
 import React83, { useState as useState42 } 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,
@@ -11135,10 +11110,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] = useState42(false);
+  const [selectedRegisterType, setSelectedRegisterType] = useState42({
+    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,
@@ -11150,8 +11130,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();
@@ -11176,55 +11160,85 @@ 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__ */ React83.createElement(
-    "div",
+  return /* @__PURE__ */ React83.createElement("div", { className: cn("hawa-flex hawa-flex-col", (_l = props.classNames) == null ? void 0 : _l.root) }, /* @__PURE__ */ React83.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__ */ React83.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__ */ React83.createElement(CardContent, { headless: true, noPadding: props.cardless }, /* @__PURE__ */ React83.createElement("div", null, props.showError && /* @__PURE__ */ React83.createElement(
+      /* @__PURE__ */ React83.createElement("div", null, props.showError && /* @__PURE__ */ React83.createElement(
         Alert,
         {
           direction: props.direction,
@@ -11245,240 +11259,352 @@ var RegisterForm = ({
             if (props.onRegister) {
               return props.onRegister(e);
             } else {
-              console.log(
-                "Form is submitted but onRegister prop is missing"
-              );
+              console.log("Form is submitted but onRegister prop is missing");
             }
           }),
           className: "hawa-flex hawa-flex-col hawa-gap-4"
         },
-        /* @__PURE__ */ React83.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, registerFields.map((fld, i) => {
-          if (fld === "fullname") {
-            return /* @__PURE__ */ React83.createElement(
+        /* @__PURE__ */ React83.createElement(
+          Tabs2,
+          {
+            dir: props.direction,
+            value: selectedRegisterType.value,
+            onValueChange: (e) => setSelectedRegisterType(
+              (registerTypes == null ? void 0 : registerTypes.find((r) => r.value === e)) || registerTypes && registerTypes[0] || {
+                label: "Password",
+                value: "password"
+              }
+            )
+          },
+          registerTypes && registerTypes.length > 1 && /* @__PURE__ */ React83.createElement(CardHeader, { className: "hawa-w-full hawa-px-0 hawa-py-0 hawa-my-4 hawa-mt-6" }, /* @__PURE__ */ React83.createElement(TabsList2, { className: "hawa-w-full" }, registerTypes.map((registerType) => /* @__PURE__ */ React83.createElement(TabsTrigger2, { value: registerType.value }, registerType.label)))),
+          /* @__PURE__ */ React83.createElement(
+            TabsContent,
+            {
+              value: "password",
+              className: cn(
+                "hawa-flex hawa-flex-col hawa-gap-4",
+                selectedRegisterType.value === "password" ? "hawa-block" : "hawa-hidden"
+              ),
+              dir: props.direction
+            },
+            /* @__PURE__ */ React83.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, registerFields.map((fld, i) => {
+              if (fld === "fullname") {
+                return /* @__PURE__ */ React83.createElement(
+                  Controller2,
+                  {
+                    key: i,
+                    control,
+                    name: "fullName",
+                    render: ({ field }) => {
+                      var _a2, _b2, _c2;
+                      return /* @__PURE__ */ React83.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__ */ React83.createElement(
+                  Controller2,
+                  {
+                    key: i,
+                    control,
+                    name: "email",
+                    render: ({ field }) => {
+                      var _a2, _b2, _c2;
+                      return /* @__PURE__ */ React83.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__ */ React83.createElement(
+                  Controller2,
+                  {
+                    key: i,
+                    control,
+                    name: "username",
+                    render: ({ field }) => {
+                      var _a2, _b2, _c2, _d2;
+                      return /* @__PURE__ */ React83.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__ */ React83.createElement(
               Controller2,
               {
-                key: i,
                 control,
-                name: "fullName",
+                name: "password",
                 render: ({ field }) => {
                   var _a2, _b2, _c2;
                   return /* @__PURE__ */ React83.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,
+                      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__ */ React83.createElement(
+                        "div",
+                        {
+                          className: "hawa-cursor-pointer",
+                          onClick: () => setPasswordVisible(!passwordVisible)
+                        },
+                        passwordVisible ? /* @__PURE__ */ React83.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React83.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+                        " "
+                      ),
                       ...field
                     }
                   );
                 }
               }
-            );
-          }
-          if (fld === "email") {
-            return /* @__PURE__ */ React83.createElement(
+            ),
+            /* @__PURE__ */ React83.createElement(
               Controller2,
               {
-                key: i,
                 control,
-                name: "email",
+                name: "confirm_password",
                 render: ({ field }) => {
                   var _a2, _b2, _c2;
                   return /* @__PURE__ */ React83.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()
-                        );
-                      }
+                      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__ */ React83.createElement(
+                        "div",
+                        {
+                          className: "hawa-cursor-pointer",
+                          onClick: () => setPasswordVisible(!passwordVisible)
+                        },
+                        passwordVisible ? /* @__PURE__ */ React83.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React83.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+                        " "
+                      ),
+                      ...field
                     }
                   );
                 }
               }
-            );
-          }
-          if (fld === "username") {
-            return /* @__PURE__ */ React83.createElement(
+            ),
+            props.additionalInputs,
+            props.showRefCode && /* @__PURE__ */ React83.createElement(
               Controller2,
               {
-                key: i,
                 control,
-                name: "username",
+                name: "refCode",
                 render: ({ field }) => {
-                  var _a2, _b2, _c2, _d2;
+                  var _a2;
                   return /* @__PURE__ */ React83.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,
+                      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
                     }
                   );
                 }
               }
-            );
-          }
-        })),
-        /* @__PURE__ */ React83.createElement(
-          Controller2,
-          {
-            control,
-            name: "password",
-            render: ({ field }) => {
-              var _a2, _b2, _c2;
-              return /* @__PURE__ */ React83.createElement(
-                Input,
-                {
-                  width: "full",
-                  type: passwordVisible ? "text" : "password",
-                  endIcon: /* @__PURE__ */ React83.createElement(
-                    "div",
+            ),
+            props.showUserSource && /* @__PURE__ */ React83.createElement(
+              Controller2,
+              {
+                control,
+                name: "reference",
+                render: ({ field }) => {
+                  var _a2, _b2;
+                  return /* @__PURE__ */ React83.createElement(
+                    Select,
                     {
-                      className: "hawa-cursor-pointer",
-                      onClick: () => setPasswordVisible(!passwordVisible)
-                    },
-                    passwordVisible ? /* @__PURE__ */ React83.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React83.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
+                      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)
+                    }
+                  );
                 }
-              );
-            }
-          }
-        ),
-        /* @__PURE__ */ React83.createElement(
-          Controller2,
-          {
-            control,
-            name: "confirm_password",
-            render: ({ field }) => {
-              var _a2, _b2, _c2;
-              return /* @__PURE__ */ React83.createElement(
-                Input,
-                {
-                  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
+              }
+            )
+          ),
+          /* @__PURE__ */ React83.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__ */ React83.createElement(
+              Controller2,
+              {
+                control,
+                name: "phone",
+                render: ({ field }) => {
+                  var _a2, _b2;
+                  return /* @__PURE__ */ React83.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);
+                        }
+                      }
+                    }
+                  );
                 }
-              );
-            }
-          }
-        ),
-        props.additionalInputs,
-        props.showRefCode && /* @__PURE__ */ React83.createElement(
-          Controller2,
-          {
-            control,
-            name: "refCode",
-            render: ({ field }) => {
-              var _a2;
-              return /* @__PURE__ */ React83.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.additionalInputs,
+            props.showRefCode && /* @__PURE__ */ React83.createElement(
+              Controller2,
+              {
+                control,
+                name: "refCode",
+                render: ({ field }) => {
+                  var _a2;
+                  return /* @__PURE__ */ React83.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__ */ React83.createElement(
-          Controller2,
-          {
-            control,
-            name: "reference",
-            render: ({ field }) => {
-              var _a2, _b2;
-              return /* @__PURE__ */ React83.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)
+              }
+            ),
+            props.showUserSource && /* @__PURE__ */ React83.createElement(
+              Controller2,
+              {
+                control,
+                name: "reference",
+                render: ({ field }) => {
+                  var _a2, _b2;
+                  return /* @__PURE__ */ React83.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__ */ React83.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-3 hawa-mb-2" }, showTermsOption && /* @__PURE__ */ React83.createElement(
+            Controller2,
+            {
+              control,
+              name: "terms_accepted",
+              render: ({ field }) => {
+                var _a2, _b2;
+                return /* @__PURE__ */ React83.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__ */ React83.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__ */ React83.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React83.createElement(
+                      "span",
+                      {
+                        onClick: (e) => {
+                          e.preventDefault();
+                          if (props.onRouteToTOS) {
+                            props.onRouteToTOS();
+                          }
+                        },
+                        className: "clickable-link"
+                      },
+                      (texts == null ? void 0 : texts.termsText) || "Terms of Service"
+                    )))
+                  }
+                );
+              }
             }
-          }
-        ),
-        showTermsOption || showNewsletterOption ? /* @__PURE__ */ React83.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-3 hawa-mb-2" }, showTermsOption && /* @__PURE__ */ React83.createElement(
-          Controller2,
-          {
-            control,
-            name: "terms_accepted",
-            render: ({ field }) => {
-              var _a2, _b2;
-              return /* @__PURE__ */ React83.createElement(
+          ), showNewsletterOption && /* @__PURE__ */ React83.createElement(
+            Controller2,
+            {
+              control,
+              name: "newsletter_accepted",
+              render: ({ field }) => /* @__PURE__ */ React83.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__ */ React83.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__ */ React83.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React83.createElement(
-                    "span",
-                    {
-                      onClick: (e) => {
-                        e.preventDefault();
-                        if (props.onRouteToTOS) {
-                          props.onRouteToTOS();
-                        }
-                      },
-                      className: "clickable-link"
-                    },
-                    (texts == null ? void 0 : texts.termsText) || "Terms of Service"
-                  )))
+                  id: "newsletter_accepted",
+                  label: (texts == null ? void 0 : texts.subscribeToNewsletter) || "Subscribe to our newsletter",
+                  onCheckedChange: field.onChange
                 }
-              );
+              )
             }
-          }
-        ), showNewsletterOption && /* @__PURE__ */ React83.createElement(
-          Controller2,
-          {
-            control,
-            name: "newsletter_accepted",
-            render: ({ field }) => /* @__PURE__ */ React83.createElement(
-              Checkbox,
-              {
-                id: "newsletter_accepted",
-                label: (texts == null ? void 0 : texts.subscribeToNewsletter) || "Subscribe to our newsletter",
-                onCheckedChange: field.onChange
-              }
-            )
-          }
-        )) : null,
+          )) : null
+        ),
         /* @__PURE__ */ React83.createElement(
           Button,
           {
@@ -11490,33 +11616,33 @@ var RegisterForm = ({
           (texts == null ? void 0 : texts.registerText) || "Register"
         ),
         props.additionalButtons
-      )), props.onRouteToLogin && /* @__PURE__ */ React83.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__ */ React83.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React83.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
-      props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React83.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__ */ React83.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
-          }
+      )), props.onRouteToLogin && /* @__PURE__ */ React83.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__ */ React83.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React83.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))
+    ),
+    props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React83.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__ */ React83.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
@@ -11765,10 +11891,7 @@ import React88, { useEffect as useEffect34, useState as useState43 } from "react
 import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import * as z5 from "zod";
-var CodeConfirmation = ({
-  codeLength = 6,
-  ...props
-}) => {
+var CodeConfirmation = ({ codeLength = 6, ...props }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const formSchema = z5.object({
     otp_code: z5.string({ required_error: (_a = props.texts) == null ? void 0 : _a.codeRequiredText }).min(codeLength, { message: (_b = props.texts) == null ? void 0 : _b.codeTooShort })
@@ -11807,14 +11930,7 @@ var CodeConfirmation = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ React88.createElement(Card, null, /* @__PURE__ */ React88.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React88.createElement(
-    Alert,
-    {
-      title: props.errorTitle,
-      text: props.errorText,
-      severity: "error"
-    }
-  ), /* @__PURE__ */ React88.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ React88.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, ((_c = props.texts) == null ? void 0 : _c.checkYourPhone) || "Please check your phone"), /* @__PURE__ */ React88.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ React88.createElement("span", null, ((_d = props.texts) == null ? void 0 : _d.weSentCode) || "We've sent a code to "), /* @__PURE__ */ React88.createElement("span", null, props.phoneNumber))), /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React88.createElement(Card, null, /* @__PURE__ */ React88.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React88.createElement(Alert, { title: props.errorTitle, text: props.errorText, severity: "error" }), /* @__PURE__ */ React88.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ React88.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, ((_c = props.texts) == null ? void 0 : _c.checkYourIdentifier) || "Please check your phone"), /* @__PURE__ */ React88.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ React88.createElement("span", null, ((_d = props.texts) == null ? void 0 : _d.weSentCode) || "We've sent a code to "), /* @__PURE__ */ React88.createElement("span", null, props.identifier))), /* @__PURE__ */ React88.createElement(
     "form",
     {
       noValidate: true,
@@ -11863,9 +11979,7 @@ var CodeConfirmation = ({
           if (props.onCancel) {
             return props.onCancel();
           } else {
-            console.log(
-              "Cancel button clicked but onCancel prop is missing"
-            );
+            console.log("Cancel button clicked but onCancel prop is missing");
           }
         },
         variant: "outline"