@sikka/hawa 0.13.8-next → 0.13.10-next

package/dist/index.css

@@ -557,19 +557,6 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-.hawa-container {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 2rem;
-  padding-left: 2rem;
-}
-@media (min-width: 1400px) {
-
-  .hawa-container {
-    max-width: 1400px;
-  }
-}
 .link::after {
     content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
     display: inline-block;
@@ -817,6 +804,12 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-\[60\%\] {
   top: 60%;
 }
+.hawa-top-\[72px\] {
+  top: 72px;
+}
+.hawa-top-\[88px\] {
+  top: 88px;
+}
 .hawa-top-full {
   top: 100%;
 }
@@ -881,10 +874,6 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-left: 1rem;
   margin-right: 1rem;
 }
-.hawa-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
 .hawa-my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
@@ -1135,6 +1124,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[calc\(100dvh\)\] {
   height: calc(100dvh);
 }
+.hawa-h-\[calc\(200dvh\)\] {
+  height: calc(200dvh);
+}
 .hawa-h-\[calc\(60vh\)\] {
   height: calc(60vh);
 }
@@ -1379,6 +1371,11 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-collapse {
   border-collapse: collapse;
 }
+.hawa-border-spacing-3 {
+  --tw-border-spacing-x: 0.75rem;
+  --tw-border-spacing-y: 0.75rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .hawa-origin-bottom {
   transform-origin: bottom;
 }
@@ -1816,6 +1813,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
+.hawa-border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
 .hawa-border-input {
   border-color: hsl(var(--input));
 }
@@ -1896,6 +1897,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
+.hawa-bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
 .hawa-bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2852,6 +2857,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
+.hover\:hawa-bg-gray-950:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 7 18 / var(--tw-bg-opacity));
+}
 .hover\:hawa-bg-green-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
