@sikka/hawa 0.15.18-next → 0.16.0-next

package/dist/index.css

@@ -741,8 +741,8 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-end-0 {
   inset-inline-end: 0px;
 }
-.hawa-end-2 {
-  inset-inline-end: 0.5rem;
+.hawa-end-3 {
+  inset-inline-end: 0.75rem;
 }
 .hawa-left-0 {
   left: 0px;
@@ -753,9 +753,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-left-2\.5 {
   left: 0.625rem;
 }
-.hawa-left-3 {
-  left: 0.75rem;
-}
 .hawa-left-4 {
   left: 1rem;
 }
@@ -777,6 +774,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-start-0 {
   inset-inline-start: 0px;
 }
+.hawa-start-3 {
+  inset-inline-start: 0.75rem;
+}
 .hawa-top-0 {
   top: 0px;
 }
@@ -801,9 +801,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-\[22px\] {
   top: 22px;
 }
-.hawa-top-\[41px\] {
-  top: 41px;
-}
 .hawa-top-\[50\%\] {
   top: 50%;
 }
@@ -2322,12 +2319,12 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pb-4 {
   padding-bottom: 1rem;
 }
+.hawa-pe-9 {
+  padding-inline-end: 2.25rem;
+}
 .hawa-pl-0 {
   padding-left: 0px;
 }
-.hawa-pl-10 {
-  padding-left: 2.5rem;
-}
 .hawa-pl-2 {
   padding-left: 0.5rem;
 }
@@ -2349,6 +2346,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pr-8 {
   padding-right: 2rem;
 }
+.hawa-ps-9 {
+  padding-inline-start: 2.25rem;
+}
 .hawa-pt-0 {
   padding-top: 0px;
 }

package/dist/index.d.mts

@@ -289,6 +289,8 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     /** Boolean to enable/disable editing the input field and using it as a text field   */
     preview?: boolean;
     iconInside?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+    startIcon?: React__default.ReactNode;
 };
 declare const Input: FC<TextFieldTypes>;
 
@@ -386,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>>;
@@ -399,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;
@@ -1752,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

@@ -289,6 +289,8 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     /** Boolean to enable/disable editing the input field and using it as a text field   */
     preview?: boolean;
     iconInside?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+    startIcon?: React__default.ReactNode;
 };
 declare const Input: FC<TextFieldTypes>;
 
@@ -386,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>>;
@@ -399,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;
@@ -1752,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;
     },
@@ -4071,11 +4083,12 @@ var Input = function(_param) {
         className: cn("hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800", preview ? "hawa-opacity-100" : "hawa-opacity-0")
     }), /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("div", {
         className: cn("hawa-relative")
-    }, props.icon && /* @__PURE__ */ import_react15.default.createElement("div", {
-        className: "hawa-absolute hawa-left-3 hawa-top-1/2 hawa--translate-y-1/2"
-    }, props.icon), /* @__PURE__ */ import_react15.default.createElement("input", {
+    }, props.startIcon && /* @__PURE__ */ import_react15.default.createElement("div", {
+        className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2"
+    }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react15.default.createElement("div", {
+        className: "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2"
+    }, props.endIcon), /* @__PURE__ */ import_react15.default.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 = props.inputProps) === null || _props_inputProps === void 0 ? void 0 : _props_inputProps.className),
         dir: props.dir,
         type: props.type,
         value: props.value,
@@ -4086,10 +4099,9 @@ var Input = function(_param) {
         disabled: preview,
         style: {
             height: 40
-        }
-    })), props.iconInside && /* @__PURE__ */ import_react15.default.createElement("div", {
-        className: "hawa-absolute hawa-end-2 hawa-top-[41px] hawa-mx-1  hawa--translate-y-1/2"
-    }, props.iconInside), !forceHideHelperText && /* @__PURE__ */ import_react15.default.createElement("p", {
+        },
+        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 = props.inputProps) === null || _props_inputProps === void 0 ? void 0 : _props_inputProps.className)
+    })), !forceHideHelperText && /* @__PURE__ */ import_react15.default.createElement("p", {
         className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText))));
 };
