@sikka/hawa 0.15.19-next → 0.16.0-next

package/dist/index.d.mts

@@ -388,6 +388,10 @@ declare const SplitButton: React$1.FC<SplitButtonProps>;
 
 declare const Dialog: React$1.FC<SheetPrimitive.DialogProps>;
 declare const DialogTrigger: React$1.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: {
+    ({ ...props }: SheetPrimitive.DialogPortalProps): React$1.JSX.Element;
+    displayName: string | undefined;
+};
 declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     persist?: boolean | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -401,6 +405,25 @@ declare const DialogFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
+interface DialogStepsProps {
+    activeStep: string;
+    children: React$1.ReactNode;
+    stepsApi?: any;
+    stepsRef?: any;
+}
+declare const DialogSteps: React$1.FC<DialogStepsProps>;
+interface DialogStepProps {
+    id: string;
+    children: React$1.ReactNode;
+    className?: string;
+    stepRef?: any;
+}
+declare const DialogStep: React$1.FC<DialogStepProps>;
+interface DialogBodyProps {
+    children: React$1.ReactNode;
+    className?: string;
+}
+declare const DialogBody: React$1.FC<DialogBodyProps>;
 
 interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     clickable?: boolean;
@@ -1754,4 +1777,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useIsomorphicEffect, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useIsomorphicEffect, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -388,6 +388,10 @@ declare const SplitButton: React$1.FC<SplitButtonProps>;
 
 declare const Dialog: React$1.FC<SheetPrimitive.DialogProps>;
 declare const DialogTrigger: React$1.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: {
+    ({ ...props }: SheetPrimitive.DialogPortalProps): React$1.JSX.Element;
+    displayName: string | undefined;
+};
 declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     persist?: boolean | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -401,6 +405,25 @@ declare const DialogFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
+interface DialogStepsProps {
+    activeStep: string;
+    children: React$1.ReactNode;
+    stepsApi?: any;
+    stepsRef?: any;
+}
+declare const DialogSteps: React$1.FC<DialogStepsProps>;
+interface DialogStepProps {
+    id: string;
+    children: React$1.ReactNode;
+    className?: string;
+    stepRef?: any;
+}
+declare const DialogStep: React$1.FC<DialogStepProps>;
+interface DialogBodyProps {
+    children: React$1.ReactNode;
+    className?: string;
+}
+declare const DialogBody: React$1.FC<DialogBodyProps>;
 
 interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     clickable?: boolean;
@@ -1754,4 +1777,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useIsomorphicEffect, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useIsomorphicEffect, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -493,6 +493,9 @@ __export(components_exports, {
     Dialog: function() {
         return Dialog;
     },
+    DialogBody: function() {
+        return DialogBody;
+    },
     DialogContent: function() {
         return DialogContent;
     },
@@ -505,6 +508,15 @@ __export(components_exports, {
     DialogHeader: function() {
         return DialogHeader;
     },
+    DialogPortal: function() {
+        return DialogPortal;
+    },
+    DialogStep: function() {
+        return DialogStep;
+    },
+    DialogSteps: function() {
+        return DialogSteps;
+    },
     DialogTitle: function() {
         return DialogTitle;
     },
@@ -4108,7 +4120,6 @@ var DialogPortal = function(_param) /* @__PURE__ */ {
     var props = _extends({}, _object_destructuring_empty(_param));
     return React25.createElement(DialogPrimitive.Portal, _object_spread({}, props));
 };
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 var DialogOverlay = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
@@ -4118,7 +4129,6 @@ var DialogOverlay = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
         className: cn("hawa-fixed hawa-inset-0 hawa-z-50 hawa-bg-background/80 hawa-backdrop-blur-sm 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", className)
     }, props));
 });
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, children = _param.children, props = _object_without_properties(_param, [
         "className",
@@ -4131,7 +4141,7 @@ var DialogContent = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
             }
         },
         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", className)
+        className: cn("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), children, /* @__PURE__ */ React25.createElement(DialogPrimitive.Close, {
         className: cn("hawa-absolute hawa-top-4 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground", props.dir === "rtl" ? " hawa-left-4" : " hawa-right-4")
     }, /* @__PURE__ */ React25.createElement("svg", {
@@ -4148,7 +4158,6 @@ var DialogContent = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
         className: "hawa-sr-only"
     }, "Close"))));
 });
-DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = function(_param) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
@@ -4157,7 +4166,6 @@ var DialogHeader = function(_param) /* @__PURE__ */ {
         className: cn("hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-text-center sm:hawa-text-left", className)
     }, props));
 };
-DialogHeader.displayName = "DialogHeader";
 var DialogTitle = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
@@ -4167,7 +4175,6 @@ var DialogTitle = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
         className: cn("hawa-text-start hawa-text-lg hawa-font-semibold hawa-leading-none hawa-tracking-tight", className)
     }, props));
 });
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
 var DialogDescription = React25.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
@@ -4177,7 +4184,6 @@ var DialogDescription = React25.forwardRef(function(_param, ref) /* @__PURE__ */
         className: cn("hawa-text-start hawa-text-sm hawa-text-muted-foreground", className)
     }, props));
 });
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
 var DialogFooter = function(_param) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
@@ -4186,7 +4192,66 @@ var DialogFooter = function(_param) /* @__PURE__ */ {
         className: cn("hawa-flex hawa-flex-col-reverse sm:hawa-flex-row sm:hawa-justify-end sm:hawa-gap-2", className)
     }, props));
 };
+var DialogSteps = function(param) {
+    var stepsApi = param.stepsApi, stepsRef = param.stepsRef, activeStep = param.activeStep, children = param.children;
+    var _React25_useState = _sliced_to_array(React25.useState(0), 2), selectedIndex = _React25_useState[0], setSelectedIndex = _React25_useState[1];
+    var steps = React25.Children.toArray(children);
+    React25.useEffect(function() {
+        if (stepsApi) {
+            stepsApi.reInit();
+            var index = steps.findIndex(function(child) {
+                return 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, function(child, index) {
+        return /* @__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 = function(param) {
+    var id = param.id, children = param.children, className = param.className, stepRef = param.stepRef;
+    return /* @__PURE__ */ React25.createElement("div", {
+        id: id,
+        ref: stepRef,
+        className: cn("hawa-w-full  hawa-px-1", className)
+    }, children);
+};
+var DialogBody = function(param) {
+    var children = param.children, className = param.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(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
@@ -10008,14 +10073,18 @@ var import_react70 = require("react");
 var import_react71 = require("react");
 // components/hooks/useCarousel.ts
 var import_react72 = require("react");
-// components/hooks/useWindowSize.ts
+// components/hooks/useDialogSteps.ts
 var import_react73 = require("react");
+var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
+var import_embla_carousel_auto_height = __toESM(require("embla-carousel-auto-height"));
+// components/hooks/useWindowSize.ts
+var import_react74 = require("react");
 var useWindowSize = function() {
-    var _ref = _sliced_to_array((0, import_react73.useState)({
+    var _ref = _sliced_to_array((0, import_react74.useState)({
         width: void 0,
         height: void 0
     }), 2), windowSize = _ref[0], setWindowSize = _ref[1];
-    (0, import_react73.useEffect)(function() {
+    (0, import_react74.useEffect)(function() {
         var handleResize = function handleResize() {
             setWindowSize({
                 width: window.innerWidth,
@@ -10031,7 +10100,7 @@ var useWindowSize = function() {
     return windowSize;
 };
 // components/hooks/useFocusWithin.ts
-var import_react74 = require("react");
+var import_react75 = require("react");
 function containsRelatedTarget(event) {
     if (_instanceof(event.currentTarget, HTMLElement) && _instanceof(event.relatedTarget, HTMLElement)) {
         return event.currentTarget.contains(event.relatedTarget);
@@ -10040,9 +10109,9 @@ function containsRelatedTarget(event) {
 }
 function useFocusWithin() {
     var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
-    var ref = (0, import_react74.useRef)(null);
-    var _ref1 = _sliced_to_array((0, import_react74.useState)(false), 2), focused = _ref1[0], _setFocused = _ref1[1];
-    var focusedRef = (0, import_react74.useRef)(false);
+    var ref = (0, import_react75.useRef)(null);
+    var _ref1 = _sliced_to_array((0, import_react75.useState)(false), 2), focused = _ref1[0], _setFocused = _ref1[1];
+    var focusedRef = (0, import_react75.useRef)(false);
     var setFocused = function(value) {
         _setFocused(value);
         focusedRef.current = value;
@@ -10059,7 +10128,7 @@ function useFocusWithin() {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         }
     };
-    (0, import_react74.useEffect)(function() {
+    (0, import_react75.useEffect)(function() {
         if (ref.current) {
             ref.current.addEventListener("focusin", handleFocusIn);
             ref.current.addEventListener("focusout", handleFocusOut);
@@ -10080,7 +10149,7 @@ function useFocusWithin() {
     };
 }
 // components/hooks/useMediaQuery.ts
-var import_react75 = require("react");
+var import_react76 = require("react");
 function attachMediaListener(query, callback) {
     try {
         query.addEventListener("change", callback);
@@ -10107,9 +10176,9 @@ function useMediaQuery(query, initialValue) {
     var getInitialValueInEffect = (arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
         getInitialValueInEffect: true
     }).getInitialValueInEffect;
-    var _ref = _sliced_to_array((0, import_react75.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)), 2), matches = _ref[0], setMatches = _ref[1];
-    var queryRef = (0, import_react75.useRef)();
-    (0, import_react75.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react76.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)), 2), matches = _ref[0], setMatches = _ref[1];
+    var queryRef = (0, import_react76.useRef)();
+    (0, import_react76.useEffect)(function() {
         if ("matchMedia" in window) {
             queryRef.current = window.matchMedia(query);
             setMatches(queryRef.current.matches);
@@ -10124,15 +10193,15 @@ function useMediaQuery(query, initialValue) {
     return matches;
 }
 // components/hooks/useScrollPosition.ts
-var import_react76 = require("react");
-// components/hooks/useTable.ts
 var import_react77 = require("react");
-// components/hooks/useTabs.ts
+// components/hooks/useTable.ts
 var import_react78 = require("react");
+// components/hooks/useTabs.ts
+var import_react79 = require("react");
 function useTabs() {
     var initialTab = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-    var _ref = _sliced_to_array((0, import_react78.useState)(initialTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
-    (0, import_react78.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react79.useState)(initialTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
+    (0, import_react79.useEffect)(function() {
         var handleHashChange = function() {
             var hash = window.location.hash.substring(1);
             setActiveTab(hash || initialTab);
@@ -10205,10 +10274,14 @@ function useTabs() {
     DataTable: DataTable,
     DestroyableCard: DestroyableCard,
     Dialog: Dialog,
+    DialogBody: DialogBody,
     DialogContent: DialogContent,
     DialogDescription: DialogDescription,
     DialogFooter: DialogFooter,
     DialogHeader: DialogHeader,
+    DialogPortal: DialogPortal,
+    DialogStep: DialogStep,
+    DialogSteps: DialogSteps,
     DialogTitle: DialogTitle,
     DialogTrigger: DialogTrigger,
     DocsLayout: DocsLayout,

package/dist/index.mjs

@@ -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";
@@ -8349,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,
@@ -8623,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,
@@ -8997,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";
@@ -9014,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",
     {
@@ -9139,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";
@@ -9150,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);
@@ -9174,7 +9236,7 @@ var CodeConfirmation = (props) => {
     }, 1e3);
     setResendTimer(newTimer);
   };
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       if (resendTimer !== null) {
         clearInterval(resendTimer);
@@ -9234,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";
@@ -9243,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 }),
@@ -9371,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);
@@ -9484,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" },
@@ -9856,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,
     {
@@ -9917,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" },
@@ -10030,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,
@@ -10064,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);
@@ -10076,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);
@@ -10094,7 +10161,7 @@ function useFocusWithin({
       onBlur?.(event);
     }
   };
-  useEffect25(() => {
+  useEffect27(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -10109,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);
@@ -10131,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);
@@ -10150,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);
@@ -10229,10 +10296,14 @@ export {
   DataTable,
   DestroyableCard,
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogPortal,
+  DialogStep,
+  DialogSteps,
   DialogTitle,
   DialogTrigger,
   DocsLayout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.15.19-next",
+  "version": "0.16.0-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -50,6 +50,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "embla-carousel-auto-height": "^8.0.0-rc14",
     "embla-carousel-react": "^8.0.0-rc14",
     "eslint": "^8.53.0",
     "eslint-config-next": "^14.0.1",