@@ -3341,6 +3350,9 @@ body {
 .data-\[state\=open\]\:hawa-fade-in-0[data-state=open] {
   --tw-enter-opacity: 0;
 }
+.data-\[state\=open\]\:hawa-fade-in-90[data-state=open] {
+  --tw-enter-opacity: 0.9;
+}
 .data-\[state\=visible\]\:hawa-fade-in[data-state=visible] {
   --tw-enter-opacity: 0;
 }

package/dist/index.d.mts

@@ -902,10 +902,15 @@ type CopyRightsTypes = {
 };
 declare const Copyrights: FC<CopyRightsTypes>;
 
+type NavigationMenuItem = {
+    label: string;
+    action: () => void;
+    trigger?: any;
+};
 type NavbarType = {
     logo?: any;
     buttons?: any;
-    menuItems?: any;
+    menuItems?: NavigationMenuItem[];
 };
 declare const Navbar: React__default.FC<NavbarType>;
 

package/dist/index.d.ts

@@ -902,10 +902,15 @@ type CopyRightsTypes = {
 };
 declare const Copyrights: FC<CopyRightsTypes>;
 
+type NavigationMenuItem = {
+    label: string;
+    action: () => void;
+    trigger?: any;
+};
 type NavbarType = {
     logo?: any;
     buttons?: any;
-    menuItems?: any;
+    menuItems?: NavigationMenuItem[];
 };
 declare const Navbar: React__default.FC<NavbarType>;
 

package/dist/index.js

@@ -6834,33 +6834,31 @@ var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // components/layout/Navbar.tsx
 var Navbar = function(props) {
+    var _props_menuItems;
     var _ref = _sliced_to_array((0, import_react35.useState)(false), 2), isOpen = _ref[0], setIsOpen = _ref[1];
     return /* @__PURE__ */ import_react35.default.createElement("nav", {
-        className: "hawa-bg-gray-800 hawa-p-4 hawa-transition-all"
-    }, /* @__PURE__ */ import_react35.default.createElement(Collapsible, null, /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: "hawa-container hawa-mx-auto hawa-flex hawa-justify-between hawa-items-center"
+        className: " hawa-transition-all hawa-sticky hawa-top-2"
+    }, /* @__PURE__ */ import_react35.default.createElement(Collapsible, {
+        className: "hawa-bg-gray-800  hawa-p-4 hawa-relative hawa-m-2  hawa-rounded"
+    }, /* @__PURE__ */ import_react35.default.createElement("div", {
+        className: "hawa-flex hawa-justify-between hawa-items-center"
     }, /* @__PURE__ */ import_react35.default.createElement("div", {
         className: "hawa-flex hawa-items-center"
     }, /* @__PURE__ */ import_react35.default.createElement("div", {
         className: "hawa-text-white hawa-text-xl hawa-font-bold"
-    }, "YourLogo")), /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: "hawa-hidden hawa-md:hawa-flex hawa-space-x-4"
-    }, /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/about",
-        className: "hawa-text-white"
-    }, "About"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/services",
-        className: "hawa-text-white"
-    }, "Services"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/contact",
-        className: "hawa-text-white"
-    }, "Contact")), /* @__PURE__ */ import_react35.default.createElement("div", {
+    }, /* @__PURE__ */ import_react35.default.createElement(Logos.sikka, {
+        color: "#ffffff",
+        className: "hawa-h-6 hawa-w-6"
+    }))), /* @__PURE__ */ import_react35.default.createElement("div", {
         className: "hawa-md:hawa-hidden"
     }, /* @__PURE__ */ import_react35.default.createElement(CollapsibleTrigger2, {
+        onClick: function() {
+            return setIsOpen(!isOpen);
+        },
         className: "hawa-text-white hawa-p-2",
         "aria-label": "Toggle menu"
     }, /* @__PURE__ */ import_react35.default.createElement("svg", {
-        className: "hawa-w-6 hawa-h-6",
+        className: cn("hawa-w-6 hawa-h-6", isOpen ? "hawa-invisible" : "hawa-visible"),
         fill: "none",
         stroke: "currentColor",
         viewBox: "0 0 24 24",
@@ -6871,17 +6869,17 @@ var Navbar = function(props) {
         strokeWidth: "2",
         d: "M4 6h16M4 12h16m-7 6h7"
     }))))), /* @__PURE__ */ import_react35.default.createElement(CollapsibleContent2, {
-        className: "hwa-transition-all hawa-fade-in-0   data-[state=open]:hawa-zoom-in-95 data-[state=open]:hawa-animate-in hawa-flex hawa-flex-col hawa-space-y-2 hawa-mt-4"
-    }, /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/about",
-        className: "hawa-text-white hawa-px-2"
-    }, "About"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/services",
-        className: "hawa-text-white hawa-px-2"
-    }, "Services"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/contact",
-        className: "hawa-text-white hawa-px-2"
-    }, "Contact"))));
+        className: cn("data-[state=open]:hawa-animate-in", "data-[state=open]:hawa-fade-in-90", "hawa-transition-all hawa-bg-gray-400 hawa-absolute  hawa-top-[88px]  hawa-flex hawa-flex-col hawa-rounded"),
+        style: {
+            width: "calc(100% - 32px)",
+            zIndex: -100
+        }
+    }, (_props_menuItems = props.menuItems) === null || _props_menuItems === void 0 ? void 0 : _props_menuItems.map(function(item) {
+        return /* @__PURE__ */ import_react35.default.createElement("div", {
+            onClick: item.action,
+            className: "hawa-text-white hawa-p-4 hawa-px-10 hover:hawa-bg-gray-950 hawa-transition-all hawa-cursor-pointer"
+        }, item.label);
+    }))));
 };
 // components/layout/AppLayout.tsx
 var import_react36 = __toESM(require("react"));
@@ -7447,6 +7445,32 @@ var EyeIcon = function(props) {
         r: "3"
     })));
 };
+var HiddenEyeIcon = function(props) {
+    return /* @__PURE__ */ React.createElement("div", {
+        className: props.classNames
+    }, /* @__PURE__ */ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }, /* @__PURE__ */ React.createElement("path", {
+        d: "M9.88 9.88a3 3 0 1 0 4.24 4.24"
+    }), /* @__PURE__ */ React.createElement("path", {
+        d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"
+    }), /* @__PURE__ */ React.createElement("path", {
+        d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"
+    }), /* @__PURE__ */ React.createElement("line", {
+        x1: "2",
+        x2: "22",
+        y1: "2",
+        y2: "22"
+    })));
+};
 // components/blocks/auth/LoginForm.tsx
 var LoginForm = function(_param) {
     var loginType = _param.loginType, texts = _param.texts, _param_passwordLength = _param.passwordLength, passwordLength = _param_passwordLength === void 0 ? 8 : _param_passwordLength, props = _object_without_properties(_param, [
@@ -7566,7 +7590,9 @@ var LoginForm = function(_param) {
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
-                            }, /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
+                            }, passwordVisible ? /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
+                                classNames: "hawa-text-gray-500"
+                            }) : /* @__PURE__ */ import_react42.default.createElement(HiddenEyeIcon, {
                                 classNames: "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",
@@ -7608,9 +7634,11 @@ var LoginForm = function(_param) {
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
-                            }, /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
+                            }, passwordVisible ? /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
                                 classNames: "hawa-text-gray-500"
-                            })),
+                            }) : /* @__PURE__ */ import_react42.default.createElement(HiddenEyeIcon, {
+                                classNames: "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
                         }, field));
