alope-ui 1.2.8 → 1.2.10

package/dist/main.js

@@ -0,0 +1,3215 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, isValidElement, cloneElement, useRef, useLayoutEffect, useEffect, Children, createContext, useContext } from "react";
+import { cn } from "clsx-for-tailwind";
+import { Link } from "react-router-dom";
+import Select from "react-select";
+const Accordion = ({
+  data,
+  openIndex,
+  single = true,
+  onToggleItem,
+  icon,
+  className,
+  labelClassName,
+  labelContainerClassName,
+  descriptionClassName,
+  ...props
+}) => {
+  const isControlled = openIndex !== void 0 && onToggleItem !== void 0;
+  const [internalOpen, setInternalOpen] = useState([]);
+  const activeIndexes = isControlled ? Array.isArray(openIndex) ? openIndex : openIndex != null ? [openIndex] : [] : internalOpen;
+  const toggle = (index) => {
+    const isActive = activeIndexes.includes(index);
+    const updated = single ? isActive ? [] : [index] : isActive ? activeIndexes.filter((i) => i !== index) : [...activeIndexes, index];
+    isControlled ? onToggleItem?.(single ? updated[0] ?? null : updated) : setInternalOpen(updated);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ...props, children: data.map((item, i) => {
+    const isOpen = activeIndexes.includes(i);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("border border-gray-300 dark:border-white/20 rounded-md overflow-hidden", labelContainerClassName),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => toggle(i),
+              className: "w-full flex justify-between items-center p-4 text-left dark:text-white",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn("font-semibold", labelClassName), children: item.label }),
+                typeof icon === "function" ? icon(isOpen) : icon ?? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn("w-5 h-5 transition-transform", isOpen && "rotate-180"),
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M19 9l-7 7-7-7",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "overflow-hidden bg-gray-50 px-4 transition-all dark:bg-gray-700 dark:text-white",
+                isOpen ? "max-h-40 py-4" : "max-h-0",
+                descriptionClassName
+              ),
+              children: item.description
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) });
+};
+const AlertVariants = {
+  outline: "outline-1",
+  solid: ""
+};
+const IconColors = {
+  success: "fill-success-700 dark:fill-success",
+  info: "fill-info-700 dark:fill-info",
+  error: "fill-error-700 dark:fill-error",
+  warning: "fill-warning-700 dark:fill-warning",
+  primary: "fill-primary-700 dark:fill-primary",
+  secondary: "dark:fill-secondary"
+};
+const AlertType = {
+  success: "bg-success-30/50 outline-success-700 text-success-700 dark:bg-success-dark-30/20 dark:text-success",
+  info: "bg-info-30/50 outline-info-700 text-info-700 dark:bg-info-dark-30/20 dark:text-info",
+  warning: "bg-warning-30/50 outline-warning-700 text-warning-700 dark:bg-warning-dark-30/20 dark:text-warning",
+  error: "bg-error-30/50 outline-error-700 text-error-700 dark:bg-error-dark-30/20 dark:text-error",
+  primary: "bg-primary-30/50 outline-primary-700 text-primary-700 dark:bg-primary-dark-30/20 dark:text-primary",
+  secondary: "bg-secondary-30/50 outline-secondary-700 dark:bg-secondary-dark-30/20 dark:text-secondary"
+};
+const Alert = ({
+  title,
+  description,
+  icon,
+  titleClassName,
+  descriptionClassName,
+  action,
+  withClose = false,
+  iconColor = "secondary",
+  type = "secondary",
+  variant = "outline"
+}) => {
+  const [visible, setVisible] = useState(true);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs("div", { id: "alopeAlert", className: cn("flex gap-2 p-4 rounded-md w-full", AlertType[type], AlertVariants[variant]), children: [
+    icon ?? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: cn("w-6 h-6", IconColors[iconColor]), children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex md:flex-row flex-col justify-between md:items-center w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: cn("font-medium", titleClassName), children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: cn("text-sm", descriptionClassName), children: description }),
+        withClose && (typeof action === "function" ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: action() }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: action }))
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: !withClose && (typeof action === "function" ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: action() }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })) })
+    ] }),
+    withClose && /* @__PURE__ */ jsx("svg", { onClick: () => setVisible(false), viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", className: "w-7 h-7 hover:cursor-pointer", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+  ] });
+};
+const AvatarSize = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-12 h-12 text-sm",
+  lg: "w-16 h-16 text-base"
+};
+const AvatarVariant = {
+  solid: "bg-opacity-100",
+  outline: "bg-transparent border-2"
+};
+const AvatarShape = {
+  sharp: "rounded-none",
+  cornered: "rounded-md",
+  rounded: "rounded-full"
+};
+const AvatarFallbackColor = {
+  primary: "bg-primary dark:bg-primary-dark text-white",
+  error: "bg-error dark:bg-error-dark text-white",
+  warning: "bg-warning dark:bg-warning-dark text-white",
+  success: "bg-success dark:bg-success-dark text-white",
+  info: "bg-info dark:bg-info-dark text-white",
+  secondary: "bg-secondary dark:bg-secondary-dark text-white"
+};
+const Avatar = ({
+  imageSrc,
+  fallbackName,
+  ring = false,
+  ringClassName,
+  shape = "rounded",
+  variant = "solid",
+  fallbackColor = "primary",
+  size = "md",
+  alt = "avatar",
+  status,
+  className
+}) => {
+  const [imageError, setImageError] = useState(false);
+  const AvatarSizeClass = AvatarSize[size];
+  const AvatarVariantClass = AvatarVariant[variant];
+  const AvatarShapeClass = AvatarShape[shape];
+  const AvatarFallbackColorClass = AvatarFallbackColor[fallbackColor];
+  const RingClass = ring ? cn("ring-2 ring-offset-2", ringClassName || "ring-primary dark:ring-primary-dark") : "";
+  const initials = fallbackName ? fallbackName.split(" ").map((n) => n[0]).join("").toUpperCase() : "?";
+  const content = imageError || !imageSrc ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center font-semibold",
+        AvatarFallbackColorClass,
+        AvatarSizeClass,
+        AvatarShapeClass,
+        AvatarVariantClass,
+        RingClass,
+        className
+      ),
+      children: initials
+    }
+  ) : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: imageSrc,
+      alt,
+      onError: () => setImageError(true),
+      className: cn(
+        "object-cover",
+        AvatarSizeClass,
+        AvatarShapeClass,
+        AvatarVariantClass,
+        RingClass,
+        className
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+    content,
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-0 w-3 h-3 rounded-full border-2",
+          status === "online" ? "bg-success" : "bg-secondary-700 dark:bg-secondary-dark-700",
+          "border-white"
+        )
+      }
+    )
+  ] });
+};
+const AvatarGroup = ({
+  avatars,
+  maxVisible = 3,
+  size = "md",
+  overlap = "-ml-3",
+  className
+}) => {
+  const visibleAvatars = avatars.slice(0, maxVisible);
+  const remaining = avatars.length - maxVisible;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", className), children: [
+    visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx("div", { className: cn(index !== 0 && overlap), children: /* @__PURE__ */ jsx(Avatar, { ...avatar, size }) }, index)),
+    remaining > 0 && /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex items-center justify-center bg-secondary dark:bg-secondary-dark font-medium",
+      overlap,
+      size === "sm" && "w-8 h-8 text-xs rounded-full",
+      size === "md" && "w-12 h-12 text-sm rounded-full",
+      size === "lg" && "w-16 h-16 text-base rounded-full"
+    ), children: [
+      "+",
+      remaining
+    ] })
+  ] });
+};
+const BadgeVariants = {
+  default: "bg-primary-30 text-primary-700 dark:bg-primary-dark-30",
+  secondary: "bg-secondary-30 text-black dark:bg-secondary-dark-30",
+  success: "bg-success-30 text-green-700 dark:bg-success-dark-30",
+  error: "bg-error-30 text-red-700 dark:bg-error-dark-30",
+  info: "bg-info-30 text-blue-700 dark:bg-info-dark-30",
+  warning: "bg-warning-30 text-amber-700 dark:bg-warning-dark-30"
+};
+const BadgePositions = {
+  "top-right": "absolute -top-3 -right-3",
+  "top-left": "absolute -top-3 -left-3",
+  "bottom-right": "absolute -bottom-3 -right-3",
+  "bottom-left": "absolute -bottom-3 -left-3"
+};
+const Badge = ({
+  children,
+  variant = "default",
+  position = "top-right",
+  isAbsolute = false,
+  className,
+  icon
+}) => {
+  const variantClass = BadgeVariants[variant];
+  const positionClass = isAbsolute ? BadgePositions[position] : "";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        `inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold`,
+        variantClass,
+        positionClass,
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mr-1", children: icon }),
+        children
+      ]
+    }
+  );
+};
+const BottomNavbarAction = ({
+  label,
+  icon,
+  value,
+  selectedValue,
+  onChangeValue,
+  labelClassName,
+  className
+}) => {
+  const isActive = value === selectedValue;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onChangeValue?.(value),
+      className: cn(
+        `inline-flex flex-1 flex-col items-center justify-center p-5 group`,
+        isActive ? "bg-secondary-30-50 dark:bg-secondary/10" : "hover:bg-secondary-30 dark:hover:bg-secondary/30",
+        className
+      ),
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: cn(
+          `text-sm`,
+          isActive ? "text-primary" : "text-secondary-dark-700 dark:text-secondary-dark group-hover:text-secondary-700 dark:group-hover:text-white",
+          labelClassName
+        ), children: label })
+      ]
+    }
+  );
+};
+const BottomNavbar = ({
+  children,
+  className,
+  value,
+  onChangeValue
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `fixed bottom-0 left-0 z-50 w-full bg-white border-t border-secondary dark:bg-gray-800 dark:border-secondary-dark-700 ${className ?? ""}`, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full max-w-lg md:max-w-md mx-auto font-medium", children: React.Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      if (child.type === BottomNavbarAction) {
+        return cloneElement(child, {
+          selectedValue: value,
+          onChangeValue
+        });
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[BottomNavbar] Invalid child component: Only <BottomNavbarAction> is allowed.
+Received:`,
+            child.type
+          );
+        }
+        return null;
+      }
+    }
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[BottomNavbar] Invalid child: Only <BottomNavbarAction> components are allowed.`);
+    }
+    return null;
+  }) }) });
+};
+const Breadcrumb = ({
+  data,
+  labelClassName,
+  currentLinkClassName,
+  linkClassName,
+  separatorClassName,
+  separator = ">"
+}) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap gap-2 text-gray-600", children: data.map((item, index) => {
+    const isLast = item.path === null || index === data.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
+      !isLast && item.path ? /* @__PURE__ */ jsxs(Link, { to: item.path, className: cn("hover:underline text-primary dark:text-primary-dark-30 flex items-center text-sm", labelClassName, linkClassName), children: [
+        item.icon && /* @__PURE__ */ jsx("span", { className: "mr-1", children: item.icon }),
+        item.label
+      ] }) : /* @__PURE__ */ jsxs("span", { className: cn("font-semibold dark:text-white flex items-center text-sm", labelClassName, currentLinkClassName), children: [
+        item.icon && /* @__PURE__ */ jsx("span", { className: "mr-1", children: item.icon }),
+        item.label
+      ] }),
+      !isLast && /* @__PURE__ */ jsx("span", { className: cn("mx-2 font-semibold dark:text-white", separatorClassName), children: separator })
+    ] }, index);
+  }) }) });
+};
+const ButtonSizes = {
+  sm: "px-3 py-2 text-sm font-medium rounded-sm",
+  md: "px-4 py-2 text-base font-semibold tracking-[.2px] rounded-md",
+  lg: "px-6 py-3 text-lg font-semibold rounded-lg"
+};
+const ButtonRadius = {
+  regular: "rounded rounded-md",
+  stadium: "rounded rounded-full"
+};
+const ButtonVariantsMap = {
+  primary: {
+    solid: "bg-primary text-white hover:bg-primary-dark dark:bg-primary-dark dark:hover:bg-primary-dark/70",
+    outline: "border border-primary text-primary hover:bg-primary-20 dark:bg-primary-dark/30 dark:border-primary-dark dark:text-white dark:hover:bg-primary-dark/70",
+    ghost: "text-primary hover:bg-primary-30 dark:text-primary-dark dark:hover:bg-primary-dark/70 dark:hover:text-white",
+    plain: "text-primary dark:text-primary-dark"
+  },
+  secondary: {
+    solid: "bg-secondary text-black hover:bg-secondary-dark/80 dark:bg-secondary-dark dark:text-white dark:hover:bg-secondary-dark/70",
+    outline: "border border-secondary text-black hover:bg-secondary-20 dark:bg-secondary-dark/30 dark:border-secondary-dark dark:text-white dark:hover:bg-secondary-dark/70",
+    ghost: "text-black hover:bg-secondary-30 dark:text-white dark:hover:bg-secondary-dark/70",
+    plain: "text-black dark:text-white"
+  },
+  success: {
+    solid: "bg-success text-white hover:bg-success-dark dark:bg-success-dark dark:hover:bg-success-dark/70",
+    outline: "border border-success text-success hover:bg-success-20 dark:bg-success-dark/30 dark:border-success-dark dark:text-white dark:hover:bg-success-dark/70",
+    ghost: "text-success hover:bg-success-30 dark:text-success-dark dark:hover:bg-success-dark/70 dark:hover:text-white",
+    plain: "text-success dark:text-success-dark"
+  },
+  warning: {
+    solid: "bg-warning text-white hover:bg-warning-dark dark:bg-warning-dark dark:hover:bg-warning-dark/70",
+    outline: "border border-warning text-warning hover:bg-warning-20 dark:bg-warning-dark/30 dark:border-warning-dark dark:text-white dark:hover:bg-warning-dark/70",
+    ghost: "text-warning hover:bg-warning-30 dark:text-warning-dark dark:hover:bg-warning-dark/70 dark:hover:text-white",
+    plain: "text-warning dark:text-warning-dark"
+  },
+  error: {
+    solid: "bg-error text-white hover:bg-error-dark dark:bg-error-dark dark:hover:bg-error-dark/70",
+    outline: "border border-error text-error hover:bg-error-20 dark:bg-error-dark/30 dark:border-error-dark dark:text-white dark:hover:bg-error-dark/70",
+    ghost: "text-error hover:bg-error-30 dark:text-error-dark dark:hover:bg-error-dark/70 dark:hover:text-white",
+    plain: "text-error dark:text-error-dark"
+  },
+  info: {
+    solid: "bg-info text-white hover:bg-info-dark dark:bg-info-dark dark:hover:bg-info-dark/70",
+    outline: "border border-info text-info hover:bg-info-20 dark:bg-info-dark/30 dark:border-info-dark dark:text-white dark:hover:bg-info-dark/70",
+    ghost: "text-info hover:bg-info-30 dark:text-info-dark dark:hover:bg-info-dark/70 dark:hover:text-white",
+    plain: "text-info dark:text-info-dark"
+  }
+};
+const getVariantClasses = (variant, variantType) => {
+  return ButtonVariantsMap[variantType][variant] || "";
+};
+const Button = ({
+  children,
+  onClick,
+  size = "md",
+  to,
+  type = "button",
+  disabled = false,
+  variant = "solid",
+  variantType = "primary",
+  borderType = "regular",
+  fullWidth = false,
+  prefixIcon,
+  suffixIcon,
+  className
+}) => {
+  const buttonBorderClass = ButtonRadius[borderType];
+  const variantClass = getVariantClasses(variant, variantType);
+  const sizeClass = ButtonSizes[size] || "";
+  const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
+  const fullWidthClass = fullWidth ? "w-full" : "";
+  return to ? /* @__PURE__ */ jsxs(
+    Link,
+    {
+      to,
+      className: cn(`inline-flex items-center justify-center transition-all duration-[170ms] hover:scale-[98%]`, variantClass, sizeClass, disabledClass, fullWidthClass, buttonBorderClass, className),
+      children: [
+        prefixIcon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: prefixIcon }),
+        children,
+        suffixIcon && /* @__PURE__ */ jsx("span", { className: "ml-2", children: suffixIcon })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "button",
+    {
+      disabled,
+      type,
+      onClick,
+      className: cn(`inline-flex items-center justify-center transition-all duration-[170ms] hover:scale-[98%]`, variantClass, sizeClass, disabledClass, fullWidthClass, buttonBorderClass, className),
+      children: [
+        prefixIcon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: prefixIcon }),
+        children,
+        suffixIcon && /* @__PURE__ */ jsx("span", { className: "ml-2", children: suffixIcon })
+      ]
+    }
+  );
+};
+const Card = ({
+  title,
+  description,
+  image,
+  onClick,
+  footer,
+  horizontal = false,
+  size = "md",
+  containerClassName,
+  descriptionClassName,
+  imageClassName,
+  titleClassName,
+  ribbonClassName,
+  ribbon,
+  children
+}) => {
+  const sizeClasses2 = {
+    sm: "max-w-xs",
+    md: "max-w-sm",
+    lg: "max-w-md",
+    full: "w-full"
+  };
+  const renderImage = () => {
+    if (!image) return null;
+    if (typeof image === "string") {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: image,
+          alt: title,
+          className: cn(
+            "object-cover w-full h-48 md:h-full",
+            horizontal ? "md:w-[40%]" : "w-full",
+            imageClassName
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full h-48 md:h-full",
+          horizontal ? "md:w-[40%]" : "w-full",
+          imageClassName
+        ),
+        children: image
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick,
+      className: cn(
+        "relative bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer overflow-hidden dark:border dark:bg-gray-800 dark:border-gray-700",
+        horizontal ? "flex flex-col md:flex-row" : "flex flex-col",
+        sizeClasses2[size] || size,
+        containerClassName
+      ),
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderImage(),
+        /* @__PURE__ */ jsxs("div", { className: "p-4 flex flex-col justify-between flex-1", children: [
+          ribbon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "bg-red-500 text-white py-1 absolute text-[10px] md:text-xs w-[150px] text-center z-10",
+                horizontal ? "top-3 -left-[50px] -rotate-45" : "top-3 -right-[50px] rotate-45",
+                ribbonClassName
+              ),
+              children: ribbon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            title && /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: cn(
+                  "text-lg font-semibold text-gray-800 line-clamp-1 dark:text-white",
+                  titleClassName
+                ),
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-2 text-secondary-700 font-medium text-sm mb-2 line-clamp-3 dark:text-secondary-dark",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            )
+          ] }),
+          footer && /* @__PURE__ */ jsx("div", { className: "mt-2", children: footer })
+        ] })
+      ] })
+    }
+  );
+};
+const CheckboxInput = React.forwardRef(
+  ({
+    label,
+    description,
+    className = "",
+    indeterminate = false,
+    descriptionClassName,
+    checkboxClassName,
+    labelClassName,
+    disabled,
+    readOnly,
+    children,
+    checked,
+    defaultChecked,
+    onChange,
+    ...props
+  }, ref) => {
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
+    const isControlled = typeof checked !== "undefined";
+    const isChecked = isControlled ? checked : internalChecked;
+    React.useEffect(() => {
+      if (internalRef.current) {
+        internalRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalChecked(e.target.checked);
+      }
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center gap-3 cursor-pointer select-none",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center justify-center w-5 h-5", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...props,
+                ref: internalRef,
+                type: "checkbox",
+                readOnly,
+                disabled,
+                onChange: handleChange,
+                checked: isChecked,
+                "aria-checked": indeterminate ? "mixed" : isChecked ? "true" : "false",
+                className: "absolute w-full h-full opacity-0 cursor-pointer peer"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "w-5 h-5 rounded border border-gray-300 dark:border-gray-600 flex items-center justify-center transition-colors duration-200",
+                  {
+                    "bg-primary border-primary dark:bg-primary-dark dark:border-primary-dark": isChecked || indeterminate
+                  },
+                  checkboxClassName
+                ),
+                children: indeterminate ? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "w-3 h-3 text-white",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    children: /* @__PURE__ */ jsx("path", { d: "M6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" })
+                  }
+                ) : isChecked ? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "w-3 h-3 text-white fill-white",
+                    viewBox: "0 0 20 20",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M16.707 5.293a1 1 0 010 1.414l-7.778 7.778a1 1 0 01-1.414 0L3.293 10.05a1 1 0 111.414-1.414l3.536 3.535 7.071-7.071a1 1 0 011.414 0z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                ) : null
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            children,
+            label && /* @__PURE__ */ jsx("span", { className: cn("font-medium text-sm dark:text-white", labelClassName), children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: cn("text-secondary-700 text-sm dark:text-secondary-dark", descriptionClassName), children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+const CheckboxSizes = {
+  sm: {
+    container: "text-sm",
+    checkbox: "w-4 h-4",
+    label: "pl-2"
+  },
+  md: {
+    container: "text-base",
+    checkbox: "w-5 h-5",
+    label: "pl-2"
+  },
+  lg: {
+    container: "text-lg",
+    checkbox: "w-6 h-6",
+    label: "pl-3"
+  }
+};
+const CheckboxVariants = {
+  solid: {
+    label: "border-transparent bg-primary/90 text-white hover:bg-primary-700 dark:bg-primary-dark dark:hover:bg-primary-dark-700",
+    checked: "bg-primary-700 hover:bg-primary-700 dark:bg-primary-dark-700",
+    checkbox: "",
+    checkedCheckbox: "border-white bg-primary dark:bg-primary"
+  },
+  subtle: {
+    label: "border-slate-200 border-none bg-secondary/30 hover:bg-primary/30 hover:text-primary-700 dark:text-white dark:bg-primary-dark/50 hover:dark:text-primary-30",
+    checked: "bg-primary/30 text-primary-700 border-primary/30 dark:border-none hover:bg-primary-700/15 dark:bg-primary/30 dark:text-white hover:dark:text-white dark:hover:bg-primary-dark/50",
+    checkbox: "dark:bg-primary dark:border-none",
+    checkedCheckbox: "border-primary-700 bg-primary-700 dark:bg-primary"
+  },
+  outline: {
+    label: "border-secondary-700 bg-transparent hover:bg-primary/30 hover:text-primary-700 dark:hover:text-white hover:border-primary-700 dark:text-white dark:border-secondary-dark dark:hover:bg-primary-dark/20",
+    checked: "border-primary bg-primary/30 text-primary-700 dark:border-primary-700 dark:bg-primary-dark/20",
+    checkbox: "dark:border-secondary-dark",
+    checkedCheckbox: "border-primary bg-primary-700 dark:border-primary-700 dark:border-primary dark:bg-primary"
+  }
+};
+const ListCheckboxInput = ({
+  name,
+  options,
+  selectedValues,
+  onValueChange,
+  containerClassName,
+  inputGroupClassName,
+  inputLabelClassName,
+  inputCheckboxClassName,
+  variant = "subtle",
+  checkboxSize = "md",
+  disabled,
+  ...props
+}) => {
+  const sizeClasses2 = CheckboxSizes[checkboxSize];
+  const variantClasses = CheckboxVariants[variant];
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-3", containerClassName), children: options.map((option, index) => {
+    const isChecked = selectedValues?.some((selected) => selected.value === option.value) ?? false;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "relative flex items-center rounded-md cursor-pointer transition-all duration-200 border px-3 py-2",
+          sizeClasses2.container,
+          variantClasses.label,
+          {
+            [variantClasses.checked]: isChecked,
+            "opacity-50 cursor-not-allowed": disabled
+          },
+          inputGroupClassName?.(option, isChecked)
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              name,
+              value: option.value,
+              checked: isChecked,
+              onChange: () => {
+                const newSelected = isChecked ? selectedValues?.filter((val) => val.value !== option.value) || [] : [...selectedValues || [], option];
+                onValueChange(newSelected);
+              },
+              disabled,
+              className: cn("absolute opacity-0 w-full h-full cursor-pointer", { "cursor-not-allowed": disabled }),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex items-center justify-center rounded-md border transition-all duration-200",
+                sizeClasses2.checkbox,
+                variantClasses.checkbox,
+                {
+                  [variantClasses.checkedCheckbox]: isChecked
+                },
+                inputCheckboxClassName?.(option, isChecked)
+              ),
+              children: isChecked && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 20 20",
+                  fill: "white",
+                  className: "w-3 h-3",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M16.707 5.293a1 1 0 010 1.414l-7.778 7.778a1 1 0 01-1.414 0L3.293 10.05a1 1 0 111.414-1.414l3.536 3.535 7.071-7.071a1 1 0 011.414 0z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn("ml-2", sizeClasses2.label, inputLabelClassName?.(option, isChecked)), children: option.label })
+        ]
+      },
+      index
+    );
+  }) });
+};
+const CodeInputSize = {
+  sm: "w-10 h-10 text-sm",
+  md: "w-12 h-12 text-base",
+  lg: "w-14 h-14 text-lg",
+  xl: "w-16 h-16 text-xl"
+};
+const CodeInput = ({
+  id,
+  label,
+  length,
+  value,
+  disabled,
+  labelClassName,
+  name,
+  onCodeChange,
+  inputSize = "md",
+  ...props
+}) => {
+  const inputRefs = useRef([]);
+  const inputSizeClasses = CodeInputSize[inputSize];
+  const findFirstEmptyIndex = () => {
+    for (let i = 0; i < length; i++) {
+      if (!inputRefs.current[i]?.value) {
+        return i;
+      }
+    }
+    return -1;
+  };
+  const handleInputChange = (index) => {
+    const code = inputRefs.current.map((input) => input?.value || "").join("");
+    if (onCodeChange) {
+      onCodeChange(code);
+    }
+    if (inputRefs.current[index]?.value && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handleFocus = (index) => {
+    const firstEmptyIndex = findFirstEmptyIndex();
+    if (firstEmptyIndex !== -1 && firstEmptyIndex < index) {
+      inputRefs.current[firstEmptyIndex]?.focus();
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" && !inputRefs.current[index]?.value && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").slice(0, length);
+    pastedData.split("").forEach((char, index) => {
+      if (inputRefs.current[index]) {
+        inputRefs.current[index].value = char;
+        handleInputChange(index);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id || name, className: cn("block text-sm font-medium mb-1 dark:text-white", labelClassName), children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", onPaste: handlePaste, children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputRefs.current[index] = el;
+        },
+        type: "text",
+        disabled,
+        value: value?.[index],
+        maxLength: 1,
+        onChange: () => handleInputChange(index),
+        onKeyDown: (e) => handleKeyDown(e, index),
+        onFocus: () => handleFocus(index),
+        className: cn(
+          "text-center border rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary border-secondary dark:text-white dark:placeholder:text-white",
+          inputSizeClasses,
+          {
+            "bg-secondary/40 cursor-not-allowed ": disabled
+          }
+        ),
+        ...props
+      },
+      index
+    )) })
+  ] });
+};
+function Collection({
+  data,
+  title,
+  className,
+  wrapperClassName,
+  children,
+  suffixIcon,
+  activeItem,
+  onChangeActive
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-3 border border-secondary-700 inline-block dark:border-secondary-dark-700 rounded-md dark:text-white", className), children: [
+    title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: title }),
+    data.length > 0 ? /* @__PURE__ */ jsx("ul", { className: cn("space-y-3", wrapperClassName), children: data.map((item, index) => {
+      const isActive = item.id === activeItem;
+      return /* @__PURE__ */ jsx("li", { children: children ? /* @__PURE__ */ jsx("div", { onClick: () => onChangeActive?.(item, index), children: children(item, index, isActive) }) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: () => onChangeActive?.(item, index),
+          className: cn(
+            "p-3 border border-secondary-700 dark:border-secondary-dark-700 rounded-md flex gap-3 items-center justify-between cursor-pointer",
+            { "bg-primary-100 dark:bg-primary-dark-100": isActive }
+          ),
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "font-bold", children: item.name || `Item ${item.id}` }),
+            suffixIcon && /* @__PURE__ */ jsx("span", { children: typeof suffixIcon === "function" ? suffixIcon(item, index, isActive) : suffixIcon })
+          ]
+        }
+      ) }, item.id);
+    }) }) : /* @__PURE__ */ jsx("p", { children: "No items to display." })
+  ] });
+}
+const TextInput = React.forwardRef(
+  ({
+    label,
+    id,
+    name,
+    error,
+    labelClassName,
+    errorClassName,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: id || name, className: cn("block text-sm font-medium mb-1 dark:text-white", labelClassName), children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: id || name,
+          name,
+          className: `block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:text-white dark:placeholder:text-white ${error ? "border-error dark:border-error-dark" : "border-secondary dark:border-secondary-dark"} ${props.disabled ? "bg-secondary/30 cursor-not-allowed" : ""}`,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm text-error", errorClassName), children: error })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+const DatePickerColors = {
+  success: {
+    input: "focus:ring-success focus:border-success",
+    outline: "outline-success dark:outline-success-dark",
+    header: "bg-success dark:bg-success-dark",
+    icon: "hover:bg-success-700 dark:hover:bg-success-dark-700",
+    day: "bg-success dark:bg-success-dark"
+  },
+  info: {
+    input: "focus:ring-info focus:border-info",
+    outline: "outline-info dark:outline-info-dark",
+    header: "bg-info dark:bg-info-dark",
+    icon: "hover:bg-info-700 dark:hover:bg-info-dark-700",
+    day: "bg-info dark:bg-info-dark"
+  },
+  error: {
+    input: "focus:ring-error focus:border-error",
+    outline: "outline-error dark:outline-error-dark",
+    header: "bg-error dark:bg-error-dark",
+    icon: "hover:bg-error-700 dark:hover:bg-error-dark-700",
+    day: "bg-error dark:bg-error-dark"
+  },
+  warning: {
+    input: "focus:ring-warning focus:border-warning",
+    outline: "outline-warning dark:outline-warning-dark",
+    header: "bg-warning dark:bg-warning-dark",
+    icon: "hover:bg-warning-700 dark:hover:bg-warning-dark-700",
+    day: "bg-warning dark:bg-warning-dark"
+  },
+  default: {
+    input: "",
+    outline: "",
+    header: "",
+    icon: "",
+    day: ""
+  }
+};
+const DatePicker = ({
+  label,
+  id,
+  name,
+  color = "default",
+  labelClassName,
+  selectedDate: initialSelectedDate,
+  onDateChange
+}) => {
+  const [selectedDate, setSelectedDate] = useState(
+    initialSelectedDate || null
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentMonth, setCurrentMonth] = useState(
+    selectedDate ? selectedDate.getMonth() : (/* @__PURE__ */ new Date()).getMonth()
+  );
+  const [currentYear, setCurrentYear] = useState(
+    selectedDate ? selectedDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear()
+  );
+  const [calendarPosition, setCalendarPosition] = useState("bottom");
+  const datePickerRef = useRef(null);
+  const inputRef = useRef(null);
+  const inputClasess = DatePickerColors[color].input;
+  const dayClasess = DatePickerColors[color].day;
+  const headerClasess = DatePickerColors[color].header;
+  const iconClasess = DatePickerColors[color].icon;
+  const outlineClasess = DatePickerColors[color].outline;
+  useLayoutEffect(() => {
+    if (isOpen && inputRef.current) {
+      const inputRect = inputRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - inputRect.bottom;
+      const calendarHeight = 300;
+      if (spaceBelow < calendarHeight) {
+        setCalendarPosition("top");
+      } else {
+        setCalendarPosition("bottom");
+      }
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (initialSelectedDate) {
+      setSelectedDate(initialSelectedDate);
+      setCurrentMonth(initialSelectedDate.getMonth());
+      setCurrentYear(initialSelectedDate.getFullYear());
+    }
+  }, [initialSelectedDate]);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (datePickerRef.current && !datePickerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [datePickerRef]);
+  const handleDateChange = (date) => {
+    setSelectedDate(date);
+    if (onDateChange) {
+      onDateChange(date);
+    }
+    setIsOpen(false);
+  };
+  const daysInMonth = (month, year) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+  const firstDayOfMonth = (month, year) => {
+    return new Date(year, month, 1).getDay();
+  };
+  const renderCalendar = () => {
+    const days = [];
+    const totalDays = daysInMonth(currentMonth, currentYear);
+    const firstDay = firstDayOfMonth(currentMonth, currentYear);
+    for (let i = 0; i < firstDay; i++) {
+      days.push(/* @__PURE__ */ jsx("div", { className: "w-8 h-8" }, `empty-${i}`));
+    }
+    for (let i = 1; i <= totalDays; i++) {
+      const date = new Date(currentYear, currentMonth, i);
+      const isSelected = selectedDate && date.getDate() === selectedDate.getDate() && date.getMonth() === selectedDate.getMonth() && date.getFullYear() === selectedDate.getFullYear();
+      days.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              `px-4 py-2 flex items-center justify-center cursor-pointer rounded-md text-sm font-medium hover:bg-secondary dark:hover:bg-secondary-dark`,
+              {
+                "bg-primary dark:bg-primary-dark text-white": isSelected,
+                [dayClasess]: isSelected
+              }
+            ),
+            onClick: () => handleDateChange(date),
+            children: i
+          },
+          i
+        )
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-1 p-2", children: [
+      ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => /* @__PURE__ */ jsx("div", { className: "w-8 h-8 flex items-center justify-center font-semibold", children: day }, day)),
+      days
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", ref: datePickerRef, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id || name, className: cn("block text-sm font-medium mb-1 dark:text-white", labelClassName), children: label }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        type: "text",
+        readOnly: true,
+        ref: inputRef,
+        value: selectedDate ? selectedDate.toLocaleDateString() : "",
+        onClick: () => setIsOpen(!isOpen),
+        placeholder: "Select a date",
+        className: cn(
+          "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:placeholder:text-white dark:text-white",
+          inputClasess
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: cn(
+      `absolute overflow-auto z-10 w-full bg-white outline-3 outline-primary dark:outline-primary-dark rounded-md shadow-lg`,
+      calendarPosition === "top" ? "bottom-full mb-2" : "top-full mt-2",
+      outlineClasess
+    ), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(
+        "flex justify-between items-center mb-1 bg-primary dark:bg-primary-dark p-2 text-white",
+        headerClasess
+      ), children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              if (currentMonth === 0) {
+                setCurrentMonth(11);
+                setCurrentYear(currentYear - 1);
+              } else {
+                setCurrentMonth(currentMonth - 1);
+              }
+            },
+            className: cn(
+              "px-2 py-1 rounded-md hover:bg-primary-700 dark:hover:bg-primary-dark-700 hover:cursor-pointer",
+              iconClasess
+            ),
+            children: "<"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold", children: new Date(currentYear, currentMonth).toLocaleString("default", {
+            month: "long"
+            // year: 'numeric',
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-20", children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              type: "number",
+              value: currentYear,
+              onChange: (e) => setCurrentYear(Number(e.target.value))
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              if (currentMonth === 11) {
+                setCurrentMonth(0);
+                setCurrentYear(currentYear + 1);
+              } else {
+                setCurrentMonth(currentMonth + 1);
+              }
+            },
+            className: cn(
+              "px-2 py-1 rounded-md hover:bg-primary-700 dark:hover:bg-primary-dark-700 hover:cursor-pointer",
+              iconClasess
+            ),
+            children: ">"
+          }
+        )
+      ] }),
+      renderCalendar()
+    ] })
+  ] });
+};
+const FABSizes = {
+  sm: "w-11 h-11 font-medium rounded-sm rounded rounded-full",
+  md: "w-14 h-14 font-semibold tracking-[.2px] rounded-md rounded rounded-full",
+  lg: "w-19 h-19 text-lg font-semibold rounded-lg rounded rounded-full"
+};
+const FAB = ({
+  children,
+  direction = "vertical",
+  size = "md",
+  variant = "solid",
+  variantType = "primary",
+  isOpen,
+  onOpen,
+  icon = "+"
+}) => {
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      setIsAnimatingOut(false);
+    } else if (shouldRender) {
+      setIsAnimatingOut(true);
+      const timeout = setTimeout(() => {
+        setShouldRender(false);
+        setIsAnimatingOut(false);
+      }, 300);
+      return () => clearTimeout(timeout);
+    }
+  }, [isOpen, shouldRender]);
+  const directionClasses = {
+    vertical: "flex-col-reverse space-y-2 space-y-reverse mb-2",
+    horizontal: "flex-row-reverse space-x-2 space-x-reverse mr-2"
+  };
+  const sizeClasses2 = FABSizes[size];
+  const variantClasses = getVariantClasses(variant, variantType);
+  const animatedChildren = Children.toArray(children).map((child, index, arr) => {
+    if (!isValidElement(child)) return child;
+    const reverseIndex = arr.length - 1 - index;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { animationDelay: `${isAnimatingOut ? reverseIndex * 100 : index * 100}ms` },
+        className: cn(
+          !isAnimatingOut && "opacity-0",
+          isAnimatingOut ? "animate-pop-out" : "animate-pop"
+        ),
+        children: child
+      },
+      index
+    );
+  });
+  return /* @__PURE__ */ jsx("div", { className: "fixed bottom-8 right-8 flex flex-col items-end z-50", children: /* @__PURE__ */ jsxs("div", { className: direction === "vertical" ? "block" : "flex", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex items-center transition-all duration-300 ease-in-out", directionClasses[direction]), children: shouldRender && animatedChildren }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onOpen,
+        className: cn("shadow-lg flex w-full items-center justify-center hover:cursor-pointer", sizeClasses2, variantClasses),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `transform transition-transform duration-300 ${isOpen ? "rotate-45" : "rotate-0"}`,
+            children: icon
+          }
+        )
+      }
+    )
+  ] }) });
+};
+const FileUpload = ({
+  acceptedFiles = "image/*",
+  maxFiles = 1,
+  inputLabel,
+  maxKiloByte = 2048,
+  helperText,
+  mediaCapture,
+  mode = "dropzone",
+  clearable = true,
+  onFilesChange
+}) => {
+  const [files, setFiles] = useState([]);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isDragActive, setIsDragActive] = useState(false);
+  const inputRef = useRef(null);
+  const handleFileChange = (event) => {
+    const newFiles = event.target.files ? Array.from(event.target.files) : [];
+    if (newFiles.length === 0) return;
+    const validFiles = handleValidation(newFiles);
+    if (!validFiles.length) return;
+    const allFiles = maxFiles === 1 ? validFiles.slice(0, 1) : [...files, ...validFiles].slice(0, maxFiles);
+    setFiles(allFiles);
+    onFilesChange(allFiles);
+    setErrorMessage("");
+    inputRef.current.value = "";
+  };
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    setIsDragActive(true);
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    setIsDragActive(false);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setIsDragActive(false);
+    const droppedFiles = Array.from(event.dataTransfer.files);
+    const validFiles = handleValidation(droppedFiles);
+    if (!validFiles.length) return;
+    const allFiles = maxFiles === 1 ? validFiles.slice(0, 1) : [...files, ...validFiles].slice(0, maxFiles);
+    setFiles(allFiles);
+    onFilesChange(allFiles);
+    setErrorMessage("");
+    inputRef.current.value = "";
+  };
+  const handleClear = (event, index) => {
+    event.stopPropagation();
+    const restFiles = files.filter((_, i) => i !== index);
+    setFiles(restFiles);
+    onFilesChange(restFiles);
+    if (restFiles.length === 0 && inputRef.current) {
+      inputRef.current.value = "";
+    }
+  };
+  const handleClick = () => {
+    if (inputRef.current) {
+      inputRef.current.click();
+    }
+  };
+  const isFileAccepted = (file, accepted) => {
+    const acceptedList = accepted.split(",").map((type) => type.trim());
+    return acceptedList.some((type) => {
+      if (type === "") return false;
+      if (type === file.type) return true;
+      if (type.endsWith("/*")) {
+        const baseType = type.split("/")[0];
+        return file.type.startsWith(baseType + "/");
+      }
+      if (type.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(type.toLowerCase());
+      }
+      return false;
+    });
+  };
+  const handleValidation = (newFiles) => {
+    const maxByte = maxKiloByte * 1024;
+    const tooLarge = newFiles.find((f) => f.size > maxByte);
+    if (tooLarge) {
+      setErrorMessage(
+        `File "${tooLarge.name}" exceeds size limit of ${(maxKiloByte / 1024).toFixed(2)} MB.`
+      );
+      inputRef.current.value = "";
+      return [];
+    }
+    const invalidType = newFiles.find((f) => !isFileAccepted(f, acceptedFiles));
+    if (invalidType) {
+      setErrorMessage(`File type "${invalidType.type}" is not accepted.`);
+      inputRef.current.value = "";
+      return [];
+    }
+    const total = files.length + newFiles.length;
+    if (total > maxFiles) {
+      setErrorMessage(`You can only upload up to ${maxFiles} files.`);
+      inputRef.current.value = "";
+      return [];
+    }
+    return newFiles;
+  };
+  const renderPreview = () => {
+    return files.map((file, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: (e) => e.stopPropagation(),
+        className: "relative pt-7 pb-3 px-5 border border-secondary dark:border-secondary-dark-700 rounded max-w-sm cursor-default",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center max-w-full h-56 mb-3", children: file.type.startsWith("image/") ? /* @__PURE__ */ jsx("img", { src: URL.createObjectURL(file), alt: file.name, className: "max-w-full h-56 object-cover" }) : /* @__PURE__ */ jsx("div", { className: "text-secondary dark:text-secondary-dark text-sm italic", children: "Preview not available" }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-secondary dark:text-secondary-dark text-center", children: file.name }),
+          clearable && files.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 z-10", children: /* @__PURE__ */ jsx("button", { onClick: (event) => handleClear(event, index), className: "w-auto h-auto py-2 px-2 bg-error text-white rounded-xs hover:cursor-pointer", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 256 256",
+              className: "w-4 h-4 fill-white",
+              children: /* @__PURE__ */ jsx("g", { fill: "currentColor", fillRule: "nonzero", stroke: "none", strokeWidth: "1", strokeLinecap: "butt", strokeLinejoin: "miter", strokeMiterlimit: "10", strokeDasharray: "", strokeDashoffset: "0", fontFamily: "none", fontWeight: "none", fontSize: "none", textAnchor: "none", style: { mixBlendMode: "normal" }, children: /* @__PURE__ */ jsx("g", { transform: "scale(5.33333,5.33333)", children: /* @__PURE__ */ jsx("path", { d: "M39.48633,6.97852c-0.39614,0.00936 -0.77249,0.17506 -1.04687,0.46094l-14.43945,14.43945l-14.43945,-14.43945c-0.28248,-0.2909 -0.67069,-0.45506 -1.07617,-0.45508c-0.61064,0.00015 -1.16026,0.37042 -1.38978,0.93629c-0.22952,0.56587 -0.09314,1.21439 0.34486,1.63988l14.43945,14.43945l-14.43945,14.43945c-0.39185,0.37623 -0.54969,0.9349 -0.41265,1.46055c0.13704,0.52565 0.54754,0.93616 1.07319,1.07319c0.52565,0.13704 1.08432,-0.02081 1.46055,-0.41265l14.43945,-14.43945l14.43945,14.43945c0.37623,0.39185 0.9349,0.54969 1.46055,0.41265c0.52565,-0.13704 0.93616,-0.54754 1.07319,-1.07319c0.13704,-0.52565 -0.0208,-1.08432 -0.41265,-1.46055l-14.43945,-14.43945l14.43945,-14.43945c0.44646,-0.42851 0.58398,-1.08719 0.34628,-1.65854c-0.2377,-0.57135 -0.80184,-0.93811 -1.4205,-0.92349z" }) }) })
+            }
+          ) }) })
+        ]
+      },
+      index
+    ));
+  };
+  if (mode === "dropzone") {
+    return /* @__PURE__ */ jsxs("div", { className: "", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex gap-5 flex-wrap items-center-safe justify-center-safe border-4 border-dashed rounded-lg p-6 text-center cursor-pointer dark:text-white",
+            isDragActive ? "border-info dark:border-info-dark" : "border-secondary dark:border-secondary-dark"
+          ),
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragEnter,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          onClick: handleClick,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "file",
+                ref: inputRef,
+                className: "hidden",
+                accept: acceptedFiles,
+                multiple: maxFiles > 1,
+                capture: mediaCapture,
+                onChange: handleFileChange
+              }
+            ),
+            files.length > 0 ? renderPreview() : /* @__PURE__ */ jsx("p", { className: "text-sm md:text-base", children: "Drag & drop files here, or click to select files" })
+          ]
+        }
+      ),
+      errorMessage ? /* @__PURE__ */ jsx("p", { className: "text-error text-sm mt-2", children: errorMessage }) : helperText && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-secondary-dark mt-2", children: helperText })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { onClick: handleClick, className: "cursor-pointer inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: inputRef,
+        accept: acceptedFiles,
+        multiple: maxFiles > 1,
+        capture: mediaCapture,
+        onChange: handleFileChange,
+        className: "hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-2 px-4 py-2 border border-secondary rounded bg-gray-50 hover:bg-secondary-30 text-sm dark:border-secondary-dark dark:bg-gray-700 dark:hover:bg-secondary-dark-700 dark:text-white", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: files.length > 0 ? `${files.length} file${files.length > 1 ? "s" : ""} selected` : inputLabel ?? "Choose file" }) }),
+    files.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-5 flex-wrap mt-2", children: renderPreview() }),
+    errorMessage ? /* @__PURE__ */ jsx("p", { className: "text-error text-sm mt-2", children: errorMessage }) : helperText && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-secondary-dark mt-2", children: helperText })
+  ] });
+};
+const responsiveColsClass$1 = {
+  base: {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    11: "grid-cols-11",
+    12: "grid-cols-12"
+  },
+  sm: {
+    1: "sm:grid-cols-1",
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-3",
+    4: "sm:grid-cols-4",
+    5: "sm:grid-cols-5",
+    6: "sm:grid-cols-6",
+    7: "sm:grid-cols-7",
+    8: "sm:grid-cols-8",
+    9: "sm:grid-cols-9",
+    10: "sm:grid-cols-10",
+    11: "sm:grid-cols-11",
+    12: "sm:grid-cols-12"
+  },
+  md: {
+    1: "md:grid-cols-1",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4",
+    5: "md:grid-cols-5",
+    6: "md:grid-cols-6",
+    7: "md:grid-cols-7",
+    8: "md:grid-cols-8",
+    9: "md:grid-cols-9",
+    10: "md:grid-cols-10",
+    11: "md:grid-cols-11",
+    12: "md:grid-cols-12"
+  },
+  lg: {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+    5: "lg:grid-cols-5",
+    6: "lg:grid-cols-6",
+    7: "lg:grid-cols-7",
+    8: "lg:grid-cols-8",
+    9: "lg:grid-cols-9",
+    10: "lg:grid-cols-10",
+    11: "lg:grid-cols-11",
+    12: "lg:grid-cols-12"
+  },
+  xl: {
+    1: "xl:grid-cols-1",
+    2: "xl:grid-cols-2",
+    3: "xl:grid-cols-3",
+    4: "xl:grid-cols-4",
+    5: "xl:grid-cols-5",
+    6: "xl:grid-cols-6",
+    7: "xl:grid-cols-7",
+    8: "xl:grid-cols-8",
+    9: "xl:grid-cols-9",
+    10: "xl:grid-cols-10",
+    11: "xl:grid-cols-11",
+    12: "xl:grid-cols-12"
+  },
+  "2xl": {
+    1: "2xl:grid-cols-1",
+    2: "2xl:grid-cols-2",
+    3: "2xl:grid-cols-3",
+    4: "2xl:grid-cols-4",
+    5: "2xl:grid-cols-5",
+    6: "2xl:grid-cols-6",
+    7: "2xl:grid-cols-7",
+    8: "2xl:grid-cols-8",
+    9: "2xl:grid-cols-9",
+    10: "2xl:grid-cols-10",
+    11: "2xl:grid-cols-11",
+    12: "2xl:grid-cols-12"
+  }
+};
+const responsiveGapClass$1 = {
+  base: {
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    5: "gap-5",
+    6: "gap-6"
+  },
+  sm: {
+    1: "sm:gap-1",
+    2: "sm:gap-2",
+    3: "sm:gap-3",
+    4: "sm:gap-4",
+    5: "sm:gap-5",
+    6: "sm:gap-6"
+  },
+  md: {
+    1: "md:gap-1",
+    2: "md:gap-2",
+    3: "md:gap-3",
+    4: "md:gap-4",
+    5: "md:gap-5",
+    6: "md:gap-6"
+  },
+  lg: {
+    1: "lg:gap-1",
+    2: "lg:gap-2",
+    3: "lg:gap-3",
+    4: "lg:gap-4",
+    5: "lg:gap-5",
+    6: "lg:gap-6"
+  },
+  xl: {
+    1: "xl:gap-1",
+    2: "xl:gap-2",
+    3: "xl:gap-3",
+    4: "xl:gap-4",
+    5: "xl:gap-5",
+    6: "xl:gap-6"
+  },
+  "2xl": {
+    1: "2xl:gap-1",
+    2: "2xl:gap-2",
+    3: "2xl:gap-3",
+    4: "2xl:gap-4",
+    5: "2xl:gap-5",
+    6: "2xl:gap-6"
+  }
+};
+function normalizeResponsiveProp$2(value) {
+  if (typeof value === "number") {
+    return { base: value };
+  }
+  return value;
+}
+function getResponsiveColsClasses$1(values) {
+  if (!values) return [];
+  return Object.entries(values).map(([breakpoint, value]) => {
+    return responsiveColsClass$1[breakpoint]?.[value] ?? "";
+  });
+}
+function getResponsiveGapClasses$1(values) {
+  if (!values) return [];
+  return Object.entries(values).map(([breakpoint, value]) => {
+    return responsiveGapClass$1[breakpoint]?.[value] ?? "";
+  });
+}
+const Grid = ({ className, cols, gap, children, style, ...props }) => {
+  const colsClasses = getResponsiveColsClasses$1(normalizeResponsiveProp$2(cols));
+  const gapClasses = getResponsiveGapClasses$1(normalizeResponsiveProp$2(gap));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid",
+        colsClasses,
+        gapClasses,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+const responsiveColSpanClass = {
+  base: {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+    5: "col-span-5",
+    6: "col-span-6",
+    7: "col-span-7",
+    8: "col-span-8",
+    9: "col-span-9",
+    10: "col-span-10",
+    11: "col-span-11",
+    12: "col-span-12",
+    full: "col-span-full"
+  },
+  sm: {
+    1: "sm:col-span-1",
+    2: "sm:col-span-2",
+    3: "sm:col-span-3",
+    4: "sm:col-span-4",
+    5: "sm:col-span-5",
+    6: "sm:col-span-6",
+    7: "sm:col-span-7",
+    8: "sm:col-span-8",
+    9: "sm:col-span-9",
+    10: "sm:col-span-10",
+    11: "sm:col-span-11",
+    12: "sm:col-span-12",
+    full: "sm:col-span-full"
+  },
+  md: {
+    1: "md:col-span-1",
+    2: "md:col-span-2",
+    3: "md:col-span-3",
+    4: "md:col-span-4",
+    5: "md:col-span-5",
+    6: "md:col-span-6",
+    7: "md:col-span-7",
+    8: "md:col-span-8",
+    9: "md:col-span-9",
+    10: "md:col-span-10",
+    11: "md:col-span-11",
+    12: "md:col-span-12",
+    full: "md:col-span-full"
+  },
+  lg: {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+    5: "lg:col-span-5",
+    6: "lg:col-span-6",
+    7: "lg:col-span-7",
+    8: "lg:col-span-8",
+    9: "lg:col-span-9",
+    10: "lg:col-span-10",
+    11: "lg:col-span-11",
+    12: "lg:col-span-12",
+    full: "lg:col-span-full"
+  },
+  xl: {
+    1: "xl:col-span-1",
+    2: "xl:col-span-2",
+    3: "xl:col-span-3",
+    4: "xl:col-span-4",
+    5: "xl:col-span-5",
+    6: "xl:col-span-6",
+    7: "xl:col-span-7",
+    8: "xl:col-span-8",
+    9: "xl:col-span-9",
+    10: "xl:col-span-10",
+    11: "xl:col-span-11",
+    12: "xl:col-span-12",
+    full: "xl:col-span-full"
+  },
+  "2xl": {
+    1: "2xl:col-span-1",
+    2: "2xl:col-span-2",
+    3: "2xl:col-span-3",
+    4: "2xl:col-span-4",
+    5: "2xl:col-span-5",
+    6: "2xl:col-span-6",
+    7: "2xl:col-span-7",
+    8: "2xl:col-span-8",
+    9: "2xl:col-span-9",
+    10: "2xl:col-span-10",
+    11: "2xl:col-span-11",
+    12: "2xl:col-span-12",
+    full: "2xl:col-span-full"
+  }
+};
+function normalizeResponsiveProp$1(value) {
+  if (typeof value === "number") {
+    return { base: value };
+  }
+  return value;
+}
+function getResponsiveColSpanClasses(values) {
+  if (!values) return [];
+  return Object.entries(values).map(([breakpoint, value]) => {
+    return responsiveColSpanClass[breakpoint]?.[value] ?? "";
+  });
+}
+const GridItem = ({
+  className,
+  colSpan,
+  children,
+  ...props
+}) => {
+  const colSpanClasses = getResponsiveColSpanClasses(
+    normalizeResponsiveProp$1(colSpan)
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn(...colSpanClasses, className), ...props, children });
+};
+const responsiveColsClass = {
+  base: {
+    1: "columns-1",
+    2: "columns-2",
+    3: "columns-3",
+    4: "columns-4",
+    5: "columns-5",
+    6: "columns-6",
+    7: "columns-7",
+    8: "columns-8",
+    9: "columns-9",
+    10: "columns-10",
+    11: "columns-11",
+    12: "columns-12"
+  },
+  sm: {
+    1: "sm:columns-1",
+    2: "sm:columns-2",
+    3: "sm:columns-3",
+    4: "sm:columns-4",
+    5: "sm:columns-5",
+    6: "sm:columns-6",
+    7: "sm:columns-7",
+    8: "sm:columns-8",
+    9: "sm:columns-9",
+    10: "sm:columns-10",
+    11: "sm:columns-11",
+    12: "sm:columns-12"
+  },
+  md: {
+    1: "md:columns-1",
+    2: "md:columns-2",
+    3: "md:columns-3",
+    4: "md:columns-4",
+    5: "md:columns-5",
+    6: "md:columns-6",
+    7: "md:columns-7",
+    8: "md:columns-8",
+    9: "md:columns-9",
+    10: "md:columns-10",
+    11: "md:columns-11",
+    12: "md:columns-12"
+  },
+  lg: {
+    1: "lg:columns-1",
+    2: "lg:columns-2",
+    3: "lg:columns-3",
+    4: "lg:columns-4",
+    5: "lg:columns-5",
+    6: "lg:columns-6",
+    7: "lg:columns-7",
+    8: "lg:columns-8",
+    9: "lg:columns-9",
+    10: "lg:columns-10",
+    11: "lg:columns-11",
+    12: "lg:columns-12"
+  },
+  xl: {
+    1: "xl:columns-1",
+    2: "xl:columns-2",
+    3: "xl:columns-3",
+    4: "xl:columns-4",
+    5: "xl:columns-5",
+    6: "xl:columns-6",
+    7: "xl:columns-7",
+    8: "xl:columns-8",
+    9: "xl:columns-9",
+    10: "xl:columns-10",
+    11: "xl:columns-11",
+    12: "xl:columns-12"
+  },
+  "2xl": {
+    1: "2xl:columns-1",
+    2: "2xl:columns-2",
+    3: "2xl:columns-3",
+    4: "2xl:columns-4",
+    5: "2xl:columns-5",
+    6: "2xl:columns-6",
+    7: "2xl:columns-7",
+    8: "2xl:columns-8",
+    9: "2xl:columns-9",
+    10: "2xl:columns-10",
+    11: "2xl:columns-11",
+    12: "2xl:columns-12"
+  }
+};
+const responsiveGapClass = {
+  base: {
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    5: "gap-5",
+    6: "gap-6"
+  },
+  sm: {
+    1: "sm:gap-1",
+    2: "sm:gap-2",
+    3: "sm:gap-3",
+    4: "sm:gap-4",
+    5: "sm:gap-5",
+    6: "sm:gap-6"
+  },
+  md: {
+    1: "md:gap-1",
+    2: "md:gap-2",
+    3: "md:gap-3",
+    4: "md:gap-4",
+    5: "md:gap-5",
+    6: "md:gap-6"
+  },
+  lg: {
+    1: "lg:gap-1",
+    2: "lg:gap-2",
+    3: "lg:gap-3",
+    4: "lg:gap-4",
+    5: "lg:gap-5",
+    6: "lg:gap-6"
+  },
+  xl: {
+    1: "xl:gap-1",
+    2: "xl:gap-2",
+    3: "xl:gap-3",
+    4: "xl:gap-4",
+    5: "xl:gap-5",
+    6: "xl:gap-6"
+  },
+  "2xl": {
+    1: "2xl:gap-1",
+    2: "2xl:gap-2",
+    3: "2xl:gap-3",
+    4: "2xl:gap-4",
+    5: "2xl:gap-5",
+    6: "2xl:gap-6"
+  }
+};
+function normalizeResponsiveProp(value) {
+  if (typeof value === "number") {
+    return { base: value };
+  }
+  return value;
+}
+function getResponsiveColsClasses(values) {
+  if (!values) return [];
+  return Object.entries(values).map(([breakpoint, value]) => {
+    return responsiveColsClass[breakpoint]?.[value] ?? "";
+  });
+}
+function getResponsiveGapClasses(values) {
+  if (!values) return [];
+  return Object.entries(values).map(([breakpoint, value]) => {
+    return responsiveGapClass[breakpoint]?.[value] ?? "";
+  });
+}
+const Masonry = React.forwardRef(
+  ({ children, className, cols, gap = 4, ...props }, ref) => {
+    const colsClasses = getResponsiveColsClasses(normalizeResponsiveProp(cols));
+    const gapClasses = getResponsiveGapClasses(normalizeResponsiveProp(gap));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("grid-mason", colsClasses, gapClasses, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+const ToastVariants = {
+  outline: "border border-current",
+  solid: ""
+};
+const ToastPositions = {
+  topLeft: "top-5 left-5",
+  bottomLeft: "bottom-5 left-5",
+  topRight: "top-5 right-5",
+  bottomRight: "bottom-5 right-5"
+};
+const ToastTypes = {
+  success: "bg-success-30 border-success-700 text-success-700",
+  info: "bg-info-30 border-info-700 text-info-700",
+  warning: "bg-warning-30 border-warning-700 text-warning-700",
+  error: "bg-error-30 border-error-700 text-error-700"
+};
+const enterAnimationByPosition = {
+  topRight: "translate-x-0",
+  bottomRight: "translate-x-0",
+  topLeft: "-translate-x-0",
+  bottomLeft: "-translate-x-0"
+};
+const exitAnimationByPosition = {
+  topRight: "translate-x-40",
+  bottomRight: "translate-x-40",
+  topLeft: "-translate-x-40",
+  bottomLeft: "-translate-x-40"
+};
+const initialAnimationByPosition = {
+  topRight: "translate-x-10",
+  bottomRight: "translate-x-10",
+  topLeft: "-translate-x-10",
+  bottomLeft: "-translate-x-10"
+};
+const Toast = ({
+  title,
+  message,
+  type,
+  icon,
+  position = "bottomRight",
+  variant = "solid",
+  onClose
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isFadingOut, setIsFadingOut] = useState(false);
+  const timeoutRef = React.useRef(null);
+  useEffect(() => {
+    setTimeout(() => setIsVisible(true), 50);
+    timeoutRef.current = setTimeout(() => {
+      handleClose();
+    }, 3500);
+    return () => {
+      timeoutRef.current && clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const handleClose = () => {
+    setIsFadingOut(true);
+    setTimeout(() => {
+      if (onClose) onClose();
+    }, 500);
+  };
+  const handleOnMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  const handleOnMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      handleClose();
+    }, 3500);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: handleOnMouseEnter,
+      onMouseLeave: handleOnMouseLeave,
+      className: cn(
+        `flex max-w-sm items-start gap-3 p-4 mb-3 rounded-lg shadow-lg transition-all duration-500 transform`,
+        ToastTypes[type],
+        ToastVariants[variant],
+        isFadingOut ? `opacity-0 ${exitAnimationByPosition[position]}` : isVisible ? `opacity-100 ${enterAnimationByPosition[position]}` : `opacity-0 ${initialAnimationByPosition[position]}`
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "text-2xl mt-1", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "font-semibold text-base mb-1", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-snug", children: message })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: "ml-2 text-lg leading-none hover:text-red-500 focus:outline-none cursor-pointer",
+            "aria-label": "Close",
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+};
+const ToastContext = createContext(void 0);
+const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+const ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const addToast = ({
+    title,
+    message,
+    type,
+    variant,
+    icon,
+    onClose,
+    position = "bottomRight"
+  }) => {
+    const id = Date.now();
+    setToasts((prevToasts) => [
+      ...prevToasts,
+      { title, id, message, type, variant, icon, onClose, position }
+    ]);
+  };
+  const removeToast = (id) => {
+    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+  };
+  const positions = Object.keys(
+    ToastPositions
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
+    children,
+    positions.map((pos) => /* @__PURE__ */ jsx("div", { className: `fixed z-50 ${ToastPositions[pos]}`, children: toasts.filter((toast) => toast.position === pos).map((toast) => /* @__PURE__ */ jsx(
+      Toast,
+      {
+        title: toast.title,
+        message: toast.message,
+        type: toast.type,
+        variant: toast.variant,
+        icon: toast.icon,
+        position: toast.position,
+        onClose: () => removeToast(toast.id)
+      },
+      toast.id
+    )) }, pos))
+  ] });
+};
+const sizeClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl"
+};
+const Modal = ({
+  isOpen,
+  overlayClose = true,
+  onClose,
+  title,
+  children,
+  showCloseButton = true,
+  size = "md",
+  className
+}) => {
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-[999] flex items-center justify-center px-4",
+      role: "dialog",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            onClick: overlayClose ? onClose : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-h-[90vh] overflow-y-auto transition-all",
+              sizeClasses[size],
+              className
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              (title || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", children: [
+                title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: title }),
+                showCloseButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "text-gray-500 hover:text-gray-800 transition dark:text-gray-400 dark:hover:text-white hover:cursor-pointer",
+                    "aria-label": "Close modal",
+                    children: "✕"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "p-4", children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const OffcanvasWidthVariants = {
+  default: "w-3/4 md:w-1/2",
+  sm: "w-3/4 md:w-60",
+  md: "w-3/4 md:w-80",
+  lg: "w-3/4 md:w-[40rem]"
+};
+const Offcanvas = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  position = "right",
+  width = "default",
+  titleClassName,
+  closeButtonClassName,
+  className
+}) => {
+  const positionClasses = position === "right" ? "right-0" : "left-0";
+  const animationClasses = isOpen ? "translate-x-0" : position === "right" ? "translate-x-full" : "-translate-x-full";
+  const baseClasses = "fixed top-0 h-full bg-white dark:bg-gray-700 z-50 shadow-xl transform transition-transform duration-300 ease-in-out";
+  const offcanvasClassName = cn(
+    baseClasses,
+    OffcanvasWidthVariants[width],
+    positionClasses,
+    animationClasses,
+    className
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 z-40",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: offcanvasClassName, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 border-b border-secondary dark:border-secondary-dark", children: [
+        /* @__PURE__ */ jsx("h5", { className: cn("text-lg font-semibold dark:text-white", titleClassName), children: title }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: cn("text-secondary-700 hover:text-secondary dark:hover:text-secondary-dark text-2xl dark:text-white hover:cursor-pointer", closeButtonClassName),
+            "aria-label": "Close",
+            children: "×"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 overflow-y-auto", children })
+    ] })
+  ] });
+};
+const PaginationSizes = {
+  sm: "px-3 py-2 text-sm font-medium rounded-lg",
+  md: "px-4 py-2 text-base font-medium rounded-lg",
+  lg: "px-6 py-3 text-lg font-medium rounded-lg"
+};
+const Pagination = ({
+  currentPage,
+  simplified = false,
+  format = "none",
+  count,
+  pageSize,
+  asLink = false,
+  getPageHref,
+  totalPages: customTotalPages,
+  onPageChange,
+  siblingCount = 1,
+  prevIcon,
+  nextIcon,
+  size = "sm"
+}) => {
+  if (process.env.NODE_ENV !== "production" && count && pageSize && customTotalPages && Math.ceil(count / pageSize) !== customTotalPages) {
+    console.warn(
+      '[Pagination] Both "count/pageSize" and "totalPages" props are provided, but are inconsistent. "totalPages" will be ignored in favor of count/pageSize.'
+    );
+  }
+  const totalPages = count && pageSize && siblingCount === 1 ? Math.ceil(count / pageSize) : customTotalPages ?? 1;
+  if (totalPages <= 1) return null;
+  const DOTS = "...";
+  const createPageRange = () => {
+    const totalPageNumbers = siblingCount * 2 + 5;
+    if (totalPageNumbers >= totalPages) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPages;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+      return [...leftRange, DOTS, totalPages];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = Array.from(
+        { length: rightItemCount },
+        (_, i) => totalPages - rightItemCount + 1 + i
+      );
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = Array.from(
+        { length: rightSiblingIndex - leftSiblingIndex + 1 },
+        (_, i) => leftSiblingIndex + i
+      );
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  };
+  const goToPage = (page) => {
+    const newPage = Math.max(1, Math.min(page, totalPages));
+    if (newPage !== currentPage) {
+      onPageChange(newPage);
+    }
+  };
+  const paginationRange = createPageRange();
+  const sizeClass = PaginationSizes[size] || "";
+  const disabledClass = "opacity-50 pointer-events-none";
+  const getHref = (page) => getPageHref?.(page) ?? `?page=${page}`;
+  const PrevButton = asLink ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cn("px-3 py-1 rounded-lg border dark:border-gray-600 dark:text-white dark:hover:bg-gray-700", sizeClass, currentPage === 1 ? disabledClass : "hover:cursor-pointer"),
+      href: currentPage > 1 ? getHref(currentPage - 1) : void 0,
+      onClick: (e) => {
+        if (currentPage === 1) {
+          e.preventDefault();
+          return;
+        }
+        e.preventDefault();
+        goToPage(currentPage - 1);
+      },
+      "aria-disabled": currentPage === 1,
+      children: prevIcon ?? /* @__PURE__ */ jsx("span", { children: "<" })
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn("px-3 py-1 rounded-lg border dark:border-gray-600 dark:text-white dark:hover:bg-gray-700", sizeClass, currentPage === 1 ? disabledClass : "hover:cursor-pointer"),
+      onClick: () => goToPage(currentPage - 1),
+      disabled: currentPage === 1,
+      children: prevIcon ?? /* @__PURE__ */ jsx("span", { children: "<" })
+    }
+  );
+  const NextButton = asLink ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cn("px-3 py-1 rounded-lg border dark:border-gray-600 dark:text-white dark:hover:bg-gray-700", sizeClass, currentPage === totalPages ? disabledClass : "hover:cursor-pointer"),
+      href: currentPage < totalPages ? getHref(currentPage + 1) : void 0,
+      onClick: (e) => {
+        if (currentPage === totalPages) {
+          e.preventDefault();
+          return;
+        }
+        e.preventDefault();
+        goToPage(currentPage + 1);
+      },
+      "aria-disabled": currentPage === totalPages,
+      children: nextIcon ?? /* @__PURE__ */ jsx("span", { children: ">" })
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn("px-3 py-1 rounded-lg border dark:border-gray-600 dark:text-white dark:hover:bg-gray-700", sizeClass, currentPage === totalPages ? disabledClass : "hover:cursor-pointer"),
+      onClick: () => goToPage(currentPage + 1),
+      disabled: currentPage === totalPages,
+      children: nextIcon ?? /* @__PURE__ */ jsx("span", { children: ">" })
+    }
+  );
+  const renderPageInfo = () => {
+    if (format === "long" && pageSize && count) {
+      const start = (currentPage - 1) * pageSize + 1;
+      const end = Math.min(currentPage * pageSize, count);
+      return /* @__PURE__ */ jsxs("p", { className: "dark:text-white", children: [
+        "Showing ",
+        start,
+        " - ",
+        end,
+        " of ",
+        count
+      ] });
+    }
+    if (format === "none") {
+      return /* @__PURE__ */ jsxs("p", { className: "dark:text-white", children: [
+        currentPage,
+        " of ",
+        totalPages
+      ] });
+    }
+    return null;
+  };
+  if (!simplified) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      PrevButton,
+      paginationRange.map((page, idx) => {
+        if (page === "...") {
+          return /* @__PURE__ */ jsx("span", { className: cn("px-3 py-1 text-gray-500 dark:text-gray-400", sizeClass), children: "..." }, idx);
+        }
+        const isActive = page === currentPage;
+        const baseClasses = cn(
+          "px-3 py-1 rounded-lg border",
+          isActive ? "bg-primary text-white dark:bg-primary-dark dark:border-primary-dark" : "hover:bg-secondary hover:cursor-pointer dark:border-gray-600 dark:text-white dark:hover:bg-gray-700",
+          sizeClass,
+          isActive && "pointer-events-none"
+        );
+        if (asLink) {
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: baseClasses,
+              href: getHref(Number(page)),
+              onClick: (e) => {
+                e.preventDefault();
+                goToPage(Number(page));
+              },
+              children: page
+            },
+            idx
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: baseClasses,
+            onClick: () => goToPage(Number(page)),
+            children: page
+          },
+          idx
+        );
+      }),
+      NextButton
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    PrevButton,
+    renderPageInfo(),
+    NextButton
+  ] });
+};
+const RadioSizes = {
+  sm: {
+    container: "text-sm",
+    radio: "w-4 h-4",
+    label: "pl-2"
+  },
+  md: {
+    container: "text-base",
+    radio: "w-5 h-5",
+    label: "pl-2"
+  },
+  lg: {
+    container: "text-lg",
+    radio: "w-6 h-6",
+    label: "pl-3"
+  }
+};
+const RadioVariants = {
+  solid: {
+    label: "border-transparent bg-primary dark:bg-primary-dark text-white dark:hover:bg-primary-dark-700 hover:bg-primary-700",
+    checked: "bg-primary-700 dark:bg-primary-dark-700",
+    radio: "",
+    checkedRadio: "border-white bg-primary dark:bg-primary"
+  },
+  subtle: {
+    label: "border-none bg-secondary/30 dark:text-white hover:text-primary-700 hover:dark:text-primary-30 dark:text-white dark:bg-primary-dark/50 hover:bg-primary/30",
+    checked: "bg-primary/30 text-primary-700 dark:bg-primary/30 dark:text-white hover:dark:text-white",
+    radio: "dark:bg-primary",
+    checkedRadio: "bg-primary dark:bg-primary-500 border-none"
+  },
+  outline: {
+    label: "border-secondary-700 hover:bg-primary/30 hover:text-primary-700 hover:border-primary-700 dark:hover:bg-primary/20 bg-transparent dark:text-white dark:border-secondary-dark dark:hover:bg-primary-dark/20",
+    checked: "border-primary bg-primary/30 text-primary-700 dark:border-primary-700 dark:bg-primary-dark/20",
+    radio: " dark:border-secondary-dark hover:border-primary",
+    checkedRadio: "bg-primary-700 dark:border-primary-700 dark:border-primary dark:bg-primary"
+  }
+};
+const RadioInput = ({
+  name,
+  options,
+  selectedValue,
+  onValueChange,
+  containerClassName,
+  inputGroupClassName,
+  inputLabelClassName,
+  inputRadioClassName,
+  variant = "subtle",
+  radioSize = "md",
+  disabled,
+  ...props
+}) => {
+  const sizeClasses2 = RadioSizes[radioSize];
+  const variantClasses = RadioVariants[variant];
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-3", containerClassName), children: options.map((option, index) => {
+    const isChecked = selectedValue?.value === option.value;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "relative flex items-center rounded-md cursor-pointer transition-all duration-200 border px-3 py-2",
+          sizeClasses2.container,
+          variantClasses.label,
+          {
+            [variantClasses.checked]: isChecked,
+            "opacity-50 cursor-not-allowed": disabled
+          },
+          inputGroupClassName?.(isChecked, option)
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: option.value,
+              checked: isChecked,
+              onChange: () => onValueChange(option),
+              disabled,
+              className: cn("absolute opacity-0 w-full h-full cursor-pointer", { "cursor-not-allowed": disabled }),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex items-center justify-center rounded-full border transition-all duration-200",
+                sizeClasses2.radio,
+                variantClasses.radio,
+                {
+                  [variantClasses.checkedRadio]: isChecked
+                },
+                inputRadioClassName?.(isChecked, option)
+              ),
+              children: isChecked && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "w-1/2 h-1/2 rounded-full bg-white dark:bg-primary-dark transition-transform duration-200 transform scale-100"
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn("ml-2", sizeClasses2.label, inputLabelClassName?.(isChecked, option)), children: option.label })
+        ]
+      },
+      index
+    );
+  }) });
+};
+const SelectInput = ({ label, error, labelClassName, errorClassName, customClassNames, ...props }) => {
+  const defaultClassNames = {
+    clearIndicator: () => cn(
+      "hover:cursor-pointer hover:!text-error dark:hover:!text-error-dark"
+    ),
+    control: ({ isFocused }) => cn(
+      `!w-full !border !rounded-md !shadow-sm !sm:text-sm !min-h-[38px] !bg-transparent`,
+      error ? isFocused ? "border-primary !ring-1 !ring-primary" : "!border-error dark:!border-error-dark" : isFocused ? "border-primary !ring-1 !ring-primary" : "!border-secondary dark:!border-secondary-dark"
+    ),
+    option: ({ isFocused, isSelected }) => `!px-4 !py-2 !cursor-pointer ${isSelected ? "!bg-primary !text-white" : isFocused ? "!bg-primary/30 dark:!bg-primary-dark/30" : "!bg-white dark:!bg-gray-700"}`,
+    multiValue: () => "!bg-primary-30 dark:!bg-primary-dark-30-50 !rounded-md !flex !items-center !mr-1",
+    multiValueLabel: () => "!text-primary-700 dark:!text-primary-dark-30-20 !text-sm !px-2 !py-0.5",
+    multiValueRemove: () => "!text-primary-700 !hover:bg-primary/30 !hover:text-primary-700 !rounded-r-md !px-1 !cursor-pointer",
+    menu: () => "!mt-1 dark:!text-white !border-secondary dark:!border-secondary-dark !bg-white dark:!bg-gray-700 !rounded-md !shadow-lg !z-10",
+    input: () => "!text-gray-900 dark:!text-white",
+    placeholder: () => "!text-gray-400",
+    singleValue: () => "!text-gray-900 dark:!text-white"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx("label", { className: cn("block text-sm font-medium dark:text-white mb-1", labelClassName), children: label }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        classNames: { ...defaultClassNames, ...customClassNames },
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm text-error", errorClassName), children: error })
+  ] });
+};
+const Skeleton = ({
+  width,
+  height,
+  rounded = false,
+  isLoading = true,
+  animode = "flash",
+  children
+}) => {
+  if (!isLoading) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const style = {
+    width: width ?? "fit-content",
+    height: height ?? (children ? "auto" : "1rem")
+  };
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children: React.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${animode} ${rounded ? "rounded-full" : "rounded-sm"} mb-1`,
+        style,
+        children: /* @__PURE__ */ jsx("span", { className: "invisible", children: child })
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${animode} ${rounded ? "rounded-full" : "rounded-sm"}`,
+      style
+    }
+  );
+};
+const Tooltip = ({
+  children,
+  text,
+  showArrow = true,
+  placement = "top",
+  offset = 8,
+  bgColor = "bg-gray-800 dark:bg-gray-600",
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  disabled = false,
+  animationDuration = 300,
+  delay = 700
+}) => {
+  const [isHovering, setIsHovering] = useState(false);
+  const getTooltipPosition = () => {
+    switch (placement) {
+      case "top":
+        return { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: `${offset}px` };
+      case "bottom":
+        return { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: `${offset}px` };
+      case "left":
+        return { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: `${offset}px` };
+      case "right":
+        return { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: `${offset}px` };
+      default:
+        return { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: `${offset}px` };
+    }
+  };
+  const getArrowPosition = () => {
+    switch (placement) {
+      case "top":
+        return { bottom: "-4px", left: "50%", transform: "translateX(-50%) rotate(45deg)" };
+      case "bottom":
+        return { top: "-4px", left: "50%", transform: "translateX(-50%) rotate(225deg)" };
+      case "left":
+        return { right: "-4px", top: "50%", transform: "translateY(-50%) rotate(135deg)" };
+      case "right":
+        return { left: "-4px", top: "50%", transform: "translateY(-50%) rotate(-45deg)" };
+      default:
+        return { bottom: "-4px", left: "50%", transform: "translateX(-50%) rotate(45deg)" };
+    }
+  };
+  const isVisible = controlledIsOpen ?? isHovering;
+  const tooltipStyle = {
+    ...getTooltipPosition(),
+    transitionDelay: isVisible && !controlledIsOpen ? `${delay}ms` : "0ms",
+    transitionDuration: `${animationDuration}ms`
+  };
+  if (disabled) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative inline-block group",
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => {
+        if (controlledIsOpen !== void 0) onOpenChange?.(false);
+        setIsHovering(false);
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              `absolute text-white text-[.70rem] font-medium tracking-tight rounded py-1 px-2 z-10 transition-all ${bgColor}`,
+              isVisible ? "opacity-100 visible" : "opacity-0 invisible"
+            ),
+            style: tooltipStyle,
+            children: [
+              text,
+              showArrow && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `absolute w-2 h-2 ${bgColor}`,
+                  style: getArrowPosition()
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const SliderColor = {
+  primary: "bg-primary-30 dark:bg-primary-dark-30 hover:[&::-webkit-slider-thumb]:transition-all hover:[&::-webkit-slider-thumb]:duration-300 [&::-webkit-slider-thumb]:outline-5 hover:[&::-webkit-slider-thumb]:outline-10 [&::-webkit-slider-thumb]:outline-primary-30 [&::-webkit-slider-thumb]:bg-primary dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-webkit-slider-thumb]:outline-primary-30 dark:[&::-webkit-slider-thumb]:outline-primary-dark-30",
+  error: "bg-error-30 dark:bg-error-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-error-30 [&::-webkit-slider-thumb]:bg-error dark:[&::-webkit-slider-thumb]:bg-error-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-error-dark-30",
+  warning: "bg-warning-30 dark:bg-warning-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-warning-30 [&::-webkit-slider-thumb]:bg-warning dark:[&::-webkit-slider-thumb]:bg-warning-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-warning-dark-30",
+  success: "bg-success-30 dark:bg-success-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-success-30 [&::-webkit-slider-thumb]:bg-success dark:[&::-webkit-slider-thumb]:bg-success-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-success-dark-30",
+  info: "bg-info-30 dark:bg-info-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-info-30 [&::-webkit-slider-thumb]:bg-info dark:[&::-webkit-slider-thumb]:bg-info-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-info-dark-30",
+  secondary: "bg-secondary dark:bg-secondary-dark [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-secondary [&::-webkit-slider-thumb]:bg-secondary-700 dark:[&::-webkit-slider-thumb]:bg-secondary-dark-700 dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-secondary-dark"
+};
+const SliderSize = {
+  sm: "h-1 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
+  md: "h-2 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",
+  lg: "h-3 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",
+  xl: "h-4 [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6"
+};
+const Slider = ({
+  id,
+  name,
+  label,
+  min = 0,
+  disabled,
+  max = 100,
+  step = 1,
+  value,
+  showTooltip = true,
+  showMarks = true,
+  onChange,
+  color = "primary",
+  prefixIcon,
+  suffixIcon,
+  sliderSize = "md"
+}) => {
+  const [isInteracting, setIsInteracting] = useState(false);
+  const sliderColorClassName = SliderColor[color];
+  const sliderSizeClassName = SliderSize[sliderSize];
+  const webkitClassName = "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:appearance-none";
+  const mozClassName = "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:appearance-none";
+  const thumbWidthMap = { sm: 12, md: 16, lg: 20, xl: 24 };
+  const thumbWidth = thumbWidthMap[sliderSize];
+  const getTooltipStyle = () => {
+    const range = Number(max) - Number(min);
+    const percentage = range === 0 ? 0 : (Number(value) - Number(min)) / range;
+    const offset = percentage * -thumbWidth + thumbWidth / 2;
+    return {
+      left: `calc(${percentage * 100}% + ${offset}px)`,
+      opacity: isInteracting ? 1 : 0,
+      pointerEvents: "none"
+    };
+  };
+  const renderMarks = () => {
+    if (!showMarks || Number(step) <= 1) return null;
+    const range = Number(max) - Number(min);
+    const stepCount = Math.floor(range / Number(step));
+    const marks = Array.from({ length: stepCount + 1 }, (_, i) => {
+      const left = i / stepCount * 100;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute top-1/2 -translate-y-1/2 w-[2px] h-2 rounded-full",
+            sliderColorClassName
+          ),
+          style: { left: `${left}%` }
+        },
+        i
+      );
+    });
+    return /* @__PURE__ */ jsx("div", { className: "absolute top-full mt-2 -left-0.5 -right-0.5 h-2 me-[11px] ms-[9px]", children: marks });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full p-4 relative overflow-x-clip", children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id || name, className: "block text-sm font-medium mb-1 dark:text-white", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-center relative", children: [
+      prefixIcon,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative w-full flex items-center",
+          onMouseEnter: () => setIsInteracting(true),
+          onMouseLeave: () => setIsInteracting(false),
+          children: [
+            showTooltip && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute z-10 -top-7 transition-opacity duration-300",
+                style: getTooltipStyle(),
+                children: /* @__PURE__ */ jsx(Tooltip, { text: String(value), isOpen: isInteracting, placement: "top", children: /* @__PURE__ */ jsx("div", {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                disabled,
+                type: "range",
+                id: id || "slider-range",
+                min,
+                max,
+                step,
+                value,
+                onChange,
+                onMouseDown: () => setIsInteracting(true),
+                className: cn(
+                  "w-full rounded-full appearance-none cursor-pointer dark:bg-gray-700",
+                  "transition-all duration-300 ease-in-out",
+                  sliderSizeClassName,
+                  webkitClassName,
+                  mozClassName,
+                  sliderColorClassName,
+                  {
+                    [SliderColor["secondary"]]: disabled,
+                    "bg-secondary opacity-50": disabled
+                  }
+                )
+              }
+            ),
+            renderMarks()
+          ]
+        }
+      ),
+      suffixIcon,
+      /* @__PURE__ */ jsx("div", { className: "w-32", children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          min,
+          max,
+          step,
+          type: Number(value) <= 0 ? "text" : "number",
+          value: Number(value) <= 0 ? "" : value,
+          onChange
+        }
+      ) })
+    ] })
+  ] });
+};
+const SpinnerSize = {
+  sm: "h-4 w-4 border-2",
+  md: "h-6 w-6 border-3",
+  lg: "h-8 w-8 border-4"
+};
+const SpinnerColor = {
+  primary: "border-primary dark:border-primary-dark",
+  error: "border-error dark:border-error-dark",
+  warning: "border-warning dark:border-warning-dark",
+  success: "border-success dark:border-success-dark",
+  info: "border-info dark:border-info-dark",
+  secondary: "border-secondary dark:border-secondary-dark"
+};
+const Spinner = ({
+  color = "primary",
+  size = "md",
+  className: customClassName,
+  duration = 1e3,
+  thickness
+}) => {
+  const spinnerColor = SpinnerColor[color];
+  const spinnerSize = SpinnerSize[size];
+  const animationDuration = `${duration}ms`;
+  const borderWidth = thickness && `${thickness}px`;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        spinnerSize,
+        spinnerColor,
+        `flex rounded-full animate-spin`,
+        customClassName,
+        "border-t-transparent dark:border-t-transparent"
+      ),
+      style: { animationDuration, borderWidth }
+    }
+  );
+};
+const TableSize = {
+  sm: "text-sm py-[5px] px-2",
+  md: "text-base py-2 px-4",
+  lg: "text-lg py-3 px-6"
+};
+function Table({
+  columns,
+  data,
+  striped = false,
+  stripeColor,
+  headerClassName,
+  dataColumnClassName,
+  dataRowClassName,
+  customEmptyData,
+  tableClassName,
+  captionClassName,
+  containerClassName,
+  size = "md",
+  caption,
+  captionPosition = "bottom",
+  stickyHeader = false,
+  selectable = false,
+  onSelectionChange,
+  selectedRows = []
+}) {
+  const tableSizeClass = TableSize[size];
+  const handleSelectAll = (e) => {
+    if (e.target.checked) {
+      onSelectionChange?.(data);
+    } else {
+      onSelectionChange?.([]);
+    }
+  };
+  const handleSelectRow = (row) => {
+    const isSelected = selectedRows.some((r) => r.id === row.id);
+    if (isSelected) {
+      onSelectionChange?.(selectedRows.filter((r) => r.id !== row.id));
+    } else {
+      onSelectionChange?.([...selectedRows, row]);
+    }
+  };
+  const isAllSelected = data.length > 0 && selectedRows.length === data.length;
+  const isIndeterminate = selectedRows.length > 0 && selectedRows.length < data.length;
+  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-x-auto w-full", stickyHeader && "max-h-[400px] overflow-y-auto", containerClassName), children: [
+    caption && captionPosition === "top" && /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm font-medium mb-1 dark:text-white", captionClassName), children: caption }),
+    /* @__PURE__ */ jsxs("table", { className: cn("relative min-w-full outline outline-gray-200 dark:outline-gray-600", tableSizeClass, tableClassName), children: [
+      /* @__PURE__ */ jsx("thead", { className: cn("dark:bg-gray-700 dark:text-white", headerClassName), children: /* @__PURE__ */ jsxs("tr", { children: [
+        selectable && /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: cn(
+              "px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",
+              tableSizeClass,
+              stickyHeader && "sticky top-0 bg-secondary dark:bg-gray-700 z-10",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              CheckboxInput,
+              {
+                checked: isAllSelected,
+                indeterminate: isIndeterminate,
+                onChange: handleSelectAll
+              }
+            )
+          }
+        ),
+        columns.map((col, idx) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: cn(
+              "px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",
+              tableSizeClass,
+              stickyHeader && "sticky top-0 bg-secondary dark:bg-gray-700 z-10",
+              headerClassName
+            ),
+            children: col.header
+          },
+          idx
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "dark:bg-gray-800 dark:text-white", children: data.length > 0 ? data.map((row, rIdx) => /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: cn("hover:bg-gray-700 hover:text-white dark:hover:bg-gray-600 transition-colors", striped && rIdx % 2 !== 0 && (stripeColor ?? "bg-gray-300 dark:bg-gray-700"), dataRowClassName),
+          children: [
+            selectable && /* @__PURE__ */ jsx("td", { className: cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700", (striped || stripeColor) && "border-none", dataColumnClassName, tableSizeClass), children: /* @__PURE__ */ jsx(
+              CheckboxInput,
+              {
+                checked: selectedRows.some((r) => r.id === row.id),
+                onChange: () => handleSelectRow(row)
+              }
+            ) }),
+            columns.map((col, cIdx) => /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700", (striped || stripeColor) && "border-none", dataColumnClassName, tableSizeClass),
+                children: col.render ? col.render(row[col.accessor], row) : String(row[col.accessor])
+              },
+              cIdx
+            ))
+          ]
+        },
+        rIdx
+      )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: columns.length + (selectable ? 1 : 0),
+          className: cn("px-4 py-6 text-center", tableSizeClass),
+          children: customEmptyData ?? "Tidak ada data."
+        }
+      ) }) })
+    ] }),
+    caption && captionPosition === "bottom" && /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm font-medium mt-1 dark:text-white", captionClassName), children: caption })
+  ] });
+}
+const TabsVariants = {
+  line: {
+    wrapper: "border-b border-secondary dark:border-secondary-dark",
+    button: "whitespace-nowrap py-4 px-1 font-medium text-sm",
+    active: "border-primary text-primary dark:text-primary-30 transition-all duration-300 ease-in-out",
+    inactive: "border-transparent text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark-700"
+  },
+  solid: {
+    wrapper: "rounded-md p-1",
+    button: "whitespace-nowrap py-2 px-4 font-medium text-sm rounded-md",
+    active: "bg-indigo-100 dark:bg-indigo-200 text-primary dark:text-primary-dark transition-all duration-300 ease-in-out",
+    inactive: "text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark-700"
+  },
+  subtle: {
+    wrapper: "rounded-md bg-transparent p-1",
+    button: "whitespace-nowrap py-2 px-4 font-medium text-sm",
+    active: "text-white transition-all duration-300 ease-in-out z-10",
+    inactive: "bg-transparent text-primary dark:text-primary-30 hover:text-primary-700"
+  },
+  inline: {
+    wrapper: "border border-primary rounded-t-md border-b dark:border-primary-dark-30",
+    button: "whitespace-nowrap py-2 px-4 font-medium text-sm z-10",
+    active: "text-white transition-all duration-300 ease-in-out",
+    inactive: "text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark"
+  },
+  outline: {
+    wrapper: "border border-primary dark:border-primary-dark-30 rounded-md p-1",
+    button: "whitespace-nowrap py-2 px-4 font-medium text-sm rounded-md",
+    active: "bg-indigo-100 dark:bg-indigo-200 text-primary dark:text-primary-dark transition-all duration-300 ease-in-out",
+    inactive: "text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark"
+  },
+  plain: {
+    wrapper: "",
+    button: "whitespace-nowrap py-2 px-4 font-medium text-sm",
+    active: "text-primary dark:text-primary-30 transition-all duration-300 ease-in-out",
+    inactive: "text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary"
+  }
+};
+const IndicatorVariants = {
+  line: "absolute bottom-0 h-1 bg-primary dark:bg-primary-30 transition-all duration-300 ease-in-out",
+  solid: "absolute bottom-0 h-1 bg-primary transition-all duration-300 ease-in-out",
+  subtle: "absolute bottom-0 h-full bg-primary rounded-md transition-all duration-300 ease-in-out",
+  inline: "absolute bottom-0 h-full bg-primary border-t border-r border-l border-primary-700 rounded-tl-md rounded-tr-md transition-all duration-300 ease-in-out",
+  outline: "absolute bottom-0 h-1 bg-primary transition-all duration-300 ease-in-out",
+  plain: ""
+};
+const Tabs = ({
+  tabs,
+  fitted,
+  variant = "line",
+  wrapperClassName,
+  buttonClassName,
+  activeClassName,
+  inactiveClassName,
+  activeTab: controlledActiveTab,
+  onTabChange
+}) => {
+  const [internalActiveTab, setInternalActiveTab] = useState(0);
+  const isControlled = controlledActiveTab !== void 0 && onTabChange !== void 0;
+  const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+  const variantClasses = TabsVariants[variant];
+  const indicatorVariantClasses = IndicatorVariants[variant];
+  const tabRefs = useRef([]);
+  const indicatorRef = useRef(null);
+  useEffect(() => {
+    if (!isControlled && activeTab >= tabs.length) {
+      setInternalActiveTab(Math.max(0, tabs.length - 1));
+    }
+  }, [tabs, activeTab, isControlled]);
+  useEffect(() => {
+    const currentTab = tabRefs.current[activeTab];
+    const indicator = indicatorRef.current;
+    if (currentTab && indicator) {
+      const left = currentTab.offsetLeft;
+      const width = currentTab.offsetWidth;
+      indicator.style.transform = `translateX(${left}px)`;
+      indicator.style.width = `${width}px`;
+      currentTab.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+    }
+  }, [activeTab, tabs]);
+  const handleTabClick = (index) => {
+    if (isControlled) {
+      onTabChange(index);
+    } else {
+      setInternalActiveTab(index);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: cn("relative", variantClasses.wrapper, wrapperClassName), children: /* @__PURE__ */ jsxs("nav", { className: "relative -mb-px flex space-x-2 overflow-x-auto scroll-smooth", "aria-label": "Tabs", children: [
+      tabs.map((tab, index) => {
+        const className = cn(
+          "hover:cursor-pointer",
+          fitted && "flex-1",
+          variantClasses.button,
+          buttonClassName,
+          activeTab === index ? cn(variantClasses.active, activeClassName) : cn(variantClasses.inactive, inactiveClassName),
+          tab.disabled && "hover:cursor-not-allowed cursor-not-allowed opacity-50"
+        );
+        if (tab.link) {
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: !tab.disabled ? tab.link : void 0,
+              ref: (el) => {
+                tabRefs.current[index] = el;
+              },
+              className,
+              "aria-disabled": tab.disabled,
+              onClick: (e) => tab.disabled && e.preventDefault(),
+              children: tab.label
+            },
+            tab.label
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (el) => {
+              tabRefs.current[index] = el;
+            },
+            onClick: () => handleTabClick(index),
+            disabled: tab.disabled,
+            className,
+            children: tab.label
+          },
+          tab.label
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: indicatorRef,
+          className: cn(indicatorVariantClasses),
+          style: { width: 0, transform: "translateX(0px)" }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4", children: tabs[activeTab]?.content })
+  ] });
+};
+const Textarea = ({
+  label,
+  id,
+  name,
+  error,
+  autoResize = false,
+  customClassName,
+  ...props
+}) => {
+  const textareaRef = useRef(null);
+  const handleResize = () => {
+    const el = textareaRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }
+  };
+  useEffect(() => {
+    if (autoResize) handleResize();
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id || name,
+        className: "inline-block text-sm font-medium mb-1 dark:text-white",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: id || name,
+        name,
+        rows: autoResize ? 1 : 5,
+        ref: textareaRef,
+        onInput: handleResize,
+        className: cn(
+          `overflow-hidden bg-gray-50 w-full block px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm border-secondary min-h-[58px] max-h-[10rem]`,
+          "dark:bg-gray-800 dark:border-secondary-dark dark:text-white dark:placeholder:text-gray-400",
+          autoResize ? "resize-none" : "resize",
+          error && "border-error dark:border-error-dark",
+          props.disabled && "bg-secondary/40 cursor-not-allowed",
+          customClassName
+        ),
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-500", children: error })
+  ] });
+};
+const DotColors = {
+  success: "bg-success dark:bg-success-dark",
+  info: "bg-info dark:bg-info-dark",
+  error: "bg-error dark:bg-error-dark",
+  warning: "bg-warning dark:bg-warning-dark",
+  primary: "bg-primary dark:bg-primary-dark",
+  default: "bg-secondary-700 dark:bg-secondary-dark"
+};
+const LineColors = {
+  success: "border-success dark:border-success-dark md:before:border-success md:before:dark:border-success-dark",
+  info: "border-info dark:border-info-dark md:before:border-info md:before:dark:border-info-dark",
+  error: "border-error dark:border-error-dark md:before:border-error md:before:dark:border-error-dark",
+  warning: "border-warning dark:border-warning-dark md:before:border-warning md:before:dark:border-warning-dark",
+  primary: "border-primary dark:border-primary-dark md:before:border-primary md:before:dark:border-primary-dark",
+  default: "border-secondary-700 dark:border-secondary-dark md:before:border-secondary md:before:dark:border-secondary-dark"
+};
+const TimelineItem = ({
+  title,
+  time,
+  children,
+  dotColor = "default",
+  icon,
+  position
+  // prop from parent
+}) => {
+  const dotColorClassName = DotColors[dotColor];
+  return /* @__PURE__ */ jsxs("li", { className: cn("mb-5", {
+    "ms-8": position === "left",
+    "me-8 text-end": position === "right",
+    "ms-4 md:w-1/2 ps-4 md:odd:pe-8 md:odd:ms-0 md:odd:text-end md:even:ps-8 md:even:ms-auto": position === "split"
+  }), children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: cn(
+      "flex items-center justify-center absolute w-10 h-10 rounded-full mt-1.5 outline outline-white dark:outline-secondary",
+      dotColorClassName,
+      {
+        "-start-[20px]": position === "left" || position === "split" && "md:hidden",
+        "-end-[21px]": position === "right",
+        "-start-[21px] md:start-1/2 md:-ms-[19px]": position === "split"
+      }
+    ), children: icon }) : /* @__PURE__ */ jsx("div", { className: cn(
+      "absolute w-3 h-3 rounded-full mt-1.5 outline outline-white dark:outline-secondary",
+      dotColorClassName,
+      {
+        "-start-[7px]": position === "left" || position === "split" && "md:hidden",
+        "-end-[7px]": position === "right",
+        "-start-[7.1px] md:start-1/2 md:-ms-[4.7px]": position === "split"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("time", { className: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-secondary-dark", children: time }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mb-4 text-base font-normal text-secondary-foreground dark:text-secondary-foreground-dark", children })
+  ] });
+};
+const Timeline = ({
+  position = "left",
+  lineColor = "default",
+  children
+}) => {
+  const childrenWithProps = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, { position });
+    }
+    return child;
+  });
+  const lineColorClassName = LineColors[lineColor];
+  return /* @__PURE__ */ jsx("ol", { className: cn(
+    "relative",
+    {
+      "border-s-2": position === "left",
+      "border-e-2": position === "right",
+      "border-s-2 md:border-s-0 md:before:content-[''] md:before:absolute md:before:top-0 md:before:left-1/2 md:before:h-full md:before:border-s-2 md:before:border-secondary md:before:dark:border-secondary-dark": position === "split"
+    },
+    lineColorClassName
+  ), children: childrenWithProps });
+};
+Timeline.Item = TimelineItem;
+const ToggleVariant = {
+  primary: "peer-checked:bg-primary dark:peer-checked:bg-primary-dark",
+  error: "peer-checked:bg-error dark:peer-checked:bg-error-dark",
+  warning: "peer-checked:bg-warning dark:peer-checked:bg-warning-dark",
+  success: "peer-checked:bg-success dark:peer-checked:bg-success-dark",
+  info: "peer-checked:bg-info dark:peer-checked:bg-info-dark",
+  secondary: "peer-checked:bg-secondary dark:peer-checked:bg-secondary-dark"
+};
+const ToggleThumbShape = {
+  stadium: "rounded-full after:rounded-full",
+  rounded: "rounded-md after:rounded-sm"
+};
+const ToggleSize = {
+  sm: "w-9 h-5 after:h-4 after:w-4 after:start-[2px] after:top-[2px] peer-checked:after:translate-x-[16px]",
+  md: "w-11 h-6 after:h-5 after:w-5 after:start-[2px] after:top-[2px] peer-checked:after:translate-x-[20px]",
+  lg: "w-14 h-7 after:h-6 after:w-6 after:start-[2px] after:top-[2px] peer-checked:after:translate-x-[28px]"
+};
+const Toggle = ({
+  variant = "primary",
+  customSize: size = "md",
+  thumbShape = "stadium",
+  label,
+  wrapperClassName,
+  labelClassName,
+  ...props
+}) => {
+  const divClasses = [
+    "relative",
+    "bg-secondary-700 dark:bg-secondary-dark-700",
+    "peer-checked:after:translate-x-full",
+    "rtl:peer-checked:after:-translate-x-full",
+    "peer-checked:after:border-white",
+    "after:absolute",
+    "after:bg-white",
+    "after:transition-colors",
+    "after:transition-transform",
+    "duration-500"
+  ].filter(Boolean).join(" ");
+  const wrapperClasses = [
+    "inline-flex items-center cursor-pointer"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("label", { className: cn(wrapperClasses, wrapperClassName, props.disabled && "cursor-not-allowed"), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", value: "", className: "sr-only peer", ...props }),
+    /* @__PURE__ */ jsx("div", { className: cn(divClasses, ToggleSize[size], ToggleVariant[variant], ToggleThumbShape[thumbShape], props.disabled && "opacity-50 cursor-not-allowed") }),
+    label && /* @__PURE__ */ jsx("span", { className: cn("ms-3 text-sm font-medium dark:text-white", labelClassName), children: label })
+  ] });
+};
+export {
+  Accordion,
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  BottomNavbar,
+  BottomNavbarAction,
+  Breadcrumb,
+  Button,
+  ButtonVariantsMap,
+  Card,
+  CheckboxInput,
+  CodeInput,
+  Collection,
+  DatePicker,
+  FAB,
+  FileUpload,
+  Grid,
+  GridItem,
+  ListCheckboxInput,
+  Masonry,
+  Modal,
+  Offcanvas,
+  Pagination,
+  RadioInput,
+  SelectInput,
+  Skeleton,
+  Slider,
+  Spinner,
+  Table,
+  Tabs,
+  TextInput,
+  Textarea,
+  Timeline,
+  ToastProvider,
+  Toggle,
+  Tooltip,
+  getVariantClasses,
+  useToast
+};