atomos_next_genesis 0.0.3-alpha

package/dist/index.cjs

@@ -0,0 +1,2500 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// app/index.ts
+var app_exports = {};
+__export(app_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
+  Avatar: () => Avatar_default,
+  AvatarGroup: () => AvatarGroup_default,
+  BreadCrumb: () => Breadcrumb_default,
+  Button: () => Button_default,
+  Checkbox: () => Checkbox_default,
+  Chip: () => Chip_default,
+  CircularProgress: () => CircularProgress_default,
+  Divider: () => Divider_default,
+  Dropdown: () => Dropdown_default,
+  DropdownWithIcon: () => DropdownWithIcon_default,
+  FileUpload: () => FileUpload_default,
+  GlobalNavigation: () => GlobalNavigation_default,
+  HelperText: () => HelperText_default,
+  Input: () => Input_default,
+  Label: () => Label_default,
+  ListItem: () => ListItem_default,
+  Loading: () => Loading_default,
+  MenuDropdown: () => MenuDropdown,
+  MenuItem: () => MenuItem3,
+  MenuSubItem: () => MenuSubItem,
+  Modal: () => Modal,
+  Notice: () => Notice_default,
+  Pagination: () => Pagination_default,
+  ProgressBar: () => Progress_default,
+  Radio: () => Radio_default,
+  Sidebar: () => Sidebar_default,
+  Skeleton: () => Skeleton_default,
+  Slider: () => Slider_default,
+  Stepper: () => Stepper_default,
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  Table: () => TableComponents_default,
+  TableBody: () => TableBody,
+  TableDataCell: () => TableDataCell,
+  TableHead: () => TableHead,
+  TableHeadCell: () => TableHeadCell,
+  TableRow: () => TableRow,
+  TabsContainer: () => Tabs_default,
+  Textarea: () => Textarea_default,
+  Toggle: () => Toggle_default,
+  Tooltip: () => Tooltip_default
+});
+module.exports = __toCommonJS(app_exports);
+
+// app/components/Accordian.tsx
+var import_react = __toESM(require("react"), 1);
+
+// app/utils/utils.tsx
+var import_clsx = __toESM(require("clsx"), 1);
+var import_tailwind_merge = require("tailwind-merge");
+var cn = (...classes) => (0, import_tailwind_merge.twMerge)((0, import_clsx.default)(...classes));
+
+// app/components/Accordian.tsx
+var import_react2 = require("@remixicon/react");
+function Accordion({
+  type = "single",
+  collapsible = true,
+  className,
+  children
+}) {
+  const [openItems, setOpenItems] = (0, import_react.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__ */ import_react.default.createElement("div", { className }, import_react.default.Children.map(children, (child) => {
+    if (import_react.default.isValidElement(child)) {
+      return import_react.default.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__ */ import_react.default.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__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "font-semibold transition-all duration-300 ease-in-out",
+        onClick: toggle
+      },
+      children && Array.isArray(children) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, import_react.default.cloneElement(children[0], { isOpen }), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: cn(
+            "grid transition-all duration-300 ease-in-out",
+            isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+          )
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: cn("") }, children[1]))
+      )) : children
+    )
+  );
+}
+function AccordionTrigger({ isOpen, children }) {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex p-3.5 justify-between items-center text-sm font-semibold transition-all delay-150 ease-in" }, children, /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: cn(
+        "transition-transform duration-300 transform",
+        isOpen ? "rotate-180" : "rotate-0"
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_react2.RiArrowDownSLine, { size: 18 })
+  ));
+}
+function AccordionContent({ isOpen, children }) {
+  return /* @__PURE__ */ import_react.default.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
+var import_image = __toESM(require("next/image"), 1);
+var import_react3 = __toESM(require("react"), 1);
+var Avatar = (0, import_react3.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__ */ import_react3.default.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__ */ import_react3.default.createElement(
+      "div",
+      {
+        className: cn(
+          "relative -z-10 flex items-center justify-center",
+          sizes[size],
+          className
+        ),
+        onClick
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        import_image.default,
+        {
+          fill: true,
+          className: cn(rounded && "rounded-full", "object-cover"),
+          src: props.src,
+          alt: props.alt || ""
+        }
+      )
+    ),
+    type === "icon" && /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center",
+          rounded && "rounded-full",
+          className,
+          sizes[size]
+        ),
+        onClick
+      },
+      props.icon
+    ),
+    type === "text" && /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.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
+var import_react4 = __toESM(require("react"), 1);
+var AvatarGroup = (0, import_react4.forwardRef)(
+  ({ avatars, size = "md", max, className }, ref) => {
+    const displayAvatars = max ? avatars.slice(0, max) : avatars;
+    const remainingCount = max ? avatars.length - max : 0;
+    return /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        ref,
+        className: cn("flex -space-x-6 rtl:space-x-reverse", className)
+      },
+      displayAvatars.map((avatar, index) => /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          className: "hover:-translate-x-3 transition-all duration-200",
+          key: index
+        },
+        /* @__PURE__ */ import_react4.default.createElement(Avatar_default, { ...avatar, size })
+      )),
+      remainingCount > 0 && /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.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
+var import_react5 = __toESM(require("react"), 1);
+var Breadcrumbs = ({
+  children,
+  separator = "/",
+  "aria-label": ariaLabel,
+  containerClasses
+}) => {
+  const items = import_react5.default.Children.toArray(children).map((child, index) => {
+    const isLast = index === import_react5.default.Children.count(children) - 1;
+    return /* @__PURE__ */ import_react5.default.createElement("span", { key: index, className: "flex items-center text-text-xs text-gray-700 font-semibold" }, child, !isLast && /* @__PURE__ */ import_react5.default.createElement("span", { className: "mx-[6px]" }, separator));
+  });
+  return /* @__PURE__ */ import_react5.default.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
+var import_react6 = __toESM(require("react"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+var buttonVariants = (0, import_class_variance_authority.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__ */ import_react6.default.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
+var import_react7 = __toESM(require("react"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var checkboxVariant = (0, import_class_variance_authority2.cva)(
+  "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 = (0, import_react7.forwardRef)(
+  ({ disabled, checked, size, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "inline-flex relative items-center" }, /* @__PURE__ */ import_react7.default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        ref,
+        ...props,
+        disabled,
+        checked,
+        className: cn(checkboxVariant({ className, size }))
+      }
+    ), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.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__ */ import_react7.default.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
+var import_react8 = __toESM(require("react"), 1);
+var import_class_variance_authority3 = require("class-variance-authority");
+var chipVariants = (0, import_class_variance_authority3.cva)(
+  "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__ */ import_react8.default.createElement("div", { className: cn(chipVariants({ intent: resolvedIntent, size }), className) }, dot && /* @__PURE__ */ import_react8.default.createElement(
+    "span",
+    {
+      className: cn(
+        "w-1.5 h-1.5 rounded-full",
+        dotColor || dotColorVariants[resolvedIntent] || "bg-primary-600"
+        // Default fallback
+      )
+    }
+  ), /* @__PURE__ */ import_react8.default.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
+var import_react9 = __toESM(require("react"), 1);
+var Divider = ({
+  width,
+  height,
+  position = "horizontal",
+  className
+}) => {
+  return /* @__PURE__ */ import_react9.default.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
+var import_react13 = __toESM(require("react"), 1);
+var import_react14 = require("@remixicon/react");
+
+// app/components/Input.tsx
+var import_react10 = __toESM(require("react"), 1);
+var Input = (0, import_react10.forwardRef)(
+  ({ size, startIcon, endIcon, className, type, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.createElement(
+        "span",
+        {
+          className: cn(
+            startIcon ? "group-hover:text-gray-600 group-focus-within:text-gray-600" : "hidden",
+            disabled === true && "text-gray-900"
+          )
+        },
+        startIcon
+      ),
+      /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.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
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_react11 = __toESM(require("react"), 1);
+var labelVariants = (0, import_class_variance_authority4.cva)("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__ */ import_react11.default.createElement(
+    "label",
+    {
+      htmlFor,
+      className: cn("cursor-pointer", labelVariants({ className, size }), disabled === true ? "opacity-30 select-none" : "opacity-100"),
+      ...props
+    },
+    children,
+    /* @__PURE__ */ import_react11.default.createElement("span", { className: cn(required === true ? "block text-red-500" : "hidden") }, "*")
+  );
+};
+var Label_default = Label;
+
+// app/components/Tooltip.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_react12 = __toESM(require("react"), 1);
+var tooltipVariants = (0, import_class_variance_authority5.cva)(
+  "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__ */ import_react12.default.createElement("div", { ...props, className: "relative cursor-pointer text-sm group" }, /* @__PURE__ */ import_react12.default.createElement("div", null, children), /* @__PURE__ */ import_react12.default.createElement("span", { className: cn(tooltipVariants({ position }), className) }, content));
+};
+var Tooltip_default = Tooltip;
+
+// app/components/Dropdown.tsx
+var defaultRenderItem = (option) => {
+  return /* @__PURE__ */ import_react13.default.createElement(MenuItem, { label: option.label, value: option.value });
+};
+var Dropdown = (0, import_react13.forwardRef)(
+  ({
+    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] = (0, import_react13.useState)("");
+    const [filteredOptions, setFilteredOptions] = (0, import_react13.useState)(
+      options || []
+    );
+    const [dropdownMenu, setDropdownMenu] = (0, import_react13.useState)(false);
+    const dropdownRef = (0, import_react13.useRef)(null);
+    (0, import_react13.useImperativeHandle)(ref, () => dropdownRef.current);
+    (0, import_react13.useEffect)(() => {
+      if (options) {
+        setFilteredOptions(options);
+      }
+    }, [options]);
+    const memoizedFilteredOptions = (0, import_react13.useMemo)(() => {
+      if (!search)
+        return filteredOptions;
+      return filteredOptions.filter(
+        (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }, [search, searchQuery, filteredOptions]);
+    const handleSearchChange = (0, import_react13.useCallback)(
+      (e) => {
+        setSearchQuery(e.target.value);
+      },
+      []
+    );
+    const toggleOption = (0, import_react13.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 = (0, import_react13.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);
+    };
+    (0, import_react13.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__ */ import_react13.default.createElement(
+      "div",
+      {
+        ref: dropdownRef,
+        className: cn(
+          "relative ",
+          !width && "w-full",
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        style: {
+          width
+        }
+      },
+      /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement(
+          "section",
+          {
+            className: cn(
+              "flex items-center gap-2 text-ellipsis overflow-hidden"
+            )
+          },
+          icon && /* @__PURE__ */ import_react13.default.createElement("span", null, icon),
+          /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement(import_react14.RiArrowDownSLine, { size: 18 })
+      ),
+      /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.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__ */ import_react13.default.createElement(import_react14.RiSearchLine, { size: 18 })
+          }
+        ),
+        multiple && /* @__PURE__ */ import_react13.default.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ import_react13.default.createElement(
+          "p",
+          {
+            onClick: handleSelectAll,
+            className: "text-text-sm  hover:text-primary-700 text-primary-600 cursor-pointer"
+          },
+          "Select all"
+        ), /* @__PURE__ */ import_react13.default.createElement(
+          "button",
+          {
+            className: "text-text-sm text-warning-500 hover:text-warning-600",
+            onClick: handleReset
+          },
+          "Reset"
+        )),
+        /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react13.default.createElement(
+              Checkbox_default,
+              {
+                id: `checkbox-${option.value}`,
+                checked: (selected == null ? void 0 : selected.some(
+                  (item) => item.value === option.value
+                )) ?? false,
+                onChange: () => handleCheckboxChange(option)
+              }
+            ), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react13.default.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react13.default.createElement(
+              DropdownTooltip,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            ))), /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
+            /* @__PURE__ */ import_react13.default.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+          ) : /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react13.default.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react13.default.createElement(
+              DropdownTooltip,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            )),
+            /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-gray-500" }, info)
+          ));
+        }) : children),
+        dropdownFooter && /* @__PURE__ */ import_react13.default.createElement(
+          DropdownFooter,
+          {
+            setDropdownMenu,
+            onApply
+          }
+        )
+      )
+    );
+  }
+);
+var MenuItem = ({ label, children }) => {
+  return /* @__PURE__ */ import_react13.default.createElement("p", { className: "break-all" }, label || children);
+};
+var DropdownTooltip = ({
+  tooltipContent
+}) => {
+  const content = tooltipContent || "";
+  return content ? /* @__PURE__ */ import_react13.default.createElement(Tooltip_default, { position: "right", content }, /* @__PURE__ */ import_react13.default.createElement(import_react14.RiErrorWarningLine, { color: "#98A2B3", size: 14 })) : null;
+};
+var DropdownFooter = ({
+  // onReset,
+  onApply,
+  setDropdownMenu
+}) => {
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex justify-end border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ import_react13.default.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
+var import_react15 = __toESM(require("react"), 1);
+var import_react16 = require("@remixicon/react");
+var defaultRenderItem2 = (option) => {
+  return /* @__PURE__ */ import_react15.default.createElement(MenuItem2, { label: option.label, value: option.value });
+};
+var DropdownWithIcon = (0, import_react15.forwardRef)(
+  ({
+    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] = (0, import_react15.useState)("");
+    const localDropdownRef = (0, import_react15.useRef)(null);
+    const [dropdownMenu, setDropdownMenu] = (0, import_react15.useState)(false);
+    (0, import_react15.useImperativeHandle)(ref, () => localDropdownRef.current);
+    const memoizedFilteredOptions = (0, import_react15.useMemo)(() => {
+      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 = (0, import_react15.useCallback)(
+      (e) => {
+        var _a;
+        setSearchQuery((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+      },
+      []
+    );
+    const toggleOption = (0, import_react15.useCallback)(
+      (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 = (0, import_react15.useCallback)(
+      (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);
+    };
+    (0, import_react15.useEffect)(() => {
+      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__ */ import_react15.default.createElement(
+      "div",
+      {
+        ref: localDropdownRef,
+        className: cn(
+          "relative",
+          !width && "w-full",
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        style: {
+          width
+        }
+      },
+      /* @__PURE__ */ import_react15.default.createElement("div", { onClick: () => !disabled && setDropdownMenu((prev) => !prev) }, trigger),
+      /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.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__ */ import_react15.default.createElement(import_react16.RiSearchLine, { size: 18 })
+          }
+        ),
+        multiple && /* @__PURE__ */ import_react15.default.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ import_react15.default.createElement(
+          "p",
+          {
+            onClick: handleSelectAll,
+            className: "text-text-sm  hover:text-primary-700  text-primary-600 cursor-pointer"
+          },
+          "Select all"
+        ), /* @__PURE__ */ import_react15.default.createElement(
+          "button",
+          {
+            className: "text-text-sm text-warning-500 hover:text-warning-600",
+            onClick: handleReset
+          },
+          "Reset"
+        )),
+        /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(import_react15.default.Fragment, { key: i }, multiple ? /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("section", { className: "flex items-center justify-between gap-2 w-full" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "break-words" }, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react15.default.createElement(
+              DropdownTooltip2,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            ))), /* @__PURE__ */ import_react15.default.createElement("span", { className: "text-gray-500" }, option == null ? void 0 : option.info)),
+            /* @__PURE__ */ import_react15.default.createElement("span", { className: "pt-[2px] text-text-sm text-gray-500" }, option == null ? void 0 : option.addInfo)
+          ) : /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react15.default.createElement("span", null, renderItem(option)), dropDownTooltip && /* @__PURE__ */ import_react15.default.createElement(
+              DropdownTooltip2,
+              {
+                tooltipContent: option == null ? void 0 : option.tooltipContent
+              }
+            )),
+            /* @__PURE__ */ import_react15.default.createElement("span", { className: "text-gray-500" }, info)
+          ));
+        }) : children),
+        dropdownFooter && /* @__PURE__ */ import_react15.default.createElement(DropdownFooter2, { onApply })
+      )
+    );
+  }
+);
+var MenuItem2 = ({ label, children }) => {
+  return /* @__PURE__ */ import_react15.default.createElement("p", { className: "break-all" }, label || children);
+};
+var DropdownTooltip2 = ({
+  tooltipContent
+}) => {
+  return tooltipContent ? /* @__PURE__ */ import_react15.default.createElement(Tooltip_default, { position: "right", content: tooltipContent }, /* @__PURE__ */ import_react15.default.createElement(import_react16.RiErrorWarningLine, { color: "#98A2B3", size: 14 })) : null;
+};
+var DropdownFooter2 = ({
+  onApply,
+  setDropdownMenu
+}) => {
+  return /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex justify-between border-t border-gray-200 px-[14px] py-[8px] text-text-sm" }, /* @__PURE__ */ import_react15.default.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
+var import_react17 = __toESM(require("react"), 1);
+var import_react18 = require("@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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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__ */ import_react17.default.createElement(import_react18.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 = (0, import_react17.forwardRef)(
+  ({
+    selectedFile,
+    onChange,
+    multiple,
+    onDelete,
+    children,
+    disabled,
+    title,
+    id,
+    className,
+    accept,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col gap-2 " }, /* @__PURE__ */ import_react17.default.createElement(
+      "input",
+      {
+        type: "file",
+        ...props,
+        accept,
+        id,
+        onChange,
+        multiple,
+        disabled,
+        hidden: true,
+        ref
+      }
+    ), /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.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__ */ import_react17.default.createElement(import_react18.RiUpload2Line, { className: "w-5 h-5" })),
+      /* @__PURE__ */ import_react17.default.createElement("p", { className: "text-center text-sm text-gray-600" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-primary-600 font-semibold" }, "Click to upload"), " ", /* @__PURE__ */ import_react17.default.createElement("br", null), " ", title)
+    ), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col gap-2" }, selectedFile == null ? void 0 : selectedFile.map((file, index) => /* @__PURE__ */ import_react17.default.createElement(
+      "div",
+      {
+        key: index,
+        className: "p-4 border border-gray-200 rounded-lg flex items-center justify-between gap-5"
+      },
+      /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-2 w-full" }, getIconForMimeType(file), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col gap-1 w-full" }, /* @__PURE__ */ import_react17.default.createElement("p", { className: "text-sm line-clamp-2 break-all" }, typeof file === "string" ? file : file.name, " "), /* @__PURE__ */ import_react17.default.createElement("div", { className: "w-full" }, children))),
+      /* @__PURE__ */ import_react17.default.createElement(
+        import_react18.RiDeleteBinLine,
+        {
+          onClick: onDelete,
+          className: "text-gray-500 w-5 h-5 cursor-pointer"
+        }
+      )
+    ))));
+  }
+);
+FileUpload.displayName = "FileUpload";
+var FileUpload_default = FileUpload;
+
+// app/components/GlobalNavigation.tsx
+var import_react19 = __toESM(require("react"), 1);
+var GlobalNavigation = (0, import_react19.forwardRef)(
+  ({
+    isOpen,
+    setIsOpen,
+    trigger,
+    children,
+    className,
+    postion = "bottom-right"
+  }, ref) => {
+    const popoverRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return /* @__PURE__ */ import_react19.default.createElement("div", { className: "relative w-max", ref }, /* @__PURE__ */ import_react19.default.createElement(
+      "div",
+      {
+        className: "cursor-pointer",
+        ref: popoverRef,
+        onClick: () => setIsOpen(!isOpen)
+      },
+      trigger
+    ), isOpen && /* @__PURE__ */ import_react19.default.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
+var import_react20 = __toESM(require("react"), 1);
+var HelperText = ({ children, className, size, error }) => {
+  return /* @__PURE__ */ import_react20.default.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
+var import_link = __toESM(require("next/link"), 1);
+var import_react21 = __toESM(require("react"), 1);
+var ListItem = import_react21.default.forwardRef(({ className, title, href, onClick, as = "link", icon }, ref) => {
+  if (as === "button") {
+    return /* @__PURE__ */ import_react21.default.createElement(
+      "button",
+      {
+        className: cn(
+          "px-4 py-[8px] w-full text-left flex items-center gap-2",
+          className
+        ),
+        onClick,
+        ref
+      },
+      /* @__PURE__ */ import_react21.default.createElement("h1", null, title),
+      icon && /* @__PURE__ */ import_react21.default.createElement("span", null, icon)
+    );
+  }
+  return /* @__PURE__ */ import_react21.default.createElement(
+    import_link.default,
+    {
+      href: href ?? "",
+      passHref: true,
+      className: cn("px-4 py-[8px] w-full flex items-center gap-2", className),
+      ref
+    },
+    /* @__PURE__ */ import_react21.default.createElement("h1", null, title),
+    icon && /* @__PURE__ */ import_react21.default.createElement("p", null, icon)
+  );
+});
+ListItem.displayName = "ListItem";
+var ListItem_default = ListItem;
+
+// app/components/Loading.tsx
+var import_react22 = __toESM(require("react"), 1);
+var Loading = ({ width, height, loaderColor, variant }) => {
+  return /* @__PURE__ */ import_react22.default.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
+var import_react23 = __toESM(require("react"), 1);
+var import_react24 = require("@remixicon/react");
+function Modal({
+  children,
+  showModal,
+  setShowModal,
+  closeModal = true,
+  closeOnOutsideClick = true,
+  className = ""
+}) {
+  (0, import_react23.useEffect)(() => {
+    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__ */ import_react23.default.createElement(import_react23.default.Fragment, null, showModal && /* @__PURE__ */ import_react23.default.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__ */ import_react23.default.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__ */ import_react23.default.createElement("div", null, children),
+      closeModal && /* @__PURE__ */ import_react23.default.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__ */ import_react23.default.createElement(import_react24.RiCloseLine, { size: 24 })
+      )
+    )
+  ));
+}
+
+// app/components/MenuItem.tsx
+var import_react25 = __toESM(require("react"), 1);
+var import_react26 = require("@remixicon/react");
+function MenuDropdown({
+  trigger,
+  children,
+  width = "250px",
+  className
+}) {
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const dropdownRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative w-full", ref: dropdownRef }, /* @__PURE__ */ import_react25.default.createElement(
+    "div",
+    {
+      className: "cursor-pointer",
+      onClick: () => setIsOpen(!isOpen),
+      "aria-label": "Open menu"
+    },
+    trigger
+  ), isOpen && /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.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__ */ import_react25.default.createElement(import_react25.default.Fragment, null, children)
+);
+var MenuItem3 = ({
+  content,
+  children,
+  className = "",
+  sectionClassName = "",
+  menuClassName = ""
+}) => {
+  const [isSubOpen, setIsSubOpen] = (0, import_react25.useState)(false);
+  return /* @__PURE__ */ import_react25.default.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement(import_react26.RiArrowUpSLine, { size: 20 }) : /* @__PURE__ */ import_react25.default.createElement(import_react26.RiArrowDownSLine, { size: 20 })
+  ), isSubOpen && /* @__PURE__ */ import_react25.default.createElement("div", { className: cn(" border-primary-100 bg-gray-50", menuClassName) }, children));
+};
+
+// app/components/Notice.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_react27 = __toESM(require("react"), 1);
+var import_react28 = require("@remixicon/react");
+var VariantIcon = ({ variant }) => {
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ import_react27.default.createElement("span", null, /* @__PURE__ */ import_react27.default.createElement(import_react28.RiThumbUpLine, { size: 20, color: "#039855" }));
+    case "warning":
+      return /* @__PURE__ */ import_react27.default.createElement("span", null, /* @__PURE__ */ import_react27.default.createElement(import_react28.RiQuestionLine, { color: "#F79009", size: 20 }));
+    case "info":
+      return /* @__PURE__ */ import_react27.default.createElement("span", null, /* @__PURE__ */ import_react27.default.createElement(import_react28.RiErrorWarningLine, { color: "#1570EF", size: 20 }));
+    case "error":
+      return /* @__PURE__ */ import_react27.default.createElement("span", null, /* @__PURE__ */ import_react27.default.createElement(import_react28.RiAlertFill, { color: "#F04438", size: 20 }));
+    default:
+      return /* @__PURE__ */ import_react27.default.createElement("span", null, /* @__PURE__ */ import_react27.default.createElement(import_react28.RiShieldCheckLine, { color: "#475467", size: 20 }));
+  }
+};
+var noticeVariants = (0, import_class_variance_authority6.cva)("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__ */ import_react27.default.createElement(import_react27.default.Fragment, null, open && /* @__PURE__ */ import_react27.default.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__ */ import_react27.default.createElement("div", { className: "relative" }, showIcon ? noticeTitle == "" ? /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex items-start" }, /* @__PURE__ */ import_react27.default.createElement(VariantIcon, { variant }), /* @__PURE__ */ import_react27.default.createElement("span", { className: "ml-2 mr-8 text-text-sm" }, children), /* @__PURE__ */ import_react27.default.createElement("span", { onClick: handleClose }, /* @__PURE__ */ import_react27.default.createElement(import_react28.RiCloseLine, { size: 20 }))) : /* @__PURE__ */ import_react27.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react27.default.createElement("section", { className: "flex items-start" }, /* @__PURE__ */ import_react27.default.createElement(VariantIcon, { variant }), /* @__PURE__ */ import_react27.default.createElement("div", { className: "ml-2 mr-8 -mt-[3px]" }, /* @__PURE__ */ import_react27.default.createElement("span", { className: "font-bold text-gray-800 mb-1" }, noticeTitle), /* @__PURE__ */ import_react27.default.createElement("p", { className: "text-text-sm text-gray-700" }, children))), /* @__PURE__ */ import_react27.default.createElement(
+      "span",
+      {
+        className: cn("absolute top-0 right-0 cursor-pointer"),
+        onClick: handleClose
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_react28.RiCloseLine, { size: 20 })
+    )) : /* @__PURE__ */ import_react27.default.createElement("div", { className: "mr-8" }, /* @__PURE__ */ import_react27.default.createElement("section", { className: "flex items-center" }, /* @__PURE__ */ import_react27.default.createElement("p", { className: "font-bold text-gray-800 mb-1" }, noticeTitle)), /* @__PURE__ */ import_react27.default.createElement(
+      "span",
+      {
+        className: cn("absolute top-0 right-0 cursor-pointer"),
+        onClick: handleClose
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_react28.RiCloseLine, { size: 20 })
+    ), /* @__PURE__ */ import_react27.default.createElement("p", { className: "text-text-sm" }, children)))
+  ));
+};
+var Notice_default = Notice;
+
+// app/components/Pagination.tsx
+var import_react29 = __toESM(require("react"), 1);
+var import_react30 = require("@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] = (0, import_react29.useState)(false);
+  const handleOptionClick = (option) => {
+    if (typeof option === "number") {
+      onRowsPerPageChange(option);
+    } else {
+      onRowsPerPageChange(option.value);
+    }
+    setShowOptions(false);
+  };
+  return /* @__PURE__ */ import_react29.default.createElement(
+    "div",
+    {
+      className: cn(
+        "border border-gray-200 px-6 py-4 flex justify-between items-center w-full",
+        className
+      )
+    },
+    /* @__PURE__ */ import_react29.default.createElement("section", { className: "flex gap-1.5 items-center" }, /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-gray-800 text-text-sm font-medium" }, "Items per page"), /* @__PURE__ */ import_react29.default.createElement("div", { className: "relative z-[100]" }, /* @__PURE__ */ import_react29.default.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__ */ import_react29.default.createElement(import_react30.RiArrowDownSLine, { size: 14 }) : /* @__PURE__ */ import_react29.default.createElement(import_react30.RiArrowUpSLine, { size: 14 })
+    ), showOptions && /* @__PURE__ */ import_react29.default.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__ */ import_react29.default.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__ */ import_react29.default.createElement("section", { className: "flex items-center gap-2 font-medium" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-2 text-gray-800 text-text-sm" }, /* @__PURE__ */ import_react29.default.createElement("span", null, "page"), /* @__PURE__ */ import_react29.default.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__ */ import_react29.default.createElement("option", { key: index + 1, value: index + 1 }, index + 1))
+    ), /* @__PURE__ */ import_react29.default.createElement("span", null, "of ", totalPages > 0 ? totalPages : 0)), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react29.default.createElement(
+      Button_default,
+      {
+        variant: "outlined",
+        intent: "default-outlined",
+        startIcon: /* @__PURE__ */ import_react29.default.createElement(import_react30.RiArrowLeftLine, { size: 20 }),
+        onClick: handlePrevPageClick,
+        disabled: page === 0,
+        className: "rounded-none h-8 rounded-l-lg"
+      }
+    ), /* @__PURE__ */ import_react29.default.createElement(
+      Button_default,
+      {
+        variant: "outlined",
+        intent: "default-outlined",
+        startIcon: /* @__PURE__ */ import_react29.default.createElement(import_react30.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
+var import_react31 = __toESM(require("react"), 1);
+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__ */ import_react31.default.createElement(
+    "div",
+    {
+      className: cn(
+        "rounded",
+        progressTextPosition === "right" ? "flex items-center gap-1" : progressTextPosition === "left" ? "flex items-center gap-1" : ""
+      )
+    },
+    /* @__PURE__ */ import_react31.default.createElement(
+      "span",
+      {
+        className: cn(
+          "text-gray-700 text-text-sm",
+          progressTextPosition === "left" ? "inline-block" : progressTextPosition === "top" ? "flex justify-end" : "hidden"
+        )
+      },
+      progressText
+    ),
+    /* @__PURE__ */ import_react31.default.createElement(
+      "div",
+      {
+        className: "w-full h-2 rounded bg-gray-200",
+        role: "progressbar",
+        "aria-valuenow": _progress,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      },
+      /* @__PURE__ */ import_react31.default.createElement(
+        "div",
+        {
+          className: `${progressColor} h-full transition-all delay-1000 duration-700 rounded ease-in`,
+          style: { width: `${_progress}%` }
+        }
+      )
+    ),
+    /* @__PURE__ */ import_react31.default.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
+var import_react32 = __toESM(require("react"), 1);
+var import_class_variance_authority7 = require("class-variance-authority");
+var radioVariants = (0, import_class_variance_authority7.cva)("", {
+  variants: {
+    size: {
+      sm: "h-3 w-3",
+      lg: "h-4 w-4"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+var Radio = (0, import_react32.forwardRef)(
+  ({ size, disabled, checked, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ import_react32.default.createElement("div", { className: "relative inline-flex items-center cursor-pointer" }, /* @__PURE__ */ import_react32.default.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__ */ import_react32.default.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
+var import_react33 = __toESM(require("react"), 1);
+var import_link2 = __toESM(require("next/link"), 1);
+var import_navigation = require("next/navigation");
+var Sidebar = ({ children, collapsed, setCollapsed }) => {
+  return /* @__PURE__ */ import_react33.default.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__ */ import_react33.default.createElement("div", { className: "" }, children)
+  );
+};
+var SidebarHeader = ({
+  collapsed,
+  setCollapsed,
+  children
+}) => {
+  return /* @__PURE__ */ import_react33.default.createElement(
+    "div",
+    {
+      className: cn({
+        "z-20": true
+      })
+    },
+    /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "whitespace-nowrap" }, children))
+  );
+};
+var SidebarMenu = ({
+  collapsed,
+  navItems,
+  scroll = false
+}) => {
+  const currentPath = (0, import_navigation.usePathname)();
+  return /* @__PURE__ */ import_react33.default.createElement("nav", { className: `max-h-[60vh] ${scroll && "overflow-y-auto customScroll"}` }, /* @__PURE__ */ import_react33.default.createElement("ul", { className: "my-2 flex flex-col gap-2 items-stretch" }, navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => /* @__PURE__ */ import_react33.default.createElement(
+    "li",
+    {
+      key: parentIndex,
+      className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
+    },
+    /* @__PURE__ */ import_react33.default.createElement(
+      "p",
+      {
+        className: cn({
+          "text-[14px] text-gray-500": true,
+          "w-[37px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed
+        })
+      },
+      parentItem.label
+    ),
+    /* @__PURE__ */ import_react33.default.createElement("ul", null, parentItem == null ? void 0 : parentItem.items.map((item, index) => /* @__PURE__ */ import_react33.default.createElement("li", { key: index }, /* @__PURE__ */ import_react33.default.createElement(
+      import_link2.default,
+      {
+        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__ */ import_react33.default.createElement(
+        "div",
+        {
+          className: `flex items-center gap-2 whitespace-nowrap`
+        },
+        /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-text-sm" }, " ", item.icon),
+        /* @__PURE__ */ import_react33.default.createElement("span", { className: cn(!collapsed ? "opacity-0" : "") }, item.label)
+      )
+    ))))
+  ))));
+};
+var Footer = ({
+  children,
+  setCollapsed,
+  collapsed,
+  navItems
+}) => {
+  const currentPath = (0, import_navigation.usePathname)();
+  return /* @__PURE__ */ import_react33.default.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__ */ import_react33.default.createElement("div", { className: "shadow-md" }, /* @__PURE__ */ import_react33.default.createElement(Divider_default, null)),
+    navItems && navItems.length > 0 && /* @__PURE__ */ import_react33.default.createElement("nav", { className: "flex-grow w-full" }, /* @__PURE__ */ import_react33.default.createElement("ul", { className: "my-2 flex flex-col gap-2 items-stretch" }, navItems == null ? void 0 : navItems.map((parentItem, parentIndex) => {
+      var _a;
+      return /* @__PURE__ */ import_react33.default.createElement(
+        "li",
+        {
+          key: parentIndex,
+          className: "flex flex-col gap-3 mb-1 whitespace-nowrap overflow-hidden"
+        },
+        /* @__PURE__ */ import_react33.default.createElement(
+          "p",
+          {
+            className: cn({
+              "text-[14px] text-gray-500": true,
+              "w-[37px] text-ellipsis text-white whitespace-nowrap overflow-hidden": !collapsed
+            })
+          },
+          parentItem.label
+        ),
+        /* @__PURE__ */ import_react33.default.createElement("ul", null, (_a = parentItem == null ? void 0 : parentItem.items) == null ? void 0 : _a.map((item, index) => /* @__PURE__ */ import_react33.default.createElement("li", { key: index }, /* @__PURE__ */ import_react33.default.createElement(
+          import_link2.default,
+          {
+            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__ */ import_react33.default.createElement(
+            "div",
+            {
+              className: `flex items-center gap-2 whitespace-nowrap`
+            },
+            /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-text-sm" }, " ", item.icon),
+            /* @__PURE__ */ import_react33.default.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
+var import_react34 = __toESM(require("react"), 1);
+var Slider = (0, import_react34.forwardRef)(
+  ({ value, min = 0, max = 100, size = "sm", ...props }, ref) => {
+    const progress = (value - min) / (max - min) * 100;
+    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.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
+var import_react35 = __toESM(require("react"), 1);
+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__ */ import_react35.default.createElement("span", { className: `skeleton rounded-lg ${circle ? "circle" : ""}`, style });
+};
+var Skeleton_default = Skeleton;
+
+// app/components/Stepper.tsx
+var import_react36 = __toESM(require("react"), 1);
+var import_react37 = require("@remixicon/react");
+var Stepper = ({
+  stepsConfig,
+  currentStep,
+  setCurrentStep,
+  isComplete,
+  setIsComplete,
+  position = "horizontal"
+}) => {
+  var _a;
+  const stepRef = (0, import_react36.useRef)([]);
+  if (!stepsConfig.length) {
+    return null;
+  }
+  const ActiveComponent = (_a = stepsConfig[currentStep - 1]) == null ? void 0 : _a.Component;
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: cn(position !== "horizontal" && "flex") }, /* @__PURE__ */ import_react36.default.createElement(
+    "div",
+    {
+      className: cn(
+        "relative",
+        position === "horizontal" ? "flex justify-between items-start" : "flex flex-col"
+      )
+    },
+    stepsConfig.map((step, index) => /* @__PURE__ */ import_react36.default.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__ */ import_react36.default.createElement(
+        "div",
+        {
+          className: cn(
+            "",
+            position === "horizontal" ? "flex items-center" : "flex flex-col"
+          )
+        },
+        /* @__PURE__ */ import_react36.default.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__ */ import_react36.default.createElement("span", { className: "w-[10px] h-[10px] rounded-full bg-primary-600" }),
+          (currentStep > index + 1 || isComplete) && /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement(import_react37.RiCheckLine, { size: 12, color: "#fff" }))
+        ),
+        index !== stepsConfig.length - 1 && /* @__PURE__ */ import_react36.default.createElement(
+          "div",
+          {
+            className: cn(
+              "mx-auto rounded-lg bg-gray-200",
+              position === "horizontal" ? "w-[80%] h-1" : "h-[100px] w-1 my-2"
+            )
+          },
+          /* @__PURE__ */ import_react36.default.createElement(
+            "p",
+            {
+              className: cn(
+                "h-full rounded-lg ",
+                currentStep > index + 1 ? "bg-primary-600" : ""
+              )
+            }
+          )
+        )
+      ),
+      /* @__PURE__ */ import_react36.default.createElement(
+        "div",
+        {
+          className: cn(
+            "whitespace-nowrap",
+            position === "vertical" || (step == null ? void 0 : step.helperName) ? "-mt-1" : ""
+          )
+        },
+        /* @__PURE__ */ import_react36.default.createElement("span", { className: "text-gray-400 text-text-xs" }, step == null ? void 0 : step.helperName),
+        /* @__PURE__ */ import_react36.default.createElement("p", null, step == null ? void 0 : step.name)
+      )
+    ))
+  ), ActiveComponent && /* @__PURE__ */ import_react36.default.createElement(ActiveComponent, null));
+};
+var Stepper_default = Stepper;
+
+// app/components/TableComponents.tsx
+var import_react38 = __toESM(require("react"), 1);
+var Table = ({ children, className, dense, ...props }) => {
+  return /* @__PURE__ */ import_react38.default.createElement(
+    "table",
+    {
+      ...props,
+      className: cn(
+        dense && "group/dense",
+        "bg-white text-left w-full border",
+        className
+      )
+    },
+    children
+  );
+};
+var TableHead = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react38.default.createElement(
+    "thead",
+    {
+      ...props,
+      className: cn("bg-gray-50 border border-gray-200", className)
+    },
+    children
+  );
+};
+var TableBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react38.default.createElement("tbody", { ...props, className: cn(className) }, children);
+};
+var TableRow = ({
+  children,
+  className,
+  indent,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react38.default.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__ */ import_react38.default.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__ */ import_react38.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react38.default.createElement("span", { className: "font-medium text-xs" }, children), icon && /* @__PURE__ */ import_react38.default.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__ */ import_react38.default.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__ */ import_react38.default.createElement("span", { className: "font-medium text-sm" }, children),
+    icon && /* @__PURE__ */ import_react38.default.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
+var import_react39 = __toESM(require("react"), 1);
+var TabsContainer = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ import_react39.default.createElement("div", { className }, children);
+};
+var TabList = ({
+  onChange,
+  ariaLabel,
+  children,
+  box = false,
+  className
+}) => {
+  const handleTabChange = (value) => {
+    onChange(value);
+  };
+  return /* @__PURE__ */ import_react39.default.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
+    },
+    import_react39.default.Children.map(children, (child) => {
+      if (import_react39.default.isValidElement(child)) {
+        return import_react39.default.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__ */ import_react39.default.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__ */ import_react39.default.createElement("div", { className }, children) : null;
+};
+var Tabs_default = TabsContainer;
+
+// app/components/Textarea.tsx
+var import_react40 = __toESM(require("react"), 1);
+var Textarea = (0, import_react40.forwardRef)(
+  ({ size, className, rows, cols, disabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ import_react40.default.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
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_react41 = __toESM(require("react"), 1);
+var toggleVariants = (0, import_class_variance_authority8.cva)("", {
+  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 = (0, import_react41.forwardRef)(
+  ({ size, className, intent, disabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ import_react41.default.createElement(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center cursor-pointer",
+          disabled && "opacity-30 pointer-events-none"
+        )
+      },
+      /* @__PURE__ */ import_react41.default.createElement(
+        "input",
+        {
+          type: "checkbox",
+          disabled,
+          ref,
+          ...props,
+          className: "sr-only flex justify-center peer"
+        }
+      ),
+      /* @__PURE__ */ import_react41.default.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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Avatar,
+  AvatarGroup,
+  BreadCrumb,
+  Button,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  Divider,
+  Dropdown,
+  DropdownWithIcon,
+  FileUpload,
+  GlobalNavigation,
+  HelperText,
+  Input,
+  Label,
+  ListItem,
+  Loading,
+  MenuDropdown,
+  MenuItem,
+  MenuSubItem,
+  Modal,
+  Notice,
+  Pagination,
+  ProgressBar,
+  Radio,
+  Sidebar,
+  Skeleton,
+  Slider,
+  Stepper,
+  Tab,
+  TabList,
+  TabPanel,
+  Table,
+  TableBody,
+  TableDataCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+  TabsContainer,
+  Textarea,
+  Toggle,
+  Tooltip
+});
+//# sourceMappingURL=index.cjs.map