nexaas-ui-components 1.0.17 → 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,37 +18,23 @@ 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
-var SpinnerIcon = (props) => /* @__PURE__ */ jsxs(
+// src/components/Button.tsx
+var SpinnerIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
+    ...props,
+    width: `${props.width || 33}`,
+    height: `${props.height || 33}`,
+    viewBox: "0 0 33 33",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: "opacity-25",
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          className: "opacity-75",
-          fill: "currentColor",
-          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        }
-      )
-    ]
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M21.4671 32.1821C18.269 33.1951 14.8378 33.2061 11.6333 32.2137C8.42885 31.2213 5.6044 29.2729 3.53866 26.6297C1.47293 23.9866 0.264665 20.7751 0.0758752 17.4258C-0.112914 14.0765 0.726798 10.7495 2.48242 7.89096C4.23804 5.03242 6.82565 2.77896 9.89828 1.43272C12.9709 0.0864894 16.3817 -0.288163 19.6733 0.359002C22.9649 1.00617 25.98 2.64421 28.3142 5.0535C30.6485 7.46279 32.1903 10.5282 32.7331 13.8386L28.9102 14.4653C28.4953 11.9345 27.3165 9.59102 25.532 7.74911C23.7474 5.9072 21.4424 4.65491 18.926 4.16015C16.4095 3.66539 13.802 3.95181 11.4529 4.98101C9.10388 6.01021 7.12564 7.73299 5.78346 9.91835C4.44128 12.1037 3.79932 14.6472 3.94365 17.2077C4.08798 19.7683 5.01171 22.2235 6.59097 24.2442C8.17023 26.2649 10.3295 27.7544 12.7794 28.5132C15.2292 29.2719 17.8524 29.2634 20.2973 28.489L21.4671 32.1821Z",
+        fill: "#009EDB"
+      }
+    )
   }
 );
 var sizes = {
@@ -101,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"
   },
@@ -136,6 +119,8 @@ var paddingConfig = {
 var Button = ({
   variant = "primary",
   size = "lg",
+  hotkey,
+  hotkeyPosition = "bottom",
   ...props
 }) => {
   const applyGap = props.icon && props.children;
@@ -143,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} 
@@ -158,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,
@@ -222,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,
@@ -243,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"
           ),
