@sikka/hawa 0.38.14-next → 0.40.0-next

package/dist/elements/index.js

@@ -1016,14 +1016,37 @@ var DropdownMenu = ({
   );
 };
 var DropdownMenuRadio = (props) => {
-  return /* @__PURE__ */ React5.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React5.createElement(DropdownMenuTrigger, { asChild: true }, props.trigger), /* @__PURE__ */ React5.createElement(DropdownMenuContent, { align: props.align, side: props.side }, props.label && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(DropdownMenuLabel, null, props.label), /* @__PURE__ */ React5.createElement(DropdownMenuSeparator, null)), /* @__PURE__ */ React5.createElement(
-    DropdownMenuRadioGroup,
+  const ariaLabel = props.label ? `${props.label} radio group` : void 0;
+  const ariaLabelledby = props.label ? `${props.label}-label` : void 0;
+  return /* @__PURE__ */ React5.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React5.createElement(DropdownMenuTrigger, { asChild: true }, props.trigger), /* @__PURE__ */ React5.createElement(
+    DropdownMenuContent,
     {
-      value: props.value,
-      onValueChange: props.onValueChange
+      align: props.align,
+      side: props.side,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      ...props.contentProps
     },
-    props.options.map((opt, i) => /* @__PURE__ */ React5.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
-  )));
+    props.label && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(DropdownMenuLabel, { id: `${props.label}-label` }, props.label), /* @__PURE__ */ React5.createElement(DropdownMenuSeparator, null)),
+    /* @__PURE__ */ React5.createElement(
+      DropdownMenuRadioGroup,
+      {
+        value: props.value,
+        onValueChange: props.onValueChange,
+        ...props.radioGroupProps
+      },
+      props.options.map((opt, i) => /* @__PURE__ */ React5.createElement(
+        DropdownMenuRadioItem,
+        {
+          key: i,
+          ...opt.props,
+          value: opt.value,
+          "aria-checked": props.value === opt.value
+        },
+        opt.label
+      ))
+    )
+  ));
 };
 
 // elements/accordion/Accordion.tsx
@@ -1468,6 +1491,13 @@ var Logos = {
       d: "M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"
     }
   )),
+  x: (props) => /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ import_react6.default.createElement("title", null, "X"), /* @__PURE__ */ import_react6.default.createElement(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+    }
+  )),
   instagram: (props) => /* @__PURE__ */ import_react6.default.createElement(
     "svg",
     {
@@ -1556,6 +1586,23 @@ var Logos = {
       d: "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
     }
   )),
