gwan-design-system 0.1.5 → 0.1.7

package/dist/index.js

@@ -80,7 +80,8 @@ var Tooltip = ({
   label,
   isVisible = false,
   toolTipWidth = "w-60",
-  toolTipClass = ""
+  toolTipClass = "",
+  className = ""
 }) => {
   const getTooltipPosition = (position2) => {
     switch (position2) {
@@ -113,16 +114,16 @@ var Tooltip = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: `bg-neutrola-800 text-white text-sm py-1 px-2 rounded-lg absolute z-50 
+      className: `bg-neutral-800 text-white text-sm py-1 px-2 rounded-lg absolute z-50 
         ${isVisible ? "block" : "hidden"} ${getTooltipPosition(
         position
-      )} ${toolTipWidth} ${toolTipClass}`,
+      )} ${toolTipWidth} ${toolTipClass} ${className}`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: `absolute w-2 h-2 bg-neutrola-800 rotate-45 ${tipPosition(
+            className: `absolute w-2 h-2 bg-neutral-800 rotate-45 ${tipPosition(
               position
             )}`
           }
@@ -148,7 +149,13 @@ var generatePastelColor = () => {
   const lightness = 75 + Math.random() * 10;
   return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 };
-var Avatar = ({ name, email, image, variant }) => {
+var Avatar = ({
+  name,
+  email,
+  image,
+  variant,
+  className = ""
+}) => {
   const [bgColor, setBgColor] = (0, import_react.useState)("transparent");
   const [isTooltipInitialVisible, setIsTooltipInitialVisible] = (0, import_react.useState)(false);
   const [isTooltipImageVisible, setIsTooltipImageVisible] = (0, import_react.useState)(false);
@@ -166,7 +173,7 @@ var Avatar = ({ name, email, image, variant }) => {
         position: "right" /* RIGHT */,
         label: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
           name2,
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-neutrola-300 text-xs", children: email2 })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-neutral-300 text-xs", children: email2 })
         ] }),
         isVisible,
         toolTipWidth: "w-36"
@@ -185,7 +192,7 @@ var Avatar = ({ name, email, image, variant }) => {
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_image.default,
               {
-                className: "rounded-full border border-neutrola-400",
+                className: "rounded-full border border-neutral-400",
                 src: image,
                 alt: "profile",
                 width: 60,
@@ -211,11 +218,11 @@ var Avatar = ({ name, email, image, variant }) => {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-row items-center gap-2 ${className}`, children: [
     renderAvatarImage(),
     (variant === "image_with_full" /* IMAGE_WITH_FULL */ || variant === "initials_with_full" /* INITIALS_WITH_FULL */) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-base font-semibold", children: name }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-neutrola-700", children: email })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-neutral-700", children: email })
     ] })
   ] });
 };