@@ -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, [
@@ -8163,11 +8228,9 @@ var VeryBadEmoji = function() {
 var import_react46 = __toESM(require("react"));
 var EyeIcon = function(props) {
     return /* @__PURE__ */ import_react46.default.createElement("div", {
-        className: props.classNames
+        className: cn("hawa-h-5 hawa-w-5", props.className)
     }, /* @__PURE__ */ import_react46.default.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
@@ -8184,11 +8247,9 @@ var EyeIcon = function(props) {
 };
 var HiddenEyeIcon = function(props) {
     return /* @__PURE__ */ import_react46.default.createElement("div", {
-        className: props.classNames
+        className: cn("hawa-h-5 hawa-w-5", props.className)
     }, /* @__PURE__ */ import_react46.default.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
@@ -8351,15 +8412,15 @@ var LoginForm = function(_param) {
                             autoComplete: "current-password",
                             type: passwordVisible ? "text" : "password",
                             label: (texts === null || texts === void 0 ? void 0 : (_texts_password = texts.password) === null || _texts_password === void 0 ? void 0 : _texts_password.label) || "Password",
-                            iconInside: /* @__PURE__ */ import_react47.default.createElement("div", {
+                            endIcon: /* @__PURE__ */ import_react47.default.createElement("div", {
                                 className: "hawa-cursor-pointer",
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
                             }, passwordVisible ? /* @__PURE__ */ import_react47.default.createElement(EyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             }) : /* @__PURE__ */ import_react47.default.createElement(HiddenEyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             })),
                             placeholder: (texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder) || "Enter your password",
                             helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message
@@ -8395,15 +8456,15 @@ var LoginForm = function(_param) {
                             autoComplete: "current-password",
                             type: passwordVisible ? "text" : "password",
                             label: texts === null || texts === void 0 ? void 0 : (_texts_password = texts.password) === null || _texts_password === void 0 ? void 0 : _texts_password.label,
-                            iconInside: /* @__PURE__ */ import_react47.default.createElement("div", {
+                            endIcon: /* @__PURE__ */ import_react47.default.createElement("div", {
                                 className: "hawa-cursor-pointer",
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
                             }, passwordVisible ? /* @__PURE__ */ import_react47.default.createElement(EyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             }) : /* @__PURE__ */ import_react47.default.createElement(HiddenEyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             })),
                             placeholder: (texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder) || "Enter your password",
                             helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message
@@ -8682,15 +8743,15 @@ var RegisterForm = function(_param) {
             return /* @__PURE__ */ import_react48.default.createElement(Input, _object_spread({
                 width: "full",
                 type: passwordVisible ? "text" : "password",
-                iconInside: /* @__PURE__ */ import_react48.default.createElement("div", {
+                endIcon: /* @__PURE__ */ import_react48.default.createElement("div", {
                     className: "hawa-cursor-pointer",
                     onClick: function() {
                         return setPasswordVisible(!passwordVisible);
                     }
                 }, passwordVisible ? /* @__PURE__ */ import_react48.default.createElement(EyeIcon, {
-                    classNames: "hawa-text-gray-500"
+                    className: "hawa-text-gray-500"
                 }) : /* @__PURE__ */ import_react48.default.createElement(HiddenEyeIcon, {
-                    classNames: "hawa-text-gray-500"
+                    className: "hawa-text-gray-500"
                 }), " "),
                 autoComplete: "new-password",
                 label: texts === null || texts === void 0 ? void 0 : (_texts_password = texts.password) === null || _texts_password === void 0 ? void 0 : _texts_password.label,
@@ -10012,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,
@@ -10035,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);
@@ -10044,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;
@@ -10063,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);
@@ -10084,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);
@@ -10111,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);
@@ -10128,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);
@@ -10209,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,