@@ -261,7 +452,7 @@ var Input = ({
         "label",
         {
           style: icon ? inlineStyles.labelWithIcon : void 0,
-          className: clsx7(
+          className: clsx9(
             {
               [styles.label]: true,
               ["left-2.5"]: !icon
@@ -278,7 +469,7 @@ var Input = ({
       clearField && value && value !== "" && !disabled && /* @__PURE__ */ jsx(
         "i",
         {
-          className: clsx7(
+          className: clsx9(
             {
               [styles.clear]: true
             },
@@ -483,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"
                       ),
@@ -530,7 +721,7 @@ var DatePickerInput = forwardRef(
                   /* @__PURE__ */ jsxs(
                     "label",
                     {
-                      className: clsx7(
+                      className: clsx9(
                         "pointer-events-none ",
                         styles.label,
                         `
@@ -547,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
                         },
@@ -582,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",
@@ -604,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
       ),
@@ -879,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"
       )
     }
@@ -1145,7 +1336,7 @@ var FilterCalendar = ({
         return /* @__PURE__ */ jsx(
           Popover,
           {
-            className: clsx7(
+            className: clsx9(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1155,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,
@@ -1167,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
@@ -1178,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,
@@ -1194,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,
@@ -1221,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) {
@@ -1296,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",
       {
@@ -1305,7 +1496,7 @@ function InputSmall({
         ...inputProps,
         type: "search-text",
         ref: inputRef,
-        className: clsx7(
+        className: clsx9(
           {
             ["pl-1"]: collapsed
           },
@@ -1322,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();
@@ -1337,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,
@@ -1417,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,
@@ -1429,7 +1620,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1441,7 +1632,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1453,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" })
@@ -1478,7 +1669,7 @@ var FilterOptions = ({
         return /* @__PURE__ */ jsx(
           Popover,
           {
-            className: clsx7(
+            className: clsx9(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1488,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,
@@ -1500,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
@@ -1511,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,
@@ -1526,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,
@@ -1581,7 +1772,7 @@ var FilterOptions = ({
                                   return /* @__PURE__ */ jsx(
                                     "button",
                                     {
-                                      className: clsx7(
+                                      className: clsx9(
                                         {
                                           ["bg-blue-500 text-white"]: active,
                                           ["text-paragraph"]: !active
@@ -1640,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();
@@ -1654,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) {
@@ -1772,7 +1963,7 @@ function InputMoney({
             icon && /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7(
+                className: clsx9(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1786,7 +1977,7 @@ function InputMoney({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7({
+                  className: clsx9({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -1808,7 +1999,7 @@ function InputMoney({
               /* @__PURE__ */ jsxs(
                 "label",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       [styles.label]: true,
                       ["left-[46px]"]: icon,
@@ -1918,7 +2109,7 @@ function InputNumber({
             icon && /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7(
+                className: clsx9(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1932,7 +2123,7 @@ function InputNumber({
                   type: "number",
                   autoComplete: "off",
                   id: name,
-                  className: clsx7({
+                  className: clsx9({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -1983,7 +2174,7 @@ function InputNumber({
               /* @__PURE__ */ jsxs(
                 "label",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       [styles.label]: true,
                       ["left-[3.5rem]"]: icon,
@@ -1999,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) {
@@ -2018,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) {
@@ -2108,7 +2299,7 @@ function InputPercentage({
             icon && /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7(
+                className: clsx9(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -2122,7 +2313,7 @@ function InputPercentage({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7({
+                  className: clsx9({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -2140,7 +2331,7 @@ function InputPercentage({
               /* @__PURE__ */ jsxs(
                 "label",
                 {
-                  className: clsx7(
+                  className: clsx9(
                     {
                       [styles.label]: true,
                       ["left-[3rem]"]: icon,
@@ -2259,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]",
@@ -2283,7 +2474,7 @@ var ModalDialog = ({
   description,
   children
 }) => {
-  const customStyles2 = {
+  const customStyles3 = {
     content: {
       top: "50%",
       left: "50%",
@@ -2314,12 +2505,12 @@ var ModalDialog = ({
         ariaHideApp: false,
         isOpen: open,
         onRequestClose: onClose,
-        style: customStyles2,
+        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" }) })
@@ -2329,7 +2520,7 @@ var ModalDialog = ({
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx7({
+                className: clsx9({
                   ["flex-1"]: info
                 }),
                 children: info
@@ -2603,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 })
             }
           ) });
         };
@@ -2680,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,
@@ -2732,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,
@@ -2767,6 +2958,393 @@ var SelectField = ({
 var ValueContainer = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(components.ValueContainer, { ...props, children });
 };
+
+// src/components/SelectFieldBip/SelectFieldBip.styles.tsx
+var customStyles2 = {
+  indicatorSeparator: (provided, props) => {
+    var _a;
+    return {
+      ...provided,
+      backgroundColor: props.hasValue && ((_a = provided == null ? void 0 : provided.selectProps) == null ? void 0 : _a.isSearchable) ? "var(--input)" : "transparent",
+      padding: "0px"
+    };
+  },
+  clearIndicator: (provided) => ({
+    ...provided,
+    color: "var(--label)",
+    ":hover": {
+      color: "var(--label)"
+    }
+  }),
+  dropdownIndicator: (provided, state) => {
+    var _a;
+    return {
+      ...provided,
+      color: "var(--paragraph)",
+      transform: ((_a = state == null ? void 0 : state.selectProps) == null ? void 0 : _a.menuIsOpen) ? "rotate(180deg)" : "rotate(0)",
+      ":hover": {
+        color: "var(--paragraph)"
+      }
+    };
+  },
+  input: (provided, state) => ({
+    ...provided,
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
+    paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
+  }),
+  menu: (provided) => ({
+    ...provided,
+    marginTop: "4px",
+    border: "1px solid var(--dark-blue-300)",
+    boxShadow: "none",
+    borderRadius: "8px",
+    background: "white",
+    zIndex: 60
+  }),
+  menuList: (provided) => ({
+    ...provided,
+    padding: "0px 8px"
+  }),
+  singleValue: (base, state) => ({
+    ...base,
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
+    paddingTop: state.selectProps.hasLabel ? "10px" : "0",
+    color: state.data.value === "active" ? "#0EAF86" : "black",
+    display: "flex"
+  }),
+  placeholder: (provided, state) => ({
+    ...provided,
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px"
+  }),
+  control: (provided, state) => ({
+    ...provided,
+    cursor: "pointer",
+    border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--dark-blue-300)",
+    boxShadow: "none",
+    outline: "none",
+    borderRadius: "0.5rem",
+    placeholder: " ",
+    height: "46px",
+    backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
+    ":hover": {
+      border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--dark-blue-300)"
+    }
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    borderRadius: "20px",
+    backgroundColor: "var(--light-100)",
+    padding: "0px 8px"
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: "var(--paragraph)"
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: "var(--dark-blue-400)",
+    ":hover": {
+      color: "var(--dangerous-700)"
+    }
+  }),
+  option: (provided, state) => {
+    let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
+    return {
+      ...provided,
+      cursor: state.isDisabled ? "auto" : "pointer",
+      pointerEvents: state.isDisabled ? "none" : "",
+      borderRadius: "8px",
+      margin: "4px 0px",
+      padding: "10px 12px",
+      backgroundColor: state.isSelected ? "var(--blue-700)" : "white",
+      color,
+      fontWeight: state.isSelected ? 700 : 400,
+      "&:hover": {
+        backgroundColor: state.isSelected ? "var(--blue-700)" : "var(--light-200)"
+      },
+      "&:active": {
+        backgroundColor: "var(--blue-700)",
+        color: "white !important",
+        fontWeight: 700
+      },
+      "&:active i": {
+        color: "white !important",
+        fontWeight: 700
+      },
+      " i": {
+        color: "white !important"
+      }
+    };
+  },
+  container: (provided) => ({
+    ...provided,
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+    padding: "none",
+    margin: "none"
+  })
+};
+var SelectFieldBip = ({
+  name,
+  label,
+  error,
+  defaultValue,
+  control,
+  placeholder,
+  isSearchable = false,
+  required,
+  debounce: debounce2,
+  filterOptions,
+  disabled,
+  onChangeValue,
+  optionStyle,
+  valueStyle,
+  icon,
+  onErrorBip,
+  clearAfterSelect = true,
+  messages = {
+    searching: "Searching...",
+    debounce: `Type at least {debounce} characters`,
+    emptyMessage: "No options found",
+    loading: "Loading..."
+  }
+}) => {
+  var _a;
+  const { Option, SingleValue } = components;
+  const selectRef = useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [cachedOptions, setCachedOptions] = useState([]);
+  const fetchOptions = async (value) => {
+    if (isSearchable && filterOptions) {
+      if (!debounce2 || debounce2 && value.length >= debounce2) {
+        setLoading(true);
+        const result = await filterOptions(value);
+        setCachedOptions(result);
+        setLoading(false);
+        return result;
+      }
+    }
+    return [];
+  };
+  const fieldValidation = useFieldErrorsStore((state) => state.field);
+  const fieldValidationMessages = [
+    (_a = fieldValidation[name]) == null ? void 0 : _a.message,
+    error == null ? void 0 : error.message
+  ];
+  const hasError = {
+    hasError: fieldValidationMessages.some((item) => item !== void 0)
+  };
+  const hasLabel = {
+    hasLabel: (label == null ? void 0 : label.length) > 0
+  };
+  const hasIcon = {
+    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 = useMemo(() => {
+    return debounce_default((value, callback) => {
+      fetchOptions(value).then(callback);
+    }, 300);
+  }, [filterOptions]);
+  useEffect(() => {
+    return () => {
+      debouncedFetchOptions.cancel();
+    };
+  }, [debouncedFetchOptions]);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        const CustomSingleValue = (props) => {
+          return /* @__PURE__ */ jsx(SingleValue, { ...props, children: valueStyle ? valueStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            props.data.label,
+            " "
+          ] }) });
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsx(Option, { ...props, children: optionStyle ? optionStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: /* @__PURE__ */ jsx("span", { className: clsx9("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const LoadingMessage = (props) => {
+          if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...props.innerProps,
+                className: "flex items-center gap-[6px] p-2",
+                children: [
+                  /* @__PURE__ */ jsx(SpinnerIcon, { width: 16, height: 16, className: "animate-spin" }),
+                  messages.searching
+                ]
+              }
+            );
+          } else if (debounce2 && inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
+          }
+        };
+        const NoOptionsMessage = (props) => {
+          var _a2;
+          if (inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
+          } else if (inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.emptyMessage });
+          }
+        };
+        const DropdownIndicatorCustom = (props) => {
+          return null;
+        };
+        const handleKeyDown = async (event) => {
+          var _a2;
+          if (event.key === "Enter") {
+            event.preventDefault();
+            debouncedFetchOptions.cancel();
+            const fetchedOptions = await fetchOptions(event.target.value);
+            if ((fetchedOptions == null ? void 0 : fetchedOptions.length) > 0) {
+              onChange(fetchedOptions[0]);
+              setTimeout(() => {
+                var _a3, _b, _c;
+                setInputValue("");
+                (_a3 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a3.clearValue();
+                (_b = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _b.focus();
+                (_c = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _c.onMenuClose();
+                field.onChange(null);
+              }, 10);
+            } else {
+              onErrorBip((_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.value);
+              selectRef.current.inputRef.select();
+              selectRef.current.onMenuClose();
+            }
+          }
+        };
+        const handleInputChange = (value, actionMeta) => {
+          if (actionMeta.action === "input-change") {
+            setInputValue(value);
+          }
+          return value;
+        };
+        const onChange = async (value, action) => {
+          var _a2, _b, _c, _d, _e;
+          if (onChangeValue) onChangeValue(value);
+          if ((action == null ? void 0 : action.action) === "select-option") {
+            if (clearAfterSelect) {
+              setInputValue("");
+              (_a2 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a2.clearValue();
+              (_b = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _b.onMenuClose();
+              (_c = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _c.focus();
+              field.onChange(null);
+            } else {
+              field.onChange(value);
+              setInputValue("");
+              (_d = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _d.onMenuClose();
+            }
+          }
+          if (action === "clear-value") {
+            setInputValue("");
+            setCachedOptions([]);
+            (_e = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _e.clearValue();
+            field.onChange(null);
+          }
+        };
+        const loadOptions = (value, callback) => {
+          debouncedFetchOptions(value, callback);
+        };
+        return /* @__PURE__ */ jsxs("div", { className: "relative", id: "multiselect", children: [
+          icon && /* @__PURE__ */ jsx("div", { className: iconStyle, children: icon }),
+          /* @__PURE__ */ jsx(
+            AsyncSelect,
+            {
+              onKeyDown: handleKeyDown,
+              ...field,
+              ...hasError,
+              ...hasLabel,
+              ...hasIcon,
+              ref: selectRef,
+              isDisabled: disabled,
+              onBlur: () => handleInputChange("", {
+                action: "input-change"
+              }),
+              loadingMessage: () => /* @__PURE__ */ jsx("div", { children: messages.loading }),
+              isLoading: loading,
+              loadOptions,
+              defaultOptions: false,
+              name: field.name,
+              isClearable: false,
+              styles: customStyles2,
+              placeholder: placeholder || " ",
+              isSearchable,
+              tabSelectsValue: true,
+              components: {
+                SingleValue: CustomSingleValue,
+                ValueContainer: ValueContainer2,
+                Option: IconOption,
+                LoadingIndicator: () => /* @__PURE__ */ jsx(Fragment, {}),
+                LoadingMessage,
+                NoOptionsMessage,
+                DropdownIndicator: DropdownIndicatorCustom
+              },
+              closeMenuOnSelect: false,
+              blurInputOnSelect: true,
+              hideSelectedOptions: false,
+              onChange,
+              inputValue,
+              onInputChange: handleInputChange
+            }
+          ),
+          inputValue !== "" && /* @__PURE__ */ jsx(
+            "i",
+            {
+              onClick: () => onChange(null, "clear-value"),
+              className: "uil uil-times text-[18px] absolute right-2 top-[11px] cursor-pointer text-label"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: clsx9(
+                "text-label text-sm left-2.5 cursor-pointer pointer-events-none",
+                {
+                  [" scale-75 -translate-y-3 "]: field.value,
+                  ["text-dangerous-700"]: hasError.hasError
+                }
+              ),
+              children: [
+                label,
+                required && label && /* @__PURE__ */ jsx("strong", { className: "text-dangerous-700", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-dangerous-700 text-xs mt-1 ml-[2px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          ))
+        ] });
+      }
+    }
+  );
+};
+var ValueContainer2 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(components.ValueContainer, { ...props, children });
+};
 var Radio = ({
   disabled,
   control,
@@ -2970,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
@@ -3045,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
@@ -3065,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,
@@ -3078,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,
@@ -3087,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,
@@ -3101,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,
@@ -3118,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,
@@ -3130,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,
@@ -3184,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: [
@@ -3585,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
         }),
@@ -3593,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,
@@ -3620,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
@@ -3636,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
@@ -3651,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,
                         {
@@ -3669,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,
@@ -3705,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, 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