@komensal/ui 0.6.4 → 0.8.0

package/dist/index.js

@@ -18,6 +18,9 @@ var inputBase = cn(
 );
 var inputPlaceholder = cn("text-icon-muted text-sm font-normal leading-none");
 var inputDisabled = cn("cursor-not-allowed opacity-50");
+var inputCompact = cn(
+  "border-border bg-surface text-foreground focus:border-primary focus:ring-ring h-9 w-full rounded-lg border px-2.5 text-sm focus:ring-2 focus:outline-none"
+);
 var inputFocus = cn(
   "focus:outline-none focus-visible:outline-none",
   "focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary",
@@ -28,7 +31,7 @@ var inputFocus = cn(
 var emitToast = null;
 var toast = {
   error(options) {
-    emit("error", options);
+    emit("destructive", options);
   },
   info(options) {
     emit("info", options);
@@ -58,20 +61,20 @@ function emit(type, options) {
 // src/components/alert.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var variantStyles = {
-  error: { container: "bg-destructive-subtle text-destructive", icon: "text-destructive" },
+  destructive: { container: "bg-destructive-subtle text-destructive", icon: "text-destructive" },
   info: { container: "bg-info-subtle text-info", icon: "text-info" },
   success: { container: "bg-success-subtle text-success", icon: "text-success" },
   warning: { container: "bg-warning-subtle text-warning", icon: "text-warning" }
 };
 var variantIcons = {
-  error: WarningCircleIcon,
+  destructive: WarningCircleIcon,
   info: InfoIcon,
   success: CheckCircleIcon,
   warning: WarningIcon
 };
-var Alert = ({ children, className, variant = "error", ...props }) => {
+var Alert = ({ children, className, variant = "destructive", ...props }) => {
   const styles = variantStyles[variant];
-  const Icon2 = variantIcons[variant];
+  const Icon = variantIcons[variant];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -84,7 +87,7 @@ var Alert = ({ children, className, variant = "error", ...props }) => {
       role: "alert",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(Icon2, { className: cn("h-5 w-5 shrink-0", styles.icon) }),
+        /* @__PURE__ */ jsx(Icon, { className: cn("h-5 w-5 shrink-0", styles.icon) }),
         /* @__PURE__ */ jsx("span", { children })
       ]
     }
@@ -93,13 +96,19 @@ var Alert = ({ children, className, variant = "error", ...props }) => {
 
 // src/components/auth-header.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var AuthHeader = ({ children, logoAlt, mobileClassName }) => {
+var AuthHeader = ({
+  children,
+  desktopLogoSrc = "/logo_color.svg",
+  logoAlt,
+  mobileClassName,
+  mobileLogoSrc = "/logotipo_color.svg"
+}) => {
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-0 shrink flex-col lg:hidden", mobileClassName), children: [
-      /* @__PURE__ */ jsx2("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-11 md:h-12", src: "/logotipo_color.svg" }) }),
+      /* @__PURE__ */ jsx2("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-11 md:h-12", src: mobileLogoSrc }) }),
       children
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "absolute hidden p-10 lg:flex", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-12.5 w-12.5", src: "/logo_color.svg" }) })
+    /* @__PURE__ */ jsx2("div", { className: "absolute hidden p-10 lg:flex", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-12.5 w-12.5", src: desktopLogoSrc }) })
   ] });
 };
 
