@sikka/hawa 0.37.2-next → 0.38.0-next

package/dist/index.mjs

@@ -2538,16 +2538,7 @@ var Input = forwardRef12(
             inputProps == null ? void 0 : inputProps.className
           )
         }
-      )), !forceHideHelperText && /* @__PURE__ */ React21.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ), !props.disabled && forceHideHelperText && /* @__PURE__ */ React21.createElement(
+      )), !forceHideHelperText && /* @__PURE__ */ React21.createElement(HelperText, { helperText: props.helperText }), !props.disabled && forceHideHelperText && /* @__PURE__ */ React21.createElement(
         "div",
         {
           className: cn(
@@ -3362,16 +3353,7 @@ var Radio = forwardRef15(
               opt.label
             );
           })
-        ), !forceHideHelperText && /* @__PURE__ */ React26.createElement(
-          "p",
-          {
-            className: cn(
-              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-            )
-          },
-          props.helperText
-        ));
+        ), !forceHideHelperText && /* @__PURE__ */ React26.createElement(HelperText, { helperText: props.helperText }));
       case "bordered":
         return /* @__PURE__ */ React26.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React26.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React26.createElement(
           "div",
@@ -3460,16 +3442,7 @@ var Radio = forwardRef15(
             },
             opt.label
           )
-        ))), /* @__PURE__ */ React26.createElement(
-          "p",
-          {
-            className: cn(
-              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-            )
-          },
-          props.helperText
-        ));
+        ))), /* @__PURE__ */ React26.createElement(HelperText, { helperText: props.helperText }));
     }
   }
 );
@@ -3739,16 +3712,7 @@ var Combobox = React28.forwardRef(
           },
           /* @__PURE__ */ React28.createElement("path", { d: "m6 9 6 6 6-6" })
         )
-      ), /* @__PURE__ */ React28.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ))), /* @__PURE__ */ React28.createElement(
+      ), /* @__PURE__ */ React28.createElement(HelperText, { helperText: props.helperText }))), /* @__PURE__ */ React28.createElement(
         PopoverContent,
         {
           sideOffset: 0,
@@ -3872,16 +3836,7 @@ var Textarea = React29.forwardRef(
           ref
         }
       ),
-      /* @__PURE__ */ React29.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React29.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ), showCount && countPosition === "bottom" && /* @__PURE__ */ React29.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
+      /* @__PURE__ */ React29.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React29.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React29.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
     );
   }
 );
@@ -4807,7 +4762,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
       "div",
       {
         className: cn(
-          "hawa-pointer-events-none hawa-absolute hawa-bg-background/  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
           showLeftFade ? "hawa-block" : "hawa-hidden"
         )
       }
@@ -4816,7 +4771,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
       "div",
       {
         className: cn(
-          "hawa-pointer-events-none hawa-absolute hawa-bg-background/ hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
           showRightFade ? "hawa-block" : "hawa-hidden"
         )
       }
@@ -5196,16 +5151,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ React43.createElement(
-      "p",
-      {
-        className: cn(
-          "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-          props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-        )
-      },
-      props.helperText
-    )
+    !props.hideHelperText && /* @__PURE__ */ React43.createElement(HelperText, { helperText: props.helperText })
   );
 };
 
