katalyst-riya-test 0.1.5 → 1.0.0

package/dist/index.cjs

@@ -28,13 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/app/index.ts
-var app_exports = {};
-__export(app_exports, {
+var index_exports = {};
+__export(index_exports, {
   Accordion: () => Accordion,
   AccordionContent: () => AccordionContent,
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
   Button: () => Button_default,
+  Callout: () => Callout_default,
   Caption: () => Caption_default,
   Card: () => Card,
   CardBg: () => CardBg,
@@ -46,7 +47,9 @@ __export(app_exports, {
   CardTitle: () => CardTitle,
   Checkbox: () => Checkbox_default,
   Chip: () => Chip_default,
-  Dropdown: () => Dropdown,
+  Drawer: () => Drawer_default,
+  Dropdown: () => Dropdown_default,
+  FillButton: () => FillButton_default,
   Footer: () => Footer,
   FooterContent: () => FooterContent,
   FooterHeader: () => FooterHeader,
@@ -56,16 +59,27 @@ __export(app_exports, {
   Input: () => Input_default,
   Label: () => Label_default,
   ListItem: () => ListItem_default,
-  MenuItem: () => MenuItem,
-  MenuSubItem: () => MenuSubItem,
+  ListPagination: () => ListPagination_default,
+  Loading: () => Loading_default,
+  Modal: () => Modal,
+  NestedDropdown: () => NestedDropdown_default,
+  OTPInput: () => OTPInput_default,
   Paragraph: () => Paragraph_default,
+  Popover: () => Popover_default,
+  Radio: () => Radio_default,
+  Skeleton: () => Skeleton_default,
   Slider: () => Slider_default,
+  Spinner: () => Spinner_default,
   StatsCard: () => StatsCard_default,
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  TabsContainer: () => Tabs_default,
   Textarea: () => Textarea_default,
   Toggle: () => Toggle_default,
   Typography: () => Typography_default
 });
-module.exports = __toCommonJS(app_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/utils/util.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -74,83 +88,231 @@ var cn = (...classes) => (0, import_tailwind_merge.twMerge)((0, import_clsx.defa
 
 // src/components/Accordion.tsx
 var import_react = __toESM(require("react"), 1);
-var import_fi = require("react-icons/fi");
+var import_hi = require("react-icons/hi");
 function Accordion({
   type = "single",
   collapsible = true,
   className,
-  children
+  children,
+  expanded,
+  defaultOpenValues = [],
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
 }) {
-  const [openItems, setOpenItems] = (0, import_react.useState)([]);
+  const [openItems, setOpenItems] = (0, import_react.useState)(defaultOpenValues);
+  (0, import_react.useEffect)(() => {
+    if (expanded !== void 0) {
+      if (expanded) {
+        const allValues = [];
+        import_react.default.Children.forEach(children, (child) => {
+          if (import_react.default.isValidElement(child)) {
+            allValues.push(child.props.value);
+          }
+        });
+        setOpenItems(allValues);
+      } else {
+        setOpenItems(collapsible ? [] : openItems);
+      }
+    }
+  }, [expanded, children, collapsible]);
   const handleToggle = (value) => {
     if (type === "single") {
-      setOpenItems(
-        (prev) => prev.includes(value) ? collapsible ? [] : prev : [value]
-      );
+      const isClosing = openItems.includes(value);
+      if (isClosing && !collapsible) return;
+      setOpenItems(isClosing ? [] : [value]);
     } else {
-      setOpenItems(
-        (prev) => prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
-      );
+      setOpenItems((prev) => {
+        const isClosing = prev.includes(value);
+        if (isClosing && !collapsible && prev.length === 1) return prev;
+        return isClosing ? 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,
-        {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: cn("flex flex-col", className),
+      role: type === "single" ? "tablist" : void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-multiselectable": type === "multiple"
+    },
+    import_react.default.Children.map(children, (child, index) => {
+      if (import_react.default.isValidElement(child)) {
+        return import_react.default.cloneElement(child, {
           openItems,
-          handleToggle
-        }
-      );
-    }
-    return child;
-  }));
+          handleToggle,
+          index,
+          totalItems: import_react.default.Children.count(children)
+        });
+      }
+      return child;
+    })
+  );
 }
 function AccordionItem({
   value,
-  disabled = false,
+  disabled,
   openItems,
   handleToggle,
-  children
+  children,
+  index,
+  totalItems
 }) {
   const isOpen = openItems?.includes(value);
-  const toggle = () => {
-    if (!disabled && handleToggle) {
-      handleToggle(value);
+  const itemId = `accordion-item-${value}`;
+  const triggerId = `accordion-trigger-${value}`;
+  const contentId = `accordion-content-${value}`;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: cn(
+        "rounded-lg mb-3 border transition-all duration-300 overflow-hidden",
+        isOpen ? "border-primary-500 bg-white dark:bg-gray-900 dark:border-primary-400" : "border-transparent bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/70",
+        disabled && "opacity-50 pointer-events-none dark:opacity-40"
+      ),
+      id: itemId,
+      role: "presentation"
+    },
+    import_react.default.Children.map(children, (child) => {
+      if (import_react.default.isValidElement(child)) {
+        return import_react.default.cloneElement(child, {
+          isOpen,
+          onClick: () => handleToggle?.(value),
+          triggerId,
+          contentId,
+          disabled,
+          index,
+          totalItems,
+          value
+        });
+      }
+      return child;
+    })
+  );
+}
+function AccordionTrigger({
+  isOpen,
+  children,
+  onClick,
+  disabled,
+  triggerId,
+  contentId,
+  index,
+  totalItems,
+  value,
+  className,
+  triggerIcon = /* @__PURE__ */ import_react.default.createElement(import_hi.HiChevronDown, { size: 18 })
+}) {
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onClick?.();
+        break;
+      case "ArrowDown": {
+        e.preventDefault();
+        const nextTrigger = document.querySelector(
+          `[data-accordion-trigger-index="${(index || 0) + 1}"]`
+        );
+        nextTrigger?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prevTrigger = document.querySelector(
+          `[data-accordion-trigger-index="${(index || 0) - 1}"]`
+        );
+        prevTrigger?.focus();
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        const firstTrigger = document.querySelector(
+          '[data-accordion-trigger-index="0"]'
+        );
+        firstTrigger?.focus();
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const lastIndex = (totalItems || 1) - 1;
+        const lastTrigger = document.querySelector(
+          `[data-accordion-trigger-index="${lastIndex}"]`
+        );
+        lastTrigger?.focus();
+        break;
+      }
     }
   };
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
+      id: triggerId,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "aria-disabled": disabled,
+      "data-accordion-trigger-index": index,
+      "data-accordion-value": value,
+      onClick: disabled ? void 0 : onClick,
+      onKeyDown: handleKeyDown,
       className: cn(
-        "rounded-radius-lg mb-3 shadow-cardShadow dark:shadow-none border dark:border-gray-900",
-        isOpen && "border border-brand-500 shadow-cardShadowActive dark:bg-gray-900 dark:border-gray-100",
-        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+        "flex p-3.5 text-base rounded-lg cursor-pointer bg-white dark:bg-gray-900 justify-between items-center font-semibold transition-all delay-150 ease-in",
+        "hover:bg-gray-50 dark:hover:bg-gray-800 active:bg-gray-100 dark:active:bg-gray-700",
+        isOpen && "bg-gray-50 dark:bg-gray-800",
+        isOpen ? "border-none" : "border border-gray-200 dark:border-gray-700",
+        disabled && "cursor-not-allowed",
+        className
       )
     },
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "text-gray-900 dark:text-gray-100" }, children),
     /* @__PURE__ */ import_react.default.createElement(
-      "div",
+      "span",
       {
-        className: "font-semibold transition-colors p-[32px] mobile:p-4 duration-200 ease-in-out",
-        onClick: toggle
+        className: cn(
+          "transition-transform duration-300 text-gray-600 dark:text-gray-400",
+          isOpen ? "rotate-180" : "rotate-0"
+        ),
+        "aria-hidden": "true"
       },
-      children && Array.isArray(children) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, import_react.default.cloneElement(children[0], { isOpen }), isOpen && !disabled ? children[1] : null) : children
+      triggerIcon
     )
   );
 }
-function AccordionTrigger({ isOpen, children }) {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "accordion-trigger transition-all delay-150 ease-in font-montserrat text-[20px] mobile:text-[12px] mobile:leading-[18px] text-dark dark:text-white flex justify-between items-center font-semibold" }, children, /* @__PURE__ */ import_react.default.createElement("span", null, isOpen ? /* @__PURE__ */ import_react.default.createElement(import_fi.FiChevronUp, { size: 20 }) : /* @__PURE__ */ import_react.default.createElement(import_fi.FiChevronDown, { size: 20 })));
-}
-function AccordionContent({ isOpen, children }) {
+function AccordionContent({
+  isOpen,
+  children,
+  className,
+  contentId,
+  triggerId
+}) {
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
+      id: contentId,
+      role: "region",
+      "aria-labelledby": triggerId,
+      hidden: !isOpen,
       className: cn(
-        "opacity-0 w-full accordion-content font-normal font-karla text-[18px] mobile:text-[12px] mobile:leading-[18px] text-dark dark:text-gray-600 pt-[32px] mobile:pt-[10px] overflow-hidden max-h-0 duration-500 transition-all delay-100 ease-in",
-        !isOpen && "max-h-fit opacity-[1] transition-all ease-in duration-150"
+        "grid transition-all duration-500 ease-[cubic-bezier(0.87,0,0.13,1)]",
+        isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
       )
     },
-    children
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: cn(
+          "p-4 pb-6 mobile:px-4 mobile:pb-4 text-gray-600 dark:text-gray-300 leading-relaxed",
+          "border-t border-gray-100 dark:border-gray-700",
+          className
+        )
+      },
+      children
+    ))
   );
 }
 
