@sikka/hawa 0.11.2-next → 0.11.5-next

package/dist/index.d.mts

@@ -291,6 +291,7 @@ type RadioTypes = {
     onChangeTab?: any;
     defaultValue?: any;
     direction?: "rtl" | "ltr";
+    helperText?: string;
 };
 declare const Radio: FC<RadioTypes>;
 
@@ -1191,12 +1192,14 @@ type ComponentTypes$2 = {
     description?: string;
     tag?: any;
     options?: RadioOptionsTypes[];
-    texts?: {
-        least: string;
-        most: string;
-    };
     position?: "bottom-right" | "bottom-left";
     onOptionClicked?: (option: any) => void;
+    direction?: "rtl" | "ltr";
+    texts?: {
+        pleaseSelectOption: string;
+        textTooShort: string;
+        submit?: string;
+    };
 };
 declare const UserReferralSource: FC<ComponentTypes$2>;
 

package/dist/index.d.ts

@@ -291,6 +291,7 @@ type RadioTypes = {
     onChangeTab?: any;
     defaultValue?: any;
     direction?: "rtl" | "ltr";
+    helperText?: string;
 };
 declare const Radio: FC<RadioTypes>;
 
@@ -1191,12 +1192,14 @@ type ComponentTypes$2 = {
     description?: string;
     tag?: any;
     options?: RadioOptionsTypes[];
-    texts?: {
-        least: string;
-        most: string;
-    };
     position?: "bottom-right" | "bottom-left";
     onOptionClicked?: (option: any) => void;
+    direction?: "rtl" | "ltr";
+    texts?: {
+        pleaseSelectOption: string;
+        textTooShort: string;
+        submit?: string;
+    };
 };
 declare const UserReferralSource: FC<ComponentTypes$2>;
 

package/dist/index.js

@@ -1428,7 +1428,7 @@ var ItemCard = function(_param) {
         className: "hawa-relative hawa-w-full hawa-p-4 xs:hawa-p-6 xs:hawa-pb-2 xs:hawa-px-2"
     }, headerActions && /* @__PURE__ */ import_react6.default.createElement("div", {
         className: "hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3"
-    }, /* @__PURE__ */ import_react6.default.createElement(DropdownMenu, {
+    }, /* @__PURE__ */ import_react6.default.createElement(StopPropagationWrapper, null, /* @__PURE__ */ import_react6.default.createElement(DropdownMenu, {
         items: headerActions,
         trigger: /* @__PURE__ */ import_react6.default.createElement(Button, {
             variant: "ghost",
@@ -1444,7 +1444,7 @@ var ItemCard = function(_param) {
         }, /* @__PURE__ */ import_react6.default.createElement("path", {
             d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
         })))
-    })), /* @__PURE__ */ import_react6.default.createElement("div", {
+    }))), /* @__PURE__ */ import_react6.default.createElement("div", {
         className: " hawa-mx-2"
     }, header && /* @__PURE__ */ import_react6.default.createElement("h5", {
         className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight "
@@ -2246,12 +2246,18 @@ var Radio = function(_param) {
                     id: opt.value.toString(),
                     type: "radio",
                     value: opt.value,
-                    name: "default-radio"
+                    name: "default-radio",
+                    onChange: function() {
+                        setSelectedOption(opt.value);
+                        props.onChangeTab(opt.value);
+                    }
                 }), /* @__PURE__ */ import_react13.default.createElement("label", {
                     htmlFor: opt.value.toString(),
                     className: cn("hawa-text-sm hawa-font-medium  dark:hawa-text-white", opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900")
                 }, opt.label));
-            }));
+            }), props.helperText && /* @__PURE__ */ import_react13.default.createElement("p", {
+                className: "hawa-text-xs hawa-text-helper-color"
+            }, props.helperText));
     }
 };
 // components/elements/Skeleton.tsx
@@ -7700,17 +7706,27 @@ var CodeConfirmation = function(props) {
 };
 // components/blocks/feedback/UserReferralSource.tsx
 var import_react45 = __toESM(require("react"));
