nexaas-ui-components 1.0.18 → 1.0.19

package/dist/index.js

@@ -1,8 +1,8 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx7, { clsx } from 'clsx';
+import * as React4 from 'react';
+import React4__default, { forwardRef, useEffect, useState, useRef, useMemo, cloneElement, Fragment as Fragment$1 } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx9, { clsx } from 'clsx';
 import { DateInput3, DateRangePicker3, DatePicker3 } from '@blueprintjs/datetime2';
-import * as React2 from 'react';
-import React2__default, { forwardRef, useState, useRef, useEffect, useMemo, cloneElement, Fragment as Fragment$1 } from 'react';
 import { Controller } from 'react-hook-form';
 import { create } from 'zustand';
 import { parse, format, set, startOfWeek, endOfWeek, startOfMonth, endOfMonth, sub, subYears } from 'date-fns';
@@ -18,7 +18,7 @@ import AsyncSelect from 'react-select/async';
 import { useReactTable, getExpandedRowModel, getFacetedUniqueValues, getFacetedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 
-// src/assets/spinner.tsx
+// src/components/Button.tsx
 var SpinnerIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -87,9 +87,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"
   },
@@ -122,6 +119,8 @@ var paddingConfig = {
 var Button = ({
   variant = "primary",
   size = "lg",
+  hotkey,
+  hotkeyPosition = "bottom",
   ...props
 }) => {
   const applyGap = props.icon && props.children;
@@ -129,14 +128,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__ */ jsx(
-    "button",
+  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__ */ jsx("span", { className: "text-p-sm font-normal", children: hotkey.toUpperCase() });
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      type: props.type,
-      id: "button-component",
-      ...props,
-      disabled: props.disabled || props.loading,
-      className: `
+      className: clsx9("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__ */ jsx("span", { style: { color: "var(--label)" }, className: "text-p-sm font-normal -mt-[5px]", children: hotkeyLabel }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: props.type,
+            id: "button-component",
+            ...props,
+            disabled: props.disabled || props.loading,
+            className: `
           ${props.className}
           ${appliedVariant} 
           ${appliedSize.text} 
@@ -144,20 +176,193 @@ var Button = ({
           ${gapText} 
           whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center
         `,
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        props.icon && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `flex items-center justify-center  ${appliedSize.icon}`,
-            children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsx(SpinnerIcon, { className: "animate-spin" })
+            children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              props.icon && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex items-center justify-center  ${appliedSize.icon}`,
+                  children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsx(SpinnerIcon, { className: "animate-spin" })
+                }
+              ),
+              props.children,
+              props.dropdown && /* @__PURE__ */ jsx("i", { className: "uil uil-angle-down text-[18px]" })
+            ] })
           }
         ),
