@sikka/hawa 0.1.87 → 0.1.89

package/dist/index.mjs

@@ -6076,8 +6076,26 @@ var HawaPricingCard = ({
 
 // src/elements/HawaAdCard.tsx
 import clsx24 from "clsx";
-import React54 from "react";
+import React54, { useState as useState29, useEffect as useEffect19, useRef as useRef11 } from "react";
 var HawaAdCard = ({ orientation, ...props }) => {
+  const adRef = useRef11(null);
+  const [closed, setClosed] = useState29(false);
+  let duration = 0;
+  useEffect19(() => {
+    if (duration) {
+      const timeoutHide = setTimeout(() => {
+        setClosed(true);
+      }, duration);
+      const timeoutDestroy = setTimeout(() => {
+        setClosed(true);
+        adRef.current.removeChild(adRef.current.children[0]);
+      }, duration + 1e3);
+      return () => {
+        clearTimeout(timeoutHide);
+        clearTimeout(timeoutDestroy);
+      };
+    }
+  }, [duration]);
   let cardStyles = {
     horizontal: "flex flex-row  max-w-xl rounded border-gray-200 bg-gray-100 shadow-md p-2 gap-2 items-center relative  dark:border-gray-700 dark:bg-gray-800 ",
     vertical: "flex flex-col max-w-[200px] justify-start rounded border-gray-200 bg-gray-100 gap-2 shadow-md p-2 relative dark:border-gray-700 dark:bg-gray-800 "
@@ -6086,7 +6104,7 @@ var HawaAdCard = ({ orientation, ...props }) => {
     horizontal: "w-auto h-full bg-blue-500  rounded-inner",
     vertical: "bg-blue-500 rounded-inner w-auto "
   };
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React54.createElement("div", { ref: adRef }, /* @__PURE__ */ React54.createElement(
     "div",
     {
       className: clsx24(cardStyles[orientation], "dark:text-white"),
@@ -6103,12 +6121,21 @@ var HawaAdCard = ({ orientation, ...props }) => {
     /* @__PURE__ */ React54.createElement(
       "span",
       {
-        onClick: props.handleHide,
+        onClick: () => {
+          if (props.canHide) {
+            setClosed(true);
+            setTimeout(() => {
+              adRef.current.removeChild(adRef.current.children[0]);
+            }, 200);
+          } else {
+            props.handleCantHide();
+          }
+        },
         className: "absolute right-0 top-0 h-fit cursor-pointer select-none rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
       },
       "Hide"
     )
-  );
+  ));
 };
 
 // src/elements/HawaLandingCard.tsx
@@ -6152,7 +6179,7 @@ var HawaLandingCard = ({
 };
 
 // src/elements/HawaButton.tsx
-import React56, { useState as useState29 } from "react";
+import React56, { useState as useState30 } from "react";
 import clsx26 from "clsx";
 var disabledSyles = "cursor-default pointer-events-none";
 var disabledVariantSyles = {
@@ -6220,8 +6247,8 @@ var HawaButton = ({
   feedback,
   ...props
 }) => {
-  const [isClicked, setIsClicked] = useState29(false);
-  const [buttonText, setButtonText] = useState29(children);
+  const [isClicked, setIsClicked] = useState30(false);
+  const [buttonText, setButtonText] = useState30(children);
   const handleClick = (event) => {
     if (props.onClick) {
       props.onClick(event);
@@ -6395,9 +6422,9 @@ var HawaStoreButtons = (props) => {
 };
 
 // src/elements/ActionCard.tsx
-import React58, { useState as useState30 } from "react";
+import React58, { useState as useState31 } from "react";
 var ActionCard = (props) => {
-  const [hovered, setHovered] = useState30(false);
+  const [hovered, setHovered] = useState31(false);
   return /* @__PURE__ */ React58.createElement("div", { className: "flex h-full w-full flex-col gap-1 " }, /* @__PURE__ */ React58.createElement(
     "div",
     {
@@ -6437,12 +6464,12 @@ var ActionCard = (props) => {
 import React59 from "react";
 
 // src/hooks/useCarousel.ts
-import { useState as useState31, useRef as useRef11 } from "react";
+import { useState as useState32, useRef as useRef12 } from "react";
 var useCarousel = (imageWidth) => {
-  const [isDragging, setIsDragging] = useState31(false);
-  const [startDragX, setStartDragX] = useState31(0);
-  const [scrollLeft, setScrollLeft] = useState31(0);
-  const containerRef = useRef11(null);
+  const [isDragging, setIsDragging] = useState32(false);
+  const [startDragX, setStartDragX] = useState32(0);
+  const [scrollLeft, setScrollLeft] = useState32(0);
+  const containerRef = useRef12(null);
   const findClosestSnapPoint = (scrollLeft2) => {
     return Math.round(scrollLeft2 / imageWidth) * imageWidth;
   };
@@ -6542,14 +6569,14 @@ var Input = React60.forwardRef(
 Input.displayName = "Input";
 
 // src/elements/InterfaceSettings.tsx
-import React61, { useState as useState33 } from "react";
+import React61, { useState as useState34 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
   ...props
 }) => {
-  const [color, setColor] = useState33(props.currentColorMode);
-  const [language, setLanguage] = useState33(props.currentLanguage);
+  const [color, setColor] = useState34(props.currentColorMode);
+  const [language, setLanguage] = useState34(props.currentLanguage);
   let orientationStyle = {
     horizontal: "flex flex-row justify-between",
     vertical: "flex flex-col items-center gap-2"
@@ -7154,13 +7181,13 @@ var HawaBottomAppBar = (props) => {
 };
 
 // src/layout/HawaSiteLayout.tsx
-import React74, { useEffect as useEffect21, useRef as useRef13, useState as useState37 } from "react";
+import React74, { useEffect as useEffect22, useRef as useRef14, useState as useState38 } from "react";
 import clsx27 from "clsx";
 
 // src/hooks/useDiscloser.ts
-import { useState as useState35 } from "react";
+import { useState as useState36 } from "react";
 var useDiscloser = (value = false) => {
-  const [open, setOpen] = useState35(value);
+  const [open, setOpen] = useState36(value);
   const onOpen = () => setOpen(true);
   const onClose = () => setOpen(false);
   return {
@@ -7172,13 +7199,13 @@ var useDiscloser = (value = false) => {
 var useDiscloser_default = useDiscloser;
 
 // src/hooks/useBreakpoint.ts
-import { useState as useState36, useEffect as useEffect20 } from "react";
+import { useState as useState37, useEffect as useEffect21 } from "react";
 var useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState36(window?.innerWidth);
+  const [breakpoint, setBreakpoint] = useState37(window?.innerWidth);
   const resize = () => {
     setBreakpoint(window?.innerWidth);
   };
-  useEffect20(() => {
+  useEffect21(() => {
     if (typeof window !== "undefined") {
       window?.addEventListener("resize", resize);
       return () => {
@@ -7196,19 +7223,19 @@ var HawaSiteLayout = ({
   navigationSize = "md",
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState37(false);
-  const [openSubItem, setOpenSubItem] = useState37(false);
+  const [openSideMenu, setOpenSideMenu] = useState38(false);
+  const [openSubItem, setOpenSubItem] = useState38(false);
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
-  const ref = useRef13(null);
-  const drawerItemRef = useRef13(null);
+  const ref = useRef14(null);
+  const drawerItemRef = useRef14(null);
   let size;
   if (typeof window !== "undefined") {
     size = useBreakpoint_default();
   } else {
     size = 1200;
   }
-  const [keepOpen, setKeepOpen] = useState37(false);
-  useEffect21(() => {
+  const [keepOpen, setKeepOpen] = useState38(false);
+  useEffect22(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -7309,7 +7336,7 @@ var HawaSiteLayout = ({
 };
 
 // src/layout/AppLayout.tsx
-import React76, { useEffect as useEffect22, useRef as useRef14, useState as useState38 } from "react";
+import React76, { useEffect as useEffect23, useRef as useRef15, useState as useState39 } from "react";
 import clsx28 from "clsx";
 
 // src/layout/Sidebar.tsx
@@ -7522,10 +7549,10 @@ var AppLayout = ({
       lg: closeDrawerWidth
     }
   };
-  const ref = useRef14(null);
+  const ref = useRef15(null);
   const isRTL = direction === "rtl";
-  const [openedSidebarItem, setOpenedSidebarItem] = useState38("");
-  const [selectedItem, setSelectedItem] = useState38(
+  const [openedSidebarItem, setOpenedSidebarItem] = useState39("");
+  const [selectedItem, setSelectedItem] = useState39(
     currentPage ? currentPage : []
   );
   let size;
@@ -7534,10 +7561,10 @@ var AppLayout = ({
   } else {
     size = 1200;
   }
-  const [keepOpen, setKeepOpen] = useState38(size > 600 ? true : false);
-  const [openSideMenu, setOpenSideMenu] = useState38(size > 600 ? true : false);
+  const [keepOpen, setKeepOpen] = useState39(size > 600 ? true : false);
+  const [openSideMenu, setOpenSideMenu] = useState39(size > 600 ? true : false);
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  useEffect22(() => {
+  useEffect23(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -7827,7 +7854,7 @@ var AppLayout = ({
 };
 
 // src/layout/HawaAppLayout.tsx
-import React77, { useEffect as useEffect23, useRef as useRef15, useState as useState39 } from "react";
+import React77, { useEffect as useEffect24, useRef as useRef16, useState as useState40 } from "react";
 import clsx29 from "clsx";
 import { FaChevronRight } from "react-icons/fa";
 var HawaAppLayout = ({
@@ -7836,11 +7863,11 @@ var HawaAppLayout = ({
   onSettingsClick,
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState39(false);
-  const [openSubItem, setOpenSubitem] = useState39("");
+  const [openSideMenu, setOpenSideMenu] = useState40(false);
+  const [openSubItem, setOpenSubitem] = useState40("");
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
-  const [keepOpen, setKeepOpen] = useState39(false);
-  const ref = useRef15(null);
+  const [keepOpen, setKeepOpen] = useState40(false);
+  const ref = useRef16(null);
   const isRTL = direction === "rtl";
   let size;
   if (typeof window !== "undefined") {
@@ -7848,7 +7875,7 @@ var HawaAppLayout = ({
   } else {
     size = 1200;
   }
-  useEffect23(() => {
+  useEffect24(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -8221,7 +8248,7 @@ var HawaAppLayout = ({
 };
 
 // src/layout/HawaAppLayoutSimplified.tsx
-import React78, { useEffect as useEffect24, useRef as useRef16, useState as useState40 } from "react";
+import React78, { useEffect as useEffect25, useRef as useRef17, useState as useState41 } from "react";
 import clsx30 from "clsx";
 var HawaAppLayoutSimplified = ({
   direction = "rtl",
@@ -8230,11 +8257,11 @@ var HawaAppLayoutSimplified = ({
   DrawerFooterActions,
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState40(false);
-  const [openSubItem, setOpenSubitem] = useState40("");
+  const [openSideMenu, setOpenSideMenu] = useState41(false);
+  const [openSubItem, setOpenSubitem] = useState41("");
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
-  const [keepOpen, setKeepOpen] = useState40(false);
-  const ref = useRef16(null);
+  const [keepOpen, setKeepOpen] = useState41(false);
+  const ref = useRef17(null);
   const isRTL = direction === "rtl";
   let size;
   if (typeof window !== "undefined") {
@@ -8242,7 +8269,7 @@ var HawaAppLayoutSimplified = ({
   } else {
     size = 1200;
   }
-  useEffect24(() => {
+  useEffect25(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -8732,14 +8759,14 @@ var Footer = ({
 };
 
 // src/layout/Banner.tsx
-import React82, { useRef as useRef17, useState as useState41 } from "react";
+import React82, { useRef as useRef18, useState as useState42 } from "react";
 import clsx32 from "clsx";
 var HawaBanner = ({
   design = "floating",
   ...props
 }) => {
-  const bannerRef = useRef17(null);
-  const [closed, setClosed] = useState41(false);
+  const bannerRef = useRef18(null);
+  const [closed, setClosed] = useState42(false);
   let bannerStyle = {
     floating: "left-1/2  z-50  w-[calc(100%-2rem)] -translate-x-1/2 lg:max-w-7xl p-4 rounded",
     default: "w-[calc(100%)] left-0 z-50 right-0 rounded-none p-2"
@@ -9199,7 +9226,7 @@ var AppLanding = (props) => {
 };
 
 // src/blocks/AuthForms/SignInPhone.tsx
-import React86, { useState as useState42 } from "react";
+import React86, { useState as useState43 } from "react";
 import { Controller as Controller2, useForm as useForm2 } from "react-hook-form";
 var SignInPhone = (props) => {
   const methods = useForm2();
@@ -9208,7 +9235,7 @@ var SignInPhone = (props) => {
     handleSubmit,
     control
   } = methods;
-  const [userPhone, setUserPhone] = useState42("");
+  const [userPhone, setUserPhone] = useState43("");
   return /* @__PURE__ */ React86.createElement(Card, null, /* @__PURE__ */ React86.createElement(CardContent, { headless: true }, /* @__PURE__ */ React86.createElement(
     "form",
     {
@@ -9679,10 +9706,10 @@ var SignUpForm = (props) => {
 };
 
 // src/blocks/AuthForms/NewPasswordForm.tsx
-import React89, { useState as useState43 } from "react";
+import React89, { useState as useState44 } from "react";
 import { Controller as Controller5, FormProvider as FormProvider3, useForm as useForm5 } from "react-hook-form";
 var NewPasswordForm = (props) => {
-  const [matchError, setMatchError] = useState43(false);
+  const [matchError, setMatchError] = useState44(false);
   const methods = useForm5();
   const {
     formState: { errors },
@@ -9764,35 +9791,35 @@ var ResetPasswordForm = (props) => {
         {
           width: "full",
           type: "text",
-          label: props.texts.emailLabel,
+          label: props.texts?.emailLabel,
           helpertext: errors.email?.message,
-          placeholder: props.texts.emailPlaceholder,
+          placeholder: props.texts?.emailPlaceholder,
           ...field,
           value: field.value ?? ""
         }
       ),
       rules: {
-        required: props.texts.emailRequiredText,
+        required: props.texts?.emailRequiredText,
         pattern: {
           value: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-          message: props.texts.emailInvalidText
+          message: props.texts?.emailInvalidText
         }
       }
     }
-  ), /* @__PURE__ */ React90.createElement("div", { className: " pb-2 text-left text-sm dark:text-gray-300" }, props.texts.dontHaveAccount ?? "Don't have an account? ", /* @__PURE__ */ React90.createElement(
+  ), /* @__PURE__ */ React90.createElement("div", { className: " pb-2 text-left text-sm dark:text-gray-300" }, props.texts?.dontHaveAccount ?? "Don't have an account? ", /* @__PURE__ */ React90.createElement(
     "span",
     {
       onClick: props.handleRouteToSignUp,
       className: "clickable-link"
     },
-    props.texts.signUpText ?? "Sign Up"
-  ))), /* @__PURE__ */ React90.createElement(CardFooter, null, /* @__PURE__ */ React90.createElement(Button, { type: "submit", className: "w-full" }, props.texts.resetPassword)))) : /* @__PURE__ */ React90.createElement(CardContent, { headless: true }, /* @__PURE__ */ React90.createElement("div", { className: "text-center" }, props.texts.emailSentText)));
+    props.texts?.signUpText ?? "Sign Up"
+  ))), /* @__PURE__ */ React90.createElement(CardFooter, null, /* @__PURE__ */ React90.createElement(Button, { type: "submit", className: "w-full" }, props.texts?.resetPassword)))) : /* @__PURE__ */ React90.createElement(CardContent, { headless: true }, /* @__PURE__ */ React90.createElement("div", { className: "text-center" }, props.texts?.emailSentText)));
 };
 
 // src/blocks/AuthForms/CodeConfirmation.tsx
-import React91, { useState as useState44 } from "react";
+import React91, { useState as useState45 } from "react";
 var CodeConfirmation = (props) => {
-  const [pins, setPins] = useState44(null);
+  const [pins, setPins] = useState45(null);
   return /* @__PURE__ */ React91.createElement(Card, null, /* @__PURE__ */ React91.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React91.createElement(
     HawaAlert,
     {
@@ -9816,11 +9843,32 @@ var CodeConfirmation = (props) => {
   )));
 };
 
+// src/blocks/AuthForms/CheckEmail.tsx
+import React92 from "react";
+var CheckEmail = ({ texts, handleResend }) => {
+  return /* @__PURE__ */ React92.createElement(Card, null, /* @__PURE__ */ React92.createElement(CardContent, { headless: true }, /* @__PURE__ */ React92.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React92.createElement("div", { className: "flex h-16 w-16 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground" }, /* @__PURE__ */ React92.createElement(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "none",
+      "stroke-width": "2",
+      viewBox: "0 0 24 24",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      height: "0.5em",
+      width: "0.5em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React92.createElement("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
+    /* @__PURE__ */ React92.createElement("polyline", { points: "22,6 12,13 2,6" })
+  )), /* @__PURE__ */ React92.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.checkEmail ?? "Check you email"), /* @__PURE__ */ React92.createElement("div", { className: "text-sm" }, texts?.pleaseVerify ?? "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."))), /* @__PURE__ */ React92.createElement(CardFooter, { className: "flex flex-col justify-center " }, /* @__PURE__ */ React92.createElement("span", { className: "clickable-link text-sm", onClick: handleResend }, texts?.resendEmail ?? "Resend Email")));
+};
+
 // src/blocks/Payment/SelectPayment.tsx
-import React92, { useState as useState45 } from "react";
+import React93, { useState as useState47 } from "react";
 var SelectPayment = (props) => {
-  const [selectedMethod, setSelectedMethod] = useState45("");
-  return /* @__PURE__ */ React92.createElement(Card, null, /* @__PURE__ */ React92.createElement(CardHeader, null, /* @__PURE__ */ React92.createElement(CardTitle, null, "Choose Payment Method"), /* @__PURE__ */ React92.createElement(CardDescription, null, "And you'll be directed to the next step to complete the payment")), /* @__PURE__ */ React92.createElement(CardContent, { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React92.createElement(
+  const [selectedMethod, setSelectedMethod] = useState47("");
+  return /* @__PURE__ */ React93.createElement(Card, null, /* @__PURE__ */ React93.createElement(CardHeader, null, /* @__PURE__ */ React93.createElement(CardTitle, null, "Choose Payment Method"), /* @__PURE__ */ React93.createElement(CardDescription, null, "And you'll be directed to the next step to complete the payment")), /* @__PURE__ */ React93.createElement(CardContent, { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React93.createElement(
     Button,
     {
       className: cn(
@@ -9832,15 +9880,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaMada,
       onClick: () => setSelectedMethod("mada")
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React92.createElement("span", null, props.madaLabel)
-  ), /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement("span", null, props.madaLabel)
+  ), /* @__PURE__ */ React93.createElement(
     Button,
     {
       className: cn(
@@ -9852,15 +9900,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaApplePay,
       onClick: () => setSelectedMethod("apple-pay")
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",
         className: "h-11"
       }
     ),
-    /* @__PURE__ */ React92.createElement("span", null, props.applePayLabel)
-  ), /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement("span", null, props.applePayLabel)
+  ), /* @__PURE__ */ React93.createElement(
     Button,
     {
       className: cn(
@@ -9872,15 +9920,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaCreditCard,
       onClick: () => setSelectedMethod("visa-master")
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React92.createElement("span", null, props.visaMasterLabel)
-  ), /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement("span", null, props.visaMasterLabel)
+  ), /* @__PURE__ */ React93.createElement(
     Button,
     {
       variant: "outline",
@@ -9892,7 +9940,7 @@ var SelectPayment = (props) => {
       disabled: !props.viaWallet,
       onClick: () => setSelectedMethod("wallet")
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "svg",
       {
         version: "1.1",
@@ -9900,20 +9948,20 @@ var SelectPayment = (props) => {
         viewBox: "0 0 223 223",
         className: "h-6 w-6"
       },
-      /* @__PURE__ */ React92.createElement("g", null, /* @__PURE__ */ React92.createElement(
+      /* @__PURE__ */ React93.createElement("g", null, /* @__PURE__ */ React93.createElement(
         "path",
         {
           d: "M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z\n                  M169.515,123.967c-7.082,0-12.823-5.741-12.823-12.823c0-7.082,5.741-12.823,12.823-12.823c7.082,0,12.823,5.741,12.823,12.823\n                  C182.338,118.225,176.597,123.967,169.515,123.967z"
         }
-      ), /* @__PURE__ */ React92.createElement(
+      ), /* @__PURE__ */ React93.createElement(
         "path",
         {
           d: "M123.509,68.5H205v-33c0-8.271-6.395-15-14.667-15h-175C7.062,20.5,0,27.229,0,35.5v152c0,8.271,7.062,15,15.333,15h175\n                  c8.271,0,14.667-6.729,14.667-15v-34h-81.342L123.509,68.5z"
         }
       ))
     ),
-    /* @__PURE__ */ React92.createElement("span", null, props.walletLabel)
-  ), /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement("span", null, props.walletLabel)
+  ), /* @__PURE__ */ React93.createElement(
     Button,
     {
       variant: "outline",
@@ -9925,15 +9973,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaSTCPay,
       onClick: () => setSelectedMethod("stc-pay")
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React92.createElement("span", null, props.stcPayLabel)
-  ), /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement("span", null, props.stcPayLabel)
+  ), /* @__PURE__ */ React93.createElement(
     Button,
     {
       variant: "outline",
@@ -9945,15 +9993,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaGooglePay,
       onClick: () => setSelectedMethod("google-pay")
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React92.createElement("span", null, props.googlePayLabel)
-  ), /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement("span", null, props.googlePayLabel)
+  ), /* @__PURE__ */ React93.createElement(
     Button,
     {
       variant: "outline",
@@ -9965,15 +10013,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaPayPal,
       onClick: () => setSelectedMethod("paypal")
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React92.createElement("span", null, props.paypalLabel)
-  )), /* @__PURE__ */ React92.createElement(CardFooter, null, /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement("span", null, props.paypalLabel)
+  )), /* @__PURE__ */ React93.createElement(CardFooter, null, /* @__PURE__ */ React93.createElement(
     Button,
     {
       onClick: () => props.handleContinue(selectedMethod),
@@ -9985,7 +10033,7 @@ var SelectPayment = (props) => {
 };
 
 // src/blocks/Payment/CreditCardForm.tsx
-import React93 from "react";
+import React94 from "react";
 import { Controller as Controller7, useForm as useForm7 } from "react-hook-form";
 var CreditCardForm = (props) => {
   const methods = useForm7();
@@ -9994,12 +10042,12 @@ var CreditCardForm = (props) => {
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React93.createElement(Card, null, /* @__PURE__ */ React93.createElement("form", { onSubmit: handleSubmit(props.handle) }, /* @__PURE__ */ React93.createElement(CardContent, { headless: true }, /* @__PURE__ */ React93.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(Card, null, /* @__PURE__ */ React94.createElement("form", { onSubmit: handleSubmit(props.handle) }, /* @__PURE__ */ React94.createElement(CardContent, { headless: true }, /* @__PURE__ */ React94.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React94.createElement(
     Controller7,
     {
       control,
       name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React93.createElement(
+      render: ({ field }) => /* @__PURE__ */ React94.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10014,12 +10062,12 @@ var CreditCardForm = (props) => {
         required: "Card Number is rquired"
       }
     }
-  ), /* @__PURE__ */ React93.createElement("div", { className: "w-1/4" }, /* @__PURE__ */ React93.createElement(
+  ), /* @__PURE__ */ React94.createElement("div", { className: "w-1/4" }, /* @__PURE__ */ React94.createElement(
     Controller7,
     {
       control,
       name: "cardCVC",
-      render: ({ field }) => /* @__PURE__ */ React93.createElement(
+      render: ({ field }) => /* @__PURE__ */ React94.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10036,12 +10084,12 @@ var CreditCardForm = (props) => {
         required: "Password is rquired"
       }
     }
-  ))), /* @__PURE__ */ React93.createElement(
+  ))), /* @__PURE__ */ React94.createElement(
     Controller7,
     {
       control,
       name: "cardExpiry",
-      render: ({ field }) => /* @__PURE__ */ React93.createElement(
+      render: ({ field }) => /* @__PURE__ */ React94.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10056,12 +10104,12 @@ var CreditCardForm = (props) => {
         required: "Password is rquired"
       }
     }
-  ), /* @__PURE__ */ React93.createElement(
+  ), /* @__PURE__ */ React94.createElement(
     Controller7,
     {
       control,
       name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React93.createElement(
+      render: ({ field }) => /* @__PURE__ */ React94.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10075,24 +10123,24 @@ var CreditCardForm = (props) => {
         required: "Card holder name is rquired"
       }
     }
-  )), /* @__PURE__ */ React93.createElement(CardFooter, null, /* @__PURE__ */ React93.createElement(Button, { className: "w-full", onClick: props.handlePayWithCreditCard }, "Pay with Credit Card"))));
+  )), /* @__PURE__ */ React94.createElement(CardFooter, null, /* @__PURE__ */ React94.createElement(Button, { className: "w-full", onClick: props.handlePayWithCreditCard }, "Pay with Credit Card"))));
 };
 
 // src/blocks/Payment/ChargeWalletForm.tsx
-import React94, { useState as useState46 } from "react";
+import React95, { useState as useState48 } from "react";
 var ChargeWalletForm = (props) => {
-  const [walletAmount, setWalletAmount] = useState46(0);
-  return /* @__PURE__ */ React94.createElement(Card, null, /* @__PURE__ */ React94.createElement(CardContent, { headless: true }, /* @__PURE__ */ React94.createElement("div", { className: "p-4 text-center" }, /* @__PURE__ */ React94.createElement("div", { className: " text-5xl font-extrabold" }, Number(walletAmount).toLocaleString("en") || "0"), /* @__PURE__ */ React94.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React94.createElement("div", { className: "mb-2 flex w-full flex-col gap-4 text-center" }, /* @__PURE__ */ React94.createElement("div", { className: "mb-2 flex w-full flex-row gap-4 text-center" }, /* @__PURE__ */ React94.createElement(Button, { variant: "outline", className: "h-full w-full" }, "10 SAR"), /* @__PURE__ */ React94.createElement(Button, { variant: "outline", className: "h-full w-full" }, "50 SAR"), /* @__PURE__ */ React94.createElement(Button, { variant: "outline", className: "h-full w-full" }, "100 SAR")), /* @__PURE__ */ React94.createElement(Input, { placeholder: "Custom Amount", type: "number", name: "amount" })), /* @__PURE__ */ React94.createElement(Button, { className: "mt-6 w-full" }, props.texts.chargeWallet)));
+  const [walletAmount, setWalletAmount] = useState48(0);
+  return /* @__PURE__ */ React95.createElement(Card, null, /* @__PURE__ */ React95.createElement(CardContent, { headless: true }, /* @__PURE__ */ React95.createElement("div", { className: "p-4 text-center" }, /* @__PURE__ */ React95.createElement("div", { className: " text-5xl font-extrabold" }, Number(walletAmount).toLocaleString("en") || "0"), /* @__PURE__ */ React95.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React95.createElement("div", { className: "mb-2 flex w-full flex-col gap-4 text-center" }, /* @__PURE__ */ React95.createElement("div", { className: "mb-2 flex w-full flex-row gap-4 text-center" }, /* @__PURE__ */ React95.createElement(Button, { variant: "outline", className: "h-full w-full" }, "10 SAR"), /* @__PURE__ */ React95.createElement(Button, { variant: "outline", className: "h-full w-full" }, "50 SAR"), /* @__PURE__ */ React95.createElement(Button, { variant: "outline", className: "h-full w-full" }, "100 SAR")), /* @__PURE__ */ React95.createElement(Input, { placeholder: "Custom Amount", type: "number", name: "amount" })), /* @__PURE__ */ React95.createElement(Button, { className: "mt-6 w-full" }, props.texts.chargeWallet)));
 };
 
 // src/blocks/Payment/PayWithWallet.tsx
-import React95 from "react";
+import React96 from "react";
 var PayWithWallet = (props) => {
-  return /* @__PURE__ */ React95.createElement(Card, null, /* @__PURE__ */ React95.createElement(CardContent, { headless: true }, /* @__PURE__ */ React95.createElement("div", { className: "text-center text-5xl font-extrabold" }, props.walletBalance || "0", /* @__PURE__ */ React95.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React95.createElement(Button, { className: "mt-6 w-full", onClick: props.handlePayWithWallet }, "Pay Now")));
+  return /* @__PURE__ */ React96.createElement(Card, null, /* @__PURE__ */ React96.createElement(CardContent, { headless: true }, /* @__PURE__ */ React96.createElement("div", { className: "text-center text-5xl font-extrabold" }, props.walletBalance || "0", /* @__PURE__ */ React96.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React96.createElement(Button, { className: "mt-6 w-full", onClick: props.handlePayWithWallet }, "Pay Now")));
 };
 
 // src/blocks/Payment/CheckoutForm.tsx
-import React96 from "react";
+import React97 from "react";
 import { Controller as Controller8, FormProvider as FormProvider4, useForm as useForm8 } from "react-hook-form";
 var CheckoutForm = (props) => {
   let isArabic = props.lang === "ar";
@@ -10116,7 +10164,7 @@ var CheckoutForm = (props) => {
       xl: "row"
     }
   };
-  return /* @__PURE__ */ React96.createElement(Card, null, /* @__PURE__ */ React96.createElement(CardHeader, null, /* @__PURE__ */ React96.createElement(CardTitle, null, props.texts.orderDetails)), /* @__PURE__ */ React96.createElement(CardContent, null, /* @__PURE__ */ React96.createElement("div", null, /* @__PURE__ */ React96.createElement("div", { className: "rounded border border-gray-300" }, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React97.createElement(Card, null, /* @__PURE__ */ React97.createElement(CardHeader, null, /* @__PURE__ */ React97.createElement(CardTitle, null, props.texts.orderDetails)), /* @__PURE__ */ React97.createElement(CardContent, null, /* @__PURE__ */ React97.createElement("div", null, /* @__PURE__ */ React97.createElement("div", { className: "rounded border border-gray-300" }, /* @__PURE__ */ React97.createElement(
     HawaTable,
     {
       pagination: false,
@@ -10130,13 +10178,13 @@ var CheckoutForm = (props) => {
       rows: props.products,
       bordersWidth: "1"
     }
-  )))), /* @__PURE__ */ React96.createElement(CardHeader, null, /* @__PURE__ */ React96.createElement(CardTitle, null, props.texts.billingAddress)), /* @__PURE__ */ React96.createElement("form", { onSubmit: handleSubmit(props.handlePayNow) }, /* @__PURE__ */ React96.createElement(CardContent, null, /* @__PURE__ */ React96.createElement("div", null, /* @__PURE__ */ React96.createElement(FormProvider4, { ...methods }, /* @__PURE__ */ React96.createElement("div", null, /* @__PURE__ */ React96.createElement(
+  )))), /* @__PURE__ */ React97.createElement(CardHeader, null, /* @__PURE__ */ React97.createElement(CardTitle, null, props.texts.billingAddress)), /* @__PURE__ */ React97.createElement("form", { onSubmit: handleSubmit(props.handlePayNow) }, /* @__PURE__ */ React97.createElement(CardContent, null, /* @__PURE__ */ React97.createElement("div", null, /* @__PURE__ */ React97.createElement(FormProvider4, { ...methods }, /* @__PURE__ */ React97.createElement("div", null, /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "firstName",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           type: "text",
@@ -10147,13 +10195,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React96.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React97.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "lastName",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10165,12 +10213,12 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React96.createElement(
+  )), /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10189,13 +10237,13 @@ var CheckoutForm = (props) => {
         }
       }
     }
-  ), /* @__PURE__ */ React96.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "streetAddress",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10207,13 +10255,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React96.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React96.createElement(
+  )), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "province",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10225,13 +10273,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React96.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React97.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "city",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10243,13 +10291,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React96.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React96.createElement(
+  )), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "buildingNumber",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10261,13 +10309,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React96.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React97.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "zipCode",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10279,13 +10327,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React96.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React96.createElement(
+  )), /* @__PURE__ */ React97.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React97.createElement(
     Controller8,
     {
       control,
       name: "country",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React96.createElement(
+      render: ({ field }) => /* @__PURE__ */ React97.createElement(
         HawaSelect,
         {
           native: true,
@@ -10296,18 +10344,18 @@ var CheckoutForm = (props) => {
           onChange: (e) => field.onChange(e.country_label),
           value: field.value ?? ""
         },
-        /* @__PURE__ */ React96.createElement("option", null),
-        props.countriesList.map((country, i) => /* @__PURE__ */ React96.createElement("option", { key: i }, country))
+        /* @__PURE__ */ React97.createElement("option", null),
+        props.countriesList.map((country, i) => /* @__PURE__ */ React97.createElement("option", { key: i }, country))
       )
     }
-  ))))), /* @__PURE__ */ React96.createElement(CardFooter, null, /* @__PURE__ */ React96.createElement(Button, { className: "w-full" }, props.texts.payNow)), " "));
+  ))))), /* @__PURE__ */ React97.createElement(CardFooter, null, /* @__PURE__ */ React97.createElement(Button, { className: "w-full" }, props.texts.payNow)), " "));
 };
 
 // src/blocks/Payment/Confirmation.tsx
-import React97 from "react";
+import React98 from "react";
 var ConfirmationPage = (props) => {
   let isArabic = props.lang === "ar";
-  return /* @__PURE__ */ React97.createElement(Card, null, /* @__PURE__ */ React97.createElement(CardContent, { headless: true }, " ", /* @__PURE__ */ React97.createElement("div", { className: "py-5 text-center text-3xl font-bold dark:text-white" }, props.confirmationTitle), /* @__PURE__ */ React97.createElement("div", { className: "py-5 dark:text-white" }, /* @__PURE__ */ React97.createElement("div", { className: "mb-2 text-center" }, props.texts.successMessage, " ", /* @__PURE__ */ React97.createElement("strong", null, props.userEmail)), /* @__PURE__ */ React97.createElement("div", { className: "text-center" }, props.texts.yourOrderNumber), /* @__PURE__ */ React97.createElement("div", { className: "text-center font-bold" }, props.orderNumber)), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-col items-center justify-center gap-4 py-5 pt-0" }, /* @__PURE__ */ React97.createElement(Button, { className: "w-full", onClick: props.handlePrint }, props.texts.print), /* @__PURE__ */ React97.createElement(Button, { className: "w-full", onClick: props.handleHistory }, props.texts.history), /* @__PURE__ */ React97.createElement(Button, { className: "w-full", onClick: props.handleHome }, props.texts.homePage), /* @__PURE__ */ React97.createElement("div", { className: " text-center text-sm dark:text-white" }, props.texts.fasterPaymentNote), /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React98.createElement(Card, null, /* @__PURE__ */ React98.createElement(CardContent, { headless: true }, " ", /* @__PURE__ */ React98.createElement("div", { className: "py-5 text-center text-3xl font-bold dark:text-white" }, props.confirmationTitle), /* @__PURE__ */ React98.createElement("div", { className: "py-5 dark:text-white" }, /* @__PURE__ */ React98.createElement("div", { className: "mb-2 text-center" }, props.texts.successMessage, " ", /* @__PURE__ */ React98.createElement("strong", null, props.userEmail)), /* @__PURE__ */ React98.createElement("div", { className: "text-center" }, props.texts.yourOrderNumber), /* @__PURE__ */ React98.createElement("div", { className: "text-center font-bold" }, props.orderNumber)), /* @__PURE__ */ React98.createElement("div", { className: "flex flex-col items-center justify-center gap-4 py-5 pt-0" }, /* @__PURE__ */ React98.createElement(Button, { className: "w-full", onClick: props.handlePrint }, props.texts.print), /* @__PURE__ */ React98.createElement(Button, { className: "w-full", onClick: props.handleHistory }, props.texts.history), /* @__PURE__ */ React98.createElement(Button, { className: "w-full", onClick: props.handleHome }, props.texts.homePage), /* @__PURE__ */ React98.createElement("div", { className: " text-center text-sm dark:text-white" }, props.texts.fasterPaymentNote), /* @__PURE__ */ React98.createElement(
     "a",
     {
       className: "clickable-link text-xs",
@@ -10318,9 +10366,9 @@ var ConfirmationPage = (props) => {
 };
 
 // src/blocks/Pricing/PricingPlans.tsx
-import React98 from "react";
+import React99 from "react";
 var PricingPlans = (props) => {
-  return /* @__PURE__ */ React98.createElement("div", null, /* @__PURE__ */ React98.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React99.createElement("div", null, /* @__PURE__ */ React99.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React99.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10328,7 +10376,7 @@ var PricingPlans = (props) => {
       options: props.billingCycles,
       onChangeTab: (e) => props.onCycleChange(e)
     }
-  ), /* @__PURE__ */ React98.createElement(
+  ), /* @__PURE__ */ React99.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10336,8 +10384,8 @@ var PricingPlans = (props) => {
       options: props.currencies,
       onChangeTab: (e) => props.onCurrencyChange(e)
     }
-  )), /* @__PURE__ */ React98.createElement("div", { className: "flex flex-row justify-between" }, props.plans.map((plan, index) => {
-    return /* @__PURE__ */ React98.createElement(
+  )), /* @__PURE__ */ React99.createElement("div", { className: "flex flex-row justify-between" }, props.plans.map((plan, index) => {
+    return /* @__PURE__ */ React99.createElement(
       HawaPricingCard,
       {
         key: index,
@@ -10354,8 +10402,8 @@ var PricingPlans = (props) => {
 };
 
 // src/blocks/Pricing/ComparingPlans.tsx
-import React99, { useState as useState47 } from "react";
-var CheckMark = () => /* @__PURE__ */ React99.createElement(
+import React100, { useState as useState49 } from "react";
+var CheckMark = () => /* @__PURE__ */ React100.createElement(
   "svg",
   {
     className: "h-5 w-5 text-green-500",
@@ -10363,7 +10411,7 @@ var CheckMark = () => /* @__PURE__ */ React99.createElement(
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React99.createElement(
+  /* @__PURE__ */ React100.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10372,7 +10420,7 @@ var CheckMark = () => /* @__PURE__ */ React99.createElement(
     }
   )
 );
-var UncheckMark = () => /* @__PURE__ */ React99.createElement(
+var UncheckMark = () => /* @__PURE__ */ React100.createElement(
   "svg",
   {
     className: "h-5 w-5 text-red-500",
@@ -10380,7 +10428,7 @@ var UncheckMark = () => /* @__PURE__ */ React99.createElement(
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React99.createElement(
+  /* @__PURE__ */ React100.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10390,9 +10438,9 @@ var UncheckMark = () => /* @__PURE__ */ React99.createElement(
   )
 );
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState47("sar");
-  const [currentCycle, setCurrentCycle] = useState47("month");
-  return /* @__PURE__ */ React99.createElement("div", { id: "detailed-pricing", className: "w-full overflow-x-auto" }, /* @__PURE__ */ React99.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React99.createElement(
+  const [currentCurrency, setCurrentCurrency] = useState49("sar");
+  const [currentCycle, setCurrentCycle] = useState49("month");
+  return /* @__PURE__ */ React100.createElement("div", { id: "detailed-pricing", className: "w-full overflow-x-auto" }, /* @__PURE__ */ React100.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React100.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10400,7 +10448,7 @@ var ComparingPlans = (props) => {
       options: props.billingCycles,
       onChangeTab: (e) => props.onCycleChange(e)
     }
-  ), /* @__PURE__ */ React99.createElement(
+  ), /* @__PURE__ */ React100.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10408,9 +10456,9 @@ var ComparingPlans = (props) => {
       options: props.currencies,
       onChangeTab: (e) => props.onCurrencyChange(e)
     }
-  )), /* @__PURE__ */ React99.createElement("div", { className: " overflow-hidden rounded" }, /* @__PURE__ */ React99.createElement("div", { className: "grid grid-cols-4 gap-x-2 border-b border-t border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white" }, /* @__PURE__ */ React99.createElement("div", { className: "flex items-center" }), props.plans.map((plan) => /* @__PURE__ */ React99.createElement("div", null, /* @__PURE__ */ React99.createElement("h5", { className: "text-md 0 font-bold text-gray-500 dark:text-gray-400" }, plan.texts.title), /* @__PURE__ */ React99.createElement("div", { className: " flex items-baseline  text-gray-900 dark:text-white" }, /* @__PURE__ */ React99.createElement(React99.Fragment, null, /* @__PURE__ */ React99.createElement("span", { className: "text-5xl font-extrabold tracking-tight" }, plan.price), /* @__PURE__ */ React99.createElement("span", { className: "mx-1 text-sm font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React99.createElement("span", { className: "ml-1 text-xl font-normal text-gray-500 dark:text-gray-400" }, "/ ", plan.texts.cycleText)), /* @__PURE__ */ React99.createElement("h5", { className: "text-md  font-normal text-gray-500 dark:text-gray-400" }, plan.texts.subtitle)))), props.plans?.map((plan) => {
+  )), /* @__PURE__ */ React100.createElement("div", { className: " overflow-hidden rounded" }, /* @__PURE__ */ React100.createElement("div", { className: "grid grid-cols-4 gap-x-2 border-b border-t border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white" }, /* @__PURE__ */ React100.createElement("div", { className: "flex items-center" }), props.plans.map((plan) => /* @__PURE__ */ React100.createElement("div", null, /* @__PURE__ */ React100.createElement("h5", { className: "text-md 0 font-bold text-gray-500 dark:text-gray-400" }, plan.texts.title), /* @__PURE__ */ React100.createElement("div", { className: " flex items-baseline  text-gray-900 dark:text-white" }, /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement("span", { className: "text-5xl font-extrabold tracking-tight" }, plan.price), /* @__PURE__ */ React100.createElement("span", { className: "mx-1 text-sm font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React100.createElement("span", { className: "ml-1 text-xl font-normal text-gray-500 dark:text-gray-400" }, "/ ", plan.texts.cycleText)), /* @__PURE__ */ React100.createElement("h5", { className: "text-md  font-normal text-gray-500 dark:text-gray-400" }, plan.texts.subtitle)))), props.plans?.map((plan) => {
     return plan.features.map((feature) => {
-      return /* @__PURE__ */ React99.createElement("div", { className: "grid grid-cols-4 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700 dark:border-gray-700" }, /* @__PURE__ */ React99.createElement("div", { className: "  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400" }, feature.text, feature.description && /* @__PURE__ */ React99.createElement(Tooltip, { side: "right", content: feature.description }, /* @__PURE__ */ React99.createElement(
+      return /* @__PURE__ */ React100.createElement("div", { className: "grid grid-cols-4 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700 dark:border-gray-700" }, /* @__PURE__ */ React100.createElement("div", { className: "  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400" }, feature.text, feature.description && /* @__PURE__ */ React100.createElement(Tooltip, { side: "right", content: feature.description }, /* @__PURE__ */ React100.createElement(
         "svg",
         {
           stroke: "currentColor",
@@ -10420,44 +10468,44 @@ var ComparingPlans = (props) => {
           height: "1em",
           width: "1em"
         },
-        /* @__PURE__ */ React99.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
-      ))), /* @__PURE__ */ React99.createElement(UncheckMark, null), /* @__PURE__ */ React99.createElement(CheckMark, null), /* @__PURE__ */ React99.createElement(UncheckMark, null));
+        /* @__PURE__ */ React100.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
+      ))), /* @__PURE__ */ React100.createElement(UncheckMark, null), /* @__PURE__ */ React100.createElement(CheckMark, null), /* @__PURE__ */ React100.createElement(UncheckMark, null));
     });
   })));
 };
 
 // src/blocks/Pricing/HorizontalPricing.tsx
-import React100, { useState as useState48 } from "react";
+import React101, { useState as useState50 } from "react";
 import clsx33 from "clsx";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState48(null);
+  const [selectedCard, setSelectedCard] = useState50(null);
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
     { title: "enterprise", price: "$149", cycle: "/mo" }
   ];
-  return /* @__PURE__ */ React100.createElement("div", { className: "z-10 w-full max-w-screen-sm" }, /* @__PURE__ */ React100.createElement("div", { className: "max-w-2xl " }, /* @__PURE__ */ React100.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement("div", { className: "z-10 w-full max-w-screen-sm" }, /* @__PURE__ */ React101.createElement("div", { className: "max-w-2xl " }, /* @__PURE__ */ React101.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React101.createElement(
     HawaRadio,
     {
       design: "tabs",
       options: props.currencies,
       defaultValue: props.currentCurrency
     }
-  ), /* @__PURE__ */ React100.createElement(
+  ), /* @__PURE__ */ React101.createElement(
     HawaRadio,
     {
       design: "tabs",
       options: props.billingCycles,
       defaultValue: props.currentCycle
     }
-  )), data.map((d) => /* @__PURE__ */ React100.createElement(
+  )), data.map((d) => /* @__PURE__ */ React101.createElement(
     "label",
     {
       htmlFor: d.title,
       className: "",
       onClick: () => setSelectedCard(d.title)
     },
-    /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement(
       "input",
       {
         type: "radio",
@@ -10466,7 +10514,7 @@ var HorizontalPricing = (props) => {
         className: "peer appearance-none"
       }
     ),
-    /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement(
       "div",
       {
         className: clsx33(
@@ -10474,18 +10522,18 @@ var HorizontalPricing = (props) => {
           "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
         )
       },
-      /* @__PURE__ */ React100.createElement("div", { className: "peer flex items-center gap-4" }, /* @__PURE__ */ React100.createElement(CheckIcons, null), /* @__PURE__ */ React100.createElement(
+      /* @__PURE__ */ React101.createElement("div", { className: "peer flex items-center gap-4" }, /* @__PURE__ */ React101.createElement(CheckIcons, null), /* @__PURE__ */ React101.createElement(
         CardText,
         {
           title: "Enterprise",
           subtitle: "For startups and new businesses"
         }
       )),
-      /* @__PURE__ */ React100.createElement(CardPrice, { amount: d.price, cycle: d.cycle })
+      /* @__PURE__ */ React101.createElement(CardPrice, { amount: d.price, cycle: d.cycle })
     )
   ))));
 };
-var CheckIcons = () => /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
+var CheckIcons = () => /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(
   "svg",
   {
     fill: "none",
@@ -10494,7 +10542,7 @@ var CheckIcons = () => /* @__PURE__ */ React100.createElement(React100.Fragment,
     stroke: "currentColor",
     className: "default h-8 w-8 text-neutral-500"
   },
-  /* @__PURE__ */ React100.createElement(
+  /* @__PURE__ */ React101.createElement(
     "path",
     {
       strokeLinecap: "round",
@@ -10502,14 +10550,14 @@ var CheckIcons = () => /* @__PURE__ */ React100.createElement(React100.Fragment,
       d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
     }
   )
-), /* @__PURE__ */ React100.createElement(
+), /* @__PURE__ */ React101.createElement(
   "svg",
   {
     viewBox: "0 0 24 24",
     fill: "currentColor",
     className: "active hidden h-8 w-8 text-blue-500"
   },
-  /* @__PURE__ */ React100.createElement(
+  /* @__PURE__ */ React101.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10518,21 +10566,21 @@ var CheckIcons = () => /* @__PURE__ */ React100.createElement(React100.Fragment,
     }
   )
 ));
-var CardText = (props) => /* @__PURE__ */ React100.createElement("div", { className: "peer flex flex-col items-start " }, /* @__PURE__ */ React100.createElement("h2", { className: "font-medium text-neutral-700 dark:text-gray-100 sm:text-xl" }, props.title), /* @__PURE__ */ React100.createElement("p", { className: "text-sm text-neutral-500 dark:text-gray-300" }, props.subtitle, " "));
-var CardPrice = (props) => /* @__PURE__ */ React100.createElement("h2", { className: "peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl" }, props.amount, /* @__PURE__ */ React100.createElement("span", { className: "text-base font-medium text-neutral-400" }, props.cycle));
+var CardText = (props) => /* @__PURE__ */ React101.createElement("div", { className: "peer flex flex-col items-start " }, /* @__PURE__ */ React101.createElement("h2", { className: "font-medium text-neutral-700 dark:text-gray-100 sm:text-xl" }, props.title), /* @__PURE__ */ React101.createElement("p", { className: "text-sm text-neutral-500 dark:text-gray-300" }, props.subtitle, " "));
+var CardPrice = (props) => /* @__PURE__ */ React101.createElement("h2", { className: "peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl" }, props.amount, /* @__PURE__ */ React101.createElement("span", { className: "text-base font-medium text-neutral-400" }, props.cycle));
 
 // src/blocks/Referral/ReferralAccount.tsx
-import React101 from "react";
+import React102 from "react";
 var ReferralAccount = ({
   referralLink,
   referralCode
 }) => {
-  return /* @__PURE__ */ React101.createElement(Card, null, /* @__PURE__ */ React101.createElement(CardContent, { headless: true }, /* @__PURE__ */ React101.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React101.createElement("div", { className: "mb-1" }, "Referral Code"), /* @__PURE__ */ React101.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React101.createElement("span", { className: "ml-3 font-bold" }, referralCode), /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React102.createElement(Card, null, /* @__PURE__ */ React102.createElement(CardContent, { headless: true }, /* @__PURE__ */ React102.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React102.createElement("div", { className: "mb-1" }, "Referral Code"), /* @__PURE__ */ React102.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React102.createElement("span", { className: "ml-3 font-bold" }, referralCode), /* @__PURE__ */ React102.createElement(
     Button,
     {
       onClick: () => navigator.clipboard.writeText(referralCode)
     },
-    /* @__PURE__ */ React101.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React102.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -10542,14 +10590,14 @@ var ReferralAccount = ({
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React101.createElement("path", { d: "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" })
+      /* @__PURE__ */ React102.createElement("path", { d: "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" })
     ), " ")
-  ))), /* @__PURE__ */ React101.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React101.createElement("div", { className: "mb-1" }, "Referral Link"), /* @__PURE__ */ React101.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React101.createElement("span", { className: "ml-3 font-bold" }, referralLink), /* @__PURE__ */ React101.createElement(
+  ))), /* @__PURE__ */ React102.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React102.createElement("div", { className: "mb-1" }, "Referral Link"), /* @__PURE__ */ React102.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React102.createElement("span", { className: "ml-3 font-bold" }, referralLink), /* @__PURE__ */ React102.createElement(
     Button,
     {
       onClick: () => navigator.clipboard.writeText(referralLink)
     },
-    /* @__PURE__ */ React101.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React102.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -10559,13 +10607,13 @@ var ReferralAccount = ({
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React101.createElement("path", { d: "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" })
+      /* @__PURE__ */ React102.createElement("path", { d: "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" })
     ), " ")
   )))));
 };
 
 // src/blocks/Referral/ReferralSettlement.tsx
-import React102 from "react";
+import React103 from "react";
 import { Controller as Controller9, FormProvider as FormProvider5, useForm as useForm9 } from "react-hook-form";
 var ReferralSettlement = ({
   referralLink,
@@ -10578,12 +10626,12 @@ var ReferralSettlement = ({
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React102.createElement(Card, null, /* @__PURE__ */ React102.createElement(CardContent, { headless: true }, /* @__PURE__ */ React102.createElement("div", null, /* @__PURE__ */ React102.createElement(FormProvider5, { ...methods }, /* @__PURE__ */ React102.createElement(HawaTextField, { label: "IBAN" }), /* @__PURE__ */ React102.createElement(HawaTextField, { label: "Holder Name" }), /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(Card, null, /* @__PURE__ */ React103.createElement(CardContent, { headless: true }, /* @__PURE__ */ React103.createElement("div", null, /* @__PURE__ */ React103.createElement(FormProvider5, { ...methods }, /* @__PURE__ */ React103.createElement(HawaTextField, { label: "IBAN" }), /* @__PURE__ */ React103.createElement(HawaTextField, { label: "Holder Name" }), /* @__PURE__ */ React103.createElement(
     Controller9,
     {
       control,
       name: "bank",
-      render: ({ field }) => /* @__PURE__ */ React102.createElement(
+      render: ({ field }) => /* @__PURE__ */ React103.createElement(
         HawaSelect,
         {
           label: "Bank",
@@ -10602,13 +10650,13 @@ var ReferralSettlement = ({
         }
       )
     }
-  ))), /* @__PURE__ */ React102.createElement("div", null, /* @__PURE__ */ React102.createElement(Button, { className: "mt-6 w-full" }, "Add Bank Account")), withdrawError && /* @__PURE__ */ React102.createElement("div", null, /* @__PURE__ */ React102.createElement(
+  ))), /* @__PURE__ */ React103.createElement("div", null, /* @__PURE__ */ React103.createElement(Button, { className: "mt-6 w-full" }, "Add Bank Account")), withdrawError && /* @__PURE__ */ React103.createElement("div", null, /* @__PURE__ */ React103.createElement(
     HawaAlert,
     {
       text: "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20",
       severity: "warning"
     }
-  )), /* @__PURE__ */ React102.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React102.createElement("div", { className: "mb-1" }, "Settlement Accounts"), /* @__PURE__ */ React102.createElement("div", { className: "rounded" }, /* @__PURE__ */ React102.createElement(
+  )), /* @__PURE__ */ React103.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React103.createElement("div", { className: "mb-1" }, "Settlement Accounts"), /* @__PURE__ */ React103.createElement("div", { className: "rounded" }, /* @__PURE__ */ React103.createElement(
     SettlementAccountCard,
     {
       bank: "Al Inma Bank",
@@ -10616,14 +10664,14 @@ var ReferralSettlement = ({
       accountHolder: "Zakher Masri",
       default: true
     }
-  ), /* @__PURE__ */ React102.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     SettlementAccountCard,
     {
       bank: "Al Rajihi Bank",
       iban: "SA10228094028098329119",
       accountHolder: "Zakher Masri"
     }
-  ), /* @__PURE__ */ React102.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     SettlementAccountCard,
     {
       bank: "Al Inma Bank",
@@ -10633,13 +10681,13 @@ var ReferralSettlement = ({
   )))));
 };
 var SettlementAccountCard = (props) => {
-  return /* @__PURE__ */ React102.createElement("div", { className: "mb-3 flex flex-row items-center justify-between rounded border bg-background p-3" }, /* @__PURE__ */ React102.createElement("div", { className: "flex flex-col justify-between" }, /* @__PURE__ */ React102.createElement("div", { className: "text-xs" }, props.bank), /* @__PURE__ */ React102.createElement("div", null, props.accountHolder), /* @__PURE__ */ React102.createElement("div", { className: "text-xs" }, props.iban)), /* @__PURE__ */ React102.createElement("div", { className: "flex flex-row items-center justify-center gap-2" }, props.default && /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement("div", { className: "mb-3 flex flex-row items-center justify-between rounded border bg-background p-3" }, /* @__PURE__ */ React103.createElement("div", { className: "flex flex-col justify-between" }, /* @__PURE__ */ React103.createElement("div", { className: "text-xs" }, props.bank), /* @__PURE__ */ React103.createElement("div", null, props.accountHolder), /* @__PURE__ */ React103.createElement("div", { className: "text-xs" }, props.iban)), /* @__PURE__ */ React103.createElement("div", { className: "flex flex-row items-center justify-center gap-2" }, props.default && /* @__PURE__ */ React103.createElement(
     HawaChip,
     {
       label: "Default",
       size: "small"
     }
-  ), /* @__PURE__ */ React102.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     HawaMenu,
     {
       size: "small",
@@ -10651,7 +10699,7 @@ var SettlementAccountCard = (props) => {
         ]
       ]
     },
-    /* @__PURE__ */ React102.createElement(Button, { variant: "outline", size: "icon" }, /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement(Button, { variant: "outline", size: "icon" }, /* @__PURE__ */ React103.createElement(
       "svg",
       {
         "aria-label": "Vertical Three Dots Menu Icon",
@@ -10663,53 +10711,53 @@ var SettlementAccountCard = (props) => {
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React102.createElement("path", { d: "M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" })
+      /* @__PURE__ */ React103.createElement("path", { d: "M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" })
     ))
   )));
 };
 
 // src/blocks/Referral/ReferralStats.tsx
-import React103 from "react";
+import React104 from "react";
 var ReferralStats = ({
   referralLink,
   referralCode,
   withdrawError
 }) => {
-  return /* @__PURE__ */ React103.createElement(Card, null, /* @__PURE__ */ React103.createElement(CardContent, { headless: true }, /* @__PURE__ */ React103.createElement("div", { className: "mb-1" }, "Stats"), /* @__PURE__ */ React103.createElement("div", { className: "justi flex flex-row gap-1" }, /* @__PURE__ */ React103.createElement(NumberCard, { title: "Clicks", number: 22 }), /* @__PURE__ */ React103.createElement(NumberCard, { title: "Sign-ups", number: 32 }), /* @__PURE__ */ React103.createElement(NumberCard, { title: "Commission", number: "213.22 SAR" })), /* @__PURE__ */ React103.createElement(Button, { className: "mt-6 w-full" }, "Withdraw Money"), withdrawError && /* @__PURE__ */ React103.createElement("div", null, /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(Card, null, /* @__PURE__ */ React104.createElement(CardContent, { headless: true }, /* @__PURE__ */ React104.createElement("div", { className: "mb-1" }, "Stats"), /* @__PURE__ */ React104.createElement("div", { className: "justi flex flex-row gap-1" }, /* @__PURE__ */ React104.createElement(NumberCard, { title: "Clicks", number: 22 }), /* @__PURE__ */ React104.createElement(NumberCard, { title: "Sign-ups", number: 32 }), /* @__PURE__ */ React104.createElement(NumberCard, { title: "Commission", number: "213.22 SAR" })), /* @__PURE__ */ React104.createElement(Button, { className: "mt-6 w-full" }, "Withdraw Money"), withdrawError && /* @__PURE__ */ React104.createElement("div", null, /* @__PURE__ */ React104.createElement(
     HawaAlert,
     {
       text: "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20",
       severity: "warning"
     }
-  )), /* @__PURE__ */ React103.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React103.createElement("div", { className: "mb-1" }, "Sign ups"), /* @__PURE__ */ React103.createElement("div", { className: "rounded" }, /* @__PURE__ */ React103.createElement(
+  )), /* @__PURE__ */ React104.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React104.createElement("div", { className: "mb-1" }, "Sign ups"), /* @__PURE__ */ React104.createElement("div", { className: "rounded" }, /* @__PURE__ */ React104.createElement(
     ReferralSignUpCard,
     {
       date: "2020/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React103.createElement(
+  ), /* @__PURE__ */ React104.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React103.createElement(
+  ), /* @__PURE__ */ React104.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React103.createElement(
+  ), /* @__PURE__ */ React104.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React103.createElement(
+  ), /* @__PURE__ */ React104.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
@@ -10718,26 +10766,26 @@ var ReferralStats = ({
     }
   )))));
 };
-var NumberCard = (props) => /* @__PURE__ */ React103.createElement("div", { className: "w-full rounded border bg-background p-2" }, /* @__PURE__ */ React103.createElement("div", { className: "text-sm" }, props.title), /* @__PURE__ */ React103.createElement("div", { className: "font-bold" }, props.number));
-var ReferralSignUpCard = (props) => /* @__PURE__ */ React103.createElement("div", { className: "mb-3 rounded border-b bg-background p-2" }, /* @__PURE__ */ React103.createElement("div", { className: "text-xs" }, props.date), /* @__PURE__ */ React103.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React103.createElement("div", null, props.email), /* @__PURE__ */ React103.createElement("div", null, props.amount)));
+var NumberCard = (props) => /* @__PURE__ */ React104.createElement("div", { className: "w-full rounded border bg-background p-2" }, /* @__PURE__ */ React104.createElement("div", { className: "text-sm" }, props.title), /* @__PURE__ */ React104.createElement("div", { className: "font-bold" }, props.number));
+var ReferralSignUpCard = (props) => /* @__PURE__ */ React104.createElement("div", { className: "mb-3 rounded border-b bg-background p-2" }, /* @__PURE__ */ React104.createElement("div", { className: "text-xs" }, props.date), /* @__PURE__ */ React104.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React104.createElement("div", null, props.email), /* @__PURE__ */ React104.createElement("div", null, props.amount)));
 
 // src/blocks/Misc/NotFound.tsx
-import React104 from "react";
+import React105 from "react";
 var NotFound = ({
   variant = "contained",
   texts
 }) => {
-  return /* @__PURE__ */ React104.createElement(Card, null, /* @__PURE__ */ React104.createElement(CardContent, { headless: true }, /* @__PURE__ */ React104.createElement("div", { className: "flex flex-col items-center dark:text-white" }, /* @__PURE__ */ React104.createElement("div", { className: "text-center text-6xl font-bold " }, "404"), /* @__PURE__ */ React104.createElement("div", { className: "m-2 text-center text-xl font-bold " }, texts?.pageNotFound ?? "Page Not Found"), /* @__PURE__ */ React104.createElement("div", { className: "mb-4 text-center" }, texts?.ifLost ?? /* @__PURE__ */ React104.createElement(React104.Fragment, null, "If you're lost please contact us", " ", /* @__PURE__ */ React104.createElement("span", { className: "clickable-link" }, "help@sikka.io"))), /* @__PURE__ */ React104.createElement(Button, { className: "w-full" }, texts?.home ?? "Home"))));
+  return /* @__PURE__ */ React105.createElement(Card, null, /* @__PURE__ */ React105.createElement(CardContent, { headless: true }, /* @__PURE__ */ React105.createElement("div", { className: "flex flex-col items-center dark:text-white" }, /* @__PURE__ */ React105.createElement("div", { className: "text-center text-6xl font-bold " }, "404"), /* @__PURE__ */ React105.createElement("div", { className: "m-2 text-center text-xl font-bold " }, texts?.pageNotFound ?? "Page Not Found"), /* @__PURE__ */ React105.createElement("div", { className: "mb-4 text-center" }, texts?.ifLost ?? /* @__PURE__ */ React105.createElement(React105.Fragment, null, "If you're lost please contact us", " ", /* @__PURE__ */ React105.createElement("span", { className: "clickable-link" }, "help@sikka.io"))), /* @__PURE__ */ React105.createElement(Button, { className: "w-full" }, texts?.home ?? "Home"))));
 };
 
 // src/blocks/Misc/EmptyState.tsx
-import React105 from "react";
+import React106 from "react";
 var EmptyState = ({
   variant = "contained",
   texts,
   onActionClick
 }) => {
-  return /* @__PURE__ */ React105.createElement(Card, null, /* @__PURE__ */ React105.createElement(CardContent, { headless: true }, /* @__PURE__ */ React105.createElement("div", { className: "flex flex-col items-center justify-center text-center " }, /* @__PURE__ */ React105.createElement("div", { className: "flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold text-primary-foreground" }, /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(Card, null, /* @__PURE__ */ React106.createElement(CardContent, { headless: true }, /* @__PURE__ */ React106.createElement("div", { className: "flex flex-col items-center justify-center text-center " }, /* @__PURE__ */ React106.createElement("div", { className: "flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold text-primary-foreground" }, /* @__PURE__ */ React106.createElement(
     "svg",
     {
       stroke: "currentColor",
@@ -10747,36 +10795,36 @@ var EmptyState = ({
       height: "0.35em",
       width: "0.35em"
     },
-    /* @__PURE__ */ React105.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
-  )), /* @__PURE__ */ React105.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.youreCaughtUp ?? "You're all caught up"))), /* @__PURE__ */ React105.createElement(CardFooter, null, /* @__PURE__ */ React105.createElement(Button, { className: "w-full", onClick: () => onActionClick() }, texts?.actionText ?? "Go Home")));
+    /* @__PURE__ */ React106.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
+  )), /* @__PURE__ */ React106.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.youreCaughtUp ?? "You're all caught up"))), /* @__PURE__ */ React106.createElement(CardFooter, null, /* @__PURE__ */ React106.createElement(Button, { className: "w-full", onClick: () => onActionClick() }, texts?.actionText ?? "Go Home")));
 };
 
 // src/blocks/Misc/Testimonial.tsx
-import React106 from "react";
+import React107 from "react";
 var Testimonial = (props) => {
-  return /* @__PURE__ */ React106.createElement(Card, null, /* @__PURE__ */ React106.createElement(CardContent, { headless: true }, /* @__PURE__ */ React106.createElement("div", null, /* @__PURE__ */ React106.createElement("p", { className: "mb-4 max-w-sm" }, "The team at Sikka Software is simply amazing. The tech is easy to follow, easy to work with, and infinitely flexible. The solution opportunities created by Tines are endless.")), /* @__PURE__ */ React106.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React106.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none" }, /* @__PURE__ */ React106.createElement("rect", { width: "48", height: "48", rx: "24", fill: "#45BE8B" }), /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.createElement(Card, null, /* @__PURE__ */ React107.createElement(CardContent, { headless: true }, /* @__PURE__ */ React107.createElement("div", null, /* @__PURE__ */ React107.createElement("p", { className: "mb-4 max-w-sm" }, "The team at Sikka Software is simply amazing. The tech is easy to follow, easy to work with, and infinitely flexible. The solution opportunities created by Tines are endless.")), /* @__PURE__ */ React107.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React107.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none" }, /* @__PURE__ */ React107.createElement("rect", { width: "48", height: "48", rx: "24", fill: "#45BE8B" }), /* @__PURE__ */ React107.createElement(
     "path",
     {
       d: "M14.1412 22.4427L17.5803 16.5199C17.7671 16.1981 18.1112 16 18.4834 16H20.8581C21.653 16 22.1565 16.8528 21.7725 17.5488L19.3042 22.0225C19.2202 22.1747 19.1762 22.3458 19.1762 22.5196C19.1762 23.0879 19.6369 23.5486 20.2052 23.5486H21.5827C22.1594 23.5486 22.627 24.0162 22.627 24.5929V31.347C22.627 31.9237 22.1594 32.3913 21.5827 32.3913H15.0443C14.4676 32.3913 14 31.9237 14 31.347V22.9671C14 22.7829 14.0487 22.602 14.1412 22.4427Z",
       fill: "#FFFFFF"
     }
-  ), /* @__PURE__ */ React106.createElement(
+  ), /* @__PURE__ */ React107.createElement(
     "path",
     {
       d: "M25.356 22.4427L28.7951 16.5199C28.982 16.1981 29.326 16 29.6982 16H32.0729C32.8679 16 33.3713 16.8528 32.9873 17.5488L30.5191 22.0225C30.4351 22.1747 30.391 22.3458 30.391 22.5196C30.391 23.0879 30.8518 23.5486 31.4201 23.5486H32.7975C33.3743 23.5486 33.8418 24.0162 33.8418 24.5929V31.347C33.8418 31.9237 33.3743 32.3913 32.7975 32.3913H26.2592C25.6824 32.3913 25.2148 31.9237 25.2148 31.347V22.9671C25.2148 22.7829 25.2636 22.602 25.356 22.4427Z",
       fill: "#FFFFFF"
     }
-  )), /* @__PURE__ */ React106.createElement("span", { className: "border border-l " }), " ", /* @__PURE__ */ React106.createElement("div", null, /* @__PURE__ */ React106.createElement("strong", null, "Brent Lassi"), /* @__PURE__ */ React106.createElement("div", null, " Chief Information Security Officer")))));
+  )), /* @__PURE__ */ React107.createElement("span", { className: "border border-l " }), " ", /* @__PURE__ */ React107.createElement("div", null, /* @__PURE__ */ React107.createElement("strong", null, "Brent Lassi"), /* @__PURE__ */ React107.createElement("div", null, " Chief Information Security Officer")))));
 };
 
 // src/blocks/Misc/LeadGenerator.tsx
-import React107 from "react";
+import React108 from "react";
 var LeadGenerator = ({
   variant = "contained",
   texts,
   handleNewsletterSub
 }) => {
-  return /* @__PURE__ */ React107.createElement(Card, null, /* @__PURE__ */ React107.createElement(CardHeader, null, /* @__PURE__ */ React107.createElement(CardTitle, null, texts?.title), /* @__PURE__ */ React107.createElement(CardDescription, null, texts?.subtitle)), /* @__PURE__ */ React107.createElement(CardContent, null, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(Card, null, /* @__PURE__ */ React108.createElement(CardHeader, null, /* @__PURE__ */ React108.createElement(CardTitle, null, texts?.title), /* @__PURE__ */ React108.createElement(CardDescription, null, texts?.subtitle)), /* @__PURE__ */ React108.createElement(CardContent, null, /* @__PURE__ */ React108.createElement(
     "form",
     {
       className: "flex flex-row gap-2",
@@ -10785,36 +10833,33 @@ var LeadGenerator = ({
         handleNewsletterSub(e.target[0].value);
       }
     },
-    /* @__PURE__ */ React107.createElement(Input, { type: "email", name: "email", placeholder: "example@sikka.io" }),
-    /* @__PURE__ */ React107.createElement(Button, null, texts?.submit ?? "Submit")
+    /* @__PURE__ */ React108.createElement(Input, { type: "email", name: "email", placeholder: "example@sikka.io" }),
+    /* @__PURE__ */ React108.createElement(Button, null, texts?.submit ?? "Submit")
   )));
 };
 
 // src/blocks/Misc/Announcement.tsx
-import React108 from "react";
+import React109 from "react";
 var Announcement = ({
   variant = "contained",
   onActionClick,
   ...props
 }) => {
-  return /* @__PURE__ */ React108.createElement(Card, null, /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(Card, null, /* @__PURE__ */ React109.createElement(
     CardContent,
     {
       headless: true,
       className: "flex flex-row items-center justify-between"
     },
-    /* @__PURE__ */ React108.createElement("div", { className: "flex flex-col items-start justify-center " }, /* @__PURE__ */ React108.createElement("span", { className: "text-lg font-bold" }, props.title), /* @__PURE__ */ React108.createElement("span", { className: "text-sm" }, props.subtitle)),
-    /* @__PURE__ */ React108.createElement(Button, { onClick: () => onActionClick() }, props.actionText)
+    /* @__PURE__ */ React109.createElement("div", { className: "flex flex-col items-start justify-center " }, /* @__PURE__ */ React109.createElement("span", { className: "text-lg font-bold" }, props.title), /* @__PURE__ */ React109.createElement("span", { className: "text-sm" }, props.subtitle)),
+    /* @__PURE__ */ React109.createElement(Button, { onClick: () => onActionClick() }, props.actionText)
   ));
 };
 
 // src/blocks/Misc/NoPermission.tsx
-import React109 from "react";
-var NoPermission = ({
-  variant = "contained",
-  texts
-}) => {
-  return /* @__PURE__ */ React109.createElement(Card, null, /* @__PURE__ */ React109.createElement(CardContent, { headless: true }, /* @__PURE__ */ React109.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React109.createElement("div", { className: "flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground" }, /* @__PURE__ */ React109.createElement(
+import React110 from "react";
+var NoPermission = ({ texts }) => {
+  return /* @__PURE__ */ React110.createElement(Card, null, /* @__PURE__ */ React110.createElement(CardContent, { headless: true }, /* @__PURE__ */ React110.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React110.createElement("div", { className: "flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground" }, /* @__PURE__ */ React110.createElement(
     "svg",
     {
       stroke: "currentColor",
@@ -10824,12 +10869,12 @@ var NoPermission = ({
       height: "0.35em",
       width: "0.35em"
     },
-    /* @__PURE__ */ React109.createElement("path", { d: "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" })
-  ), " "), /* @__PURE__ */ React109.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.title ?? "You don't have permission"), /* @__PURE__ */ React109.createElement("div", null, texts?.subtitle ?? "If you think this is a problem please contact your administrator or our customer support"))));
+    /* @__PURE__ */ React110.createElement("path", { d: "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" })
+  ), " "), /* @__PURE__ */ React110.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.title ?? "You don't have permission"), /* @__PURE__ */ React110.createElement("div", null, texts?.subtitle ?? "If you think this is a problem please contact your administrator or our customer support"))));
 };
 
 // src/hooks/useHover.ts
-import { useEffect as useEffect26, useRef as useRef18, useState as useState49 } from "react";
+import { useEffect as useEffect27, useRef as useRef19, useState as useState51 } from "react";
 export {
   ActionCard,
   Announcement,
@@ -10848,6 +10893,7 @@ export {
   CardTitle,
   Carousel,
   ChargeWalletForm,
+  CheckEmail,
   CheckoutForm,
   CodeConfirmation,
   ComparingPlans,
@@ -10962,3 +11008,4 @@ export {
   toast,
   useToast
 };
+//# sourceMappingURL=index.mjs.map