+  googleplay: (props) => /* @__PURE__ */ import_react6.default.createElement(
+    "svg",
+    {
+      role: "img",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react6.default.createElement("title", null, "Google Play"),
+    /* @__PURE__ */ import_react6.default.createElement(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594zM1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924zm12.207 10.065l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973zm0 2.067l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z"
+      }
+    )
+  ),
   apple: (props) => /* @__PURE__ */ import_react6.default.createElement("svg", { role: "img", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ import_react6.default.createElement(
     "path",
     {
@@ -1563,6 +1610,23 @@ var Logos = {
       fill: "currentColor"
     }
   )),
+  applestore: (props) => /* @__PURE__ */ import_react6.default.createElement(
+    "svg",
+    {
+      role: "img",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react6.default.createElement("title", null, "App Store"),
+    /* @__PURE__ */ import_react6.default.createElement(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M8.8086 14.9194l6.1107-11.0368c.0837-.1513.1682-.302.2437-.4584.0685-.142.1267-.2854.1646-.4403.0803-.3259.0588-.6656-.066-.9767-.1238-.3095-.3417-.5678-.6201-.7355a1.4175 1.4175 0 0 0-.921-.1924c-.3207.043-.6135.1935-.8443.4288-.1094.1118-.1996.2361-.2832.369-.092.1463-.175.2979-.259.4492l-.3864.6979-.3865-.6979c-.0837-.1515-.1667-.303-.2587-.4492-.0837-.1329-.1739-.2572-.2835-.369-.2305-.2353-.5233-.3857-.844-.429a1.4181 1.4181 0 0 0-.921.1926c-.2784.1677-.4964.426-.6203.7355-.1246.311-.1461.6508-.066.9767.038.155.0962.2984.1648.4403.0753.1564.1598.307.2437.4584l1.248 2.2543-4.8625 8.7825H2.0295c-.1676 0-.3351-.0007-.5026.0092-.1522.009-.3004.0284-.448.0714-.3108.0906-.5822.2798-.7783.548-.195.2665-.3006.5929-.3006.9279 0 .3352.1057.6612.3006.9277.196.2683.4675.4575.7782.548.1477.043.296.0623.4481.0715.1675.01.335.009.5026.009h13.0974c.0171-.0357.059-.1294.1-.2697.415-1.4151-.6156-2.843-2.0347-2.843zM3.113 18.5418l-.7922 1.5008c-.0818.1553-.1644.31-.2384.4705-.067.1458-.124.293-.1611.452-.0785.3346-.0576.6834.0645 1.0029.1212.3175.3346.583.607.7549.2727.172.5891.2416.9013.1975.3139-.044.6005-.1986.8263-.4402.1072-.1148.1954-.2424.2772-.3787.0902-.1503.1714-.3059.2535-.4612L6 19.4636c-.0896-.149-.9473-1.4704-2.887-.9218m20.5861-3.0056a1.4707 1.4707 0 0 0-.779-.5407c-.1476-.0425-.2961-.0616-.4483-.0705-.1678-.0099-.3352-.0091-.503-.0091H18.648l-4.3891-7.817c-.6655.7005-.9632 1.485-1.0773 2.1976-.1655 1.0333.0367 2.0934.546 3.0004l5.2741 9.3933c.084.1494.167.299.2591.4435.0837.131.1739.2537.2836.364.231.2323.5238.3809.8449.4232.3192.0424.643-.0244.9217-.1899.2784-.1653.4968-.4204.621-.7257.1246-.3072.146-.6425.0658-.9641-.0381-.1529-.0962-.2945-.165-.4346-.0753-.1543-.1598-.303-.2438-.4524l-1.216-2.1662h1.596c.1677 0 .3351.0009.5029-.009.1522-.009.3007-.028.4483-.0705a1.4707 1.4707 0 0 0 .779-.5407A1.5386 1.5386 0 0 0 24 16.452a1.539 1.539 0 0 0-.3009-.9158Z"
+      }
+    )
+  ),
   paypal: (props) => /* @__PURE__ */ import_react6.default.createElement("svg", { role: "img", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ import_react6.default.createElement(
     "path",
     {
@@ -1595,6 +1659,40 @@ var Logos = {
       ...props
     },
     /* @__PURE__ */ import_react6.default.createElement("path", { d: "M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" })
+  ),
+  visa: (props) => /* @__PURE__ */ import_react6.default.createElement(
+    "svg",
+    {
+      role: "img",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react6.default.createElement("title", null, "Visa"),
+    /* @__PURE__ */ import_react6.default.createElement(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"
+      }
+    )
+  ),
+  mastercard: (props) => /* @__PURE__ */ import_react6.default.createElement(
+    "svg",
+    {
+      role: "img",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react6.default.createElement("title", null, "MasterCard"),
+    /* @__PURE__ */ import_react6.default.createElement(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z"
+      }
+    )
   )
 };
 
@@ -2101,7 +2199,7 @@ var DialogFooter = ({
   "div",
   {
     className: cn(
-      "hawa-flex hawa-flex-col-reverse sm:hawa-flex-row sm:hawa-justify-end sm:hawa-gap-2",
+      "hawa-flex hawa-flex-col-reverse sm:hawa-flex-row sm:hawa-justify-end hawa-gap-2",
       className
     ),
     ...props
@@ -2309,12 +2407,12 @@ var Button = React17.forwardRef(
     children,
     labelProps,
     showHelperText = false,
-    inForm = false,
+    asInput = false,
     ...props
   }, ref) => {
     const Comp = "button";
     const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
-    if (inForm) {
+    if (asInput) {
       return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React17.createElement(Label2, { ...labelProps }, label), /* @__PURE__ */ React17.createElement(
         Comp,
         {
@@ -3059,7 +3157,7 @@ var DataTable = ({
         paginationPosition === "top" ? "hawa-flex-col-reverse" : "hawa-flex-col"
       )
     },
-    /* @__PURE__ */ React23.createElement("div", { className: "hawa-rounded-md" }, /* @__PURE__ */ React23.createElement(Table, null, table.getAllColumns().length > 0 && /* @__PURE__ */ React23.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React23.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+    /* @__PURE__ */ React23.createElement("div", { className: "hawa-rounded-md" }, /* @__PURE__ */ React23.createElement(Table, null, !props.hideHeader && table.getAllColumns().length > 0 && /* @__PURE__ */ React23.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React23.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
       var _a2;
       let isSortable = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.sortable;
       return /* @__PURE__ */ React23.createElement(
@@ -3454,6 +3552,7 @@ var Radio = (0, import_react13.forwardRef)(
     tabsContainerClassName,
     forceHideHelperText = false,
     onChange,
+    containerClassNames,
     ...props
   }, ref) => {
     var _a, _b, _c;
@@ -3509,161 +3608,203 @@ var Radio = (0, import_react13.forwardRef)(
     ];
     switch (design) {
       case "tabs":
-        return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react13.default.createElement(
-          "ul",
+        return /* @__PURE__ */ import_react13.default.createElement(
+          "div",
           {
-            ref: parentRef,
             className: cn(
-              props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
-              "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
-              orientationStyle[orientation],
-              widthStyle[width],
-              tabsContainerClassName
+              "hawa-gap-2 hawa-flex hawa-flex-col",
+              containerClassNames == null ? void 0 : containerClassNames.tabs
             )
           },
-          (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
-            return opt.tooltip ? /* @__PURE__ */ import_react13.default.createElement(
-              PopoverRoot,
-              {
-                key: o,
-                open: o === openTooltip,
-                onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
-              },
-              /* @__PURE__ */ import_react13.default.createElement(
-                PopoverTrigger,
+          props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label),
+          /* @__PURE__ */ import_react13.default.createElement(
+            "ul",
+            {
+              ref: parentRef,
+              className: cn(
+                props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
+                "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
+                orientationStyle[orientation],
+                widthStyle[width],
+                tabsContainerClassName
+              )
+            },
+            (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
+              return opt.tooltip ? /* @__PURE__ */ import_react13.default.createElement(
+                PopoverRoot,
                 {
-                  onMouseEnter: () => setOpenTooltip(o),
-                  onMouseLeave: () => setOpenTooltip(null),
-                  asChild: true
+                  key: o,
+                  open: o === openTooltip,
+                  onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
                 },
                 /* @__PURE__ */ import_react13.default.createElement(
-                  "li",
+                  PopoverTrigger,
                   {
-                    "aria-current": "page",
-                    onClick: () => {
-                      if (props.disabled || opt.disabled)
-                        return;
-                      handleChange(opt);
+                    onMouseEnter: () => setOpenTooltip(o),
+                    onMouseLeave: () => setOpenTooltip(null),
+                    asChild: true
+                  },
+                  /* @__PURE__ */ import_react13.default.createElement(
+                    "li",
+                    {
+                      "aria-current": "page",
+                      onClick: () => {
+                        if (props.disabled || opt.disabled)
+                          return;
+                        handleChange(opt);
+                      },
+                      className: cn(
+                        ...radio_option_tabs_styling,
+                        selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                      )
                     },
-                    className: cn(
-                      ...radio_option_tabs_styling,
-                      selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-                    )
+                    opt.icon && opt.icon,
+                    opt.label
+                  )
+                ),
+                /* @__PURE__ */ import_react13.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
+              ) : /* @__PURE__ */ import_react13.default.createElement(
+                "li",
+                {
+                  key: o,
+                  "aria-current": "page",
+                  onClick: () => {
+                    if (props.disabled || opt.disabled)
+                      return;
+                    handleChange(opt);
                   },
-                  opt.icon && opt.icon,
-                  opt.label
-                )
+                  className: cn(
+                    ...radio_option_tabs_styling,
+                    selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                  )
+                },
+                opt.icon && opt.icon,
+                opt.label
+              );
+            })
+          ),
+          !forceHideHelperText && /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText })
+        );
+      case "bordered":
+        return /* @__PURE__ */ import_react13.default.createElement(
+          "div",
+          {
+            className: cn(
+              orientationStyle[orientation],
+              "hawa-gap-4",
+              containerClassNames == null ? void 0 : containerClassNames.bordered
+            )
+          },
+          props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react13.default.createElement(
+            "div",
+            {
+              className: cn(
+                "radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
+                props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
               ),
-              /* @__PURE__ */ import_react13.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
-            ) : /* @__PURE__ */ import_react13.default.createElement(
-              "li",
+              key: i + 1
+            },
+            /* @__PURE__ */ import_react13.default.createElement(
+              "input",
               {
-                key: o,
-                "aria-current": "page",
-                onClick: () => {
-                  if (props.disabled || opt.disabled)
-                    return;
-                  handleChange(opt);
-                },
+                disabled: opt.disabled,
+                id: opt.value.toString(),
+                type: "radio",
+                value: opt.value,
+                name,
+                onChange: () => handleChange(opt)
+              }
+            ),
+            /* @__PURE__ */ import_react13.default.createElement(
+              "label",
+              {
+                htmlFor: opt.value.toString(),
                 className: cn(
-                  ...radio_option_tabs_styling,
-                  selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                  "hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
+                  opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
                 )
               },
-              opt.icon && opt.icon,
               opt.label
-            );
-          })
-        ), !forceHideHelperText && /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText }));
-      case "bordered":
-        return /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react13.default.createElement(
-          "div",
+            )
+          )))
+        );
+      case "cards":
+        return /* @__PURE__ */ import_react13.default.createElement(
+          "ul",
           {
             className: cn(
-              "radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
-              props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
-            ),
-            key: i + 1
+              orientationStyle[orientation],
+              "hawa-gap-4",
+              containerClassNames == null ? void 0 : containerClassNames.cards
+            )
           },
-          /* @__PURE__ */ import_react13.default.createElement(
+          (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react13.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react13.default.createElement(
             "input",
             {
-              disabled: opt.disabled,
-              id: opt.value.toString(),
               type: "radio",
-              value: opt.value,
+              id: opt.value.toString(),
               name,
-              onChange: () => handleChange(opt)
+              value: opt.value.toString(),
+              className: "hawa-peer hawa-hidden",
+              required: true,
+              disabled: opt.disabled
             }
-          ),
-          /* @__PURE__ */ import_react13.default.createElement(
+          ), /* @__PURE__ */ import_react13.default.createElement(
             "label",
             {
               htmlFor: opt.value.toString(),
               className: cn(
-                "hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
-                opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
+                "hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+                opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
               )
             },
-            opt.label
-          )
-        ))));
-      case "cards":
-        return /* @__PURE__ */ import_react13.default.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react13.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react13.default.createElement(
-          "input",
-          {
-            type: "radio",
-            id: opt.value.toString(),
-            name,
-            value: opt.value.toString(),
-            className: "hawa-peer hawa-hidden",
-            required: true,
-            disabled: opt.disabled
-          }
-        ), /* @__PURE__ */ import_react13.default.createElement(
-          "label",
-          {
-            htmlFor: opt.value.toString(),
-            className: cn(
-              "hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
-              opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
-            )
-          },
-          /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
-        ))));
+            /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
+          )))
+        );
       default:
-        return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
+        return /* @__PURE__ */ import_react13.default.createElement(
           "div",
           {
             className: cn(
-              "radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
-              props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
-            ),
-            key: i + 1
+              "hawa-flex hawa-flex-col hawa-gap-2",
+              containerClassNames == null ? void 0 : containerClassNames.default
+            )
           },
-          /* @__PURE__ */ import_react13.default.createElement(
-            "input",
-            {
-              disabled: opt.disabled,
-              id: opt.value.toString(),
-              type: "radio",
-              value: opt.value,
-              name,
-              onChange: () => handleChange(opt)
-            }
-          ),
-          /* @__PURE__ */ import_react13.default.createElement(
-            "label",
+          props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label),
+          /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
+            "div",
             {
-              htmlFor: opt.value.toString(),
               className: cn(
-                "hawa-text-sm hawa-font-medium  dark:hawa-text-white",
-                opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
-              )
+                "radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
+                props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
+              ),
+              key: i + 1
             },
-            opt.label
-          )
-        ))), /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText }));
+            /* @__PURE__ */ import_react13.default.createElement(
+              "input",
+              {
+                disabled: opt.disabled,
+                id: opt.value.toString(),
+                type: "radio",
+                value: opt.value,
+                name,
+                onChange: () => handleChange(opt)
+              }
+            ),
+            /* @__PURE__ */ import_react13.default.createElement(
+              "label",
+              {
+                htmlFor: opt.value.toString(),
+                className: cn(
+                  "hawa-text-sm hawa-font-medium  dark:hawa-text-white",
+                  opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
+                )
+              },
+              opt.label
+            )
+          ))),
+          /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText })
+        );
     }
   }
 );
@@ -4320,7 +4461,7 @@ var SortButton = (props) => {
 };
 
 // elements/tabs/Tabs.tsx
-var React42 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 
 // hooks/useIsomorphicEffect.ts
 var import_react16 = require("react");
@@ -4394,37 +4535,6 @@ var import_react29 = require("react");
 
 // hooks/useMeasureDirty.ts
 var import_react30 = require("react");
