@sikka/hawa 0.1.55 → 0.1.56

package/dist/index.mjs

@@ -1273,160 +1273,11 @@ var HawaAlert = ({
 };
 
 // src/elements/HawaTable.tsx
-import React23, { useEffect as useEffect8, useState as useState12 } from "react";
-import clsx13 from "clsx";
-
-// src/elements/HawaMenu.tsx
-import React21, { useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+import React23, { useEffect as useEffect7, useState as useState11 } from "react";
 import clsx12 from "clsx";
-var HawaMenu = ({
-  menuItems,
-  withHeader,
-  direction = "ltr",
-  headerTitle,
-  headerSubtitle,
-  size = "normal",
-  children,
-  onClickOutside,
-  actionedItem,
-  position = "top-right"
-}) => {
-  const [menuOpened, setMenuOpened] = useState10(false);
-  const childrenRef = useRef5(null);
-  const [childrenHeight, setChildrenHeight] = useState10(null);
-  const [childrenWidth, setChildrenWidth] = useState10(null);
-  const menuRef = useRef5(null);
-  const [menuWidth, setMenuWidth] = useState10(null);
-  const [menuHeight, setMenuHeight] = useState10(null);
-  useEffect6(() => {
-    setMenuHeight(menuRef.current?.getBoundingClientRect().height);
-    setMenuWidth(menuRef.current?.getBoundingClientRect().width);
-    setChildrenHeight(childrenRef.current?.getBoundingClientRect().height);
-    setChildrenWidth(childrenRef.current?.getBoundingClientRect().width);
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setMenuOpened(false);
-      }
-    };
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [onClickOutside]);
-  let defaultStyles = "border-none absolute ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded bg-gray-50 shadow-lg transition-all dark:bg-gray-700";
-  let sizeStyles2 = {
-    small: "text-[11px] p-1 px-4 m-0",
-    normal: "py-2 px-4",
-    large: ""
-  };
-  let menuCoordinates;
-  let spacing = 5;
-  switch (position) {
-    case "top-right":
-      menuCoordinates = direction === "rtl" ? `${menuWidth - childrenWidth}px, -${menuHeight + childrenHeight + spacing}px` : `0px, -${menuHeight + childrenHeight + spacing}px`;
-      break;
-    case "top-left":
-      menuCoordinates = direction === "rtl" ? `${0}px, -${menuHeight + childrenHeight + spacing}px` : `-${menuWidth - childrenWidth}px, -${menuHeight + childrenHeight + spacing}px`;
-      break;
-    case "bottom-right":
-      menuCoordinates = direction === "rtl" ? `-${0}px, ${spacing}px` : `-${childrenWidth - menuWidth}px, ${spacing}px`;
-      break;
-    case "bottom-left":
-      menuCoordinates = direction === "rtl" ? `0px, ${spacing}px` : `-${menuWidth - childrenWidth}px,${spacing}px`;
-      break;
-    case "right-bottom":
-      menuCoordinates = direction === "rtl" ? `${menuWidth + spacing}px, -${childrenHeight}px` : `${childrenWidth + spacing}px, -${childrenHeight}px`;
-      break;
-    case "right-top":
-      menuCoordinates = direction === "rtl" ? `${menuWidth + spacing}px, -${menuHeight}px` : `${childrenWidth + spacing}px, -${menuHeight}px`;
-      break;
-    case "left-bottom":
-      menuCoordinates = direction === "rtl" ? `-${childrenWidth + spacing}px, -${childrenHeight}px` : `-${menuWidth + spacing}px, -${childrenHeight}px`;
-      break;
-    case "left-top":
-      menuCoordinates = direction === "rtl" ? `-${childrenWidth + spacing}px, -${menuHeight}px` : `-${menuWidth + spacing}px, -${menuHeight}px`;
-      break;
-    default:
-      menuCoordinates = `-${menuWidth / 2}px, -${childrenHeight + menuHeight / 2}px`;
-      break;
-  }
-  return /* @__PURE__ */ React21.createElement(
-    "div",
-    {
-      onClick: () => {
-        if (menuOpened)
-          setMenuOpened(false);
-        else
-          setMenuOpened(true);
-      }
-    },
-    /* @__PURE__ */ React21.createElement("div", { ref: childrenRef }, children),
-    /* @__PURE__ */ React21.createElement(
-      "div",
-      {
-        ref: menuRef,
-        style: {
-          position: "absolute",
-          width: "max-content",
-          transform: `translate(${menuCoordinates})`,
-          maxWidth: "200px"
-        },
-        className: clsx12(
-          defaultStyles,
-          menuOpened ? "opacity-100" : "invisible opacity-0"
-        )
-      },
-      withHeader && /* @__PURE__ */ React21.createElement("div", { className: "px-4 py-3 text-xs text-gray-900 dark:text-white" }, /* @__PURE__ */ React21.createElement("div", null, headerTitle), /* @__PURE__ */ React21.createElement("div", { className: "truncate font-medium" }, headerSubtitle)),
-      menuItems?.map((group, o) => {
-        return /* @__PURE__ */ React21.createElement(
-          "ul",
-          {
-            key: o,
-            className: "bg-layout-1200 flex flex-col gap-1 p-1 text-gray-700 dark:text-gray-200"
-          },
-          group?.map((item, indx) => {
-            return item.element ? /* @__PURE__ */ React21.createElement(
-              "li",
-              {
-                key: indx,
-                className: "cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
-              },
-              item.element
-            ) : /* @__PURE__ */ React21.createElement(
-              "li",
-              {
-                key: indx,
-                onClick: () => {
-                  if (item.disabled) {
-                    console.log("button is disabled");
-                  } else {
-                    item?.action(actionedItem);
-                  }
-                },
-                className: clsx12(
-                  "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]
-                )
-              },
-              item.icon && /* @__PURE__ */ React21.createElement(
-                "div",
-                {
-                  className: size === "small" ? "mr-1 rtl:ml-1" : "mr-2 rtl:ml-2"
-                },
-                item.icon
-              ),
-              item.label
-            );
-          })
-        );
-      })
-    )
-  );
-};
 
 // src/hooks/useTable.ts
-import { useState as useState11, useEffect as useEffect7 } from "react";
+import { useState as useState10, useEffect as useEffect6 } from "react";
 var calculateRange = (data, rowsPerPage) => {
   const range = [];
   const num = Math.ceil(data?.length / rowsPerPage);
@@ -1462,9 +1313,9 @@ var sortData = (data, sortColumn, sortDirection) => {
   return data;
 };
 var useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
-  const [tableRange, setTableRange] = useState11([]);
-  const [slice, setSlice] = useState11([]);
-  useEffect7(() => {
+  const [tableRange, setTableRange] = useState10([]);
+  const [slice, setSlice] = useState10([]);
+  useEffect6(() => {
     if (data) {
       const range = calculateRange(data, rowsPerPage);
       setTableRange([...range]);
@@ -1475,9 +1326,245 @@ var useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
   }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);
   return { slice, range: tableRange };
 };
-var useTable_default = useTable;
+var useTable_default = useTable;
+
+// src/elements/DropdownMenu.tsx
+import * as React22 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+var DropdownMenuRoot = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuSubTrigger = React22.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React22.createElement("div", { className: "flex flex-row items-center gap-1" }, children),
+  " ",
+  /* @__PURE__ */ React22.createElement(
+    "svg",
+    {
+      "aria-label": "Chevron Right Icon",
+      stroke: "currentColor",
+      fill: "currentColor",
+      "stroke-width": "0",
+      viewBox: "0 0 16 16",
+      height: "1em",
+      width: "1em",
+      className: cn(props.dir === "rtl" ? "rotate-180" : "")
+    },
+    /* @__PURE__ */ React22.createElement(
+      "path",
+      {
+        "fill-rule": "evenodd",
+        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"
+      }
+    )
+  )
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React22.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React22.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+)));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React22.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React22.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props
+  },
+  /* @__PURE__ */ React22.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React22.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React22.createElement(
+    "svg",
+    {
+      "aria-label": "Check Mark",
+      stroke: "currentColor",
+      fill: "currentColor",
+      "stroke-width": "0",
+      viewBox: "0 0 512 512",
+      height: "0.60em",
+      width: "0.60em"
+    },
+    /* @__PURE__ */ React22.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" })
+  ), " ")),
+  children
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React22.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React22.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React22.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      "aria-label": "Circle",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "h-2 w-2 fill-current"
+    },
+    /* @__PURE__ */ React22.createElement("circle", { cx: "12", cy: "12", r: "10" })
+  ))),
+  children
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React22.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React22.createElement(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var DropdownMenu = ({
+  trigger,
+  items,
+  direction,
+  onItemSelect,
+  sideOffset,
+  side,
+  className,
+  triggerClassname,
+  align,
+  alignOffset
+}) => {
+  return /* @__PURE__ */ React22.createElement(DropdownMenuRoot, { dir: direction }, /* @__PURE__ */ React22.createElement(DropdownMenuTrigger, { className: triggerClassname }, trigger), /* @__PURE__ */ React22.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React22.createElement(
+    DropdownMenuContent,
+    {
+      side,
+      sideOffset,
+      className: cn(className, "flex flex-col gap-1"),
+      align,
+      alignOffset
+    },
+    items.map((item, index) => {
+      return item.subitems ? /* @__PURE__ */ React22.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React22.createElement(DropdownMenuSubTrigger, { dir: direction }, item.icon && item.icon, item.label), /* @__PURE__ */ React22.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React22.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React22.createElement(
+        DropdownMenuItem,
+        {
+          className: "flex flex-row gap-1",
+          onSelect: () => subitem.action(),
+          key: subIndex
+        },
+        subitem.icon && subitem.icon,
+        subitem.label
+      ))))) : /* @__PURE__ */ React22.createElement(
+        DropdownMenuItem,
+        {
+          className: "flex flex-row gap-1",
+          key: index,
+          onSelect: () => item.action()
+        },
+        item.icon && item.icon,
+        item.label
+      );
+    })
+  )));
+};
 
 // src/elements/HawaTable.tsx