@@ -7346,99 +7292,149 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ React50.createElement(
-    "p",
-    {
-      className: cn(
-        "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-        props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-      )
-    },
-    props.helperText
-  ));
+  ))), /* @__PURE__ */ React50.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/pinInput/PinInput.tsx
-import React51, { useEffect as useEffect27, useState as useState29 } from "react";
-var PinInput = ({
-  label,
-  icon,
-  digits,
-  width = "normal",
-  getPins,
-  inputProps,
-  ...props
-}) => {
-  const [pin, setPin] = useState29(Array.from(Array(digits)));
-  const handleKeyDown = (e, index) => {
-    let backTo = 0;
-    if (e.key === "Backspace") {
-      e.target.value.length === 0 ? backTo = index - 1 : backTo = index;
-      const previousInput = document.getElementById(`input-${backTo}`);
-      previousInput == null ? void 0 : previousInput.focus();
-    }
-  };
-  useEffect27(() => {
-    let unfilled = pin.includes(void 0);
-    if (!unfilled && getPins) {
-      getPins(pin);
-    }
-  });
-  const handleChange = (e, index) => {
-    if (!/^\d*$/.test(e.target.value)) {
-      const newPin = [...pin];
-      newPin[index] = "";
-      setPin(newPin);
-      return;
-    } else {
-      const newPin = [...pin];
-      newPin[index] = e.target.value;
-      setPin(newPin);
-      if (e.target.value.length === 1) {
-        const nextInput = document.getElementById(`input-${index + 1}`);
-        nextInput == null ? void 0 : nextInput.focus();
-      } else if (e.target.value.length === 0) {
-        const previousInput = document.getElementById(`input-${index - 1}`);
-        previousInput == null ? void 0 : previousInput.focus();
-      }
-    }
-  };
-  return /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React51.createElement(
-    "div",
-    {
-      className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
-      dir: "ltr"
-    },
-    pin.map((value, index) => /* @__PURE__ */ React51.createElement(
-      "input",
+import * as React51 from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+import { forwardRef as forwardRef25, createElement as createElement25 } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string9) => string9.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && array.indexOf(className) === index;
+}).join(" ");
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+import { forwardRef as forwardRef24, createElement as createElement24 } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = forwardRef24(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => {
+    return createElement24(
+      "svg",
       {
-        key: index,
-        type: "text",
-        maxLength: 1,
-        value,
-        inputMode: "numeric",
-        id: `input-${index}`,
-        pattern: "[0-9]*",
-        className: cn(
-          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center placeholder:hawa-text-muted-foreground",
-          width === "full" ? "hawa-w-full" : "hawa-w-10"
-        ),
-        onChange: (e) => handleChange(e, index),
-        onKeyDown: (e) => handleKeyDown(e, index),
-        onFocus: (e) => e.target.select(),
-        ...inputProps
-      }
-    ))
-  ), /* @__PURE__ */ React51.createElement(
-    "p",
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => createElement24(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef25(
+    ({ className, ...props }, ref) => createElement25(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      ...props
+    })
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
+var Dot = createLucideIcon("Dot", [
+  ["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
+]);
+
+// elements/pinInput/PinInput.tsx
+var PinInputRoot = React51.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React51.createElement(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "hawa-flex hawa-items-center hawa-gap-2 has-[:disabled]:hawa-opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:hawa-cursor-not-allowed", className),
+    ...props
+  }
+));
+PinInputRoot.displayName = "PinInputRoot";
+var PinInputGroup = React51.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React51.createElement(
+  "div",
+  {
+    ref,
+    className: cn("hawa-flex hawa-items-center", className),
+    ...props
+  }
+));
+PinInputGroup.displayName = "PinInputGroup";
+var PinInputSlot = React51.forwardRef(({ index, className, ...props }, ref) => {
+  const pinInputContext = React51.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
+  return /* @__PURE__ */ React51.createElement(
+    "div",
     {
+      ref,
       className: cn(
-        "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-        props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-      )
+        "hawa-border-input hawa-relative hawa-flex hawa-h-10 hawa-w-10 hawa-items-center hawa-justify-center hawa-border-y hawa-border-r hawa-text-sm hawa-transition-all first:hawa-rounded-l-md first:hawa-border-l last:hawa-rounded-r-md",
+        isActive && "hawa-ring-ring hawa-ring-offset-background hawa-z-10 hawa-ring-2",
+        className
+      ),
+      ...props
     },
-    props.helperText
-  ));
+    char,
+    hasFakeCaret && /* @__PURE__ */ React51.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React51.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
+  );
+});
+PinInputSlot.displayName = "PinInputSlot";
+var PinInputSeperator = React51.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React51.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React51.createElement(Dot, null)));
+PinInputSeperator.displayName = "PinInputSeperator";
+var PinInput = ({
+  separatorPosition = 0,
+  ...props
+}) => {
+  const maxLength = props.maxLength || 6;
+  const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
+  const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
+  const secondGroupLength = maxLength - firstGroupLength;
+  return /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React51.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React51.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React51.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React51.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React51.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React51.createElement(
+    PinInputSlot,
+    {
+      key: index + firstGroupLength,
+      index: index + firstGroupLength,
+      className: "hawa-w-full"
+    }
+  )))), /* @__PURE__ */ React51.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/stopPropagationWrapper/StopPropagationWrapper.tsx
@@ -7452,8 +7448,8 @@ var StopPropagationWrapper = (props) => {
 
 // elements/colorPicker/ColorPicker.tsx
 import React53, {
-  useState as useState30,
-  useEffect as useEffect28
+  useState as useState29,
+  useEffect as useEffect27
 } from "react";
 var ColorPicker = ({
   containerProps,
@@ -7465,8 +7461,8 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = useState30(props.color);
-  useEffect28(() => {
+  const [selectedColor, setSelectedColor] = useState29(props.color);
+  useEffect27(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -7527,16 +7523,7 @@ var ColorPicker = ({
       },
       ...textInputProps
     }
-  ))), !forceHideHelperText && /* @__PURE__ */ React53.createElement(
-    "p",
-    {
-      className: cn(
-        "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-        props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-      )
-    },
-    props.helperText
-  ));
+  ))), !forceHideHelperText && /* @__PURE__ */ React53.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/progressCircle/ProgressCircle.tsx
@@ -7748,7 +7735,7 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-import React59, { useEffect as useEffect29, useState as useState31 } from "react";
+import React59, { useEffect as useEffect28, useState as useState30 } from "react";
 
 // icons/Emojis.tsx
 import React56 from "react";