-var useMeasureDirty = (ref) => {
-  const frame = (0, import_react30.useRef)(0);
-  const [rect, set] = (0, import_react30.useState)({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0
-  });
-  const [observer] = (0, import_react30.useState)(
-    () => new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        cancelAnimationFrame(frame.current);
-        frame.current = requestAnimationFrame(() => {
-          if (ref.current) {
-            set(entry.contentRect);
-          }
-        });
-      }
-    })
-  );
-  (0, import_react30.useEffect)(() => {
-    observer.disconnect();
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-  }, [ref]);
-  return rect;
-};
 
 // hooks/useClickOutside.ts
 var import_react31 = require("react");
@@ -4432,75 +4542,52 @@ var import_react31 = require("react");
 // hooks/useShortcuts.ts
 var import_react32 = require("react");
 
+// hooks/useWindowEvent.ts
+var import_react33 = require("react");
+function useWindowEvent(type, listener, options) {
+  (0, import_react33.useEffect)(() => {
+    window.addEventListener(type, listener, options);
+    return () => window.removeEventListener(type, listener, options);
+  }, [type, listener]);
+}
+
+// hooks/useViewportSize.ts
+var import_react34 = require("react");
+var eventListerOptions = {
+  passive: true
+};
+function useViewportSize() {
+  const [windowSize, setWindowSize] = (0, import_react34.useState)({
+    width: 0,
+    height: 0
+  });
+  const setSize = (0, import_react34.useCallback)(() => {
+    setWindowSize({
+      width: window.innerWidth || 0,
+      height: window.innerHeight || 0
+    });
+  }, []);
+  useWindowEvent("resize", setSize, eventListerOptions);
+  useWindowEvent("orientationchange", setSize, eventListerOptions);
+  (0, import_react34.useEffect)(setSize, []);
+  return windowSize;
+}
+
 // elements/tabs/Tabs.tsx
