@use-stall/ui 0.1.3 → 0.1.4

package/dist/index.js

@@ -148,6 +148,7 @@ __export(index_exports, {
   FormMessage: () => FormMessage,
   Icon: () => ButtonIcon,
   ImageCard: () => ImageCard,
+  ImageZoom: () => ImageZoom,
   Input: () => Input,
   InputOTP: () => InputOTP,
   InputOTPGroup: () => InputOTPGroup,
@@ -2466,24 +2467,100 @@ FormMessage.displayName = "FormMessage";
 
 // src/components/image-card.tsx
 var import_react2 = __toESM(require("react"));
+
+// src/components/image-zoom.tsx
+var import_react_medium_image_zoom = __toESM(require("react-medium-image-zoom"));
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var ImageZoom = ({
+  className,
+  backdropClassName,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "div",
+  {
+    className: cn(
+      "relative",
+      "**:data-rmiz-ghost:pointer-events-none **:data-rmiz-ghost:absolute",
+      "**:data-rmiz-btn-zoom:m-0 **:data-rmiz-btn-zoom:size-10 **:data-rmiz-btn-zoom:touch-manipulation **:data-rmiz-btn-zoom:appearance-none **:data-rmiz-btn-zoom:rounded-[50%] **:data-rmiz-btn-zoom:border-none **:data-rmiz-btn-zoom:bg-foreground/70 **:data-rmiz-btn-zoom:p-2 **:data-rmiz-btn-zoom:text-background **:data-rmiz-btn-zoom:outline-offset-2",
+      "**:data-rmiz-btn-unzoom:m-0 **:data-rmiz-btn-unzoom:size-10 **:data-rmiz-btn-unzoom:touch-manipulation **:data-rmiz-btn-unzoom:appearance-none **:data-rmiz-btn-unzoom:rounded-[50%] **:data-rmiz-btn-unzoom:border-none **:data-rmiz-btn-unzoom:bg-foreground/70 **:data-rmiz-btn-unzoom:p-2 **:data-rmiz-btn-unzoom:text-background **:data-rmiz-btn-unzoom:outline-offset-2",
+      "[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]",
+      "**:data-rmiz-btn-zoom:absolute **:data-rmiz-btn-zoom:top-2.5 **:data-rmiz-btn-zoom:right-2.5 **:data-rmiz-btn-zoom:bottom-auto **:data-rmiz-btn-zoom:left-auto **:data-rmiz-btn-zoom:cursor-zoom-in",
+      "**:data-rmiz-btn-unzoom:absolute **:data-rmiz-btn-unzoom:top-5 **:data-rmiz-btn-unzoom:right-5 **:data-rmiz-btn-unzoom:bottom-auto **:data-rmiz-btn-unzoom:left-auto **:data-rmiz-btn-unzoom:z-1 **:data-rmiz-btn-unzoom:cursor-zoom-out",
+      '[&_[data-rmiz-content="found"]_img]:cursor-zoom-in',
+      '[&_[data-rmiz-content="found"]_svg]:cursor-zoom-in',
+      '[&_[data-rmiz-content="found"]_[role="img"]]:cursor-zoom-in',
+      '[&_[data-rmiz-content="found"]_[data-zoom]]:cursor-zoom-in',
+      className
+    ),
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react_medium_image_zoom.default,
+      {
+        classDialog: cn(
+          "backdrop:hidden",
+          "[[open]]:fixed [[open]]:m-0 [[open]]:h-dvh [[open]]:max-h-none [[open]]:w-dvw [[open]]:max-w-none [[open]]:overflow-hidden [[open]]:border-0 [[open]]:bg-transparent [[open]]:p-0",
+          "**:data-rmiz-modal-overlay:absolute **:data-rmiz-modal-overlay:inset-0 **:data-rmiz-modal-overlay:transition-all",
+          '**:data-[rmiz-modal-overlay="hidden"]:bg-transparent',
+          '**:data-[rmiz-modal-overlay="visible"]:bg-background/80 **:data-[rmiz-modal-overlay="visible"]:backdrop-blur-md',
+          "**:data-rmiz-modal-content:relative **:data-rmiz-modal-content:size-full",
+          "**:data-rmiz-modal-img:absolute **:data-rmiz-modal-img:origin-top-left **:data-rmiz-modal-img:cursor-zoom-out **:data-rmiz-modal-img:transition-transform",
+          "motion-reduce:**:data-rmiz-modal-img:transition-none motion-reduce:**:data-rmiz-modal-overlay:transition-none",
+          backdropClassName
+        ),
+        ...props
+      }
+    )
+  }
+);
+
+// src/components/image-card.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ImageCard = import_react2.default.memo(
-  ({ src = "", alt = "", onErrorImage, className }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      "img",
+  ({
+    src = "",
+    alt = "",
+    onErrorImage = "/images/default_prod.png",
+    className,
+    imageClassName,
+    disableZoom = false
+  }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
       {
-        onError: (e) => {
-          const target = e?.currentTarget;
-          if (target) {
-            target.src = onErrorImage || "";
-          }
-        },
-        src,
-        alt,
         className: cn(
-          `h-8 w-8 rounded-10 bg-main-background object-cover object-center shadow-s
-          overflow-hidden border-4 border-main-background shrink-0`,
+          `h-9 w-9 rounded-lg shadow-sm drop-shadow-sm border border-border
+           overflow-hidden bg-background shrink-0 relative`,
           className
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ImageZoom,
+          {
+            isDisabled: disableZoom,
+            className: cn(
+              `h-full w-full rounded-[inherit] overflow-hidden
+          [&_div]:h-full [&_div]:w-full`,
+              {
+                "**:cursor-pointer!": disableZoom
+              }
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "img",
+              {
+                onError: (e) => {
+                  const target = e?.currentTarget;
+                  if (target) {
+                    target.src = onErrorImage;
+                  }
+                },
+                src,
+                alt,
+                className: cn(
+                  `h-full w-full bg-main-background object-cover! object-center! rounded-lg
+               border-[3px] border-white dark:border-zinc-800`,
+                  imageClassName
+                )
+              }
+            )
+          }
         )
       }
     );
@@ -2494,8 +2571,8 @@ var ImageCard = import_react2.default.memo(
 var React20 = __toESM(require("react"));
 var import_input_otp = require("input-otp");
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var InputOTP = React20.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var InputOTP = React20.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_input_otp.OTPInput,
   {
     ref,
@@ -2508,12 +2585,12 @@ var InputOTP = React20.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
 var InputOTPSlot = React20.forwardRef(({ index, className, ...props }, ref) => {
   const inputOTPContext = React20.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       ref,
@@ -2525,29 +2602,29 @@ var InputOTPSlot = React20.forwardRef(({ index, className, ...props }, ref) => {
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react10.Dot, {}) }));
+var InputOTPSeparator = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/kbd.tsx
 var import_react3 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var DefaultKbdSeparator = ({
   className,
   children = "+",
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn("text-muted-foreground/50", className), ...props, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn("text-muted-foreground/50", className), ...props, children });
 var Kbd = ({
   className,
-  separator = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DefaultKbdSeparator, {}),
+  separator = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DefaultKbdSeparator, {}),
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   "span",
   {
     className: cn(
@@ -2555,34 +2632,34 @@ var Kbd = ({
       className
     ),
     ...props,
-    children: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react3.Fragment, { children: [
+    children: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react3.Fragment, { children: [
       child,
       index < children.length - 1 && separator
     ] }, index)) : children
   }
 );
-var KbdKey = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("kbd", { ...props });
+var KbdKey = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("kbd", { ...props });
 
 // src/components/modal-container.tsx
 var import_react4 = __toESM(require("react"));
 var import_framer_motion = require("framer-motion");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var ModalContainer = import_react4.default.memo((props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_framer_motion.motion.div,
     {
       initial: { y: 10, opacity: 0 },
       exit: { y: 10, opacity: 0 },
       animate: { y: 0, opacity: 1 },
       className: "fixed inset-0 md:inset-2 md:rounded-xl md:border-4 border-white dark:border-zinc-700\n       shadow-3xl bg-main-background overflow-hidden z-10",
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full h-full overflow-hidden overflow-y-auto flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full max-w-[700px] h-fit shrink-0 overflow-hidden flex flex-col p-4", children: props.children }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full h-full overflow-hidden overflow-y-auto flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full max-w-[700px] h-fit shrink-0 overflow-hidden flex flex-col p-4", children: props.children }) })
     }
   );
 });
 
 // src/components/multi-select.tsx
 var React22 = __toESM(require("react"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var MultiSelect = ({
   options: options2 = [],
   value = [],
@@ -2606,7 +2683,7 @@ var MultiSelect = ({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Combobox,
     {
       required,
@@ -2616,15 +2693,15 @@ var MultiSelect = ({
       onValueChange: handleValueChange,
       disabled: maxCount === options2.length,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           ComboboxChips,
           {
             className: cn(
               "min-h-10! before:hidden shadow-none rounded-10!",
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComboboxValue, { children: (value2) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(React22.Fragment, { children: [
-              value2?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComboboxValue, { children: (value2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(React22.Fragment, { children: [
+              value2?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 ComboboxChip,
                 {
                   "aria-label": item.value,
@@ -2633,7 +2710,7 @@ var MultiSelect = ({
                 },
                 item.value
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 ComboboxInput,
                 {
                   placeholder: value2.length > 0 ? void 0 : placeholder || "Select an item...",
@@ -2647,14 +2724,14 @@ var MultiSelect = ({
             ] }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ComboboxPopup, { className: "rounded-xl", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ComboboxEmpty, { className: "w-full center-flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ComboboxPopup, { className: "rounded-xl", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ComboboxEmpty, { className: "w-full center-flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",
               {
                 style: { borderRadius: "30% 70% 70% 30% / 30% 38% 62% 70%" },
                 className: "mt-8 size-24 center-flex bg-accent/50 rounded-blob",
-                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "img",
                   {
                     src: "/images/no-direction.png",
@@ -2664,10 +2741,10 @@ var MultiSelect = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h1", { className: "mt-4 text-sm text-foreground font-semibold", children: "Nothing Found" }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 mb-8 text-sm text-center text-muted-foreground max-w-62", children: "We couldn't find anything matching your search" })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h1", { className: "mt-4 text-sm text-foreground font-semibold", children: "Nothing Found" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "mt-1 mb-8 text-sm text-center text-muted-foreground max-w-62", children: "We couldn't find anything matching your search" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComboboxList, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComboboxList, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             ComboboxItem,
             {
               value: item,
@@ -2686,7 +2763,7 @@ MultiSelect.displayName = "MultiSelect";
 // src/components/password-input.tsx
 var import_lucide_react11 = require("lucide-react");
 var import_react5 = __toESM(require("react"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var PasswordInput = import_react5.default.forwardRef(
   ({ className, onSubmit, showStrength, ...props }, ref) => {
     const [isVisible, setIsVisible] = import_react5.default.useState(false);
@@ -2727,9 +2804,9 @@ var PasswordInput = import_react5.default.forwardRef(
       }
       onSubmit?.(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Input,
           {
             className: cn("pe-9", className),
@@ -2740,7 +2817,7 @@ var PasswordInput = import_react5.default.forwardRef(
             onSubmit: handleSubmit
           }
         ),
-        showStrength && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        showStrength && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "input",
           {
             title: "password",
@@ -2750,7 +2827,7 @@ var PasswordInput = import_react5.default.forwardRef(
             value: showStrength ? strengthScore >= 4 ? props?.value : "" : props.value
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
             className: "absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-10 text-muted-foreground/80 outline-offset-2 transition-colors hover:text-foreground focus:z-10 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
@@ -2759,12 +2836,12 @@ var PasswordInput = import_react5.default.forwardRef(
             "aria-label": isVisible ? "Hide password" : "Show password",
             "aria-pressed": isVisible,
             "aria-controls": "password",
-            children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.EyeOff, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.Eye, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
+            children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react11.EyeOff, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react11.Eye, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
           }
         )
       ] }),
-      showStrength && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react5.default.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      showStrength && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react5.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             className: "my-3 h-1 w-full overflow-hidden rounded-full bg-border",
@@ -2773,7 +2850,7 @@ var PasswordInput = import_react5.default.forwardRef(
             "aria-valuemin": 0,
             "aria-valuemax": 4,
             "aria-label": "Password strength",
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "div",
               {
                 className: `h-full ${getStrengthColor(
@@ -2784,7 +2861,7 @@ var PasswordInput = import_react5.default.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "p",
           {
             id: "password-strength",
@@ -2795,15 +2872,15 @@ var PasswordInput = import_react5.default.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "space-y-1.5", "aria-label": "Password requirements", children: strength.map((req, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "flex items-center gap-2", children: [
-          req.met ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "space-y-1.5", "aria-label": "Password requirements", children: strength.map((req, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("li", { className: "flex items-center gap-2", children: [
+          req.met ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             import_lucide_react11.Check,
             {
               size: 16,
               className: "text-emerald-500",
               "aria-hidden": "true"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             import_lucide_react11.X,
             {
               size: 16,
@@ -2811,13 +2888,13 @@ var PasswordInput = import_react5.default.forwardRef(
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "span",
             {
               className: `text-xs ${req.met ? "text-emerald-600" : "text-muted-foreground"}`,
               children: [
                 req.text,
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sr-only", children: req.met ? " - Requirement met" : " - Requirement not met" })
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sr-only", children: req.met ? " - Requirement met" : " - Requirement not met" })
               ]
             }
           )
@@ -2835,7 +2912,7 @@ var import_react6 = require("react");
 var RPNInput = __toESM(require("react-phone-number-input"));
 var import_flags = __toESM(require("react-phone-number-input/flags"));
 var import_react_phone_number_input = require("react-phone-number-input");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PhoneNumberInput({
   className = "",
   ...props
@@ -2849,7 +2926,7 @@ function PhoneNumberInput({
     }
     props.onChange(newValue ?? "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(className), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(className), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     RPNInput.default,
     {
       className: cn("flex rounded-md", error && "border border-red-500/70"),
@@ -2867,7 +2944,7 @@ function PhoneNumberInput({
 }
 var PhoneInput = (0, import_react6.forwardRef)(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Input,
       {
         className: cn(
@@ -2890,7 +2967,7 @@ var CountrySelect = ({
   const handleSelect = (event) => {
     onChange(event.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: cn(`relative inline-flex items-center self-stretch rounded-s-10 border border-input
@@ -2898,11 +2975,11 @@ var CountrySelect = ({
       focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20
        hover:text-foreground has-disabled:pointer-events-none has-disabled:opacity-50`),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.ChevronDown, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react12.ChevronDown, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "select",
           {
             disabled,
@@ -2911,8 +2988,8 @@ var CountrySelect = ({
             className: "absolute inset-0 text-sm opacity-0",
             "aria-label": "Select country",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: "", children: "Select a country" }, "default"),
-              options2.filter((x) => x.value).map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("option", { value: option.value, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "", children: "Select a country" }, "default"),
+              options2.filter((x) => x.value).map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("option", { value: option.value, children: [
                 option.label,
                 " ",
                 option.value && `+${RPNInput.getCountryCallingCode(option.value)}`
@@ -2926,15 +3003,15 @@ var CountrySelect = ({
 };
 var FlagComponent = ({ country, countryName }) => {
   const Flag = import_flags.default[country];
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flag, { title: countryName }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.Phone, { size: 16, "aria-hidden": "true" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flag, { title: countryName }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react12.Phone, { size: 16, "aria-hidden": "true" }) });
 };
 
 // src/components/price-input.tsx
 var import_react7 = __toESM(require("react"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var PriceInput = import_react7.default.forwardRef(
   ({ currency, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
       {
         className: cn(
@@ -2942,8 +3019,8 @@ var PriceInput = import_react7.default.forwardRef(
           props.containerClassname
         ),
         children: [
-          !props.hide_currency_symbol && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute inset-y-0.5 flex items-center pl-4 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.symbol }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          !props.hide_currency_symbol && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-y-0.5 flex items-center pl-4 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.symbol }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Input,
             {
               ref,
@@ -2953,7 +3030,7 @@ var PriceInput = import_react7.default.forwardRef(
               className: cn("px-10 shadow-none m-0! py-0", props.className)
             }
           ),
-          !props.hide_currency_code && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute inset-y-0.5 right-0 flex items-center pl-3 pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.code }) })
+          !props.hide_currency_code && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-y-0.5 right-0 flex items-center pl-3 pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.code }) })
         ]
       }
     );
@@ -2964,8 +3041,8 @@ PriceInput.displayName = "PriceInput";
 // src/components/progress.tsx
 var React26 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   ProgressPrimitive.Root,
   {
     ref,
@@ -2974,7 +3051,7 @@ var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @_
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ProgressPrimitive.Indicator,
       {
         className: "h-full w-full flex-1 bg-primary transition-all",
@@ -2989,11 +3066,11 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 var React27 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -3004,12 +3081,12 @@ var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react13.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react13.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -3018,11 +3095,11 @@ var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react13.ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react13.ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -3031,11 +3108,11 @@ var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react13.ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react13.ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
   SelectPrimitive.Content,
   {
     ref,
@@ -3047,8 +3124,8 @@ var SelectContent = React27.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectScrollUpButton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectScrollUpButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -3058,12 +3135,12 @@ var SelectContent = React27.forwardRef(({ className, children, position = "poppe
           children
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectScrollDownButton, {})
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   SelectPrimitive.Label,
   {
     ref,
@@ -3072,7 +3149,7 @@ var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
   SelectPrimitive.Item,
   {
     ref,
@@ -3082,13 +3159,13 @@ var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) =>
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react13.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react13.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
@@ -3101,9 +3178,9 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 // src/components/separator.tsx
 var React28 = __toESM(require("react"));
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Separator3 = React28.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -3125,12 +3202,12 @@ var React29 = __toESM(require("react"));
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var SheetOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -3158,9 +3235,9 @@ var sheetVariants = (0, import_class_variance_authority4.cva)(
     }
   }
 );
-var SheetContent = React29.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SheetPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SheetOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+var SheetContent = React29.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SheetPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SheetOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     SheetPrimitive.Content,
     {
       ref,
@@ -3168,9 +3245,9 @@ var SheetContent = React29.forwardRef(({ side = "right", className, children, ..
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react14.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react14.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -3180,7 +3257,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "div",
   {
     className: cn(
@@ -3194,7 +3271,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "div",
   {
     className: cn(
@@ -3205,7 +3282,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   SheetPrimitive.Title,
   {
     ref,
@@ -3214,7 +3291,7 @@ var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   SheetPrimitive.Description,
   {
     ref,
@@ -3225,12 +3302,12 @@ var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 // src/components/skeleton.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       className: cn("animate-pulse rounded-lg bg-muted", className),
@@ -3243,7 +3320,7 @@ function Skeleton({
 var import_merge_props3 = require("@base-ui-components/react/merge-props");
 var import_use_render3 = require("@base-ui-components/react/use-render");
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var statusIndicatorVariants = (0, import_class_variance_authority5.cva)(
   "relative inline-flex size-2.5 shrink-0",
   {
@@ -3274,8 +3351,8 @@ function StatusIndicator({
   return (0, import_use_render3.useRender)({
     defaultTagName: "span",
     props: (0, import_merge_props3.mergeProps)(defaultProps, props),
-    render: render || /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { ...defaultProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    render: render || /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { ...defaultProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "span",
         {
           className: cn(
@@ -3284,16 +3361,16 @@ function StatusIndicator({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "relative inline-flex rounded-full size-2.5" })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "relative inline-flex rounded-full size-2.5" })
     ] })
   });
 }
 
 // src/components/switch.tsx
 var import_switch = require("@base-ui-components/react/switch");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Switch({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     import_switch.Switch.Root,
     {
       className: cn(
@@ -3302,7 +3379,7 @@ function Switch({ className, ...props }) {
       ),
       "data-slot": "switch",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         import_switch.Switch.Thumb,
         {
           className: cn(
@@ -3316,14 +3393,14 @@ function Switch({ className, ...props }) {
 }
 
 // src/components/table.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       className: "relative w-full overflow-x-auto",
       "data-slot": "table-container",
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "table",
         {
           className: cn(
@@ -3338,7 +3415,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "thead",
     {
       className: cn(
@@ -3351,7 +3428,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "tbody",
     {
       className: cn(
@@ -3364,7 +3441,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "tfoot",
     {
       className: cn(
@@ -3377,7 +3454,7 @@ function TableFooter({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "tr",
     {
       className: cn(
@@ -3390,7 +3467,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "th",
     {
       className: cn(
@@ -3403,7 +3480,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "td",
     {
       className: cn(
@@ -3419,7 +3496,7 @@ function TableCaption({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "caption",
     {
       className: cn(
@@ -3435,9 +3512,9 @@ function TableCaption({
 // src/components/tabs.tsx
 var React30 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
-var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   TabsPrimitive.List,
   {
     ref,
@@ -3449,7 +3526,7 @@ var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3461,7 +3538,7 @@ var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var TabsContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   TabsPrimitive.Content,
   {
     ref,
@@ -3477,14 +3554,14 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 // src/components/tags-input.tsx
 var import_emblor = require("emblor");
 var import_react8 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 
 // src/components/textarea.tsx
 var React31 = __toESM(require("react"));
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Textarea = React31.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "textarea",
       {
         className: cn(
@@ -3501,7 +3578,7 @@ Textarea.displayName = "Textarea";
 
 // src/components/timeline.tsx
 var React32 = __toESM(require("react"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var TimelineContext = React32.createContext(null);
 function useTimeline() {
   const context = React32.useContext(TimelineContext);
@@ -3511,7 +3588,7 @@ function useTimeline() {
   return context;
 }
 var Timeline = React32.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TimelineContext.Provider, { value: { orientation }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimelineContext.Provider, { value: { orientation }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "ol",
     {
       ref,
@@ -3529,7 +3606,7 @@ var Timeline = React32.forwardRef(
 Timeline.displayName = "Timeline";
 var TimelineItem = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "li",
     {
       ref,
@@ -3546,7 +3623,7 @@ var TimelineItem = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineItem.displayName = "TimelineItem";
 var TimelineSeparator = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       ref,
@@ -3563,7 +3640,7 @@ var TimelineSeparator = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineSeparator.displayName = "TimelineSeparator";
 var TimelineDot = React32.forwardRef(({ variant = "default", className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       ref,
@@ -3582,7 +3659,7 @@ var TimelineDot = React32.forwardRef(({ variant = "default", className, ...props
 TimelineDot.displayName = "TimelineDot";
 var TimelineConnector = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       ref,
@@ -3600,7 +3677,7 @@ var TimelineConnector = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineConnector.displayName = "TimelineConnector";
 var TimelineContent = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       ref,
@@ -3618,12 +3695,12 @@ var TimelineContent = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineContent.displayName = "TimelineContent";
 var TimelineTitle = React32.forwardRef((props, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, "data-orientation": orientation, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, "data-orientation": orientation, ...props });
 });
 TimelineTitle.displayName = "TimelineTitle";
 var TimelineDescription = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       ref,
@@ -3638,11 +3715,11 @@ TimelineDescription.displayName = "TimelineDescription";
 // src/components/tooltip.tsx
 var React33 = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   TooltipPrimitive.Content,
   {
     ref,
@@ -3775,6 +3852,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
   FormMessage,
   Icon,
   ImageCard,
+  ImageZoom,
   Input,
   InputOTP,
   InputOTPGroup,