@sikka/hawa 0.19.10-next → 0.19.12-next

package/dist/index.css

@@ -4246,6 +4246,10 @@ body {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:hawa-flex-row {
+    flex-direction: row;
+  }
+
   .md\:hawa-rounded-t {
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);

package/dist/index.d.mts

@@ -52,7 +52,7 @@ type AdCardTypes = {
 };
 declare const AdCard: FC<AdCardTypes>;
 
-type PricingCardTypes = {
+type PricingCardProps = {
     direction?: DirectionType;
     features: {
         included: boolean;
@@ -60,20 +60,21 @@ type PricingCardTypes = {
         text: string;
     }[];
     price: number;
+    id?: string;
     discount?: string;
     onPlanClicked?: () => void;
     currentPlan?: boolean;
-    size: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large";
     isLoading?: boolean;
     texts: {
         title: string;
-        subtitle: string;
+        subtitle?: string;
         buttonText: string;
         cycleText: string;
         currencyText: string;
     };
 };
-declare const PricingCard: FC<PricingCardTypes>;
+declare const PricingCard: FC<PricingCardProps>;
 
 declare const DropdownMenuRoot: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -1670,23 +1671,7 @@ type NoPermissionProps = {
 declare const NoPermission: FC<NoPermissionProps>;
 
 type PricingPlansTypes = {
-    plans: {
-        id: any;
-        direction?: DirectionType;
-        features: {
-            included: boolean;
-            text: string;
-        }[];
-        price: number;
-        size?: "small" | "medium" | "large";
-        texts: {
-            title: string;
-            subtitle: string;
-            buttonText: string;
-            cycleText: string;
-            currencyText: string;
-        };
-    }[];
+    plans: PricingCardProps[];
     currencies: {
         label: string;
         value: string;
@@ -1707,6 +1692,8 @@ type PricingPlansTypes = {
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;
+    mainContainerProps?: InputHTMLAttributes<HTMLDivElement>;
+    cardsContainerProps?: InputHTMLAttributes<HTMLDivElement>;
 };
 declare const PricingPlans: FC<PricingPlansTypes>;
 
@@ -1891,4 +1878,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, type PricingCardProps, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -52,7 +52,7 @@ type AdCardTypes = {
 };
 declare const AdCard: FC<AdCardTypes>;
 
-type PricingCardTypes = {
+type PricingCardProps = {
     direction?: DirectionType;
     features: {
         included: boolean;
@@ -60,20 +60,21 @@ type PricingCardTypes = {
         text: string;
     }[];
     price: number;
+    id?: string;
     discount?: string;
     onPlanClicked?: () => void;
     currentPlan?: boolean;
-    size: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large";
     isLoading?: boolean;
     texts: {
         title: string;
-        subtitle: string;
+        subtitle?: string;
         buttonText: string;
         cycleText: string;
         currencyText: string;
     };
 };
-declare const PricingCard: FC<PricingCardTypes>;
+declare const PricingCard: FC<PricingCardProps>;
 
 declare const DropdownMenuRoot: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -1670,23 +1671,7 @@ type NoPermissionProps = {
 declare const NoPermission: FC<NoPermissionProps>;
 
 type PricingPlansTypes = {
-    plans: {
-        id: any;
-        direction?: DirectionType;
-        features: {
-            included: boolean;
-            text: string;
-        }[];
-        price: number;
-        size?: "small" | "medium" | "large";
-        texts: {
-            title: string;
-            subtitle: string;
-            buttonText: string;
-            cycleText: string;
-            currencyText: string;
-        };
-    }[];
+    plans: PricingCardProps[];
     currencies: {
         label: string;
         value: string;
@@ -1707,6 +1692,8 @@ type PricingPlansTypes = {
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;
+    mainContainerProps?: InputHTMLAttributes<HTMLDivElement>;
+    cardsContainerProps?: InputHTMLAttributes<HTMLDivElement>;
 };
 declare const PricingPlans: FC<PricingPlansTypes>;
 
@@ -1891,4 +1878,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, type PricingCardProps, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -803,9 +803,9 @@ var PricingCard = ({
 }) => {
   var _a;
   let cardSizes = {
-    small: "hawa-mx-1 hawa-w-full hawa-max-w-sm hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
-    medium: "hawa-mx-1 hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
-    large: "hawa-mx-1 hawa-w-full hawa-max-w-lg hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background "
+    small: "hawa-w-full hawa-max-w-sm hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
+    medium: "hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
+    large: "hawa-w-full hawa-max-w-lg hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background "
   };
   return /* @__PURE__ */ import_react6.default.createElement(
     Card,
@@ -817,9 +817,7 @@ var PricingCard = ({
         "hawa-flex hawa-flex-col hawa-gap-4 hawa-rounded hawa-p-4 "
       )
     },
-    props.discount && /* @__PURE__ */ import_react6.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }),
-    " ",
-    /* @__PURE__ */ import_react6.default.createElement("h5", { className: "hawa-text-md 0 hawa-font-bold hawa-text-primary/70" }, props.texts.title),
+    /* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-row hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ import_react6.default.createElement("span", null, props.texts.title), props.discount && /* @__PURE__ */ import_react6.default.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ import_react6.default.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))),
     /* @__PURE__ */ import_react6.default.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ import_react6.default.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price), /* @__PURE__ */ import_react6.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ import_react6.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))),
     /* @__PURE__ */ import_react6.default.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle),
     props.features && /* @__PURE__ */ import_react6.default.createElement("ul", { role: "list", className: "hawa-space-y-0 " }, (_a = props.features) == null ? void 0 : _a.map((feature, o) => {
@@ -10918,8 +10916,12 @@ var NoPermission = ({ texts }) => {
 
 // components/blocks/pricing/PricingPlans.tsx
 var import_react67 = __toESM(require("react"));
-var PricingPlans = (props) => {
-  return /* @__PURE__ */ import_react67.default.createElement("div", null, /* @__PURE__ */ import_react67.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react67.default.createElement(
+var PricingPlans = ({
+  mainContainerProps,
+  cardsContainerProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react67.default.createElement("div", { ...mainContainerProps }, /* @__PURE__ */ import_react67.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react67.default.createElement(
     Radio,
     {
       design: "tabs",
@@ -10943,33 +10945,40 @@ var PricingPlans = (props) => {
         }
       }
     }
-  )), /* @__PURE__ */ import_react67.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.plans.map((plan, index) => {
-    var _a, _b;
-    return /* @__PURE__ */ import_react67.default.createElement(
-      PricingCard,
-      {
-        key: index,
-        onPlanClicked: () => {
-          var _a2, _b2;
-          if (props.onPlanClicked) {
-            let clickedData = {
-              // plan: plan.id,
-              currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
-              cycle: (_b2 = props.currentCycle) == null ? void 0 : _b2.value,
-              ...plan
-            };
-            props.onPlanClicked(clickedData);
+  )), /* @__PURE__ */ import_react67.default.createElement(
+    "div",
+    {
+      className: "hawa-flex hawa-flex-col hawa-gap-2 md:hawa-flex-row hawa-justify-between",
+      ...cardsContainerProps
+    },
+    props.plans.map((plan, index) => {
+      var _a, _b;
+      return /* @__PURE__ */ import_react67.default.createElement(
+        PricingCard,
+        {
+          key: index,
+          onPlanClicked: () => {
+            var _a2, _b2;
+            if (props.onPlanClicked) {
+              let clickedData = {
+                // plan: plan.id,
+                currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
+                cycle: (_b2 = props.currentCycle) == null ? void 0 : _b2.value,
+                ...plan
+              };
+              props.onPlanClicked(clickedData);
+            }
+          },
+          ...plan,
+          texts: {
+            ...plan.texts,
+            currencyText: (_a = props.currentCurrency) == null ? void 0 : _a.label,
+            cycleText: (_b = props.currentCycle) == null ? void 0 : _b.label
           }
-        },
-        ...plan,
-        texts: {
-          ...plan.texts,
-          currencyText: (_a = props.currentCurrency) == null ? void 0 : _a.label,
-          cycleText: (_b = props.currentCycle) == null ? void 0 : _b.label
         }
-      }
-    );
-  })));
+      );
+    })
+  ));
 };
 
 // components/blocks/pricing/ComparingPlans.tsx

package/dist/index.mjs

@@ -570,9 +570,9 @@ var PricingCard = ({
 }) => {
   var _a;
   let cardSizes = {
-    small: "hawa-mx-1 hawa-w-full hawa-max-w-sm hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
-    medium: "hawa-mx-1 hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
-    large: "hawa-mx-1 hawa-w-full hawa-max-w-lg hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background "
+    small: "hawa-w-full hawa-max-w-sm hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
+    medium: "hawa-w-full hawa-rounded hawa-min-w-fit hawa-border dark:hawa-border-gray-700 hawa-bg-background ",
+    large: "hawa-w-full hawa-max-w-lg hawa-rounded hawa-border dark:hawa-border-gray-700 hawa-bg-background "
   };
   return /* @__PURE__ */ React9.createElement(
     Card,
@@ -584,9 +584,7 @@ var PricingCard = ({
         "hawa-flex hawa-flex-col hawa-gap-4 hawa-rounded hawa-p-4 "
       )
     },
-    props.discount && /* @__PURE__ */ React9.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }),
-    " ",
-    /* @__PURE__ */ React9.createElement("h5", { className: "hawa-text-md 0 hawa-font-bold hawa-text-primary/70" }, props.texts.title),
+    /* @__PURE__ */ React9.createElement("div", { className: "hawa-text-md hawa-relative hawa-flex hawa-flex-row hawa-justify-between hawa-font-bold hawa-text-primary/70" }, /* @__PURE__ */ React9.createElement("span", null, props.texts.title), props.discount && /* @__PURE__ */ React9.createElement("span", { className: "hawa-absolute hawa-end-0" }, /* @__PURE__ */ React9.createElement(Chip, { label: props.discount, size: "large", color: "hyper" }))),
     /* @__PURE__ */ React9.createElement("div", { className: " hawa-text-primary hawa-flex  hawa-items-baseline" }, props.isLoading ? /* @__PURE__ */ React9.createElement(Skeleton, { className: "hawa-w-full hawa-max-w-[200px] hawa-h-[48px] hawa-p-0 " }) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, props.price), /* @__PURE__ */ React9.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, props.texts.currencyText)), /* @__PURE__ */ React9.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal hawa-text-primary/70" }, "/ ", props.texts.cycleText))),
     /* @__PURE__ */ React9.createElement("h5", { className: "hawa-text-sm  hawa-font-normal hawa-text-primary/70" }, props.texts.subtitle),
     props.features && /* @__PURE__ */ React9.createElement("ul", { role: "list", className: "hawa-space-y-0 " }, (_a = props.features) == null ? void 0 : _a.map((feature, o) => {
@@ -10702,8 +10700,12 @@ var NoPermission = ({ texts }) => {
 
 // components/blocks/pricing/PricingPlans.tsx
 import React94 from "react";
-var PricingPlans = (props) => {
-  return /* @__PURE__ */ React94.createElement("div", null, /* @__PURE__ */ React94.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React94.createElement(
+var PricingPlans = ({
+  mainContainerProps,
+  cardsContainerProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ React94.createElement("div", { ...mainContainerProps }, /* @__PURE__ */ React94.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React94.createElement(
     Radio,
     {
       design: "tabs",
@@ -10727,33 +10729,40 @@ var PricingPlans = (props) => {
         }
       }
     }
-  )), /* @__PURE__ */ React94.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.plans.map((plan, index) => {
-    var _a, _b;
-    return /* @__PURE__ */ React94.createElement(
-      PricingCard,
-      {
-        key: index,
-        onPlanClicked: () => {
-          var _a2, _b2;
-          if (props.onPlanClicked) {
-            let clickedData = {
-              // plan: plan.id,
-              currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
-              cycle: (_b2 = props.currentCycle) == null ? void 0 : _b2.value,
-              ...plan
-            };
-            props.onPlanClicked(clickedData);
+  )), /* @__PURE__ */ React94.createElement(
+    "div",
+    {
+      className: "hawa-flex hawa-flex-col hawa-gap-2 md:hawa-flex-row hawa-justify-between",
+      ...cardsContainerProps
+    },
+    props.plans.map((plan, index) => {
+      var _a, _b;
+      return /* @__PURE__ */ React94.createElement(
+        PricingCard,
+        {
+          key: index,
+          onPlanClicked: () => {
+            var _a2, _b2;
+            if (props.onPlanClicked) {
+              let clickedData = {
+                // plan: plan.id,
+                currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
+                cycle: (_b2 = props.currentCycle) == null ? void 0 : _b2.value,
+                ...plan
+              };
+              props.onPlanClicked(clickedData);
+            }
+          },
+          ...plan,
+          texts: {
+            ...plan.texts,
+            currencyText: (_a = props.currentCurrency) == null ? void 0 : _a.label,
+            cycleText: (_b = props.currentCycle) == null ? void 0 : _b.label
           }
-        },
-        ...plan,
-        texts: {
-          ...plan.texts,
-          currencyText: (_a = props.currentCurrency) == null ? void 0 : _a.label,
-          cycleText: (_b = props.currentCycle) == null ? void 0 : _b.label
         }
-      }
-    );
-  })));
+      );
+    })
+  ));
 };
 
 // components/blocks/pricing/ComparingPlans.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.19.10-next",
+  "version": "0.19.12-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",