@sikka/hawa 0.19.32-next → 0.19.34-next

package/dist/index.d.mts

@@ -38,6 +38,10 @@ type PositionType = "top" | "bottom" | "right" | "left";
 type SeverityType = "info" | "warning" | "error" | "success" | "none";
 type OrientationType = "vertical" | "horizontal";
 type RadiusType = "full" | "inherit" | "none";
+type RadioOptionType = {
+    label: string;
+    value: string;
+};
 
 type AdCardTypes = {
     orientation: OrientationType;
@@ -52,15 +56,103 @@ type AdCardTypes = {
 };
 declare const AdCard: FC<AdCardTypes>;
 
+type PlanFeature = {
+    soon?: boolean;
+    included?: boolean;
+    text: string;
+    hint?: string;
+    hintSide?: PositionType;
+};
+
+type PricingPlanTexts = {
+    title?: string;
+    subtitle?: string;
+    buttonText?: string;
+    cycleText?: string;
+    currencyText?: string;
+    soon?: string;
+    recommended?: string;
+};
+type ThirdPartyAuthTextsTypes = {
+    continueWithGoogle?: string;
+    continueWithTwitter?: string;
+    continueWithApple?: string;
+    continueWithMicrosoft?: string;
+    continueWithGithub?: string;
+    continueWithEmail?: string;
+    continueWithPhone?: string;
+};
+type BaseInputType = {
+    label?: string;
+    placeholder?: string;
+};
+type ValidationTexts = {
+    required?: string;
+    invalid?: string;
+};
+type TextInputType = ValidationTexts & {
+    label?: string;
+    placeholder?: string;
+};
+type PasswordInputType$1 = BaseInputType & {
+    required?: string;
+    tooShort?: string;
+};
+type UsernameInputType = TextInputType & {
+    tooShort?: string;
+};
+type ConfirmInputType = BaseInputType & {
+    required?: string;
+    dontMatch?: string;
+};
+type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    email?: TextInputType;
+    username?: UsernameInputType;
+    phone?: TextInputType;
+    password?: PasswordInputType$1;
+    forgotPassword?: string;
+    newUserText?: string;
+    createAccount?: string;
+    loginText?: string;
+};
+type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    fullName?: BaseInputType;
+    email?: TextInputType;
+    username?: UsernameInputType;
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    userReference?: BaseInputType;
+    subscribeToNewsletter?: string;
+    termsRequired?: string;
+    refCode?: string;
+    refCodePlaceholder?: string;
+    existingUserText?: string;
+    termsText?: string;
+    iAcceptText?: string;
+    registerText?: string;
+    loginText?: string;
+};
+type ResetPasswordTextsTypes = {
+    email?: TextInputType;
+    emailSentText?: string;
+    registerText?: string;
+    resetPassword?: string;
+    dontHaveAccount?: string;
+    headTitle?: string;
+    headDescription?: string;
+};
+type NewPasswordTextsTypes = {
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    updatePassword?: string;
+    passwordChanged?: string;
+    dontHaveAccount?: string;
+    registerText?: string;
+};
+
 type PricingCardProps = {
     direction?: DirectionType;
-    features: {
-        included: boolean;
-        soon?: boolean;
-        text: string;
-        hint?: string;
-        hintSide?: any;
-    }[];
+    features: PlanFeature[];
     endButton?: boolean;
     price: number;
     oldPrice?: number;
@@ -71,14 +163,7 @@ type PricingCardProps = {
     recommended?: boolean;
     size?: "small" | "medium" | "large";
     isLoading?: boolean;
-    texts: {
-        title: string;
-        subtitle?: string;
-        buttonText: string;
-        cycleText: string;
-        currencyText: string;
-        recommended?: string;
-    };
+    texts: PricingPlanTexts;
 };
 declare const PricingCard: FC<PricingCardProps>;
 
@@ -1040,11 +1125,11 @@ type PasswordInputIndicatorProps = {
     strength?: any;
 };
 declare const PasswordStrengthIndicator: React__default.FC<PasswordInputIndicatorProps>;
-type PasswordInputType$1 = {
+type PasswordInputType = {
     onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
     hidePopover?: boolean;
 };
-declare const PasswordInput: React__default.FC<PasswordInputType$1>;
+declare const PasswordInput: React__default.FC<PasswordInputType>;
 
 interface StatTypes extends React__default.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -1285,83 +1370,6 @@ type DocsSidebarType = {
 };
 declare const DocsSidebar: React__default.FC<DocsSidebarType>;
 
-type ThirdPartyAuthTextsTypes = {
-    continueWithGoogle?: string;
-    continueWithTwitter?: string;
-    continueWithApple?: string;
-    continueWithMicrosoft?: string;
-    continueWithGithub?: string;
-    continueWithEmail?: string;
-    continueWithPhone?: string;
-};
-type BaseInputType = {
-    label?: string;
-    placeholder?: string;
-};
-type ValidationTexts = {
-    required?: string;
-    invalid?: string;
-};
-type TextInputType = ValidationTexts & {
-    label?: string;
-    placeholder?: string;
-};
-type PasswordInputType = BaseInputType & {
-    required?: string;
-    tooShort?: string;
-};
-type UsernameInputType = TextInputType & {
-    tooShort?: string;
-};
-type ConfirmInputType = BaseInputType & {
-    required?: string;
-    dontMatch?: string;
-};
-type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    email?: TextInputType;
-    username?: UsernameInputType;
-    phone?: TextInputType;
-    password?: PasswordInputType;
-    forgotPassword?: string;
-    newUserText?: string;
-    createAccount?: string;
-    loginText?: string;
-};
-type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    fullName?: BaseInputType;
-    email?: TextInputType;
-    username?: UsernameInputType;
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    userReference?: BaseInputType;
-    subscribeToNewsletter?: string;
-    termsRequired?: string;
-    refCode?: string;
-    refCodePlaceholder?: string;
-    existingUserText?: string;
-    termsText?: string;
-    iAcceptText?: string;
-    registerText?: string;
-    loginText?: string;
-};
-type ResetPasswordTextsTypes = {
-    email?: TextInputType;
-    emailSentText?: string;
-    registerText?: string;
-    resetPassword?: string;
-    dontHaveAccount?: string;
-    headTitle?: string;
-    headDescription?: string;
-};
-type NewPasswordTextsTypes = {
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    updatePassword?: string;
-    passwordChanged?: string;
-    dontHaveAccount?: string;
-    registerText?: string;
-};
-
 type LoginFormTypes = {
     /** Object containing text labels used throughout the form. */
     texts?: LoginFormTextsTypes;
@@ -1683,22 +1691,10 @@ declare const NoPermission: FC<NoPermissionProps>;
 
 type PricingPlansTypes = {
     plans: PricingCardProps[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
-    currentCycle: {
-        label: string;
-        value: string;
-    };
-    currentCurrency: {
-        label: string;
-        value: string;
-    };
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onPlanClicked?: (e: any) => void;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
@@ -1711,31 +1707,18 @@ declare const PricingPlans: FC<PricingPlansTypes>;
 type ComparingPlansTypes = {
     plans: {
         direction?: DirectionType;
-        features: {
-            included: boolean;
-            text: string;
-            hint?: string;
-        }[];
+        features: PlanFeature[];
         price?: number;
-        texts?: {
-            title?: string;
-            subtitle?: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
+    onPlanClicked?: (e: any) => void;
     direction?: DirectionType;
     showButtons?: boolean;
     topPosition?: number;
@@ -1748,19 +1731,9 @@ type HorizontalPricingTypes = {
         direction?: DirectionType;
         currency?: string;
         cycleText?: string;
-        features?: {
-            included: boolean;
-            text: string;
-            description?: string;
-        }[];
+        features?: PlanFeature[];
         price?: number;
-        texts?: {
-            title: string;
-            subtitle: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
     currencies: {
@@ -1771,15 +1744,9 @@ type HorizontalPricingTypes = {
         label: string;
         value: string;
     }[];
+    currentCycle?: RadioOptionType;
+    currentCurrency?: RadioOptionType;
     onPlanClicked?: (e: any) => void;
-    currentCycle?: {
-        label: string;
-        value: string;
-    };
-    currentCurrency?: {
-        label: string;
-        value: string;
-    };
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;

package/dist/index.d.ts

@@ -38,6 +38,10 @@ type PositionType = "top" | "bottom" | "right" | "left";
 type SeverityType = "info" | "warning" | "error" | "success" | "none";
 type OrientationType = "vertical" | "horizontal";
 type RadiusType = "full" | "inherit" | "none";
+type RadioOptionType = {
+    label: string;
+    value: string;
+};
 
 type AdCardTypes = {
     orientation: OrientationType;
@@ -52,15 +56,103 @@ type AdCardTypes = {
 };
 declare const AdCard: FC<AdCardTypes>;
 
+type PlanFeature = {
+    soon?: boolean;
+    included?: boolean;
+    text: string;
+    hint?: string;
+    hintSide?: PositionType;
+};
+
+type PricingPlanTexts = {
+    title?: string;
+    subtitle?: string;
+    buttonText?: string;
+    cycleText?: string;
+    currencyText?: string;
+    soon?: string;
+    recommended?: string;
+};
+type ThirdPartyAuthTextsTypes = {
+    continueWithGoogle?: string;
+    continueWithTwitter?: string;
+    continueWithApple?: string;
+    continueWithMicrosoft?: string;
+    continueWithGithub?: string;
+    continueWithEmail?: string;
+    continueWithPhone?: string;
+};
+type BaseInputType = {
+    label?: string;
+    placeholder?: string;
+};
+type ValidationTexts = {
+    required?: string;
+    invalid?: string;
+};
+type TextInputType = ValidationTexts & {
+    label?: string;
+    placeholder?: string;
+};
+type PasswordInputType$1 = BaseInputType & {
+    required?: string;
+    tooShort?: string;
+};
+type UsernameInputType = TextInputType & {
+    tooShort?: string;
+};
+type ConfirmInputType = BaseInputType & {
+    required?: string;
+    dontMatch?: string;
+};
+type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    email?: TextInputType;
+    username?: UsernameInputType;
+    phone?: TextInputType;
+    password?: PasswordInputType$1;
+    forgotPassword?: string;
+    newUserText?: string;
+    createAccount?: string;
+    loginText?: string;
+};
+type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
+    fullName?: BaseInputType;
+    email?: TextInputType;
+    username?: UsernameInputType;
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    userReference?: BaseInputType;
+    subscribeToNewsletter?: string;
+    termsRequired?: string;
+    refCode?: string;
+    refCodePlaceholder?: string;
+    existingUserText?: string;
+    termsText?: string;
+    iAcceptText?: string;
+    registerText?: string;
+    loginText?: string;
+};
+type ResetPasswordTextsTypes = {
+    email?: TextInputType;
+    emailSentText?: string;
+    registerText?: string;
+    resetPassword?: string;
+    dontHaveAccount?: string;
+    headTitle?: string;
+    headDescription?: string;
+};
+type NewPasswordTextsTypes = {
+    password?: PasswordInputType$1;
+    confirm?: ConfirmInputType;
+    updatePassword?: string;
+    passwordChanged?: string;
+    dontHaveAccount?: string;
+    registerText?: string;
+};
+
 type PricingCardProps = {
     direction?: DirectionType;
-    features: {
-        included: boolean;
-        soon?: boolean;
-        text: string;
-        hint?: string;
-        hintSide?: any;
-    }[];
+    features: PlanFeature[];
     endButton?: boolean;
     price: number;
     oldPrice?: number;
@@ -71,14 +163,7 @@ type PricingCardProps = {
     recommended?: boolean;
     size?: "small" | "medium" | "large";
     isLoading?: boolean;
-    texts: {
-        title: string;
-        subtitle?: string;
-        buttonText: string;
-        cycleText: string;
-        currencyText: string;
-        recommended?: string;
-    };
+    texts: PricingPlanTexts;
 };
 declare const PricingCard: FC<PricingCardProps>;
 
@@ -1040,11 +1125,11 @@ type PasswordInputIndicatorProps = {
     strength?: any;
 };
 declare const PasswordStrengthIndicator: React__default.FC<PasswordInputIndicatorProps>;
-type PasswordInputType$1 = {
+type PasswordInputType = {
     onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
     hidePopover?: boolean;
 };
-declare const PasswordInput: React__default.FC<PasswordInputType$1>;
+declare const PasswordInput: React__default.FC<PasswordInputType>;
 
 interface StatTypes extends React__default.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -1285,83 +1370,6 @@ type DocsSidebarType = {
 };
 declare const DocsSidebar: React__default.FC<DocsSidebarType>;
 
-type ThirdPartyAuthTextsTypes = {
-    continueWithGoogle?: string;
-    continueWithTwitter?: string;
-    continueWithApple?: string;
-    continueWithMicrosoft?: string;
-    continueWithGithub?: string;
-    continueWithEmail?: string;
-    continueWithPhone?: string;
-};
-type BaseInputType = {
-    label?: string;
-    placeholder?: string;
-};
-type ValidationTexts = {
-    required?: string;
-    invalid?: string;
-};
-type TextInputType = ValidationTexts & {
-    label?: string;
-    placeholder?: string;
-};
-type PasswordInputType = BaseInputType & {
-    required?: string;
-    tooShort?: string;
-};
-type UsernameInputType = TextInputType & {
-    tooShort?: string;
-};
-type ConfirmInputType = BaseInputType & {
-    required?: string;
-    dontMatch?: string;
-};
-type LoginFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    email?: TextInputType;
-    username?: UsernameInputType;
-    phone?: TextInputType;
-    password?: PasswordInputType;
-    forgotPassword?: string;
-    newUserText?: string;
-    createAccount?: string;
-    loginText?: string;
-};
-type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
-    fullName?: BaseInputType;
-    email?: TextInputType;
-    username?: UsernameInputType;
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    userReference?: BaseInputType;
-    subscribeToNewsletter?: string;
-    termsRequired?: string;
-    refCode?: string;
-    refCodePlaceholder?: string;
-    existingUserText?: string;
-    termsText?: string;
-    iAcceptText?: string;
-    registerText?: string;
-    loginText?: string;
-};
-type ResetPasswordTextsTypes = {
-    email?: TextInputType;
-    emailSentText?: string;
-    registerText?: string;
-    resetPassword?: string;
-    dontHaveAccount?: string;
-    headTitle?: string;
-    headDescription?: string;
-};
-type NewPasswordTextsTypes = {
-    password?: PasswordInputType;
-    confirm?: ConfirmInputType;
-    updatePassword?: string;
-    passwordChanged?: string;
-    dontHaveAccount?: string;
-    registerText?: string;
-};
-
 type LoginFormTypes = {
     /** Object containing text labels used throughout the form. */
     texts?: LoginFormTextsTypes;
@@ -1683,22 +1691,10 @@ declare const NoPermission: FC<NoPermissionProps>;
 
 type PricingPlansTypes = {
     plans: PricingCardProps[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
-    currentCycle: {
-        label: string;
-        value: string;
-    };
-    currentCurrency: {
-        label: string;
-        value: string;
-    };
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onPlanClicked?: (e: any) => void;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
@@ -1711,31 +1707,18 @@ declare const PricingPlans: FC<PricingPlansTypes>;
 type ComparingPlansTypes = {
     plans: {
         direction?: DirectionType;
-        features: {
-            included: boolean;
-            text: string;
-            hint?: string;
-        }[];
+        features: PlanFeature[];
         price?: number;
-        texts?: {
-            title?: string;
-            subtitle?: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
-    currencies: {
-        label: string;
-        value: string;
-    }[];
-    billingCycles: {
-        label: string;
-        value: string;
-    }[];
+    currencies: RadioOptionType[];
+    billingCycles: RadioOptionType[];
+    currentCycle: RadioOptionType;
+    currentCurrency: RadioOptionType;
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
+    onPlanClicked?: (e: any) => void;
     direction?: DirectionType;
     showButtons?: boolean;
     topPosition?: number;
@@ -1748,19 +1731,9 @@ type HorizontalPricingTypes = {
         direction?: DirectionType;
         currency?: string;
         cycleText?: string;
-        features?: {
-            included: boolean;
-            text: string;
-            description?: string;
-        }[];
+        features?: PlanFeature[];
         price?: number;
-        texts?: {
-            title: string;
-            subtitle: string;
-            buttonText?: string;
-            cycleText?: string;
-            currencyText?: string;
-        };
+        texts?: PricingPlanTexts;
         size?: "small" | "medium" | "large";
     }[];
     currencies: {
@@ -1771,15 +1744,9 @@ type HorizontalPricingTypes = {
         label: string;
         value: string;
     }[];
+    currentCycle?: RadioOptionType;
+    currentCurrency?: RadioOptionType;
     onPlanClicked?: (e: any) => void;
-    currentCycle?: {
-        label: string;
-        value: string;
-    };
-    currentCurrency?: {
-        label: string;
-        value: string;
-    };
     onCycleChange?: (e: any) => void;
     onCurrencyChange?: (e: any) => void;
     direction?: DirectionType;

package/dist/index.js

@@ -11117,8 +11117,6 @@ var PricingPlans = ({
 // components/blocks/pricing/ComparingPlans.tsx
 var import_react70 = __toESM(require("react"));
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = (0, import_react70.useState)("sar");
-  const [currentCycle, setCurrentCycle] = (0, import_react70.useState)("monthly");
   const uniqueFeatures = Array.from(
     new Set(
       props.plans.flatMap(
@@ -11130,13 +11128,11 @@ var ComparingPlans = (props) => {
     Radio,
     {
       design: "tabs",
-      defaultValue: currentCycle,
+      defaultValue: props.currentCycle.value,
       options: props.billingCycles,
       onChangeTab: (e) => {
         if (props.onCycleChange) {
           props.onCycleChange(e);
-        } else {
-          console.log("onCycleChange was not provided");
         }
       }
     }
@@ -11144,13 +11140,11 @@ var ComparingPlans = (props) => {
     Radio,
     {
       design: "tabs",
-      defaultValue: currentCurrency,
+      defaultValue: props.currentCurrency.value,
       options: props.currencies,
       onChangeTab: (e) => {
         if (props.onCurrencyChange) {
           props.onCurrencyChange(e);
-        } else {
-          console.log("onCurrencyChange was not provided");
         }
       }
     }
@@ -11181,7 +11175,7 @@ var ComparingPlans = (props) => {
       {
         key: featureIndex,
         className: cn(
-          "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700",
+          "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-border-foreground-muted hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white",
           featureIndex === 0 ? "" : "hawa-border-t"
         )
       },
@@ -11216,7 +11210,11 @@ var ComparingPlans = (props) => {
           },
           /* @__PURE__ */ import_react70.default.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
         )
-      )),
+      ), props.plans.some(
+        (plan) => plan.features.some(
+          (feature) => feature.text === featureText && feature.soon
+        )
+      ) && /* @__PURE__ */ import_react70.default.createElement(Chip, { label: "Soon" })),
       props.plans.map((plan, planIndex) => {
         const feature = plan.features.find(
           (f) => f.text === featureText
@@ -11239,7 +11237,25 @@ var ComparingPlans = (props) => {
         key: i,
         className: "hawa-flex hawa-justify-center hawa-items-center"
       },
-      /* @__PURE__ */ import_react70.default.createElement("button", { className: "hawa-bg-primary hawa-text-white hawa-p-2 hawa-rounded hawa-w-full hawa-max-w-xs" }, ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started")
+      /* @__PURE__ */ import_react70.default.createElement(
+        Button,
+        {
+          className: "hawa-max-w-xs hawa-w-full",
+          onClick: () => {
+            var _a2, _b;
+            if (props.onPlanClicked) {
+              let clickedData = {
+                // plan: plan.id,
+                currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
+                cycle: (_b = props.currentCycle) == null ? void 0 : _b.value,
+                ...plan
+              };
+              props.onPlanClicked(clickedData);
+            }
+          }
+        },
+        ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started"
+      )
     );
   })));
 };

package/dist/index.mjs

@@ -10899,10 +10899,8 @@ var PricingPlans = ({
 };
 
 // components/blocks/pricing/ComparingPlans.tsx
-import React96, { useState as useState36 } from "react";
+import React96 from "react";
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState36("sar");
-  const [currentCycle, setCurrentCycle] = useState36("monthly");
   const uniqueFeatures = Array.from(
     new Set(
       props.plans.flatMap(
@@ -10914,13 +10912,11 @@ var ComparingPlans = (props) => {
     Radio,
     {
       design: "tabs",
-      defaultValue: currentCycle,
+      defaultValue: props.currentCycle.value,
       options: props.billingCycles,
       onChangeTab: (e) => {
         if (props.onCycleChange) {
           props.onCycleChange(e);
-        } else {
-          console.log("onCycleChange was not provided");
         }
       }
     }
@@ -10928,13 +10924,11 @@ var ComparingPlans = (props) => {
     Radio,
     {
       design: "tabs",
-      defaultValue: currentCurrency,
+      defaultValue: props.currentCurrency.value,
       options: props.currencies,
       onChangeTab: (e) => {
         if (props.onCurrencyChange) {
           props.onCurrencyChange(e);
-        } else {
-          console.log("onCurrencyChange was not provided");
         }
       }
     }
@@ -10965,7 +10959,7 @@ var ComparingPlans = (props) => {
       {
         key: featureIndex,
         className: cn(
-          "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700",
+          "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16  hawa-border-foreground-muted hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white",
           featureIndex === 0 ? "" : "hawa-border-t"
         )
       },
@@ -11000,7 +10994,11 @@ var ComparingPlans = (props) => {
           },
           /* @__PURE__ */ React96.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" })
         )
-      )),
+      ), props.plans.some(
+        (plan) => plan.features.some(
+          (feature) => feature.text === featureText && feature.soon
+        )
+      ) && /* @__PURE__ */ React96.createElement(Chip, { label: "Soon" })),
       props.plans.map((plan, planIndex) => {
         const feature = plan.features.find(
           (f) => f.text === featureText
@@ -11023,7 +11021,25 @@ var ComparingPlans = (props) => {
         key: i,
         className: "hawa-flex hawa-justify-center hawa-items-center"
       },
-      /* @__PURE__ */ React96.createElement("button", { className: "hawa-bg-primary hawa-text-white hawa-p-2 hawa-rounded hawa-w-full hawa-max-w-xs" }, ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started")
+      /* @__PURE__ */ React96.createElement(
+        Button,
+        {
+          className: "hawa-max-w-xs hawa-w-full",
+          onClick: () => {
+            var _a2, _b;
+            if (props.onPlanClicked) {
+              let clickedData = {
+                // plan: plan.id,
+                currency: (_a2 = props.currentCurrency) == null ? void 0 : _a2.value,
+                cycle: (_b = props.currentCycle) == null ? void 0 : _b.value,
+                ...plan
+              };
+              props.onPlanClicked(clickedData);
+            }
+          }
+        },
+        ((_a = plan.texts) == null ? void 0 : _a.buttonText) || "Get Started"
+      )
     );
   })));
 };

package/package.json

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