-var import_clsx12 = __toESM(require("clsx"));
+var import_react_hook_form6 = require("react-hook-form");
+var import_zod6 = require("@hookform/resolvers/zod");
+var z6 = __toESM(require("zod"));
 var UserReferralSource = function(_param) {
     var _param_position = _param.position, position = _param_position === void 0 ? "bottom-right" : _param_position, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options, props = _object_without_properties(_param, [
         "position",
         "options"
     ]);
+    var _props_texts, _props_texts1;
     var _ref = _sliced_to_array((0, import_react45.useState)(false), 2), closed = _ref[0], setClosed = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react45.useState)(false), 2), answered = _ref1[0], setAnswered = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react45.useState)(null), 2), clickedOption = _ref2[0], setClickedOption = _ref2[1];
-    var _ref3 = _sliced_to_array((0, import_react45.useState)(5), 2), closingTimer = _ref3[0], setClosingTimer = _ref3[1];
+    var _ref1 = _sliced_to_array((0, import_react45.useState)(5), 2), closingTimer = _ref1[0], setClosingTimer = _ref1[1];
     var popUpRef = (0, import_react45.useRef)(null);
+    var formSchema = z6.object({
+        source: z6.string({
+            required_error: (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.pleaseSelectOption
+        }),
+        feedback: z6.string().optional()
+    });
+    var _ref2 = (0, import_react_hook_form6.useForm)({
+        resolver: (0, import_zod6.zodResolver)(formSchema)
+    }), handleSubmit = _ref2.handleSubmit, control = _ref2.control, formState = _ref2.formState;
     var boxPosition = {
         "bottom-right": "hawa-right-4",
         "bottom-left": "hawa-left-4"
@@ -7737,10 +7753,11 @@ var UserReferralSource = function(_param) {
     };
     return /* @__PURE__ */ import_react45.default.createElement(Card, {
         ref: popUpRef,
-        className: (0, import_clsx12.default)("hawa-fixed hawa-bottom-4 hawa-p-0 ", boxPosition[position])
+        className: cn("hawa-fixed hawa-bottom-4 hawa-p-0 ", boxPosition[position]),
+        dir: props.direction
     }, /* @__PURE__ */ import_react45.default.createElement("button", {
         type: "button",
-        className: "hawa-absolute hawa-right-2 hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white",
+        className: cn(props.direction === "rtl" ? "hawa-left-2" : "hawa-right-2", "hawa-absolute  hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white"),
         "data-dismiss-target": "#toast-default",
         "aria-label": "Close",
         onClick: function() {
@@ -7757,22 +7774,51 @@ var UserReferralSource = function(_param) {
         clipRule: "evenodd"
     }))), /* @__PURE__ */ import_react45.default.createElement(CardContent, {
         headless: true
+    }, /* @__PURE__ */ import_react45.default.createElement("form", {
+        onSubmit: handleSubmit(function(e) {
+            return console.log("e is ", e);
+        })
     }, /* @__PURE__ */ import_react45.default.createElement("div", {
-        className: (0, import_clsx12.default)("hawa-flex hawa-flex-col hawa-gap-4", closed ? "hawa-opacity-0" : "hawa-opacity-100")
+        className: cn("hawa-flex hawa-flex-col hawa-gap-4", closed ? "hawa-opacity-0" : "hawa-opacity-100")
     }, /* @__PURE__ */ import_react45.default.createElement("div", {
         className: "hawa-mt-4 hawa-font-bold"
     }, props.question), /* @__PURE__ */ import_react45.default.createElement("div", {
         className: "hawa-flex hawa-w-full hawa-flex-row hawa-gap-1 hawa-rounded "
-    }, /* @__PURE__ */ import_react45.default.createElement(Radio, {
-        orientation: "vertical",
-        options: options
-    })), /* @__PURE__ */ import_react45.default.createElement("div", null, /* @__PURE__ */ import_react45.default.createElement(Textarea, null))), /* @__PURE__ */ import_react45.default.createElement(Button, {
+    }, /* @__PURE__ */ import_react45.default.createElement(import_react_hook_form6.Controller, {
+        control: control,
+        name: "source",
+        render: function(param) {
+            var field = param.field;
+            var _formState_errors_source_message, _formState_errors_source;
+            return /* @__PURE__ */ import_react45.default.createElement(Radio, {
+                direction: props.direction,
+                orientation: "vertical",
+                options: options,
+                defaultValue: field.value,
+                onChangeTab: function(e) {
+                    return field.onChange(e);
+                },
+                helperText: (_formState_errors_source = formState.errors.source) === null || _formState_errors_source === void 0 ? void 0 : (_formState_errors_source_message = _formState_errors_source.message) === null || _formState_errors_source_message === void 0 ? void 0 : _formState_errors_source_message.toString()
+            });
+        }
+    })), /* @__PURE__ */ import_react45.default.createElement("div", null, /* @__PURE__ */ import_react45.default.createElement(import_react_hook_form6.Controller, {
+        control: control,
+        name: "feedback",
+        render: function(param) {
+            var field = param.field;
+            var _formState_errors_feedback_message, _formState_errors_feedback;
+            return /* @__PURE__ */ import_react45.default.createElement(Textarea, _object_spread_props(_object_spread({}, field), {
+                helperText: (_formState_errors_feedback = formState.errors.feedback) === null || _formState_errors_feedback === void 0 ? void 0 : (_formState_errors_feedback_message = _formState_errors_feedback.message) === null || _formState_errors_feedback_message === void 0 ? void 0 : _formState_errors_feedback_message.toString()
+            }));
+        }
+    }))), /* @__PURE__ */ import_react45.default.createElement(Button, {
+        type: "submit",
         className: "hawa-mt-4 hawa-w-full"
-    }, "Submit")));
+    }, ((_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.submit) || "Submit"))));
 };
 // components/blocks/feedback/FeedbackRating.tsx
 var import_react46 = __toESM(require("react"));
