@sikka/hawa 0.37.1-next → 0.38.0-next

package/dist/elements/index.js

@@ -122,6 +122,10 @@ __export(elements_exports, {
   PhoneInput: () => PhoneInput,
   PhoneMockup: () => PhoneMockup,
   PinInput: () => PinInput,
+  PinInputGroup: () => PinInputGroup,
+  PinInputRoot: () => PinInputRoot,
+  PinInputSeperator: () => PinInputSeperator,
+  PinInputSlot: () => PinInputSlot,
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
   PopoverPortal: () => PopoverPortal,
@@ -2702,16 +2706,7 @@ var Input = (0, import_react11.forwardRef)(
             inputProps == null ? void 0 : inputProps.className
           )
         }
-      )), !forceHideHelperText && /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement(
+      )), !forceHideHelperText && /* @__PURE__ */ import_react11.default.createElement(HelperText, { helperText: props.helperText }), !props.disabled && forceHideHelperText && /* @__PURE__ */ import_react11.default.createElement(
         "div",
         {
           className: cn(
@@ -3526,16 +3521,7 @@ var Radio = (0, import_react13.forwardRef)(
               opt.label
             );
           })
-        ), !forceHideHelperText && /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText }));
       case "bordered":
         return /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react13.default.createElement(
           "div",
@@ -3624,16 +3610,7 @@ var Radio = (0, import_react13.forwardRef)(
             },
             opt.label
           )
-        ))), /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText }));
     }
   }
 );
@@ -3760,7 +3737,12 @@ var CommandShortcut = ({
     }
   );
 };
-var FullCommand = ({ items, direction = "ltr", texts }) => {
+var FullCommand = ({
+  items,
+  direction = "ltr",
+  texts,
+  onActionClick
+}) => {
   return /* @__PURE__ */ React27.createElement(
     Command,
     {
@@ -3776,7 +3758,20 @@ var FullCommand = ({ items, direction = "ltr", texts }) => {
     /* @__PURE__ */ React27.createElement(CommandList, null, /* @__PURE__ */ React27.createElement(CommandEmpty, null, (texts == null ? void 0 : texts.emptyText) || "No results found."), items.map((item, index) => {
       var _a;
       if (item.type === "group") {
-        return /* @__PURE__ */ React27.createElement(CommandGroup, { heading: item.heading, key: index }, (_a = item.items) == null ? void 0 : _a.map((subItem, subIndex) => /* @__PURE__ */ React27.createElement(CommandItem, { key: subIndex, onSelect: subItem.action }, /* @__PURE__ */ React27.createElement(subItem.icon, { className: "hawa-icon hawa-me-2" }), /* @__PURE__ */ React27.createElement("span", null, subItem.text), subItem.shortcut && /* @__PURE__ */ React27.createElement(CommandShortcut, null, subItem.shortcut))));
+        return /* @__PURE__ */ React27.createElement(CommandGroup, { heading: item.heading, key: index }, (_a = item.items) == null ? void 0 : _a.map((subItem, subIndex) => /* @__PURE__ */ React27.createElement(
+          CommandItem,
+          {
+            key: subIndex,
+            onSelect: () => {
+              if (onActionClick)
+                onActionClick();
+              subItem.action();
+            }
+          },
+          /* @__PURE__ */ React27.createElement(subItem.icon, { className: "hawa-icon hawa-me-2" }),
+          /* @__PURE__ */ React27.createElement("span", null, subItem.label),
+          subItem.shortcut && /* @__PURE__ */ React27.createElement(CommandShortcut, null, subItem.shortcut)
+        )));
       } else if (item.type === "separator") {
         return /* @__PURE__ */ React27.createElement(CommandSeparator, { key: index });
       }
@@ -3784,14 +3779,18 @@ var FullCommand = ({ items, direction = "ltr", texts }) => {
     }))
   );
 };
-var AppCommand = ({ commandProps, dialogProps }) => {
+var AppCommand = ({
+  commandProps,
+  dialogProps,
+  onActionClick
+}) => {
   return /* @__PURE__ */ React27.createElement(import_react_dialog.Dialog, { ...dialogProps }, /* @__PURE__ */ React27.createElement(
     DialogContent,
     {
       hideCloseButton: true,
       className: "hawa-overflow-hidden !hawa-p-0 hawa-shadow-l "
     },
-    /* @__PURE__ */ React27.createElement(FullCommand, { ...commandProps })
+    /* @__PURE__ */ React27.createElement(FullCommand, { ...commandProps, onActionClick })
   ));
 };
 CommandShortcut.displayName = "CommandShortcut";
@@ -3881,16 +3880,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,
@@ -4014,16 +4004,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))
     );
   }
 );