-        props.children,
-        props.dropdown && /* @__PURE__ */ jsx("i", { className: "uil uil-angle-down text-[18px]" })
-      ] })
+        hotkey && (hotkeyPosition === "bottom" || hotkeyPosition === "right") && /* @__PURE__ */ 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 = 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;
+    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__ */ jsx("span", { className: "text-p-sm font-normal", children: hotkey.toUpperCase() });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx9("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__ */ jsx(
+            "span",
+            {
+              style: { color: "var(--label)" },
+              className: "text-p-sm font-normal -mt-[5px]",
+              children: hotkeyLabel
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              ref,
+              className: clsx9(
+                {
+                  [(_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__ */ jsx("div", { className: "text-[20px] flex items-center justify-center", children: icon }),
+                /* @__PURE__ */ jsx("span", { className: "cursor-pointer line-clamp-2", children: label })
+              ]
+            }
+          ),
+          hotkey && (hotkeyPosition === "bottom" || hotkeyPosition === "right") && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { color: "var(--label)" },
+              className: "text-p-sm font-normal -mt-[5px]",
+              children: hotkeyLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ButtonLink.displayName = "ButtonLink";
 var Input = ({
   label,
   type,
@@ -208,7 +413,7 @@ var Input = ({
           value,
           defaultValue,
           style: !label && placeholder && icon || icon ? inlineStyles.inputWithIcon : void 0,
-          className: clsx7({
+          className: clsx9({
             [styles.error]: hasError,
             [styles.input]: true,
             ["pr-10"]: clearField,
@@ -229,14 +434,14 @@ var Input = ({
       icon && /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx7(styles.icon, "flex justify-center items-center"),
+          className: clsx9(styles.icon, "flex justify-center items-center"),
           children: icon
         }
       ),
       hideInput && /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx7(
+          className: clsx9(
             styles.rightIcon,
             "flex justify-center items-center"
           ),
@@ -247,7 +452,7 @@ var Input = ({
         "label",
         {
           style: icon ? inlineStyles.labelWithIcon : void 0,
-          className: clsx7(
+          className: clsx9(
             {
               [styles.label]: true,
               ["left-2.5"]: !icon
@@ -264,7 +469,7 @@ var Input = ({
       clearField && value && value !== "" && !disabled && /* @__PURE__ */ jsx(
         "i",
         {
-          className: clsx7(
+          className: clsx9(
             {
               [styles.clear]: true
             },
@@ -469,7 +674,7 @@ var DatePickerInput = forwardRef(
                     "div",
                     {
                       id: "icon",
-                      className: clsx7(
+                      className: clsx9(
                         styles.icon,
                         "flex justify-center items-center text-[20px] bg-gray-100"
                       ),
@@ -516,7 +721,7 @@ var DatePickerInput = forwardRef(
                   /* @__PURE__ */ jsxs(
                     "label",
                     {
-                      className: clsx7(
+                      className: clsx9(
                         "pointer-events-none ",
                         styles.label,
                         `
@@ -533,7 +738,7 @@ var DatePickerInput = forwardRef(
                   clearField && (field == null ? void 0 : field.value) && (field == null ? void 0 : field.value) !== "" && !disabled && /* @__PURE__ */ jsx(
                     "i",
                     {
-                      className: clsx7(
+                      className: clsx9(
                         {
                           [styles.clear]: true
                         },
@@ -568,7 +773,7 @@ var DatePickerInput = 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",
@@ -590,8 +795,8 @@ var Badge = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: clsx7(
-        { [variants2[variant]]: (variant == null ? void 0 : variant.length) > 0 },
+      className: clsx9(
+        { [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
       ),
@@ -865,7 +1070,7 @@ var Checkbox = ({
       id: registration ? registration.name : key,
       disabled,
       type: "checkbox",
-      className: clsx7(
+      className: clsx9(
         "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"
       )
     }
@@ -1131,7 +1336,7 @@ var FilterCalendar = ({
         return /* @__PURE__ */ jsx(
           Popover,
           {
-            className: clsx7(
+            className: clsx9(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1141,7 +1346,7 @@ var FilterCalendar = ({
                 /* @__PURE__ */ jsx(Float.Reference, { children: /* @__PURE__ */ jsx(PopoverButton, { as: "button", children: /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: clsx7(
+                    className: clsx9(
                       {
                         [style.filter]: !hasValue && !open,
                         [style.filterOpen]: open && !hasValue,
@@ -1153,7 +1358,7 @@ var FilterCalendar = ({
                       icon && /* @__PURE__ */ jsx(
                         "div",
                         {
-                          className: clsx7({
+                          className: clsx9({
                             ["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
@@ -1164,7 +1369,7 @@ var FilterCalendar = ({
                       /* @__PURE__ */ jsx(
                         "label",
                         {
-                          className: clsx7(
+                          className: clsx9(
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1180,7 +1385,7 @@ var FilterCalendar = ({
                       /* @__PURE__ */ jsx(
                         "i",
                         {
-                          className: clsx7(
+                          className: clsx9(
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1207,7 +1412,7 @@ var FilterCalendar = ({
                       onClear && /* @__PURE__ */ jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             if (onClear) {
@@ -1282,8 +1487,8 @@ function InputSmall({
     clear: "pr-[5px] cursor-pointer text-label text-[16px]"
   };
   const elem = inputRef == null ? void 0 : inputRef.current;
-  return /* @__PURE__ */ jsxs("div", { className: clsx7(styles.wrapper), children: [
-    icon && !searchOnClick && /* @__PURE__ */ jsx("div", { className: clsx7(styles.icon), children: icon }),
+  return /* @__PURE__ */ jsxs("div", { className: clsx9(styles.wrapper), children: [
+    icon && !searchOnClick && /* @__PURE__ */ jsx("div", { className: clsx9(styles.icon), children: icon }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -1291,7 +1496,7 @@ function InputSmall({
         ...inputProps,
         type: "search-text",
         ref: inputRef,
-        className: clsx7(
+        className: clsx9(
           {
             ["pl-1"]: collapsed
           },
@@ -1308,7 +1513,7 @@ function InputSmall({
     clearField && value && !disabled && /* @__PURE__ */ jsx(
       "i",
       {
-        className: clsx7(styles.clear, "uil uil-times"),
+        className: clsx9(styles.clear, "uil uil-times"),
         onClick: () => {
           elem.value = "";
           elem == null ? void 0 : elem.focus();
@@ -1323,7 +1528,7 @@ function InputSmall({
       "button",
       {
         type: "button",
-        className: clsx7({
+        className: clsx9({
           ["border-l border-input pl-1"]: clearField && value && !disabled,
           ["text-blue-500"]: !disabled,
           ["text-neutral-300"]: disabled,
@@ -1403,7 +1608,7 @@ var FilterOptions = ({
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx7(
+            className: clsx9(
               "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,
@@ -1415,7 +1620,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1427,7 +1632,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1439,7 +1644,7 @@ var FilterOptions = ({
               isSelected ? /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     "absolute inset-y-0 text-white right-0 flex items-center pr-4"
                   ),
                   children: /* @__PURE__ */ jsx("i", { className: "uil uil-check text-lg" })
@@ -1464,7 +1669,7 @@ var FilterOptions = ({
         return /* @__PURE__ */ jsx(
           Popover,
           {
-            className: clsx7(
+            className: clsx9(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1474,7 +1679,7 @@ var FilterOptions = ({
                 /* @__PURE__ */ jsx(Float.Reference, { children: /* @__PURE__ */ jsx(PopoverButton, { as: "button", children: /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: clsx7(
+                    className: clsx9(
                       {
                         [style.filter]: !hasValue && !open,
                         [style.filterOpen]: open && !hasValue,
@@ -1486,7 +1691,7 @@ var FilterOptions = ({
                       icon && /* @__PURE__ */ jsx(
                         "div",
                         {
-                          className: clsx7({
+                          className: clsx9({
                             ["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
@@ -1497,7 +1702,7 @@ var FilterOptions = ({
                       /* @__PURE__ */ jsx(
                         "label",
                         {
-                          className: clsx7(
+                          className: clsx9(
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1512,7 +1717,7 @@ var FilterOptions = ({
                       /* @__PURE__ */ jsx(
                         "i",
                         {
-                          className: clsx7(
+                          className: clsx9(
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1567,7 +1772,7 @@ var FilterOptions = ({
                                   return /* @__PURE__ */ jsx(
                                     "button",
                                     {
-                                      className: clsx7(
+                                      className: clsx9(
                                         {
                                           ["bg-blue-500 text-white"]: active,
                                           ["text-paragraph"]: !active
@@ -1626,7 +1831,7 @@ var FilterOptions = ({
                       isMulti && onSelectAll && /* @__PURE__ */ jsx("div", { className: "border-r pr-2 border-neutral-300", children: /* @__PURE__ */ jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             onSelectAll();
@@ -1640,7 +1845,7 @@ var FilterOptions = ({
                       onClear && /* @__PURE__ */ jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             if (onClear) {
@@ -1758,7 +1963,7 @@ function InputMoney({
             icon && /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7(
+                className: clsx9(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1772,7 +1977,7 @@ function InputMoney({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7({
+                  className: clsx9({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -1794,7 +1999,7 @@ function InputMoney({
               /* @__PURE__ */ jsxs(
                 "label",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       [styles.label]: true,
                       ["left-[46px]"]: icon,
@@ -1904,7 +2109,7 @@ function InputNumber({
             icon && /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7(
+                className: clsx9(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1918,7 +2123,7 @@ function InputNumber({
                   type: "number",
                   autoComplete: "off",
                   id: name,
-                  className: clsx7({
+                  className: clsx9({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -1969,7 +2174,7 @@ function InputNumber({
               /* @__PURE__ */ jsxs(
                 "label",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       [styles.label]: true,
                       ["left-[3.5rem]"]: icon,
@@ -1985,12 +2190,12 @@ function InputNumber({
                 }
               )
             ] }),
-            !hideArrows && /* @__PURE__ */ jsxs("div", { className: clsx7([styles.buttonsWrapper]), children: [
+            !hideArrows && /* @__PURE__ */ jsxs("div", { className: clsx9([styles.buttonsWrapper]), children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  className: clsx7([styles.button]),
+                  className: clsx9([styles.button]),
                   disabled,
                   onClick: () => {
                     if (!maxValue || maxValue && Number(value2 || 0) + 1 <= maxValue) {
@@ -2004,7 +2209,7 @@ function InputNumber({
                 "button",
                 {
                   type: "button",
-                  className: clsx7([styles.button]),
+                  className: clsx9([styles.button]),
                   disabled,
                   onClick: () => {
                     if (!maxValue || maxValue && Number(value2 === 0 ? 0 : Number(value2) - 1) <= maxValue) {
@@ -2094,7 +2299,7 @@ function InputPercentage({
             icon && /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7(
+                className: clsx9(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -2108,7 +2313,7 @@ function InputPercentage({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7({
+                  className: clsx9({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -2126,7 +2331,7 @@ function InputPercentage({
               /* @__PURE__ */ jsxs(
                 "label",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       [styles.label]: true,
                       ["left-[3rem]"]: icon,
@@ -2245,7 +2450,7 @@ var alertTypes = {
   info: "text-blue-500",
   primary: "text-rose-700"
 };
-var sizes2 = {
+var sizes3 = {
   xs: "w-[350px]",
   sm: "w-[662px]",
   md: "w-[960px]",
@@ -2302,10 +2507,10 @@ var ModalDialog = ({
         onRequestClose: onClose,
         style: customStyles3,
         contentLabel: "Example Modal",
-        children: /* @__PURE__ */ jsxs("div", { className: clsx7(sizes2[size]), children: [
+        children: /* @__PURE__ */ jsxs("div", { className: clsx9(sizes3[size]), children: [
           /* @__PURE__ */ jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
-              alertType && /* @__PURE__ */ jsx("div", { className: clsx7([alertTypes[alertType]], "text-[30px]"), children: icon }),
+              alertType && /* @__PURE__ */ jsx("div", { className: clsx9([alertTypes[alertType]], "text-[30px]"), children: icon }),
               title
             ] }),
             /* @__PURE__ */ jsx("button", { onClick: onCancel, className: "text-neutral-500 text-[24px]", children: /* @__PURE__ */ jsx("i", { className: "uil uil-times" }) })
@@ -2315,7 +2520,7 @@ var ModalDialog = ({
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7({
+                className: clsx9({
                   ["flex-1"]: info
                 }),
                 children: info
@@ -2589,7 +2794,7 @@ var SelectField = ({
                 alignItems: "center",
                 justifyContent: "space-between"
               },
-              children: /* @__PURE__ */ jsx("span", { className: clsx7("text-p-md focus:text-white"), children: props.data.label })
+              children: /* @__PURE__ */ jsx("span", { className: clsx9("text-p-md focus:text-white"), children: props.data.label })
             }
           ) });
         };
@@ -2666,7 +2871,7 @@ var SelectField = ({
           icon && /* @__PURE__ */ jsx(
             "div",
             {
-              className: clsx7(
+              className: clsx9(
                 "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,
@@ -2718,7 +2923,7 @@ var SelectField = ({
           /* @__PURE__ */ jsxs(
             "span",
             {
-              className: clsx7(
+              className: clsx9(
                 "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,
@@ -2970,7 +3175,7 @@ var SelectFieldBip = ({
                 alignItems: "center",
                 justifyContent: "space-between"
               },
-              children: /* @__PURE__ */ jsx("span", { className: clsx7("text-p-md focus:text-white"), children: props.data.label })
+              children: /* @__PURE__ */ jsx("span", { className: clsx9("text-p-md focus:text-white"), children: props.data.label })
             }
           ) });
         };
@@ -3109,7 +3314,7 @@ var SelectFieldBip = ({
           /* @__PURE__ */ jsxs(
             "span",
             {
-              className: clsx7(
+              className: clsx9(
                 "text-label text-sm left-2.5 cursor-pointer pointer-events-none",
                 {
                   [" scale-75 -translate-y-3 "]: field.value,
@@ -3343,7 +3548,7 @@ function PaginationSelect({
                 Combobox.Option,
                 {
                   value: opt,
-                  className: clsx7(
+                  className: clsx9(
                     "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
@@ -3418,7 +3623,7 @@ function PaginationSelect({
                 Combobox.Option,
                 {
                   value: opt,
-                  className: clsx7(
+                  className: clsx9(
                     "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
@@ -3438,7 +3643,7 @@ function PaginationSelect({
     ] })
   ] });
 }
-var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Table = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -3451,7 +3656,7 @@ var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "thead",
   {
     ref,
@@ -3460,9 +3665,9 @@ var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: clsx(className), ...props }));
+var TableBody = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: clsx(className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3474,9 +3679,9 @@ var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: clsx(className), ...props }));
+var TableRow = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: clsx(className), ...props }));
 TableRow.displayName = "TableRow";
-var TableHead = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -3491,7 +3696,7 @@ var TableHead = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -3503,7 +3708,7 @@ var TableCell = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -3557,10 +3762,10 @@ function DataTablePagination({
       (pageSizeOptions == null ? void 0 : pageSizeOptions.length) > 0 && /* @__PURE__ */ jsx(PaginationSelect, { table, pageSizeOptions }),
       /* @__PURE__ */ 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__ */ jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "link", children: [
+        selectAllOption && /* @__PURE__ */ jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
           "Selecionar todos os ",
           totalData
-        ] }) }) : /* @__PURE__ */ jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "link", children: "Desmarcar todos" }) }) })
+        ] }) }) : /* @__PURE__ */ jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row items-center md:justify-end justify-center gap-2 flex-1", children: [
         /* @__PURE__ */ jsxs("span", { className: "text-p-md text-paragraph mr-1", children: [
@@ -3958,7 +4163,7 @@ function DataTable({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx7("w-full flex mt-4 flex-col justify-between", {
+        className: clsx9("w-full flex mt-4 flex-col justify-between", {
           "flex-1": !hideTableData,
           [tableClass]: tableClass
         }),
@@ -3966,7 +4171,7 @@ function DataTable({
           /* @__PURE__ */ jsxs(
             Table,
             {
-              className: clsx7(
+              className: clsx9(
                 "w-full table_container z-20 overflow-x-scroll md:overflow-x-hidden"
               ),
               onScroll,
@@ -3993,7 +4198,7 @@ function DataTable({
                           width: header.getSize()
                         },
                         scope: "col",
-                        className: clsx7(
+                        className: clsx9(
                           {
                             "hover:bg-neutral-100 th-shadow cursor-pointer": header.column.getCanSort(),
                             ["with-shadow"]: (arrRowSelected == null ? void 0 : arrRowSelected.length) == 0 && withShadow
@@ -4009,7 +4214,7 @@ function DataTable({
                           ((_a2 = sorting[0]) == null ? void 0 : _a2.id) == header.column.id ? /* @__PURE__ */ jsx(
                             "i",
                             {
-                              className: clsx7(
+                              className: clsx9(
                                 {
                                   ["rotate-0"]: !((_b2 = sorting[0]) == null ? void 0 : _b2.desc),
                                   ["rotate-180"]: (_c2 = sorting[0]) == null ? void 0 : _c2.desc
@@ -4024,7 +4229,7 @@ function DataTable({
                     );
                   }) }, headerGroup.id + headerIndex + "header")) }),
                   /* @__PURE__ */ 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__ */ jsx(React2__default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxs(React2__default.Fragment, { children: [
+                    return /* @__PURE__ */ jsx(React4__default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxs(React4__default.Fragment, { children: [
                       /* @__PURE__ */ jsx(
                         TableRow,
                         {
@@ -4042,7 +4247,7 @@ function DataTable({
                                   backgroundColor: backgroundColor ? backgroundColor : "",
                                   ...stylesRow(row)
                                 },
-                                className: clsx7(
+                                className: clsx9(
                                   {
                                     ["hidden"]: cell.row.original._destroy,
                                     ["first:border-l last:border-r"]: borderFull,
@@ -4078,6 +4283,6 @@ function DataTable({
   ] });
 }
 
-export { Badge, Button, Calendar, Checkbox, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Logo, MaskedInput, ModalDialog, PaginationSelect, Popover3 as Popover, Radio, RocketIcon, SelectField, SelectFieldBip, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };
+export { Badge, Button, ButtonLink, Calendar, Checkbox, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Logo, MaskedInput, ModalDialog, PaginationSelect, Popover3 as Popover, Radio, RocketIcon, SelectField, SelectFieldBip, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer, sizes2 as sizes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map