nexaas-ui-components 1.0.77 → 1.0.79

package/dist/index.cjs

@@ -72,68 +72,102 @@ var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
+var xSmall = {
+  text: "h-6 min-w-6 !rounded-[6px] text-[12px] leading-[1.3]",
+  icon: "text-[12px] leading-3",
+  gap: "gap-[4px]",
+  spinner: "w-3 h-3"
+};
 var sizes = {
-  xxs: {
-    text: "h-[18px]",
-    icon: "text-[12px] leading-3"
-  },
-  xxsm: {
-    text: "h-6 min-w-6 max-w-6 !rounded-md",
-    icon: "text-[12px] leading-3"
-  },
+  xxs: xSmall,
+  xxsm: xSmall,
   xs: {
     text: "h-8 min-w-8 max-w-20",
-    icon: "text-[16px] leading-4"
+    icon: "text-[16px] leading-4",
+    gap: "gap-[6px]",
+    spinner: "w-3.5 h-3.5"
   },
   sm: {
-    text: "h-[32px] text-[12px]",
-    icon: "text-[12px] leading-3"
+    text: "h-[32px] text-[14px]",
+    icon: "text-[14px] leading-[14px]",
+    gap: "gap-[4px]",
+    spinner: "w-3 h-3"
   },
   md: {
     text: "h-[38px]",
-    icon: "text-[20px] leading-5"
+    icon: "text-[20px] leading-5",
+    gap: "gap-[6px]",
+    spinner: "w-3.5 h-3.5"
   },
   lg: {
     text: "h-[46px]",
-    icon: "text-[20px] leading-5"
+    icon: "text-[20px] leading-5",
+    gap: "gap-[6px]",
+    spinner: "w-3.5 h-3.5"
   }
 };