+var Popover2 = __toESM(require("@radix-ui/react-popover"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 var import_tailwind_variants = require("tailwind-variants");
 
-// elements/floatBox/FloatBox.tsx
-var React40 = __toESM(require("react"));
-var FloatBox = ({
-  className,
-  open,
-  side = "bottom",
-  sideOffset = 40,
-  align = "center",
-  withArrow = false,
-  ...props
-}) => {
-  let stylesMap = {
-    bottom: {
-      start: { top: sideOffset, insetInlineStart: 0 },
-      center: { top: sideOffset },
-      end: { top: sideOffset, insetInlineEnd: 0 }
-    },
-    top: {
-      start: { bottom: sideOffset, insetInlineStart: 0 },
-      center: { bottom: sideOffset },
-      end: { bottom: sideOffset, insetInlineEnd: 0 }
-    },
-    right: {
-      start: { left: sideOffset, top: -5 },
-      center: { left: sideOffset },
-      end: { left: sideOffset, bottom: 0 }
-    },
-    left: {
-      start: { right: sideOffset, top: 0 },
-      center: { right: sideOffset },
-      end: { right: sideOffset, bottom: 0 }
-    }
-  };
-  const arrowDirection = {
-    top: "hawa-arrow-default-bottom",
-    bottom: "hawa-arrow-default-top",
-    right: "hawa-arrow-default-left",
-    left: "hawa-arrow-default-right"
-  };
-  return /* @__PURE__ */ React40.createElement(
-    "div",
-    {
-      className: cn(
-        "data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border  hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
-        className
-      ),
-      style: { ...stylesMap[side][align] },
-      "data-side": side,
-      "data-floatbox-state": open ? "open" : "closed"
-    },
-    withArrow && /* @__PURE__ */ React40.createElement("div", { className: cn(arrowDirection[side]) }),
-    /* @__PURE__ */ React40.createElement("span", null, props.children)
-  );
-};
-
 // elements/scrollArea/ScrollArea.tsx
-var React41 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
-var ScrollArea = React41.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
-  const scrollAreaRef = React41.useRef(null);
-  const isDragging = React41.useRef(false);
-  const startPos = React41.useRef({ x: 0, y: 0 });
-  const scrollPos = React41.useRef({ top: 0, left: 0 });
-  const [showLeftFade, setShowLeftFade] = React41.useState(false);
-  const [showRightFade, setShowRightFade] = React41.useState(false);
+var ScrollArea = React40.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React40.useRef(null);
+  const isDragging = React40.useRef(false);
+  const startPos = React40.useRef({ x: 0, y: 0 });
+  const scrollPos = React40.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React40.useState(false);
+  const [showRightFade, setShowRightFade] = React40.useState(false);
   const checkOverflow = () => {
     if (scrollAreaRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
@@ -4537,7 +4624,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
   };
-  React41.useEffect(() => {
+  React40.useEffect(() => {
     checkOverflow();
     if (scrollAreaRef.current) {
       scrollAreaRef.current.addEventListener("scroll", checkOverflow);
@@ -4550,14 +4637,14 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
       window.removeEventListener("resize", checkOverflow);
     };
   }, []);
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React40.createElement(
     ScrollAreaPrimitive.Root,
     {
       ref,
       className: cn("hawa-relative hawa-overflow-hidden", className),
       ...props
     },
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React40.createElement(
       "div",
       {
         className: cn(
@@ -4566,7 +4653,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React40.createElement(
       "div",
       {
         className: cn(
@@ -4575,7 +4662,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React40.createElement(
       ScrollAreaPrimitive.Viewport,
       {
         ref: scrollAreaRef,
@@ -4584,12 +4671,12 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
       },
       children
     ),
-    /* @__PURE__ */ React41.createElement(ScrollBar, { orientation }),
-    /* @__PURE__ */ React41.createElement(ScrollAreaPrimitive.Corner, null)
+    /* @__PURE__ */ React40.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React40.createElement(ScrollAreaPrimitive.Corner, null)
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React41.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React41.createElement(
+var ScrollBar = React40.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React40.createElement(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -4602,7 +4689,7 @@ var ScrollBar = React41.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React40.createElement(
     ScrollAreaPrimitive.ScrollAreaThumb,
     {
       className: cn(
@@ -4673,39 +4760,27 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React42.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React42.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React42.createElement(
-  TabsPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "hawa-flex hawa-gap-2",
-      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React42.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
-));
-var TabsList = React42.forwardRef(({ className, classNames, ...props }, ref) => {
-  const { orientation, variant } = React42.useContext(TabsContext);
-  const [size, setSize] = React42.useState(
-    typeof window !== "undefined" && window.innerWidth || 1200
-  );
-  React42.useEffect(() => {
-    if (typeof window !== "undefined") {
-      const resize = () => {
-        setSize(window.innerWidth);
-      };
-      resize();
-      window.addEventListener("resize", resize);
-      return () => {
-        window.removeEventListener("resize", resize);
-      };
-    }
-  }, []);
-  if (props.scrollable && size < 768 && orientation === "horizontal") {
-    return /* @__PURE__ */ React42.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React42.createElement(
+var TabsContext = React41.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
+var Tabs = React41.forwardRef(
+  ({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React41.createElement(
+    TabsPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React41.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
+  )
+);
+var TabsList = React41.forwardRef(({ className, classNames, ...props }, ref) => {
+  const { orientation, variant, scrollable } = React41.useContext(TabsContext);
+  const { width } = useViewportSize();
+  if (scrollable && width < 768 && orientation === "horizontal") {
+    return /* @__PURE__ */ React41.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React41.createElement(
       TabsPrimitive.List,
       {
         ref,
@@ -4718,7 +4793,7 @@ var TabsList = React42.forwardRef(({ className, classNames, ...props }, ref) =>
       }
     ));
   } else {
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React41.createElement(
       TabsPrimitive.List,
       {
         ref,
@@ -4733,37 +4808,52 @@ var TabsList = React42.forwardRef(({ className, classNames, ...props }, ref) =>
     );
   }
 });
-var TabsTrigger = React42.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React42.useContext(TabsContext);
-  const tabTriggerRef = React42.useRef(null);
-  const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React42.createElement(
-    TabsPrimitive.Trigger,
-    {
-      ref: tabTriggerRef,
-      className: cn(
-        tabsTriggerVariant({ variant, orientation }),
-        "hawa-relative",
-        className
-      ),
-      ...props
-    },
-    props.children,
-    chipProps && /* @__PURE__ */ React42.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React42.createElement(
-      FloatBox,
-      {
-        withArrow: true,
-        align: orientation === "vertical" ? "start" : "start",
-        side: orientation === "vertical" ? "right" : "bottom",
-        sideOffset: orientation === "vertical" ? width + 30 : 45,
-        open: props.showPopover
-      },
-      props.popoverContent
-    )
-  );
-});
-var TabsContent = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement(
+var TabsTrigger = React41.forwardRef(
+  ({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
+    const { orientation, variant } = React41.useContext(TabsContext);
+    if (withPopover) {
+      return /* @__PURE__ */ React41.createElement(Popover2.Root, { open: props.showPopover }, /* @__PURE__ */ React41.createElement(Popover2.Anchor, { asChild: true }, /* @__PURE__ */ React41.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React41.createElement(Chip, { ...chipProps })
+      )), /* @__PURE__ */ React41.createElement(
+        Popover2.Content,
+        {
+          onClick: onPopoverClick,
+          asChild: true,
+          className: cn(
+            "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+            "hawa-arrow-default-top hawa-mt-2"
+          )
+        },
+        /* @__PURE__ */ React41.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
+      ));
+    } else {
+      return /* @__PURE__ */ React41.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React41.createElement(Chip, { ...chipProps })
+      );
+    }
+  }
+);
+var TabsContent = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React41.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -4780,7 +4870,7 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // elements/select/Select.tsx
-var import_react33 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_react_select = __toESM(require("react-select"));
 var import_creatable = __toESM(require("react-select/creatable"));
 var import_clsx3 = __toESM(require("clsx"));
@@ -4791,10 +4881,10 @@ var Select = ({
 }) => {
   const NoOption = () => {
     var _a, _b;
-    return /* @__PURE__ */ import_react33.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
+    return /* @__PURE__ */ import_react35.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
   };
   const Control = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ import_react33.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4807,7 +4897,7 @@ var Select = ({
     );
   };
   const Option = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ import_react33.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4828,7 +4918,7 @@ var Select = ({
     ...menuProps
   }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
-    return /* @__PURE__ */ import_react33.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         className: cn(
@@ -4846,7 +4936,7 @@ var Select = ({
   let selectContainerStyles = "hawa-rounded hawa-block hawa-w-full hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm";
   let selectPlaceholderStyles = "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
   let selectIndicatorContainerStyles = "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ";
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     "div",
     {
       className: cn(
@@ -4854,10 +4944,10 @@ var Select = ({
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ import_react33.default.createElement(Label2, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ import_react33.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
+    props.label && /* @__PURE__ */ import_react35.default.createElement(Label2, { ...labelProps }, props.label),
+    props.isLoading ? /* @__PURE__ */ import_react35.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react35.default.createElement(
         import_react_select.default,
         {
           noOptionsMessage: NoOption,
@@ -4891,7 +4981,7 @@ var Select = ({
             //     {...e}
             //   />
             // ),
-            ValueContainer: (e) => /* @__PURE__ */ import_react33.default.createElement(
+            ValueContainer: (e) => /* @__PURE__ */ import_react35.default.createElement(
               "div",
               {
                 className: cn(
@@ -4901,7 +4991,7 @@ var Select = ({
                 ...e
               }
             ),
-            MultiValueContainer: (e) => /* @__PURE__ */ import_react33.default.createElement(
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react35.default.createElement(
               "div",
               {
                 className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
@@ -4920,7 +5010,7 @@ var Select = ({
           isSearchable: props.isSearchable
         }
       )
-    ) : /* @__PURE__ */ import_react33.default.createElement(
+    ) : /* @__PURE__ */ import_react35.default.createElement(
       import_creatable.default,
       {
         formatCreateLabel: (inputValue) => {
@@ -4950,20 +5040,20 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ import_react33.default.createElement(HelperText, { helperText: props.helperText })
+    !props.hideHelperText && /* @__PURE__ */ import_react35.default.createElement(HelperText, { helperText: props.helperText })
   );
 };
 
 // elements/switch/Switch.tsx
-var React44 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
-var Switch = React44.forwardRef(
+var Switch = React43.forwardRef(
   ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
-    const [parentDirection, setParentDirection] = React44.useState(
+    const [parentDirection, setParentDirection] = React43.useState(
       null
     );
-    const parentRef = React44.useRef(null);
-    React44.useEffect(() => {
+    const parentRef = React43.useRef(null);
+    React43.useEffect(() => {
       var _a;
       const parentNode = (_a = parentRef.current) == null ? void 0 : _a.parentNode;
       if (parentNode) {
@@ -4991,13 +5081,13 @@ var Switch = React44.forwardRef(
       full: "hawa-rounded-full",
       inherit: "hawa-rounded-inner"
     };
-    return /* @__PURE__ */ React44.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         className: "hawa-flex hawa-flex-row hawa-items-center",
         ref: parentRef
       },
-      /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React43.createElement(
         SwitchPrimitives.Root,
         {
           className: cn(
@@ -5011,7 +5101,7 @@ var Switch = React44.forwardRef(
           ...props,
           ref
         },
-        /* @__PURE__ */ React44.createElement(
+        /* @__PURE__ */ React43.createElement(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -5025,14 +5115,14 @@ var Switch = React44.forwardRef(
           }
         )
       ),
-      label && /* @__PURE__ */ React44.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
+      label && /* @__PURE__ */ React43.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
     );
   }
 );
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // elements/checkbox/Checkbox.tsx
-var React45 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var Checkbox = ({
   id,
@@ -5052,7 +5142,7 @@ var Checkbox = ({
     lg: 0.9,
     xl: 1
   };
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: cn(
@@ -5060,7 +5150,7 @@ var Checkbox = ({
         size === "default" ? "hawa-items-top" : "hawa-items-center"
       )
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(
       CheckboxElement,
       {
         ...props,
@@ -5070,7 +5160,7 @@ var Checkbox = ({
         id
       }
     ),
-    (label || helperText) && /* @__PURE__ */ React45.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React45.createElement(
+    (label || helperText) && /* @__PURE__ */ React44.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5084,7 +5174,7 @@ var Checkbox = ({
         }
       },
       label
-    ), sublabel && /* @__PURE__ */ React45.createElement(
+    ), sublabel && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5094,7 +5184,7 @@ var Checkbox = ({
         )
       },
       sublabel
-    ), helperText && !disabled && /* @__PURE__ */ React45.createElement(
+    ), helperText && !disabled && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5107,7 +5197,7 @@ var Checkbox = ({
     ))
   );
 };
-var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
+var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
   let checkboxRadius = {
     none: "hawa-rounded-none",
     inherit: "hawa-rounded-sm",
@@ -5129,7 +5219,7 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
     lg: "1em",
     xl: "1.25em"
   };
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(
     CheckboxPrimitive.Root,
     {
       ref,
@@ -5141,14 +5231,14 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
       ),
       ...props
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(
       CheckboxPrimitive.Indicator,
       {
         className: cn(
           "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
         )
       },
-      /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React44.createElement(
         "svg",
         {
           "aria-label": "Check Mark",
@@ -5159,7 +5249,7 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
           height: checkboxIndicatorSizes[size],
           width: checkboxIndicatorSizes[size]
         },
-        /* @__PURE__ */ React45.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__ */ React44.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" })
       ),
       " "
     )
@@ -5168,9 +5258,9 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // elements/progress/Progress.tsx
-var React46 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React46.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React46.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React46.createElement(
+var Progress = React45.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React45.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React45.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React45.createElement(
   ProgressPrimitive.Root,
   {
     ref,
@@ -5180,7 +5270,7 @@ var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React46.createElement(
+  /* @__PURE__ */ React45.createElement(
     ProgressPrimitive.Indicator,
     {
       className: "hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all",
@@ -5191,7 +5281,7 @@ var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // elements/breadcrumb/Breadcrumb.tsx
-var import_react34 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var Breadcrumb = ({
   breadcrumbLinks,
   separator = ">",
@@ -5202,7 +5292,7 @@ var Breadcrumb = ({
     small: "hawa-text-sm",
     xs: "hawa-text-xs"
   };
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(
     "div",
     {
       className: cn(
@@ -5210,13 +5300,13 @@ var Breadcrumb = ({
         textStyles[size]
       )
     },
-    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react34.default.createElement(
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react36.default.createElement(
       "div",
       {
         key: index,
         className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      /* @__PURE__ */ import_react34.default.createElement(
+      /* @__PURE__ */ import_react36.default.createElement(
         "a",
         {
           href: singleBreadcrumbLink.href,
@@ -5224,49 +5314,49 @@ var Breadcrumb = ({
         },
         singleBreadcrumbLink.label
       ),
-      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react34.default.createElement("div", null, separator) : /* @__PURE__ */ import_react34.default.createElement("div", null, separator) : null
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react36.default.createElement("div", null, separator) : /* @__PURE__ */ import_react36.default.createElement("div", null, separator) : null
     ))
   );
 };
 
 // elements/appStores/AppStores.tsx
-var import_react35 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var AppStores = (props) => {
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react35.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react35.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react37.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react37.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react37.default.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__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-border hawa-border-black hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react35.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react35.default.createElement(
+  ))), /* @__PURE__ */ import_react37.default.createElement("div", null, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-border hawa-border-black hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react37.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react37.default.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__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.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__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.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__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.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__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
+  ))), /* @__PURE__ */ import_react37.default.createElement("div", null, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
 };
 
 // elements/badge/Badge.tsx
-var import_react36 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var Badge = ({
   anchor,
   position = "right",
@@ -5274,14 +5364,14 @@ var Badge = ({
   text,
   className
 }) => {
-  const [badgePosition, setBadgePosition] = (0, import_react36.useState)(null);
-  const indicatorRef = (0, import_react36.useRef)(null);
+  const [badgePosition, setBadgePosition] = (0, import_react38.useState)(null);
+  const indicatorRef = (0, import_react38.useRef)(null);
   const sizeStyles2 = {
     small: { top: 4, left: 6, right: 7, classes: "hawa-w-3 hawa-h-3" },
     default: { top: 4, left: 7, right: 5, classes: "hawa-w-3 hawa-h-3" },
     large: { top: 6, left: 12, right: 7, classes: "hawa-w-6 hawa-h-6" }
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const handlePositioning = () => {
       var _a;
       if (anchor.current && indicatorRef.current) {
@@ -5304,7 +5394,7 @@ var Badge = ({
       window.removeEventListener("resize", handlePositioning);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react36.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react38.default.createElement(
     "div",
     {
       style: {
@@ -5329,8 +5419,8 @@ var BadgedComponent = ({
   size,
   text
 }) => {
-  const ref = (0, import_react36.useRef)(null);
-  return /* @__PURE__ */ import_react36.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react36.default.createElement(
+  const ref = (0, import_react38.useRef)(null);
+  return /* @__PURE__ */ import_react38.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react38.default.createElement(
     Badge,
     {
       size,
@@ -5343,7 +5433,7 @@ var BadgedComponent = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-var import_react37 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // countries.ts
 var countries = [
@@ -7045,9 +7135,9 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
-  const [phoneNumber, setPhoneNumber] = (0, import_react37.useState)("");
-  const [countryCode, setCountryCode] = (0, import_react37.useState)(props.preferredCountry);
-  const inputRef = (0, import_react37.useRef)(null);
+  const [phoneNumber, setPhoneNumber] = (0, import_react39.useState)("");
+  const [countryCode, setCountryCode] = (0, import_react39.useState)(props.preferredCountry);
+  const inputRef = (0, import_react39.useRef)(null);
   const handleInputChange = (e) => {
     console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
@@ -7061,7 +7151,7 @@ var PhoneInput = ({
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react37.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react37.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react39.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react39.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react39.default.createElement(
     Select,
     {
       phoneCode: true,
@@ -7077,7 +7167,7 @@ var PhoneInput = ({
       value: countryCode == null ? void 0 : countryCode.label,
       defaultValue: props.preferredCountry
     }
-  ), /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react39.default.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react39.default.createElement(
     "input",
     {
       type: "tel",
@@ -7091,15 +7181,15 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ import_react37.default.createElement(HelperText, { helperText: props.helperText }));
+  ))), /* @__PURE__ */ import_react39.default.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/pinInput/PinInput.tsx
-var React51 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 var import_input_otp = require("input-otp");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react39 = require("react");
+var import_react41 = require("react");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -7108,7 +7198,7 @@ var mergeClasses = (...classes) => classes.filter((className, index, array) => {
 }).join(" ");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -7124,7 +7214,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
-var Icon = (0, import_react38.forwardRef)(
+var Icon = (0, import_react40.forwardRef)(
   ({
     color = "currentColor",
     size = 24,
@@ -7135,7 +7225,7 @@ var Icon = (0, import_react38.forwardRef)(
     iconNode,
     ...rest
   }, ref) => {
-    return (0, import_react38.createElement)(
+    return (0, import_react40.createElement)(
       "svg",
       {
         ref,
@@ -7148,7 +7238,7 @@ var Icon = (0, import_react38.forwardRef)(
         ...rest
       },
       [
-        ...iconNode.map(([tag, attrs]) => (0, import_react38.createElement)(tag, attrs)),
+        ...iconNode.map(([tag, attrs]) => (0, import_react40.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     );
@@ -7157,8 +7247,8 @@ var Icon = (0, import_react38.forwardRef)(
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = (0, import_react39.forwardRef)(
-    ({ className, ...props }, ref) => (0, import_react39.createElement)(Icon, {
+  const Component = (0, import_react41.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react41.createElement)(Icon, {
       ref,
       iconNode,
       className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
@@ -7175,7 +7265,7 @@ var Dot = createLucideIcon("Dot", [
 ]);
 
 // elements/pinInput/PinInput.tsx
-var PinInputRoot = React51.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React51.createElement(
+var PinInputRoot = React50.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React50.createElement(
   import_input_otp.OTPInput,
   {
     ref,
@@ -7188,7 +7278,7 @@ var PinInputRoot = React51.forwardRef(({ className, containerClassName, ...props
   }
 ));
 PinInputRoot.displayName = "PinInputRoot";
-var PinInputGroup = React51.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React51.createElement(
+var PinInputGroup = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React50.createElement(
   "div",
   {
     ref,
@@ -7197,10 +7287,10 @@ var PinInputGroup = React51.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 PinInputGroup.displayName = "PinInputGroup";
-var PinInputSlot = React51.forwardRef(({ index, className, ...props }, ref) => {
-  const pinInputContext = React51.useContext(import_input_otp.OTPInputContext);
+var PinInputSlot = React50.forwardRef(({ index, className, ...props }, ref) => {
+  const pinInputContext = React50.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React50.createElement(
     "div",
     {
       ref,
@@ -7212,11 +7302,11 @@ var PinInputSlot = React51.forwardRef(({ index, className, ...props }, ref) => {
       ...props
     },
     char,
-    hasFakeCaret && /* @__PURE__ */ React51.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React51.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
+    hasFakeCaret && /* @__PURE__ */ React50.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React50.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
   );
 });
 PinInputSlot.displayName = "PinInputSlot";
-var PinInputSeperator = React51.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React51.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React51.createElement(Dot, null)));
+var PinInputSeperator = React50.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React50.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React50.createElement(Dot, null)));
 PinInputSeperator.displayName = "PinInputSeperator";
 var PinInput = ({
   separatorPosition = 0,
@@ -7226,27 +7316,27 @@ var PinInput = ({
   const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
   const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
   const secondGroupLength = maxLength - firstGroupLength;
-  return /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React51.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React51.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React51.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React51.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React51.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
     PinInputSlot,
     {
       key: index + firstGroupLength,
       index: index + firstGroupLength,
       className: "hawa-w-full"
     }
-  )))), /* @__PURE__ */ React51.createElement(HelperText, { helperText: props.helperText }));
+  )))), /* @__PURE__ */ React50.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/stopPropagationWrapper/StopPropagationWrapper.tsx
-var import_react40 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var StopPropagationWrapper = (props) => {
   const handleClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ import_react40.default.createElement("div", { onClick: handleClick }, props.children);
+  return /* @__PURE__ */ import_react42.default.createElement("div", { onClick: handleClick }, props.children);
 };
 
 // elements/colorPicker/ColorPicker.tsx
-var import_react41 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var ColorPicker = ({
   containerProps,
   colorPickerProps,
@@ -7257,8 +7347,8 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = (0, import_react41.useState)(props.color);
-  (0, import_react41.useEffect)(() => {
+  const [selectedColor, setSelectedColor] = (0, import_react43.useState)(props.color);
+  (0, import_react43.useEffect)(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -7275,13 +7365,13 @@ var ColorPicker = ({
       props.handleChange(e);
     }
   };
-  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react41.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react41.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react41.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react43.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react43.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react43.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react43.default.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
       className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
     },
-    /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement(
       "input",
       {
         disabled: preview,
@@ -7300,7 +7390,7 @@ var ColorPicker = ({
         ...colorPickerProps
       }
     )
-  ), /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react41.default.createElement(
+  ), /* @__PURE__ */ import_react43.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react43.default.createElement(
     "input",
     {
       disabled: preview,
@@ -7319,11 +7409,11 @@ var ColorPicker = ({
       },
       ...textInputProps
     }
-  ))), !forceHideHelperText && /* @__PURE__ */ import_react41.default.createElement(HelperText, { helperText: props.helperText }));
+  ))), !forceHideHelperText && /* @__PURE__ */ import_react43.default.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/progressCircle/ProgressCircle.tsx
-var import_react42 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var size2config = {
   xs: { radius: 15, strokeWidth: 3 },
   sm: { radius: 19, strokeWidth: 4 },
@@ -7340,7 +7430,7 @@ function getLimitedValue(input) {
     return input;
   }
 }
-var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
+var ProgressCircle = import_react44.default.forwardRef((props, ref) => {
   const {
     value: inputValue,
     size = "md",
@@ -7360,7 +7450,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
   const circumference = normalizedRadius * 2 * Math.PI;
   const strokeDashoffset = value / 100 * circumference;
   const offset = circumference - strokeDashoffset;
-  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
       ref,
@@ -7369,7 +7459,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
         className
       )
     },
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       "svg",
       {
         width: radius * 2,
@@ -7377,7 +7467,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
         viewBox: `0 0 ${radius * 2} ${radius * 2}`,
         className: "hawa-rotate-180 hawa-transform"
       },
-      /* @__PURE__ */ import_react42.default.createElement(
+      /* @__PURE__ */ import_react44.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7393,7 +7483,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
           )
         }
       ),
-      value > 0 ? /* @__PURE__ */ import_react42.default.createElement(
+      value > 0 ? /* @__PURE__ */ import_react44.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7413,24 +7503,24 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
         }
       ) : null
     ),
-    /* @__PURE__ */ import_react42.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
+    /* @__PURE__ */ import_react44.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
   ));
 });
 ProgressCircle.displayName = "ProgressCircle";
 
 // elements/pagination/Pagination.tsx
-var import_react43 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_react_headless_pagination = require("react-headless-pagination");
 var Pagination = ({
   direction,
   totalPages,
   currentPage
 }) => {
-  const [page, setPage] = import_react43.default.useState(currentPage || 0);
+  const [page, setPage] = import_react45.default.useState(currentPage || 0);
   const handlePageChange = (page2) => {
     setPage(page2);
   };
-  return /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     import_react_headless_pagination.Pagination,
     {
       totalPages,
@@ -7442,10 +7532,10 @@ var Pagination = ({
       truncableText: "...",
       truncableClassName: "hawa-w-10 hawa-px-0.5 hawa-text-center"
     },
-    /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       import_react_headless_pagination.Pagination.PrevButton,
       {
-        as: /* @__PURE__ */ import_react43.default.createElement(
+        as: /* @__PURE__ */ import_react45.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7455,7 +7545,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react43.default.createElement(
+          /* @__PURE__ */ import_react45.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7468,7 +7558,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react43.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react45.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7481,17 +7571,17 @@ var Pagination = ({
       },
       "Previous"
     ),
-    /* @__PURE__ */ import_react43.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react43.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react45.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react45.default.createElement(
       import_react_headless_pagination.Pagination.PageButton,
       {
         className: "hawa-tap-highlight-transparent hawa-text-default-foreground data-[focus-visible=true]:hawa-outline-focus data-[disabled=true]:hawa-text-default-300 hawa-min-w-9 hawa-text-small hawa-box-border hawa-flex hawa-h-9 hawa-w-9 hawa-cursor-pointer hawa-touch-none hawa-select-none hawa-flex-wrap hawa-items-center hawa-justify-center hawa-truncate hawa-rounded hawa-border hawa-bg-card hawa-outline-none hawa-transition-all hover:hawa-scale-[1.1] data-[disabled=true]:hawa-pointer-events-none data-[focus-visible=true]:hawa-z-10 data-[pressed=true]:hawa-scale-[0.97] data-[focus-visible=true]:hawa-outline-2 data-[focus-visible=true]:hawa-outline-offset-2",
         activeClassName: "hawa-bg-primary hawa-text-primary-foreground hawa-transition-all"
       }
     ))),
-    /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       import_react_headless_pagination.Pagination.NextButton,
       {
-        as: /* @__PURE__ */ import_react43.default.createElement(
+        as: /* @__PURE__ */ import_react45.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7501,7 +7591,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react43.default.createElement(
+          /* @__PURE__ */ import_react45.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7514,7 +7604,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react43.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react45.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7531,14 +7621,14 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-var import_react47 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // icons/Emojis.tsx
-var import_react44 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 
 // icons/InputIcons.tsx
-var import_react45 = __toESM(require("react"));
-var EyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react45.default.createElement(
+var import_react47 = __toESM(require("react"));
+var EyeIcon = (props) => /* @__PURE__ */ import_react47.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react47.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7549,10 +7639,10 @@ var EyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("d
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-  /* @__PURE__ */ import_react45.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ import_react47.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react45.default.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react47.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react47.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7563,20 +7653,20 @@ var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElem
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
-  /* @__PURE__ */ import_react45.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+  /* @__PURE__ */ import_react47.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
 ));
 
 // icons/CommonIcons.tsx
-var import_react46 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var CheckMark = ({ size = "default", className }) => {
   let sizeStyles2 = {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7584,7 +7674,7 @@ var CheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7599,7 +7689,7 @@ var UncheckMark = ({ size = "default", className }) => {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7607,7 +7697,7 @@ var UncheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7645,7 +7735,7 @@ var PasswordStrengthIndicator = ({ strength }) => {
     strong: "80%",
     "very-strong": "100%"
   }[currentStrengthLevel];
-  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: `${strengthColors[currentStrengthLevel]} hawa-h-full hawa-rounded hawa-transition-all hawa-duration-300`,
@@ -7657,16 +7747,16 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = (0, import_react47.useState)("");
-  const [isInputFocused, setIsInputFocused] = (0, import_react47.useState)(false);
-  const [currentStr, setCurrentStr] = (0, import_react47.useState)(0);
-  const [passwordVisible, setPasswordVisible] = (0, import_react47.useState)(false);
-  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react47.useState)(false);
-  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react47.useState)(false);
-  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react47.useState)(false);
-  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react47.useState)(false);
-  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react47.useState)(false);
-  (0, import_react47.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react49.useState)("");
+  const [isInputFocused, setIsInputFocused] = (0, import_react49.useState)(false);
+  const [currentStr, setCurrentStr] = (0, import_react49.useState)(0);
+  const [passwordVisible, setPasswordVisible] = (0, import_react49.useState)(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react49.useState)(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react49.useState)(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react49.useState)(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react49.useState)(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -7705,7 +7795,7 @@ var PasswordInput = ({
     setIsInputFocused(false);
   };
   const getCriteriaClass = (isMet) => isMet ? "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-green-500" : "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-red-600";
-  return /* @__PURE__ */ import_react47.default.createElement("div", null, /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", null, /* @__PURE__ */ import_react49.default.createElement(
     Popover,
     {
       width: "trigger",
@@ -7714,7 +7804,7 @@ var PasswordInput = ({
       onOpenChange: setIsInputFocused,
       triggerProps: { asChild: true },
       contentProps: { onOpenAutoFocus: (e) => e.preventDefault() },
-      trigger: /* @__PURE__ */ import_react47.default.createElement(
+      trigger: /* @__PURE__ */ import_react49.default.createElement(
         "div",
         {
           onClick: (e) => {
@@ -7724,7 +7814,7 @@ var PasswordInput = ({
             }
           }
         },
-        /* @__PURE__ */ import_react47.default.createElement(
+        /* @__PURE__ */ import_react49.default.createElement(
           Input,
           {
             width: "full",
@@ -7734,27 +7824,27 @@ var PasswordInput = ({
             onFocus: handleInputFocus,
             onBlur: handleInputBlur,
             type: passwordVisible ? "text" : "password",
-            endIcon: /* @__PURE__ */ import_react47.default.createElement(
+            endIcon: /* @__PURE__ */ import_react49.default.createElement(
               "div",
               {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              passwordVisible ? /* @__PURE__ */ import_react47.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react47.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+              passwordVisible ? /* @__PURE__ */ import_react49.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react49.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
               " "
             )
           }
         )
       )
     },
-    /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react47.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
-  ), /* @__PURE__ */ import_react47.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
+    /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react49.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
+  ), /* @__PURE__ */ import_react49.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
 };
 
 // elements/slider/Slider.tsx
-var React60 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var Slider = React60.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React60.createElement(
+var Slider = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
   SliderPrimitive.Root,
   {
     ref,
@@ -7764,13 +7854,13 @@ var Slider = React60.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props
   },
-  /* @__PURE__ */ React60.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-border hawa-bg-background" }, /* @__PURE__ */ React60.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
-  /* @__PURE__ */ React60.createElement(SliderPrimitive.Thumb, { className: "hawa-block hawa-h-5 hawa-w-5 hawa-rounded-full hawa-border-2 hawa-border-primary hawa-bg-background hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50" })
+  /* @__PURE__ */ React59.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-border hawa-bg-background" }, /* @__PURE__ */ React59.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
+  /* @__PURE__ */ React59.createElement(SliderPrimitive.Thumb, { className: "hawa-block hawa-h-5 hawa-w-5 hawa-rounded-full hawa-border-2 hawa-border-primary hawa-bg-background hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50" })
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // elements/simpleTable/SimpleTable.tsx
-var React61 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 var import_react_table2 = require("@tanstack/react-table");
 var SimpleTable = ({
   columns,
@@ -7785,7 +7875,7 @@ var SimpleTable = ({
     columns,
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)()
   });
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
       className: cn(
@@ -7793,8 +7883,8 @@ var SimpleTable = ({
         classNames
       )
     },
-    props.isLoading ? /* @__PURE__ */ React61.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React61.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React61.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React61.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React61.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ React61.createElement(
+    props.isLoading ? /* @__PURE__ */ React60.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React60.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React60.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React60.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React60.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ React60.createElement(
         TableHead,
         {
           condensed: props.condensed,
@@ -7809,7 +7899,7 @@ var SimpleTable = ({
           header.getContext()
         )
       );
-    })))), /* @__PURE__ */ React61.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React61.createElement(
+    })))), /* @__PURE__ */ React60.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React60.createElement(
       TableRow,
       {
         key: row.id,
@@ -7817,7 +7907,7 @@ var SimpleTable = ({
       },
       row.getVisibleCells().map((cell) => {
         var _a2;
-        return /* @__PURE__ */ React61.createElement(
+        return /* @__PURE__ */ React60.createElement(
           TableCell,
           {
             dir: props.direction,
@@ -7833,7 +7923,7 @@ var SimpleTable = ({
           )
         );
       })
-    )) : /* @__PURE__ */ React61.createElement(TableRow, null, /* @__PURE__ */ React61.createElement(
+    )) : /* @__PURE__ */ React60.createElement(TableRow, null, /* @__PURE__ */ React60.createElement(
       TableCell,
       {
         colSpan: columns.length,
@@ -7845,12 +7935,12 @@ var SimpleTable = ({
 };
 
 // elements/separator/Separator.tsx
-var React62 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 var Separator2 = ({
   className,
   orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ React62.createElement(
+}) => /* @__PURE__ */ React61.createElement(
   "div",
   {
     className: cn(
@@ -7863,12 +7953,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-var import_react48 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = (0, import_react48.useState)(0);
+  const [scrollPercentage, setScrollPercentage] = (0, import_react50.useState)(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -7879,7 +7969,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -7888,7 +7978,7 @@ var ScrollIndicator = ({
       (_a = anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     "div",
     {
       style: {
@@ -7904,11 +7994,11 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_prism_react_renderer = require("prism-react-renderer");
 (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
 require("prismjs/components/prism-bash");
-var CopyIcon = () => /* @__PURE__ */ import_react49.default.createElement(
+var CopyIcon = () => /* @__PURE__ */ import_react51.default.createElement(
   "svg",
   {
     "aria-label": "Copy",
@@ -7921,8 +8011,8 @@ var CopyIcon = () => /* @__PURE__ */ import_react49.default.createElement(
     height: "1em",
     width: "1em"
   },
-  /* @__PURE__ */ import_react49.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ import_react49.default.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__ */ import_react51.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ import_react51.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
 );
 var CodeBlock = ({
   tabs,
@@ -7936,7 +8026,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = (0, import_react49.useState)(0);
+  const [selectedTab, setSelectedTab] = (0, import_react51.useState)(0);
   const theme = import_prism_react_renderer.themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -7944,7 +8034,7 @@ var CodeBlock = ({
     sm: "hawa-w-full hawa-max-w-sm",
     xs: "hawa-w-full hawa-max-w-xs"
   };
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     "div",
     {
       className: cn(
@@ -7953,7 +8043,7 @@ var CodeBlock = ({
         classNames == null ? void 0 : classNames.root
       )
     },
-    fileName && /* @__PURE__ */ import_react49.default.createElement(
+    fileName && /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         className: cn(
@@ -7962,7 +8052,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.fileName
         )
       },
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
           className: cn(
@@ -7972,7 +8062,7 @@ var CodeBlock = ({
         fileName
       )
     ),
-    tabs && /* @__PURE__ */ import_react49.default.createElement(
+    tabs && /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         className: cn(
@@ -7981,7 +8071,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.tabs
         )
       },
-      tabs.map((tab, i) => /* @__PURE__ */ import_react49.default.createElement(
+      tabs.map((tab, i) => /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
           key: i,
@@ -7990,7 +8080,7 @@ var CodeBlock = ({
             classNames == null ? void 0 : classNames.tab
           )
         },
-        /* @__PURE__ */ import_react49.default.createElement(
+        /* @__PURE__ */ import_react51.default.createElement(
           "div",
           {
             onClick: () => setSelectedTab(i),
@@ -8002,7 +8092,7 @@ var CodeBlock = ({
         )
       ))
     ),
-    /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         className: cn(
@@ -8012,22 +8102,22 @@ var CodeBlock = ({
           "hawa-overflow-y-auto"
         )
       },
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
           className: cn(
             "hawa-flex hawa-absolute  hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-z-50  hawa-right-3 hawa-top-3"
           )
         },
-        /* @__PURE__ */ import_react49.default.createElement(
+        /* @__PURE__ */ import_react51.default.createElement(
           Tooltip,
           {
             open: clipboard.copied,
             side: "left",
-            content: /* @__PURE__ */ import_react49.default.createElement("div", null, "Copied!"),
+            content: /* @__PURE__ */ import_react51.default.createElement("div", null, "Copied!"),
             triggerProps: { asChild: true }
           },
-          /* @__PURE__ */ import_react49.default.createElement(
+          /* @__PURE__ */ import_react51.default.createElement(
             Button,
             {
               size: "smallIcon",
@@ -8035,18 +8125,18 @@ var CodeBlock = ({
               variant: "outline",
               className: "hawa-text-gray-200 hawa-opacity-50 dark:hawa-border-gray-200 dark:hover:hawa-border-gray-400"
             },
-            /* @__PURE__ */ import_react49.default.createElement(CopyIcon, null)
+            /* @__PURE__ */ import_react51.default.createElement(CopyIcon, null)
           )
         )
       ),
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         import_prism_react_renderer.Highlight,
         {
           theme,
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react49.default.createElement(
+        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react51.default.createElement(
           "pre",
           {
             className: cn(
@@ -8056,7 +8146,7 @@ var CodeBlock = ({
               wrapText && "hawa-text-wrap"
             )
           },
-          tokens.map((line, i) => /* @__PURE__ */ import_react49.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react49.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react49.default.createElement("span", { key, ...getTokenProps({ token }) }))))
+          tokens.map((line, i) => /* @__PURE__ */ import_react51.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react51.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react51.default.createElement("span", { key, ...getTokenProps({ token }) }))))
         )
       )
     )
@@ -8064,7 +8154,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
 var Carousel = ({
   items,
@@ -8080,8 +8170,8 @@ var Carousel = ({
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = (0, import_react50.useState)(0);
-  (0, import_react50.useEffect)(() => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react52.useState)(0);
+  (0, import_react52.useEffect)(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -8091,7 +8181,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -8103,17 +8193,17 @@ var Carousel = ({
         clearInterval(autoplayTimer);
     };
   }, [emblaApi, autoplay, autoplayInterval]);
-  const length = import_react50.default.Children.count(items);
+  const length = import_react52.default.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       key: i,
       className: "hawa-flex hawa-h-full hawa-min-w-0  hawa-flex-[0_0_100%]  hawa-items-center hawa-justify-center"
     },
     item
-  ))))), /* @__PURE__ */ import_react50.default.createElement(
+  ))))), /* @__PURE__ */ import_react52.default.createElement(
     Dots,
     {
       direction,
@@ -8121,7 +8211,7 @@ var Carousel = ({
       selectedIndex,
       onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
     }
-  ), showArrows && /* @__PURE__ */ import_react50.default.createElement(
+  ), showArrows && /* @__PURE__ */ import_react52.default.createElement(
     CarouselControls,
     {
       canScrollNext,
@@ -8138,7 +8228,7 @@ var Dots = ({
   direction
 }) => {
   const arr = new Array(itemsLength).fill(0);
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       dir: direction,
@@ -8146,7 +8236,7 @@ var Dots = ({
     },
     arr.map((_, index) => {
       const selected = index === selectedIndex;
-      return /* @__PURE__ */ import_react50.default.createElement(
+      return /* @__PURE__ */ import_react52.default.createElement(
         "div",
         {
           key: index,
@@ -8161,7 +8251,7 @@ var Dots = ({
   );
 };
 var CarouselControls = (props) => {
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react52.default.createElement(
     "button",
     {
       onClick: () => props.canScrollPrev && props.onPrev(),
@@ -8172,7 +8262,7 @@ var CarouselControls = (props) => {
         props.canScrollPrev && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -8181,9 +8271,9 @@ var CarouselControls = (props) => {
         viewBox: "0 0 16 16",
         className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200 "
       },
-      /* @__PURE__ */ import_react50.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+      /* @__PURE__ */ import_react52.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
-  ), /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react52.default.createElement(
     "button",
     {
       onClick: () => props.canScrollNext && props.onNext(),
@@ -8194,7 +8284,7 @@ var CarouselControls = (props) => {
         props.canScrollNext && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -8203,19 +8293,19 @@ var CarouselControls = (props) => {
         viewBox: "0 0 16 16",
         className: "hawa-h-2 hawa-w-2  hawa-shrink-0 hawa-transition-transform hawa-duration-200 "
       },
-      /* @__PURE__ */ import_react50.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+      /* @__PURE__ */ import_react52.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
   ));
 };
 
 // elements/count/Count.tsx
-var import_react51 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var Count = (props) => {
-  return /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react51.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-text-sm" }, props.count));
+  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react53.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react53.default.createElement("div", { className: "hawa-text-sm" }, props.count));
 };
 
 // elements/toast/Toast.tsx
-var React67 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 var ToastPrimitives = __toESM(require("@radix-ui/react-toast"));
 var import_class_variance_authority4 = require("class-variance-authority");
 var toastVariants = (0, import_class_variance_authority4.cva)(
@@ -8243,7 +8333,7 @@ var sizeStyles = {
   sm: "hawa-text-xs"
 };
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastViewport = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -8255,8 +8345,8 @@ var ToastViewport = React67.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React67.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return /* @__PURE__ */ React67.createElement(
+var Toast = React66.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Root,
     {
       ref,
@@ -8271,8 +8361,8 @@ var Toast = React67.forwardRef(({ className, variant, severity = "none", directi
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React67.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React67.createElement(
+var ToastAction = React66.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Action,
     {
       ref,
@@ -8290,7 +8380,7 @@ var ToastAction = React67.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Close,
   {
     ref,
@@ -8304,7 +8394,7 @@ var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE
     "toast-close": "",
     ...props
   },
-  /* @__PURE__ */ React67.createElement(
+  /* @__PURE__ */ React66.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -8313,7 +8403,7 @@ var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React66.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8324,7 +8414,7 @@ var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE
   )
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React67.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastTitle = React66.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Title,
   {
     ref,
@@ -8337,7 +8427,7 @@ var ToastTitle = React67.forwardRef(({ className, size = "default", ...props },
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React67.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastDescription = React66.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Description,
   {
     ref,
@@ -8352,11 +8442,11 @@ var ToastDescription = React67.forwardRef(({ className, size = "default", ...pro
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // elements/toaster/Toaster.tsx
-var import_react52 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 function Toaster(props) {
   var _a;
   let isRTL = props.direction === "rtl";
-  return /* @__PURE__ */ import_react52.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
+  return /* @__PURE__ */ import_react54.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
     id,
     title,
     description,
@@ -8364,7 +8454,7 @@ function Toaster(props) {
     action,
     ...toastProps
   }) {
-    return /* @__PURE__ */ import_react52.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react52.default.createElement(
+    return /* @__PURE__ */ import_react54.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react54.default.createElement(
       "div",
       {
         className: cn(
@@ -8372,9 +8462,9 @@ function Toaster(props) {
           action && "hawa-justify-between"
         )
       },
-      /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react52.default.createElement(ToastClose, null)),
-      /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react54.default.createElement(ToastClose, null)),
+      /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
+      /* @__PURE__ */ import_react54.default.createElement(
         "div",
         {
           className: cn(
@@ -8382,11 +8472,11 @@ function Toaster(props) {
             { "hawa-p-4": size === "default", "hawa-p-2": size === "sm" }
           )
         },
-        /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react52.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react52.default.createElement(ToastDescription, { size }, description)),
-        action && /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
+        /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react54.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react54.default.createElement(ToastDescription, { size }, description)),
+        action && /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
       )
     ));
-  }), /* @__PURE__ */ import_react52.default.createElement(
+  }), /* @__PURE__ */ import_react54.default.createElement(
     ToastViewport,
     {
       className: cn("hawa-gap-2", isRTL && "hawa-fixed hawa-left-0")
@@ -8395,20 +8485,20 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-var import_react53 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = (0, import_react53.useState)(false);
-  const popUpRef = (0, import_react53.useRef)(null);
+  const [closed, setClosed] = (0, import_react55.useState)(false);
+  const popUpRef = (0, import_react55.useRef)(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
     "bottom-left": "hawa-left-4 hawa-bottom-4"
   };
-  return /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(
     "div",
     {
       className: cn(
@@ -8417,7 +8507,7 @@ var DestroyableCard = ({
       ),
       ref: popUpRef
     },
-    /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react55.default.createElement(
       Card,
       {
         className: cn(
@@ -8426,7 +8516,7 @@ var DestroyableCard = ({
         ),
         dir: direction
       },
-      /* @__PURE__ */ import_react53.default.createElement(
+      /* @__PURE__ */ import_react55.default.createElement(
         "button",
         {
           type: "button",
@@ -8445,7 +8535,7 @@ var DestroyableCard = ({
             }, 200);
           }
         },
-        /* @__PURE__ */ import_react53.default.createElement(
+        /* @__PURE__ */ import_react55.default.createElement(
           "svg",
           {
             "aria-hidden": "true",
@@ -8453,7 +8543,7 @@ var DestroyableCard = ({
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ import_react53.default.createElement(
+          /* @__PURE__ */ import_react55.default.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -8463,13 +8553,13 @@ var DestroyableCard = ({
           )
         )
       ),
-      /* @__PURE__ */ import_react53.default.createElement(CardContent, { headless: true }, props.children)
+      /* @__PURE__ */ import_react55.default.createElement(CardContent, { headless: true }, props.children)
     )
   );
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-var import_react54 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -8477,13 +8567,13 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = (0, import_react54.useState)(props.currentColorMode);
-  const [language, setLanguage] = (0, import_react54.useState)(props.currentLanguage);
+  const [color, setColor] = (0, import_react56.useState)(props.currentColorMode);
+  const [language, setLanguage] = (0, import_react56.useState)(props.currentLanguage);
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row hawa-justify-between",
     vertical: "hawa-flex hawa-flex-col hawa-items-center hawa-gap-2"
   };
-  return /* @__PURE__ */ import_react54.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react56.default.createElement(
     Radio,
     {
       name: "language",
@@ -8501,7 +8591,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     Radio,
     {
       name: "theme",
@@ -8517,7 +8607,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ import_react54.default.createElement(
+          label: /* @__PURE__ */ import_react56.default.createElement(
             "svg",
             {
               width: "15",
@@ -8527,7 +8617,7 @@ var InterfaceSettings = ({
               xmlns: "http://www.w3.org/2000/svg",
               className: "hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90"
             },
-            /* @__PURE__ */ import_react54.default.createElement(
+            /* @__PURE__ */ import_react56.default.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",
@@ -8538,7 +8628,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ import_react54.default.createElement(
+          label: /* @__PURE__ */ import_react56.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -8549,7 +8639,7 @@ var InterfaceSettings = ({
               stroke: "currentColor",
               className: "hawa-h-[1.2rem] hawa-w-[1.2rem]  hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100"
             },
-            /* @__PURE__ */ import_react54.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ import_react56.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -8558,14 +8648,14 @@ var InterfaceSettings = ({
 };
 
 // elements/phoneMockup/PhoneMockup.tsx
-var import_react55 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var PhoneMockup = ({
   children,
   upperOverlayGradiant,
   lowerOverlayGradiant,
   phone,
   hideButtons
-}) => /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-relative hawa-mx-auto hawa-h-[600px] hawa-w-[300px] hawa-rounded-[2.5rem] hawa-border-[14px] hawa-border-gray-800 hawa-bg-gray-800 hawa-dark:border-gray-800" }, !hideButtons && /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[72px] hawa-h-[32px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[124px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[178px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--right-[16px] hawa-top-[142px] hawa-h-[64px] hawa-w-[3px] hawa-rounded-r-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" })), /* @__PURE__ */ import_react55.default.createElement("div", { className: "no-scrollbar hawa-left-0 hawa-h-[572px] hawa-w-[272px] hawa-overflow-y-scroll hawa-rounded-[2rem] hawa-bg-white hawa-[clip-path:inset(0px_-1px_0px_0px_round_2rem)] hawa-dark:bg-gray-800" }, children), upperOverlayGradiant && /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-left-0 hawa-top-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-t-[2rem] hawa-bg-gradient-to-t hawa-from-transparent hawa-to-black hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }), lowerOverlayGradiant && /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-bottom-0 hawa-left-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-b-[2rem] hawa-bg-gradient-to-t hawa-from-black hawa-to-transparent hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }));
+}) => /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-relative hawa-mx-auto hawa-h-[600px] hawa-w-[300px] hawa-rounded-[2.5rem] hawa-border-[14px] hawa-border-gray-800 hawa-bg-gray-800 hawa-dark:border-gray-800" }, !hideButtons && /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[72px] hawa-h-[32px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[124px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[178px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--right-[16px] hawa-top-[142px] hawa-h-[64px] hawa-w-[3px] hawa-rounded-r-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" })), /* @__PURE__ */ import_react57.default.createElement("div", { className: "no-scrollbar hawa-left-0 hawa-h-[572px] hawa-w-[272px] hawa-overflow-y-scroll hawa-rounded-[2rem] hawa-bg-white hawa-[clip-path:inset(0px_-1px_0px_0px_round_2rem)] hawa-dark:bg-gray-800" }, children), upperOverlayGradiant && /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-left-0 hawa-top-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-t-[2rem] hawa-bg-gradient-to-t hawa-from-transparent hawa-to-black hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }), lowerOverlayGradiant && /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-bottom-0 hawa-left-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-b-[2rem] hawa-bg-gradient-to-t hawa-from-black hawa-to-transparent hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,