@sikka/hawa 0.1.91 → 0.1.93

package/dist/index.mjs

@@ -196,7 +196,7 @@ var HawaTextField = ({
       ),
       disabled: preview
     }
-  )), props.helpertext ? /* @__PURE__ */ React7.createElement("p", { className: "mb-0 mt-1 text-xs text-red-600 dark:text-red-500" }, props.helpertext) : null));
+  )), props.iconInside && /* @__PURE__ */ React7.createElement("div", { className: "absolute right-1 top-[41px]  -translate-y-1/2" }, props.iconInside), props.helpertext ? /* @__PURE__ */ React7.createElement("p", { className: "mb-0 mt-1 text-xs text-red-600 dark:text-red-500" }, props.helpertext) : null));
 };
 
 // src/elements/HawaColorPicker.tsx
@@ -270,7 +270,6 @@ var HawaRange = ({
 
 // src/elements/HawaRadio.tsx
 import React10, { useState as useState5, useRef, useEffect as useEffect2 } from "react";
-import clsx4 from "clsx";
 var HawaRadio = ({
   design = "default",
   width = "default",
@@ -302,7 +301,7 @@ var HawaRadio = ({
         "ul",
         {
           ref,
-          className: clsx4(
+          className: cn(
             props.options?.length > 2 ? "flex-wrap xs:max-w-full xs:flex-nowrap" : "",
             "select-none whitespace-nowrap rounded  border text-center text-sm font-medium",
             widthStyle[width],
@@ -317,7 +316,7 @@ var HawaRadio = ({
               setSelectedOption(opt.value);
               props.onChangeTab(opt.value);
             },
-            className: clsx4(
+            className: cn(
               "w-full cursor-pointer",
               orientation === "horizontal" && parentDirection === "ltr" && "rounded-none first:rounded-l last:rounded-r",
               orientation === "horizontal" && parentDirection === "rtl" && "rounded-none first:rounded-r last:rounded-l",
@@ -332,7 +331,7 @@ var HawaRadio = ({
         ))
       );
     case "bordered":
-      return /* @__PURE__ */ React10.createElement("div", { className: clsx4(orientationStyle[orientation], "gap-4") }, props.options.map((opt, i) => /* @__PURE__ */ React10.createElement("div", { className: "rounded border border-gray-200   " }, /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React10.createElement("div", { className: cn(orientationStyle[orientation], "gap-4") }, props.options.map((opt, i) => /* @__PURE__ */ React10.createElement("div", { className: "rounded border border-gray-200   " }, /* @__PURE__ */ React10.createElement(
         "div",
         {
           className: "radio-item radio-item-bordered flex items-center    transition-all",
@@ -352,7 +351,7 @@ var HawaRadio = ({
           "label",
           {
             htmlFor: opt.value.toString(),
-            className: clsx4(
+            className: cn(
               "ml-2 w-full  p-4 pl-3  text-sm font-medium dark:text-white",
               opt.disabled ? "opacity-50" : "cursor-pointer text-gray-900"
             )
@@ -361,7 +360,7 @@ var HawaRadio = ({
         )
       ))));
     case "cards":
-      return /* @__PURE__ */ React10.createElement("ul", { className: clsx4(orientationStyle[orientation], "gap-4") }, props.options?.map((opt, o) => /* @__PURE__ */ React10.createElement("li", null, /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React10.createElement("ul", { className: cn(orientationStyle[orientation], "gap-4") }, props.options?.map((opt, o) => /* @__PURE__ */ React10.createElement("li", null, /* @__PURE__ */ React10.createElement(
         "input",
         {
           type: "radio",
@@ -376,18 +375,18 @@ var HawaRadio = ({
         "label",
         {
           htmlFor: opt.value.toString(),
-          className: clsx4(
-            "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500",
-            opt.disabled ? "opacity-50" : "cursor-pointer hover:bg-gray-100 hover:text-gray-600"
+          className: cn(
+            "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400  dark:peer-checked:text-primary",
+            opt.disabled ? "opacity-50" : "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 hover:text-gray-600"
           )
         },
         /* @__PURE__ */ React10.createElement("div", { className: "block  h-full w-full" }, /* @__PURE__ */ React10.createElement("div", { className: "w-full text-lg font-semibold" }, opt.label), /* @__PURE__ */ React10.createElement("div", { className: "w-full" }, opt.sublabel))
       ))));
     default:
-      return /* @__PURE__ */ React10.createElement("div", { className: orientationStyle[orientation] }, props.options.map((opt, i) => /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React10.createElement("div", { className: cn(orientationStyle[orientation], "gap-2") }, props.options.map((opt, i) => /* @__PURE__ */ React10.createElement(
         "div",
         {
-          className: "radio-item radio-item-default mb-4 flex items-center transition-all",
+          className: "radio-item radio-item-default  flex items-center transition-all",
           key: i + 1
         },
         /* @__PURE__ */ React10.createElement(
@@ -404,8 +403,8 @@ var HawaRadio = ({
           "label",
           {
             htmlFor: opt.value.toString(),
-            className: clsx4(
-              "ml-2 text-sm font-medium dark:text-white",
+            className: cn(
+              "text-sm font-medium dark:text-white",
               opt.disabled ? "text-gray-400" : "cursor-pointer text-gray-900"
             )
           },
@@ -416,7 +415,7 @@ var HawaRadio = ({
 };
 
 // src/elements/HawaSelect.tsx
-import clsx5 from "clsx";
+import clsx4 from "clsx";
 import React11 from "react";
 import Select from "react-select";
 import CreatableSelect from "react-select/creatable";
@@ -438,7 +437,7 @@ var Control = ({
     "div",
     {
       ref: innerRef,
-      className: clsx5(
+      className: clsx4(
         sizeStyles2[size],
         "flex  w-full rounded border bg-background text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:focus:ring-blue-500"
       ),
@@ -628,7 +627,7 @@ var HawaTypography = (props) => {
 
 // src/elements/HawaAlert.tsx
 import React17, { useRef as useRef3, useState as useState7, useEffect as useEffect4 } from "react";
-import clsx7 from "clsx";
+import clsx6 from "clsx";
 
 // src/elements/Button.tsx
 import * as React16 from "react";
@@ -636,7 +635,7 @@ import { cva as cva2 } from "class-variance-authority";
 
 // src/elements/HawaLoading.tsx
 import React15 from "react";
-import clsx6 from "clsx";
+import clsx5 from "clsx";
 var HawaLoading = ({
   design = "spinner",
   size = "sm",
@@ -659,7 +658,7 @@ var HawaLoading = ({
       return /* @__PURE__ */ React15.createElement("div", { className: "flex flex-row gap-2" }, /* @__PURE__ */ React15.createElement(
         "div",
         {
-          className: clsx6(
+          className: clsx5(
             "animate-bounce rounded-full delay-100 repeat-infinite",
             size === "button" ? "h-2 w-2" : sizeStyles2[size],
             animationStyles[design.split("-")[1]],
@@ -669,7 +668,7 @@ var HawaLoading = ({
       ), /* @__PURE__ */ React15.createElement(
         "div",
         {
-          className: clsx6(
+          className: clsx5(
             "animate-bounce rounded-full delay-200 repeat-infinite",
             size === "button" ? "h-2 w-2" : sizeStyles2[size],
             animationStyles[design.split("-")[1]],
@@ -679,7 +678,7 @@ var HawaLoading = ({
       ), /* @__PURE__ */ React15.createElement(
         "div",
         {
-          className: clsx6(
+          className: clsx5(
             "animate-bounce rounded-full delay-300 repeat-infinite",
             size === "button" ? "h-2 w-2" : sizeStyles2[size],
             animationStyles[design.split("-")[1]],
@@ -691,7 +690,7 @@ var HawaLoading = ({
       return /* @__PURE__ */ React15.createElement("div", { className: "flex flex-row gap-x-3" }, /* @__PURE__ */ React15.createElement("div", { "aria-label": "Loading...", role: "status" }, /* @__PURE__ */ React15.createElement(
         "svg",
         {
-          className: clsx6(sizeStyles2[size], "animate-spin"),
+          className: clsx5(sizeStyles2[size], "animate-spin"),
           viewBox: "3 3 18 18"
         },
         /* @__PURE__ */ React15.createElement(
@@ -724,7 +723,8 @@ var buttonVariants = cva2(
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:underline",
+        neoBrutalism: "cursor-pointer transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms] active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active"
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -754,6 +754,7 @@ var Button = React16.forwardRef(
     ...props
   }, ref) => {
     const Comp = "button";
+    const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "bg-primary" : "bg-primary-foreground";
     return /* @__PURE__ */ React16.createElement(
       Comp,
       {
@@ -765,7 +766,7 @@ var Button = React16.forwardRef(
         HawaLoading,
         {
           design: "dots-pulse",
-          color: "bg-primary-foreground",
+          color: loadingColor,
           size: "button"
         }
       ) : children
@@ -848,7 +849,7 @@ var HawaAlert = ({
   return /* @__PURE__ */ React17.createElement("div", { ref: alertRef }, /* @__PURE__ */ React17.createElement(
     "div",
     {
-      className: clsx7(
+      className: clsx6(
         "relative mb-4 flex flex-col rounded p-4 text-sm transition-all",
         styleVariant[variant][severity],
         closed ? "opacity-0" : "opacity-100",
@@ -860,7 +861,7 @@ var HawaAlert = ({
     /* @__PURE__ */ React17.createElement("div", { className: "flex flex-row" }, icon && /* @__PURE__ */ React17.createElement("div", { className: direction === "rtl" ? "pl-2 pt-1" : "pr-2 pt-1" }, icon), /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React17.createElement(
       "span",
       {
-        className: clsx7(
+        className: clsx6(
           "font-medium",
           direction === "rtl" ? "ml-8" : "mr-8"
         )
@@ -879,7 +880,7 @@ var HawaAlert = ({
       "button",
       {
         type: "button",
-        className: clsx7(
+        className: clsx6(
           "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900",
           closeButtonStyle[severity],
           direction === "rtl" ? "left-2" : "right-2"
@@ -918,7 +919,7 @@ var HawaAlert = ({
 
 // src/elements/HawaTable.tsx
 import React20, { useEffect as useEffect6, useState as useState9 } from "react";
-import clsx8 from "clsx";
+import clsx7 from "clsx";
 
 // src/hooks/useTable.ts
 import { useState as useState8, useEffect as useEffect5 } from "react";
@@ -1344,7 +1345,7 @@ var HawaTable = ({
   )))), /* @__PURE__ */ React20.createElement(
     "table",
     {
-      className: clsx8(
+      className: clsx7(
         borders === "outer" || borders === "all" ? `outline outline-[${bordersWidth}px] -outline-offset-1 outline-gray-300 dark:outline-gray-700` : "",
         "w-full  rounded   text-left text-sm text-gray-500 dark:text-gray-400",
         `bg-${headerColor}`
@@ -1353,7 +1354,7 @@ var HawaTable = ({
     /* @__PURE__ */ React20.createElement(
       "thead",
       {
-        className: clsx8(
+        className: clsx7(
           "text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400",
           borders === "rows" || borders === "all" || borders === "inner" ? "border-b " : ""
         )
@@ -1369,7 +1370,7 @@ var HawaTable = ({
               key: i,
               scope: "col",
               colSpan: 2,
-              className: clsx8(
+              className: clsx7(
                 col.sortable ? "cursor-pointer hover:bg-gray-300" : "",
                 sizeStyles2[size],
                 i !== 0 && (borders === "cols" || borders === "all" || borders === "inner") ? `border-r border-r-[${bordersWidth}px] border-l border-l-[${bordersWidth}px]` : ""
@@ -1383,7 +1384,7 @@ var HawaTable = ({
         "th",
         {
           scope: "col",
-          className: clsx8(sizeStyles2[size], "w-[calc(1%)] text-center")
+          className: clsx7(sizeStyles2[size], "w-[calc(1%)] text-center")
         },
         props.texts?.actions ?? "Actions"
       ) : null)
@@ -1399,7 +1400,7 @@ var HawaTable = ({
           "tr",
           {
             key: rowIndex,
-            className: clsx8(
+            className: clsx7(
               " dark:border-gray-700 dark:bg-gray-800",
               props.clickable ? "hover:bg-gray-100" : "",
               !lastRow && (borders === "all" || borders === "rows" || borders === "inner") ? `border-b border-b-[${bordersWidth}px]` : ""
@@ -1420,7 +1421,7 @@ var HawaTable = ({
                 {
                   colSpan: 2,
                   key: i,
-                  className: clsx8(
+                  className: clsx7(
                     // borders === "outer" ? "border" : "",
                     sizeStyles2[size],
                     highlightFirst && firstCell ? "font-bold" : "font-normal",
@@ -1473,7 +1474,7 @@ var HawaTable = ({
       }) : /* @__PURE__ */ React20.createElement("tr", { className: "bg-transparent" }, /* @__PURE__ */ React20.createElement("td", { colSpan: 20 }, /* @__PURE__ */ React20.createElement(
         "div",
         {
-          className: clsx8(
+          className: clsx7(
             "w-full rounded-b  border p-5 text-center",
             // bodyColor ? `bg-${bodyColor}` : "bg-background"
             "bg-background"
@@ -1498,7 +1499,7 @@ var HawaTable = ({
         "button",
         {
           key: index,
-          className: clsx8(
+          className: clsx7(
             "w-10 p-1 text-xs hover:bg-gray-200",
             page === el ? "bg-primary text-primary-foreground hover:bg-primary" : "bg-gray-100"
           ),
@@ -1528,7 +1529,7 @@ var HawaTable = ({
         "button",
         {
           key: index,
-          className: clsx8(
+          className: clsx7(
             "w-10 p-1 text-xs hover:bg-gray-200",
             page === el ? "bg-primary text-primary-foreground hover:bg-primary" : "bg-gray-100"
           ),
@@ -1542,7 +1543,7 @@ var HawaTable = ({
       "button",
       {
         key: index,
-        className: clsx8(
+        className: clsx7(
           "w-10 p-1 text-xs",
           page === el ? "bg-primary text-primary-foreground " : "border bg-background hover:bg-primary/10 dark:hover:bg-primary/10",
           // Check if the direction is 'rtl'
@@ -1596,7 +1597,7 @@ var HawaSearchBar = (props) => {
 
 // src/elements/HawaAccordion.tsx
 import React22, { useState as useState10 } from "react";
-import clsx9 from "clsx";
+import clsx8 from "clsx";
 var HawaAccordion = (props) => {
   const [collapse, setCollapse] = useState10(false);
   return /* @__PURE__ */ React22.createElement("div", { className: "h-fit w-full" }, /* @__PURE__ */ React22.createElement(
@@ -1604,7 +1605,7 @@ var HawaAccordion = (props) => {
     {
       id: "accordion-collapse-heading-" + props.index,
       type: "button",
-      className: clsx9(
+      className: clsx8(
         collapse ? "rounded" : "rounded-t",
         "flex w-full items-center justify-between  border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100  dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800"
       ),
@@ -1636,7 +1637,7 @@ var HawaAccordion = (props) => {
     {
       id: "accordion-collapse-body-" + props.index,
       "aria-labelledby": "accordion-collapse-heading-" + props.index,
-      className: clsx9(
+      className: clsx8(
         collapse ? "invisible hidden h-0 p-0" : "visible h-full",
         "w-full rounded-b border border-t-0 border-gray-200 p-5 font-light dark:border-gray-700 dark:bg-gray-900"
       )
@@ -3464,7 +3465,7 @@ var HawaPhoneInput = (props) => {
 
 // src/elements/HawaTooltip.tsx
 import React24, { useEffect as useEffect7, useRef as useRef4, useState as useState12 } from "react";
-import clsx10 from "clsx";
+import clsx9 from "clsx";
 var HawaTooltip = ({
   children,
   content,
@@ -3540,7 +3541,7 @@ var HawaTooltip = ({
           opacity: hovered ? "1" : "0",
           maxWidth: "200px"
         },
-        className: clsx10(defaultTooltipStyles, sizeStyles2[size])
+        className: clsx9(defaultTooltipStyles, sizeStyles2[size])
       },
       content
     )
@@ -3654,7 +3655,7 @@ var HawaTabs = ({
 
 // src/elements/HawaModal.tsx
 import React26, { useEffect as useEffect8 } from "react";
-import clsx11 from "clsx";
+import clsx10 from "clsx";
 var HawaModal = ({
   open,
   title,
@@ -3675,7 +3676,7 @@ var HawaModal = ({
   return /* @__PURE__ */ React26.createElement(
     "div",
     {
-      className: clsx11(
+      className: clsx10(
         defaultStyle,
         open ? "z-10  opacity-100 " : "invisible -z-10 opacity-0"
       )
@@ -3683,7 +3684,7 @@ var HawaModal = ({
     /* @__PURE__ */ React26.createElement(
       "div",
       {
-        className: clsx11(
+        className: clsx10(
           "absolute h-screen w-full bg-gray-500 opacity-50",
           open ? "opacity-50" : "opacity-0"
         )
@@ -3723,7 +3724,7 @@ var HawaModal = ({
 
 // src/elements/HawaMenu.tsx
 import React27, { useEffect as useEffect9, useRef as useRef5, useState as useState14 } from "react";
-import clsx12 from "clsx";
+import clsx11 from "clsx";
 var HawaMenu = ({
   menuItems,
   withHeader,
@@ -3816,7 +3817,7 @@ var HawaMenu = ({
           transform: `translate(${menuCoordinates})`,
           maxWidth: "200px"
         },
-        className: clsx12(
+        className: clsx11(
           defaultStyles,
           menuOpened ? "opacity-100" : "invisible opacity-0"
         )
@@ -3848,7 +3849,7 @@ var HawaMenu = ({
                     item?.action(actionedItem);
                   }
                 },
-                className: clsx12(
+                className: clsx11(
                   "transition-all",
                   item.isButton ? "flex cursor-pointer flex-row items-center rounded-inner bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse" : item.disabled ? "text-gray-300" : " flex cursor-pointer flex-row items-center rounded-inner hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
                   sizeStyles2[size]
@@ -4061,7 +4062,7 @@ var HawaCopyrights = (props) => {
 
 // src/elements/HawaStepper.tsx
 import React30 from "react";
-import clsx13 from "clsx";
+import clsx12 from "clsx";
 var HawaStepper = ({
   orientation = "horizontal",
   ...props
@@ -4077,7 +4078,7 @@ var HawaStepper = ({
   return /* @__PURE__ */ React30.createElement(
     "div",
     {
-      className: clsx13(
+      className: clsx12(
         orientationStyles[orientation],
         " flex-wrap justify-start gap-4"
       )
@@ -4097,7 +4098,7 @@ var HawaStepper = ({
           /* @__PURE__ */ React30.createElement("div", { className: "flex flex-row gap-2  " }, /* @__PURE__ */ React30.createElement(
             "div",
             {
-              className: clsx13(
+              className: clsx12(
                 "flex h-6 w-6 min-w-[24px] items-center justify-center  rounded ring-2  ring-primary/20 ring-offset-2",
                 i + 1 <= props.currentStep ? "bg-primary text-primary-foreground " : "bg-primary/20"
               )
@@ -4384,7 +4385,7 @@ var HawaDatepicker = () => {
 // src/elements/DragDropImages.tsx
 import React37, { useEffect as useEffect11, useState as useState18 } from "react";
 import { useDropzone } from "react-dropzone";
-import clsx14 from "clsx";
+import clsx13 from "clsx";
 var DragDropImages = ({
   texts,
   files,
@@ -4549,7 +4550,7 @@ var DragDropImages = ({
   return /* @__PURE__ */ React37.createElement("div", null, label && /* @__PURE__ */ React37.createElement("div", { className: "mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300" }, label), /* @__PURE__ */ React37.createElement(
     "div",
     {
-      className: clsx14(
+      className: clsx13(
         "flex flex-col justify-center rounded border border-dashed bg-gray-50  p-6 transition-all hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-800 ",
         isDragActive ? "bg-gray-200 dark:bg-gray-700" : "bg-background"
       )
@@ -4624,7 +4625,7 @@ import React39 from "react";
 
 // src/elements/SubsectionList.tsx
 import React40, { useState as useState19 } from "react";
-import clsx15 from "clsx";
+import clsx14 from "clsx";
 var SubsectionList = ({ subsections }) => {
   const [selectedSection, setSelectedSection] = useState19(null);
   return /* @__PURE__ */ React40.createElement("div", { className: "w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 " }, subsections.map((ss, i) => /* @__PURE__ */ React40.createElement("div", { key: i, className: "my-0" }, ss.title && /* @__PURE__ */ React40.createElement("div", { className: "my-4 font-bold" }, ss.title), ss.sections.map((s, i2) => /* @__PURE__ */ React40.createElement(
@@ -4652,7 +4653,7 @@ var SubsectionItem = ({
     "div",
     {
       onClick: onItemClick,
-      className: clsx15(
+      className: clsx14(
         "flex w-full cursor-pointer flex-row items-center justify-between gap-2 rounded p-2  transition-all ",
         selected === value ? "bg-primary text-white hover:bg-primary" : "hover:bg-layoutPrimary-300"
       )
@@ -4691,7 +4692,7 @@ var UsageCard = (props) => {
 
 // src/elements/InvoiceAccordion.tsx
 import React42, { useState as useState20 } from "react";
-import clsx16 from "clsx";
+import clsx15 from "clsx";
 var InvoiceAccordion = ({
   direction = "ltr",
   texts = {
@@ -4706,7 +4707,7 @@ var InvoiceAccordion = ({
   const InvoiceItemProp = (props2) => /* @__PURE__ */ React42.createElement(
     "div",
     {
-      className: clsx16(
+      className: clsx15(
         props2.start ? "items-start" : "items-end",
         "flex w-full flex-col"
       )
@@ -4718,7 +4719,7 @@ var InvoiceAccordion = ({
   return /* @__PURE__ */ React42.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React42.createElement("div", { className: "flex w-full flex-row items-center gap-2 border p-4 " }, props.invoiceActions && /* @__PURE__ */ React42.createElement(
     "div",
     {
-      className: clsx16(
+      className: clsx15(
         "transition-all hover:cursor-pointer ",
         direction === "rtl" ? "rotate-180" : "",
         expanded ? "rotate-90" : ""
@@ -4775,7 +4776,7 @@ var InvoiceAccordion = ({
   ))), expanded && /* @__PURE__ */ React42.createElement(
     "div",
     {
-      className: clsx16(
+      className: clsx15(
         expanded ? "h-full" : "h-0 border-none p-0 px-4",
         "flex h-auto flex-col gap-4 overflow-clip border border-t-0 bg-gray-50 p-4 transition-all"
       )
@@ -4806,7 +4807,7 @@ var InvoiceAccordion = ({
 
 // src/elements/UserFeedback.tsx
 import React43, { useEffect as useEffect12, useRef as useRef7, useState as useState21 } from "react";
-import clsx17 from "clsx";
+import clsx16 from "clsx";
 var UserFeedback = ({
   position = "bottom-right",
   ...props
@@ -4840,12 +4841,12 @@ var UserFeedback = ({
     "div",
     {
       ref: popUpRef,
-      className: clsx17("fixed bottom-4 ", boxPosition[position])
+      className: clsx16("fixed bottom-4 ", boxPosition[position])
     },
     /* @__PURE__ */ React43.createElement(
       "div",
       {
-        className: clsx17(
+        className: clsx16(
           "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
           closed ? "opacity-0" : "opacity-100"
         )
@@ -4894,7 +4895,7 @@ var UserFeedback = ({
               clearTimeout(timeoutDestroy);
             }, 5300);
           },
-          className: clsx17(
+          className: clsx16(
             "w-full cursor-pointer rounded border  p-4 text-center transition-all ",
             clickedOption === op ? "bg-gray-500 text-white" : "border bg-background hover:bg-gray-300 dark:hover:bg-gray-700"
           )
@@ -4909,14 +4910,14 @@ var UserFeedback = ({
 
 // src/elements/ArrowCarousel.tsx
 import React44, { useEffect as useEffect13, useState as useState22 } from "react";
-import clsx18 from "clsx";
+import clsx17 from "clsx";
 var Arrow3 = (props) => {
   return /* @__PURE__ */ React44.createElement(
     "svg",
     {
       onClick: props.onClick || (() => {
       }),
-      className: clsx18(
+      className: clsx17(
         "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
         props.direction === "right" ? "-rotate-90" : "rotate-90",
         props.disabled ? "text-gray-300" : "cursor-pointer hover:scale-150"
@@ -4982,7 +4983,7 @@ var ArrowCarousel = (props) => {
 
 // src/elements/FloatingComment.tsx
 import React45, { useRef as useRef8, useState as useState23, useEffect as useEffect14 } from "react";
-import clsx19 from "clsx";
+import clsx18 from "clsx";
 var Property = (props) => {
   return /* @__PURE__ */ React45.createElement(
     "div",
@@ -5471,7 +5472,7 @@ var FloatingComment = (props) => {
         return "ltr";
     }
   };
-  return /* @__PURE__ */ React45.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded shadow-md" }, /* @__PURE__ */ React45.createElement("div", { className: clsx19("flex w-full flex-row justify-start p-2") }, Object.entries(stylers).map(([id, data]) => {
+  return /* @__PURE__ */ React45.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded shadow-md" }, /* @__PURE__ */ React45.createElement("div", { className: clsx18("flex w-full flex-row justify-start p-2") }, Object.entries(stylers).map(([id, data]) => {
     return /* @__PURE__ */ React45.createElement(
       Property,
       {
@@ -5761,7 +5762,7 @@ var FloatingCommentExec = (props) => {
 
 // src/elements/BackToTop.tsx
 import React48, { useState as useState26, useEffect as useEffect16, useRef as useRef10 } from "react";
-import { clsx as clsx20 } from "clsx";
+import { clsx as clsx19 } from "clsx";
 var BackToTop = ({ ...props }) => {
   const [visible, setVisible] = useState26(false);
   const [rect, _setRect] = useState26(null);
@@ -5835,7 +5836,7 @@ var BackToTop = ({ ...props }) => {
     /* @__PURE__ */ React48.createElement(
       "svg",
       {
-        className: clsx20(
+        className: clsx19(
           "h-6 w-6 shrink-0 rotate-180 transition-all  disabled:bg-gray-200"
         ),
         "aria-label": "Arrow Icon",
@@ -5861,7 +5862,7 @@ var Timeline = (props) => {
 
 // src/elements/HawaPinInput.tsx
 import React51, { useEffect as useEffect17, useState as useState27 } from "react";
-import clsx21 from "clsx";
+import clsx20 from "clsx";
 var HawaPinInput = ({
   label,
   icon,
@@ -5913,7 +5914,7 @@ var HawaPinInput = ({
       value,
       id: `input-${index}`,
       pattern: "[0-9]*",
-      className: clsx21(
+      className: clsx20(
         "h-10 rounded border bg-background text-center",
         width === "full" ? "w-full" : "w-10"
       ),
@@ -5927,7 +5928,7 @@ var HawaPinInput = ({
 
 // src/elements/HawaItemCard.tsx
 import React52, { useEffect as useEffect18, useState as useState28 } from "react";
-import clsx22 from "clsx";
+import clsx21 from "clsx";
 var HawaItemCard = ({
   actions,
   counts,
@@ -5971,14 +5972,14 @@ var HawaItemCard = ({
   return /* @__PURE__ */ React52.createElement(
     "div",
     {
-      className: clsx22(defaultStyle, orientationStyles[orientation]),
+      className: clsx21(defaultStyle, orientationStyles[orientation]),
       ...props
     },
     cardImage && /* @__PURE__ */ React52.createElement("div", { className: "group relative overflow-clip" }, /* @__PURE__ */ React52.createElement(
       "img",
       {
         src: "https://via.placeholder.com/50",
-        className: clsx22(
+        className: clsx21(
           imageStyles[orientation],
           clickableImage ? "overflow-clip transition-all group-hover:blur-lg" : ""
         )
@@ -6000,7 +6001,7 @@ var HawaItemCard = ({
         trigger: /* @__PURE__ */ React52.createElement(
           "div",
           {
-            className: clsx22(headerActionsButtonStyle),
+            className: clsx21(headerActionsButtonStyle),
             onClick: handleOpenActionHeader
           },
           /* @__PURE__ */ React52.createElement("span", { className: "sr-only" }, "Open dropdown"),
@@ -6019,7 +6020,7 @@ var HawaItemCard = ({
     )), header && /* @__PURE__ */ React52.createElement("h5", { className: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" }, header), content && /* @__PURE__ */ React52.createElement("span", { className: "w-full font-normal text-gray-700 dark:text-gray-400" }, content), actions || counts ? /* @__PURE__ */ React52.createElement(
       "div",
       {
-        className: clsx22(
+        className: clsx21(
           "mt-3 flex items-center rounded-b-lg dark:text-white ",
           actions && counts ? "justify-between" : "justify-end"
         )
@@ -6031,7 +6032,7 @@ var HawaItemCard = ({
 };
 
 // src/elements/HawaPricingCard.tsx
-import clsx23 from "clsx";
+import clsx22 from "clsx";
 import React53 from "react";
 var HawaPricingCard = ({
   size = "medium",
@@ -6049,7 +6050,7 @@ var HawaPricingCard = ({
     "div",
     {
       dir: isArabic ? "rtl" : "ltr",
-      className: clsx23(
+      className: clsx22(
         currentPlan ? "border-primary" : "bg-background",
         cardSizes[size],
         "flex flex-col gap-4 rounded border-2 p-4"
@@ -6091,7 +6092,7 @@ var HawaPricingCard = ({
 };
 
 // src/elements/HawaAdCard.tsx
-import clsx24 from "clsx";
+import clsx23 from "clsx";
 import React54, { useState as useState29, useEffect as useEffect19, useRef as useRef11 } from "react";
 var HawaAdCard = ({ orientation, ...props }) => {
   const adRef = useRef11(null);
@@ -6123,7 +6124,7 @@ var HawaAdCard = ({ orientation, ...props }) => {
   return /* @__PURE__ */ React54.createElement("div", { ref: adRef }, /* @__PURE__ */ React54.createElement(
     "div",
     {
-      className: clsx24(cardStyles[orientation], "dark:text-white"),
+      className: clsx23(cardStyles[orientation], "dark:text-white"),
       ...props
     },
     /* @__PURE__ */ React54.createElement("div", { className: "flex aspect-square w-full  max-w-fit  items-start " }, /* @__PURE__ */ React54.createElement(
@@ -6155,7 +6156,7 @@ var HawaAdCard = ({ orientation, ...props }) => {
 };
 
 // src/elements/HawaLandingCard.tsx
-import clsx25 from "clsx";
+import clsx24 from "clsx";
 import React55 from "react";
 var HawaLandingCard = ({
   orientation = "horizontal",
@@ -6172,7 +6173,7 @@ var HawaLandingCard = ({
   return /* @__PURE__ */ React55.createElement(
     "div",
     {
-      className: clsx25(
+      className: clsx24(
         cardStyles[orientation],
         "flex flex-col p-10",
         "relative overflow-hidden dark:text-white",
@@ -6196,7 +6197,7 @@ var HawaLandingCard = ({
 
 // src/elements/HawaButton.tsx
 import React56, { useState as useState30 } from "react";
-import clsx26 from "clsx";
+import clsx25 from "clsx";
 var disabledSyles = "cursor-default pointer-events-none";
 var disabledVariantSyles = {
   contained: "text-gray-300 bg-gray-100",
@@ -6281,7 +6282,7 @@ var HawaButton = ({
   return /* @__PURE__ */ React56.createElement(
     "div",
     {
-      className: clsx26(
+      className: clsx25(
         "relative",
         margins !== "none" ? `my-${margins}` : "m-0",
         containerWidthStyles[width]
@@ -6298,7 +6299,7 @@ var HawaButton = ({
       /* @__PURE__ */ React56.createElement(
         "button",
         {
-          className: disabled ? clsx26(
+          className: disabled ? clsx25(
             className,
             baseStyles,
             edgeCorner ? "rounded-inner" : "rounded",
@@ -6307,7 +6308,7 @@ var HawaButton = ({
             widthStyles[width],
             disabledSyles,
             disabledVariantSyles[variant]
-          ) : clsx26(
+          ) : clsx25(
             className,
             baseStyles,
             edgeCorner ? "rounded-inner" : "rounded",
@@ -6324,7 +6325,7 @@ var HawaButton = ({
     ) : /* @__PURE__ */ React56.createElement(
       "button",
       {
-        className: disabled ? clsx26(
+        className: disabled ? clsx25(
           className,
           baseStyles,
           edgeCorner ? "rounded-inner" : "rounded",
@@ -6333,7 +6334,7 @@ var HawaButton = ({
           widthStyles[width],
           disabledSyles,
           disabledVariantSyles[variant]
-        ) : clsx26(
+        ) : clsx25(
           className,
           "overflow-x-clip",
           baseStyles,
@@ -6349,7 +6350,7 @@ var HawaButton = ({
       !isLoading ? /* @__PURE__ */ React56.createElement(
         "div",
         {
-          className: clsx26(
+          className: clsx25(
             " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
             isClicked && feedback ? " -translate-y-8 pb-1 pt-1" : "translate-y-0"
           )
@@ -6361,7 +6362,7 @@ var HawaButton = ({
     badge && /* @__PURE__ */ React56.createElement(
       "div",
       {
-        className: clsx26(
+        className: clsx25(
           typeof badge === "boolean" ? "h-5 w-5" : typeof badge === "string" ? "h-5 w-7" : "h-6 w-6",
           "absolute -right-2 -top-2 inline-flex select-none  items-center justify-center rounded-full border-2 border-white bg-red-500 text-[9px] font-bold text-white dark:border-gray-900"
         )
@@ -6476,16 +6477,130 @@ var ActionCard = (props) => {
   ));
 };
 
-// src/elements/Carousel.tsx
+// src/elements/StickyFeatures.tsx
 import React59 from "react";
+var StickyFeatures = (props) => {
+  return /* @__PURE__ */ React59.createElement("div", { className: "bg-white py-24 sm:py-32" }, /* @__PURE__ */ React59.createElement("div", { className: "mx-auto flex max-w-5xl flex-col items-start gap-10 px-6 md:flex-row lg:px-8" }, /* @__PURE__ */ React59.createElement("div", { className: "w-full md:sticky md:top-10 md:w-[28rem]" }, /* @__PURE__ */ React59.createElement("h2", { className: "text-lg font-semibold leading-8 tracking-tight text-indigo-600" }, props.tag), /* @__PURE__ */ React59.createElement("p", { className: "mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, props.title), /* @__PURE__ */ React59.createElement("p", { className: "mb-2 mt-6 text-base leading-7 text-gray-600" }, props.description)), /* @__PURE__ */ React59.createElement("div", { className: "mt-5 w-full min-w-0 flex-1 md:mt-0" }, /* @__PURE__ */ React59.createElement("dl", { className: "grid grid-cols-1 gap-x-8 gap-y-10 md:max-w-xl lg:max-w-none lg:gap-y-16" }, props.features.map((f) => /* @__PURE__ */ React59.createElement("div", { className: "relative rounded-lg bg-gray-50 p-10" }, /* @__PURE__ */ React59.createElement("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600" }, f.icon), /* @__PURE__ */ React59.createElement("dt", { className: "mt-4 text-lg font-semibold leading-7 text-gray-900" }, f.title), /* @__PURE__ */ React59.createElement("dd", { className: "mt-2 text-base leading-7 text-gray-600" }, f.description)))))));
+};
+
+// src/elements/UserReferralSource.tsx
+import React61, { useEffect as useEffect20, useRef as useRef12, useState as useState32 } from "react";
+import clsx26 from "clsx";
+
+// src/elements/Textarea.tsx
+import * as React60 from "react";
+var Textarea = React60.forwardRef(
+  ({ className, label, ...props }, ref) => {
+    return /* @__PURE__ */ React60.createElement(React60.Fragment, null, label && /* @__PURE__ */ React60.createElement(Label, { htmlFor: props.id }, label), /* @__PURE__ */ React60.createElement(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    ));
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/elements/UserReferralSource.tsx
+var UserReferralSource = ({
+  position = "bottom-right",
+  ...props
+}) => {
+  const [closed, setClosed] = useState32(false);
+  const [answered, setAnswered] = useState32(false);
+  const [clickedOption, setClickedOption] = useState32(null);
+  const [closingTimer, setClosingTimer] = useState32(5);
+  const popUpRef = useRef12(null);
+  const boxPosition = {
+    "bottom-right": "right-4",
+    "bottom-left": "left-4"
+  };
+  useEffect20(() => {
+    const timeoutHide = setTimeout(() => {
+      if (closingTimer >= 0) {
+        setClosingTimer(closingTimer - 1);
+      }
+    }, 1e3);
+    return () => {
+      clearTimeout(timeoutHide);
+    };
+  }, [closingTimer]);
+  const slowClose = () => {
+    setClosed(true);
+    setTimeout(() => {
+      popUpRef.current.removeChild(popUpRef.current.children[0]);
+    }, 200);
+  };
+  return /* @__PURE__ */ React61.createElement(
+    Card,
+    {
+      ref: popUpRef,
+      className: clsx26("fixed bottom-4 p-4 ", boxPosition[position])
+    },
+    /* @__PURE__ */ React61.createElement(
+      "button",
+      {
+        type: "button",
+        className: "absolute right-2 top-2 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+        "data-dismiss-target": "#toast-default",
+        "aria-label": "Close",
+        onClick: () => slowClose()
+      },
+      /* @__PURE__ */ React61.createElement(
+        "svg",
+        {
+          "aria-hidden": "true",
+          className: "h-5 w-5",
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        },
+        /* @__PURE__ */ React61.createElement(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+            clipRule: "evenodd"
+          }
+        )
+      )
+    ),
+    /* @__PURE__ */ React61.createElement(CardContent, { headless: true }, /* @__PURE__ */ React61.createElement(
+      "div",
+      {
+        className: clsx26(
+          "flex flex-col gap-4",
+          // "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
+          closed ? "opacity-0" : "opacity-100"
+        )
+      },
+      /* @__PURE__ */ React61.createElement("div", { className: "mt-4 font-bold" }, props.question),
+      /* @__PURE__ */ React61.createElement("div", { className: "flex w-full flex-row gap-1 rounded " }, /* @__PURE__ */ React61.createElement(
+        HawaRadio,
+        {
+          orientation: "vertical",
+          options: props.options
+        }
+      )),
+      /* @__PURE__ */ React61.createElement("div", null, /* @__PURE__ */ React61.createElement(Textarea, null))
+    ), /* @__PURE__ */ React61.createElement(Button, { className: "mt-4 w-full" }, "Submit"))
+  );
+};
+
+// src/elements/Carousel.tsx
+import React62 from "react";
 
 // src/hooks/useCarousel.ts
-import { useState as useState32, useRef as useRef12 } from "react";
+import { useState as useState33, useRef as useRef13 } from "react";
 var useCarousel = (imageWidth) => {
-  const [isDragging, setIsDragging] = useState32(false);
-  const [startDragX, setStartDragX] = useState32(0);
-  const [scrollLeft, setScrollLeft] = useState32(0);
-  const containerRef = useRef12(null);
+  const [isDragging, setIsDragging] = useState33(false);
+  const [startDragX, setStartDragX] = useState33(0);
+  const [scrollLeft, setScrollLeft] = useState33(0);
+  const containerRef = useRef13(null);
   const findClosestSnapPoint = (scrollLeft2) => {
     return Math.round(scrollLeft2 / imageWidth) * imageWidth;
   };
@@ -6540,7 +6655,7 @@ var Carousel = ({ images }) => {
     handleMouseUp,
     handleMouseMove
   } = useCarousel_default(imageWidth);
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       className: "flex cursor-pointer snap-x  gap-4 overflow-x-hidden justify-center items-center",
@@ -6550,7 +6665,7 @@ var Carousel = ({ images }) => {
       onMouseMove: handleMouseMove,
       ref: containerRef
     },
-    images.map((image, index) => /* @__PURE__ */ React59.createElement("div", { key: index, className: "w-[1000px] h-96 flex-shrink-0" }, /* @__PURE__ */ React59.createElement(
+    images.map((image, index) => /* @__PURE__ */ React62.createElement("div", { key: index, className: "w-[1000px] h-96 flex-shrink-0" }, /* @__PURE__ */ React62.createElement(
       "img",
       {
         src: image,
@@ -6563,10 +6678,10 @@ var Carousel = ({ images }) => {
 };
 
 // src/elements/Input.tsx
-import * as React60 from "react";
-var Input = React60.forwardRef(
+import * as React63 from "react";
+var Input = React63.forwardRef(
   ({ className, preview, type, ...props }, ref) => {
-    return /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React63.createElement(
       "input",
       {
         type,
@@ -6585,19 +6700,19 @@ var Input = React60.forwardRef(
 Input.displayName = "Input";
 
 // src/elements/InterfaceSettings.tsx
-import React61, { useState as useState34 } from "react";
+import React64, { useState as useState35 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
   ...props
 }) => {
-  const [color, setColor] = useState34(props.currentColorMode);
-  const [language, setLanguage] = useState34(props.currentLanguage);
+  const [color, setColor] = useState35(props.currentColorMode);
+  const [language, setLanguage] = useState35(props.currentLanguage);
   let orientationStyle = {
     horizontal: "flex flex-row justify-between",
     vertical: "flex flex-col items-center gap-2"
   };
-  return /* @__PURE__ */ React61.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React64.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React64.createElement(
     HawaRadio,
     {
       width,
@@ -6612,7 +6727,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ React61.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     HawaRadio,
     {
       width,
@@ -6625,7 +6740,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ React61.createElement(
+          label: /* @__PURE__ */ React64.createElement(
             "svg",
             {
               width: "15",
@@ -6635,7 +6750,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__ */ React61.createElement(
+            /* @__PURE__ */ React64.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",
@@ -6646,7 +6761,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ React61.createElement(
+          label: /* @__PURE__ */ React64.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -6657,7 +6772,7 @@ var InterfaceSettings = ({
               stroke: "currentColor",
               className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
             },
-            /* @__PURE__ */ React61.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ React64.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -6666,9 +6781,9 @@ var InterfaceSettings = ({
 };
 
 // src/elements/Popover.tsx
-import * as React62 from "react";
+import * as React65 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-var PopoverContent = React62.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React62.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React62.createElement(
+var PopoverContent = React65.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React65.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React65.createElement(
   PopoverPrimitive.Content,
   {
     ref,
@@ -6689,7 +6804,7 @@ var Popover = ({
   align = "center",
   side,
   sideOffset = 4
-}) => /* @__PURE__ */ React62.createElement(PopoverPrimitive.Root, null, /* @__PURE__ */ React62.createElement(PopoverPrimitive.Trigger, null, trigger), /* @__PURE__ */ React62.createElement(
+}) => /* @__PURE__ */ React65.createElement(PopoverPrimitive.Root, null, /* @__PURE__ */ React65.createElement(PopoverPrimitive.Trigger, null, trigger), /* @__PURE__ */ React65.createElement(
   PopoverContent,
   {
     side,
@@ -6701,10 +6816,10 @@ var Popover = ({
 ));
 
 // src/elements/Tabs.tsx
-import * as React63 from "react";
+import * as React66 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-var TabsContext = React63.createContext({ orientation: "vertical" });
-var Tabs = React63.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React63.createElement(
+var TabsContext = React66.createContext({ orientation: "vertical" });
+var Tabs = React66.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -6715,12 +6830,12 @@ var Tabs = React63.forwardRef(({ className, orientation, ...props }, ref) => /*
     ),
     ...props
   },
-  /* @__PURE__ */ React63.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
+  /* @__PURE__ */ React66.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
 ));
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React63.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React63.useContext(TabsContext);
-  return /* @__PURE__ */ React63.createElement(
+var TabsList = React66.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = React66.useContext(TabsContext);
+  return /* @__PURE__ */ React66.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -6734,8 +6849,8 @@ var TabsList = React63.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React63.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React63.createElement(
+var TabsTrigger = React66.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     TabsPrimitive.Trigger,
     {
       ref,
@@ -6748,7 +6863,7 @@ var TabsTrigger = React63.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React63.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React63.createElement(
+var TabsContent = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -6761,30 +6876,11 @@ var TabsContent = React63.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-// src/elements/Textarea.tsx
-import * as React64 from "react";
-var Textarea = React64.forwardRef(
-  ({ className, label, ...props }, ref) => {
-    return /* @__PURE__ */ React64.createElement(React64.Fragment, null, label && /* @__PURE__ */ React64.createElement(Label, { htmlFor: props.id }, label), /* @__PURE__ */ React64.createElement(
-      "textarea",
-      {
-        className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    ));
-  }
-);
-Textarea.displayName = "Textarea";
-
 // src/elements/Separator.tsx
-import * as React65 from "react";
+import * as React67 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-var Separator3 = React65.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React65.createElement(
+var Separator3 = React67.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React67.createElement(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -6802,7 +6898,7 @@ var Separator3 = React65.forwardRef(
 Separator3.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/elements/Toast.tsx
-import * as React66 from "react";
+import * as React68 from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva as cva3 } from "class-variance-authority";
 var toastVariants = cva3(
@@ -6827,7 +6923,7 @@ var toastVariants = cva3(
   }
 );
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
+var ToastViewport = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -6839,8 +6935,8 @@ var ToastViewport = React66.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React66.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return /* @__PURE__ */ React66.createElement(
+var Toast = React68.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
+  return /* @__PURE__ */ React68.createElement(
     ToastPrimitives.Root,
     {
       ref,
@@ -6855,8 +6951,8 @@ var Toast = React66.forwardRef(({ className, variant, severity = "none", directi
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React66.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React66.createElement(
+var ToastAction = React68.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React68.createElement(
     ToastPrimitives.Action,
     {
       ref,
@@ -6873,7 +6969,7 @@ var ToastAction = React66.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
+var ToastClose = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
   ToastPrimitives.Close,
   {
     ref,
@@ -6884,7 +6980,7 @@ var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE
     "toast-close": "",
     ...props
   },
-  /* @__PURE__ */ React66.createElement(
+  /* @__PURE__ */ React68.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -6893,7 +6989,7 @@ var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React68.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -6904,7 +7000,7 @@ var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE
   )
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
+var ToastTitle = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
   ToastPrimitives.Title,
   {
     ref,
@@ -6913,7 +7009,7 @@ var ToastTitle = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
+var ToastDescription = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
   ToastPrimitives.Description,
   {
     ref,
@@ -6924,10 +7020,10 @@ var ToastDescription = React66.forwardRef(({ className, ...props }, ref) => /* @
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // src/elements/Toaster.tsx
-import React68 from "react";
+import React70 from "react";
 
 // src/hooks/useToast.ts
-import * as React67 from "react";
+import * as React69 from "react";
 var TOAST_LIMIT = 5;
 var TOAST_REMOVE_DELAY = 1e5;
 var count = 0;
@@ -7023,8 +7119,8 @@ function toast({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React67.useState(memoryState);
-  React67.useEffect(() => {
+  const [state, setState] = React69.useState(memoryState);
+  React69.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -7044,29 +7140,22 @@ function useToast() {
 function Toaster(props) {
   const { toasts } = useToast();
   let isRTL = props.direction === "rtl";
-  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__ */ 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") }));
+  return /* @__PURE__ */ React70.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, toasts.map(function({ id, title, description, action, ...toastProps }) {
+    return /* @__PURE__ */ React70.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ React70.createElement("div", { className: "grid gap-1 text-start" }, title && /* @__PURE__ */ React70.createElement(ToastTitle, null, title), description && /* @__PURE__ */ React70.createElement(ToastDescription, null, description)), action, /* @__PURE__ */ React70.createElement(ToastClose, null));
+  }), /* @__PURE__ */ React70.createElement(ToastViewport, { className: cn("gap-2", isRTL && "fixed left-0") }));
 }
 
 // src/elements/Dialog.tsx
-import * as React69 from "react";
+import * as React71 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = ({
   className,
   ...props
-}) => /* @__PURE__ */ React69.createElement(DialogPrimitive.Portal, { className: cn(className), ...props });
+}) => /* @__PURE__ */ React71.createElement(DialogPrimitive.Portal, { className: cn(className), ...props });
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React69.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React69.createElement(
+var DialogOverlay = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7078,7 +7167,7 @@ var DialogOverlay = React69.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React69.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React69.createElement(DialogPortal, null, /* @__PURE__ */ React69.createElement(DialogOverlay, null), /* @__PURE__ */ React69.createElement(
+var DialogContent = React71.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React71.createElement(DialogPortal, null, /* @__PURE__ */ React71.createElement(DialogOverlay, null), /* @__PURE__ */ React71.createElement(
   DialogPrimitive.Content,
   {
     ref,
@@ -7089,7 +7178,7 @@ var DialogContent = React69.forwardRef(({ className, children, ...props }, ref)
     ...props
   },
   children,
-  /* @__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(
+  /* @__PURE__ */ React71.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__ */ React71.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -7098,7 +7187,7 @@ var DialogContent = React69.forwardRef(({ className, children, ...props }, ref)
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React71.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7106,13 +7195,13 @@ var DialogContent = React69.forwardRef(({ className, children, ...props }, ref)
         clipRule: "evenodd"
       }
     )
-  ), /* @__PURE__ */ React69.createElement("span", { className: "sr-only" }, "Close"))
+  ), /* @__PURE__ */ React71.createElement("span", { className: "sr-only" }, "Close"))
 )));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ React69.createElement(
+}) => /* @__PURE__ */ React71.createElement(
   "div",
   {
     className: cn(
@@ -7126,7 +7215,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ React69.createElement(
+}) => /* @__PURE__ */ React71.createElement(
   "div",
   {
     className: cn(
@@ -7137,7 +7226,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React69.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React69.createElement(
+var DialogTitle = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -7149,7 +7238,7 @@ var DialogTitle = React69.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React69.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React69.createElement(
+var DialogDescription = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -7160,32 +7249,32 @@ var DialogDescription = React69.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/layout/Box.tsx
-import React70 from "react";
+import React72 from "react";
 var Box = (props) => {
-  return /* @__PURE__ */ React70.createElement("div", null, props.children);
+  return /* @__PURE__ */ React72.createElement("div", null, props.children);
 };
 
 // src/layout/HawaBottomAppBar.tsx
-import React71 from "react";
+import React73 from "react";
 var HawaBottomAppBar = (props) => {
-  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(
+  return /* @__PURE__ */ React73.createElement("div", { className: "fixed bottom-0 top-auto left-0 m-0 w-full max-w-full  p-1" }, /* @__PURE__ */ React73.createElement(
     "div",
     {
       className: "flex w-full flex-row items-center justify-evenly rounded bg-gray-200"
     },
-    props.appBarContent.map((singleContent, i) => /* @__PURE__ */ React71.createElement(
+    props.appBarContent.map((singleContent, i) => /* @__PURE__ */ React73.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__ */ React71.createElement(
+      /* @__PURE__ */ React73.createElement(
         "div",
         null,
         singleContent.icon
       ),
-      /* @__PURE__ */ React71.createElement(
+      /* @__PURE__ */ React73.createElement(
         "div",
         {
           className: "mt-2 text-sm"
@@ -7197,13 +7286,13 @@ var HawaBottomAppBar = (props) => {
 };
 
 // src/layout/HawaSiteLayout.tsx
-import React74, { useEffect as useEffect22, useRef as useRef14, useState as useState38 } from "react";
+import React76, { useEffect as useEffect23, useRef as useRef15, useState as useState39 } from "react";
 import clsx27 from "clsx";
 
 // src/hooks/useDiscloser.ts
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 var useDiscloser = (value = false) => {
-  const [open, setOpen] = useState36(value);
+  const [open, setOpen] = useState37(value);
   const onOpen = () => setOpen(true);
   const onClose = () => setOpen(false);
   return {
@@ -7215,13 +7304,13 @@ var useDiscloser = (value = false) => {
 var useDiscloser_default = useDiscloser;
 
 // src/hooks/useBreakpoint.ts
-import { useState as useState37, useEffect as useEffect21 } from "react";
+import { useState as useState38, useEffect as useEffect22 } from "react";
 var useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState37(window?.innerWidth);
+  const [breakpoint, setBreakpoint] = useState38(window?.innerWidth);
   const resize = () => {
     setBreakpoint(window?.innerWidth);
   };
-  useEffect21(() => {
+  useEffect22(() => {
     if (typeof window !== "undefined") {
       window?.addEventListener("resize", resize);
       return () => {
@@ -7239,19 +7328,19 @@ var HawaSiteLayout = ({
   navigationSize = "md",
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState38(false);
-  const [openSubItem, setOpenSubItem] = useState38(false);
+  const [openSideMenu, setOpenSideMenu] = useState39(false);
+  const [openSubItem, setOpenSubItem] = useState39(false);
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
-  const ref = useRef14(null);
-  const drawerItemRef = useRef14(null);
+  const ref = useRef15(null);
+  const drawerItemRef = useRef15(null);
   let size;
   if (typeof window !== "undefined") {
     size = useBreakpoint_default();
   } else {
     size = 1200;
   }
-  const [keepOpen, setKeepOpen] = useState38(false);
-  useEffect22(() => {
+  const [keepOpen, setKeepOpen] = useState39(false);
+  useEffect23(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -7286,7 +7375,7 @@ var HawaSiteLayout = ({
     // "w-full",
     // "top-14 h-[calc(100%-3.5rem)]",
   ];
-  return /* @__PURE__ */ React74.createElement("div", { className: "h-full w-full" }, /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React76.createElement("div", { className: "h-full w-full" }, /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: clsx27(
@@ -7299,7 +7388,7 @@ var HawaSiteLayout = ({
         direction === "rtl" ? "flex-row" : "flex-row-reverse"
       )
     },
-    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(
+    size > 600 ? /* @__PURE__ */ React76.createElement("div", { className: "flex  flex-row h-8    items-center  gap-4 px-3" }, props.navItems?.map(({ label }, i) => /* @__PURE__ */ React76.createElement(
       "div",
       {
         onClick: () => setOpenSideMenu(!openSideMenu),
@@ -7307,13 +7396,13 @@ var HawaSiteLayout = ({
         className: "cursor-pointer rounded bg-none text-gray-600 transition-all hover:text-black"
       },
       label
-    ))) : /* @__PURE__ */ React74.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React74.createElement(
+    ))) : /* @__PURE__ */ React76.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React76.createElement(
       "div",
       {
         onClick: () => setOpenSideMenu(!openSideMenu),
         className: "cursor-pointer  rounded p-1  transition-all hover:bg-gray-100"
       },
-      /* @__PURE__ */ React74.createElement(
+      /* @__PURE__ */ React76.createElement(
         "svg",
         {
           stroke: "currentColor",
@@ -7324,7 +7413,7 @@ var HawaSiteLayout = ({
           height: "1.6em",
           width: "1.6em"
         },
-        /* @__PURE__ */ React74.createElement(
+        /* @__PURE__ */ React76.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -7334,15 +7423,15 @@ var HawaSiteLayout = ({
         )
       ),
       " "
-    ), props.pageTitle ? /* @__PURE__ */ React74.createElement("div", null, props.pageTitle) : /* @__PURE__ */ React74.createElement("div", null)),
-    /* @__PURE__ */ React74.createElement("div", { className: "h-full" }, /* @__PURE__ */ React74.createElement(
+    ), props.pageTitle ? /* @__PURE__ */ React76.createElement("div", null, props.pageTitle) : /* @__PURE__ */ React76.createElement("div", null)),
+    /* @__PURE__ */ React76.createElement("div", { className: "h-full" }, /* @__PURE__ */ React76.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__ */ React74.createElement(
+  ), /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: clsx27(" relative top-14")
@@ -7352,17 +7441,17 @@ var HawaSiteLayout = ({
 };
 
 // src/layout/AppLayout.tsx
-import React76, { useEffect as useEffect23, useRef as useRef15, useState as useState39 } from "react";
+import React78, { useEffect as useEffect24, useRef as useRef16, useState as useState40 } from "react";
 import clsx28 from "clsx";
 
 // src/layout/Sidebar.tsx
-import * as React75 from "react";
+import * as React77 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 = React75.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React75.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
+var AccordionItem = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React77.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React75.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React75.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React75.createElement(
+var AccordionTrigger = React77.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React77.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React77.createElement(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -7370,7 +7459,7 @@ var AccordionTrigger = React75.forwardRef(({ className, showArrow, children, ...
     ...props
   },
   children,
-  showArrow && /* @__PURE__ */ React75.createElement(
+  showArrow && /* @__PURE__ */ React77.createElement(
     "svg",
     {
       "aria-label": "Chevron Right Icon",
@@ -7381,7 +7470,7 @@ var AccordionTrigger = React75.forwardRef(({ className, showArrow, children, ...
       width: "1em",
       className: "h-4 w-4 shrink-0 rotate-90 transition-transform duration-200"
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React77.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"
@@ -7390,7 +7479,7 @@ var AccordionTrigger = React75.forwardRef(({ className, showArrow, children, ...
   )
 )));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React75.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React75.createElement(
+var AccordionContent = React77.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React77.createElement(
   AccordionPrimitive.Content,
   {
     ref,
@@ -7400,7 +7489,7 @@ var AccordionContent = React75.forwardRef(({ className, children, ...props }, re
     ),
     ...props
   },
-  /* @__PURE__ */ React75.createElement("div", null, children)
+  /* @__PURE__ */ React77.createElement("div", null, children)
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 var SidebarGroup = ({
@@ -7414,7 +7503,7 @@ var SidebarGroup = ({
   direction,
   isOpen
 }) => {
-  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(
+  return /* @__PURE__ */ React77.createElement("div", null, title && /* @__PURE__ */ React77.createElement("h3", { className: "mb-1 font-bold" }, title), /* @__PURE__ */ React77.createElement("ul", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React77.createElement(
     Accordion,
     {
       value: openedItem,
@@ -7425,7 +7514,7 @@ var SidebarGroup = ({
       collapsible: true,
       className: "flex flex-col gap-1"
     },
-    items.map((item, idx) => /* @__PURE__ */ React75.createElement(
+    items.map((item, idx) => /* @__PURE__ */ React77.createElement(
       SidebarItem,
       {
         isOpen,
@@ -7451,20 +7540,20 @@ var SidebarItem = ({
     return isSelected && isSelected[index] === value ? "bg-primary text-primary-foreground  cursor-default" : "hover:bg-primary/10";
   };
   if (item.subitems) {
-    return /* @__PURE__ */ React75.createElement(
+    return /* @__PURE__ */ React77.createElement(
       AccordionItem,
       {
         value: item.value,
         className: "overflow-x-clip",
         dir: direction
       },
-      /* @__PURE__ */ React75.createElement(
+      /* @__PURE__ */ React77.createElement(
         AccordionTrigger,
         {
           className: cn(getSelectedStyle(item.value, 0)),
           showArrow: isOpen
         },
-        /* @__PURE__ */ React75.createElement(
+        /* @__PURE__ */ React77.createElement(
           "div",
           {
             className: cn(
@@ -7473,7 +7562,7 @@ var SidebarItem = ({
             )
           },
           item.icon,
-          isOpen && /* @__PURE__ */ React75.createElement(
+          isOpen && /* @__PURE__ */ React77.createElement(
             "span",
             {
               className: cn(
@@ -7485,12 +7574,12 @@ var SidebarItem = ({
           )
         )
       ),
-      item.subitems && /* @__PURE__ */ React75.createElement(AccordionContent, { className: " mt-1 h-full rounded  " }, /* @__PURE__ */ React75.createElement(
+      item.subitems && /* @__PURE__ */ React77.createElement(AccordionContent, { className: " mt-1 h-full rounded  " }, /* @__PURE__ */ React77.createElement(
         "div",
         {
           className: cn("flex h-full flex-col gap-2 bg-foreground/5 p-1")
         },
-        item.subitems.map((subitem, idx) => /* @__PURE__ */ React75.createElement(
+        item.subitems.map((subitem, idx) => /* @__PURE__ */ React77.createElement(
           "li",
           {
             key: idx,
@@ -7511,7 +7600,7 @@ var SidebarItem = ({
       ))
     );
   } else {
-    return /* @__PURE__ */ React75.createElement(
+    return /* @__PURE__ */ React77.createElement(
       "div",
       {
         dir: direction,
@@ -7526,7 +7615,7 @@ var SidebarItem = ({
           "overflow-x-clip "
         )
       },
-      /* @__PURE__ */ React75.createElement("div", { className: "flex flex-row items-center gap-2 " }, item.icon, /* @__PURE__ */ React75.createElement(
+      /* @__PURE__ */ React77.createElement("div", { className: "flex flex-row items-center gap-2 " }, item.icon, /* @__PURE__ */ React77.createElement(
         "span",
         {
           className: cn(
@@ -7565,10 +7654,10 @@ var AppLayout = ({
       lg: closeDrawerWidth
     }
   };
-  const ref = useRef15(null);
+  const ref = useRef16(null);
   const isRTL = direction === "rtl";
-  const [openedSidebarItem, setOpenedSidebarItem] = useState39("");
-  const [selectedItem, setSelectedItem] = useState39(
+  const [openedSidebarItem, setOpenedSidebarItem] = useState40("");
+  const [selectedItem, setSelectedItem] = useState40(
     currentPage ? currentPage : []
   );
   let size;
@@ -7577,10 +7666,10 @@ var AppLayout = ({
   } else {
     size = 1200;
   }
-  const [keepOpen, setKeepOpen] = useState39(size > 600 ? true : false);
-  const [openSideMenu, setOpenSideMenu] = useState39(size > 600 ? true : false);
+  const [keepOpen, setKeepOpen] = useState40(size > 600 ? true : false);
+  const [openSideMenu, setOpenSideMenu] = useState40(size > 600 ? true : false);
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  useEffect23(() => {
+  useEffect24(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -7591,7 +7680,7 @@ var AppLayout = ({
       document.removeEventListener("click", handleClickOutside, true);
     };
   }, [keepOpen]);
-  return /* @__PURE__ */ React76.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React78.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React78.createElement(
     "div",
     {
       className: clsx28(
@@ -7599,7 +7688,7 @@ var AppLayout = ({
         isRTL ? "flex-row-reverse" : "flex-row"
       )
     },
-    size > 600 ? /* @__PURE__ */ React76.createElement(
+    size > 600 ? /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx28(
@@ -7615,19 +7704,19 @@ var AppLayout = ({
       props.pageTitle
     ) : (
       // Mobile Drawer Menu Button
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React78.createElement(
         "div",
         {
           dir: direction,
           className: "flex items-center justify-center gap-0.5"
         },
-        /* @__PURE__ */ React76.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__ */ React76.createElement(
+          /* @__PURE__ */ React78.createElement(
             "svg",
             {
               stroke: "currentColor",
@@ -7638,7 +7727,7 @@ var AppLayout = ({
               height: "1.6em",
               width: "1.6em"
             },
-            /* @__PURE__ */ React76.createElement(
+            /* @__PURE__ */ React78.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7648,10 +7737,10 @@ var AppLayout = ({
             )
           )
         ),
-        props.pageTitle ? /* @__PURE__ */ React76.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React76.createElement("div", null)
+        props.pageTitle ? /* @__PURE__ */ React78.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React78.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx28(
@@ -7659,16 +7748,16 @@ var AppLayout = ({
           isRTL ? "flex-row-reverse" : "flex-row"
         )
       },
-      size > 600 ? /* @__PURE__ */ React76.createElement(
+      size > 600 ? /* @__PURE__ */ React78.createElement(
         "div",
         {
           className: isRTL ? "text-left text-xs" : "text-right text-xs"
         },
-        /* @__PURE__ */ React76.createElement("div", { className: "font-bold" }, props.username),
+        /* @__PURE__ */ React78.createElement("div", { className: "font-bold" }, props.username),
         " ",
-        /* @__PURE__ */ React76.createElement("div", null, props.email)
+        /* @__PURE__ */ React78.createElement("div", null, props.email)
       ) : null,
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React78.createElement(
         DropdownMenu,
         {
           triggerClassname: "mx-2",
@@ -7677,7 +7766,7 @@ var AppLayout = ({
           side: "bottom",
           sideOffset: 5,
           direction: isRTL ? "rtl" : "ltr",
-          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(
+          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" }, props.avatarImage ? /* @__PURE__ */ React78.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React78.createElement(
             "svg",
             {
               "aria-label": "Avatar Icon",
@@ -7685,7 +7774,7 @@ var AppLayout = ({
               fill: "currentColor",
               viewBox: "0 0 20 20"
             },
-            /* @__PURE__ */ React76.createElement(
+            /* @__PURE__ */ React78.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7699,7 +7788,7 @@ var AppLayout = ({
         }
       )
     )
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React78.createElement(
     "div",
     {
       className: clsx28(
@@ -7722,7 +7811,7 @@ var AppLayout = ({
       },
       ref
     },
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         dir: direction,
@@ -7734,7 +7823,7 @@ var AppLayout = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React78.createElement(
         "img",
         {
           className: clsx28(
@@ -7744,7 +7833,7 @@ var AppLayout = ({
           src: props.logoLink
         }
       ),
-      size > 600 ? /* @__PURE__ */ React76.createElement(
+      size > 600 ? /* @__PURE__ */ React78.createElement(
         "img",
         {
           className: clsx28(
@@ -7757,7 +7846,7 @@ var AppLayout = ({
         }
       ) : null
     ),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx28(
@@ -7770,7 +7859,7 @@ var AppLayout = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React78.createElement(
         SidebarGroup,
         {
           direction,
@@ -7790,7 +7879,7 @@ var AppLayout = ({
         }
       )
     ),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React78.createElement(
       "div",
       {
         className: clsx28(
@@ -7802,22 +7891,22 @@ var AppLayout = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      DrawerFooterActions && openSideMenu ? /* @__PURE__ */ React76.createElement(React76.Fragment, null, DrawerFooterActions) : null,
-      size > 600 && openSideMenu ? /* @__PURE__ */ React76.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__ */ React76.createElement(
+        /* @__PURE__ */ React78.createElement(
           Button,
           {
             variant: "light",
             onClick: () => setKeepOpen(!keepOpen),
             size: "smallIcon"
           },
-          /* @__PURE__ */ React76.createElement(
+          /* @__PURE__ */ React78.createElement(
             "svg",
             {
               className: clsx28(
@@ -7827,7 +7916,7 @@ var AppLayout = ({
               fill: "currentColor",
               viewBox: "0 0 20 20"
             },
-            /* @__PURE__ */ React76.createElement(
+            /* @__PURE__ */ React78.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7839,7 +7928,7 @@ var AppLayout = ({
         )
       ) : null
     )
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React78.createElement(
     "div",
     {
       className: "fixed overflow-y-auto transition-all",
@@ -7870,7 +7959,7 @@ var AppLayout = ({
 };
 
 // src/layout/HawaAppLayout.tsx
-import React77, { useEffect as useEffect24, useRef as useRef16, useState as useState40 } from "react";
+import React79, { useEffect as useEffect25, useRef as useRef17, useState as useState41 } from "react";
 import clsx29 from "clsx";
 import { FaChevronRight } from "react-icons/fa";
 var HawaAppLayout = ({
@@ -7879,11 +7968,11 @@ var HawaAppLayout = ({
   onSettingsClick,
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState40(false);
-  const [openSubItem, setOpenSubitem] = useState40("");
+  const [openSideMenu, setOpenSideMenu] = useState41(false);
+  const [openSubItem, setOpenSubitem] = useState41("");
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
-  const [keepOpen, setKeepOpen] = useState40(false);
-  const ref = useRef16(null);
+  const [keepOpen, setKeepOpen] = useState41(false);
+  const ref = useRef17(null);
   const isRTL = direction === "rtl";
   let size;
   if (typeof window !== "undefined") {
@@ -7891,7 +7980,7 @@ var HawaAppLayout = ({
   } else {
     size = 1200;
   }
-  useEffect24(() => {
+  useEffect25(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -7916,7 +8005,7 @@ var HawaAppLayout = ({
     }
   };
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  return /* @__PURE__ */ React77.createElement("div", { className: "fixed" }, props.topBar && /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React79.createElement("div", { className: "fixed" }, props.topBar && /* @__PURE__ */ React79.createElement(
     "div",
     {
       className: clsx29(
@@ -7926,7 +8015,7 @@ var HawaAppLayout = ({
     },
     size > 600 ? props.pageTitle ? (
       // Title of the page
-      /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React79.createElement(
         "div",
         {
           className: clsx29(
@@ -7942,19 +8031,19 @@ var HawaAppLayout = ({
       )
     ) : null : (
       // Mobile Drawer Menu Button
-      /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React79.createElement(
         "div",
         {
           dir: direction,
           className: "flex items-center justify-center gap-0.5 "
         },
-        /* @__PURE__ */ React77.createElement(
+        /* @__PURE__ */ React79.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__ */ React79.createElement(
             "svg",
             {
               stroke: "currentColor",
@@ -7965,7 +8054,7 @@ var HawaAppLayout = ({
               height: "1.6em",
               width: "1.6em"
             },
-            /* @__PURE__ */ React77.createElement(
+            /* @__PURE__ */ React79.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -7976,10 +8065,10 @@ var HawaAppLayout = ({
           ),
           " "
         ),
-        props.pageTitle ? /* @__PURE__ */ React77.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React77.createElement("div", null)
+        props.pageTitle ? /* @__PURE__ */ React79.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React79.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React79.createElement(
       "div",
       {
         className: clsx29(
@@ -7987,18 +8076,18 @@ var HawaAppLayout = ({
           isRTL ? "flex-row-reverse" : "flex-row"
         )
       },
-      size > 600 ? /* @__PURE__ */ React77.createElement(
+      size > 600 ? /* @__PURE__ */ React79.createElement(
         "div",
         {
           className: clsx29(
             isRTL ? "text-left text-xs" : "text-right text-xs"
           )
         },
-        /* @__PURE__ */ React77.createElement("div", { className: "font-bold" }, props.username),
+        /* @__PURE__ */ React79.createElement("div", { className: "font-bold" }, props.username),
         " ",
-        /* @__PURE__ */ React77.createElement("div", null, props.email)
+        /* @__PURE__ */ React79.createElement("div", null, props.email)
       ) : null,
-      /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React79.createElement(
         HawaMenu,
         {
           direction,
@@ -8008,14 +8097,14 @@ var HawaAppLayout = ({
           menuItems: props.profileMenuItems,
           position: "bottom-left"
         },
-        /* @__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(
+        /* @__PURE__ */ React79.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-hidden rounded-full ring-1 ring-buttonPrimary-500 dark:bg-gray-600" }, /* @__PURE__ */ React79.createElement(
           "svg",
           {
             className: "absolute -left-1 h-10 w-10 text-gray-400",
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ React77.createElement(
+          /* @__PURE__ */ React79.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -8026,7 +8115,7 @@ var HawaAppLayout = ({
         ))
       )
     )
-  ), /* @__PURE__ */ React77.createElement(
+  ), /* @__PURE__ */ React79.createElement(
     "div",
     {
       onMouseEnter: () => {
@@ -8043,7 +8132,7 @@ var HawaAppLayout = ({
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
       }
     },
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React79.createElement(
       "div",
       {
         className: clsx29(
@@ -8052,7 +8141,7 @@ var HawaAppLayout = ({
           openSideMenu ? "overflow-auto" : "overflow-hidden"
         )
       },
-      /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React79.createElement(
         "div",
         {
           dir: direction,
@@ -8064,7 +8153,7 @@ var HawaAppLayout = ({
             width: size > 600 ? `${drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize] - 16}px` : "full"
           }
         },
-        /* @__PURE__ */ React77.createElement(
+        /* @__PURE__ */ React79.createElement(
           "img",
           {
             className: clsx29(
@@ -8076,7 +8165,7 @@ var HawaAppLayout = ({
             src: props.logoLink
           }
         ),
-        size > 600 ? /* @__PURE__ */ React77.createElement(
+        size > 600 ? /* @__PURE__ */ React79.createElement(
           "img",
           {
             className: clsx29(
@@ -8088,14 +8177,14 @@ var HawaAppLayout = ({
           }
         ) : null
       ),
-      /* @__PURE__ */ React77.createElement("div", { className: "mb-10 mt-14" }, props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React79.createElement("div", { className: "mb-10 mt-14" }, props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React79.createElement(
         "div",
         {
           key: dIndex,
           className: clsx29("flex flex-col items-stretch justify-center")
         },
         dSection?.map((dItem, i) => {
-          return /* @__PURE__ */ React77.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React77.createElement(
+          return /* @__PURE__ */ React79.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React79.createElement(
             "div",
             {
               onClick: () => {
@@ -8115,7 +8204,7 @@ var HawaAppLayout = ({
                 isRTL ? "flex-row-reverse pr-3" : ""
               )
             },
-            /* @__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__ */ React79.createElement("div", { className: "flex flex-row", dir: direction }, /* @__PURE__ */ React79.createElement("div", { className: "flex items-center justify-center" }, dItem.icon), /* @__PURE__ */ React79.createElement(
               "div",
               {
                 className: clsx29(
@@ -8125,16 +8214,16 @@ var HawaAppLayout = ({
               },
               dItem.label
             )),
-            dItem.subItems && /* @__PURE__ */ React77.createElement(
+            dItem.subItems && /* @__PURE__ */ React79.createElement(
               "div",
               {
                 className: clsx29(
                   openSubItem && dItem.slug === openSubItem ? "-rotate-90" : "rotate-90"
                 )
               },
-              /* @__PURE__ */ React77.createElement(FaChevronRight, { fontSize: 11 })
+              /* @__PURE__ */ React79.createElement(FaChevronRight, { fontSize: 11 })
             )
-          ), dItem.subItems && /* @__PURE__ */ React77.createElement(
+          ), dItem.subItems && /* @__PURE__ */ React79.createElement(
             "div",
             {
               className: clsx29(
@@ -8146,7 +8235,7 @@ var HawaAppLayout = ({
                 height: openSubItem == dItem.slug && openSideMenu ? 6 + 33 * dItem.subItems?.length : 0
               }
             },
-            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React77.createElement(
+            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React79.createElement(
               "div",
               {
                 key: s,
@@ -8160,14 +8249,14 @@ var HawaAppLayout = ({
                   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__ */ React79.createElement("div", { className: "flex items-center justify-center" }, subIt.icon),
+              /* @__PURE__ */ React79.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 text-center " })
+        dIndex !== props.drawerItems.length - 1 && /* @__PURE__ */ React79.createElement("div", { className: "my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center " })
       ))),
-      openSideMenu && /* @__PURE__ */ React77.createElement(
+      openSideMenu && /* @__PURE__ */ React79.createElement(
         "div",
         {
           className: clsx29(
@@ -8180,13 +8269,13 @@ var HawaAppLayout = ({
             width: `${drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize] - 16}px`
           }
         },
-        onSettingsClick && /* @__PURE__ */ React77.createElement(
+        onSettingsClick && /* @__PURE__ */ React79.createElement(
           "div",
           {
             className: " cursor-pointer rounded p-2 transition-all hover:bg-layoutPrimary-700",
             onClick: () => onSettingsClick()
           },
-          /* @__PURE__ */ React77.createElement(
+          /* @__PURE__ */ React79.createElement(
             "svg",
             {
               "aria-label": "Settings Icon",
@@ -8199,11 +8288,11 @@ var HawaAppLayout = ({
               height: "1em",
               width: "1em"
             },
-            /* @__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" })
+            /* @__PURE__ */ React79.createElement("circle", { cx: "12", cy: "12", r: "3" }),
+            /* @__PURE__ */ React79.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__ */ React77.createElement(
+        size > 600 ? /* @__PURE__ */ React79.createElement(
           "div",
           {
             className: clsx29("w-fit transition-all"),
@@ -8213,7 +8302,7 @@ var HawaAppLayout = ({
               left: `${drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize] - 35}px`
             }
           },
-          /* @__PURE__ */ React77.createElement(
+          /* @__PURE__ */ React79.createElement(
             "div",
             {
               dir: direction,
@@ -8222,13 +8311,13 @@ var HawaAppLayout = ({
                 openSideMenu ? " opacity-100" : " opacity-0"
               )
             },
-            /* @__PURE__ */ React77.createElement(
+            /* @__PURE__ */ React79.createElement(
               "div",
               {
                 onClick: () => setKeepOpen(!keepOpen),
                 className: "w-fit cursor-pointer rounded bg-gray-300 p-2 transition-all hover:bg-gray-400"
               },
-              /* @__PURE__ */ React77.createElement(
+              /* @__PURE__ */ React79.createElement(
                 FaChevronRight,
                 {
                   fontSize: 14,
@@ -8243,7 +8332,7 @@ var HawaAppLayout = ({
         ) : null
       )
     )
-  ), /* @__PURE__ */ React77.createElement(
+  ), /* @__PURE__ */ React79.createElement(
     "div",
     {
       className: "fixed overflow-y-auto",
@@ -8264,7 +8353,7 @@ var HawaAppLayout = ({
 };
 
 // src/layout/HawaAppLayoutSimplified.tsx
-import React78, { useEffect as useEffect25, useRef as useRef17, useState as useState41 } from "react";
+import React80, { useEffect as useEffect26, useRef as useRef18, useState as useState42 } from "react";
 import clsx30 from "clsx";
 var HawaAppLayoutSimplified = ({
   direction = "rtl",
@@ -8273,11 +8362,11 @@ var HawaAppLayoutSimplified = ({
   DrawerFooterActions,
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState41(false);
-  const [openSubItem, setOpenSubitem] = useState41("");
+  const [openSideMenu, setOpenSideMenu] = useState42(false);
+  const [openSubItem, setOpenSubitem] = useState42("");
   const { isOpen, onClose, onOpen } = useDiscloser_default(false);
-  const [keepOpen, setKeepOpen] = useState41(false);
-  const ref = useRef17(null);
+  const [keepOpen, setKeepOpen] = useState42(false);
+  const ref = useRef18(null);
   const isRTL = direction === "rtl";
   let size;
   if (typeof window !== "undefined") {
@@ -8285,7 +8374,7 @@ var HawaAppLayoutSimplified = ({
   } else {
     size = 1200;
   }
-  useEffect25(() => {
+  useEffect26(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -8312,7 +8401,7 @@ var HawaAppLayoutSimplified = ({
     }
   };
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  return /* @__PURE__ */ React78.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React80.createElement("div", { className: "fixed left-0" }, props.topBar && /* @__PURE__ */ React80.createElement(
     "div",
     {
       className: clsx30(
@@ -8320,7 +8409,7 @@ var HawaAppLayoutSimplified = ({
         isRTL ? "flex-row-reverse" : "flex-row"
       )
     },
-    size > 600 ? /* @__PURE__ */ React78.createElement(
+    size > 600 ? /* @__PURE__ */ React80.createElement(
       "div",
       {
         className: clsx30(
@@ -8336,19 +8425,19 @@ var HawaAppLayoutSimplified = ({
       props.pageTitle
     ) : (
       // Mobile Drawer Menu Button
-      /* @__PURE__ */ React78.createElement(
+      /* @__PURE__ */ React80.createElement(
         "div",
         {
           dir: direction,
           className: "flex items-center justify-center gap-0.5"
         },
-        /* @__PURE__ */ React78.createElement(
+        /* @__PURE__ */ React80.createElement(
           "div",
           {
             onClick: () => setOpenSideMenu(true),
             className: "z-40 mx-1 cursor-pointer  rounded p-2  transition-all hover:bg-gray-100"
           },
-          /* @__PURE__ */ React78.createElement(
+          /* @__PURE__ */ React80.createElement(
             "svg",
             {
               stroke: "currentColor",
@@ -8359,7 +8448,7 @@ var HawaAppLayoutSimplified = ({
               height: "1.6em",
               width: "1.6em"
             },
-            /* @__PURE__ */ React78.createElement(
+            /* @__PURE__ */ React80.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -8369,10 +8458,10 @@ var HawaAppLayoutSimplified = ({
             )
           )
         ),
-        props.pageTitle ? /* @__PURE__ */ React78.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React78.createElement("div", null)
+        props.pageTitle ? /* @__PURE__ */ React80.createElement("div", { className: "text-sm" }, props.pageTitle) : /* @__PURE__ */ React80.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React80.createElement(
       "div",
       {
         className: clsx30(
@@ -8380,16 +8469,16 @@ var HawaAppLayoutSimplified = ({
           isRTL ? "flex-row-reverse" : "flex-row"
         )
       },
-      size > 600 ? /* @__PURE__ */ React78.createElement(
+      size > 600 ? /* @__PURE__ */ React80.createElement(
         "div",
         {
           className: isRTL ? "text-left text-xs" : "text-right text-xs"
         },
-        /* @__PURE__ */ React78.createElement("div", { className: "font-bold" }, props.username),
+        /* @__PURE__ */ React80.createElement("div", { className: "font-bold" }, props.username),
         " ",
-        /* @__PURE__ */ React78.createElement("div", null, props.email)
+        /* @__PURE__ */ React80.createElement("div", null, props.email)
       ) : null,
-      /* @__PURE__ */ React78.createElement(
+      /* @__PURE__ */ React80.createElement(
         DropdownMenu,
         {
           triggerClassname: "mx-2",
@@ -8398,13 +8487,13 @@ var HawaAppLayoutSimplified = ({
           side: "bottom",
           sideOffset: 5,
           direction: isRTL ? "rtl" : "ltr",
-          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)),
+          trigger: /* @__PURE__ */ React80.createElement("div", { className: "relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600" }, /* @__PURE__ */ React80.createElement(AvatarIcon, null)),
           items: props.profileMenuItems,
           onItemSelect: (e) => console.log("selecting item ", e)
         }
       )
     )
-  ), /* @__PURE__ */ React78.createElement(
+  ), /* @__PURE__ */ React80.createElement(
     "div",
     {
       className: clsx30(
@@ -8420,7 +8509,7 @@ var HawaAppLayoutSimplified = ({
       onMouseLeave: () => keepOpen ? setOpenSideMenu(true) : setOpenSideMenu(false),
       ref
     },
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React80.createElement(
       "div",
       {
         dir: direction,
@@ -8431,7 +8520,7 @@ var HawaAppLayoutSimplified = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      /* @__PURE__ */ React78.createElement(
+      /* @__PURE__ */ React80.createElement(
         "img",
         {
           className: clsx30(
@@ -8443,7 +8532,7 @@ var HawaAppLayoutSimplified = ({
           src: props.logoLink
         }
       ),
-      size > 600 ? /* @__PURE__ */ React78.createElement(
+      size > 600 ? /* @__PURE__ */ React80.createElement(
         "img",
         {
           className: clsx30(
@@ -8455,7 +8544,7 @@ var HawaAppLayoutSimplified = ({
         }
       ) : null
     ),
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React80.createElement(
       "div",
       {
         className: clsx30(
@@ -8469,7 +8558,7 @@ var HawaAppLayoutSimplified = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React78.createElement(
+      props.drawerItems?.map((dSection, dIndex) => /* @__PURE__ */ React80.createElement(
         "div",
         {
           key: dIndex,
@@ -8478,7 +8567,7 @@ var HawaAppLayoutSimplified = ({
           )
         },
         dSection?.map((dItem, i) => {
-          return /* @__PURE__ */ React78.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React78.createElement(
+          return /* @__PURE__ */ React80.createElement("div", { key: i, id: "test", className: "flex flex-col" }, /* @__PURE__ */ React80.createElement(
             "div",
             {
               onClick: () => {
@@ -8499,7 +8588,7 @@ var HawaAppLayoutSimplified = ({
                 openSideMenu ? "m-2" : "m-2"
               )
             },
-            /* @__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(
+            /* @__PURE__ */ React80.createElement("div", { className: "flex flex-row", dir: direction }, /* @__PURE__ */ React80.createElement("div", { className: "flex items-center justify-center " }, dItem.icon), /* @__PURE__ */ React80.createElement(
               "div",
               {
                 className: clsx30(
@@ -8509,13 +8598,13 @@ var HawaAppLayoutSimplified = ({
               },
               dItem.label
             )),
-            dItem.subItems && /* @__PURE__ */ React78.createElement(
+            dItem.subItems && /* @__PURE__ */ React80.createElement(
               ArrowIcon,
               {
                 pointing: openSubItem && dItem.slug === openSubItem ? "up" : "down"
               }
             )
-          ), dItem.subItems && /* @__PURE__ */ React78.createElement(
+          ), dItem.subItems && /* @__PURE__ */ React80.createElement(
             "div",
             {
               className: clsx30(
@@ -8527,7 +8616,7 @@ var HawaAppLayoutSimplified = ({
                 height: openSubItem == dItem.slug && openSideMenu ? 6 + 35 * dItem.subItems?.length : 0
               }
             },
-            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React78.createElement(
+            dItem.subItems?.map((subIt, s) => /* @__PURE__ */ React80.createElement(
               "div",
               {
                 key: s,
@@ -8541,15 +8630,15 @@ var HawaAppLayoutSimplified = ({
                   subIt.action();
                 }
               },
-              /* @__PURE__ */ React78.createElement("div", { className: "flex items-center justify-center" }, subIt.icon),
-              /* @__PURE__ */ React78.createElement("div", { className: "flex flex-row justify-between" }, subIt.label)
+              /* @__PURE__ */ React80.createElement("div", { className: "flex items-center justify-center" }, subIt.icon),
+              /* @__PURE__ */ React80.createElement("div", { className: "flex flex-row justify-between" }, subIt.label)
             ))
           ));
         }),
-        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 " })
+        dIndex !== props.drawerItems.length - 1 && /* @__PURE__ */ React80.createElement("div", { className: "my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 bg-red-500 text-center " })
       ))
     ),
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React80.createElement(
       "div",
       {
         className: clsx30(
@@ -8560,22 +8649,22 @@ var HawaAppLayoutSimplified = ({
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : 56}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
-      DrawerFooterActions && openSideMenu ? /* @__PURE__ */ React78.createElement(React78.Fragment, null, DrawerFooterActions) : null,
-      size > 600 && openSideMenu ? /* @__PURE__ */ React78.createElement(
+      DrawerFooterActions && openSideMenu ? /* @__PURE__ */ React80.createElement(React80.Fragment, null, DrawerFooterActions) : null,
+      size > 600 && openSideMenu ? /* @__PURE__ */ React80.createElement(
         Tooltip,
         {
           side: "left",
           delayDuration: 500,
           content: keepOpen ? props.texts?.collapseSidebar || "Collapse Sidebar" : props.texts?.expandSidebar || "Expand Sidebar"
         },
-        /* @__PURE__ */ React78.createElement(
+        /* @__PURE__ */ React80.createElement(
           Button,
           {
             variant: "light",
             onClick: () => setKeepOpen(!keepOpen),
             size: "smallIcon"
           },
-          /* @__PURE__ */ React78.createElement(
+          /* @__PURE__ */ React80.createElement(
             "svg",
             {
               className: clsx30(
@@ -8585,7 +8674,7 @@ var HawaAppLayoutSimplified = ({
               fill: "currentColor",
               viewBox: "0 0 20 20"
             },
-            /* @__PURE__ */ React78.createElement(
+            /* @__PURE__ */ React80.createElement(
               "path",
               {
                 fillRule: "evenodd",
@@ -8597,7 +8686,7 @@ var HawaAppLayoutSimplified = ({
         )
       ) : null
     )
-  ), /* @__PURE__ */ React78.createElement(
+  ), /* @__PURE__ */ React80.createElement(
     "div",
     {
       className: "fixed overflow-y-auto",
@@ -8616,14 +8705,14 @@ var HawaAppLayoutSimplified = ({
     props.children
   ));
 };
-var AvatarIcon = () => /* @__PURE__ */ React78.createElement(
+var AvatarIcon = () => /* @__PURE__ */ React80.createElement(
   "svg",
   {
     className: "absolute -left-1 h-10 w-10 text-gray-400",
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React78.createElement(
+  /* @__PURE__ */ React80.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -8650,7 +8739,7 @@ var ArrowIcon = ({ pointing }) => {
     default:
       break;
   }
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React80.createElement(
     "svg",
     {
       className: clsx30(
@@ -8660,7 +8749,7 @@ var ArrowIcon = ({ pointing }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React80.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8672,7 +8761,7 @@ var ArrowIcon = ({ pointing }) => {
 };
 
 // src/layout/HawaContainer.tsx
-import React79 from "react";
+import React81 from "react";
 import clsx31 from "clsx";
 var HawaContainer = ({
   maxWidth = "normal",
@@ -8692,7 +8781,7 @@ var HawaContainer = ({
     outlined: "bg-transparent border border-black w-fit",
     neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white"
   };
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "div",
     {
       className: clsx31(
@@ -8708,28 +8797,28 @@ var HawaContainer = ({
 };
 
 // src/layout/HawaGrid.tsx
-import React80 from "react";
+import React82 from "react";
 var HawaGrid = (props) => {
   return (
     // [&>*:not(:first-child)]:mt-8
-    /* @__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)
+    /* @__PURE__ */ React82.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 React81 from "react";
+import React83 from "react";
 var AppSidebar = ({ isOpen, onClose, items }) => {
   if (!isOpen) {
     return null;
   }
-  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(
+  return /* @__PURE__ */ React83.createElement("div", { className: "fixed inset-0 z-40 flex bg-gray-600 bg-opacity-75" }, /* @__PURE__ */ React83.createElement("div", { className: "w-1/3 rounded-l-lg bg-gray-800 shadow-2xl" }, /* @__PURE__ */ React83.createElement(
     "button",
     {
       onClick: onClose,
       className: "p-4 text-gray-400 hover:text-white focus:text-white focus:outline-none"
     },
     "Close"
-  ), /* @__PURE__ */ React81.createElement("nav", null, items.map((item, i) => /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React83.createElement("nav", null, items.map((item, i) => /* @__PURE__ */ React83.createElement(
     "a",
     {
       key: i,
@@ -8738,7 +8827,7 @@ var AppSidebar = ({ isOpen, onClose, items }) => {
       className: "block p-4 font-bold text-white hover:bg-gray-700 hover:text-gray-400"
     },
     item.label
-  )))), /* @__PURE__ */ React81.createElement("div", { className: "w-2/3 bg-gray-50" }));
+  )))), /* @__PURE__ */ React83.createElement("div", { className: "w-2/3 bg-gray-50" }));
 };
 
 // src/layout/Footer.tsx
@@ -8775,19 +8864,19 @@ var Footer = ({
 };
 
 // src/layout/Banner.tsx
-import React82, { useRef as useRef18, useState as useState42 } from "react";
+import React84, { useRef as useRef19, useState as useState43 } from "react";
 import clsx32 from "clsx";
 var HawaBanner = ({
   design = "floating",
   ...props
 }) => {
-  const bannerRef = useRef18(null);
-  const [closed, setClosed] = useState42(false);
+  const bannerRef = useRef19(null);
+  const [closed, setClosed] = useState43(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__ */ React82.createElement("div", { ref: bannerRef }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React84.createElement("div", { ref: bannerRef }, /* @__PURE__ */ React84.createElement(
     "div",
     {
       dir: props.direction,
@@ -8798,7 +8887,7 @@ var HawaBanner = ({
         closed ? "opacity-0" : "opacity-100"
       )
     },
-    /* @__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(
+    /* @__PURE__ */ React84.createElement("div", { className: "mb-3 flex w-full flex-col items-center  justify-start   md:mb-0 md:flex-row md:items-center" }, /* @__PURE__ */ React84.createElement(
       "div",
       {
         className: clsx32(
@@ -8806,7 +8895,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__ */ React82.createElement(
+      props.logoURL && /* @__PURE__ */ React84.createElement(
         "img",
         {
           src: props.logoURL,
@@ -8814,8 +8903,8 @@ var HawaBanner = ({
           alt: "Flowbite Logo"
         }
       ),
-      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(
+      props.title && /* @__PURE__ */ React84.createElement("span", { className: "self-center whitespace-nowrap text-lg font-semibold dark:text-white" }, props.title)
+    ), props.text && /* @__PURE__ */ React84.createElement(
       "p",
       {
         className: clsx32(
@@ -8825,7 +8914,7 @@ var HawaBanner = ({
       },
       props.text
     )),
-    props.actionText && /* @__PURE__ */ React82.createElement(
+    props.actionText && /* @__PURE__ */ React84.createElement(
       "div",
       {
         className: clsx32(
@@ -8833,9 +8922,9 @@ var HawaBanner = ({
           props.direction === "rtl" ? "ml-0 md:ml-10" : "mr-0 md:mr-10"
         )
       },
-      /* @__PURE__ */ React82.createElement(HawaButton, { onClick: props.onActionClick }, props.actionText)
+      /* @__PURE__ */ React84.createElement(HawaButton, { onClick: props.onActionClick }, props.actionText)
     ),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React84.createElement(
       "button",
       {
         type: "button",
@@ -8852,8 +8941,8 @@ var HawaBanner = ({
           }, 200);
         }
       },
-      /* @__PURE__ */ React82.createElement("span", { className: "sr-only" }, "Close"),
-      /* @__PURE__ */ React82.createElement(
+      /* @__PURE__ */ React84.createElement("span", { className: "sr-only" }, "Close"),
+      /* @__PURE__ */ React84.createElement(
         "svg",
         {
           "aria-hidden": "true",
@@ -8861,7 +8950,7 @@ var HawaBanner = ({
           fill: "currentColor",
           viewBox: "0 0 20 20"
         },
-        /* @__PURE__ */ React82.createElement(
+        /* @__PURE__ */ React84.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -8875,7 +8964,7 @@ var HawaBanner = ({
 };
 
 // src/blocks/Account/UserProfileForm.tsx
-import React83 from "react";
+import React85 from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 var UserProfileForm = (props) => {
   const methods = useForm();
@@ -8885,12 +8974,12 @@ var UserProfileForm = (props) => {
     handleSubmit,
     control
   } = methods;
-  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(
+  return /* @__PURE__ */ React85.createElement(Card, null, /* @__PURE__ */ React85.createElement("form", { onSubmit: handleSubmit((e) => props.handleUpdateProfile(e)) }, /* @__PURE__ */ React85.createElement(CardContent, { headless: true }, /* @__PURE__ */ React85.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React85.createElement(
     Controller,
     {
       control,
       name: "fullName",
-      render: ({ field }) => /* @__PURE__ */ React83.createElement(
+      render: ({ field }) => /* @__PURE__ */ React85.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8903,19 +8992,19 @@ var UserProfileForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React83.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Controller,
     {
       control,
       name: "phoneNumber",
-      render: ({ field }) => /* @__PURE__ */ React83.createElement(HawaPhoneInput, { label: "Phone number" })
+      render: ({ field }) => /* @__PURE__ */ React85.createElement(HawaPhoneInput, { label: "Phone number" })
     }
-  ), /* @__PURE__ */ React83.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Controller,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React83.createElement(
+      render: ({ field }) => /* @__PURE__ */ React85.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8935,12 +9024,12 @@ var UserProfileForm = (props) => {
         }
       }
     }
-  ), /* @__PURE__ */ React83.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Controller,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React83.createElement(
+      render: ({ field }) => /* @__PURE__ */ React85.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8956,12 +9045,12 @@ var UserProfileForm = (props) => {
         required: props.texts.passwordRequiredText
       }
     }
-  ), /* @__PURE__ */ React83.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Controller,
     {
       control,
       name: "confirmPassword",
-      render: ({ field }) => /* @__PURE__ */ React83.createElement(
+      render: ({ field }) => /* @__PURE__ */ React85.createElement(
         HawaTextField,
         {
           width: "full",
@@ -8977,17 +9066,17 @@ var UserProfileForm = (props) => {
         required: props.texts.confirmPasswordRequiredText
       }
     }
-  ))), /* @__PURE__ */ React83.createElement(CardFooter, null, /* @__PURE__ */ React83.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updateProfile))));
+  ))), /* @__PURE__ */ React85.createElement(CardFooter, null, /* @__PURE__ */ React85.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updateProfile))));
 };
 
 // src/blocks/Account/UserSettingsForm.tsx
-import React84 from "react";
+import React86 from "react";
 var UserSettingsForm = (props) => {
-  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)));
+  return /* @__PURE__ */ React86.createElement(Card, null, /* @__PURE__ */ React86.createElement(CardContent, { headless: true }, /* @__PURE__ */ React86.createElement("div", { className: "mb-2 text-sm font-bold" }, props.blockTitle), /* @__PURE__ */ React86.createElement("div", { className: "flex flex-col gap-4 rounded  p-2" }, props.children)));
 };
 
 // src/blocks/AuthForms/AppLanding.tsx
-import React85 from "react";
+import React87 from "react";
 
 // src/elements/Icons.tsx
 var Icons = {
@@ -9035,6 +9124,28 @@ var Icons = {
     /* @__PURE__ */ React.createElement("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
     /* @__PURE__ */ React.createElement("polyline", { points: "22,6 12,13 2,6" })
   ),
+  phone: (props) => /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "none",
+      "stroke-width": "2",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        d: "M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+      }
+    )
+  ),
   twitter: (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement(
     "path",
     {
@@ -9042,6 +9153,7 @@ var Icons = {
       d: "M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"
     }
   )),
+  microsoft: (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M7.462 0H0v7.19h7.462V0zM16 0H8.538v7.19H16V0zM7.462 8.211H0V16h7.462V8.211zm8.538 0H8.538V16H16V8.211z" })),
   gitHub: (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 438.549 438.549", ...props }, /* @__PURE__ */ React.createElement(
     "path",
     {
@@ -9139,46 +9251,77 @@ var Icons = {
 
 // src/blocks/AuthForms/AppLanding.tsx
 var AppLanding = (props) => {
-  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(
+  return /* @__PURE__ */ React87.createElement("div", { dir: props.direction }, /* @__PURE__ */ React87.createElement(Card, null, /* @__PURE__ */ React87.createElement(CardContent, { headless: true, className: "flex flex-col gap-6" }, props.viaGoogle && /* @__PURE__ */ React87.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
-      variant: "outline"
+      variant: "outline",
+      onClick: props.handleGoogle
     },
-    /* @__PURE__ */ React85.createElement(Icons.google, { className: "h-4 w-4" }),
-    "Continue With Google"
-  ), /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React87.createElement(Icons.google, { className: "h-4 w-4" }),
+    props.texts?.continueWithGoogle ?? "Continue With Google"
+  ), props.viaGithub && /* @__PURE__ */ React87.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
-      variant: "outline"
+      variant: "outline",
+      onClick: props.handleGithub
     },
-    /* @__PURE__ */ React85.createElement(Icons.twitter, { className: "h-4 w-4" }),
-    "Continue With Twitter"
-  ), /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React87.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+    props.texts?.continueWithGithub ?? "Continue With Github"
+  ), props.viaTwitter && /* @__PURE__ */ React87.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
-      variant: "outline"
+      variant: "outline",
+      onClick: props.handleTwitter
     },
-    /* @__PURE__ */ React85.createElement(Icons.apple, { className: "h-4 w-4" }),
-    "Continue With Apple"
-  ), /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React87.createElement(Icons.twitter, { className: "h-4 w-4" }),
+    props.texts?.continueWithTwitter ?? "Continue With Twitter"
+  ), props.viaApple && /* @__PURE__ */ React87.createElement(
     Button,
     {
       className: "flex flex-row items-center gap-2",
-      variant: "outline"
+      variant: "outline",
+      onClick: props.handleApple
+    },
+    /* @__PURE__ */ React87.createElement(Icons.apple, { className: "h-4 w-4" }),
+    props.texts?.continueWithApple ?? "Continue With Apple"
+  ), props.viaMicrosoft && /* @__PURE__ */ React87.createElement(
+    Button,
+    {
+      className: "flex flex-row items-center gap-2",
+      variant: "outline",
+      onClick: props.handleMicrosoft
+    },
+    /* @__PURE__ */ React87.createElement(Icons.microsoft, { className: "h-4 w-4" }),
+    props.texts?.continueWithMicrosoft ?? "Continue With Microsoft"
+  ), props.viaEmail && /* @__PURE__ */ React87.createElement(
+    Button,
+    {
+      className: "flex flex-row items-center gap-2",
+      variant: "outline",
+      onClick: props.handleEmail
+    },
+    /* @__PURE__ */ React87.createElement(Icons.mail, { className: "h-4 w-4" }),
+    props.texts?.continueWithEmail ?? "Continue With Email"
+  ), props.viaPhone && /* @__PURE__ */ React87.createElement(
+    Button,
+    {
+      className: "flex flex-row items-center gap-2",
+      variant: "outline",
+      onClick: props.handlePhone
     },
-    /* @__PURE__ */ React85.createElement(Icons.mail, { className: "h-4 w-4" }),
-    "Continue With Email"
-  ), !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(
+    /* @__PURE__ */ React87.createElement(Icons.phone, { className: "h-4 w-4" }),
+    props.texts?.continueWithPhone ?? "Continue With Phone"
+  ), !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
-  )))), /* @__PURE__ */ React85.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React85.createElement(
+  )))), /* @__PURE__ */ React87.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React87.createElement(
     HawaRadio,
     {
       onChangeTab: props.handleLanguage,
@@ -9188,7 +9331,7 @@ var AppLanding = (props) => {
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ React85.createElement(
+  ), /* @__PURE__ */ React87.createElement(
     HawaRadio,
     {
       onChangeTab: props.handleColorMode,
@@ -9196,7 +9339,7 @@ var AppLanding = (props) => {
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ React85.createElement(
+          label: /* @__PURE__ */ React87.createElement(
             "svg",
             {
               width: "15",
@@ -9206,7 +9349,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__ */ React85.createElement(
+            /* @__PURE__ */ React87.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",
@@ -9219,7 +9362,7 @@ var AppLanding = (props) => {
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ React85.createElement(
+          label: /* @__PURE__ */ React87.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -9233,7 +9376,7 @@ var AppLanding = (props) => {
               strokeLinejoin: "round",
               className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
             },
-            /* @__PURE__ */ React85.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ React87.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -9242,7 +9385,7 @@ var AppLanding = (props) => {
 };
 
 // src/blocks/AuthForms/SignInPhone.tsx
-import React86, { useState as useState43 } from "react";
+import React88, { useState as useState44 } from "react";
 import { Controller as Controller2, useForm as useForm2 } from "react-hook-form";
 var SignInPhone = (props) => {
   const methods = useForm2();
@@ -9251,8 +9394,8 @@ var SignInPhone = (props) => {
     handleSubmit,
     control
   } = methods;
-  const [userPhone, setUserPhone] = useState43("");
-  return /* @__PURE__ */ React86.createElement(Card, null, /* @__PURE__ */ React86.createElement(CardContent, { headless: true }, /* @__PURE__ */ React86.createElement(
+  const [userPhone, setUserPhone] = useState44("");
+  return /* @__PURE__ */ React88.createElement(Card, null, /* @__PURE__ */ React88.createElement(CardContent, { headless: true }, /* @__PURE__ */ React88.createElement(
     "form",
     {
       onSubmit: (e) => {
@@ -9260,12 +9403,12 @@ var SignInPhone = (props) => {
         props.handleSignIn(userPhone);
       }
     },
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React88.createElement(
       Controller2,
       {
         control,
         name: "phone",
-        render: ({ field }) => /* @__PURE__ */ React86.createElement(
+        render: ({ field }) => /* @__PURE__ */ React88.createElement(
           HawaPhoneInput,
           {
             country: props.country ?? "",
@@ -9279,13 +9422,13 @@ var SignInPhone = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ React86.createElement("div", { className: "mt-2" }),
-    /* @__PURE__ */ React86.createElement(Button, { className: "w-full" }, props.SignInButtonText)
+    /* @__PURE__ */ React88.createElement("div", { className: "mt-2" }),
+    /* @__PURE__ */ React88.createElement(Button, { className: "w-full" }, props.SignInButtonText)
   )));
 };
 
 // src/blocks/AuthForms/SignInForm.tsx
-import React87 from "react";
+import React89 from "react";
 import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
 var SignInForm = (props) => {
   const {
@@ -9293,19 +9436,19 @@ var SignInForm = (props) => {
     handleSubmit,
     control
   } = useForm3();
-  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(
+  return /* @__PURE__ */ React89.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React89.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React89.createElement(CardContent, { headless: true }, /* @__PURE__ */ React89.createElement("form", { onSubmit: handleSubmit((e) => props.handleSignIn(e)) }, props.showError && /* @__PURE__ */ React89.createElement(
     HawaAlert,
     {
       title: props.errorTitle,
       text: props.errorText,
       severity: "error"
     }
-  ), props.signInType === "email" ? /* @__PURE__ */ React87.createElement(
+  ), props.signInType === "email" ? /* @__PURE__ */ React89.createElement(
     Controller3,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React89.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9326,13 +9469,13 @@ var SignInForm = (props) => {
         }
       }
     }
-  ) : props.signInType === "username" ? /* @__PURE__ */ React87.createElement(
+  ) : props.signInType === "username" ? /* @__PURE__ */ React89.createElement(
     Controller3,
     {
       control,
       name: "username",
       render: ({ field }) => {
-        return /* @__PURE__ */ React87.createElement(
+        return /* @__PURE__ */ React89.createElement(
           HawaTextField,
           {
             width: "full",
@@ -9350,20 +9493,20 @@ var SignInForm = (props) => {
         required: props.texts.usernameRequired
       }
     }
-  ) : /* @__PURE__ */ React87.createElement(
+  ) : /* @__PURE__ */ React89.createElement(
     Controller3,
     {
       control,
       name: "phone",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(HawaPhoneInput, { label: "Phone number" }),
+      render: ({ field }) => /* @__PURE__ */ React89.createElement(HawaPhoneInput, { label: "Phone number" }),
       rules: { required: props.texts.phoneRequiredText }
     }
-  ), props.signInType !== "phone" && /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(
+  ), props.signInType !== "phone" && /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(
     Controller3,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React87.createElement(
+      render: ({ field }) => /* @__PURE__ */ React89.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9381,58 +9524,58 @@ var SignInForm = (props) => {
         minLength: 5
       }
     }
-  ), !props.withoutResetPassword && /* @__PURE__ */ React87.createElement(
+  ), !props.withoutResetPassword && /* @__PURE__ */ React89.createElement(
     "div",
     {
       onClick: props.handleForgotPassword,
       className: "mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
     },
     props.texts.forgotPasswordText
-  )), /* @__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(
+  )), /* @__PURE__ */ React89.createElement(Button, { className: "mt-4 w-full", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React89.createElement("div", { className: "p-3 text-center text-sm font-normal dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React89.createElement(
     "span",
     {
       onClick: props.handleRouteToSignUp,
       className: "clickable-link"
     },
     props.texts.createAccount
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React87.createElement(
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React89.createElement(
     CardFooter,
     {
       className: cn(
         props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2"
       )
     },
-    props.viaGoogle && /* @__PURE__ */ React87.createElement(
+    props.viaGoogle && /* @__PURE__ */ React89.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignIn
       },
-      /* @__PURE__ */ React87.createElement(Icons.google, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React89.createElement(Icons.google, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signInViaGoogleLabel
     ),
-    props.viaGithub && /* @__PURE__ */ React87.createElement(
+    props.viaGithub && /* @__PURE__ */ React89.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignIn
       },
-      /* @__PURE__ */ React87.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React89.createElement(Icons.gitHub, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signInViaGithubLabel
     ),
-    props.viaTwitter && /* @__PURE__ */ React87.createElement(
+    props.viaTwitter && /* @__PURE__ */ React89.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignIn
       },
-      /* @__PURE__ */ React87.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React89.createElement(Icons.twitter, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signInViaTwitterLabel
     )
-  ) : null), /* @__PURE__ */ React87.createElement(
+  ) : null), /* @__PURE__ */ React89.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -9449,7 +9592,7 @@ function SignInBlock() {
 }
 
 // src/blocks/AuthForms/SignUpForm.tsx
-import React88 from "react";
+import React90 from "react";
 import { Controller as Controller4, FormProvider as FormProvider2, useForm as useForm4 } from "react-hook-form";
 var SignUpForm = (props) => {
   const methods = useForm4();
@@ -9458,22 +9601,22 @@ var SignUpForm = (props) => {
     handleSubmit,
     control
   } = methods;
-  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(
+  return /* @__PURE__ */ React90.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React90.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React90.createElement(CardContent, { headless: true }, /* @__PURE__ */ React90.createElement("div", null, props.showError && /* @__PURE__ */ React90.createElement(
     HawaAlert,
     {
       title: props.errorTitle,
       text: props.errorText,
       severity: "error"
     }
-  ), /* @__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) => {
+  ), /* @__PURE__ */ React90.createElement(FormProvider2, { ...methods }, /* @__PURE__ */ React90.createElement("form", { onSubmit: handleSubmit((e) => props.handleSignUp(e)) }, /* @__PURE__ */ React90.createElement("div", null, props.signUpFields.map((fld, i) => {
     if (fld === "fullname") {
-      return /* @__PURE__ */ React88.createElement(
+      return /* @__PURE__ */ React90.createElement(
         Controller4,
         {
           key: i,
           control,
           name: "fullName",
-          render: ({ field }) => /* @__PURE__ */ React88.createElement(
+          render: ({ field }) => /* @__PURE__ */ React90.createElement(
             HawaTextField,
             {
               width: "full",
@@ -9492,13 +9635,13 @@ var SignUpForm = (props) => {
       );
     }
     if (fld === "email") {
-      return /* @__PURE__ */ React88.createElement(
+      return /* @__PURE__ */ React90.createElement(
         Controller4,
         {
           key: i,
           control,
           name: "email",
-          render: ({ field }) => /* @__PURE__ */ React88.createElement(
+          render: ({ field }) => /* @__PURE__ */ React90.createElement(
             HawaTextField,
             {
               width: "full",
@@ -9522,13 +9665,13 @@ var SignUpForm = (props) => {
       );
     }
     if (fld === "username") {
-      return /* @__PURE__ */ React88.createElement(
+      return /* @__PURE__ */ React90.createElement(
         Controller4,
         {
           key: i,
           control,
           name: "username",
-          render: ({ field }) => /* @__PURE__ */ React88.createElement(
+          render: ({ field }) => /* @__PURE__ */ React90.createElement(
             HawaTextField,
             {
               width: "full",
@@ -9547,12 +9690,12 @@ var SignUpForm = (props) => {
         }
       );
     }
-  })), /* @__PURE__ */ React88.createElement(
+  })), /* @__PURE__ */ React90.createElement(
     Controller4,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React90.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9567,12 +9710,12 @@ var SignUpForm = (props) => {
       ),
       rules: { required: props.texts.passwordRequiredText }
     }
-  ), /* @__PURE__ */ React88.createElement(
+  ), /* @__PURE__ */ React90.createElement(
     Controller4,
     {
       control,
       name: "confirm_password",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React90.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9587,12 +9730,12 @@ var SignUpForm = (props) => {
       ),
       rules: { required: props.texts.passwordRequiredText }
     }
-  ), props.showRefCode && /* @__PURE__ */ React88.createElement(
+  ), props.showRefCode && /* @__PURE__ */ React90.createElement(
     Controller4,
     {
       control,
       name: "refCode",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React90.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9605,12 +9748,12 @@ var SignUpForm = (props) => {
         }
       )
     }
-  ), props.showUserSource && /* @__PURE__ */ React88.createElement("div", null, /* @__PURE__ */ React88.createElement(
+  ), props.showUserSource && /* @__PURE__ */ React90.createElement("div", null, /* @__PURE__ */ React90.createElement(
     Controller4,
     {
       control,
       name: "reference",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React90.createElement(
         HawaSelect,
         {
           label: "How did you learn about us?",
@@ -9629,18 +9772,18 @@ var SignUpForm = (props) => {
         }
       )
     }
-  )), props.showTermsOption && /* @__PURE__ */ React88.createElement(
+  )), props.showTermsOption && /* @__PURE__ */ React90.createElement(
     Controller4,
     {
       control,
       name: "terms_accepted",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React90.createElement(
         HawaCheckbox,
         {
           id: "terms_accepted",
           helperText: errors.terms_accepted?.message,
           onChange: (e) => field.onChange(e),
-          label: /* @__PURE__ */ React88.createElement("span", null, props.texts.iAcceptText, " ", /* @__PURE__ */ React88.createElement(
+          label: /* @__PURE__ */ React90.createElement("span", null, props.texts.iAcceptText, " ", /* @__PURE__ */ React90.createElement(
             "a",
             {
               onClick: props.handleRouteToTOS,
@@ -9652,12 +9795,12 @@ var SignUpForm = (props) => {
       ),
       rules: { required: props.texts.termsRequiredText }
     }
-  ), props.showNewsletterOption && /* @__PURE__ */ React88.createElement(
+  ), props.showNewsletterOption && /* @__PURE__ */ React90.createElement(
     Controller4,
     {
       control,
       name: "newsletter_accepted",
-      render: ({ field }) => /* @__PURE__ */ React88.createElement(
+      render: ({ field }) => /* @__PURE__ */ React90.createElement(
         HawaCheckbox,
         {
           id: "newsletter_accepted",
@@ -9666,51 +9809,51 @@ var SignUpForm = (props) => {
         }
       )
     }
-  ), /* @__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(
+  ), /* @__PURE__ */ React90.createElement(Button, { className: "w-full", isLoading: props.isLoading }, props.texts.signUpText))), /* @__PURE__ */ React90.createElement("div", { className: "flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-normal dark:text-white" }, /* @__PURE__ */ React90.createElement("span", null, props.texts.existingUserText), /* @__PURE__ */ React90.createElement(
     "span",
     {
       onClick: props.handleRouteToSignIn,
       className: "clickable-link"
     },
     props.texts.signInText
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React88.createElement(
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React90.createElement(
     CardFooter,
     {
       className: cn(
         props.logosOnly ? "flex flex-row justify-center gap-2" : "grid grid-cols-1 gap-2"
       )
     },
-    props.viaGoogle && /* @__PURE__ */ React88.createElement(
+    props.viaGoogle && /* @__PURE__ */ React90.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignUp
       },
-      /* @__PURE__ */ React88.createElement(Icons.google, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React90.createElement(Icons.google, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signUpViaGoogleLabel
     ),
-    props.viaGithub && /* @__PURE__ */ React88.createElement(
+    props.viaGithub && /* @__PURE__ */ React90.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignUp
       },
-      /* @__PURE__ */ React88.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React90.createElement(Icons.gitHub, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signUpViaGithubLabel
     ),
-    props.viaTwitter && /* @__PURE__ */ React88.createElement(
+    props.viaTwitter && /* @__PURE__ */ React90.createElement(
       Button,
       {
         className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignUp
       },
-      /* @__PURE__ */ React88.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      /* @__PURE__ */ React90.createElement(Icons.twitter, { className: "h-4 w-4" }),
       !props.logosOnly && props.texts.signUpViaTwitterLabel
     )
-  ) : null), /* @__PURE__ */ React88.createElement(
+  ) : null), /* @__PURE__ */ React90.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -9722,10 +9865,10 @@ var SignUpForm = (props) => {
 };
 
 // src/blocks/AuthForms/NewPasswordForm.tsx
-import React89, { useState as useState44 } from "react";
+import React91, { useState as useState45 } from "react";
 import { Controller as Controller5, FormProvider as FormProvider3, useForm as useForm5 } from "react-hook-form";
 var NewPasswordForm = (props) => {
-  const [matchError, setMatchError] = useState44(false);
+  const [matchError, setMatchError] = useState45(false);
   const methods = useForm5();
   const {
     formState: { errors },
@@ -9739,12 +9882,12 @@ var NewPasswordForm = (props) => {
       setMatchError(true);
     }
   };
-  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(
+  return /* @__PURE__ */ React91.createElement(Card, null, matchError && /* @__PURE__ */ React91.createElement(HawaAlert, { text: props.texts.passwordMatchError, severity: "error" }), props.passwordChanged ? /* @__PURE__ */ React91.createElement(CardContent, { headless: true }, /* @__PURE__ */ React91.createElement("div", { className: "text-center" }, props.texts.passwordChanged)) : /* @__PURE__ */ React91.createElement(FormProvider3, { ...methods }, /* @__PURE__ */ React91.createElement("form", { onSubmit: handleSubmit(handleSubmission) }, /* @__PURE__ */ React91.createElement(CardHeader, null, /* @__PURE__ */ React91.createElement(CardTitle, null, "Create Password"), /* @__PURE__ */ React91.createElement(CardDescription, null, "Set a new password for your account")), /* @__PURE__ */ React91.createElement(CardContent, null, /* @__PURE__ */ React91.createElement(
     Controller5,
     {
       control,
       name: "password",
-      render: ({ field }) => /* @__PURE__ */ React89.createElement(
+      render: ({ field }) => /* @__PURE__ */ React91.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9761,12 +9904,12 @@ var NewPasswordForm = (props) => {
         required: props.texts.passwordRequiredText
       }
     }
-  ), /* @__PURE__ */ React89.createElement(
+  ), /* @__PURE__ */ React91.createElement(
     Controller5,
     {
       control,
       name: "confirmPassword",
-      render: ({ field }) => /* @__PURE__ */ React89.createElement(
+      render: ({ field }) => /* @__PURE__ */ React91.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9783,11 +9926,11 @@ var NewPasswordForm = (props) => {
         required: props.texts.confirmPasswordRequiredText
       }
     }
-  )), /* @__PURE__ */ React89.createElement(CardFooter, null, /* @__PURE__ */ React89.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updatePassword)))));
+  )), /* @__PURE__ */ React91.createElement(CardFooter, null, /* @__PURE__ */ React91.createElement(Button, { className: "w-full", type: "submit" }, props.texts.updatePassword)))));
 };
 
 // src/blocks/AuthForms/ResetPasswordForm.tsx
-import React90 from "react";
+import React92 from "react";
 import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
 var ResetPasswordForm = (props) => {
   const methods = useForm6();
@@ -9797,12 +9940,12 @@ var ResetPasswordForm = (props) => {
     register,
     control
   } = methods;
-  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(
+  return /* @__PURE__ */ React92.createElement(Card, { dir: props.direction }, !props.sent ? /* @__PURE__ */ React92.createElement(React92.Fragment, null, !props.headless && /* @__PURE__ */ React92.createElement(CardHeader, null, /* @__PURE__ */ React92.createElement(CardTitle, null, "Reset Password"), /* @__PURE__ */ React92.createElement(CardDescription, null, "Enter your email to reset your account password")), /* @__PURE__ */ React92.createElement("form", { onSubmit: handleSubmit(props.handleResetPassword) }, /* @__PURE__ */ React92.createElement(CardContent, { headless: props.headless }, /* @__PURE__ */ React92.createElement(
     Controller6,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React90.createElement(
+      render: ({ field }) => /* @__PURE__ */ React92.createElement(
         HawaTextField,
         {
           width: "full",
@@ -9822,28 +9965,28 @@ var ResetPasswordForm = (props) => {
         }
       }
     }
-  ), /* @__PURE__ */ React90.createElement("div", { className: " pb-2 text-left text-sm dark:text-gray-300" }, props.texts?.dontHaveAccount ?? "Don't have an account? ", /* @__PURE__ */ React90.createElement(
+  ), /* @__PURE__ */ React92.createElement("div", { className: "pb-2 text-start text-sm dark:text-gray-300" }, props.texts?.dontHaveAccount ?? "Don't have an account? ", /* @__PURE__ */ React92.createElement(
     "span",
     {
       onClick: props.handleRouteToSignUp,
       className: "clickable-link"
     },
     props.texts?.signUpText ?? "Sign Up"
-  ))), /* @__PURE__ */ React90.createElement(CardFooter, null, /* @__PURE__ */ React90.createElement(Button, { type: "submit", className: "w-full" }, props.texts?.resetPassword)))) : /* @__PURE__ */ React90.createElement(CardContent, { headless: true }, /* @__PURE__ */ React90.createElement("div", { className: "text-center" }, props.texts?.emailSentText)));
+  ))), /* @__PURE__ */ React92.createElement(CardFooter, null, /* @__PURE__ */ React92.createElement(Button, { type: "submit", className: "w-full" }, props.texts?.resetPassword)))) : /* @__PURE__ */ React92.createElement(CardContent, { headless: true }, /* @__PURE__ */ React92.createElement("div", { className: "text-center" }, props.texts?.emailSentText)));
 };
 
 // src/blocks/AuthForms/CodeConfirmation.tsx
-import React91, { useState as useState45 } from "react";
+import React93, { useState as useState46 } from "react";
 var CodeConfirmation = (props) => {
-  const [pins, setPins] = useState45(null);
-  return /* @__PURE__ */ React91.createElement(Card, null, /* @__PURE__ */ React91.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React91.createElement(
+  const [pins, setPins] = useState46(null);
+  return /* @__PURE__ */ React93.createElement(Card, null, /* @__PURE__ */ React93.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React93.createElement(
     HawaAlert,
     {
       title: props.errorTitle,
       text: props.errorText,
       severity: "error"
     }
-  ), /* @__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(
+  ), /* @__PURE__ */ React93.createElement("div", { className: "mb-4 dark:text-white" }, /* @__PURE__ */ React93.createElement("div", { className: "text-lg font-bold" }, props.texts.checkYourPhone ?? "Please check your phone"), /* @__PURE__ */ React93.createElement("div", { className: "text-muted-foreground" }, /* @__PURE__ */ React93.createElement("span", null, props.texts.weSentCode ?? "We've sent a code to "), /* @__PURE__ */ React93.createElement("span", null, props.phoneNumber)), " "), /* @__PURE__ */ React93.createElement(
     "form",
     {
       onSubmit: (e) => {
@@ -9853,16 +9996,16 @@ var CodeConfirmation = (props) => {
         }
       }
     },
-    /* @__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"))
+    /* @__PURE__ */ React93.createElement(HawaPinInput, { width: "full", digits: 6, getPins: (e) => setPins(e) }),
+    /* @__PURE__ */ React93.createElement("div", { className: " py-2 text-center text-xs text-muted-foreground" }, /* @__PURE__ */ React93.createElement("span", null, props.texts.didntGetCode ?? "Didn't get the code?"), " ", /* @__PURE__ */ React93.createElement("span", { className: "clickable-link" }, props.texts.resendCode ?? "Click to resend")),
+    /* @__PURE__ */ React93.createElement("div", { className: "mt-4  grid grid-cols-2 gap-2" }, /* @__PURE__ */ React93.createElement(Button, { variant: "secondary" }, props.texts.cancel ?? "Cancel"), /* @__PURE__ */ React93.createElement(Button, null, props.texts.confirm ?? "Confirm"))
   )));
 };
 
 // src/blocks/AuthForms/CheckEmail.tsx
-import React92 from "react";
+import React94 from "react";
 var CheckEmail = ({ texts, handleResend }) => {
-  return /* @__PURE__ */ React92.createElement(Card, null, /* @__PURE__ */ React92.createElement(CardContent, { headless: true }, /* @__PURE__ */ React92.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React92.createElement("div", { className: "flex h-16 w-16 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground" }, /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React94.createElement(Card, null, /* @__PURE__ */ React94.createElement(CardContent, { headless: true }, /* @__PURE__ */ React94.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React94.createElement("div", { className: "flex h-16 w-16 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground" }, /* @__PURE__ */ React94.createElement(
     "svg",
     {
       stroke: "currentColor",
@@ -9875,16 +10018,16 @@ var CheckEmail = ({ texts, handleResend }) => {
       width: "0.5em",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React92.createElement("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
-    /* @__PURE__ */ React92.createElement("polyline", { points: "22,6 12,13 2,6" })
-  )), /* @__PURE__ */ React92.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.checkEmail ?? "Check you email"), /* @__PURE__ */ React92.createElement("div", { className: "text-sm" }, texts?.pleaseVerify ?? "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."))), /* @__PURE__ */ React92.createElement(CardFooter, { className: "flex flex-col justify-center " }, /* @__PURE__ */ React92.createElement("span", { className: "clickable-link text-sm", onClick: handleResend }, texts?.resendEmail ?? "Resend Email")));
+    /* @__PURE__ */ React94.createElement("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
+    /* @__PURE__ */ React94.createElement("polyline", { points: "22,6 12,13 2,6" })
+  )), /* @__PURE__ */ React94.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.checkEmail ?? "Check you email"), /* @__PURE__ */ React94.createElement("div", { className: "text-sm" }, texts?.pleaseVerify ?? "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."))), /* @__PURE__ */ React94.createElement(CardFooter, { className: "flex flex-col justify-center " }, /* @__PURE__ */ React94.createElement("span", { className: "clickable-link text-sm", onClick: handleResend }, texts?.resendEmail ?? "Resend Email")));
 };
 
 // src/blocks/Payment/SelectPayment.tsx
-import React93, { useState as useState47 } from "react";
+import React95, { useState as useState48 } from "react";
 var SelectPayment = (props) => {
-  const [selectedMethod, setSelectedMethod] = useState47("");
-  return /* @__PURE__ */ React93.createElement(Card, null, /* @__PURE__ */ React93.createElement(CardHeader, null, /* @__PURE__ */ React93.createElement(CardTitle, null, "Choose Payment Method"), /* @__PURE__ */ React93.createElement(CardDescription, null, "And you'll be directed to the next step to complete the payment")), /* @__PURE__ */ React93.createElement(CardContent, { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React93.createElement(
+  const [selectedMethod, setSelectedMethod] = useState48("");
+  return /* @__PURE__ */ React95.createElement(Card, null, /* @__PURE__ */ React95.createElement(CardHeader, null, /* @__PURE__ */ React95.createElement(CardTitle, null, "Choose Payment Method"), /* @__PURE__ */ React95.createElement(CardDescription, null, "And you'll be directed to the next step to complete the payment")), /* @__PURE__ */ React95.createElement(CardContent, { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React95.createElement(
     Button,
     {
       className: cn(
@@ -9896,15 +10039,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaMada,
       onClick: () => setSelectedMethod("mada")
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React93.createElement("span", null, props.madaLabel)
-  ), /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement("span", null, props.madaLabel)
+  ), /* @__PURE__ */ React95.createElement(
     Button,
     {
       className: cn(
@@ -9916,15 +10059,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaApplePay,
       onClick: () => setSelectedMethod("apple-pay")
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",
         className: "h-11"
       }
     ),
-    /* @__PURE__ */ React93.createElement("span", null, props.applePayLabel)
-  ), /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement("span", null, props.applePayLabel)
+  ), /* @__PURE__ */ React95.createElement(
     Button,
     {
       className: cn(
@@ -9936,15 +10079,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaCreditCard,
       onClick: () => setSelectedMethod("visa-master")
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React93.createElement("span", null, props.visaMasterLabel)
-  ), /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement("span", null, props.visaMasterLabel)
+  ), /* @__PURE__ */ React95.createElement(
     Button,
     {
       variant: "outline",
@@ -9956,7 +10099,7 @@ var SelectPayment = (props) => {
       disabled: !props.viaWallet,
       onClick: () => setSelectedMethod("wallet")
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "svg",
       {
         version: "1.1",
@@ -9964,20 +10107,20 @@ var SelectPayment = (props) => {
         viewBox: "0 0 223 223",
         className: "h-6 w-6"
       },
-      /* @__PURE__ */ React93.createElement("g", null, /* @__PURE__ */ React93.createElement(
+      /* @__PURE__ */ React95.createElement("g", null, /* @__PURE__ */ React95.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__ */ React93.createElement(
+      ), /* @__PURE__ */ React95.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__ */ React93.createElement("span", null, props.walletLabel)
-  ), /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement("span", null, props.walletLabel)
+  ), /* @__PURE__ */ React95.createElement(
     Button,
     {
       variant: "outline",
@@ -9989,15 +10132,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaSTCPay,
       onClick: () => setSelectedMethod("stc-pay")
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React93.createElement("span", null, props.stcPayLabel)
-  ), /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement("span", null, props.stcPayLabel)
+  ), /* @__PURE__ */ React95.createElement(
     Button,
     {
       variant: "outline",
@@ -10009,15 +10152,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaGooglePay,
       onClick: () => setSelectedMethod("google-pay")
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React93.createElement("span", null, props.googlePayLabel)
-  ), /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement("span", null, props.googlePayLabel)
+  ), /* @__PURE__ */ React95.createElement(
     Button,
     {
       variant: "outline",
@@ -10029,15 +10172,15 @@ var SelectPayment = (props) => {
       disabled: !props.viaPayPal,
       onClick: () => setSelectedMethod("paypal")
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "img",
       {
         src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",
         className: "h-6"
       }
     ),
-    /* @__PURE__ */ React93.createElement("span", null, props.paypalLabel)
-  )), /* @__PURE__ */ React93.createElement(CardFooter, null, /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement("span", null, props.paypalLabel)
+  )), /* @__PURE__ */ React95.createElement(CardFooter, null, /* @__PURE__ */ React95.createElement(
     Button,
     {
       onClick: () => props.handleContinue(selectedMethod),
@@ -10049,41 +10192,90 @@ var SelectPayment = (props) => {
 };
 
 // src/blocks/Payment/CreditCardForm.tsx
-import React94 from "react";
+import React96, { useEffect as useEffect28, useState as useState49 } from "react";
 import { Controller as Controller7, useForm as useForm7 } from "react-hook-form";
 var CreditCardForm = (props) => {
+  const [cardNumber, setCardNumber] = useState49("");
+  const [cardType, setCardType] = useState49("");
   const methods = useForm7();
   const {
     formState: { errors },
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React94.createElement(Card, null, /* @__PURE__ */ React94.createElement("form", { onSubmit: handleSubmit(props.handle) }, /* @__PURE__ */ React94.createElement(CardContent, { headless: true }, /* @__PURE__ */ React94.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React94.createElement(
+  const getCardType = (card_bin) => {
+    const visa_regex = /^4[0-9]{0,15}$/m;
+    const mastercard_regex = /^5$|^5[0-5][0-9]{0,16}$/m;
+    const amex_regex = /^3$|^3[47][0-9]{0,13}$/m;
+    const mada_regex = /^(440647|440795|446404|457865|968208|457997|474491|636120|417633|468540|468541|468542|468543|968201|446393|409201|458456|484783|462220|455708|410621|455036|486094|486095|486096|504300|440533|489318|489319|445564|968211|410685|406996|432328|428671|428672|428673|968206|446672|543357|434107|407197|407395|412565|431361|604906|521076|529415|535825|543085|524130|554180|549760|968209|524514|529741|537767|535989|536023|513213|520058|558563|588982|589005|531095|530906|532013|968204|422817|422818|422819|428331|483010|483011|483012|589206|968207|419593|439954|530060|531196|420132)/;
+    const meeza_regex = /^507803[0-6][0-9]|507808[3-9][0-9]|507809[0-9][0-9]|507810[0-2][0-9]/;
+    let card_type = "visa";
+    if (card_bin.replace(/[^\d]/g, "").match(mada_regex)) {
+      card_type = "mada";
+    } else if (card_bin.replace(/[^\d]/g, "").match(meeza_regex)) {
+      card_type = "meeza";
+    } else if (card_bin.replace(/[^\d]/g, "").match(visa_regex)) {
+      card_type = "visa";
+    } else if (card_bin.replace(/[^\d]/g, "").match(mastercard_regex)) {
+      card_type = "mastercard";
+    } else if (card_bin.replace(/[^\d]/g, "").match(amex_regex)) {
+      card_type = "amex";
+    }
+    return card_type;
+  };
+  const onCardNumberChange = (event) => {
+    let { value, name } = event.target;
+    let cardNumber2 = value;
+    value = value.replace(/\D/g, "");
+    if (/^3[47]\d{0,13}$/.test(value)) {
+      cardNumber2 = value.replace(/(\d{4})/, "$1 ").replace(/(\d{4}) (\d{6})/, "$1 $2 ");
+    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
+      cardNumber2 = value.replace(/(\d{4})/, "$1 ").replace(/(\d{4}) (\d{6})/, "$1 $2 ");
+    } else if (/^\d{0,16}$/.test(value)) {
+      cardNumber2 = value.replace(/(\d{4})/, "$1 ").replace(/(\d{4}) (\d{4})/, "$1 $2 ").replace(/(\d{4}) (\d{4}) (\d{4})/, "$1 $2 $3 ");
+    }
+    console.log("card number is ", cardNumber2.trimRight());
+    setCardNumber(cardNumber2.trimRight());
+  };
+  useEffect28(() => {
+    let cardTypeSlug = getCardType(cardNumber);
+    setCardType(cardTypeSlug);
+  });
+  return /* @__PURE__ */ React96.createElement(Card, null, /* @__PURE__ */ React96.createElement("form", { onSubmit: handleSubmit(props.handle) }, /* @__PURE__ */ React96.createElement(CardContent, { headless: true }, /* @__PURE__ */ React96.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React96.createElement(
     Controller7,
     {
       control,
-      name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React94.createElement(
+      name: "cardNumber",
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
           name: "cardNumber",
           placeholder: "1234 1234 1234 1234",
           type: "number",
+          onChange: onCardNumberChange,
           label: "Card Number",
-          helpertext: errors.password?.message
+          helpertext: errors.password?.message,
+          iconInside: /* @__PURE__ */ React96.createElement(
+            "img",
+            {
+              src: `https://sikka-images.s3.ap-southeast-1.amazonaws.com/payment-symbols/borderless/${cardType}.png`,
+              alt: "",
+              className: "h-8"
+            }
+          )
         }
       ),
       rules: {
         required: "Card Number is rquired"
       }
     }
-  ), /* @__PURE__ */ React94.createElement("div", { className: "w-1/4" }, /* @__PURE__ */ React94.createElement(
+  ), /* @__PURE__ */ React96.createElement("div", { className: "w-1/4" }, /* @__PURE__ */ React96.createElement(
     Controller7,
     {
       control,
       name: "cardCVC",
-      render: ({ field }) => /* @__PURE__ */ React94.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10100,12 +10292,12 @@ var CreditCardForm = (props) => {
         required: "Password is rquired"
       }
     }
-  ))), /* @__PURE__ */ React94.createElement(
+  ))), /* @__PURE__ */ React96.createElement(
     Controller7,
     {
       control,
       name: "cardExpiry",
-      render: ({ field }) => /* @__PURE__ */ React94.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10120,12 +10312,12 @@ var CreditCardForm = (props) => {
         required: "Password is rquired"
       }
     }
-  ), /* @__PURE__ */ React94.createElement(
+  ), /* @__PURE__ */ React96.createElement(
     Controller7,
     {
       control,
       name: "cardName",
-      render: ({ field }) => /* @__PURE__ */ React94.createElement(
+      render: ({ field }) => /* @__PURE__ */ React96.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10139,24 +10331,24 @@ var CreditCardForm = (props) => {
         required: "Card holder name is rquired"
       }
     }
-  )), /* @__PURE__ */ React94.createElement(CardFooter, null, /* @__PURE__ */ React94.createElement(Button, { className: "w-full", onClick: props.handlePayWithCreditCard }, "Pay with Credit Card"))));
+  )), /* @__PURE__ */ React96.createElement(CardFooter, null, /* @__PURE__ */ React96.createElement(Button, { className: "w-full", onClick: props.handlePayWithCreditCard }, "Pay with Credit Card"))));
 };
 
 // src/blocks/Payment/ChargeWalletForm.tsx
-import React95, { useState as useState48 } from "react";
+import React97, { useState as useState50 } from "react";
 var ChargeWalletForm = (props) => {
-  const [walletAmount, setWalletAmount] = useState48(0);
-  return /* @__PURE__ */ React95.createElement(Card, null, /* @__PURE__ */ React95.createElement(CardContent, { headless: true }, /* @__PURE__ */ React95.createElement("div", { className: "p-4 text-center" }, /* @__PURE__ */ React95.createElement("div", { className: " text-5xl font-extrabold" }, Number(walletAmount).toLocaleString("en") || "0"), /* @__PURE__ */ React95.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React95.createElement("div", { className: "mb-2 flex w-full flex-col gap-4 text-center" }, /* @__PURE__ */ React95.createElement("div", { className: "mb-2 flex w-full flex-row gap-4 text-center" }, /* @__PURE__ */ React95.createElement(Button, { variant: "outline", className: "h-full w-full" }, "10 SAR"), /* @__PURE__ */ React95.createElement(Button, { variant: "outline", className: "h-full w-full" }, "50 SAR"), /* @__PURE__ */ React95.createElement(Button, { variant: "outline", className: "h-full w-full" }, "100 SAR")), /* @__PURE__ */ React95.createElement(Input, { placeholder: "Custom Amount", type: "number", name: "amount" })), /* @__PURE__ */ React95.createElement(Button, { className: "mt-6 w-full" }, props.texts.chargeWallet)));
+  const [walletAmount, setWalletAmount] = useState50(0);
+  return /* @__PURE__ */ React97.createElement(Card, null, /* @__PURE__ */ React97.createElement(CardContent, { headless: true }, /* @__PURE__ */ React97.createElement("div", { className: "p-4 text-center" }, /* @__PURE__ */ React97.createElement("div", { className: " text-5xl font-extrabold" }, Number(walletAmount).toLocaleString("en") || "0"), /* @__PURE__ */ React97.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React97.createElement("div", { className: "mb-2 flex w-full flex-col gap-4 text-center" }, /* @__PURE__ */ React97.createElement("div", { className: "mb-2 flex w-full flex-row gap-4 text-center" }, /* @__PURE__ */ React97.createElement(Button, { variant: "outline", className: "h-full w-full" }, "10 SAR"), /* @__PURE__ */ React97.createElement(Button, { variant: "outline", className: "h-full w-full" }, "50 SAR"), /* @__PURE__ */ React97.createElement(Button, { variant: "outline", className: "h-full w-full" }, "100 SAR")), /* @__PURE__ */ React97.createElement(Input, { placeholder: "Custom Amount", type: "number", name: "amount" })), /* @__PURE__ */ React97.createElement(Button, { className: "mt-6 w-full" }, props.texts.chargeWallet)));
 };
 
 // src/blocks/Payment/PayWithWallet.tsx
-import React96 from "react";
+import React98 from "react";
 var PayWithWallet = (props) => {
-  return /* @__PURE__ */ React96.createElement(Card, null, /* @__PURE__ */ React96.createElement(CardContent, { headless: true }, /* @__PURE__ */ React96.createElement("div", { className: "text-center text-5xl font-extrabold" }, props.walletBalance || "0", /* @__PURE__ */ React96.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React96.createElement(Button, { className: "mt-6 w-full", onClick: props.handlePayWithWallet }, "Pay Now")));
+  return /* @__PURE__ */ React98.createElement(Card, null, /* @__PURE__ */ React98.createElement(CardContent, { headless: true }, /* @__PURE__ */ React98.createElement("div", { className: "text-center text-5xl font-extrabold" }, props.walletBalance || "0", /* @__PURE__ */ React98.createElement("div", { className: "text-sm font-normal" }, props.currency || "SAR")), /* @__PURE__ */ React98.createElement(Button, { className: "mt-6 w-full", onClick: props.handlePayWithWallet }, "Pay Now")));
 };
 
 // src/blocks/Payment/CheckoutForm.tsx
-import React97 from "react";
+import React99 from "react";
 import { Controller as Controller8, FormProvider as FormProvider4, useForm as useForm8 } from "react-hook-form";
 var CheckoutForm = (props) => {
   let isArabic = props.lang === "ar";
@@ -10180,7 +10372,7 @@ var CheckoutForm = (props) => {
       xl: "row"
     }
   };
-  return /* @__PURE__ */ React97.createElement(Card, null, /* @__PURE__ */ React97.createElement(CardHeader, null, /* @__PURE__ */ React97.createElement(CardTitle, null, props.texts.orderDetails)), /* @__PURE__ */ React97.createElement(CardContent, null, /* @__PURE__ */ React97.createElement("div", null, /* @__PURE__ */ React97.createElement("div", { className: "rounded border border-gray-300" }, /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React99.createElement(Card, null, /* @__PURE__ */ React99.createElement(CardHeader, null, /* @__PURE__ */ React99.createElement(CardTitle, null, props.texts.orderDetails)), /* @__PURE__ */ React99.createElement(CardContent, null, /* @__PURE__ */ React99.createElement("div", null, /* @__PURE__ */ React99.createElement("div", { className: "rounded border border-gray-300" }, /* @__PURE__ */ React99.createElement(
     HawaTable,
     {
       pagination: false,
@@ -10194,13 +10386,13 @@ var CheckoutForm = (props) => {
       rows: props.products,
       bordersWidth: "1"
     }
-  )))), /* @__PURE__ */ React97.createElement(CardHeader, null, /* @__PURE__ */ React97.createElement(CardTitle, null, props.texts.billingAddress)), /* @__PURE__ */ React97.createElement("form", { onSubmit: handleSubmit(props.handlePayNow) }, /* @__PURE__ */ React97.createElement(CardContent, null, /* @__PURE__ */ React97.createElement("div", null, /* @__PURE__ */ React97.createElement(FormProvider4, { ...methods }, /* @__PURE__ */ React97.createElement("div", null, /* @__PURE__ */ React97.createElement(
+  )))), /* @__PURE__ */ React99.createElement(CardHeader, null, /* @__PURE__ */ React99.createElement(CardTitle, null, props.texts.billingAddress)), /* @__PURE__ */ React99.createElement("form", { onSubmit: handleSubmit(props.handlePayNow) }, /* @__PURE__ */ React99.createElement(CardContent, null, /* @__PURE__ */ React99.createElement("div", null, /* @__PURE__ */ React99.createElement(FormProvider4, { ...methods }, /* @__PURE__ */ React99.createElement("div", null, /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "firstName",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           type: "text",
@@ -10211,13 +10403,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React97.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React97.createElement(
+  ), /* @__PURE__ */ React99.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "lastName",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10229,12 +10421,12 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React97.createElement(
+  )), /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "email",
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10253,13 +10445,13 @@ var CheckoutForm = (props) => {
         }
       }
     }
-  ), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React97.createElement(
+  ), /* @__PURE__ */ React99.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "streetAddress",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10271,13 +10463,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React97.createElement(
+  )), /* @__PURE__ */ React99.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "province",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10289,13 +10481,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React97.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React97.createElement(
+  ), /* @__PURE__ */ React99.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "city",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10307,13 +10499,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React97.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React97.createElement(
+  )), /* @__PURE__ */ React99.createElement("div", { className: "flex flex-col md:flex-row" }, /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "buildingNumber",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10325,13 +10517,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React97.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React97.createElement(
+  ), /* @__PURE__ */ React99.createElement("div", { style: { width: 20 } }), /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "zipCode",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaTextField,
         {
           width: "full",
@@ -10343,13 +10535,13 @@ var CheckoutForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React97.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React97.createElement(
+  )), /* @__PURE__ */ React99.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React99.createElement(
     Controller8,
     {
       control,
       name: "country",
       rules: { required: props.texts?.required },
-      render: ({ field }) => /* @__PURE__ */ React97.createElement(
+      render: ({ field }) => /* @__PURE__ */ React99.createElement(
         HawaSelect,
         {
           native: true,
@@ -10360,18 +10552,18 @@ var CheckoutForm = (props) => {
           onChange: (e) => field.onChange(e.country_label),
           value: field.value ?? ""
         },
-        /* @__PURE__ */ React97.createElement("option", null),
-        props.countriesList.map((country, i) => /* @__PURE__ */ React97.createElement("option", { key: i }, country))
+        /* @__PURE__ */ React99.createElement("option", null),
+        props.countriesList.map((country, i) => /* @__PURE__ */ React99.createElement("option", { key: i }, country))
       )
     }
-  ))))), /* @__PURE__ */ React97.createElement(CardFooter, null, /* @__PURE__ */ React97.createElement(Button, { className: "w-full" }, props.texts.payNow)), " "));
+  ))))), /* @__PURE__ */ React99.createElement(CardFooter, null, /* @__PURE__ */ React99.createElement(Button, { className: "w-full" }, props.texts.payNow)), " "));
 };
 
 // src/blocks/Payment/Confirmation.tsx
-import React98 from "react";
+import React100 from "react";
 var ConfirmationPage = (props) => {
   let isArabic = props.lang === "ar";
-  return /* @__PURE__ */ React98.createElement(Card, null, /* @__PURE__ */ React98.createElement(CardContent, { headless: true }, " ", /* @__PURE__ */ React98.createElement("div", { className: "py-5 text-center text-3xl font-bold dark:text-white" }, props.confirmationTitle), /* @__PURE__ */ React98.createElement("div", { className: "py-5 dark:text-white" }, /* @__PURE__ */ React98.createElement("div", { className: "mb-2 text-center" }, props.texts.successMessage, " ", /* @__PURE__ */ React98.createElement("strong", null, props.userEmail)), /* @__PURE__ */ React98.createElement("div", { className: "text-center" }, props.texts.yourOrderNumber), /* @__PURE__ */ React98.createElement("div", { className: "text-center font-bold" }, props.orderNumber)), /* @__PURE__ */ React98.createElement("div", { className: "flex flex-col items-center justify-center gap-4 py-5 pt-0" }, /* @__PURE__ */ React98.createElement(Button, { className: "w-full", onClick: props.handlePrint }, props.texts.print), /* @__PURE__ */ React98.createElement(Button, { className: "w-full", onClick: props.handleHistory }, props.texts.history), /* @__PURE__ */ React98.createElement(Button, { className: "w-full", onClick: props.handleHome }, props.texts.homePage), /* @__PURE__ */ React98.createElement("div", { className: " text-center text-sm dark:text-white" }, props.texts.fasterPaymentNote), /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React100.createElement(Card, null, /* @__PURE__ */ React100.createElement(CardContent, { headless: true }, " ", /* @__PURE__ */ React100.createElement("div", { className: "py-5 text-center text-3xl font-bold dark:text-white" }, props.confirmationTitle), /* @__PURE__ */ React100.createElement("div", { className: "py-5 dark:text-white" }, /* @__PURE__ */ React100.createElement("div", { className: "mb-2 text-center" }, props.texts.successMessage, " ", /* @__PURE__ */ React100.createElement("strong", null, props.userEmail)), /* @__PURE__ */ React100.createElement("div", { className: "text-center" }, props.texts.yourOrderNumber), /* @__PURE__ */ React100.createElement("div", { className: "text-center font-bold" }, props.orderNumber)), /* @__PURE__ */ React100.createElement("div", { className: "flex flex-col items-center justify-center gap-4 py-5 pt-0" }, /* @__PURE__ */ React100.createElement(Button, { className: "w-full", onClick: props.handlePrint }, props.texts.print), /* @__PURE__ */ React100.createElement(Button, { className: "w-full", onClick: props.handleHistory }, props.texts.history), /* @__PURE__ */ React100.createElement(Button, { className: "w-full", onClick: props.handleHome }, props.texts.homePage), /* @__PURE__ */ React100.createElement("div", { className: " text-center text-sm dark:text-white" }, props.texts.fasterPaymentNote), /* @__PURE__ */ React100.createElement(
     "a",
     {
       className: "clickable-link text-xs",
@@ -10382,9 +10574,9 @@ var ConfirmationPage = (props) => {
 };
 
 // src/blocks/Pricing/PricingPlans.tsx
-import React99 from "react";
+import React101 from "react";
 var PricingPlans = (props) => {
-  return /* @__PURE__ */ React99.createElement("div", null, /* @__PURE__ */ React99.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React101.createElement("div", null, /* @__PURE__ */ React101.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React101.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10392,7 +10584,7 @@ var PricingPlans = (props) => {
       options: props.billingCycles,
       onChangeTab: (e) => props.onCycleChange(e)
     }
-  ), /* @__PURE__ */ React99.createElement(
+  ), /* @__PURE__ */ React101.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10400,8 +10592,8 @@ var PricingPlans = (props) => {
       options: props.currencies,
       onChangeTab: (e) => props.onCurrencyChange(e)
     }
-  )), /* @__PURE__ */ React99.createElement("div", { className: "flex flex-row justify-between" }, props.plans.map((plan, index) => {
-    return /* @__PURE__ */ React99.createElement(
+  )), /* @__PURE__ */ React101.createElement("div", { className: "flex flex-row justify-between" }, props.plans.map((plan, index) => {
+    return /* @__PURE__ */ React101.createElement(
       HawaPricingCard,
       {
         key: index,
@@ -10418,8 +10610,8 @@ var PricingPlans = (props) => {
 };
 
 // src/blocks/Pricing/ComparingPlans.tsx
-import React100, { useState as useState49 } from "react";
-var CheckMark = () => /* @__PURE__ */ React100.createElement(
+import React102, { useState as useState51 } from "react";
+var CheckMark = () => /* @__PURE__ */ React102.createElement(
   "svg",
   {
     className: "h-5 w-5 text-green-500",
@@ -10427,7 +10619,7 @@ var CheckMark = () => /* @__PURE__ */ React100.createElement(
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React100.createElement(
+  /* @__PURE__ */ React102.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10436,7 +10628,7 @@ var CheckMark = () => /* @__PURE__ */ React100.createElement(
     }
   )
 );
-var UncheckMark = () => /* @__PURE__ */ React100.createElement(
+var UncheckMark = () => /* @__PURE__ */ React102.createElement(
   "svg",
   {
     className: "h-5 w-5 text-red-500",
@@ -10444,7 +10636,7 @@ var UncheckMark = () => /* @__PURE__ */ React100.createElement(
     fill: "currentColor",
     viewBox: "0 0 20 20"
   },
-  /* @__PURE__ */ React100.createElement(
+  /* @__PURE__ */ React102.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10454,9 +10646,9 @@ var UncheckMark = () => /* @__PURE__ */ React100.createElement(
   )
 );
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState49("sar");
-  const [currentCycle, setCurrentCycle] = useState49("month");
-  return /* @__PURE__ */ React100.createElement("div", { id: "detailed-pricing", className: "w-full overflow-x-auto" }, /* @__PURE__ */ React100.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React100.createElement(
+  const [currentCurrency, setCurrentCurrency] = useState51("sar");
+  const [currentCycle, setCurrentCycle] = useState51("month");
+  return /* @__PURE__ */ React102.createElement("div", { id: "detailed-pricing", className: "w-full overflow-x-auto" }, /* @__PURE__ */ React102.createElement("div", { className: "mb-2 flex w-full justify-between" }, /* @__PURE__ */ React102.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10464,7 +10656,7 @@ var ComparingPlans = (props) => {
       options: props.billingCycles,
       onChangeTab: (e) => props.onCycleChange(e)
     }
-  ), /* @__PURE__ */ React100.createElement(
+  ), /* @__PURE__ */ React102.createElement(
     HawaRadio,
     {
       design: "tabs",
@@ -10472,9 +10664,9 @@ var ComparingPlans = (props) => {
       options: props.currencies,
       onChangeTab: (e) => props.onCurrencyChange(e)
     }
-  )), /* @__PURE__ */ React100.createElement("div", { className: " overflow-hidden rounded" }, /* @__PURE__ */ React100.createElement("div", { className: "grid grid-cols-4 gap-x-2 border-b border-t border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white" }, /* @__PURE__ */ React100.createElement("div", { className: "flex items-center" }), props.plans.map((plan) => /* @__PURE__ */ React100.createElement("div", null, /* @__PURE__ */ React100.createElement("h5", { className: "text-md 0 font-bold text-gray-500 dark:text-gray-400" }, plan.texts.title), /* @__PURE__ */ React100.createElement("div", { className: " flex items-baseline  text-gray-900 dark:text-white" }, /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement("span", { className: "text-5xl font-extrabold tracking-tight" }, plan.price), /* @__PURE__ */ React100.createElement("span", { className: "mx-1 text-sm font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React100.createElement("span", { className: "ml-1 text-xl font-normal text-gray-500 dark:text-gray-400" }, "/ ", plan.texts.cycleText)), /* @__PURE__ */ React100.createElement("h5", { className: "text-md  font-normal text-gray-500 dark:text-gray-400" }, plan.texts.subtitle)))), props.plans?.map((plan) => {
+  )), /* @__PURE__ */ React102.createElement("div", { className: " overflow-hidden rounded" }, /* @__PURE__ */ React102.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__ */ React102.createElement("div", { className: "flex items-center" }), props.plans.map((plan) => /* @__PURE__ */ React102.createElement("div", null, /* @__PURE__ */ React102.createElement("h5", { className: "text-md 0 font-bold text-gray-500 dark:text-gray-400" }, plan.texts.title), /* @__PURE__ */ React102.createElement("div", { className: " flex items-baseline  text-gray-900 dark:text-white" }, /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement("span", { className: "text-5xl font-extrabold tracking-tight" }, plan.price), /* @__PURE__ */ React102.createElement("span", { className: "mx-1 text-sm font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React102.createElement("span", { className: "ml-1 text-xl font-normal text-gray-500 dark:text-gray-400" }, "/ ", plan.texts.cycleText)), /* @__PURE__ */ React102.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__ */ React100.createElement("div", { className: "grid grid-cols-4 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700 dark:border-gray-700" }, /* @__PURE__ */ React100.createElement("div", { className: "  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400" }, feature.text, feature.description && /* @__PURE__ */ React100.createElement(Tooltip, { side: "right", content: feature.description }, /* @__PURE__ */ React100.createElement(
+      return /* @__PURE__ */ React102.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__ */ React102.createElement("div", { className: "  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400" }, feature.text, feature.description && /* @__PURE__ */ React102.createElement(Tooltip, { side: "right", content: feature.description }, /* @__PURE__ */ React102.createElement(
         "svg",
         {
           stroke: "currentColor",
@@ -10484,44 +10676,44 @@ var ComparingPlans = (props) => {
           height: "1em",
           width: "1em"
         },
-        /* @__PURE__ */ React100.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
-      ))), /* @__PURE__ */ React100.createElement(UncheckMark, null), /* @__PURE__ */ React100.createElement(CheckMark, null), /* @__PURE__ */ React100.createElement(UncheckMark, null));
+        /* @__PURE__ */ React102.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__ */ React102.createElement(UncheckMark, null), /* @__PURE__ */ React102.createElement(CheckMark, null), /* @__PURE__ */ React102.createElement(UncheckMark, null));
     });
   })));
 };
 
 // src/blocks/Pricing/HorizontalPricing.tsx
-import React101, { useState as useState50 } from "react";
+import React103, { useState as useState52 } from "react";
 import clsx33 from "clsx";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState50(null);
+  const [selectedCard, setSelectedCard] = useState52(null);
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
     { title: "enterprise", price: "$149", cycle: "/mo" }
   ];
-  return /* @__PURE__ */ React101.createElement("div", { className: "z-10 w-full max-w-screen-sm" }, /* @__PURE__ */ React101.createElement("div", { className: "max-w-2xl " }, /* @__PURE__ */ React101.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React103.createElement("div", { className: "z-10 w-full max-w-screen-sm" }, /* @__PURE__ */ React103.createElement("div", { className: "max-w-2xl " }, /* @__PURE__ */ React103.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React103.createElement(
     HawaRadio,
     {
       design: "tabs",
       options: props.currencies,
       defaultValue: props.currentCurrency
     }
-  ), /* @__PURE__ */ React101.createElement(
+  ), /* @__PURE__ */ React103.createElement(
     HawaRadio,
     {
       design: "tabs",
       options: props.billingCycles,
       defaultValue: props.currentCycle
     }
-  )), data.map((d) => /* @__PURE__ */ React101.createElement(
+  )), data.map((d) => /* @__PURE__ */ React103.createElement(
     "label",
     {
       htmlFor: d.title,
       className: "",
       onClick: () => setSelectedCard(d.title)
     },
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React103.createElement(
       "input",
       {
         type: "radio",
@@ -10530,7 +10722,7 @@ var HorizontalPricing = (props) => {
         className: "peer appearance-none"
       }
     ),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React103.createElement(
       "div",
       {
         className: clsx33(
@@ -10538,18 +10730,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__ */ React101.createElement("div", { className: "peer flex items-center gap-4" }, /* @__PURE__ */ React101.createElement(CheckIcons, null), /* @__PURE__ */ React101.createElement(
+      /* @__PURE__ */ React103.createElement("div", { className: "peer flex items-center gap-4" }, /* @__PURE__ */ React103.createElement(CheckIcons, null), /* @__PURE__ */ React103.createElement(
         CardText,
         {
           title: "Enterprise",
           subtitle: "For startups and new businesses"
         }
       )),
-      /* @__PURE__ */ React101.createElement(CardPrice, { amount: d.price, cycle: d.cycle })
+      /* @__PURE__ */ React103.createElement(CardPrice, { amount: d.price, cycle: d.cycle })
     )
   ))));
 };
-var CheckIcons = () => /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(
+var CheckIcons = () => /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(
   "svg",
   {
     fill: "none",
@@ -10558,7 +10750,7 @@ var CheckIcons = () => /* @__PURE__ */ React101.createElement(React101.Fragment,
     stroke: "currentColor",
     className: "default h-8 w-8 text-neutral-500"
   },
-  /* @__PURE__ */ React101.createElement(
+  /* @__PURE__ */ React103.createElement(
     "path",
     {
       strokeLinecap: "round",
@@ -10566,14 +10758,14 @@ var CheckIcons = () => /* @__PURE__ */ React101.createElement(React101.Fragment,
       d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
     }
   )
-), /* @__PURE__ */ React101.createElement(
+), /* @__PURE__ */ React103.createElement(
   "svg",
   {
     viewBox: "0 0 24 24",
     fill: "currentColor",
     className: "active hidden h-8 w-8 text-blue-500"
   },
-  /* @__PURE__ */ React101.createElement(
+  /* @__PURE__ */ React103.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -10582,21 +10774,21 @@ var CheckIcons = () => /* @__PURE__ */ React101.createElement(React101.Fragment,
     }
   )
 ));
-var CardText = (props) => /* @__PURE__ */ React101.createElement("div", { className: "peer flex flex-col items-start " }, /* @__PURE__ */ React101.createElement("h2", { className: "font-medium text-neutral-700 dark:text-gray-100 sm:text-xl" }, props.title), /* @__PURE__ */ React101.createElement("p", { className: "text-sm text-neutral-500 dark:text-gray-300" }, props.subtitle, " "));
-var CardPrice = (props) => /* @__PURE__ */ React101.createElement("h2", { className: "peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl" }, props.amount, /* @__PURE__ */ React101.createElement("span", { className: "text-base font-medium text-neutral-400" }, props.cycle));
+var CardText = (props) => /* @__PURE__ */ React103.createElement("div", { className: "peer flex flex-col items-start " }, /* @__PURE__ */ React103.createElement("h2", { className: "font-medium text-neutral-700 dark:text-gray-100 sm:text-xl" }, props.title), /* @__PURE__ */ React103.createElement("p", { className: "text-sm text-neutral-500 dark:text-gray-300" }, props.subtitle, " "));
+var CardPrice = (props) => /* @__PURE__ */ React103.createElement("h2", { className: "peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl" }, props.amount, /* @__PURE__ */ React103.createElement("span", { className: "text-base font-medium text-neutral-400" }, props.cycle));
 
 // src/blocks/Referral/ReferralAccount.tsx
-import React102 from "react";
+import React104 from "react";
 var ReferralAccount = ({
   referralLink,
   referralCode
 }) => {
-  return /* @__PURE__ */ React102.createElement(Card, null, /* @__PURE__ */ React102.createElement(CardContent, { headless: true }, /* @__PURE__ */ React102.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React102.createElement("div", { className: "mb-1" }, "Referral Code"), /* @__PURE__ */ React102.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React102.createElement("span", { className: "ml-3 font-bold" }, referralCode), /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React104.createElement(Card, null, /* @__PURE__ */ React104.createElement(CardContent, { headless: true }, /* @__PURE__ */ React104.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React104.createElement("div", { className: "mb-1" }, "Referral Code"), /* @__PURE__ */ React104.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React104.createElement("span", { className: "ml-3 font-bold" }, referralCode), /* @__PURE__ */ React104.createElement(
     Button,
     {
       onClick: () => navigator.clipboard.writeText(referralCode)
     },
-    /* @__PURE__ */ React102.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React104.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React104.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -10606,14 +10798,14 @@ var ReferralAccount = ({
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React102.createElement("path", { d: "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" })
+      /* @__PURE__ */ React104.createElement("path", { d: "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" })
     ), " ")
-  ))), /* @__PURE__ */ React102.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React102.createElement("div", { className: "mb-1" }, "Referral Link"), /* @__PURE__ */ React102.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React102.createElement("span", { className: "ml-3 font-bold" }, referralLink), /* @__PURE__ */ React102.createElement(
+  ))), /* @__PURE__ */ React104.createElement("div", { className: "my-2 mt-0" }, /* @__PURE__ */ React104.createElement("div", { className: "mb-1" }, "Referral Link"), /* @__PURE__ */ React104.createElement("div", { className: "flex flex-row items-center justify-between rounded border bg-background" }, /* @__PURE__ */ React104.createElement("span", { className: "ml-3 font-bold" }, referralLink), /* @__PURE__ */ React104.createElement(
     Button,
     {
       onClick: () => navigator.clipboard.writeText(referralLink)
     },
-    /* @__PURE__ */ React102.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React104.createElement("span", { className: "bg-red flex items-center justify-center" }, /* @__PURE__ */ React104.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -10623,13 +10815,13 @@ var ReferralAccount = ({
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React102.createElement("path", { d: "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" })
+      /* @__PURE__ */ React104.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 React103 from "react";
+import React105 from "react";
 import { Controller as Controller9, FormProvider as FormProvider5, useForm as useForm9 } from "react-hook-form";
 var ReferralSettlement = ({
   referralLink,
@@ -10642,12 +10834,12 @@ var ReferralSettlement = ({
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React103.createElement(Card, null, /* @__PURE__ */ React103.createElement(CardContent, { headless: true }, /* @__PURE__ */ React103.createElement("div", null, /* @__PURE__ */ React103.createElement(FormProvider5, { ...methods }, /* @__PURE__ */ React103.createElement(HawaTextField, { label: "IBAN" }), /* @__PURE__ */ React103.createElement(HawaTextField, { label: "Holder Name" }), /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React105.createElement(Card, null, /* @__PURE__ */ React105.createElement(CardContent, { headless: true }, /* @__PURE__ */ React105.createElement("div", null, /* @__PURE__ */ React105.createElement(FormProvider5, { ...methods }, /* @__PURE__ */ React105.createElement(HawaTextField, { label: "IBAN" }), /* @__PURE__ */ React105.createElement(HawaTextField, { label: "Holder Name" }), /* @__PURE__ */ React105.createElement(
     Controller9,
     {
       control,
       name: "bank",
-      render: ({ field }) => /* @__PURE__ */ React103.createElement(
+      render: ({ field }) => /* @__PURE__ */ React105.createElement(
         HawaSelect,
         {
           label: "Bank",
@@ -10666,13 +10858,13 @@ var ReferralSettlement = ({
         }
       )
     }
-  ))), /* @__PURE__ */ React103.createElement("div", null, /* @__PURE__ */ React103.createElement(Button, { className: "mt-6 w-full" }, "Add Bank Account")), withdrawError && /* @__PURE__ */ React103.createElement("div", null, /* @__PURE__ */ React103.createElement(
+  ))), /* @__PURE__ */ React105.createElement("div", null, /* @__PURE__ */ React105.createElement(Button, { className: "mt-6 w-full" }, "Add Bank Account")), withdrawError && /* @__PURE__ */ React105.createElement("div", null, /* @__PURE__ */ React105.createElement(
     HawaAlert,
     {
       text: "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20",
       severity: "warning"
     }
-  )), /* @__PURE__ */ React103.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React103.createElement("div", { className: "mb-1" }, "Settlement Accounts"), /* @__PURE__ */ React103.createElement("div", { className: "rounded" }, /* @__PURE__ */ React103.createElement(
+  )), /* @__PURE__ */ React105.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React105.createElement("div", { className: "mb-1" }, "Settlement Accounts"), /* @__PURE__ */ React105.createElement("div", { className: "rounded" }, /* @__PURE__ */ React105.createElement(
     SettlementAccountCard,
     {
       bank: "Al Inma Bank",
@@ -10680,14 +10872,14 @@ var ReferralSettlement = ({
       accountHolder: "Zakher Masri",
       default: true
     }
-  ), /* @__PURE__ */ React103.createElement(
+  ), /* @__PURE__ */ React105.createElement(
     SettlementAccountCard,
     {
       bank: "Al Rajihi Bank",
       iban: "SA10228094028098329119",
       accountHolder: "Zakher Masri"
     }
-  ), /* @__PURE__ */ React103.createElement(
+  ), /* @__PURE__ */ React105.createElement(
     SettlementAccountCard,
     {
       bank: "Al Inma Bank",
@@ -10697,13 +10889,13 @@ var ReferralSettlement = ({
   )))));
 };
 var SettlementAccountCard = (props) => {
-  return /* @__PURE__ */ React103.createElement("div", { className: "mb-3 flex flex-row items-center justify-between rounded border bg-background p-3" }, /* @__PURE__ */ React103.createElement("div", { className: "flex flex-col justify-between" }, /* @__PURE__ */ React103.createElement("div", { className: "text-xs" }, props.bank), /* @__PURE__ */ React103.createElement("div", null, props.accountHolder), /* @__PURE__ */ React103.createElement("div", { className: "text-xs" }, props.iban)), /* @__PURE__ */ React103.createElement("div", { className: "flex flex-row items-center justify-center gap-2" }, props.default && /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React105.createElement("div", { className: "mb-3 flex flex-row items-center justify-between rounded border bg-background p-3" }, /* @__PURE__ */ React105.createElement("div", { className: "flex flex-col justify-between" }, /* @__PURE__ */ React105.createElement("div", { className: "text-xs" }, props.bank), /* @__PURE__ */ React105.createElement("div", null, props.accountHolder), /* @__PURE__ */ React105.createElement("div", { className: "text-xs" }, props.iban)), /* @__PURE__ */ React105.createElement("div", { className: "flex flex-row items-center justify-center gap-2" }, props.default && /* @__PURE__ */ React105.createElement(
     HawaChip,
     {
       label: "Default",
       size: "small"
     }
-  ), /* @__PURE__ */ React103.createElement(
+  ), /* @__PURE__ */ React105.createElement(
     HawaMenu,
     {
       size: "small",
@@ -10715,7 +10907,7 @@ var SettlementAccountCard = (props) => {
         ]
       ]
     },
-    /* @__PURE__ */ React103.createElement(Button, { variant: "outline", size: "icon" }, /* @__PURE__ */ React103.createElement(
+    /* @__PURE__ */ React105.createElement(Button, { variant: "outline", size: "icon" }, /* @__PURE__ */ React105.createElement(
       "svg",
       {
         "aria-label": "Vertical Three Dots Menu Icon",
@@ -10727,53 +10919,53 @@ var SettlementAccountCard = (props) => {
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React103.createElement("path", { d: "M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" })
+      /* @__PURE__ */ React105.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 React104 from "react";
+import React106 from "react";
 var ReferralStats = ({
   referralLink,
   referralCode,
   withdrawError
 }) => {
-  return /* @__PURE__ */ React104.createElement(Card, null, /* @__PURE__ */ React104.createElement(CardContent, { headless: true }, /* @__PURE__ */ React104.createElement("div", { className: "mb-1" }, "Stats"), /* @__PURE__ */ React104.createElement("div", { className: "justi flex flex-row gap-1" }, /* @__PURE__ */ React104.createElement(NumberCard, { title: "Clicks", number: 22 }), /* @__PURE__ */ React104.createElement(NumberCard, { title: "Sign-ups", number: 32 }), /* @__PURE__ */ React104.createElement(NumberCard, { title: "Commission", number: "213.22 SAR" })), /* @__PURE__ */ React104.createElement(Button, { className: "mt-6 w-full" }, "Withdraw Money"), withdrawError && /* @__PURE__ */ React104.createElement("div", null, /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React106.createElement(Card, null, /* @__PURE__ */ React106.createElement(CardContent, { headless: true }, /* @__PURE__ */ React106.createElement("div", { className: "mb-1" }, "Stats"), /* @__PURE__ */ React106.createElement("div", { className: "justi flex flex-row gap-1" }, /* @__PURE__ */ React106.createElement(NumberCard, { title: "Clicks", number: 22 }), /* @__PURE__ */ React106.createElement(NumberCard, { title: "Sign-ups", number: 32 }), /* @__PURE__ */ React106.createElement(NumberCard, { title: "Commission", number: "213.22 SAR" })), /* @__PURE__ */ React106.createElement(Button, { className: "mt-6 w-full" }, "Withdraw Money"), withdrawError && /* @__PURE__ */ React106.createElement("div", null, /* @__PURE__ */ React106.createElement(
     HawaAlert,
     {
       text: "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20",
       severity: "warning"
     }
-  )), /* @__PURE__ */ React104.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React104.createElement("div", { className: "mb-1" }, "Sign ups"), /* @__PURE__ */ React104.createElement("div", { className: "rounded" }, /* @__PURE__ */ React104.createElement(
+  )), /* @__PURE__ */ React106.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React106.createElement("div", { className: "mb-1" }, "Sign ups"), /* @__PURE__ */ React106.createElement("div", { className: "rounded" }, /* @__PURE__ */ React106.createElement(
     ReferralSignUpCard,
     {
       date: "2020/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React104.createElement(
+  ), /* @__PURE__ */ React106.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React104.createElement(
+  ), /* @__PURE__ */ React106.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React104.createElement(
+  ), /* @__PURE__ */ React106.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
       email: "zakher@sikka.io",
       amount: "3.4 SAR / Month"
     }
-  ), /* @__PURE__ */ React104.createElement(
+  ), /* @__PURE__ */ React106.createElement(
     ReferralSignUpCard,
     {
       date: "2022/10/11 @ 9:45 pm",
@@ -10782,26 +10974,26 @@ var ReferralStats = ({
     }
   )))));
 };
-var NumberCard = (props) => /* @__PURE__ */ React104.createElement("div", { className: "w-full rounded border bg-background p-2" }, /* @__PURE__ */ React104.createElement("div", { className: "text-sm" }, props.title), /* @__PURE__ */ React104.createElement("div", { className: "font-bold" }, props.number));
-var ReferralSignUpCard = (props) => /* @__PURE__ */ React104.createElement("div", { className: "mb-3 rounded border-b bg-background p-2" }, /* @__PURE__ */ React104.createElement("div", { className: "text-xs" }, props.date), /* @__PURE__ */ React104.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React104.createElement("div", null, props.email), /* @__PURE__ */ React104.createElement("div", null, props.amount)));
+var NumberCard = (props) => /* @__PURE__ */ React106.createElement("div", { className: "w-full rounded border bg-background p-2" }, /* @__PURE__ */ React106.createElement("div", { className: "text-sm" }, props.title), /* @__PURE__ */ React106.createElement("div", { className: "font-bold" }, props.number));
+var ReferralSignUpCard = (props) => /* @__PURE__ */ React106.createElement("div", { className: "mb-3 rounded border-b bg-background p-2" }, /* @__PURE__ */ React106.createElement("div", { className: "text-xs" }, props.date), /* @__PURE__ */ React106.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React106.createElement("div", null, props.email), /* @__PURE__ */ React106.createElement("div", null, props.amount)));
 
 // src/blocks/Misc/NotFound.tsx
-import React105 from "react";
+import React107 from "react";
 var NotFound = ({
   variant = "contained",
   texts
 }) => {
-  return /* @__PURE__ */ React105.createElement(Card, null, /* @__PURE__ */ React105.createElement(CardContent, { headless: true }, /* @__PURE__ */ React105.createElement("div", { className: "flex flex-col items-center dark:text-white" }, /* @__PURE__ */ React105.createElement("div", { className: "text-center text-6xl font-bold " }, "404"), /* @__PURE__ */ React105.createElement("div", { className: "m-2 text-center text-xl font-bold " }, texts?.pageNotFound ?? "Page Not Found"), /* @__PURE__ */ React105.createElement("div", { className: "mb-4 text-center" }, texts?.ifLost ?? /* @__PURE__ */ React105.createElement(React105.Fragment, null, "If you're lost please contact us", " ", /* @__PURE__ */ React105.createElement("span", { className: "clickable-link" }, "help@sikka.io"))), /* @__PURE__ */ React105.createElement(Button, { className: "w-full" }, texts?.home ?? "Home"))));
+  return /* @__PURE__ */ React107.createElement(Card, null, /* @__PURE__ */ React107.createElement(CardContent, { headless: true }, /* @__PURE__ */ React107.createElement("div", { className: "flex flex-col items-center dark:text-white" }, /* @__PURE__ */ React107.createElement("div", { className: "text-center text-6xl font-bold " }, "404"), /* @__PURE__ */ React107.createElement("div", { className: "m-2 text-center text-xl font-bold " }, texts?.pageNotFound ?? "Page Not Found"), /* @__PURE__ */ React107.createElement("div", { className: "mb-4 text-center" }, texts?.ifLost ?? /* @__PURE__ */ React107.createElement(React107.Fragment, null, "If you're lost please contact us", " ", /* @__PURE__ */ React107.createElement("span", { className: "clickable-link" }, "help@sikka.io"))), /* @__PURE__ */ React107.createElement(Button, { className: "w-full" }, texts?.home ?? "Home"))));
 };
 
 // src/blocks/Misc/EmptyState.tsx
-import React106 from "react";
+import React108 from "react";
 var EmptyState = ({
   variant = "contained",
   texts,
   onActionClick
 }) => {
-  return /* @__PURE__ */ React106.createElement(Card, null, /* @__PURE__ */ React106.createElement(CardContent, { headless: true }, /* @__PURE__ */ React106.createElement("div", { className: "flex flex-col items-center justify-center text-center " }, /* @__PURE__ */ React106.createElement("div", { className: "flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold text-primary-foreground" }, /* @__PURE__ */ React106.createElement(
+  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(
     "svg",
     {
       stroke: "currentColor",
@@ -10811,36 +11003,36 @@ var EmptyState = ({
       height: "0.35em",
       width: "0.35em"
     },
-    /* @__PURE__ */ React106.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
-  )), /* @__PURE__ */ React106.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.youreCaughtUp ?? "You're all caught up"))), /* @__PURE__ */ React106.createElement(CardFooter, null, /* @__PURE__ */ React106.createElement(Button, { className: "w-full", onClick: () => onActionClick() }, texts?.actionText ?? "Go Home")));
+    /* @__PURE__ */ React108.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__ */ React108.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.youreCaughtUp ?? "You're all caught up"))), /* @__PURE__ */ React108.createElement(CardFooter, null, /* @__PURE__ */ React108.createElement(Button, { className: "w-full", onClick: () => onActionClick() }, texts?.actionText ?? "Go Home")));
 };
 
 // src/blocks/Misc/Testimonial.tsx
-import React107 from "react";
+import React109 from "react";
 var Testimonial = (props) => {
-  return /* @__PURE__ */ React107.createElement(Card, null, /* @__PURE__ */ React107.createElement(CardContent, { headless: true }, /* @__PURE__ */ React107.createElement("div", null, /* @__PURE__ */ React107.createElement("p", { className: "mb-4 max-w-sm" }, "The team at Sikka Software is simply amazing. The tech is easy to follow, easy to work with, and infinitely flexible. The solution opportunities created by Tines are endless.")), /* @__PURE__ */ React107.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React107.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none" }, /* @__PURE__ */ React107.createElement("rect", { width: "48", height: "48", rx: "24", fill: "#45BE8B" }), /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React109.createElement(Card, null, /* @__PURE__ */ React109.createElement(CardContent, { headless: true }, /* @__PURE__ */ React109.createElement("div", null, /* @__PURE__ */ React109.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__ */ React109.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ React109.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none" }, /* @__PURE__ */ React109.createElement("rect", { width: "48", height: "48", rx: "24", fill: "#45BE8B" }), /* @__PURE__ */ React109.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__ */ React107.createElement(
+  ), /* @__PURE__ */ React109.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__ */ React107.createElement("span", { className: "border border-l " }), " ", /* @__PURE__ */ React107.createElement("div", null, /* @__PURE__ */ React107.createElement("strong", null, "Brent Lassi"), /* @__PURE__ */ React107.createElement("div", null, " Chief Information Security Officer")))));
+  )), /* @__PURE__ */ React109.createElement("span", { className: "border border-l " }), " ", /* @__PURE__ */ React109.createElement("div", null, /* @__PURE__ */ React109.createElement("strong", null, "Brent Lassi"), /* @__PURE__ */ React109.createElement("div", null, " Chief Information Security Officer")))));
 };
 
 // src/blocks/Misc/LeadGenerator.tsx
-import React108 from "react";
+import React110 from "react";
 var LeadGenerator = ({
   variant = "contained",
   texts,
   handleNewsletterSub
 }) => {
-  return /* @__PURE__ */ React108.createElement(Card, null, /* @__PURE__ */ React108.createElement(CardHeader, null, /* @__PURE__ */ React108.createElement(CardTitle, null, texts?.title), /* @__PURE__ */ React108.createElement(CardDescription, null, texts?.subtitle)), /* @__PURE__ */ React108.createElement(CardContent, null, /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React110.createElement(Card, null, /* @__PURE__ */ React110.createElement(CardHeader, null, /* @__PURE__ */ React110.createElement(CardTitle, null, texts?.title), /* @__PURE__ */ React110.createElement(CardDescription, null, texts?.subtitle)), /* @__PURE__ */ React110.createElement(CardContent, null, /* @__PURE__ */ React110.createElement(
     "form",
     {
       className: "flex flex-row gap-2",
@@ -10849,33 +11041,33 @@ var LeadGenerator = ({
         handleNewsletterSub(e.target[0].value);
       }
     },
-    /* @__PURE__ */ React108.createElement(Input, { type: "email", name: "email", placeholder: "example@sikka.io" }),
-    /* @__PURE__ */ React108.createElement(Button, null, texts?.submit ?? "Submit")
+    /* @__PURE__ */ React110.createElement(Input, { type: "email", name: "email", placeholder: "example@sikka.io" }),
+    /* @__PURE__ */ React110.createElement(Button, null, texts?.submit ?? "Submit")
   )));
 };
 
 // src/blocks/Misc/Announcement.tsx
-import React109 from "react";
+import React111 from "react";
 var Announcement = ({
   variant = "contained",
   onActionClick,
   ...props
 }) => {
-  return /* @__PURE__ */ React109.createElement(Card, null, /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React111.createElement(Card, null, /* @__PURE__ */ React111.createElement(
     CardContent,
     {
       headless: true,
       className: "flex flex-row items-center justify-between"
     },
-    /* @__PURE__ */ React109.createElement("div", { className: "flex flex-col items-start justify-center " }, /* @__PURE__ */ React109.createElement("span", { className: "text-lg font-bold" }, props.title), /* @__PURE__ */ React109.createElement("span", { className: "text-sm" }, props.subtitle)),
-    /* @__PURE__ */ React109.createElement(Button, { onClick: () => onActionClick() }, props.actionText)
+    /* @__PURE__ */ React111.createElement("div", { className: "flex flex-col items-start justify-center " }, /* @__PURE__ */ React111.createElement("span", { className: "text-lg font-bold" }, props.title), /* @__PURE__ */ React111.createElement("span", { className: "text-sm" }, props.subtitle)),
+    /* @__PURE__ */ React111.createElement(Button, { onClick: () => onActionClick() }, props.actionText)
   ));
 };
 
 // src/blocks/Misc/NoPermission.tsx
-import React110 from "react";
+import React112 from "react";
 var NoPermission = ({ texts }) => {
-  return /* @__PURE__ */ React110.createElement(Card, null, /* @__PURE__ */ React110.createElement(CardContent, { headless: true }, /* @__PURE__ */ React110.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React110.createElement("div", { className: "flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground" }, /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React112.createElement(Card, null, /* @__PURE__ */ React112.createElement(CardContent, { headless: true }, /* @__PURE__ */ React112.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React112.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__ */ React112.createElement(
     "svg",
     {
       stroke: "currentColor",
@@ -10885,12 +11077,12 @@ var NoPermission = ({ texts }) => {
       height: "0.35em",
       width: "0.35em"
     },
-    /* @__PURE__ */ React110.createElement("path", { d: "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" })
-  ), " "), /* @__PURE__ */ React110.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.title ?? "You don't have permission"), /* @__PURE__ */ React110.createElement("div", null, texts?.subtitle ?? "If you think this is a problem please contact your administrator or our customer support"))));
+    /* @__PURE__ */ React112.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__ */ React112.createElement("div", { className: "m-2 text-xl font-bold" }, texts?.title ?? "You don't have permission"), /* @__PURE__ */ React112.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 useEffect27, useRef as useRef19, useState as useState51 } from "react";
+import { useEffect as useEffect29, useRef as useRef20, useState as useState53 } from "react";
 export {
   ActionCard,
   Announcement,
@@ -10997,6 +11189,7 @@ export {
   SignInPhone,
   SignUpForm,
   Skeleton,
+  StickyFeatures,
   SubsectionList,
   Switch,
   Tabs,
@@ -11018,6 +11211,7 @@ export {
   UsageCard,
   UserFeedback,
   UserProfileForm,
+  UserReferralSource,
   UserSettingsForm,
   buttonVariants,
   reducer,