atomos_next_genesis 0.0.3-alpha

package/dist/index.js

@@ -0,0 +1,2464 @@
+// app/components/Accordian.tsx
+import React2, { useState } from "react";
+
+// app/utils/utils.tsx
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+var cn = (...classes) => twMerge(clsx(...classes));
+
+// app/components/Accordian.tsx
+import { RiArrowDownSLine } from "@remixicon/react";
+function Accordion({
+  type = "single",
+  collapsible = true,
+  className,
+  children
+}) {
+  const [openItems, setOpenItems] = useState([]);
+  const handleToggle = (value) => {
+    if (type === "single") {
+      setOpenItems(
+        (prev) => prev.includes(value) ? collapsible ? [] : prev : [value]
+      );
+    } else {
+      setOpenItems(
+        (prev) => prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
+      );
+    }
+  };
+  return /* @__PURE__ */ React2.createElement("div", { className }, React2.Children.map(children, (child) => {
+    if (React2.isValidElement(child)) {
+      return React2.cloneElement(
+        child,
+        {
+          openItems,
+          handleToggle
+        }
+      );
+    }
+    return child;
+  }));
+}
+function AccordionItem({
+  value,
+  disabled = false,
+  openItems,
+  handleToggle,
+  children,
+  className
+}) {
+  const isOpen = openItems == null ? void 0 : openItems.includes(value);
+  const toggle = () => {
+    if (!disabled && handleToggle) {
+      handleToggle(value);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: cn(
+        "bg-white hover:bg-gray-50 rounded-lg shadow transition-all duration-300 ease-in-out",
+        disabled ? "opacity-50 pointer-events-none select-none" : "cursor-pointer",
+        isOpen ? "border border-gray-300" : "border",
+        className
+      )
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        className: "font-semibold transition-all duration-300 ease-in-out",
+        onClick: toggle
+      },
+      children && Array.isArray(children) ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, React2.cloneElement(children[0], { isOpen }), /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          className: cn(
+            "grid transition-all duration-300 ease-in-out",
+            isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+          )
+        },
+        /* @__PURE__ */ React2.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React2.createElement("div", { className: cn("") }, children[1]))
+      )) : children
+    )
+  );
+}
+function AccordionTrigger({ isOpen, children }) {
+  return /* @__PURE__ */ React2.createElement("div", { className: "flex p-3.5 justify-between items-center text-sm font-semibold transition-all delay-150 ease-in" }, children, /* @__PURE__ */ React2.createElement(
+    "span",
+    {
+      className: cn(
+        "transition-transform duration-300 transform",
+        isOpen ? "rotate-180" : "rotate-0"
+      )
+    },
+    /* @__PURE__ */ React2.createElement(RiArrowDownSLine, { size: 18 })
+  ));
+}
+function AccordionContent({ isOpen, children }) {
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: cn(
+        "w-full font-normal px-3.5 pb-3.5 text-sm overflow-hidden transition-all duration-500 ease-in",
+        !isOpen ? "max-h-full opacity-100" : "max-h-0 opacity-0"
+      )
+    },
+    children
+  );
+}
+
+// app/components/Avatar.tsx
+import Image from "next/image";
+import React3, { forwardRef } from "react";
+var Avatar = forwardRef((props, ref) => {
+  const {
+    type,
+    size = "md",
+    className,
+    onClick,
+    rounded,
+    border,
+    borderColor,
+    borderWidth,
+    radius,
+    disabled,
+    statusIcon,
+    statusPosition = "bottom-right"
+  } = props;
+  const sizes = {
+    sm: "w-8 h-8",
+    md: "w-12 h-12",
+    lg: "w-16 h-16"
+  };
+  const displayText = type === "text" && props.text ? props.text.length === 2 ? props.text.toUpperCase() : props.text.split(" ").map((word) => word.charAt(0).toUpperCase()).join("").slice(0, 2) : "";
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative -z-10 ",
+        rounded && "rounded-full",
+        border && "border border-gray-200",
+        disabled && "opacity-50 pointer-events-none select-none"
+      ),
+      style: {
+        borderColor,
+        borderWidth,
+        borderRadius: radius
+      }
+    },
+    type === "image" && /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: cn(
+          "relative -z-10 flex items-center justify-center",
+          sizes[size],
+          className
+        ),
+        onClick
+      },
+      /* @__PURE__ */ React3.createElement(
+        Image,
+        {
+          fill: true,
+          className: cn(rounded && "rounded-full", "object-cover"),
+          src: props.src,
+          alt: props.alt || ""
+        }
+      )
+    ),
+    type === "icon" && /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center",
+          rounded && "rounded-full",
+          className,
+          sizes[size]
+        ),
+        onClick
+      },
+      props.icon
+    ),
+    type === "text" && /* @__PURE__ */ React3.createElement(
+      "p",
+      {
+        onClick,
+        className: cn(
+          "flex items-center justify-center text-sm font-medium text-gray-700",
+          rounded && "rounded-full",
+          className,
+          sizes[size],
+          size === "sm" && "text-xs",
+          size === "lg" && "text-xl",
+          size === "md" && "text-base"
+        )
+      },
+      displayText
+    ),
+    statusIcon && /* @__PURE__ */ React3.createElement(
+      "span",
+      {
+        className: cn(
+          "absolute w-2 h-2",
+          // small
+          statusPosition === "bottom-left" && size === "sm" && type === "image" && "bottom-0",
+          statusPosition === "top-left" && size === "sm" && type === "image" && "top-0 -left-1.5",
+          statusPosition === "bottom-right" && size === "sm" && type === "image" && "bottom-0.5 right-0.5",
+          statusPosition === "top-right" && size === "sm" && type === "image" && "-top-[1.1px] right-0",
+          // sm text and icon
+          statusPosition === "bottom-left" && size === "sm" && (type === "text" || type === "icon") && "bottom-0",
+          statusPosition === "top-left" && size === "sm" && (type === "text" || type === "icon") && "-top-1 left-0",
+          statusPosition === "bottom-right" && size === "sm" && (type === "text" || type === "icon") && "bottom-0 right-1.5",
+          statusPosition === "top-right" && size === "sm" && (type === "text" || type === "icon") && "top-0 right-0.5",
+          // medium
+          statusPosition === "bottom-left" && size === "md" && type === "image" && "bottom-1",
+          statusPosition === "top-left" && size === "md" && type === "image" && "-top-1 left-0.5",
+          statusPosition === "bottom-right" && size === "md" && type === "image" && "bottom-1 right-2",
+          statusPosition === "top-right" && size === "md" && type === "image" && "top-0 right-1",
+          // medium text and icon
+          statusPosition === "bottom-left" && size === "md" && (type === "text" || type === "icon") && "bottom-1",
+          statusPosition === "top-left" && size === "md" && (type === "text" || type === "icon") && "-top-1 left-1",
+          statusPosition === "bottom-right" && size === "md" && (type === "text" || type === "icon") && "bottom-1 right-2",
+          statusPosition === "top-right" && size === "md" && (type === "text" || type === "icon") && "top-0 right-1.5",
+          // large
+          statusPosition === "bottom-left" && size === "lg" && type === "image" && "bottom-2 left-0",
+          statusPosition === "top-left" && size === "lg" && type === "image" && "top-0 left-0.5",
+          statusPosition === "bottom-right" && size === "lg" && type === "image" && "bottom-2.5 right-2",
+          statusPosition === "top-right" && size === "lg" && type === "image" && "top-0 right-2",
+          // large text and icon
+          statusPosition === "bottom-left" && size === "lg" && (type === "text" || type === "icon") && "bottom-1.5 left-1.5",
+          statusPosition === "top-left" && size === "lg" && (type === "text" || type === "icon") && "top-0 left-1",
+          statusPosition === "bottom-right" && size === "lg" && (type === "text" || type === "icon") && "bottom-2 right-2.5",
+          statusPosition === "top-right" && size === "lg" && (type === "text" || type === "icon") && "top-0 right-2.5"
+        )
+      },
+      statusIcon
+    )
+  );
+});
+Avatar.displayName = "Avatar";
+var Avatar_default = Avatar;
+
+// app/components/AvatarGroup.tsx
+import React4, { forwardRef as forwardRef2 } from "react";
+var AvatarGroup = forwardRef2(
+  ({ avatars, size = "md", max, className }, ref) => {
+    const displayAvatars = max ? avatars.slice(0, max) : avatars;
+    const remainingCount = max ? avatars.length - max : 0;
+    return /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        ref,
+        className: cn("flex -space-x-6 rtl:space-x-reverse", className)
+      },
+      displayAvatars.map((avatar, index) => /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          className: "hover:-translate-x-3 transition-all duration-200",
+          key: index
+        },
+        /* @__PURE__ */ React4.createElement(Avatar_default, { ...avatar, size })
+      )),
+      remainingCount > 0 && /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(
+        Avatar_default,
+        {
+          type: "text",
+          text: `+${remainingCount}`,
+          size,
+          rounded: true,
+          className: "bg-gray-100"
+        }
+      ))
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var AvatarGroup_default = AvatarGroup;
+
+// app/components/Breadcrumb.tsx
+import React5 from "react";
+var Breadcrumbs = ({
+  children,
+  separator = "/",
+  "aria-label": ariaLabel,
+  containerClasses
+}) => {
+  const items = React5.Children.toArray(children).map((child, index) => {
+    const isLast = index === React5.Children.count(children) - 1;
+    return /* @__PURE__ */ React5.createElement("span", { key: index, className: "flex items-center text-text-xs text-gray-700 font-semibold" }, child, !isLast && /* @__PURE__ */ React5.createElement("span", { className: "mx-[6px]" }, separator));
+  });
+  return /* @__PURE__ */ React5.createElement("nav", { "aria-label": ariaLabel, className: `flex items-center text-text-xs text-gray-700 font-semibold ${containerClasses}` }, items);
+};
+var Breadcrumb_default = Breadcrumbs;
+
+// app/components/Button.tsx
+import React6 from "react";
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  "rounded-lg disabled:select-none font-semibold cursor-pointer transition-colors duration-300 ease-in-out",
+  {
+    variants: {
+      variant: {
+        filled: "bg-primary-600 text-white active:bg-primary-900 active:border-primary-900 hover:bg-primary-700 hover:border-primary-700 border border-primary-600 disabled:opacity-[30%] disabled:pointer-events-none",
+        outlined: "border border-primary-600 bg-white disabled:opacity-[30%] disabled:pointer-events-none text-primary-600 hover:bg-primary-100 active:bg-primary-200 active:border-primary-700"
+      },
+      intent: {
+        primary: "bg-primary-600 border-primary-600 active:bg-primary-900 active:border-primary-900 hover:bg-primary-700 hover:border-primary-700",
+        success: "bg-success-600 border-success-600 active:bg-success-900 active:border-success-900 hover:bg-success-700 hover:border-success-700",
+        error: "bg-error-700 border-error-700 active:bg-error-900 active:border-error-900 hover:bg-error-800 hover:border-error-800",
+        warning: "bg-warning-600 border-warning-600 active:bg-warning-900 active:border-warning-900 hover:bg-warning-700 hover:border-warning-700",
+        default: "bg-gray-600 border-gray-600 active:bg-gray-900 active:border-gray-900 hover:bg-gray-700 hover:border-gray-700",
+        "primary-outlined": "border-primary-600 text-primary-600 hover:bg-primary-100 active:bg-primary-200 active:border-primary-700",
+        "success-outlined": "border-success-600 text-success-600 hover:bg-success-50 hover:border-success-700 hover:text-success-700 active:bg-success-100 active:text-success-900 active:border-success-900",
+        "error-outlined": "border-error-700 text-error-700 hover:bg-error-100 hover:border-error-700 hover:text-error-700 active:bg-error-200 active:text-error-700 active:border-error-800",
+        "warning-outlined": "border-warning-500 text-warning-500 hover:bg-warning-50 hover:border-warning-600 hover:text-warning-600 active:bg-warning-100 active:text-warning-700 active:border-warning-700",
+        "default-outlined": "border-gray-700 text-gray-700 hover:bg-gray-100 hover:border-gray-700 hover:text-gray-700 active:bg-gray-300 active:text-gray-800 active:border-gray-800"
+      },
+      size: {
+        sm: "text-sm px-3.5 py-2",
+        md: "text-sm px-4 py-2.5",
+        lg: "text-base px-[18px] py-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "md"
+    }
+  }
+);
+var Button = ({
+  children,
+  className,
+  variant,
+  intent,
+  fullWidth = false,
+  startIcon,
+  disabled,
+  endIcon,
+  size,
+  ...props
+}) => {
+  return /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      ...props,
+      disabled,
+      className: cn(
+        fullWidth && "w-full",
+        buttonVariants({ intent, className, variant, size }),
+        "flex items-center text-center justify-center gap-2"
+      )
+    },
+    startIcon,
+    children,
+    endIcon
+  );
+};
+var Button_default = Button;
+
+// app/components/Checkbox.tsx
+import React7, { forwardRef as forwardRef3 } from "react";
+import { cva as cva2 } from "class-variance-authority";
+var checkboxVariant = cva2(
+  "peer relative cursor-pointer appearance-none rounded-[4px] border border-gray-300 transition-all checked:border-primary-600 checked:bg-primary-50 hover:bg-primary-50 disabled:opacity-30 disabled:pointer-events-none",
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3",
+        lg: "h-3.5 w-3.5"
+      }
+    },
+    defaultVariants: {
+      size: "lg"
+    }
+  }
+);
+var Checkbox = forwardRef3(
+  ({ disabled, checked, size, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ React7.createElement("div", { className: "inline-flex relative items-center" }, /* @__PURE__ */ React7.createElement(
+      "input",
+      {
+        type: "checkbox",
+        ref,
+        ...props,
+        disabled,
+        checked,
+        className: cn(checkboxVariant({ className, size }))
+      }
+    ), /* @__PURE__ */ React7.createElement("span", { className: "absolute text-primary-600 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100" }, /* @__PURE__ */ React7.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "w-2.5 h-2.5",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeWidth: "1"
+      },
+      /* @__PURE__ */ React7.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+          clipRule: "evenodd"
+        }
+      )
+    )));
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+
+// app/components/Chip.tsx
+import React8 from "react";
+import { cva as cva3 } from "class-variance-authority";
+var chipVariants = cva3(
+  "rounded-full capitalize flex items-center w-fit gap-2",
+  {
+    variants: {
+      intent: {
+        default: "bg-gray-50 text-gray-600",
+        success: "bg-success-50 text-success-600",
+        warning: "bg-warning-50 text-warning-500",
+        error: "bg-error-50 text-error-600",
+        primary: "bg-primary-100 text-primary-700",
+        bluegray: "bg-bluegray-100 text-bluegray-500",
+        bluelight: "bg-bluelight-100 text-bluelight-600",
+        violet: "bg-violet-50 text-violet-700",
+        indigo: "bg-indigo-100 text-indigo-700",
+        purple: "bg-purple-50 text-purple-700",
+        pink: "bg-pink-25 text-pink-700",
+        rose: "bg-rose-50 text-rose-600",
+        orange: "bg-orange-50 text-orange-600"
+      },
+      size: {
+        sm: "text-xs px-2 py-0.5",
+        md: "text-sm px-2.5 py-0.5",
+        lg: "text-sm px-3 py-1"
+      }
+    },
+    defaultVariants: {
+      intent: "default",
+      size: "md"
+    }
+  }
+);
+var dotColorVariants = {
+  default: "bg-gray-600",
+  success: "bg-success-600",
+  warning: "bg-warning-600",
+  error: "bg-error-600",
+  primary: "bg-primary-600",
+  bluegray: "bg-bluegray-500",
+  bluelight: "bg-bluelight-600",
+  violet: "bg-violet-700",
+  indigo: "bg-indigo-700",
+  purple: "bg-purple-700",
+  pink: "bg-pink-700",
+  rose: "bg-rose-600",
+  orange: "bg-orange-600"
+};
+var Chip = ({
+  children,
+  className,
+  size,
+  intent = "default",
+  dot,
+  dotColor
+}) => {
+  const resolvedIntent = intent ?? "default";
+  return /* @__PURE__ */ React8.createElement("div", { className: cn(chipVariants({ intent: resolvedIntent, size }), className) }, dot && /* @__PURE__ */ React8.createElement(
+    "span",
+    {
+      className: cn(
+        "w-1.5 h-1.5 rounded-full",
+        dotColor || dotColorVariants[resolvedIntent] || "bg-primary-600"
+        // Default fallback
+      )
+    }
+  ), /* @__PURE__ */ React8.createElement("span", null, children));
+};
+var Chip_default = Chip;
+
+// app/components/CircularProgress.tsx
+var CircularProgressBar = ({
+  percentage,
+  size = 160,
+  strokeWidth = 8,
+  text,
+  textClassName
+}) => {
+  const radius = (size - strokeWidth) / 2;
+  const viewBox = `0 0 ${size} ${size}`;
+  const dashArray = radius * Math.PI * 2;
+  const dashOffset = dashArray - dashArray * (percentage || 0) / 100;
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox }, /* @__PURE__ */ React.createElement(
+    "circle",
+    {
+      className: "fill-none stroke-gray-200",
+      cx: size / 2,
+      cy: size / 2,
+      r: radius,
+      strokeWidth: `${strokeWidth}px`
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "circle",
+    {
+      className: "fill-none stroke-primary-600 transition-all delay-200 ease-in",
+      cx: size / 2,
+      cy: size / 2,
+      r: radius,
+      strokeLinecap: "round",
+      strokeWidth: `${strokeWidth}px`,
+      transform: `rotate(-90 ${size / 2} ${size / 2})`,
+      style: {
+        strokeDasharray: dashArray,
+        strokeDashoffset: dashOffset
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      dy: ".3em",
+      textAnchor: "middle",
+      fill: "currentColor",
+      className: cn(textClassName)
+    },
+    text
+  ));
+};
+var CircularProgress_default = CircularProgressBar;
+
+// app/components/Divider.tsx
+import React9 from "react";
+var Divider = ({
+  width,
+  height,
+  position = "horizontal",
+  className
+}) => {
+  return /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      style: {
+        width,
+        height
+      },
+      className: cn(
+        `bg-gray-200`,
+        position === "horizontal" ? "w-full h-[1px]" : "w-[1px] h-full",
+        className
+      )
+    }
+  );
+};
+var Divider_default = Divider;
+
+// app/components/Dropdown.tsx
+import React13, {
+  useEffect,
+  useState as useState2,
+  useMemo,
+  useCallback,
+  forwardRef as forwardRef5,
+  useRef,
+  useImperativeHandle
+} from "react";
+import {
+  RiArrowDownSLine as RiArrowDownSLine2,
+  RiSearchLine,
+  RiErrorWarningLine
+} from "@remixicon/react";
+
+// app/components/Input.tsx
+import React10, { forwardRef as forwardRef4 } from "react";
+var Input = forwardRef4(
+  ({ size, startIcon, endIcon, className, type, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ React10.createElement(
+      "div",
+      {
+        className: cn(
+          "group flex items-center gap-2 p-3.5 border border-gray-200 rounded-lg bg-white shadow-xs hover:bg-gray-50 hover:border-gray-300 focus-within:border-gray-800 focus-within:bg-gray-25 focus-within:hover:bg-gray-50 focus-within:hover:border-gray-800 has-[:disabled]:opacity-30 has-[:disabled]:bg-gray-300 has-[:disabled]:select-none has-[:disabled]:pointer-events-none",
+          size === "sm" ? "w-[320px] h-10" : size === "lg" ? "w-[313px] h-11" : "w-full h-10",
+          className
+        )
+      },
+      /* @__PURE__ */ React10.createElement(
+        "span",
+        {
+          className: cn(
+            startIcon ? "group-hover:text-gray-600 group-focus-within:text-gray-600" : "hidden",
+            disabled === true && "text-gray-900"
+          )
+        },
+        startIcon
+      ),
+      /* @__PURE__ */ React10.createElement(
+        "input",
+        {
+          ...props,
+          ref,
+          disabled,
+          type,
+          className: cn(
+            "w-full text-sm focus:outline-none bg-transparent disabled:text-gray-900 placeholder:text-gray-500 group-hover:placeholder:text-gray-500",
+            size
+          )
+        }
+      ),
+      /* @__PURE__ */ React10.createElement(
+        "span",
+        {
+          className: cn(
+            endIcon ? "group-hover:text-gray-600 group-focus-within:text-gray-600" : "hidden",
+            disabled === true && "text-gray-900"
+          )
+        },
+        endIcon
+      )
+    );
+  }
+);
+Input.displayName = "Input";
+var Input_default = Input;
+
+// app/components/Label.tsx
+import { cva as cva4 } from "class-variance-authority";
+import React11 from "react";
+var labelVariants = cva4("flex item-start", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Label = ({
+  children,
+  htmlFor,
+  size,
+  required,
+  disabled,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React11.createElement(
+    "label",
+    {
+      htmlFor,
+      className: cn("cursor-pointer", labelVariants({ className, size }), disabled === true ? "opacity-30 select-none" : "opacity-100"),
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React11.createElement("span", { className: cn(required === true ? "block text-red-500" : "hidden") }, "*")
+  );
+};
+var Label_default = Label;
+
+// app/components/Tooltip.tsx
+import { cva as cva5 } from "class-variance-authority";
+import React12 from "react";
+var tooltipVariants = cva5(
+  "bg-white shadow-lg rounded-lg absolute hidden group-hover:block p-3 z-10 max-w-[328px] w-max whitespace-normal opacity-0 group-hover:opacity-100 transform transition-all duration-1000 ease-in-out group-hover:delay-[2000ms]",
+  {
+    variants: {
+      position: {
+        top: "bottom-[calc(100%+0px)] group-hover:translate-y-0 delay-1000 translate-y-[-10px]",
+        right: "top-1/2 -translate-y-1/2 left-[calc(100%+0px)] group-hover:translate-x-0 translate-x-[-10px]",
+        bottom: "top-[calc(100%+0px)] group-hover:translate-y-0 translate-y-[10px]",
+        left: "top-1/2 -translate-y-1/2 right-[calc(100%+0px)] group-hover:translate-x-0 translate-x-[10px]"
+      }
+    }
+  }
+);
+var Tooltip = ({
+  position,
+  content,
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React12.createElement("div", { ...props, className: "relative cursor-pointer text-sm group" }, /* @__PURE__ */ React12.createElement("div", null, children), /* @__PURE__ */ React12.createElement("span", { className: cn(tooltipVariants({ position }), className) }, content));
+};
+var Tooltip_default = Tooltip;
+
+// app/components/Dropdown.tsx
+var defaultRenderItem = (option) => {
+  return /* @__PURE__ */ React13.createElement(MenuItem, { label: option.label, value: option.value });
+};
+var Dropdown = forwardRef5(
+  ({
+    options,
+    selected,
+    setSelected,
+    search = false,
+    multiple = false,
+    dropdownText = "Select",
+    renderItem = defaultRenderItem,
+    children,
+    icon,
+    position = "top",
+    width,
+    info,
+    dropDownTooltip = false,
+    dropdownFooter = false,
+    onApply,
+    disabled = false,
+    onReset
+  }, ref) => {
+    var _a, _b;
+    const [searchQuery, setSearchQuery] = useState2("");
+    const [filteredOptions, setFilteredOptions] = useState2(
+      options || []
+    );
+    const [dropdownMenu, setDropdownMenu] = useState2(false);
+    const dropdownRef = useRef(null);
+    useImperativeHandle(ref, () => dropdownRef.current);
+    useEffect(() => {
+      if (options) {
+        setFilteredOptions(options);
+      }
+    }, [options]);
+    const memoizedFilteredOptions = useMemo(() => {
+      if (!search)
+        return filteredOptions;
+      return filteredOptions.filter(
+        (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }, [search, searchQuery, filteredOptions]);
+    const handleSearchChange = useCallback(
+      (e) => {
+        setSearchQuery(e.target.value);
+      },
+      []
+    );
+    const toggleOption = useCallback(
+      (option) => {
+        if (multiple && setSelected) {
+          setSelected(
+            (prevSelected) => prevSelected.some((item) => item.value === option.value) ? prevSelected.filter((item) => item.value !== option.value) : [...prevSelected, option]
+          );
+        } else if (setSelected) {
+          setSelected([option]);
+          setDropdownMenu(false);
+        }
+      },
+      [multiple, setSelected]
+    );
+    const handleCheckboxChange = useCallback(
+      (option) => {
+        if (multiple && setSelected) {
+          setSelected(
+            (prevSelected) => prevSelected.some((item) => item.value === option.value) ? prevSelected.filter((item) => item.value !== option.value) : [...prevSelected, option]
+          );
+        } else if (setSelected) {
+          setSelected([option]);
+        }
+      },
+      [multiple, setSelected]
+    );
+    const handleSelectAll = () => {
+      if ((selected == null ? void 0 : selected.length) === filteredOptions.length) {
+        setSelected == null ? void 0 : setSelected([]);
+      } else {
+        setSelected == null ? void 0 : setSelected(filteredOptions);
+      }
+    };
+    const handleReset = () => {
+      if (onReset) {
+        onReset();
+      }
+      setSelected == null ? void 0 : setSelected([]);
+      setDropdownMenu(false);
+    };
+    useEffect(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownMenu(false);
+      }
+    };
+    return /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        ref: dropdownRef,
+        className: cn(
+          "relative ",
+          !width && "w-full",
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        style: {
+          width
+        }
+      },
+      /* @__PURE__ */ React13.createElement(
+        "div",
+        {
+          onClick: () => !disabled && setDropdownMenu((prev) => !prev),
+          className: cn(
+            "hover:bg-gray-50 py-2 px-[14px] rounded-lg flex justify-between items-center text-gray-900 bg-gray-25 text-text-sm cursor-pointer",
+            dropdownMenu ? "border border-gray-800" : "border border-gray-200",
+            disabled && "bg-gray-300 hover:bg-gray-300 cursor-not-allowed"
+          )
+        },
+        /* @__PURE__ */ React13.createElement(
+          "section",
+          {
+            className: cn(
+              "flex items-center gap-2 text-ellipsis overflow-hidden"
+            )
+          },
+          icon && /* @__PURE__ */ React13.createElement("span", null, icon),
+          /* @__PURE__ */ React13.createElement("p", { className: "line-clamp-1 w-full" }, multiple ? ((selected == null ? void 0 : selected.length) ?? 0) > 0 ? `${selected == null ? void 0 : selected.length} Selected` : dropdownText : ((_a = selected == null ? void 0 : selected[0]) == null ? void 0 : _a.label) ? (_b = selected == null ? void 0 : selected[0]) == null ? void 0 : _b.label : dropdownText)
+        ),
+        /* @__PURE__ */ React13.createElement(RiArrowDownSLine2, { size: 18 })
+      ),
+      /* @__PURE__ */ React13.createElement(
+        "ul",
+        {
+          className: cn(
+            "max-h-0 opacity-0 overflow-hidden shadow-sm mt-1 rounded absolute text-[16px] bg-white z-[1000] w-full transition-all duration-75 delay-100 ease-in",
+            position === "top" ? "top-10" : "bottom-10",
+            dropdownMenu && "max-h-[320px] opacity-[1] transition-all ease-in duration-150"
+          )
+        },
+        search && /* @__PURE__ */ React13.createElement(
+          Input_default,
+          {
+            type: "text",
+            placeholder: "Search...",
+            value: searchQuery,
+            onChange: handleSearchChange,
+            className: "rounded rounded-b-none text-gray-800 bg-white w-full h-[35px] pl-3",
+            endIcon: /* @__PURE__ */ React13.createElement(RiSearchLine, { size: 18 })
+          }
+        ),
+        multiple && /* @__PURE__ */ React13.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ React13.createElement(
+          "p",
+          {
+            onClick: handleSelectAll,
+            className: "text-text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
+          },
+          "Select all"
+        ), /* @__PURE__ */ React13.createElement(
+          "button",
+          {
+            className: "text-text-sm text-warning-500 hover:text-warning-600",
+            onClick: handleReset
+          },
+          "Reset"
+        )),
+        /* @__PURE__ */ React13.createElement("section", { className: "max-h-[200px] transition-all duration-75 delay-100 ease-in-out overflow-y-scroll" }, options ? memoizedFilteredOptions.map((option, i) => {
+          var _a2;
+          return /* @__PURE__ */ React13.createElement(React13.Fragment, { key: i }, multiple ? /* @__PURE__ */ React13.createElement(
+            Label_default,
+            {
+              className: "has-[:checked]:bg-primary-50 has-[:checked]:border-primary-600 hover:bg-gray-50 flex flex-col py-[6px] px-[14px] cursor-pointer border-l-4 border-transparent",
+              htmlFor: `checkbox-${option.value}`,
+              key: i
+            },
+            /* @__PURE__ */ React13.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ React13.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React13.createElement(
+              Checkbox_default,
+              {
+                id: `checkbox-${option.value}`,
+                checked: (selected == null ? void 0 : selected.some(
+                  (item) => item.value === option.value
+                )) ?? false,
+                onChange: () => handleCheckboxChange(option)
+              }
+            ), /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React13.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ React13.createElement(
+              DropdownTooltip,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            ))), /* @__PURE__ */ React13.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
+            /* @__PURE__ */ React13.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+          ) : /* @__PURE__ */ React13.createElement(
+            Label_default,
+            {
+              key: i,
+              className: cn(
+                "flex justify-between py-[6px] px-[14px] hover:bg-gray-50 gap-2 items-center border-l-4 border-transparent cursor-pointer",
+                {
+                  "bg-primary-50 border-primary-600": selected && ((_a2 = selected[0]) == null ? void 0 : _a2.value) === option.value
+                }
+              ),
+              onClick: () => toggleOption(option)
+            },
+            /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React13.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ React13.createElement(
+              DropdownTooltip,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            )),
+            /* @__PURE__ */ React13.createElement("span", { className: "text-gray-500" }, info)
+          ));
+        }) : children),
+        dropdownFooter && /* @__PURE__ */ React13.createElement(
+          DropdownFooter,
+          {
+            setDropdownMenu,
+            onApply
+          }
+        )
+      )
+    );
+  }
+);
+var MenuItem = ({ label, children }) => {
+  return /* @__PURE__ */ React13.createElement("p", { className: "break-all" }, label || children);
+};
+var DropdownTooltip = ({
+  tooltipContent
+}) => {
+  const content = tooltipContent || "";
+  return content ? /* @__PURE__ */ React13.createElement(Tooltip_default, { position: "right", content }, /* @__PURE__ */ React13.createElement(RiErrorWarningLine, { color: "#98A2B3", size: 14 })) : null;
+};
+var DropdownFooter = ({
+  // onReset,
+  onApply,
+  setDropdownMenu
+}) => {
+  return /* @__PURE__ */ React13.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      className: "text-primary-600 hover:text-primary-700",
+      onClick: () => {
+        if (onApply) {
+          onApply();
+        }
+        setDropdownMenu(false);
+      }
+    },
+    "Apply"
+  ));
+};
+Dropdown.displayName = "Dropdown";
+var Dropdown_default = Dropdown;
+
+// app/components/DropdownWithIcon.tsx
+import React14, {
+  useEffect as useEffect2,
+  useState as useState3,
+  useMemo as useMemo2,
+  forwardRef as forwardRef6,
+  useCallback as useCallback2,
+  useRef as useRef2,
+  useImperativeHandle as useImperativeHandle2
+} from "react";
+import { RiErrorWarningLine as RiErrorWarningLine2, RiSearchLine as RiSearchLine2 } from "@remixicon/react";
+var defaultRenderItem2 = (option) => {
+  return /* @__PURE__ */ React14.createElement(MenuItem2, { label: option.label, value: option.value });
+};
+var DropdownWithIcon = forwardRef6(
+  ({
+    options,
+    selected = [],
+    setSelected,
+    search = false,
+    multiple = false,
+    renderItem = defaultRenderItem2,
+    children,
+    trigger,
+    //   dropdownMenu = false,
+    position = "top",
+    //   setDropdownMenu = () => {},
+    width,
+    info,
+    dropDownTooltip = false,
+    dropdownFooter = false,
+    onApply,
+    disabled = false,
+    onReset
+  }, ref) => {
+    const [searchQuery, setSearchQuery] = useState3("");
+    const localDropdownRef = useRef2(null);
+    const [dropdownMenu, setDropdownMenu] = useState3(false);
+    useImperativeHandle2(ref, () => localDropdownRef.current);
+    const memoizedFilteredOptions = useMemo2(() => {
+      if (!search)
+        return options;
+      return options == null ? void 0 : options.filter(
+        (option) => {
+          var _a, _b;
+          return typeof (option == null ? void 0 : option.label) === "string" && ((_b = (_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase()) == null ? void 0 : _b.includes(searchQuery == null ? void 0 : searchQuery.toLowerCase()));
+        }
+      );
+    }, [search, searchQuery, options]);
+    const handleSearchChange = useCallback2(
+      (e) => {
+        var _a;
+        setSearchQuery((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+      },
+      []
+    );
+    const toggleOption = useCallback2(
+      (option) => {
+        if (multiple && setSelected) {
+          setSelected(
+            (prevSelected) => (prevSelected == null ? void 0 : prevSelected.some((item) => (item == null ? void 0 : item.value) === (option == null ? void 0 : option.value))) ? prevSelected == null ? void 0 : prevSelected.filter((item) => (item == null ? void 0 : item.value) !== (option == null ? void 0 : option.value)) : [...prevSelected, option]
+          );
+        } else if (setSelected) {
+          setSelected([option]);
+          setDropdownMenu(false);
+        }
+      },
+      [multiple, setSelected, setDropdownMenu]
+    );
+    const handleCheckboxChange = useCallback2(
+      (option) => {
+        if (multiple && setSelected) {
+          setSelected(
+            (prevSelected) => (prevSelected == null ? void 0 : prevSelected.some((item) => (item == null ? void 0 : item.value) === (option == null ? void 0 : option.value))) ? prevSelected == null ? void 0 : prevSelected.filter((item) => (item == null ? void 0 : item.value) !== (option == null ? void 0 : option.value)) : [...prevSelected, option]
+          );
+        } else if (setSelected) {
+          setSelected([option]);
+        }
+      },
+      [multiple, setSelected]
+    );
+    const handleSelectAll = () => {
+      if ((selected == null ? void 0 : selected.length) === (options == null ? void 0 : options.length)) {
+        setSelected == null ? void 0 : setSelected([]);
+      } else {
+        setSelected == null ? void 0 : setSelected(options);
+      }
+    };
+    const handleReset = () => {
+      if (onReset) {
+        onReset();
+      }
+      setSelected == null ? void 0 : setSelected([]);
+      setDropdownMenu(false);
+    };
+    useEffect2(() => {
+      const handleClickOutside = (event) => {
+        var _a;
+        if ((localDropdownRef == null ? void 0 : localDropdownRef.current) && !((_a = localDropdownRef == null ? void 0 : localDropdownRef.current) == null ? void 0 : _a.contains(event == null ? void 0 : event.target))) {
+          setDropdownMenu(false);
+        }
+      };
+      document == null ? void 0 : document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document == null ? void 0 : document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [setDropdownMenu]);
+    return /* @__PURE__ */ React14.createElement(
+      "div",
+      {
+        ref: localDropdownRef,
+        className: cn(
+          "relative",
+          !width && "w-full",
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        style: {
+          width
+        }
+      },
+      /* @__PURE__ */ React14.createElement("div", { onClick: () => !disabled && setDropdownMenu((prev) => !prev) }, trigger),
+      /* @__PURE__ */ React14.createElement(
+        "ul",
+        {
+          className: cn(
+            "max-h-0 opacity-0 overflow-hidden shadow-sm mt-1 rounded absolute text-[16px] bg-white z-[1000] w-full transition-all duration-75 delay-100 ease-in",
+            position === "top" ? "top-10" : position === "bottom" ? "bottom-10" : position === "left" ? "left-0" : position === "right" ? "right-[90%]" : "top-10",
+            dropdownMenu && "max-h-[320px] opacity-[1] transition-all ease-in duration-150"
+          ),
+          style: {
+            width,
+            minWidth: "200px",
+            top: "calc(100% + 4px)"
+          }
+        },
+        search && /* @__PURE__ */ React14.createElement(
+          Input_default,
+          {
+            type: "text",
+            placeholder: "Search...",
+            value: searchQuery,
+            onChange: handleSearchChange,
+            className: "rounded rounded-b-none text-gray-800 bg-white w-full h-[35px] pl-3",
+            endIcon: /* @__PURE__ */ React14.createElement(RiSearchLine2, { size: 18 })
+          }
+        ),
+        multiple && /* @__PURE__ */ React14.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ React14.createElement(
+          "p",
+          {
+            onClick: handleSelectAll,
+            className: "text-text-sm  hover:text-primary-700  text-primary-600 cursor-pointer"
+          },
+          "Select all"
+        ), /* @__PURE__ */ React14.createElement(
+          "button",
+          {
+            className: "text-text-sm text-warning-500 hover:text-warning-600",
+            onClick: handleReset
+          },
+          "Reset"
+        )),
+        /* @__PURE__ */ React14.createElement("section", { className: "max-h-[200px] z-[1000] transition-all duration-75 delay-100 ease-in-out overflow-y-scroll" }, options ? memoizedFilteredOptions == null ? void 0 : memoizedFilteredOptions.map((option, i) => {
+          var _a;
+          return /* @__PURE__ */ React14.createElement(React14.Fragment, { key: i }, multiple ? /* @__PURE__ */ React14.createElement(
+            Label_default,
+            {
+              className: "has-[:checked]:bg-primary-50 has-[:checked]:border-primary-600 hover:bg-gray-50 flex flex-col py-[6px] px-[14px] break-words cursor-pointer border-l-4 border-transparent",
+              htmlFor: `checkbox-${option == null ? void 0 : option.value}`,
+              key: i
+            },
+            /* @__PURE__ */ React14.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ React14.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React14.createElement(
+              Checkbox_default,
+              {
+                id: `checkbox-${option == null ? void 0 : option.value}`,
+                checked: selected == null ? void 0 : selected.some(
+                  (item) => (item == null ? void 0 : item.value) === (option == null ? void 0 : option.value)
+                ),
+                onChange: () => handleCheckboxChange(option)
+              }
+            ), /* @__PURE__ */ React14.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React14.createElement("div", { className: "break-words" }, renderItem(option)), dropDownTooltip && /* @__PURE__ */ React14.createElement(
+              DropdownTooltip2,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            ))), /* @__PURE__ */ React14.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
+            /* @__PURE__ */ React14.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+          ) : /* @__PURE__ */ React14.createElement(
+            Label_default,
+            {
+              key: i,
+              className: cn(
+                "flex justify-between py-[6px] px-[14px] hover:bg-gray-50 gap-2 items-center border-l-4 border-transparent cursor-pointer",
+                {
+                  "bg-primary-50 border-primary-600": selected && ((_a = selected[0]) == null ? void 0 : _a.value) === (option == null ? void 0 : option.value)
+                }
+              ),
+              onClick: () => toggleOption(option)
+            },
+            /* @__PURE__ */ React14.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React14.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ React14.createElement(
+              DropdownTooltip2,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            )),
+            /* @__PURE__ */ React14.createElement("span", { className: "text-gray-500" }, info)
+          ));
+        }) : children),
+        dropdownFooter && /* @__PURE__ */ React14.createElement(DropdownFooter2, { onApply })
+      )
+    );
+  }
+);
+var MenuItem2 = ({ label, children }) => {
+  return /* @__PURE__ */ React14.createElement("p", { className: "break-all" }, label || children);
+};
+var DropdownTooltip2 = ({
+  tooltipContent
+}) => {
+  return tooltipContent ? /* @__PURE__ */ React14.createElement(Tooltip_default, { position: "right", content: tooltipContent }, /* @__PURE__ */ React14.createElement(RiErrorWarningLine2, { color: "#98A2B3", size: 14 })) : null;
+};
+var DropdownFooter2 = ({
+  onApply,
+  setDropdownMenu
+}) => {
+  return /* @__PURE__ */ React14.createElement("div", { className: "flex justify-between border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ React14.createElement(
+    "button",
+    {
+      className: "text-primary-600 hover:text-primary-700",
+      onClick: () => {
+        if (onApply) {
+          onApply();
+        }
+        setDropdownMenu(false);
+      }
+    },
+    "Apply"
+  ));
+};
+DropdownWithIcon.displayName = "DropdownWithIcon";
+var DropdownWithIcon_default = DropdownWithIcon;
+
+// app/components/FileUpload.tsx
+import React15, { forwardRef as forwardRef7 } from "react";
+import {
+  RiFileLine,
+  RiUpload2Line,
+  RiDeleteBinLine,
+  RiMusic2Line,
+  RiVideoLine,
+  RiImageLine,
+  RiFileExcel2Line,
+  RiFileWord2Line,
+  RiFilePpt2Line,
+  RiFileZipLine,
+  RiFilePdf2Line
+} from "@remixicon/react";
+var getIconForMimeType = (file) => {
+  var _a;
+  const fileName = typeof file === "string" ? file : file.name;
+  const extension = (_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+  let iconComponent;
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "svg":
+    case "webp":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiImageLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    case "mp3":
+    case "wav":
+    case "ogg":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiMusic2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    case "mp4":
+    case "avi":
+    case "mkv":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiVideoLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    case "xls":
+    case "xlsx":
+    case "csv":
+    case "txt":
+    case "ods":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiFileExcel2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    case "doc":
+    case "docx":
+    case "odt":
+    case "xml":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiFileWord2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    case "pptx":
+    case "pptm":
+    case "xps":
+    case "ppsx":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiFilePpt2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    case "rar":
+    case "zip":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiFileZipLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    case "pdf":
+      iconComponent = /* @__PURE__ */ React15.createElement(RiFilePdf2Line, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+    default:
+      iconComponent = /* @__PURE__ */ React15.createElement(RiFileLine, { className: "text-primary-600 bg-primary-100 border-4 border-primary-50 w-8 h-8 p-1 rounded-full" });
+      break;
+  }
+  return iconComponent;
+};
+var FileUpload = forwardRef7(
+  ({
+    selectedFile,
+    onChange,
+    multiple,
+    onDelete,
+    children,
+    disabled,
+    title,
+    id,
+    className,
+    accept,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col gap-2 " }, /* @__PURE__ */ React15.createElement(
+      "input",
+      {
+        type: "file",
+        ...props,
+        accept,
+        id,
+        onChange,
+        multiple,
+        disabled,
+        hidden: true,
+        ref
+      }
+    ), /* @__PURE__ */ React15.createElement(
+      Label_default,
+      {
+        htmlFor: id,
+        disabled,
+        className: cn(
+          "w-full h-[126px] border-2 border-dashed border-gray-200 hover:bg-gray-200 cursor-pointer rounded-lg px-6 py-4 flex flex-col items-center gap-2",
+          disabled && "pointer-events-none",
+          className
+        )
+      },
+      /* @__PURE__ */ React15.createElement("div", { className: "w-10 h-10 border-[6px] border-gray-50 bg-gray-200 rounded-full p-1 flex justify-center items-center" }, /* @__PURE__ */ React15.createElement(RiUpload2Line, { className: "w-5 h-5" })),
+      /* @__PURE__ */ React15.createElement("p", { className: "text-center text-sm text-gray-600" }, /* @__PURE__ */ React15.createElement("span", { className: "text-primary-600 font-semibold" }, "Click to upload"), " ", /* @__PURE__ */ React15.createElement("br", null), " ", title)
+    ), /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col gap-2" }, selectedFile == null ? void 0 : selectedFile.map((file, index) => /* @__PURE__ */ React15.createElement(
+      "div",
+      {
+        key: index,
+        className: "p-4 border border-gray-200 rounded-lg flex items-center justify-between gap-5"
+      },
+      /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 w-full" }, getIconForMimeType(file), /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col gap-1 w-full" }, /* @__PURE__ */ React15.createElement("p", { className: "text-sm line-clamp-2 break-all" }, typeof file === "string" ? file : file.name, " "), /* @__PURE__ */ React15.createElement("div", { className: "w-full" }, children))),
+      /* @__PURE__ */ React15.createElement(
+        RiDeleteBinLine,
+        {
+          onClick: onDelete,
+          className: "text-gray-500 w-5 h-5 cursor-pointer"
+        }
+      )
+    ))));
+  }
+);
+FileUpload.displayName = "FileUpload";
+var FileUpload_default = FileUpload;
+
+// app/components/GlobalNavigation.tsx
+import React16, { useEffect as useEffect3, useRef as useRef3, forwardRef as forwardRef8 } from "react";
+var GlobalNavigation = forwardRef8(
+  ({
+    isOpen,
+    setIsOpen,
+    trigger,
+    children,
+    className,
+    postion = "bottom-right"
+  }, ref) => {
+    const popoverRef = useRef3(null);
+    useEffect3(() => {
+      const handleClickOutside = (event) => {
+        if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return /* @__PURE__ */ React16.createElement("div", { className: "relative w-max", ref }, /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        className: "cursor-pointer",
+        ref: popoverRef,
+        onClick: () => setIsOpen(!isOpen)
+      },
+      trigger
+    ), isOpen && /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        className: cn(
+          "absolute z-10 bg-white rounded-lg shadow-sm border min-w-[200px] p-4 transition-all duration-300 ease-in-out",
+          postion === "bottom-left" && "left-0 top-4/4",
+          postion === "bottom-right" && "top-4/4 right-0",
+          postion === "top-left" && "bottom-[57px] left-0",
+          postion === "top-right" && "bottom-[57px] right-0",
+          className
+        )
+      },
+      children
+    ));
+  }
+);
+GlobalNavigation.displayName = "GlobalNavigation";
+var GlobalNavigation_default = GlobalNavigation;
+
+// app/components/HelperText.tsx
+import React17 from "react";
+var HelperText = ({ children, className, size, error }) => {
+  return /* @__PURE__ */ React17.createElement(
+    "span",
+    {
+      className: cn(
+        "text-gray-500",
+        error && "text-error-500",
+        className,
+        size === "sm" ? "text-xs" : "text-sm"
+      )
+    },
+    children
+  );
+};
+var HelperText_default = HelperText;
+
+// app/components/ListItem.tsx
+import Link from "next/link";
+import React18 from "react";
+var ListItem = React18.forwardRef(({ className, title, href, onClick, as = "link", icon }, ref) => {
+  if (as === "button") {
+    return /* @__PURE__ */ React18.createElement(
+      "button",
+      {
+        className: cn(
+          "px-4 py-[8px] w-full text-left flex items-center gap-2",
+          className
+        ),
+        onClick,
+        ref
+      },
+      /* @__PURE__ */ React18.createElement("h1", null, title),
+      icon && /* @__PURE__ */ React18.createElement("span", null, icon)
+    );
+  }
+  return /* @__PURE__ */ React18.createElement(
+    Link,
+    {
+      href: href ?? "",
+      passHref: true,
+      className: cn("px-4 py-[8px] w-full flex items-center gap-2", className),
+      ref
+    },
+    /* @__PURE__ */ React18.createElement("h1", null, title),
+    icon && /* @__PURE__ */ React18.createElement("p", null, icon)
+  );
+});
+ListItem.displayName = "ListItem";
+var ListItem_default = ListItem;
+
+// app/components/Loading.tsx
+import React19 from "react";
+var Loading = ({ width, height, loaderColor, variant }) => {
+  return /* @__PURE__ */ React19.createElement(
+    "div",
+    {
+      className: cn(
+        "animate-spin-slow border-primary-600 border-t-gray-200/50 rounded-full",
+        variant === "light" ? "border-2" : "border-4"
+      ),
+      style: {
+        width,
+        height,
+        borderColor: loaderColor,
+        borderTopColor: "rgb(234 236 240 / 0.5)"
+      }
+    }
+  );
+};
+var Loading_default = Loading;
+
+// app/components/Modal.tsx
+import React20, { useEffect as useEffect4 } from "react";
+import { RiCloseLine } from "@remixicon/react";
+function Modal({
+  children,
+  showModal,
+  setShowModal,
+  closeModal = true,
+  closeOnOutsideClick = true,
+  className = ""
+}) {
+  useEffect4(() => {
+    if (showModal) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [showModal]);
+  const handleClickOutside = (event) => {
+    if (event.target === event.currentTarget && closeOnOutsideClick) {
+      setShowModal(false);
+    }
+  };
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, showModal && /* @__PURE__ */ React20.createElement(
+    "div",
+    {
+      onClick: handleClickOutside,
+      className: "w-full h-full bg-backdrop bg-blend-overlay fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center z-[1000000] overflow-hidden"
+    },
+    /* @__PURE__ */ React20.createElement(
+      "div",
+      {
+        className: `relative bg-white shadow-boxShadow rounded-xl p-[18px] transition-all duration-150 fade-in-grow w-[50%] mx-4 ${className}`
+      },
+      /* @__PURE__ */ React20.createElement("div", null, children),
+      closeModal && /* @__PURE__ */ React20.createElement(
+        "div",
+        {
+          className: "absolute top-4 ml-5 right-5 z-10 shadow-backdrop rounded-full text-primary cursor-pointer hover:bg-primaryLight",
+          onClick: () => setShowModal(false)
+        },
+        /* @__PURE__ */ React20.createElement(RiCloseLine, { size: 24 })
+      )
+    )
+  ));
+}
+
+// app/components/MenuItem.tsx
+import React21, { useState as useState4, useRef as useRef4, useEffect as useEffect5 } from "react";
+import { RiArrowDownSLine as RiArrowDownSLine3, RiArrowUpSLine } from "@remixicon/react";
+function MenuDropdown({
+  trigger,
+  children,
+  width = "250px",
+  className
+}) {
+  const [isOpen, setIsOpen] = useState4(false);
+  const dropdownRef = useRef4(null);
+  useEffect5(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ React21.createElement("div", { className: "relative w-full", ref: dropdownRef }, /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      className: "cursor-pointer",
+      onClick: () => setIsOpen(!isOpen),
+      "aria-label": "Open menu"
+    },
+    trigger
+  ), isOpen && /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      style: { width },
+      className: cn(
+        "border border-gray-200 rounded-lg absolute left-0 mt-1 z-[100000] w-full bg-white shadow-sm",
+        className
+      )
+    },
+    children
+  ));
+}
+var MenuSubItem = ({
+  label,
+  onClick,
+  disabled,
+  children,
+  className = ""
+}) => /* @__PURE__ */ React21.createElement(
+  "button",
+  {
+    className: cn(
+      "w-full text-left p-4 text-sm border-y-[0.5px] last:border-y first:rounded-t hover:bg-primary-50 hover:rounded",
+      disabled ? "opacity-50 cursor-not-allowed" : "",
+      className
+    ),
+    onClick,
+    disabled
+  },
+  label,
+  children && /* @__PURE__ */ React21.createElement(React21.Fragment, null, children)
+);
+var MenuItem3 = ({
+  content,
+  children,
+  className = "",
+  sectionClassName = "",
+  menuClassName = ""
+}) => {
+  const [isSubOpen, setIsSubOpen] = useState4(false);
+  return /* @__PURE__ */ React21.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React21.createElement(
+    "section",
+    {
+      onClick: () => setIsSubOpen(!isSubOpen),
+      className: cn(
+        "cursor-pointer hover:bg-primary-50 p-4 flex text-sm border-y-[0.5px] justify-between items-center gap-1 w-full text-left",
+        sectionClassName
+      )
+    },
+    content,
+    isSubOpen ? /* @__PURE__ */ React21.createElement(RiArrowUpSLine, { size: 20 }) : /* @__PURE__ */ React21.createElement(RiArrowDownSLine3, { size: 20 })
+  ), isSubOpen && /* @__PURE__ */ React21.createElement("div", { className: cn(" border-primary-100 bg-gray-50", menuClassName) }, children));
+};
+
+// app/components/Notice.tsx
+import { cva as cva6 } from "class-variance-authority";
+import React22 from "react";
+import {
+  RiAlertFill,
+  RiCloseLine as RiCloseLine2,
+  RiErrorWarningLine as RiErrorWarningLine3,
+  RiQuestionLine,
+  RiThumbUpLine,
+  RiShieldCheckLine
+} from "@remixicon/react";
+var VariantIcon = ({ variant }) => {
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(RiThumbUpLine, { size: 20, color: "#039855" }));
+    case "warning":
+      return /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(RiQuestionLine, { color: "#F79009", size: 20 }));
+    case "info":
+      return /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(RiErrorWarningLine3, { color: "#1570EF", size: 20 }));
+    case "error":
+      return /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(RiAlertFill, { color: "#F04438", size: 20 }));
+    default:
+      return /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(RiShieldCheckLine, { color: "#475467", size: 20 }));
+  }
+};
+var noticeVariants = cva6("p-4 w-fit rounded-[6px]", {
+  variants: {
+    variant: {
+      success: "bg-success-25 border border-success-600",
+      warning: "bg-warning-25 border border-warning-600",
+      info: "bg-primary-25 border border-primary-600",
+      error: "bg-error-25 border border-error-600",
+      default: "bg-gray-25 border border-gray-600"
+    },
+    position: {
+      top: "top-4 transition-all duration-700 m-auto left-0 right-0",
+      bottom: "bottom-4 transition-all duration-700 right-4"
+    }
+  }
+});
+var Notice = ({
+  children,
+  variant,
+  position,
+  noticeTitle,
+  open,
+  setOpen,
+  showIcon = true
+}) => {
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, open && /* @__PURE__ */ React22.createElement(
+    "div",
+    {
+      className: cn(
+        noticeVariants({ variant, position }),
+        `fixed z-10`,
+        position === "top" && open && `animate-slide-in-top`,
+        position === "bottom" && open && `animate-slide-in-right`
+      )
+    },
+    /* @__PURE__ */ React22.createElement("div", { className: "relative" }, showIcon ? noticeTitle == "" ? /* @__PURE__ */ React22.createElement("div", { className: "flex items-start" }, /* @__PURE__ */ React22.createElement(VariantIcon, { variant }), /* @__PURE__ */ React22.createElement("span", { className: "ml-2 mr-8 text-text-sm" }, children), /* @__PURE__ */ React22.createElement("span", { onClick: handleClose }, /* @__PURE__ */ React22.createElement(RiCloseLine2, { size: 20 }))) : /* @__PURE__ */ React22.createElement("div", { className: "" }, /* @__PURE__ */ React22.createElement("section", { className: "flex items-start" }, /* @__PURE__ */ React22.createElement(VariantIcon, { variant }), /* @__PURE__ */ React22.createElement("div", { className: "ml-2 mr-8 -mt-[3px]" }, /* @__PURE__ */ React22.createElement("span", { className: "font-bold text-gray-800 mb-1" }, noticeTitle), /* @__PURE__ */ React22.createElement("p", { className: "text-text-sm text-gray-700" }, children))), /* @__PURE__ */ React22.createElement(
+      "span",
+      {
+        className: cn("absolute top-0 right-0 cursor-pointer"),
+        onClick: handleClose
+      },
+      /* @__PURE__ */ React22.createElement(RiCloseLine2, { size: 20 })
+    )) : /* @__PURE__ */ React22.createElement("div", { className: "mr-8" }, /* @__PURE__ */ React22.createElement("section", { className: "flex items-center" }, /* @__PURE__ */ React22.createElement("p", { className: "font-bold text-gray-800 mb-1" }, noticeTitle)), /* @__PURE__ */ React22.createElement(
+      "span",
+      {
+        className: cn("absolute top-0 right-0 cursor-pointer"),
+        onClick: handleClose
+      },
+      /* @__PURE__ */ React22.createElement(RiCloseLine2, { size: 20 })
+    ), /* @__PURE__ */ React22.createElement("p", { className: "text-text-sm" }, children)))
+  ));
+};
+var Notice_default = Notice;
+
+// app/components/Pagination.tsx
+import React23, { useState as useState5 } from "react";
+import {
+  RiArrowLeftLine,
+  RiArrowRightLine,
+  RiArrowDownSLine as RiArrowDownSLine4,
+  RiArrowUpSLine as RiArrowUpSLine2
+} from "@remixicon/react";
+var Pagination = ({
+  count,
+  page,
+  rowsPerPage,
+  rowsPerPageOptions,
+  onPageChange,
+  onRowsPerPageChange,
+  className
+}) => {
+  const totalPages = Math.ceil(count / rowsPerPage);
+  const handlePrevPageClick = () => {
+    onPageChange(page - 1);
+  };
+  const handleNextPageClick = () => {
+    onPageChange(page + 1);
+  };
+  const [showOptions, setShowOptions] = useState5(false);
+  const handleOptionClick = (option) => {
+    if (typeof option === "number") {
+      onRowsPerPageChange(option);
+    } else {
+      onRowsPerPageChange(option.value);
+    }
+    setShowOptions(false);
+  };
+  return /* @__PURE__ */ React23.createElement(
+    "div",
+    {
+      className: cn(
+        "border border-gray-200 px-6 py-4 flex justify-between items-center w-full",
+        className
+      )
+    },
+    /* @__PURE__ */ React23.createElement("section", { className: "flex gap-1.5 items-center" }, /* @__PURE__ */ React23.createElement("span", { className: "text-gray-800 text-text-sm font-medium" }, "Items per page"), /* @__PURE__ */ React23.createElement("div", { className: "relative z-[100]" }, /* @__PURE__ */ React23.createElement(
+      "div",
+      {
+        className: "border border-gray-600 w-[88px] rounded text-sm px-1.5 py-1 cursor-pointer flex items-center justify-between gap-1 text-gray-600",
+        onClick: () => setShowOptions(!showOptions)
+      },
+      rowsPerPage,
+      " ",
+      !showOptions ? /* @__PURE__ */ React23.createElement(RiArrowDownSLine4, { size: 14 }) : /* @__PURE__ */ React23.createElement(RiArrowUpSLine2, { size: 14 })
+    ), showOptions && /* @__PURE__ */ React23.createElement("div", { className: "absolute top-full left-0 shadow bg-white rounded-md text-sm mt-1 z-50" }, rowsPerPageOptions == null ? void 0 : rowsPerPageOptions.map((option, index) => /* @__PURE__ */ React23.createElement(
+      "div",
+      {
+        key: index,
+        className: "px-2 py-1.5 w-[88px] text-gray-800 cursor-pointer hover:bg-gray-100",
+        onClick: () => handleOptionClick(option)
+      },
+      typeof option === "number" ? option : option.label
+    ))))),
+    /* @__PURE__ */ React23.createElement("section", { className: "flex items-center gap-2 font-medium" }, /* @__PURE__ */ React23.createElement("div", { className: "flex items-center gap-2 text-gray-800 text-text-sm" }, /* @__PURE__ */ React23.createElement("span", null, "page"), /* @__PURE__ */ React23.createElement(
+      "select",
+      {
+        value: page + 1,
+        onChange: (e) => onPageChange(parseInt(e.target.value, 10) - 1),
+        className: "bg-gray-25 text-gray-500 px-3.5 py-1 border border-gray-200 rounded-md text-sm focus:outline-none focus:border-gray-600"
+      },
+      totalPages > 0 && [...Array(totalPages)].map((_, index) => /* @__PURE__ */ React23.createElement("option", { key: index + 1, value: index + 1 }, index + 1))
+    ), /* @__PURE__ */ React23.createElement("span", null, "of ", totalPages > 0 ? totalPages : 0)), /* @__PURE__ */ React23.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React23.createElement(
+      Button_default,
+      {
+        variant: "outlined",
+        intent: "default-outlined",
+        startIcon: /* @__PURE__ */ React23.createElement(RiArrowLeftLine, { size: 20 }),
+        onClick: handlePrevPageClick,
+        disabled: page === 0,
+        className: "rounded-none h-8 rounded-l-lg"
+      }
+    ), /* @__PURE__ */ React23.createElement(
+      Button_default,
+      {
+        variant: "outlined",
+        intent: "default-outlined",
+        startIcon: /* @__PURE__ */ React23.createElement(RiArrowRightLine, { size: 20 }),
+        onClick: handleNextPageClick,
+        disabled: page === totalPages - 1,
+        className: "rounded-none h-8 rounded-r-lg"
+      }
+    )))
+  );
+};
+var Pagination_default = Pagination;
+
+// app/components/Progress.tsx
+import React24 from "react";
+var ProgressBar = ({
+  progress,
+  progressText = "",
+  progressColor,
+  progressTextPosition
+}) => {
+  const _progress = Math == null ? void 0 : Math.min(Math == null ? void 0 : Math.max(0, progress), 100);
+  return /* @__PURE__ */ React24.createElement(
+    "div",
+    {
+      className: cn(
+        "rounded",
+        progressTextPosition === "right" ? "flex items-center gap-1" : progressTextPosition === "left" ? "flex items-center gap-1" : ""
+      )
+    },
+    /* @__PURE__ */ React24.createElement(
+      "span",
+      {
+        className: cn(
+          "text-gray-700 text-text-sm",
+          progressTextPosition === "left" ? "inline-block" : progressTextPosition === "top" ? "flex justify-end" : "hidden"
+        )
+      },
+      progressText
+    ),
+    /* @__PURE__ */ React24.createElement(
+      "div",
+      {
+        className: "w-full h-2 rounded bg-gray-200",
+        role: "progressbar",
+        "aria-valuenow": _progress,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      },
+      /* @__PURE__ */ React24.createElement(
+        "div",
+        {
+          className: `${progressColor} h-full transition-all delay-1000 duration-700 rounded ease-in`,
+          style: { width: `${_progress}%` }
+        }
+      )
+    ),
+    /* @__PURE__ */ React24.createElement(
+      "span",
+      {
+        className: cn(
+          "text-gray-700 text-text-sm",
+          progressTextPosition === "bottom" ? "flex justify-end" : progressTextPosition === "top" ? "hidden" : progressTextPosition === "right" ? "flex justify-end" : "hidden"
+        )
+      },
+      progressText
+    )
+  );
+};
+var Progress_default = ProgressBar;
+
+// app/components/Radio.tsx
+import React25, { forwardRef as forwardRef9 } from "react";
+import { cva as cva7 } from "class-variance-authority";
+var radioVariants = cva7("", {
+  variants: {
+    size: {
+      sm: "h-3 w-3",
+      lg: "h-4 w-4"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+var Radio = forwardRef9(
+  ({ size, disabled, checked, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ React25.createElement("div", { className: "relative inline-flex items-center cursor-pointer" }, /* @__PURE__ */ React25.createElement(
+      "input",
+      {
+        ...props,
+        ref,
+        checked,
+        disabled,
+        type: "radio",
+        className: cn(
+          "peer relative cursor-pointer appearance-none rounded-full border border-gray-300 hover:border-primary-600 hover:bg-primary-50 transition-all checked:border-primary-600 checked:bg-primary-50 disabled:opacity-30 disabled:pointer-events-none",
+          radioVariants({ size, className })
+        )
+      }
+    ), /* @__PURE__ */ React25.createElement(
+      "span",
+      {
+        className: cn(
+          "absolute transition-opacity opacity-0 ease-in-out pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100 h-1.5 w-1.5 bg-primary-600 rounded-full duration-300",
+          size == "sm" && "h-[4.5px] w-[4.5px]"
+        )
+      }
+    ));
+  }
+);
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+
+// app/components/Sidebar.tsx
+import React26 from "react";
+import Link2 from "next/link";
+import { usePathname } from "next/navigation";
+var Sidebar = ({ children, collapsed, setCollapsed }) => {
+  return /* @__PURE__ */ React26.createElement(
+    "div",
+    {
+      onMouseEnter: () => setCollapsed(true),
+      onMouseLeave: () => setCollapsed(false),
+      className: cn(
+        "border border-gray-200 shadow-sm relative flex flex-col min-h-screen transition-all duration-300 ease-in-out cursor-pointer",
+        !collapsed ? "w-[80px] py-[21px] px-[17px]" : "w-[308px] py-[22px] px-6"
+      )
+    },
+    /* @__PURE__ */ React26.createElement("div", { className: "" }, children)
+  );
+};
+var SidebarHeader = ({
+  collapsed,
+  setCollapsed,
+  children
+}) => {
+  return /* @__PURE__ */ React26.createElement(
+    "div",
+    {
+      className: cn({
+        "z-20": true
+      })
+    },
+    /* @__PURE__ */ React26.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ React26.createElement("span", { className: "whitespace-nowrap" }, children))
+  );
+};
+var SidebarMenu = ({
+  collapsed,
+  navItems,
+  scroll = false
+}) => {
+  const currentPath = usePathname();
+  return /* @__PURE__ */ React26.createElement("nav", { className: `max-h-[60vh] ${scroll && "overflow-y-auto customScroll"}` }, /* @__PURE__ */ React26.createElement("ul", { className: "my-2 flex flex-col gap-2 items-stretch" }, navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => /* @__PURE__ */ React26.createElement(
+    "li",
+    {
+      key: parentIndex,
+      className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
+    },
+    /* @__PURE__ */ React26.createElement(
+      "p",
+      {
+        className: cn({
+          "text-[14px] text-gray-500": true,
+          "w-[37px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed
+        })
+      },
+      parentItem.label
+    ),
+    /* @__PURE__ */ React26.createElement("ul", null, parentItem == null ? void 0 : parentItem.items.map((item, index) => /* @__PURE__ */ React26.createElement("li", { key: index }, /* @__PURE__ */ React26.createElement(
+      Link2,
+      {
+        className: cn({
+          "hover:bg-gray-100 px-3 py-2 flex items-center mb-[6px] cursor-pointer rounded-md transition-colors duration-300 font-semibold whitespace-nowrap overflow-hidden": true,
+          "text-white bg-primary-600": currentPath === (item == null ? void 0 : item.href),
+          "text-gray-700": currentPath !== (item == null ? void 0 : item.href),
+          "hover:bg-primary-600": currentPath === (item == null ? void 0 : item.href)
+        }),
+        href: item.href,
+        passHref: true
+      },
+      /* @__PURE__ */ React26.createElement(
+        "div",
+        {
+          className: `flex items-center gap-2 whitespace-nowrap`
+        },
+        /* @__PURE__ */ React26.createElement("span", { className: "text-text-sm" }, " ", item.icon),
+        /* @__PURE__ */ React26.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)
+      )
+    ))))
+  ))));
+};
+var Footer = ({
+  children,
+  setCollapsed,
+  collapsed,
+  navItems
+}) => {
+  const currentPath = usePathname();
+  return /* @__PURE__ */ React26.createElement(
+    "div",
+    {
+      className: cn({
+        "absolute bottom-0 max-h-[230px] overflow-auto bg-white z-10 py-3 w-[85%]": true,
+        "w-[55%]": !collapsed
+      }),
+      onClick: () => setCollapsed(true)
+    },
+    collapsed && /* @__PURE__ */ React26.createElement("div", { className: "shadow-md" }, /* @__PURE__ */ React26.createElement(Divider_default, null)),
+    navItems && navItems.length > 0 && /* @__PURE__ */ React26.createElement("nav", { className: "flex-grow w-full" }, /* @__PURE__ */ React26.createElement("ul", { className: "my-2 flex flex-col gap-2 items-stretch" }, navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => {
+      var _a;
+      return /* @__PURE__ */ React26.createElement(
+        "li",
+        {
+          key: parentIndex,
+          className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
+        },
+        /* @__PURE__ */ React26.createElement(
+          "p",
+          {
+            className: cn({
+              "text-[14px] text-gray-500": true,
+              "w-[37px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed
+            })
+          },
+          parentItem.label
+        ),
+        /* @__PURE__ */ React26.createElement("ul", null, (_a = parentItem == null ? void 0 : parentItem.items) == null ? void 0 : _a.map((item, index) => /* @__PURE__ */ React26.createElement("li", { key: index }, /* @__PURE__ */ React26.createElement(
+          Link2,
+          {
+            className: cn({
+              "hover:bg-gray-100 px-3 py-2 flex items-center mb-[6px] cursor-pointer rounded-md transition-colors duration-300 font-semibold whitespace-nowrap overflow-hidden": true,
+              "text-white bg-primary-600": currentPath === (item == null ? void 0 : item.href),
+              "text-gray-700": currentPath !== (item == null ? void 0 : item.href),
+              "hover:bg-primary-600": currentPath === (item == null ? void 0 : item.href)
+            }),
+            href: item.href,
+            passHref: true
+          },
+          /* @__PURE__ */ React26.createElement(
+            "div",
+            {
+              className: `flex items-center gap-2 whitespace-nowrap`
+            },
+            /* @__PURE__ */ React26.createElement("span", { className: "text-text-sm" }, " ", item.icon),
+            /* @__PURE__ */ React26.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)
+          )
+        ))))
+      );
+    }))),
+    children
+  );
+};
+Sidebar.Header = SidebarHeader;
+Sidebar.Menu = SidebarMenu;
+Sidebar.Footer = Footer;
+var Sidebar_default = Sidebar;
+
+// app/components/Slider.tsx
+import React27, { forwardRef as forwardRef10 } from "react";
+var Slider = forwardRef10(
+  ({ value, min = 0, max = 100, size = "sm", ...props }, ref) => {
+    const progress = (value - min) / (max - min) * 100;
+    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(
+      "input",
+      {
+        ref,
+        type: "range",
+        min,
+        max,
+        value,
+        ...props,
+        className: cn(
+          "slider w-full rounded-full appearance-none bg-gray-300 h-4 cursor-pointer focus:outline-none",
+          size === "sm" ? "h-1.5" : "h-4"
+        ),
+        style: {
+          background: `linear-gradient(to right, var(--primary-300) ${progress}%, var(--gray-300) ${progress}%)`
+        }
+      }
+    ));
+  }
+);
+Slider.displayName = "Slider";
+var Slider_default = Slider;
+
+// app/components/Skeleton.tsx
+import React28 from "react";
+var Skeleton = ({
+  width = "100%",
+  height = "100%",
+  circle = false
+}) => {
+  const style = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height,
+    borderRadius: circle ? "50%" : void 0
+  };
+  return /* @__PURE__ */ React28.createElement("span", { className: `skeleton rounded-lg ${circle ? "circle" : ""}`, style });
+};
+var Skeleton_default = Skeleton;
+
+// app/components/Stepper.tsx
+import React29, { useRef as useRef5 } from "react";
+import { RiCheckLine } from "@remixicon/react";
+var Stepper = ({
+  stepsConfig,
+  currentStep,
+  setCurrentStep,
+  isComplete,
+  setIsComplete,
+  position = "horizontal"
+}) => {
+  var _a;
+  const stepRef = useRef5([]);
+  if (!stepsConfig.length) {
+    return null;
+  }
+  const ActiveComponent = (_a = stepsConfig[currentStep - 1]) == null ? void 0 : _a.Component;
+  return /* @__PURE__ */ React29.createElement("div", { className: cn(position !== "horizontal" && "flex") }, /* @__PURE__ */ React29.createElement(
+    "div",
+    {
+      className: cn(
+        "relative",
+        position === "horizontal" ? "flex justify-between items-start" : "flex flex-col"
+      )
+    },
+    stepsConfig.map((step, index) => /* @__PURE__ */ React29.createElement(
+      "div",
+      {
+        key: index,
+        ref: (el) => stepRef.current[index] = el,
+        className: `w-full ${position === "horizontal" ? "flex gap-4 flex-col" : "flex gap-6 justify-start"} ${currentStep > index + 1 || isComplete ? "complete" : ""} ${currentStep === index + 1 ? "" : ""}`
+      },
+      /* @__PURE__ */ React29.createElement(
+        "div",
+        {
+          className: cn(
+            "",
+            position === "horizontal" ? "flex items-center" : "flex flex-col"
+          )
+        },
+        /* @__PURE__ */ React29.createElement(
+          "div",
+          {
+            className: `w-[20px] h-[20px] rounded-full bg-gray-100 flex justify-center items-center ${currentStep === index + 1 ? "border border-primary-600" : "border border-gray-200"} ${currentStep > index + 1 || isComplete ? "bg-primary-600 border-none" : ""}`
+          },
+          currentStep === index + 1 && !isComplete && /* @__PURE__ */ React29.createElement("span", { className: "w-[10px] h-[10px] rounded-full bg-primary-600" }),
+          (currentStep > index + 1 || isComplete) && /* @__PURE__ */ React29.createElement("span", null, /* @__PURE__ */ React29.createElement(RiCheckLine, { size: 12, color: "#fff" }))
+        ),
+        index !== stepsConfig.length - 1 && /* @__PURE__ */ React29.createElement(
+          "div",
+          {
+            className: cn(
+              "mx-auto rounded-lg bg-gray-200",
+              position === "horizontal" ? "w-[80%] h-1" : "h-[100px] w-1 my-2"
+            )
+          },
+          /* @__PURE__ */ React29.createElement(
+            "p",
+            {
+              className: cn(
+                "h-full rounded-lg ",
+                currentStep > index + 1 ? "bg-primary-600" : ""
+              )
+            }
+          )
+        )
+      ),
+      /* @__PURE__ */ React29.createElement(
+        "div",
+        {
+          className: cn(
+            "whitespace-nowrap",
+            position === "vertical" || (step == null ? void 0 : step.helperName) ? "-mt-1" : ""
+          )
+        },
+        /* @__PURE__ */ React29.createElement("span", { className: "text-gray-400 text-text-xs" }, step == null ? void 0 : step.helperName),
+        /* @__PURE__ */ React29.createElement("p", null, step == null ? void 0 : step.name)
+      )
+    ))
+  ), ActiveComponent && /* @__PURE__ */ React29.createElement(ActiveComponent, null));
+};
+var Stepper_default = Stepper;
+
+// app/components/TableComponents.tsx
+import React30 from "react";
+var Table = ({ children, className, dense, ...props }) => {
+  return /* @__PURE__ */ React30.createElement(
+    "table",
+    {
+      ...props,
+      className: cn(
+        dense && "group/dense",
+        "bg-white text-left w-full border",
+        className
+      )
+    },
+    children
+  );
+};
+var TableHead = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React30.createElement(
+    "thead",
+    {
+      ...props,
+      className: cn("bg-gray-50 border border-gray-200", className)
+    },
+    children
+  );
+};
+var TableBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React30.createElement("tbody", { ...props, className: cn(className) }, children);
+};
+var TableRow = ({
+  children,
+  className,
+  indent,
+  ...props
+}) => {
+  return /* @__PURE__ */ React30.createElement(
+    "tr",
+    {
+      ...props,
+      className: cn(
+        "border border-gray-200 hover:bg-gray-50",
+        indent && "group/indent border-none",
+        className
+      )
+    },
+    children
+  );
+};
+var TableHeadCell = ({
+  children,
+  className,
+  icon,
+  sticky,
+  shadow,
+  left,
+  ...props
+}) => {
+  return /* @__PURE__ */ React30.createElement(
+    "th",
+    {
+      ...props,
+      className: cn(
+        "px-6 py-3 text-left group-has-[th]/dense:py-2",
+        sticky && `sticky bg-gray-50`,
+        sticky && shadow && "shadow-table",
+        left,
+        className
+      ),
+      style: {
+        left
+      }
+    },
+    /* @__PURE__ */ React30.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React30.createElement("span", { className: "font-medium text-xs" }, children), icon && /* @__PURE__ */ React30.createElement(
+      "span",
+      {
+        className: "hover:bg-gray-200 w-5 h-5 flex items-center justify-center p-1 rounded focus:bg-gray-300 active:bg-gray-300"
+      },
+      icon
+    ))
+  );
+};
+var TableDataCell = ({
+  children,
+  className,
+  icon,
+  sticky,
+  shadow,
+  left,
+  ...props
+}) => {
+  return /* @__PURE__ */ React30.createElement(
+    "td",
+    {
+      ...props,
+      className: cn(
+        "px-6 py-4 text-sm font-medium group-has-[td]/dense:py-2 first:group-has-[td]/indent:pl-[60px]",
+        sticky && `sticky bg-white`,
+        sticky && shadow && "shadow-table",
+        left,
+        className
+      ),
+      style: {
+        left
+      }
+    },
+    /* @__PURE__ */ React30.createElement("span", { className: "font-medium text-sm" }, children),
+    icon && /* @__PURE__ */ React30.createElement(
+      "span",
+      {
+        className: "hover:bg-gray-200 w-5 h-5 flex items-center justify-center p-1 rounded focus:bg-gray-300 active:bg-gray-300"
+      },
+      icon
+    )
+  );
+};
+var TableComponents_default = Table;
+
+// app/components/Tabs.tsx
+import React31 from "react";
+var TabsContainer = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ React31.createElement("div", { className }, children);
+};
+var TabList = ({
+  onChange,
+  ariaLabel,
+  children,
+  box = false,
+  className
+}) => {
+  const handleTabChange = (value) => {
+    onChange(value);
+  };
+  return /* @__PURE__ */ React31.createElement(
+    "div",
+    {
+      className: cn(
+        "flex items-center",
+        box ? "bg-gray-50 rounded-lg border border-gray-200" : "border-b border-gray-200",
+        className
+      ),
+      role: "tablist",
+      "aria-label": ariaLabel
+    },
+    React31.Children.map(children, (child) => {
+      if (React31.isValidElement(child)) {
+        return React31.cloneElement(child, {
+          onChange: handleTabChange,
+          box
+        });
+      }
+      return null;
+    })
+  );
+};
+var Tab = ({
+  label,
+  value,
+  onChange,
+  icon,
+  content,
+  box = false,
+  selectedTabValue,
+  className
+}) => {
+  const handleClick = () => {
+    onChange(value);
+  };
+  const isSelected = value === selectedTabValue;
+  return /* @__PURE__ */ React31.createElement(
+    "button",
+    {
+      role: "tab",
+      className: cn(
+        "flex items-center gap-2 px-4 py-3 text-text-sm font-medium cursor-pointer hover:bg-gray-100 hover:rounded-t transition-all ease-linear duration-200 delay-75",
+        isSelected && !box ? "text-primary-600 border-b-2 border-primary-600" : "border-b-2 border-transparent text-gray-700",
+        isSelected && box ? "bg-white hover:bg-white shadow-md" : "",
+        box ? "m-1 rounded-lg hover:rounded-lg" : "m-0",
+        className
+      ),
+      onClick: handleClick
+    },
+    icon,
+    " ",
+    label,
+    " ",
+    content
+  );
+};
+var TabPanel = ({
+  value,
+  currentValue,
+  children,
+  className
+}) => {
+  return value === currentValue ? /* @__PURE__ */ React31.createElement("div", { className }, children) : null;
+};
+var Tabs_default = TabsContainer;
+
+// app/components/Textarea.tsx
+import React32, {
+  forwardRef as forwardRef11
+} from "react";
+var Textarea = forwardRef11(
+  ({ size, className, rows, cols, disabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ React32.createElement(
+      "textarea",
+      {
+        ...props,
+        ref,
+        disabled,
+        rows,
+        cols,
+        className: cn(
+          "group flex items-center gap-2 border border-gray-200 rounded-lg bg-gray-50 shadow-xs hover:bg-gray-50 hover:border-gray-300 text-sm focus-within:border-gray-800 focus-within:bg-gray-25 focus-within:hover:bg-gray-50 focus-within:hover:border-gray-800 outline-none disabled:bg-gray-300 disabled:select-none disabled:pointer-events-none disabled:opacity-30 placeholder:text-gray-500 hover:placeholder:text-gray-500",
+          size === "sm" ? "py-2.5 px-3.5" : "p-2.5",
+          className,
+          size
+        )
+      },
+      children
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Textarea_default = Textarea;
+
+// app/components/Toggle.tsx
+import { cva as cva8 } from "class-variance-authority";
+import React33, { forwardRef as forwardRef12 } from "react";
+var toggleVariants = cva8("", {
+  variants: {
+    size: {
+      sm: "w-5 h-3 after:w-2 after:h-2",
+      md: "w-9 h-5 after:w-4 after:h-4",
+      lg: "w-11 h-6 after:w-5 after:h-5"
+    },
+    intent: {
+      primary: "peer-checked:bg-primary-600",
+      success: "peer-checked:bg-success-500"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    intent: "primary"
+  }
+});
+var Toggle = forwardRef12(
+  ({ size, className, intent, disabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ React33.createElement(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center cursor-pointer",
+          disabled && "opacity-30 pointer-events-none"
+        )
+      },
+      /* @__PURE__ */ React33.createElement(
+        "input",
+        {
+          type: "checkbox",
+          disabled,
+          ref,
+          ...props,
+          className: "sr-only flex justify-center peer"
+        }
+      ),
+      /* @__PURE__ */ React33.createElement(
+        "span",
+        {
+          className: cn(
+            "relative w-11 h-7 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full  after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all",
+            toggleVariants({
+              intent,
+              className,
+              size
+            })
+          )
+        },
+        children
+      )
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var Toggle_default = Toggle;
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Avatar_default as Avatar,
+  AvatarGroup_default as AvatarGroup,
+  Breadcrumb_default as BreadCrumb,
+  Button_default as Button,
+  Checkbox_default as Checkbox,
+  Chip_default as Chip,
+  CircularProgress_default as CircularProgress,
+  Divider_default as Divider,
+  Dropdown_default as Dropdown,
+  DropdownWithIcon_default as DropdownWithIcon,
+  FileUpload_default as FileUpload,
+  GlobalNavigation_default as GlobalNavigation,
+  HelperText_default as HelperText,
+  Input_default as Input,
+  Label_default as Label,
+  ListItem_default as ListItem,
+  Loading_default as Loading,
+  MenuDropdown,
+  MenuItem3 as MenuItem,
+  MenuSubItem,
+  Modal,
+  Notice_default as Notice,
+  Pagination_default as Pagination,
+  Progress_default as ProgressBar,
+  Radio_default as Radio,
+  Sidebar_default as Sidebar,
+  Skeleton_default as Skeleton,
+  Slider_default as Slider,
+  Stepper_default as Stepper,
+  Tab,
+  TabList,
+  TabPanel,
+  TableComponents_default as Table,
+  TableBody,
+  TableDataCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+  Tabs_default as TabsContainer,
+  Textarea_default as Textarea,
+  Toggle_default as Toggle,
+  Tooltip_default as Tooltip
+};
+//# sourceMappingURL=index.js.map