-var import_clsx13 = __toESM(require("clsx"));
+var import_clsx12 = __toESM(require("clsx"));
 var FeedbackRating = function(_param) {
     var _param_position = _param.position, position = _param_position === void 0 ? "bottom-right" : _param_position, props = _object_without_properties(_param, [
         "position"
@@ -7808,9 +7854,9 @@ var FeedbackRating = function(_param) {
     };
     return /* @__PURE__ */ import_react46.default.createElement("div", {
         ref: popUpRef,
-        className: (0, import_clsx13.default)(props.banner ? "hawa-w-full hawa-left-0 hawa-fixed hawa-bottom-0 hawa-px-0 md:hawa-px-4" : "hawa-fixed hawa-bottom-4 ", boxPosition[position])
+        className: (0, import_clsx12.default)(props.banner ? "hawa-w-full hawa-left-0 hawa-fixed hawa-bottom-0 hawa-px-0 md:hawa-px-4" : "hawa-fixed hawa-bottom-4 ", boxPosition[position])
     }, /* @__PURE__ */ import_react46.default.createElement("div", {
-        className: (0, import_clsx13.default)("hawa-relative hawa-flex hawa-w-full   hawa-flex-col hawa-gap-2 hawa-rounded hawa-border hawa-bg-background hawa-p-4 hawa-shadow-md hawa-transition-all", closed ? "hawa-opacity-0" : "hawa-opacity-100", props.banner && "hawa-rounded-none md:hawa-rounded hawa-px-4 md:hawa-px-64")
+        className: (0, import_clsx12.default)("hawa-relative hawa-flex hawa-w-full   hawa-flex-col hawa-gap-2 hawa-rounded hawa-border hawa-bg-background hawa-p-4 hawa-shadow-md hawa-transition-all", closed ? "hawa-opacity-0" : "hawa-opacity-100", props.banner && "hawa-rounded-none md:hawa-rounded hawa-px-4 md:hawa-px-64")
     }, /* @__PURE__ */ import_react46.default.createElement("div", {
         className: "hawa-absolute hawa-left-2 hawa-top-2 hawa-p-1.5 hawa-text-sm"
     }, props.title), /* @__PURE__ */ import_react46.default.createElement("button", {
@@ -7852,7 +7898,7 @@ var FeedbackRating = function(_param) {
                     clearTimeout(timeoutDestroy);
                 }, 5300);
             },
-            className: (0, import_clsx13.default)("hawa-w-full hawa-cursor-pointer hawa-rounded hawa-border  hawa-p-4 hawa-text-center hawa-transition-all ", clickedOption === op ? "hawa-bg-gray-500 hawa-text-white" : "hawa-border hawa-bg-background hover:hawa-bg-gray-300 dark:hover:hawa-bg-gray-700")
+            className: (0, import_clsx12.default)("hawa-w-full hawa-cursor-pointer hawa-rounded hawa-border  hawa-p-4 hawa-text-center hawa-transition-all ", clickedOption === op ? "hawa-bg-gray-500 hawa-text-white" : "hawa-border hawa-bg-background hover:hawa-bg-gray-300 dark:hover:hawa-bg-gray-700")
         }, op);
     })), props.texts && /* @__PURE__ */ import_react46.default.createElement("div", {
         className: " hawa-flex hawa-flex-row hawa-justify-between hawa-text-xs"
@@ -8097,25 +8143,25 @@ var VeryBadEmoji = function() {
 };
 // components/blocks/feedback/FeedbackForm.tsx
 var import_react48 = __toESM(require("react"));
-var import_react_hook_form6 = require("react-hook-form");
-var import_zod6 = require("@hookform/resolvers/zod");
-var z6 = __toESM(require("zod"));
+var import_react_hook_form7 = require("react-hook-form");
+var import_zod7 = require("@hookform/resolvers/zod");
+var z7 = __toESM(require("zod"));
 var FeedbackForm = function(props) {
     var _props_texts, _props_texts1;
-    var formSchema = z6.object({
-        requestType: z6.string({
+    var formSchema = z7.object({
+        requestType: z7.string({
             required_error: props.texts.requestTypeRequired
         }).nonempty({
             message: props.texts.requestTypeRequired
         }),
-        description: z6.string({
+        description: z7.string({
             required_error: props.texts.descriptionRequired
         }).min(10, {
             message: props.texts.descriptionTooShort
         })
     });
-    var _ref = (0, import_react_hook_form6.useForm)({
-        resolver: (0, import_zod6.zodResolver)(formSchema)
+    var _ref = (0, import_react_hook_form7.useForm)({
+        resolver: (0, import_zod7.zodResolver)(formSchema)
     }), handleSubmit = _ref.handleSubmit, control = _ref.control, formState = _ref.formState;
     return /* @__PURE__ */ import_react48.default.createElement(Card, null, /* @__PURE__ */ import_react48.default.createElement(CardContent, {
         headless: true
@@ -8128,7 +8174,7 @@ var FeedbackForm = function(props) {
             }
         }),
         className: "hawa-flex hawa-flex-col hawa-gap-4"
-    }, /* @__PURE__ */ import_react48.default.createElement(Label2, null, (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.requestType), /* @__PURE__ */ import_react48.default.createElement(import_react_hook_form6.Controller, {
+    }, /* @__PURE__ */ import_react48.default.createElement(Label2, null, (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.requestType), /* @__PURE__ */ import_react48.default.createElement(import_react_hook_form7.Controller, {
         name: "requestType",
         control: control,
         render: function(param) {
@@ -8142,7 +8188,7 @@ var FeedbackForm = function(props) {
                 helperText: (_formState_errors_requestType = formState.errors.requestType) === null || _formState_errors_requestType === void 0 ? void 0 : (_formState_errors_requestType_message = _formState_errors_requestType.message) === null || _formState_errors_requestType_message === void 0 ? void 0 : _formState_errors_requestType_message.toString()
             }));
         }
-    }), /* @__PURE__ */ import_react48.default.createElement(Label2, null, props.texts.description), /* @__PURE__ */ import_react48.default.createElement(import_react_hook_form6.Controller, {
+    }), /* @__PURE__ */ import_react48.default.createElement(Label2, null, props.texts.description), /* @__PURE__ */ import_react48.default.createElement(import_react_hook_form7.Controller, {
         name: "description",
         control: control,
         render: function(param) {
@@ -8243,10 +8289,10 @@ var Testimonial = function(props) {
 };
 // components/blocks/misc/LeadGenerator.tsx
 var import_react52 = __toESM(require("react"));
-var import_react_hook_form7 = require("react-hook-form");
+var import_react_hook_form8 = require("react-hook-form");
 var LeadGenerator = function(param) {
     var texts = param.texts, submitHandler = param.submitHandler;
-    var _ref = (0, import_react_hook_form7.useForm)(), handleSubmit = _ref.handleSubmit, control = _ref.control, formState = _ref.formState;
+    var _ref = (0, import_react_hook_form8.useForm)(), handleSubmit = _ref.handleSubmit, control = _ref.control, formState = _ref.formState;
     var onSubmit = function(data) {
         if (submitHandler) {
             submitHandler(data.email);
@@ -8258,7 +8304,7 @@ var LeadGenerator = function(param) {
     return /* @__PURE__ */ import_react52.default.createElement(Card, null, /* @__PURE__ */ import_react52.default.createElement(CardHeader, null, /* @__PURE__ */ import_react52.default.createElement(CardTitle, null, texts === null || texts === void 0 ? void 0 : texts.title), /* @__PURE__ */ import_react52.default.createElement(CardDescription, null, texts === null || texts === void 0 ? void 0 : texts.subtitle)), /* @__PURE__ */ import_react52.default.createElement(CardContent, null, /* @__PURE__ */ import_react52.default.createElement("form", {
         className: "hawa-flex hawa-flex-row hawa-gap-2",
         onSubmit: handleSubmit(onSubmit)
-    }, /* @__PURE__ */ import_react52.default.createElement(import_react_hook_form7.Controller, {
+    }, /* @__PURE__ */ import_react52.default.createElement(import_react_hook_form8.Controller, {
         name: "email",
         control: control,
         rules: {
@@ -8498,7 +8544,7 @@ var ComparingPlans = function(props) {
 };
 // components/blocks/pricing/HorizontalPricing.tsx
 var import_react58 = __toESM(require("react"));
-var import_clsx14 = __toESM(require("clsx"));
+var import_clsx13 = __toESM(require("clsx"));
 var HorizontalPricing = function(props) {
     var _ref = _sliced_to_array((0, import_react58.useState)(""), 2), selectedCard = _ref[0], setSelectedCard = _ref[1];
     var data = [
@@ -8546,7 +8592,7 @@ var HorizontalPricing = function(props) {
             id: d.title,
             className: "hawa-peer hawa-appearance-none"
         }), /* @__PURE__ */ import_react58.default.createElement("div", {
-            className: (0, import_clsx14.default)(selectedCard === d.title ? "peer-checked:hawa-border-blue-500" : "", "hawa-peer hawa-flex hawa-cursor-pointer hawa-items-center hawa-justify-between  hawa-rounded-xl hawa-border hawa-bg-background hawa-px-5   hawa-py-4 hawa-shadow dark:hawa-text-white  peer-checked:[&_.active]:hawa-block peer-checked:[&_.default]:hawa-hidden")
+            className: (0, import_clsx13.default)(selectedCard === d.title ? "peer-checked:hawa-border-blue-500" : "", "hawa-peer hawa-flex hawa-cursor-pointer hawa-items-center hawa-justify-between  hawa-rounded-xl hawa-border hawa-bg-background hawa-px-5   hawa-py-4 hawa-shadow dark:hawa-text-white  peer-checked:[&_.active]:hawa-block peer-checked:[&_.default]:hawa-hidden")
         }, /* @__PURE__ */ import_react58.default.createElement("div", {
             className: "hawa-peer hawa-flex hawa-items-center hawa-gap-4"
         }, /* @__PURE__ */ import_react58.default.createElement(CheckIcons, null), /* @__PURE__ */ import_react58.default.createElement(CardText, {

package/dist/index.mjs

@@ -812,7 +812,7 @@ var ItemCard = ({
       clickableImageActionIcon,
       clickableImageActionText
     ))),
-    /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative hawa-w-full hawa-p-4 xs:hawa-p-6 xs:hawa-pb-2 xs:hawa-px-2" }, headerActions && /* @__PURE__ */ React9.createElement("div", { className: "hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3" }, /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative hawa-w-full hawa-p-4 xs:hawa-p-6 xs:hawa-pb-2 xs:hawa-px-2" }, headerActions && /* @__PURE__ */ React9.createElement("div", { className: "hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3" }, /* @__PURE__ */ React9.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React9.createElement(
       DropdownMenu,
       {
         items: headerActions,
@@ -836,7 +836,7 @@ var ItemCard = ({
           )
         )
       }
-    )), /* @__PURE__ */ React9.createElement("div", { className: " hawa-mx-2" }, header && /* @__PURE__ */ React9.createElement("h5", { className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight " }, header), content && /* @__PURE__ */ React9.createElement("span", { className: "hawa-w-full hawa-font-normal " }, content)), actions || counts ? /* @__PURE__ */ React9.createElement(
+    ))), /* @__PURE__ */ React9.createElement("div", { className: " hawa-mx-2" }, header && /* @__PURE__ */ React9.createElement("h5", { className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight " }, header), content && /* @__PURE__ */ React9.createElement("span", { className: "hawa-w-full hawa-font-normal " }, content)), actions || counts ? /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: clsx5(
@@ -1764,7 +1764,11 @@ var Radio = ({
             id: opt.value.toString(),
             type: "radio",
             value: opt.value,
-            name: "default-radio"
+            name: "default-radio",
+            onChange: () => {
+              setSelectedOption(opt.value);
+              props.onChangeTab(opt.value);
+            }
           }
         ),
         /* @__PURE__ */ React20.createElement(
@@ -1778,7 +1782,7 @@ var Radio = ({
           },
           opt.label
         )
-      )));
+      )), props.helperText && /* @__PURE__ */ React20.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText));
   }
 };
 
@@ -7621,17 +7625,24 @@ var CodeConfirmation = (props) => {
 
 // components/blocks/feedback/UserReferralSource.tsx
 import React64, { useEffect as useEffect15, useRef as useRef8, useState as useState25 } from "react";
-import clsx12 from "clsx";
+import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
+import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
+import * as z6 from "zod";
 var UserReferralSource = ({
   position = "bottom-right",
   options = [],
   ...props
 }) => {
   const [closed, setClosed] = useState25(false);
-  const [answered, setAnswered] = useState25(false);
-  const [clickedOption, setClickedOption] = useState25(null);
   const [closingTimer, setClosingTimer] = useState25(5);
   const popUpRef = useRef8(null);
+  const formSchema = z6.object({
+    source: z6.string({ required_error: props.texts?.pleaseSelectOption }),
+    feedback: z6.string().optional()
+  });
+  const { handleSubmit, control, formState } = useForm6({
+    resolver: zodResolver6(formSchema)
+  });
   const boxPosition = {
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
@@ -7658,16 +7669,20 @@ var UserReferralSource = ({
     Card,
     {
       ref: popUpRef,
-      className: clsx12(
+      className: cn(
         "hawa-fixed hawa-bottom-4 hawa-p-0 ",
         boxPosition[position]
-      )
+      ),
+      dir: props.direction
     },
     /* @__PURE__ */ React64.createElement(
       "button",
       {
         type: "button",
-        className: "hawa-absolute hawa-right-2 hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white",
+        className: cn(
+          props.direction === "rtl" ? "hawa-left-2" : "hawa-right-2",
+          "hawa-absolute  hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white"
+        ),
         "data-dismiss-target": "#toast-default",
         "aria-label": "Close",
         onClick: () => slowClose()
@@ -7690,24 +7705,54 @@ var UserReferralSource = ({
         )
       )
     ),
-    /* @__PURE__ */ React64.createElement(CardContent, { headless: true }, /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React64.createElement(CardContent, { headless: true }, /* @__PURE__ */ React64.createElement("form", { onSubmit: handleSubmit((e) => console.log("e is ", e)) }, /* @__PURE__ */ React64.createElement(
       "div",
       {
-        className: clsx12(
+        className: cn(
           "hawa-flex hawa-flex-col hawa-gap-4",
           closed ? "hawa-opacity-0" : "hawa-opacity-100"
         )
       },
       /* @__PURE__ */ React64.createElement("div", { className: "hawa-mt-4 hawa-font-bold" }, props.question),
-      /* @__PURE__ */ React64.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-gap-1 hawa-rounded " }, /* @__PURE__ */ React64.createElement(Radio, { orientation: "vertical", options })),
-      /* @__PURE__ */ React64.createElement("div", null, /* @__PURE__ */ React64.createElement(Textarea, null))
-    ), /* @__PURE__ */ React64.createElement(Button, { className: "hawa-mt-4 hawa-w-full" }, "Submit"))
+      /* @__PURE__ */ React64.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-gap-1 hawa-rounded " }, /* @__PURE__ */ React64.createElement(
+        Controller6,
+        {
+          control,
+          name: "source",
+          render: ({ field }) => /* @__PURE__ */ React64.createElement(
+            Radio,
+            {
+              direction: props.direction,
+              orientation: "vertical",
+              options,
+              defaultValue: field.value,
+              onChangeTab: (e) => field.onChange(e),
+              helperText: formState.errors.source?.message?.toString()
+            }
+          )
+        }
+      )),
+      /* @__PURE__ */ React64.createElement("div", null, /* @__PURE__ */ React64.createElement(
+        Controller6,
+        {
+          control,
+          name: "feedback",
+          render: ({ field }) => /* @__PURE__ */ React64.createElement(
+            Textarea,
+            {
+              ...field,
+              helperText: formState.errors.feedback?.message?.toString()
+            }
+          )
+        }
+      ))
+    ), /* @__PURE__ */ React64.createElement(Button, { type: "submit", className: "hawa-mt-4 hawa-w-full" }, props.texts?.submit || "Submit")))
   );
 };
 
 // components/blocks/feedback/FeedbackRating.tsx
 import React65, { useEffect as useEffect16, useRef as useRef9, useState as useState26 } from "react";
-import clsx13 from "clsx";
+import clsx12 from "clsx";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
@@ -7743,7 +7788,7 @@ var FeedbackRating = ({
     "div",
     {
       ref: popUpRef,
-      className: clsx13(
+      className: clsx12(
         props.banner ? "hawa-w-full hawa-left-0 hawa-fixed hawa-bottom-0 hawa-px-0 md:hawa-px-4" : "hawa-fixed hawa-bottom-4 ",
         boxPosition[position]
       )
@@ -7751,7 +7796,7 @@ var FeedbackRating = ({
     /* @__PURE__ */ React65.createElement(
       "div",
       {
-        className: clsx13(
+        className: clsx12(
           "hawa-relative hawa-flex hawa-w-full   hawa-flex-col hawa-gap-2 hawa-rounded hawa-border hawa-bg-background hawa-p-4 hawa-shadow-md hawa-transition-all",
           closed ? "hawa-opacity-0" : "hawa-opacity-100",
           props.banner && "hawa-rounded-none md:hawa-rounded hawa-px-4 md:hawa-px-64"
@@ -7806,7 +7851,7 @@ var FeedbackRating = ({
               clearTimeout(timeoutDestroy);
             }, 5300);
           },
-          className: clsx13(
+          className: clsx12(
             "hawa-w-full hawa-cursor-pointer hawa-rounded hawa-border  hawa-p-4 hawa-text-center hawa-transition-all ",
             clickedOption === op ? "hawa-bg-gray-500 hawa-text-white" : "hawa-border hawa-bg-background hover:hawa-bg-gray-300 dark:hover:hawa-bg-gray-700"
           )
@@ -8025,16 +8070,16 @@ var VeryBadEmoji = () => /* @__PURE__ */ React66.createElement(
 
 // components/blocks/feedback/FeedbackForm.tsx
 import React67 from "react";
-import { useForm as useForm6, Controller as Controller6 } from "react-hook-form";
-import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
-import * as z6 from "zod";
+import { useForm as useForm7, Controller as Controller7 } from "react-hook-form";
+import { zodResolver as zodResolver7 } from "@hookform/resolvers/zod";
+import * as z7 from "zod";
 var FeedbackForm = (props) => {
-  const formSchema = z6.object({
-    requestType: z6.string({ required_error: props.texts.requestTypeRequired }).nonempty({ message: props.texts.requestTypeRequired }),
-    description: z6.string({ required_error: props.texts.descriptionRequired }).min(10, { message: props.texts.descriptionTooShort })
+  const formSchema = z7.object({
+    requestType: z7.string({ required_error: props.texts.requestTypeRequired }).nonempty({ message: props.texts.requestTypeRequired }),
+    description: z7.string({ required_error: props.texts.descriptionRequired }).min(10, { message: props.texts.descriptionTooShort })
   });
-  const { handleSubmit, control, formState } = useForm6({
-    resolver: zodResolver6(formSchema)
+  const { handleSubmit, control, formState } = useForm7({
+    resolver: zodResolver7(formSchema)
   });
   return /* @__PURE__ */ React67.createElement(Card, null, /* @__PURE__ */ React67.createElement(CardContent, { headless: true }, /* @__PURE__ */ React67.createElement(
     "form",
@@ -8050,7 +8095,7 @@ var FeedbackForm = (props) => {
     },
     /* @__PURE__ */ React67.createElement(Label2, null, props.texts?.requestType),
     /* @__PURE__ */ React67.createElement(
-      Controller6,
+      Controller7,
       {
         name: "requestType",
         control,
@@ -8067,7 +8112,7 @@ var FeedbackForm = (props) => {
     ),
     /* @__PURE__ */ React67.createElement(Label2, null, props.texts.description),
     /* @__PURE__ */ React67.createElement(
-      Controller6,
+      Controller7,
       {
         name: "description",
         control,
@@ -8146,9 +8191,9 @@ var Testimonial = (props) => {
 
 // components/blocks/misc/LeadGenerator.tsx
 import React71 from "react";
-import { useForm as useForm7, Controller as Controller7 } from "react-hook-form";
+import { useForm as useForm8, Controller as Controller8 } from "react-hook-form";
 var LeadGenerator = ({ texts, submitHandler }) => {
-  const { handleSubmit, control, formState } = useForm7();
+  const { handleSubmit, control, formState } = useForm8();
   const onSubmit = (data) => {
     if (submitHandler) {
       submitHandler(data.email);
@@ -8163,7 +8208,7 @@ var LeadGenerator = ({ texts, submitHandler }) => {
       onSubmit: handleSubmit(onSubmit)
     },
     /* @__PURE__ */ React71.createElement(
-      Controller7,
+      Controller8,
       {
         name: "email",
         control,
@@ -8382,7 +8427,7 @@ var ComparingPlans = (props) => {
 
 // components/blocks/pricing/HorizontalPricing.tsx
 import React77, { useState as useState29 } from "react";
-import clsx14 from "clsx";
+import clsx13 from "clsx";
 var HorizontalPricing = (props) => {
   const [selectedCard, setSelectedCard] = useState29("");
   let data = [
@@ -8424,7 +8469,7 @@ var HorizontalPricing = (props) => {
     /* @__PURE__ */ React77.createElement(
       "div",
       {
-        className: clsx14(
+        className: clsx13(
           selectedCard === d.title ? "peer-checked:hawa-border-blue-500" : "",
           "hawa-peer hawa-flex hawa-cursor-pointer hawa-items-center hawa-justify-between  hawa-rounded-xl hawa-border hawa-bg-background hawa-px-5   hawa-py-4 hawa-shadow dark:hawa-text-white  peer-checked:[&_.active]:hawa-block peer-checked:[&_.default]:hawa-hidden"
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.11.2-next",
+  "version": "0.11.5-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {