@sikka/hawa 0.1.85 → 0.1.87

package/dist/index.mjs

@@ -1042,6 +1042,7 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuItem = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React19.createElement(
   DropdownMenuPrimitive.Item,
   {
+    disabled: props.disabled,
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -1178,6 +1179,7 @@ var DropdownMenu = ({
       return item.subitems ? /* @__PURE__ */ React19.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React19.createElement(DropdownMenuSubTrigger, { dir: direction }, item.icon && item.icon, item.label), /* @__PURE__ */ React19.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React19.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React19.createElement(
         DropdownMenuItem,
         {
+          disabled: subitem.disabled,
           className: "flex flex-row gap-2",
           onSelect: () => subitem.action(),
           key: subIndex
@@ -1187,6 +1189,7 @@ var DropdownMenu = ({
       ))))) : /* @__PURE__ */ React19.createElement(
         DropdownMenuItem,
         {
+          disabled: item.disabled,
           className: "flex flex-row gap-2",
           key: index,
           onSelect: (e) => {
@@ -6391,15 +6394,54 @@ var HawaStoreButtons = (props) => {
   ))), /* @__PURE__ */ React57.createElement("div", null, /* @__PURE__ */ React57.createElement("div", { className: "text-xs" }, "GET IT ON"), /* @__PURE__ */ React57.createElement("div", { className: "font-sans -mt-1 text-xl font-semibold" }, "Google Play")))));
 };
 
+// src/elements/ActionCard.tsx
+import React58, { useState as useState30 } from "react";
+var ActionCard = (props) => {
+  const [hovered, setHovered] = useState30(false);
+  return /* @__PURE__ */ React58.createElement("div", { className: "flex h-full w-full flex-col gap-1 " }, /* @__PURE__ */ React58.createElement(
+    "div",
+    {
+      className: "group relative h-full w-full rounded border bg-background bg-cover bg-center transition-all duration-500 hover:drop-shadow-2xl",
+      style: {
+        backgroundImage: `url(${props.blank ? "" : props.cardImage})`
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    },
+    props.blank ? /* @__PURE__ */ React58.createElement("div", { className: "flex h-full flex-col items-center justify-center " }, /* @__PURE__ */ React58.createElement(
+      "svg",
+      {
+        className: "h-10 w-10 text-foreground",
+        stroke: "currentColor",
+        fill: "currentColor",
+        "stroke-width": "0",
+        viewBox: "0 0 24 24",
+        height: "1em",
+        width: "1em",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ React58.createElement("path", { d: "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" })
+    )) : /* @__PURE__ */ React58.createElement("div", { className: "absolute inset-0 rounded bg-black opacity-50" }),
+    /* @__PURE__ */ React58.createElement("div", { className: "absolute bottom-2 right-2 z-10 opacity-0 transition-all duration-200 group-hover:opacity-100" }, props.inCardActions),
+    !props.blank && /* @__PURE__ */ React58.createElement("div", { className: "relative p-4" }, /* @__PURE__ */ React58.createElement("h1", { className: "text-white" }, props.title), /* @__PURE__ */ React58.createElement("p", { className: "text-white" }, props.subtitle))
+  ), /* @__PURE__ */ React58.createElement(
+    "div",
+    {
+      className: `flex flex-row justify-between text-sm transition-all duration-200 ${hovered ? "opacity-100" : "opacity-0"}`
+    },
+    props.bottomElement
+  ));
+};
+
 // src/elements/Carousel.tsx
-import React58 from "react";
+import React59 from "react";
 
 // src/hooks/useCarousel.ts
-import { useState as useState30, useRef as useRef11 } from "react";
+import { useState as useState31, useRef as useRef11 } from "react";
 var useCarousel = (imageWidth) => {
-  const [isDragging, setIsDragging] = useState30(false);
-  const [startDragX, setStartDragX] = useState30(0);
-  const [scrollLeft, setScrollLeft] = useState30(0);
+  const [isDragging, setIsDragging] = useState31(false);
+  const [startDragX, setStartDragX] = useState31(0);
+  const [scrollLeft, setScrollLeft] = useState31(0);
   const containerRef = useRef11(null);
   const findClosestSnapPoint = (scrollLeft2) => {
     return Math.round(scrollLeft2 / imageWidth) * imageWidth;
@@ -6447,7 +6489,7 @@ var useCarousel_default = useCarousel;
 
 // src/elements/Carousel.tsx
 var Carousel = ({ images }) => {
-  const imageWidth = 240 + 16;
+  const imageWidth = 1e3 + 16;
   const {
     containerRef,
     handleMouseDown,
@@ -6455,21 +6497,22 @@ var Carousel = ({ images }) => {
     handleMouseUp,
     handleMouseMove
   } = useCarousel_default(imageWidth);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
-      className: "flex cursor-pointer snap-x  gap-4 overflow-x-scroll",
+      className: "flex cursor-pointer snap-x  gap-4 overflow-x-hidden justify-center items-center",
       onMouseDown: handleMouseDown,
       onMouseLeave: handleMouseLeave,
       onMouseUp: handleMouseUp,
       onMouseMove: handleMouseMove,
       ref: containerRef
     },
-    images.map((image, index) => /* @__PURE__ */ React58.createElement("div", { key: index, className: "h-40 w-60 flex-shrink-0" }, /* @__PURE__ */ React58.createElement(
+    images.map((image, index) => /* @__PURE__ */ React59.createElement("div", { key: index, className: "w-[1000px] h-96 flex-shrink-0" }, /* @__PURE__ */ React59.createElement(
       "img",
       {
         src: image,
         alt: `Carousel Image ${index}`,
+        width: imageWidth,
         className: "h-full w-full rounded-lg object-cover"
       }
     )))
@@ -6477,10 +6520,10 @@ var Carousel = ({ images }) => {
 };
 
 // src/elements/Input.tsx
-import * as React59 from "react";
-var Input = React59.forwardRef(
+import * as React60 from "react";
+var Input = React60.forwardRef(
   ({ className, preview, type, ...props }, ref) => {
-    return /* @__PURE__ */ React59.createElement(
+    return /* @__PURE__ */ React60.createElement(
       "input",
       {
         type,
@@ -6499,19 +6542,19 @@ var Input = React59.forwardRef(
 Input.displayName = "Input";
 
 // src/elements/InterfaceSettings.tsx
-import React60, { useState as useState32 } from "react";
+import React61, { useState as useState33 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
   ...props
 }) => {
-  const [color, setColor] = useState32(props.currentColorMode);
-  const [language, setLanguage] = useState32(props.currentLanguage);
+  const [color, setColor] = useState33(props.currentColorMode);
+  const [language, setLanguage] = useState33(props.currentLanguage);
   let orientationStyle = {
     horizontal: "flex flex-row justify-between",
     vertical: "flex flex-col items-center gap-2"
   };
-  return /* @__PURE__ */ React60.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React61.createElement(
     HawaRadio,
     {
       width,
@@ -6526,7 +6569,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ React60.createElement(
+  ), /* @__PURE__ */ React61.createElement(
     HawaRadio,
     {
       width,
@@ -6539,7 +6582,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ React60.createElement(
+          label: /* @__PURE__ */ React61.createElement(
             "svg",
             {
               width: "15",
@@ -6549,7 +6592,7 @@ var InterfaceSettings = ({
               xmlns: "http://www.w3.org/2000/svg",
               className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
             },
-            /* @__PURE__ */ React60.createElement(
+            /* @__PURE__ */ React61.createElement(
               "path",
               {
                 d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
@@ -6560,7 +6603,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ React60.createElement(
+          label: /* @__PURE__ */ React61.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -6571,7 +6614,7 @@ var InterfaceSettings = ({
               stroke: "currentColor",
               className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
             },
-            /* @__PURE__ */ React60.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ React61.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -6580,9 +6623,9 @@ var InterfaceSettings = ({
 };
 
 // src/elements/Popover.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-var PopoverContent = React61.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React61.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React61.createElement(
+var PopoverContent = React62.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React62.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React62.createElement(
   PopoverPrimitive.Content,
   {
     ref,
@@ -6603,7 +6646,7 @@ var Popover = ({
   align = "center",
   side,
   sideOffset = 4
-}) => /* @__PURE__ */ React61.createElement(PopoverPrimitive.Root, null, /* @__PURE__ */ React61.createElement(PopoverPrimitive.Trigger, null, trigger), /* @__PURE__ */ React61.createElement(
+}) => /* @__PURE__ */ React62.createElement(PopoverPrimitive.Root, null, /* @__PURE__ */ React62.createElement(PopoverPrimitive.Trigger, null, trigger), /* @__PURE__ */ React62.createElement(
   PopoverContent,
   {
     side,
@@ -6615,10 +6658,10 @@ var Popover = ({
 ));
 
 // src/elements/Tabs.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-var TabsContext = React62.createContext({ orientation: "vertical" });
-var Tabs = React62.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React62.createElement(
+var TabsContext = React63.createContext({ orientation: "vertical" });
+var Tabs = React63.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React63.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -6629,12 +6672,12 @@ var Tabs = React62.forwardRef(({ className, orientation, ...props }, ref) => /*
     ),
     ...props
   },
-  /* @__PURE__ */ React62.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
+  /* @__PURE__ */ React63.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
 ));
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React62.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React62.useContext(TabsContext);
-  return /* @__PURE__ */ React62.createElement(
+var TabsList = React63.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = React63.useContext(TabsContext);
+  return /* @__PURE__ */ React63.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -6648,8 +6691,8 @@ var TabsList = React62.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React62.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React62.createElement(
+var TabsTrigger = React63.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React63.createElement(
     TabsPrimitive.Trigger,
     {
       ref,
@@ -6662,7 +6705,7 @@ var TabsTrigger = React62.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React62.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React62.createElement(
+var TabsContent = React63.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React63.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -6676,10 +6719,10 @@ var TabsContent = React62.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/elements/Textarea.tsx
-import * as React63 from "react";
-var Textarea = React63.forwardRef(
+import * as React64 from "react";
+var Textarea = React64.forwardRef(
   ({ className, label, ...props }, ref) => {
-    return /* @__PURE__ */ React63.createElement(React63.Fragment, null, label && /* @__PURE__ */ React63.createElement(Label, { htmlFor: props.id }, label), /* @__PURE__ */ React63.createElement(
+    return /* @__PURE__ */ React64.createElement(React64.Fragment, null, label && /* @__PURE__ */ React64.createElement(Label, { htmlFor: props.id }, label), /* @__PURE__ */ React64.createElement(
       "textarea",
       {
         className: cn(
@@ -6695,10 +6738,10 @@ var Textarea = React63.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/elements/Separator.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-var Separator3 = React64.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React64.createElement(
+var Separator3 = React65.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React65.createElement(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -6716,7 +6759,7 @@ var Separator3 = React64.forwardRef(
 Separator3.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/elements/Toast.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva as cva3 } from "class-variance-authority";
 var toastVariants = cva3(
@@ -6741,7 +6784,7 @@ var toastVariants = cva3(
   }
 );
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React65.createElement(
+var ToastViewport = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -6753,8 +6796,8 @@ var ToastViewport = React65.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React65.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return /* @__PURE__ */ React65.createElement(
+var Toast = React66.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Root,
     {
       ref,
@@ -6769,8 +6812,8 @@ var Toast = React65.forwardRef(({ className, variant, severity = "none", directi
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React65.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React65.createElement(
+var ToastAction = React66.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Action,
     {
       ref,
@@ -6787,7 +6830,7 @@ var ToastAction = React65.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React65.createElement(
+var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Close,
   {
     ref,
@@ -6798,7 +6841,7 @@ var ToastClose = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE
     "toast-close": "",
     ...props
   },
-  /* @__PURE__ */ React65.createElement(
+  /* @__PURE__ */ React66.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -6807,7 +6850,7 @@ var ToastClose = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React66.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -6818,7 +6861,7 @@ var ToastClose = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE
   )
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React65.createElement(
+var ToastTitle = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Title,
   {
     ref,
@@ -6827,7 +6870,7 @@ var ToastTitle = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React65.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React65.createElement(
+var ToastDescription = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Description,
   {
     ref,
@@ -6838,10 +6881,10 @@ var ToastDescription = React65.forwardRef(({ className, ...props }, ref) => /* @
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // src/elements/Toaster.tsx
-import React67 from "react";
+import React68 from "react";
 
 // src/hooks/useToast.ts
-import * as React66 from "react";
+import * as React67 from "react";
 var TOAST_LIMIT = 5;
 var TOAST_REMOVE_DELAY = 1e5;
 var count = 0;
@@ -6937,8 +6980,8 @@ function toast({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React66.useState(memoryState);
-  React66.useEffect(() => {
+  const [state, setState] = React67.useState(memoryState);
+  React67.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -6958,29 +7001,29 @@ function useToast() {
 function Toaster(props) {
   const { toasts } = useToast();
   let isRTL = props.direction === "rtl";
-  return /* @__PURE__ */ React67.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, toasts.map(function({ id, title, description, action, ...toastProps }) {
-    return /* @__PURE__ */ React67.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, toasts.map(function({ id, title, description, action, ...toastProps }) {
+    return /* @__PURE__ */ React68.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ React68.createElement(
       "div",
       {
         className: cn("grid gap-1", isRTL ? "text-right" : "text-left")
       },
-      title && /* @__PURE__ */ React67.createElement(ToastTitle, null, title),
-      description && /* @__PURE__ */ React67.createElement(ToastDescription, null, description)
-    ), action, /* @__PURE__ */ React67.createElement(ToastClose, null));
-  }), /* @__PURE__ */ React67.createElement(ToastViewport, { className: cn("gap-2", isRTL && "fixed left-0") }));
+      title && /* @__PURE__ */ React68.createElement(ToastTitle, null, title),
+      description && /* @__PURE__ */ React68.createElement(ToastDescription, null, description)
+    ), action, /* @__PURE__ */ React68.createElement(ToastClose, null));
+  }), /* @__PURE__ */ React68.createElement(ToastViewport, { className: cn("gap-2", isRTL && "fixed left-0") }));
 }
 
 // src/elements/Dialog.tsx
-import * as React68 from "react";
+import * as React69 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = ({
   className,
   ...props
-}) => /* @__PURE__ */ React68.createElement(DialogPrimitive.Portal, { className: cn(className), ...props });
+}) => /* @__PURE__ */ React69.createElement(DialogPrimitive.Portal, { className: cn(className), ...props });
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var DialogOverlay = React69.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React69.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -6992,7 +7035,7 @@ var DialogOverlay = React68.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React68.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React68.createElement(DialogPortal, null, /* @__PURE__ */ React68.createElement(DialogOverlay, null), /* @__PURE__ */ React68.createElement(
+var DialogContent = React69.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React69.createElement(DialogPortal, null, /* @__PURE__ */ React69.createElement(DialogOverlay, null), /* @__PURE__ */ React69.createElement(
   DialogPrimitive.Content,
   {
     ref,
@@ -7003,7 +7046,7 @@ var DialogContent = React68.forwardRef(({ className, children, ...props }, ref)
     ...props
   },
   children,
-  /* @__PURE__ */ React68.createElement(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" }, /* @__PURE__ */ React68.createElement(
+  /* @__PURE__ */ React69.createElement(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" }, /* @__PURE__ */ React69.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -7012,7 +7055,7 @@ var DialogContent = React68.forwardRef(({ className, children, ...props }, ref)
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7020,13 +7063,13 @@ var DialogContent = React68.forwardRef(({ className, children, ...props }, ref)
         clipRule: "evenodd"
       }
     )
-  ), /* @__PURE__ */ React68.createElement("span", { className: "sr-only" }, "Close"))
+  ), /* @__PURE__ */ React69.createElement("span", { className: "sr-only" }, "Close"))
 )));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ React68.createElement(
+}) => /* @__PURE__ */ React69.createElement(
   "div",
   {
     className: cn(
@@ -7040,7 +7083,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ React68.createElement(
+}) => /* @__PURE__ */ React69.createElement(
   "div",
   {
     className: cn(
@@ -7051,7 +7094,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var DialogTitle = React69.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React69.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -7063,7 +7106,7 @@ var DialogTitle = React68.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var DialogDescription = React69.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React69.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -7074,32 +7117,32 @@ var DialogDescription = React68.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/layout/Box.tsx
-import React69 from "react";
+import React70 from "react";
 var Box = (props) => {
-  return /* @__PURE__ */ React69.createElement("div", null, props.children);
+  return /* @__PURE__ */ React70.createElement("div", null, props.children);
 };
 
 // src/layout/HawaBottomAppBar.tsx
-import React70 from "react";
+import React71 from "react";
 var HawaBottomAppBar = (props) => {
-  return /* @__PURE__ */ React70.createElement("div", { className: "fixed bottom-0 top-auto left-0 m-0 w-full max-w-full  p-1" }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: "fixed bottom-0 top-auto left-0 m-0 w-full max-w-full  p-1" }, /* @__PURE__ */ React71.createElement(
     "div",
     {
       className: "flex w-full flex-row items-center justify-evenly rounded bg-gray-200"
     },
-    props.appBarContent.map((singleContent, i) => /* @__PURE__ */ React70.createElement(
+    props.appBarContent.map((singleContent, i) => /* @__PURE__ */ React71.createElement(
       "div",
       {
         key: i,
         className: "m-1 flex h-full w-full flex-col items-center justify-center rounded p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-700 hover:text-white",
         onClick: singleContent.action
       },
-      /* @__PURE__ */ React70.createElement(
+      /* @__PURE__ */ React71.createElement(
         "div",
         null,
         singleContent.icon
       ),
-      /* @__PURE__ */ React70.createElement(
+      /* @__PURE__ */ React71.createElement(
         "div",
         {
           className: "mt-2 text-sm"
@@ -7111,13 +7154,13 @@ var HawaBottomAppBar = (props) => {
 };
 
 // src/layout/HawaSiteLayout.tsx
-import React73, { useEffect as useEffect21, useRef as useRef13, useState as useState36 } from "react";
+import React74, { useEffect as useEffect21, useRef as useRef13, useState as useState37 } from "react";
 import clsx27 from "clsx";
 
 // src/hooks/useDiscloser.ts
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 var useDiscloser = (value = false) => {
-  const [open, setOpen] = useState34(value);
+  const [open, setOpen] = useState35(value);
   const onOpen = () => setOpen(true);
   const onClose = () => setOpen(false);
   return {
@@ -7129,9 +7172,9 @@ var useDiscloser = (value = false) => {
 var useDiscloser_default = useDiscloser;
 
 // src/hooks/useBreakpoint.ts
-import { useState as useState35, useEffect as useEffect20 } from "react";
+import { useState as useState36, useEffect as useEffect20 } from "react";
 var useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState35(window?.innerWidth);
+  const [breakpoint, setBreakpoint] = useState36(window?.innerWidth);
   const resize = () => {
     setBreakpoint(window?.innerWidth);
   };
@@ -7153,8 +7196,8 @@ var HawaSiteLayout = ({
   navigationSize = "md",
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState36(false);
-  const [openSubItem, setOpenSubItem] = useState36(false);
+  const [openSideMenu, setOpenSideMenu] = useState37(false);
+  const [openSubItem, setOpenSubItem] = useState37(false);
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
   const ref = useRef13(null);
   const drawerItemRef = useRef13(null);
@@ -7164,7 +7207,7 @@ var HawaSiteLayout = ({
   } else {
     size = 1200;
   }
-  const [keepOpen, setKeepOpen] = useState36(false);
+  const [keepOpen, setKeepOpen] = useState37(false);
   useEffect21(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
@@ -7200,7 +7243,7 @@ var HawaSiteLayout = ({
     // "w-full",
     // "top-14 h-[calc(100%-3.5rem)]",
   ];
-  return /* @__PURE__ */ React73.createElement("div", { className: "h-full w-full" }, /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement("div", { className: "h-full w-full" }, /* @__PURE__ */ React74.createElement(
     "div",
     {
       className: clsx27(
@@ -7213,7 +7256,7 @@ var HawaSiteLayout = ({
         direction === "rtl" ? "flex-row" : "flex-row-reverse"
       )
     },
-    size > 600 ? /* @__PURE__ */ React73.createElement("div", { className: "flex  flex-row h-8    items-center  gap-4 px-3" }, props.navItems?.map(({ label }, i) => /* @__PURE__ */ React73.createElement(
+    size > 600 ? /* @__PURE__ */ React74.createElement("div", { className: "flex  flex-row h-8    items-center  gap-4 px-3" }, props.navItems?.map(({ label }, i) => /* @__PURE__ */ React74.createElement(
       "div",
       {
         onClick: () => setOpenSideMenu(!openSideMenu),
@@ -7221,13 +7264,13 @@ var HawaSiteLayout = ({
         className: "cursor-pointer rounded bg-none text-gray-600 transition-all hover:text-black"
       },
       label
-    ))) : /* @__PURE__ */ React73.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React73.createElement(
+    ))) : /* @__PURE__ */ React74.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React74.createElement(
       "div",
       {
         onClick: () => setOpenSideMenu(!openSideMenu),
         className: "cursor-pointer  rounded p-1  transition-all hover:bg-gray-100"
       },
-      /* @__PURE__ */ React73.createElement(
+      /* @__PURE__ */ React74.createElement(
         "svg",
         {
           stroke: "currentColor",
@@ -7238,7 +7281,7 @@ var HawaSiteLayout = ({
           height: "1.6em",
           width: "1.6em"
         },
-        /* @__PURE__ */ React73.createElement(
+        /* @__PURE__ */ React74.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -7248,15 +7291,15 @@ var HawaSiteLayout = ({
         )
       ),
       " "
-    ), props.pageTitle ? /* @__PURE__ */ React73.createElement("div", null, props.pageTitle) : /* @__PURE__ */ React73.createElement("div", null)),
-    /* @__PURE__ */ React73.createElement("div", { className: "h-full" }, /* @__PURE__ */ React73.createElement(
+    ), props.pageTitle ? /* @__PURE__ */ React74.createElement("div", null, props.pageTitle) : /* @__PURE__ */ React74.createElement("div", null)),
+    /* @__PURE__ */ React74.createElement("div", { className: "h-full" }, /* @__PURE__ */ React74.createElement(
       "img",
       {
         className: "h-full max-h-8 ",
         src: `https://sikka-images.s3.ap-southeast-1.amazonaws.com/seera/seera-horizontal-wordmark-${direction === "rtl" ? "ar" : "en"}-white.svg`
       }
     ))
-  ), /* @__PURE__ */ React73.createElement(
+  ), /* @__PURE__ */ React74.createElement(
     "div",
     {
       className: clsx27(" relative top-14")
@@ -7266,17 +7309,17 @@ var HawaSiteLayout = ({
 };
 
 // src/layout/AppLayout.tsx
-import React75, { useEffect as useEffect22, useRef as useRef14, useState as useState37 } from "react";
+import React76, { useEffect as useEffect22, useRef as useRef14, useState as useState38 } from "react";
 import clsx28 from "clsx";
 
 // src/layout/Sidebar.tsx
-import * as React74 from "react";
+import * as React75 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 var Accordion = AccordionPrimitive.Root;
 var triggerStyles = "flex flex-1 items-center select-none cursor-pointer bg-primary-foreground rounded justify-between p-2 px-3 font-medium transition-all  [&[data-state=open]>svg]:-rotate-90";
-var AccordionItem = React74.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React74.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
+var AccordionItem = React75.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React75.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React74.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React74.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React74.createElement(
+var AccordionTrigger = React75.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React75.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React75.createElement(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -7284,7 +7327,7 @@ var AccordionTrigger = React74.forwardRef(({ className, showArrow, children, ...
     ...props
   },
   children,
-  showArrow && /* @__PURE__ */ React74.createElement(
+  showArrow && /* @__PURE__ */ React75.createElement(
     "svg",
     {
       "aria-label": "Chevron Right Icon",
@@ -7295,7 +7338,7 @@ var AccordionTrigger = React74.forwardRef(({ className, showArrow, children, ...
       width: "1em",
       className: "h-4 w-4 shrink-0 rotate-90 transition-transform duration-200"
     },
-    /* @__PURE__ */ React74.createElement(
+    /* @__PURE__ */ React75.createElement(
       "path",
       {
         d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
@@ -7304,7 +7347,7 @@ var AccordionTrigger = React74.forwardRef(({ className, showArrow, children, ...
   )
 )));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React74.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React74.createElement(
+var AccordionContent = React75.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React75.createElement(
   AccordionPrimitive.Content,
   {
     ref,
@@ -7314,7 +7357,7 @@ var AccordionContent = React74.forwardRef(({ className, children, ...props }, re
     ),
     ...props
   },
-  /* @__PURE__ */ React74.createElement("div", null, children)
+  /* @__PURE__ */ React75.createElement("div", null, children)
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 var SidebarGroup = ({
@@ -7328,7 +7371,7 @@ var SidebarGroup = ({
   direction,
   isOpen
 }) => {
-  return /* @__PURE__ */ React74.createElement("div", null, title && /* @__PURE__ */ React74.createElement("h3", { className: "mb-1 font-bold" }, title), /* @__PURE__ */ React74.createElement("ul", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement("div", null, title && /* @__PURE__ */ React75.createElement("h3", { className: "mb-1 font-bold" }, title), /* @__PURE__ */ React75.createElement("ul", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React75.createElement(
     Accordion,
     {
       value: openedItem,
@@ -7339,7 +7382,7 @@ var SidebarGroup = ({
       collapsible: true,
       className: "flex flex-col gap-1"
     },
-    items.map((item, idx) => /* @__PURE__ */ React74.createElement(
+    items.map((item, idx) => /* @__PURE__ */ React75.createElement(
       SidebarItem,
       {
         isOpen,
@@ -7365,20 +7408,20 @@ var SidebarItem = ({
     return isSelected && isSelected[index] === value ? "bg-primary text-primary-foreground  cursor-default" : "hover:bg-primary/10";
   };
   if (item.subitems) {
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement(
       AccordionItem,
       {
         value: item.value,
         className: "overflow-x-clip",
         dir: direction
       },
-      /* @__PURE__ */ React74.createElement(
+      /* @__PURE__ */ React75.createElement(
         AccordionTrigger,
         {
           className: cn(getSelectedStyle(item.value, 0)),
           showArrow: isOpen
         },
-        /* @__PURE__ */ React74.createElement(
+        /* @__PURE__ */ React75.createElement(
           "div",
           {
             className: cn(
@@ -7387,7 +7430,7 @@ var SidebarItem = ({
             )
           },
           item.icon,
-          isOpen && /* @__PURE__ */ React74.createElement(
+          isOpen && /* @__PURE__ */ React75.createElement(
             "span",
             {
               className: cn(
@@ -7399,12 +7442,12 @@ var SidebarItem = ({
           )
         )
       ),
-      item.subitems && /* @__PURE__ */ React74.createElement(AccordionContent, { className: " mt-1 h-full rounded  " }, /* @__PURE__ */ React74.createElement(
+      item.subitems && /* @__PURE__ */ React75.createElement(AccordionContent, { className: " mt-1 h-full rounded  " }, /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: cn("flex h-full flex-col gap-2 bg-foreground/5 p-1")
         },
-        item.subitems.map((subitem, idx) => /* @__PURE__ */ React74.createElement(
+        item.subitems.map((subitem, idx) => /* @__PURE__ */ React75.createElement(
           "li",
           {
             key: idx,
@@ -7425,7 +7468,7 @@ var SidebarItem = ({
       ))
     );
   } else {
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement(
       "div",
       {
         dir: direction,
@@ -7440,7 +7483,7 @@ var SidebarItem = ({
           "overflow-x-clip "
         )
       },
-      /* @__PURE__ */ React74.createElement("div", { className: "flex flex-row items-center gap-2 " }, item.icon, /* @__PURE__ */ React74.createElement(
+      /* @__PURE__ */ React75.createElement("div", { className: "flex flex-row items-center gap-2 " }, item.icon, /* @__PURE__ */ React75.createElement(
         "span",
         {
           className: cn(
@@ -7481,8 +7524,8 @@ var AppLayout = ({
   };
   const ref = useRef14(null);
   const isRTL = direction === "rtl";
-  const [openedSidebarItem, setOpenedSidebarItem] = useState37("");
-  const [selectedItem, setSelectedItem] = useState37(
+  const [openedSidebarItem, setOpenedSidebarItem] = useState38("");
+  const [selectedItem, setSelectedItem] = useState38(
     currentPage ? currentPage : []
   );
   let size;
@@ -7491,8 +7534,8 @@ var AppLayout = ({
   } else {
     size = 1200;
   }
-  const [keepOpen, setKeepOpen] = useState37(size > 600 ? true : false);
-  const [openSideMenu, setOpenSideMenu] = useState37(size > 600 ? true : false);
+  const [keepOpen, setKeepOpen] = useState38(size > 600 ? true : false);
+  const [openSideMenu, setOpenSideMenu] = useState38(size > 600 ? true : false);
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
   useEffect22(() => {
     const handleClickOutside = (event) => {
@@ -7505,7 +7548,7 @@ var AppLayout = ({
       document.removeEventListener("click", handleClickOutside, true);
     };
   }, [keepOpen]);
-  return /* @__PURE__ */ React75.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: clsx28(
@@ -7513,7 +7556,7 @@ var AppLayout = ({
         isRTL ? "flex-row-reverse" : "flex-row"
       )
     },
-    size > 600 ? /* @__PURE__ */ React75.createElement(
+    size > 600 ? /* @__PURE__ */ React76.createElement(
       "div",
       {
         className: clsx28(
@@ -7529,19 +7572,19 @@ var AppLayout = ({
       props.pageTitle
     ) : (
       // Mobile Drawer Menu Button
-      /* @__PURE__ */ React75.createElement(
+      /* @__PURE__ */ React76.createElement(
         "div",
         {
           dir: direction,
           className: "flex items-center justify-center gap-0.5"
         },
-        /* @__PURE__ */ React75.createElement(
+        /* @__PURE__ */ React76.createElement(
           "div",
           {
             onClick: () => setOpenSideMenu(true),
             className: "z-40 mx-1 cursor-pointer  rounded p-2  transition-all hover:bg-gray-100"
           },
-          /* @__PURE__ */ React75.createElement(
+          /* @__PURE__ */ React76.createElement(
             "svg",
             {
               stroke: "currentColor",
@@ -7552,7 +7595,7 @@ var AppLayout = ({
               height: "1.6em",
               width: "1.6em"
             },
-            /* @__PURE__ */ React75.createElement(
+            /* @__PURE__ */ React76.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7562,10 +7605,10 @@ var AppLayout = ({
             )
           )
         ),
-        props.pageTitle ? /* @__PURE__ */ React75.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React75.createElement("div", null)
+        props.pageTitle ? /* @__PURE__ */ React76.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React76.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "div",
       {
         className: clsx28(
@@ -7573,16 +7616,16 @@ var AppLayout = ({
           isRTL ? "flex-row-reverse" : "flex-row"
         )
       },
-      size > 600 ? /* @__PURE__ */ React75.createElement(
+      size > 600 ? /* @__PURE__ */ React76.createElement(
         "div",
         {
           className: isRTL ? "text-left text-xs" : "text-right text-xs"
         },
-        /* @__PURE__ */ React75.createElement("div", { className: "font-bold" }, props.username),
+        /* @__PURE__ */ React76.createElement("div", { className: "font-bold" }, props.username),
         " ",
-        /* @__PURE__ */ React75.createElement("div", null, props.email)
+        /* @__PURE__ */ React76.createElement("div", null, props.email)
       ) : null,
-      /* @__PURE__ */ React75.createElement(
+      /* @__PURE__ */ React76.createElement(
         DropdownMenu,
         {
           triggerClassname: "mx-2",
@@ -7591,7 +7634,7 @@ var AppLayout = ({
           side: "bottom",
           sideOffset: 5,
           direction: isRTL ? "rtl" : "ltr",
-          trigger: /* @__PURE__ */ React75.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600" }, props.avatarImage ? /* @__PURE__ */ React75.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React75.createElement(
+          trigger: /* @__PURE__ */ React76.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600" }, props.avatarImage ? /* @__PURE__ */ React76.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React76.createElement(
             "svg",
             {
               "aria-label": "Avatar Icon",
@@ -7599,7 +7642,7 @@ var AppLayout = ({
               fill: "currentColor",
               viewBox: "0 0 20 20"
             },
-            /* @__PURE__ */ React75.createElement(
+            /* @__PURE__ */ React76.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7613,7 +7656,7 @@ var AppLayout = ({
         }
       )
     )
-  ), /* @__PURE__ */ React75.createElement(
+  ), /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: clsx28(
@@ -7636,7 +7679,7 @@ var AppLayout = ({
       },
       ref
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "div",
       {
         dir: direction,
@@ -7648,7 +7691,7 @@ var AppLayout = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      /* @__PURE__ */ React75.createElement(
+      /* @__PURE__ */ React76.createElement(
         "img",
         {
           className: clsx28(
@@ -7658,7 +7701,7 @@ var AppLayout = ({
           src: props.logoLink
         }
       ),
-      size > 600 ? /* @__PURE__ */ React75.createElement(
+      size > 600 ? /* @__PURE__ */ React76.createElement(
         "img",
         {
           className: clsx28(
@@ -7671,7 +7714,7 @@ var AppLayout = ({
         }
       ) : null
     ),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "div",
       {
         className: clsx28(
@@ -7684,7 +7727,7 @@ var AppLayout = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      /* @__PURE__ */ React75.createElement(
+      /* @__PURE__ */ React76.createElement(
         SidebarGroup,
         {
           direction,
@@ -7704,7 +7747,7 @@ var AppLayout = ({
         }
       )
     ),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "div",
       {
         className: clsx28(
@@ -7716,22 +7759,22 @@ var AppLayout = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      DrawerFooterActions && openSideMenu ? /* @__PURE__ */ React75.createElement(React75.Fragment, null, DrawerFooterActions) : null,
-      size > 600 && openSideMenu ? /* @__PURE__ */ React75.createElement(
+      DrawerFooterActions && openSideMenu ? /* @__PURE__ */ React76.createElement(React76.Fragment, null, DrawerFooterActions) : null,
+      size > 600 && openSideMenu ? /* @__PURE__ */ React76.createElement(
         Tooltip,
         {
           side: "left",
           delayDuration: 500,
           content: keepOpen ? props.texts?.collapseSidebar || "Collapse Sidebar" : props.texts?.expandSidebar || "Expand Sidebar"
         },
-        /* @__PURE__ */ React75.createElement(
+        /* @__PURE__ */ React76.createElement(
           Button,
           {
             variant: "light",
             onClick: () => setKeepOpen(!keepOpen),
             size: "smallIcon"
           },
-          /* @__PURE__ */ React75.createElement(
+          /* @__PURE__ */ React76.createElement(
             "svg",
             {
               className: clsx28(
@@ -7741,7 +7784,7 @@ var AppLayout = ({
               fill: "currentColor",
               viewBox: "0 0 20 20"
             },
-            /* @__PURE__ */ React75.createElement(
+            /* @__PURE__ */ React76.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7753,7 +7796,7 @@ var AppLayout = ({
         )
       ) : null
     )
-  ), /* @__PURE__ */ React75.createElement(
+  ), /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: "fixed overflow-y-auto transition-all",
@@ -7784,7 +7827,7 @@ var AppLayout = ({
 };
 
 // src/layout/HawaAppLayout.tsx
-import React76, { useEffect as useEffect23, useRef as useRef15, useState as useState38 } from "react";
+import React77, { useEffect as useEffect23, useRef as useRef15, useState as useState39 } from "react";
 import clsx29 from "clsx";
 import { FaChevronRight } from "react-icons/fa";
 var HawaAppLayout = ({
@@ -7793,10 +7836,10 @@ var HawaAppLayout = ({
   onSettingsClick,
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState38(false);
-  const [openSubItem, setOpenSubitem] = useState38("");
+  const [openSideMenu, setOpenSideMenu] = useState39(false);
+  const [openSubItem, setOpenSubitem] = useState39("");
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
-  const [keepOpen, setKeepOpen] = useState38(false);
+  const [keepOpen, setKeepOpen] = useState39(false);
   const ref = useRef15(null);
   const isRTL = direction === "rtl";
   let size;
@@ -7830,7 +7873,7 @@ var HawaAppLayout = ({
     }
   };
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  return /* @__PURE__ */ React76.createElement("div", { className: "fixed" }, props.topBar && /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement("div", { className: "fixed" }, props.topBar && /* @__PURE__ */ React77.createElement(
     "div",
     {
       className: clsx29(
@@ -7840,7 +7883,7 @@ var HawaAppLayout = ({
     },
     size > 600 ? props.pageTitle ? (
       // Title of the page
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React77.createElement(
         "div",
         {
           className: clsx29(
@@ -7856,19 +7899,19 @@ var HawaAppLayout = ({
       )
     ) : null : (
       // Mobile Drawer Menu Button
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React77.createElement(
         "div",
         {
           dir: direction,
           className: "flex items-center justify-center gap-0.5 "
         },
-        /* @__PURE__ */ React76.createElement(
+        /* @__PURE__ */ React77.createElement(
           "div",
           {
             onClick: () => setOpenSideMenu(true),
             className: "z-40 mx-1 cursor-pointer  rounded p-2  transition-all hover:bg-gray-100"
           },
-          /* @__PURE__ */ React76.createElement(
+          /* @__PURE__ */ React77.createElement(
             "svg",
             {
               stroke: "currentColor",
@@ -7879,7 +7922,7 @@ var HawaAppLayout = ({
               height: "1.6em",
               width: "1.6em"
             },
-            /* @__PURE__ */ React76.createElement(
+            /* @__PURE__ */ React77.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7890,10 +7933,10 @@ var HawaAppLayout = ({
           ),
           " "
         ),
-        props.pageTitle ? /* @__PURE__ */ React76.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React76.createElement("div", null)
+        props.pageTitle ? /* @__PURE__ */ React77.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React77.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(
       "div",
       {
         className: clsx29(
@@ -7901,18 +7944,18 @@ var HawaAppLayout = ({
           isRTL ? "flex-row-reverse" : "flex-row"
         )
       },
-      size > 600 ? /* @__PURE__ */ React76.createElement(
+      size > 600 ? /* @__PURE__ */ React77.createElement(
         "div",
         {
           className: clsx29(
             isRTL ? "text-left text-xs" : "text-right text-xs"
           )
         },
-        /* @__PURE__ */ React76.createElement("div", { className: "font-bold" }, props.username),
+        /* @__PURE__ */ React77.createElement("div", { className: "font-bold" }, props.username),
         " ",
-        /* @__PURE__ */ React76.createElement("div", null, props.email)
+        /* @__PURE__ */ React77.createElement("div", null, props.email)
       ) : null,
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React77.createElement(
         HawaMenu,
         {
           direction,
@@ -7922,14 +7965,14 @@ var HawaAppLayout = ({
           menuItems: props.profileMenuItems,
           position: "bottom-left"
         },
-        /* @__PURE__ */ React76.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-hidden rounded-full ring-1 ring-buttonPrimary-500 dark:bg-gray-600" }, /* @__PURE__ */ React76.createElement(
+        /* @__PURE__ */ React77.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-hidden rounded-full ring-1 ring-buttonPrimary-500 dark:bg-gray-600" }, /* @__PURE__ */ React77.createElement(
           "svg",
           {
             className: "absolute -left-1 h-10 w-10 text-gray-400",
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ React76.createElement(
+          /* @__PURE__ */ React77.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -7940,7 +7983,7 @@ var HawaAppLayout = ({
         ))
       )
     )
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React77.createElement(
     "div",
     {
       onMouseEnter: () => {
@@ -7957,7 +8000,7 @@ var HawaAppLayout = ({
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
       }
     },
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(
       "div",
       {
         className: clsx29(
@@ -7966,7 +8009,7 @@ var HawaAppLayout = ({
           openSideMenu ? "overflow-auto" : "overflow-hidden"
         )
       },
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React77.createElement(
         "div",
         {
           dir: direction,
@@ -7978,7 +8021,7 @@ var HawaAppLayout = ({
             width: size > 600 ? `${drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize] - 16}px` : "full"
           }
         },
-        /* @__PURE__ */ React76.createElement(
+        /* @__PURE__ */ React77.createElement(
           "img",
           {
             className: clsx29(
@@ -7990,7 +8033,7 @@ var HawaAppLayout = ({
             src: props.logoLink
           }
         ),
-        size > 600 ? /* @__PURE__ */ React76.createElement(
+        size > 600 ? /* @__PURE__ */ React77.createElement(
           "img",
           {
             className: clsx29(
@@ -8002,14 +8045,14 @@ var HawaAppLayout = ({
           }
         ) : null
       ),
-      /* @__PURE__ */ React76.createElement("div", { className: "mb-10 mt-14" }, props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React77.createElement("div", { className: "mb-10 mt-14" }, props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React77.createElement(
         "div",
         {
           key: dIndex,
           className: clsx29("flex flex-col items-stretch justify-center")
         },
         dSection?.map((dItem, i) => {
-          return /* @__PURE__ */ React76.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React76.createElement(
+          return /* @__PURE__ */ React77.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React77.createElement(
             "div",
             {
               onClick: () => {
@@ -8029,7 +8072,7 @@ var HawaAppLayout = ({
                 isRTL ? "flex-row-reverse pr-3" : ""
               )
             },
-            /* @__PURE__ */ React76.createElement("div", { className: "flex flex-row", dir: direction }, /* @__PURE__ */ React76.createElement("div", { className: "flex items-center justify-center" }, dItem.icon), /* @__PURE__ */ React76.createElement(
+            /* @__PURE__ */ React77.createElement("div", { className: "flex flex-row", dir: direction }, /* @__PURE__ */ React77.createElement("div", { className: "flex items-center justify-center" }, dItem.icon), /* @__PURE__ */ React77.createElement(
               "div",
               {
                 className: clsx29(
@@ -8039,16 +8082,16 @@ var HawaAppLayout = ({
               },
               dItem.label
             )),
-            dItem.subItems && /* @__PURE__ */ React76.createElement(
+            dItem.subItems && /* @__PURE__ */ React77.createElement(
               "div",
               {
                 className: clsx29(
                   openSubItem && dItem.slug === openSubItem ? "-rotate-90" : "rotate-90"
                 )
               },
-              /* @__PURE__ */ React76.createElement(FaChevronRight, { fontSize: 11 })
+              /* @__PURE__ */ React77.createElement(FaChevronRight, { fontSize: 11 })
             )
-          ), dItem.subItems && /* @__PURE__ */ React76.createElement(
+          ), dItem.subItems && /* @__PURE__ */ React77.createElement(
             "div",
             {
               className: clsx29(
@@ -8060,7 +8103,7 @@ var HawaAppLayout = ({
                 height: openSubItem == dItem.slug && openSideMenu ? 6 + 33 * dItem.subItems?.length : 0
               }
             },
-            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React76.createElement(
+            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React77.createElement(
               "div",
               {
                 key: s,
@@ -8074,14 +8117,14 @@ var HawaAppLayout = ({
                   subIt.action();
                 }
               },
-              /* @__PURE__ */ React76.createElement("div", { className: "flex items-center justify-center" }, subIt.icon),
-              /* @__PURE__ */ React76.createElement("div", { className: "flex flex-row justify-between" }, subIt.label)
+              /* @__PURE__ */ React77.createElement("div", { className: "flex items-center justify-center" }, subIt.icon),
+              /* @__PURE__ */ React77.createElement("div", { className: "flex flex-row justify-between" }, subIt.label)
             ))
           ));
         }),
-        dIndex !== props.drawerItems.length - 1 && /* @__PURE__ */ React76.createElement("div", { className: "my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center " })
+        dIndex !== props.drawerItems.length - 1 && /* @__PURE__ */ React77.createElement("div", { className: "my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center " })
       ))),
-      openSideMenu && /* @__PURE__ */ React76.createElement(
+      openSideMenu && /* @__PURE__ */ React77.createElement(
         "div",
         {
           className: clsx29(
@@ -8094,13 +8137,13 @@ var HawaAppLayout = ({
             width: `${drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize] - 16}px`
           }
         },
-        onSettingsClick && /* @__PURE__ */ React76.createElement(
+        onSettingsClick && /* @__PURE__ */ React77.createElement(
           "div",
           {
             className: " cursor-pointer rounded p-2 transition-all hover:bg-layoutPrimary-700",
             onClick: () => onSettingsClick()
           },
-          /* @__PURE__ */ React76.createElement(
+          /* @__PURE__ */ React77.createElement(
             "svg",
             {
               "aria-label": "Settings Icon",
@@ -8113,11 +8156,11 @@ var HawaAppLayout = ({
               height: "1em",
               width: "1em"
             },
-            /* @__PURE__ */ React76.createElement("circle", { cx: "12", cy: "12", r: "3" }),
-            /* @__PURE__ */ React76.createElement("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+            /* @__PURE__ */ React77.createElement("circle", { cx: "12", cy: "12", r: "3" }),
+            /* @__PURE__ */ React77.createElement("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
           )
         ),
-        size > 600 ? /* @__PURE__ */ React76.createElement(
+        size > 600 ? /* @__PURE__ */ React77.createElement(
           "div",
           {
             className: clsx29("w-fit transition-all"),
@@ -8127,7 +8170,7 @@ var HawaAppLayout = ({
               left: `${drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize] - 35}px`
             }
           },
-          /* @__PURE__ */ React76.createElement(
+          /* @__PURE__ */ React77.createElement(
             "div",
             {
               dir: direction,
@@ -8136,13 +8179,13 @@ var HawaAppLayout = ({
                 openSideMenu ? " opacity-100" : " opacity-0"
               )
             },
-            /* @__PURE__ */ React76.createElement(
+            /* @__PURE__ */ React77.createElement(
               "div",
               {
                 onClick: () => setKeepOpen(!keepOpen),
                 className: "w-fit cursor-pointer rounded bg-gray-300 p-2 transition-all hover:bg-gray-400"
               },
-              /* @__PURE__ */ React76.createElement(
+              /* @__PURE__ */ React77.createElement(
                 FaChevronRight,
                 {
                   fontSize: 14,
@@ -8157,7 +8200,7 @@ var HawaAppLayout = ({
         ) : null
       )
     )
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React77.createElement(
     "div",
     {
       className: "fixed overflow-y-auto",
@@ -8178,7 +8221,7 @@ var HawaAppLayout = ({
 };
 
 // src/layout/HawaAppLayoutSimplified.tsx
-import React77, { useEffect as useEffect24, useRef as useRef16, useState as useState39 } from "react";
+import React78, { useEffect as useEffect24, useRef as useRef16, useState as useState40 } from "react";
 import clsx30 from "clsx";
 var HawaAppLayoutSimplified = ({
   direction = "rtl",
@@ -8187,10 +8230,10 @@ var HawaAppLayoutSimplified = ({
   DrawerFooterActions,
   ...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 [keepOpen, setKeepOpen] = useState40(false);
   const ref = useRef16(null);
   const isRTL = direction === "rtl";
   let size;
@@ -8226,7 +8269,7 @@ var HawaAppLayoutSimplified = ({
     }
   };
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  return /* @__PURE__ */ React77.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React78.createElement(
     "div",
     {
       className: clsx30(
@@ -8234,7 +8277,7 @@ var HawaAppLayoutSimplified = ({
         isRTL ? "flex-row-reverse" : "flex-row"
       )
     },
-    size > 600 ? /* @__PURE__ */ React77.createElement(
+    size > 600 ? /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx30(
@@ -8250,19 +8293,19 @@ var HawaAppLayoutSimplified = ({
       props.pageTitle
     ) : (
       // Mobile Drawer Menu Button
-      /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React78.createElement(
         "div",
         {
           dir: direction,
           className: "flex items-center justify-center gap-0.5"
         },
-        /* @__PURE__ */ React77.createElement(
+        /* @__PURE__ */ React78.createElement(
           "div",
           {
             onClick: () => setOpenSideMenu(true),
             className: "z-40 mx-1 cursor-pointer  rounded p-2  transition-all hover:bg-gray-100"
           },
-          /* @__PURE__ */ React77.createElement(
+          /* @__PURE__ */ React78.createElement(
             "svg",
             {
               stroke: "currentColor",
@@ -8273,7 +8316,7 @@ var HawaAppLayoutSimplified = ({
               height: "1.6em",
               width: "1.6em"
             },
-            /* @__PURE__ */ React77.createElement(
+            /* @__PURE__ */ React78.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -8283,10 +8326,10 @@ var HawaAppLayoutSimplified = ({
             )
           )
         ),
-        props.pageTitle ? /* @__PURE__ */ React77.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React77.createElement("div", null)
+        props.pageTitle ? /* @__PURE__ */ React78.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React78.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx30(
@@ -8294,16 +8337,16 @@ var HawaAppLayoutSimplified = ({
           isRTL ? "flex-row-reverse" : "flex-row"
         )
       },
-      size > 600 ? /* @__PURE__ */ React77.createElement(
+      size > 600 ? /* @__PURE__ */ React78.createElement(
         "div",
         {
           className: isRTL ? "text-left text-xs" : "text-right text-xs"
         },
-        /* @__PURE__ */ React77.createElement("div", { className: "font-bold" }, props.username),
+        /* @__PURE__ */ React78.createElement("div", { className: "font-bold" }, props.username),
         " ",
-        /* @__PURE__ */ React77.createElement("div", null, props.email)
+        /* @__PURE__ */ React78.createElement("div", null, props.email)
       ) : null,
-      /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React78.createElement(
         DropdownMenu,
         {
           triggerClassname: "mx-2",
@@ -8312,13 +8355,13 @@ var HawaAppLayoutSimplified = ({
           side: "bottom",
           sideOffset: 5,
           direction: isRTL ? "rtl" : "ltr",
-          trigger: /* @__PURE__ */ React77.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600" }, /* @__PURE__ */ React77.createElement(AvatarIcon, null)),
+          trigger: /* @__PURE__ */ React78.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600" }, /* @__PURE__ */ React78.createElement(AvatarIcon, null)),
           items: props.profileMenuItems,
           onItemSelect: (e) => console.log("selecting item ", e)
         }
       )
     )
-  ), /* @__PURE__ */ React77.createElement(
+  ), /* @__PURE__ */ React78.createElement(
     "div",
     {
       className: clsx30(
@@ -8334,7 +8377,7 @@ var HawaAppLayoutSimplified = ({
       onMouseLeave: () => keepOpen ? setOpenSideMenu(true) : setOpenSideMenu(false),
       ref
     },
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         dir: direction,
@@ -8345,7 +8388,7 @@ var HawaAppLayoutSimplified = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React78.createElement(
         "img",
         {
           className: clsx30(
@@ -8357,7 +8400,7 @@ var HawaAppLayoutSimplified = ({
           src: props.logoLink
         }
       ),
-      size > 600 ? /* @__PURE__ */ React77.createElement(
+      size > 600 ? /* @__PURE__ */ React78.createElement(
         "img",
         {
           className: clsx30(
@@ -8369,7 +8412,7 @@ var HawaAppLayoutSimplified = ({
         }
       ) : null
     ),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx30(
@@ -8383,7 +8426,7 @@ var HawaAppLayoutSimplified = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React77.createElement(
+      props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React78.createElement(
         "div",
         {
           key: dIndex,
@@ -8392,7 +8435,7 @@ var HawaAppLayoutSimplified = ({
           )
         },
         dSection?.map((dItem, i) => {
-          return /* @__PURE__ */ React77.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React77.createElement(
+          return /* @__PURE__ */ React78.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React78.createElement(
             "div",
             {
               onClick: () => {
@@ -8413,7 +8456,7 @@ var HawaAppLayoutSimplified = ({
                 openSideMenu ? "m-2" : "m-2"
               )
             },
-            /* @__PURE__ */ React77.createElement("div", { className: "flex flex-row", dir: direction }, /* @__PURE__ */ React77.createElement("div", { className: "flex items-center justify-center " }, dItem.icon), /* @__PURE__ */ React77.createElement(
+            /* @__PURE__ */ React78.createElement("div", { className: "flex flex-row", dir: direction }, /* @__PURE__ */ React78.createElement("div", { className: "flex items-center justify-center " }, dItem.icon), /* @__PURE__ */ React78.createElement(
               "div",
               {
                 className: clsx30(
@@ -8423,13 +8466,13 @@ var HawaAppLayoutSimplified = ({
               },
               dItem.label
             )),
-            dItem.subItems && /* @__PURE__ */ React77.createElement(
+            dItem.subItems && /* @__PURE__ */ React78.createElement(
               ArrowIcon,
               {
                 pointing: openSubItem && dItem.slug === openSubItem ? "up" : "down"
               }
             )
-          ), dItem.subItems && /* @__PURE__ */ React77.createElement(
+          ), dItem.subItems && /* @__PURE__ */ React78.createElement(
             "div",
             {
               className: clsx30(
@@ -8441,7 +8484,7 @@ var HawaAppLayoutSimplified = ({
                 height: openSubItem == dItem.slug && openSideMenu ? 6 + 35 * dItem.subItems?.length : 0
               }
             },
-            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React77.createElement(
+            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React78.createElement(
               "div",
               {
                 key: s,
@@ -8455,15 +8498,15 @@ var HawaAppLayoutSimplified = ({
                   subIt.action();
                 }
               },
-              /* @__PURE__ */ React77.createElement("div", { className: "flex items-center justify-center" }, subIt.icon),
-              /* @__PURE__ */ React77.createElement("div", { className: "flex flex-row justify-between" }, subIt.label)
+              /* @__PURE__ */ React78.createElement("div", { className: "flex items-center justify-center" }, subIt.icon),
+              /* @__PURE__ */ React78.createElement("div", { className: "flex flex-row justify-between" }, subIt.label)
             ))
           ));
         }),
-        dIndex !== props.drawerItems.length - 1 && /* @__PURE__ */ React77.createElement("div", { className: "my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 bg-red-500 text-center " })
+        dIndex !== props.drawerItems.length - 1 && /* @__PURE__ */ React78.createElement("div", { className: "my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 bg-red-500 text-center " })
       ))
     ),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx30(
@@ -8474,22 +8517,22 @@ var HawaAppLayoutSimplified = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      DrawerFooterActions && openSideMenu ? /* @__PURE__ */ React77.createElement(React77.Fragment, null, DrawerFooterActions) : null,
-      size > 600 && openSideMenu ? /* @__PURE__ */ React77.createElement(
+      DrawerFooterActions && openSideMenu ? /* @__PURE__ */ React78.createElement(React78.Fragment, null, DrawerFooterActions) : null,
+      size > 600 && openSideMenu ? /* @__PURE__ */ React78.createElement(
         Tooltip,
         {
           side: "left",
           delayDuration: 500,
           content: keepOpen ? props.texts?.collapseSidebar || "Collapse Sidebar" : props.texts?.expandSidebar || "Expand Sidebar"
         },
-        /* @__PURE__ */ React77.createElement(
+        /* @__PURE__ */ React78.createElement(
           Button,
           {
             variant: "light",
             onClick: () => setKeepOpen(!keepOpen),
             size: "smallIcon"
           },
-          /* @__PURE__ */ React77.createElement(
+          /* @__PURE__ */ React78.createElement(
             "svg",
             {
               className: clsx30(
@@ -8499,7 +8542,7 @@ var HawaAppLayoutSimplified = ({
               fill: "currentColor",
               viewBox: "0 0 20 20"
             },
-            /* @__PURE__ */ React77.createElement(
+            /* @__PURE__ */ React78.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -8511,7 +8554,7 @@ var HawaAppLayoutSimplified = ({
         )
       ) : null
     )
-  ), /* @__PURE__ */ React77.createElement(
+  ), /* @__PURE__ */ React78.createElement(
     "div",
     {
       className: "fixed overflow-y-auto",
@@ -8530,14 +8573,14 @@ var HawaAppLayoutSimplified = ({
     props.children
   ));
 };
-var AvatarIcon = () => /* @__PURE__ */ React77.createElement(
+var AvatarIcon = () => /* @__PURE__ */ React78.createElement(
   "svg",
   {
     className: "absolute -left-1 h-10 w-10 text-gray-400",
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React77.createElement(
+  /* @__PURE__ */ React78.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -8564,7 +8607,7 @@ var ArrowIcon = ({ pointing }) => {
     default:
       break;
   }
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "svg",
     {
       className: clsx30(
@@ -8574,7 +8617,7 @@ var ArrowIcon = ({ pointing }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8586,7 +8629,7 @@ var ArrowIcon = ({ pointing }) => {
 };
 
 // src/layout/HawaContainer.tsx
-import React78 from "react";
+import React79 from "react";
 import clsx31 from "clsx";
 var HawaContainer = ({
   maxWidth = "normal",
@@ -8606,7 +8649,7 @@ var HawaContainer = ({
     outlined: "bg-transparent border border-black w-fit",
     neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white"
   };
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "div",
     {
       className: clsx31(
@@ -8622,28 +8665,28 @@ var HawaContainer = ({
 };
 
 // src/layout/HawaGrid.tsx
-import React79 from "react";
+import React80 from "react";
 var HawaGrid = (props) => {
   return (
     // [&>*:not(:first-child)]:mt-8
-    /* @__PURE__ */ React79.createElement("div", { className: " columns-1 gap-5 sm:columns-2 sm:gap-8 md:columns-3 lg:columns-4 [&>*:not(:first-child)]:mt-8" }, props.children)
+    /* @__PURE__ */ React80.createElement("div", { className: " columns-1 gap-5 sm:columns-2 sm:gap-8 md:columns-3 lg:columns-4 [&>*:not(:first-child)]:mt-8" }, props.children)
   );
 };
 
 // src/layout/AppSidebar.tsx
-import React80 from "react";
+import React81 from "react";
 var AppSidebar = ({ isOpen, onClose, items }) => {
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ React80.createElement("div", { className: "fixed inset-0 z-40 flex bg-gray-600 bg-opacity-75" }, /* @__PURE__ */ React80.createElement("div", { className: "w-1/3 rounded-l-lg bg-gray-800 shadow-2xl" }, /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement("div", { className: "fixed inset-0 z-40 flex bg-gray-600 bg-opacity-75" }, /* @__PURE__ */ React81.createElement("div", { className: "w-1/3 rounded-l-lg bg-gray-800 shadow-2xl" }, /* @__PURE__ */ React81.createElement(
     "button",
     {
       onClick: onClose,
       className: "p-4 text-gray-400 hover:text-white focus:text-white focus:outline-none"
     },
     "Close"
-  ), /* @__PURE__ */ React80.createElement("nav", null, items.map((item, i) => /* @__PURE__ */ React80.createElement(
+  ), /* @__PURE__ */ React81.createElement("nav", null, items.map((item, i) => /* @__PURE__ */ React81.createElement(
     "a",
     {
       key: i,
@@ -8652,37 +8695,56 @@ var AppSidebar = ({ isOpen, onClose, items }) => {
       className: "block p-4 font-bold text-white hover:bg-gray-700 hover:text-gray-400"
     },
     item.label
-  )))), /* @__PURE__ */ React80.createElement("div", { className: "w-2/3 bg-gray-50" }));
+  )))), /* @__PURE__ */ React81.createElement("div", { className: "w-2/3 bg-gray-50" }));
 };
 
 // src/layout/Footer.tsx
 import { BsInstagram, BsTwitter } from "react-icons/bs";
 import { FaSnapchatGhost, FaTiktok } from "react-icons/fa";
-var Footer = ({ ...props }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "sticky  bottom-0 left-0 flex w-full flex-row gap-8  bg-blue-200 p-4" }, props.logoText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold" }, props.logoText)), props.footerLinks?.map((pagesSection) => /* @__PURE__ */ React.createElement("div", { className: "flex w-32 flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold" }, pagesSection.title), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, pagesSection.pages.map((singlePage) => /* @__PURE__ */ React.createElement(
-    "a",
+var Footer = ({
+  variation = "default",
+  ...props
+}) => {
+  let variationStyles = {
+    default: "rounded border",
+    minimal: "border-t"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      className: "transition-all hover:font-bold",
-      href: singlePage.link
+      className: cn(
+        "flex w-full flex-row items-center justify-between gap-8  rounded bg-background p-4",
+        variationStyles[variation]
+      )
     },
-    singlePage.label
-  ))))), props.socialLinks && /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-2" }, props.socialLinks.twitter && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(BsTwitter, null)), props.socialLinks.instagram && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(BsInstagram, null)), props.socialLinks.tiktok && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(FaTiktok, null)), props.socialLinks.snapchat && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(FaSnapchatGhost, null))));
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-2" }, props.logoURL && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("img", { className: "h-8", src: props.logoURL })), props.logoText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold text-primary" }, props.logoText))), props.copyRights && props.footerLinks && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-muted-foreground" }, "\xA9 ", props.copyRights, " ", (/* @__PURE__ */ new Date()).getFullYear())),
+    props.copyRights && !props.footerLinks && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-muted-foreground" }, "\xA9 ", props.copyRights, " ", (/* @__PURE__ */ new Date()).getFullYear()),
+    props.footerLinks?.map((pagesSection) => /* @__PURE__ */ React.createElement("div", { className: "flex w-32 flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold" }, pagesSection.title), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, pagesSection.pages.map((singlePage) => /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: "transition-all hover:font-bold",
+        href: singlePage.link
+      },
+      singlePage.label
+    ))))),
+    props.socialLinks && /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-2" }, props.socialLinks.twitter && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(BsTwitter, null)), props.socialLinks.instagram && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(BsInstagram, null)), props.socialLinks.tiktok && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(FaTiktok, null)), props.socialLinks.snapchat && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(FaSnapchatGhost, null)))
+  );
 };
 
 // src/layout/Banner.tsx
-import React81, { useRef as useRef17, useState as useState40 } from "react";
+import React82, { useRef as useRef17, useState as useState41 } from "react";
 import clsx32 from "clsx";
 var HawaBanner = ({
   design = "floating",
   ...props
 }) => {
   const bannerRef = useRef17(null);
-  const [closed, setClosed] = useState40(false);
+  const [closed, setClosed] = useState41(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"
   };
-  return /* @__PURE__ */ React81.createElement("div", { ref: bannerRef }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement("div", { ref: bannerRef }, /* @__PURE__ */ React82.createElement(
     "div",
     {
       dir: props.direction,
@@ -8693,7 +8755,7 @@ var HawaBanner = ({
         closed ? "opacity-0" : "opacity-100"
       )
     },
-    /* @__PURE__ */ React81.createElement("div", { className: "mb-3 flex w-full flex-col items-center  justify-start   md:mb-0 md:flex-row md:items-center" }, /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement("div", { className: "mb-3 flex w-full flex-col items-center  justify-start   md:mb-0 md:flex-row md:items-center" }, /* @__PURE__ */ React82.createElement(
       "div",
       {
         className: clsx32(
@@ -8701,7 +8763,7 @@ var HawaBanner = ({
           "mb-2 flex items-center  border-gray-200 dark:border-gray-600 md:mb-0 md:mr-4  md:pr-4"
         )
       },
-      props.logoURL && /* @__PURE__ */ React81.createElement(
+      props.logoURL && /* @__PURE__ */ React82.createElement(
         "img",
         {
           src: props.logoURL,
@@ -8709,8 +8771,8 @@ var HawaBanner = ({
           alt: "Flowbite Logo"
         }
       ),
-      props.title && /* @__PURE__ */ React81.createElement("span", { className: "self-center whitespace-nowrap text-lg font-semibold dark:text-white" }, props.title)
-    ), props.text && /* @__PURE__ */ React81.createElement(
+      props.title && /* @__PURE__ */ React82.createElement("span", { className: "self-center whitespace-nowrap text-lg font-semibold dark:text-white" }, props.title)
+    ), props.text && /* @__PURE__ */ React82.createElement(
       "p",
       {
         className: clsx32(
@@ -8720,7 +8782,7 @@ var HawaBanner = ({
       },
       props.text
     )),
-    props.actionText && /* @__PURE__ */ React81.createElement(
+    props.actionText && /* @__PURE__ */ React82.createElement(
       "div",
       {
         className: clsx32(
@@ -8728,9 +8790,9 @@ var HawaBanner = ({
           props.direction === "rtl" ? "ml-0 md:ml-10" : "mr-0 md:mr-10"
         )
       },
-      /* @__PURE__ */ React81.createElement(HawaButton, { onClick: props.onActionClick }, props.actionText)
+      /* @__PURE__ */ React82.createElement(HawaButton, { onClick: props.onActionClick }, props.actionText)
     ),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       "button",
       {
         type: "button",
@@ -8747,8 +8809,8 @@ var HawaBanner = ({
           }, 200);
         }
       },
-      /* @__PURE__ */ React81.createElement("span", { className: "sr-only" }, "Close"),
-      /* @__PURE__ */ React81.createElement(
+      /* @__PURE__ */ React82.createElement("span", { className: "sr-only" }, "Close"),
+      /* @__PURE__ */ React82.createElement(
         "svg",
         {
           "aria-hidden": "true",
@@ -8756,7 +8818,7 @@ var HawaBanner = ({
           fill: "currentColor",
           viewBox: "0 0 20 20"
         },
-        /* @__PURE__ */ React81.createElement(
+        /* @__PURE__ */ React82.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -8770,7 +8832,7 @@ var HawaBanner = ({
 };
 
 // src/blocks/Account/UserProfileForm.tsx
-import React82 from "react";
+import React83 from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 var UserProfileForm = (props) => {
   const methods = useForm();
@@ -8780,12 +8842,12 @@ var UserProfileForm = (props) => {
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React82.createElement(Card, null, /* @__PURE__ */ React82.createElement("form", { onSubmit: handleSubmit((e) => props.handleUpdateProfile(e)) }, /* @__PURE__ */ React82.createElement(CardContent, { headless: true }, /* @__PURE__ */ React82.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(Card, null, /* @__PURE__ */ React83.createElement("form", { onSubmit: handleSubmit((e) => props.handleUpdateProfile(e)) }, /* @__PURE__ */ React83.createElement(CardContent, { headless: true }, /* @__PURE__ */ React83.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React83.createElement(
     Controller,
     {
       control,
       name: "fullName",
-      render: ({ field }) => /* @__PURE__ */ React82.createElement(
+      render: ({ field }) => /* @__PURE__ */ React83.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8798,19 +8860,19 @@ var UserProfileForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React83.createElement(
     Controller,
     {
       control,
       name: "phoneNumber",
-      render: ({ field }) => /* @__PURE__ */ React82.createElement(HawaPhoneInput, { label: "Phone number" })
+      render: ({ field }) => /* @__PURE__ */ React83.createElement(HawaPhoneInput, { label: "Phone number" })
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React83.createElement(
     Controller,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React82.createElement(
+      render: ({ field }) => /* @__PURE__ */ React83.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8830,12 +8892,12 @@ var UserProfileForm = (props) => {
         }
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React83.createElement(
     Controller,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React82.createElement(
+      render: ({ field }) => /* @__PURE__ */ React83.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8851,12 +8913,12 @@ var UserProfileForm = (props) => {
         required: props.texts.passwordRequiredText
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React83.createElement(
     Controller,
     {
       control,
       name: "confirmPassword",
-      render: ({ field }) => /* @__PURE__ */ React82.createElement(
+      render: ({ field }) => /* @__PURE__ */ React83.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8872,17 +8934,17 @@ var UserProfileForm = (props) => {
         required: props.texts.confirmPasswordRequiredText
       }
     }
-  ))), /* @__PURE__ */ React82.createElement(CardFooter, null, /* @__PURE__ */ React82.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updateProfile))));
+  ))), /* @__PURE__ */ React83.createElement(CardFooter, null, /* @__PURE__ */ React83.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updateProfile))));
 };
 
 // src/blocks/Account/UserSettingsForm.tsx
-import React83 from "react";
+import React84 from "react";
 var UserSettingsForm = (props) => {
-  return /* @__PURE__ */ React83.createElement(Card, null, /* @__PURE__ */ React83.createElement(CardContent, { headless: true }, /* @__PURE__ */ React83.createElement("div", { className: "mb-2 text-sm font-bold" }, props.blockTitle), /* @__PURE__ */ React83.createElement("div", { className: "flex flex-col gap-4 rounded  p-2" }, props.children)));
+  return /* @__PURE__ */ React84.createElement(Card, null, /* @__PURE__ */ React84.createElement(CardContent, { headless: true }, /* @__PURE__ */ React84.createElement("div", { className: "mb-2 text-sm font-bold" }, props.blockTitle), /* @__PURE__ */ React84.createElement("div", { className: "flex flex-col gap-4 rounded  p-2" }, props.children)));
 };
 
 // src/blocks/AuthForms/AppLanding.tsx
-import React84 from "react";
+import React85 from "react";
 
 // src/elements/Icons.tsx
 var Icons = {
@@ -9034,39 +9096,46 @@ var Icons = {
 
 // src/blocks/AuthForms/AppLanding.tsx
 var AppLanding = (props) => {
-  return /* @__PURE__ */ React84.createElement("div", null, /* @__PURE__ */ React84.createElement(Card, null, /* @__PURE__ */ React84.createElement(CardContent, { headless: true, className: "flex flex-col gap-6" }, /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement("div", null, /* @__PURE__ */ React85.createElement(Card, null, /* @__PURE__ */ React85.createElement(CardContent, { headless: true, className: "flex flex-col gap-6" }, /* @__PURE__ */ React85.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
       variant: "outline"
     },
-    /* @__PURE__ */ React84.createElement(Icons.google, { className: "h-4 w-4" }),
+    /* @__PURE__ */ React85.createElement(Icons.google, { className: "h-4 w-4" }),
     "Continue With Google"
-  ), /* @__PURE__ */ React84.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
       variant: "outline"
     },
-    /* @__PURE__ */ React84.createElement(Icons.twitter, { className: "h-4 w-4" }),
+    /* @__PURE__ */ React85.createElement(Icons.twitter, { className: "h-4 w-4" }),
     "Continue With Twitter"
-  ), /* @__PURE__ */ React84.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
       variant: "outline"
     },
-    /* @__PURE__ */ React84.createElement(Icons.apple, { className: "h-4 w-4" }),
+    /* @__PURE__ */ React85.createElement(Icons.apple, { className: "h-4 w-4" }),
     "Continue With Apple"
-  ), /* @__PURE__ */ React84.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
       variant: "outline"
     },
-    /* @__PURE__ */ React84.createElement(Icons.mail, { className: "h-4 w-4" }),
+    /* @__PURE__ */ React85.createElement(Icons.mail, { className: "h-4 w-4" }),
     "Continue With Email"
-  ), /* @__PURE__ */ React84.createElement("a", { href: "#", className: "text-center text-sm" }, "Don't have an account?", " ", /* @__PURE__ */ React84.createElement("a", { href: "#", className: "clickable-link" }, "Sign Up")))), /* @__PURE__ */ React84.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React84.createElement(
+  ), !props.withoutSignUp && /* @__PURE__ */ React85.createElement("div", { className: "p-3 text-center text-sm font-normal dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React85.createElement(
+    "span",
+    {
+      onClick: props.handleRouteToSignUp,
+      className: "clickable-link"
+    },
+    props.texts.createAccount
+  )))), /* @__PURE__ */ React85.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React85.createElement(
     HawaRadio,
     {
       onChangeTab: props.handleLanguage,
@@ -9076,7 +9145,7 @@ var AppLanding = (props) => {
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ React84.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     HawaRadio,
     {
       onChangeTab: props.handleColorMode,
@@ -9084,7 +9153,7 @@ var AppLanding = (props) => {
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ React84.createElement(
+          label: /* @__PURE__ */ React85.createElement(
             "svg",
             {
               width: "15",
@@ -9094,7 +9163,7 @@ var AppLanding = (props) => {
               xmlns: "http://www.w3.org/2000/svg",
               className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
             },
-            /* @__PURE__ */ React84.createElement(
+            /* @__PURE__ */ React85.createElement(
               "path",
               {
                 d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
@@ -9107,7 +9176,7 @@ var AppLanding = (props) => {
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ React84.createElement(
+          label: /* @__PURE__ */ React85.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -9121,7 +9190,7 @@ var AppLanding = (props) => {
               strokeLinejoin: "round",
               className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
             },
-            /* @__PURE__ */ React84.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ React85.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -9130,7 +9199,7 @@ var AppLanding = (props) => {
 };
 
 // src/blocks/AuthForms/SignInPhone.tsx
-import React85, { useState as useState41 } from "react";
+import React86, { useState as useState42 } from "react";
 import { Controller as Controller2, useForm as useForm2 } from "react-hook-form";
 var SignInPhone = (props) => {
   const methods = useForm2();
@@ -9139,8 +9208,8 @@ var SignInPhone = (props) => {
     handleSubmit,
     control
   } = methods;
-  const [userPhone, setUserPhone] = useState41("");
-  return /* @__PURE__ */ React85.createElement(Card, null, /* @__PURE__ */ React85.createElement(CardContent, { headless: true }, /* @__PURE__ */ React85.createElement(
+  const [userPhone, setUserPhone] = useState42("");
+  return /* @__PURE__ */ React86.createElement(Card, null, /* @__PURE__ */ React86.createElement(CardContent, { headless: true }, /* @__PURE__ */ React86.createElement(
     "form",
     {
       onSubmit: (e) => {
@@ -9148,12 +9217,12 @@ var SignInPhone = (props) => {
         props.handleSignIn(userPhone);
       }
     },
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       Controller2,
       {
         control,
         name: "phone",
-        render: ({ field }) => /* @__PURE__ */ React85.createElement(
+        render: ({ field }) => /* @__PURE__ */ React86.createElement(
           HawaPhoneInput,
           {
             country: props.country ?? "",
@@ -9167,13 +9236,13 @@ var SignInPhone = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ React85.createElement("div", { className: "mt-2" }),
-    /* @__PURE__ */ React85.createElement(Button, { className: "w-full" }, props.SignInButtonText)
+    /* @__PURE__ */ React86.createElement("div", { className: "mt-2" }),
+    /* @__PURE__ */ React86.createElement(Button, { className: "w-full" }, props.SignInButtonText)
   )));
 };
 
 // src/blocks/AuthForms/SignInForm.tsx
-import React86 from "react";
+import React87 from "react";
 import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
 var SignInForm = (props) => {
   const {
@@ -9181,19 +9250,19 @@ var SignInForm = (props) => {
     handleSubmit,
     control
   } = useForm3();
-  return /* @__PURE__ */ React86.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React86.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React86.createElement(CardContent, { headless: true }, /* @__PURE__ */ React86.createElement("form", { onSubmit: handleSubmit((e) => props.handleSignIn(e)) }, props.showError && /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React87.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React87.createElement(CardContent, { headless: true }, /* @__PURE__ */ React87.createElement("form", { onSubmit: handleSubmit((e) => props.handleSignIn(e)) }, props.showError && /* @__PURE__ */ React87.createElement(
     HawaAlert,
     {
       title: props.errorTitle,
       text: props.errorText,
       severity: "error"
     }
-  ), props.signInType === "email" ? /* @__PURE__ */ React86.createElement(
+  ), props.signInType === "email" ? /* @__PURE__ */ React87.createElement(
     Controller3,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React86.createElement(
+      render: ({ field }) => /* @__PURE__ */ React87.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9214,13 +9283,13 @@ var SignInForm = (props) => {
         }
       }
     }
-  ) : props.signInType === "username" ? /* @__PURE__ */ React86.createElement(
+  ) : props.signInType === "username" ? /* @__PURE__ */ React87.createElement(
     Controller3,
     {
       control,
       name: "username",
       render: ({ field }) => {
-        return /* @__PURE__ */ React86.createElement(
+        return /* @__PURE__ */ React87.createElement(
           HawaTextField,
           {
             width: "full",
@@ -9238,20 +9307,20 @@ var SignInForm = (props) => {
         required: props.texts.usernameRequired
       }
     }
-  ) : /* @__PURE__ */ React86.createElement(
+  ) : /* @__PURE__ */ React87.createElement(
     Controller3,
     {
       control,
       name: "phone",
-      render: ({ field }) => /* @__PURE__ */ React86.createElement(HawaPhoneInput, { label: "Phone number" }),
+      render: ({ field }) => /* @__PURE__ */ React87.createElement(HawaPhoneInput, { label: "Phone number" }),
       rules: { required: props.texts.phoneRequiredText }
     }
-  ), props.signInType !== "phone" && /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(
+  ), props.signInType !== "phone" && /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(
     Controller3,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React86.createElement(
+      render: ({ field }) => /* @__PURE__ */ React87.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9269,58 +9338,58 @@ var SignInForm = (props) => {
         minLength: 5
       }
     }
-  ), !props.withoutResetPassword && /* @__PURE__ */ React86.createElement(
+  ), !props.withoutResetPassword && /* @__PURE__ */ React87.createElement(
     "div",
     {
       onClick: props.handleForgotPassword,
       className: "mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
     },
     props.texts.forgotPasswordText
-  )), /* @__PURE__ */ React86.createElement(Button, { className: "mt-4 w-full", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React86.createElement("div", { className: "p-3 text-center text-sm font-semibold dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React86.createElement(
+  )), /* @__PURE__ */ React87.createElement(Button, { className: "mt-4 w-full", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React87.createElement("div", { className: "p-3 text-center text-sm font-normal dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React87.createElement(
     "span",
     {
       onClick: props.handleRouteToSignUp,
       className: "clickable-link"
     },
     props.texts.createAccount
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React86.createElement(
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React87.createElement(
     CardFooter,
     {
       className: cn(
         props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2"
       )
     },
-    props.viaGoogle && /* @__PURE__ */ React86.createElement(
+    props.viaGoogle && /* @__PURE__ */ React87.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignIn
       },
-      /* @__PURE__ */ React86.createElement(Icons.google, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React87.createElement(Icons.google, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signInViaGoogleLabel
     ),
-    props.viaGithub && /* @__PURE__ */ React86.createElement(
+    props.viaGithub && /* @__PURE__ */ React87.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignIn
       },
-      /* @__PURE__ */ React86.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React87.createElement(Icons.gitHub, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signInViaGithubLabel
     ),
-    props.viaTwitter && /* @__PURE__ */ React86.createElement(
+    props.viaTwitter && /* @__PURE__ */ React87.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignIn
       },
-      /* @__PURE__ */ React86.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React87.createElement(Icons.twitter, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signInViaTwitterLabel
     )
-  ) : null), /* @__PURE__ */ React86.createElement(
+  ) : null), /* @__PURE__ */ React87.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -9337,7 +9406,7 @@ function SignInBlock() {
 }
 
 // src/blocks/AuthForms/SignUpForm.tsx
-import React87 from "react";
+import React88 from "react";
 import { Controller as Controller4, FormProvider as FormProvider2, useForm as useForm4 } from "react-hook-form";
 var SignUpForm = (props) => {
   const methods = useForm4();
@@ -9346,22 +9415,22 @@ var SignUpForm = (props) => {
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React87.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React87.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React87.createElement(CardContent, { headless: true }, /* @__PURE__ */ React87.createElement("div", null, props.showError && /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React88.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React88.createElement(CardContent, { headless: true }, /* @__PURE__ */ React88.createElement("div", null, props.showError && /* @__PURE__ */ React88.createElement(
     HawaAlert,
     {
       title: props.errorTitle,
       text: props.errorText,
       severity: "error"
     }
-  ), /* @__PURE__ */ React87.createElement(FormProvider2, { ...methods }, /* @__PURE__ */ React87.createElement("form", { onSubmit: handleSubmit((e) => props.handleSignUp(e)) }, /* @__PURE__ */ React87.createElement("div", null, props.signUpFields.map((fld, i) => {
+  ), /* @__PURE__ */ React88.createElement(FormProvider2, { ...methods }, /* @__PURE__ */ React88.createElement("form", { onSubmit: handleSubmit((e) => props.handleSignUp(e)) }, /* @__PURE__ */ React88.createElement("div", null, props.signUpFields.map((fld, i) => {
     if (fld === "fullname") {
-      return /* @__PURE__ */ React87.createElement(
+      return /* @__PURE__ */ React88.createElement(
         Controller4,
         {
           key: i,
           control,
           name: "fullName",
-          render: ({ field }) => /* @__PURE__ */ React87.createElement(
+          render: ({ field }) => /* @__PURE__ */ React88.createElement(
             HawaTextField,
             {
               width: "full",
@@ -9380,13 +9449,13 @@ var SignUpForm = (props) => {
       );
     }
     if (fld === "email") {
-      return /* @__PURE__ */ React87.createElement(
+      return /* @__PURE__ */ React88.createElement(
         Controller4,
         {
           key: i,
           control,
           name: "email",
-          render: ({ field }) => /* @__PURE__ */ React87.createElement(
+          render: ({ field }) => /* @__PURE__ */ React88.createElement(
             HawaTextField,
             {
               width: "full",
@@ -9410,13 +9479,13 @@ var SignUpForm = (props) => {
       );
     }
     if (fld === "username") {
-      return /* @__PURE__ */ React87.createElement(
+      return /* @__PURE__ */ React88.createElement(
         Controller4,
         {
           key: i,
           control,
           name: "username",
-          render: ({ field }) => /* @__PURE__ */ React87.createElement(
+          render: ({ field }) => /* @__PURE__ */ React88.createElement(
             HawaTextField,
             {
               width: "full",
@@ -9435,12 +9504,12 @@ var SignUpForm = (props) => {
         }
       );
     }
-  })), /* @__PURE__ */ React87.createElement(
+  })), /* @__PURE__ */ React88.createElement(
     Controller4,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React88.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9455,12 +9524,12 @@ var SignUpForm = (props) => {
       ),
       rules: { required: props.texts.passwordRequiredText }
     }
-  ), /* @__PURE__ */ React87.createElement(
+  ), /* @__PURE__ */ React88.createElement(
     Controller4,
     {
       control,
       name: "confirm_password",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React88.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9475,12 +9544,12 @@ var SignUpForm = (props) => {
       ),
       rules: { required: props.texts.passwordRequiredText }
     }
-  ), props.showRefCode && /* @__PURE__ */ React87.createElement(
+  ), props.showRefCode && /* @__PURE__ */ React88.createElement(
     Controller4,
     {
       control,
       name: "refCode",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React88.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9493,12 +9562,12 @@ var SignUpForm = (props) => {
         }
       )
     }
-  ), props.showUserSource && /* @__PURE__ */ React87.createElement("div", null, /* @__PURE__ */ React87.createElement(
+  ), props.showUserSource && /* @__PURE__ */ React88.createElement("div", null, /* @__PURE__ */ React88.createElement(
     Controller4,
     {
       control,
       name: "reference",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React88.createElement(
         HawaSelect,
         {
           label: "How did you learn about us?",
@@ -9517,18 +9586,18 @@ var SignUpForm = (props) => {
         }
       )
     }
-  )), props.showTermsOption && /* @__PURE__ */ React87.createElement(
+  )), props.showTermsOption && /* @__PURE__ */ React88.createElement(
     Controller4,
     {
       control,
       name: "terms_accepted",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React88.createElement(
         HawaCheckbox,
         {
           id: "terms_accepted",
           helperText: errors.terms_accepted?.message,
           onChange: (e) => field.onChange(e),
-          label: /* @__PURE__ */ React87.createElement("span", null, props.texts.iAcceptText, " ", /* @__PURE__ */ React87.createElement(
+          label: /* @__PURE__ */ React88.createElement("span", null, props.texts.iAcceptText, " ", /* @__PURE__ */ React88.createElement(
             "a",
             {
               onClick: props.handleRouteToTOS,
@@ -9540,12 +9609,12 @@ var SignUpForm = (props) => {
       ),
       rules: { required: props.texts.termsRequiredText }
     }
-  ), props.showNewsletterOption && /* @__PURE__ */ React87.createElement(
+  ), props.showNewsletterOption && /* @__PURE__ */ React88.createElement(
     Controller4,
     {
       control,
       name: "newsletter_accepted",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React88.createElement(
         HawaCheckbox,
         {
           id: "newsletter_accepted",
@@ -9554,51 +9623,51 @@ var SignUpForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React87.createElement(Button, { className: "w-full", isLoading: props.isLoading }, props.texts.signUpText))), /* @__PURE__ */ React87.createElement("div", { className: "flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white" }, /* @__PURE__ */ React87.createElement("span", null, props.texts.existingUserText), /* @__PURE__ */ React87.createElement(
+  ), /* @__PURE__ */ React88.createElement(Button, { className: "w-full", isLoading: props.isLoading }, props.texts.signUpText))), /* @__PURE__ */ React88.createElement("div", { className: "flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-normal dark:text-white" }, /* @__PURE__ */ React88.createElement("span", null, props.texts.existingUserText), /* @__PURE__ */ React88.createElement(
     "span",
     {
       onClick: props.handleRouteToSignIn,
       className: "clickable-link"
     },
     props.texts.signInText
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React87.createElement(
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React88.createElement(
     CardFooter,
     {
       className: cn(
         props.logosOnly ? "flex flex-row justify-center gap-2" : "grid grid-cols-1 gap-2"
       )
     },
-    props.viaGoogle && /* @__PURE__ */ React87.createElement(
+    props.viaGoogle && /* @__PURE__ */ React88.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignUp
       },
-      /* @__PURE__ */ React87.createElement(Icons.google, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React88.createElement(Icons.google, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signUpViaGoogleLabel
     ),
-    props.viaGithub && /* @__PURE__ */ React87.createElement(
+    props.viaGithub && /* @__PURE__ */ React88.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignUp
       },
-      /* @__PURE__ */ React87.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React88.createElement(Icons.gitHub, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signUpViaGithubLabel
     ),
-    props.viaTwitter && /* @__PURE__ */ React87.createElement(
+    props.viaTwitter && /* @__PURE__ */ React88.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignUp
       },
-      /* @__PURE__ */ React87.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React88.createElement(Icons.twitter, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signUpViaTwitterLabel
     )
-  ) : null), /* @__PURE__ */ React87.createElement(
+  ) : null), /* @__PURE__ */ React88.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -9610,10 +9679,10 @@ var SignUpForm = (props) => {
 };
 
 // src/blocks/AuthForms/NewPasswordForm.tsx
-import React88, { useState as useState42 } from "react";
+import React89, { useState as useState43 } from "react";
 import { Controller as Controller5, FormProvider as FormProvider3, useForm as useForm5 } from "react-hook-form";
 var NewPasswordForm = (props) => {
-  const [matchError, setMatchError] = useState42(false);
+  const [matchError, setMatchError] = useState43(false);
   const methods = useForm5();
   const {
     formState: { errors },
@@ -9627,12 +9696,12 @@ var NewPasswordForm = (props) => {
       setMatchError(true);
     }
   };
-  return /* @__PURE__ */ React88.createElement(Card, null, matchError && /* @__PURE__ */ React88.createElement(HawaAlert, { text: props.texts.passwordMatchError, severity: "error" }), props.passwordChanged ? /* @__PURE__ */ React88.createElement(CardContent, { headless: true }, /* @__PURE__ */ React88.createElement("div", { className: "text-center" }, props.texts.passwordChanged)) : /* @__PURE__ */ React88.createElement(FormProvider3, { ...methods }, /* @__PURE__ */ React88.createElement("form", { onSubmit: handleSubmit(handleSubmission) }, /* @__PURE__ */ React88.createElement(CardHeader, null, /* @__PURE__ */ React88.createElement(CardTitle, null, "Create Password"), /* @__PURE__ */ React88.createElement(CardDescription, null, "Set a new password for your account")), /* @__PURE__ */ React88.createElement(CardContent, null, /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(Card, null, matchError && /* @__PURE__ */ React89.createElement(HawaAlert, { text: props.texts.passwordMatchError, severity: "error" }), props.passwordChanged ? /* @__PURE__ */ React89.createElement(CardContent, { headless: true }, /* @__PURE__ */ React89.createElement("div", { className: "text-center" }, props.texts.passwordChanged)) : /* @__PURE__ */ React89.createElement(FormProvider3, { ...methods }, /* @__PURE__ */ React89.createElement("form", { onSubmit: handleSubmit(handleSubmission) }, /* @__PURE__ */ React89.createElement(CardHeader, null, /* @__PURE__ */ React89.createElement(CardTitle, null, "Create Password"), /* @__PURE__ */ React89.createElement(CardDescription, null, "Set a new password for your account")), /* @__PURE__ */ React89.createElement(CardContent, null, /* @__PURE__ */ React89.createElement(
     Controller5,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React89.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9649,12 +9718,12 @@ var NewPasswordForm = (props) => {
         required: props.texts.passwordRequiredText
       }
     }
-  ), /* @__PURE__ */ React88.createElement(
+  ), /* @__PURE__ */ React89.createElement(
     Controller5,
     {
       control,
       name: "confirmPassword",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React89.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9671,11 +9740,11 @@ var NewPasswordForm = (props) => {
         required: props.texts.confirmPasswordRequiredText
       }
     }
-  )), /* @__PURE__ */ React88.createElement(CardFooter, null, /* @__PURE__ */ React88.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updatePassword)))));
+  )), /* @__PURE__ */ React89.createElement(CardFooter, null, /* @__PURE__ */ React89.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updatePassword)))));
 };
 
 // src/blocks/AuthForms/ResetPasswordForm.tsx
-import React89 from "react";
+import React90 from "react";
 import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
 var ResetPasswordForm = (props) => {
   const methods = useForm6();
@@ -9685,12 +9754,12 @@ var ResetPasswordForm = (props) => {
     register,
     control
   } = methods;
-  return /* @__PURE__ */ React89.createElement(Card, null, !props.sent ? /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(CardHeader, null, /* @__PURE__ */ React89.createElement(CardTitle, null, "Reset Password"), /* @__PURE__ */ React89.createElement(CardDescription, null, "Enter your email to reset your account password")), /* @__PURE__ */ React89.createElement("form", { onSubmit: handleSubmit(props.handleResetPassword) }, /* @__PURE__ */ React89.createElement(CardContent, null, /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(Card, null, !props.sent ? /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(CardHeader, null, /* @__PURE__ */ React90.createElement(CardTitle, null, "Reset Password"), /* @__PURE__ */ React90.createElement(CardDescription, null, "Enter your email to reset your account password")), /* @__PURE__ */ React90.createElement("form", { onSubmit: handleSubmit(props.handleResetPassword) }, /* @__PURE__ */ React90.createElement(CardContent, null, /* @__PURE__ */ React90.createElement(
     Controller6,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React89.createElement(
+      render: ({ field }) => /* @__PURE__ */ React90.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9710,28 +9779,28 @@ var ResetPasswordForm = (props) => {
         }
       }
     }
-  ), /* @__PURE__ */ React89.createElement("div", { className: " pb-2 text-left text-sm dark:text-gray-300" }, props.texts.dontHaveAccount ?? "Don't have an account? ", /* @__PURE__ */ React89.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__ */ React89.createElement(CardFooter, null, /* @__PURE__ */ React89.createElement(Button, { type: "submit", className: "w-full" }, props.texts.resetPassword)))) : /* @__PURE__ */ React89.createElement(CardContent, { headless: true }, /* @__PURE__ */ React89.createElement("div", { className: "text-center" }, props.texts.emailSentText)));
+  ))), /* @__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 React90, { useState as useState43 } from "react";
+import React91, { useState as useState44 } from "react";
 var CodeConfirmation = (props) => {
-  const [pins, setPins] = useState43(null);
-  return /* @__PURE__ */ React90.createElement(Card, null, /* @__PURE__ */ React90.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React90.createElement(
+  const [pins, setPins] = useState44(null);
+  return /* @__PURE__ */ React91.createElement(Card, null, /* @__PURE__ */ React91.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React91.createElement(
     HawaAlert,
     {
       title: props.errorTitle,
       text: props.errorText,
       severity: "error"
     }
-  ), /* @__PURE__ */ React90.createElement("div", { className: "mb-4 dark:text-white" }, /* @__PURE__ */ React90.createElement("div", { className: "text-lg font-bold" }, props.texts.checkYourPhone ?? "Please check your phone"), /* @__PURE__ */ React90.createElement("div", { className: "text-muted-foreground" }, /* @__PURE__ */ React90.createElement("span", null, props.texts.weSentCode ?? "We've sent a code to "), /* @__PURE__ */ React90.createElement("span", null, props.phoneNumber)), " "), /* @__PURE__ */ React90.createElement(
+  ), /* @__PURE__ */ React91.createElement("div", { className: "mb-4 dark:text-white" }, /* @__PURE__ */ React91.createElement("div", { className: "text-lg font-bold" }, props.texts.checkYourPhone ?? "Please check your phone"), /* @__PURE__ */ React91.createElement("div", { className: "text-muted-foreground" }, /* @__PURE__ */ React91.createElement("span", null, props.texts.weSentCode ?? "We've sent a code to "), /* @__PURE__ */ React91.createElement("span", null, props.phoneNumber)), " "), /* @__PURE__ */ React91.createElement(
     "form",
     {
       onSubmit: (e) => {
@@ -9741,17 +9810,17 @@ var CodeConfirmation = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React90.createElement(HawaPinInput, { width: "full", digits: 6, getPins: (e) => setPins(e) }),
-    /* @__PURE__ */ React90.createElement("div", { className: " py-2 text-center text-xs text-muted-foreground" }, /* @__PURE__ */ React90.createElement("span", null, props.texts.didntGetCode ?? "Didn't get the code?"), " ", /* @__PURE__ */ React90.createElement("span", { className: "clickable-link" }, props.texts.resendCode ?? "Click to resend")),
-    /* @__PURE__ */ React90.createElement("div", { className: "mt-4  grid grid-cols-2 gap-2" }, /* @__PURE__ */ React90.createElement(Button, { variant: "secondary" }, props.texts.cancel ?? "Cancel"), /* @__PURE__ */ React90.createElement(Button, null, props.texts.confirm ?? "Confirm"))
+    /* @__PURE__ */ React91.createElement(HawaPinInput, { width: "full", digits: 6, getPins: (e) => setPins(e) }),
+    /* @__PURE__ */ React91.createElement("div", { className: " py-2 text-center text-xs text-muted-foreground" }, /* @__PURE__ */ React91.createElement("span", null, props.texts.didntGetCode ?? "Didn't get the code?"), " ", /* @__PURE__ */ React91.createElement("span", { className: "clickable-link" }, props.texts.resendCode ?? "Click to resend")),
+    /* @__PURE__ */ React91.createElement("div", { className: "mt-4  grid grid-cols-2 gap-2" }, /* @__PURE__ */ React91.createElement(Button, { variant: "secondary" }, props.texts.cancel ?? "Cancel"), /* @__PURE__ */ React91.createElement(Button, null, props.texts.confirm ?? "Confirm"))
   )));
 };
 
 // src/blocks/Payment/SelectPayment.tsx
-import React91, { useState as useState44 } from "react";
+import React92, { useState as useState45 } from "react";
 var SelectPayment = (props) => {
-  const [selectedMethod, setSelectedMethod] = useState44("");
-  return /* @__PURE__ */ React91.createElement(Card, null, /* @__PURE__ */ React91.createElement(CardHeader, null, /* @__PURE__ */ React91.createElement(CardTitle, null, "Choose Payment Method"), /* @__PURE__ */ React91.createElement(CardDescription, null, "And you'll be directed to the next step to complete the payment")), /* @__PURE__ */ React91.createElement(CardContent, { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React91.createElement(
+  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(
     Button,
     {
       className: cn(
@@ -9763,15 +9832,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaMada,
       onClick: () => setSelectedMethod("mada")
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React91.createElement("span", null, props.madaLabel)
-  ), /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement("span", null, props.madaLabel)
+  ), /* @__PURE__ */ React92.createElement(
     Button,
     {
       className: cn(
@@ -9783,15 +9852,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaApplePay,
       onClick: () => setSelectedMethod("apple-pay")
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",
         className: "h-11"
       }
     ),
-    /* @__PURE__ */ React91.createElement("span", null, props.applePayLabel)
-  ), /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement("span", null, props.applePayLabel)
+  ), /* @__PURE__ */ React92.createElement(
     Button,
     {
       className: cn(
@@ -9803,15 +9872,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaCreditCard,
       onClick: () => setSelectedMethod("visa-master")
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React91.createElement("span", null, props.visaMasterLabel)
-  ), /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement("span", null, props.visaMasterLabel)
+  ), /* @__PURE__ */ React92.createElement(
     Button,
     {
       variant: "outline",
@@ -9823,7 +9892,7 @@ var SelectPayment = (props) => {
       disabled: !props.viaWallet,
       onClick: () => setSelectedMethod("wallet")
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "svg",
       {
         version: "1.1",
@@ -9831,20 +9900,20 @@ var SelectPayment = (props) => {
         viewBox: "0 0 223 223",
         className: "h-6 w-6"
       },
-      /* @__PURE__ */ React91.createElement("g", null, /* @__PURE__ */ React91.createElement(
+      /* @__PURE__ */ React92.createElement("g", null, /* @__PURE__ */ React92.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__ */ React91.createElement(
+      ), /* @__PURE__ */ React92.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__ */ React91.createElement("span", null, props.walletLabel)
-  ), /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement("span", null, props.walletLabel)
+  ), /* @__PURE__ */ React92.createElement(
     Button,
     {
       variant: "outline",
@@ -9856,15 +9925,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaSTCPay,
       onClick: () => setSelectedMethod("stc-pay")
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React91.createElement("span", null, props.stcPayLabel)
-  ), /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement("span", null, props.stcPayLabel)
+  ), /* @__PURE__ */ React92.createElement(
     Button,
     {
       variant: "outline",
@@ -9876,15 +9945,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaGooglePay,
       onClick: () => setSelectedMethod("google-pay")
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React91.createElement("span", null, props.googlePayLabel)
-  ), /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement("span", null, props.googlePayLabel)
+  ), /* @__PURE__ */ React92.createElement(
     Button,
     {
       variant: "outline",
@@ -9896,15 +9965,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaPayPal,
       onClick: () => setSelectedMethod("paypal")
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React91.createElement("span", null, props.paypalLabel)
-  )), /* @__PURE__ */ React91.createElement(CardFooter, null, /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement("span", null, props.paypalLabel)
+  )), /* @__PURE__ */ React92.createElement(CardFooter, null, /* @__PURE__ */ React92.createElement(
     Button,
     {
       onClick: () => props.handleContinue(selectedMethod),
@@ -9916,7 +9985,7 @@ var SelectPayment = (props) => {
 };
 
 // src/blocks/Payment/CreditCardForm.tsx
-import React92 from "react";
+import React93 from "react";
 import { Controller as Controller7, useForm as useForm7 } from "react-hook-form";
 var CreditCardForm = (props) => {
   const methods = useForm7();
@@ -9925,41 +9994,41 @@ var CreditCardForm = (props) => {
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React92.createElement(Card, null, /* @__PURE__ */ React92.createElement("form", { onSubmit: handleSubmit(props.handle) }, /* @__PURE__ */ React92.createElement(CardContent, { headless: true }, /* @__PURE__ */ React92.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React92.createElement(
+  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(
     Controller7,
     {
       control,
       name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React92.createElement(
+      render: ({ field }) => /* @__PURE__ */ React93.createElement(
         HawaTextField,
         {
           width: "full",
-          name: "password",
-          placeholder: "Enter password",
-          type: "tel",
+          name: "cardNumber",
+          placeholder: "1234 1234 1234 1234",
+          type: "number",
           label: "Card Number",
           helpertext: errors.password?.message
         }
       ),
       rules: {
-        required: "Password is rquired"
+        required: "Card Number is rquired"
       }
     }
-  ), /* @__PURE__ */ React92.createElement("div", { className: "w-1/4" }, /* @__PURE__ */ React92.createElement(
+  ), /* @__PURE__ */ React93.createElement("div", { className: "w-1/4" }, /* @__PURE__ */ React93.createElement(
     Controller7,
     {
       control,
-      name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React92.createElement(
+      name: "cardCVC",
+      render: ({ field }) => /* @__PURE__ */ React93.createElement(
         HawaTextField,
         {
           width: "full",
-          name: "password",
+          name: "cardCVC",
           maxLength: "3",
           autoComplete: "cc-number",
-          placeholder: "",
-          type: "password",
-          label: "CCV",
+          placeholder: "CVC",
+          type: "number",
+          label: "CVC",
           helpertext: errors.password?.message
         }
       ),
@@ -9967,19 +10036,19 @@ var CreditCardForm = (props) => {
         required: "Password is rquired"
       }
     }
-  ))), /* @__PURE__ */ React92.createElement(
+  ))), /* @__PURE__ */ React93.createElement(
     Controller7,
     {
       control,
-      name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React92.createElement(
+      name: "cardExpiry",
+      render: ({ field }) => /* @__PURE__ */ React93.createElement(
         HawaTextField,
         {
           width: "full",
-          name: "password",
-          placeholder: "Enter password",
-          type: "text",
-          label: "Name On Card",
+          name: "cardExpiry",
+          placeholder: "MM / YY",
+          type: "password",
+          label: "Expiry Date",
           helpertext: errors.password?.message
         }
       ),
@@ -9987,44 +10056,43 @@ var CreditCardForm = (props) => {
         required: "Password is rquired"
       }
     }
-  ), /* @__PURE__ */ React92.createElement(
+  ), /* @__PURE__ */ React93.createElement(
     Controller7,
     {
       control,
       name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React92.createElement(
+      render: ({ field }) => /* @__PURE__ */ React93.createElement(
         HawaTextField,
         {
           width: "full",
-          name: "password",
-          placeholder: "Enter password",
-          type: "password",
-          label: "Expiry Date",
+          name: "cardName",
+          type: "text",
+          label: "Name on card",
           helpertext: errors.password?.message
         }
       ),
       rules: {
-        required: "Password is rquired"
+        required: "Card holder name is rquired"
       }
     }
-  )), /* @__PURE__ */ React92.createElement(CardFooter, null, /* @__PURE__ */ React92.createElement(Button, { className: "w-full", onClick: props.handlePayWithCreditCard }, "Pay with Credit Card"))));
+  )), /* @__PURE__ */ React93.createElement(CardFooter, null, /* @__PURE__ */ React93.createElement(Button, { className: "w-full", onClick: props.handlePayWithCreditCard }, "Pay with Credit Card"))));
 };
 
 // src/blocks/Payment/ChargeWalletForm.tsx
-import React93, { useState as useState45 } from "react";
+import React94, { useState as useState46 } from "react";
 var ChargeWalletForm = (props) => {
-  const [walletAmount, setWalletAmount] = useState45(0);
-  return /* @__PURE__ */ React93.createElement(Card, null, /* @__PURE__ */ React93.createElement(CardContent, { headless: true }, /* @__PURE__ */ React93.createElement("div", { className: "p-4 text-center" }, /* @__PURE__ */ React93.createElement("div", { className: " text-5xl font-extrabold" }, Number(walletAmount).toLocaleString("en") || "0"), /* @__PURE__ */ React93.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React93.createElement("div", { className: "mb-2 flex w-full flex-col gap-4 text-center" }, /* @__PURE__ */ React93.createElement("div", { className: "mb-2 flex w-full flex-row gap-4 text-center" }, /* @__PURE__ */ React93.createElement(Button, { variant: "outline", className: "h-full w-full" }, "10 SAR"), /* @__PURE__ */ React93.createElement(Button, { variant: "outline", className: "h-full w-full" }, "50 SAR"), /* @__PURE__ */ React93.createElement(Button, { variant: "outline", className: "h-full w-full" }, "100 SAR")), /* @__PURE__ */ React93.createElement(Input, { placeholder: "Custom Amount", type: "number", name: "amount" })), /* @__PURE__ */ React93.createElement(Button, { className: "mt-6 w-full" }, props.texts.chargeWallet)));
+  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)));
 };
 
 // src/blocks/Payment/PayWithWallet.tsx
-import React94 from "react";
+import React95 from "react";
 var PayWithWallet = (props) => {
-  return /* @__PURE__ */ React94.createElement(Card, null, /* @__PURE__ */ React94.createElement(CardContent, { headless: true }, /* @__PURE__ */ React94.createElement("div", { className: "text-center text-5xl font-extrabold" }, props.walletBalance || "0", /* @__PURE__ */ React94.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React94.createElement(Button, { className: "mt-6 w-full", onClick: props.handlePayWithWallet }, "Pay Now")));
+  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")));
 };
 
 // src/blocks/Payment/CheckoutForm.tsx
-import React95 from "react";
+import React96 from "react";
 import { Controller as Controller8, FormProvider as FormProvider4, useForm as useForm8 } from "react-hook-form";
 var CheckoutForm = (props) => {
   let isArabic = props.lang === "ar";
@@ -10048,7 +10116,7 @@ var CheckoutForm = (props) => {
       xl: "row"
     }
   };
-  return /* @__PURE__ */ React95.createElement(Card, null, /* @__PURE__ */ React95.createElement(CardHeader, null, /* @__PURE__ */ React95.createElement(CardTitle, null, props.texts.orderDetails)), /* @__PURE__ */ React95.createElement(CardContent, null, /* @__PURE__ */ React95.createElement("div", null, /* @__PURE__ */ React95.createElement("div", { className: "rounded border border-gray-300" }, /* @__PURE__ */ React95.createElement(
+  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(
     HawaTable,
     {
       pagination: false,
@@ -10062,13 +10130,13 @@ var CheckoutForm = (props) => {
       rows: props.products,
       bordersWidth: "1"
     }
-  )))), /* @__PURE__ */ React95.createElement(CardHeader, null, /* @__PURE__ */ React95.createElement(CardTitle, null, props.texts.billingAddress)), /* @__PURE__ */ React95.createElement("form", { onSubmit: handleSubmit(props.handlePayNow) }, /* @__PURE__ */ React95.createElement(CardContent, null, /* @__PURE__ */ React95.createElement("div", null, /* @__PURE__ */ React95.createElement(FormProvider4, { ...methods }, /* @__PURE__ */ React95.createElement("div", null, /* @__PURE__ */ React95.createElement(
+  )))), /* @__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(
     Controller8,
     {
       control,
       name: "firstName",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           type: "text",
@@ -10079,13 +10147,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React95.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React95.createElement(
+  ), /* @__PURE__ */ React96.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "lastName",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10097,12 +10165,12 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React95.createElement(
+  )), /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10121,13 +10189,13 @@ var CheckoutForm = (props) => {
         }
       }
     }
-  ), /* @__PURE__ */ React95.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React95.createElement(
+  ), /* @__PURE__ */ React96.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "streetAddress",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10139,13 +10207,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React95.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React95.createElement(
+  )), /* @__PURE__ */ React96.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "province",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10157,13 +10225,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React95.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React95.createElement(
+  ), /* @__PURE__ */ React96.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "city",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10175,13 +10243,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React95.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React95.createElement(
+  )), /* @__PURE__ */ React96.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "buildingNumber",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10193,13 +10261,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React95.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React95.createElement(
+  ), /* @__PURE__ */ React96.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "zipCode",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10211,13 +10279,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React95.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React95.createElement(
+  )), /* @__PURE__ */ React96.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React96.createElement(
     Controller8,
     {
       control,
       name: "country",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React95.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaSelect,
         {
           native: true,
@@ -10228,18 +10296,18 @@ var CheckoutForm = (props) => {
           onChange: (e) => field.onChange(e.country_label),
           value: field.value ?? ""
         },
-        /* @__PURE__ */ React95.createElement("option", null),
-        props.countriesList.map((country, i) => /* @__PURE__ */ React95.createElement("option", { key: i }, country))
+        /* @__PURE__ */ React96.createElement("option", null),
+        props.countriesList.map((country, i) => /* @__PURE__ */ React96.createElement("option", { key: i }, country))
       )
     }
-  ))))), /* @__PURE__ */ React95.createElement(CardFooter, null, /* @__PURE__ */ React95.createElement(Button, { className: "w-full" }, props.texts.payNow)), " "));
+  ))))), /* @__PURE__ */ React96.createElement(CardFooter, null, /* @__PURE__ */ React96.createElement(Button, { className: "w-full" }, props.texts.payNow)), " "));
 };
 
 // src/blocks/Payment/Confirmation.tsx
-import React96 from "react";
+import React97 from "react";
 var ConfirmationPage = (props) => {
   let isArabic = props.lang === "ar";
-  return /* @__PURE__ */ React96.createElement(Card, null, /* @__PURE__ */ React96.createElement(CardContent, { headless: true }, " ", /* @__PURE__ */ React96.createElement("div", { className: "py-5 text-center text-3xl font-bold dark:text-white" }, props.confirmationTitle), /* @__PURE__ */ React96.createElement("div", { className: "py-5 dark:text-white" }, /* @__PURE__ */ React96.createElement("div", { className: "mb-2 text-center" }, props.texts.successMessage, " ", /* @__PURE__ */ React96.createElement("strong", null, props.userEmail)), /* @__PURE__ */ React96.createElement("div", { className: "text-center" }, props.texts.yourOrderNumber), /* @__PURE__ */ React96.createElement("div", { className: "text-center font-bold" }, props.orderNumber)), /* @__PURE__ */ React96.createElement("div", { className: "flex flex-col items-center justify-center gap-4 py-5 pt-0" }, /* @__PURE__ */ React96.createElement(Button, { className: "w-full", onClick: props.handlePrint }, props.texts.print), /* @__PURE__ */ React96.createElement(Button, { className: "w-full", onClick: props.handleHistory }, props.texts.history), /* @__PURE__ */ React96.createElement(Button, { className: "w-full", onClick: props.handleHome }, props.texts.homePage), /* @__PURE__ */ React96.createElement("div", { className: " text-center text-sm dark:text-white" }, props.texts.fasterPaymentNote), /* @__PURE__ */ React96.createElement(
+  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(
     "a",
     {
       className: "clickable-link text-xs",
@@ -10250,9 +10318,9 @@ var ConfirmationPage = (props) => {
 };
 
 // src/blocks/Pricing/PricingPlans.tsx
-import React97 from "react";
+import React98 from "react";
 var PricingPlans = (props) => {
-  return /* @__PURE__ */ React97.createElement("div", null, /* @__PURE__ */ React97.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React98.createElement("div", null, /* @__PURE__ */ React98.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React98.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10260,7 +10328,7 @@ var PricingPlans = (props) => {
       options: props.billingCycles,
       onChangeTab: (e) => props.onCycleChange(e)
     }
-  ), /* @__PURE__ */ React97.createElement(
+  ), /* @__PURE__ */ React98.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10268,8 +10336,8 @@ var PricingPlans = (props) => {
       options: props.currencies,
       onChangeTab: (e) => props.onCurrencyChange(e)
     }
-  )), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-row justify-between" }, props.plans.map((plan, index) => {
-    return /* @__PURE__ */ React97.createElement(
+  )), /* @__PURE__ */ React98.createElement("div", { className: "flex flex-row justify-between" }, props.plans.map((plan, index) => {
+    return /* @__PURE__ */ React98.createElement(
       HawaPricingCard,
       {
         key: index,
@@ -10286,8 +10354,8 @@ var PricingPlans = (props) => {
 };
 
 // src/blocks/Pricing/ComparingPlans.tsx
-import React98, { useState as useState46 } from "react";
-var CheckMark = () => /* @__PURE__ */ React98.createElement(
+import React99, { useState as useState47 } from "react";
+var CheckMark = () => /* @__PURE__ */ React99.createElement(
   "svg",
   {
     className: "h-5 w-5 text-green-500",
@@ -10295,7 +10363,7 @@ var CheckMark = () => /* @__PURE__ */ React98.createElement(
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React98.createElement(
+  /* @__PURE__ */ React99.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10304,7 +10372,7 @@ var CheckMark = () => /* @__PURE__ */ React98.createElement(
     }
   )
 );
-var UncheckMark = () => /* @__PURE__ */ React98.createElement(
+var UncheckMark = () => /* @__PURE__ */ React99.createElement(
   "svg",
   {
     className: "h-5 w-5 text-red-500",
@@ -10312,7 +10380,7 @@ var UncheckMark = () => /* @__PURE__ */ React98.createElement(
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React98.createElement(
+  /* @__PURE__ */ React99.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10322,9 +10390,9 @@ var UncheckMark = () => /* @__PURE__ */ React98.createElement(
   )
 );
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState46("sar");
-  const [currentCycle, setCurrentCycle] = useState46("month");
-  return /* @__PURE__ */ React98.createElement("div", { id: "detailed-pricing", className: "w-full overflow-x-auto" }, /* @__PURE__ */ React98.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React98.createElement(
+  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(
     HawaRadio,
     {
       design: "tabs",
@@ -10332,7 +10400,7 @@ var ComparingPlans = (props) => {
       options: props.billingCycles,
       onChangeTab: (e) => props.onCycleChange(e)
     }
-  ), /* @__PURE__ */ React98.createElement(
+  ), /* @__PURE__ */ React99.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10340,9 +10408,9 @@ var ComparingPlans = (props) => {
       options: props.currencies,
       onChangeTab: (e) => props.onCurrencyChange(e)
     }
-  )), /* @__PURE__ */ React98.createElement("div", { className: " overflow-hidden rounded" }, /* @__PURE__ */ React98.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__ */ React98.createElement("div", { className: "flex items-center" }), props.plans.map((plan) => /* @__PURE__ */ React98.createElement("div", null, /* @__PURE__ */ React98.createElement("h5", { className: "text-md 0 font-bold text-gray-500 dark:text-gray-400" }, plan.texts.title), /* @__PURE__ */ React98.createElement("div", { className: " flex items-baseline  text-gray-900 dark:text-white" }, /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement("span", { className: "text-5xl font-extrabold tracking-tight" }, plan.price), /* @__PURE__ */ React98.createElement("span", { className: "mx-1 text-sm font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React98.createElement("span", { className: "ml-1 text-xl font-normal text-gray-500 dark:text-gray-400" }, "/ ", plan.texts.cycleText)), /* @__PURE__ */ React98.createElement("h5", { className: "text-md  font-normal text-gray-500 dark:text-gray-400" }, plan.texts.subtitle)))), props.plans?.map((plan) => {
+  )), /* @__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) => {
     return plan.features.map((feature) => {
-      return /* @__PURE__ */ React98.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__ */ React98.createElement("div", { className: "  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400" }, feature.text, feature.description && /* @__PURE__ */ React98.createElement(Tooltip, { side: "right", content: feature.description }, /* @__PURE__ */ React98.createElement(
+      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(
         "svg",
         {
           stroke: "currentColor",
@@ -10352,44 +10420,44 @@ var ComparingPlans = (props) => {
           height: "1em",
           width: "1em"
         },
-        /* @__PURE__ */ React98.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__ */ React98.createElement(UncheckMark, null), /* @__PURE__ */ React98.createElement(CheckMark, null), /* @__PURE__ */ React98.createElement(UncheckMark, null));
+        /* @__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));
     });
   })));
 };
 
 // src/blocks/Pricing/HorizontalPricing.tsx
-import React99, { useState as useState47 } from "react";
+import React100, { useState as useState48 } from "react";
 import clsx33 from "clsx";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState47(null);
+  const [selectedCard, setSelectedCard] = useState48(null);
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
     { title: "enterprise", price: "$149", cycle: "/mo" }
   ];
-  return /* @__PURE__ */ React99.createElement("div", { className: "z-10 w-full max-w-screen-sm" }, /* @__PURE__ */ React99.createElement("div", { className: "max-w-2xl " }, /* @__PURE__ */ React99.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React99.createElement(
+  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(
     HawaRadio,
     {
       design: "tabs",
       options: props.currencies,
       defaultValue: props.currentCurrency
     }
-  ), /* @__PURE__ */ React99.createElement(
+  ), /* @__PURE__ */ React100.createElement(
     HawaRadio,
     {
       design: "tabs",
       options: props.billingCycles,
       defaultValue: props.currentCycle
     }
-  )), data.map((d) => /* @__PURE__ */ React99.createElement(
+  )), data.map((d) => /* @__PURE__ */ React100.createElement(
     "label",
     {
       htmlFor: d.title,
       className: "",
       onClick: () => setSelectedCard(d.title)
     },
-    /* @__PURE__ */ React99.createElement(
+    /* @__PURE__ */ React100.createElement(
       "input",
       {
         type: "radio",
@@ -10398,7 +10466,7 @@ var HorizontalPricing = (props) => {
         className: "peer appearance-none"
       }
     ),
-    /* @__PURE__ */ React99.createElement(
+    /* @__PURE__ */ React100.createElement(
       "div",
       {
         className: clsx33(
@@ -10406,18 +10474,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__ */ React99.createElement("div", { className: "peer flex items-center gap-4" }, /* @__PURE__ */ React99.createElement(CheckIcons, null), /* @__PURE__ */ React99.createElement(
+      /* @__PURE__ */ React100.createElement("div", { className: "peer flex items-center gap-4" }, /* @__PURE__ */ React100.createElement(CheckIcons, null), /* @__PURE__ */ React100.createElement(
         CardText,
         {
           title: "Enterprise",
           subtitle: "For startups and new businesses"
         }
       )),
-      /* @__PURE__ */ React99.createElement(CardPrice, { amount: d.price, cycle: d.cycle })
+      /* @__PURE__ */ React100.createElement(CardPrice, { amount: d.price, cycle: d.cycle })
     )
   ))));
 };
-var CheckIcons = () => /* @__PURE__ */ React99.createElement(React99.Fragment, null, /* @__PURE__ */ React99.createElement(
+var CheckIcons = () => /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
   "svg",
   {
     fill: "none",
@@ -10426,7 +10494,7 @@ var CheckIcons = () => /* @__PURE__ */ React99.createElement(React99.Fragment, n
     stroke: "currentColor",
     className: "default h-8 w-8 text-neutral-500"
   },
-  /* @__PURE__ */ React99.createElement(
+  /* @__PURE__ */ React100.createElement(
     "path",
     {
       strokeLinecap: "round",
@@ -10434,14 +10502,14 @@ var CheckIcons = () => /* @__PURE__ */ React99.createElement(React99.Fragment, n
       d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
     }
   )
-), /* @__PURE__ */ React99.createElement(
+), /* @__PURE__ */ React100.createElement(
   "svg",
   {
     viewBox: "0 0 24 24",
     fill: "currentColor",
     className: "active hidden h-8 w-8 text-blue-500"
   },
-  /* @__PURE__ */ React99.createElement(
+  /* @__PURE__ */ React100.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10450,21 +10518,21 @@ var CheckIcons = () => /* @__PURE__ */ React99.createElement(React99.Fragment, n
     }
   )
 ));
-var CardText = (props) => /* @__PURE__ */ React99.createElement("div", { className: "peer flex flex-col items-start " }, /* @__PURE__ */ React99.createElement("h2", { className: "font-medium text-neutral-700 dark:text-gray-100 sm:text-xl" }, props.title), /* @__PURE__ */ React99.createElement("p", { className: "text-sm text-neutral-500 dark:text-gray-300" }, props.subtitle, " "));
-var CardPrice = (props) => /* @__PURE__ */ React99.createElement("h2", { className: "peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl" }, props.amount, /* @__PURE__ */ React99.createElement("span", { className: "text-base font-medium text-neutral-400" }, props.cycle));
+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));
 
 // src/blocks/Referral/ReferralAccount.tsx
-import React100 from "react";
+import React101 from "react";
 var ReferralAccount = ({
   referralLink,
   referralCode
 }) => {
-  return /* @__PURE__ */ React100.createElement(Card, null, /* @__PURE__ */ React100.createElement(CardContent, { headless: true }, /* @__PURE__ */ React100.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React100.createElement("div", { className: "mb-1" }, "Referral Code"), /* @__PURE__ */ React100.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React100.createElement("span", { className: "ml-3 font-bold" }, referralCode), /* @__PURE__ */ React100.createElement(
+  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(
     Button,
     {
       onClick: () => navigator.clipboard.writeText(referralCode)
     },
-    /* @__PURE__ */ React100.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React101.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -10474,14 +10542,14 @@ var ReferralAccount = ({
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React100.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("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__ */ React100.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React100.createElement("div", { className: "mb-1" }, "Referral Link"), /* @__PURE__ */ React100.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React100.createElement("span", { className: "ml-3 font-bold" }, referralLink), /* @__PURE__ */ React100.createElement(
+  ))), /* @__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(
     Button,
     {
       onClick: () => navigator.clipboard.writeText(referralLink)
     },
-    /* @__PURE__ */ React100.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React101.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -10491,13 +10559,13 @@ var ReferralAccount = ({
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React100.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("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 React101 from "react";
+import React102 from "react";
 import { Controller as Controller9, FormProvider as FormProvider5, useForm as useForm9 } from "react-hook-form";
 var ReferralSettlement = ({
   referralLink,
@@ -10510,12 +10578,12 @@ var ReferralSettlement = ({
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React101.createElement(Card, null, /* @__PURE__ */ React101.createElement(CardContent, { headless: true }, /* @__PURE__ */ React101.createElement("div", null, /* @__PURE__ */ React101.createElement(FormProvider5, { ...methods }, /* @__PURE__ */ React101.createElement(HawaTextField, { label: "IBAN" }), /* @__PURE__ */ React101.createElement(HawaTextField, { label: "Holder Name" }), /* @__PURE__ */ React101.createElement(
+  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(
     Controller9,
     {
       control,
       name: "bank",
-      render: ({ field }) => /* @__PURE__ */ React101.createElement(
+      render: ({ field }) => /* @__PURE__ */ React102.createElement(
         HawaSelect,
         {
           label: "Bank",
@@ -10534,13 +10602,13 @@ var ReferralSettlement = ({
         }
       )
     }
-  ))), /* @__PURE__ */ React101.createElement("div", null, /* @__PURE__ */ React101.createElement(Button, { className: "mt-6 w-full" }, "Add Bank Account")), withdrawError && /* @__PURE__ */ React101.createElement("div", null, /* @__PURE__ */ React101.createElement(
+  ))), /* @__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(
     HawaAlert,
     {
       text: "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20",
       severity: "warning"
     }
-  )), /* @__PURE__ */ React101.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React101.createElement("div", { className: "mb-1" }, "Settlement Accounts"), /* @__PURE__ */ React101.createElement("div", { className: "rounded" }, /* @__PURE__ */ React101.createElement(
+  )), /* @__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(
     SettlementAccountCard,
     {
       bank: "Al Inma Bank",
@@ -10548,14 +10616,14 @@ var ReferralSettlement = ({
       accountHolder: "Zakher Masri",
       default: true
     }
-  ), /* @__PURE__ */ React101.createElement(
+  ), /* @__PURE__ */ React102.createElement(
     SettlementAccountCard,
     {
       bank: "Al Rajihi Bank",
       iban: "SA10228094028098329119",
       accountHolder: "Zakher Masri"
     }
-  ), /* @__PURE__ */ React101.createElement(
+  ), /* @__PURE__ */ React102.createElement(
     SettlementAccountCard,
     {
       bank: "Al Inma Bank",
@@ -10565,13 +10633,13 @@ var ReferralSettlement = ({
   )))));
 };
 var SettlementAccountCard = (props) => {
-  return /* @__PURE__ */ React101.createElement("div", { className: "mb-3 flex flex-row items-center justify-between rounded border bg-background p-3" }, /* @__PURE__ */ React101.createElement("div", { className: "flex flex-col justify-between" }, /* @__PURE__ */ React101.createElement("div", { className: "text-xs" }, props.bank), /* @__PURE__ */ React101.createElement("div", null, props.accountHolder), /* @__PURE__ */ React101.createElement("div", { className: "text-xs" }, props.iban)), /* @__PURE__ */ React101.createElement("div", { className: "flex flex-row items-center justify-center gap-2" }, props.default && /* @__PURE__ */ React101.createElement(
+  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(
     HawaChip,
     {
       label: "Default",
       size: "small"
     }
-  ), /* @__PURE__ */ React101.createElement(
+  ), /* @__PURE__ */ React102.createElement(
     HawaMenu,
     {
       size: "small",
@@ -10583,7 +10651,7 @@ var SettlementAccountCard = (props) => {
         ]
       ]
     },
-    /* @__PURE__ */ React101.createElement(Button, { variant: "outline", size: "icon" }, /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(Button, { variant: "outline", size: "icon" }, /* @__PURE__ */ React102.createElement(
       "svg",
       {
         "aria-label": "Vertical Three Dots Menu Icon",
@@ -10595,53 +10663,53 @@ var SettlementAccountCard = (props) => {
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React101.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__ */ 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" })
     ))
   )));
 };
 
 // src/blocks/Referral/ReferralStats.tsx
-import React102 from "react";
+import React103 from "react";
 var ReferralStats = ({
   referralLink,
   referralCode,
   withdrawError
 }) => {
-  return /* @__PURE__ */ React102.createElement(Card, null, /* @__PURE__ */ React102.createElement(CardContent, { headless: true }, /* @__PURE__ */ React102.createElement("div", { className: "mb-1" }, "Stats"), /* @__PURE__ */ React102.createElement("div", { className: "justi flex flex-row gap-1" }, /* @__PURE__ */ React102.createElement(NumberCard, { title: "Clicks", number: 22 }), /* @__PURE__ */ React102.createElement(NumberCard, { title: "Sign-ups", number: 32 }), /* @__PURE__ */ React102.createElement(NumberCard, { title: "Commission", number: "213.22 SAR" })), /* @__PURE__ */ React102.createElement(Button, { className: "mt-6 w-full" }, "Withdraw Money"), withdrawError && /* @__PURE__ */ React102.createElement("div", null, /* @__PURE__ */ React102.createElement(
+  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(
     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" }, "Sign ups"), /* @__PURE__ */ React102.createElement("div", { className: "rounded" }, /* @__PURE__ */ React102.createElement(
+  )), /* @__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(
     ReferralSignUpCard,
     {
       date: "2020/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React102.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React102.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React102.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React102.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
@@ -10650,26 +10718,26 @@ var ReferralStats = ({
     }
   )))));
 };
-var NumberCard = (props) => /* @__PURE__ */ React102.createElement("div", { className: "w-full rounded border bg-background p-2" }, /* @__PURE__ */ React102.createElement("div", { className: "text-sm" }, props.title), /* @__PURE__ */ React102.createElement("div", { className: "font-bold" }, props.number));
-var ReferralSignUpCard = (props) => /* @__PURE__ */ React102.createElement("div", { className: "mb-3 rounded border-b bg-background p-2" }, /* @__PURE__ */ React102.createElement("div", { className: "text-xs" }, props.date), /* @__PURE__ */ React102.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React102.createElement("div", null, props.email), /* @__PURE__ */ React102.createElement("div", null, props.amount)));
+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)));
 
 // src/blocks/Misc/NotFound.tsx
-import React103 from "react";
+import React104 from "react";
 var NotFound = ({
   variant = "contained",
   texts
 }) => {
-  return /* @__PURE__ */ React103.createElement(Card, null, /* @__PURE__ */ React103.createElement(CardContent, { headless: true }, /* @__PURE__ */ React103.createElement("div", { className: "flex flex-col items-center dark:text-white" }, /* @__PURE__ */ React103.createElement("div", { className: "text-center text-6xl font-bold " }, "404"), /* @__PURE__ */ React103.createElement("div", { className: "m-2 text-center text-xl font-bold " }, texts?.pageNotFound ?? "Page Not Found"), /* @__PURE__ */ React103.createElement("div", { className: "mb-4 text-center" }, texts?.ifLost ?? /* @__PURE__ */ React103.createElement(React103.Fragment, null, "If you're lost please contact us", " ", /* @__PURE__ */ React103.createElement("span", { className: "clickable-link" }, "help@sikka.io"))), /* @__PURE__ */ React103.createElement(Button, { className: "w-full" }, texts?.home ?? "Home"))));
+  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"))));
 };
 
 // src/blocks/Misc/EmptyState.tsx
-import React104 from "react";
+import React105 from "react";
 var EmptyState = ({
   variant = "contained",
   texts,
   onActionClick
 }) => {
-  return /* @__PURE__ */ React104.createElement(Card, null, /* @__PURE__ */ React104.createElement(CardContent, { headless: true }, /* @__PURE__ */ React104.createElement("div", { className: "flex flex-col items-center justify-center text-center " }, /* @__PURE__ */ React104.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__ */ React104.createElement(
+  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(
     "svg",
     {
       stroke: "currentColor",
@@ -10679,36 +10747,36 @@ var EmptyState = ({
       height: "0.35em",
       width: "0.35em"
     },
-    /* @__PURE__ */ React104.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__ */ React104.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.youreCaughtUp ?? "You're all caught up"))), /* @__PURE__ */ React104.createElement(CardFooter, null, /* @__PURE__ */ React104.createElement(Button, { className: "w-full", onClick: () => onActionClick() }, texts?.actionText ?? "Go Home")));
+    /* @__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")));
 };
 
 // src/blocks/Misc/Testimonial.tsx
-import React105 from "react";
+import React106 from "react";
 var Testimonial = (props) => {
-  return /* @__PURE__ */ React105.createElement(Card, null, /* @__PURE__ */ React105.createElement(CardContent, { headless: true }, /* @__PURE__ */ React105.createElement("div", null, /* @__PURE__ */ React105.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__ */ React105.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React105.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none" }, /* @__PURE__ */ React105.createElement("rect", { width: "48", height: "48", rx: "24", fill: "#45BE8B" }), /* @__PURE__ */ React105.createElement(
+  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(
     "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__ */ React105.createElement(
+  ), /* @__PURE__ */ React106.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__ */ React105.createElement("span", { className: "border border-l " }), " ", /* @__PURE__ */ React105.createElement("div", null, /* @__PURE__ */ React105.createElement("strong", null, "Brent Lassi"), /* @__PURE__ */ React105.createElement("div", null, " Chief Information Security Officer")))));
+  )), /* @__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")))));
 };
 
 // src/blocks/Misc/LeadGenerator.tsx
-import React106 from "react";
+import React107 from "react";
 var LeadGenerator = ({
   variant = "contained",
   texts,
   handleNewsletterSub
 }) => {
-  return /* @__PURE__ */ React106.createElement(Card, null, /* @__PURE__ */ React106.createElement(CardHeader, null, /* @__PURE__ */ React106.createElement(CardTitle, null, texts?.title), /* @__PURE__ */ React106.createElement(CardDescription, null, texts?.subtitle)), /* @__PURE__ */ React106.createElement(CardContent, null, /* @__PURE__ */ React106.createElement(
+  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(
     "form",
     {
       className: "flex flex-row gap-2",
@@ -10717,36 +10785,36 @@ var LeadGenerator = ({
         handleNewsletterSub(e.target[0].value);
       }
     },
-    /* @__PURE__ */ React106.createElement(Input, { type: "email", name: "email", placeholder: "example@sikka.io" }),
-    /* @__PURE__ */ React106.createElement(Button, null, texts?.submit ?? "Submit")
+    /* @__PURE__ */ React107.createElement(Input, { type: "email", name: "email", placeholder: "example@sikka.io" }),
+    /* @__PURE__ */ React107.createElement(Button, null, texts?.submit ?? "Submit")
   )));
 };
 
 // src/blocks/Misc/Announcement.tsx
-import React107 from "react";
+import React108 from "react";
 var Announcement = ({
   variant = "contained",
   onActionClick,
   ...props
 }) => {
-  return /* @__PURE__ */ React107.createElement(Card, null, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(Card, null, /* @__PURE__ */ React108.createElement(
     CardContent,
     {
       headless: true,
       className: "flex flex-row items-center justify-between"
     },
-    /* @__PURE__ */ React107.createElement("div", { className: "flex flex-col items-start justify-center " }, /* @__PURE__ */ React107.createElement("span", { className: "text-lg font-bold" }, props.title), /* @__PURE__ */ React107.createElement("span", { className: "text-sm" }, props.subtitle)),
-    /* @__PURE__ */ React107.createElement(Button, { onClick: () => onActionClick() }, props.actionText)
+    /* @__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)
   ));
 };
 
 // src/blocks/Misc/NoPermission.tsx
-import React108 from "react";
+import React109 from "react";
 var NoPermission = ({
   variant = "contained",
   texts
 }) => {
-  return /* @__PURE__ */ React108.createElement(Card, null, /* @__PURE__ */ React108.createElement(CardContent, { headless: true }, /* @__PURE__ */ React108.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React108.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__ */ React108.createElement(
+  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(
     "svg",
     {
       stroke: "currentColor",
@@ -10756,13 +10824,14 @@ var NoPermission = ({
       height: "0.35em",
       width: "0.35em"
     },
-    /* @__PURE__ */ React108.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__ */ React108.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.title ?? "You don't have permission"), /* @__PURE__ */ React108.createElement("div", null, texts?.subtitle ?? "If you think this is a problem please contact your administrator or our customer support"))));
+    /* @__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"))));
 };
 
 // src/hooks/useHover.ts
-import { useEffect as useEffect26, useRef as useRef18, useState as useState48 } from "react";
+import { useEffect as useEffect26, useRef as useRef18, useState as useState49 } from "react";
 export {
+  ActionCard,
   Announcement,
   AppLanding,
   AppLayout,