@@ -4527,7 +4508,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"
         )
       }
@@ -4536,7 +4517,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"
         )
       }
@@ -4916,16 +4897,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ import_react33.default.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__ */ import_react33.default.createElement(HelperText, { helperText: props.helperText })
   );
 };
 
@@ -7066,112 +7038,162 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ import_react37.default.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__ */ import_react37.default.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/pinInput/PinInput.tsx
-var import_react38 = __toESM(require("react"));
-var PinInput = ({
-  label,
-  icon,
-  digits,
-  width = "normal",
-  getPins,
-  inputProps,
-  ...props
-}) => {
-  const [pin, setPin] = (0, import_react38.useState)(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();
-    }
-  };
-  (0, import_react38.useEffect)(() => {
-    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__ */ import_react38.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react38.default.createElement(
-    "div",
-    {
-      className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
-      dir: "ltr"
-    },
-    pin.map((value, index) => /* @__PURE__ */ import_react38.default.createElement(
-      "input",
+var React51 = __toESM(require("react"));
+var import_input_otp = require("input-otp");
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var import_react39 = require("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 = (string) => string.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
+var import_react38 = require("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 = (0, import_react38.forwardRef)(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => {
+    return (0, import_react38.createElement)(
+      "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__ */ import_react38.default.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]) => (0, import_react38.createElement)(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 = (0, import_react39.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react39.createElement)(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(
+  import_input_otp.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(import_input_otp.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
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var StopPropagationWrapper = (props) => {
   const handleClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ import_react39.default.createElement("div", { onClick: handleClick }, props.children);
+  return /* @__PURE__ */ import_react40.default.createElement("div", { onClick: handleClick }, props.children);
 };
 
 // elements/colorPicker/ColorPicker.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var ColorPicker = ({
   containerProps,
   colorPickerProps,
@@ -7182,8 +7204,8 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = (0, import_react40.useState)(props.color);
-  (0, import_react40.useEffect)(() => {
+  const [selectedColor, setSelectedColor] = (0, import_react41.useState)(props.color);
+  (0, import_react41.useEffect)(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -7200,13 +7222,13 @@ var ColorPicker = ({
       props.handleChange(e);
     }
   };
-  return /* @__PURE__ */ import_react40.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react40.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react40.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react40.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react41.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react41.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react41.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react41.default.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
       className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
     },
-    /* @__PURE__ */ import_react40.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(
       "input",
       {
         disabled: preview,
@@ -7225,7 +7247,7 @@ var ColorPicker = ({
         ...colorPickerProps
       }
     )
-  ), /* @__PURE__ */ import_react40.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react40.default.createElement(
+  ), /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react41.default.createElement(
     "input",
     {
       disabled: preview,
@@ -7244,20 +7266,11 @@ var ColorPicker = ({
       },
       ...textInputProps
     }
-  ))), !forceHideHelperText && /* @__PURE__ */ import_react40.default.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__ */ import_react41.default.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/progressCircle/ProgressCircle.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var size2config = {
   xs: { radius: 15, strokeWidth: 3 },
   sm: { radius: 19, strokeWidth: 4 },
@@ -7274,7 +7287,7 @@ function getLimitedValue(input) {
     return input;
   }
 }
-var ProgressCircle = import_react41.default.forwardRef((props, ref) => {
+var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
   const {
     value: inputValue,
     size = "md",
@@ -7294,7 +7307,7 @@ var ProgressCircle = import_react41.default.forwardRef((props, ref) => {
   const circumference = normalizedRadius * 2 * Math.PI;
   const strokeDashoffset = value / 100 * circumference;
   const offset = circumference - strokeDashoffset;
-  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       ref,
@@ -7303,7 +7316,7 @@ var ProgressCircle = import_react41.default.forwardRef((props, ref) => {
         className
       )
     },
-    /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement(
       "svg",
       {
         width: radius * 2,
@@ -7311,7 +7324,7 @@ var ProgressCircle = import_react41.default.forwardRef((props, ref) => {
         viewBox: `0 0 ${radius * 2} ${radius * 2}`,
         className: "hawa-rotate-180 hawa-transform"
       },
-      /* @__PURE__ */ import_react41.default.createElement(
+      /* @__PURE__ */ import_react42.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7327,7 +7340,7 @@ var ProgressCircle = import_react41.default.forwardRef((props, ref) => {
           )
         }
       ),
-      value > 0 ? /* @__PURE__ */ import_react41.default.createElement(
+      value > 0 ? /* @__PURE__ */ import_react42.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7347,24 +7360,24 @@ var ProgressCircle = import_react41.default.forwardRef((props, ref) => {
         }
       ) : null
     ),
-    /* @__PURE__ */ import_react41.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
+    /* @__PURE__ */ import_react42.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
   ));
 });
 ProgressCircle.displayName = "ProgressCircle";
 
 // elements/pagination/Pagination.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_react_headless_pagination = require("react-headless-pagination");
 var Pagination = ({
   direction,
   totalPages,
   currentPage
 }) => {
-  const [page, setPage] = import_react42.default.useState(currentPage || 0);
+  const [page, setPage] = import_react43.default.useState(currentPage || 0);
   const handlePageChange = (page2) => {
     setPage(page2);
   };
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     import_react_headless_pagination.Pagination,
     {
       totalPages,
@@ -7376,10 +7389,10 @@ var Pagination = ({
       truncableText: "...",
       truncableClassName: "hawa-w-10 hawa-px-0.5 hawa-text-center"
     },
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement(
       import_react_headless_pagination.Pagination.PrevButton,
       {
-        as: /* @__PURE__ */ import_react42.default.createElement(
+        as: /* @__PURE__ */ import_react43.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7389,7 +7402,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react42.default.createElement(
+          /* @__PURE__ */ import_react43.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7402,7 +7415,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react42.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react43.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7415,17 +7428,17 @@ var Pagination = ({
       },
       "Previous"
     ),
-    /* @__PURE__ */ import_react42.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react42.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react43.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react43.default.createElement(
       import_react_headless_pagination.Pagination.PageButton,
       {
         className: "hawa-tap-highlight-transparent hawa-text-default-foreground data-[focus-visible=true]:hawa-outline-focus data-[disabled=true]:hawa-text-default-300 hawa-min-w-9 hawa-text-small hawa-box-border hawa-flex hawa-h-9 hawa-w-9 hawa-cursor-pointer hawa-touch-none hawa-select-none hawa-flex-wrap hawa-items-center hawa-justify-center hawa-truncate hawa-rounded hawa-border hawa-bg-card hawa-outline-none hawa-transition-all hover:hawa-scale-[1.1] data-[disabled=true]:hawa-pointer-events-none data-[focus-visible=true]:hawa-z-10 data-[pressed=true]:hawa-scale-[0.97] data-[focus-visible=true]:hawa-outline-2 data-[focus-visible=true]:hawa-outline-offset-2",
         activeClassName: "hawa-bg-primary hawa-text-primary-foreground hawa-transition-all"
       }
     ))),
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement(
       import_react_headless_pagination.Pagination.NextButton,
       {
-        as: /* @__PURE__ */ import_react42.default.createElement(
+        as: /* @__PURE__ */ import_react43.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7435,7 +7448,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react42.default.createElement(
+          /* @__PURE__ */ import_react43.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7448,7 +7461,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react42.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react43.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7465,14 +7478,14 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 
 // icons/Emojis.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 
 // icons/InputIcons.tsx
-var import_react44 = __toESM(require("react"));
-var EyeIcon = (props) => /* @__PURE__ */ import_react44.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react44.default.createElement(
+var import_react45 = __toESM(require("react"));
+var EyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react45.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7483,10 +7496,10 @@ var EyeIcon = (props) => /* @__PURE__ */ import_react44.default.createElement("d
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react44.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-  /* @__PURE__ */ import_react44.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
+  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ import_react45.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react44.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react44.default.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react45.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7497,20 +7510,20 @@ var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react44.default.createElem
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react44.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-  /* @__PURE__ */ import_react44.default.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__ */ import_react44.default.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__ */ import_react44.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ import_react45.default.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__ */ import_react45.default.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__ */ import_react45.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
 ));
 
 // icons/CommonIcons.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var CheckMark = ({ size = "default", className }) => {
   let sizeStyles2 = {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7518,7 +7531,7 @@ var CheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7533,7 +7546,7 @@ var UncheckMark = ({ size = "default", className }) => {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7541,7 +7554,7 @@ var UncheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7579,7 +7592,7 @@ var PasswordStrengthIndicator = ({ strength }) => {
     strong: "80%",
     "very-strong": "100%"
   }[currentStrengthLevel];
-  return /* @__PURE__ */ import_react46.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react47.default.createElement(
     "div",
     {
       className: `${strengthColors[currentStrengthLevel]} hawa-h-full hawa-rounded hawa-transition-all hawa-duration-300`,
@@ -7591,16 +7604,16 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = (0, import_react46.useState)("");
-  const [isInputFocused, setIsInputFocused] = (0, import_react46.useState)(false);
-  const [currentStr, setCurrentStr] = (0, import_react46.useState)(0);
-  const [passwordVisible, setPasswordVisible] = (0, import_react46.useState)(false);
-  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react46.useState)(false);
-  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react46.useState)(false);
-  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react46.useState)(false);
-  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react46.useState)(false);
-  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react46.useState)(false);
-  (0, import_react46.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react47.useState)("");
+  const [isInputFocused, setIsInputFocused] = (0, import_react47.useState)(false);
+  const [currentStr, setCurrentStr] = (0, import_react47.useState)(0);
+  const [passwordVisible, setPasswordVisible] = (0, import_react47.useState)(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react47.useState)(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react47.useState)(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react47.useState)(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react47.useState)(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react47.useState)(false);
+  (0, import_react47.useEffect)(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -7639,7 +7652,7 @@ var PasswordInput = ({
     setIsInputFocused(false);
   };
   const getCriteriaClass = (isMet) => isMet ? "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-green-500" : "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-red-600";
-  return /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement("div", null, /* @__PURE__ */ import_react47.default.createElement(
     Popover,
     {
       width: "trigger",
@@ -7648,7 +7661,7 @@ var PasswordInput = ({
       onOpenChange: setIsInputFocused,
       triggerProps: { asChild: true },
       contentProps: { onOpenAutoFocus: (e) => e.preventDefault() },
-      trigger: /* @__PURE__ */ import_react46.default.createElement(
+      trigger: /* @__PURE__ */ import_react47.default.createElement(
         "div",
         {
           onClick: (e) => {
@@ -7658,7 +7671,7 @@ var PasswordInput = ({
             }
           }
         },
-        /* @__PURE__ */ import_react46.default.createElement(
+        /* @__PURE__ */ import_react47.default.createElement(
           Input,
           {
             width: "full",
@@ -7668,21 +7681,21 @@ var PasswordInput = ({
             onFocus: handleInputFocus,
             onBlur: handleInputBlur,
             type: passwordVisible ? "text" : "password",
-            endIcon: /* @__PURE__ */ import_react46.default.createElement(
+            endIcon: /* @__PURE__ */ import_react47.default.createElement(
               "div",
               {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              passwordVisible ? /* @__PURE__ */ import_react46.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react46.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+              passwordVisible ? /* @__PURE__ */ import_react47.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react47.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
               " "
             )
           }
         )
       )
     },
-    /* @__PURE__ */ import_react46.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react46.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
-  ), /* @__PURE__ */ import_react46.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
+    /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react47.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
+  ), /* @__PURE__ */ import_react47.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
 };
 
 // elements/slider/Slider.tsx
@@ -7797,12 +7810,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = (0, import_react47.useState)(0);
+  const [scrollPercentage, setScrollPercentage] = (0, import_react48.useState)(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -7813,7 +7826,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -7822,7 +7835,7 @@ var ScrollIndicator = ({
       (_a = anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
       style: {
@@ -7838,11 +7851,11 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_prism_react_renderer = require("prism-react-renderer");
 (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
 require("prismjs/components/prism-bash");
-var CopyIcon = () => /* @__PURE__ */ import_react48.default.createElement(
+var CopyIcon = () => /* @__PURE__ */ import_react49.default.createElement(
   "svg",
   {
     "aria-label": "Copy",
@@ -7855,8 +7868,8 @@ var CopyIcon = () => /* @__PURE__ */ import_react48.default.createElement(
     height: "1em",
     width: "1em"
   },
-  /* @__PURE__ */ import_react48.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ import_react48.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  /* @__PURE__ */ import_react49.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ import_react49.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
 );
 var CodeBlock = ({
   tabs,
@@ -7870,7 +7883,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = (0, import_react48.useState)(0);
+  const [selectedTab, setSelectedTab] = (0, import_react49.useState)(0);
   const theme = import_prism_react_renderer.themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -7878,7 +7891,7 @@ var CodeBlock = ({
     sm: "hawa-w-full hawa-max-w-sm",
     xs: "hawa-w-full hawa-max-w-xs"
   };
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: cn(
@@ -7887,7 +7900,7 @@ var CodeBlock = ({
         classNames == null ? void 0 : classNames.root
       )
     },
-    fileName && /* @__PURE__ */ import_react48.default.createElement(
+    fileName && /* @__PURE__ */ import_react49.default.createElement(
       "div",
       {
         className: cn(
@@ -7896,7 +7909,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.fileName
         )
       },
-      /* @__PURE__ */ import_react48.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         "div",
         {
           className: cn(
@@ -7906,7 +7919,7 @@ var CodeBlock = ({
         fileName
       )
     ),
-    tabs && /* @__PURE__ */ import_react48.default.createElement(
+    tabs && /* @__PURE__ */ import_react49.default.createElement(
       "div",
       {
         className: cn(
@@ -7915,7 +7928,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.tabs
         )
       },
-      tabs.map((tab, i) => /* @__PURE__ */ import_react48.default.createElement(
+      tabs.map((tab, i) => /* @__PURE__ */ import_react49.default.createElement(
         "div",
         {
           key: i,
@@ -7924,7 +7937,7 @@ var CodeBlock = ({
             classNames == null ? void 0 : classNames.tab
           )
         },
-        /* @__PURE__ */ import_react48.default.createElement(
+        /* @__PURE__ */ import_react49.default.createElement(
           "div",
           {
             onClick: () => setSelectedTab(i),
@@ -7936,7 +7949,7 @@ var CodeBlock = ({
         )
       ))
     ),
-    /* @__PURE__ */ import_react48.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       "div",
       {
         className: cn(
@@ -7946,22 +7959,22 @@ var CodeBlock = ({
           "hawa-overflow-y-auto"
         )
       },
-      /* @__PURE__ */ import_react48.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         "div",
         {
           className: cn(
             "hawa-flex hawa-absolute  hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-z-50  hawa-right-3 hawa-top-3"
           )
         },
-        /* @__PURE__ */ import_react48.default.createElement(
+        /* @__PURE__ */ import_react49.default.createElement(
           Tooltip,
           {
             open: clipboard.copied,
             side: "left",
-            content: /* @__PURE__ */ import_react48.default.createElement("div", null, "Copied!"),
+            content: /* @__PURE__ */ import_react49.default.createElement("div", null, "Copied!"),
             triggerProps: { asChild: true }
           },
-          /* @__PURE__ */ import_react48.default.createElement(
+          /* @__PURE__ */ import_react49.default.createElement(
             Button,
             {
               size: "smallIcon",
@@ -7969,18 +7982,18 @@ var CodeBlock = ({
               variant: "outline",
               className: "hawa-text-gray-200 hawa-opacity-50 dark:hawa-border-gray-200 dark:hover:hawa-border-gray-400"
             },
-            /* @__PURE__ */ import_react48.default.createElement(CopyIcon, null)
+            /* @__PURE__ */ import_react49.default.createElement(CopyIcon, null)
           )
         )
       ),
-      /* @__PURE__ */ import_react48.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         import_prism_react_renderer.Highlight,
         {
           theme,
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react48.default.createElement(
+        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react49.default.createElement(
           "pre",
           {
             className: cn(
@@ -7990,7 +8003,7 @@ var CodeBlock = ({
               wrapText && "hawa-text-wrap"
             )
           },
-          tokens.map((line, i) => /* @__PURE__ */ import_react48.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react48.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react48.default.createElement("span", { key, ...getTokenProps({ token }) }))))
+          tokens.map((line, i) => /* @__PURE__ */ import_react49.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react49.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react49.default.createElement("span", { key, ...getTokenProps({ token }) }))))
         )
       )
     )
@@ -7998,7 +8011,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
 var Carousel = ({
   items,
@@ -8014,8 +8027,8 @@ var Carousel = ({
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = (0, import_react49.useState)(0);
-  (0, import_react49.useEffect)(() => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react50.useState)(0);
+  (0, import_react50.useEffect)(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -8025,7 +8038,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -8037,17 +8050,17 @@ var Carousel = ({
         clearInterval(autoplayTimer);
     };
   }, [emblaApi, autoplay, autoplayInterval]);
-  const length = import_react49.default.Children.count(items);
+  const length = import_react50.default.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ import_react49.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react50.default.createElement(
     "div",
     {
       key: i,
       className: "hawa-flex hawa-h-full hawa-min-w-0  hawa-flex-[0_0_100%]  hawa-items-center hawa-justify-center"
     },
     item
-  ))))), /* @__PURE__ */ import_react49.default.createElement(
+  ))))), /* @__PURE__ */ import_react50.default.createElement(
     Dots,
     {
       direction,
@@ -8055,7 +8068,7 @@ var Carousel = ({
       selectedIndex,
       onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
     }
-  ), showArrows && /* @__PURE__ */ import_react49.default.createElement(
+  ), showArrows && /* @__PURE__ */ import_react50.default.createElement(
     CarouselControls,
     {
       canScrollNext,
@@ -8072,7 +8085,7 @@ var Dots = ({
   direction
 }) => {
   const arr = new Array(itemsLength).fill(0);
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     "div",
     {
       dir: direction,
@@ -8080,7 +8093,7 @@ var Dots = ({
     },
     arr.map((_, index) => {
       const selected = index === selectedIndex;
-      return /* @__PURE__ */ import_react49.default.createElement(
+      return /* @__PURE__ */ import_react50.default.createElement(
         "div",
         {
           key: index,
@@ -8095,7 +8108,7 @@ var Dots = ({
   );
 };
 var CarouselControls = (props) => {
-  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react50.default.createElement(
     "button",
     {
       onClick: () => props.canScrollPrev && props.onPrev(),
@@ -8106,7 +8119,7 @@ var CarouselControls = (props) => {
         props.canScrollPrev && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -8115,9 +8128,9 @@ var CarouselControls = (props) => {
         viewBox: "0 0 16 16",
         className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200 "
       },
-      /* @__PURE__ */ import_react49.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+      /* @__PURE__ */ import_react50.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
-  ), /* @__PURE__ */ import_react49.default.createElement(
+  ), /* @__PURE__ */ import_react50.default.createElement(
     "button",
     {
       onClick: () => props.canScrollNext && props.onNext(),
@@ -8128,7 +8141,7 @@ var CarouselControls = (props) => {
         props.canScrollNext && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -8137,15 +8150,15 @@ var CarouselControls = (props) => {
         viewBox: "0 0 16 16",
         className: "hawa-h-2 hawa-w-2  hawa-shrink-0 hawa-transition-transform hawa-duration-200 "
       },
-      /* @__PURE__ */ import_react49.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+      /* @__PURE__ */ import_react50.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
   ));
 };
 
 // elements/count/Count.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var Count = (props) => {
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react50.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-text-sm" }, props.count));
+  return /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react51.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-text-sm" }, props.count));
 };
 
 // elements/toast/Toast.tsx
@@ -8286,11 +8299,11 @@ var ToastDescription = React67.forwardRef(({ className, size = "default", ...pro
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // elements/toaster/Toaster.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 function Toaster(props) {
   var _a;
   let isRTL = props.direction === "rtl";
-  return /* @__PURE__ */ import_react51.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
+  return /* @__PURE__ */ import_react52.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
     id,
     title,
     description,
@@ -8298,7 +8311,7 @@ function Toaster(props) {
     action,
     ...toastProps
   }) {
-    return /* @__PURE__ */ import_react51.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react52.default.createElement(
       "div",
       {
         className: cn(
@@ -8306,9 +8319,9 @@ function Toaster(props) {
           action && "hawa-justify-between"
         )
       },
-      /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react51.default.createElement(ToastClose, null)),
-      /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
-      /* @__PURE__ */ import_react51.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react52.default.createElement(ToastClose, null)),
+      /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
+      /* @__PURE__ */ import_react52.default.createElement(
         "div",
         {
           className: cn(
@@ -8316,11 +8329,11 @@ function Toaster(props) {
             { "hawa-p-4": size === "default", "hawa-p-2": size === "sm" }
           )
         },
-        /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react51.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react51.default.createElement(ToastDescription, { size }, description)),
-        action && /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
+        /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react52.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react52.default.createElement(ToastDescription, { size }, description)),
+        action && /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
       )
     ));
-  }), /* @__PURE__ */ import_react51.default.createElement(
+  }), /* @__PURE__ */ import_react52.default.createElement(
     ToastViewport,
     {
       className: cn("hawa-gap-2", isRTL && "hawa-fixed hawa-left-0")
@@ -8329,20 +8342,20 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = (0, import_react52.useState)(false);
-  const popUpRef = (0, import_react52.useRef)(null);
+  const [closed, setClosed] = (0, import_react53.useState)(false);
+  const popUpRef = (0, import_react53.useRef)(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
     "bottom-left": "hawa-left-4 hawa-bottom-4"
   };
-  return /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: cn(
@@ -8351,7 +8364,7 @@ var DestroyableCard = ({
       ),
       ref: popUpRef
     },
-    /* @__PURE__ */ import_react52.default.createElement(
+    /* @__PURE__ */ import_react53.default.createElement(
       Card,
       {
         className: cn(
@@ -8360,7 +8373,7 @@ var DestroyableCard = ({
         ),
         dir: direction
       },
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react53.default.createElement(
         "button",
         {
           type: "button",
@@ -8379,7 +8392,7 @@ var DestroyableCard = ({
             }, 200);
           }
         },
-        /* @__PURE__ */ import_react52.default.createElement(
+        /* @__PURE__ */ import_react53.default.createElement(
           "svg",
           {
             "aria-hidden": "true",
@@ -8387,7 +8400,7 @@ var DestroyableCard = ({
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ import_react52.default.createElement(
+          /* @__PURE__ */ import_react53.default.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -8397,13 +8410,13 @@ var DestroyableCard = ({
           )
         )
       ),
-      /* @__PURE__ */ import_react52.default.createElement(CardContent, { headless: true }, props.children)
+      /* @__PURE__ */ import_react53.default.createElement(CardContent, { headless: true }, props.children)
     )
   );
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -8411,13 +8424,13 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = (0, import_react53.useState)(props.currentColorMode);
-  const [language, setLanguage] = (0, import_react53.useState)(props.currentLanguage);
+  const [color, setColor] = (0, import_react54.useState)(props.currentColorMode);
+  const [language, setLanguage] = (0, import_react54.useState)(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"
   };
-  return /* @__PURE__ */ import_react53.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react54.default.createElement(
     Radio,
     {
       name: "language",
@@ -8435,7 +8448,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ import_react53.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     Radio,
     {
       name: "theme",
@@ -8451,7 +8464,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ import_react53.default.createElement(
+          label: /* @__PURE__ */ import_react54.default.createElement(
             "svg",
             {
               width: "15",
@@ -8461,7 +8474,7 @@ var InterfaceSettings = ({
               xmlns: "http://www.w3.org/2000/svg",
               className: "hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90"
             },
-            /* @__PURE__ */ import_react53.default.createElement(
+            /* @__PURE__ */ import_react54.default.createElement(
               "path",
               {
                 d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
@@ -8472,7 +8485,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ import_react53.default.createElement(
+          label: /* @__PURE__ */ import_react54.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -8483,7 +8496,7 @@ var InterfaceSettings = ({
               stroke: "currentColor",
               className: "hawa-h-[1.2rem] hawa-w-[1.2rem]  hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100"
             },
-            /* @__PURE__ */ import_react53.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ import_react54.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -8492,14 +8505,14 @@ var InterfaceSettings = ({
 };
 
 // elements/phoneMockup/PhoneMockup.tsx
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var PhoneMockup = ({
   children,
   upperOverlayGradiant,
   lowerOverlayGradiant,
   phone,
   hideButtons
-}) => /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-relative hawa-mx-auto hawa-h-[600px] hawa-w-[300px] hawa-rounded-[2.5rem] hawa-border-[14px] hawa-border-gray-800 hawa-bg-gray-800 hawa-dark:border-gray-800" }, !hideButtons && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[72px] hawa-h-[32px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[124px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[178px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-absolute hawa--right-[16px] hawa-top-[142px] hawa-h-[64px] hawa-w-[3px] hawa-rounded-r-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" })), /* @__PURE__ */ import_react54.default.createElement("div", { className: "no-scrollbar hawa-left-0 hawa-h-[572px] hawa-w-[272px] hawa-overflow-y-scroll hawa-rounded-[2rem] hawa-bg-white hawa-[clip-path:inset(0px_-1px_0px_0px_round_2rem)] hawa-dark:bg-gray-800" }, children), upperOverlayGradiant && /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-left-0 hawa-top-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-t-[2rem] hawa-bg-gradient-to-t hawa-from-transparent hawa-to-black hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }), lowerOverlayGradiant && /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-bottom-0 hawa-left-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-b-[2rem] hawa-bg-gradient-to-t hawa-from-black hawa-to-transparent hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }));
+}) => /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-relative hawa-mx-auto hawa-h-[600px] hawa-w-[300px] hawa-rounded-[2.5rem] hawa-border-[14px] hawa-border-gray-800 hawa-bg-gray-800 hawa-dark:border-gray-800" }, !hideButtons && /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[72px] hawa-h-[32px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[124px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[178px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--right-[16px] hawa-top-[142px] hawa-h-[64px] hawa-w-[3px] hawa-rounded-r-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" })), /* @__PURE__ */ import_react55.default.createElement("div", { className: "no-scrollbar hawa-left-0 hawa-h-[572px] hawa-w-[272px] hawa-overflow-y-scroll hawa-rounded-[2rem] hawa-bg-white hawa-[clip-path:inset(0px_-1px_0px_0px_round_2rem)] hawa-dark:bg-gray-800" }, children), upperOverlayGradiant && /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-left-0 hawa-top-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-t-[2rem] hawa-bg-gradient-to-t hawa-from-transparent hawa-to-black hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }), lowerOverlayGradiant && /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-bottom-0 hawa-left-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-b-[2rem] hawa-bg-gradient-to-t hawa-from-black hawa-to-transparent hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -8593,6 +8606,10 @@ var PhoneMockup = ({
   PhoneInput,
   PhoneMockup,
   PinInput,
+  PinInputGroup,
+  PinInputRoot,
+  PinInputSeperator,
+  PinInputSlot,
   Popover,
   PopoverContent,
   PopoverPortal,
@@ -8648,3 +8665,53 @@ var PhoneMockup = ({
   buttonVariants,
   navigationMenuTriggerStyle
 });
+/*! 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.
+   *)
+*/