nexaas-ui-components 1.0.17 → 1.0.19

package/dist/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx7 = require('clsx');
+var clsx9 = require('clsx');
 var datetime2 = require('@blueprintjs/datetime2');
-var React2 = require('react');
 var reactHookForm = require('react-hook-form');
 var zustand = require('zustand');
 var dateFns = require('date-fns');
@@ -39,45 +39,31 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var clsx7__default = /*#__PURE__*/_interopDefault(clsx7);
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var clsx9__default = /*#__PURE__*/_interopDefault(clsx9);
 var IntlCurrencyInputRaw__default = /*#__PURE__*/_interopDefault(IntlCurrencyInputRaw);
 var lodashNamespace__namespace = /*#__PURE__*/_interopNamespace(lodashNamespace);
 var InputMask__default = /*#__PURE__*/_interopDefault(InputMask);
 var ReactModalNamespace__namespace = /*#__PURE__*/_interopNamespace(ReactModalNamespace);
 var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
 
-// src/assets/spinner.tsx
-var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+// src/components/Button.tsx
+var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          className: "opacity-25",
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -130,9 +116,6 @@ var variants = {
   blue: {
     text: "shadow-button bg-blue-500 text-white text-bold"
   },
-  link: {
-    text: "text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-500 disabled:no-underline shadow-none font-normal disabled:opacity-50"
-  },
   iconSecondary: {
     text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
   },
@@ -165,6 +148,8 @@ var paddingConfig = {
 var Button = ({
   variant = "primary",
   size = "lg",
+  hotkey,
+  hotkeyPosition = "bottom",
   ...props
 }) => {
   const applyGap = props.icon && props.children;
@@ -172,14 +157,47 @@ var Button = ({
   const appliedSize = sizes[size];
   const appliedPadding = props.icon ? paddingConfig[size].icon : paddingConfig[size].normal;
   const gapText = applyGap ? "gap-[6px]" : "gap-0";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+  React4.useEffect(() => {
+    if (!hotkey || !props.onClick) return;
+    const handleKeyDown = (event) => {
+      var _a;
+      if (props.disabled || props.loading) return;
+      const keys = hotkey.toLowerCase().split("+").map((k) => k.trim());
+      const primaryKey = keys.pop();
+      if (!primaryKey) return;
+      const requiredCtrl = keys.includes("ctrl");
+      const requiredAlt = keys.includes("alt");
+      const requiredShift = keys.includes("shift");
+      const requiredMeta = keys.includes("meta") || keys.includes("cmd");
+      const match = event.key.toLowerCase() === primaryKey && event.ctrlKey === requiredCtrl && event.altKey === requiredAlt && event.shiftKey === requiredShift && event.metaKey === requiredMeta;
+      if (match) {
+        event.preventDefault();
+        (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hotkey, props.onClick, props.disabled, props.loading]);
+  const hotkeyLabel = hotkey && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-sm font-normal", children: hotkey.toUpperCase() });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      type: props.type,
-      id: "button-component",
-      ...props,
-      disabled: props.disabled || props.loading,
-      className: `
+      className: clsx9__default.default("inline-flex gap-[8px]", {
+        "flex-col items-center": hotkeyPosition === "top" || hotkeyPosition === "bottom",
+        "flex-row items-center": hotkeyPosition === "left" || hotkeyPosition === "right"
+      }),
+      children: [
+        hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--label)" }, className: "text-p-sm font-normal -mt-[5px]", children: hotkeyLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: props.type,
+            id: "button-component",
+            ...props,
+            disabled: props.disabled || props.loading,
+            className: `
           ${props.className}
           ${appliedVariant} 
           ${appliedSize.text} 
@@ -187,20 +205,193 @@ var Button = ({
           ${gapText} 
           whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center
         `,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        props.icon && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `flex items-center justify-center  ${appliedSize.icon}`,
-            children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin" })
+            children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              props.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `flex items-center justify-center  ${appliedSize.icon}`,
+                  children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin" })
+                }
+              ),
+              props.children,
+              props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[18px]" })
+            ] })
           }
         ),
-        props.children,
-        props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[18px]" })
-      ] })
+        hotkey && (hotkeyPosition === "bottom" || hotkeyPosition === "right") && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: { color: "var(--label)" },
+            className: "text-p-sm font-normal -mt-[5px]",
+            children: hotkeyLabel
+          }
+        )
+      ]
     }
   );
 };
+var sizes2 = {
+  xxs: {
+    text: "min-h-[14px] max-h-[40px]"
+  },
+  xs: {
+    text: "h-[36px]"
+  },
+  sm: {
+    text: "h-[40px]"
+  },
+  md: {
+    text: "h-[46px]"
+  },
+  table: {
+    text: "h-8 w-8"
+  }
+};
+var variants2 = {
+  primary: {
+    text: "shadow-button text-button-label bg-gradient-to-b hover:text-white from-rose-start to-rose-end active:bg-gradient-to-b active:from-rose-800 active:to-rose-800 disabled:bg-gradient-to-b disabled:from-rose-800 disabled:to-rose-800 disabled:opacity-50 hover:from-[#FD467F] hover:to-[#DF4573]"
+  },
+  secondary: {
+    text: "shadow-button bg-white border-[0.5px] border-paragraph text-dark-blue-600 hover:text-dark-blue-600 hover:bg-[#f5f5f5] active:bg-light-gray-100 disabled:text-dark-blue-400 disabled:bg-white disabled:border-[0.5px] disabled:border-dark-blue-400"
+  },
+  link: {
+    text: "text-blue-700 hover:text-blue-800 hover:underline active:text-blue-900 active:underline disabled:text-blue-700 disabled:no-underline shadow-none font-normal"
+  },
+  icon: {
+    text: "bg-white border-[0.5px] border-dark-blue-300 hover:bg-[#f5f5f5] active:bg-light-gray-100 hover:text-paragraph disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
+  },
+  iconSecondary: {
+    text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
+  },
+  outline: {
+    text: "shadow-button bg-white border-[0.5px] border-rose-700 text-rose-700 hover:bg-[#f5f5f5] active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-white disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
+  },
+  dark: {
+    text: "shadow-button text-white hover:bg-[#f5f5f526] active:bg-[#0a0a0a40] disabled:opacity-50 disabled:bg-transparent"
+  },
+  dangerLight: {
+    text: "shadow-button text-dangerous-700 font-bold bg-white border-[0.5px] border-dangerous-700 hover:bg-dangerous-100 active:bg-dangerous-700 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-700"
+  },
+  danger: {
+    text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#FD6363] hover:to-[#E34E4E] active:from-dangerous-800 active:to-dangerous-800 disabled:opacity-50 disabled:from-dangerous-700 disabled:to-dangerous-700"
+  },
+  success: {
+    text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#3FF09B] hover:to-[#27C579] active:from-success-800 active:to-success-800 disabled:opacity-50 disabled:from-success-700 disabled:to-success-700"
+  },
+  warn: {
+    text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#FEBD5D] hover:to-[#F4A42D] active:from-warning-800 active:to-warning-800 disabled:opacity-50 disabled:from-warning-700 disabled:to-warning-700"
+  },
+  blue: {
+    text: "shadow-button bg-blue-700 text-white text-bold"
+  },
+  filter: {
+    text: "shadow-button rounded-3xl border border-dark-blue-300 text-paragraph shadow-button hover:bg-light-gray-100 active:border active:border-blue-700 active:text-blue-700 active:bg-blue-100 focus:border focus:border-blue-700 focus:text-blue-700 focus:bg-blue-100"
+  },
+  filterActive: {
+    text: "shadow-button rounded-3xl border border-blue-700 text-blue-700 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-white active:text-white active:bg-blue-900 active:border-blue-900 focus:text-white focus:bg-blue-900 focus:border-blue-900"
+  }
+};
+var ButtonLink = React4.forwardRef(
+  ({
+    size = "md",
+    icon,
+    padding = "px-3",
+    label,
+    disabled,
+    name,
+    target,
+    variant = "link",
+    className,
+    as: LinkComponent = "a",
+    hotkey,
+    hotkeyPosition = "bottom",
+    ...props
+  }, ref) => {
+    var _a;
+    const applyGap = icon;
+    React4.useEffect(() => {
+      if (!hotkey) return;
+      const handleKeyDown = (event) => {
+        var _a2;
+        if (disabled) return;
+        const keys = hotkey.toLowerCase().split("+").map((k) => k.trim());
+        const primaryKey = keys.pop();
+        if (!primaryKey) return;
+        const requiredCtrl = keys.includes("ctrl");
+        const requiredAlt = keys.includes("alt");
+        const requiredShift = keys.includes("shift");
+        const requiredMeta = keys.includes("meta") || keys.includes("cmd");
+        const match = event.key.toLowerCase() === primaryKey && event.ctrlKey === requiredCtrl && event.altKey === requiredAlt && event.shiftKey === requiredShift && event.metaKey === requiredMeta;
+        if (match) {
+          event.preventDefault();
+          if (props.onClick) {
+            (_a2 = props.onClick) == null ? void 0 : _a2.call(props, event);
+          } else {
+            const linkElement = document.querySelector(`a[href="${props.href}"]`);
+            linkElement == null ? void 0 : linkElement.click();
+          }
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [hotkey, props.onClick, props.href, disabled]);
+    const hotkeyLabel = hotkey && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-sm font-normal", children: hotkey.toUpperCase() });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx9__default.default("inline-flex gap-[8px]", {
+          "flex-col items-center justify-center": hotkeyPosition === "top" || hotkeyPosition === "bottom",
+          "flex-row items-center justify-center": hotkeyPosition === "left" || hotkeyPosition === "right"
+        }),
+        children: [
+          hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { color: "var(--label)" },
+              className: "text-p-sm font-normal -mt-[5px]",
+              children: hotkeyLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            LinkComponent,
+            {
+              ref,
+              className: clsx9__default.default(
+                {
+                  [(_a = variants2[variant]) == null ? void 0 : _a.text]: true,
+                  [sizes2[size].text]: true,
+                  ["pointer-events-none shadow-none text-label"]: disabled,
+                  ["px-2"]: variant !== "link"
+                },
+                `group rounded-lg font-bold active:shadow-none font-title flex items-center justify-start cursor-pointer
+            ${applyGap ? "gap-2" : "gap-0"} ${className}
+            `
+              ),
+              target,
+              ...props,
+              download: name,
+              children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[20px] flex items-center justify-center", children: icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cursor-pointer line-clamp-2", children: label })
+              ]
+            }
+          ),
+          hotkey && (hotkeyPosition === "bottom" || hotkeyPosition === "right") && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { color: "var(--label)" },
+              className: "text-p-sm font-normal -mt-[5px]",
+              children: hotkeyLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ButtonLink.displayName = "ButtonLink";
 var Input = ({
   label,
   type,
@@ -251,7 +442,7 @@ var Input = ({
           value,
           defaultValue,
           style: !label && placeholder && icon || icon ? inlineStyles.inputWithIcon : void 0,
-          className: clsx7__default.default({
+          className: clsx9__default.default({
             [styles.error]: hasError,
             [styles.input]: true,
             ["pr-10"]: clearField,
@@ -272,14 +463,14 @@ var Input = ({
       icon && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: clsx7__default.default(styles.icon, "flex justify-center items-center"),
+          className: clsx9__default.default(styles.icon, "flex justify-center items-center"),
           children: icon
         }
       ),
       hideInput && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: clsx7__default.default(
+          className: clsx9__default.default(
             styles.rightIcon,
             "flex justify-center items-center"
           ),
@@ -290,7 +481,7 @@ var Input = ({
         "label",
         {
           style: icon ? inlineStyles.labelWithIcon : void 0,
-          className: clsx7__default.default(
+          className: clsx9__default.default(
             {
               [styles.label]: true,
               ["left-2.5"]: !icon
@@ -307,7 +498,7 @@ var Input = ({
       clearField && value && value !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
         "i",
         {
-          className: clsx7__default.default(
+          className: clsx9__default.default(
             {
               [styles.clear]: true
             },
@@ -433,7 +624,7 @@ var useFieldErrorsStore = zustand.create(
     }))
   })
 );
-var DatePickerInput = React2.forwardRef(
+var DatePickerInput = React4.forwardRef(
   ({
     icon,
     label,
@@ -454,12 +645,12 @@ var DatePickerInput = React2.forwardRef(
     popoverOffset
   }, ref) => {
     var _a;
-    const [invalidDate, setInvalidDate] = React2.useState(false);
-    const [showCalendar, setShowCalendar] = React2.useState(false);
-    const [inputWidth, setInputWidth] = React2.useState(0);
-    const inputContainerRef = React2.useRef(null);
+    const [invalidDate, setInvalidDate] = React4.useState(false);
+    const [showCalendar, setShowCalendar] = React4.useState(false);
+    const [inputWidth, setInputWidth] = React4.useState(0);
+    const inputContainerRef = React4.useRef(null);
     const dateFnsFormat = "dd/MM/yyyy";
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       const updateWidth = () => {
         if (inputContainerRef.current) {
           setInputWidth(inputContainerRef.current.offsetWidth + 10);
@@ -512,7 +703,7 @@ var DatePickerInput = React2.forwardRef(
                     "div",
                     {
                       id: "icon",
-                      className: clsx7__default.default(
+                      className: clsx9__default.default(
                         styles.icon,
                         "flex justify-center items-center text-[20px] bg-gray-100"
                       ),
@@ -559,7 +750,7 @@ var DatePickerInput = React2.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "label",
                     {
-                      className: clsx7__default.default(
+                      className: clsx9__default.default(
                         "pointer-events-none ",
                         styles.label,
                         `
@@ -576,7 +767,7 @@ var DatePickerInput = React2.forwardRef(
                   clearField && (field == null ? void 0 : field.value) && (field == null ? void 0 : field.value) !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
                     "i",
                     {
-                      className: clsx7__default.default(
+                      className: clsx9__default.default(
                         {
                           [styles.clear]: true
                         },
@@ -611,7 +802,7 @@ var DatePickerInput = React2.forwardRef(
     ] });
   }
 );
-var variants2 = {
+var variants3 = {
   success: "bg-success-100 text-success-600",
   warning: "bg-warning-100 text-warning-600",
   blue: "bg-blue-100 text-blue-500",
@@ -633,8 +824,8 @@ var Badge = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: clsx7__default.default(
-        { [variants2[variant]]: (variant == null ? void 0 : variant.length) > 0 },
+      className: clsx9__default.default(
+        { [variants3[variant]]: (variant == null ? void 0 : variant.length) > 0 },
         "py-1 px-2 text-p-md font-normal inline-flex items-center justify-center gap-1 rounded-full text-center",
         className
       ),
@@ -908,7 +1099,7 @@ var Checkbox = ({
       id: registration ? registration.name : key,
       disabled,
       type: "checkbox",
-      className: clsx7__default.default(
+      className: clsx9__default.default(
         "disabled:hover:bg-neutral-100 disabled:cursor-default cursor-pointer h-[16px] w-[16px] rounded-[2.5px] border border-neutral-200 text-blue-500 focus:rounded-[4px] focus:border-[1.5px] focus:ring-blue-500 focus-visible:ring-blue-500 checked:after:text-blue-500 disabled:bg-neutral-100"
       )
     }
@@ -940,8 +1131,8 @@ var FilterCalendar = ({
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
-  const [currentValue, setCurrentValue] = React2.useState([]);
-  const [calendarLabel, setCalendarLabel] = React2.useState("");
+  const [currentValue, setCurrentValue] = React4.useState([]);
+  const [calendarLabel, setCalendarLabel] = React4.useState("");
   const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
   const shorcuts = [
     {
@@ -1102,7 +1293,7 @@ var FilterCalendar = ({
       ]
     }
   ];
-  const [selectedShortcut, setSelectedShortcut] = React2.useState(
+  const [selectedShortcut, setSelectedShortcut] = React4.useState(
     defaultShortcut || shorcuts[0]
   );
   const calendar = /* @__PURE__ */ jsxRuntime.jsx("div", { id: "group-input-calendar", className: "relative", children: rangeCalendar ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1174,7 +1365,7 @@ var FilterCalendar = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           react.Popover,
           {
-            className: clsx7__default.default(
+            className: clsx9__default.default(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1184,7 +1375,7 @@ var FilterCalendar = ({
                 /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverButton, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: clsx7__default.default(
+                    className: clsx9__default.default(
                       {
                         [style.filter]: !hasValue && !open,
                         [style.filterOpen]: open && !hasValue,
@@ -1196,7 +1387,7 @@ var FilterCalendar = ({
                       icon && /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
-                          className: clsx7__default.default({
+                          className: clsx9__default.default({
                             ["text-label group-active:text-blue-500"]: !field.value && !open,
                             ["text-blue-500"]: open && !field.value,
                             ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
@@ -1207,7 +1398,7 @@ var FilterCalendar = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "label",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1223,7 +1414,7 @@ var FilterCalendar = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "i",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1241,7 +1432,7 @@ var FilterCalendar = ({
                     setCurrentValue(field.value);
                     close();
                   };
-                  React2.useEffect(() => {
+                  React4.useEffect(() => {
                     setCurrentValue(field.value);
                   }, [open]);
                   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -1250,7 +1441,7 @@ var FilterCalendar = ({
                       onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             if (onClear) {
@@ -1317,7 +1508,7 @@ function InputSmall({
   onClear,
   collapsed
 }) {
-  const inputRef = React2.useRef(null);
+  const inputRef = React4.useRef(null);
   const styles = {
     input: `text-p-md text-paragraph w-full outline-none placeholder:text-label`,
     icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
@@ -1325,8 +1516,8 @@ function InputSmall({
     clear: "pr-[5px] cursor-pointer text-label text-[16px]"
   };
   const elem = inputRef == null ? void 0 : inputRef.current;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default(styles.wrapper), children: [
-    icon && !searchOnClick && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx7__default.default(styles.icon), children: icon }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(styles.wrapper), children: [
+    icon && !searchOnClick && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default(styles.icon), children: icon }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -1334,7 +1525,7 @@ function InputSmall({
         ...inputProps,
         type: "search-text",
         ref: inputRef,
-        className: clsx7__default.default(
+        className: clsx9__default.default(
           {
             ["pl-1"]: collapsed
           },
@@ -1351,7 +1542,7 @@ function InputSmall({
     clearField && value && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
       "i",
       {
-        className: clsx7__default.default(styles.clear, "uil uil-times"),
+        className: clsx9__default.default(styles.clear, "uil uil-times"),
         onClick: () => {
           elem.value = "";
           elem == null ? void 0 : elem.focus();
@@ -1366,7 +1557,7 @@ function InputSmall({
       "button",
       {
         type: "button",
-        className: clsx7__default.default({
+        className: clsx9__default.default({
           ["border-l border-input pl-1"]: clearField && value && !disabled,
           ["text-blue-500"]: !disabled,
           ["text-neutral-300"]: disabled,
@@ -1400,13 +1591,13 @@ var FilterOptions = ({
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
-  const [currentValue, setCurrentValue] = React2.useState(isMulti ? [] : {});
-  const [data, setData] = React2.useState(() => options);
-  const [filter, setFilter] = React2.useState("");
-  const [subFilter, setSubFilter] = React2.useState(
+  const [currentValue, setCurrentValue] = React4.useState(isMulti ? [] : {});
+  const [data, setData] = React4.useState(() => options);
+  const [filter, setFilter] = React4.useState("");
+  const [subFilter, setSubFilter] = React4.useState(
     (subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
   );
-  const [loading, setLoading] = React2.useState(false);
+  const [loading, setLoading] = React4.useState(false);
   const search = async () => {
     if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
       if (fetch) {
@@ -1429,7 +1620,7 @@ var FilterOptions = ({
     }
     setLoading(false);
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setLoading(true);
     const timeout = setTimeout(() => {
       search();
@@ -1442,11 +1633,11 @@ var FilterOptions = ({
       {
         disabled: option.disabled,
         value: option,
-        as: React2.Fragment,
+        as: React4.Fragment,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: clsx7__default.default(
+            className: clsx9__default.default(
               "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
               {
                 ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
@@ -1458,7 +1649,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1470,7 +1661,7 @@ var FilterOptions = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       ["font-semibold text-white"]: isSelected
                     },
@@ -1482,7 +1673,7 @@ var FilterOptions = ({
               isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     "absolute inset-y-0 text-white right-0 flex items-center pr-4"
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-check text-lg" })
@@ -1507,7 +1698,7 @@ var FilterOptions = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           react.Popover,
           {
-            className: clsx7__default.default(
+            className: clsx9__default.default(
               { ["w-full"]: isMobileSize },
               "relative text-paragraph"
             ),
@@ -1517,7 +1708,7 @@ var FilterOptions = ({
                 /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverButton, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: clsx7__default.default(
+                    className: clsx9__default.default(
                       {
                         [style.filter]: !hasValue && !open,
                         [style.filterOpen]: open && !hasValue,
@@ -1529,7 +1720,7 @@ var FilterOptions = ({
                       icon && /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
-                          className: clsx7__default.default({
+                          className: clsx9__default.default({
                             ["text-label group-active:text-blue-500"]: !field.value && !open,
                             ["text-blue-500"]: open && !field.value,
                             ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
@@ -1540,7 +1731,7 @@ var FilterOptions = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "label",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1555,7 +1746,7 @@ var FilterOptions = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "i",
                         {
-                          className: clsx7__default.default(
+                          className: clsx9__default.default(
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
@@ -1573,7 +1764,7 @@ var FilterOptions = ({
                     setCurrentValue(field.value);
                     close();
                   };
-                  React2.useEffect(() => {
+                  React4.useEffect(() => {
                     setCurrentValue(field.value);
                   }, [open]);
                   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -1610,7 +1801,7 @@ var FilterOptions = ({
                                   return /* @__PURE__ */ jsxRuntime.jsx(
                                     "button",
                                     {
-                                      className: clsx7__default.default(
+                                      className: clsx9__default.default(
                                         {
                                           ["bg-blue-500 text-white"]: active,
                                           ["text-paragraph"]: !active
@@ -1669,7 +1860,7 @@ var FilterOptions = ({
                       isMulti && onSelectAll && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r pr-2 border-neutral-300", children: /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             onSelectAll();
@@ -1683,7 +1874,7 @@ var FilterOptions = ({
                       onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
-                          variant: "link",
+                          variant: "secondary",
                           size: "xxs",
                           onClick: () => {
                             if (onClear) {
@@ -1801,7 +1992,7 @@ function InputMoney({
             icon && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default(
+                className: clsx9__default.default(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1815,7 +2006,7 @@ function InputMoney({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7__default.default({
+                  className: clsx9__default.default({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -1837,7 +2028,7 @@ function InputMoney({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       [styles.label]: true,
                       ["left-[46px]"]: icon,
@@ -1906,13 +2097,13 @@ function InputNumber({
     buttonsWrapper: "absolute top-[7px] right-[10px] cursor-pointer text-label flex flex-col gap-[2px]",
     button: "border-[0.5px] border-neutral-300 rounded shadow-input h-4 w-4 flex items-center justify-center"
   };
-  const [debouncedCount, setDebouncedCount] = React2.useState(0);
+  const [debouncedCount, setDebouncedCount] = React4.useState(0);
   const save = () => {
     if (onBlur) {
       onBlur(value);
     }
   };
-  const updateCount = React2.useMemo(() => {
+  const updateCount = React4.useMemo(() => {
     return debounce_default(() => {
       save();
     }, 1e3);
@@ -1947,7 +2138,7 @@ function InputNumber({
             icon && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default(
+                className: clsx9__default.default(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -1961,7 +2152,7 @@ function InputNumber({
                   type: "number",
                   autoComplete: "off",
                   id: name,
-                  className: clsx7__default.default({
+                  className: clsx9__default.default({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -2012,7 +2203,7 @@ function InputNumber({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       [styles.label]: true,
                       ["left-[3.5rem]"]: icon,
@@ -2028,12 +2219,12 @@ function InputNumber({
                 }
               )
             ] }),
-            !hideArrows && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default([styles.buttonsWrapper]), children: [
+            !hideArrows && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default([styles.buttonsWrapper]), children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  className: clsx7__default.default([styles.button]),
+                  className: clsx9__default.default([styles.button]),
                   disabled,
                   onClick: () => {
                     if (!maxValue || maxValue && Number(value2 || 0) + 1 <= maxValue) {
@@ -2047,7 +2238,7 @@ function InputNumber({
                 "button",
                 {
                   type: "button",
-                  className: clsx7__default.default([styles.button]),
+                  className: clsx9__default.default([styles.button]),
                   disabled,
                   onClick: () => {
                     if (!maxValue || maxValue && Number(value2 === 0 ? 0 : Number(value2) - 1) <= maxValue) {
@@ -2137,7 +2328,7 @@ function InputPercentage({
             icon && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default(
+                className: clsx9__default.default(
                   styles.icon,
                   "flex justify-center items-center"
                 ),
@@ -2151,7 +2342,7 @@ function InputPercentage({
                   ...inputProps,
                   ...field,
                   type: "text",
-                  className: clsx7__default.default({
+                  className: clsx9__default.default({
                     [styles.input]: true,
                     ["pr-10"]: clearField,
                     ["pr-2"]: !clearField,
@@ -2169,7 +2360,7 @@ function InputPercentage({
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     {
                       [styles.label]: true,
                       ["left-[3rem]"]: icon,
@@ -2217,7 +2408,7 @@ var MaskedInput = ({
   defaultValue,
   disabled
 }) => {
-  const ref = React2.useRef(null);
+  const ref = React4.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -2288,7 +2479,7 @@ var alertTypes = {
   info: "text-blue-500",
   primary: "text-rose-700"
 };
-var sizes2 = {
+var sizes3 = {
   xs: "w-[350px]",
   sm: "w-[662px]",
   md: "w-[960px]",
@@ -2312,7 +2503,7 @@ var ModalDialog = ({
   description,
   children
 }) => {
-  const customStyles2 = {
+  const customStyles3 = {
     content: {
       top: "50%",
       left: "50%",
@@ -2330,7 +2521,7 @@ var ModalDialog = ({
       zIndex: 9999
     }
   };
-  const trigger = triggerButton ? React2.cloneElement(triggerButton, {
+  const trigger = triggerButton ? React4.cloneElement(triggerButton, {
     onClick: () => {
       onOpen();
     }
@@ -2343,12 +2534,12 @@ var ModalDialog = ({
         ariaHideApp: false,
         isOpen: open,
         onRequestClose: onClose,
-        style: customStyles2,
+        style: customStyles3,
         contentLabel: "Example Modal",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default(sizes2[size]), children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(sizes3[size]), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
-              alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx7__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
+              alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
               title
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onCancel, className: "text-neutral-500 text-[24px]", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times" }) })
@@ -2358,7 +2549,7 @@ var ModalDialog = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx7__default.default({
+                className: clsx9__default.default({
                   ["flex-1"]: info
                 }),
                 children: info
@@ -2553,13 +2744,13 @@ var SelectField = ({
 }) => {
   var _a;
   const { Option, DropdownIndicator, ClearIndicator, SingleValue } = reactSelect.components;
-  const selectRef = React2.useRef(null);
-  const [inputValue, setInputValue] = React2.useState("");
-  const [loading, setLoading] = React2.useState(false);
-  const [options, setOptions] = React2.useState(() => optionsList || []);
-  const [availableHeight, setAvailableHeight] = React2.useState(300);
-  const [isFocused, setIsFocused] = React2.useState(false);
-  React2.useEffect(() => {
+  const selectRef = React4.useRef(null);
+  const [inputValue, setInputValue] = React4.useState("");
+  const [loading, setLoading] = React4.useState(false);
+  const [options, setOptions] = React4.useState(() => optionsList || []);
+  const [availableHeight, setAvailableHeight] = React4.useState(300);
+  const [isFocused, setIsFocused] = React4.useState(false);
+  React4.useEffect(() => {
     const updateAvailableHeight = () => {
       var _a2, _b;
       if ((_a2 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a2.getBoundingClientRect) {
@@ -2607,7 +2798,7 @@ var SelectField = ({
   const hasIcon = {
     hasIcon: icon
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setOptions(() => optionsList);
   }, [optionsList]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2632,7 +2823,7 @@ var SelectField = ({
                 alignItems: "center",
                 justifyContent: "space-between"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx7__default.default("text-p-md focus:text-white"), children: props.data.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
             }
           ) });
         };
@@ -2709,7 +2900,7 @@ var SelectField = ({
           icon && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx7__default.default(
+              className: clsx9__default.default(
                 "z-[70]  absolute bg-neutral-100 top-[1px] left-[1px] rounded-l-lg flex justify-center items-center h-[44px] w-[38px] text-[22px] text-dark-blue-600",
                 {
                   "text-blue-500": isFocused && hasIcon.hasIcon,
@@ -2761,7 +2952,7 @@ var SelectField = ({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: clsx7__default.default(
+              className: clsx9__default.default(
                 "text-label text-sm left-2.5 cursor-pointer pointer-events-none absolute transition-all duration-200",
                 {
                   "scale-75 -translate-y-3": field.value || inputValue,
@@ -2796,6 +2987,393 @@ var SelectField = ({
 var ValueContainer = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(reactSelect.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 } = reactSelect.components;
+  const selectRef = React4.useRef(null);
+  const [inputValue, setInputValue] = React4.useState("");
+  const [loading, setLoading] = React4.useState(false);
+  const [cachedOptions, setCachedOptions] = React4.useState([]);
+  const fetchOptions = async (value) => {
+    if (isSearchable && filterOptions) {
+      if (!debounce2 || debounce2 && value.length >= debounce2) {
+        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 = React4.useMemo(() => {
+    return debounce_default((value, callback) => {
+      fetchOptions(value).then(callback);
+    }, 300);
+  }, [filterOptions]);
+  React4.useEffect(() => {
+    return () => {
+      debouncedFetchOptions.cancel();
+    };
+  }, [debouncedFetchOptions]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        const CustomSingleValue = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(SingleValue, { ...props, children: valueStyle ? valueStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            props.data.label,
+            " "
+          ] }) });
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: optionStyle ? optionStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const LoadingMessage = (props) => {
+          if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ...props.innerProps,
+                className: "flex items-center gap-[6px] p-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { width: 16, height: 16, className: "animate-spin" }),
+                  messages.searching
+                ]
+              }
+            );
+          } else if (debounce2 && inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", id: "multiselect", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconStyle, children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AsyncSelect__default.default,
+            {
+              onKeyDown: handleKeyDown,
+              ...field,
+              ...hasError,
+              ...hasLabel,
+              ...hasIcon,
+              ref: selectRef,
+              isDisabled: disabled,
+              onBlur: () => handleInputChange("", {
+                action: "input-change"
+              }),
+              loadingMessage: () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+                LoadingMessage,
+                NoOptionsMessage,
+                DropdownIndicator: DropdownIndicatorCustom
+              },
+              closeMenuOnSelect: false,
+              blurInputOnSelect: true,
+              hideSelectedOptions: false,
+              onChange,
+              inputValue,
+              onInputChange: handleInputChange
+            }
+          ),
+          inputValue !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+            "i",
+            {
+              onClick: () => onChange(null, "clear-value"),
+              className: "uil uil-times text-[18px] absolute right-2 top-[11px] cursor-pointer text-label"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: clsx9__default.default(
+                "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__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-700", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactSelect.components.ValueContainer, { ...props, children });
+};
 var Radio = ({
   disabled,
   control,
@@ -2922,22 +3500,22 @@ function PaginationSelect({
     id: index,
     name: index
   }));
-  const [pageSizeSelected, setPageSizeSelected] = React2.useState({
+  const [pageSizeSelected, setPageSizeSelected] = React4.useState({
     id: ((_a = JSON.parse(sessionStorage.getItem("pageSize"))) == null ? void 0 : _a.id) || 20,
     name: ((_b = JSON.parse(sessionStorage.getItem("pageSize"))) == null ? void 0 : _b.name) || 20
   });
-  const [pageSelected, setPageSelected] = React2.useState({
+  const [pageSelected, setPageSelected] = React4.useState({
     id: ((_d = (_c = table == null ? void 0 : table.getState()) == null ? void 0 : _c.pagination) == null ? void 0 : _d.pageIndex) || 0,
     name: ((_f = (_e = table == null ? void 0 : table.getState()) == null ? void 0 : _e.pagination) == null ? void 0 : _f.pageIndex) || 0
   });
-  const [pagesOptions, setPagesOptions] = React2.useState(() => options);
-  const [pageSizesOptions, setPagesSizesOptions] = React2.useState(
+  const [pagesOptions, setPagesOptions] = React4.useState(() => options);
+  const [pageSizesOptions, setPagesSizesOptions] = React4.useState(
     pageSizeOptions == null ? void 0 : pageSizeOptions.map((item) => ({
       id: item,
       name: item
     }))
   );
-  const [query, setQuery] = React2.useState("");
+  const [query, setQuery] = React4.useState("");
   const filter = () => {
     let copy = [...options];
     setPagesOptions(
@@ -2949,10 +3527,10 @@ function PaginationSelect({
   const saveSessionStorage = (key, values) => {
     sessionStorage.setItem(key, JSON.stringify(values));
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     filter();
   }, [query]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     saveSessionStorage("pageSize", pageSizeSelected);
     table.setPageSize(pageSizeSelected == null ? void 0 : pageSizeSelected.id);
     table.setPageIndex(0);
@@ -2961,7 +3539,7 @@ function PaginationSelect({
       name: 0
     });
   }, [pageSizeSelected]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     setPagesOptions(
       pageCount ? [...Array(pageCount)].map((item, index) => ({
         id: index,
@@ -2969,7 +3547,7 @@ function PaginationSelect({
       })) : []
     );
   }, [table == null ? void 0 : table.getPageCount()]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
     if (((_b2 = (_a2 = table == null ? void 0 : table.getState()) == null ? void 0 : _a2.pagination) == null ? void 0 : _b2.pageIndex) >= 0) {
       setPageSelected({
@@ -2999,7 +3577,7 @@ function PaginationSelect({
                 react.Combobox.Option,
                 {
                   value: opt,
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
                     {
                       "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
@@ -3074,7 +3652,7 @@ function PaginationSelect({
                 react.Combobox.Option,
                 {
                   value: opt,
-                  className: clsx7__default.default(
+                  className: clsx9__default.default(
                     "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
                     {
                       "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
@@ -3094,11 +3672,11 @@ function PaginationSelect({
     ] })
   ] });
 }
-var Table = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       "table-scroll block text-left border-separate border-spacing-0 w-full",
       className
     ),
@@ -3107,22 +3685,22 @@ var Table = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHeader = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "thead",
   {
     ref,
-    className: clsx7.clsx("w-full sticky top-0 z-[90]", className),
+    className: clsx9.clsx("w-full sticky top-0 z-[90]", className),
     ...props
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx7.clsx(className), ...props }));
+var TableBody = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx9.clsx(className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       " flex flex-col md:flex-row gap-2 md:gap-0 justify-between items-center py-4 px-6 bg-white w-full h-full border border-neutral-200 rounded-t-lg",
       className
     ),
@@ -3130,13 +3708,13 @@ var TableFooter = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx7.clsx(className), ...props }));
+var TableRow = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx9.clsx(className), ...props }));
 TableRow.displayName = "TableRow";
-var TableHead = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       {
         "hover:bg-neutral-100": props.sortable
       },
@@ -3147,11 +3725,11 @@ var TableHead = React2__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
-    className: clsx7.clsx(
+    className: clsx9.clsx(
       "align-middle h-[80px] border-b border-neutral-200 whitespace-nowrap py-4 px-5",
       className
     ),
@@ -3159,11 +3737,11 @@ var TableCell = React2__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
-    className: clsx7.clsx("text-default mt-4 text-sm", className),
+    className: clsx9.clsx("text-default mt-4 text-sm", className),
     ...props
   }
 ));
@@ -3213,10 +3791,10 @@ function DataTablePagination({
       (pageSizeOptions == null ? void 0 : pageSizeOptions.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(PaginationSelect, { table, pageSizeOptions }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-center md:justify-normal gap-2 md:gap-4", children: [
         footer,
-        selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "link", children: [
+        selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
           "Selecionar todos os ",
           totalData
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "link", children: "Desmarcar todos" }) }) })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center md:justify-end justify-center gap-2 flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-p-md text-paragraph mr-1", children: [
@@ -3272,7 +3850,7 @@ function DataTablePagination({
           pagesArray.map((elem, index) => {
             const checkPageIndexLimit = index <= limitPagePositive && index >= limitPageNegative;
             const isSelectedPage = index === selectedPage;
-            return /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 onClick: () => table.setPageIndex(index),
@@ -3382,22 +3960,22 @@ function DataTable({
   onFinishFetch
 }) {
   var _a, _b, _c, _d, _e, _f;
-  const tableRef = React2.useRef(null);
-  const [columnVisibility, setColumnVisibility] = React2.useState({});
-  const [columnFilters, setColumnFilters] = React2.useState([]);
-  const [sorting, setSorting] = React2.useState([]);
-  const [arrRowSelected, setArrRowSelected] = React2.useState([]);
-  const [globalFilter, setGlobalFilter] = React2.useState("");
-  const [dataTable, setDataTable] = React2.useState([]);
-  const [loading, setLoading] = React2.useState(true);
-  const [expanded, setExpanded] = React2.useState({});
-  const [total, setTotal] = React2.useState(() => totalData);
-  const [{ pageIndex, pageSize }, setPagination] = React2.useState({
+  const tableRef = React4.useRef(null);
+  const [columnVisibility, setColumnVisibility] = React4.useState({});
+  const [columnFilters, setColumnFilters] = React4.useState([]);
+  const [sorting, setSorting] = React4.useState([]);
+  const [arrRowSelected, setArrRowSelected] = React4.useState([]);
+  const [globalFilter, setGlobalFilter] = React4.useState("");
+  const [dataTable, setDataTable] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(true);
+  const [expanded, setExpanded] = React4.useState({});
+  const [total, setTotal] = React4.useState(() => totalData);
+  const [{ pageIndex, pageSize }, setPagination] = React4.useState({
     pageIndex: 0,
     pageSize: hidePagination ? 999999 : perPage ? perPage : 20
   });
-  const [paginationScroll, setPaginationScroll] = React2.useState();
-  const pagination = React2.useMemo(
+  const [paginationScroll, setPaginationScroll] = React4.useState();
+  const pagination = React4.useMemo(
     () => ({
       pageIndex,
       pageSize
@@ -3452,7 +4030,7 @@ function DataTable({
       pageCount: Number(pageSize2)
     };
   };
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!(tableContainerRef == null ? void 0 : tableContainerRef.current)) return;
     const resizeObserver = new ResizeObserver(() => {
       var _a2;
@@ -3461,12 +4039,12 @@ function DataTable({
     resizeObserver.observe(tableContainerRef == null ? void 0 : tableContainerRef.current);
     return () => resizeObserver.disconnect();
   }, []);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (fetchData || autoPagination) {
       fetch();
     }
   }, [pageIndex, pageSize, sorting]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (totalData !== total) {
       setPagination({
         pageIndex: 0,
@@ -3475,7 +4053,7 @@ function DataTable({
       setTotal(totalData);
     }
   }, [totalData]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (data) {
       setDataTable(
         () => autoPagination ? data.slice(0, pageSize) : data
@@ -3522,7 +4100,7 @@ function DataTable({
       getRowStyles: rowClassName
     }
   });
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (enableRowSelection && rowSelection) {
       setArrRowSelected(Object.keys(rowSelection));
     }
@@ -3575,7 +4153,7 @@ function DataTable({
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
   }
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (rowSelection && Object.keys(rowSelection).length == 0) {
       const elements = document.getElementsByClassName("th-shadow");
       Object.keys(elements).forEach((index) => {
@@ -3614,7 +4192,7 @@ function DataTable({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx7__default.default("w-full flex mt-4 flex-col justify-between", {
+        className: clsx9__default.default("w-full flex mt-4 flex-col justify-between", {
           "flex-1": !hideTableData,
           [tableClass]: tableClass
         }),
@@ -3622,7 +4200,7 @@ function DataTable({
           /* @__PURE__ */ jsxRuntime.jsxs(
             Table,
             {
-              className: clsx7__default.default(
+              className: clsx9__default.default(
                 "w-full table_container z-20 overflow-x-scroll md:overflow-x-hidden"
               ),
               onScroll,
@@ -3649,7 +4227,7 @@ function DataTable({
                           width: header.getSize()
                         },
                         scope: "col",
-                        className: clsx7__default.default(
+                        className: clsx9__default.default(
                           {
                             "hover:bg-neutral-100 th-shadow cursor-pointer": header.column.getCanSort(),
                             ["with-shadow"]: (arrRowSelected == null ? void 0 : arrRowSelected.length) == 0 && withShadow
@@ -3665,7 +4243,7 @@ function DataTable({
                           ((_a2 = sorting[0]) == null ? void 0 : _a2.id) == header.column.id ? /* @__PURE__ */ jsxRuntime.jsx(
                             "i",
                             {
-                              className: clsx7__default.default(
+                              className: clsx9__default.default(
                                 {
                                   ["rotate-0"]: !((_b2 = sorting[0]) == null ? void 0 : _b2.desc),
                                   ["rotate-180"]: (_c2 = sorting[0]) == null ? void 0 : _c2.desc
@@ -3680,7 +4258,7 @@ function DataTable({
                     );
                   }) }, headerGroup.id + headerIndex + "header")) }),
                   /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (_f = (_e = table == null ? void 0 : table.getRowModel()) == null ? void 0 : _e.rows) == null ? void 0 : _f.map((row, rowIndex) => {
-                    return /* @__PURE__ */ jsxRuntime.jsx(React2__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React2__namespace.default.Fragment, { children: [
+                    return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.default.Fragment, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         TableRow,
                         {
@@ -3698,7 +4276,7 @@ function DataTable({
                                   backgroundColor: backgroundColor ? backgroundColor : "",
                                   ...stylesRow(row)
                                 },
-                                className: clsx7__default.default(
+                                className: clsx9__default.default(
                                   {
                                     ["hidden"]: cell.row.original._destroy,
                                     ["first:border-l last:border-r"]: borderFull,
@@ -3736,6 +4314,7 @@ function DataTable({
 
 exports.Badge = Badge;
 exports.Button = Button;
+exports.ButtonLink = ButtonLink;
 exports.Calendar = Calendar;
 exports.Checkbox = Checkbox;
 exports.DataTable = DataTable;
@@ -3755,6 +4334,7 @@ exports.Popover = Popover3;
 exports.Radio = Radio;
 exports.RocketIcon = RocketIcon;
 exports.SelectField = SelectField;
+exports.SelectFieldBip = SelectFieldBip;
 exports.SpinnerIcon = SpinnerIcon;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -3766,5 +4346,6 @@ exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
 exports.Toggle = Toggle;
 exports.ValueContainer = ValueContainer;
+exports.sizes = sizes2;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map