@sikka/hawa 0.46.1-next → 0.46.4-next

package/dist/index.mjs

@@ -439,7 +439,7 @@ function Skeleton({
   };
   const styledAs = {
     div: "",
-    input: "!h-[38px] !w-full"
+    input: "hawa-h-[40px] hawa-w-full"
   };
   return /* @__PURE__ */ React4.createElement(
     "div",
@@ -2807,7 +2807,7 @@ var CheckboxElement = React21.forwardRef(({ radius = "inherit", size = "default"
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // elements/input/Input.tsx
-import React22, { forwardRef as forwardRef13 } from "react";
+import React22, { forwardRef as forwardRef13, useState as useState4 } from "react";
 var Input = forwardRef13(
   ({
     margin = "none",
@@ -2822,6 +2822,7 @@ var Input = forwardRef13(
     ...props
   }, ref) => {
     var _a;
+    const [value, setValue] = useState4(props.value || "");
     let marginStyles = {
       none: "hawa-mb-0",
       normal: "hawa-mb-3",
@@ -2837,6 +2838,7 @@ var Input = forwardRef13(
     let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm placeholder:hawa-text-muted-foreground";
     const handleChange = (e) => {
       let newValue = e.target.value;
+      setValue(newValue);
       if (props.prefixText) {
         if (newValue.length < props.prefixText.length) {
           newValue = props.prefixText;
@@ -2848,9 +2850,23 @@ var Input = forwardRef13(
         }
       }
       if (props.onChange) {
-        const newEvent = { ...e, target: { ...e.target, value: newValue } };
-        props.onChange(newEvent);
+        if (props.type === "number" && props.maxLength) {
+          let v = newValue.replace(/[^0-9]/g, "").slice(0, props.maxLength);
+          const newEvent = { ...e, target: { ...e.target, value: v } };
+          setValue(v);
+          props.onChange(newEvent);
+        } else {
+          const newEvent = { ...e, target: { ...e.target, value: newValue } };
+          setValue(newValue);
+          props.onChange(newEvent);
+        }
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (props.type === "number" && ["e", "E", "+", "-", "."].includes(e.key)) {
+        e.preventDefault();
       }
+      props.onKeyDown && props.onKeyDown(e);
     };
     return /* @__PURE__ */ React22.createElement(
       "div",
@@ -2864,16 +2880,7 @@ var Input = forwardRef13(
         )
       },
       props.label && /* @__PURE__ */ React22.createElement(Label2, { ...labelProps }, props.label),
-      /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center" }, props.outsidePrefix && /* @__PURE__ */ React22.createElement(
-        "span",
-        {
-          className: cn(
-            "hawa-me-2 hawa-opacity-90",
-            !forceHideHelperText && "hawa-mb-2"
-          )
-        },
-        props.outsidePrefix
-      ), props.isLoading ? /* @__PURE__ */ React22.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React22.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : props.isLoadingError ? /* @__PURE__ */ React22.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center" }, props.outsidePrefix && /* @__PURE__ */ React22.createElement("span", { className: cn("hawa-me-2 hawa-opacity-90", !forceHideHelperText && "hawa-mb-2") }, props.outsidePrefix), props.isLoading ? /* @__PURE__ */ React22.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React22.createElement(Skeleton, { as: "input" })) : props.isLoadingError ? /* @__PURE__ */ React22.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React22.createElement(
         Skeleton,
         {
           animation: "none",
@@ -2920,13 +2927,15 @@ var Input = forwardRef13(
           required: true,
           dir: props.dir,
           type: props.type,
-          value: props.value,
+          value: props.value || value,
           onChange: handleChange,
+          onKeyDown: handleKeyDown,
           autoComplete: props.autoComplete,
           defaultValue: props.defaultValue,
           placeholder,
           disabled: props.disabled || preview,
           style: { height: 40 },
+          maxLength: props.maxLength,
           ...inputProps,
           className: cn(
             defaultInputStyle,
@@ -3581,10 +3590,10 @@ var DataTable = ({
 };
 
 // elements/backToTop/BackToTop.tsx
-import React25, { useState as useState5, useEffect as useEffect4, useRef as useRef3 } from "react";
+import React25, { useState as useState6, useEffect as useEffect4, useRef as useRef3 } from "react";
 var BackToTop = ({ ...props }) => {
-  const [visible, setVisible] = useState5(false);
-  const [rect, _setRect] = useState5(null);
+  const [visible, setVisible] = useState6(false);
+  const [rect, _setRect] = useState6(null);
   const self = useRef3(null);
   const _rect = useRef3(rect);
   const setRect = (data) => {
@@ -3674,7 +3683,7 @@ var BackToTop = ({ ...props }) => {
 };
 
 // elements/radio/Radio.tsx
-import React27, { useState as useState6, useRef as useRef4, useEffect as useEffect5, forwardRef as forwardRef16 } from "react";
+import React27, { useState as useState7, useRef as useRef4, useEffect as useEffect5, forwardRef as forwardRef16 } from "react";
 import { TabsList, TabsTrigger, Tabs } from "@radix-ui/react-tabs";
 
 // elements/popover/Popover.tsx
@@ -3780,10 +3789,10 @@ var Radio = forwardRef16(
     const [parentDirection, setParentDirection] = React27.useState(
       null
     );
-    const [selectedOption, setSelectedOption] = useState6(
+    const [selectedOption, setSelectedOption] = useState7(
       props.defaultValue || props.value
     );
-    const [openTooltip, setOpenTooltip] = useState6(null);
+    const [openTooltip, setOpenTooltip] = useState7(null);
     const parentRef = useRef4(null);
     useEffect5(() => {
       var _a2;
@@ -4414,7 +4423,7 @@ var Textarea = React30.forwardRef(
 Textarea.displayName = "Textarea";
 
 // elements/fileDropzone/FileDropzone.tsx
-import React31, { useEffect as useEffect6, useState as useState8 } from "react";
+import React31, { useEffect as useEffect6, useState as useState9 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx2 from "clsx";
 var FileDropzone = ({
@@ -4436,8 +4445,8 @@ var FileDropzone = ({
   privacyLink
 }) => {
   var _a, _b, _c, _d, _e, _f;
-  const [cmp, setCmp] = useState8(0);
-  const [max, setMax] = useState8(0);
+  const [cmp, setCmp] = useState9(0);
+  const [max, setMax] = useState9(0);
   const {
     getRootProps,
     getInputProps,
@@ -4677,10 +4686,10 @@ import { useEffect as useEffect7, useLayoutEffect } from "react";
 var useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect7;
 
 // hooks/useDiscloser.ts
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 
 // hooks/useHover.ts
-import { useEffect as useEffect8, useRef as useRef6, useState as useState10 } from "react";
+import { useEffect as useEffect8, useRef as useRef6, useState as useState11 } from "react";
 
 // hooks/useToast.ts
 import * as React35 from "react";
@@ -4786,10 +4795,10 @@ function useToast() {
 }
 
 // hooks/useCarousel.ts
-import { useState as useState12, useRef as useRef7 } from "react";
+import { useState as useState13, useRef as useRef7 } from "react";
 
 // hooks/useDialogCarousel.ts
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useEffect as useEffect10, useState as useState14 } from "react";
 import AutoHeight from "embla-carousel-auto-height";
 import useEmblaCarousel from "embla-carousel-react";
 var useDialogCarousel = (options) => {
@@ -4797,7 +4806,7 @@ var useDialogCarousel = (options) => {
     { loop: false, watchDrag: false, startIndex: 0, ...options },
     [AutoHeight({ active: true })]
   );
-  const [canScrollPrev, setCanScrollPrev] = useState13(false);
+  const [canScrollPrev, setCanScrollPrev] = useState14(false);
   const checkCanScrollPrev = () => {
     if (emblaApi) {
       setCanScrollPrev(emblaApi.canScrollPrev());
@@ -4832,10 +4841,10 @@ var useDialogCarousel = (options) => {
 };
 
 // hooks/useDialogSteps.ts
-import { useState as useState14, useEffect as useEffect11, useRef as useRef8 } from "react";
+import { useState as useState15, useEffect as useEffect11, useRef as useRef8 } from "react";
 var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
-  const [currentStep, setCurrentStep] = useState14(initialStep);
-  const [dialogHeight, setDialogHeight] = useState14(null);
+  const [currentStep, setCurrentStep] = useState15(initialStep);
+  const [dialogHeight, setDialogHeight] = useState15(null);
   const visibleStepRef = useRef8(null);
   useEffect11(() => {
     if (visibleStepRef.current) {
@@ -4868,11 +4877,11 @@ var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
 };
 
 // hooks/useClipboard.ts
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 function useClipboard({ timeout = 2e3 } = {}) {
-  const [error, setError] = useState15(null);
-  const [copied, setCopied] = useState15(false);
-  const [copyTimeout, setCopyTimeout] = useState15(null);
+  const [error, setError] = useState16(null);
+  const [copied, setCopied] = useState16(false);
+  const [copyTimeout, setCopyTimeout] = useState16(null);
   const handleCopyResult = (value) => {
     clearTimeout(copyTimeout);
     setCopyTimeout(setTimeout(() => setCopied(false), timeout));
@@ -4894,9 +4903,9 @@ function useClipboard({ timeout = 2e3 } = {}) {
 }
 
 // hooks/useBreakpoint.ts
-import { useState as useState16, useEffect as useEffect12 } from "react";
+import { useState as useState17, useEffect as useEffect12 } from "react";
 var useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState16(null);
+  const [breakpoint, setBreakpoint] = useState17(null);
   useEffect12(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
@@ -4913,9 +4922,9 @@ var useBreakpoint = () => {
 };
 
 // hooks/useWindowSize.ts
-import { useEffect as useEffect13, useState as useState17 } from "react";
+import { useEffect as useEffect13, useState as useState18 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState17({
+  const [windowSize, setWindowSize] = useState18({
     width: void 0,
     height: void 0
   });
@@ -4934,7 +4943,7 @@ var useWindowSize = () => {
 };
 
 // hooks/useFocusWithin.ts
-import { useRef as useRef9, useState as useState18, useEffect as useEffect14 } from "react";
+import { useRef as useRef9, useState as useState19, useEffect as useEffect14 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -4946,7 +4955,7 @@ function useFocusWithin({
   onFocus
 } = {}) {
   const ref = useRef9(null);
-  const [focused, _setFocused] = useState18(false);
+  const [focused, _setFocused] = useState19(false);
   const focusedRef = useRef9(false);
   const setFocused = (value) => {
     _setFocused(value);
@@ -4980,7 +4989,7 @@ function useFocusWithin({
 }
 
 // hooks/useMediaQuery.ts
-import { useState as useState19, useEffect as useEffect15, useRef as useRef10 } from "react";
+import { useState as useState20, useEffect as useEffect15, useRef as useRef10 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -5002,7 +5011,7 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState19(
+  const [matches, setMatches] = useState20(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef10();
@@ -5021,15 +5030,15 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // hooks/useScrollPosition.ts
-import { useState as useState20, useEffect as useEffect16 } from "react";
+import { useState as useState21, useEffect as useEffect16 } from "react";
 
 // hooks/useTable.ts
-import { useState as useState21, useEffect as useEffect17 } from "react";
+import { useState as useState22, useEffect as useEffect17 } from "react";
 
 // hooks/useTabs.ts
-import { useEffect as useEffect18, useState as useState22 } from "react";
+import { useEffect as useEffect18, useState as useState23 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState22(initialTab);
+  const [activeTab, setActiveTab] = useState23(initialTab);
   useEffect18(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
@@ -5052,10 +5061,10 @@ function useTabs(initialTab = "") {
 }
 
 // hooks/useMeasureDirty.ts
-import { useEffect as useEffect19, useRef as useRef12, useState as useState23 } from "react";
+import { useEffect as useEffect19, useRef as useRef12, useState as useState24 } from "react";
 var useMeasureDirty = (ref) => {
   const frame = useRef12(0);
-  const [rect, set] = useState23({
+  const [rect, set] = useState24({
     width: 0,
     height: 0,
     top: 0,
@@ -5063,7 +5072,7 @@ var useMeasureDirty = (ref) => {
     bottom: 0,
     right: 0
   });
-  const [observer] = useState23(
+  const [observer] = useState24(
     () => new ResizeObserver((entries) => {
       const entry = entries[0];
       if (entry) {
@@ -5213,12 +5222,12 @@ function useWindowEvent(type, listener, options) {
 }
 
 // hooks/useViewportSize.ts
-import { useCallback, useEffect as useEffect23, useState as useState24 } from "react";
+import { useCallback, useEffect as useEffect23, useState as useState25 } from "react";
 var eventListerOptions = {
   passive: true
 };
 function useViewportSize() {
-  const [windowSize, setWindowSize] = useState24({
+  const [windowSize, setWindowSize] = useState25({
     width: 0,
     height: 0
   });
@@ -5888,7 +5897,7 @@ var AppStores = (props) => {
 };
 
 // elements/badge/Badge.tsx
-import React48, { useEffect as useEffect26, useState as useState27, useRef as useRef16 } from "react";
+import React48, { useEffect as useEffect26, useState as useState28, useRef as useRef16 } from "react";
 var Badge = ({
   anchor,
   position = "right",
@@ -5896,7 +5905,7 @@ var Badge = ({
   text,
   className
 }) => {
-  const [badgePosition, setBadgePosition] = useState27(null);
+  const [badgePosition, setBadgePosition] = useState28(null);
   const indicatorRef = useRef16(null);
   const sizeStyles2 = {
     small: { top: 4, left: 6, right: 7, classes: "hawa-w-3 hawa-h-3" },
@@ -5965,7 +5974,7 @@ var BadgedComponent = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-import React49, { useState as useState28, useRef as useRef17 } from "react";
+import React49, { useState as useState29, useRef as useRef17 } from "react";
 
 // countries.ts
 var countries = [
@@ -7667,8 +7676,8 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
-  const [phoneNumber, setPhoneNumber] = useState28("");
-  const [countryCode, setCountryCode] = useState28(props.preferredCountry);
+  const [phoneNumber, setPhoneNumber] = useState29("");
+  const [countryCode, setCountryCode] = useState29(props.preferredCountry);
   const inputRef = useRef17(null);
   const handleInputChange = (e) => {
     console.log("test e ", e.target.value);
@@ -7876,7 +7885,7 @@ var StopPropagationWrapper = (props) => {
 
 // elements/colorPicker/ColorPicker.tsx
 import React52, {
-  useState as useState29,
+  useState as useState30,
   useEffect as useEffect28
 } from "react";
 var ColorPicker = ({
@@ -7889,7 +7898,7 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = useState29(props.color);
+  const [selectedColor, setSelectedColor] = useState30(props.color);
   useEffect28(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
@@ -8163,7 +8172,7 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-import React58, { useEffect as useEffect29, useState as useState30 } from "react";
+import React58, { useEffect as useEffect29, useState as useState31 } from "react";
 
 // icons/Emojis.tsx
 import React55 from "react";
@@ -8400,15 +8409,15 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = useState30("");
-  const [isInputFocused, setIsInputFocused] = useState30(false);
-  const [currentStr, setCurrentStr] = useState30(0);
-  const [passwordVisible, setPasswordVisible] = useState30(false);
-  const [lengthCriteriaMet, setLengthCriteriaMet] = useState30(false);
-  const [numberCriteriaMet, setNumberCriteriaMet] = useState30(false);
-  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = useState30(false);
-  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = useState30(false);
-  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = useState30(false);
+  const [inputValue, setInputValue] = useState31("");
+  const [isInputFocused, setIsInputFocused] = useState31(false);
+  const [currentStr, setCurrentStr] = useState31(0);
+  const [passwordVisible, setPasswordVisible] = useState31(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = useState31(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = useState31(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = useState31(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = useState31(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = useState31(false);
   useEffect29(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
@@ -8605,12 +8614,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-import React62, { useState as useState31, useEffect as useEffect30 } from "react";
+import React62, { useState as useState32, useEffect as useEffect30 } from "react";
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = useState31(0);
+  const [scrollPercentage, setScrollPercentage] = useState32(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -8645,7 +8654,7 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-import React63, { useState as useState32 } from "react";
+import React63, { useState as useState33 } from "react";
 import { Highlight, themes, Prism } from "prism-react-renderer";
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 __require("prismjs/components/prism-bash");
@@ -8677,7 +8686,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = useState32(0);
+  const [selectedTab, setSelectedTab] = useState33(0);
   const theme = themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -8805,7 +8814,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-import React64, { useEffect as useEffect31, useState as useState33 } from "react";
+import React64, { useEffect as useEffect31, useState as useState34 } from "react";
 import useEmblaCarousel2 from "embla-carousel-react";
 var Carousel = ({
   items,
@@ -8821,7 +8830,7 @@ var Carousel = ({
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = useState33(0);
+  const [selectedIndex, setSelectedIndex] = useState34(0);
   useEffect31(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
@@ -9135,14 +9144,14 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-import React68, { useRef as useRef18, useState as useState34 } from "react";
+import React68, { useRef as useRef18, useState as useState35 } from "react";
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = useState34(false);
+  const [closed, setClosed] = useState35(false);
   const popUpRef = useRef18(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
@@ -9209,7 +9218,7 @@ var DestroyableCard = ({
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-import React69, { useState as useState35 } from "react";
+import React69, { useState as useState36 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -9217,8 +9226,8 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = useState35(props.currentColorMode);
-  const [language, setLanguage] = useState35(props.currentLanguage);
+  const [color, setColor] = useState36(props.currentColorMode);
+  const [language, setLanguage] = useState36(props.currentLanguage);
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row hawa-justify-between",
     vertical: "hawa-flex hawa-flex-col hawa-items-center hawa-gap-2"
@@ -9582,7 +9591,7 @@ var Copyrights = (props) => {
 };
 
 // layout/navbar/Navbar.tsx
-import React74, { useState as useState36 } from "react";
+import React74, { useState as useState37 } from "react";
 
 // elements/collapsible/Collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -9598,7 +9607,7 @@ var Navbar = ({
   ...props
 }) => {
   var _a, _b;
-  const [isOpen, setIsOpen] = useState36(false);
+  const [isOpen, setIsOpen] = useState37(false);
   return /* @__PURE__ */ React74.createElement("nav", { className: "hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ React74.createElement(
     Collapsible,
     {
@@ -9702,7 +9711,7 @@ var Navbar = ({
 };
 
 // layout/appLayout/AppLayout.tsx
-import React75, { useEffect as useEffect32, useState as useState37 } from "react";
+import React75, { useEffect as useEffect32, useState as useState38 } from "react";
 import * as Dialog3 from "@radix-ui/react-dialog";
 var LOCAL_STORAGE_KEY2 = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
@@ -9739,16 +9748,16 @@ var AppLayout = ({
     }
   };
   const isRTL = direction === "rtl";
-  const [openedSidebarItem, setOpenedSidebarItem] = useState37("");
-  const [size, setSize] = useState37(
+  const [openedSidebarItem, setOpenedSidebarItem] = useState38("");
+  const [size, setSize] = useState38(
     typeof window !== "undefined" && window.innerWidth || 1200
   );
-  const [openSideMenu, setOpenSideMenu] = useState37(() => {
+  const [openSideMenu, setOpenSideMenu] = useState38(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
     return savedState ? JSON.parse(savedState) : false;
   });
   const [container, setContainer] = React75.useState(null);
-  const [keepDrawerOpen, setKeepDrawerOpen] = useState37(() => {
+  const [keepDrawerOpen, setKeepDrawerOpen] = useState38(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
     return savedState ? JSON.parse(savedState) : false;
   });
@@ -10363,9 +10372,9 @@ var MenubarShortcut = ({
 MenubarShortcut.displayname = "MenubarShortcut";
 
 // layout/appTabs/AppTabs.tsx
-import React78, { useState as useState38 } from "react";
+import React78, { useState as useState39 } from "react";
 var AppTabs = ({ tabs, className }) => {
-  const [selectedIndex, setSelectedIndex] = useState38(0);
+  const [selectedIndex, setSelectedIndex] = useState39(0);
   return /* @__PURE__ */ React78.createElement(
     "div",
     {
@@ -10407,7 +10416,7 @@ var AppTabs = ({ tabs, className }) => {
 };
 
 // layout/docsLayout/DocsLayout.tsx
-import React80, { useEffect as useEffect33, useRef as useRef20, useState as useState39 } from "react";
+import React80, { useEffect as useEffect33, useRef as useRef20, useState as useState40 } from "react";
 
 // layout/docsSidebar/DocsSidebar.tsx
 import React79 from "react";
@@ -10503,8 +10512,8 @@ var DocsLayout = ({
   if (typeof window == "undefined") {
     size = 1200;
   }
-  const [currentPage, setCurrentPage] = useState39("Introduction");
-  const [openSideMenu, setOpenSideMenu] = useState39(true);
+  const [currentPage, setCurrentPage] = useState40("Introduction");
+  const [openSideMenu, setOpenSideMenu] = useState40(true);
   useEffect33(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !openSideMenu) {
@@ -10775,7 +10784,7 @@ var AuthButtons = (props) => {
 
 // blocks/auth/LoginForm.tsx
 import React82 from "react";
-import { useState as useState40 } from "react";
+import { useState as useState41 } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
@@ -10792,7 +10801,7 @@ var LoginForm = ({
   ...props
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-  const [passwordVisible, setPasswordVisible] = useState40(false);
+  const [passwordVisible, setPasswordVisible] = useState41(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
     continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -11116,7 +11125,7 @@ var LoginForm = ({
 };
 
 // blocks/auth/RegisterForm.tsx
-import React83, { useState as useState41 } from "react";
+import React83, { useState as useState42 } from "react";
 import { Controller as Controller2, FormProvider, useForm as useForm2 } from "react-hook-form";
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import * as z2 from "zod";
@@ -11129,7 +11138,7 @@ var RegisterForm = ({
   ...props
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const [passwordVisible, setPasswordVisible] = useState41(false);
+  const [passwordVisible, setPasswordVisible] = useState42(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
     continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -11752,7 +11761,7 @@ var ResetPasswordForm = ({
 };
 
 // blocks/auth/CodeConfirmation.tsx
-import React88, { useEffect as useEffect34, useState as useState42 } from "react";
+import React88, { useEffect as useEffect34, useState as useState43 } from "react";
 import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import * as z5 from "zod";
@@ -11767,9 +11776,9 @@ var CodeConfirmation = ({
   const { handleSubmit, control, formState, setValue } = useForm5({
     resolver: zodResolver5(formSchema)
   });
-  const [resendTimer, setResendTimer] = useState42(null);
-  const [remainingTime, setRemainingTime] = useState42(0);
-  const [showResendTimer, setShowResendTimer] = useState42(false);
+  const [resendTimer, setResendTimer] = useState43(null);
+  const [remainingTime, setRemainingTime] = useState43(0);
+  const [showResendTimer, setShowResendTimer] = useState43(false);
   const startResendTimer = () => {
     if (resendTimer !== null) {
       clearInterval(resendTimer);
@@ -11867,7 +11876,7 @@ var CodeConfirmation = ({
 };
 
 // blocks/feedback/UserReferralSource.tsx
-import React89, { useRef as useRef21, useState as useState43 } from "react";
+import React89, { useRef as useRef21, useState as useState44 } 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";
@@ -11877,7 +11886,7 @@ var UserReferralSource = ({
   ...props
 }) => {
   var _a, _b;
-  const [closed, setClosed] = useState43(false);
+  const [closed, setClosed] = useState44(false);
   const popUpRef = useRef21(null);
   const formSchema = z6.object({
     source: z6.string({ required_error: (_a = props.texts) == null ? void 0 : _a.pleaseSelectOption }),
@@ -12025,15 +12034,15 @@ var UserReferralSource = ({
 };
 
 // blocks/feedback/FeedbackRating.tsx
-import React90, { useEffect as useEffect35, useRef as useRef22, useState as useState44 } from "react";
+import React90, { useEffect as useEffect35, useRef as useRef22, useState as useState45 } from "react";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
 }) => {
-  const [closed, setClosed] = useState44(false);
-  const [answered, setAnswered] = useState44(false);
-  const [clickedOption, setClickedOption] = useState44(null);
-  const [closingTimer, setClosingTimer] = useState44(5);
+  const [closed, setClosed] = useState45(false);
+  const [answered, setAnswered] = useState45(false);
+  const [clickedOption, setClickedOption] = useState45(null);
+  const [closingTimer, setClosingTimer] = useState45(5);
   const popUpRef = useRef22(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4",
@@ -12139,12 +12148,12 @@ var FeedbackRating = ({
 };
 
 // blocks/feedback/FeedbackEmoji.tsx
-import React91, { useState as useState45 } from "react";
+import React91, { useState as useState46 } from "react";
 var FeedbackEmoji = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState45(null);
-  const [loadingSubmit, setLoadingSubmit] = useState45(false);
-  const [feedbackText, setFeedbackText] = useState45("");
-  const [helperText, setHelperText] = useState45(false);
+  const [selectedEmoji, setSelectedEmoji] = useState46(null);
+  const [loadingSubmit, setLoadingSubmit] = useState46(false);
+  const [feedbackText, setFeedbackText] = useState46("");
+  const [helperText, setHelperText] = useState46(false);
   let emojis = [
     { icon: /* @__PURE__ */ React91.createElement(VeryGoodEmoji, null), value: "very-good" },
     { icon: /* @__PURE__ */ React91.createElement(GoodEmoji, null), value: "good" },
@@ -12729,9 +12738,9 @@ var ContactForm = ({
 import React106 from "react";
 
 // blocks/cards/ActionCard.tsx
-import React101, { useState as useState46 } from "react";
+import React101, { useState as useState47 } from "react";
 var ActionCard = (props) => {
-  const [hovered, setHovered] = useState46(false);
+  const [hovered, setHovered] = useState47(false);
   return /* @__PURE__ */ React101.createElement("div", { className: "hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-gap-1" }, /* @__PURE__ */ React101.createElement(
     "div",
     {
@@ -12768,13 +12777,13 @@ var ActionCard = (props) => {
 };
 
 // blocks/cards/AdCard.tsx
-import React102, { useState as useState47, useEffect as useEffect36, useRef as useRef23 } from "react";
+import React102, { useState as useState48, useEffect as useEffect36, useRef as useRef23 } from "react";
 var AdCard = ({
   orientation = "vertical",
   ...props
 }) => {
   const adRef = useRef23(null);
-  const [closed, setClosed] = useState47(false);
+  const [closed, setClosed] = useState48(false);
   let duration = 0;
   useEffect36(() => {
     if (duration) {
@@ -12964,7 +12973,7 @@ var PricingCard = ({
 };
 
 // blocks/cards/ItemCard.tsx
-import React104, { useEffect as useEffect37, useState as useState48 } from "react";
+import React104, { useEffect as useEffect37, useState as useState49 } from "react";
 var ItemCard = ({
   actions,
   counts,
@@ -12993,7 +13002,7 @@ var ItemCard = ({
     )
   };
   let headerActionsButtonStyle = "hawa-inline-block hawa-rounded hawa-p-1 hawa-text-sm hawa-text-gray-500 hover:hawa-bg-gray-100 focus:hawa-outline-none focus:hawa-ring-4 focus:hawa-ring-gray-200 dark:hawa-text-gray-400 dark:hover:hawa-bg-gray-700 dark:focus:hawa-ring-gray-700";
-  const [openActionHeader, setOpenActionHeader] = useState48(false);
+  const [openActionHeader, setOpenActionHeader] = useState49(false);
   function handleOpenActionHeader(e) {
     e.stopPropagation();
     setOpenActionHeader(!openActionHeader);
@@ -13325,9 +13334,9 @@ var ComparingPlans = (props) => {
 };
 
 // blocks/pricing/HorizontalPricing.tsx
-import React108, { useState as useState49 } from "react";
+import React108, { useState as useState50 } from "react";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState49("");
+  const [selectedCard, setSelectedCard] = useState50("");
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },