ssovee-os-web-ui 0.1.4

package/dist/index.js

@@ -0,0 +1,1972 @@
+import * as React20 from 'react';
+import React20__default, { useRef, useImperativeHandle, useCallback, useEffect, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowCircleRightIcon, CaretDownIcon, CheckIcon, MagnifyingGlassIcon, XIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, InfoIcon, WarningIcon, CheckCircleIcon, UploadIcon } from '@phosphor-icons/react';
+
+// src/components/Button.tsx
+
+// src/utils/helpers.ts
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}
+var Button = React20__default.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    tone = "primary",
+    size = "md",
+    loading = false,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    rounded = "lg",
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const baseClasses = "inline-flex items-center justify-center font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+    const variantClasses = {
+      primary: "bg-brand-color text-white hover:bg-brand-color/90 active:bg-brand-color/80 focus-visible:ring-brand-color/50 shadow-sm hover:shadow-md active:shadow-none disabled:bg-brand-color/50 disabled:text-white/80",
+      secondary: "bg-surface-3 text-neutral-100 hover:bg-surface-4 active:bg-surface-4 focus-visible:ring-surface-3/50 border border-surface-4 shadow-sm hover:shadow-md active:shadow-none disabled:bg-surface-3/50",
+      outline: "bg-transparent text-neutral-400 border border-surface-1 hover:bg-surface-1 active:bg-surface-1 focus-visible:ring-surface-1/50",
+      ghost: "bg-transparent text-neutral-400 hover:bg-surface-1 active:bg-surface-1 focus-visible:ring-surface-1/50",
+      danger: "bg-red-500 text-white hover:bg-red-600 active:bg-red-600 focus-visible:ring-red-500/50 shadow-sm hover:shadow-md active:shadow-none disabled:bg-red-500/50",
+      success: "bg-green-500 text-white hover:bg-green-600 active:bg-green-600 focus-visible:ring-green-500/50 shadow-sm hover:shadow-md active:shadow-none disabled:bg-green-500/50",
+      filled: "",
+      text: ""
+    };
+    const filledToneClasses = {
+      primary: "bg-brand-color text-white hover:bg-brand-color/90 active:bg-brand-color/80 focus-visible:ring-brand-color/50 shadow-sm hover:shadow-md active:shadow-none disabled:bg-brand-color/50 disabled:text-white/80",
+      neutral: "bg-surface-3 text-neutral-100 hover:bg-surface-4 active:bg-surface-4 focus-visible:ring-surface-3/50 shadow-sm hover:shadow-md active:shadow-none disabled:bg-surface-3/50",
+      success: "bg-green-500 text-white hover:bg-green-600 active:bg-green-600 focus-visible:ring-green-500/50 shadow-sm hover:shadow-md active:shadow-none disabled:bg-green-500/50",
+      danger: "bg-red-500 text-white hover:bg-red-600 active:bg-red-600 focus-visible:ring-red-500/50 shadow-sm hover:shadow-md active:shadow-none disabled:bg-red-500/50"
+    };
+    const textToneClasses = {
+      primary: "bg-transparent text-brand-color hover:text-brand-color/90 active:text-brand-color/80 hover:underline underline-offset-2 focus-visible:ring-brand-color/30",
+      neutral: "bg-transparent text-neutral-400 hover:text-neutral-300 active:text-neutral-300 focus-visible:ring-surface-1/50",
+      success: "bg-transparent text-green-600 hover:text-green-700 active:text-green-700 focus-visible:ring-green-500/30",
+      danger: "bg-transparent text-red-600 hover:text-red-700 active:text-red-700 focus-visible:ring-red-500/30"
+    };
+    const sizeClasses = {
+      sm: "h-8 px-3 text-sm",
+      md: "h-10 px-4 text-base",
+      lg: "h-12 px-5 text-lg",
+      xl: "h-14 px-6 text-xl"
+    };
+    const roundedClasses = {
+      sm: "rounded-[6px]",
+      md: "rounded-[6px]",
+      lg: "rounded-[6px]",
+      full: "rounded-full"
+    };
+    const widthClasses = fullWidth ? "w-full" : "";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(
+          baseClasses,
+          variant === "filled" ? filledToneClasses[tone] : variant === "text" ? textToneClasses[tone] : variantClasses[variant],
+          sizeClasses[size],
+          roundedClasses[rounded],
+          widthClasses,
+          className
+        ),
+        "data-variant": variant,
+        "data-tone": tone,
+        disabled: disabled || loading,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }),
+          !loading && leftIcon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: leftIcon }),
+          children,
+          !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "ml-2", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+var Typography = ({
+  as,
+  variant = "p",
+  size,
+  weight,
+  color,
+  className,
+  children
+}) => {
+  const Component = as || variant;
+  const sizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl"
+  };
+  const weightClasses = {
+    thin: "font-thin",
+    extralight: "font-extralight",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  const colorClasses = {
+    "neutral-100": "text-neutral-100",
+    "neutral-200": "text-neutral-200",
+    "neutral-300": "text-neutral-300",
+    "neutral-400": "text-neutral-400",
+    "neutral-500": "text-neutral-500",
+    "neutral-600": "text-neutral-600",
+    "neutral-700": "text-neutral-700",
+    "neutral-800": "text-neutral-800",
+    "neutral-900": "text-neutral-900",
+    "brand-color": "text-brand-color",
+    "red-500": "text-red-500",
+    "green-500": "text-green-500",
+    "blue-500": "text-blue-500",
+    "yellow-500": "text-yellow-500"
+  };
+  const classes = cn(
+    size && sizeClasses[size],
+    weight && weightClasses[weight],
+    color && colorClasses[color],
+    className
+  );
+  return /* @__PURE__ */ jsx(Component, { className: classes, children });
+};
+var Typography_default = Typography;
+var Input = React20__default.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "md",
+    leftIcon,
+    rightIcon,
+    showSubmitButton = false,
+    onSubmit,
+    error,
+    label,
+    helperText,
+    fullWidth = false,
+    onKeyUp,
+    ...props
+  }, ref) => {
+    const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
+    const variantClasses = {
+      default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+    };
+    const sizeClasses = {
+      sm: "h-8 px-2 text-sm",
+      md: "h-10 px-3 text-base",
+      lg: "h-12 px-4 text-lg"
+    };
+    const widthClasses = fullWidth ? "w-full" : "";
+    const handleKeyUp = (e) => {
+      if (e.key === "Enter" && onSubmit) {
+        onSubmit();
+      }
+      onKeyUp?.(e);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-neutral-500 mb-1", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: leftIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            className: cn(
+              baseClasses,
+              variantClasses[variant],
+              sizeClasses[size],
+              widthClasses,
+              leftIcon ? "pl-10" : "",
+              rightIcon || showSubmitButton ? "pr-10" : "",
+              error && "border-red-500 focus:border-red-500 focus:ring-red-500/50",
+              className
+            ),
+            onKeyUp: handleKeyUp,
+            ...props
+          }
+        ),
+        rightIcon && !showSubmitButton && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: rightIcon }),
+        showSubmitButton && /* @__PURE__ */ jsx(
+          ArrowCircleRightIcon,
+          {
+            size: 20,
+            onClick: onSubmit,
+            className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-300 cursor-pointer hover:text-neutral-400 transition-colors"
+          }
+        )
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+        error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-red-500", children: error }),
+        helperText && !error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText })
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Input_default = Input;
+var TextArea = React20__default.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "md",
+    error,
+    label,
+    helperText,
+    fullWidth = false,
+    resize = "vertical",
+    ...props
+  }, ref) => {
+    const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
+    const variantClasses = {
+      default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+    };
+    const sizeClasses = {
+      sm: "px-2 py-1 text-sm",
+      md: "px-3 py-2 text-base",
+      lg: "px-4 py-3 text-lg"
+    };
+    const resizeClasses = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    };
+    const widthClasses = fullWidth ? "w-full" : "";
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-neutral-500 mb-1", children: label }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          className: cn(
+            baseClasses,
+            variantClasses[variant],
+            sizeClasses[size],
+            resizeClasses[resize],
+            widthClasses,
+            error && "border-red-500 focus:border-red-500 focus:ring-red-500/50",
+            className
+          ),
+          ...props
+        }
+      ),
+      (error || helperText) && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+        error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-red-500", children: error }),
+        helperText && !error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText })
+      ] })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+var TextArea_default = TextArea;
+var Select = React20__default.forwardRef(
+  ({
+    className,
+    options,
+    variant = "default",
+    size = "md",
+    error,
+    label,
+    helperText,
+    fullWidth = false,
+    onChange,
+    placeholder,
+    value,
+    ...props
+  }, ref) => {
+    const baseClasses = "transition-all duration-200 focus:outline-none appearance-none cursor-pointer rounded-[6px]";
+    const variantClasses = {
+      default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+    };
+    const sizeClasses = {
+      sm: "h-8 px-2 text-sm",
+      md: "h-10 px-3 text-base",
+      lg: "h-12 px-4 text-lg"
+    };
+    const widthClasses = fullWidth ? "w-full" : "";
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-neutral-500 mb-1", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            className: cn(
+              baseClasses,
+              variantClasses[variant],
+              sizeClasses[size],
+              widthClasses,
+              "pr-10",
+              error && "border-red-500 focus:border-red-500 focus:ring-red-500/50",
+              className
+            ),
+            value,
+            onChange: handleChange,
+            ...props,
+            children: [
+              placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+              options.map((option) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  children: option.label
+                },
+                option.value
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CaretDownIcon,
+          {
+            size: 16,
+            className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 pointer-events-none"
+          }
+        )
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+        error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-red-500", children: error }),
+        helperText && !error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText })
+      ] })
+    ] });
+  }
+);
+Select.displayName = "Select";
+var Select_default = Select;
+var Checkbox = React20__default.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "md",
+    error,
+    label,
+    helperText,
+    indeterminate = false,
+    checked,
+    onChange,
+    ...props
+  }, ref) => {
+    const baseClasses = "transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer rounded-[6px]";
+    const variantClasses = {
+      default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-brand-color/50 checked:bg-brand-color checked:border-brand-color",
+      filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-brand-color/50 checked:bg-brand-color checked:border-brand-color"
+    };
+    const sizeClasses = {
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6"
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              className: cn(
+                baseClasses,
+                variantClasses[variant],
+                sizeClasses[size],
+                "appearance-none",
+                error && "border-red-500 focus:border-red-500 focus:ring-red-500/50",
+                className
+              ),
+              defaultChecked: checked,
+              onChange,
+              ...props
+            }
+          ),
+          (checked || indeterminate) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(
+            CheckIcon,
+            {
+              size: size === "sm" ? 12 : size === "md" ? 16 : 20,
+              className: "text-white",
+              weight: indeterminate ? "bold" : "regular"
+            }
+          ) })
+        ] }),
+        label && /* @__PURE__ */ jsx("label", { className: "text-sm text-neutral-400 cursor-pointer select-none", children: label })
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxs("div", { className: "mt-1 ml-6", children: [
+        error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-red-500", children: error }),
+        helperText && !error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+var Toggle = React20__default.forwardRef(
+  ({
+    checked,
+    onChange,
+    variant = "default",
+    size = "md",
+    disabled = false,
+    label,
+    helperText,
+    fullWidth = false
+  }, ref) => {
+    const baseClasses = "flex items-center rounded-full cursor-pointer transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2";
+    const variantClasses = {
+      default: "focus:ring-brand-color/50",
+      success: "focus:ring-green-500/50",
+      warning: "focus:ring-yellow-500/50",
+      danger: "focus:ring-red-500/50"
+    };
+    const toggleClasses = {
+      default: checked ? "bg-brand-color" : "bg-gray-500",
+      success: checked ? "bg-green-500" : "bg-gray-500",
+      warning: checked ? "bg-yellow-500" : "bg-gray-500",
+      danger: checked ? "bg-red-500" : "bg-gray-500"
+    };
+    const sizeClasses = {
+      sm: "w-8 h-4 px-0.5",
+      md: "w-10 h-5 px-0.5",
+      lg: "w-12 h-6 px-1"
+    };
+    const thumbSizeClasses = {
+      sm: "w-3 h-3",
+      md: "w-4 h-4",
+      lg: "w-5 h-5"
+    };
+    const thumbTransformClasses = {
+      sm: checked ? "translate-x-4" : "translate-x-0",
+      md: checked ? "translate-x-5" : "translate-x-0",
+      lg: checked ? "translate-x-6" : "translate-x-0"
+    };
+    const widthClasses = fullWidth ? "w-full" : "";
+    const handleClick = () => {
+      if (!disabled) {
+        onChange(!checked);
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", fullWidth && "w-full"), children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref,
+            type: "button",
+            className: cn(
+              baseClasses,
+              variantClasses[variant],
+              toggleClasses[variant],
+              sizeClasses[size],
+              widthClasses,
+              disabled && "opacity-50 cursor-not-allowed"
+            ),
+            onClick: handleClick,
+            disabled,
+            role: "switch",
+            "aria-checked": checked,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "bg-white rounded-full shadow-md transform transition-transform duration-300",
+                  thumbSizeClasses[size],
+                  thumbTransformClasses[size]
+                )
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: "text-sm text-neutral-500 cursor-pointer select-none", onClick: handleClick, children: label })
+      ] }),
+      helperText && /* @__PURE__ */ jsx("div", { className: "mt-1 ml-12", children: /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText }) })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+var Toggle_default = Toggle;
+var Dropdown = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option",
+  variant = "default",
+  size = "md",
+  disabled = false,
+  className,
+  trigger
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const selectedOption = options.find((option) => option.value === value);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+  const handleSelect = (option) => {
+    if (!option.disabled) {
+      onChange?.(option.value);
+      setIsOpen(false);
+    }
+  };
+  const baseClasses = "transition-all duration-200 focus:outline-none cursor-pointer rounded-[6px]";
+  const variantClasses = {
+    default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+    filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+    outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+  };
+  const sizeClasses = {
+    sm: "h-8 px-2 text-sm",
+    md: "h-10 px-3 text-base",
+    lg: "h-12 px-4 text-lg"
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "", children: [
+    trigger ? /* @__PURE__ */ jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: trigger }) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleToggle,
+        disabled,
+        className: cn(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size],
+          "w-full flex items-center justify-between pr-8",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-neutral-500" : "text-neutral-300", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ jsx(
+            CaretDownIcon,
+            {
+              size: 16,
+              className: cn(
+                "text-neutral-400 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-secondary border border-surface-1 rounded-[6px] shadow-lg z-50 max-h-60 overflow-y-auto", children: options.map((option) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => handleSelect(option),
+        className: cn(
+          "px-3 py-2 cursor-pointer transition-colors duration-200 flex items-center gap-2",
+          option.value === value && "bg-brand-color text-neutral-500",
+          !option.disabled && "hover:bg-surface-3",
+          option.disabled && "opacity-50 cursor-not-allowed"
+        ),
+        children: [
+          option.icon && /* @__PURE__ */ jsx("span", { children: option.icon }),
+          /* @__PURE__ */ jsx("span", { children: option.label })
+        ]
+      },
+      option.value
+    )) })
+  ] });
+};
+var Dropdown_default = Dropdown;
+var ImageWithPlaceholder = ({
+  src,
+  alt,
+  fallbackSrc = "",
+  className,
+  onError,
+  ...props
+}) => {
+  const isValidSrc = (s) => {
+    if (!s) return false;
+    if (typeof s === "object") return true;
+    if (typeof s === "string") {
+      const trimmed = s.trim();
+      if (trimmed === "") return false;
+      if (trimmed.startsWith("data:")) return true;
+      if (trimmed.startsWith("/") || trimmed.startsWith("./") || trimmed.startsWith("../")) return true;
+      try {
+        new URL(trimmed);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    return true;
+  };
+  const initialSrc = isValidSrc(src) ? src : fallbackSrc;
+  const [imgSrc, setImgSrc] = useState(initialSrc);
+  const [hasError, setHasError] = useState(!isValidSrc(src));
+  useEffect(() => {
+    if (isValidSrc(src)) {
+      setImgSrc(src);
+      setHasError(false);
+    } else {
+      setImgSrc(fallbackSrc);
+      setHasError(true);
+    }
+  }, [src, fallbackSrc]);
+  const handleError = (e) => {
+    if (!hasError) {
+      setHasError(true);
+      setImgSrc(fallbackSrc);
+    }
+    if (onError) {
+      onError(e);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...props,
+      src: typeof imgSrc === "string" ? imgSrc : void 0,
+      alt,
+      className: cn(className),
+      onError: handleError
+    }
+  );
+};
+var ImageWithPlaceholder_default = ImageWithPlaceholder;
+var Loading = ({
+  variant = "image",
+  size = "md",
+  text = "Loading...",
+  fullScreen = false,
+  className
+}) => {
+  const sizeClasses = {
+    sm: "w-6 h-6",
+    md: "w-8 h-8",
+    lg: "w-12 h-12",
+    xl: "w-16 h-16"
+  };
+  const textSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+    xl: "text-lg"
+  };
+  const renderSpinner = () => /* @__PURE__ */ jsx("div", { className: cn("animate-spin rounded-full border-2 border-current border-t-transparent", sizeClasses[size]) });
+  const renderDots = () => /* @__PURE__ */ jsxs("div", { className: "flex space-x-1", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("animate-bounce rounded-full bg-current", sizeClasses[size]), style: { animationDelay: "0ms" } }),
+    /* @__PURE__ */ jsx("div", { className: cn("animate-bounce rounded-full bg-current", sizeClasses[size]), style: { animationDelay: "150ms" } }),
+    /* @__PURE__ */ jsx("div", { className: cn("animate-bounce rounded-full bg-current", sizeClasses[size]), style: { animationDelay: "300ms" } })
+  ] });
+  const renderPulse = () => /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-full bg-current", sizeClasses[size]) });
+  const imageSizes = {
+    sm: 24,
+    md: 32,
+    lg: 48,
+    xl: 64
+  };
+  const renderImage = () => /* @__PURE__ */ jsx(
+    ImageWithPlaceholder_default,
+    {
+      src: "/app-assets/Loader.gif",
+      alt: "Loader",
+      width: imageSizes[size],
+      height: imageSizes[size],
+      className: sizeClasses[size]
+    }
+  );
+  const renderLoader = () => {
+    switch (variant) {
+      case "spinner":
+        return renderSpinner();
+      case "dots":
+        return renderDots();
+      case "pulse":
+        return renderPulse();
+      case "image":
+      default:
+        return renderImage();
+    }
+  };
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-center items-center", className), children: [
+    renderLoader(),
+    text && /* @__PURE__ */ jsx("div", { className: cn("mt-2 text-neutral-500", textSizeClasses[size]), children: text })
+  ] });
+  if (fullScreen) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center bg-primary/50 backdrop-blur-sm z-50", children: content });
+  }
+  return content;
+};
+var Loading_default = Loading;
+var Toast = ({
+  heading,
+  message,
+  type,
+  isVisible,
+  onClose,
+  duration = 5e3,
+  position = "bottom-left",
+  showCloseButton = true,
+  className
+}) => {
+  const [isShowing, setIsShowing] = useState(false);
+  useEffect(() => {
+    if (isVisible) {
+      setIsShowing(true);
+      let timer = null;
+      if (type !== "error" && duration > 0) {
+        timer = setTimeout(() => {
+          setIsShowing(false);
+          setTimeout(onClose, 300);
+        }, duration);
+      }
+      return () => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      };
+    }
+  }, [isVisible, type, duration, onClose]);
+  if (!isVisible) return null;
+  const getIcon = () => {
+    switch (type) {
+      case "error":
+        return /* @__PURE__ */ jsx(WarningIcon, { size: 20, className: "text-red-500" });
+      case "success":
+        return /* @__PURE__ */ jsx(CheckCircleIcon, { size: 20, className: "text-green-500" });
+      case "warning":
+        return /* @__PURE__ */ jsx(WarningIcon, { size: 20, className: "text-yellow-500" });
+      case "info":
+        return /* @__PURE__ */ jsx(InfoIcon, { size: 20, className: "text-blue-500" });
+      default:
+        return /* @__PURE__ */ jsx(InfoIcon, { size: 20, className: "text-blue-500" });
+    }
+  };
+  const getTypeClasses = () => {
+    switch (type) {
+      case "error":
+        return "border-l-red-500 bg-red-50";
+      case "success":
+        return "border-l-green-500 bg-green-50";
+      case "warning":
+        return "border-l-yellow-500 bg-yellow-50";
+      case "info":
+        return "border-l-blue-500 bg-blue-50";
+      default:
+        return "border-l-blue-500 bg-blue-50";
+    }
+  };
+  const getPositionClasses = () => {
+    switch (position) {
+      case "top-left":
+        return "top-4 left-4";
+      case "top-right":
+        return "top-4 right-4";
+      case "bottom-left":
+        return "bottom-4 left-4";
+      case "bottom-right":
+        return "bottom-4 right-4";
+      case "top-center":
+        return "top-4 left-1/2 transform -translate-x-1/2";
+      case "bottom-center":
+        return "bottom-4 left-1/2 transform -translate-x-1/2";
+      default:
+        return "bottom-4 left-4";
+    }
+  };
+  const handleClose = () => {
+    setIsShowing(false);
+    setTimeout(onClose, 300);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "fixed z-50 transform transition-all duration-300",
+        getPositionClasses(),
+        isShowing ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "w-80 max-w-sm bg-secondary rounded-[6px] shadow-lg border-l-4 p-4",
+            getTypeClasses(),
+            className
+          ),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: getIcon() }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              heading && /* @__PURE__ */ jsx(Typography_default, { variant: "h4", className: "text-sm font-medium text-neutral-700 mb-1", children: heading }),
+              /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-sm text-neutral-600 leading-relaxed", children: message })
+            ] }),
+            showCloseButton && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleClose,
+                className: "flex-shrink-0 ml-2 text-neutral-400 hover:text-neutral-600 transition-colors",
+                children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+var Toast_default = Toast;
+var Alert = ({
+  type,
+  title,
+  message,
+  onClose,
+  showCloseButton = false,
+  variant = "default",
+  className,
+  children
+}) => {
+  const getIcon = () => {
+    switch (type) {
+      case "success":
+        return /* @__PURE__ */ jsx(CheckCircleIcon, { size: 20, className: "text-green-500" });
+      case "error":
+        return /* @__PURE__ */ jsx(WarningIcon, { size: 20, className: "text-red-500" });
+      case "warning":
+        return /* @__PURE__ */ jsx(WarningIcon, { size: 20, className: "text-yellow-500" });
+      case "info":
+        return /* @__PURE__ */ jsx(InfoIcon, { size: 20, className: "text-blue-500" });
+      default:
+        return /* @__PURE__ */ jsx(InfoIcon, { size: 20, className: "text-blue-500" });
+    }
+  };
+  const getTypeClasses = () => {
+    switch (type) {
+      case "success":
+        return {
+          default: "bg-green-50 border-green-200 text-green-800",
+          filled: "bg-green-500 text-white",
+          outline: "bg-transparent border-green-500 text-green-700"
+        };
+      case "error":
+        return {
+          default: "bg-red-50 border-red-200 text-red-800",
+          filled: "bg-red-500 text-white",
+          outline: "bg-transparent border-red-500 text-red-700"
+        };
+      case "warning":
+        return {
+          default: "bg-yellow-50 border-yellow-200 text-yellow-800",
+          filled: "bg-yellow-500 text-white",
+          outline: "bg-transparent border-yellow-500 text-yellow-700"
+        };
+      case "info":
+        return {
+          default: "bg-blue-50 border-blue-200 text-blue-800",
+          filled: "bg-blue-500 text-white",
+          outline: "bg-transparent border-blue-500 text-blue-700"
+        };
+      default:
+        return {
+          default: "bg-blue-50 border-blue-200 text-blue-800",
+          filled: "bg-blue-500 text-white",
+          outline: "bg-transparent border-blue-500 text-blue-700"
+        };
+    }
+  };
+  const typeClasses = getTypeClasses()[variant];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-[6px] border p-4",
+        typeClasses,
+        className
+      ),
+      role: "alert",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: getIcon() }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsx(Typography_default, { variant: "h4", className: "text-sm font-medium mb-1", children: title }),
+          message && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-sm leading-relaxed", children: message }),
+          children
+        ] }),
+        showCloseButton && onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "flex-shrink-0 ml-2 text-current opacity-70 hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+          }
+        )
+      ] })
+    }
+  );
+};
+var Alert_default = Alert;
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  className
+}) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && closeOnEscape) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose, closeOnEscape]);
+  if (!isOpen) return null;
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    full: "max-w-full mx-4"
+  };
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget && closeOnOverlayClick) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm",
+      onClick: handleOverlayClick,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "bg-secondary rounded-[6px] shadow-xl w-full mx-4 max-h-[90vh] overflow-hidden",
+            sizeClasses[size],
+            className
+          ),
+          children: [
+            (title || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-surface-1", children: [
+              title && /* @__PURE__ */ jsx(
+                Typography_default,
+                {
+                  variant: "h2",
+                  className: "text-lg font-semibold text-neutral-500",
+                  children: title
+                }
+              ),
+              showCloseButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "p-1 text-neutral-400 hover:text-neutral-600 transition-colors",
+                  children: /* @__PURE__ */ jsx(XIcon, { size: 20 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 py-2 overflow-y-auto max-h-[calc(90vh-120px)]", children })
+          ]
+        }
+      )
+    }
+  );
+};
+var Modal_default = Modal;
+var Card = React20__default.forwardRef(
+  ({
+    className,
+    variant = "default",
+    padding = "md",
+    children,
+    ...props
+  }, ref) => {
+    const variantClasses = {
+      default: "bg-secondary border border-surface-1",
+      elevated: "bg-secondary border border-surface-1 shadow-lg",
+      outlined: "bg-transparent border border-surface-1",
+      filled: "bg-surface-4 border border-surface-4"
+    };
+    const paddingClasses = {
+      none: "",
+      sm: "p-3",
+      md: "p-4",
+      lg: "p-6"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-[6px] transition-all duration-200",
+          variantClasses[variant],
+          paddingClasses[padding],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var Card_default = Card;
+var Badge = React20__default.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "md",
+    rounded = "md",
+    children,
+    ...props
+  }, ref) => {
+    const variantClasses = {
+      default: "bg-surface-3 text-neutral-400",
+      primary: "bg-brand-color text-neutral-500",
+      success: "bg-green-500 text-white",
+      warning: "bg-yellow-500 text-white",
+      danger: "bg-red-500 text-white",
+      info: "bg-blue-500 text-white"
+    };
+    const sizeClasses = {
+      sm: "px-2 py-0.5 text-xs",
+      md: "px-2.5 py-1 text-sm",
+      lg: "px-3 py-1.5 text-base"
+    };
+    const roundedClasses = {
+      sm: "rounded-[6px]",
+      md: "rounded-[6px]",
+      lg: "rounded-[6px]",
+      full: "rounded-full"
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center font-medium",
+          variantClasses[variant],
+          sizeClasses[size],
+          roundedClasses[rounded],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var Badge_default = Badge;
+var Avatar = ({
+  src,
+  alt = "Avatar",
+  size = "md",
+  fallback,
+  className,
+  onClick
+}) => {
+  const [imgError, setImgError] = useState(false);
+  const sizeClasses = {
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-12 h-12 text-base",
+    xl: "w-16 h-16 text-lg"
+  };
+  const getInitials = (name) => {
+    return name.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+  };
+  const renderFallback = () => {
+    if (fallback) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full bg-surface-3 text-neutral-400 font-medium", children: getInitials(fallback) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full bg-surface-3 text-neutral-400", children: /* @__PURE__ */ jsx("svg", { className: "w-1/2 h-1/2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+        clipRule: "evenodd"
+      }
+    ) }) });
+  };
+  const handleImgError = useCallback(() => {
+    setImgError(true);
+  }, []);
+  const isSrcAvailable = typeof src === "string" && src.trim() !== "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative rounded-full overflow-hidden bg-surface-3",
+        sizeClasses[size],
+        className
+      ),
+      onClick,
+      style: onClick ? { cursor: "pointer" } : void 0,
+      children: isSrcAvailable && !imgError ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: "object-cover",
+            sizes: size === "sm" ? "32px" : size === "md" ? "40px" : size === "lg" ? "48px" : "64px",
+            onError: handleImgError
+          }
+        )
+      ) : renderFallback()
+    }
+  );
+};
+var Avatar_default = Avatar;
+var Divider = ({
+  orientation = "horizontal",
+  variant = "solid",
+  size = "md",
+  className
+}) => {
+  const variantClasses = {
+    solid: "border-solid",
+    dashed: "border-dashed",
+    dotted: "border-dotted"
+  };
+  const sizeClasses = {
+    sm: orientation === "horizontal" ? "border-t" : "border-l",
+    md: orientation === "horizontal" ? "border-t-2" : "border-l-2",
+    lg: orientation === "horizontal" ? "border-t-4" : "border-l-4"
+  };
+  const orientationClasses = {
+    horizontal: "w-full",
+    vertical: "h-full"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "border-surface-1",
+        variantClasses[variant],
+        sizeClasses[size],
+        orientationClasses[orientation],
+        className
+      )
+    }
+  );
+};
+var Divider_default = Divider;
+var Tooltip = ({
+  content,
+  children,
+  position = "top",
+  delay = 200,
+  className
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [timeoutId, setTimeoutId] = useState(null);
+  const showTooltip = () => {
+    const id = setTimeout(() => setIsVisible(true), delay);
+    setTimeoutId(id);
+  };
+  const hideTooltip = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    setIsVisible(false);
+  };
+  const positionClasses = {
+    top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 transform -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 transform -translate-y-1/2 ml-2"
+  };
+  const arrowClasses = {
+    top: "top-full left-1/2 transform -translate-x-1/2 border-t-surface-1",
+    bottom: "bottom-full left-1/2 transform -translate-x-1/2 border-b-surface-1",
+    left: "left-full top-1/2 transform -translate-y-1/2 border-l-surface-1",
+    right: "right-full top-1/2 transform -translate-y-1/2 border-r-surface-1"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative inline-block",
+      onMouseEnter: showTooltip,
+      onMouseLeave: hideTooltip,
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute z-50 px-2 py-1 text-xs text-white bg-surface-1 rounded shadow-lg whitespace-nowrap",
+              positionClasses[position],
+              className
+            ),
+            children: [
+              content,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute w-0 h-0 border-4 border-transparent",
+                    arrowClasses[position]
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Tooltip_default = Tooltip;
+var globalKeyboardShortcuts = [
+  { command: "focus_search", shortcut: ["ctrl", "k"] },
+  { command: "escape_button_action", shortcut: ["escape"] }
+];
+var keyMap = {
+  windows: {
+    ctrl: "Ctrl",
+    alt: "Alt",
+    shift: "Shift",
+    meta: "Win",
+    escape: "Esc",
+    enter: "Enter",
+    k: "K"
+  },
+  mac: {
+    ctrl: "Ctrl",
+    alt: "\u2325",
+    shift: "\u21E7",
+    meta: "\u2318",
+    escape: "Esc",
+    enter: "Enter",
+    k: "K"
+  },
+  linux: {
+    ctrl: "Ctrl",
+    alt: "Alt",
+    shift: "Shift",
+    meta: "Meta",
+    escape: "Esc",
+    enter: "Enter",
+    k: "K"
+  }
+};
+var detectOS = () => {
+  if (typeof navigator === "undefined") {
+    return "windows";
+  }
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.includes("mac")) return "mac";
+  if (userAgent.includes("win")) return "windows";
+  return "linux";
+};
+var matchShortcut = (event, shortcut, os) => {
+  const normalizedShortcut = shortcut.map((key) => key.toLowerCase());
+  const hasModifier = normalizedShortcut.includes("ctrl") ? event.ctrlKey : normalizedShortcut.includes("meta") ? event.metaKey : normalizedShortcut.includes("alt") ? event.altKey : true;
+  if (!hasModifier) return false;
+  const primaryKey = normalizedShortcut.find((key) => !["ctrl", "meta", "alt", "shift"].includes(key));
+  if (!primaryKey) return normalizedShortcut.every((key) => {
+    if (key === "ctrl") return event.ctrlKey;
+    if (key === "meta") return event.metaKey;
+    if (key === "alt") return event.altKey;
+    if (key === "shift") return event.shiftKey;
+    return false;
+  });
+  const matchesPrimaryKey = event.key.toLowerCase() === primaryKey;
+  const shiftRequired = normalizedShortcut.includes("shift");
+  const shiftMatches = shiftRequired ? event.shiftKey : true;
+  return matchesPrimaryKey && shiftMatches;
+};
+var useShortcutFormatter = () => {
+  const [os, setOS] = useState("windows");
+  const listenersRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    setOS(detectOS());
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      for (const shortcut of globalKeyboardShortcuts) {
+        if (matchShortcut(event, shortcut.shortcut)) {
+          const listeners = listenersRef.current.get(shortcut.command);
+          if (listeners) {
+            event.preventDefault();
+            listeners.forEach((cb) => cb(event));
+          }
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [os]);
+  const formatKeys = (keys = []) => {
+    return keys.map((key) => keyMap[os][key.toLowerCase()] || key.toUpperCase()).join(" + ");
+  };
+  const getShortcutByCommand = (command) => {
+    const found = globalKeyboardShortcuts.find((shortcut) => shortcut.command === command);
+    return found ? found.shortcut : [""];
+  };
+  const addShortcutListener = (command, listener) => {
+    if (!listenersRef.current.has(command)) {
+      listenersRef.current.set(command, /* @__PURE__ */ new Set());
+    }
+    listenersRef.current.get(command).add(listener);
+  };
+  const removeShortcutListener = (command, listener) => {
+    if (listenersRef.current.has(command)) {
+      listenersRef.current.get(command).delete(listener);
+    }
+  };
+  return {
+    formatKeys,
+    getShortcutByCommand,
+    addShortcutListener,
+    removeShortcutListener
+  };
+};
+var useShortcutFormatter_default = useShortcutFormatter;
+var SearchInput = React20__default.forwardRef(
+  ({
+    onSearch,
+    placeholder = "Search...",
+    variant = "default",
+    size = "md",
+    showClearButton = true,
+    className,
+    value,
+    onChange,
+    enableKeyboardShortcuts = false,
+    isActive = true,
+    ...props
+  }, ref) => {
+    const [searchValue, setSearchValue] = React20__default.useState(value || "");
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const { addShortcutListener, removeShortcutListener, formatKeys, getShortcutByCommand } = useShortcutFormatter_default();
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      setSearchValue(newValue);
+      onChange?.(e);
+      onSearch?.(newValue);
+    };
+    const handleClear = useCallback(() => {
+      setSearchValue("");
+      onSearch?.("");
+      const syntheticEvent = {
+        target: { value: "" }
+      };
+      onChange?.(syntheticEvent);
+    }, [onChange, onSearch]);
+    useEffect(() => {
+      if (!enableKeyboardShortcuts || !isActive) return;
+      const handleFocusSearch = (e) => {
+        e?.preventDefault();
+        inputRef.current?.focus();
+      };
+      const handleClearShortcut = (e) => {
+        e?.preventDefault();
+        handleClear();
+        inputRef.current?.blur();
+      };
+      addShortcutListener("focus_search", handleFocusSearch);
+      addShortcutListener("escape_button_action", handleClearShortcut);
+      return () => {
+        removeShortcutListener("focus_search", handleFocusSearch);
+        removeShortcutListener("escape_button_action", handleClearShortcut);
+      };
+    }, [enableKeyboardShortcuts, isActive, handleClear, addShortcutListener, removeShortcutListener]);
+    const displayPlaceholder = enableKeyboardShortcuts ? `${placeholder} (${formatKeys(getShortcutByCommand("focus_search"))})` : placeholder;
+    const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
+    const variantClasses = {
+      default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+    };
+    const sizeClasses = {
+      sm: "h-8 px-2 pl-8 text-sm",
+      md: "h-10 px-3 pl-10 text-base",
+      lg: "h-12 px-4 pl-12 text-lg"
+    };
+    const iconSizeClasses = {
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6"
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: iconSizeClasses[size] }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          placeholder: displayPlaceholder,
+          value: searchValue,
+          onChange: handleChange,
+          className: cn(
+            baseClasses,
+            variantClasses[variant],
+            sizeClasses[size],
+            showClearButton && searchValue ? "pr-10" : "",
+            className
+          ),
+          ...props
+        }
+      ),
+      showClearButton && searchValue && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClear,
+          className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors",
+          children: /* @__PURE__ */ jsx("svg", { className: iconSizeClasses[size], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] });
+  }
+);
+SearchInput.displayName = "SearchInput";
+var SearchInput_default = SearchInput;
+var FileUpload = ({
+  onFileSelect,
+  accept,
+  multiple = false,
+  maxSize,
+  variant = "default",
+  size = "md",
+  disabled = false,
+  className,
+  children,
+  dragAndDrop = false
+}) => {
+  const fileInputRef = useRef(null);
+  const [isDragOver, setIsDragOver] = React20__default.useState(false);
+  const handleFileSelect = (files) => {
+    if (!files) return;
+    const fileArray = Array.from(files);
+    if (maxSize) {
+      const validFiles = fileArray.filter((file) => file.size <= maxSize);
+      if (validFiles.length !== fileArray.length) {
+        console.warn("Some files were too large and were skipped");
+      }
+      onFileSelect?.(validFiles);
+    } else {
+      onFileSelect?.(fileArray);
+    }
+  };
+  const handleInputChange = (e) => {
+    handleFileSelect(e.target.files);
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (dragAndDrop && !disabled) {
+      setIsDragOver(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (dragAndDrop && !disabled) {
+      handleFileSelect(e.dataTransfer.files);
+    }
+  };
+  const baseClasses = "transition-all duration-200 focus:outline-none cursor-pointer rounded-[6px]";
+  const variantClasses = {
+    default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+    filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+    outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+  };
+  const sizeClasses = {
+    sm: "h-20 px-3 text-sm",
+    md: "h-24 px-4 text-base",
+    lg: "h-32 px-6 text-lg"
+  };
+  const defaultContent = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
+    /* @__PURE__ */ jsx(UploadIcon, { size: 24, className: "text-neutral-400 mb-2" }),
+    /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-sm text-neutral-400", children: dragAndDrop ? "Drag and drop files here" : "Click to upload files" }),
+    accept && /* @__PURE__ */ jsxs(Typography_default, { variant: "p", className: "text-xs text-neutral-300 mt-1", children: [
+      "Accepted: ",
+      accept
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: handleClick,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      className: cn(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size],
+        "w-full rounded-[6px] border-2 border-dashed flex items-center justify-center",
+        isDragOver && "border-brand-color bg-brand-color/10",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept,
+            multiple,
+            onChange: handleInputChange,
+            className: "hidden",
+            disabled
+          }
+        ),
+        children || defaultContent
+      ]
+    }
+  );
+};
+var FileUpload_default = FileUpload;
+var Progress = ({
+  value,
+  max = 100,
+  variant = "default",
+  size = "md",
+  showLabel = false,
+  animated = false,
+  className
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const variantClasses = {
+    default: "bg-brand-color",
+    success: "bg-green-500",
+    warning: "bg-yellow-500",
+    danger: "bg-red-500"
+  };
+  const sizeClasses = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3"
+  };
+  const labelSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full bg-surface-3 rounded-[6px] overflow-hidden",
+          sizeClasses[size]
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full rounded-[6px] transition-all duration-300",
+              variantClasses[variant],
+              animated && "animate-pulse"
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    ) }),
+    showLabel && /* @__PURE__ */ jsxs("span", { className: cn("text-neutral-400 font-medium", labelSizeClasses[size]), children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] }) });
+};
+var Progress_default = Progress;
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  showFirstLast = true,
+  showPrevNext = true,
+  maxVisiblePages = 5,
+  size = "md",
+  variant = "default",
+  className
+}) => {
+  const getVisiblePages = () => {
+    const pages = [];
+    const halfVisible = Math.floor(maxVisiblePages / 2);
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      let start = Math.max(1, currentPage - halfVisible);
+      const end = Math.min(totalPages, start + maxVisiblePages - 1);
+      if (end - start + 1 < maxVisiblePages) {
+        start = Math.max(1, end - maxVisiblePages + 1);
+      }
+      if (start > 1) {
+        pages.push(1);
+        if (start > 2) {
+          pages.push("...");
+        }
+      }
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      if (end < totalPages) {
+        if (end < totalPages - 1) {
+          pages.push("...");
+        }
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  };
+  const handlePageClick = (page) => {
+    if (typeof page === "number") {
+      onPageChange(page);
+    }
+  };
+  const sizeClasses = {
+    sm: "h-8 px-2 text-sm",
+    md: "h-10 px-3 text-base",
+    lg: "h-12 px-4 text-lg"
+  };
+  const variantClasses = {
+    default: "bg-primary border border-surface-1 hover:bg-surface-3",
+    outline: "bg-transparent border border-surface-1 hover:bg-surface-3"
+  };
+  const activeClasses = {
+    default: "bg-brand-color text-neutral-500 border-brand-color",
+    outline: "bg-brand-color text-neutral-500 border-brand-color"
+  };
+  const renderPageButton = (page, index) => {
+    if (page === "...") {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "flex items-center justify-center",
+            sizeClasses[size],
+            "text-neutral-400"
+          ),
+          children: "..."
+        },
+        `ellipsis-${index}`
+      );
+    }
+    const isActive = page === currentPage;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => handlePageClick(page),
+        className: cn(
+          "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
+          sizeClasses[size],
+          variantClasses[variant],
+          isActive ? activeClasses[variant] : "text-neutral-400",
+          !isActive && "hover:text-neutral-500"
+        ),
+        children: page
+      },
+      page
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-center gap-1", className), children: [
+    showFirstLast && currentPage > 1 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onPageChange(1),
+        className: cn(
+          "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
+          sizeClasses[size],
+          variantClasses[variant],
+          "text-neutral-400 hover:text-neutral-500"
+        ),
+        children: "First"
+      }
+    ),
+    showPrevNext && currentPage > 1 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage - 1),
+        className: cn(
+          "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
+          sizeClasses[size],
+          variantClasses[variant],
+          "text-neutral-400 hover:text-neutral-500"
+        ),
+        children: /* @__PURE__ */ jsx(CaretLeftIcon, { size: 16 })
+      }
+    ),
+    getVisiblePages().map((page, index) => renderPageButton(page, index)),
+    showPrevNext && currentPage < totalPages && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage + 1),
+        className: cn(
+          "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
+          sizeClasses[size],
+          variantClasses[variant],
+          "text-neutral-400 hover:text-neutral-500"
+        ),
+        children: /* @__PURE__ */ jsx(CaretRightIcon, { size: 16 })
+      }
+    ),
+    showFirstLast && currentPage < totalPages && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onPageChange(totalPages),
+        className: cn(
+          "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
+          sizeClasses[size],
+          variantClasses[variant],
+          "text-neutral-400 hover:text-neutral-500"
+        ),
+        children: "Last"
+      }
+    )
+  ] });
+};
+var Pagination_default = Pagination;
+var Radio = React20__default.forwardRef(
+  ({
+    className,
+    label,
+    size = "md",
+    variant = "default",
+    error,
+    helperText,
+    ...props
+  }, ref) => {
+    const baseClasses = "transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer rounded-[6px]";
+    const variantClasses = {
+      default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-brand-color/50 checked:bg-brand-color checked:border-brand-color",
+      filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-brand-color/50 checked:bg-brand-color checked:border-brand-color"
+    };
+    const sizeClasses = {
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6"
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              className: cn(
+                baseClasses,
+                variantClasses[variant],
+                sizeClasses[size],
+                "appearance-none",
+                error && "border-red-500 focus:border-red-500 focus:ring-red-500/50",
+                className
+              ),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "w-1/2 h-1/2 bg-white rounded-full opacity-0 checked:opacity-100" }) })
+        ] }),
+        label && /* @__PURE__ */ jsx("label", { className: "text-sm text-neutral-400 cursor-pointer select-none", children: label })
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxs("div", { className: "mt-1 ml-6", children: [
+        error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-red-500", children: error }),
+        helperText && !error && /* @__PURE__ */ jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText })
+      ] })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+var Accordion = ({ items, active = -1 }) => {
+  const [activeIndex, setActiveIndex] = useState(active);
+  const toggleAccordion = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-full space-y-[12px]", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "border border-surface-1 mx-[10px] rounded-[6px]",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => toggleAccordion(index),
+            className: "w-full text-left px-[12px] py-[10px] bg-surface-4 flex justify-between items-center focus:outline-none",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-neutral-400 text-[13px]", children: item.title }),
+              /* @__PURE__ */ jsx("span", { className: "flex flex-row gap-[16px]", children: activeIndex === index ? /* @__PURE__ */ jsx(CaretUpIcon, { size: 18 }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 18 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `overflow-hidden transition-all duration-300 ${activeIndex === index ? "px-[12px] py-[12px]" : "max-h-0"}`,
+            children: item.content
+          }
+        )
+      ]
+    },
+    index
+  )) });
+};
+var Accordion_default = Accordion;
+var Tabs = ({
+  tabs,
+  defaultActiveTab = 0,
+  onTabChange,
+  containerClassName = "flex w-full border border-border-1 rounded-[6px] mt-[16px]",
+  buttonClassName = "flex items-center gap-1 px-[8px] py-[2px] text-[13px] cursor-pointer transition-all duration-300 text-neutral-300 rounded-[6px] m-[8px]",
+  activeButtonClassName = "bg-surface-3 text-neutral-400"
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultActiveTab);
+  useEffect(() => {
+    setActiveTab(defaultActiveTab);
+  }, [defaultActiveTab]);
+  const handleTabClick = (index) => {
+    setActiveTab(index);
+    if (onTabChange) {
+      onTabChange(index);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: containerClassName, children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${buttonClassName} ${activeTab === index ? activeButtonClassName : ""}`,
+        onClick: () => handleTabClick(index),
+        children: [
+          tab.icon,
+          /* @__PURE__ */ jsx("span", { children: tab.label })
+        ]
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "w-full mt-4 flex flex-col gap-4", children: tabs[activeTab].content })
+  ] });
+};
+var Tabs_default = Tabs;
+var Table = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-[13px]", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0 text-neutral-300", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-t border-surface-1 group hover:bg-surface-4 hover:text-neutral-500 cursor-pointer",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "py-[4px] px-[8px] font-medium",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("py-[6px] px-[8px]", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export { Accordion_default as Accordion, Alert_default as Alert, Avatar_default as Avatar, Badge_default as Badge, Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, Divider_default as Divider, Dropdown_default as Dropdown, FileUpload_default as FileUpload, ImageWithPlaceholder_default as ImageWithPlaceholder, Input_default as Input, Loading_default as Loading, Modal_default as Modal, Pagination_default as Pagination, Progress_default as Progress, Radio_default as Radio, SearchInput_default as SearchInput, Select_default as Select, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs_default as Tabs, TextArea_default as TextArea, Toast_default as Toast, Toggle_default as Toggle, Tooltip_default as Tooltip, Typography_default as Typography, cn, useShortcutFormatter_default as useShortcutFormatter };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map