nexaas-ui-components 1.0.18 → 1.0.19

package/dist/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx7 = require('clsx');
+var clsx9 = require('clsx');
 var datetime2 = require('@blueprintjs/datetime2');
-var React2 = require('react');
 var reactHookForm = require('react-hook-form');
 var zustand = require('zustand');
 var dateFns = require('date-fns');
@@ -39,15 +39,15 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var clsx7__default = /*#__PURE__*/_interopDefault(clsx7);
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var clsx9__default = /*#__PURE__*/_interopDefault(clsx9);
 var IntlCurrencyInputRaw__default = /*#__PURE__*/_interopDefault(IntlCurrencyInputRaw);
 var lodashNamespace__namespace = /*#__PURE__*/_interopNamespace(lodashNamespace);
 var InputMask__default = /*#__PURE__*/_interopDefault(InputMask);
 var ReactModalNamespace__namespace = /*#__PURE__*/_interopNamespace(ReactModalNamespace);
 var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
 
-// src/assets/spinner.tsx
+// src/components/Button.tsx
 var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -116,9 +116,6 @@ var variants = {
   blue: {
     text: "shadow-button bg-blue-500 text-white text-bold"
   },
-  link: {
-    text: "text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-500 disabled:no-underline shadow-none font-normal disabled:opacity-50"
-  },
   iconSecondary: {
     text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
   },
@@ -151,6 +148,8 @@ var paddingConfig = {
 var Button = ({
   variant = "primary",
   size = "lg",
+  hotkey,
+  hotkeyPosition = "bottom",
   ...props
 }) => {
   const applyGap = props.icon && props.children;
@@ -158,14 +157,47 @@ var Button = ({
   const appliedSize = sizes[size];
   const appliedPadding = props.icon ? paddingConfig[size].icon : paddingConfig[size].normal;
   const gapText = applyGap ? "gap-[6px]" : "gap-0";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+  React4.useEffect(() => {
+    if (!hotkey || !props.onClick) return;
+    const handleKeyDown = (event) => {
+      var _a;
+      if (props.disabled || props.loading) return;
+      const keys = hotkey.toLowerCase().split("+").map((k) => k.trim());
+      const primaryKey = keys.pop();
+      if (!primaryKey) return;
+      const requiredCtrl = keys.includes("ctrl");
+      const requiredAlt = keys.includes("alt");
+      const requiredShift = keys.includes("shift");
+      const requiredMeta = keys.includes("meta") || keys.includes("cmd");
+      const match = event.key.toLowerCase() === primaryKey && event.ctrlKey === requiredCtrl && event.altKey === requiredAlt && event.shiftKey === requiredShift && event.metaKey === requiredMeta;
+      if (match) {
+        event.preventDefault();
+        (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hotkey, props.onClick, props.disabled, props.loading]);
+  const hotkeyLabel = hotkey && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-sm font-normal", children: hotkey.toUpperCase() });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      type: props.type,
-      id: "button-component",
-      ...props,
-      disabled: props.disabled || props.loading,
-      className: `
+      className: clsx9__default.default("inline-flex gap-[8px]", {
+        "flex-col items-center": hotkeyPosition === "top" || hotkeyPosition === "bottom",
+        "flex-row items-center": hotkeyPosition === "left" || hotkeyPosition === "right"
+      }),
+      children: [
+        hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--label)" }, className: "text-p-sm font-normal -mt-[5px]", children: hotkeyLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: props.type,
+            id: "button-component",
+            ...props,
+            disabled: props.disabled || props.loading,
+            className: `
           ${props.className}
           ${appliedVariant} 
           ${appliedSize.text} 
@@ -173,20 +205,193 @@ var Button = ({
           ${gapText} 
           whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center
         `,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        props.icon && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `flex items-center justify-center  ${appliedSize.icon}`,
-            children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin" })
+            children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              props.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `flex items-center justify-center  ${appliedSize.icon}`,
+                  children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin" })
+                }
+              ),
+              props.children,
+              props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[18px]" })
+            ] })
           }
         ),
-        props.children,
-        props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[18px]" })
-      ] })
+        hotkey && (hotkeyPosition === "bottom" || hotkeyPosition === "right") && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: { color: "var(--label)" },
+            className: "text-p-sm font-normal -mt-[5px]",
+            children: hotkeyLabel
+          }
+        )
+      ]
     }
   );
 };
+var sizes2 = {
+  xxs: {
+    text: "min-h-[14px] max-h-[40px]"
+  },
+  xs: {
+    text: "h-[36px]"
+  },
+  sm: {
+    text: "h-[40px]"
+  },
+  md: {
+    text: "h-[46px]"
+  },
+  table: {
+    text: "h-8 w-8"
+  }
+};
+var variants2 = {
+  primary: {
+    text: "shadow-button text-button-label bg-gradient-to-b hover:text-white from-rose-start to-rose-end active:bg-gradient-to-b active:from-rose-800 active:to-rose-800 disabled:bg-gradient-to-b disabled:from-rose-800 disabled:to-rose-800 disabled:opacity-50 hover:from-[#FD467F] hover:to-[#DF4573]"
+  },
+  secondary: {
+    text: "shadow-button bg-white border-[0.5px] border-paragraph text-dark-blue-600 hover:text-dark-blue-600 hover:bg-[#f5f5f5] active:bg-light-gray-100 disabled:text-dark-blue-400 disabled:bg-white disabled:border-[0.5px] disabled:border-dark-blue-400"
+  },
+  link: {
+    text: "text-blue-700 hover:text-blue-800 hover:underline active:text-blue-900 active:underline disabled:text-blue-700 disabled:no-underline shadow-none font-normal"
+  },
+  icon: {
+    text: "bg-white border-[0.5px] border-dark-blue-300 hover:bg-[#f5f5f5] active:bg-light-gray-100 hover:text-paragraph disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
+  },
+  iconSecondary: {
+    text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
+  },
+  outline: {
+    text: "shadow-button bg-white border-[0.5px] border-rose-700 text-rose-700 hover:bg-[#f5f5f5] active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-white disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
+  },
+  dark: {
+    text: "shadow-button text-white hover:bg-[#f5f5f526] active:bg-[#0a0a0a40] disabled:opacity-50 disabled:bg-transparent"
+  },
+  dangerLight: {
+    text: "shadow-button text-dangerous-700 font-bold bg-white border-[0.5px] border-dangerous-700 hover:bg-dangerous-100 active:bg-dangerous-700 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-700"
+  },
+  danger: {
+    text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#FD6363] hover:to-[#E34E4E] active:from-dangerous-800 active:to-dangerous-800 disabled:opacity-50 disabled:from-dangerous-700 disabled:to-dangerous-700"
+  },
+  success: {
+    text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#3FF09B] hover:to-[#27C579] active:from-success-800 active:to-success-800 disabled:opacity-50 disabled:from-success-700 disabled:to-success-700"
+  },
+  warn: {
+    text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#FEBD5D] hover:to-[#F4A42D] active:from-warning-800 active:to-warning-800 disabled:opacity-50 disabled:from-warning-700 disabled:to-warning-700"
+  },
+  blue: {
+    text: "shadow-button bg-blue-700 text-white text-bold"
+  },
+  filter: {
+    text: "shadow-button rounded-3xl border border-dark-blue-300 text-paragraph shadow-button hover:bg-light-gray-100 active:border active:border-blue-700 active:text-blue-700 active:bg-blue-100 focus:border focus:border-blue-700 focus:text-blue-700 focus:bg-blue-100"
+  },
+  filterActive: {
+    text: "shadow-button rounded-3xl border border-blue-700 text-blue-700 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-white active:text-white active:bg-blue-900 active:border-blue-900 focus:text-white focus:bg-blue-900 focus:border-blue-900"
+  }
+};
+var ButtonLink = React4.forwardRef(
+  ({
+    size = "md",
+    icon,
+    padding = "px-3",
+    label,
+    disabled,
+    name,
+    target,
+    variant = "link",
+    className,
+    as: LinkComponent = "a",
+    hotkey,
+    hotkeyPosition = "bottom",
+    ...props
+  }, ref) => {
+    var _a;
+    const applyGap = icon;
+    React4.useEffect(() => {
+      if (!hotkey) return;
+      const handleKeyDown = (event) => {
+        var _a2;
+        if (disabled) return;
+        const keys = hotkey.toLowerCase().split("+").map((k) => k.trim());
+        const primaryKey = keys.pop();
+        if (!primaryKey) return;
+        const requiredCtrl = keys.includes("ctrl");
+        const requiredAlt = keys.includes("alt");
+        const requiredShift = keys.includes("shift");
+        const requiredMeta = keys.includes("meta") || keys.includes("cmd");
+        const match = event.key.toLowerCase() === primaryKey && event.ctrlKey === requiredCtrl && event.altKey === requiredAlt && event.shiftKey === requiredShift && event.metaKey === requiredMeta;
+        if (match) {
+          event.preventDefault();
+          if (props.onClick) {
+            (_a2 = props.onClick) == null ? void 0 : _a2.call(props, event);
+          } else {
+            const linkElement = document.querySelector(`a[href="${props.href}"]`);
+            linkElement == null ? void 0 : linkElement.click();
+          }
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [hotkey, props.onClick, props.href, disabled]);
+    const hotkeyLabel = hotkey && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-sm font-normal", children: hotkey.toUpperCase() });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx9__default.default("inline-flex gap-[8px]", {
+          "flex-col items-center justify-center": hotkeyPosition === "top" || hotkeyPosition === "bottom",
+          "flex-row items-center justify-center": hotkeyPosition === "left" || hotkeyPosition === "right"
+        }),
+        children: [
+          hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { color: "var(--label)" },
+              className: "text-p-sm font-normal -mt-[5px]",
+              children: hotkeyLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            LinkComponent,
+            {
+              ref,
+              className: clsx9__default.default(
+                {
+                  [(_a = variants2[variant]) == null ? void 0 : _a.text]: true,
+                  [sizes2[size].text]: true,
+                  ["pointer-events-none shadow-none text-label"]: disabled,
+                  ["px-2"]: variant !== "link"
+                },
+                `group rounded-lg font-bold active:shadow-none font-title flex items-center justify-start cursor-pointer
+            ${applyGap ? "gap-2" : "gap-0"} ${className}
+            `
+              ),
+              target,
+              ...props,
+              download: name,
+              children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[20px] flex items-center justify-center", children: icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cursor-pointer line-clamp-2", children: label })
+              ]
+            }
+          ),
+          hotkey && (hotkeyPosition === "bottom" || hotkeyPosition === "right") && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { color: "var(--label)" },
+              className: "text-p-sm font-normal -mt-[5px]",
+              children: hotkeyLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ButtonLink.displayName = "ButtonLink";
 var Input = ({
   label,
   type,
@@ -237,7 +442,7 @@ var Input = ({
           value,
           defaultValue,
           style: !label && placeholder && icon || icon ? inlineStyles.inputWithIcon : void 0,
-          className: clsx7__default.default({
+          className: clsx9__default.default({
             [styles.error]: hasError,
             [styles.input]: true,
             ["pr-10"]: clearField,
@@ -258,14 +463,14 @@ var Input = ({
       icon && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: clsx7__default.default(styles.icon, "flex justify-center items-center"),
+          className: clsx9__default.default(styles.icon, "flex justify-center items-center"),
           children: icon
         }
       ),
       hideInput && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: clsx7__default.default(
+          className: clsx9__default.default(
             styles.rightIcon,
             "flex justify-center items-center"
           ),
@@ -276,7 +481,7 @@ var Input = ({
         "label",
         {
           style: icon ? inlineStyles.labelWithIcon : void 0,
-          className: clsx7__default.default(
+          className: clsx9__default.default(
             {
               [styles.label]: true,
               ["left-2.5"]: !icon
@@ -293,7 +498,7 @@ var Input = ({
       clearField && value && value !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
         "i",
         {
-          className: clsx7__default.default(
+          className: clsx9__default.default(
             {
               [styles.clear]: true
             },
@@ -419,7 +624,7 @@ var useFieldErrorsStore = zustand.create(
     }))
   })
 );
-var DatePickerInput = React2.forwardRef(
+var DatePickerInput = React4.forwardRef(
   ({
     icon,
     label,
@@ -440,12 +645,12 @@ var DatePickerInput = React2.forwardRef(
     popoverOffset
   }, ref) => {
     var _a;
-    const [invalidDate, setInvalidDate] = React2.useState(false);
-    const [showCalendar, setShowCalendar] = React2.useState(false);
-    const [inputWidth, setInputWidth] = React2.useState(0);
-    const inputContainerRef = React2.useRef(null);
+    const [invalidDate, setInvalidDate] = React4.useState(false);
+    const [showCalendar, setShowCalendar] = React4.useState(false);
+    const [inputWidth, setInputWidth] = React4.useState(0);
+    const inputContainerRef = React4.useRef(null);
     const dateFnsFormat = "dd/MM/yyyy";
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       const updateWidth = () => {
         if (inputContainerRef.current) {
           setInputWidth(inputContainerRef.current.offsetWidth + 10);
@@ -498,7 +703,7 @@ var DatePickerInput = React2.forwardRef(
                     "div",
                     {
                       id: "icon",
-                      className: clsx7__default.default(
+                      className: clsx9__default.default(
                         styles.icon,
                         "flex justify-center items-center text-[20px] bg-gray-100"
                       ),
@@ -545,7 +750,7 @@ var DatePickerInput = React2.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "label",
                     {
-                      className: clsx7__default.default(
+                      className: clsx9__default.default(
                         "pointer-events-none ",
                         styles.label,
                         `
@@ -562,7 +767,7 @@ var DatePickerInput = React2.forwardRef(
                   clearField && (field == null ? void 0 : field.value) && (field == null ? void 0 : field.value) !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
                     "i",
                     {
-                      className: clsx7__default.default(
+                      className: clsx9__default.default(
                         {
                           [styles.clear]: true
                         },
@@ -597,7 +802,7 @@ var DatePickerInput = React2.forwardRef(
     ] });
   }
 );
-var variants2 = {
+var variants3 = {
   success: "bg-success-100 text-success-600",
   warning: "bg-warning-100 text-warning-600",
   blue: "bg-blue-100 text-blue-500",
@@ -619,8 +824,8 @@ var Badge = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: clsx7__default.default(
-        { [variants2[variant]]: (variant == null ? void 0 : variant.length) > 0 },
+      className: clsx9__default.default(
+        { [variants3[variant]]: (variant == null ? void 0 : variant.length) > 0 },
         "py-1 px-2 text-p-md font-normal inline-flex items-center justify-center gap-1 rounded-full text-center",
         className
       ),
@@ -894,7 +1099,7 @@ var Checkbox = ({
       id: registration ? registration.name : key,
       disabled,
       type: "checkbox",
-      className: clsx7__default.default(
+      className: clsx9__default.default(
         "disabled:hover:bg-neutral-100 disabled:cursor-default cursor-pointer h-[16px] w-[16px] rounded-[2.5px] border border-neutral-200 text-blue-500 focus:rounded-[4px] focus:border-[1.5px] focus:ring-blue-500 focus-visible:ring-blue-500 checked:after:text-blue-500 disabled:bg-neutral-100"
       )
     }
@@ -926,8 +1131,8 @@ var FilterCalendar = ({
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
-  const [currentValue, setCurrentValue] = React2.useState([]);
-  const [calendarLabel, setCalendarLabel] = React2.useState("");
+  const [currentValue, setCurrentValue] = React4.useState([]);
+  const [calendarLabel, setCalendarLabel] = React4.useState("");
   const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
   const shorcuts = [
     {
@@ -1088,7 +1293,7 @@ var FilterCalendar = ({
       ]
     }
   ];
-  const [selectedShortcut, setSelectedShortcut] = React2.useState(
+  const [selectedShortcut, setSelectedShortcut] = React4.useState(
     defaultShortcut || shorcuts[0]
   );
   const calendar = /* @__PURE__ */ jsxRuntime.jsx("div", { id: "group-input-calendar", className: "relative", children: rangeCalendar ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1160,7 +1365,7 @@ var FilterCalendar = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           react.Popover,
           {
-            className: clsx7__default.default(
+            className: clsx9__default.default(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1170,7 +1375,7 @@ var FilterCalendar = ({
                 /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverButton, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: clsx7__default.default(
+                    className: clsx9__default.default(
                       {
                         [style.filter]: !hasValue && !open,
                         [style.filterOpen]: open && !hasValue,
@@ -1182,7 +1387,7 @@ var FilterCalendar = ({
                       icon && /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
-                          className: clsx7__default.default({
+                          className: clsx9__default.default({
                             ["text-label group-active:text-blue-500"]: !field.value && !open,
                             ["text-blue-500"]: open && !field.value,
                             ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
@@ -1193,7 +1398,7 @@ var FilterCalendar = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "label",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1209,7 +1414,7 @@ var FilterCalendar = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "i",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1227,7 +1432,7 @@ var FilterCalendar = ({
                     setCurrentValue(field.value);
                     close();
                   };
-                  React2.useEffect(() => {
+                  React4.useEffect(() => {
                     setCurrentValue(field.value);
                   }, [open]);
                   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -1236,7 +1441,7 @@ var FilterCalendar = ({
                       onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             if (onClear) {
@@ -1303,7 +1508,7 @@ function InputSmall({
   onClear,
   collapsed
 }) {
-  const inputRef = React2.useRef(null);
+  const inputRef = React4.useRef(null);
   const styles = {
     input: `text-p-md text-paragraph w-full outline-none placeholder:text-label`,
     icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
@@ -1311,8 +1516,8 @@ function InputSmall({
     clear: "pr-[5px] cursor-pointer text-label text-[16px]"
   };
   const elem = inputRef == null ? void 0 : inputRef.current;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default(styles.wrapper), children: [
-    icon && !searchOnClick && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx7__default.default(styles.icon), children: icon }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(styles.wrapper), children: [
+    icon && !searchOnClick && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default(styles.icon), children: icon }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -1320,7 +1525,7 @@ function InputSmall({
         ...inputProps,
         type: "search-text",
         ref: inputRef,
-        className: clsx7__default.default(
+        className: clsx9__default.default(
           {
             ["pl-1"]: collapsed
           },
@@ -1337,7 +1542,7 @@ function InputSmall({
     clearField && value && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
       "i",
       {
-        className: clsx7__default.default(styles.clear, "uil uil-times"),
+        className: clsx9__default.default(styles.clear, "uil uil-times"),
         onClick: () => {
           elem.value = "";
           elem == null ? void 0 : elem.focus();
@@ -1352,7 +1557,7 @@ function InputSmall({
       "button",
       {
         type: "button",
-        className: clsx7__default.default({
+        className: clsx9__default.default({
           ["border-l border-input pl-1"]: clearField && value && !disabled,
           ["text-blue-500"]: !disabled,
           ["text-neutral-300"]: disabled,
@@ -1386,13 +1591,13 @@ var FilterOptions = ({
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
-  const [currentValue, setCurrentValue] = React2.useState(isMulti ? [] : {});
-  const [data, setData] = React2.useState(() => options);
-  const [filter, setFilter] = React2.useState("");
-  const [subFilter, setSubFilter] = React2.useState(
+  const [currentValue, setCurrentValue] = React4.useState(isMulti ? [] : {});
+  const [data, setData] = React4.useState(() => options);
+  const [filter, setFilter] = React4.useState("");
+  const [subFilter, setSubFilter] = React4.useState(
     (subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
   );
-  const [loading, setLoading] = React2.useState(false);
+  const [loading, setLoading] = React4.useState(false);
   const search = async () => {
     if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
       if (fetch) {
@@ -1415,7 +1620,7 @@ var FilterOptions = ({
     }
     setLoading(false);
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setLoading(true);
     const timeout = setTimeout(() => {
       search();
@@ -1428,11 +1633,11 @@ var FilterOptions = ({
       {
         disabled: option.disabled,
         value: option,
-        as: React2.Fragment,
+        as: React4.Fragment,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: clsx7__default.default(
+            className: clsx9__default.default(
               "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
               {
                 ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
@@ -1444,7 +1649,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1456,7 +1661,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1468,7 +1673,7 @@ var FilterOptions = ({
               isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     "absolute inset-y-0 text-white right-0 flex items-center pr-4"
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-check text-lg" })
@@ -1493,7 +1698,7 @@ var FilterOptions = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           react.Popover,
           {
-            className: clsx7__default.default(
+            className: clsx9__default.default(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1503,7 +1708,7 @@ var FilterOptions = ({
                 /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverButton, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: clsx7__default.default(
+                    className: clsx9__default.default(
                       {
                         [style.filter]: !hasValue && !open,
                         [style.filterOpen]: open && !hasValue,
@@ -1515,7 +1720,7 @@ var FilterOptions = ({
                       icon && /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
-                          className: clsx7__default.default({
+                          className: clsx9__default.default({
                             ["text-label group-active:text-blue-500"]: !field.value && !open,
                             ["text-blue-500"]: open && !field.value,
                             ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
@@ -1526,7 +1731,7 @@ var FilterOptions = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "label",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1541,7 +1746,7 @@ var FilterOptions = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "i",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1559,7 +1764,7 @@ var FilterOptions = ({
                     setCurrentValue(field.value);
                     close();
                   };
-                  React2.useEffect(() => {
+                  React4.useEffect(() => {
                     setCurrentValue(field.value);
                   }, [open]);
                   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -1596,7 +1801,7 @@ var FilterOptions = ({
                                   return /* @__PURE__ */ jsxRuntime.jsx(
                                     "button",
                                     {
-                                      className: clsx7__default.default(
+                                      className: clsx9__default.default(
                                         {
                                           ["bg-blue-500 text-white"]: active,
                                           ["text-paragraph"]: !active
@@ -1655,7 +1860,7 @@ var FilterOptions = ({
                       isMulti && onSelectAll && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r pr-2 border-neutral-300", children: /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             onSelectAll();
@@ -1669,7 +1874,7 @@ var FilterOptions = ({
                       onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             if (onClear) {
@@ -1787,7 +1992,7 @@ function InputMoney({
             icon && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default(
+                className: clsx9__default.default(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1801,7 +2006,7 @@ function InputMoney({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7__default.default({
+                  className: clsx9__default.default({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -1823,7 +2028,7 @@ function InputMoney({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       [styles.label]: true,
                       ["left-[46px]"]: icon,
@@ -1892,13 +2097,13 @@ function InputNumber({
     buttonsWrapper: "absolute top-[7px] right-[10px] cursor-pointer text-label flex flex-col gap-[2px]",
     button: "border-[0.5px] border-neutral-300 rounded shadow-input h-4 w-4 flex items-center justify-center"
   };
-  const [debouncedCount, setDebouncedCount] = React2.useState(0);
+  const [debouncedCount, setDebouncedCount] = React4.useState(0);
   const save = () => {
     if (onBlur) {
       onBlur(value);
     }
   };
-  const updateCount = React2.useMemo(() => {
+  const updateCount = React4.useMemo(() => {
     return debounce_default(() => {
       save();
     }, 1e3);
@@ -1933,7 +2138,7 @@ function InputNumber({
             icon && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default(
+                className: clsx9__default.default(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1947,7 +2152,7 @@ function InputNumber({
                   type: "number",
                   autoComplete: "off",
                   id: name,
-                  className: clsx7__default.default({
+                  className: clsx9__default.default({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -1998,7 +2203,7 @@ function InputNumber({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       [styles.label]: true,
                       ["left-[3.5rem]"]: icon,
@@ -2014,12 +2219,12 @@ function InputNumber({
                 }
               )
             ] }),
-            !hideArrows && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default([styles.buttonsWrapper]), children: [
+            !hideArrows && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default([styles.buttonsWrapper]), children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  className: clsx7__default.default([styles.button]),
+                  className: clsx9__default.default([styles.button]),
                   disabled,
                   onClick: () => {
                     if (!maxValue || maxValue && Number(value2 || 0) + 1 <= maxValue) {
@@ -2033,7 +2238,7 @@ function InputNumber({
                 "button",
                 {
                   type: "button",
-                  className: clsx7__default.default([styles.button]),
+                  className: clsx9__default.default([styles.button]),
                   disabled,
                   onClick: () => {
                     if (!maxValue || maxValue && Number(value2 === 0 ? 0 : Number(value2) - 1) <= maxValue) {
@@ -2123,7 +2328,7 @@ function InputPercentage({
             icon && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default(
+                className: clsx9__default.default(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -2137,7 +2342,7 @@ function InputPercentage({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7__default.default({
+                  className: clsx9__default.default({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -2155,7 +2360,7 @@ function InputPercentage({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       [styles.label]: true,
                       ["left-[3rem]"]: icon,
@@ -2203,7 +2408,7 @@ var MaskedInput = ({
   defaultValue,
   disabled
 }) => {
-  const ref = React2.useRef(null);
+  const ref = React4.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -2274,7 +2479,7 @@ var alertTypes = {
   info: "text-blue-500",
   primary: "text-rose-700"
 };
-var sizes2 = {
+var sizes3 = {
   xs: "w-[350px]",
   sm: "w-[662px]",
   md: "w-[960px]",
@@ -2316,7 +2521,7 @@ var ModalDialog = ({
       zIndex: 9999
     }
   };
-  const trigger = triggerButton ? React2.cloneElement(triggerButton, {
+  const trigger = triggerButton ? React4.cloneElement(triggerButton, {
     onClick: () => {
       onOpen();
     }
@@ -2331,10 +2536,10 @@ var ModalDialog = ({
         onRequestClose: onClose,
         style: customStyles3,
         contentLabel: "Example Modal",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default(sizes2[size]), children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(sizes3[size]), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
-              alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx7__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
+              alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
               title
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onCancel, className: "text-neutral-500 text-[24px]", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times" }) })
@@ -2344,7 +2549,7 @@ var ModalDialog = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default({
+                className: clsx9__default.default({
                   ["flex-1"]: info
                 }),
                 children: info
@@ -2539,13 +2744,13 @@ var SelectField = ({
 }) => {
   var _a;
   const { Option, DropdownIndicator, ClearIndicator, SingleValue } = reactSelect.components;
-  const selectRef = React2.useRef(null);
-  const [inputValue, setInputValue] = React2.useState("");
-  const [loading, setLoading] = React2.useState(false);
-  const [options, setOptions] = React2.useState(() => optionsList || []);
-  const [availableHeight, setAvailableHeight] = React2.useState(300);
-  const [isFocused, setIsFocused] = React2.useState(false);
-  React2.useEffect(() => {
+  const selectRef = React4.useRef(null);
+  const [inputValue, setInputValue] = React4.useState("");
+  const [loading, setLoading] = React4.useState(false);
+  const [options, setOptions] = React4.useState(() => optionsList || []);
+  const [availableHeight, setAvailableHeight] = React4.useState(300);
+  const [isFocused, setIsFocused] = React4.useState(false);
+  React4.useEffect(() => {
     const updateAvailableHeight = () => {
       var _a2, _b;
       if ((_a2 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a2.getBoundingClientRect) {
@@ -2593,7 +2798,7 @@ var SelectField = ({
   const hasIcon = {
     hasIcon: icon
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setOptions(() => optionsList);
   }, [optionsList]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2618,7 +2823,7 @@ var SelectField = ({
                 alignItems: "center",
                 justifyContent: "space-between"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx7__default.default("text-p-md focus:text-white"), children: props.data.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
             }
           ) });
         };
@@ -2695,7 +2900,7 @@ var SelectField = ({
           icon && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx7__default.default(
+              className: clsx9__default.default(
                 "z-[70]  absolute bg-neutral-100 top-[1px] left-[1px] rounded-l-lg flex justify-center items-center h-[44px] w-[38px] text-[22px] text-dark-blue-600",
                 {
                   "text-blue-500": isFocused && hasIcon.hasIcon,
@@ -2747,7 +2952,7 @@ var SelectField = ({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: clsx7__default.default(
+              className: clsx9__default.default(
                 "text-label text-sm left-2.5 cursor-pointer pointer-events-none absolute transition-all duration-200",
                 {
                   "scale-75 -translate-y-3": field.value || inputValue,
@@ -2936,10 +3141,10 @@ var SelectFieldBip = ({
 }) => {
   var _a;
   const { Option, SingleValue } = reactSelect.components;
-  const selectRef = React2.useRef(null);
-  const [inputValue, setInputValue] = React2.useState("");
-  const [loading, setLoading] = React2.useState(false);
-  const [cachedOptions, setCachedOptions] = React2.useState([]);
+  const selectRef = React4.useRef(null);
+  const [inputValue, setInputValue] = React4.useState("");
+  const [loading, setLoading] = React4.useState(false);
+  const [cachedOptions, setCachedOptions] = React4.useState([]);
   const fetchOptions = async (value) => {
     if (isSearchable && filterOptions) {
       if (!debounce2 || debounce2 && value.length >= debounce2) {
@@ -2967,12 +3172,12 @@ var SelectFieldBip = ({
     hasIcon: icon
   };
   const iconStyle = `z-[70] absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] rounded-l-lg flex justify-center items-center w-[38px] text-[22px] ${hasError.hasError ? "text-dangerous-500" : "text-label"}`;
-  const debouncedFetchOptions = React2.useMemo(() => {
+  const debouncedFetchOptions = React4.useMemo(() => {
     return debounce_default((value, callback) => {
       fetchOptions(value).then(callback);
     }, 300);
   }, [filterOptions]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       debouncedFetchOptions.cancel();
     };
@@ -2999,7 +3204,7 @@ var SelectFieldBip = ({
                 alignItems: "center",
                 justifyContent: "space-between"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx7__default.default("text-p-md focus:text-white"), children: props.data.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
             }
           ) });
         };
@@ -3138,7 +3343,7 @@ var SelectFieldBip = ({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: clsx7__default.default(
+              className: clsx9__default.default(
                 "text-label text-sm left-2.5 cursor-pointer pointer-events-none",
                 {
                   [" scale-75 -translate-y-3 "]: field.value,
@@ -3295,22 +3500,22 @@ function PaginationSelect({
     id: index,
     name: index
   }));
-  const [pageSizeSelected, setPageSizeSelected] = React2.useState({
+  const [pageSizeSelected, setPageSizeSelected] = React4.useState({
     id: ((_a = JSON.parse(sessionStorage.getItem("pageSize"))) == null ? void 0 : _a.id) || 20,
     name: ((_b = JSON.parse(sessionStorage.getItem("pageSize"))) == null ? void 0 : _b.name) || 20
   });
-  const [pageSelected, setPageSelected] = React2.useState({
+  const [pageSelected, setPageSelected] = React4.useState({
     id: ((_d = (_c = table == null ? void 0 : table.getState()) == null ? void 0 : _c.pagination) == null ? void 0 : _d.pageIndex) || 0,
     name: ((_f = (_e = table == null ? void 0 : table.getState()) == null ? void 0 : _e.pagination) == null ? void 0 : _f.pageIndex) || 0
   });
-  const [pagesOptions, setPagesOptions] = React2.useState(() => options);
-  const [pageSizesOptions, setPagesSizesOptions] = React2.useState(
+  const [pagesOptions, setPagesOptions] = React4.useState(() => options);
+  const [pageSizesOptions, setPagesSizesOptions] = React4.useState(
     pageSizeOptions == null ? void 0 : pageSizeOptions.map((item) => ({
       id: item,
       name: item
     }))
   );
-  const [query, setQuery] = React2.useState("");
+  const [query, setQuery] = React4.useState("");
   const filter = () => {
     let copy = [...options];
     setPagesOptions(
@@ -3322,10 +3527,10 @@ function PaginationSelect({
   const saveSessionStorage = (key, values) => {
     sessionStorage.setItem(key, JSON.stringify(values));
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     filter();
   }, [query]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     saveSessionStorage("pageSize", pageSizeSelected);
     table.setPageSize(pageSizeSelected == null ? void 0 : pageSizeSelected.id);
     table.setPageIndex(0);
@@ -3334,7 +3539,7 @@ function PaginationSelect({
       name: 0
     });
   }, [pageSizeSelected]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setPagesOptions(
       pageCount ? [...Array(pageCount)].map((item, index) => ({
         id: index,
@@ -3342,7 +3547,7 @@ function PaginationSelect({
       })) : []
     );
   }, [table == null ? void 0 : table.getPageCount()]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
     if (((_b2 = (_a2 = table == null ? void 0 : table.getState()) == null ? void 0 : _a2.pagination) == null ? void 0 : _b2.pageIndex) >= 0) {
       setPageSelected({
@@ -3372,7 +3577,7 @@ function PaginationSelect({
                 react.Combobox.Option,
                 {
                   value: opt,
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
                     {
                       "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
@@ -3447,7 +3652,7 @@ function PaginationSelect({
                 react.Combobox.Option,
                 {
                   value: opt,
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
                     {
                       "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
@@ -3467,11 +3672,11 @@ function PaginationSelect({
     ] })
   ] });
 }
-var Table = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       "table-scroll block text-left border-separate border-spacing-0 w-full",
       className
     ),
@@ -3480,22 +3685,22 @@ var Table = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHeader = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "thead",
   {
     ref,
-    className: clsx7.clsx("w-full sticky top-0 z-[90]", className),
+    className: clsx9.clsx("w-full sticky top-0 z-[90]", className),
     ...props
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx7.clsx(className), ...props }));
+var TableBody = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx9.clsx(className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       " flex flex-col md:flex-row gap-2 md:gap-0 justify-between items-center py-4 px-6 bg-white w-full h-full border border-neutral-200 rounded-t-lg",
       className
     ),
@@ -3503,13 +3708,13 @@ var TableFooter = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx7.clsx(className), ...props }));
+var TableRow = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx9.clsx(className), ...props }));
 TableRow.displayName = "TableRow";
-var TableHead = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       {
         "hover:bg-neutral-100": props.sortable
       },
@@ -3520,11 +3725,11 @@ var TableHead = React2__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       "align-middle h-[80px] border-b border-neutral-200 whitespace-nowrap py-4 px-5",
       className
     ),
@@ -3532,11 +3737,11 @@ var TableCell = React2__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
-    className: clsx7.clsx("text-default mt-4 text-sm", className),
+    className: clsx9.clsx("text-default mt-4 text-sm", className),
     ...props
   }
 ));
@@ -3586,10 +3791,10 @@ function DataTablePagination({
       (pageSizeOptions == null ? void 0 : pageSizeOptions.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(PaginationSelect, { table, pageSizeOptions }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-center md:justify-normal gap-2 md:gap-4", children: [
         footer,
-        selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "link", children: [
+        selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
           "Selecionar todos os ",
           totalData
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "link", children: "Desmarcar todos" }) }) })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center md:justify-end justify-center gap-2 flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-p-md text-paragraph mr-1", children: [
@@ -3645,7 +3850,7 @@ function DataTablePagination({
           pagesArray.map((elem, index) => {
             const checkPageIndexLimit = index <= limitPagePositive && index >= limitPageNegative;
             const isSelectedPage = index === selectedPage;
-            return /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 onClick: () => table.setPageIndex(index),
@@ -3755,22 +3960,22 @@ function DataTable({
   onFinishFetch
 }) {
   var _a, _b, _c, _d, _e, _f;
-  const tableRef = React2.useRef(null);
-  const [columnVisibility, setColumnVisibility] = React2.useState({});
-  const [columnFilters, setColumnFilters] = React2.useState([]);
-  const [sorting, setSorting] = React2.useState([]);
-  const [arrRowSelected, setArrRowSelected] = React2.useState([]);
-  const [globalFilter, setGlobalFilter] = React2.useState("");
-  const [dataTable, setDataTable] = React2.useState([]);
-  const [loading, setLoading] = React2.useState(true);
-  const [expanded, setExpanded] = React2.useState({});
-  const [total, setTotal] = React2.useState(() => totalData);
-  const [{ pageIndex, pageSize }, setPagination] = React2.useState({
+  const tableRef = React4.useRef(null);
+  const [columnVisibility, setColumnVisibility] = React4.useState({});
+  const [columnFilters, setColumnFilters] = React4.useState([]);
+  const [sorting, setSorting] = React4.useState([]);
+  const [arrRowSelected, setArrRowSelected] = React4.useState([]);
+  const [globalFilter, setGlobalFilter] = React4.useState("");
+  const [dataTable, setDataTable] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(true);
+  const [expanded, setExpanded] = React4.useState({});
+  const [total, setTotal] = React4.useState(() => totalData);
+  const [{ pageIndex, pageSize }, setPagination] = React4.useState({
     pageIndex: 0,
     pageSize: hidePagination ? 999999 : perPage ? perPage : 20
   });
-  const [paginationScroll, setPaginationScroll] = React2.useState();
-  const pagination = React2.useMemo(
+  const [paginationScroll, setPaginationScroll] = React4.useState();
+  const pagination = React4.useMemo(
     () => ({
       pageIndex,
       pageSize
@@ -3825,7 +4030,7 @@ function DataTable({
       pageCount: Number(pageSize2)
     };
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!(tableContainerRef == null ? void 0 : tableContainerRef.current)) return;
     const resizeObserver = new ResizeObserver(() => {
       var _a2;
@@ -3834,12 +4039,12 @@ function DataTable({
     resizeObserver.observe(tableContainerRef == null ? void 0 : tableContainerRef.current);
     return () => resizeObserver.disconnect();
   }, []);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (fetchData || autoPagination) {
       fetch();
     }
   }, [pageIndex, pageSize, sorting]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (totalData !== total) {
       setPagination({
         pageIndex: 0,
@@ -3848,7 +4053,7 @@ function DataTable({
       setTotal(totalData);
     }
   }, [totalData]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (data) {
       setDataTable(
         () => autoPagination ? data.slice(0, pageSize) : data
@@ -3895,7 +4100,7 @@ function DataTable({
       getRowStyles: rowClassName
     }
   });
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (enableRowSelection && rowSelection) {
       setArrRowSelected(Object.keys(rowSelection));
     }
@@ -3948,7 +4153,7 @@ function DataTable({
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
   }
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (rowSelection && Object.keys(rowSelection).length == 0) {
       const elements = document.getElementsByClassName("th-shadow");
       Object.keys(elements).forEach((index) => {
@@ -3987,7 +4192,7 @@ function DataTable({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx7__default.default("w-full flex mt-4 flex-col justify-between", {
+        className: clsx9__default.default("w-full flex mt-4 flex-col justify-between", {
           "flex-1": !hideTableData,
           [tableClass]: tableClass
         }),
@@ -3995,7 +4200,7 @@ function DataTable({
           /* @__PURE__ */ jsxRuntime.jsxs(
             Table,
             {
-              className: clsx7__default.default(
+              className: clsx9__default.default(
                 "w-full table_container z-20 overflow-x-scroll md:overflow-x-hidden"
               ),
               onScroll,
@@ -4022,7 +4227,7 @@ function DataTable({
                           width: header.getSize()
                         },
                         scope: "col",
-                        className: clsx7__default.default(
+                        className: clsx9__default.default(
                           {
                             "hover:bg-neutral-100 th-shadow cursor-pointer": header.column.getCanSort(),
                             ["with-shadow"]: (arrRowSelected == null ? void 0 : arrRowSelected.length) == 0 && withShadow
@@ -4038,7 +4243,7 @@ function DataTable({
                           ((_a2 = sorting[0]) == null ? void 0 : _a2.id) == header.column.id ? /* @__PURE__ */ jsxRuntime.jsx(
                             "i",
                             {
-                              className: clsx7__default.default(
+                              className: clsx9__default.default(
                                 {
                                   ["rotate-0"]: !((_b2 = sorting[0]) == null ? void 0 : _b2.desc),
                                   ["rotate-180"]: (_c2 = sorting[0]) == null ? void 0 : _c2.desc
@@ -4053,7 +4258,7 @@ function DataTable({
                     );
                   }) }, headerGroup.id + headerIndex + "header")) }),
                   /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (_f = (_e = table == null ? void 0 : table.getRowModel()) == null ? void 0 : _e.rows) == null ? void 0 : _f.map((row, rowIndex) => {
-                    return /* @__PURE__ */ jsxRuntime.jsx(React2__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React2__namespace.default.Fragment, { children: [
+                    return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.default.Fragment, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         TableRow,
                         {
@@ -4071,7 +4276,7 @@ function DataTable({
                                   backgroundColor: backgroundColor ? backgroundColor : "",
                                   ...stylesRow(row)
                                 },
-                                className: clsx7__default.default(
+                                className: clsx9__default.default(
                                   {
                                     ["hidden"]: cell.row.original._destroy,
                                     ["first:border-l last:border-r"]: borderFull,
@@ -4109,6 +4314,7 @@ function DataTable({
 
 exports.Badge = Badge;
 exports.Button = Button;
+exports.ButtonLink = ButtonLink;
 exports.Calendar = Calendar;
 exports.Checkbox = Checkbox;
 exports.DataTable = DataTable;
@@ -4140,5 +4346,6 @@ exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
 exports.Toggle = Toggle;
 exports.ValueContainer = ValueContainer;
+exports.sizes = sizes2;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map