@@ -162,13 +324,14 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        primary: "bg-brand-500 text-light border hover:bg-brand-600 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#0000002E] active:bg-brand-400 active:shadow-[0px_0px_0px_3px] active:shadow-brand-300",
-        "primary-light": "bg-brand-50 text-brand-600 hover:bg-brand-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#356AC32E] active:shadow-[0px_0px_0px_3px] active:bg-brand-50 active:shadow-brand-300",
-        secondary: "bg-brand-50 text-brand-800 hover:bg-brand-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#6984AD2E] active:bg-brand-50 active:shadow-[0px_0px_0px_3px] active:shadow-brand-700",
+        primary: "bg-primary-500 text-light hover:bg-primary-600 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#0000002E] active:bg-primary-400 active:shadow-[0px_0px_0px_3px] active:shadow-primary-300",
+        "primary-light": "bg-primary-50 text-primary-600 hover:bg-primary-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#356AC32E] active:shadow-[0px_0px_0px_3px] active:bg-primary-50 active:shadow-primary-300",
+        secondary: "bg-primary-50 text-primary-800 hover:bg-primary-200 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#6984AD2E] active:bg-primary-50 active:shadow-[0px_0px_0px_3px] active:shadow-primary-700",
         tertiary: "bg-gray-100 text-gray-900 hover:bg-gray-300 hover:shadow-[inset_0px_2px_8px_-2px_#FFFFFF8F,inset_0px_8px_8px_-2px_#9595952E] active:bg-gray-25 active:shadow-[0px_0px_0px_3px] active:shadow-gray-700",
         quaternary: "bg-gray-50/[0.02] text-light backdrop-blur-[6px] hover:shadow-[inset_0px_8px_8px_-2px_#23232314] hover:backdrop-blur-md hover:bg-gray-200/10 active:bg-gray-25 active:shadow-[0px_0px_0px_3px] active:text-gray-900 active:shadow-[#46464659]"
       },
       size: {
+        xs: "text-base px-spacing-sm",
         sm: "text-xl leading-[30px] px-spacing-md",
         md: "font-bold text-2xl leading-[36px] px-spacing-lg",
         lg: "font-bold text-[32px] leading-[48px] px-spacing-xl"
@@ -176,7 +339,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     },
     defaultVariants: {
       variant: "primary",
-      size: "md"
+      size: "sm"
     }
   }
 );