@@ -7985,16 +7972,16 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  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 [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);
+  useEffect28(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -8195,12 +8182,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-import React63, { useState as useState32, useEffect as useEffect30 } from "react";
+import React63, { useState as useState31, useEffect as useEffect29 } from "react";
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = useState32(0);
+  const [scrollPercentage, setScrollPercentage] = useState31(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -8211,7 +8198,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  useEffect30(() => {
+  useEffect29(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -8236,7 +8223,7 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-import React64, { useState as useState33 } from "react";
+import React64, { useState as useState32 } from "react";
 import { Highlight, themes, Prism } from "prism-react-renderer";
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 __require("prismjs/components/prism-bash");
@@ -8268,7 +8255,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = useState33(0);
+  const [selectedTab, setSelectedTab] = useState32(0);
   const theme = themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -8396,7 +8383,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-import React65, { useEffect as useEffect31, useState as useState34 } from "react";
+import React65, { useEffect as useEffect30, useState as useState33 } from "react";
 import useEmblaCarousel2 from "embla-carousel-react";
 var Carousel = ({
   items,
@@ -8412,8 +8399,8 @@ var Carousel = ({
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = useState34(0);
-  useEffect31(() => {
+  const [selectedIndex, setSelectedIndex] = useState33(0);
+  useEffect30(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -8423,7 +8410,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  useEffect31(() => {
+  useEffect30(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -8727,14 +8714,14 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-import React69, { useRef as useRef19, useState as useState35 } from "react";
+import React69, { useRef as useRef19, useState as useState34 } from "react";
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = useState35(false);
+  const [closed, setClosed] = useState34(false);
   const popUpRef = useRef19(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
@@ -8801,7 +8788,7 @@ var DestroyableCard = ({
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-import React70, { useState as useState36 } from "react";
+import React70, { useState as useState35 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -8809,8 +8796,8 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = useState36(props.currentColorMode);
-  const [language, setLanguage] = useState36(props.currentLanguage);
+  const [color, setColor] = useState35(props.currentColorMode);
+  const [language, setLanguage] = useState35(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"
@@ -9151,7 +9138,7 @@ var Copyrights = (props) => {
 };
 
 // layout/navbar/Navbar.tsx
-import React75, { useState as useState37 } from "react";
+import React75, { useState as useState36 } from "react";
 
 // elements/collapsible/Collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -9167,7 +9154,7 @@ var Navbar = ({
   ...props
 }) => {
   var _a, _b;
-  const [isOpen, setIsOpen] = useState37(false);
+  const [isOpen, setIsOpen] = useState36(false);
   return /* @__PURE__ */ React75.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ React75.createElement(
     Collapsible,
     {
@@ -9271,7 +9258,7 @@ var Navbar = ({
 };
 
 // layout/appLayout/AppLayout.tsx
-import React76, { useEffect as useEffect32, useState as useState38 } from "react";
+import React76, { useEffect as useEffect31, useState as useState37 } from "react";
 import * as Dialog3 from "@radix-ui/react-dialog";
 var LOCAL_STORAGE_KEY2 = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
@@ -9290,7 +9277,7 @@ var AppLayout = ({
   ...props
 }) => {
   var _a, _b;
-  useEffect32(() => {
+  useEffect31(() => {
     let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY2);
     if (isDrawerOpen === null) {
       localStorage.setItem(LOCAL_STORAGE_KEY2, JSON.stringify(false));
@@ -9307,16 +9294,16 @@ var AppLayout = ({
     }
   };
   const isRTL = direction === "rtl";
-  const [openedSidebarItem, setOpenedSidebarItem] = useState38("");
-  const [size, setSize] = useState38(
+  const [openedSidebarItem, setOpenedSidebarItem] = useState37("");
+  const [size, setSize] = useState37(
     typeof window !== "undefined" && window.innerWidth || 1200
   );
-  const [openSideMenu, setOpenSideMenu] = useState38(() => {
+  const [openSideMenu, setOpenSideMenu] = useState37(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
     return savedState ? JSON.parse(savedState) : false;
   });
   const [container, setContainer] = React76.useState(null);
-  const [keepDrawerOpen, setKeepDrawerOpen] = useState38(() => {
+  const [keepDrawerOpen, setKeepDrawerOpen] = useState37(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
     return savedState ? JSON.parse(savedState) : false;
   });
@@ -9329,7 +9316,7 @@ var AppLayout = ({
     }
   };
   const ref = useClickOutside(handleClickOutside);
-  useEffect32(() => {
+  useEffect31(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
@@ -9346,13 +9333,13 @@ var AppLayout = ({
       };
     }
   }, []);
-  useEffect32(() => {
+  useEffect31(() => {
     setKeepDrawerOpen(() => {
       const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
       return savedState ? JSON.parse(savedState) : true;
     });
   }, [setKeepDrawerOpen]);
-  useEffect32(() => {
+  useEffect31(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
     } else {
@@ -9921,9 +9908,9 @@ var MenubarShortcut = ({
 MenubarShortcut.displayname = "MenubarShortcut";
 
 // layout/appTabs/AppTabs.tsx
-import React79, { useState as useState39 } from "react";
+import React79, { useState as useState38 } from "react";
 var AppTabs = ({ tabs, className }) => {
-  const [selectedIndex, setSelectedIndex] = useState39(0);
+  const [selectedIndex, setSelectedIndex] = useState38(0);
   return /* @__PURE__ */ React79.createElement(
     "div",
     {
@@ -9965,7 +9952,7 @@ var AppTabs = ({ tabs, className }) => {
 };
 
 // layout/docsLayout/DocsLayout.tsx
-import React81, { useEffect as useEffect33, useRef as useRef21, useState as useState40 } from "react";
+import React81, { useEffect as useEffect32, useRef as useRef21, useState as useState39 } from "react";
 
 // layout/docsSidebar/DocsSidebar.tsx
 import React80 from "react";
@@ -10061,9 +10048,9 @@ var DocsLayout = ({
   if (typeof window == "undefined") {
     size = 1200;
   }
-  const [currentPage, setCurrentPage] = useState40("Introduction");
-  const [openSideMenu, setOpenSideMenu] = useState40(true);
-  useEffect33(() => {
+  const [currentPage, setCurrentPage] = useState39("Introduction");
+  const [openSideMenu, setOpenSideMenu] = useState39(true);
+  useEffect32(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !openSideMenu) {
         setOpenSideMenu(false);
@@ -10074,7 +10061,7 @@ var DocsLayout = ({
       document.removeEventListener("click", handleClickOutside, true);
     };
   }, [openSideMenu]);
-  useEffect33(() => {
+  useEffect32(() => {
     const handleResize = () => {
       setOpenSideMenu(window.innerWidth > 600 ? true : false);
     };
@@ -10091,7 +10078,7 @@ var DocsLayout = ({
       setCurrentPage(entry.target.id);
     }
   };
-  useEffect33(() => {
+  useEffect32(() => {
     observerRef.current = new IntersectionObserver(handleIntersection, {
       threshold: 0.5
       // Adjust threshold as needed to determine when a section is in view
@@ -10333,7 +10320,7 @@ var AuthButtons = (props) => {
 
 // blocks/auth/LoginForm.tsx
 import React83 from "react";
-import { useState as useState41 } from "react";
+import { useState as useState40 } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
@@ -10350,7 +10337,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] = useState41(false);
+  const [passwordVisible, setPasswordVisible] = useState40(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
     continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -10669,7 +10656,7 @@ var LoginForm = ({
 };
 
 // blocks/auth/RegisterForm.tsx
-import React84, { useState as useState42 } from "react";
+import React84, { useState as useState41 } 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";
@@ -10681,7 +10668,7 @@ var RegisterForm = ({
   ...props
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const [passwordVisible, setPasswordVisible] = useState42(false);
+  const [passwordVisible, setPasswordVisible] = useState41(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
     continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -11302,21 +11289,24 @@ var ResetPasswordForm = ({
 };
 
 // blocks/auth/CodeConfirmation.tsx
-import React89, { useEffect as useEffect34, useState as useState43 } from "react";
+import React89, { useEffect as useEffect33, useState as useState42 } 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";
-var CodeConfirmation = (props) => {
+var CodeConfirmation = ({
+  codeLength = 6,
+  ...props
+}) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const formSchema = z5.object({
-    otp_code: z5.string({ required_error: (_a = props.texts) == null ? void 0 : _a.codeRequiredText }).min(6, { message: (_b = props.texts) == null ? void 0 : _b.codeTooShort })
+    otp_code: z5.string({ required_error: (_a = props.texts) == null ? void 0 : _a.codeRequiredText }).min(codeLength, { message: (_b = props.texts) == null ? void 0 : _b.codeTooShort })
   });
   const { handleSubmit, control, formState, setValue } = useForm5({
     resolver: zodResolver5(formSchema)
   });
-  const [resendTimer, setResendTimer] = useState43(null);
-  const [remainingTime, setRemainingTime] = useState43(0);
-  const [showResendTimer, setShowResendTimer] = useState43(false);
+  const [resendTimer, setResendTimer] = useState42(null);
+  const [remainingTime, setRemainingTime] = useState42(0);
+  const [showResendTimer, setShowResendTimer] = useState42(false);
   const startResendTimer = () => {
     if (resendTimer !== null) {
       clearInterval(resendTimer);
@@ -11338,7 +11328,7 @@ var CodeConfirmation = (props) => {
     }, 1e3);
     setResendTimer(newTimer);
   };
-  useEffect34(() => {
+  useEffect33(() => {
     return () => {
       if (resendTimer !== null) {
         clearInterval(resendTimer);
@@ -11376,10 +11366,9 @@ var CodeConfirmation = (props) => {
           return /* @__PURE__ */ React89.createElement(
             PinInput,
             {
-              width: "full",
-              digits: 6,
-              getPins: (e) => setValue("otp_code", e.join("")),
-              helperText: (_a2 = formState.errors.otp_code) == null ? void 0 : _a2.message
+              maxLength: codeLength,
+              helperText: (_a2 = formState.errors.otp_code) == null ? void 0 : _a2.message,
+              ...field
             }
           );
         }
@@ -11401,7 +11390,7 @@ var CodeConfirmation = (props) => {
 };
 
 // blocks/feedback/UserReferralSource.tsx
-import React90, { useRef as useRef22, useState as useState44 } from "react";
+import React90, { useRef as useRef22, useState as useState43 } 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";
@@ -11411,7 +11400,7 @@ var UserReferralSource = ({
   ...props
 }) => {
   var _a, _b;
-  const [closed, setClosed] = useState44(false);
+  const [closed, setClosed] = useState43(false);
   const popUpRef = useRef22(null);
   const formSchema = z6.object({
     source: z6.string({ required_error: (_a = props.texts) == null ? void 0 : _a.pleaseSelectOption }),
@@ -11559,21 +11548,21 @@ var UserReferralSource = ({
 };
 
 // blocks/feedback/FeedbackRating.tsx
-import React91, { useEffect as useEffect35, useRef as useRef23, useState as useState45 } from "react";
+import React91, { useEffect as useEffect34, useRef as useRef23, useState as useState44 } from "react";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
 }) => {
-  const [closed, setClosed] = useState45(false);
-  const [answered, setAnswered] = useState45(false);
-  const [clickedOption, setClickedOption] = useState45(null);
-  const [closingTimer, setClosingTimer] = useState45(5);
+  const [closed, setClosed] = useState44(false);
+  const [answered, setAnswered] = useState44(false);
+  const [clickedOption, setClickedOption] = useState44(null);
+  const [closingTimer, setClosingTimer] = useState44(5);
   const popUpRef = useRef23(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
   };
-  useEffect35(() => {
+  useEffect34(() => {
     const timeoutHide = setTimeout(() => {
       if (closingTimer >= 0) {
         setClosingTimer(closingTimer - 1);
@@ -11673,12 +11662,12 @@ var FeedbackRating = ({
 };
 
 // blocks/feedback/FeedbackEmoji.tsx
-import React92, { useState as useState46 } from "react";
+import React92, { useState as useState45 } from "react";
 var FeedbackEmoji = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState46(null);
-  const [loadingSubmit, setLoadingSubmit] = useState46(false);
-  const [feedbackText, setFeedbackText] = useState46("");
-  const [helperText, setHelperText] = useState46(false);
+  const [selectedEmoji, setSelectedEmoji] = useState45(null);
+  const [loadingSubmit, setLoadingSubmit] = useState45(false);
+  const [feedbackText, setFeedbackText] = useState45("");
+  const [helperText, setHelperText] = useState45(false);
   let emojis = [
     { icon: /* @__PURE__ */ React92.createElement(VeryGoodEmoji, null), value: "very-good" },
     { icon: /* @__PURE__ */ React92.createElement(GoodEmoji, null), value: "good" },
@@ -12242,9 +12231,9 @@ var ContactForm = ({
 import React107 from "react";
 
 // blocks/cards/ActionCard.tsx
-import React102, { useState as useState47 } from "react";
+import React102, { useState as useState46 } from "react";
 var ActionCard = (props) => {
-  const [hovered, setHovered] = useState47(false);
+  const [hovered, setHovered] = useState46(false);
   return /* @__PURE__ */ React102.createElement("div", { className: "hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-gap-1" }, /* @__PURE__ */ React102.createElement(
     "div",
     {
@@ -12281,15 +12270,15 @@ var ActionCard = (props) => {
 };
 
 // blocks/cards/AdCard.tsx
-import React103, { useState as useState48, useEffect as useEffect36, useRef as useRef24 } from "react";
+import React103, { useState as useState47, useEffect as useEffect35, useRef as useRef24 } from "react";
 var AdCard = ({
   orientation = "vertical",
   ...props
 }) => {
   const adRef = useRef24(null);
-  const [closed, setClosed] = useState48(false);
+  const [closed, setClosed] = useState47(false);
   let duration = 0;
-  useEffect36(() => {
+  useEffect35(() => {
     if (duration) {
       const timeoutHide = setTimeout(() => {
         setClosed(true);
@@ -12477,7 +12466,7 @@ var PricingCard = ({
 };
 
 // blocks/cards/ItemCard.tsx
-import React105, { useEffect as useEffect37, useState as useState49 } from "react";
+import React105, { useEffect as useEffect36, useState as useState48 } from "react";
 var ItemCard = ({
   actions,
   counts,
@@ -12506,12 +12495,12 @@ 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] = useState49(false);
+  const [openActionHeader, setOpenActionHeader] = useState48(false);
   function handleOpenActionHeader(e) {
     e.stopPropagation();
     setOpenActionHeader(!openActionHeader);
   }
-  useEffect37(() => {
+  useEffect36(() => {
     window.onclick = () => {
       if (openActionHeader) {
         setOpenActionHeader(false);
@@ -12838,9 +12827,9 @@ var ComparingPlans = (props) => {
 };
 
 // blocks/pricing/HorizontalPricing.tsx
-import React109, { useState as useState50 } from "react";
+import React109, { useState as useState49 } from "react";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState50("");
+  const [selectedCard, setSelectedCard] = useState49("");
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
@@ -13089,6 +13078,10 @@ export {
   PhoneInput,
   PhoneMockup,
   PinInput,
+  PinInputGroup,
+  PinInputRoot,
+  PinInputSeperator,
+  PinInputSlot,
   Popover,
   PopoverContent,
   PopoverPortal,
@@ -13172,3 +13165,53 @@ export {
   useToast,
   useWindowSize
 };
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/defaultAttributes.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/Icon.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/createLucideIcon.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/dot.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/