@@ -7884,9 +7912,11 @@ var RegisterForm = function(_param) {
                     onClick: function() {
                         return setPasswordVisible(!passwordVisible);
                     }
-                }, /* @__PURE__ */ import_react43.default.createElement(EyeIcon, {
+                }, passwordVisible ? /* @__PURE__ */ import_react43.default.createElement(EyeIcon, {
+                    classNames: "hawa-text-gray-500"
+                }) : /* @__PURE__ */ import_react43.default.createElement(HiddenEyeIcon, {
                     classNames: "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,
                 placeholder: texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder,

package/dist/index.mjs

@@ -6669,16 +6669,20 @@ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // components/layout/Navbar.tsx
 var Navbar = (props) => {
   const [isOpen, setIsOpen] = useState22(false);
-  return /* @__PURE__ */ React61.createElement("nav", { className: "hawa-bg-gray-800 hawa-p-4 hawa-transition-all" }, /* @__PURE__ */ React61.createElement(Collapsible, null, /* @__PURE__ */ React61.createElement("div", { className: "hawa-container hawa-mx-auto hawa-flex hawa-justify-between hawa-items-center" }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-text-white hawa-text-xl hawa-font-bold" }, "YourLogo")), /* @__PURE__ */ React61.createElement("div", { className: "hawa-hidden hawa-md:hawa-flex hawa-space-x-4" }, /* @__PURE__ */ React61.createElement("a", { href: "/about", className: "hawa-text-white" }, "About"), /* @__PURE__ */ React61.createElement("a", { href: "/services", className: "hawa-text-white" }, "Services"), /* @__PURE__ */ React61.createElement("a", { href: "/contact", className: "hawa-text-white" }, "Contact")), /* @__PURE__ */ React61.createElement("div", { className: "hawa-md:hawa-hidden" }, /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React61.createElement("nav", { className: " hawa-transition-all hawa-sticky hawa-top-2" }, /* @__PURE__ */ React61.createElement(Collapsible, { className: "hawa-bg-gray-800  hawa-p-4 hawa-relative hawa-m-2  hawa-rounded" }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-flex hawa-justify-between hawa-items-center" }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-text-white hawa-text-xl hawa-font-bold" }, /* @__PURE__ */ React61.createElement(Logos.sikka, { color: "#ffffff", className: "hawa-h-6 hawa-w-6" }))), /* @__PURE__ */ React61.createElement("div", { className: "hawa-md:hawa-hidden" }, /* @__PURE__ */ React61.createElement(
     CollapsibleTrigger2,
     {
+      onClick: () => setIsOpen(!isOpen),
       className: "hawa-text-white hawa-p-2",
       "aria-label": "Toggle menu"
     },
     /* @__PURE__ */ React61.createElement(
       "svg",
       {
-        className: "hawa-w-6 hawa-h-6",
+        className: cn(
+          "hawa-w-6 hawa-h-6",
+          isOpen ? "hawa-invisible" : "hawa-visible"
+        ),
         fill: "none",
         stroke: "currentColor",
         viewBox: "0 0 24 24",
@@ -6694,7 +6698,29 @@ var Navbar = (props) => {
         }
       )
     )
-  ))), /* @__PURE__ */ React61.createElement(CollapsibleContent2, { className: "hwa-transition-all hawa-fade-in-0   data-[state=open]:hawa-zoom-in-95 data-[state=open]:hawa-animate-in hawa-flex hawa-flex-col hawa-space-y-2 hawa-mt-4" }, /* @__PURE__ */ React61.createElement("a", { href: "/about", className: "hawa-text-white hawa-px-2" }, "About"), /* @__PURE__ */ React61.createElement("a", { href: "/services", className: "hawa-text-white hawa-px-2" }, "Services"), /* @__PURE__ */ React61.createElement("a", { href: "/contact", className: "hawa-text-white hawa-px-2" }, "Contact"))));
+  ))), /* @__PURE__ */ React61.createElement(
+    CollapsibleContent2,
+    {
+      className: cn(
+        "data-[state=open]:hawa-animate-in",
+        "data-[state=open]:hawa-fade-in-90",
+        "hawa-transition-all hawa-bg-gray-400 hawa-absolute  hawa-top-[88px]  hawa-flex hawa-flex-col hawa-rounded"
+        // "hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col"
+      ),
+      style: {
+        width: "calc(100% - 32px)",
+        zIndex: -100
+      }
+    },
+    props.menuItems?.map((item) => /* @__PURE__ */ React61.createElement(
+      "div",
+      {
+        onClick: item.action,
+        className: "hawa-text-white hawa-p-4 hawa-px-10 hover:hawa-bg-gray-950 hawa-transition-all hawa-cursor-pointer"
+      },
+      item.label
+    ))
+  )));
 };
 
 // components/layout/AppLayout.tsx
@@ -7471,6 +7497,24 @@ var EyeIcon = (props) => /* @__PURE__ */ React.createElement("div", { className:
   /* @__PURE__ */ React.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
   /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
+var HiddenEyeIcon = (props) => /* @__PURE__ */ React.createElement("div", { className: props.classNames }, /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ React.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+  /* @__PURE__ */ React.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+  /* @__PURE__ */ React.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+));
 
 // components/blocks/auth/LoginForm.tsx
 var LoginForm = ({
@@ -7564,7 +7608,7 @@ var LoginForm = ({
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React68.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" })
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -7618,7 +7662,8 @@ var LoginForm = ({
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React68.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" }),
+                  "                      "
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -7901,7 +7946,8 @@ var RegisterForm = ({ texts, ...props }) => {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              /* @__PURE__ */ React69.createElement(EyeIcon, { classNames: "hawa-text-gray-500" })
+              passwordVisible ? /* @__PURE__ */ React69.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React69.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" }),
+              " "
             ),
             autoComplete: "new-password",
             label: texts?.password?.label,
@@ -8367,7 +8413,7 @@ var CodeConfirmation = (props) => {
 };
 
 // components/blocks/feedback/UserReferralSource.tsx
-import React75, { useRef as useRef11, useState as useState30 } from "react";
+import React75, { useRef as useRef11, useState as useState29 } from "react";
 import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
 import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
 import * as z6 from "zod";
@@ -8376,7 +8422,7 @@ var UserReferralSource = ({
   options = [],
   ...props
 }) => {
-  const [closed, setClosed] = useState30(false);
+  const [closed, setClosed] = useState29(false);
   const popUpRef = useRef11(null);
   const formSchema = z6.object({
     source: z6.string({ required_error: props.texts?.pleaseSelectOption }),
@@ -8504,16 +8550,16 @@ var UserReferralSource = ({
 };
 
 // components/blocks/feedback/FeedbackRating.tsx
-import React76, { useEffect as useEffect20, useRef as useRef12, useState as useState31 } from "react";
+import React76, { useEffect as useEffect20, useRef as useRef12, useState as useState30 } from "react";
 import clsx11 from "clsx";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
 }) => {
-  const [closed, setClosed] = useState31(false);
-  const [answered, setAnswered] = useState31(false);
-  const [clickedOption, setClickedOption] = useState31(null);
-  const [closingTimer, setClosingTimer] = useState31(5);
+  const [closed, setClosed] = useState30(false);
+  const [answered, setAnswered] = useState30(false);
+  const [clickedOption, setClickedOption] = useState30(null);
+  const [closingTimer, setClosingTimer] = useState30(5);
   const popUpRef = useRef12(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4",
@@ -8618,12 +8664,12 @@ var FeedbackRating = ({
 };
 
 // components/blocks/feedback/FeedbackEmoji.tsx
-import React77, { useState as useState32 } from "react";
+import React77, { useState as useState31 } from "react";
 var FeedbackEmoji = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState32(null);
-  const [loadingSubmit, setLoadingSubmit] = useState32(false);
-  const [feedbackText, setFeedbackText] = useState32("");
-  const [helperText, setHelperText] = useState32(false);
+  const [selectedEmoji, setSelectedEmoji] = useState31(null);
+  const [loadingSubmit, setLoadingSubmit] = useState31(false);
+  const [feedbackText, setFeedbackText] = useState31("");
+  const [helperText, setHelperText] = useState31(false);
   let emojis = [
     { icon: /* @__PURE__ */ React77.createElement(VeryGoodEmoji, null), value: "very-good" },
     { icon: /* @__PURE__ */ React77.createElement(GoodEmoji, null), value: "good" },
@@ -9086,7 +9132,7 @@ var PricingPlans = (props) => {
 };
 
 // components/blocks/pricing/ComparingPlans.tsx
-import React87, { useState as useState33 } from "react";
+import React87, { useState as useState32 } from "react";
 var CheckMark = () => /* @__PURE__ */ React87.createElement(
   "svg",
   {
@@ -9122,8 +9168,8 @@ var UncheckMark = () => /* @__PURE__ */ React87.createElement(
   )
 );
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState33("sar");
-  const [currentCycle, setCurrentCycle] = useState33("month");
+  const [currentCurrency, setCurrentCurrency] = useState32("sar");
+  const [currentCycle, setCurrentCycle] = useState32("month");
   return /* @__PURE__ */ React87.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ React87.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React87.createElement(
     Radio,
     {
@@ -9181,10 +9227,10 @@ var ComparingPlans = (props) => {
 };
 
 // components/blocks/pricing/HorizontalPricing.tsx
-import React88, { useState as useState34 } from "react";
+import React88, { useState as useState33 } from "react";
 import clsx12 from "clsx";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState34("");
+  const [selectedCard, setSelectedCard] = useState33("");
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
@@ -9295,18 +9341,18 @@ var Usage = (props) => {
 };
 
 // components/hooks/useDiscloser.ts
-import { useState as useState35 } from "react";
+import { useState as useState34 } from "react";
 
 // components/hooks/useHover.ts
-import { useEffect as useEffect21, useRef as useRef13, useState as useState36 } from "react";
+import { useEffect as useEffect21, useRef as useRef13, useState as useState35 } from "react";
 
 // components/hooks/useCarousel.ts
-import { useState as useState37, useRef as useRef14 } from "react";
+import { useState as useState36, useRef as useRef14 } from "react";
 
 // components/hooks/useWindowSize.ts
-import { useEffect as useEffect22, useState as useState38 } from "react";
+import { useEffect as useEffect22, useState as useState37 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState38({
+  const [windowSize, setWindowSize] = useState37({
     width: void 0,
     height: void 0
   });
@@ -9325,7 +9371,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef15, useState as useState39, useEffect as useEffect23 } from "react";
+import { useRef as useRef15, useState as useState38, useEffect as useEffect23 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -9337,7 +9383,7 @@ function useFocusWithin({
   onFocus
 } = {}) {
   const ref = useRef15(null);
-  const [focused, _setFocused] = useState39(false);
+  const [focused, _setFocused] = useState38(false);
   const focusedRef = useRef15(false);
   const setFocused = (value) => {
     _setFocused(value);
@@ -9370,7 +9416,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState40, useEffect as useEffect24, useRef as useRef16 } from "react";
+import { useState as useState39, useEffect as useEffect24, useRef as useRef16 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -9392,7 +9438,7 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState40(
+  const [matches, setMatches] = useState39(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef16();
@@ -9411,15 +9457,15 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState41, useEffect as useEffect25 } from "react";
+import { useState as useState40, useEffect as useEffect25 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState42, useEffect as useEffect26 } from "react";
+import { useState as useState41, useEffect as useEffect26 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect27, useState as useState43 } from "react";
+import { useEffect as useEffect27, useState as useState42 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState43(initialTab);
+  const [activeTab, setActiveTab] = useState42(initialTab);
   useEffect27(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.13.8-next",
+  "version": "0.13.10-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -52,7 +52,7 @@
     "eslint": "^8.52.0",
     "eslint-config-next": "^14.0.0",
     "libphonenumber-js": "^1.10.49",
-    "next": "^13.5.6",
+    "next": "^14.0.0",
     "next-themes": "^0.2.1",
     "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
@@ -60,29 +60,29 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.47.0",
     "react-select": "^5.7.7",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.0.0",
     "typescript": "5.2.2",
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/addon-mdx-gfm": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/addon-mdx-gfm": "^7.5.2",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/manager-api": "^7.5.1",
-    "@storybook/nextjs": "^7.5.1",
-    "@storybook/react": "^7.5.1",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/manager-api": "^7.5.2",
+    "@storybook/nextjs": "^7.5.2",
+    "@storybook/react": "^7.5.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.1",
+    "@storybook/theming": "^7.5.2",
     "autoprefixer": "^10.4.16",
     "eslint-plugin-storybook": "^0.6.15",
     "lucide-react": "^0.290.0",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "storybook": "^7.5.1",
+    "storybook": "^7.5.2",
     "storybook-dark-mode": "^3.0.1",
     "tailwindcss": "^3.3.5",
     "tailwindcss-animate": "^1.0.7",