+var ChevronIcon = () => /* @__PURE__ */ React23.createElement(
+  "svg",
+  {
+    "aria-label": "Chevron Right Icon",
+    stroke: "currentColor",
+    fill: "currentColor",
+    "stroke-width": "0",
+    viewBox: "0 0 16 16",
+    height: "1em",
+    width: "1em"
+  },
+  /* @__PURE__ */ React23.createElement(
+    "path",
+    {
+      "fill-rule": "evenodd",
+      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"
+    }
+  )
+);
 var HawaTable = ({
   size = "normal",
   bodyColor = "white",
@@ -1489,21 +1576,13 @@ var HawaTable = ({
   pagination = true,
   ...props
 }) => {
-  const [perPage, setPerPage] = useState12(10);
-  const [enteredPage, setEnteredPage] = useState12(null);
-  const [page, setPage] = useState12(1);
-  const [sortingCol, setSortingCol] = useState12(null);
-  const [sortedRows, setSortedRows] = useState12(props.rows);
-  const [sortColumn, setSortColumn] = useState12(null);
-  const [sortDirection, setSortDirection] = useState12(null);
-  const handleSort = (colIndex, sortable) => {
-    if (sortable) {
-      setSortColumn(colIndex);
-      setSortDirection(
-        (prevDirection) => prevDirection === "asc" ? "desc" : "asc"
-      );
-    }
-  };
+  const [perPage, setPerPage] = useState11(10);
+  const [enteredPage, setEnteredPage] = useState11(null);
+  const [page, setPage] = useState11(1);
+  const [sortingCol, setSortingCol] = useState11(null);
+  const [sortedRows, setSortedRows] = useState11(props.rows);
+  const [sortColumn, setSortColumn] = useState11(null);
+  const [sortDirection, setSortDirection] = useState11(null);
   const { slice, range } = useTable_default(
     props.rows,
     page,
@@ -1516,6 +1595,14 @@ var HawaTable = ({
     normal: "py-3 px-6",
     small: "px-3 py-1"
   };
+  const handleSort = (colIndex, sortable) => {
+    if (sortable) {
+      setSortColumn(colIndex);
+      setSortDirection(
+        (prevDirection) => prevDirection === "asc" ? "desc" : "asc"
+      );
+    }
+  };
   const changePage = () => {
     if (slice?.length < 1 && page !== 1) {
       setPage(page - 1);
@@ -1524,7 +1611,7 @@ var HawaTable = ({
       setPage(enteredPage);
     }
   };
-  useEffect8(() => {
+  useEffect7(() => {
     changePage();
   }, [slice, page]);
   return /* @__PURE__ */ React23.createElement("div", { className: "relative flex flex-col gap-2 " }, /* @__PURE__ */ React23.createElement("div", { className: `overflow-x-auto rounded  bg-${headerColor}` }, props.headerTools && /* @__PURE__ */ React23.createElement("div", { className: "flex flex-row items-center justify-between gap-2 border bg-background px-4  py-2" }, /* @__PURE__ */ React23.createElement(
@@ -1547,47 +1634,40 @@ var HawaTable = ({
       width: "full",
       margin: "none"
     }
-  ), /* @__PURE__ */ React23.createElement("div", { className: "flex flex-row items-center justify-between gap-2" }, /* @__PURE__ */ React23.createElement(
-    HawaButton,
+  ), /* @__PURE__ */ React23.createElement("div", { className: "flex flex-row items-center justify-between gap-2" }, /* @__PURE__ */ React23.createElement(Button, { className: "flex flex-row gap-2" }, /* @__PURE__ */ React23.createElement(
+    "svg",
     {
-      startIcon: /* @__PURE__ */ React23.createElement(
-        "svg",
-        {
-          "aria-label": "Filter Icon",
-          stroke: "currentColor",
-          fill: "currentColor",
-          "stroke-width": "0",
-          viewBox: "0 0 16 16",
-          height: "1em",
-          width: "1em"
-        },
-        /* @__PURE__ */ React23.createElement("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z" })
-      ),
-      endIcon: /* @__PURE__ */ React23.createElement(
-        "svg",
-        {
-          "aria-label": "Chevron Right Icon",
-          stroke: "currentColor",
-          fill: "currentColor",
-          "stroke-width": "0",
-          viewBox: "0 0 16 16",
-          height: "1em",
-          width: "1em"
-        },
-        /* @__PURE__ */ React23.createElement(
-          "path",
-          {
-            "fill-rule": "evenodd",
-            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"
-          }
-        )
-      )
+      "aria-label": "Filter Icon",
+      stroke: "currentColor",
+      fill: "currentColor",
+      "stroke-width": "0",
+      viewBox: "0 0 16 16",
+      height: "1em",
+      width: "1em"
+    },
+    /* @__PURE__ */ React23.createElement("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z" })
+  ), props.texts?.filter ?? "Filter", /* @__PURE__ */ React23.createElement(
+    "svg",
+    {
+      "aria-label": "Chevron Right Icon",
+      stroke: "currentColor",
+      fill: "currentColor",
+      "stroke-width": "0",
+      viewBox: "0 0 16 16",
+      height: "1em",
+      width: "1em"
     },
-    props.texts?.filter ?? "Filter"
-  ))), /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React23.createElement(
+      "path",
+      {
+        "fill-rule": "evenodd",
+        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"
+      }
+    )
+  )))), /* @__PURE__ */ React23.createElement(
     "table",
     {
-      className: clsx13(
+      className: clsx12(
         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}`
@@ -1596,7 +1676,7 @@ var HawaTable = ({
     /* @__PURE__ */ React23.createElement(
       "thead",
       {
-        className: clsx13(
+        className: clsx12(
           "text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400",
           borders === "rows" || borders === "all" || borders === "inner" ? "border-b " : ""
         )
@@ -1612,7 +1692,7 @@ var HawaTable = ({
               key: i,
               scope: "col",
               colSpan: 2,
-              className: clsx13(
+              className: clsx12(
                 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]` : ""
@@ -1626,7 +1706,7 @@ var HawaTable = ({
         "th",
         {
           scope: "col",
-          className: clsx13(sizeStyles2[size], "w-[calc(1%)] text-center")
+          className: clsx12(sizeStyles2[size], "w-[calc(1%)] text-center")
         },
         props.texts?.actions ?? "Actions"
       ) : null)
@@ -1642,7 +1722,7 @@ var HawaTable = ({
           "tr",
           {
             key: rowIndex,
-            className: clsx13(
+            className: clsx12(
               " 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]` : ""
@@ -1663,7 +1743,7 @@ var HawaTable = ({
                 {
                   colSpan: 2,
                   key: i,
-                  className: clsx13(
+                  className: clsx12(
                     // borders === "outer" ? "border" : "",
                     sizeStyles2[size],
                     highlightFirst && firstCell ? "font-bold" : "font-normal",
@@ -1678,46 +1758,43 @@ var HawaTable = ({
               );
             }
           }),
-          props.actions ? size !== "small" ? /* @__PURE__ */ React23.createElement(
+          props.actions && /* @__PURE__ */ React23.createElement(
             "td",
             {
               align: isRTL ? "right" : "left",
-              className: clsx13(
-                isRTL && lastRow ? "rounded-bl rounded-br-none" : "",
-                !isRTL && lastRow ? "rounded-bl-none rounded-br" : ""
-                // "w-fit bg-red-400"
+              className: cn(
+                isRTL && lastRow && "rounded-bl rounded-br-none",
+                !isRTL && lastRow && "rounded-bl-none rounded-br"
               ),
               colSpan: 1
             },
             /* @__PURE__ */ React23.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React23.createElement(
-              HawaMenu,
+              DropdownMenu,
               {
-                size: "small",
-                actionedItem: [rowIndex, singleRow],
-                menuItems: props.actions,
-                position: direction === "rtl" ? "right-bottom" : "left-bottom",
-                direction
-              },
-              /* @__PURE__ */ React23.createElement("div", { className: "flex w-fit  cursor-pointer items-center justify-center rounded  p-2 hover:bg-gray-200 dark:hover:bg-gray-600" }, /* @__PURE__ */ React23.createElement(
-                "svg",
-                {
-                  "aria-label": "Vertical Three Dots Menu Icon",
-                  stroke: "currentColor",
-                  fill: "currentColor",
-                  "stroke-width": "0",
-                  viewBox: "0 0 16 16",
-                  height: "1em",
-                  width: "1em"
-                },
-                /* @__PURE__ */ React23.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" })
-              ))
+                direction,
+                side: "right",
+                items: props.actions,
+                trigger: /* @__PURE__ */ React23.createElement("div", { className: "flex w-fit  cursor-pointer items-center justify-center rounded  p-2 hover:bg-gray-200 dark:hover:bg-gray-600" }, /* @__PURE__ */ React23.createElement(
+                  "svg",
+                  {
+                    "aria-label": "Vertical Three Dots Menu Icon",
+                    stroke: "currentColor",
+                    fill: "currentColor",
+                    "stroke-width": "0",
+                    viewBox: "0 0 16 16",
+                    height: "1em",
+                    width: "1em"
+                  },
+                  /* @__PURE__ */ React23.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__ */ React23.createElement("div", { className: "flex flex-row  items-center justify-center gap-2 p-1" }, props.actions[0].map((act) => /* @__PURE__ */ React23.createElement("div", { className: " p-1 transition-all hover:bg-gray-100" }, act.icon))) : null
+          )
         );
       }) : /* @__PURE__ */ React23.createElement("tr", { className: "bg-transparent" }, /* @__PURE__ */ React23.createElement("td", { colSpan: 20 }, /* @__PURE__ */ React23.createElement(
         "div",
         {
-          className: clsx13(
+          className: clsx12(
             "w-full rounded-b  border p-5 text-center",
             // bodyColor ? `bg-${bodyColor}` : "bg-background"
             "bg-background"
@@ -1729,39 +1806,22 @@ var HawaTable = ({
   )), pagination && /* @__PURE__ */ React23.createElement("div", { className: "flex flex-row items-center justify-between " }, range.length > 1 ? /* @__PURE__ */ React23.createElement("div", { className: "flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded " }, /* @__PURE__ */ React23.createElement(
     "div",
     {
-      className: clsx13(
-        "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+      className: cn(
+        "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-background p-1 text-xs hover:bg-primary/10 dark:hover:bg-primary/10",
+        direction === "rtl" && "rotate-0"
       ),
       onClick: () => page <= 1 ? setPage(range.length) : setPage(page - 1)
     },
-    /* @__PURE__ */ React23.createElement(
-      "svg",
-      {
-        "aria-label": "Chevron Right Icon",
-        stroke: "currentColor",
-        fill: "currentColor",
-        "stroke-width": "0",
-        viewBox: "0 0 16 16",
-        height: "1em",
-        width: "1em"
-      },
-      /* @__PURE__ */ React23.createElement(
-        "path",
-        {
-          "fill-rule": "evenodd",
-          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"
-        }
-      )
-    )
+    /* @__PURE__ */ React23.createElement(ChevronIcon, null)
   ), /* @__PURE__ */ React23.createElement("div", { className: "flex flex-row items-center  overflow-clip rounded  transition-all" }, range.length > 6 && range.map((el, index) => {
     if (index <= 0) {
       return /* @__PURE__ */ React23.createElement(
         "button",
         {
           key: index,
-          className: clsx13(
+          className: clsx12(
             "w-10 p-1 text-xs hover:bg-gray-200",
-            page === el ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500" : "bg-gray-100"
+            page === el ? "bg-primary text-primary-foreground hover:bg-primary" : "bg-gray-100"
           ),
           onClick: () => setPage(el)
         },
@@ -1789,9 +1849,9 @@ var HawaTable = ({
         "button",
         {
           key: index,
-          className: clsx13(
+          className: clsx12(
             "w-10 p-1 text-xs hover:bg-gray-200",
-            page === el ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500" : "bg-gray-100"
+            page === el ? "bg-primary text-primary-foreground hover:bg-primary" : "bg-gray-100"
           ),
           onClick: () => setPage(el)
         },
@@ -1803,11 +1863,20 @@ var HawaTable = ({
       "button",
       {
         key: index,
-        className: clsx13(
-          "w-10 p-1 text-xs  hover:bg-gray-200 dark:hover:bg-gray-700",
-          page === el ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500" : "border bg-background",
-          index === 0 ? "rounded-l border-r-0" : "",
-          index === range.length - 1 ? "rounded-r border-l-0" : ""
+        className: clsx12(
+          "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'
+          direction === "rtl" ? (
+            // If direction is 'rtl', then check for the index conditions
+            // and apply respective classes along with the 'something' class
+            index === 0 ? "rounded-r border-l-0" : index === range.length - 1 ? "rounded-l border-r-0" : ""
+          ) : (
+            // If direction is not 'rtl', then again check for the index conditions
+            // and apply respective classes along with the 'something else' class
+            index === 0 ? "rounded-l border-r-0" : index === range.length - 1 ? "rounded-r border-l-0" : ""
+          )
+          // Apply if index is other than 0 or last element and direction is not 'rtl'
         ),
         onClick: () => setPage(el)
       },
@@ -1817,29 +1886,12 @@ var HawaTable = ({
     "div",
     {
       onClick: () => page >= range.length ? setPage(1) : setPage(page + 1),
-      className: clsx13(
-        "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+      className: cn(
+        "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-background p-1 text-xs hover:bg-primary/10 dark:hover:bg-primary/10",
+        direction === "rtl" && "rotate-180"
       )
     },
-    /* @__PURE__ */ React23.createElement(
-      "svg",
-      {
-        "aria-label": "Chevron Right Icon",
-        stroke: "currentColor",
-        fill: "currentColor",
-        "stroke-width": "0",
-        viewBox: "0 0 16 16",
-        height: "1em",
-        width: "1em"
-      },
-      /* @__PURE__ */ React23.createElement(
-        "path",
-        {
-          "fill-rule": "evenodd",
-          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"
-        }
-      )
-    )
+    /* @__PURE__ */ React23.createElement(ChevronIcon, null)
   )) : /* @__PURE__ */ React23.createElement("div", null), props.rows ? /* @__PURE__ */ React23.createElement("div", { className: "flex w-fit flex-row items-center gap-2  " }, /* @__PURE__ */ React23.createElement("div", { className: "text-xs " }, props.rows.length, " ", props.texts?.items ?? "Items"), /* @__PURE__ */ React23.createElement(
     "select",
     {
@@ -1864,16 +1916,16 @@ var HawaSearchBar = (props) => {
 };
 
 // src/elements/HawaAccordion.tsx
-import React25, { useState as useState13 } from "react";
-import clsx14 from "clsx";
+import React25, { useState as useState12 } from "react";
+import clsx13 from "clsx";
 var HawaAccordion = (props) => {
-  const [collapse, setCollapse] = useState13(false);
+  const [collapse, setCollapse] = useState12(false);
   return /* @__PURE__ */ React25.createElement("div", { className: "h-fit w-full" }, /* @__PURE__ */ React25.createElement(
     "button",
     {
       id: "accordion-collapse-heading-" + props.index,
       type: "button",
-      className: clsx14(
+      className: clsx13(
         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"
       ),
@@ -1905,7 +1957,7 @@ var HawaAccordion = (props) => {
     {
       id: "accordion-collapse-body-" + props.index,
       "aria-labelledby": "accordion-collapse-heading-" + props.index,
-      className: clsx14(
+      className: clsx13(
         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"
       )
@@ -1915,7 +1967,7 @@ var HawaAccordion = (props) => {
 };
 
 // src/elements/HawaPhoneInput.tsx
-import React26, { useState as useState14 } from "react";
+import React26, { useState as useState13 } from "react";
 
 // src/countries.ts
 var countries = [
@@ -3648,7 +3700,7 @@ var Option2 = ({
   children
 );
 var HawaPhoneInput = (props) => {
-  const [selectedCountry, setSelectedCountry] = useState14("+966");
+  const [selectedCountry, setSelectedCountry] = useState13("+966");
   return /* @__PURE__ */ React26.createElement("div", { className: "mb-3 flex flex-col" }, props.label && /* @__PURE__ */ React26.createElement("label", { className: "mb-2 block text-sm font-medium" }, props.label), /* @__PURE__ */ React26.createElement("div", { dir: "ltr", className: "flex flex-row " }, /* @__PURE__ */ React26.createElement(
     Select2,
     {
@@ -3732,7 +3784,7 @@ var HawaPhoneInput = (props) => {
 };
 
 // src/elements/HawaTabs.tsx
-import React27, { useState as useState15 } from "react";
+import React27, { useState as useState14 } from "react";
 var HawaTabs = ({
   orientation = "horizontal",
   direction = "ltr",
@@ -3741,7 +3793,7 @@ var HawaTabs = ({
   pill = false,
   ...props
 }) => {
-  const [selectedOption, setSelectedOption] = useState15(props.options[0]?.value);
+  const [selectedOption, setSelectedOption] = useState14(props.options[0]?.value);
   let activeTabStyle = {
     vertical: "inline-block py-2 px-4 text-white bg-primary active",
     horizontal: "inline-block py-2 px-4 text-white bg-primary active"
@@ -3837,8 +3889,8 @@ var HawaTabs = ({
 };
 
 // src/elements/HawaModal.tsx
-import React28, { useEffect as useEffect9 } from "react";
-import clsx15 from "clsx";
+import React28, { useEffect as useEffect8 } from "react";
+import clsx14 from "clsx";
 var HawaModal = ({
   open,
   title,
@@ -3847,7 +3899,7 @@ var HawaModal = ({
   ...props
 }) => {
   let defaultStyle = "absolute top-1/2 left-1/2 w-full h-screen flex flex-col justify-center items-center -translate-x-1/2 -translate-y-1/2 transition-all";
-  useEffect9(() => {
+  useEffect8(() => {
     if (closeOnClickOutside && open) {
       window.onclick = (e) => {
         e.stopPropagation();
@@ -3859,7 +3911,7 @@ var HawaModal = ({
   return /* @__PURE__ */ React28.createElement(
     "div",
     {
-      className: clsx15(
+      className: clsx14(
         defaultStyle,
         open ? "z-10  opacity-100 " : "invisible -z-10 opacity-0"
       )
@@ -3867,7 +3919,7 @@ var HawaModal = ({
     /* @__PURE__ */ React28.createElement(
       "div",
       {
-        className: clsx15(
+        className: clsx14(
           "absolute h-screen w-full bg-gray-500 opacity-50",
           open ? "opacity-50" : "opacity-0"
         )
@@ -3905,13 +3957,162 @@ var HawaModal = ({
   );
 };
 
+// src/elements/HawaMenu.tsx
+import React29, { useEffect as useEffect9, useRef as useRef5, useState as useState15 } from "react";
+import clsx15 from "clsx";
+var HawaMenu = ({
+  menuItems,
+  withHeader,
+  direction = "ltr",
+  headerTitle,
+  headerSubtitle,
+  size = "normal",
+  children,
+  onClickOutside,
+  actionedItem,
+  position = "top-right"
+}) => {
+  const [menuOpened, setMenuOpened] = useState15(false);
+  const childrenRef = useRef5(null);
+  const [childrenHeight, setChildrenHeight] = useState15(null);
+  const [childrenWidth, setChildrenWidth] = useState15(null);
+  const menuRef = useRef5(null);
+  const [menuWidth, setMenuWidth] = useState15(null);
+  const [menuHeight, setMenuHeight] = useState15(null);
+  useEffect9(() => {
+    setMenuHeight(menuRef.current?.getBoundingClientRect().height);
+    setMenuWidth(menuRef.current?.getBoundingClientRect().width);
+    setChildrenHeight(childrenRef.current?.getBoundingClientRect().height);
+    setChildrenWidth(childrenRef.current?.getBoundingClientRect().width);
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setMenuOpened(false);
+      }
+    };
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [onClickOutside]);
+  let defaultStyles = "border-none absolute ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded bg-gray-50 shadow-lg transition-all dark:bg-gray-700";
+  let sizeStyles2 = {
+    small: "text-[11px] p-1 px-4 m-0",
+    normal: "py-2 px-4",
+    large: ""
+  };
+  let menuCoordinates;
+  let spacing = 5;
+  switch (position) {
+    case "top-right":
+      menuCoordinates = direction === "rtl" ? `${menuWidth - childrenWidth}px, -${menuHeight + childrenHeight + spacing}px` : `0px, -${menuHeight + childrenHeight + spacing}px`;
+      break;
+    case "top-left":
+      menuCoordinates = direction === "rtl" ? `${0}px, -${menuHeight + childrenHeight + spacing}px` : `-${menuWidth - childrenWidth}px, -${menuHeight + childrenHeight + spacing}px`;
+      break;
+    case "bottom-right":
+      menuCoordinates = direction === "rtl" ? `-${0}px, ${spacing}px` : `-${childrenWidth - menuWidth}px, ${spacing}px`;
+      break;
+    case "bottom-left":
+      menuCoordinates = direction === "rtl" ? `0px, ${spacing}px` : `-${menuWidth - childrenWidth}px,${spacing}px`;
+      break;
+    case "right-bottom":
+      menuCoordinates = direction === "rtl" ? `${menuWidth + spacing}px, -${childrenHeight}px` : `${childrenWidth + spacing}px, -${childrenHeight}px`;
+      break;
+    case "right-top":
+      menuCoordinates = direction === "rtl" ? `${menuWidth + spacing}px, -${menuHeight}px` : `${childrenWidth + spacing}px, -${menuHeight}px`;
+      break;
+    case "left-bottom":
+      menuCoordinates = direction === "rtl" ? `-${childrenWidth + spacing}px, -${childrenHeight}px` : `-${menuWidth + spacing}px, -${childrenHeight}px`;
+      break;
+    case "left-top":
+      menuCoordinates = direction === "rtl" ? `-${childrenWidth + spacing}px, -${menuHeight}px` : `-${menuWidth + spacing}px, -${menuHeight}px`;
+      break;
+    default:
+      menuCoordinates = `-${menuWidth / 2}px, -${childrenHeight + menuHeight / 2}px`;
+      break;
+  }
+  return /* @__PURE__ */ React29.createElement(
+    "div",
+    {
+      onClick: () => {
+        if (menuOpened)
+          setMenuOpened(false);
+        else
+          setMenuOpened(true);
+      }
+    },
+    /* @__PURE__ */ React29.createElement("div", { ref: childrenRef }, children),
+    /* @__PURE__ */ React29.createElement(
+      "div",
+      {
+        ref: menuRef,
+        style: {
+          position: "absolute",
+          width: "max-content",
+          transform: `translate(${menuCoordinates})`,
+          maxWidth: "200px"
+        },
+        className: clsx15(
+          defaultStyles,
+          menuOpened ? "opacity-100" : "invisible opacity-0"
+        )
+      },
+      withHeader && /* @__PURE__ */ React29.createElement("div", { className: "px-4 py-3 text-xs text-gray-900 dark:text-white" }, /* @__PURE__ */ React29.createElement("div", null, headerTitle), /* @__PURE__ */ React29.createElement("div", { className: "truncate font-medium" }, headerSubtitle)),
+      menuItems?.map((group, o) => {
+        return /* @__PURE__ */ React29.createElement(
+          "ul",
+          {
+            key: o,
+            className: "bg-layout-1200 flex flex-col gap-1 p-1 text-gray-700 dark:text-gray-200"
+          },
+          group?.map((item, indx) => {
+            return item.element ? /* @__PURE__ */ React29.createElement(
+              "li",
+              {
+                key: indx,
+                className: "cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+              },
+              item.element
+            ) : /* @__PURE__ */ React29.createElement(
+              "li",
+              {
+                key: indx,
+                onClick: () => {
+                  if (item.disabled) {
+                    console.log("button is disabled");
+                  } else {
+                    item?.action(actionedItem);
+                  }
+                },
+                className: clsx15(
+                  "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]
+                )
+              },
+              item.icon && /* @__PURE__ */ React29.createElement(
+                "div",
+                {
+                  className: size === "small" ? "mr-1 rtl:ml-1" : "mr-2 rtl:ml-2"
+                },
+                item.icon
+              ),
+              item.label
+            );
+          })
+        );
+      })
+    )
+  );
+};
+
 // src/elements/HawaDropdownMenu.tsx
-import React29 from "react";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import React30 from "react";
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 var HawaDropdownMenu = ({ children, direction }) => {
-  const [bookmarksChecked, setBookmarksChecked] = React29.useState(true);
-  const [urlsChecked, setUrlsChecked] = React29.useState(false);
-  const [person, setPerson] = React29.useState("pedro");
+  const [bookmarksChecked, setBookmarksChecked] = React30.useState(true);
+  const [urlsChecked, setUrlsChecked] = React30.useState(false);
+  const [person, setPerson] = React30.useState("pedro");
   let dropdownData = {
     items: [
       {
@@ -3948,34 +4149,34 @@ var HawaDropdownMenu = ({ children, direction }) => {
       }
     ]
   };
-  return /* @__PURE__ */ React29.createElement(DropdownMenu.Root, { dir: direction }, /* @__PURE__ */ React29.createElement(DropdownMenu.Trigger, { asChild: true }, children), /* @__PURE__ */ React29.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React29.createElement(
-    DropdownMenu.Content,
+  return /* @__PURE__ */ React30.createElement(DropdownMenu2.Root, { dir: direction }, /* @__PURE__ */ React30.createElement(DropdownMenu2.Trigger, { asChild: true }, children), /* @__PURE__ */ React30.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React30.createElement(
+    DropdownMenu2.Content,
     {
       className: "min-w-[220px] rounded bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade",
       sideOffset: 5
     },
-    dropdownData.items.map((it, i) => /* @__PURE__ */ React29.createElement(
-      DropdownMenu.Item,
+    dropdownData.items.map((it, i) => /* @__PURE__ */ React30.createElement(
+      DropdownMenu2.Item,
       {
         key: i,
         className: "group relative flex h-[25px] select-none items-center justify-between \n         rounded-inner  px-[5px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8\n          data-[highlighted]:text-violet-1 ",
         disabled: it.disabled
       },
       it.label,
-      /* @__PURE__ */ React29.createElement("div", { className: " text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white" }, it.shortcut)
+      /* @__PURE__ */ React30.createElement("div", { className: " text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white" }, it.shortcut)
     )),
-    /* @__PURE__ */ React29.createElement(DropdownMenu.Sub, null, /* @__PURE__ */ React29.createElement(
-      DropdownMenu.SubTrigger,
+    /* @__PURE__ */ React30.createElement(DropdownMenu2.Sub, null, /* @__PURE__ */ React30.createElement(
+      DropdownMenu2.SubTrigger,
       {
         className: " group relative flex h-[25px] select-none  \n            items-center rounded-inner  justify-between flex-row\n            px-[5px] text-[13px] leading-none text-violet-11\n             outline-none data-[disabled]:pointer-events-none\n              data-[highlighted]:bg-violet-9 data-[highlighted]:data-[state=open]:bg-violet-9\n               data-[state=open]:bg-violet-4 data-[disabled]:text-mauve-8 data-[highlighted]:data-[state=open]:text-violet-1\n                data-[highlighted]:text-violet-1 data-[state=open]:text-violet-11 ltr:pl-[25px] rtl:pl-[0px]  "
       },
       "More Tools",
-      /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(
         "div",
         {
           className: "ltr:ml-auto rtl:pr-[5px]  ltr:pl-[0px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white\n               rtl:mr-auto rtl:rotate-180 rtl:pl-[0px]"
         },
-        /* @__PURE__ */ React29.createElement(
+        /* @__PURE__ */ React30.createElement(
           "svg",
           {
             "aria-label": "Chevron Right Icon",
@@ -3986,7 +4187,7 @@ var HawaDropdownMenu = ({ children, direction }) => {
             height: "1em",
             width: "1em"
           },
-          /* @__PURE__ */ React29.createElement(
+          /* @__PURE__ */ React30.createElement(
             "path",
             {
               "fill-rule": "evenodd",
@@ -3995,29 +4196,29 @@ var HawaDropdownMenu = ({ children, direction }) => {
           )
         )
       )
-    ), /* @__PURE__ */ React29.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React29.createElement(
-      DropdownMenu.SubContent,
+    ), /* @__PURE__ */ React30.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React30.createElement(
+      DropdownMenu2.SubContent,
       {
         className: "min-w-[220px] rounded-inner bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade",
         sideOffset: 2,
         alignOffset: -5
       },
-      /* @__PURE__ */ React29.createElement(DropdownMenu.Item, { className: "group relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Save Page As\u2026", " ", /* @__PURE__ */ React29.createElement("div", { className: "ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white" }, "\u2318+S")),
-      /* @__PURE__ */ React29.createElement(DropdownMenu.Item, { className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Create Shortcut\u2026"),
-      /* @__PURE__ */ React29.createElement(DropdownMenu.Item, { className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Name Window\u2026"),
-      /* @__PURE__ */ React29.createElement(DropdownMenu.Separator, { className: "m-[5px] h-[1px] bg-violet-6" }),
-      /* @__PURE__ */ React29.createElement(DropdownMenu.Item, { className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Developer Tools")
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.Item, { className: "group relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Save Page As\u2026", " ", /* @__PURE__ */ React30.createElement("div", { className: "ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white" }, "\u2318+S")),
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.Item, { className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Create Shortcut\u2026"),
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.Item, { className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Name Window\u2026"),
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.Separator, { className: "m-[5px] h-[1px] bg-violet-6" }),
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.Item, { className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1" }, "Developer Tools")
     ))),
-    /* @__PURE__ */ React29.createElement(DropdownMenu.Separator, { className: "m-[5px] h-[1px] bg-violet-6" }),
-    dropdownData.checkboxes.map((ch, i) => /* @__PURE__ */ React29.createElement(
-      DropdownMenu.CheckboxItem,
+    /* @__PURE__ */ React30.createElement(DropdownMenu2.Separator, { className: "m-[5px] h-[1px] bg-violet-6" }),
+    dropdownData.checkboxes.map((ch, i) => /* @__PURE__ */ React30.createElement(
+      DropdownMenu2.CheckboxItem,
       {
         key: i,
         className: "group relative flex h-[25px] select-none items-center\n             justify-between rounded-inner px-[5px] text-[13px] leading-none text-violet-11\n              outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8\n               data-[highlighted]:text-violet-1",
         checked: bookmarksChecked,
         onCheckedChange: setBookmarksChecked
       },
-      /* @__PURE__ */ React29.createElement(DropdownMenu.ItemIndicator, { className: "absolute inline-flex w-[25px] items-center justify-center  ltr:left-0 rtl:right-0" }, /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.ItemIndicator, { className: "absolute inline-flex w-[25px] items-center justify-center  ltr:left-0 rtl:right-0" }, /* @__PURE__ */ React30.createElement(
         "svg",
         {
           "aria-label": "Check Mark",
@@ -4028,20 +4229,20 @@ var HawaDropdownMenu = ({ children, direction }) => {
           height: "0.60em",
           width: "0.60em"
         },
-        /* @__PURE__ */ React29.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__ */ React30.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" })
       ), " "),
       ch.label,
-      /* @__PURE__ */ React29.createElement("div", { className: " text-mauve-11  group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white" }, ch.shortcut)
+      /* @__PURE__ */ React30.createElement("div", { className: " text-mauve-11  group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white" }, ch.shortcut)
     )),
-    /* @__PURE__ */ React29.createElement(DropdownMenu.Separator, { className: "m-[5px] h-[1px] bg-violet-6" }),
-    /* @__PURE__ */ React29.createElement(DropdownMenu.Label, { className: "pl-[25px] text-xs leading-[25px] text-mauve-11" }, "People"),
-    /* @__PURE__ */ React29.createElement(DropdownMenu.RadioGroup, { value: person, onValueChange: setPerson }, /* @__PURE__ */ React29.createElement(
-      DropdownMenu.RadioItem,
+    /* @__PURE__ */ React30.createElement(DropdownMenu2.Separator, { className: "m-[5px] h-[1px] bg-violet-6" }),
+    /* @__PURE__ */ React30.createElement(DropdownMenu2.Label, { className: "pl-[25px] text-xs leading-[25px] text-mauve-11" }, "People"),
+    /* @__PURE__ */ React30.createElement(DropdownMenu2.RadioGroup, { value: person, onValueChange: setPerson }, /* @__PURE__ */ React30.createElement(
+      DropdownMenu2.RadioItem,
       {
         className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1",
         value: "pedro"
       },
-      /* @__PURE__ */ React29.createElement(DropdownMenu.ItemIndicator, { className: "absolute left-0 inline-flex w-[25px] items-center justify-center" }, /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.ItemIndicator, { className: "absolute left-0 inline-flex w-[25px] items-center justify-center" }, /* @__PURE__ */ React30.createElement(
         "svg",
         {
           "aria-label": "Filled Dot",
@@ -4050,7 +4251,7 @@ var HawaDropdownMenu = ({ children, direction }) => {
           viewBox: "0 0 15 15",
           fill: "none"
         },
-        /* @__PURE__ */ React29.createElement(
+        /* @__PURE__ */ React30.createElement(
           "path",
           {
             d: "M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z",
@@ -4059,13 +4260,13 @@ var HawaDropdownMenu = ({ children, direction }) => {
         )
       ), " "),
       "Pedro Duarte"
-    ), /* @__PURE__ */ React29.createElement(
-      DropdownMenu.RadioItem,
+    ), /* @__PURE__ */ React30.createElement(
+      DropdownMenu2.RadioItem,
       {
         className: "relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1",
         value: "colm"
       },
-      /* @__PURE__ */ React29.createElement(DropdownMenu.ItemIndicator, { className: "absolute left-0 inline-flex w-[25px] items-center justify-center" }, /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(DropdownMenu2.ItemIndicator, { className: "absolute left-0 inline-flex w-[25px] items-center justify-center" }, /* @__PURE__ */ React30.createElement(
         "svg",
         {
           "aria-label": "Filled Dot",
@@ -4074,7 +4275,7 @@ var HawaDropdownMenu = ({ children, direction }) => {
           viewBox: "0 0 15 15",
           fill: "none"
         },
-        /* @__PURE__ */ React29.createElement(
+        /* @__PURE__ */ React30.createElement(
           "path",
           {
             d: "M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z",
@@ -4084,18 +4285,18 @@ var HawaDropdownMenu = ({ children, direction }) => {
       ), " "),
       "Colm Tuite"
     )),
-    /* @__PURE__ */ React29.createElement(DropdownMenu.Arrow, { className: "fill-white" })
+    /* @__PURE__ */ React30.createElement(DropdownMenu2.Arrow, { className: "fill-white" })
   )));
 };
 
 // src/elements/HawaCopyrights.tsx
-import React30 from "react";
+import React31 from "react";
 var HawaCopyrights = (props) => {
-  return /* @__PURE__ */ React30.createElement("div", { className: "my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400" }, props.withLogo ? /* @__PURE__ */ React30.createElement("a", { href: props.onLogoClicked }, /* @__PURE__ */ React30.createElement("div", { className: "cursor-pointer" }, /* @__PURE__ */ React30.createElement("image", { href: props.logoURL, width: 100, height: 50 }))) : null, /* @__PURE__ */ React30.createElement("div", null, props.version), props.credits ? props.credits : null);
+  return /* @__PURE__ */ React31.createElement("div", { className: "my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400" }, props.withLogo ? /* @__PURE__ */ React31.createElement("a", { href: props.onLogoClicked }, /* @__PURE__ */ React31.createElement("div", { className: "cursor-pointer" }, /* @__PURE__ */ React31.createElement("image", { href: props.logoURL, width: 100, height: 50 }))) : null, /* @__PURE__ */ React31.createElement("div", null, props.version), props.credits ? props.credits : null);
 };
 
 // src/elements/HawaStepper.tsx
-import React31 from "react";
+import React32 from "react";
 import clsx16 from "clsx";
 var HawaStepper = ({
   orientation = "horizontal",
@@ -4109,7 +4310,7 @@ var HawaStepper = ({
     vertical: "w-1 h-32 rounded bg-red-200 ml-6 my-2",
     horizontal: "h-0.5 flex w-full rounded bg-red-200"
   };
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     "div",
     {
       className: clsx16(
@@ -4118,18 +4319,18 @@ var HawaStepper = ({
       )
     },
     props.steps.map((step, i) => {
-      return /* @__PURE__ */ React31.createElement(
+      return /* @__PURE__ */ React32.createElement(
         "div",
         {
           key: i,
           className: "my-2 flex w-auto flex-row flex-wrap justify-start  "
         },
-        /* @__PURE__ */ React31.createElement(
+        /* @__PURE__ */ React32.createElement(
           "div",
           {
             className: orientation === "vertical" ? "flex w-full flex-row items-center" : i + 1 === props.steps.length ? "flex w-full flex-row items-center justify-start gap-2" : "flex  flex-row items-center justify-start gap-2 after:mx-2 after:hidden  after:h-1 after:w-10 after:border-b  after:border-gray-200   dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10"
           },
-          /* @__PURE__ */ React31.createElement("div", { className: "flex flex-row gap-2  " }, /* @__PURE__ */ React31.createElement(
+          /* @__PURE__ */ React32.createElement("div", { className: "flex flex-row gap-2  " }, /* @__PURE__ */ React32.createElement(
             "div",
             {
               className: clsx16(
@@ -4137,7 +4338,7 @@ var HawaStepper = ({
                 i + 1 <= props.currentStep ? "bg-primary text-primary-foreground " : "bg-primary/20"
               )
             },
-            i + 1 <= props.currentStep ? /* @__PURE__ */ React31.createElement(
+            i + 1 <= props.currentStep ? /* @__PURE__ */ React32.createElement(
               "svg",
               {
                 "aria-label": "Check Mark",
@@ -4148,9 +4349,9 @@ var HawaStepper = ({
                 height: "0.60em",
                 width: "0.60em"
               },
-              /* @__PURE__ */ React31.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__ */ React32.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" })
             ) : i + 1
-          ), /* @__PURE__ */ React31.createElement("div", { className: "whitespace-nowrap" }, step))
+          ), /* @__PURE__ */ React32.createElement("div", { className: "whitespace-nowrap" }, step))
         )
       );
     })
@@ -4158,12 +4359,12 @@ var HawaStepper = ({
 };
 
 // src/elements/HawaStats.tsx
-import React34 from "react";
+import React35 from "react";
 
 // src/elements/Card.tsx
-import * as React32 from "react";
-var Card = React32.forwardRef(
-  ({ className, clickable = false, ...props }, ref) => /* @__PURE__ */ React32.createElement(
+import * as React33 from "react";
+var Card = React33.forwardRef(
+  ({ className, clickable = false, ...props }, ref) => /* @__PURE__ */ React33.createElement(
     "div",
     {
       ref,
@@ -4177,7 +4378,7 @@ var Card = React32.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React32.createElement(
+var CardHeader = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React33.createElement(
   "div",
   {
     ref,
@@ -4186,7 +4387,7 @@ var CardHeader = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React32.createElement(
+var CardTitle = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React33.createElement(
   "h3",
   {
     ref,
@@ -4198,7 +4399,7 @@ var CardTitle = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React32.createElement(
+var CardDescription = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React33.createElement(
   "p",
   {
     ref,
@@ -4207,7 +4408,7 @@ var CardDescription = React32.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React32.createElement(
+var CardContent = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React33.createElement(
   "div",
   {
     ref,
@@ -4216,7 +4417,7 @@ var CardContent = React32.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CardContent.displayName = "CardContent";
-var CardFooter = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React32.createElement(
+var CardFooter = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React33.createElement(
   "div",
   {
     ref,
@@ -4227,12 +4428,12 @@ var CardFooter = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE
 CardFooter.displayName = "CardFooter";
 
 // src/elements/Skeleton.tsx
-import React33 from "react";
+import React34 from "react";
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-muted", className),
@@ -4243,16 +4444,16 @@ function Skeleton({
 
 // src/elements/HawaStats.tsx
 var HawaStats = ({ variant = "default", ...props }) => {
-  return /* @__PURE__ */ React34.createElement(Card, { onClick: props.handleClick, clickable: Boolean(props.handleClick) }, /* @__PURE__ */ React34.createElement(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2" }, /* @__PURE__ */ React34.createElement(CardTitle, { className: "text-sm font-medium" }, props.label), props.icon && props.icon), /* @__PURE__ */ React34.createElement(CardContent, null, props.isLoading ? /* @__PURE__ */ React34.createElement(Skeleton, { className: "h-8 w-3/4" }) : /* @__PURE__ */ React34.createElement("div", { className: "text-2xl font-bold" }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ React34.createElement(Skeleton, { className: "mt-2 h-4 w-1/2" }) : props.helperText && /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-muted-foreground" }, props.helperText)));
+  return /* @__PURE__ */ React35.createElement(Card, { onClick: props.handleClick, clickable: Boolean(props.handleClick) }, /* @__PURE__ */ React35.createElement(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2" }, /* @__PURE__ */ React35.createElement(CardTitle, { className: "text-sm font-medium" }, props.label), props.icon && props.icon), /* @__PURE__ */ React35.createElement(CardContent, null, props.isLoading ? /* @__PURE__ */ React35.createElement(Skeleton, { className: "h-8 w-3/4" }) : /* @__PURE__ */ React35.createElement("div", { className: "text-2xl font-bold" }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ React35.createElement(Skeleton, { className: "mt-2 h-4 w-1/2" }) : props.helperText && /* @__PURE__ */ React35.createElement("p", { className: "text-xs text-muted-foreground" }, props.helperText)));
 };
 
 // src/elements/HawaCodeBlock.tsx
-import React36, { useState as useState17 } from "react";
+import React37, { useState as useState17 } from "react";
 
 // src/elements/Tooltip.tsx
-import React35 from "react";
+import React36 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-var TooltipContent = React35.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React35.createElement(
+var TooltipContent = React36.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React36.createElement(
   TooltipPrimitive.Content,
   {
     ref,
@@ -4265,7 +4466,7 @@ var TooltipContent = React35.forwardRef(({ className, sideOffset = 4, ...props }
   }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var TooltipArrow = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React35.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
+var TooltipArrow = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React36.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
 var Tooltip = ({
   side,
@@ -4277,15 +4478,15 @@ var Tooltip = ({
   delayDuration = 300,
   ...props
 }) => {
-  return /* @__PURE__ */ React35.createElement(TooltipPrimitive.TooltipProvider, { delayDuration }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(TooltipPrimitive.TooltipProvider, { delayDuration }, /* @__PURE__ */ React36.createElement(
     TooltipPrimitive.Root,
     {
       open,
       defaultOpen,
       onOpenChange
     },
-    /* @__PURE__ */ React35.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
-    /* @__PURE__ */ React35.createElement(TooltipContent, { side, align: "center", ...props }, content)
+    /* @__PURE__ */ React36.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
+    /* @__PURE__ */ React36.createElement(TooltipContent, { side, align: "center", ...props }, content)
   ));
 };
 
@@ -4312,7 +4513,7 @@ var HawaCodeBlock = ({
       }, 2e3);
     }
   };
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     "div",
     {
       className: cn(
@@ -4321,14 +4522,14 @@ var HawaCodeBlock = ({
       )
     },
     " ",
-    tabs && /* @__PURE__ */ React36.createElement("div", { className: "flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black   dark:bg-gray-700 dark:text-white" }, tabs.map((tab, i) => /* @__PURE__ */ React36.createElement(
+    tabs && /* @__PURE__ */ React37.createElement("div", { className: "flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black   dark:bg-gray-700 dark:text-white" }, tabs.map((tab, i) => /* @__PURE__ */ React37.createElement(
       "div",
       {
         className: cn(
           selectedTab === i ? " border-b-2   border-primary" : "bg-transparent"
         )
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React37.createElement(
         "div",
         {
           onClick: () => setSelectedTab(i),
@@ -4339,7 +4540,7 @@ var HawaCodeBlock = ({
         tab.title
       )
     ))),
-    fileName && /* @__PURE__ */ React36.createElement("div", { className: "flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black  dark:bg-gray-700 dark:text-white" }, /* @__PURE__ */ React36.createElement(
+    fileName && /* @__PURE__ */ React37.createElement("div", { className: "flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black  dark:bg-gray-700 dark:text-white" }, /* @__PURE__ */ React37.createElement(
       "div",
       {
         className: cn(
@@ -4348,22 +4549,22 @@ var HawaCodeBlock = ({
       },
       fileName
     )),
-    /* @__PURE__ */ React36.createElement("pre", null, /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement("pre", null, /* @__PURE__ */ React37.createElement(
       "code",
       {
         className: cn(
           "flex w-full flex-row items-start justify-between rounded bg-gray-200 p-2 text-left  text-sm text-black dark:bg-gray-800 dark:text-white sm:text-base"
         )
       },
-      /* @__PURE__ */ React36.createElement("div", { className: "flex min-h-[37.75px] w-full  flex-col  justify-center p-4 " }, tabs ? tabs[selectedTab].code : code),
-      /* @__PURE__ */ React36.createElement("div", { className: "flex w-fit flex-row items-center gap-2 p-2" }, /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React37.createElement("div", { className: "flex min-h-[37.75px] w-full  flex-col  justify-center p-4 " }, tabs ? tabs[selectedTab].code : code),
+      /* @__PURE__ */ React37.createElement("div", { className: "flex w-fit flex-row items-center gap-2 p-2" }, /* @__PURE__ */ React37.createElement(
         Tooltip,
         {
           open: copyClicked,
           side: "left",
-          content: /* @__PURE__ */ React36.createElement("div", null, "Copied!")
+          content: /* @__PURE__ */ React37.createElement("div", null, "Copied!")
         },
-        /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React37.createElement(
           Button,
           {
             size: "icon",
@@ -4374,7 +4575,7 @@ var HawaCodeBlock = ({
               );
             }
           },
-          /* @__PURE__ */ React36.createElement(
+          /* @__PURE__ */ React37.createElement(
             "svg",
             {
               "aria-label": "Copy Icon",
@@ -4387,8 +4588,8 @@ var HawaCodeBlock = ({
               height: "1em",
               width: "1em"
             },
-            /* @__PURE__ */ React36.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-            /* @__PURE__ */ React36.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+            /* @__PURE__ */ React37.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+            /* @__PURE__ */ React37.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
           )
         )
       ))
@@ -4397,13 +4598,13 @@ var HawaCodeBlock = ({
 };
 
 // src/elements/HawaDatepicker.tsx
-import React37, { useState as useState18 } from "react";
+import React38, { useState as useState18 } from "react";
 var HawaDatepicker = () => {
   const [selectedDate, setSelectedDate] = useState18("");
   const handleDateChange = (event) => {
     setSelectedDate(event.target.value);
   };
-  return /* @__PURE__ */ React37.createElement("div", { className: "relative inline-block text-left" }, /* @__PURE__ */ React37.createElement("span", { className: "rounded-md shadow-sm" }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement("div", { className: "relative inline-block text-left" }, /* @__PURE__ */ React38.createElement("span", { className: "rounded-md shadow-sm" }, /* @__PURE__ */ React38.createElement(
     "input",
     {
       type: "date",
@@ -4415,7 +4616,7 @@ var HawaDatepicker = () => {
 };
 
 // src/elements/DragDropImages.tsx
-import React38, { useEffect as useEffect11, useState as useState19 } from "react";
+import React39, { useEffect as useEffect11, useState as useState19 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx17 from "clsx";
 var DragDropImages = ({
@@ -4489,7 +4690,7 @@ var DragDropImages = ({
   const errs = fileRejections.map((rej, i) => {
     switch (rej.errors[0].code) {
       case "file-too-large":
-        return /* @__PURE__ */ React38.createElement(
+        return /* @__PURE__ */ React39.createElement(
           HawaAlert,
           {
             text: rej.file.name,
@@ -4498,7 +4699,7 @@ var DragDropImages = ({
           }
         );
       case "too-many-files":
-        return /* @__PURE__ */ React38.createElement(
+        return /* @__PURE__ */ React39.createElement(
           HawaAlert,
           {
             text: rej.file.name,
@@ -4507,7 +4708,7 @@ var DragDropImages = ({
           }
         );
       case "file-invalid-type":
-        return /* @__PURE__ */ React38.createElement(
+        return /* @__PURE__ */ React39.createElement(
           HawaAlert,
           {
             text: rej.file.name,
@@ -4516,7 +4717,7 @@ var DragDropImages = ({
           }
         );
       default:
-        return /* @__PURE__ */ React38.createElement(
+        return /* @__PURE__ */ React39.createElement(
           HawaAlert,
           {
             text: rej.file.name,
@@ -4526,7 +4727,7 @@ var DragDropImages = ({
         );
     }
   });
-  const thumbs = files?.map((file, index) => /* @__PURE__ */ React38.createElement("div", { className: "relative rounded" }, /* @__PURE__ */ React38.createElement(
+  const thumbs = files?.map((file, index) => /* @__PURE__ */ React39.createElement("div", { className: "relative rounded" }, /* @__PURE__ */ React39.createElement(
     "button",
     {
       onClick: (e) => {
@@ -4539,7 +4740,7 @@ var DragDropImages = ({
       className: "absolute left-0 ml-auto inline-flex items-center rounded-inner rounded-bl-none rounded-tr-none bg-gray-900 p-1.5 text-sm text-gray-400 transition-all hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
       "data-modal-toggle": "defaultModal"
     },
-    /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React39.createElement(
       "svg",
       {
         "aria-hidden": "true",
@@ -4547,7 +4748,7 @@ var DragDropImages = ({
         fill: "currentColor",
         viewBox: "0 0 20 20"
       },
-      /* @__PURE__ */ React38.createElement(
+      /* @__PURE__ */ React39.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -4556,8 +4757,8 @@ var DragDropImages = ({
         }
       )
     ),
-    /* @__PURE__ */ React38.createElement("span", { className: "sr-only" }, "Close modal")
-  ), /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React39.createElement("span", { className: "sr-only" }, "Close modal")
+  ), /* @__PURE__ */ React39.createElement(
     "div",
     {
       style: {
@@ -4576,7 +4777,7 @@ var DragDropImages = ({
       key: file.name
     }
   )));
-  return /* @__PURE__ */ React38.createElement("div", null, label && /* @__PURE__ */ React38.createElement("div", { className: "mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300" }, label), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement("div", null, label && /* @__PURE__ */ React39.createElement("div", { className: "mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300" }, label), /* @__PURE__ */ React39.createElement(
     "div",
     {
       className: clsx17(
@@ -4584,7 +4785,7 @@ var DragDropImages = ({
         isDragActive ? "bg-gray-200 dark:bg-gray-700" : "bg-background"
       )
     },
-    /* @__PURE__ */ React38.createElement("div", { ...getRootProps({}) }, /* @__PURE__ */ React38.createElement("p", { ...getInputProps() }), /* @__PURE__ */ React38.createElement("div", { className: "flex flex-col items-center justify-center gap-2 pt-4 text-center" }, /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React39.createElement("div", { ...getRootProps({}) }, /* @__PURE__ */ React39.createElement("p", { ...getInputProps() }), /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col items-center justify-center gap-2 pt-4 text-center" }, /* @__PURE__ */ React39.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -4596,33 +4797,33 @@ var DragDropImages = ({
         height: "1.5em",
         width: "1.5em"
       },
-      /* @__PURE__ */ React38.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M13 13l9 3l-4 2l-2 4l-3 -9" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M3 3l0 .01" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M7 3l0 .01" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M11 3l0 .01" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M15 3l0 .01" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M3 7l0 .01" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M3 11l0 .01" }),
-      /* @__PURE__ */ React38.createElement("path", { d: "M3 15l0 .01" })
-    ), /* @__PURE__ */ React38.createElement(texts.clickHereToUpload, null)), /* @__PURE__ */ React38.createElement("div", { className: "pt-2 text-center text-xs" }, texts.acceptedFileTypes, " ", accept.split(",")), /* @__PURE__ */ React38.createElement("div", { className: "pb-2 pt-1 text-center text-xs" }, texts.maxFileSize, " ", max)),
-    acceptedFiles.length > 0 && /* @__PURE__ */ React38.createElement("div", { className: "flex justify-center rounded-lg  p-2 " }, /* @__PURE__ */ React38.createElement(Button, { onClick: clearAllFiles }, "Clear All")),
-    acceptedFiles.length > 0 && thumbs && showPreview ? /* @__PURE__ */ React38.createElement("aside", { className: "flex flex-row flex-wrap justify-center  gap-2 rounded-lg  p-2" }, thumbs) : null,
-    /* @__PURE__ */ React38.createElement("div", { className: "px-4" }, fileRejections[0]?.errors[0]?.code && errs)
+      /* @__PURE__ */ React39.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M13 13l9 3l-4 2l-2 4l-3 -9" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M3 3l0 .01" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M7 3l0 .01" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M11 3l0 .01" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M15 3l0 .01" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M3 7l0 .01" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M3 11l0 .01" }),
+      /* @__PURE__ */ React39.createElement("path", { d: "M3 15l0 .01" })
+    ), /* @__PURE__ */ React39.createElement(texts.clickHereToUpload, null)), /* @__PURE__ */ React39.createElement("div", { className: "pt-2 text-center text-xs" }, texts.acceptedFileTypes, " ", accept.split(",")), /* @__PURE__ */ React39.createElement("div", { className: "pb-2 pt-1 text-center text-xs" }, texts.maxFileSize, " ", max)),
+    acceptedFiles.length > 0 && /* @__PURE__ */ React39.createElement("div", { className: "flex justify-center rounded-lg  p-2 " }, /* @__PURE__ */ React39.createElement(Button, { onClick: clearAllFiles }, "Clear All")),
+    acceptedFiles.length > 0 && thumbs && showPreview ? /* @__PURE__ */ React39.createElement("aside", { className: "flex flex-row flex-wrap justify-center  gap-2 rounded-lg  p-2" }, thumbs) : null,
+    /* @__PURE__ */ React39.createElement("div", { className: "px-4" }, fileRejections[0]?.errors[0]?.code && errs)
   ));
 };
 
 // src/elements/DraggableCard.tsx
-import React39 from "react";
+import React40 from "react";
 var DraggableCard = (props) => {
-  return /* @__PURE__ */ React39.createElement("div", { className: "flex flex-row rounded bg-layoutPrimary-500 p-4" }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement("div", { className: "flex flex-row rounded bg-layoutPrimary-500 p-4" }, /* @__PURE__ */ React40.createElement(
     "button",
     {
       className: "inline-flex items-center rounded bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600",
       type: "button"
     },
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(
       "svg",
       {
         className: "h-6 w-6",
@@ -4630,20 +4831,20 @@ var DraggableCard = (props) => {
         fill: "currentColor",
         viewBox: "0 0 20 20"
       },
-      /* @__PURE__ */ React39.createElement("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" })
+      /* @__PURE__ */ React40.createElement("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" })
     )
-  ), /* @__PURE__ */ React39.createElement("div", { className: "p-4" }, props.children));
+  ), /* @__PURE__ */ React40.createElement("div", { className: "p-4" }, props.children));
 };
 
 // src/elements/Breadcrumb.tsx
-import React40 from "react";
+import React41 from "react";
 
 // src/elements/SubsectionList.tsx
-import React41, { useState as useState20 } from "react";
+import React42, { useState as useState20 } from "react";
 import clsx18 from "clsx";
 var SubsectionList = ({ subsections }) => {
   const [selectedSection, setSelectedSection] = useState20(null);
-  return /* @__PURE__ */ React41.createElement("div", { className: "w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 " }, subsections.map((ss, i) => /* @__PURE__ */ React41.createElement("div", { key: i, className: "my-0" }, ss.title && /* @__PURE__ */ React41.createElement("div", { className: "my-4 font-bold" }, ss.title), ss.sections.map((s, i2) => /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 " }, subsections.map((ss, i) => /* @__PURE__ */ React42.createElement("div", { key: i, className: "my-0" }, ss.title && /* @__PURE__ */ React42.createElement("div", { className: "my-4 font-bold" }, ss.title), ss.sections.map((s, i2) => /* @__PURE__ */ React42.createElement(
     SubsectionItem,
     {
       key: i2,
@@ -4664,7 +4865,7 @@ var SubsectionItem = ({
   selected,
   onItemClick
 }) => {
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(
     "div",
     {
       onClick: onItemClick,
@@ -4673,16 +4874,16 @@ var SubsectionItem = ({
         selected === value ? "bg-primary text-white hover:bg-primary" : "hover:bg-layoutPrimary-300"
       )
     },
-    /* @__PURE__ */ React41.createElement("div", { className: "flex w-full flex-row items-center justify-start  gap-2" }, icon, " ", /* @__PURE__ */ React41.createElement("span", null, title)),
-    chip && /* @__PURE__ */ React41.createElement(HawaChip, { label: "Upgrade", size: "normal" }),
+    /* @__PURE__ */ React42.createElement("div", { className: "flex w-full flex-row items-center justify-start  gap-2" }, icon, " ", /* @__PURE__ */ React42.createElement("span", null, title)),
+    chip && /* @__PURE__ */ React42.createElement(HawaChip, { label: "Upgrade", size: "normal" }),
     " "
   );
 };
 
 // src/elements/UsageCard.tsx
-import React42 from "react";
+import React43 from "react";
 var UsageCard = (props) => {
-  return /* @__PURE__ */ React42.createElement("div", { className: "flex w-full flex-col gap-0 border p-4" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-row items-center gap-2" }, /* @__PURE__ */ React42.createElement("span", { className: "bg-white-200" }, props.title), props.tooltip && /* @__PURE__ */ React42.createElement(Tooltip, { content: props.tooltip, side: "right" }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement("div", { className: "flex w-full flex-col gap-0 border p-4" }, /* @__PURE__ */ React43.createElement("div", { className: "flex flex-row items-center gap-2" }, /* @__PURE__ */ React43.createElement("span", { className: "bg-white-200" }, props.title), props.tooltip && /* @__PURE__ */ React43.createElement(Tooltip, { content: props.tooltip, side: "right" }, /* @__PURE__ */ React43.createElement(
     "svg",
     {
       stroke: "currentColor",
@@ -4693,8 +4894,8 @@ var UsageCard = (props) => {
       height: "1em",
       width: "1em"
     },
-    /* @__PURE__ */ React42.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__ */ React42.createElement("div", { className: "bg-white-100 flex flex-row" }, /* @__PURE__ */ React42.createElement("div", null, props.currentUsage), /* @__PURE__ */ React42.createElement("div", null, " (", props.percent, "%)")), /* @__PURE__ */ React42.createElement("div", { className: "mt-2 h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700" }, /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.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__ */ React43.createElement("div", { className: "bg-white-100 flex flex-row" }, /* @__PURE__ */ React43.createElement("div", null, props.currentUsage), /* @__PURE__ */ React43.createElement("div", null, " (", props.percent, "%)")), /* @__PURE__ */ React43.createElement("div", { className: "mt-2 h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700" }, /* @__PURE__ */ React43.createElement(
     "div",
     {
       className: "h-2.5 rounded-full bg-primary",
@@ -4706,7 +4907,7 @@ var UsageCard = (props) => {
 };
 
 // src/elements/InvoiceAccordion.tsx
-import React43, { useState as useState21 } from "react";
+import React44, { useState as useState21 } from "react";
 import clsx19 from "clsx";
 var InvoiceAccordion = ({
   direction = "ltr",
@@ -4719,7 +4920,7 @@ var InvoiceAccordion = ({
   },
   ...props
 }) => {
-  const InvoiceItemProp = (props2) => /* @__PURE__ */ React43.createElement(
+  const InvoiceItemProp = (props2) => /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: clsx19(
@@ -4727,11 +4928,11 @@ var InvoiceAccordion = ({
         "flex w-full flex-col"
       )
     },
-    /* @__PURE__ */ React43.createElement("div", { className: " text-sm text-gray-500" }, props2.label),
-    /* @__PURE__ */ React43.createElement("div", { className: " whitespace-nowrap" }, props2.text)
+    /* @__PURE__ */ React44.createElement("div", { className: " text-sm text-gray-500" }, props2.label),
+    /* @__PURE__ */ React44.createElement("div", { className: " whitespace-nowrap" }, props2.text)
   );
   const [expanded, setExpanded] = useState21(false);
-  return /* @__PURE__ */ React43.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React43.createElement("div", { className: "flex w-full flex-row items-center gap-2 border p-4 " }, props.invoiceActions && /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React44.createElement("div", { className: "flex w-full flex-row items-center gap-2 border p-4 " }, props.invoiceActions && /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: clsx19(
@@ -4741,7 +4942,7 @@ var InvoiceAccordion = ({
       ),
       onClick: () => setExpanded(!expanded)
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -4752,7 +4953,7 @@ var InvoiceAccordion = ({
         height: "2em",
         width: "2em"
       },
-      /* @__PURE__ */ React43.createElement(
+      /* @__PURE__ */ React44.createElement(
         "path",
         {
           "fill-rule": "evenodd",
@@ -4761,22 +4962,22 @@ var InvoiceAccordion = ({
         }
       )
     )
-  ), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: "flex w-full cursor-pointer flex-col gap-0",
       onClick: () => setExpanded(!expanded)
     },
-    /* @__PURE__ */ React43.createElement("div", { className: "flex flex-row items-center gap-2" }, /* @__PURE__ */ React43.createElement("span", { className: "bg-white-200" }, props.invoiceTitle), props.status && /* @__PURE__ */ React43.createElement(HawaChip, { size: "small", label: props.status })),
-    /* @__PURE__ */ React43.createElement("div", { className: "font-sm text-gray-400" }, props.invoiceSubtitle)
-  ), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-row items-center gap-2" }, /* @__PURE__ */ React43.createElement("div", { className: "whitespace-nowrap" }, props.total), /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement("div", { className: "flex flex-row items-center gap-2" }, /* @__PURE__ */ React44.createElement("span", { className: "bg-white-200" }, props.invoiceTitle), props.status && /* @__PURE__ */ React44.createElement(HawaChip, { size: "small", label: props.status })),
+    /* @__PURE__ */ React44.createElement("div", { className: "font-sm text-gray-400" }, props.invoiceSubtitle)
+  ), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-row items-center gap-2" }, /* @__PURE__ */ React44.createElement("div", { className: "whitespace-nowrap" }, props.total), /* @__PURE__ */ React44.createElement(
     HawaMenu,
     {
       direction,
       position: direction === "rtl" ? "bottom-right" : "bottom-left",
       menuItems: props.invoiceActions
     },
-    /* @__PURE__ */ React43.createElement("div", { className: " p-2" }, /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement("div", { className: " p-2" }, /* @__PURE__ */ React44.createElement(
       "svg",
       {
         stroke: "currentColor",
@@ -4786,9 +4987,9 @@ var InvoiceAccordion = ({
         height: "1em",
         width: "1em"
       },
-      /* @__PURE__ */ React43.createElement("path", { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" })
+      /* @__PURE__ */ React44.createElement("path", { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" })
     ))
-  ))), expanded && /* @__PURE__ */ React43.createElement(
+  ))), expanded && /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: clsx19(
@@ -4796,32 +4997,32 @@ var InvoiceAccordion = ({
         "flex h-auto flex-col gap-4 overflow-clip border border-t-0 bg-gray-50 p-4 transition-all"
       )
     },
-    /* @__PURE__ */ React43.createElement("div", { className: "border-b pb-2" }, props.invoiceDescription),
-    props.products?.map((product, i) => /* @__PURE__ */ React43.createElement("div", { key: i, className: "flex flex-row border-b  pb-4" }, /* @__PURE__ */ React43.createElement("div", { className: "w-full" }, /* @__PURE__ */ React43.createElement(InvoiceItemProp, { start: true, label: texts.plan, text: product.plan })), /* @__PURE__ */ React43.createElement("div", { className: "flex w-full flex-row gap-20 " }, /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement("div", { className: "border-b pb-2" }, props.invoiceDescription),
+    props.products?.map((product, i) => /* @__PURE__ */ React44.createElement("div", { key: i, className: "flex flex-row border-b  pb-4" }, /* @__PURE__ */ React44.createElement("div", { className: "w-full" }, /* @__PURE__ */ React44.createElement(InvoiceItemProp, { start: true, label: texts.plan, text: product.plan })), /* @__PURE__ */ React44.createElement("div", { className: "flex w-full flex-row gap-20 " }, /* @__PURE__ */ React44.createElement(
       InvoiceItemProp,
       {
         label: texts.usage,
         text: `${product.usage} SAR`
       }
-    ), /* @__PURE__ */ React43.createElement(
+    ), /* @__PURE__ */ React44.createElement(
       InvoiceItemProp,
       {
         label: texts.price,
         text: `${product.price} SAR`
       }
-    ), /* @__PURE__ */ React43.createElement(
+    ), /* @__PURE__ */ React44.createElement(
       InvoiceItemProp,
       {
         label: texts.amount,
         text: `${product.amount} SAR`
       }
     )))),
-    /* @__PURE__ */ React43.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React43.createElement("div", null, texts.total), " ", /* @__PURE__ */ React43.createElement("div", null, props.total))
+    /* @__PURE__ */ React44.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React44.createElement("div", null, texts.total), " ", /* @__PURE__ */ React44.createElement("div", null, props.total))
   ));
 };
 
 // src/elements/UserFeedback.tsx
-import React44, { useEffect as useEffect12, useRef as useRef7, useState as useState22 } from "react";
+import React45, { useEffect as useEffect12, useRef as useRef7, useState as useState22 } from "react";
 import clsx20 from "clsx";
 var UserFeedback = ({
   position = "bottom-right",
@@ -4850,13 +5051,13 @@ var UserFeedback = ({
       popUpRef.current.removeChild(popUpRef.current.children[0]);
     }, 200);
   };
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     "div",
     {
       ref: popUpRef,
       className: clsx20("fixed bottom-4 ", boxPosition[position])
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React45.createElement(
       "div",
       {
         className: clsx20(
@@ -4864,8 +5065,8 @@ var UserFeedback = ({
           closed ? "opacity-0" : "opacity-100"
         )
       },
-      /* @__PURE__ */ React44.createElement("div", { className: "absolute left-2 top-2 p-1.5 text-sm" }, props.title),
-      /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React45.createElement("div", { className: "absolute left-2 top-2 p-1.5 text-sm" }, props.title),
+      /* @__PURE__ */ React45.createElement(
         "button",
         {
           type: "button",
@@ -4874,7 +5075,7 @@ var UserFeedback = ({
           "aria-label": "Close",
           onClick: () => slowClose()
         },
-        /* @__PURE__ */ React44.createElement(
+        /* @__PURE__ */ React45.createElement(
           "svg",
           {
             "aria-hidden": "true",
@@ -4882,7 +5083,7 @@ var UserFeedback = ({
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ React44.createElement(
+          /* @__PURE__ */ React45.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -4892,8 +5093,8 @@ var UserFeedback = ({
           )
         )
       ),
-      /* @__PURE__ */ React44.createElement("div", { className: "mt-8" }, props.question),
-      /* @__PURE__ */ React44.createElement("div", { className: "flex w-full flex-row gap-1 rounded" }, props.options.map((op) => /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React45.createElement("div", { className: "mt-8" }, props.question),
+      /* @__PURE__ */ React45.createElement("div", { className: "flex w-full flex-row gap-1 rounded" }, props.options.map((op) => /* @__PURE__ */ React45.createElement(
         "span",
         {
           onClick: () => {
@@ -4915,17 +5116,17 @@ var UserFeedback = ({
         },
         op
       ))),
-      props.texts && /* @__PURE__ */ React44.createElement("div", { className: " flex flex-row justify-between text-xs" }, /* @__PURE__ */ React44.createElement("span", null, props.texts.least), /* @__PURE__ */ React44.createElement("span", null, props.texts.most)),
-      answered && /* @__PURE__ */ React44.createElement("div", { className: "absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded bg-black bg-opacity-80 p-4 text-center transition-all" }, /* @__PURE__ */ React44.createElement("span", { className: "font-bold text-white" }, "Thank you for your answer. This box will disappear in", " " + closingTimer, " seconds"), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-row gap-2" }, /* @__PURE__ */ React44.createElement(HawaButton, { onClick: () => slowClose() }, "Close")))
+      props.texts && /* @__PURE__ */ React45.createElement("div", { className: " flex flex-row justify-between text-xs" }, /* @__PURE__ */ React45.createElement("span", null, props.texts.least), /* @__PURE__ */ React45.createElement("span", null, props.texts.most)),
+      answered && /* @__PURE__ */ React45.createElement("div", { className: "absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded bg-black bg-opacity-80 p-4 text-center transition-all" }, /* @__PURE__ */ React45.createElement("span", { className: "font-bold text-white" }, "Thank you for your answer. This box will disappear in", " " + closingTimer, " seconds"), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-row gap-2" }, /* @__PURE__ */ React45.createElement(HawaButton, { onClick: () => slowClose() }, "Close")))
     )
   );
 };
 
 // src/elements/ArrowCarousel.tsx
-import React45, { useEffect as useEffect13, useState as useState23 } from "react";
+import React46, { useEffect as useEffect13, useState as useState23 } from "react";
 import clsx21 from "clsx";
 var Arrow3 = (props) => {
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     "svg",
     {
       onClick: props.onClick || (() => {
@@ -4938,7 +5139,7 @@ var Arrow3 = (props) => {
       fill: props.disabled && "grey",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4958,7 +5159,7 @@ var ArrowCarousel = (props) => {
     medium: ["2", -11],
     big: ["3", -16]
   };
-  return /* @__PURE__ */ React45.createElement("div", { className: "align-center box-boorder relative flex h-min w-min flex-row items-center justify-center rounded bg-layoutPrimary-500 p-4 py-0 pb-2 pt-2 shadow-md" }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement("div", { className: "align-center box-boorder relative flex h-min w-min flex-row items-center justify-center rounded bg-layoutPrimary-500 p-4 py-0 pb-2 pt-2 shadow-md" }, /* @__PURE__ */ React46.createElement(
     Arrow3,
     {
       direction: "left",
@@ -4968,20 +5169,20 @@ var ArrowCarousel = (props) => {
           setIndex(index - 1);
       }
     }
-  ), /* @__PURE__ */ React45.createElement(
+  ), /* @__PURE__ */ React46.createElement(
     "div",
     {
       className: `relative m-5  my-0 box-border flex h-full flex-col items-center justify-center  py-6 pt-0 `
     },
-    /* @__PURE__ */ React45.createElement("div", null, props.items[index].icon),
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement("div", null, props.items[index].icon),
+    /* @__PURE__ */ React46.createElement(
       "div",
       {
         className: "absolute bottom-1 mb-0 mt-2 select-none"
       },
       props.items[index].label
     )
-  ), /* @__PURE__ */ React45.createElement(
+  ), /* @__PURE__ */ React46.createElement(
     Arrow3,
     {
       direction: "right",
@@ -4995,10 +5196,10 @@ var ArrowCarousel = (props) => {
 };
 
 // src/elements/FloatingComment.tsx
-import React46, { useRef as useRef8, useState as useState24, useEffect as useEffect14 } from "react";
+import React47, { useRef as useRef8, useState as useState24, useEffect as useEffect14 } from "react";
 import clsx22 from "clsx";
 var Property = (props) => {
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(
     "div",
     {
       className: "border-box mr-[10px] flex h-[32px] w-[32px] items-center justify-center rounded bg-gray-300 p-2",
@@ -5485,8 +5686,8 @@ var FloatingComment = (props) => {
         return "ltr";
     }
   };
-  return /* @__PURE__ */ React46.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded shadow-md" }, /* @__PURE__ */ React46.createElement("div", { className: clsx22("flex w-full flex-row justify-start p-2") }, Object.entries(stylers).map(([id, data]) => {
-    return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded shadow-md" }, /* @__PURE__ */ React47.createElement("div", { className: clsx22("flex w-full flex-row justify-start p-2") }, Object.entries(stylers).map(([id, data]) => {
+    return /* @__PURE__ */ React47.createElement(
       Property,
       {
         name: data.content,
@@ -5497,7 +5698,7 @@ var FloatingComment = (props) => {
         }
       }
     );
-  })), /* @__PURE__ */ React46.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React46.createElement("div", { className: "selection-ignore box-border w-full p-2" }, /* @__PURE__ */ React46.createElement(
+  })), /* @__PURE__ */ React47.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React47.createElement("div", { className: "selection-ignore box-border w-full p-2" }, /* @__PURE__ */ React47.createElement(
     "div",
     {
       ref: field,
@@ -5586,7 +5787,7 @@ var FloatingComment = (props) => {
         });
       }
     }
-  )), /* @__PURE__ */ React46.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React46.createElement(
+  )), /* @__PURE__ */ React47.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React47.createElement(
     "button",
     {
       className: "my-1 rounded bg-cyan-800 p-2 py-1 text-white",
@@ -5601,7 +5802,7 @@ var FloatingComment = (props) => {
 };
 
 // src/elements/FloatingCommentSlate.tsx
-import React47, { useState as useState25, useCallback } from "react";
+import React48, { useState as useState25, useCallback } from "react";
 import { Editor, createEditor } from "slate";
 import { Slate, Editable, withReact } from "slate-react";
 var initialValue = [
@@ -5628,10 +5829,10 @@ var Leaf = (props) => {
       });
     });
   }
-  return /* @__PURE__ */ React47.createElement("span", { ...props.attributes, style: types }, props.children);
+  return /* @__PURE__ */ React48.createElement("span", { ...props.attributes, style: types }, props.children);
 };
 var Property2 = (props) => {
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     "div",
     {
       className: "border-box mr-[5px] flex h-[32px] w-[32px] items-center justify-center rounded bg-gray-400 p-2",
@@ -5643,7 +5844,7 @@ var Property2 = (props) => {
 var FloatingCommentSlate = () => {
   const [editor] = useState25(() => withReact(createEditor()));
   const renderLeaf = useCallback((props) => {
-    return /* @__PURE__ */ React47.createElement(Leaf, { ...props });
+    return /* @__PURE__ */ React48.createElement(Leaf, { ...props });
   }, []);
   const perform = (event, type) => {
     event.preventDefault();
@@ -5651,7 +5852,7 @@ var FloatingCommentSlate = () => {
     console.log(Editor.marks(editor));
     Editor.addMark(editor, type, !current);
   };
-  return /* @__PURE__ */ React47.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded bg-blue-300 shadow-md" }, /* @__PURE__ */ React47.createElement("div", { className: "flex w-full flex-row justify-start p-2" }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded bg-blue-300 shadow-md" }, /* @__PURE__ */ React48.createElement("div", { className: "flex w-full flex-row justify-start p-2" }, /* @__PURE__ */ React48.createElement(
     Property2,
     {
       name: "B",
@@ -5659,7 +5860,7 @@ var FloatingCommentSlate = () => {
         perform(event, "bold");
       }
     }
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.createElement(
     Property2,
     {
       name: "I",
@@ -5667,7 +5868,7 @@ var FloatingCommentSlate = () => {
         perform(event, "italic");
       }
     }
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.createElement(
     Property2,
     {
       name: "U",
@@ -5675,7 +5876,7 @@ var FloatingCommentSlate = () => {
         perform(event, "underline");
       }
     }
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.createElement(
     Property2,
     {
       name: "S",
@@ -5683,7 +5884,7 @@ var FloatingCommentSlate = () => {
         perform(event, "strikethrough");
       }
     }
-  )), /* @__PURE__ */ React47.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React47.createElement("div", { className: "w-full" }, /* @__PURE__ */ React47.createElement(Slate, { editor, initialValue }, /* @__PURE__ */ React47.createElement(
+  )), /* @__PURE__ */ React48.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React48.createElement("div", { className: "w-full" }, /* @__PURE__ */ React48.createElement(Slate, { editor, initialValue }, /* @__PURE__ */ React48.createElement(
     Editable,
     {
       renderLeaf,
@@ -5701,16 +5902,16 @@ var FloatingCommentSlate = () => {
         }
       }
     }
-  ))), /* @__PURE__ */ React47.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React47.createElement("button", { className: "my-1 rounded bg-cyan-800 p-2 py-1 text-white" }, "Submit"));
+  ))), /* @__PURE__ */ React48.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React48.createElement("button", { className: "my-1 rounded bg-cyan-800 p-2 py-1 text-white" }, "Submit"));
 };
 
 // src/elements/FloatingCommentExec.tsx
-import React48 from "react";
+import React49 from "react";
 import ReactDOMServer from "react-dom/server";
 import { AiOutlineClose } from "react-icons/ai";
 var base64 = "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";
 var Property3 = (props) => {
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     "div",
     {
       className: "border-box mr-[10px] flex h-[32px] w-fit min-w-[32px] items-center justify-center rounded bg-gray-300 p-2 transition-all hover:opacity-50",
@@ -5720,7 +5921,7 @@ var Property3 = (props) => {
   );
 };
 var Image = (props) => {
-  return /* @__PURE__ */ React48.createElement("div", { className: "group relative w-fit" }, /* @__PURE__ */ React48.createElement("img", { src: `data:image/pngg;charset=utf-8;base64,${base64}` }), /* @__PURE__ */ React48.createElement("div", { className: "absolute right-0 top-0 text-red-900 opacity-0 transition-all hover:opacity-50 group-hover:opacity-100" }, /* @__PURE__ */ React48.createElement(AiOutlineClose, null)));
+  return /* @__PURE__ */ React49.createElement("div", { className: "group relative w-fit" }, /* @__PURE__ */ React49.createElement("img", { src: `data:image/pngg;charset=utf-8;base64,${base64}` }), /* @__PURE__ */ React49.createElement("div", { className: "absolute right-0 top-0 text-red-900 opacity-0 transition-all hover:opacity-50 group-hover:opacity-100" }, /* @__PURE__ */ React49.createElement(AiOutlineClose, null)));
 };
 var styles2 = {
   bold: "B",
@@ -5732,8 +5933,8 @@ var styles2 = {
   removeFormat: "Plain"
 };
 var FloatingCommentExec = (props) => {
-  return /* @__PURE__ */ React48.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded shadow-md" }, /* @__PURE__ */ React48.createElement("div", { className: "flex w-full flex-row justify-start p-2" }, Object.entries(styles2).map(([id, acronym]) => {
-    return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement("div", { className: "align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded shadow-md" }, /* @__PURE__ */ React49.createElement("div", { className: "flex w-full flex-row justify-start p-2" }, Object.entries(styles2).map(([id, acronym]) => {
+    return /* @__PURE__ */ React49.createElement(
       Property3,
       {
         name: acronym,
@@ -5745,24 +5946,24 @@ var FloatingCommentExec = (props) => {
         }
       }
     );
-  }), /* @__PURE__ */ React48.createElement(
+  }), /* @__PURE__ */ React49.createElement(
     Property3,
     {
       name: "Image",
       key: `property-insertImage`,
       onMouseDown: (event) => {
         event.preventDefault();
-        let html = ReactDOMServer.renderToString(/* @__PURE__ */ React48.createElement(Image, null));
+        let html = ReactDOMServer.renderToString(/* @__PURE__ */ React49.createElement(Image, null));
         document.execCommand("insertHTML", false, html);
       }
     }
-  )), /* @__PURE__ */ React48.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React48.createElement("div", { className: " box-border w-full p-2" }, /* @__PURE__ */ React48.createElement(
+  )), /* @__PURE__ */ React49.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React49.createElement("div", { className: " box-border w-full p-2" }, /* @__PURE__ */ React49.createElement(
     "div",
     {
       contentEditable: "true",
       className: "rtl h-[150px] w-full resize-none overflow-auto overflow-x-hidden border-none font-['Arial'] text-[16px] outline-none"
     }
-  )), /* @__PURE__ */ React48.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React48.createElement(
+  )), /* @__PURE__ */ React49.createElement("div", { className: "h-[1px] w-full bg-slate-600" }, "\xA0"), /* @__PURE__ */ React49.createElement(
     "button",
     {
       className: "my-1 rounded bg-cyan-800 p-2 py-1 text-white",
@@ -5774,7 +5975,7 @@ var FloatingCommentExec = (props) => {
 };
 
 // src/elements/BackToTop.tsx
-import React49, { useState as useState27, useEffect as useEffect16, useRef as useRef10 } from "react";
+import React50, { useState as useState27, useEffect as useEffect16, useRef as useRef10 } from "react";
 import { clsx as clsx23 } from "clsx";
 var BackToTop = ({ ...props }) => {
   const [visible, setVisible] = useState27(false);
@@ -5831,7 +6032,7 @@ var BackToTop = ({ ...props }) => {
     };
     return style;
   };
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     Button,
     {
       className: cn(
@@ -5846,7 +6047,7 @@ var BackToTop = ({ ...props }) => {
       ref: self,
       size: "icon"
     },
-    /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(
       "svg",
       {
         className: clsx23(
@@ -5856,25 +6057,25 @@ var BackToTop = ({ ...props }) => {
         viewBox: "0 0 20 20",
         fill: "currentColor"
       },
-      /* @__PURE__ */ React49.createElement("path", { d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" })
+      /* @__PURE__ */ React50.createElement("path", { d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" })
     )
   );
 };
 
 // src/elements/HawaInlineCode.tsx
-import React50 from "react";
+import React51 from "react";
 var HawaInlineCode = (props) => {
-  return /* @__PURE__ */ React50.createElement("code", { className: "inline-code" }, props.text);
+  return /* @__PURE__ */ React51.createElement("code", { className: "inline-code" }, props.text);
 };
 
 // src/elements/Timeline.tsx
-import React51 from "react";
+import React52 from "react";
 var Timeline = (props) => {
-  return /* @__PURE__ */ React51.createElement("div", null, /* @__PURE__ */ React51.createElement("ol", { className: "relative border-l border-gray-200 dark:border-gray-700" }, props.steps.map((step) => /* @__PURE__ */ React51.createElement("li", { className: "mb-10 ml-4" }, /* @__PURE__ */ React51.createElement("div", { className: "absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700" }), /* @__PURE__ */ React51.createElement("time", { className: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500" }, step.date), /* @__PURE__ */ React51.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, step.title), /* @__PURE__ */ React51.createElement("p", { className: "mb-4 text-base font-normal text-gray-500 dark:text-gray-400" }, step.description), step.actions))));
+  return /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement("ol", { className: "relative border-l border-gray-200 dark:border-gray-700" }, props.steps.map((step) => /* @__PURE__ */ React52.createElement("li", { className: "mb-10 ml-4" }, /* @__PURE__ */ React52.createElement("div", { className: "absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700" }), /* @__PURE__ */ React52.createElement("time", { className: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500" }, step.date), /* @__PURE__ */ React52.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, step.title), /* @__PURE__ */ React52.createElement("p", { className: "mb-4 text-base font-normal text-gray-500 dark:text-gray-400" }, step.description), step.actions))));
 };
 
 // src/elements/HawaPinInput.tsx
-import React52, { useEffect as useEffect17, useState as useState28 } from "react";
+import React53, { useEffect as useEffect17, useState as useState28 } from "react";
 import clsx24 from "clsx";
 var HawaPinInput = ({
   label,
@@ -5918,7 +6119,7 @@ var HawaPinInput = ({
       }
     }
   };
-  return /* @__PURE__ */ React52.createElement("div", { className: "flex w-full flex-row justify-center gap-2" }, pin.map((value, index) => /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement("div", { className: "flex w-full flex-row justify-center gap-2" }, pin.map((value, index) => /* @__PURE__ */ React53.createElement(
     "input",
     {
       key: index,
@@ -5940,7 +6141,7 @@ var HawaPinInput = ({
 };
 
 // src/elements/HawaItemCard.tsx
-import React53, { useEffect as useEffect18, useState as useState29 } from "react";
+import React54, { useEffect as useEffect18, useState as useState29 } from "react";
 import clsx25 from "clsx";
 var HawaItemCard = ({
   actions,
@@ -5982,13 +6183,13 @@ var HawaItemCard = ({
     };
     return () => window.onclick = null;
   }, [openActionHeader]);
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React54.createElement(
     "div",
     {
       className: clsx25(defaultStyle, orientationStyles[orientation]),
       ...props
     },
-    cardImage && /* @__PURE__ */ React53.createElement("div", { className: "group relative overflow-clip" }, /* @__PURE__ */ React53.createElement(
+    cardImage && /* @__PURE__ */ React54.createElement("div", { className: "group relative overflow-clip" }, /* @__PURE__ */ React54.createElement(
       "img",
       {
         src: "https://via.placeholder.com/50",
@@ -5997,7 +6198,7 @@ var HawaItemCard = ({
           clickableImage ? "overflow-clip transition-all group-hover:blur-lg" : ""
         )
       }
-    ), clickableImage && /* @__PURE__ */ React53.createElement("div", { className: "absolute left-0 top-0 flex h-full w-full items-center  justify-center opacity-0 transition-all group-hover:opacity-100 " }, /* @__PURE__ */ React53.createElement(
+    ), clickableImage && /* @__PURE__ */ React54.createElement("div", { className: "absolute left-0 top-0 flex h-full w-full items-center  justify-center opacity-0 transition-all group-hover:opacity-100 " }, /* @__PURE__ */ React54.createElement(
       HawaButton,
       {
         startIcon: clickableImageActionIcon,
@@ -6006,14 +6207,14 @@ var HawaItemCard = ({
       },
       clickableImageActionText
     ))),
-    /* @__PURE__ */ React53.createElement("div", { className: "relative w-full p-6" }, headerActions && /* @__PURE__ */ React53.createElement("div", { className: "max-h- bg-red absolute right-0 top-0 flex justify-end pr-3 pt-3" }, /* @__PURE__ */ React53.createElement(HawaMenu, { position: "top-right", menuItems: headerActions }, /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React54.createElement("div", { className: "relative w-full p-6" }, headerActions && /* @__PURE__ */ React54.createElement("div", { className: "max-h- bg-red absolute right-0 top-0 flex justify-end pr-3 pt-3" }, /* @__PURE__ */ React54.createElement(HawaMenu, { position: "top-right", menuItems: headerActions }, /* @__PURE__ */ React54.createElement(
       "div",
       {
         className: clsx25(headerActionsButtonStyle),
         onClick: handleOpenActionHeader
       },
-      /* @__PURE__ */ React53.createElement("span", { className: "sr-only" }, "Open dropdown"),
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React54.createElement("span", { className: "sr-only" }, "Open dropdown"),
+      /* @__PURE__ */ React54.createElement(
         "svg",
         {
           className: "h-6 w-6",
@@ -6021,9 +6222,9 @@ var HawaItemCard = ({
           fill: "currentColor",
           viewBox: "0 0 20 20"
         },
-        /* @__PURE__ */ React53.createElement("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" })
+        /* @__PURE__ */ React54.createElement("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" })
       )
-    ))), header && /* @__PURE__ */ React53.createElement("h5", { className: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" }, header), content && /* @__PURE__ */ React53.createElement("p", { className: "w-full font-normal text-gray-700 dark:text-gray-400" }, content), actions || counts ? /* @__PURE__ */ React53.createElement(
+    ))), header && /* @__PURE__ */ React54.createElement("h5", { className: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" }, header), content && /* @__PURE__ */ React54.createElement("p", { className: "w-full font-normal text-gray-700 dark:text-gray-400" }, content), actions || counts ? /* @__PURE__ */ React54.createElement(
       "div",
       {
         className: clsx25(
@@ -6039,7 +6240,7 @@ var HawaItemCard = ({
 
 // src/elements/HawaPricingCard.tsx
 import clsx26 from "clsx";
-import React54 from "react";
+import React55 from "react";
 var HawaPricingCard = ({
   size = "medium",
   direction = "ltr",
@@ -6052,7 +6253,7 @@ var HawaPricingCard = ({
     medium: "mx-1 w-full rounded min-w-fit border dark:border-gray-700 bg-background ",
     large: "mx-1 w-full max-w-lg rounded border dark:border-gray-700 bg-background "
   };
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     "div",
     {
       dir: isArabic ? "rtl" : "ltr",
@@ -6062,11 +6263,11 @@ var HawaPricingCard = ({
         "flex flex-col gap-4 rounded border-2 p-4"
       )
     },
-    /* @__PURE__ */ React54.createElement("h5", { className: "text-md 0 font-bold text-primary/70" }, props.texts.title),
-    /* @__PURE__ */ React54.createElement("div", { className: " text-primary/ flex  items-baseline" }, /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement("span", { className: "text-5xl font-extrabold tracking-tight" }, props.price), /* @__PURE__ */ React54.createElement("span", { className: "mx-1 text-sm font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React54.createElement("span", { className: "ml-1 text-xl font-normal text-primary/70" }, "/ ", props.texts.cycleText)),
-    /* @__PURE__ */ React54.createElement("h5", { className: "text-md  font-normal text-primary/70" }, props.texts.subtitle),
-    props.features && /* @__PURE__ */ React54.createElement("ul", { role: "list", className: "space-y-0 " }, props.features?.map((feature, o) => {
-      return /* @__PURE__ */ React54.createElement("li", { key: o, className: "flex " }, /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement("h5", { className: "text-md 0 font-bold text-primary/70" }, props.texts.title),
+    /* @__PURE__ */ React55.createElement("div", { className: " text-primary/ flex  items-baseline" }, /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement("span", { className: "text-5xl font-extrabold tracking-tight" }, props.price), /* @__PURE__ */ React55.createElement("span", { className: "mx-1 text-sm font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React55.createElement("span", { className: "ml-1 text-xl font-normal text-primary/70" }, "/ ", props.texts.cycleText)),
+    /* @__PURE__ */ React55.createElement("h5", { className: "text-md  font-normal text-primary/70" }, props.texts.subtitle),
+    props.features && /* @__PURE__ */ React55.createElement("ul", { role: "list", className: "space-y-0 " }, props.features?.map((feature, o) => {
+      return /* @__PURE__ */ React55.createElement("li", { key: o, className: "flex " }, /* @__PURE__ */ React55.createElement(
         "svg",
         {
           "aria-label": "Check Icon",
@@ -6075,7 +6276,7 @@ var HawaPricingCard = ({
           fill: "currentColor",
           viewBox: "0 0 20 20"
         },
-        /* @__PURE__ */ React54.createElement(
+        /* @__PURE__ */ React55.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -6083,9 +6284,9 @@ var HawaPricingCard = ({
             clipRule: "evenodd"
           }
         )
-      ), /* @__PURE__ */ React54.createElement("span", { className: "flex items-center  text-center font-normal leading-tight text-primary/70 " }, feature.text));
+      ), /* @__PURE__ */ React55.createElement("span", { className: "flex items-center  text-center font-normal leading-tight text-primary/70 " }, feature.text));
     })),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement(
       Button,
       {
         onClick: props.onPlanClicked,
@@ -6099,7 +6300,7 @@ var HawaPricingCard = ({
 
 // src/elements/HawaAdCard.tsx
 import clsx27 from "clsx";
-import React55 from "react";
+import React56 from "react";
 var HawaAdCard = ({ orientation, ...props }) => {
   let cardStyles = {
     horizontal: "flex flex-row  max-w-xl rounded border-gray-200 bg-gray-100 shadow-md p-2 gap-2 items-center relative  dark:border-gray-700 dark:bg-gray-800 ",
@@ -6109,21 +6310,21 @@ var HawaAdCard = ({ orientation, ...props }) => {
     horizontal: "w-auto h-full bg-blue-500  rounded-inner",
     vertical: "bg-blue-500 rounded-inner w-auto "
   };
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "div",
     {
       className: clsx27(cardStyles[orientation], "dark:text-white"),
       ...props
     },
-    /* @__PURE__ */ React55.createElement("div", { className: "flex aspect-square w-full  max-w-fit  items-start " }, /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement("div", { className: "flex aspect-square w-full  max-w-fit  items-start " }, /* @__PURE__ */ React56.createElement(
       "img",
       {
         src: props.imageURL ? props.imageURL : "https://via.placeholder.com/50",
         className: imageStyles[orientation]
       }
     )),
-    /* @__PURE__ */ React55.createElement("div", { className: "w-full text-xs" }, /* @__PURE__ */ React55.createElement("div", { className: "font-bold" }, props.title), /* @__PURE__ */ React55.createElement("div", { className: "text-[12px]" }, props.description)),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement("div", { className: "w-full text-xs" }, /* @__PURE__ */ React56.createElement("div", { className: "font-bold" }, props.title), /* @__PURE__ */ React56.createElement("div", { className: "text-[12px]" }, props.description)),
+    /* @__PURE__ */ React56.createElement(
       "span",
       {
         onClick: props.handleHide,
@@ -6136,7 +6337,7 @@ var HawaAdCard = ({ orientation, ...props }) => {
 
 // src/elements/HawaLandingCard.tsx
 import clsx28 from "clsx";
-import React56 from "react";
+import React57 from "react";
 var HawaLandingCard = ({
   orientation = "horizontal",
   ...props
@@ -6149,7 +6350,7 @@ var HawaLandingCard = ({
     horizontal: "w-8 h-8 rounded",
     vertical: "w-14 h-14 rounded"
   };
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     "div",
     {
       className: clsx28(
@@ -6160,94 +6361,94 @@ var HawaLandingCard = ({
       ),
       ...props
     },
-    props.texts?.titleTip && /* @__PURE__ */ React56.createElement("div", { className: "text-sm text-red-600" }, props.texts?.titleTip),
-    props.imageURL && /* @__PURE__ */ React56.createElement(
+    props.texts?.titleTip && /* @__PURE__ */ React57.createElement("div", { className: "text-sm text-red-600" }, props.texts?.titleTip),
+    props.imageURL && /* @__PURE__ */ React57.createElement(
       "img",
       {
         className: "absolute -bottom-10 -right-10 h-40 w-auto ",
         src: props.imageURL
       }
     ),
-    props.texts?.title && /* @__PURE__ */ React56.createElement("div", { className: "mt-2 text-lg font-medium" }, props.texts?.title, " "),
-    props.texts?.description && /* @__PURE__ */ React56.createElement("div", { className: "z-10 mt-4 text-sm" }, props.texts?.description),
-    props.texts?.linkText && /* @__PURE__ */ React56.createElement("div", { className: "z-10 mt-6 text-sm underline underline-offset-8" }, props.texts?.linkText)
+    props.texts?.title && /* @__PURE__ */ React57.createElement("div", { className: "mt-2 text-lg font-medium" }, props.texts?.title, " "),
+    props.texts?.description && /* @__PURE__ */ React57.createElement("div", { className: "z-10 mt-4 text-sm" }, props.texts?.description),
+    props.texts?.linkText && /* @__PURE__ */ React57.createElement("div", { className: "z-10 mt-6 text-sm underline underline-offset-8" }, props.texts?.linkText)
   );
 };
 
 // src/elements/HawaStoreButtons.tsx
-import React57 from "react";
+import React58 from "react";
 var HawaStoreButtons = (props) => {
-  return /* @__PURE__ */ React57.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React57.createElement("div", null, props.store === "apple" ? props.mode === "dark" ? /* @__PURE__ */ React57.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white" }, /* @__PURE__ */ React57.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React57.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React58.createElement("div", null, props.store === "apple" ? props.mode === "dark" ? /* @__PURE__ */ React58.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white" }, /* @__PURE__ */ React58.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React58.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "currentColor",
       d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
     }
-  ))), /* @__PURE__ */ React57.createElement("div", null, /* @__PURE__ */ React57.createElement("div", { className: "text-xs" }, "Download on the"), /* @__PURE__ */ React57.createElement("div", { className: "font-sans -mt-1 text-2xl font-semibold" }, "App Store"))) : /* @__PURE__ */ React57.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-transparent text-black" }, /* @__PURE__ */ React57.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React57.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ React57.createElement(
+  ))), /* @__PURE__ */ React58.createElement("div", null, /* @__PURE__ */ React58.createElement("div", { className: "text-xs" }, "Download on the"), /* @__PURE__ */ React58.createElement("div", { className: "font-sans -mt-1 text-2xl font-semibold" }, "App Store"))) : /* @__PURE__ */ React58.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-transparent text-black" }, /* @__PURE__ */ React58.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React58.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "currentColor",
       d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
     }
-  ))), /* @__PURE__ */ React57.createElement("div", null, /* @__PURE__ */ React57.createElement("div", { className: "text-xs" }, "Download on the"), /* @__PURE__ */ React57.createElement("div", { className: "font-sans -mt-1 text-2xl font-semibold" }, "App Store"))) : props.mode === "dark" ? /* @__PURE__ */ React57.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white" }, /* @__PURE__ */ React57.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React57.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ React57.createElement(
+  ))), /* @__PURE__ */ React58.createElement("div", null, /* @__PURE__ */ React58.createElement("div", { className: "text-xs" }, "Download on the"), /* @__PURE__ */ React58.createElement("div", { className: "font-sans -mt-1 text-2xl font-semibold" }, "App Store"))) : props.mode === "dark" ? /* @__PURE__ */ React58.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white" }, /* @__PURE__ */ React58.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React58.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#FFD400",
       d: "M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7  c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
     }
-  ), /* @__PURE__ */ React57.createElement(
+  ), /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#FF3333",
       d: "M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3  c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
     }
-  ), /* @__PURE__ */ React57.createElement(
+  ), /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#48FF48",
       d: "M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1  c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
     }
-  ), /* @__PURE__ */ React57.createElement(
+  ), /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#3BCCFF",
       d: "M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6  c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
     }
-  ))), /* @__PURE__ */ React57.createElement("div", null, /* @__PURE__ */ React57.createElement("div", { className: "text-xs" }, "GET IT ON"), /* @__PURE__ */ React57.createElement("div", { className: "font-sans -mt-1 text-xl font-semibold" }, "Google Play"))) : /* @__PURE__ */ React57.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-white text-black" }, /* @__PURE__ */ React57.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React57.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ React57.createElement(
+  ))), /* @__PURE__ */ React58.createElement("div", null, /* @__PURE__ */ React58.createElement("div", { className: "text-xs" }, "GET IT ON"), /* @__PURE__ */ React58.createElement("div", { className: "font-sans -mt-1 text-xl font-semibold" }, "Google Play"))) : /* @__PURE__ */ React58.createElement("div", { className: "mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-white text-black" }, /* @__PURE__ */ React58.createElement("div", { className: "mr-3" }, /* @__PURE__ */ React58.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#FFD400",
       d: "M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7  c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
     }
-  ), /* @__PURE__ */ React57.createElement(
+  ), /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#FF3333",
       d: "M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3  c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
     }
-  ), /* @__PURE__ */ React57.createElement(
+  ), /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#48FF48",
       d: "M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1  c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
     }
-  ), /* @__PURE__ */ React57.createElement(
+  ), /* @__PURE__ */ React58.createElement(
     "path",
     {
       fill: "#3BCCFF",
       d: "M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6  c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
     }
-  ))), /* @__PURE__ */ React57.createElement("div", null, /* @__PURE__ */ React57.createElement("div", { className: "text-xs" }, "GET IT ON"), /* @__PURE__ */ React57.createElement("div", { className: "font-sans -mt-1 text-xl font-semibold" }, "Google Play")))));
+  ))), /* @__PURE__ */ React58.createElement("div", null, /* @__PURE__ */ React58.createElement("div", { className: "text-xs" }, "GET IT ON"), /* @__PURE__ */ React58.createElement("div", { className: "font-sans -mt-1 text-xl font-semibold" }, "Google Play")))));
 };
 
 // src/elements/HawaLogoButton.tsx
-import React58 from "react";
+import React59 from "react";
 var HawaLogoButton = (props) => {
   let isArabic = props.lang === "ar";
   let logoElement = "";
   switch (props.logo?.toLowerCase()) {
     case "google":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "img",
         {
           src: "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg",
@@ -6256,10 +6457,10 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "github":
-      logoElement = /* @__PURE__ */ React58.createElement("svg", { width: "32px", height: "32px", viewBox: "0 0 32 32", className: "h-7 w-7" }, /* @__PURE__ */ React58.createElement("path", { d: "M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" }));
+      logoElement = /* @__PURE__ */ React59.createElement("svg", { width: "32px", height: "32px", viewBox: "0 0 32 32", className: "h-7 w-7" }, /* @__PURE__ */ React59.createElement("path", { d: "M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" }));
       break;
     case "twitter":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "svg",
         {
           version: "1.1",
@@ -6268,7 +6469,7 @@ var HawaLogoButton = (props) => {
           className: "h-5 w-5",
           viewBox: "0 0 512.002 512.002"
         },
-        /* @__PURE__ */ React58.createElement(
+        /* @__PURE__ */ React59.createElement(
           "path",
           {
             d: "M500.398,94.784c-8.043,3.567-16.313,6.578-24.763,9.023c10.004-11.314,17.631-24.626,22.287-39.193\n     c1.044-3.265-0.038-6.839-2.722-8.975c-2.681-2.137-6.405-2.393-9.356-0.644c-17.945,10.643-37.305,18.292-57.605,22.764\n     c-20.449-19.981-48.222-31.353-76.934-31.353c-60.606,0-109.913,49.306-109.913,109.91c0,4.773,0.302,9.52,0.9,14.201\n     c-75.206-6.603-145.124-43.568-193.136-102.463c-1.711-2.099-4.347-3.231-7.046-3.014c-2.7,0.211-5.127,1.734-6.491,4.075\n     c-9.738,16.709-14.886,35.82-14.886,55.265c0,26.484,9.455,51.611,26.158,71.246c-5.079-1.759-10.007-3.957-14.711-6.568\n     c-2.525-1.406-5.607-1.384-8.116,0.054c-2.51,1.439-4.084,4.084-4.151,6.976c-0.012,0.487-0.012,0.974-0.012,1.468\n     c0,39.531,21.276,75.122,53.805,94.52c-2.795-0.279-5.587-0.684-8.362-1.214c-2.861-0.547-5.802,0.456-7.731,2.638\n     c-1.932,2.18-2.572,5.219-1.681,7.994c12.04,37.591,43.039,65.24,80.514,73.67c-31.082,19.468-66.626,29.665-103.939,29.665\n     c-7.786,0-15.616-0.457-23.279-1.364c-3.807-0.453-7.447,1.795-8.744,5.416c-1.297,3.622,0.078,7.66,3.316,9.736\n     c47.935,30.735,103.361,46.98,160.284,46.98c111.903,0,181.907-52.769,220.926-97.037c48.657-55.199,76.562-128.261,76.562-200.451\n     c0-3.016-0.046-6.061-0.139-9.097c19.197-14.463,35.724-31.967,49.173-52.085c2.043-3.055,1.822-7.094-0.545-9.906\n     C507.7,94.204,503.76,93.294,500.398,94.784z"
@@ -6277,7 +6478,7 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "mada":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "img",
         {
           src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",
@@ -6286,7 +6487,7 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "stcpay":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "img",
         {
           src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",
@@ -6295,7 +6496,7 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "visa/master":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "img",
         {
           src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",
@@ -6304,7 +6505,7 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "paypal":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "img",
         {
           src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",
@@ -6313,7 +6514,7 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "googlepay":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "img",
         {
           src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",
@@ -6322,7 +6523,7 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "applepay":
-      logoElement = /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement(
         "img",
         {
           src: "https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",
@@ -6331,12 +6532,12 @@ var HawaLogoButton = (props) => {
       );
       break;
     case "wallet":
-      logoElement = /* @__PURE__ */ React58.createElement("svg", { version: "1.1", viewBox: "0 0 223 223", className: "h-6 w-6" }, /* @__PURE__ */ React58.createElement("g", null, /* @__PURE__ */ React58.createElement(
+      logoElement = /* @__PURE__ */ React59.createElement("svg", { version: "1.1", viewBox: "0 0 223 223", className: "h-6 w-6" }, /* @__PURE__ */ React59.createElement("g", null, /* @__PURE__ */ React59.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__ */ React58.createElement(
+      ), /* @__PURE__ */ React59.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"
@@ -6346,21 +6547,21 @@ var HawaLogoButton = (props) => {
     default:
       break;
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "button",
     {
       dir: props.direction,
       onClick: props.onClick,
       className: "my-2 flex h-11 w-full flex-row justify-center rounded border bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
     },
-    /* @__PURE__ */ React58.createElement("div", { className: "flex h-full flex-row items-center justify-end" }, logoElement),
-    /* @__PURE__ */ React58.createElement("div", { style: { width: 10 } }),
-    /* @__PURE__ */ React58.createElement("div", { className: "flex h-full flex-col items-start justify-center dark:text-black" }, props.buttonText)
+    /* @__PURE__ */ React59.createElement("div", { className: "flex h-full flex-row items-center justify-end" }, logoElement),
+    /* @__PURE__ */ React59.createElement("div", { style: { width: 10 } }),
+    /* @__PURE__ */ React59.createElement("div", { className: "flex h-full flex-col items-start justify-center dark:text-black" }, props.buttonText)
   );
 };
 
 // src/elements/Carousel.tsx
-import React59 from "react";
+import React60 from "react";
 
 // src/hooks/useCarousel.ts
 import { useState as useState30, useRef as useRef11 } from "react";
@@ -6423,7 +6624,7 @@ var Carousel = ({ images }) => {
     handleMouseUp,
     handleMouseMove
   } = useCarousel_default(imageWidth);
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
       className: "flex cursor-pointer snap-x  gap-4 overflow-x-scroll",
@@ -6433,7 +6634,7 @@ var Carousel = ({ images }) => {
       onMouseMove: handleMouseMove,
       ref: containerRef
     },
-    images.map((image, index) => /* @__PURE__ */ React59.createElement("div", { key: index, className: "h-40 w-60 flex-shrink-0" }, /* @__PURE__ */ React59.createElement(
+    images.map((image, index) => /* @__PURE__ */ React60.createElement("div", { key: index, className: "h-40 w-60 flex-shrink-0" }, /* @__PURE__ */ React60.createElement(
       "img",
       {
         src: image,
@@ -6445,10 +6646,10 @@ var Carousel = ({ images }) => {
 };
 
 // src/elements/Input.tsx
-import * as React60 from "react";
-var Input = React60.forwardRef(
+import * as React61 from "react";
+var Input = React61.forwardRef(
   ({ className, preview, type, ...props }, ref) => {
-    return /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React61.createElement(
       "input",
       {
         type,
@@ -6467,7 +6668,7 @@ var Input = React60.forwardRef(
 Input.displayName = "Input";
 
 // src/elements/InterfaceSettings.tsx
-import React61, { useState as useState32 } from "react";
+import React62, { useState as useState32 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -6479,7 +6680,7 @@ var InterfaceSettings = ({
     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__ */ React62.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React62.createElement(
     HawaRadio,
     {
       width,
@@ -6494,7 +6695,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ React61.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     HawaRadio,
     {
       width,
@@ -6507,7 +6708,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ React61.createElement(
+          label: /* @__PURE__ */ React62.createElement(
             "svg",
             {
               width: "15",
@@ -6517,7 +6718,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__ */ React62.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",
@@ -6530,7 +6731,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ React61.createElement(
+          label: /* @__PURE__ */ React62.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -6544,7 +6745,7 @@ var InterfaceSettings = ({
               "stroke-linejoin": "round",
               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__ */ React62.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -6552,211 +6753,6 @@ var InterfaceSettings = ({
   ));
 };
 
-// src/elements/DropdownMenu.tsx
-import * as React62 from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-var DropdownMenuRoot = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuSubTrigger = React62.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React62.createElement(
-    "svg",
-    {
-      "aria-label": "Chevron Right Icon",
-      stroke: "currentColor",
-      fill: "currentColor",
-      "stroke-width": "0",
-      viewBox: "0 0 16 16",
-      height: "1em",
-      width: "1em",
-      className: cn(props.dir === "rtl" ? "rotate-180" : "")
-    },
-    /* @__PURE__ */ React62.createElement(
-      "path",
-      {
-        "fill-rule": "evenodd",
-        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"
-      }
-    )
-  )
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React62.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React62.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React62.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-)));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React62.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React62.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    checked,
-    ...props
-  },
-  /* @__PURE__ */ React62.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React62.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React62.createElement(
-    "svg",
-    {
-      "aria-label": "Check Mark",
-      stroke: "currentColor",
-      fill: "currentColor",
-      "stroke-width": "0",
-      viewBox: "0 0 512 512",
-      height: "0.60em",
-      width: "0.60em"
-    },
-    /* @__PURE__ */ React62.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" })
-  ), " ")),
-  children
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React62.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React62.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React62.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React62.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      "aria-label": "Circle",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      className: "h-2 w-2 fill-current"
-    },
-    /* @__PURE__ */ React62.createElement("circle", { cx: "12", cy: "12", r: "10" })
-  ))),
-  children
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React62.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React62.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React62.createElement(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var DropdownMenuShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ React62.createElement(
-    "span",
-    {
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...props
-    }
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenu2 = ({
-  trigger,
-  items,
-  direction,
-  onItemSelect,
-  sideOffset,
-  side,
-  className,
-  triggerClassname,
-  align,
-  alignOffset
-}) => {
-  return /* @__PURE__ */ React62.createElement(DropdownMenuRoot, { dir: direction }, /* @__PURE__ */ React62.createElement(DropdownMenuTrigger, { className: triggerClassname }, trigger), /* @__PURE__ */ React62.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React62.createElement(
-    DropdownMenuContent,
-    {
-      side,
-      sideOffset,
-      className: cn(className),
-      align,
-      alignOffset
-    },
-    items.map((item, index) => {
-      return item.subitems ? /* @__PURE__ */ React62.createElement(DropdownMenuSub, null, /* @__PURE__ */ React62.createElement(DropdownMenuSubTrigger, { dir: direction }, item.label), /* @__PURE__ */ React62.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React62.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React62.createElement(
-        DropdownMenuItem,
-        {
-          onSelect: () => subitem.action(),
-          key: subIndex
-        },
-        subitem.label
-      ))))) : /* @__PURE__ */ React62.createElement(DropdownMenuItem, { key: index, onSelect: () => item.action() }, item.label);
-    })
-  )));
-};
-
 // src/elements/Popover.tsx
 import * as React63 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -7659,7 +7655,7 @@ var AppLayout = ({
         /* @__PURE__ */ React76.createElement("div", null, props.email)
       ) : null,
       /* @__PURE__ */ React76.createElement(
-        DropdownMenu2,
+        DropdownMenu,
         {
           triggerClassname: "mx-2",
           align: "end",
@@ -8364,7 +8360,7 @@ var HawaAppLayoutSimplified = ({
         /* @__PURE__ */ React78.createElement("div", null, props.email)
       ) : null,
       /* @__PURE__ */ React78.createElement(
-        DropdownMenu2,
+        DropdownMenu,
         {
           triggerClassname: "mx-2",
           align: "end",
@@ -10659,7 +10655,7 @@ export {
   CreditCardForm,
   DragDropImages,
   DraggableCard,
-  DropdownMenu2 as DropdownMenu,
+  DropdownMenu,
   EmptyState,
   FloatingComment,
   FloatingCommentExec,