@@ -211,10 +374,116 @@ var Button = ({
 };
 var Button_default = Button;
 
-// src/components/Caption.tsx
+// src/components/Callout.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_react3 = __toESM(require("react"), 1);
-var captionVariants = (0, import_class_variance_authority2.cva)("font-bold font-karla text-dark dark:text-light", {
+var calloutVariants = (0, import_class_variance_authority2.cva)("py-3 px-4 font-medium rounded-md", {
+  variants: {
+    variant: {
+      filled: "",
+      outlined: "border"
+    },
+    intent: {
+      primary: "",
+      warning: "",
+      error: "",
+      success: "",
+      default: ""
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "filled",
+      intent: "primary",
+      className: "bg-primary-50 text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+    },
+    {
+      variant: "outlined",
+      intent: "primary",
+      className: "border-primary-200 text-primary-600 bg-transparent dark:text-primary-400"
+    },
+    {
+      variant: "filled",
+      intent: "warning",
+      className: "bg-yellow-50 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-400"
+    },
+    {
+      variant: "outlined",
+      intent: "warning",
+      className: "border-yellow-400 text-yellow-600 bg-transparent"
+    },
+    {
+      variant: "filled",
+      intent: "error",
+      className: "bg-red-50 text-red-600 dark:bg-red-900 dark:text-red-400"
+    },
+    {
+      variant: "outlined",
+      intent: "error",
+      className: "border-red-200 text-red-600 bg-transparent"
+    },
+    {
+      variant: "filled",
+      intent: "success",
+      className: "bg-green-50 dark:bg-green-900 dark:text-green-400 text-green-600"
+    },
+    {
+      variant: "outlined",
+      intent: "success",
+      className: "border-green-300 text-green-600 bg-transparent"
+    },
+    {
+      variant: "filled",
+      intent: "default",
+      className: "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-400"
+    },
+    {
+      variant: "outlined",
+      intent: "default",
+      className: "border-gray-300 text-gray-700 bg-transparent dark:text-gray-400"
+    }
+  ],
+  defaultVariants: {
+    variant: "filled",
+    intent: "primary",
+    size: "sm"
+  }
+});
+var Callout = ({
+  children,
+  variant,
+  intent,
+  size,
+  startIcon,
+  endIcon,
+  className
+}) => {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        calloutVariants({ variant, intent, size }),
+        "flex items-center justify-between gap-2",
+        className
+      )
+    },
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center gap-2" }, startIcon && /* @__PURE__ */ import_react3.default.createElement("span", null, startIcon), children),
+    endIcon && /* @__PURE__ */ import_react3.default.createElement("span", null, endIcon)
+  );
+};
+var Callout_default = Callout;
+
+// src/components/Caption.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react4 = __toESM(require("react"), 1);
+var captionVariants = (0, import_class_variance_authority3.cva)("font-bold font-karla text-dark dark:text-light", {
   variants: {
     variant: {
       sm: "text-[10px] leading-[15px]",
@@ -226,24 +495,24 @@ var captionVariants = (0, import_class_variance_authority2.cva)("font-bold font-
   }
 });
 var Caption = ({ children, variant, className, ...props }) => {
-  return /* @__PURE__ */ import_react3.default.createElement("span", { className: cn(captionVariants({ variant, className })), ...props }, children);
+  return /* @__PURE__ */ import_react4.default.createElement("span", { className: cn(captionVariants({ variant, className })), ...props }, children);
 };
 var Caption_default = Caption;
 
 // src/components/Card.tsx
 var import_image = __toESM(require("next/image"), 1);
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 
 // src/components/Typography.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_react4 = __toESM(require("react"), 1);
-var typographyVariant = (0, import_class_variance_authority3.cva)("text-dark dark:text-light font-bold", {
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_react5 = __toESM(require("react"), 1);
+var typographyVariant = (0, import_class_variance_authority4.cva)("text-dark dark:text-light font-bold", {
   variants: {
     variant: {
-      h1: "text-8xl leading-[144px]",
-      h2: "text-7xl leading-[90px]",
-      h3: "text-5xl leading-[72px]",
-      h4: "text-[32px] leading-[48px]",
+      h1: "xl:text-8xl xl:leading-[144px] lg:text-7xl lg:leading-[90px] md:text-6xl md:leading-[72px] sm:text-5xl sm:leading-[48px] text-4xl leading-9",
+      h2: "xl:text-7xl xl:leading-[90px] lg:text-6xl lg:leading-[72px] md:text-5xl md:leading-[48px] sm:text-4xl sm:leading-9 text-3xl leading-7",
+      h3: "xl:text-5xl xl:leading-[72px] lg:text-4xl lg:leading-9 md:text-3xl md:leading-7 sm:text-2xl text-xl leading-[30px]",
+      h4: "md:text-[32px] md:leading-[48px] sm:text-xl sm:leading-[30px] text-xl",
       h5: "text-2xl leading-9",
       h6: "text-xl font-semibold leading-[30px]"
     }
@@ -260,7 +529,7 @@ var Typography = ({
   ...props
 }) => {
   const Component = as || variant;
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     Component,
     {
       className: cn(typographyVariant({ variant, className })),
@@ -272,9 +541,9 @@ var Typography = ({
 var Typography_default = Typography;
 
 // src/components/Paragraph.tsx
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_react5 = __toESM(require("react"), 1);
-var paragraphVariants = (0, import_class_variance_authority4.cva)(
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_react6 = __toESM(require("react"), 1);
+var paragraphVariants = (0, import_class_variance_authority5.cva)(
   "font-karla font-normal text-dark dark:text-light",
   {
     variants: {
@@ -296,16 +565,16 @@ var Paragraph = ({
   variant,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react5.default.createElement("p", { className: cn(paragraphVariants({ variant, className })), ...props }, children);
+  return /* @__PURE__ */ import_react6.default.createElement("p", { className: cn(paragraphVariants({ variant, className })), ...props }, children);
 };
 var Paragraph_default = Paragraph;
 
 // src/components/Card.tsx
 function Card({ children, className }) {
-  return /* @__PURE__ */ import_react6.default.createElement("article", { className }, children);
+  return /* @__PURE__ */ import_react7.default.createElement("article", { className }, children);
 }
-var CardIcon = ({ children, className }) => /* @__PURE__ */ import_react6.default.createElement("span", { className }, children);
-var CardHeader = ({ children, className }) => /* @__PURE__ */ import_react6.default.createElement("div", { className }, children);
+var CardIcon = ({ children, className }) => /* @__PURE__ */ import_react7.default.createElement("span", { className }, children);
+var CardHeader = ({ children, className }) => /* @__PURE__ */ import_react7.default.createElement("div", { className }, children);
 var CardBg = ({
   children,
   className,
@@ -313,7 +582,7 @@ var CardBg = ({
   alt = "Card",
   width = 300,
   height = 200
-}) => /* @__PURE__ */ import_react6.default.createElement("div", { className: cn("relative", className) }, src && /* @__PURE__ */ import_react6.default.createElement(
+}) => /* @__PURE__ */ import_react7.default.createElement("div", { className: cn("relative", className) }, src && /* @__PURE__ */ import_react7.default.createElement(
   import_image.default,
   {
     src,
@@ -322,25 +591,26 @@ var CardBg = ({
     height,
     layout: "responsive"
   }
-), /* @__PURE__ */ import_react6.default.createElement("div", { className: "absolute inset-0" }, children));
-var CardTitle = ({ children, className }) => /* @__PURE__ */ import_react6.default.createElement(Typography_default, { variant: "h4", className }, children);
-var CardDescription = ({ children, className }) => /* @__PURE__ */ import_react6.default.createElement(Paragraph_default, { variant: "b1", className: cn("text-light", className) }, children);
-var CardContent = ({ children, className }) => /* @__PURE__ */ import_react6.default.createElement("div", { className: cn("font-karla text-white", className) }, children);
-var CardFooter = ({ children, className }) => /* @__PURE__ */ import_react6.default.createElement("div", { className: cn("font-karla text-white", className) }, children);
+), /* @__PURE__ */ import_react7.default.createElement("div", { className: "absolute inset-0" }, children));
+var CardTitle = ({ children, className }) => /* @__PURE__ */ import_react7.default.createElement(Typography_default, { variant: "h4", className }, children);
+var CardDescription = ({ children, className }) => /* @__PURE__ */ import_react7.default.createElement(Paragraph_default, { variant: "b1", className: cn("text-light", className) }, children);
+var CardContent = ({ children, className }) => /* @__PURE__ */ import_react7.default.createElement("div", { className: cn("font-karla text-white", className) }, children);
+var CardFooter = ({ children, className }) => /* @__PURE__ */ import_react7.default.createElement("div", { className: cn("font-karla text-white", className) }, children);
 
 // src/components/Checkbox.tsx
-var import_react7 = __toESM(require("react"), 1);
-var Checkbox = (0, import_react7.forwardRef)(
-  ({ disabled, checked, className, children, readOnly, ...props }, ref) => {
-    return /* @__PURE__ */ import_react7.default.createElement(
+var import_react8 = __toESM(require("react"), 1);
+var Checkbox = (0, import_react8.forwardRef)(
+  ({ disabled, checked, className, children, readOnly, square, ...props }, ref) => {
+    return /* @__PURE__ */ import_react8.default.createElement(
       "div",
       {
         className: cn(
-          "group inline-flex relative items-center rounded-full border-2 border-transparent hover:border-brand-300",
+          square ? "rounded-sm" : "rounded-full",
+          "group inline-flex relative items-center  border-2 border-transparent hover:border-primary-300",
           disabled && "border-none"
         )
       },
-      /* @__PURE__ */ import_react7.default.createElement(
+      /* @__PURE__ */ import_react8.default.createElement(
         "input",
         {
           type: "checkbox",
@@ -350,20 +620,21 @@ var Checkbox = (0, import_react7.forwardRef)(
           readOnly,
           checked,
           className: cn(
-            "peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-all checked:border-brand-500 hover:border-brand-500 hover:bg-brand-25/25 disabled:opacity-30 disabled:pointer-events-none disabled:border-gray-400",
+            square ? "rounded-sm" : "rounded-full",
+            "peer relative h-5 w-5 cursor-pointer appearance-none border-2 border-gray-300 transition-all checked:border-primary-500 hover:border-primary-500 hover:bg-primary-25/25 disabled:opacity-30 disabled:pointer-events-none disabled:border-gray-400",
             className
           )
         }
       ),
-      /* @__PURE__ */ import_react7.default.createElement(
+      /* @__PURE__ */ import_react8.default.createElement(
         "span",
         {
           className: cn(
-            "absolute text-brand-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",
+            "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",
             disabled && "text-gray-300"
           )
         },
-        /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -373,7 +644,7 @@ var Checkbox = (0, import_react7.forwardRef)(
             stroke: "currentColor",
             strokeWidth: "0.3"
           },
-          /* @__PURE__ */ import_react7.default.createElement(
+          /* @__PURE__ */ import_react8.default.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -391,16 +662,18 @@ Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
 
 // src/components/Chip.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_class_variance_authority5 = require("class-variance-authority");
-var chipVariants = (0, import_class_variance_authority5.cva)("", {
+var import_react9 = __toESM(require("react"), 1);
+var import_class_variance_authority6 = require("class-variance-authority");
+var chipVariants = (0, import_class_variance_authority6.cva)("", {
   variants: {
     variant: {
-      primary: "bg-white text-brand-500 hover:text-white hover:bg-gradient-to-r hover:from-brand-500 hover:to-[#264D8E]",
-      secondary: "bg-brand-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-brand-500 hover:to-[#285092]",
-      glass: "text-brand-500"
+      primary: "bg-white text-primary-500 hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-700",
+      secondary: "bg-primary-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-700",
+      default: "bg-gray-200",
+      glass: "backdrop-blur-sm text-primary-500"
     },
     size: {
+      xs: "text-xs py-1 px-3",
       sm: "text-sm py-1 px-3",
       md: "text-base px-4 py-2",
       lg: "text-lg px-6 py-3"
@@ -420,21 +693,21 @@ var Chip = ({
   size,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
       className: cn(
-        "rounded-radius-xl bg-gradient-to-r",
+        "rounded-radius-xl bg-gradient-to-r w-fit",
         {
-          solid: "from-brand-200 to-brand-500",
-          primary: "from-brand-200 to-brand-500",
-          secondary: "from-brand-200 to-brand-500",
-          glass: "border border-brand-500"
-        }[variant || "primary"],
-        "p-[1px]"
+          solid: "from-primary-200 to-primary-500 p-[1px]",
+          primary: "from-primary-200 to-primary-500 p-[1px]",
+          secondary: "from-primary-200 to-primary-500 p-[1px]",
+          glass: "border border-primary-500 bg-white/20",
+          default: "bg-gray-200 border border-gray-200 p-[1px]"
+        }[variant || "primary"]
       )
     },
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       "div",
       {
         ...props,
@@ -453,181 +726,88 @@ var Chip = ({
 };
 var Chip_default = Chip;
 
-// src/components/Dropdown.tsx
-var import_react9 = __toESM(require("react"), 1);
-var import_hi2 = require("react-icons/hi2");
-function Dropdown({
-  triggerIcon,
-  children,
-  width = "250px"
-}) {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const dropdownRef = (0, import_react9.useRef)(null);
-  (0, import_react9.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_react9.default.createElement("div", { className: "relative w-full font-karla", ref: dropdownRef }, /* @__PURE__ */ import_react9.default.createElement(
-    "div",
-    {
-      className: "cursor-pointer",
-      onClick: () => setIsOpen(!isOpen),
-      "aria-label": "Open menu"
-    },
-    triggerIcon || /* @__PURE__ */ import_react9.default.createElement("span", null, "\u2630")
-  ), isOpen && /* @__PURE__ */ import_react9.default.createElement(
-    "div",
-    {
-      style: { width },
-      className: "border border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:text-white rounded-t-radius-md absolute left-0 mt-1 z-[100000] w-full bg-white shadow-sm"
-    },
-    children
-  ));
-}
-var MenuItem = ({
-  label,
-  onClick,
-  disabled,
-  children
-}) => /* @__PURE__ */ import_react9.default.createElement(
-  "button",
-  {
-    className: cn(
-      "w-full text-left p-4 border-t border-gray-200 last:border-none hover:bg-gray-200 dark:hover:bg-gray-600",
-      disabled ? "opacity-50 cursor-not-allowed" : ""
-    ),
-    onClick,
-    disabled
-  },
-  label,
-  children && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, children)
-);
-var MenuSubItem = ({
-  label,
-  children
-}) => {
-  const [isSubOpen, setIsSubOpen] = (0, import_react9.useState)(false);
-  return /* @__PURE__ */ import_react9.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react9.default.createElement(
-    "section",
-    {
-      onClick: () => setIsSubOpen(!isSubOpen),
-      className: "cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 border-t border-b border-gray-200 p-4 flex justify-between items-center gap-1 w-full text-left"
-    },
-    /* @__PURE__ */ import_react9.default.createElement("span", null, label),
-    isSubOpen ? /* @__PURE__ */ import_react9.default.createElement(import_hi2.HiChevronUp, null) : /* @__PURE__ */ import_react9.default.createElement(import_hi2.HiChevronDown, null)
-  ), isSubOpen && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bg-gray-100 border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" }, children));
-};
-
-// src/components/Footer.tsx
+// src/components/Drawer.tsx
 var import_react10 = __toESM(require("react"), 1);
-var import_link = __toESM(require("next/link"), 1);
-function Footer({
+var import_ri = require("react-icons/ri");
+var Drawer = ({
+  isOpen,
+  setIsOpen,
   children,
+  position = "right",
+  width = "w-80",
+  height = "h-64",
   className,
-  footerBottom
-}) {
-  return /* @__PURE__ */ import_react10.default.createElement(
-    "footer",
-    {
-      className: cn(
-        "bg-gradient-to-b from-gray-25 to-brand-100 dark:from-brand-900 dark:to-dark",
-        className
-      )
-    },
-    children,
-    footerBottom && /* @__PURE__ */ import_react10.default.createElement("section", { className: "border-t border-brand-500 dark:border-brand-800 text-center py-spacing-md" }, footerBottom)
-  );
-}
-var FooterHeader = ({ children, className }) => {
-  return /* @__PURE__ */ import_react10.default.createElement(
+  showCloseButton = true,
+  closeOnOutsideClick = true
+}) => {
+  const handleClose = (0, import_react10.useCallback)(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  (0, import_react10.useEffect)(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+  }, [isOpen]);
+  (0, import_react10.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handleClose]);
+  return /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       className: cn(
-        "md:w-[30%] space-y-4 flex flex-col items-center lg:items-start",
-        className
-      )
-    },
-    children
-  );
-};
-var FooterContent = ({ children, className }) => {
-  return /* @__PURE__ */ import_react10.default.createElement(
-    "section",
-    {
-      className: cn(
-        "max-w-6xl mx-auto flex md:flex-row flex-col items-center md:items-start justify-between gap-14 px-4 md:px-20 py-20",
-        className
-      )
-    },
-    children
-  );
-};
-var FooterList = ({ footerItems, target }) => {
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "grid lg:grid-cols-3 md:grid-cols-2 place-items-start gap-12 text-center md:text-left" }, footerItems?.map((data, i) => /* @__PURE__ */ import_react10.default.createElement("div", { key: i, className: "space-y-5 w-full" }, /* @__PURE__ */ import_react10.default.createElement(Typography_default, { variant: "h5" }, data?.label), /* @__PURE__ */ import_react10.default.createElement("ul", { className: "space-y-2.5 list-none" }, data.content?.map((data2, i2) => /* @__PURE__ */ import_react10.default.createElement("li", { key: i2 }, /* @__PURE__ */ import_react10.default.createElement(import_link.default, { href: data2?.link, target }, /* @__PURE__ */ import_react10.default.createElement(
-    Paragraph_default,
-    {
-      variant: "b3",
-      className: "dark:text-gray-300 hover:text-brand-400 dark:hover:text-brand-600 text-gray-900"
-    },
-    data2?.text
-  ))))))));
-};
-var FooterIcons = ({ icons }) => {
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-5 text-brand-700 dark:text-brand-200" }, icons.map((icon, index) => /* @__PURE__ */ import_react10.default.createElement(
-    import_link.default,
-    {
-      href: icon.link,
-      key: index,
-      target: "_blank",
-      className: "hover:bg-brand-100 dark:hover:bg-brand-800 p-1 rounded-radius-sm"
-    },
-    icon.icon
-  )));
-};
-
-// src/components/ImageCard.tsx
-var import_react11 = __toESM(require("react"), 1);
-var ImageCard = ({
-  cardTitle,
-  cardDesc,
-  cardImg,
-  children,
-  className = ""
-}) => {
-  const backgroundImage = `url('${cardImg}')`;
-  return /* @__PURE__ */ import_react11.default.createElement(
+        "fixed inset-0 bg-black/50 dark:bg-white/50 transition-opacity duration-300 z-[10000000000000000]",
+        isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+      ),
+      onClick: () => closeOnOutsideClick && handleClose()
+    }
+  ), /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       className: cn(
-        "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-[#4285F4] relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
+        "fixed bg-light dark:bg-dark  shadow-xl p-4 transition-transform duration-300 z-[100000000000000000]",
+        position === "right" && `top-0 right-0 ${width} h-full`,
+        position === "left" && `top-0 left-0 ${width} h-full`,
+        position === "top" && `top-0 left-0 w-full ${height}`,
+        position === "bottom" && `bottom-0 left-0 w-full ${height}`,
+        !isOpen && (position === "right" ? "translate-x-full" : position === "left" ? "-translate-x-full" : position === "top" ? "-translate-y-full" : "translate-y-full"),
+        isOpen && "translate-x-0 translate-y-0",
         className
       ),
-      style: {
-        backgroundImage
-      }
+      onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ import_react11.default.createElement("div", { className: "absolute inset-0 z-[-5] transition-all duration-300 ease-in-out bg-gradient-to-b from-transparent via-black/50 to-black" }),
-    /* @__PURE__ */ import_react11.default.createElement("section", { className: "p-[32px] w-full h-full flex flex-col justify-end font-karla hover:bg-gradient-to-b hover:from-black/60 hover:via-black/70 hover:to-[#070707]" }, /* @__PURE__ */ import_react11.default.createElement(CardTitle, { className: "text-[24px] font-bold text-white mt-4 mb-6" }, cardTitle), /* @__PURE__ */ import_react11.default.createElement(CardDescription, { className: "text-[20px] leading-[25px] text-white" }, cardDesc), /* @__PURE__ */ import_react11.default.createElement("div", null, children))
-  );
+    showCloseButton && /* @__PURE__ */ import_react10.default.createElement(
+      Button_default,
+      {
+        size: "xs",
+        variant: "tertiary",
+        onClick: handleClose,
+        startIcon: /* @__PURE__ */ import_react10.default.createElement(import_ri.RiCloseLine, { size: 20 }),
+        "aria-label": "Close drawer",
+        className: "absolute border-none p-1 transition-colors top-3 right-4"
+      }
+    ),
+    /* @__PURE__ */ import_react10.default.createElement("div", { className: "overflow-y-auto h-full" }, children)
+  ));
 };
-var ImageCard_default = ImageCard;
+var Drawer_default = Drawer;
+
+// src/components/Dropdown.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_hi2 = require("react-icons/hi");
 
 // src/components/Input.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_react12 = __toESM(require("react"), 1);
-var inputVariants = (0, import_class_variance_authority6.cva)(
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_react11 = __toESM(require("react"), 1);
+var inputVariants = (0, import_class_variance_authority7.cva)(
   "flex items-center text-sm gap-2 py-2 px-4 rounded-radius-md border font-karla has-[:disabled]:opacity-30 has-[:disabled]:select-none has-[:disabled]:pointer-events-none",
   {
     variants: {
       variant: {
-        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:has-[:disabled]:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-brand-100 focus-within:hover:bg-brand-50 has-[:disabled]:bg-gray-25 has-[:disabled]:border-gray-400",
+        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:has-[:disabled]:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-primary-100 focus-within:hover:bg-primary-50 has-[:disabled]:bg-gray-25 has-[:disabled]:border-gray-400",
         glass: "backdrop-blur-[3.5px] bg-light/10 dark:bg-dark/20 dark:border-gray-800 border-gray-200/50 text-light"
       }
     },
@@ -636,9 +816,9 @@ var inputVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var Input = (0, import_react12.forwardRef)(
+var Input = (0, import_react11.forwardRef)(
   ({ startIcon, endIcon, className, variant, type, disabled, ...props }, ref) => {
-    return /* @__PURE__ */ import_react12.default.createElement("div", { className: cn(inputVariants({ variant, className })) }, startIcon, /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react11.default.createElement("div", { className: cn(inputVariants({ variant, className })) }, startIcon, /* @__PURE__ */ import_react11.default.createElement(
       "input",
       {
         ...props,
@@ -654,9 +834,9 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Label.tsx
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_react13 = __toESM(require("react"), 1);
-var labelVariants = (0, import_class_variance_authority7.cva)("font-medium text-dark dark:text-light", {
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_react12 = __toESM(require("react"), 1);
+var labelVariants = (0, import_class_variance_authority8.cva)("font-medium text-dark dark:text-light", {
   variants: {
     size: {
       sm: "text-xs",
@@ -677,7 +857,7 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "label",
     {
       htmlFor,
@@ -689,61 +869,545 @@ var Label = ({
       ...props
     },
     children,
-    required && /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-error" }, "*")
+    required && /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-error" }, "*")
   );
 };
 var Label_default = Label;
 
-// src/components/ListItem.tsx
-var import_link2 = __toESM(require("next/link"), 1);
-var import_react14 = __toESM(require("react"), 1);
-var import_navigation = require("next/navigation");
-var ListItem = import_react14.default.forwardRef(
-  ({ className, title, href, onClick, as = "link", variant = "solid" }, ref) => {
-    const pathname = (0, import_navigation.usePathname)();
-    const isActive = as === "link" && href === pathname;
-    const variantClasses = variant === "solid" ? "rounded-radius-lg hover:bg-brand-50 group border border-transparent hover:border-brand-200 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:text-white leading-none no-underline outline-none transition-colors" : variant === "glass" ? "rounded-radius-lg group border border-transparent hover:border-brand-200 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:text-white leading-none no-underline outline-none transition-colors" : "";
-    if (as === "button") {
-      return /* @__PURE__ */ import_react14.default.createElement(
-        "button",
+// src/components/Dropdown.tsx
+var import_react14 = require("react");
+var defaultRenderItem = (option, state) => {
+  return /* @__PURE__ */ import_react13.default.createElement(
+    MenuItem,
+    {
+      label: option.label,
+      value: option.value,
+      selected: state.selected,
+      disabled: state.disabled
+    }
+  );
+};
+var Dropdown = (0, import_react13.forwardRef)(
+  ({
+    id: controlledId,
+    options,
+    selected,
+    setSelected,
+    search = false,
+    multiple = false,
+    dropdownText = "Select",
+    renderItem = defaultRenderItem,
+    children,
+    icon,
+    position = "top",
+    width,
+    info,
+    dropdownFooter = false,
+    onApply,
+    disabled = false,
+    onReset,
+    footerAction,
+    height = "200px"
+  }, ref) => {
+    const reactId = (0, import_react14.useId)();
+    const id = controlledId ?? `dropdown-${reactId}`;
+    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) => {
+        if (typeof option.label === "string") {
+          return option.label.toLowerCase().includes(searchQuery.toLowerCase());
+        }
+        return option.label.toString().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 handleSelectAll = () => {
+      if (selected?.length === filteredOptions.length) {
+        setSelected?.([]);
+      } else {
+        setSelected?.(filteredOptions);
+      }
+    };
+    const handleReset = () => {
+      if (onReset) {
+        onReset();
+      }
+      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",
+      {
+        id,
+        ref: dropdownRef,
+        className: cn(
+          "relative rounded-lg shadow-sm font-karla",
+          "bg-white dark:bg-gray-900",
+          "text-gray-900 dark:text-gray-100",
+          !width && "w-full",
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        style: {
+          width
+        }
+      },
+      /* @__PURE__ */ import_react13.default.createElement(
+        "button",
+        {
+          type: "button",
+          "aria-haspopup": "listbox",
+          "aria-expanded": dropdownMenu,
+          "aria-labelledby": `${id}-label`,
+          disabled,
+          onClick: () => {
+            if (!disabled) {
+              setDropdownMenu((prev) => !prev);
+            }
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (!disabled) {
+                setDropdownMenu((prev) => !prev);
+              }
+            }
+          },
+          className: cn(
+            "w-full flex justify-between items-center rounded-lg px-[14px] py-2 text-sm",
+            "border transition-colors",
+            "bg-white dark:bg-gray-900",
+            "text-gray-900 dark:text-gray-100",
+            "hover:bg-gray-50 dark:hover:bg-gray-800",
+            dropdownMenu ? "border-primary-600" : "border-gray-200 dark:border-gray-700",
+            disabled && "cursor-not-allowed opacity-50"
+          )
+        },
+        /* @__PURE__ */ import_react13.default.createElement("section", { className: "flex items-center gap-2 text-ellipsis overflow-hidden" }, icon && /* @__PURE__ */ import_react13.default.createElement("span", { "aria-hidden": "true" }, icon), /* @__PURE__ */ import_react13.default.createElement("span", { id: `${id}-label`, className: "line-clamp-1 w-full" }, multiple ? (selected?.length ?? 0) > 0 ? `${selected?.length} Selected` : dropdownText : selected?.[0]?.label ? selected?.[0]?.label : dropdownText)),
+        /* @__PURE__ */ import_react13.default.createElement(import_hi2.HiChevronDown, { "aria-hidden": "true", size: 18 })
+      ),
+      /* @__PURE__ */ import_react13.default.createElement(
+        "ul",
+        {
+          role: "listbox",
+          "aria-multiselectable": multiple,
+          "aria-labelledby": `${id}-label`,
+          className: cn(
+            "absolute z-[1000] w-full mt-1 rounded shadow-md overflow-hidden transition-all",
+            "bg-white dark:bg-gray-900",
+            "text-gray-900 dark:text-gray-100",
+            dropdownMenu ? "opacity-100 max-h-[360px]" : "opacity-0 max-h-0",
+            position === "top" ? "top-10" : "bottom-10",
+            dropdownMenu ? "border border-primary-600" : "border border-gray-200 dark:border-gray-700"
+          )
+        },
+        search && /* @__PURE__ */ import_react13.default.createElement(
+          Input_default,
+          {
+            id: `${id}-search`,
+            type: "text",
+            placeholder: "Search...",
+            "aria-label": "Search options",
+            value: searchQuery,
+            onChange: handleSearchChange,
+            className: "rounded-none text-gray-800 text-sm bg-white w-full h-[35px] pl-3 border-none",
+            endIcon: /* @__PURE__ */ import_react13.default.createElement(import_hi2.HiOutlineSearch, { size: 18 })
+          }
+        ),
+        multiple && /* @__PURE__ */ import_react13.default.createElement("section", { className: "py-[6px] px-[14px] flex justify-between items-center" }, /* @__PURE__ */ import_react13.default.createElement(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Select all",
+            onClick: handleSelectAll,
+            className: "text-sm  hover:text-primary-700 text-primary-600 dark:text-primary-300 cursor-pointer"
+          },
+          "Select all"
+        ), /* @__PURE__ */ import_react13.default.createElement(
+          "button",
+          {
+            "aria-label": "Reset",
+            type: "button",
+            className: "text-sm text-warning-500 hover:text-warning-600",
+            onClick: handleReset
+          },
+          "Reset"
+        )),
+        /* @__PURE__ */ import_react13.default.createElement(
+          "section",
+          {
+            style: { maxHeight: height },
+            className: "z-[1000] transition-all duration-75 delay-100 ease-in-out overflow-y-scroll"
+          },
+          options ? memoizedFilteredOptions?.map((option, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: `${option.value}-${i}` }, multiple ? /* @__PURE__ */ import_react13.default.createElement(
+            Label_default,
+            {
+              className: cn(
+                "flex flex-col cursor-pointer border-l-4 px-[14px] py-[6px]",
+                "bg-white dark:bg-gray-900",
+                "hover:bg-gray-50 dark:hover:bg-gray-800",
+                "border-transparent",
+                "has-[:checked]:bg-primary-50 dark:has-[:checked]:bg-gray-800",
+                "has-[:checked]:border-primary-600",
+                option.disabledOption && "opacity-50 cursor-not-allowed pointer-events-none"
+              ),
+              htmlFor: `${id}-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,
+              {
+                square: true,
+                id: `${id}-checkbox-${option.value}`,
+                checked: selected?.some(
+                  (item) => item.value === option.value
+                ) ?? false,
+                onChange: () => toggleOption(option),
+                disabled: !!option.disabledOption
+              }
+            ), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react13.default.createElement(
+              "div",
+              {
+                style: {
+                  color: option?.disabledOption ? "#D1D5DB" : option.labelTextColor
+                },
+                className: cn(
+                  "break-words",
+                  option?.disabledOption && "text-gray-300"
+                )
+              },
+              renderItem(option, {
+                selected: selected?.some(
+                  (item) => item.value === option.value
+                ) ?? false,
+                disabled: !!option.disabledOption
+              })
+            ))), /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-gray-500" }, option?.info)),
+            /* @__PURE__ */ import_react13.default.createElement("span", { className: "pt-[2px] text-sm text-gray-500" }, option?.addInfo)
+          ) : /* @__PURE__ */ import_react13.default.createElement(
+            Label_default,
+            {
+              key: i,
+              htmlFor: `${id}-checkbox-${option.value}`,
+              className: cn(
+                "flex justify-between items-center px-[14px] py-[6px] border-l-4 cursor-pointer",
+                "bg-white dark:bg-gray-900",
+                "hover:bg-gray-50 dark:hover:bg-gray-800",
+                "border-transparent",
+                selected?.[0]?.value === option.value && "bg-primary-50 dark:bg-gray-800 border-primary-600",
+                option.disabledOption && "opacity-50 cursor-not-allowed pointer-events-none"
+              ),
+              onClick: () => !option?.disabledOption && toggleOption(option)
+            },
+            /* @__PURE__ */ import_react13.default.createElement(
+              MenuItem,
+              {
+                label: option.label,
+                selected: selected?.[0]?.value === option.value,
+                disabled: !!option.disabledOption
+              }
+            ),
+            /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-gray-500" }, info)
+          ))) : children
+        ),
+        footerAction && /* @__PURE__ */ import_react13.default.createElement("div", { className: "py-2 mt-1 px-2 border-t" }, footerAction),
+        dropdownFooter && /* @__PURE__ */ import_react13.default.createElement(
+          DropdownFooter,
+          {
+            setDropdownMenu,
+            onApply
+          }
+        )
+      )
+    );
+  }
+);
+var MenuItem = ({
+  label,
+  selected,
+  disabled,
+  children
+}) => {
+  return /* @__PURE__ */ import_react13.default.createElement(
+    "p",
+    {
+      className: cn(
+        "break-all transition-colors",
+        "text-gray-900 dark:text-gray-100",
+        selected && "text-gray-900 dark:text-white font-medium",
+        disabled && "text-gray-300 dark:text-gray-500"
+      )
+    },
+    label ?? children
+  );
+};
+var DropdownFooter = ({
+  onApply,
+  setDropdownMenu
+}) => {
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex justify-end border-t border-gray-200 dark:border-gray-700 px-[14px] py-[8px] text-sm" }, /* @__PURE__ */ import_react13.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "text-primary-600 dark:text-primary-300 hover:text-primary-700",
+      onClick: () => {
+        if (onApply) {
+          onApply();
+        }
+        if (setDropdownMenu) {
+          setDropdownMenu(false);
+        }
+      }
+    },
+    "Apply"
+  ));
+};
+Dropdown.displayName = "Dropdown";
+var Dropdown_default = Dropdown;
+
+// src/components/FillButton.tsx
+var import_react15 = __toESM(require("react"), 1);
+var FillButton = ({
+  label,
+  icon: Icon,
+  fillColor = "bg-white",
+  textHoverColor = "group-hover:text-primary-900",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react15.default.createElement(
+    "button",
+    {
+      ...props,
+      className: cn(
+        "relative overflow-hidden group px-6 py-4 rounded-full flex text-dark dark:text-light items-center gap-2 w-full justify-between border dark:border-gray-400 transition-colors",
+        className
+      )
+    },
+    /* @__PURE__ */ import_react15.default.createElement(
+      "span",
+      {
+        className: cn(
+          "absolute inset-0 scale-x-0 origin-left transition-transform duration-500 group-hover:scale-x-100",
+          fillColor
+        )
+      }
+    ),
+    /* @__PURE__ */ import_react15.default.createElement("span", { className: cn("relative z-10 transition-colors", textHoverColor) }, label),
+    Icon && /* @__PURE__ */ import_react15.default.createElement(
+      Icon,
+      {
+        size: 18,
+        className: cn("relative z-10 transition-colors", textHoverColor)
+      }
+    )
+  );
+};
+var FillButton_default = FillButton;
+
+// src/components/Footer.tsx
+var import_react16 = __toESM(require("react"), 1);
+var import_link = __toESM(require("next/link"), 1);
+function Footer({
+  children,
+  className,
+  footerBottom
+}) {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "footer",
+    {
+      className: cn(
+        "bg-gradient-to-b from-gray-25 to-primary-100 dark:from-primary-900 dark:to-dark",
+        className
+      )
+    },
+    children,
+    footerBottom && /* @__PURE__ */ import_react16.default.createElement("section", { className: "border-t border-primary-500 dark:border-primary-800 text-center py-spacing-md" }, footerBottom)
+  );
+}
+var FooterHeader = ({ children, className }) => {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "div",
+    {
+      className: cn(
+        "md:w-[30%] space-y-4 flex flex-col items-center lg:items-start",
+        className
+      )
+    },
+    children
+  );
+};
+var FooterContent = ({ children, className }) => {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "section",
+    {
+      className: cn(
+        "max-w-6xl mx-auto flex md:flex-row flex-col items-center md:items-start justify-between gap-14 px-4 md:px-20 py-20",
+        className
+      )
+    },
+    children
+  );
+};
+var FooterList = ({ footerItems, target }) => {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "div",
+    {
+      className: cn(
+        "grid place-items-start gap-8 text-center md:text-left",
+        footerItems.length === 2 && "md:grid-cols-2",
+        (footerItems.length > 3 || footerItems.length === 3) && "lg:grid-cols-3 md:grid-cols-2"
+      )
+    },
+    footerItems?.map((data, i) => /* @__PURE__ */ import_react16.default.createElement("div", { key: i, className: "space-y-3 w-full" }, /* @__PURE__ */ import_react16.default.createElement(Paragraph_default, { variant: "b3", className: "text-primary-600" }, data?.label), /* @__PURE__ */ import_react16.default.createElement("ul", { className: "space-y-2 list-none" }, data?.content?.map((data2, i2) => /* @__PURE__ */ import_react16.default.createElement("li", { key: i2 }, /* @__PURE__ */ import_react16.default.createElement(import_link.default, { href: data2?.link, target }, /* @__PURE__ */ import_react16.default.createElement(
+      Paragraph_default,
+      {
+        variant: "b4",
+        className: "dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-600 font-semibold text-gray-900"
+      },
+      data2?.text
+    )))))))
+  );
+};
+var FooterIcons = ({ icons }) => {
+  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-5 text-primary-700 dark:text-primary-200" }, icons.map((icon, index) => /* @__PURE__ */ import_react16.default.createElement(
+    import_link.default,
+    {
+      href: icon.link,
+      key: index,
+      target: "_blank",
+      className: "hover:bg-primary-100 dark:hover:bg-primary-800 p-1 rounded-radius-sm"
+    },
+    icon.icon
+  )));
+};
+
+// src/components/ImageCard.tsx
+var import_react17 = __toESM(require("react"), 1);
+var ImageCard = ({
+  cardTitle,
+  cardDesc,
+  cardImg,
+  children,
+  className = ""
+}) => {
+  const backgroundImage = `url('${cardImg}')`;
+  return /* @__PURE__ */ import_react17.default.createElement(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-[#4285F4] relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
+        className
+      ),
+      style: {
+        backgroundImage
+      }
+    },
+    /* @__PURE__ */ import_react17.default.createElement("div", { className: "absolute inset-0 z-[-5] transition-all duration-300 ease-in-out bg-gradient-to-b from-transparent via-black/50 to-black" }),
+    /* @__PURE__ */ import_react17.default.createElement("section", { className: "p-[32px] w-full h-full flex flex-col justify-end font-karla hover:bg-gradient-to-b hover:from-black/60 hover:via-black/70 hover:to-[#070707]" }, /* @__PURE__ */ import_react17.default.createElement(CardTitle, { className: "text-[24px] font-bold text-white mt-4 mb-6" }, cardTitle), /* @__PURE__ */ import_react17.default.createElement(CardDescription, { className: "text-[20px] leading-[25px] text-white" }, cardDesc), /* @__PURE__ */ import_react17.default.createElement("div", null, children))
+  );
+};
+var ImageCard_default = ImageCard;
+
+// src/components/ListItem.tsx
+var import_link2 = __toESM(require("next/link"), 1);
+var import_react18 = __toESM(require("react"), 1);
+var import_navigation = require("next/navigation");
+var ListItem = import_react18.default.forwardRef(
+  ({ className, title, href, onClick, as = "link", variant = "solid", icon }, ref) => {
+    const pathname = (0, import_navigation.usePathname)();
+    const isActive = as === "link" && href === pathname;
+    const variantClasses = variant === "solid" ? "rounded-radius-lg hover:bg-primary-50 text-dark group border border-transparent hover:border-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:text-white leading-none no-underline outline-none transition-colors" : variant === "glass" ? "rounded-radius-lg group border border-transparent hover:border-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:text-white leading-none no-underline outline-none transition-colors" : "";
+    if (as === "button") {
+      return /* @__PURE__ */ import_react18.default.createElement(
+        "button",
         {
           className: cn(
-            "px-4 py-[8px] font-karla",
+            "px-4 py-[8px] group font-karla w-full text-left flex items-center gap-2",
             variantClasses,
             className
           ),
           onClick,
           ref
         },
-        /* @__PURE__ */ import_react14.default.createElement(
+        /* @__PURE__ */ import_react18.default.createElement(
           Typography_default,
           {
             variant: "h6",
             className: cn("font-karla group-hover:dark:text-dark", className)
           },
           title
-        )
+        ),
+        icon && /* @__PURE__ */ import_react18.default.createElement("span", { className: "text-dark dark:text-white" }, icon)
       );
     }
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react18.default.createElement(
       import_link2.default,
       {
         href: href ?? "",
         passHref: true,
         className: cn(
-          "px-4 py-[8px] font-karla",
-          isActive ? "bg-brand-400 text-white border border-brand-200" : variantClasses,
+          "px-4 py-[8px] font-karla w-full flex items-center gap-2 group",
+          isActive ? "bg-primary-400 text-white border border-primary-200" : variantClasses,
           className
         ),
         ref
       },
-      /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react18.default.createElement(
         Typography_default,
         {
           variant: "h6",
           className: cn("font-karla group-hover:dark:text-dark", className)
         },
         title
+      ),
+      icon && /* @__PURE__ */ import_react18.default.createElement(
+        Caption_default,
+        {
+          variant: "md",
+          className: "text-dark dark:text-white group-hover:dark:text-dark"
+        },
+        icon
       )
     );
   }
@@ -751,12 +1415,502 @@ var ListItem = import_react14.default.forwardRef(
 ListItem.displayName = "ListItem";
 var ListItem_default = ListItem;
 
+// src/components/ListPagination.tsx
+var import_react19 = __toESM(require("react"), 1);
+var import_ri2 = require("react-icons/ri");
+var ListPagination = ({
+  count,
+  page,
+  rowsPerPage,
+  onPageChange,
+  className
+}) => {
+  const totalPages = Math.ceil(count / rowsPerPage);
+  const [expanded, setExpanded] = (0, import_react19.useState)(false);
+  const renderPages = () => {
+    if (totalPages <= 6 || expanded) {
+      return [...Array(totalPages)].map((_, i) => /* @__PURE__ */ import_react19.default.createElement(PageBtn, { key: i, i, page, onPageChange }));
+    }
+    const start = [0, 1];
+    const mid = [page - 1, page, page + 1].filter(
+      (i) => i > 1 && i < totalPages - 2
+    );
+    const end = [totalPages - 2, totalPages - 1];
+    const range = Array.from(/* @__PURE__ */ new Set([...start, ...mid, ...end]));
+    return range.map(
+      (i, idx) => typeof range[idx - 1] === "number" && i - range[idx - 1] > 1 ? /* @__PURE__ */ import_react19.default.createElement(
+        Button_default,
+        {
+          key: `dots-${i}`,
+          size: "sm",
+          variant: "secondary",
+          onClick: () => setExpanded(true)
+        },
+        "..."
+      ) : /* @__PURE__ */ import_react19.default.createElement(PageBtn, { key: i, i, page, onPageChange })
+    );
+  };
+  return /* @__PURE__ */ import_react19.default.createElement("section", { className: cn("flex items-center gap-1", className) }, /* @__PURE__ */ import_react19.default.createElement(
+    NavBtn,
+    {
+      icon: /* @__PURE__ */ import_react19.default.createElement(import_ri2.RiArrowLeftSLine, { size: 28 }),
+      onClick: () => onPageChange(page - 1),
+      disabled: page === 0
+    }
+  ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "max-w-[90vw] w-max overflow-auto flex items-center gap-2 p-2" }, renderPages()), /* @__PURE__ */ import_react19.default.createElement(
+    NavBtn,
+    {
+      icon: /* @__PURE__ */ import_react19.default.createElement(import_ri2.RiArrowRightSLine, { size: 28 }),
+      onClick: () => onPageChange(page + 1),
+      disabled: page === totalPages - 1
+    }
+  ));
+};
+var PageBtn = ({
+  i,
+  page,
+  onPageChange
+}) => /* @__PURE__ */ import_react19.default.createElement(
+  Button_default,
+  {
+    size: "sm",
+    variant: "secondary",
+    className: cn(
+      // "dark:bg-transparent dark:border dark:text-gray-300 dark:border-gray-400",
+      i === page && "bg-primary-50 shadow-[0px_0px_0px_2px] shadow-primary-700 hover:shadow-[0px_0px_0px_2px] hover:shadow-primary-700 dark:shadow-primary-200 dark:bg-primary-300"
+    ),
+    onClick: () => onPageChange(i)
+  },
+  i + 1
+);
+var NavBtn = ({
+  icon,
+  onClick,
+  disabled
+}) => /* @__PURE__ */ import_react19.default.createElement(
+  Button_default,
+  {
+    size: "sm",
+    variant: "primary-light",
+    startIcon: icon,
+    onClick,
+    disabled,
+    className: "border border-primary-100 px-1.5"
+  }
+);
+var ListPagination_default = ListPagination;
+
+// src/components/Loading.tsx
+var import_react20 = __toESM(require("react"), 1);
+var Loading = ({ width, height, loaderColor, variant }) => {
+  return /* @__PURE__ */ import_react20.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;
+
+// src/components/Modal.tsx
+var import_react21 = __toESM(require("react"), 1);
+var import_ri3 = require("react-icons/ri");
+function Modal({
+  children,
+  showModal,
+  setShowModal,
+  closeModal = true,
+  closeOnOutsideClick = true,
+  className = "",
+  width = "50%"
+}) {
+  (0, import_react21.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_react21.default.createElement(import_react21.default.Fragment, null, showModal && /* @__PURE__ */ import_react21.default.createElement(
+    "div",
+    {
+      onClick: handleClickOutside,
+      className: "w-full h-full bg-backdrop dark:bg-white/25 bg-blend-overlay fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center z-[1000000] overflow-hidden"
+    },
+    /* @__PURE__ */ import_react21.default.createElement(
+      "div",
+      {
+        style: { width },
+        className: cn(
+          "relative bg-white dark:bg-dark shadow-boxShadow rounded-xl p-[18px] transition-all duration-150 fade-in-grow mx-4",
+          className
+        )
+      },
+      /* @__PURE__ */ import_react21.default.createElement("div", null, children),
+      closeModal && /* @__PURE__ */ import_react21.default.createElement(
+        "div",
+        {
+          className: "absolute top-4 ml-5 right-5 z-10 shadow-backdrop dark:text-white dark:hover:bg-gray-700 rounded-md cursor-pointer hover:bg-gray-100",
+          onClick: () => setShowModal(false)
+        },
+        /* @__PURE__ */ import_react21.default.createElement(import_ri3.RiCloseLine, { size: 24 })
+      )
+    )
+  ));
+}
+
+// src/components/NestedDropdown.tsx
+var import_fi = require("react-icons/fi");
+var import_react22 = require("react");
+var NestedDropdown = ({
+  data,
+  onSelect,
+  placeholder = "Select Industry",
+  getChildren = (item) => item.children
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const [selectedItem, setSelectedItem] = (0, import_react22.useState)(null);
+  const [activePath, setActivePath] = (0, import_react22.useState)([]);
+  const dropdownRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setActivePath([]);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const handleItemClick = (item, path) => {
+    setSelectedItem(item);
+    setIsOpen(false);
+    setActivePath([]);
+    onSelect?.(item, path);
+  };
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+    if (isOpen) {
+      setActivePath([]);
+    }
+  };
+  const handleCategoryClick = (item, level, event) => {
+    const children = getChildren(item);
+    const currentPath = activePath.slice(0, level);
+    currentPath[level] = item;
+    const isDoubleClick = event?.detail === 2;
+    if (children && children.length > 0 && !isDoubleClick) {
+      setActivePath(currentPath);
+    } else {
+      handleItemClick(item, [...currentPath]);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "relative w-full max-w-[200px]", ref: dropdownRef }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "w-full flex justify-between items-center py-3 px-4 text-sm bg-white border border-gray-300 rounded-lg shadow-sm text-left focus:outline-none focus:ring-1 focus:ring-primary-600 focus:border-primary-500 hover:border-gray-400 transition-colors duration-200",
+      onClick: toggleDropdown
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: `whitespace-nowrap text-ellipsis overflow-hidden w-[180px] ${selectedItem ? "text-gray-900 font-medium" : "text-gray-500"}`
+      },
+      selectedItem ? selectedItem.name : placeholder
+    ),
+    /* @__PURE__ */ React.createElement(
+      import_fi.FiChevronDown,
+      {
+        className: `w-5 h-5 text-gray-400 transform transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+      }
+    )
+  ), isOpen && /* @__PURE__ */ React.createElement("div", { className: "absolute z-50 w-[200px] mt-1 bg-white rounded-lg shadow-xl max-h-96" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col h-full" }, /* @__PURE__ */ React.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search",
+      className: "w-full pl-3 pr-4 py-2 focus:outline-none focus:border-b focus:border-b-primary-600 text-sm"
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded" }, "Q")))), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto bg-white max-h-[200px]" }, /* @__PURE__ */ React.createElement("div", { className: "" }, data?.map((item) => {
+    const children = getChildren(item);
+    const hasChildren = children && children.length > 0;
+    const isActive = activePath[0]?._id === item._id;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: item._id,
+        className: `
+                        group flex items-center justify-between py-2 px-3 border border-transparent cursor-pointer
+                        transition-colors duration-200 relative
+                        ${isActive ? "bg-primary-50 text-primary-700 border border-primary-200" : "hover:bg-gray-50"}
+                      `,
+        onClick: (e) => handleCategoryClick(item, 0, e)
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-800" }, item.name),
+      hasChildren && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_fi.FiChevronRight, { className: "w-4 h-4 text-gray-400" }))
+    );
+  })))), activePath?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "absolute left-full top-[36px] flex" }, activePath?.map((pathItem, level) => {
+    const children = getChildren(pathItem);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: pathItem._id,
+        className: "w-[200px] bg-white border border-gray-200 shadow-xl rounded-b-lg max-h-[200px] overflow-y-auto"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "" }, /* @__PURE__ */ React.createElement("div", { className: "" }, children?.map((child) => {
+        const childChildren = getChildren(child);
+        const hasChildren = childChildren && childChildren.length > 0;
+        const isActive = activePath[level + 1]?._id === child._id;
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: child._id,
+            className: `
+                                group flex items-center justify-between py-2 px-3 border border-transparent cursor-pointer
+                                transition-colors duration-200 relative
+                                ${isActive ? "bg-primary-50 text-primary-700 border border-primary-200" : "hover:bg-gray-50"}
+                              `,
+            onClick: (e) => handleCategoryClick(child, level + 1, e)
+          },
+          /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-800" }, child.name),
+          hasChildren && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_fi.FiChevronRight, { className: "w-4 h-4 text-gray-400" }), /* @__PURE__ */ React.createElement("div", { className: "absolute opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-gray-800 text-white text-xs py-1 px-2 rounded bottom-full mb-1 left-1/2 transform -translate-x-1/2 whitespace-nowrap z-10" }, "Double-click to select", /* @__PURE__ */ React.createElement("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-800" })))
+        );
+      })))
+    );
+  }))));
+};
+var NestedDropdown_default = NestedDropdown;
+
+// src/components/OTPInput.tsx
+var import_react23 = __toESM(require("react"), 1);
+var OTPInput = ({
+  length,
+  onChange,
+  type = "text"
+}) => {
+  const [otpValues, setOtpValues] = (0, import_react23.useState)(Array(length).fill(""));
+  const inputsRef = (0, import_react23.useRef)([]);
+  const handleChange = (e, idx) => {
+    let value = e.target.value;
+    if (type === "number") value = value.replace(/\D/g, "");
+    if (!value) return;
+    const newOtp = [...otpValues];
+    newOtp[idx] = value[0];
+    setOtpValues(newOtp);
+    onChange(newOtp.join(""));
+    if (idx < length - 1) inputsRef.current[idx + 1]?.focus();
+  };
+  const handleKeyDown = (e, idx) => {
+    if (e.key === "Backspace") {
+      if (otpValues[idx]) {
+        const newOtp = [...otpValues];
+        newOtp[idx] = "";
+        setOtpValues(newOtp);
+        onChange(newOtp.join(""));
+      } else if (idx > 0) {
+        inputsRef.current[idx - 1]?.focus();
+      }
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    let pasteData = e.clipboardData.getData("Text");
+    if (type === "number") pasteData = pasteData.replace(/\D/g, "");
+    const newOtp = pasteData.split("").concat(Array(length).fill("")).slice(0, length);
+    setOtpValues(newOtp);
+    onChange(newOtp.join(""));
+    inputsRef.current[Math.min(pasteData.length, length - 1)]?.focus();
+  };
+  return /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2" }, Array.from({ length }).map((_, idx) => /* @__PURE__ */ import_react23.default.createElement(
+    Input_default,
+    {
+      key: idx,
+      type,
+      inputMode: type === "number" ? "numeric" : "text",
+      maxLength: 1,
+      value: otpValues[idx],
+      onChange: (e) => handleChange(e, idx),
+      onKeyDown: (e) => handleKeyDown(e, idx),
+      onPaste: handlePaste,
+      ref: (el) => {
+        inputsRef.current[idx] = el ?? null;
+      },
+      className: "w-[40px] p-3.5"
+    }
+  )));
+};
+var OTPInput_default = OTPInput;
+
+// src/components/Popover.tsx
+var import_react24 = __toESM(require("react"), 1);
+var Popover = (0, import_react24.forwardRef)(
+  ({
+    isOpen,
+    setIsOpen,
+    trigger,
+    children,
+    className,
+    postion = "bottom-right"
+  }, ref) => {
+    const triggerRef = (0, import_react24.useRef)(null);
+    const contentRef = (0, import_react24.useRef)(null);
+    (0, import_react24.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (!triggerRef.current?.contains(event.target) && !contentRef.current?.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [setIsOpen]);
+    return /* @__PURE__ */ import_react24.default.createElement("div", { className: "relative w-max", ref }, /* @__PURE__ */ import_react24.default.createElement(
+      "div",
+      {
+        className: "cursor-pointer",
+        ref: triggerRef,
+        onClick: () => setIsOpen(!isOpen)
+      },
+      trigger
+    ), isOpen && /* @__PURE__ */ import_react24.default.createElement(
+      "div",
+      {
+        ref: contentRef,
+        className: cn(
+          "absolute z-10 bg-white dark:bg-dark dark:text-light border border-primary-200 dark:border-primary-700 dark:shadow-primary-600 shadow-primary-200 rounded-lg shadow-sm min-w-[200px] p-4",
+          postion === "bottom-left" && "left-0 top-full mt-3",
+          postion === "bottom-right" && "right-0 top-full mt-3",
+          postion === "top-left" && "left-0 bottom-full mb-3",
+          postion === "top-right" && "right-0 bottom-full mb-3",
+          postion === "bottom-center" && "left-1/2 top-full mt-3 -translate-x-1/2",
+          postion === "top-center" && "left-1/2 bottom-full mb-3 -translate-x-1/2",
+          className
+        )
+      },
+      /* @__PURE__ */ import_react24.default.createElement(
+        "div",
+        {
+          className: cn(
+            "absolute h-3 w-3 bg-white dark:bg-dark border border-primary-200 dark:border-primary-700 rotate-45",
+            postion === "bottom-left" && "-top-1.5 left-4 border-b-0 border-r-0",
+            postion === "bottom-right" && "-top-1.5 right-4 border-b-0 border-r-0",
+            postion === "top-left" && "-bottom-1.5 left-4 border-t-0 border-l-0",
+            postion === "top-right" && "-bottom-1.5 right-4 border-t-0 border-l-0",
+            postion === "bottom-center" && "-top-1.5 left-1/2 -translate-x-1/2 border-b-0 border-r-0",
+            postion === "top-center" && "-bottom-1.5 left-1/2 -translate-x-1/2 border-t-0 border-l-0"
+          )
+        }
+      ),
+      children
+    ));
+  }
+);
+Popover.displayName = "Popover";
+var Popover_default = Popover;
+
+// src/components/Radio.tsx
+var import_react25 = __toESM(require("react"), 1);
+var import_class_variance_authority9 = require("class-variance-authority");
+var radioVariants = (0, import_class_variance_authority9.cva)("", {
+  variants: {
+    size: {
+      sm: "h-3 w-3",
+      lg: "h-4 w-4"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+var Radio = (0, import_react25.forwardRef)(
+  ({ size, disabled, checked, className, id, name, ...props }, ref) => {
+    return /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative inline-flex items-center cursor-pointer" }, /* @__PURE__ */ import_react25.default.createElement(
+      "input",
+      {
+        ...props,
+        ref,
+        id,
+        name,
+        checked,
+        disabled,
+        role: "radio",
+        "aria-checked": checked,
+        type: "radio",
+        className: cn(
+          "peer relative cursor-pointer appearance-none rounded-full checked:bg-primary-600 border border-gray-300 hover:border-primary-600 hover:bg-primary-50 checked:hover:bg-primary-700 transition-all checked:border-primary-600 disabled:opacity-30 disabled:pointer-events-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
+          radioVariants({ size, className })
+        )
+      }
+    ), /* @__PURE__ */ import_react25.default.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        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-white rounded-full duration-300",
+          size === "sm" && "h-[4.5px] w-[4.5px]"
+        )
+      }
+    ));
+  }
+);
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+
+// src/components/Skeleton.tsx
+var import_react26 = __toESM(require("react"), 1);
+var Skeleton = ({
+  width = "100%",
+  height = "100%",
+  circle = false,
+  animation = "shimmer"
+}) => {
+  const style = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height,
+    borderRadius: circle ? "50%" : void 0,
+    display: "block"
+  };
+  return /* @__PURE__ */ import_react26.default.createElement(
+    "span",
+    {
+      className: cn(
+        "skeleton rounded-lg",
+        circle ? "circle" : "",
+        animation === "shimmer" && "skeleton-shimmer",
+        animation === "wave" && "skeleton-wave",
+        animation === "pulse" && "skeleton-pulse"
+      ),
+      style
+    }
+  );
+};
+var Skeleton_default = Skeleton;
+
 // src/components/Slider.tsx
-var import_react15 = __toESM(require("react"), 1);
-var Slider = (0, import_react15.forwardRef)(
+var import_react27 = __toESM(require("react"), 1);
+var Slider = (0, import_react27.forwardRef)(
   ({ value, min = 0, max = 100, size = "sm", ...props }, ref) => {
     const progress = (value - min) / (max - min) * 100;
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(
       "input",
       {
         ref,
@@ -770,7 +1924,7 @@ var Slider = (0, import_react15.forwardRef)(
           size === "sm" ? "h-1.5" : "h-4"
         ),
         style: {
-          background: `linear-gradient(to right, #8EB6F8 ${progress}%, #d1d5db ${progress}%)`
+          background: `linear-gradient(to right, var(--primary-300) ${progress}%, var(--gray-200) ${progress}%)`
         }
       }
     ));
@@ -779,39 +1933,262 @@ var Slider = (0, import_react15.forwardRef)(
 Slider.displayName = "Slider";
 var Slider_default = Slider;
 
+// src/components/Spinner.tsx
+var import_react28 = __toESM(require("react"), 1);
+var colorVars = {
+  primary: {
+    c1: "var(--primary-500)",
+    c2: "var(--primary-200)"
+  },
+  black: {
+    c1: "rgba(0, 0, 0, 1)",
+    c2: "rgba(0, 0, 0, 0.5)"
+  },
+  gray: {
+    c1: "var(--gray-500)",
+    c2: "var(--gray-300)"
+  }
+};
+var Spinner = ({ size = "md", color = "primary" }) => {
+  const sizeClass = cn({
+    "w-4 h-4": size === "xs",
+    "w-6 h-6": size === "sm",
+    "w-10 h-10": size === "md",
+    "w-16 h-16": size === "lg"
+  });
+  const getColorValues = (color2) => {
+    if (colorVars[color2]) {
+      return colorVars[color2];
+    }
+    if (color2.startsWith("#")) {
+      return {
+        c1: color2,
+        c2: `${color2}80`
+      };
+    }
+    return colorVars.primary;
+  };
+  const colorValues = getColorValues(color);
+  return /* @__PURE__ */ import_react28.default.createElement("div", { className: cn("relative", sizeClass) }, /* @__PURE__ */ import_react28.default.createElement(
+    "div",
+    {
+      className: "spinner",
+      style: {
+        ["--spinner-color-1"]: colorValues.c1,
+        ["--spinner-color-2"]: colorValues.c2
+      }
+    }
+  ));
+};
+var Spinner_default = Spinner;
+
 // src/components/StatsCard.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var StatsCard = ({
   statTitle,
   statDesc,
   className,
   cardIcon
 }) => {
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(
     Card,
     {
       className: cn(
-        "border border-[#eee] hover:border-[#4285F4] rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-[#8EB6F8D9] hover:to-[#356AC3D9] dark:from-[#252525D9] dark:to-[#070707D9] dark:hover:from-[#1A3562D9] dark:hover:to-[#070707D9] backdrop-blur-sm px-[32px] py-[64px] group",
+        "border border-gray-200 hover:border-primary-500 rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-primary-300 hover:to-primary-600 dark:from-primary-800 dark:to-primary-700 dark:hover:from-primary-800 dark:hover:to-primary-900 backdrop-blur-sm px-[32px] py-[64px] group",
         className
       )
     },
-    /* @__PURE__ */ import_react16.default.createElement("span", { className: "group-hover:text-white text-dark dark:text-white" }, cardIcon),
-    /* @__PURE__ */ import_react16.default.createElement(CardTitle, { className: "group-hover:text-white text-[48px] font-bold text-brand-500 dark:text-white my-4" }, statTitle),
-    /* @__PURE__ */ import_react16.default.createElement(CardDescription, { className: "group-hover:text-white text-[24px] hover:text-white text-dark leading-[25px]" }, statDesc)
+    /* @__PURE__ */ import_react29.default.createElement("span", { className: "group-hover:text-white text-dark dark:text-white" }, cardIcon),
+    /* @__PURE__ */ import_react29.default.createElement(CardTitle, { className: "group-hover:text-white text-[48px] font-bold text-primary-500 dark:text-white my-4" }, statTitle),
+    /* @__PURE__ */ import_react29.default.createElement(CardDescription, { className: "group-hover:text-white text-[24px] hover:text-white text-dark leading-[25px]" }, statDesc)
   );
 };
 var StatsCard_default = StatsCard;
 
+// src/components/Tabs.tsx
+var import_react30 = __toESM(require("react"), 1);
+var TabsContainer = ({
+  children,
+  className,
+  position = "horizontal"
+}) => {
+  return /* @__PURE__ */ import_react30.default.createElement("div", { className: cn(position === "vertical" ? "flex" : "block", className) }, children);
+};
+var TabList = ({
+  onChange,
+  ariaLabel,
+  children,
+  box = false,
+  className,
+  position = "horizontal"
+}) => {
+  const [focusIndex, setFocusIndex] = import_react30.default.useState(0);
+  const tabRefs = import_react30.default.useRef([]);
+  const handleKeyDown = (e, index) => {
+    const tabCount = import_react30.default.Children.count(children);
+    switch (e.key) {
+      case "ArrowRight": {
+        if (position === "horizontal") {
+          e.preventDefault();
+          const nextIndex = (index + 1) % tabCount;
+          setFocusIndex(nextIndex);
+          tabRefs.current[nextIndex]?.focus();
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        if (position === "horizontal") {
+          e.preventDefault();
+          const prevIndex = (index - 1 + tabCount) % tabCount;
+          setFocusIndex(prevIndex);
+          tabRefs.current[prevIndex]?.focus();
+        }
+        break;
+      }
+      case "ArrowDown": {
+        if (position === "vertical") {
+          e.preventDefault();
+          const nextIndex = (index + 1) % tabCount;
+          setFocusIndex(nextIndex);
+          tabRefs.current[nextIndex]?.focus();
+        }
+        break;
+      }
+      case "ArrowUp": {
+        if (position === "vertical") {
+          e.preventDefault();
+          const prevIndex = (index - 1 + tabCount) % tabCount;
+          setFocusIndex(prevIndex);
+          tabRefs.current[prevIndex]?.focus();
+        }
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        setFocusIndex(0);
+        tabRefs.current[0]?.focus();
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const lastIndex = tabCount - 1;
+        setFocusIndex(lastIndex);
+        tabRefs.current[lastIndex]?.focus();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react30.default.createElement(
+    "div",
+    {
+      className: cn(
+        position === "horizontal" ? "flex items-center" : "flex flex-col items-stretch",
+        box ? "rounded-2xl bg-light dark:bg-gray-900 p-2" : position === "horizontal" ? "border-b border-gray-200 dark:border-gray-600" : "border-r border-gray-200 dark:border-gray-600",
+        className
+      ),
+      role: "tablist",
+      "aria-label": ariaLabel,
+      "aria-orientation": position
+    },
+    import_react30.default.Children.map(children, (child, index) => {
+      if (import_react30.default.isValidElement(child)) {
+        return import_react30.default.cloneElement(child, {
+          onChange,
+          box,
+          position,
+          onKeyDown: (e) => handleKeyDown(e, index),
+          tabIndex: index === focusIndex ? 0 : -1,
+          ref: (el) => {
+            tabRefs.current[index] = el;
+          }
+        });
+      }
+      return null;
+    })
+  );
+};
+var Tab = import_react30.default.forwardRef(
+  ({
+    label,
+    value,
+    onChange,
+    icon,
+    content,
+    box = false,
+    selectedTabValue,
+    className,
+    onKeyDown,
+    tabIndex,
+    position = "horizontal"
+  }, ref) => {
+    const isSelected = value === selectedTabValue;
+    return /* @__PURE__ */ import_react30.default.createElement(
+      "button",
+      {
+        ref,
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": `panel-${value}`,
+        id: `tab-${value}`,
+        tabIndex,
+        onKeyDown,
+        onClick: () => onChange(value),
+        className: cn(
+          "flex items-center gap-2 px-4 py-3 text-base font-medium cursor-pointer",
+          // Default variant
+          !box && [
+            isSelected && position === "horizontal" ? "text-primary-400 border-b-2 border-primary-400" : isSelected && position === "vertical" ? "text-primary-400 border-r-2 border-primary-400" : "border-transparent text-gray-700 dark:text-gray-500"
+          ],
+          // Hover styles
+          position === "horizontal" && !box ? "hover:bg-gray-100 dark:hover:bg-gray-900 hover:rounded-t transition-all duration-200" : "hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-200",
+          // Vertical border for unselected
+          position === "vertical" && !box && !isSelected ? "border-r-2" : "",
+          // Box variant
+          box && [
+            "transition-all ease-linear duration-200 delay-75 rounded-radius-lg border border-transparent hover:bg-primary-50 dark:hover:bg-primary-900 hover:border-primary-200 dark:hover:border-primary-800 dark:text-light",
+            position === "horizontal" ? "flex items-center gap-2" : "",
+            isSelected ? "text-light bg-primary-600 dark:bg-primary-800 shadow-[inset_3px_4px_5.3px_0_#0d3374a3] shadow-primary-700 border-primary-200 dark:border-primary-600 hover:bg-primary-600 hover:shadow-[inset_-4px_-3px_4px_0_#94bcff4a]" : ""
+          ],
+          className
+        )
+      },
+      icon && /* @__PURE__ */ import_react30.default.createElement("span", { "aria-hidden": "true" }, icon),
+      label,
+      content && /* @__PURE__ */ import_react30.default.createElement("span", { "aria-hidden": "true" }, content)
+    );
+  }
+);
+var TabPanel = ({
+  value,
+  currentValue,
+  children,
+  className
+}) => {
+  return value === currentValue ? /* @__PURE__ */ import_react30.default.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      id: `panel-${value}`,
+      "aria-labelledby": `tab-${value}`,
+      tabIndex: 0,
+      className: cn("dark:text-light", className)
+    },
+    children
+  ) : null;
+};
+Tab.displayName = "Tab";
+var Tabs_default = TabsContainer;
+
 // src/components/Textarea.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_react17 = __toESM(require("react"), 1);
-var textareaVariants = (0, import_class_variance_authority8.cva)(
-  "flex items-center gap-2 font-karla text-sm outline-none rounded-radius-md border py-2 px-4 disabled:opacity-60 disabled:select-none disabled:pointer-events-none w-full",
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_react31 = __toESM(require("react"), 1);
+var textareaVariants = (0, import_class_variance_authority10.cva)(
+  "flex items-center gap-2 font-karla bg-transparent text-sm outline-none rounded-radius-md border py-2 px-4 disabled:opacity-60 disabled:select-none disabled:pointer-events-none w-full",
   {
     variants: {
       variant: {
-        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:disabled:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-brand-100 focus-within:hover:bg-brand-50 disabled:bg-gray-25 disabled:border-gray-400",
-        glass: "backdrop-blur-[3.5px] bg-light/10 dark:bg-dark/20 dark:border-gray-800 border-gray-200/50 text-light"
+        default: "dark:text-gray-500 dark:bg-gray-900 dark:border-gray-800 dark:hover:text-light dark:hover:bg-gray-800 dark:hover:border-gray-700 dark:focus-within:bg-gray-100 dark:focus-within:border-gray-800 dark:focus-within:hover:bg-gray-700 dark:focus-within:text-dark dark:disabled:bg-gray-700 bg-gray-100 border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-500 hover:bg-gray-300 focus-within:bg-gray-50 focus-within:border-gray-400 focus-within:text-dark focus-within:hover:text-dark focus-within:hover:border-primary-100 focus-within:hover:bg-primary-50 disabled:bg-gray-25 disabled:border-gray-400",
+        glass: "backdrop-blur-[3.5px] bg-white/10 dark:bg-dark/20 dark:border-gray-800 border-gray-200/50 text-light"
       }
     },
     defaultVariants: {
@@ -819,9 +2196,9 @@ var textareaVariants = (0, import_class_variance_authority8.cva)(
     }
   }
 );
-var Textarea = (0, import_react17.forwardRef)(
+var Textarea = (0, import_react31.forwardRef)(
   ({ className, rows, cols, variant, disabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ import_react17.default.createElement(
+    return /* @__PURE__ */ import_react31.default.createElement(
       "textarea",
       {
         ...props,
@@ -839,10 +2216,10 @@ Textarea.displayName = "Textarea";
 var Textarea_default = Textarea;
 
 // src/components/Toggle.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_react18 = __toESM(require("react"), 1);
-var toggleVariants = (0, import_class_variance_authority9.cva)(
-  "rounded-radius-xl bg-gray-300 transition-colors peer-checked:bg-brand-500 peer-active:ring-2 peer-active:ring-brand-300",
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_react32 = __toESM(require("react"), 1);
+var toggleVariants = (0, import_class_variance_authority11.cva)(
+  "rounded-radius-xl bg-gray-300 transition-colors peer-checked:bg-primary-500 peer-active:ring-2 peer-active:ring-primary-300",
   {
     variants: {
       size: {
@@ -855,9 +2232,9 @@ var toggleVariants = (0, import_class_variance_authority9.cva)(
     }
   }
 );
-var Toggle = (0, import_react18.forwardRef)(
+var Toggle = (0, import_react32.forwardRef)(
   ({ icon, children, disabled, size = "lg", ...props }, ref) => {
-    return /* @__PURE__ */ import_react18.default.createElement(
+    return /* @__PURE__ */ import_react32.default.createElement(
       "label",
       {
         className: cn(
@@ -865,7 +2242,7 @@ var Toggle = (0, import_react18.forwardRef)(
           disabled && "opacity-50 pointer-events-none"
         )
       },
-      /* @__PURE__ */ import_react18.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react18.default.createElement(
+      /* @__PURE__ */ import_react32.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react32.default.createElement(
         "input",
         {
           type: "checkbox",
@@ -874,15 +2251,15 @@ var Toggle = (0, import_react18.forwardRef)(
           ...props,
           className: "sr-only peer"
         }
-      ), /* @__PURE__ */ import_react18.default.createElement("div", { className: cn(toggleVariants({ size })) }), /* @__PURE__ */ import_react18.default.createElement(
+      ), /* @__PURE__ */ import_react32.default.createElement("div", { className: cn(toggleVariants({ size })) }), /* @__PURE__ */ import_react32.default.createElement(
         "div",
         {
           className: cn(
             "absolute  flex items-center justify-center bg-white transition-transform",
-            size === "sm" ? "peer-checked:translate-x-2 top-[1px] left-[2px] w-5 h-4 rounded-radius-md" : "peer-checked:translate-x-3 top-[2.5px] left-1 h-[22px] w-[34px] rounded-radius-lg"
+            size === "sm" ? "peer-checked:translate-x-2 top-[1px] left-[2px] w-5 h-4 rounded-radius-md" : "peer-checked:translate-x-[11px] top-[2.5px] left-1 h-[22px] w-[34px] rounded-radius-lg"
           )
         },
-        /* @__PURE__ */ import_react18.default.createElement("span", { className: "flex items-center justify-center" }, icon),
+        /* @__PURE__ */ import_react32.default.createElement("span", { className: "flex items-center justify-center" }, icon),
         children
       ))
     );
@@ -897,6 +2274,7 @@ var Toggle_default = Toggle;
   AccordionItem,
   AccordionTrigger,
   Button,
+  Callout,
   Caption,
   Card,
   CardBg,
@@ -908,7 +2286,9 @@ var Toggle_default = Toggle;
   CardTitle,
   Checkbox,
   Chip,
+  Drawer,
   Dropdown,
+  FillButton,
   Footer,
   FooterContent,
   FooterHeader,
@@ -918,11 +2298,22 @@ var Toggle_default = Toggle;
   Input,
   Label,
   ListItem,
-  MenuItem,
-  MenuSubItem,
+  ListPagination,
+  Loading,
+  Modal,
+  NestedDropdown,
+  OTPInput,
   Paragraph,
+  Popover,
+  Radio,
+  Skeleton,
   Slider,
+  Spinner,
   StatsCard,
+  Tab,
+  TabList,
+  TabPanel,
+  TabsContainer,
   Textarea,
   Toggle,
   Typography