@use-stall/ui 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -2312,26 +2312,55 @@ InputOTPSlot.displayName = "InputOTPSlot";
 var InputOTPSeparator = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx24("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx24(Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
+// src/components/kbd.tsx
+import { Fragment } from "react";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+var DefaultKbdSeparator = ({
+  className,
+  children = "+",
+  ...props
+}) => /* @__PURE__ */ jsx25("span", { className: cn("text-muted-foreground/50", className), ...props, children });
+var Kbd = ({
+  className,
+  separator = /* @__PURE__ */ jsx25(DefaultKbdSeparator, {}),
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx25(
+  "span",
+  {
+    className: cn(
+      "inline-flex select-none items-center gap-1 rounded border bg-muted px-1.5 align-middle font-medium font-mono text-[10px] text-muted-foreground leading-loose",
+      className
+    ),
+    ...props,
+    children: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsxs16(Fragment, { children: [
+      child,
+      index < children.length - 1 && separator
+    ] }, index)) : children
+  }
+);
+var KbdKey = ({ ...props }) => /* @__PURE__ */ jsx25("kbd", { ...props });
+
 // src/components/modal-container.tsx
 import React21 from "react";
 import { motion } from "framer-motion";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ModalContainer = React21.memo((props) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     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__ */ jsx25("div", { className: "w-full h-full overflow-hidden overflow-y-auto flex justify-center", children: /* @__PURE__ */ jsx25("div", { className: "w-full max-w-[700px] h-fit shrink-0 overflow-hidden flex flex-col p-4", children: props.children }) })
+      children: /* @__PURE__ */ jsx26("div", { className: "w-full h-full overflow-hidden overflow-y-auto flex justify-center", children: /* @__PURE__ */ jsx26("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
 import * as React22 from "react";
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var MultiSelect = ({
   options: options2 = [],
   value = [],
@@ -2355,7 +2384,7 @@ var MultiSelect = ({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     Combobox,
     {
       required,
@@ -2365,15 +2394,15 @@ var MultiSelect = ({
       onValueChange: handleValueChange,
       disabled: maxCount === options2.length,
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           ComboboxChips,
           {
             className: cn(
               "min-h-10! before:hidden shadow-none rounded-10!",
               className
             ),
-            children: /* @__PURE__ */ jsx26(ComboboxValue, { children: (value2) => /* @__PURE__ */ jsxs16(React22.Fragment, { children: [
-              value2?.map((item) => /* @__PURE__ */ jsx26(
+            children: /* @__PURE__ */ jsx27(ComboboxValue, { children: (value2) => /* @__PURE__ */ jsxs17(React22.Fragment, { children: [
+              value2?.map((item) => /* @__PURE__ */ jsx27(
                 ComboboxChip,
                 {
                   "aria-label": item.value,
@@ -2382,7 +2411,7 @@ var MultiSelect = ({
                 },
                 item.value
               )),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 ComboboxInput,
                 {
                   placeholder: value2.length > 0 ? void 0 : placeholder || "Select an item...",
@@ -2396,14 +2425,14 @@ var MultiSelect = ({
             ] }) })
           }
         ),
-        /* @__PURE__ */ jsxs16(ComboboxPopup, { className: "rounded-xl", children: [
-          /* @__PURE__ */ jsxs16(ComboboxEmpty, { className: "w-full center-flex flex-col", children: [
-            /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsxs17(ComboboxPopup, { className: "rounded-xl", children: [
+          /* @__PURE__ */ jsxs17(ComboboxEmpty, { className: "w-full center-flex flex-col", children: [
+            /* @__PURE__ */ jsx27(
               "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__ */ jsx26(
+                children: /* @__PURE__ */ jsx27(
                   "img",
                   {
                     src: "/images/no-direction.png",
@@ -2413,10 +2442,10 @@ var MultiSelect = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx26("h1", { className: "mt-4 text-sm text-foreground font-semibold", children: "Nothing Found" }),
-            /* @__PURE__ */ jsx26("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__ */ jsx27("h1", { className: "mt-4 text-sm text-foreground font-semibold", children: "Nothing Found" }),
+            /* @__PURE__ */ jsx27("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__ */ jsx26(ComboboxList, { children: (item) => /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(ComboboxList, { children: (item) => /* @__PURE__ */ jsx27(
             ComboboxItem,
             {
               value: item,
@@ -2435,7 +2464,7 @@ MultiSelect.displayName = "MultiSelect";
 // src/components/password-input.tsx
 import { Check as Check5, Eye, EyeOff, X } from "lucide-react";
 import React23 from "react";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var PasswordInput = React23.forwardRef(
   ({ className, onSubmit, showStrength, ...props }, ref) => {
     const [isVisible, setIsVisible] = React23.useState(false);
@@ -2476,9 +2505,9 @@ var PasswordInput = React23.forwardRef(
       }
       onSubmit?.(event);
     };
-    return /* @__PURE__ */ jsxs17("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ jsxs17("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsxs18("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsx28(
           Input,
           {
             className: cn("pe-9", className),
@@ -2489,7 +2518,7 @@ var PasswordInput = React23.forwardRef(
             onSubmit: handleSubmit
           }
         ),
-        showStrength && /* @__PURE__ */ jsx27(
+        showStrength && /* @__PURE__ */ jsx28(
           "input",
           {
             title: "password",
@@ -2499,7 +2528,7 @@ var PasswordInput = React23.forwardRef(
             value: showStrength ? strengthScore >= 4 ? props?.value : "" : props.value
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           "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",
@@ -2508,12 +2537,12 @@ var PasswordInput = React23.forwardRef(
             "aria-label": isVisible ? "Hide password" : "Show password",
             "aria-pressed": isVisible,
             "aria-controls": "password",
-            children: isVisible ? /* @__PURE__ */ jsx27(EyeOff, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ jsx27(Eye, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
+            children: isVisible ? /* @__PURE__ */ jsx28(EyeOff, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ jsx28(Eye, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
           }
         )
       ] }),
-      showStrength && /* @__PURE__ */ jsxs17(React23.Fragment, { children: [
-        /* @__PURE__ */ jsx27(
+      showStrength && /* @__PURE__ */ jsxs18(React23.Fragment, { children: [
+        /* @__PURE__ */ jsx28(
           "div",
           {
             className: "my-3 h-1 w-full overflow-hidden rounded-full bg-border",
@@ -2522,7 +2551,7 @@ var PasswordInput = React23.forwardRef(
             "aria-valuemin": 0,
             "aria-valuemax": 4,
             "aria-label": "Password strength",
-            children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               "div",
               {
                 className: `h-full ${getStrengthColor(
@@ -2533,7 +2562,7 @@ var PasswordInput = React23.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           "p",
           {
             id: "password-strength",
@@ -2544,15 +2573,15 @@ var PasswordInput = React23.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsx27("ul", { className: "space-y-1.5", "aria-label": "Password requirements", children: strength.map((req, index) => /* @__PURE__ */ jsxs17("li", { className: "flex items-center gap-2", children: [
-          req.met ? /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28("ul", { className: "space-y-1.5", "aria-label": "Password requirements", children: strength.map((req, index) => /* @__PURE__ */ jsxs18("li", { className: "flex items-center gap-2", children: [
+          req.met ? /* @__PURE__ */ jsx28(
             Check5,
             {
               size: 16,
               className: "text-emerald-500",
               "aria-hidden": "true"
             }
-          ) : /* @__PURE__ */ jsx27(
+          ) : /* @__PURE__ */ jsx28(
             X,
             {
               size: 16,
@@ -2560,13 +2589,13 @@ var PasswordInput = React23.forwardRef(
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs18(
             "span",
             {
               className: `text-xs ${req.met ? "text-emerald-600" : "text-muted-foreground"}`,
               children: [
                 req.text,
-                /* @__PURE__ */ jsx27("span", { className: "sr-only", children: req.met ? " - Requirement met" : " - Requirement not met" })
+                /* @__PURE__ */ jsx28("span", { className: "sr-only", children: req.met ? " - Requirement met" : " - Requirement not met" })
               ]
             }
           )
@@ -2584,7 +2613,7 @@ import { forwardRef as forwardRef16, useState as useState3 } from "react";
 import * as RPNInput from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
 import { isValidPhoneNumber } from "react-phone-number-input";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function PhoneNumberInput({
   className = "",
   ...props
@@ -2598,7 +2627,7 @@ function PhoneNumberInput({
     }
     props.onChange(newValue ?? "");
   };
-  return /* @__PURE__ */ jsx28("div", { className: cn(className), children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29("div", { className: cn(className), children: /* @__PURE__ */ jsx29(
     RPNInput.default,
     {
       className: cn("flex rounded-md", error && "border border-red-500/70"),
@@ -2616,7 +2645,7 @@ function PhoneNumberInput({
 }
 var PhoneInput = forwardRef16(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       Input,
       {
         className: cn(
@@ -2639,7 +2668,7 @@ var CountrySelect = ({
   const handleSelect = (event) => {
     onChange(event.target.value);
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn(`relative inline-flex items-center self-stretch rounded-s-10 border border-input
@@ -2647,11 +2676,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__ */ jsxs18("div", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx28(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ jsx28(ChevronDown2, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
+        /* @__PURE__ */ jsxs19("div", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx29(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ jsx29(ChevronDown2, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
         ] }),
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs19(
           "select",
           {
             disabled,
@@ -2660,8 +2689,8 @@ var CountrySelect = ({
             className: "absolute inset-0 text-sm opacity-0",
             "aria-label": "Select country",
             children: [
-              /* @__PURE__ */ jsx28("option", { value: "", children: "Select a country" }, "default"),
-              options2.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxs18("option", { value: option.value, children: [
+              /* @__PURE__ */ jsx29("option", { value: "", children: "Select a country" }, "default"),
+              options2.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxs19("option", { value: option.value, children: [
                 option.label,
                 " ",
                 option.value && `+${RPNInput.getCountryCallingCode(option.value)}`
@@ -2675,15 +2704,15 @@ var CountrySelect = ({
 };
 var FlagComponent = ({ country, countryName }) => {
   const Flag = flags[country];
-  return /* @__PURE__ */ jsx28("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ jsx28(Flag, { title: countryName }) : /* @__PURE__ */ jsx28(Phone, { size: 16, "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsx29("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ jsx29(Flag, { title: countryName }) : /* @__PURE__ */ jsx29(Phone, { size: 16, "aria-hidden": "true" }) });
 };
 
 // src/components/price-input.tsx
 import React25 from "react";
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var PriceInput = React25.forwardRef(
   ({ currency, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         className: cn(
@@ -2691,8 +2720,8 @@ var PriceInput = React25.forwardRef(
           props.containerClassname
         ),
         children: [
-          !props.hide_currency_symbol && /* @__PURE__ */ jsx29("div", { className: "absolute inset-y-0.5 flex items-center pl-4 pr-2", children: /* @__PURE__ */ jsx29("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.symbol }) }),
-          /* @__PURE__ */ jsx29(
+          !props.hide_currency_symbol && /* @__PURE__ */ jsx30("div", { className: "absolute inset-y-0.5 flex items-center pl-4 pr-2", children: /* @__PURE__ */ jsx30("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.symbol }) }),
+          /* @__PURE__ */ jsx30(
             Input,
             {
               ref,
@@ -2702,7 +2731,7 @@ var PriceInput = React25.forwardRef(
               className: cn("px-10 shadow-none m-0! py-0", props.className)
             }
           ),
-          !props.hide_currency_code && /* @__PURE__ */ jsx29("div", { className: "absolute inset-y-0.5 right-0 flex items-center pl-3 pr-4", children: /* @__PURE__ */ jsx29("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.code }) })
+          !props.hide_currency_code && /* @__PURE__ */ jsx30("div", { className: "absolute inset-y-0.5 right-0 flex items-center pl-3 pr-4", children: /* @__PURE__ */ jsx30("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.code }) })
         ]
       }
     );
@@ -2713,8 +2742,8 @@ PriceInput.displayName = "PriceInput";
 // src/components/progress.tsx
 import * as React26 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx30(
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx31(
   ProgressPrimitive.Root,
   {
     ref,
@@ -2723,7 +2752,7 @@ var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @_
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx30(
+    children: /* @__PURE__ */ jsx31(
       ProgressPrimitive.Indicator,
       {
         className: "h-full w-full flex-1 bg-primary transition-all",
@@ -2738,11 +2767,11 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 import * as React27 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check6, ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs20(
+var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2753,12 +2782,12 @@ var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx31(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx31(ChevronDown3, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx32(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx32(ChevronDown3, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -2767,11 +2796,11 @@ var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx31(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx32(ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -2780,11 +2809,11 @@ var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx31(ChevronDown3, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx32(ChevronDown3, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx31(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs20(
+var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx32(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs21(
   SelectPrimitive.Content,
   {
     ref,
@@ -2796,8 +2825,8 @@ var SelectContent = React27.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx31(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx32(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -2807,12 +2836,12 @@ var SelectContent = React27.forwardRef(({ className, children, position = "poppe
           children
         }
       ),
-      /* @__PURE__ */ jsx31(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx32(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   SelectPrimitive.Label,
   {
     ref,
@@ -2821,7 +2850,7 @@ var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs20(
+var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
   SelectPrimitive.Item,
   {
     ref,
@@ -2831,13 +2860,13 @@ var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) =>
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx31("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx31(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx31(Check6, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx31(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx32("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx32(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx32(Check6, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx32(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2850,9 +2879,9 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 // src/components/separator.tsx
 import * as React28 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Separator3 = React28.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx32(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx33(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -2874,12 +2903,12 @@ import * as React29 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva as cva4 } from "class-variance-authority";
 import { X as X2 } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs22 } from "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__ */ jsx33(
+var SheetOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -2907,9 +2936,9 @@ var sheetVariants = cva4(
     }
   }
 );
-var SheetContent = React29.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs21(SheetPortal, { children: [
-  /* @__PURE__ */ jsx33(SheetOverlay, {}),
-  /* @__PURE__ */ jsxs21(
+var SheetContent = React29.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs22(SheetPortal, { children: [
+  /* @__PURE__ */ jsx34(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs22(
     SheetPrimitive.Content,
     {
       ref,
@@ -2917,9 +2946,9 @@ var SheetContent = React29.forwardRef(({ side = "right", className, children, ..
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs21(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__ */ jsx33(X2, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs22(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__ */ jsx34(X2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx34("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -2929,7 +2958,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx33(
+}) => /* @__PURE__ */ jsx34(
   "div",
   {
     className: cn(
@@ -2943,7 +2972,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx33(
+}) => /* @__PURE__ */ jsx34(
   "div",
   {
     className: cn(
@@ -2954,7 +2983,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   SheetPrimitive.Title,
   {
     ref,
@@ -2963,7 +2992,7 @@ var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   SheetPrimitive.Description,
   {
     ref,
@@ -2974,12 +3003,12 @@ var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 // src/components/skeleton.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn("animate-pulse rounded-lg bg-muted", className),
@@ -2992,7 +3021,7 @@ function Skeleton({
 import { mergeProps as mergeProps3 } from "@base-ui-components/react/merge-props";
 import { useRender as useRender3 } from "@base-ui-components/react/use-render";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var statusIndicatorVariants = cva5(
   "relative inline-flex size-2.5 shrink-0",
   {
@@ -3023,8 +3052,8 @@ function StatusIndicator({
   return useRender3({
     defaultTagName: "span",
     props: mergeProps3(defaultProps, props),
-    render: render || /* @__PURE__ */ jsxs22("span", { ...defaultProps, children: [
-      /* @__PURE__ */ jsx35(
+    render: render || /* @__PURE__ */ jsxs23("span", { ...defaultProps, children: [
+      /* @__PURE__ */ jsx36(
         "span",
         {
           className: cn(
@@ -3033,16 +3062,16 @@ function StatusIndicator({
           )
         }
       ),
-      /* @__PURE__ */ jsx35("span", { className: "relative inline-flex rounded-full size-2.5" })
+      /* @__PURE__ */ jsx36("span", { className: "relative inline-flex rounded-full size-2.5" })
     ] })
   });
 }
 
 // src/components/switch.tsx
 import { Switch as SwitchPrimitive } from "@base-ui-components/react/switch";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Switch({ className, ...props }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     SwitchPrimitive.Root,
     {
       className: cn(
@@ -3051,7 +3080,7 @@ function Switch({ className, ...props }) {
       ),
       "data-slot": "switch",
       ...props,
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx37(
         SwitchPrimitive.Thumb,
         {
           className: cn(
@@ -3065,14 +3094,14 @@ function Switch({ className, ...props }) {
 }
 
 // src/components/table.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: "relative w-full overflow-x-auto",
       "data-slot": "table-container",
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(
         "table",
         {
           className: cn(
@@ -3087,7 +3116,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "thead",
     {
       className: cn(
@@ -3100,7 +3129,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "tbody",
     {
       className: cn(
@@ -3113,7 +3142,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "tfoot",
     {
       className: cn(
@@ -3126,7 +3155,7 @@ function TableFooter({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "tr",
     {
       className: cn(
@@ -3139,7 +3168,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "th",
     {
       className: cn(
@@ -3152,7 +3181,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "td",
     {
       className: cn(
@@ -3168,7 +3197,7 @@ function TableCaption({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "caption",
     {
       className: cn(
@@ -3184,9 +3213,9 @@ function TableCaption({
 // src/components/tabs.tsx
 import * as React30 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   TabsPrimitive.List,
   {
     ref,
@@ -3198,7 +3227,7 @@ var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3210,7 +3239,7 @@ var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var TabsContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   TabsPrimitive.Content,
   {
     ref,
@@ -3226,14 +3255,14 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 // src/components/tags-input.tsx
 import { TagInput } from "emblor";
 import { useId as useId3, useState as useState4 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 
 // src/components/textarea.tsx
 import * as React31 from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Textarea = React31.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       "textarea",
       {
         className: cn(
@@ -3250,7 +3279,7 @@ Textarea.displayName = "Textarea";
 
 // src/components/timeline.tsx
 import * as React32 from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var TimelineContext = React32.createContext(null);
 function useTimeline() {
   const context = React32.useContext(TimelineContext);
@@ -3260,7 +3289,7 @@ function useTimeline() {
   return context;
 }
 var Timeline = React32.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx41(TimelineContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx41(
+  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx42(TimelineContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx42(
     "ol",
     {
       ref,
@@ -3278,7 +3307,7 @@ var Timeline = React32.forwardRef(
 Timeline.displayName = "Timeline";
 var TimelineItem = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "li",
     {
       ref,
@@ -3295,7 +3324,7 @@ var TimelineItem = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineItem.displayName = "TimelineItem";
 var TimelineSeparator = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
@@ -3312,7 +3341,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__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
@@ -3331,7 +3360,7 @@ var TimelineDot = React32.forwardRef(({ variant = "default", className, ...props
 TimelineDot.displayName = "TimelineDot";
 var TimelineConnector = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
@@ -3349,7 +3378,7 @@ var TimelineConnector = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineConnector.displayName = "TimelineConnector";
 var TimelineContent = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
@@ -3367,12 +3396,12 @@ var TimelineContent = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineContent.displayName = "TimelineContent";
 var TimelineTitle = React32.forwardRef((props, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx41("div", { ref, "data-orientation": orientation, ...props });
+  return /* @__PURE__ */ jsx42("div", { ref, "data-orientation": orientation, ...props });
 });
 TimelineTitle.displayName = "TimelineTitle";
 var TimelineDescription = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
@@ -3387,11 +3416,11 @@ TimelineDescription.displayName = "TimelineDescription";
 // src/components/tooltip.tsx
 import * as React33 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "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__ */ jsx42(
+var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx43(
   TooltipPrimitive.Content,
   {
     ref,
@@ -3522,11 +3551,14 @@ export {
   FormLabel,
   FormMessage,
   ButtonIcon as Icon,
+  ImageCard,
   Input,
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
+  Kbd,
+  KbdKey,
   Label2 as Label,
   MultiSelect,
   PhoneNumberInput,