@sikka/hawa 0.18.20-next → 0.18.22-next

package/dist/index.mjs

@@ -116,7 +116,7 @@ var AdCard = ({ orientation, ...props }) => {
 };
 
 // components/elements/cards/PricingCard.tsx
-import React7 from "react";
+import React9 from "react";
 
 // components/elements/Button.tsx
 import * as React5 from "react";
@@ -127,6 +127,7 @@ import React4 from "react";
 var Loading = ({
   design = "spinner",
   size = "sm",
+  themeMode = "light",
   color,
   ...props
 }) => {
@@ -267,7 +268,10 @@ var Loading = ({
         /* @__PURE__ */ React4.createElement(
           "circle",
           {
-            className: "circle-track",
+            className: cn("circle-track", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
             cx: "20",
             cy: "20",
             r: "17.5",
@@ -279,7 +283,10 @@ var Loading = ({
         /* @__PURE__ */ React4.createElement(
           "circle",
           {
-            className: "circle-car",
+            className: cn("circle-car", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
             cx: "20",
             cy: "20",
             r: "17.5",
@@ -312,8 +319,8 @@ var buttonVariants = cva(
       size: {
         default: "hawa-h-10 hawa-px-4 hawa-py-2",
         heightless: "hawa-px-4 hawa-py-4",
-        xs: "hawa-h-fit hawa-py-1 hawa-text-[10px] hawa-px-2 ",
-        sm: "hawa-h-9 hawa-text-[11px] hawa-rounded-md hawa-px-3",
+        xs: "hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 ",
+        sm: "hawa-h-9  hawa-text-[11px] hawa-rounded-md hawa-px-3",
         lg: "hawa-h-11 hawa-rounded-md hawa-px-8",
         xl: "hawa-h-14 hawa-rounded-md hawa-px-10",
         icon: "hawa-h-10 hawa-w-10",
@@ -352,9 +359,10 @@ var Button = React5.forwardRef(
       isLoading ? /* @__PURE__ */ React5.createElement(
         Loading,
         {
-          design: "dots-pulse",
+          design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+          themeMode: variant === "outline" ? "light" : "dark",
           color: loadingColor,
-          size: size === "sm" ? "xs" : "button"
+          size: size === "sm" || size === "xs" ? "xs" : "button"
         }
       ) : children
     );
@@ -443,6 +451,114 @@ var CardFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE_
 ));
 CardFooter.displayName = "CardFooter";
 
+// components/elements/Chip.tsx
+import React7 from "react";
+var Chip = React7.forwardRef(
+  ({
+    label,
+    size = "normal",
+    icon,
+    color,
+    radius = "inherit",
+    dotType,
+    ...rest
+  }, ref) => {
+    let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
+    let radiusStyles = {
+      inherit: " hawa-rounded",
+      full: "hawa-rounded-full",
+      none: "hawa-rounded-none"
+    };
+    let sizeStyles = {
+      small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
+      normal: "hawa-h-fit hawa-text-xs",
+      large: "hawa-text-base"
+    };
+    let dotStyles = {
+      small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
+      normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
+      large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
+    };
+    let dotTypeStyles = {
+      available: "hawa-bg-green-500",
+      unavailable: "hawa-bg-red-500"
+    };
+    let colorStyles = {
+      green: "hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800",
+      blue: "hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100",
+      red: "hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100",
+      yellow: "hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800",
+      orange: "hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100",
+      purple: "hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100",
+      cyan: "hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800",
+      hyper: "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
+      oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
+    };
+    if (label) {
+      return /* @__PURE__ */ React7.createElement(
+        "span",
+        {
+          ...rest,
+          ref,
+          className: cn(
+            defaultStyles,
+            sizeStyles[size],
+            radiusStyles[radius],
+            color ? colorStyles[color] : "hawa-border hawa-bg-none"
+          )
+        },
+        dotType && /* @__PURE__ */ React7.createElement(
+          "span",
+          {
+            className: cn(dotStyles[size], dotTypeStyles[dotType])
+          }
+        ),
+        icon && icon,
+        label
+      );
+    } else {
+      return /* @__PURE__ */ React7.createElement(
+        "span",
+        {
+          ...rest,
+          ref,
+          className: cn(
+            "hawa-w-2 hawa-h-2 hawa-rounded-full",
+            color ? colorStyles[color] : "hawa-border hawa-bg-none"
+          )
+        }
+      );
+    }
+  }
+);
+
+// components/elements/Skeleton.tsx
+import React8 from "react";
+function Skeleton({
+  className,
+  content,
+  animation = "pulse",
+  ...props
+}) {
+  const animationStyles = {
+    none: "hawa-rounded hawa-bg-muted",
+    pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
+    shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
+  };
+  return /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: cn(
+        animationStyles[animation],
+        content && "hawa-flex hawa-flex-col hawa-justify-center hawa-items-center",
+        className
+      ),
+      ...props
+    },
+    content && content
+  );
+}
+
 // components/elements/cards/PricingCard.tsx
 var PricingCard = ({
   size = "medium",
@@ -456,7 +572,7 @@ var PricingCard = ({
     medium: "hawa-mx-1 hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
     large: "hawa-mx-1 hawa-w-full hawa-max-w-lg hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background "
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Card,
     {
       dir: direction,
@@ -466,13 +582,13 @@ var PricingCard = ({
         "hawa-flex hawa-flex-col hawa-gap-4 hawa-rounded hawa-p-4 "
       )
     },
-    props.discount && /* @__PURE__ */ React7.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }),
+    props.discount && /* @__PURE__ */ React9.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }),
     " ",
-    /* @__PURE__ */ React7.createElement("h5", { className: "hawa-text-md 0 hawa-font-bold hawa-text-primary/70" }, props.texts.title),
-    /* @__PURE__ */ React7.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price), /* @__PURE__ */ React7.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React7.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText)),
-    /* @__PURE__ */ React7.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle),
-    props.features && /* @__PURE__ */ React7.createElement("ul", { role: "list", className: "hawa-space-y-0 " }, (_a = props.features) == null ? void 0 : _a.map((feature, o) => {
-      return /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React9.createElement("h5", { className: "hawa-text-md 0 hawa-font-bold hawa-text-primary/70" }, props.texts.title),
+    /* @__PURE__ */ React9.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React9.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price), /* @__PURE__ */ React9.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React9.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))),
+    /* @__PURE__ */ React9.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle),
+    props.features && /* @__PURE__ */ React9.createElement("ul", { role: "list", className: "hawa-space-y-0 " }, (_a = props.features) == null ? void 0 : _a.map((feature, o) => {
+      return /* @__PURE__ */ React9.createElement(
         "li",
         {
           key: o,
@@ -481,7 +597,7 @@ var PricingCard = ({
             !feature.included && "hawa-line-through"
           )
         },
-        feature.included ? /* @__PURE__ */ React7.createElement(
+        feature.included ? /* @__PURE__ */ React9.createElement(
           "svg",
           {
             "aria-label": "Check Icon",
@@ -490,7 +606,7 @@ var PricingCard = ({
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ React7.createElement(
+          /* @__PURE__ */ React9.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -498,11 +614,11 @@ var PricingCard = ({
               clipRule: "evenodd"
             }
           )
-        ) : /* @__PURE__ */ React7.createElement("div", { className: "hawa-w-4 hawa-h-4 hawa-rounded-full hawa-bg-primary/10 hawa-m-2 hawa-mx-2.5" }),
-        /* @__PURE__ */ React7.createElement("span", { className: "hawa-flex hawa-items-center hawa-flex-row hawa-gap-2 hawa-text-center hawa-font-normal hawa-leading-tight hawa-text-primary/70 " }, feature.text, " ", feature.soon && feature.included && /* @__PURE__ */ React7.createElement(Chip, { label: "soon", color: "oceanic", size: "small" }))
+        ) : /* @__PURE__ */ React9.createElement("div", { className: "hawa-w-4 hawa-h-4 hawa-rounded-full hawa-bg-primary/10 hawa-m-2 hawa-mx-2.5" }),
+        /* @__PURE__ */ React9.createElement("span", { className: "hawa-flex hawa-items-center hawa-flex-row hawa-gap-2 hawa-text-center hawa-font-normal hawa-leading-tight hawa-text-primary/70 " }, feature.text, " ", feature.soon && feature.included && /* @__PURE__ */ React9.createElement(Chip, { label: "soon", color: "oceanic", size: "small" }))
       );
     })),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React9.createElement(
       Button,
       {
         onClick: props.onPlanClicked,
@@ -515,16 +631,16 @@ var PricingCard = ({
 };
 
 // components/elements/cards/ItemCard.tsx
-import React10, { useEffect as useEffect2, useState as useState3 } from "react";
+import React12, { useEffect as useEffect2, useState as useState3 } from "react";
 
 // components/elements/DropdownMenu.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 var DropdownMenuRoot = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuSubTrigger = React8.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React8.createElement(
+var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -535,9 +651,9 @@ var DropdownMenuSubTrigger = React8.forwardRef(({ className, inset, children, ..
     ),
     ...props
   },
-  /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
+  /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
   " ",
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "svg",
     {
       "aria-label": "Chevron Right Icon",
@@ -549,7 +665,7 @@ var DropdownMenuSubTrigger = React8.forwardRef(({ className, inset, children, ..
       width: "1em",
       className: cn(props.dir === "rtl" ? "hawa-rotate-180" : "")
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -559,7 +675,7 @@ var DropdownMenuSubTrigger = React8.forwardRef(({ className, inset, children, ..
   )
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React8.createElement(
+var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -571,7 +687,7 @@ var DropdownMenuSubContent = React8.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React8.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React8.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React8.createElement(
+var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React10.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React10.createElement(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -584,8 +700,8 @@ var DropdownMenuContent = React8.forwardRef(({ className, sideOffset = 4, ...pro
   }
 )));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React8.forwardRef(({ className, inset, slug, ...props }, ref) => {
-  return /* @__PURE__ */ React8.createElement("a", { href: slug }, /* @__PURE__ */ React8.createElement(
+var DropdownMenuItem = React10.forwardRef(({ className, inset, slug, ...props }, ref) => {
+  return /* @__PURE__ */ React10.createElement("a", { href: slug }, /* @__PURE__ */ React10.createElement(
     DropdownMenuPrimitive.Item,
     {
       disabled: props.disabled,
@@ -598,14 +714,14 @@ var DropdownMenuItem = React8.forwardRef(({ className, inset, slug, ...props },
       ),
       ...props
     },
-    /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
+    /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
     props.end && props.end,
-    !props.end && props.shortcut && /* @__PURE__ */ React8.createElement(DropdownMenuShortcut, null, props.shortcut),
-    !props.end && props.badged && /* @__PURE__ */ React8.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-bg-red-500 hawa-rounded-full" })
+    !props.end && props.shortcut && /* @__PURE__ */ React10.createElement(DropdownMenuShortcut, null, props.shortcut),
+    !props.end && props.badged && /* @__PURE__ */ React10.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-bg-red-500 hawa-rounded-full" })
   ));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React8.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React8.createElement(
+var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -616,7 +732,7 @@ var DropdownMenuCheckboxItem = React8.forwardRef(({ className, children, checked
     checked,
     ...props
   },
-  /* @__PURE__ */ React8.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React8.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React10.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React10.createElement(
     "svg",
     {
       "aria-label": "Check Mark",
@@ -627,12 +743,12 @@ var DropdownMenuCheckboxItem = React8.forwardRef(({ className, children, checked
       height: "0.60em",
       width: "0.60em"
     },
-    /* @__PURE__ */ React8.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__ */ React10.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
   ), " ")),
   children
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React8.createElement(
+var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -642,7 +758,7 @@ var DropdownMenuRadioItem = React8.forwardRef(({ className, children, ...props }
     ),
     ...props
   },
-  /* @__PURE__ */ React8.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React8.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React10.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React10.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -657,12 +773,12 @@ var DropdownMenuRadioItem = React8.forwardRef(({ className, children, ...props }
       strokeLinejoin: "round",
       className: "hawa-h-2 hawa-w-2 hawa-fill-current"
     },
-    /* @__PURE__ */ React8.createElement("circle", { cx: "12", cy: "12", r: "10" })
+    /* @__PURE__ */ React10.createElement("circle", { cx: "12", cy: "12", r: "10" })
   ))),
   children
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React8.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React8.createElement(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -675,7 +791,7 @@ var DropdownMenuLabel = React8.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React8.createElement(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -688,7 +804,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "span",
     {
       className: cn(
@@ -727,7 +843,7 @@ var DropdownMenu = ({
     default: "hawa-px-2 hawa-py-3 ",
     sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
   };
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React10.createElement(
     DropdownMenuRoot,
     {
       onOpenChange,
@@ -735,8 +851,8 @@ var DropdownMenu = ({
       modal: false,
       dir: direction
     },
-    /* @__PURE__ */ React8.createElement(DropdownMenuTrigger, { asChild: true, className: triggerClassname }, trigger),
-    /* @__PURE__ */ React8.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(DropdownMenuTrigger, { asChild: true, className: triggerClassname }, trigger),
+    /* @__PURE__ */ React10.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React10.createElement(
       DropdownMenuContent,
       {
         side,
@@ -752,13 +868,13 @@ var DropdownMenu = ({
       header && header,
       items && items.map((item, index) => {
         if (item.itemType === "separator") {
-          return /* @__PURE__ */ React8.createElement(DropdownMenuSeparator, { key: index });
+          return /* @__PURE__ */ React10.createElement(DropdownMenuSeparator, { key: index });
         } else if (item.itemType === "label") {
-          return /* @__PURE__ */ React8.createElement(DropdownMenuLabel, { key: index }, item.label);
+          return /* @__PURE__ */ React10.createElement(DropdownMenuLabel, { key: index }, item.label);
         } else if (item.itemType === "custom") {
-          return /* @__PURE__ */ React8.createElement("div", { key: index }, item.content);
+          return /* @__PURE__ */ React10.createElement("div", { key: index }, item.content);
         } else {
-          return item.subitems ? /* @__PURE__ */ React8.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React8.createElement(
+          return item.subitems ? /* @__PURE__ */ React10.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React10.createElement(
             DropdownMenuSubTrigger,
             {
               className: cn(sizeStyles[size]),
@@ -766,7 +882,7 @@ var DropdownMenu = ({
             },
             item.icon && item.icon,
             item.label && item.label
-          ), /* @__PURE__ */ React8.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React8.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React8.createElement(
+          ), /* @__PURE__ */ React10.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React10.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React10.createElement(
             DropdownMenuItem,
             {
               slug: subitem.slug,
@@ -793,7 +909,7 @@ var DropdownMenu = ({
             },
             subitem.icon && subitem.icon,
             subitem.label && subitem.label
-          ))))) : /* @__PURE__ */ React8.createElement(
+          ))))) : /* @__PURE__ */ React10.createElement(
             DropdownMenuItem,
             {
               slug: item.slug,
@@ -846,12 +962,12 @@ var DropdownMenu = ({
 };
 
 // components/elements/StopPropagationWrapper.tsx
-import React9 from "react";
+import React11 from "react";
 var StopPropagationWrapper = (props) => {
   const handleClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ React9.createElement("div", { onClick: handleClick }, props.children);
+  return /* @__PURE__ */ React11.createElement("div", { onClick: handleClick }, props.children);
 };
 
 // components/elements/cards/ItemCard.tsx
@@ -896,7 +1012,7 @@ var ItemCard = ({
     };
     return () => window.onclick = null;
   }, [openActionHeader]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       className: cn(
@@ -912,7 +1028,7 @@ var ItemCard = ({
       },
       ...props
     },
-    cardImage && /* @__PURE__ */ React10.createElement("div", { className: "hawa-group hawa-relative hawa-overflow-clip" }, /* @__PURE__ */ React10.createElement(
+    cardImage && /* @__PURE__ */ React12.createElement("div", { className: "hawa-group hawa-relative hawa-overflow-clip" }, /* @__PURE__ */ React12.createElement(
       "img",
       {
         src: cardImage,
@@ -921,7 +1037,7 @@ var ItemCard = ({
           clickableImage ? "hawa-overflow-clip hawa-transition-all group-hover:hawa-blur-lg" : ""
         )
       }
-    ), clickableImage && /* @__PURE__ */ React10.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React10.createElement("div", { className: "hawa-absolute hawa-left-0 hawa-top-0 hawa-flex hawa-h-full hawa-w-full hawa-items-center hawa-justify-center hawa-opacity-0 hawa-transition-all group-hover:hawa-opacity-100 " }, /* @__PURE__ */ React10.createElement(
+    ), clickableImage && /* @__PURE__ */ React12.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React12.createElement("div", { className: "hawa-absolute hawa-left-0 hawa-top-0 hawa-flex hawa-h-full hawa-w-full hawa-items-center hawa-justify-center hawa-opacity-0 hawa-transition-all group-hover:hawa-opacity-100 " }, /* @__PURE__ */ React12.createElement(
       Button,
       {
         variant: "secondary",
@@ -931,19 +1047,19 @@ var ItemCard = ({
       clickableImageActionIcon,
       clickableImageActionText || "Click"
     )))),
-    /* @__PURE__ */ React10.createElement("div", { className: "hawa-relative hawa-w-full hawa-p-4 xs:hawa-p-6 xs:hawa-pb-2 xs:hawa-px-2" }, headerActions && /* @__PURE__ */ React10.createElement("div", { className: "hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3" }, /* @__PURE__ */ React10.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: "hawa-relative hawa-w-full hawa-p-4 xs:hawa-p-6 xs:hawa-pb-2 xs:hawa-px-2" }, headerActions && /* @__PURE__ */ React12.createElement("div", { className: "hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3" }, /* @__PURE__ */ React12.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React12.createElement(
       DropdownMenu,
       {
         items: headerActions,
-        trigger: /* @__PURE__ */ React10.createElement(
+        trigger: /* @__PURE__ */ React12.createElement(
           Button,
           {
             variant: "ghost",
             size: "smallIcon",
             onClick: handleOpenActionHeader
           },
-          /* @__PURE__ */ React10.createElement("span", { className: "hawa-sr-only" }, "Open dropdown"),
-          /* @__PURE__ */ React10.createElement(
+          /* @__PURE__ */ React12.createElement("span", { className: "hawa-sr-only" }, "Open dropdown"),
+          /* @__PURE__ */ React12.createElement(
             "svg",
             {
               className: "hawa-h-5 hawa-w-5",
@@ -951,11 +1067,11 @@ var ItemCard = ({
               fill: "currentColor",
               viewBox: "0 0 20 20"
             },
-            /* @__PURE__ */ React10.createElement("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" })
+            /* @__PURE__ */ React12.createElement("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" })
           )
         )
       }
-    ))), /* @__PURE__ */ React10.createElement("div", { className: " hawa-mx-2" }, header && /* @__PURE__ */ React10.createElement("h5", { className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight " }, header), content && /* @__PURE__ */ React10.createElement("span", { className: "hawa-w-full hawa-font-normal " }, content)), actions || counts ? /* @__PURE__ */ React10.createElement(
+    ))), /* @__PURE__ */ React12.createElement("div", { className: " hawa-mx-2" }, header && /* @__PURE__ */ React12.createElement("h5", { className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight " }, header), content && /* @__PURE__ */ React12.createElement("span", { className: "hawa-w-full hawa-font-normal " }, content)), actions || counts ? /* @__PURE__ */ React12.createElement(
       "div",
       {
         className: cn(
@@ -964,19 +1080,19 @@ var ItemCard = ({
         )
       },
       counts,
-      /* @__PURE__ */ React10.createElement(StopPropagationWrapper, null, actions)
+      /* @__PURE__ */ React12.createElement(StopPropagationWrapper, null, actions)
     ) : null)
   );
 };
 
 // components/elements/cards/LandingCard.tsx
-import React11 from "react";
+import React13 from "react";
 var LandingCard = (props) => {
-  return /* @__PURE__ */ React11.createElement(Card, { className: props.className }, /* @__PURE__ */ React11.createElement(CardHeader, null, props.icon, /* @__PURE__ */ React11.createElement(CardTitle, null, props.title), /* @__PURE__ */ React11.createElement(CardDescription, null, props.subtitle)));
+  return /* @__PURE__ */ React13.createElement(Card, { className: props.className }, /* @__PURE__ */ React13.createElement(CardHeader, null, props.icon, /* @__PURE__ */ React13.createElement(CardTitle, null, props.title), /* @__PURE__ */ React13.createElement(CardDescription, null, props.subtitle)));
 };
 
 // components/elements/PinInput.tsx
-import React12, { useEffect as useEffect3, useState as useState4 } from "react";
+import React14, { useEffect as useEffect3, useState as useState4 } from "react";
 var PinInput = ({
   label,
   icon,
@@ -1019,13 +1135,13 @@ var PinInput = ({
       }
     }
   };
-  return /* @__PURE__ */ React12.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React14.createElement(
     "div",
     {
       className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
       dir: "ltr"
     },
-    pin.map((value, index) => /* @__PURE__ */ React12.createElement(
+    pin.map((value, index) => /* @__PURE__ */ React14.createElement(
       "input",
       {
         key: index,
@@ -1044,7 +1160,7 @@ var PinInput = ({
         ...props
       }
     ))
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React14.createElement(
     "p",
     {
       className: cn(
@@ -1057,7 +1173,7 @@ var PinInput = ({
 };
 
 // components/elements/PhoneInput.tsx
-import React17, { useState as useState5, useRef as useRef2, useEffect as useEffect4 } from "react";
+import React18, { useState as useState5, useRef as useRef2, useEffect as useEffect4 } from "react";
 
 // components/countries.ts
 var countries = [
@@ -2754,17 +2870,17 @@ var countries_default = countries;
 
 // components/elements/Select.tsx
 import clsx2 from "clsx";
-import React16 from "react";
+import React17 from "react";
 import ReactSelect from "react-select";
 import CreatableSelect from "react-select/creatable";
 
 // components/elements/Label.tsx
-import * as React14 from "react";
+import * as React16 from "react";
 
 // components/elements/Tooltip.tsx
-import React13 from "react";
+import React15 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-var TooltipContent = React13.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+var TooltipContent = React15.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React15.createElement(
   TooltipPrimitive.Content,
   {
     ref,
@@ -2777,7 +2893,7 @@ var TooltipContent = React13.forwardRef(({ className, sideOffset = 4, ...props }
   }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var TooltipArrow = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
+var TooltipArrow = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
 var Tooltip = ({
   side,
@@ -2792,13 +2908,13 @@ var Tooltip = ({
   delayDuration = 300,
   ...props
 }) => {
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(
     TooltipPrimitive.TooltipProvider,
     {
       delayDuration,
       ...providerProps
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement(
       TooltipPrimitive.Root,
       {
         open,
@@ -2806,14 +2922,14 @@ var Tooltip = ({
         onOpenChange,
         ...props
       },
-      /* @__PURE__ */ React13.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
-      /* @__PURE__ */ React13.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
+      /* @__PURE__ */ React15.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
+      /* @__PURE__ */ React15.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
     )
   );
 };
 
 // components/elements/Label.tsx
-var Label2 = React14.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
+var Label2 = React16.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React16.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React16.createElement(
   "label",
   {
     ref,
@@ -2824,8 +2940,8 @@ var Label2 = React14.forwardRef(({ className, hint, hintSide, required, children
     ...props
   },
   children,
-  required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
-), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.createElement(
+  required && /* @__PURE__ */ React16.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
+), hint && /* @__PURE__ */ React16.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React16.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2837,39 +2953,12 @@ var Label2 = React14.forwardRef(({ className, hint, hintSide, required, children
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-  /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
+  /* @__PURE__ */ React16.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ React16.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+  /* @__PURE__ */ React16.createElement("path", { d: "M12 17h.01" })
 ))));
 Label2.displayName = "Label";
 
-// components/elements/Skeleton.tsx
-import React15 from "react";
-function Skeleton({
-  className,
-  content,
-  animation = "pulse",
-  ...props
-}) {
-  const animationStyles = {
-    none: "hawa-rounded hawa-bg-muted",
-    pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
-    shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
-  };
-  return /* @__PURE__ */ React15.createElement(
-    "div",
-    {
-      className: cn(
-        animationStyles[animation],
-        content && "hawa-flex hawa-flex-col hawa-justify-center hawa-items-center",
-        className
-      ),
-      ...props
-    },
-    content && content
-  );
-}
-
 // components/elements/Select.tsx
 var Select = ({
   labelProps,
@@ -2878,10 +2967,10 @@ var Select = ({
 }) => {
   const NoOption = () => {
     var _a, _b;
-    return /* @__PURE__ */ React16.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
+    return /* @__PURE__ */ React17.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
   };
   const Control = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement(
       "div",
       {
         ref: innerRef,
@@ -2894,7 +2983,7 @@ var Select = ({
     );
   };
   const Option = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement(
       "div",
       {
         ref: innerRef,
@@ -2915,7 +3004,7 @@ var Select = ({
     ...menuProps
   }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement(
       "div",
       {
         className: cn(
@@ -2929,7 +3018,7 @@ var Select = ({
       children
     );
   };
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     "div",
     {
       className: cn(
@@ -2937,10 +3026,10 @@ var Select = ({
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ React16.createElement(Label2, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ React16.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
+    props.label && /* @__PURE__ */ React17.createElement(Label2, { ...labelProps }, props.label),
+    props.isLoading ? /* @__PURE__ */ React17.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React17.createElement(
         ReactSelect,
         {
           noOptionsMessage: NoOption,
@@ -2977,7 +3066,7 @@ var Select = ({
           isSearchable: props.isSearchable
         }
       )
-    ) : /* @__PURE__ */ React16.createElement(
+    ) : /* @__PURE__ */ React17.createElement(
       CreatableSelect,
       {
         formatCreateLabel: (inputValue) => {
@@ -3007,7 +3096,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ React16.createElement(
+    !props.hideHelperText && /* @__PURE__ */ React17.createElement(
       "p",
       {
         className: cn(
@@ -3043,7 +3132,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ React17.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React17.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ React18.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React18.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React18.createElement(
     Select,
     {
       width: "fit",
@@ -3059,7 +3148,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
       value: countryCode == null ? void 0 : countryCode.label,
       onChange: setCountryCode
     }
-  ), /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-h-fit hawa-relative hawa-flex-col  hawa-justify-center hawa-w-full hawa-gap-0" }, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement("div", { className: "hawa-flex hawa-h-fit hawa-relative hawa-flex-col  hawa-justify-center hawa-w-full hawa-gap-0" }, /* @__PURE__ */ React18.createElement(
     "input",
     {
       ref: inputRef,
@@ -3072,7 +3161,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
       type: "tel",
       placeholder: "531045453"
     }
-  ))), /* @__PURE__ */ React17.createElement(
+  ))), /* @__PURE__ */ React18.createElement(
     "p",
     {
       className: cn(
@@ -3085,7 +3174,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
 };
 
 // components/elements/Checkbox.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 var Checkbox = ({
   id,
@@ -3095,7 +3184,7 @@ var Checkbox = ({
   disabled,
   ...props
 }) => {
-  return /* @__PURE__ */ React18.createElement("div", { className: "hawa-items-top  hawa-flex hawa-gap-2 " }, /* @__PURE__ */ React18.createElement(CheckboxElement, { ...props, disabled, id }), (label || helperText) && /* @__PURE__ */ React18.createElement("div", { className: "hawa-grid hawa-gap-1.5 hawa-leading-none" }, label && /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { className: "hawa-items-top  hawa-flex hawa-gap-2 " }, /* @__PURE__ */ React19.createElement(CheckboxElement, { ...props, disabled, id }), (label || helperText) && /* @__PURE__ */ React19.createElement("div", { className: "hawa-grid hawa-gap-1.5 hawa-leading-none" }, label && /* @__PURE__ */ React19.createElement(
     "label",
     {
       htmlFor: id,
@@ -3105,7 +3194,7 @@ var Checkbox = ({
       )
     },
     label
-  ), sublabel && /* @__PURE__ */ React18.createElement(
+  ), sublabel && /* @__PURE__ */ React19.createElement(
     "label",
     {
       htmlFor: id,
@@ -3115,7 +3204,7 @@ var Checkbox = ({
       )
     },
     sublabel
-  ), helperText && !disabled && /* @__PURE__ */ React18.createElement(
+  ), helperText && !disabled && /* @__PURE__ */ React19.createElement(
     "label",
     {
       htmlFor: id,
@@ -3127,7 +3216,7 @@ var Checkbox = ({
     helperText
   )));
 };
-var CheckboxElement = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React18.createElement(
+var CheckboxElement = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React19.createElement(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -3137,14 +3226,14 @@ var CheckboxElement = React18.forwardRef(({ className, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React18.createElement(
+  /* @__PURE__ */ React19.createElement(
     CheckboxPrimitive.Indicator,
     {
       className: cn(
         "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
       )
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       "svg",
       {
         "aria-label": "Check Mark",
@@ -3155,7 +3244,7 @@ var CheckboxElement = React18.forwardRef(({ className, ...props }, ref) => /* @_
         height: "0.60em",
         width: "0.60em"
       },
-      /* @__PURE__ */ React18.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__ */ React19.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" })
     ),
     " "
   )
@@ -3163,7 +3252,7 @@ var CheckboxElement = React18.forwardRef(({ className, ...props }, ref) => /* @_
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // components/elements/Radio.tsx
-import React19, { useState as useState6, useRef as useRef3, useEffect as useEffect5 } from "react";
+import React20, { useState as useState6, useRef as useRef3, useEffect as useEffect5 } from "react";
 var Radio = ({
   design = "default",
   width = "default",
@@ -3183,7 +3272,7 @@ var Radio = ({
     default: "hawa-max-w-fit",
     full: "hawa-w-full"
   };
-  const [parentDirection, setParentDirection] = React19.useState(
+  const [parentDirection, setParentDirection] = React20.useState(
     null
   );
   const parentRef = useRef3(null);
@@ -3197,7 +3286,7 @@ var Radio = ({
   });
   switch (design) {
     case "tabs":
-      return /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React20.createElement(
         "ul",
         {
           ref: parentRef,
@@ -3208,7 +3297,7 @@ var Radio = ({
             orientationStyle[orientation]
           )
         },
-        (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ React19.createElement(
+        (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ React20.createElement(
           "li",
           {
             "aria-current": "page",
@@ -3235,13 +3324,13 @@ var Radio = ({
         ))
       );
     case "bordered":
-      return /* @__PURE__ */ React19.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React20.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React20.createElement(
         "div",
         {
           key: i,
           className: "hawa-rounded hawa-border hawa-border-gray-200 "
         },
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React20.createElement(
           "div",
           {
             className: cn(
@@ -3250,7 +3339,7 @@ var Radio = ({
             ),
             key: i + 1
           },
-          /* @__PURE__ */ React19.createElement(
+          /* @__PURE__ */ React20.createElement(
             "input",
             {
               disabled: opt.disabled,
@@ -3260,7 +3349,7 @@ var Radio = ({
               name: "bordered-radio"
             }
           ),
-          /* @__PURE__ */ React19.createElement(
+          /* @__PURE__ */ React20.createElement(
             "label",
             {
               htmlFor: opt.value.toString(),
@@ -3274,7 +3363,7 @@ var Radio = ({
         )
       )));
     case "cards":
-      return /* @__PURE__ */ React19.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React19.createElement("li", { key: o }, /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React20.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React20.createElement("li", { key: o }, /* @__PURE__ */ React20.createElement(
         "input",
         {
           type: "radio",
@@ -3285,7 +3374,7 @@ var Radio = ({
           required: true,
           disabled: opt.disabled
         }
-      ), /* @__PURE__ */ React19.createElement(
+      ), /* @__PURE__ */ React20.createElement(
         "label",
         {
           htmlFor: opt.value.toString(),
@@ -3294,10 +3383,10 @@ var Radio = ({
             opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300"
           )
         },
-        /* @__PURE__ */ React19.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ React19.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React19.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
+        /* @__PURE__ */ React20.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ React20.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React20.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
       ))));
     default:
-      return /* @__PURE__ */ React19.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React19.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React19.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React20.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React20.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React20.createElement(
         "div",
         {
           className: cn(
@@ -3306,7 +3395,7 @@ var Radio = ({
           ),
           key: i + 1
         },
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React20.createElement(
           "input",
           {
             disabled: opt.disabled,
@@ -3324,7 +3413,7 @@ var Radio = ({
             }
           }
         ),
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React20.createElement(
           "label",
           {
             htmlFor: opt.value.toString(),
@@ -3335,7 +3424,7 @@ var Radio = ({
           },
           opt.label
         )
-      ))), /* @__PURE__ */ React19.createElement(
+      ))), /* @__PURE__ */ React20.createElement(
         "p",
         {
           className: cn(
@@ -3349,15 +3438,15 @@ var Radio = ({
 };
 
 // components/elements/Switch.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-var Switch = React20.forwardRef(
+var Switch = React21.forwardRef(
   ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
-    const [parentDirection, setParentDirection] = React20.useState(
+    const [parentDirection, setParentDirection] = React21.useState(
       null
     );
-    const parentRef = React20.useRef(null);
-    React20.useEffect(() => {
+    const parentRef = React21.useRef(null);
+    React21.useEffect(() => {
       var _a;
       const parentNode = (_a = parentRef.current) == null ? void 0 : _a.parentNode;
       if (parentNode) {
@@ -3385,13 +3474,13 @@ var Switch = React20.forwardRef(
       full: "hawa-rounded-full",
       inherit: "hawa-rounded-inner"
     };
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React21.createElement(
       "div",
       {
         className: "hawa-flex hawa-flex-row hawa-items-center",
         ref: parentRef
       },
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement(
         SwitchPrimitives.Root,
         {
           className: cn(
@@ -3405,7 +3494,7 @@ var Switch = React20.forwardRef(
           ...props,
           ref
         },
-        /* @__PURE__ */ React20.createElement(
+        /* @__PURE__ */ React21.createElement(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -3419,17 +3508,17 @@ var Switch = React20.forwardRef(
           }
         )
       ),
-      label && /* @__PURE__ */ React20.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
+      label && /* @__PURE__ */ React21.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;
 
 // components/elements/Textarea.tsx
-import * as React21 from "react";
-var Textarea = React21.forwardRef(
+import * as React22 from "react";
+var Textarea = React22.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ React21.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React22.createElement(
       "textarea",
       {
         className: cn(
@@ -3439,7 +3528,7 @@ var Textarea = React21.forwardRef(
         ref,
         ...props
       }
-    ), /* @__PURE__ */ React21.createElement(
+    ), /* @__PURE__ */ React22.createElement(
       "p",
       {
         className: cn(
@@ -3454,9 +3543,9 @@ var Textarea = React21.forwardRef(
 Textarea.displayName = "Textarea";
 
 // components/elements/Slider.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-var Slider = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React22.createElement(
+var Slider = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React23.createElement(
   SliderPrimitive.Root,
   {
     ref,
@@ -3466,13 +3555,13 @@ var Slider = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props
   },
-  /* @__PURE__ */ React22.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-bg-background hawa-border" }, /* @__PURE__ */ React22.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
-  /* @__PURE__ */ React22.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__ */ React23.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-bg-background hawa-border" }, /* @__PURE__ */ React23.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
+  /* @__PURE__ */ React23.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;
 
 // components/elements/ColorPicker.tsx
-import React23, {
+import React24, {
   useState as useState8,
   useEffect as useEffect7
 } from "react";
@@ -3506,13 +3595,13 @@ var ColorPicker = ({
       inputElement.dispatchEvent(event);
     }
   };
-  return /* @__PURE__ */ React23.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React23.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React23.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React24.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React24.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React24.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
       className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       "input",
       {
         type: "color",
@@ -3530,7 +3619,7 @@ var ColorPicker = ({
         ...colorPickerProps
       }
     )
-  ), /* @__PURE__ */ React23.createElement("div", { className: "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-w-full hawa-gap-0" }, /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-max-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-w-full hawa-gap-0" }, /* @__PURE__ */ React24.createElement(
     "input",
     {
       maxLength: 7,
@@ -3543,7 +3632,7 @@ var ColorPicker = ({
       ),
       ...textInputProps
     }
-  ))), /* @__PURE__ */ React23.createElement(
+  ))), /* @__PURE__ */ React24.createElement(
     "p",
     {
       className: cn(
@@ -3556,7 +3645,7 @@ var ColorPicker = ({
 };
 
 // components/elements/Input.tsx
-import React24, { forwardRef as forwardRef9 } from "react";
+import React25, { forwardRef as forwardRef9 } from "react";
 var Input = forwardRef9(
   ({
     margin = "none",
@@ -3583,7 +3672,7 @@ var Input = forwardRef9(
     };
     let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
     let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm ";
-    return /* @__PURE__ */ React24.createElement(
+    return /* @__PURE__ */ React25.createElement(
       "div",
       {
         className: cn(
@@ -3594,8 +3683,8 @@ var Input = forwardRef9(
           "hawa-w-full hawa-gap-2"
         )
       },
-      props.label && /* @__PURE__ */ React24.createElement(Label2, { ...labelProps }, props.label),
-      props.isLoading ? /* @__PURE__ */ React24.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React24.createElement(React24.Fragment, null, !props.hideSeparator && /* @__PURE__ */ React24.createElement(
+      props.label && /* @__PURE__ */ React25.createElement(Label2, { ...labelProps }, props.label),
+      props.isLoading ? /* @__PURE__ */ React25.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React25.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React25.createElement(React25.Fragment, null, !props.hideSeparator && /* @__PURE__ */ React25.createElement(
         "div",
         {
           className: cn(
@@ -3603,7 +3692,7 @@ var Input = forwardRef9(
             preview ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         }
-      ), /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", { className: cn("hawa-relative") }, props.startIcon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React24.createElement(
+      ), /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("div", { className: cn("hawa-relative") }, props.startIcon && /* @__PURE__ */ React25.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React25.createElement(
         "div",
         {
           className: cn(
@@ -3612,7 +3701,7 @@ var Input = forwardRef9(
           )
         },
         props.endIcon
-      ), /* @__PURE__ */ React24.createElement(
+      ), /* @__PURE__ */ React25.createElement(
         "input",
         {
           ...props,
@@ -3638,7 +3727,7 @@ var Input = forwardRef9(
             (_b = props.inputProps) == null ? void 0 : _b.className
           )
         }
-      )), !forceHideHelperText && /* @__PURE__ */ React24.createElement(
+      )), !forceHideHelperText && /* @__PURE__ */ React25.createElement(
         "p",
         {
           className: cn(
@@ -3647,7 +3736,7 @@ var Input = forwardRef9(
           )
         },
         props.helperText
-      ), !props.disabled && forceHideHelperText && /* @__PURE__ */ React24.createElement(
+      ), !props.disabled && forceHideHelperText && /* @__PURE__ */ React25.createElement(
         "div",
         {
           className: cn(
@@ -3656,7 +3745,7 @@ var Input = forwardRef9(
           )
         },
         props.helperText
-      ), showCount && /* @__PURE__ */ React24.createElement(
+      ), showCount && /* @__PURE__ */ React25.createElement(
         "div",
         {
           className: cn(
@@ -3677,20 +3766,20 @@ var Input = forwardRef9(
 );
 
 // components/elements/Combobox.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 
 // components/elements/Command.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 
 // components/elements/Dialog.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = ({ ...props }) => /* @__PURE__ */ React25.createElement(DialogPrimitive.Portal, { ...props });
-var DialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
+var DialogPortal = ({ ...props }) => /* @__PURE__ */ React26.createElement(DialogPrimitive.Portal, { ...props });
+var DialogOverlay = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -3701,7 +3790,7 @@ var DialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__P
     ...props
   }
 ));
-var DialogContent = React25.forwardRef(({ className, children, persist, ...props }, ref) => /* @__PURE__ */ React25.createElement(DialogPortal, null, /* @__PURE__ */ React25.createElement(DialogOverlay, null), /* @__PURE__ */ React25.createElement(
+var DialogContent = React26.forwardRef(({ className, children, persist, ...props }, ref) => /* @__PURE__ */ React26.createElement(DialogPortal, null, /* @__PURE__ */ React26.createElement(DialogOverlay, null), /* @__PURE__ */ React26.createElement(
   DialogPrimitive.Content,
   {
     onPointerDownOutside: (e) => {
@@ -3717,7 +3806,7 @@ var DialogContent = React25.forwardRef(({ className, children, persist, ...props
     ...props
   },
   children,
-  /* @__PURE__ */ React25.createElement(
+  /* @__PURE__ */ React26.createElement(
     DialogPrimitive.Close,
     {
       className: cn(
@@ -3725,7 +3814,7 @@ var DialogContent = React25.forwardRef(({ className, children, persist, ...props
         props.dir === "rtl" ? " hawa-left-4" : " hawa-right-4"
       )
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(
       "svg",
       {
         "aria-label": "Close Icon",
@@ -3734,7 +3823,7 @@ var DialogContent = React25.forwardRef(({ className, children, persist, ...props
         fill: "currentColor",
         viewBox: "0 0 20 20"
       },
-      /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -3743,10 +3832,10 @@ var DialogContent = React25.forwardRef(({ className, children, persist, ...props
         }
       )
     ),
-    /* @__PURE__ */ React25.createElement("span", { className: "hawa-sr-only" }, "Close")
+    /* @__PURE__ */ React26.createElement("span", { className: "hawa-sr-only" }, "Close")
   )
 )));
-var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, persist, ...props }, ref) => /* @__PURE__ */ React25.createElement(DialogPortal, null, /* @__PURE__ */ React25.createElement(DialogOverlay, null), /* @__PURE__ */ React25.createElement(
+var DialogCarouselContent = React26.forwardRef(({ className, children, onPrev, persist, ...props }, ref) => /* @__PURE__ */ React26.createElement(DialogPortal, null, /* @__PURE__ */ React26.createElement(DialogOverlay, null), /* @__PURE__ */ React26.createElement(
   DialogPrimitive.Content,
   {
     onPointerDownOutside: (e) => {
@@ -3762,7 +3851,7 @@ var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, p
     ...props
   },
   children,
-  /* @__PURE__ */ React25.createElement(
+  /* @__PURE__ */ React26.createElement(
     "div",
     {
       className: cn(
@@ -3770,7 +3859,7 @@ var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, p
         onPrev ? "hawa-justify-between" : "hawa-justify-end"
       )
     },
-    onPrev && /* @__PURE__ */ React25.createElement(
+    onPrev && /* @__PURE__ */ React26.createElement(
       "div",
       {
         onClick: onPrev,
@@ -3779,7 +3868,7 @@ var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, p
           props.dir === "rtl" && "hawa-rotate-180"
         )
       },
-      /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -3793,10 +3882,10 @@ var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, p
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React25.createElement("path", { d: "m15 18-6-6 6-6" })
+        /* @__PURE__ */ React26.createElement("path", { d: "m15 18-6-6 6-6" })
       )
     ),
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(
       DialogPrimitive.Close,
       {
         className: cn(
@@ -3804,7 +3893,7 @@ var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, p
           props.dir === "rtl" ? " hawa-left-4" : " hawa-right-4"
         )
       },
-      /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement(
         "svg",
         {
           "aria-label": "Close Icon",
@@ -3813,7 +3902,7 @@ var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, p
           fill: "currentColor",
           viewBox: "0 0 20 20"
         },
-        /* @__PURE__ */ React25.createElement(
+        /* @__PURE__ */ React26.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -3822,14 +3911,14 @@ var DialogCarouselContent = React25.forwardRef(({ className, children, onPrev, p
           }
         )
       ),
-      /* @__PURE__ */ React25.createElement("span", { className: "hawa-sr-only" }, "Close")
+      /* @__PURE__ */ React26.createElement("span", { className: "hawa-sr-only" }, "Close")
     )
   )
 )));
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ React25.createElement(
+}) => /* @__PURE__ */ React26.createElement(
   "div",
   {
     className: cn(
@@ -3839,7 +3928,7 @@ var DialogHeader = ({
     ...props
   }
 );
-var DialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
+var DialogTitle = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -3850,7 +3939,7 @@ var DialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-var DialogDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
+var DialogDescription = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -3864,7 +3953,7 @@ var DialogDescription = React25.forwardRef(({ className, ...props }, ref) => /*
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ React25.createElement(
+}) => /* @__PURE__ */ React26.createElement(
   "div",
   {
     className: cn(
@@ -3880,12 +3969,12 @@ var DialogCarousel = ({
   children,
   direction
 }) => {
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (stepsApi) {
       stepsApi.reInit();
     }
   }, [stepsApi, children]);
-  return /* @__PURE__ */ React25.createElement("div", { className: "hawa-overflow-hidden" }, /* @__PURE__ */ React25.createElement("div", { ref: stepsRef, dir: direction }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement("div", { className: "hawa-overflow-hidden" }, /* @__PURE__ */ React26.createElement("div", { ref: stepsRef, dir: direction }, /* @__PURE__ */ React26.createElement(
     "div",
     {
       className: "hawa-flex",
@@ -3893,7 +3982,7 @@ var DialogCarousel = ({
         transition: "height 0.2s"
       }
     },
-    React25.Children.map(children, (child, index) => /* @__PURE__ */ React25.createElement(
+    React26.Children.map(children, (child, index) => /* @__PURE__ */ React26.createElement(
       "div",
       {
         className: cn(
@@ -3910,14 +3999,14 @@ var DialogSteps = ({
   visibleStepRef,
   children
 }) => {
-  const [dialogHeight, setDialogHeight] = React25.useState(null);
-  React25.useEffect(() => {
+  const [dialogHeight, setDialogHeight] = React26.useState(null);
+  React26.useEffect(() => {
     if (visibleStepRef.current) {
       setDialogHeight(visibleStepRef.current.offsetHeight);
       console.log("height is ", visibleStepRef.current.offsetHeight);
     }
   }, [currentStep, visibleStepRef]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     "div",
     {
       className: "hawa-relative hawa-overflow-clip",
@@ -3926,7 +4015,7 @@ var DialogSteps = ({
         transition: "height 0.2s"
       }
     },
-    React25.Children.map(children, (child, index) => /* @__PURE__ */ React25.createElement(
+    React26.Children.map(children, (child, index) => /* @__PURE__ */ React26.createElement(
       "div",
       {
         ref: currentStep === `step-${index + 1}` ? visibleStepRef : null,
@@ -3944,7 +4033,7 @@ var DialogStep = ({
   className,
   stepRef
 }) => {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     "div",
     {
       id,
@@ -3955,7 +4044,7 @@ var DialogStep = ({
   );
 };
 var DialogBody = ({ children, className }) => {
-  return /* @__PURE__ */ React25.createElement("div", { className: cn("hawa-py-6", className) }, children);
+  return /* @__PURE__ */ React26.createElement("div", { className: cn("hawa-py-6", className) }, children);
 };
 DialogBody.displayName = "DialogBody";
 DialogStep.displayName = "DialogStep";
@@ -3971,7 +4060,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // components/elements/Command.tsx
-var Command = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var Command = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   CommandPrimitive,
   {
     ref,
@@ -3984,15 +4073,15 @@ var Command = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ React26.createElement(Dialog, { ...props }, /* @__PURE__ */ React26.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React26.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
+  return /* @__PURE__ */ React27.createElement(Dialog, { ...props }, /* @__PURE__ */ React27.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React27.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
 };
-var CommandInput = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandInput = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   "div",
   {
     className: "hawa-flex hawa-items-center hawa-border-b hawa-px-3",
     "cmdk-input-wrapper": ""
   },
-  /* @__PURE__ */ React26.createElement(
+  /* @__PURE__ */ React27.createElement(
     "svg",
     {
       "aria-label": "Search Icon",
@@ -4007,10 +4096,10 @@ var CommandInput = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
       strokeLinejoin: "round",
       className: "hawa-mr-2 hawa-icon hawa-shrink-0 hawa-opacity-50"
     },
-    /* @__PURE__ */ React26.createElement("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ React26.createElement("path", { d: "m21 21-4.3-4.3" })
+    /* @__PURE__ */ React27.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ React27.createElement("path", { d: "m21 21-4.3-4.3" })
   ),
-  /* @__PURE__ */ React26.createElement(
+  /* @__PURE__ */ React27.createElement(
     CommandPrimitive.Input,
     {
       ref,
@@ -4023,7 +4112,7 @@ var CommandInput = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   CommandPrimitive.List,
   {
     ref,
@@ -4035,7 +4124,7 @@ var CommandList = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React26.forwardRef((props, ref) => /* @__PURE__ */ React26.createElement(
+var CommandEmpty = React27.forwardRef((props, ref) => /* @__PURE__ */ React27.createElement(
   CommandPrimitive.Empty,
   {
     ref,
@@ -4044,7 +4133,7 @@ var CommandEmpty = React26.forwardRef((props, ref) => /* @__PURE__ */ React26.cr
   }
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandGroup = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   CommandPrimitive.Group,
   {
     ref,
@@ -4056,7 +4145,7 @@ var CommandGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   CommandPrimitive.Separator,
   {
     ref,
@@ -4065,7 +4154,7 @@ var CommandSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandItem = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   CommandPrimitive.Item,
   {
     ref,
@@ -4081,7 +4170,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "span",
     {
       className: cn(
@@ -4095,9 +4184,9 @@ var CommandShortcut = ({
 CommandShortcut.displayName = "CommandShortcut";
 
 // components/elements/Popover.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-var PopoverContent = React27.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React27.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React27.createElement(
+var PopoverContent = React28.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React28.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React28.createElement(
   PopoverPrimitive.Content,
   {
     ref,
@@ -4129,7 +4218,7 @@ var Popover = ({
     trigger: "var(--radix-popover-trigger-width)",
     default: "auto"
   };
-  return /* @__PURE__ */ React27.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React28.createElement(
     PopoverPrimitive.Trigger,
     {
       className: "hawa-w-full",
@@ -4137,7 +4226,7 @@ var Popover = ({
       ...triggerProps
     },
     trigger
-  ), /* @__PURE__ */ React27.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     PopoverContent,
     {
       side,
@@ -4155,7 +4244,7 @@ var Popover = ({
 var PopoverTrigger = PopoverPrimitive.Trigger;
 
 // components/elements/Combobox.tsx
-var Combobox = React28.forwardRef(
+var Combobox = React29.forwardRef(
   ({
     labelKey = "label",
     valueKey = "value",
@@ -4166,8 +4255,8 @@ var Combobox = React28.forwardRef(
     ...props
   }, ref) => {
     var _a, _b, _c;
-    const [open, setOpen] = React28.useState(false);
-    const [value, setValue] = React28.useState(defaultValue);
+    const [open, setOpen] = React29.useState(false);
+    const [value, setValue] = React29.useState(defaultValue);
     function getProperty(obj, key) {
       return obj[key];
     }
@@ -4176,7 +4265,7 @@ var Combobox = React28.forwardRef(
         setOpen(open2);
       }
     };
-    return /* @__PURE__ */ React28.createElement(
+    return /* @__PURE__ */ React29.createElement(
       "div",
       {
         className: cn(
@@ -4184,8 +4273,8 @@ var Combobox = React28.forwardRef(
           props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
         )
       },
-      props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
-      /* @__PURE__ */ React28.createElement(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React28.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React28.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React28.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React28.createElement(
+      props.label && /* @__PURE__ */ React29.createElement(Label2, { ...labelProps }, props.label),
+      /* @__PURE__ */ React29.createElement(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React29.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React29.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React29.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React29.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React29.createElement(
         "div",
         {
           className: cn(
@@ -4193,7 +4282,7 @@ var Combobox = React28.forwardRef(
             props.preview ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         }
-      ), /* @__PURE__ */ React28.createElement(
+      ), /* @__PURE__ */ React29.createElement(
         "button",
         {
           role: "combobox",
@@ -4207,7 +4296,7 @@ var Combobox = React28.forwardRef(
           data.find((item) => item[valueKey] === value) || {},
           labelKey
         ) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || "...",
-        /* @__PURE__ */ React28.createElement(
+        /* @__PURE__ */ React29.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -4223,9 +4312,9 @@ var Combobox = React28.forwardRef(
             strokeLinecap: "round",
             strokeLinejoin: "round"
           },
-          /* @__PURE__ */ React28.createElement("path", { d: "m6 9 6 6 6-6" })
+          /* @__PURE__ */ React29.createElement("path", { d: "m6 9 6 6 6-6" })
         )
-      ), /* @__PURE__ */ React28.createElement(
+      ), /* @__PURE__ */ React29.createElement(
         "p",
         {
           className: cn(
@@ -4234,17 +4323,17 @@ var Combobox = React28.forwardRef(
           )
         },
         props.helperText
-      ))), /* @__PURE__ */ React28.createElement(
+      ))), /* @__PURE__ */ React29.createElement(
         PopoverContent,
         {
           className: cn("popover-w-parent", props.helperText && "-hawa-mt-4")
         },
-        /* @__PURE__ */ React28.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React28.createElement(
+        /* @__PURE__ */ React29.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React29.createElement(
           CommandInput,
           {
             placeholder: ((_b = props.texts) == null ? void 0 : _b.searchPlaceholder) || "Search"
           }
-        ), /* @__PURE__ */ React28.createElement(CommandEmpty, null, ((_c = props.texts) == null ? void 0 : _c.noItems) || "No items found."), /* @__PURE__ */ React28.createElement(CommandGroup, { className: "hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item, i) => /* @__PURE__ */ React28.createElement(
+        ), /* @__PURE__ */ React29.createElement(CommandEmpty, null, ((_c = props.texts) == null ? void 0 : _c.noItems) || "No items found."), /* @__PURE__ */ React29.createElement(CommandGroup, { className: "hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item, i) => /* @__PURE__ */ React29.createElement(
           CommandItem,
           {
             key: i,
@@ -4259,7 +4348,7 @@ var Combobox = React28.forwardRef(
               setOpen(false);
             }
           },
-          /* @__PURE__ */ React28.createElement(
+          /* @__PURE__ */ React29.createElement(
             "svg",
             {
               "aria-label": "Check Icon",
@@ -4277,7 +4366,7 @@ var Combobox = React28.forwardRef(
                 value === getProperty(item, valueKey) ? "hawa-opacity-100" : "hawa-opacity-0"
               )
             },
-            /* @__PURE__ */ React28.createElement("polyline", { points: "20 6 9 17 4 12" })
+            /* @__PURE__ */ React29.createElement("polyline", { points: "20 6 9 17 4 12" })
           ),
           getProperty(item, labelKey)
         ))))
@@ -4287,10 +4376,10 @@ var Combobox = React28.forwardRef(
 );
 
 // components/elements/Avatar.tsx
-import React30 from "react";
+import React31 from "react";
 
 // components/elements/FileUploader.tsx
-import React29, { useRef as useRef5 } from "react";
+import React30, { useRef as useRef5 } from "react";
 var FileUploader = ({ handleFile, className }) => {
   const hiddenFileInput = useRef5(null);
   const handleClick = () => {
@@ -4301,7 +4390,7 @@ var FileUploader = ({ handleFile, className }) => {
     const fileUploaded = event.target.files[0];
     handleFile(fileUploaded);
   };
-  return /* @__PURE__ */ React29.createElement("div", { className }, /* @__PURE__ */ React29.createElement("button", { className: "hawa-h-full hawa-w-full", onClick: handleClick }), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement("div", { className }, /* @__PURE__ */ React30.createElement("button", { className: "hawa-h-full hawa-w-full", onClick: handleClick }), /* @__PURE__ */ React30.createElement(
     "input",
     {
       type: "file",
@@ -4340,7 +4429,7 @@ var Avatar = ({
     inherit: "hawa-rounded",
     none: "hawa-rounded-none"
   };
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "div",
     {
       className: cn(
@@ -4350,7 +4439,7 @@ var Avatar = ({
         className
       )
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       FileUploader,
       {
         className: cn(
@@ -4361,7 +4450,7 @@ var Avatar = ({
         )
       }
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       "img",
       {
         className: cn(
@@ -4374,7 +4463,7 @@ var Avatar = ({
         alt
       }
     ),
-    !src && !isUploadable && /* @__PURE__ */ React30.createElement(
+    !src && !isUploadable && /* @__PURE__ */ React31.createElement(
       "div",
       {
         className: cn(
@@ -4382,7 +4471,7 @@ var Avatar = ({
           "hawa-justify-center hawa-items-center hawa-flex hawa-flex-col"
         )
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -4394,28 +4483,28 @@ var Avatar = ({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React30.createElement("circle", { cx: "12", cy: "8", r: "5" }),
-        /* @__PURE__ */ React30.createElement("path", { d: "M20 21a8 8 0 1 0-16 0" })
+        /* @__PURE__ */ React31.createElement("circle", { cx: "12", cy: "8", r: "5" }),
+        /* @__PURE__ */ React31.createElement("path", { d: "M20 21a8 8 0 1 0-16 0" })
       )
     )
   );
 };
 
 // components/elements/SplitButton.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 var SplitButton = ({
   variant,
   direction = "ltr",
   menuItems = [],
   children,
   ...props
-}) => /* @__PURE__ */ React31.createElement(
+}) => /* @__PURE__ */ React32.createElement(
   "div",
   {
     dir: "ltr",
     className: cn("hawa-h-fit hawa-flex hawa-justify-center hawa-row")
   },
-  /* @__PURE__ */ React31.createElement(
+  /* @__PURE__ */ React32.createElement(
     Button,
     {
       variant,
@@ -4424,14 +4513,14 @@ var SplitButton = ({
     },
     children
   ),
-  /* @__PURE__ */ React31.createElement(
+  /* @__PURE__ */ React32.createElement(
     DropdownMenu,
     {
       size: "sm",
       width: "sm",
       direction,
       items: menuItems,
-      trigger: /* @__PURE__ */ React31.createElement(
+      trigger: /* @__PURE__ */ React32.createElement(
         Button,
         {
           asChild: true,
@@ -4442,7 +4531,7 @@ var SplitButton = ({
             props.className
           )
         },
-        /* @__PURE__ */ React31.createElement(
+        /* @__PURE__ */ React32.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -4455,7 +4544,7 @@ var SplitButton = ({
             strokeLinecap: "round",
             strokeLinejoin: "round"
           },
-          /* @__PURE__ */ React31.createElement("path", { d: "m6 9 6 6 6-6" })
+          /* @__PURE__ */ React32.createElement("path", { d: "m6 9 6 6 6-6" })
         )
       )
     }
@@ -4464,18 +4553,18 @@ var SplitButton = ({
 SplitButton.displayName = "SplitButton";
 
 // components/elements/Breadcrumb.tsx
-import React32 from "react";
+import React33 from "react";
 var Breadcrumb = ({
   breadcrumbLinks,
   separator = ">"
 }) => {
-  return /* @__PURE__ */ React32.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React33.createElement(
     "div",
     {
       key: index,
       className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       "a",
       {
         href: singleBreadcrumbLink.href,
@@ -4483,12 +4572,12 @@ var Breadcrumb = ({
       },
       singleBreadcrumbLink.label
     ),
-    index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React32.createElement("div", null, separator) : /* @__PURE__ */ React32.createElement("div", null, separator) : null
+    index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React33.createElement("div", null, separator) : /* @__PURE__ */ React33.createElement("div", null, separator) : null
   )));
 };
 
 // components/elements/CodeBlock.tsx
-import React33, { useState as useState12 } from "react";
+import React34, { useState as useState12 } from "react";
 
 // components/hooks/useClipboard.ts
 import { useState as useState11 } from "react";
@@ -4538,7 +4627,7 @@ var CodeBlock = ({
     sm: "hawa-w-full hawa-max-w-sm",
     xs: "hawa-w-full hawa-max-w-xs"
   };
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "div",
     {
       className: cn(
@@ -4547,7 +4636,7 @@ var CodeBlock = ({
         className
       )
     },
-    fileName && /* @__PURE__ */ React33.createElement(
+    fileName && /* @__PURE__ */ React34.createElement(
       "div",
       {
         className: cn(
@@ -4555,7 +4644,7 @@ var CodeBlock = ({
           fileName && tabs ? "hawa-bg-gray-300 dark:hawa-bg-muted/50" : "hawa-bg-gray-200"
         )
       },
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React34.createElement(
         "div",
         {
           className: cn(
@@ -4565,7 +4654,7 @@ var CodeBlock = ({
         fileName
       )
     ),
-    tabs && /* @__PURE__ */ React33.createElement(
+    tabs && /* @__PURE__ */ React34.createElement(
       "div",
       {
         className: cn(
@@ -4573,7 +4662,7 @@ var CodeBlock = ({
           tabs && fileName && "hawa-rounded-t-none"
         )
       },
-      tabs.map((tab, i) => /* @__PURE__ */ React33.createElement(
+      tabs.map((tab, i) => /* @__PURE__ */ React34.createElement(
         "div",
         {
           key: i,
@@ -4581,7 +4670,7 @@ var CodeBlock = ({
             selectedTab === i ? " hawa-border-b-2 hawa-border-primary" : "hawa-bg-transparent"
           )
         },
-        /* @__PURE__ */ React33.createElement(
+        /* @__PURE__ */ React34.createElement(
           "div",
           {
             onClick: () => setSelectedTab(i),
@@ -4593,7 +4682,7 @@ var CodeBlock = ({
         )
       ))
     ),
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       "div",
       {
         className: cn(
@@ -4601,23 +4690,23 @@ var CodeBlock = ({
           tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
         )
       },
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React34.createElement(
         Highlight,
         {
           theme,
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ className: className2, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React33.createElement("pre", { className: "hawa-min-h-[37.75px] hawa-w-full hawa-overflow-auto hawa-p-4 hawa-text-foreground hawa-font-mono" }, tokens.map((line, i) => /* @__PURE__ */ React33.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ React33.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ React33.createElement("span", { key, ...getTokenProps({ token }) })))))
+        ({ className: className2, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React34.createElement("pre", { className: "hawa-min-h-[37.75px] hawa-w-full hawa-overflow-auto hawa-p-4 hawa-text-foreground hawa-font-mono" }, tokens.map((line, i) => /* @__PURE__ */ React34.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ React34.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ React34.createElement("span", { key, ...getTokenProps({ token }) })))))
       ),
-      /* @__PURE__ */ React33.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-p-2" }, /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React34.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-p-2" }, /* @__PURE__ */ React34.createElement(
         Tooltip,
         {
           open: clipboard.copied,
           side: "left",
-          content: /* @__PURE__ */ React33.createElement("div", null, "Copied!")
+          content: /* @__PURE__ */ React34.createElement("div", null, "Copied!")
         },
-        /* @__PURE__ */ React33.createElement(
+        /* @__PURE__ */ React34.createElement(
           Button,
           {
             size: "icon",
@@ -4625,7 +4714,7 @@ var CodeBlock = ({
             variant: "outline",
             className: "hawa-opacity-50 sm:hawa-opacity-100 hawa-text-foreground"
           },
-          /* @__PURE__ */ React33.createElement(
+          /* @__PURE__ */ React34.createElement(
             "svg",
             {
               "aria-label": "Copy Icon",
@@ -4638,8 +4727,8 @@ var CodeBlock = ({
               height: "1em",
               width: "1em"
             },
-            /* @__PURE__ */ React33.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-            /* @__PURE__ */ React33.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__ */ React34.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+            /* @__PURE__ */ React34.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
           )
         )
       ))
@@ -4648,7 +4737,7 @@ var CodeBlock = ({
 };
 
 // components/elements/Toast.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva as cva2 } from "class-variance-authority";
 var toastVariants = cva2(
@@ -4673,7 +4762,7 @@ var toastVariants = cva2(
   }
 );
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React34.createElement(
+var ToastViewport = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React35.createElement(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -4685,8 +4774,8 @@ var ToastViewport = React34.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React34.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return /* @__PURE__ */ React34.createElement(
+var Toast = React35.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
+  return /* @__PURE__ */ React35.createElement(
     ToastPrimitives.Root,
     {
       ref,
@@ -4701,8 +4790,8 @@ var Toast = React34.forwardRef(({ className, variant, severity = "none", directi
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React34.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React34.createElement(
+var ToastAction = React35.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React35.createElement(
     ToastPrimitives.Action,
     {
       ref,
@@ -4719,7 +4808,7 @@ var ToastAction = React34.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React34.createElement(
+var ToastClose = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React35.createElement(
   ToastPrimitives.Close,
   {
     ref,
@@ -4730,7 +4819,7 @@ var ToastClose = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE
     "toast-close": "",
     ...props
   },
-  /* @__PURE__ */ React34.createElement(
+  /* @__PURE__ */ React35.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -4739,7 +4828,7 @@ var ToastClose = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React35.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4750,7 +4839,7 @@ var ToastClose = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE
   )
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React34.createElement(
+var ToastTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React35.createElement(
   ToastPrimitives.Title,
   {
     ref,
@@ -4762,7 +4851,7 @@ var ToastTitle = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React34.createElement(
+var ToastDescription = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React35.createElement(
   ToastPrimitives.Description,
   {
     ref,
@@ -4773,10 +4862,10 @@ var ToastDescription = React34.forwardRef(({ className, ...props }, ref) => /* @
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // components/elements/Toaster.tsx
-import React36 from "react";
+import React37 from "react";
 
 // components/hooks/useToast.ts
-import * as React35 from "react";
+import * as React36 from "react";
 var TOAST_LIMIT = 5;
 var TOAST_REMOVE_DELAY = 1e5;
 var count = 0;
@@ -4872,8 +4961,8 @@ function toast({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React35.useState(memoryState);
-  React35.useEffect(() => {
+  const [state, setState] = React36.useState(memoryState);
+  React36.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -4893,9 +4982,9 @@ function useToast() {
 function Toaster(props) {
   const { toasts } = useToast();
   let isRTL = props.direction === "rtl";
-  return /* @__PURE__ */ React36.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, toasts.map(function({ id, title, description, action, ...toastProps }) {
-    return /* @__PURE__ */ React36.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ React36.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ React36.createElement(ToastTitle, null, title), description && /* @__PURE__ */ React36.createElement(ToastDescription, null, description)), action, /* @__PURE__ */ React36.createElement(ToastClose, null));
-  }), /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, toasts.map(function({ id, title, description, action, ...toastProps }) {
+    return /* @__PURE__ */ React37.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ React37.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ React37.createElement(ToastTitle, null, title), description && /* @__PURE__ */ React37.createElement(ToastDescription, null, description)), action, /* @__PURE__ */ React37.createElement(ToastClose, null));
+  }), /* @__PURE__ */ React37.createElement(
     ToastViewport,
     {
       className: cn("hawa-gap-2", isRTL && "hawa-fixed hawa-left-0")
@@ -4903,87 +4992,6 @@ function Toaster(props) {
   ));
 }
 
-// components/elements/Chip.tsx
-import React37 from "react";
-var Chip = React37.forwardRef(
-  ({
-    label,
-    size = "normal",
-    icon,
-    color,
-    radius = "inherit",
-    dotType,
-    ...rest
-  }, ref) => {
-    let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
-    let radiusStyles = {
-      inherit: " hawa-rounded",
-      full: "hawa-rounded-full",
-      none: "hawa-rounded-none"
-    };
-    let sizeStyles = {
-      small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
-      normal: "hawa-h-fit hawa-text-xs",
-      large: "hawa-text-base"
-    };
-    let dotStyles = {
-      small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
-      normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
-      large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
-    };
-    let dotTypeStyles = {
-      available: "hawa-bg-green-500",
-      unavailable: "hawa-bg-red-500"
-    };
-    let colorStyles = {
-      green: "hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800",
-      blue: "hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100",
-      red: "hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100",
-      yellow: "hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800",
-      orange: "hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100",
-      purple: "hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100",
-      cyan: "hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800",
-      hyper: "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
-      oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
-    };
-    if (label) {
-      return /* @__PURE__ */ React37.createElement(
-        "span",
-        {
-          ...rest,
-          ref,
-          className: cn(
-            defaultStyles,
-            sizeStyles[size],
-            radiusStyles[radius],
-            color ? colorStyles[color] : "hawa-border hawa-bg-none"
-          )
-        },
-        dotType && /* @__PURE__ */ React37.createElement(
-          "span",
-          {
-            className: cn(dotStyles[size], dotTypeStyles[dotType])
-          }
-        ),
-        icon && icon,
-        label
-      );
-    } else {
-      return /* @__PURE__ */ React37.createElement(
-        "span",
-        {
-          ...rest,
-          ref,
-          className: cn(
-            "hawa-w-2 hawa-h-2 hawa-rounded-full",
-            color ? colorStyles[color] : "hawa-border hawa-bg-none"
-          )
-        }
-      );
-    }
-  }
-);
-
 // components/elements/Alert.tsx
 import React38, { useRef as useRef6, useState as useState14, useEffect as useEffect11 } from "react";
 var Alert = ({