@@ -230,7 +237,8 @@ var Banner = ({
   backgroundImage = "",
   backgroundColor = "",
   titleClassName = "",
-  subTitleClassName = ""
+  subTitleClassName = "",
+  className = ""
 }) => {
   const handleContentPlacement = () => {
     if (contentPlacement === "left") {
@@ -253,7 +261,7 @@ var Banner = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
-      className: `w-full h-[484px] grid grid-cols-2 items-center px-16 ${backgroundColor} bg-no-repeat bg-cover bg-center`,
+      className: `w-full h-[484px] grid grid-cols-2 items-center px-16 ${backgroundColor} bg-no-repeat bg-cover bg-center ${className}`,
       style: backgroundImage !== "" ? { backgroundImage: `url(${backgroundImage})` } : {},
       children: handleContentPlacement()
     }
@@ -275,22 +283,23 @@ var Button = ({
   onClick,
   icon,
   type = "button",
-  disabled = false
+  disabled = false,
+  className = ""
 }) => {
   const getButtonVariant = (variant2) => {
     switch (variant2) {
       case "primary" /* PRIMARY */:
-        return disabled ? "bg-neutrola-300 text-neutrola-800 cursor-not-allowed" : "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700";
+        return disabled ? "bg-neutral-300 text-neutral-800 cursor-not-allowed" : "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700";
       case "secondary" /* SECONDARY */:
-        return disabled ? "bg-neutrola-100 text-neutrola-800 cursor-not-allowed" : "bg-neutrola-50 text-primary-700 hover:bg-primary-50 active:bg-primary-100";
+        return disabled ? "bg-neutral-100 text-neutral-800 cursor-not-allowed" : "bg-neutral-50 text-primary-700 hover:bg-primary-50 active:bg-primary-100";
       case "tertiary" /* TERTIARY */:
-        return disabled ? "text-neutrola-300 border border-neutrola-300 cursor-not-allowed" : "bg-transparent text-primary-500 border border-primary-500 hover:bg-neutrola-50 active:bg-neutrola-100";
+        return disabled ? "text-neutral-300 border border-neutral-300 cursor-not-allowed" : "bg-transparent text-primary-500 border border-primary-500 hover:bg-neutral-50 active:bg-neutral-100";
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
-      className: `${getButtonVariant(variant)} px-4 ${label ? "py-2" : "py-4"} rounded-lg`,
+      className: `${getButtonVariant(variant)} px-4 ${label ? "py-2" : "py-4"} rounded-lg ${className}`,
       type,
       onClick,
       disabled,
@@ -306,7 +315,11 @@ var button_default = Button;
 // src/components/carousel/index.tsx
 var import_react2 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Carousel = ({ slides, interval = 3e3 }) => {
+var Carousel = ({
+  slides,
+  interval = 3e3,
+  className = ""
+}) => {
   const [currentIndex, setCurrentIndex] = (0, import_react2.useState)(0);
   (0, import_react2.useEffect)(() => {
     const timer = setInterval(() => {
@@ -314,7 +327,7 @@ var Carousel = ({ slides, interval = 3e3 }) => {
     }, interval);
     return () => clearInterval(timer);
   }, [slides.length, interval]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "relative w-full h-[484px] overflow-hidden", children: slides.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `relative w-full h-[484px] overflow-hidden ${className}`, children: slides.map(
     ({
       title,
       titleClassName,
@@ -643,7 +656,8 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
 var Checkbox = ({
   label,
   checked = false,
-  onChange
+  onChange,
+  className = ""
 }) => {
   const [isChecked, setIsChecked] = (0, import_react3.useState)(checked);
   const handleToggle = () => {
@@ -652,7 +666,7 @@ var Checkbox = ({
       onChange(!isChecked);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: `flex items-center gap-2 cursor-pointer ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "input",
       {
@@ -666,7 +680,7 @@ var Checkbox = ({
       "div",
       {
         className: `w-5 h-5 flex items-center justify-center border-2 rounded-md transition-all 
-          ${isChecked ? "bg-primary-500 border-primary-600" : "bg-white border-neutrola-500"}
+          ${isChecked ? "bg-primary-500 border-primary-600" : "bg-white border-neutral-500"}
         `,
         children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "size-4 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Check, {}) })
       }
@@ -678,18 +692,24 @@ var checkbox_default = Checkbox;
 
 // src/components/chip/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Chip = ({ label, onClear }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row gap-2 items-center bg-neutrola-700 w-fit px-4 py-2 rounded-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "div",
-      {
-        className: "size-3 cursor-pointer text-neutral-200 hover:text-white",
-        onClick: onClear,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Cross, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-neutral-200 text-base font-semibold", children: label })
-  ] });
+var Chip = ({ label, onClear, className = "" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      className: `flex flex-row gap-2 items-center bg-neutral-700 w-fit px-4 py-2 rounded-full ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "div",
+          {
+            className: "size-3 cursor-pointer text-neutral-200 hover:text-white",
+            onClick: onClear,
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Cross, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-neutral-200 text-base font-semibold", children: label })
+      ]
+    }
+  );
 };
 var chip_default = Chip;
 
@@ -699,13 +719,14 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 var Ellipsis = ({
   label,
   tooltipPosition = "right" /* RIGHT */,
-  tooltipWidth = "w-40"
+  tooltipWidth = "w-40",
+  className = ""
 }) => {
   const [isTooltipVisible, setIsTooltipVisible] = (0, import_react4.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
-      className: "relative",
+      className: `relative ${className}`,
       onMouseEnter: () => setIsTooltipVisible(true),
       onMouseLeave: () => setIsTooltipVisible(false),
       children: [
@@ -733,7 +754,8 @@ var FileUploader = ({
   subTitle1 = "",
   subTitle2 = "",
   handleAttachment,
-  accept = ".jpg,.jpeg,.png"
+  accept = ".jpg,.jpeg,.png",
+  className = ""
 }) => {
   const fileInputRef = (0, import_react5.useRef)(null);
   const handleFileUpload = (event) => {
@@ -742,57 +764,63 @@ var FileUploader = ({
       handleAttachment(files[0]);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-4 items-start border border-dashed border-neutral-200 p-4 rounded-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "div",
-      {
-        className: "bg-primary-500 hover:bg-primary-600 text-white px-6 py-8 rounded-lg cursor-pointer",
-        onClick: () => {
-          var _a;
-          return (_a = fileInputRef.current) == null ? void 0 : _a.click();
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "size-10", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Upload, {}) })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "input",
-      {
-        type: "file",
-        ref: fileInputRef,
-        accept,
-        className: "hidden",
-        onChange: handleFileUpload
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-lg", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-neutrola-400", children: subTitle1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-neutrola-400", children: subTitle2 })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      className: `flex flex-row gap-4 items-start border border-dashed border-neutral-200 p-4 rounded-lg ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "div",
+          {
+            className: "bg-primary-500 hover:bg-primary-600 text-white px-6 py-8 rounded-lg cursor-pointer",
+            onClick: () => {
+              var _a;
+              return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "size-10", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Upload, {}) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "input",
+          {
+            type: "file",
+            ref: fileInputRef,
+            accept,
+            className: "hidden",
+            onChange: handleFileUpload
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-lg", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-neutral-400", children: subTitle1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-neutral-400", children: subTitle2 })
+        ] })
+      ]
+    }
+  );
 };
 var fileUploader_default = FileUploader;
 
 // src/components/filterDropdown/index.tsx
 var import_react6 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var FilterDropdown = ({ children }) => {
+var FilterDropdown = ({ children, className = "" }) => {
   const [isChildrenVisible, setIsChildrenVisible] = (0, import_react6.useState)(false);
   const closeDropdown = () => setIsChildrenVisible(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `relative ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
-        className: "flex flex-row gap-4 items-center w-fit border border-neutrola-300 hover:border-neutrola-400 group p-2 rounded-lg cursor-pointer",
+        className: "flex flex-row gap-4 items-center w-fit border border-neutral-300 hover:border-neutral-400 group p-2 rounded-lg cursor-pointer",
         onClick: () => setIsChildrenVisible(!isChildrenVisible),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "size-5 text-neutrola-300 group-hover:text-neutrola-400", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Filter, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-neutrola-300 text-base group-hover:text-neutrola-400", children: "Filter" }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "size-5 text-neutrola-300 group-hover:text-neutrola-400", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChevDown, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "size-5 text-neutral-300 group-hover:text-neutral-400", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Filter, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-neutral-300 text-base group-hover:text-neutral-400", children: "Filter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "size-5 text-neutral-300 group-hover:text-neutral-400", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChevDown, {}) })
         ]
       }
     ),
-    isChildrenVisible && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border border-neutrola-300 rounded-lg shadow-lg overflow-y-auto absolute top-full bg-white z-10", children: children(closeDropdown) })
+    isChildrenVisible && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border border-neutral-300 rounded-lg shadow-lg overflow-y-auto absolute top-full bg-white z-10", children: children(closeDropdown) })
   ] });
 };
 var filterDropdown_default = FilterDropdown;
@@ -806,10 +834,11 @@ var Input = ({
   disabled,
   placeholder,
   inputClassName = "",
-  required = false
+  required = false,
+  className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { htmlFor: label, className: "text-sm text-neutrola-600 mb-2", children: `${label}${required ? " *" : ""}` }),
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `flex flex-col gap-1 relative ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { htmlFor: label, className: "text-sm text-neutral-600 mb-2", children: `${label}${required ? " *" : ""}` }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "input",
       {
@@ -818,7 +847,7 @@ var Input = ({
         value,
         onChange: (e) => onChange(e.target.value),
         disabled,
-        className: `border border-neutrola-300 outline-none p-4 rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-text"} text-sm w-full ${inputClassName}`,
+        className: `border border-neutral-300 outline-none p-4 rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-text"} text-sm w-full ${inputClassName}`,
         required
       }
     )
@@ -840,29 +869,36 @@ var Modal = ({
   title,
   children,
   onClear,
-  size = "w-[800px] h-96" /* MEDIUM */
+  size = "w-[800px] h-96" /* MEDIUM */,
+  className = ""
 }) => {
   const modalRef = (0, import_react7.useRef)(null);
   (0, import_react7.useEffect)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.focus();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.3)]", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
-      ref: modalRef,
-      tabIndex: -1,
-      className: `bg-white p-4 ${size !== "w-full h-full" /* FULL */ && "rounded-lg"} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col gap-4 ${size}`,
-      onBlur: () => onClear(),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-row gap-4 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 text-3xl", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "size-4 cursor-pointer", onClick: () => onClear(), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Cross, {}) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 flex justify-center items-center", children })
-      ]
+      className: `fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.3)] ${className}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "div",
+        {
+          ref: modalRef,
+          tabIndex: -1,
+          className: `bg-white p-4 ${size !== "w-full h-full" /* FULL */ && "rounded-lg"} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col gap-4 ${size}`,
+          onBlur: () => onClear(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-row gap-4 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 text-3xl", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "size-4 cursor-pointer", onClick: () => onClear(), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Cross, {}) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 flex justify-center items-center", children })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 var modal_default = Modal;
 
@@ -882,7 +918,8 @@ var NavBar = ({
   menuWidthClass = "w-[20rem]",
   menuHeightClass = "h-[100vh]",
   isCollapsed = false,
-  menuBackgroundColor = "bg-primary-100"
+  menuBackgroundColor = "bg-primary-100",
+  className = ""
 }) => {
   const router = (0, import_navigation.useRouter)();
   const [isActiveMenuItem, setIsActiveMenuItem] = (0, import_react8.useState)("");
@@ -914,7 +951,7 @@ var NavBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
-      className: `transition-[width] duration-300 ease-in-out ${isMenuCollapsed ? collapsedClass : menuWidthClass} ${menuHeightClass}`,
+      className: `transition-[width] duration-300 ease-in-out ${isMenuCollapsed ? collapsedClass : menuWidthClass} ${menuHeightClass} ${className}`,
       children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "div",
         {
@@ -1013,7 +1050,8 @@ var SelectDropdown = ({
   disabled = false,
   value,
   onChange,
-  inputClassName = ""
+  inputClassName = "",
+  className = ""
 }) => {
   const [dropdownValue, setDropdownValue] = (0, import_react9.useState)("");
   const [isOptionsVisible, setIsOptionsVisible] = (0, import_react9.useState)(false);
@@ -1031,16 +1069,16 @@ var SelectDropdown = ({
     onChange(val);
     setIsOptionsVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1 relative", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: label, className: "text-sm text-neutrola-600 mb-2", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `flex flex-col gap-1 relative ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: label, className: "text-sm text-neutral-600 mb-2", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "size-5 absolute inset-y-4 right-4 flex items-center text-neutrola-600 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevDown, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "size-5 absolute inset-y-4 right-4 flex items-center text-neutral-600 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevDown, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "input",
         {
           id: label,
           type: "text",
-          className: `border border-neutrola-300 outline-none p-4 rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-pointer"} text-sm w-full ${inputClassName}`,
+          className: `border border-neutral-300 outline-none p-4 rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-pointer"} text-sm w-full ${inputClassName}`,
           placeholder,
           onClick: () => setIsOptionsVisible(!isOptionsVisible),
           value: dropdownValue,
@@ -1050,10 +1088,10 @@ var SelectDropdown = ({
         }
       )
     ] }),
-    isOptionsVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border border-neutrola-300 rounded-lg shadow-lg max-h-96 overflow-y-auto absolute min-w-full top-full bg-white z-10", children: options.map(({ label: label2, value: val }, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    isOptionsVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border border-neutral-300 rounded-lg shadow-lg max-h-96 overflow-y-auto absolute min-w-full top-full bg-white z-10", children: options.map(({ label: label2, value: val }, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
-        className: "p-4 cursor-pointer hover:bg-neutrola-50 text-sm",
+        className: "p-4 cursor-pointer hover:bg-neutral-50 text-sm",
         onMouseDown: () => handleMouseDown(label2),
         children: label2
       },
@@ -1070,7 +1108,8 @@ var Pagination = ({
   page,
   size,
   options,
-  onChange
+  onChange,
+  className = ""
 }) => {
   const [optionDropdown, setOptionDropdown] = (0, import_react10.useState)(size.toString());
   const onLeft = () => {
@@ -1087,43 +1126,49 @@ var Pagination = ({
     setOptionDropdown(size2);
     onChange({ total, page: 1, size: parseInt(size2) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "bg-neutrola-50 flex flex-row gap-4 items-center px-4 py-2 rounded-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1", children: [
-      page,
-      " of ",
-      Math.ceil(total / size),
-      " pages"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      selectDropdown_default,
-      {
-        options,
-        value: optionDropdown,
-        onChange: (option) => handlePageSize(option)
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: "items per page" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row gap-4 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        button_default,
-        {
-          onClick: onLeft,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevLeft, {}),
-          variant: "tertiary" /* TERTIARY */,
-          disabled: page === 1
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        button_default,
-        {
-          onClick: onRight,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevRight, {}),
-          variant: "tertiary" /* TERTIARY */,
-          disabled: page === Math.ceil(total / size)
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "div",
+    {
+      className: `bg-neutral-50 flex flex-row gap-4 items-center px-4 py-2 rounded-lg ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1", children: [
+          page,
+          " of ",
+          Math.ceil(total / size),
+          " pages"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          selectDropdown_default,
+          {
+            options,
+            value: optionDropdown,
+            onChange: (option) => handlePageSize(option)
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: "items per page" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row gap-4 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            button_default,
+            {
+              onClick: onLeft,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevLeft, {}),
+              variant: "tertiary" /* TERTIARY */,
+              disabled: page === 1
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            button_default,
+            {
+              onClick: onRight,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevRight, {}),
+              variant: "tertiary" /* TERTIARY */,
+              disabled: page === Math.ceil(total / size)
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 var pagination_default = Pagination;
 
@@ -1133,10 +1178,11 @@ var RadioButton = ({
   label,
   value,
   selectedValue,
-  onChange
+  onChange,
+  className = ""
 }) => {
   const isChecked = selectedValue === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: `flex items-center gap-2 cursor-pointer ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
@@ -1175,27 +1221,28 @@ var SNACK_BAR_TYPE = /* @__PURE__ */ ((SNACK_BAR_TYPE2) => {
 var Snackbar = ({
   type = "default" /* DEFAULT */,
   message,
-  icon
+  icon,
+  className = ""
 }) => {
   const getClassName = () => {
     switch (type) {
       case "success" /* SUCCESS */:
-        return "bg-greenola-50 text-greenola-800 border-greenola-500";
+        return "bg-green-50 text-green-800 border-green-500";
       case "danger" /* DANGER */:
-        return "bg-redola-50 text-redola-600 border-redola-500";
+        return "bg-red-50 text-red-600 border-red-500";
       case "warning" /* WARNING */:
-        return "bg-yellowla-50 text-yellowla-800 border-yellowla-600";
+        return "bg-yellow-50 text-yellow-800 border-yellow-600";
       case "info" /* INFO */:
-        return "bg-blueola-50 text-blueola-800 border-blueola-600";
+        return "bg-blue-50 text-blue-800 border-blue-600";
       case "default" /* DEFAULT */:
       default:
-        return "bg-neutrola-50 text-neutrola-800 border-neutrola-500";
+        return "bg-neutral-50 text-neutral-800 border-neutral-500";
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
-      className: `${getClassName()} p-4 rounded-lg flex flex-row gap-4 items-center font-normal border`,
+      className: `${getClassName()} p-4 rounded-lg flex flex-row gap-4 items-center font-normal border ${className}`,
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-5", children: icon }),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: message })
@@ -1221,7 +1268,8 @@ var State = ({
   title,
   subTitle,
   imageWidth = 526,
-  imageHeight = 526
+  imageHeight = 526,
+  className = ""
 }) => {
   const typeImage = () => {
     switch (type) {
@@ -1237,53 +1285,65 @@ var State = ({
         return "/images/empty.png";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "w-full h-full flex flex-col gap-8 items-center justify-center", children: [
-    stateImage ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      import_image3.default,
-      {
-        src: stateImage,
-        alt: "state image",
-        width: imageWidth,
-        height: imageHeight
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      import_image3.default,
-      {
-        src: typeImage(),
-        alt: "state image",
-        width: imageWidth,
-        height: imageHeight
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-3xl text-center font-semibold", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "w-[300px] text-center", children: subTitle })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    "div",
+    {
+      className: `w-full h-full flex flex-col gap-8 items-center justify-center ${className}`,
+      children: [
+        stateImage ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_image3.default,
+          {
+            src: stateImage,
+            alt: "state image",
+            width: imageWidth,
+            height: imageHeight
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_image3.default,
+          {
+            src: typeImage(),
+            alt: "state image",
+            width: imageWidth,
+            height: imageHeight
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-3xl text-center font-semibold", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "w-[300px] text-center", children: subTitle })
+        ] })
+      ]
+    }
+  );
 };
 var state_default = State;
 
 // src/components/table/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Table = ({ columns, data }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "overflow-hidden rounded-lg border border-neutrola-300", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "w-full border-collapse", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { className: "bg-neutrola-300 border border-neutrola-300", children: columns.map(({ header, headerClassName }, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      "th",
-      {
-        className: `text-left px-4 py-4 ${headerClassName}`,
-        children: header
-      },
-      `column_${index}`
-    )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      "tr",
-      {
-        className: "bg-white hover:bg-neutrola-100",
-        children: columns.map(({ render }, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "text-left px-4 py-4", children: render(row) }, `cell_${cellIndex}`))
-      },
-      `row_${rowIndex}`
-    )) })
-  ] }) });
+var Table = ({ columns, data, className = "" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      className: `overflow-hidden rounded-lg border border-neutral-300 ${className}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "w-full border-collapse", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { className: "bg-neutral-300 border border-neutral-300", children: columns.map(({ header, headerClassName }, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "th",
+          {
+            className: `text-left px-4 py-4 ${headerClassName}`,
+            children: header
+          },
+          `column_${index}`
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "tr",
+          {
+            className: "bg-white hover:bg-neutral-100",
+            children: columns.map(({ render }, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "text-left px-4 py-4", children: render(row) }, `cell_${cellIndex}`))
+          },
+          `row_${rowIndex}`
+        )) })
+      ] })
+    }
+  );
 };
 var table_default = Table;
 
@@ -1297,29 +1357,37 @@ var TAG_TYPE = /* @__PURE__ */ ((TAG_TYPE2) => {
   TAG_TYPE2["INFO"] = "info";
   return TAG_TYPE2;
 })(TAG_TYPE || {});
-var Tag = ({ type, label }) => {
+var Tag = ({ type, label, className = "" }) => {
   const getTagStyle = (type2) => {
     switch (type2) {
       case "success" /* SUCCESS */:
-        return "bg-greenola-50 text-greenola-600";
+        return "bg-green-50 text-green-600";
       case "danger" /* DANGER */:
-        return "bg-redola-50 text-redola-600";
+        return "bg-red-50 text-red-600";
       case "warning" /* WARNING */:
-        return "bg-yellowla-50 text-yellowla-600";
+        return "bg-yellow-50 text-yellow-600";
       case "info" /* INFO */:
-        return "bg-blueola-50 text-blueola-600";
+        return "bg-blue-50 text-blue-600";
       default:
-        return "bg-neutrola-50 text-neutrola-600";
+        return "bg-neutral-50 text-neutral-600";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `w-fit px-4 py-2 rounded-lg text-sm ${getTagStyle(type)}`, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      className: `w-fit px-4 py-2 rounded-lg text-sm ${getTagStyle(
+        type
+      )} ${className}`,
+      children: label
+    }
+  );
 };
 var tag_default = Tag;
 
 // src/components/timeLine/index.tsx
 var import_react11 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var TimeLine = ({ logs }) => {
+var TimeLine = ({ logs, className = "" }) => {
   const [steps, setSteps] = (0, import_react11.useState)([]);
   (0, import_react11.useEffect)(() => {
     if (logs[0].title !== "Order cancelled" /* ORDER_CANCELLED */ && logs[0].title !== "Delivered" /* DELIVERED */) {
@@ -1340,17 +1408,17 @@ var TimeLine = ({ logs }) => {
       case "Packaging" /* PACKAGING */:
       case "Dispatched to courier" /* DISPATCHED_TO_COURIER */:
       case "Delivered" /* DELIVERED */:
-        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-5 bg-greenola-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, {}) });
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-5 bg-green-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, {}) });
       case "Order cancelled" /* ORDER_CANCELLED */:
-        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-5 bg-redola-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Cross, {}) });
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-5 bg-red-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Cross, {}) });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-5 bg-neutrola-600 text-neutrola-200 rounded-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Circle, {}) });
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-5 bg-neutral-600 text-neutral-200 rounded-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Circle, {}) });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: steps.map(({ title, date, description }, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-row gap-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className, children: steps.map(({ title, date, description }, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-row gap-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col items-center", children: [
       getIcon(title),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-0.5 h-full bg-neutrola-500" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-0.5 h-full bg-neutral-500" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col flex-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -1360,8 +1428,8 @@ var TimeLine = ({ logs }) => {
           children: title
         }
       ),
-      title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-xs text-neutrola-700", children: date }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "p-4 text-xs bg-neutrola-50 text-neutral-800 rounded-lg my-2", children: description })
+      title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-xs text-neutral-700", children: date }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "p-4 text-xs bg-neutral-50 text-neutral-800 rounded-lg my-2", children: description })
     ] })
   ] }, `log_${index}`)) });
 };