+var SHADOW_XS_NEUTRAL = "shadow-[0px_1px_1px_0px_rgba(56,61,77,0.1)]";
+var SHADOW_SM_NEUTRAL = "shadow-[0px_1px_1.5px_0px_rgba(56,61,77,0.12)]";
+var NEUTRAL_BORDERED_VARIANTS = /* @__PURE__ */ new Set([
+  "secondary",
+  "outline",
+  "dangerOutline",
+  "successOutline"
+]);
 var variants = {
+  // Default sólido (rose-500) + sombra rosa; gradiente (rose-start/rose-end,
+  // os tokens que o ButtonLink já usa corretamente) só aparece no hover;
+  // active vira rose-600 sólido sem sombra. Antes o gradiente era o default
+  // com hex soltos que não batiam com nenhum token do design system.
   primary: {
-    text: "bg-gradient-to-b from-[#FF4D8B] to-[#DA3063] text-white shadow-[0_2px_6px_0_rgba(218,48,99,0.25)] hover:from-[#ff4d84] hover:to-[#df4573] active:from-[#ae264f] active:to-[#ae264f] disabled:opacity-50 disabled:shadow-none active:shadow-none disabled:hover:from-[#FF4D8B] disabled:hover:to-[#DA3063]"
+    text: "bg-rose-500 text-white shadow-[0_1px_2px_0_rgba(217,48,99,0.3)] hover:bg-gradient-to-b hover:from-rose-start hover:to-rose-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-rose-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
   },
   secondary: {
-    text: "shadow-button bg-surface border-[0.5px] border-neutral-300 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:bg-neutral-200 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
+    text: "bg-surface border-[0.5px] border-neutral-300 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:bg-neutral-200 active:shadow-none disabled:opacity-50"
   },
   icon: {
-    text: "shadow-button gap-1 bg-surface border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
+    text: "shadow-[0_1px_1px_0_rgba(56,61,77,0.1)] gap-1 bg-surface border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:bg-neutral-200 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
   },
+  // Figma: borda rose-400 (mais clara que o texto rose-500), sem escurecer o
+  // texto em hover/active. Active vira preenchimento sólido rose-500 com
+  // texto branco. Disabled clareia pra rose-300 em vez de escurecer.
   outline: {
-    text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 hover:text-rose-600 active:bg-rose-100 active:text-rose-600 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
+    text: "bg-surface border-[0.5px] border-rose-400 text-rose-500 hover:bg-rose-100 active:bg-rose-500 active:text-white active:border-transparent active:shadow-none disabled:bg-surface disabled:border-rose-300 disabled:text-rose-300 disabled:shadow-none"
   },
   link: {
-    text: "text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-400 disabled:no-underline outline-none focus:outline-none shadow-none font-normal"
+    // blue-400 não existe no design system — o disabled não mudava de cor
+    // nenhuma antes disso, só perdia o underline.
+    text: "text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-500 disabled:opacity-50 disabled:no-underline outline-none focus:outline-none shadow-none font-normal"
   },
+  // Antes o default usava dangerous-300 (o tom claro que o Figma reserva pro
+  // disabled) — a borda/texto de força total é o estado default correto.
   dangerOutline: {
-    text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 hover:text-dangerous-600 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-dangerous-500 active:shadow-none"
+    text: "text-dangerous-500 bg-surface border-[0.5px] border-dangerous-500 hover:bg-dangerous-100 active:bg-dangerous-500 active:text-white active:border-transparent active:shadow-none disabled:bg-surface disabled:border-dangerous-300 disabled:text-dangerous-300 disabled:shadow-none"
   },
   danger: {
-    text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#fe6464] hover:to-[#e24e4e] active:from-dangerous-600 active:to-dangerous-600 disabled:opacity-50 disabled:from-dangerous-500 disabled:to-dangerous-500 active:shadow-none"
+    text: "shadow-[0_1px_1.5px_0_rgba(222,56,56,0.12)] text-white bg-dangerous-500 hover:bg-gradient-to-b hover:from-danger-start hover:to-danger-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-dangerous-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
   },
   success: {
-    text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#40f09b] hover:to-[#28c67a] active:from-success-600 active:to-success-600 disabled:opacity-50 disabled:from-success-start disabled:to-success-end active:shadow-none"
+    text: "shadow-[0_1px_1.5px_0_rgba(13,189,105,0.2)] text-white bg-success-500 hover:bg-gradient-to-b hover:from-success-start hover:to-success-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-success-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
   },
+  // Antes usava green-500/green-100 — tokens que não existem no design
+  // system (caem no verde default do Tailwind). Trocado pros tokens success-*.
   successOutline: {
-    text: "active:shadow-none shadow-green-sm text-green-500 font-bold bg-surface border-[0.5px] border-green-500 hover:bg-green-100 active:bg-green-500 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-green-500"
+    text: "active:shadow-none text-success-500 font-bold bg-surface border-[0.5px] border-success-500 hover:bg-success-100 active:bg-success-500 active:text-white active:border-transparent disabled:opacity-50 disabled:bg-surface disabled:text-success-500"
   },
   warn: {
-    text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#febd5b] hover:to-[#f4a52e] active:from-warning-600 active:to-warning-600 disabled:opacity-50 disabled:from-warning-start disabled:to-warning-end active:shadow-none"
+    text: "shadow-[0_1px_1.5px_0_rgba(242,153,20,0.2)] text-white bg-warning-500 hover:bg-gradient-to-b hover:from-warning-start hover:to-warning-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-warning-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
   },
   blue: {
     text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
   },
+  // Figma "Ghost button / Transparent" (pra usar sobre fundo colorido/escuro):
+  // fica transparente sempre — hover/active só ganham um véu branco (10%/20%),
+  // nunca fundo sólido, borda, ou mudança de cor do ícone. Antes o active usava
+  // um véu PRETO (bg-[#0A0A0A40]) e o disabled ganhava fundo branco + borda +
+  // texto cinza — nada disso existe no Figma, só 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-surface disabled:opacity-50 active:shadow-none"
+    text: "text-white bg-transparent hover:bg-[rgba(255,255,255,0.1)] active:bg-[rgba(255,255,255,0.2)] active:shadow-none disabled:opacity-50"
   },
   outlineIcon: {
     text: "bg-surface text-rose-500 hover:shadow-button hover:text-rose-600 active:bg-rose-500 active:text-white disabled:text-neutral-400 disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
@@ -143,18 +177,46 @@ var variants = {
   },
   ghost: {
     text: "bg-transparent hover:bg-neutral-100 !rounded-full text-paragraph active:bg-neutral-200 disabled:opacity-50"
+  },
+  // Novo: réplica do "Icon Button / Primary" do Figma — botão só-ícone
+  // preenchido. Diferente do primary em texto: aqui NÃO tem gradiente no
+  // hover (o Figma só troca a cor no active) e a sombra é neutra, não
+  // rosa — igual à sombra do "Icon Button / Danger" abaixo, só que cinza.
+  iconPrimary: {
+    text: "bg-rose-500 text-white shadow-[0px_1px_1.5px_0px_rgba(56,61,77,0.12)] active:bg-rose-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
+  },
+  // Novo: réplica do "Icon Button / Danger" do Figma — bordado em vermelho
+  // cheio (dangerous-500), diferente do outlineIcon (que é rose, não red).
+  iconDanger: {
+    text: "bg-surface border-[0.5px] border-dangerous-500 text-dangerous-500 shadow-[0px_1px_1.5px_0px_rgba(222,56,56,0.12)] hover:bg-dangerous-100 active:bg-dangerous-500 active:text-white active:border-transparent active:shadow-none disabled:opacity-50 disabled:shadow-none"
+  },
+  // Novo: réplica do "Ghost button / Neutral" do Figma — utilitário só-ícone
+  // sem borda, cor --label; distinto do `ghost` existente (pill com texto).
+  // Disabled vira fundo branco + opacity-50 (não fica transparente feito o
+  // default) — igual ao secondary comum.
+  ghostIcon: {
+    text: "bg-transparent text-label rounded-[6px] hover:bg-neutral-100 active:bg-neutral-200 disabled:bg-surface disabled:opacity-50"
+  },
+  // Novo: réplica do "Transparent button" do Figma — texto branco em negrito
+  // centralizado, pensado pra ficar sobre fundo colorido/escuro (ex.: banners,
+  // headers coloridos). Padding e radius próprios, independentes do size.
+  onColorText: {
+    text: "!rounded-[4px] justify-center bg-transparent text-white hover:bg-[rgba(214,214,214,0.15)] active:bg-[rgba(10,10,10,0.25)] active:shadow-none disabled:opacity-50 disabled:shadow-[0_2px_6px_0_rgba(56,61,77,0.12)]"
   }
 };
 var paddingConfig = {
+  // xxs fica sem padding de propósito (era assim antes) — usado em contextos
+  // sem chrome de botão (ex.: variant="link" como texto "ver mais/menos"),
+  // onde padding quebraria o alinhamento inline com o texto ao redor.
   xxs: {
     normal: "",
     icon: "",
     iconOnly: ""
   },
   xxsm: {
-    normal: "p-[5px]",
-    icon: "p-[5px]",
-    iconOnly: "p-[5px]"
+    normal: "px-2 py-1",
+    icon: "py-1 pl-2 pr-2.5",
+    iconOnly: "p-[6px]"
   },
   xs: {
     normal: "p-2",
@@ -187,8 +249,9 @@ var Button = ({
   const applyGap = props.icon && props.children;
   const appliedVariant = variants[variant].text;
   const appliedSize = sizes[size];
+  const neutralShadow = NEUTRAL_BORDERED_VARIANTS.has(variant) ? size === "lg" ? SHADOW_SM_NEUTRAL : SHADOW_XS_NEUTRAL : "";
   const appliedPadding = props.icon ? props.children ? paddingConfig[size].icon : paddingConfig[size].iconOnly : paddingConfig[size].normal;
-  const gapText = applyGap ? "gap-[6px]" : "gap-0";
+  const gapText = applyGap ? appliedSize.gap : "gap-0";
   React5.useEffect(() => {
     if (!hotkey || !props.onClick) return;
     const handleKeyDown = (event) => {
@@ -246,10 +309,11 @@ var Button = ({
             disabled: props.disabled || props.loading,
             className: `
           ${props.className}
-          ${appliedVariant} 
-          ${appliedSize.text} 
-          ${appliedPadding} 
-          ${gapText} 
+          ${appliedVariant}
+          ${neutralShadow}
+          ${appliedSize.text}
+          ${appliedPadding}
+          ${gapText}
           whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px]
         `,
             children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -260,7 +324,7 @@ var Button = ({
                   children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsxRuntime.jsx(
                     SpinnerIcon,
                     {
-                      className: "animate-spin w-4 h-4",
+                      className: `animate-spin ${appliedSize.spinner}`,
                       fill: "currentColor"
                     }
                   )
@@ -271,7 +335,7 @@ var Button = ({
                 "- ",
                 hotkeyLabel
               ] }),
-              props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[18px]" })
+              props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" })
             ] })
           }
         ),
@@ -501,8 +565,8 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:text-disabled disabled:cursor-not-allowed focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
-      ${!hasError ? "border-neutral-300" : ""}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-[var(--input-bg-disabled)] disabled:border-[var(--input-border-disabled)] disabled:text-disabled disabled:cursor-not-allowed disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
+      ${!hasError ? "border-stroke" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
@@ -762,7 +826,7 @@ var DatePickerInput = React5.forwardRef(
     ];
     const hasError = fieldValidationMessages.some((item) => item !== void 0);
     const styles = {
-      input: `text-p-md text-paragraph bg-surface border border-neutral-300 rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 focus:border-blue-500 `,
+      input: `text-p-md text-paragraph bg-surface shadow-input border-[0.5px] rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 disabled:shadow-none focus:border-[1.5px] focus:border-blue-500 ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke"}`,
       icon: `absolute bg-light-gray-100 h-[44px] w-[38px] top-[1px] left-[1px] rounded-l-lg rounded-r-none  ${hasError ? "text-dangerous-700" : "text-label"}`,
       label: "absolute text-label text-sm",
       clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
@@ -1632,7 +1696,10 @@ function InputSmall({
   const styles = {
     input: `text-p-md text-paragraph w-full outline-none placeholder:text-label disabled:text-disabled disabled:cursor-not-allowed bg-transparent`,
     icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
-    wrapper: `shadow-input border border-neutral-300 focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between disabled:bg-neutral-100 ${disabled ? "bg-neutral-100" : "bg-surface"} ${className}`,
+    // disabled fica no <input> interno, não neste wrapper — por isso o
+    // estado desabilitado é resolvido via ternário em vez de `disabled:`
+    // (pseudo-classe que nunca dispararia numa div).
+    wrapper: `border-[0.5px] border-stroke focus-within:border-[1.5px] focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between ${disabled ? "bg-neutral-100 shadow-none" : "bg-surface shadow-input"} ${className}`,
     clear: "pr-[5px] cursor-pointer text-label text-[16px]"
   };
   const elem = inputRef == null ? void 0 : inputRef.current;
@@ -1684,7 +1751,7 @@ function InputSmall({
           ["pl-[2px]"]: collapsed
         }),
         onClick: searchOnClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search text-[16px] mr-2 pl-1" })
+        children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search text-[16px] rounded-full p-1.5 hover:bg-blue-100 active:bg-blue-500 active:text-white transition-colors" })
       }
     ) })
   ] });
@@ -1703,6 +1770,7 @@ var FilterOptions = ({
   subFilters = [],
   emptyMessage,
   initialMessage,
+  initialMessageClassName,
   applyOnClick = false,
   showFilter = false,
   renderOption,
@@ -1991,7 +2059,372 @@ var FilterOptions = ({
                                     "Carregando"
                                   ] }),
                                   (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) > 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: emptyMessage }) }),