@@ -117,9 +126,6 @@ import { initReactI18next, useTranslation } from "react-i18next";
 
 // src/locales/es/ui.json
 var ui_default = {
-  otpField: {
-    description: "Se ha enviado un c\xF3digo OTP a tu correo . Revisa tu bandeja de entrada."
-  },
   inputField: {
     showPassword: "Mostrar contrase\xF1a",
     hidePassword: "Ocultar contrase\xF1a",
@@ -477,30 +483,19 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/form.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
-import * as React6 from "react";
-import { Controller, FormProvider, useFormContext } from "react-hook-form";
-
-// src/components/label.tsx
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva as cva2 } from "class-variance-authority";
 import * as React5 from "react";
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var labelVariants = cva2("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-// src/components/form.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
 var Form = FormProvider;
-var FormFieldContext = React6.createContext(null);
+var FormFieldContext = React5.createContext(null);
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx9(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx9(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx8(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx8(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React6.useContext(FormFieldContext);
-  const itemContext = React6.useContext(FormItemContext);
+  const fieldContext = React5.useContext(FormFieldContext);
+  const itemContext = React5.useContext(FormItemContext);
   const { formState, getFieldState } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField must be used within <FormField>");
@@ -519,23 +514,18 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React6.createContext(null);
-var FormItem = React6.forwardRef(
+var FormItemContext = React5.createContext(null);
+var FormItem = React5.forwardRef(
   ({ className, ...props }, ref) => {
-    const id = React6.useId();
-    return /* @__PURE__ */ jsx9(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-1", className), ref, ...props }) });
+    const id = React5.useId();
+    return /* @__PURE__ */ jsx8(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx8("div", { className: cn("space-y-1", className), ref, ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
-var FormLabel = React6.forwardRef(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx9(Label, { className: cn(error && "text-destructive", className), htmlFor: formItemId, ref, ...props });
-});
-FormLabel.displayName = "FormLabel";
-var FormControl = React6.forwardRef(
+var FormControl = React5.forwardRef(
   ({ ...props }, ref) => {
     const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8(
       Slot2,
       {
         "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
@@ -548,21 +538,14 @@ var FormControl = React6.forwardRef(
   }
 );
 FormControl.displayName = "FormControl";
-var FormDescription = React6.forwardRef(
-  ({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
-    return /* @__PURE__ */ jsx9("p", { className: cn("text-muted text-[0.8rem]", className), id: formDescriptionId, ref, ...props });
-  }
-);
-FormDescription.displayName = "FormDescription";
-var FormMessage = React6.forwardRef(
+var FormMessage = React5.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { error, formMessageId } = useFormField();
     const body = error?.message ? String(error.message) : children;
     if (!body) {
       return null;
     }
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8(
       "p",
       {
         className: cn("text-destructive text-[0.8rem] font-medium", className),
@@ -581,10 +564,10 @@ import { useState } from "react";
 import { EyeIcon, EyeSlashIcon, XIcon } from "@phosphor-icons/react";
 
 // src/components/input.tsx
-import * as React7 from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10(
+import * as React6 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Input = React6.forwardRef(({ className, onKeyDown, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx9(
     "input",
     {
       className: cn(
@@ -594,6 +577,8 @@ var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
         className
       ),
       onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
         const key = e.key;
         const allowedKeys = ["Backspace", "Tab", "Enter", "Escape", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"];
         if (allowedKeys.includes(key)) {
@@ -602,12 +587,6 @@ var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
         if (!(key >= "0" && key <= "9") && type === "number") {
           e.preventDefault();
         }
-        if (type === "onlyText") {
-          const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ ]*$/;
-          if (!regex.test(key)) {
-            e.preventDefault();
-          }
-        }
       },
       ref,
       type,
@@ -617,6 +596,15 @@ var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
 });
 Input.displayName = "Input";
 
+// src/components/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva2 } from "class-variance-authority";
+import * as React7 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var labelVariants = cva2("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+var Label = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
 // src/components/form-fields/label-field.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var LabelField = ({ label, labelClassName, name, visualRequired }) => {
@@ -659,8 +647,7 @@ var InputField = ({
     setIsPasswordVisible((prev) => !prev);
   };
   const isPassword = type === "password";
-  const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type === "plate" ? "text" : type;
-  const isPlate = type === "plate";
+  const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type;
   return /* @__PURE__ */ jsx12(
     FormField,
     {
@@ -686,21 +673,12 @@ var InputField = ({
                 autoComplete: isPassword ? "current-password" : void 0,
                 className: cn(
                   inputClassName,
-                  isPlate && "uppercase",
                   hasError && "border-destructive",
                   isPassword && "pr-10 [&::-ms-reveal]:hidden"
                 ),
                 "data-no-password-toggle": true,
                 disabled,
-                maxLength: isPlate ? 6 : void 0,
                 min: type === "number" ? 0 : void 0,
-                onChange: (e) => {
-                  let value = e.target.value;
-                  if (isPlate) {
-                    value = value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6);
-                  }
-                  field.onChange(value);
-                },
                 placeholder,
                 type: inputType,
                 value: field.value ?? ""
@@ -737,12 +715,14 @@ var InputField = ({
 };
 
 // src/components/google-map-picker.tsx
-import { AdvancedMarker, APIProvider, Map as Map2, useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
+import { AdvancedMarker, APIProvider, Map as Map2 } from "@vis.gl/react-google-maps";
+
+// src/components/use-google-map-picker.ts
+import { useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
 import { useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
 var PICKER_MAP_ID = "komensal-restaurant-map";
 var SELECTED_ZOOM = 15;
+var CITY_ZOOM = 12;
 var DEBOUNCE_MS = 300;
 var parseComponents = (components) => {
   const find = (type) => components.find((c) => c.types.includes(type));
@@ -756,19 +736,16 @@ var parseComponents = (components) => {
     department: department?.long ?? null
   };
 };
-var CITY_ZOOM = 12;
-var MapPickerContent = ({
+function useGoogleMapPicker({
   centerOn,
   countryCode,
   disabled,
-  hasError,
   locationQuery,
   locationZoom,
   onAddressResolved,
   onChange,
-  placeholder,
   value
-}) => {
+}) {
   const placesLib = useMapsLibrary("places");
   const geocodingLib = useMapsLibrary("geocoding");
   const map = useMap(PICKER_MAP_ID);
@@ -917,6 +894,37 @@ var MapPickerContent = ({
     },
     [reverseGeocode]
   );
+  return {
+    handleBlur,
+    handleInputChange,
+    handleMapClick,
+    handleMarkerDragEnd,
+    handleSelect,
+    inputValue,
+    position,
+    setShowDropdown,
+    showDropdown,
+    suggestions
+  };
+}
+
+// src/components/google-map-picker.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
+var MapPickerContent = (props) => {
+  const { disabled, hasError, placeholder } = props;
+  const {
+    handleBlur,
+    handleInputChange,
+    handleMapClick,
+    handleMarkerDragEnd,
+    handleSelect,
+    inputValue,
+    position,
+    setShowDropdown,
+    showDropdown,
+    suggestions
+  } = useGoogleMapPicker(props);
   return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
       /* @__PURE__ */ jsx13(
@@ -1095,7 +1103,7 @@ function OTPField({
 
 // src/components/select-input.tsx
 import { CaretDownIcon, CaretUpIcon, ClockIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
-import { cloneElement, useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { cloneElement, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
 
 // src/components/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -1103,7 +1111,6 @@ import * as React9 from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverContent = React9.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
   PopoverPrimitive.Content,
   {
@@ -1119,6 +1126,41 @@ var PopoverContent = React9.forwardRef(({ align = "center", className, sideOffse
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
+// src/components/use-select-input.ts
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+var normalizeString = (str) => str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+function useSelectFilter(items, labelKey, valueKey) {
+  const [query, setQuery] = useState3("");
+  const normalizedItems = useMemo2(() => {
+    if (!items) return [];
+    return items.map((it) => ({
+      ...it,
+      [labelKey]: String(it[labelKey]),
+      [valueKey]: String(it[valueKey])
+    }));
+  }, [items, labelKey, valueKey]);
+  const filteredOptions = useMemo2(() => {
+    if (!query) return normalizedItems;
+    return normalizedItems.filter(
+      (el) => normalizeString(el[labelKey]).includes(normalizeString(query))
+    );
+  }, [normalizedItems, labelKey, query]);
+  return { filteredOptions, normalizedItems, query, setQuery };
+}
+function usePopoverWidth() {
+  const ref = useRef2(null);
+  const [width, setWidth] = useState3(0);
+  useEffect2(() => {
+    const updateWidth = () => {
+      if (ref.current) setWidth(ref.current.getBoundingClientRect().width);
+    };
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  return { ref, width };
+}
+
 // src/components/select-input.tsx
 import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var SelectInput = (props) => {
@@ -1146,26 +1188,14 @@ var SelectInput = (props) => {
     valueKey = "value"
   } = props;
   const resolvedPlaceholder = placeholder ?? t("selectInput.placeholder");
-  const divRef = useRef2(null);
-  const [open, setOpen] = useState3(false);
-  const [width, setWidth] = useState3(0);
-  const [query, setQuery] = useState3("");
-  const [valueItem, setValueItem] = useState3(value);
-  const normalizeString = (str) => str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
-  const normalizedItems = useMemo2(() => {
-    if (!items) return [];
-    return items.map((it) => ({
-      ...it,
-      [labelKey]: String(it[labelKey]),
-      [valueKey]: String(it[valueKey])
-    }));
-  }, [items, labelKey, valueKey]);
-  const filteredOptions = useMemo2(() => {
-    if (!query) return normalizedItems;
-    return normalizedItems.filter(
-      (el) => normalizeString(el[labelKey]).includes(normalizeString(query))
-    );
-  }, [normalizedItems, labelKey, query]);
+  const [open, setOpen] = useState4(false);
+  const [valueItem, setValueItem] = useState4(value);
+  const { ref: divRef, width } = usePopoverWidth();
+  const { filteredOptions, normalizedItems, query, setQuery } = useSelectFilter(
+    items,
+    labelKey,
+    valueKey
+  );
   const onValueChange = useCallback2(
     (val) => {
       if (!normalizedItems.length) return;
@@ -1180,7 +1210,7 @@ var SelectInput = (props) => {
     },
     [normalizedItems, labelKey, valueKey, onValueChangeCallBack]
   );
-  const buttonClassName = useMemo2(
+  const buttonClassName = useMemo3(
     () => cn(
       inputBase,
       inputFocus,
@@ -1191,18 +1221,7 @@ var SelectInput = (props) => {
     ),
     [disabled, error, className]
   );
-  const updateWidth = () => {
-    if (divRef.current) {
-      const { width: width2 } = divRef.current.getBoundingClientRect();
-      setWidth(width2);
-    }
-  };
-  useEffect2(() => {
-    updateWidth();
-    window.addEventListener("resize", updateWidth);
-    return () => window.removeEventListener("resize", updateWidth);
-  }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     setValueItem(value);
   }, [value]);
   return /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx18("div", { className: "relative flex flex-col justify-center", children: /* @__PURE__ */ jsxs14(Popover, { onOpenChange: setOpen, open, children: [
@@ -1346,76 +1365,15 @@ var SelectField = ({
   );
 };
 
-// src/components/image.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-var Image = ({
-  alt = "",
-  aspectRatio,
-  className,
-  fallback,
-  loading = "lazy",
-  onError,
-  onLoad,
-  wrapperClassName,
-  ...props
-}) => {
-  const ref = useRef3(null);
-  const [loaded, setLoaded] = useState4(false);
-  const [errored, setErrored] = useState4(false);
-  useEffect3(() => {
-    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true);
-  }, []);
-  return /* @__PURE__ */ jsxs16(
-    "div",
-    {
-      className: cn("bg-inactive relative overflow-hidden", wrapperClassName),
-      style: aspectRatio ? { aspectRatio } : void 0,
-      children: [
-        !loaded && !errored && /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 animate-pulse" }),
-        errored ? fallback ?? null : /* @__PURE__ */ jsx20(
-          "img",
-          {
-            alt,
-            className: cn(
-              "h-full w-full object-cover transition-opacity duration-300",
-              loaded ? "opacity-100" : "opacity-0",
-              className
-            ),
-            decoding: "async",
-            loading,
-            onError: (e) => {
-              setErrored(true);
-              onError?.(e);
-            },
-            onLoad: (e) => {
-              setLoaded(true);
-              onLoad?.(e);
-            },
-            ref,
-            ...props
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/components/loading.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-function Loading({ className = "", isSpinner = true }) {
-  return /* @__PURE__ */ jsx21("div", { className: cn("relative flex min-h-screen items-center justify-center gap-6", className), children: isSpinner && /* @__PURE__ */ jsx21("div", { className: "absolute right-0 bottom-0 m-10", children: /* @__PURE__ */ jsx21(Spinner, {}) }) });
-}
-
 // src/components/password-checklist.tsx
 import { CheckCircleIcon as CheckCircleIcon2, XCircleIcon } from "@phosphor-icons/react";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var PasswordChecklist = ({ className, rules, value }) => {
   if (rules.length === 0) return null;
-  return /* @__PURE__ */ jsx22("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
+  return /* @__PURE__ */ jsx20("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
     const isMet = rule.test(value);
-    const Icon2 = isMet ? CheckCircleIcon2 : XCircleIcon;
-    return /* @__PURE__ */ jsxs17(
+    const Icon = isMet ? CheckCircleIcon2 : XCircleIcon;
+    return /* @__PURE__ */ jsxs16(
       "li",
       {
         className: cn(
@@ -1423,8 +1381,8 @@ var PasswordChecklist = ({ className, rules, value }) => {
           isMet ? "text-success" : "text-inactive-text"
         ),
         children: [
-          /* @__PURE__ */ jsx22(Icon2, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx22("span", { children: rule.label })
+          /* @__PURE__ */ jsx20(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx20("span", { children: rule.label })
         ]
       },
       rule.key
@@ -1432,116 +1390,23 @@ var PasswordChecklist = ({ className, rules, value }) => {
   }) });
 };
 
-// src/components/select.tsx
-import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import * as React11 from "react";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs18(
-  SelectPrimitive.Trigger,
-  {
-    className: cn(
-      "placeholder:text-placeholder border-border ring-offset-surface focus:ring-ring flex h-9 w-full items-center justify-between rounded-xl border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed [&>span]:line-clamp-1",
-      className
-    ),
-    ref,
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
-  SelectPrimitive.ScrollUpButton,
-  {
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ref,
-    ...props,
-    children: /* @__PURE__ */ jsx23(ChevronUpIcon, {})
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
-  SelectPrimitive.ScrollDownButton,
-  {
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ref,
-    ...props,
-    children: /* @__PURE__ */ jsx23(ChevronDownIcon, {})
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React11.forwardRef(({ children, className, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs18(
-  SelectPrimitive.Content,
-  {
-    className: cn(
-      "border-border text-foreground bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border shadow-md",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ref,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx23(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx23(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx23(SelectScrollDownButton, {})
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Label, { className: cn("px-2 py-1.5 text-sm font-semibold", className), ref, ...props }));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs18(
-  SelectPrimitive.Item,
-  {
-    className: cn(
-      "focus:text-foreground focus:bg-hover relative flex w-full cursor-default items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
-    ref,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx23("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx23(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx23("span", { children }) })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Separator, { className: cn("bg-border -mx-1 my-1 h-px", className), ref, ...props }));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
 // src/components/step-header.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
-var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
-  /* @__PURE__ */ jsx24("h1", { className: "text-title text-2xl font-bold", children: title }),
-  subtitle !== void 0 && /* @__PURE__ */ jsx24("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsx21("h1", { className: "text-title text-2xl font-bold", children: title }),
+  subtitle !== void 0 && /* @__PURE__ */ jsx21("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
 ] });
 
 // src/components/stepper.tsx
-import { CheckIcon as CheckIcon2 } from "@phosphor-icons/react";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { CheckIcon } from "@phosphor-icons/react";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
-  return /* @__PURE__ */ jsx25("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx22("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
     const isCompleted = intermediate ? index <= activeIndex : index < activeIndex;
     const isActive = !intermediate && index === activeIndex;
-    return /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col items-center", children: [
-      /* @__PURE__ */ jsxs20("div", { className: "flex w-full items-center", children: [
-        /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col items-center", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center", children: [
+        /* @__PURE__ */ jsx22(
           "div",
           {
             className: cn(
@@ -1551,7 +1416,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             "aria-current": isActive ? "step" : void 0,
@@ -1561,10 +1426,10 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               isActive && "bg-primary border-primary text-inverse",
               !isCompleted && !isActive && "bg-inactive border-inactive text-surface"
             ),
-            children: isCompleted ? /* @__PURE__ */ jsx25(CheckIcon2, { className: "h-4 w-4" }) : index + 1
+            children: isCompleted ? /* @__PURE__ */ jsx22(CheckIcon, { className: "h-4 w-4" }) : index + 1
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             className: cn(
@@ -1572,7 +1437,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               isCompleted ? "bg-primary" : "bg-inactive",
               index === steps.length - 1 && "rounded-r-full"
             ),
-            children: index === 0 && /* @__PURE__ */ jsx25(
+            children: index === 0 && /* @__PURE__ */ jsx22(
               "div",
               {
                 className: cn(
@@ -1584,43 +1449,37 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx25("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
+      /* @__PURE__ */ jsx22("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
     ] }, step.label);
   }) });
 };
 
 // src/components/toast/toast.tsx
-import { CheckIcon as CheckIcon3, FileLockIcon, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon3 } from "@phosphor-icons/react";
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { CheckIcon as CheckIcon2, FileLockIcon, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon3 } from "@phosphor-icons/react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var EXIT_ANIMATION_MS = 200;
+var typeIcons = {
+  destructive: XIcon3,
+  info: InfoIcon2,
+  success: CheckIcon2,
+  wait: FileLockIcon,
+  warning: WarningIcon2
+};
+var typeStyles = {
+  destructive: { border: "border-destructive", icon: "text-destructive", iconBorder: "border-destructive" },
+  info: { border: "border-info", icon: "text-info", iconBorder: "border-info" },
+  success: { border: "border-success", icon: "text-success", iconBorder: "border-success" },
+  wait: { border: "border-wait", icon: "text-wait", iconBorder: "border-wait" },
+  warning: { border: "border-warning", icon: "text-warning", iconBorder: "border-warning" }
+};
 function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
   const [leaving, setLeaving] = useState5(false);
-  const startedAtRef = useRef4(Date.now());
-  const timeoutRef = useRef4(null);
-  const exitRef = useRef4(null);
-  const Icon2 = useMemo3(() => {
-    if (type === "success") return CheckIcon3;
-    if (type === "error") return XIcon3;
-    if (type === "warning") return WarningIcon2;
-    if (type === "info") return InfoIcon2;
-    return FileLockIcon;
-  }, [type]);
-  const styles = useMemo3(() => {
-    if (type === "success") {
-      return { border: "border-success", icon: "text-success", iconBorder: "border-success" };
-    }
-    if (type === "error") {
-      return { border: "border-destructive", icon: "text-destructive", iconBorder: "border-destructive" };
-    }
-    if (type === "warning") {
-      return { border: "border-warning", icon: "text-warning", iconBorder: "border-warning" };
-    }
-    if (type === "info") {
-      return { border: "border-info", icon: "text-info", iconBorder: "border-info" };
-    }
-    return { border: "border-wait", icon: "text-wait", iconBorder: "border-wait" };
-  }, [type]);
+  const startedAtRef = useRef3(Date.now());
+  const timeoutRef = useRef3(null);
+  const exitRef = useRef3(null);
+  const Icon = typeIcons[type];
+  const styles = typeStyles[type];
   useEffect4(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     if (exitRef.current) clearTimeout(exitRef.current);
@@ -1635,7 +1494,7 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
       if (exitRef.current) clearTimeout(exitRef.current);
     };
   }, [id, duration, onClose]);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       "aria-live": "polite",
@@ -1653,9 +1512,9 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
       ].join(" "),
       role: "status",
       children: [
-        /* @__PURE__ */ jsx26("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx26("h4", { className: ["text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"].join(" "), children: title }) }),
-        subtitle ? /* @__PURE__ */ jsx26("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx26("div", { className: ["max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"].join(" "), children: subtitle }) }) : null,
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx23("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx23("h4", { className: ["text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"].join(" "), children: title }) }),
+        subtitle ? /* @__PURE__ */ jsx23("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx23("div", { className: ["max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"].join(" "), children: subtitle }) }) : null,
+        /* @__PURE__ */ jsx23(
           "div",
           {
             className: [
@@ -1663,7 +1522,7 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
               "flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2",
               styles.iconBorder
             ].join(" "),
-            children: /* @__PURE__ */ jsx26(Icon2, { className: ["h-5 w-5", styles.icon].join(" ") })
+            children: /* @__PURE__ */ jsx23(Icon, { className: ["h-5 w-5", styles.icon].join(" ") })
           }
         )
       ]
@@ -1672,12 +1531,12 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
 }
 
 // src/components/toast/toast-provider.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
-import { Fragment as Fragment4, jsx as jsx27 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
+import { Fragment as Fragment4, jsx as jsx24 } from "react/jsx-runtime";
 function ToastProvider() {
   const [toasts, setToasts] = useState6([]);
-  const itemRefs = useRef5(/* @__PURE__ */ new Map());
-  const prevRects = useRef5(/* @__PURE__ */ new Map());
+  const itemRefs = useRef4(/* @__PURE__ */ new Map());
+  const prevRects = useRef4(/* @__PURE__ */ new Map());
   const showToast = useCallback3((type, options) => {
     setToasts((prev) => [
       ...prev,
@@ -1734,7 +1593,7 @@ function ToastProvider() {
       itemRefs.current.set(id, el);
     };
   }, []);
-  return /* @__PURE__ */ jsx27(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx27("div", { className: `fixed z-4000 ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx27("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx27("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx24(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx24("div", { className: `fixed z-4000 ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx24("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx24("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx24(
     Toast,
     {
       duration: toast2.duration,
@@ -1762,9 +1621,9 @@ function getPositionClass(position) {
 }
 
 // src/components/wrapper.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Wrapper = ({ children, className }) => {
-  return /* @__PURE__ */ jsx28("div", { className: cn("mx-auto h-full w-full", className), children });
+  return /* @__PURE__ */ jsx25("div", { className: cn("mx-auto h-full w-full", className), children });
 };
 export {
   Alert,
@@ -1791,13 +1650,10 @@ export {
   DialogTrigger,
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
   GoogleMapPicker,
-  Image,
   Input,
   InputField,
   InputOTP,
@@ -1805,26 +1661,14 @@ export {
   InputOTPSlot,
   Label,
   LabelField,
-  Loading,
   MapPickerField,
   OTPField,
   PasswordChecklist,
   Popover,
-  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
-  Select,
-  SelectContent,
   SelectField,
-  SelectGroup,
   SelectInput,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
   Spinner,
   StepHeader,
   Stepper,
@@ -1835,6 +1679,7 @@ export {
   buttonVariants,
   cn,
   inputBase,
+  inputCompact,
   inputDisabled,
   inputFocus,
   inputPlaceholder,