@sikka/hawa 0.15.18-next → 0.16.0-next

package/dist/index.mjs

@@ -3483,18 +3483,10 @@ var Input = ({
           preview ? "hawa-opacity-100" : "hawa-opacity-0"
         )
       }
-    ), /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", { className: cn("hawa-relative") }, props.icon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-left-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.icon), /* @__PURE__ */ React24.createElement(
+    ), /* @__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("div", { className: "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.endIcon), /* @__PURE__ */ React24.createElement(
       "input",
       {
         required: true,
-        className: cn(
-          defaultInputStyle,
-          " dark:hawa-text-white",
-          props.icon && "hawa-pl-10",
-          "focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0",
-          preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
-          props.inputProps?.className
-        ),
         dir: props.dir,
         type: props.type,
         value: props.value,
@@ -3503,9 +3495,17 @@ var Input = ({
         defaultValue: props.defaultValue,
         placeholder: props.placeholder,
         disabled: preview,
-        style: { height: 40 }
+        style: { height: 40 },
+        className: cn(
+          defaultInputStyle,
+          " dark:hawa-text-white focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0",
+          props.endIcon && "hawa-pe-9",
+          props.startIcon && "hawa-ps-9",
+          preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
+          props.inputProps?.className
+        )
       }
-    )), props.iconInside && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-end-2 hawa-top-[41px] hawa-mx-1  hawa--translate-y-1/2" }, props.iconInside), !forceHideHelperText && /* @__PURE__ */ React24.createElement(
+    )), !forceHideHelperText && /* @__PURE__ */ React24.createElement(
       "p",
       {
         className: cn(
@@ -3532,7 +3532,6 @@ 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 });
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 var DialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   DialogPrimitive.Overlay,
   {
@@ -3544,7 +3543,6 @@ var DialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__P
     ...props
   }
 ));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(DialogPortal, null, /* @__PURE__ */ React25.createElement(DialogOverlay, null), /* @__PURE__ */ React25.createElement(
   DialogPrimitive.Content,
   {
@@ -3555,7 +3553,7 @@ var DialogContent = React25.forwardRef(({ className, children, ...props }, ref)
     },
     ref,
     className: cn(
-      "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] sm:hawa-rounded md:hawa-w-full",
+      "hawa-fixed hawa-left-[50%] hawa-transition-all hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] sm:hawa-rounded md:hawa-w-full",
       className
     ),
     ...props
@@ -3590,7 +3588,6 @@ var DialogContent = React25.forwardRef(({ className, children, ...props }, ref)
     /* @__PURE__ */ React25.createElement("span", { className: "hawa-sr-only" }, "Close")
   )
 )));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
@@ -3604,7 +3601,6 @@ var DialogHeader = ({
     ...props
   }
 );