-                                  initialMessage && (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) === 0 && !loading && (options == null ? void 0 : options.length) === 0 && !(currentValue == null ? void 0 : currentValue.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: initialMessage }) }),
+                                  initialMessage && (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) === 0 && !loading && (options == null ? void 0 : options.length) === 0 && !(currentValue == null ? void 0 : currentValue.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default("py-4", initialMessageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: initialMessage }) }),
+                                  initialMessage && currentValue && (currentValue == null ? void 0 : currentValue.id) && (filter == null ? void 0 : filter.length) === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: isMulti ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: currentValue == null ? void 0 : currentValue.map((option) => {
+                                    let isSelected = isMulti ? currentValue && (currentValue == null ? void 0 : currentValue.length) > 0 && (currentValue == null ? void 0 : currentValue.some(
+                                      (e) => e.id === option.id
+                                    )) : currentValue && (currentValue == null ? void 0 : currentValue.id) === option.id;
+                                    return optionStyle(
+                                      options,
+                                      isSelected
+                                    );
+                                  }) }) : optionStyle(field.value, true) }),
+                                  !loading && (data == null ? void 0 : data.map((option) => {
+                                    let isSelected = isMulti ? currentValue && currentValue.length > 0 && currentValue.some(
+                                      (e) => e.id === option.id
+                                    ) : currentValue && currentValue.id === option.id;
+                                    return optionStyle(option, isSelected);
+                                  }))
+                                ]
+                              }
+                            )
+                          }
+                        ),
+                        !applyOnClick && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
+                          isMulti && onSelectAll && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r pr-2 border-neutral-300", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              variant: "link",
+                              size: "xxs",
+                              onClick: () => {
+                                onSelectAll();
+                                field.onChange(options);
+                                setCurrentValue(options);
+                                close();
+                              },
+                              children: selectAllLabel
+                            }
+                          ) }),
+                          onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              variant: "link",
+                              size: "xxs",
+                              onClick: () => {
+                                if (onClear) {
+                                  onClear();
+                                  setCurrentValue([]);
+                                  field.onChange([]);
+                                }
+                                close();
+                              },
+                              children: clearLabel
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              size: "xs",
+                              variant: "secondary",
+                              onClick: () => {
+                                onClose();
+                              },
+                              children: cancelLabel
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              size: "xs",
+                              variant: "primary",
+                              disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
+                              onClick: () => {
+                                field.onChange(currentValue);
+                                if (onApply) onApply();
+                                close();
+                              },
+                              children: applyLabel
+                            }
+                          )
+                        ] })
+                      ] });
+                    }
+                  }
+                ) })
+              ] });
+            }
+          }
+        );
+      }
+    }
+  );
+};
+var FilterSelect = ({
+  icon,
+  label,
+  isMulti,
+  options = [],
+  onApply,
+  onClear,
+  onSelectAll,
+  control,
+  name,
+  fetch,
+  subFilters = [],
+  emptyMessage,
+  initialMessage,
+  initialMessageClassName,
+  applyOnClick = false,
+  showFilter = false,
+  renderOption,
+  searchPlaceholder = "Pesquisar",
+  panelClassName = "p-2",
+  applyLabel = "Aplicar",
+  cancelLabel = "Cancelar",
+  clearLabel = "Limpar",
+  selectAllLabel = "Marcar todos",
+  clearButton = true
+}) => {
+  const [currentValue, setCurrentValue] = React5.useState(isMulti ? [] : {});
+  const [data, setData] = React5.useState(() => options);
+  const [filter, setFilter] = React5.useState("");
+  const [subFilter, setSubFilter] = React5.useState(
+    (subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
+  );
+  const [loading, setLoading] = React5.useState(false);
+  const search = async () => {
+    if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
+      if (fetch) {
+        setData(await fetch(filter, subFilter));
+      } else {
+        const result = options.filter(
+          (opt) => {
+            var _a;
+            return (_a = opt == null ? void 0 : opt.label) == null ? void 0 : _a.toLowerCase().includes(filter.toLowerCase());
+          }
+        );
+        const order = result.sort((a, b) => {
+          var _a;
+          return (_a = a == null ? void 0 : a.label) == null ? void 0 : _a.toLowerCase();
+        });
+        setData(order);
+      }
+    } else {
+      setData([]);
+    }
+    setLoading(false);
+  };
+  React5.useEffect(() => {
+    setLoading(true);
+    const timeout = setTimeout(() => {
+      search();
+    }, 400);
+    return () => clearTimeout(timeout);
+  }, [filter]);
+  const optionStyle = (option, isSelected) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.ListboxOption,
+      {
+        disabled: option.disabled,
+        value: option,
+        as: React5.Fragment,
+        children: renderOption ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            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-100"]: !option.disabled && !isSelected,
+                ["text-disabled"]: option.disabled,
+                ["bg-blue-500 hover:bg-blue-500"]: isSelected
+              }
+            ),
+            children: renderOption(option, isSelected)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            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-100"]: !option.disabled && !isSelected,
+                ["text-disabled"]: option.disabled,
+                ["bg-blue-500 hover:bg-blue-500"]: isSelected
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: clsx9__default.default(
+                    {
+                      ["font-semibold text-accent-label"]: isSelected
+                    },
+                    "text-wrap break-words font-normal block"
+                  ),
+                  children: option == null ? void 0 : option.label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: clsx9__default.default(
+                    {
+                      ["font-semibold text-accent-label"]: isSelected,
+                      ["text-label"]: !isSelected
+                    },
+                    "w-[200px] whitespace-nowrap text-ellipsis overflow-hidden text-p-sm block"
+                  ),
+                  children: option == null ? void 0 : option.description
+                }
+              )
+            ]
+          }
+        )
+      },
+      option.id
+    );
+  };
+  const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => {
+        var _a, _b;
+        let hasValue = isMulti ? ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 : !!((_b = field == null ? void 0 : field.value) == null ? void 0 : _b.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          react.Popover,
+          {
+            className: clsx9__default.default(
+              { ["w-full"]: isMobileSize },
+              "relative text-paragraph"
+            ),
+            children: ({ open }) => {
+              var _a2, _b2;
+              return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Float, { composable: true, shift: 8, zIndex: 99, offset: 6, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    react.PopoverButton,
+                    {
+                      as: "button",
+                      className: clsx9__default.default(
+                        "group/chip flex items-center justify-center gap-[6px] rounded-lg px-3 py-2 text-p-md font-bold outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px]",
+                        hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] hover:bg-blue-500 hover:border-transparent hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : "bg-surface border-[0.5px] border-stroke text-paragraph shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500"
+                      ),
+                      children: [
+                        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[18px] leading-none", children: icon }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate cursor-pointer", children: isMulti ? label : ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.id) ? (_b2 = field == null ? void 0 : field.value) == null ? void 0 : _b2.label : label }),
+                        isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[2px] bg-blue-500 px-1 py-px text-p-xs text-white group-hover/chip:bg-[#007fb0] group-active/chip:bg-[#007fb0]", children: field.value.length }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "i",
+                          {
+                            className: clsx9__default.default(
+                              "text-[18px]",
+                              open ? "uil uil-angle-up" : "uil uil-angle-down",
+                              // Some quando o X de limpar aparece, pra não sobrepor.
+                              hasValue && clearButton ? "group-hover:opacity-0 group-active:opacity-0" : ""
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  hasValue && clearButton && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": clearLabel,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        const emptyValue = isMulti ? [] : null;
+                        field.onChange(emptyValue);
+                        setCurrentValue(isMulti ? [] : {});
+                        if (onClear) onClear();
+                      },
+                      className: clsx9__default.default(
+                        "absolute right-0 top-1/2 hidden h-9 -translate-y-1/2 items-center justify-end rounded-r-lg pl-2 pr-1",
+                        "bg-gradient-to-l from-blue-500 via-blue-500 via-[69%] to-transparent",
+                        "group-hover:flex group-active:flex group-active:from-[#007fb0] group-active:via-[#007fb0]"
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-[18px]" }) })
+                    }
+                  )
+                ] }) }),
+                open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  react.PopoverPanel,
+                  {
+                    className: clsx9__default.default(
+                      "whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200",
+                      panelClassName
+                    ),
+                    children: ({ close }) => {
+                      const onClose = () => {
+                        setCurrentValue(field.value);
+                        close();
+                      };
+                      React5.useEffect(() => {
+                        setCurrentValue(field.value);
+                      }, [open]);
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          react.Listbox,
+                          {
+                            value: currentValue || [],
+                            onChange: setCurrentValue,
+                            multiple: isMulti,
+                            children: /* @__PURE__ */ jsxRuntime.jsxs(
+                              react.ListboxOptions,
+                              {
+                                static: true,
+                                className: clsx9__default.default(
+                                  "max-h-60 w-full overflow-x-hidden overflow-y-auto bg-surface text-p-md focus:outline-none sm:text-sm relative",
+                                  {
+                                    "pr-2": options.some(
+                                      (option) => option.description
+                                    ) ? options.length > 3 : options.length > 4
+                                  }
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-1 sticky top-0 z-30", children: [
+                                    showFilter && /* @__PURE__ */ jsxRuntime.jsx(
+                                      InputSmall,
+                                      {
+                                        icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search" }),
+                                        onChange: (e) => setFilter(e),
+                                        value: filter,
+                                        placeholder: searchPlaceholder,
+                                        clearField: true,
+                                        onKeyDown: (e) => {
+                                          if (e.key === " " || e.code === "Space") {
+                                            e.stopPropagation();
+                                          }
+                                        }
+                                      }
+                                    ),
+                                    subFilters && fetch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 pt-2 bg-surface", children: subFilters.map((item, index) => {
+                                      const active = (item == null ? void 0 : item.id) === subFilter;
+                                      return /* @__PURE__ */ jsxRuntime.jsx(
+                                        "button",
+                                        {
+                                          className: clsx9__default.default(
+                                            {
+                                              ["bg-blue-500 text-accent-label"]: active,
+                                              ["text-paragraph"]: !active
+                                            },
+                                            `rounded-[20px] border-[0.5px] border-neutral-200 px-4 py-[6px]`
+                                          ),
+                                          onClick: () => {
+                                            if (subFilter == item.id) {
+                                              setSubFilter(null);
+                                            } else {
+                                              setSubFilter(item.id);
+                                            }
+                                          },
+                                          children: item.name
+                                        },
+                                        index
+                                      );
+                                    }) })
+                                  ] }),
+                                  loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 w-full my-4", children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin w-[16px] h-[16px]" }),
+                                    "Carregando"
+                                  ] }),
+                                  (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) > 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: emptyMessage }) }),
+                                  initialMessage && (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) === 0 && !loading && (options == null ? void 0 : options.length) === 0 && !(currentValue == null ? void 0 : currentValue.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default("py-4", initialMessageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: initialMessage }) }),
                                   initialMessage && currentValue && (currentValue == null ? void 0 : currentValue.id) && (filter == null ? void 0 : filter.length) === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: isMulti ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: currentValue == null ? void 0 : currentValue.map((option) => {
                                     let isSelected = isMulti ? currentValue && (currentValue == null ? void 0 : currentValue.length) > 0 && (currentValue == null ? void 0 : currentValue.some(
                                       (e) => e.id === option.id
@@ -2125,7 +2558,7 @@ function InputMoney({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
         `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2247,12 +2680,12 @@ function InputNumber({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-3 peer text-paragraph bg-surface border-[0.5px] rounded-lg outline-none block pb-[10px] h-[44px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px]  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500 shadow-none" : "border-stroke focus-visible:border-blue-500 shadow-input"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
       `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
     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"
+    button: `border-[0.5px] border-neutral-300 rounded shadow-[0px_1px_1px_rgba(56,61,77,0.1)] h-4 w-4 flex items-center justify-center ${disabled ? "bg-neutral-100" : "bg-surface"}`
   };
   const [debouncedCount, setDebouncedCount] = React5.useState(0);
   const save = () => {
@@ -2460,7 +2893,7 @@ function InputPercentage({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px]  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
     `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2768,7 +3201,7 @@ var ModalDialog = ({
     )
   ] });
 };
-var Popover3 = ({
+var Popover4 = ({
   id,
   displayArrow = true,
   openOnClick = false
@@ -2809,13 +3242,17 @@ var customStyles = {
     var _a;
     return {
       ...provided,
-      color: "var(--paragraph)",
+      color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)",
       transform: ((_a = state == null ? void 0 : state.selectProps) == null ? void 0 : _a.menuIsOpen) ? "rotate(180deg)" : "rotate(0)",
       ":hover": {
-        color: "var(--paragraph)"
+        color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)"
       }
     };
   },
+  placeholder: (provided, state) => ({
+    ...provided,
+    color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
+  }),
   input: (provided, state) => ({
     ...provided,
     color: "var(--paragraph)",
@@ -2842,20 +3279,23 @@ var customStyles = {
     color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "var(--paragraph)",
     display: "flex"
   }),
-  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(--neutral-300)",
-    boxShadow: state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "none",
-    outline: "none",
-    borderRadius: state.isFocused ? "2px" : "0.5rem",
-    placeholder: " ",
-    height: state.selectProps.smallField ? "30px" : "46px",
-    backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
-    ":hover": {
-      border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
-    }
-  }),
+  control: (provided, state) => {
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.menuIsOpen ? "1.5px solid var(--blue-700)" : "0.5px solid var(--stroke)";
+    return {
+      ...provided,
+      cursor: "pointer",
+      border,
+      boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      outline: "none",
+      borderRadius: state.isFocused ? "2px" : "0.5rem",
+      placeholder: " ",
+      height: state.selectProps.smallField ? "30px" : "46px",
+      backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
+      ":hover": {
+        border
+      }
+    };
+  },
   multiValue: (provided) => ({
     ...provided,
     borderRadius: "20px",
@@ -3257,22 +3697,26 @@ var customStyles2 = {
   }),
   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(--neutral-300)",
-    boxShadow: state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "none",
-    outline: "none",
-    borderRadius: state.isFocused ? "2px" : "0.5rem",
-    placeholder: " ",
-    height: "46px",
-    backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
-    ":hover": {
-      border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
-    }
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
+    color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
   }),
+  control: (provided, state) => {
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.menuIsOpen ? "1.5px solid var(--blue-700)" : "0.5px solid var(--stroke)";
+    return {
+      ...provided,
+      cursor: "pointer",
+      border,
+      boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      outline: "none",
+      borderRadius: state.isFocused ? "2px" : "0.5rem",
+      placeholder: " ",
+      height: "46px",
+      backgroundColor: state.isDisabled ? "var(--input-bg-disabled)" : "var(--surface)",
+      ":hover": {
+        border
+      }
+    };
+  },
   multiValue: (provided) => ({
     ...provided,
     borderRadius: "20px",
@@ -4668,7 +5112,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Popover3, { id: "copy-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "copy-id" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral-400 text-xs", children })
             ]
           }
@@ -4680,7 +5124,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Popover3, { id: "icon-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "icon-id" }),
               /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-copy text-base text-blue-500 cursor-pointer -mt-[1px]" })
             ]
           }
@@ -4712,7 +5156,7 @@ var Menu = ({ triggerElement, children, className }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           react.MenuItems,
           {
-            className: `border-[0.5px] mt-1 color-neutral-300 flex min-w-[200px] flex-col gap-y-2 p-3 absolute right-0 z-[999] rounded-lg shadow-[2px_4px_8px_rgba(57,60,77,0.1)] bg-surface cursor-default ${className}`,
+            className: `border-[0.5px] mt-1 border-stroke flex min-w-[200px] flex-col p-2 absolute right-0 z-[999] rounded-lg shadow-[0px_4px_16px_rgba(56,61,77,0.1)] bg-surface cursor-default ${className}`,
             children
           }
         )
@@ -4725,9 +5169,9 @@ var Item = ({ index, isActive, onClick, children }) => {
     "div",
     {
       className: clsx9__default.default(
-        "h-[36px] p-2 rounded-lg items-center  cursor-pointer flex whitespace-nowrap no-underline ",
+        "p-3 rounded-lg items-center  cursor-pointer flex whitespace-nowrap no-underline ",
         {
-          "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": isActive
+          "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label font-bold": isActive
         },
         {
           "hover:bg-neutral-100 text-paragraph": !isActive
@@ -5640,7 +6084,7 @@ function InfoIcon({
       "data-tooltip-html": content,
       "data-tooltip-place": "top",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Popover3, { id }),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id }),
         /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
       ]
     }
@@ -5695,23 +6139,26 @@ var customStyles3 = {
     color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
     display: "flex"
   }),
-  control: (provided, state) => ({
-    ...provided,
-    cursor: "pointer",
-    border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
-    boxShadow: "none",
-    outline: "none",
-    borderRadius: "0.5rem",
-    paddingLeft: "0px",
-    placeholder: " ",
-    minHeight: "46px",
-    alignItems: "end",
-    paddingTop: "8px",
-    backgroundColor: "var(--surface)",
-    ":hover": {
-      border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
-    }
-  }),
+  control: (provided, state) => {
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.menuIsOpen ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
+    return {
+      ...provided,
+      cursor: "pointer",
+      border,
+      boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      outline: "none",
+      borderRadius: "0.5rem",
+      paddingLeft: "0px",
+      placeholder: " ",
+      minHeight: "46px",
+      alignItems: "end",
+      paddingTop: "8px",
+      backgroundColor: "var(--surface)",
+      ":hover": {
+        border
+      }
+    };
+  },
   multiValue: (provided) => ({
     ...provided,
     borderRadius: "20px",
@@ -5908,12 +6355,13 @@ var customStyles4 = {
     background: "var(--surface)"
   }),
   control: (provided, state) => {
+    const border = state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
     return {
       ...provided,
       cursor: "pointer",
       paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
-      border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
-      boxShadow: "none",
+      border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border,
+      boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
       borderRadius: "0.5rem",
       backgroundColor: "var(--surface)",
@@ -5922,7 +6370,7 @@ var customStyles4 = {
       placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
       alignItems: state.selectProps.hasLabel ? "end" : "center",
       ":hover": {
-        border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
+        border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border
         // height: "52px",
       },
       ":focus-within": {
@@ -6103,22 +6551,25 @@ var customStyles5 = {
     color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
     display: "flex"
   }),
-  control: (provided, state) => ({
-    ...provided,
-    cursor: "pointer",
-    border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
-    boxShadow: "none",
-    outline: "none",
-    borderRadius: "0.5rem",
-    paddingLeft: "8px",
-    placeholder: " ",
-    height: "46px",
-    alignItems: "end",
-    backgroundColor: "var(--surface)",
-    ":hover": {
-      border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
-    }
-  }),
+  control: (provided, state) => {
+    const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.menuIsOpen ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
+    return {
+      ...provided,
+      cursor: "pointer",
+      border,
+      boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
+      outline: "none",
+      borderRadius: "0.5rem",
+      paddingLeft: "8px",
+      placeholder: " ",
+      height: "46px",
+      alignItems: "end",
+      backgroundColor: "var(--surface)",
+      ":hover": {
+        border
+      }
+    };
+  },
   multiValue: (provided) => ({
     ...provided,
     borderRadius: "20px",
@@ -6843,7 +7294,7 @@ var TextArea = ({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `border border-neutral-800 rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 text-paragraph"}`,
+    input: `border-[0.5px] rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke text-paragraph"}`,
     label: `cursor-text absolute text-label top-[0.70rem] z-10 transform origin-[0] -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 left-2.5`
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -6990,8 +7441,8 @@ function ControlledInput({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px]  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
-      ${!hasError ? "border-neutral-300" : ""}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px] focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
+      ${!hasError ? "border-stroke" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label"}`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
@@ -7100,7 +7551,7 @@ function ControlledInput({
                   ["text-neutral-300"]: disabled
                 }),
                 onClick: searchOnClick,
-                children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search text-[16px] mr-2 pl-1" })
+                children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search text-[16px] rounded-full p-1.5 hover:bg-blue-100 active:bg-blue-500 active:text-white transition-colors" })
               }
             ) })
           ] }),
@@ -7138,6 +7589,7 @@ exports.EditableTextSelect = EditableTextSelect;
 exports.FileUpload = FileUpload;
 exports.FilterCalendar = FilterCalendar;
 exports.FilterOptions = FilterOptions;
+exports.FilterSelect = FilterSelect;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
 exports.InputMoney = InputMoney;
@@ -7154,7 +7606,7 @@ exports.MultiSelectBottom = MultiSelectBottom;
 exports.PageBox = PageBox;
 exports.PageHeader = PageHeader;
 exports.PaginationSelect = PaginationSelect;
-exports.Popover = Popover3;
+exports.Popover = Popover4;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.RocketIcon = RocketIcon;