-DialogHeader.displayName = "DialogHeader";
 var DialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   DialogPrimitive.Title,
   {
@@ -3616,7 +3612,6 @@ var DialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
 var DialogDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   DialogPrimitive.Description,
   {
@@ -3628,7 +3623,6 @@ var DialogDescription = React25.forwardRef(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
 var DialogFooter = ({
   className,
   ...props
@@ -3642,7 +3636,75 @@ var DialogFooter = ({
     ...props
   }
 );
+var DialogSteps = ({
+  stepsApi,
+  stepsRef,
+  activeStep,
+  children
+}) => {
+  const [selectedIndex, setSelectedIndex] = React25.useState(0);
+  const steps = React25.Children.toArray(children);
+  React25.useEffect(() => {
+    if (stepsApi) {
+      stepsApi.reInit();
+      const index = steps.findIndex(
+        (child) => React25.isValidElement(child) && child.props.id === activeStep
+      );
+      if (index !== -1) {
+        stepsApi.scrollTo(index, false);
+        setSelectedIndex(index);
+      }
+    }
+  }, [activeStep, stepsApi, children]);
+  return /* @__PURE__ */ React25.createElement("div", { className: "hawa-overflow-hidden" }, /* @__PURE__ */ React25.createElement("div", { ref: stepsRef }, /* @__PURE__ */ React25.createElement(
+    "div",
+    {
+      className: "hawa-flex first-line:",
+      style: {
+        transition: "height 0.2s"
+      }
+    },
+    React25.Children.map(children, (child, index) => /* @__PURE__ */ React25.createElement(
+      "div",
+      {
+        className: cn(
+          " hawa-justify-center hawa-h-fit hawa-flex hawa-items-center hawa-flex-[0_0_100%]"
+        ),
+        key: index
+      },
+      child
+    ))
+  )));
+};
+var DialogStep = ({
+  id,
+  children,
+  className,
+  stepRef
+}) => {
+  return /* @__PURE__ */ React25.createElement(
+    "div",
+    {
+      id,
+      ref: stepRef,
+      className: cn("hawa-w-full  hawa-px-1", className)
+    },
+    children
+  );
+};
+var DialogBody = ({ children, className }) => {
+  return /* @__PURE__ */ React25.createElement("div", { className: cn("hawa-py-6", className) }, children);
+};
+DialogStep.displayName = "DialogStep";
+DialogBody.displayName = "DialogBody";
+DialogSteps.displayName = "DialogSteps";
+DialogHeader.displayName = "DialogHeader";
 DialogFooter.displayName = "DialogFooter";
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // components/elements/Command.tsx
 var Command = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
@@ -4114,14 +4176,14 @@ var Breadcrumb = ({
 };
 
 // components/elements/CodeBlock.tsx
-import React33, { useState as useState11 } from "react";
+import React33, { useState as useState12 } from "react";
 
 // components/hooks/useClipboard.ts
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 function useClipboard({ timeout = 2e3 } = {}) {
-  const [error, setError] = useState10(null);
-  const [copied, setCopied] = useState10(false);
-  const [copyTimeout, setCopyTimeout] = useState10(null);
+  const [error, setError] = useState11(null);
+  const [copied, setCopied] = useState11(false);
+  const [copyTimeout, setCopyTimeout] = useState11(null);
   const handleCopyResult = (value) => {
     clearTimeout(copyTimeout);
     setCopyTimeout(setTimeout(() => setCopied(false), timeout));
@@ -4155,7 +4217,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = useState11(0);
+  const [selectedTab, setSelectedTab] = useState12(0);
   const isDarkMode = props.forcedDarkMode || document.body.classList.contains("dark");
   const theme = isDarkMode ? themes.vsDark : themes.vsLight;
   let widthStyles = {
@@ -4599,7 +4661,7 @@ var Chip = ({
 };
 
 // components/elements/Alert.tsx
-import React38, { useRef as useRef6, useState as useState13, useEffect as useEffect10 } from "react";
+import React38, { useRef as useRef6, useState as useState14, useEffect as useEffect11 } from "react";
 var Alert = ({
   variant = "normal",
   direction = "ltr",
@@ -4610,8 +4672,8 @@ var Alert = ({
   ...props
 }) => {
   const alertRef = useRef6(null);
-  const [closed, setClosed] = useState13(false);
-  useEffect10(() => {
+  const [closed, setClosed] = useState14(false);
+  useEffect11(() => {
     if (duration) {
       const timeoutHide = setTimeout(() => {
         setClosed(true);
@@ -4740,14 +4802,14 @@ var Alert = ({
 };
 
 // components/elements/DestroyableCard.tsx
-import React39, { useRef as useRef7, useState as useState14 } from "react";
+import React39, { useRef as useRef7, useState as useState15 } from "react";
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = useState14(false);
+  const [closed, setClosed] = useState15(false);
   const popUpRef = useRef7(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
@@ -4814,7 +4876,7 @@ var DestroyableCard = ({
 };
 
 // components/elements/FileDropzone.tsx
-import React40, { useEffect as useEffect11, useState as useState15 } from "react";
+import React40, { useEffect as useEffect12, useState as useState16 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx3 from "clsx";
 var FileDropzone = ({
@@ -4835,8 +4897,8 @@ var FileDropzone = ({
   termsLink,
   privacyLink
 }) => {
-  const [cmp, setCmp] = useState15(0);
-  const [max, setMax] = useState15(0);
+  const [cmp, setCmp] = useState16(0);
+  const [max, setMax] = useState16(0);
   const {
     getRootProps,
     getInputProps,
@@ -4858,7 +4920,7 @@ var FileDropzone = ({
       );
     }
   });
-  useEffect11(
+  useEffect12(
     () => () => {
       files?.forEach((file) => {
         URL.revokeObjectURL(file.preview);
@@ -4866,7 +4928,7 @@ var FileDropzone = ({
     },
     [files]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     setFiles(acceptedFiles);
   }, [acceptedFiles, cmp, setFiles]);
   onClearFiles = () => {
@@ -4878,7 +4940,7 @@ var FileDropzone = ({
     acceptedFiles.length = 0;
     setFiles([]);
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (maxSize > 0) {
       const k = 1024;
       const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -5034,7 +5096,7 @@ var FileDropzone = ({
 };
 
 // components/elements/Carousel.tsx
-import React41, { useEffect as useEffect12, useState as useState16 } from "react";
+import React41, { useEffect as useEffect13, useState as useState17 } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 var Carousel = (props) => {
   const {
@@ -5048,8 +5110,8 @@ var Carousel = (props) => {
   const [emblaRef, emblaApi] = useEmblaCarousel({
     loop: autoplay ? true : options.loop || false
   });
-  const [selectedIndex, setSelectedIndex] = useState16(0);
-  useEffect12(() => {
+  const [selectedIndex, setSelectedIndex] = useState17(0);
+  useEffect13(() => {
     function selectHandler() {
       const index = emblaApi?.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -5059,7 +5121,7 @@ var Carousel = (props) => {
       emblaApi?.off("select", selectHandler);
     };
   }, [emblaApi]);
-  useEffect12(() => {
+  useEffect13(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -5796,10 +5858,10 @@ var Progress = React49.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // components/elements/BackToTop.tsx
-import React50, { useState as useState18, useEffect as useEffect13, useRef as useRef8 } from "react";
+import React50, { useState as useState19, useEffect as useEffect14, useRef as useRef8 } from "react";
 var BackToTop = ({ ...props }) => {
-  const [visible, setVisible] = useState18(false);
-  const [rect, _setRect] = useState18(null);
+  const [visible, setVisible] = useState19(false);
+  const [rect, _setRect] = useState19(null);
   const self = useRef8(null);
   const _rect = useRef8(rect);
   const setRect = (data) => {
@@ -5825,7 +5887,7 @@ var BackToTop = ({ ...props }) => {
       props.anchor.current.scrollTo({ top: 0, behavior: "smooth" });
     }
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (!props.anchor.current)
       return;
     props.anchor.current.addEventListener("scroll", onScroll);
@@ -5890,12 +5952,12 @@ var BackToTop = ({ ...props }) => {
 };
 
 // components/elements/ScrollIndicator.tsx
-import React51, { useState as useState19, useEffect as useEffect14 } from "react";
+import React51, { useState as useState20, useEffect as useEffect15 } from "react";
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = useState19(0);
+  const [scrollPercentage, setScrollPercentage] = useState20(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -5906,7 +5968,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -5930,7 +5992,7 @@ var ScrollIndicator = ({
 };
 
 // components/elements/Badge.tsx
-import React52, { useEffect as useEffect15, useState as useState20, useRef as useRef9 } from "react";
+import React52, { useEffect as useEffect16, useState as useState21, useRef as useRef9 } from "react";
 var Badge = ({
   anchor,
   position = "right",
@@ -5938,14 +6000,14 @@ var Badge = ({
   text,
   className
 }) => {
-  const [badgePosition, setBadgePosition] = useState20(null);
+  const [badgePosition, setBadgePosition] = useState21(null);
   const indicatorRef = useRef9(null);
   const sizeStyles = {
     small: { top: 4, left: 6, right: 7, classes: "hawa-w-3 hawa-h-3" },
     default: { top: 4, left: 7, right: 5, classes: "hawa-w-3 hawa-h-3" },
     large: { top: 6, left: 12, right: 7, classes: "hawa-w-6 hawa-h-6" }
   };
-  useEffect15(() => {
+  useEffect16(() => {
     const handlePositioning = () => {
       if (anchor.current && indicatorRef.current) {
         const rect = anchor.current.getBoundingClientRect();
@@ -6326,14 +6388,14 @@ var Count = (props) => {
 };
 
 // components/elements/InterfaceSettings.tsx
-import React57, { useState as useState21 } from "react";
+import React57, { useState as useState22 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
   ...props
 }) => {
-  const [color, setColor] = useState21(props.currentColorMode);
-  const [language, setLanguage] = useState21(props.currentLanguage);
+  const [color, setColor] = useState22(props.currentColorMode);
+  const [language, setLanguage] = useState22(props.currentLanguage);
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row hawa-justify-between",
     vertical: "hawa-flex hawa-flex-col hawa-items-center hawa-gap-2"
@@ -7000,7 +7062,7 @@ var Copyrights = (props) => {
 };
 
 // components/layout/Navbar.tsx
-import React64, { useState as useState22 } from "react";
+import React64, { useState as useState23 } from "react";
 
 // components/elements/Collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -7015,7 +7077,7 @@ var Navbar = ({
   handleLogoClick,
   ...props
 }) => {
-  const [isOpen, setIsOpen] = useState22(false);
+  const [isOpen, setIsOpen] = useState23(false);
   return /* @__PURE__ */ React64.createElement("nav", { className: " hawa-transition-all hawa-sticky hawa-top-2" }, /* @__PURE__ */ React64.createElement(
     Collapsible,
     {
@@ -7117,7 +7179,7 @@ var Navbar = ({
 };
 
 // components/layout/AppLayout.tsx
-import React65, { useEffect as useEffect16, useRef as useRef10, useState as useState23 } from "react";
+import React65, { useEffect as useEffect17, useRef as useRef10, useState as useState24 } from "react";
 var AppLayout = ({
   direction = "ltr",
   drawerSize = "md",
@@ -7145,11 +7207,11 @@ var AppLayout = ({
   };
   const ref = useRef10(null);
   const isRTL = direction === "rtl";
-  const [openedSidebarItem, setOpenedSidebarItem] = useState23("");
-  const [size, setSize] = useState23(1200);
-  const [openSideMenu, setOpenSideMenu] = useState23(true);
+  const [openedSidebarItem, setOpenedSidebarItem] = useState24("");
+  const [size, setSize] = useState24(1200);
+  const [openSideMenu, setOpenSideMenu] = useState24(true);
   const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  useEffect16(() => {
+  useEffect17(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
@@ -7161,14 +7223,14 @@ var AppLayout = ({
       };
     }
   }, []);
-  useEffect16(() => {
+  useEffect17(() => {
     if (size > 600) {
       setOpenSideMenu(keepOpen);
     } else {
       setOpenSideMenu(false);
     }
   }, [size]);
-  useEffect16(() => {
+  useEffect17(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -7777,9 +7839,9 @@ var MenubarShortcut = ({
 MenubarShortcut.displayname = "MenubarShortcut";
 
 // components/layout/AppTabs.tsx
-import React68, { useState as useState24 } from "react";
+import React68, { useState as useState25 } from "react";
 var AppTabs = ({ tabs, ...props }) => {
-  const [selectedIndex, setSelectedIndex] = useState24(0);
+  const [selectedIndex, setSelectedIndex] = useState25(0);
   return /* @__PURE__ */ React68.createElement("div", { className: "hawa-bg-gray-100 hawa-w-full dark:hawa-bg-gray-900 hawa-p-6 hawa-pb-0 hawa-border-b " }, /* @__PURE__ */ React68.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center " }, tabs.map((tab, index) => {
     const selected = index === selectedIndex;
     return /* @__PURE__ */ React68.createElement(
@@ -7810,13 +7872,13 @@ var AppSingleTab = ({ tab, ...props }) => {
 };
 
 // components/layout/DocsLayout.tsx
-import React71, { useEffect as useEffect18, useRef as useRef11, useState as useState26 } from "react";
+import React71, { useEffect as useEffect19, useRef as useRef11, useState as useState27 } from "react";
 
 // components/hooks/useBreakpoint.ts
-import { useState as useState25, useEffect as useEffect17 } from "react";
+import { useState as useState26, useEffect as useEffect18 } from "react";
 var useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState25(null);
-  useEffect17(() => {
+  const [breakpoint, setBreakpoint] = useState26(null);
+  useEffect18(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setBreakpoint(window.innerWidth);
@@ -7925,9 +7987,9 @@ var DocsLayout = ({
   if (typeof window == "undefined") {
     size = 1200;
   }
-  const [currentPage, setCurrentPage] = useState26("Introduction");
-  const [openSideMenu, setOpenSideMenu] = useState26(true);
-  useEffect18(() => {
+  const [currentPage, setCurrentPage] = useState27("Introduction");
+  const [openSideMenu, setOpenSideMenu] = useState27(true);
+  useEffect19(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !openSideMenu) {
         setOpenSideMenu(false);
@@ -7938,7 +8000,7 @@ var DocsLayout = ({
       document.removeEventListener("click", handleClickOutside, true);
     };
   }, [openSideMenu]);
-  useEffect18(() => {
+  useEffect19(() => {
     const handleResize = () => {
       setOpenSideMenu(window.innerWidth > 600 ? true : false);
     };
@@ -7955,7 +8017,7 @@ var DocsLayout = ({
       setCurrentPage(entry.target.id);
     }
   };
-  useEffect18(() => {
+  useEffect19(() => {
     observerRef.current = new IntersectionObserver(handleIntersection, {
       threshold: 0.5
       // Adjust threshold as needed to determine when a section is in view
@@ -8099,7 +8161,7 @@ var DocsLayout = ({
 };
 
 // components/blocks/auth/LoginForm.tsx
-import React74, { useState as useState27 } from "react";
+import React74, { useState as useState28 } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { parsePhoneNumber } from "libphonenumber-js";
@@ -8275,12 +8337,10 @@ var VeryBadEmoji = () => /* @__PURE__ */ React.createElement(
 
 // components/icons/InputIcons.tsx
 import React73 from "react";
-var EyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: props.classNames }, /* @__PURE__ */ React73.createElement(
+var EyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React73.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -8291,12 +8351,10 @@ var EyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { classNam
   /* @__PURE__ */ React73.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
   /* @__PURE__ */ React73.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: props.classNames }, /* @__PURE__ */ React73.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React73.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -8353,7 +8411,7 @@ var LoginForm = ({
   passwordLength = 8,
   ...props
 }) => {
-  const [passwordVisible, setPasswordVisible] = useState27(false);
+  const [passwordVisible, setPasswordVisible] = useState28(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts?.continueWithGoogle,
     continueWithTwitter: texts?.continueWithTwitter,
@@ -8436,13 +8494,13 @@ var LoginForm = ({
                 autoComplete: "current-password",
                 type: passwordVisible ? "text" : "password",
                 label: texts?.password?.label || "Password",
-                iconInside: /* @__PURE__ */ React74.createElement(
+                endIcon: /* @__PURE__ */ React74.createElement(
                   "div",
                   {
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" })
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -8490,13 +8548,13 @@ var LoginForm = ({
                 autoComplete: "current-password",
                 type: passwordVisible ? "text" : "password",
                 label: texts?.password?.label,
-                iconInside: /* @__PURE__ */ React74.createElement(
+                endIcon: /* @__PURE__ */ React74.createElement(
                   "div",
                   {
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" })
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -8627,12 +8685,12 @@ var LoginForm = ({
 };
 
 // components/blocks/auth/RegisterForm.tsx
-import React75, { useState as useState28 } from "react";
+import React75, { useState as useState29 } from "react";
 import { Controller as Controller2, FormProvider, useForm as useForm2 } from "react-hook-form";
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import * as z2 from "zod";
 var RegisterForm = ({ texts, ...props }) => {
-  const [passwordVisible, setPasswordVisible] = useState28(false);
+  const [passwordVisible, setPasswordVisible] = useState29(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts?.continueWithGoogle,
     continueWithTwitter: texts?.continueWithTwitter,
@@ -8782,13 +8840,13 @@ var RegisterForm = ({ texts, ...props }) => {
           {
             width: "full",
             type: passwordVisible ? "text" : "password",
-            iconInside: /* @__PURE__ */ React75.createElement(
+            endIcon: /* @__PURE__ */ React75.createElement(
               "div",
               {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              passwordVisible ? /* @__PURE__ */ React75.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React75.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" }),
+              passwordVisible ? /* @__PURE__ */ React75.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React75.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
               " "
             ),
             autoComplete: "new-password",
@@ -9001,7 +9059,7 @@ var CheckEmail = ({ texts, handleResend }) => {
 };
 
 // components/blocks/auth/NewPassword.tsx
-import React78, { useState as useState29 } from "react";
+import React78, { useState as useState30 } from "react";
 import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import * as z3 from "zod";
@@ -9018,7 +9076,7 @@ var NewPasswordForm = ({ texts, ...props }) => {
   const { handleSubmit, control, formState } = useForm3({
     resolver: zodResolver3(formSchema)
   });
-  const [matchError, setMatchError] = useState29(false);
+  const [matchError, setMatchError] = useState30(false);
   return /* @__PURE__ */ React78.createElement(Card, { dir: props.direction }, matchError && /* @__PURE__ */ React78.createElement(Alert, { text: texts?.confirm?.dontMatch, severity: "error" }), props.passwordChanged ? /* @__PURE__ */ React78.createElement(CardContent, { headless: true }, /* @__PURE__ */ React78.createElement("div", { className: "hawa-text-center" }, texts?.passwordChanged)) : /* @__PURE__ */ React78.createElement(
     "form",
     {
@@ -9143,7 +9201,7 @@ var ResetPasswordForm = (props) => {
 };
 
 // components/blocks/auth/CodeConfirmation.tsx
-import React80, { useEffect as useEffect19, useState as useState30 } from "react";
+import React80, { useEffect as useEffect20, useState as useState31 } from "react";
 import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import * as z5 from "zod";
@@ -9154,9 +9212,9 @@ var CodeConfirmation = (props) => {
   const { handleSubmit, control, formState, setValue } = useForm5({
     resolver: zodResolver5(formSchema)
   });
-  const [resendTimer, setResendTimer] = useState30(null);
-  const [remainingTime, setRemainingTime] = useState30(0);
-  const [showResendTimer, setShowResendTimer] = useState30(false);
+  const [resendTimer, setResendTimer] = useState31(null);
+  const [remainingTime, setRemainingTime] = useState31(0);
+  const [showResendTimer, setShowResendTimer] = useState31(false);
   const startResendTimer = () => {
     if (resendTimer !== null) {
       clearInterval(resendTimer);
@@ -9178,7 +9236,7 @@ var CodeConfirmation = (props) => {
     }, 1e3);
     setResendTimer(newTimer);
   };
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       if (resendTimer !== null) {
         clearInterval(resendTimer);
@@ -9238,7 +9296,7 @@ var CodeConfirmation = (props) => {
 };
 
 // components/blocks/feedback/UserReferralSource.tsx
-import React81, { useRef as useRef12, useState as useState31 } from "react";
+import React81, { useRef as useRef12, useState as useState32 } from "react";
 import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
 import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
 import * as z6 from "zod";
@@ -9247,7 +9305,7 @@ var UserReferralSource = ({
   options = [],
   ...props
 }) => {
-  const [closed, setClosed] = useState31(false);
+  const [closed, setClosed] = useState32(false);
   const popUpRef = useRef12(null);
   const formSchema = z6.object({
     source: z6.string({ required_error: props.texts?.pleaseSelectOption }),
@@ -9375,21 +9433,21 @@ var UserReferralSource = ({
 };
 
 // components/blocks/feedback/FeedbackRating.tsx
-import React82, { useEffect as useEffect21, useRef as useRef13, useState as useState32 } from "react";
+import React82, { useEffect as useEffect22, useRef as useRef13, useState as useState33 } from "react";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
 }) => {
-  const [closed, setClosed] = useState32(false);
-  const [answered, setAnswered] = useState32(false);
-  const [clickedOption, setClickedOption] = useState32(null);
-  const [closingTimer, setClosingTimer] = useState32(5);
+  const [closed, setClosed] = useState33(false);
+  const [answered, setAnswered] = useState33(false);
+  const [clickedOption, setClickedOption] = useState33(null);
+  const [closingTimer, setClosingTimer] = useState33(5);
   const popUpRef = useRef13(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
   };
-  useEffect21(() => {
+  useEffect22(() => {
     const timeoutHide = setTimeout(() => {
       if (closingTimer >= 0) {
         setClosingTimer(closingTimer - 1);
@@ -9488,12 +9546,12 @@ var FeedbackRating = ({
 };
 
 // components/blocks/feedback/FeedbackEmoji.tsx
-import React83, { useState as useState33 } from "react";
+import React83, { useState as useState34 } from "react";
 var FeedbackEmoji = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState33(null);
-  const [loadingSubmit, setLoadingSubmit] = useState33(false);
-  const [feedbackText, setFeedbackText] = useState33("");
-  const [helperText, setHelperText] = useState33(false);
+  const [selectedEmoji, setSelectedEmoji] = useState34(null);
+  const [loadingSubmit, setLoadingSubmit] = useState34(false);
+  const [feedbackText, setFeedbackText] = useState34("");
+  const [helperText, setHelperText] = useState34(false);
   let emojis = [
     { icon: /* @__PURE__ */ React83.createElement(VeryGoodEmoji, null), value: "very-good" },
     { icon: /* @__PURE__ */ React83.createElement(GoodEmoji, null), value: "good" },
@@ -9860,10 +9918,10 @@ var PricingPlans = (props) => {
 };
 
 // components/blocks/pricing/ComparingPlans.tsx
-import React93, { useState as useState34 } from "react";
+import React93, { useState as useState35 } from "react";
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState34("sar");
-  const [currentCycle, setCurrentCycle] = useState34("month");
+  const [currentCurrency, setCurrentCurrency] = useState35("sar");
+  const [currentCycle, setCurrentCycle] = useState35("month");
   return /* @__PURE__ */ React93.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ React93.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React93.createElement(
     Radio,
     {
@@ -9921,9 +9979,9 @@ var ComparingPlans = (props) => {
 };
 
 // components/blocks/pricing/HorizontalPricing.tsx
-import React94, { useState as useState35 } from "react";
+import React94, { useState as useState36 } from "react";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState35("");
+  const [selectedCard, setSelectedCard] = useState36("");
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
@@ -10034,26 +10092,31 @@ var Usage = (props) => {
 };
 
 // components/hooks/useIsomorphicEffect.ts
-import { useEffect as useEffect22, useLayoutEffect } from "react";
-var useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect22;
+import { useEffect as useEffect23, useLayoutEffect } from "react";
+var useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect23;
 
 // components/hooks/useDiscloser.ts
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 
 // components/hooks/useHover.ts
-import { useEffect as useEffect23, useRef as useRef14, useState as useState37 } from "react";
+import { useEffect as useEffect24, useRef as useRef14, useState as useState38 } from "react";
 
 // components/hooks/useCarousel.ts
-import { useState as useState38, useRef as useRef15 } from "react";
+import { useState as useState39, useRef as useRef15 } from "react";
+
+// components/hooks/useDialogSteps.ts
+import { useState as useState40 } from "react";
+import useEmblaCarousel2 from "embla-carousel-react";
+import AutoHeight from "embla-carousel-auto-height";
 
 // components/hooks/useWindowSize.ts
-import { useEffect as useEffect24, useState as useState39 } from "react";
+import { useEffect as useEffect26, useState as useState41 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState39({
+  const [windowSize, setWindowSize] = useState41({
     width: void 0,
     height: void 0
   });
-  useEffect24(() => {
+  useEffect26(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -10068,7 +10131,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef16, useState as useState40, useEffect as useEffect25 } from "react";
+import { useRef as useRef16, useState as useState42, useEffect as useEffect27 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -10080,7 +10143,7 @@ function useFocusWithin({
   onFocus
 } = {}) {
   const ref = useRef16(null);
-  const [focused, _setFocused] = useState40(false);
+  const [focused, _setFocused] = useState42(false);
   const focusedRef = useRef16(false);
   const setFocused = (value) => {
     _setFocused(value);
@@ -10098,7 +10161,7 @@ function useFocusWithin({
       onBlur?.(event);
     }
   };
-  useEffect25(() => {
+  useEffect27(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -10113,7 +10176,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState41, useEffect as useEffect26, useRef as useRef17 } from "react";
+import { useState as useState43, useEffect as useEffect28, useRef as useRef17 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -10135,11 +10198,11 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState41(
+  const [matches, setMatches] = useState43(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef17();
-  useEffect26(() => {
+  useEffect28(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -10154,16 +10217,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState42, useEffect as useEffect27 } from "react";
+import { useState as useState44, useEffect as useEffect29 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState43, useEffect as useEffect28 } from "react";
+import { useState as useState45, useEffect as useEffect30 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect29, useState as useState44 } from "react";
+import { useEffect as useEffect31, useState as useState46 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState44(initialTab);
-  useEffect29(() => {
+  const [activeTab, setActiveTab] = useState46(initialTab);
+  useEffect31(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);
@@ -10233,10 +10296,14 @@ export {
   DataTable,
   DestroyableCard,
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogPortal,
+  DialogStep,
+  DialogSteps,
   DialogTitle,
   DialogTrigger,
   DocsLayout,