@mw-kit/mw-ui 1.8.21 → 1.9.0

package/dist/index.mjs

@@ -640,36 +640,36 @@ var positions = {
   `
 };
 var pointerPositions = {
-  "top right": (distance, size3) => css2`
+  "top right": (distance, size4) => css2`
     top: ${distance};
-    left: calc(${size3} / 2 * -1);
+    left: calc(${size4} / 2 * -1);
   `,
-  "top left": (distance, size3) => css2`
+  "top left": (distance, size4) => css2`
     top: ${distance};
-    right: calc(${size3} / 2 * -1);
+    right: calc(${size4} / 2 * -1);
   `,
-  "bottom right": (distance, size3) => css2`
+  "bottom right": (distance, size4) => css2`
     bottom: ${distance};
-    left: calc(${size3} / 2 * -1);
+    left: calc(${size4} / 2 * -1);
   `,
-  "bottom left": (distance, size3) => css2`
+  "bottom left": (distance, size4) => css2`
     bottom: ${distance};
-    right: calc(${size3} / 2 * -1);
+    right: calc(${size4} / 2 * -1);
   `,
-  "right top": (distance, size3) => css2`
-    bottom: calc(${size3} / 2 * -1);
+  "right top": (distance, size4) => css2`
+    bottom: calc(${size4} / 2 * -1);
     right: ${distance};
   `,
-  "right bottom": (distance, size3) => css2`
-    top: calc(${size3} / 2 * -1);
+  "right bottom": (distance, size4) => css2`
+    top: calc(${size4} / 2 * -1);
     right: ${distance};
   `,
-  "left top": (distance, size3) => css2`
-    bottom: calc(${size3} / 2 * -1);
+  "left top": (distance, size4) => css2`
+    bottom: calc(${size4} / 2 * -1);
     left: ${distance};
   `,
-  "left bottom": (distance, size3) => css2`
-    top: calc(${size3} / 2 * -1);
+  "left bottom": (distance, size4) => css2`
+    top: calc(${size4} / 2 * -1);
     left: ${distance};
   `
 };
@@ -759,7 +759,7 @@ var Container = styled.div`
     distance: "s1",
     ...pointer === true ? {} : pointer
   };
-  const size3 = typeof config.size === "function" ? config.size(theme4) : isKeyOf(theme4.spacings, config.size) ? theme4.spacings[config.size] : config.size;
+  const size4 = typeof config.size === "function" ? config.size(theme4) : isKeyOf(theme4.spacings, config.size) ? theme4.spacings[config.size] : config.size;
   const distance = typeof config.distance === "function" ? config.distance(theme4) : isKeyOf(theme4.spacings, config.distance) ? theme4.spacings[config.distance] : config.distance;
   const color = typeof config.color === "function" ? config.color(theme4) : isKeyOf(theme4.colors, config.color) ? theme4.colors[config.color] : config.color;
   return css2`
@@ -768,10 +768,10 @@ var Container = styled.div`
 
         position: absolute;
 
-        ${pointerPositions[position](distance, size3)}
+        ${pointerPositions[position](distance, size4)}
 
-        width: ${size3};
-        height: ${size3};
+        width: ${size4};
+        height: ${size4};
 
         transform: rotate(45deg);
 
@@ -912,7 +912,7 @@ var loader = keyframes`
 `;
 var Container2 = styled2.div`
   ${({
-  $size: size3,
+  $size: size4,
   $borderSize: borderSize,
   $bgColor: bgColor,
   $color: color,
@@ -920,9 +920,9 @@ var Container2 = styled2.div`
   $filled: filled,
   $zIndex: zIndex
 }) => {
-  const s = borderSize || size3;
+  const s = borderSize || size4;
   borderSize = s ? `calc(${s} * 0.0757)` : "5px";
-  size3 = size3 || "48px";
+  size4 = size4 || "48px";
   color = color || "blue";
   bgColor = bgColor || color;
   const beforeColor = isKeyOf(theme4.colors, bgColor) ? theme4.getColor(bgColor, 25) : color;
@@ -950,10 +950,10 @@ var Container2 = styled2.div`
         position: absolute;
         content: '';
 
-        top: calc(50% - ${size3} / 2);
-        left: calc(50% - ${size3} / 2);
-        width: ${size3};
-        height: ${size3};
+        top: calc(50% - ${size4} / 2);
+        left: calc(50% - ${size4} / 2);
+        width: ${size4};
+        height: ${size4};
         border-radius: 50%;
         border-width: ${borderSize};
         border-style: solid;
@@ -974,7 +974,7 @@ var Container2 = styled2.div`
 var Loader = ({
   color,
   bgColor,
-  size: size3,
+  size: size4,
   borderSize,
   filled,
   zIndex,
@@ -986,7 +986,7 @@ var Loader = ({
       ...props,
       $color: color,
       $bgColor: bgColor,
-      $size: size3,
+      $size: size4,
       $borderSize: borderSize,
       $filled: filled,
       $zIndex: zIndex
@@ -1040,13 +1040,13 @@ var Button = styled3.button`
   position: relative;
   user-select: none;
 
-  ${({ $size: size3, theme: theme4 }) => {
+  ${({ $size: size4, theme: theme4 }) => {
   const { sizes: sizes3 } = theme4.components.button;
   return css4`
-      font-size: ${sizes3[size3].fontSize};
-      line-height: ${sizes3[size3].lineHeight};
-      min-width: ${sizes3[size3].minWidth};
-      min-height: ${sizes3[size3].minHeight};
+      font-size: ${sizes3[size4].fontSize};
+      line-height: ${sizes3[size4].lineHeight};
+      min-width: ${sizes3[size4].minWidth};
+      min-height: ${sizes3[size4].minHeight};
     `;
 }};
 
@@ -1130,13 +1130,13 @@ var Button = styled3.button`
 // src/components/Button/index.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Button2 = (props) => {
-  const { children, content, ...styled79 } = props;
+  const { children, content, ...styled85 } = props;
   const defaultValues = {
-    $appearance: styled79.appearance || "solid",
-    $color: styled79.color,
-    $loading: styled79.loading ? +styled79.loading : 0,
-    $size: styled79.size || "small",
-    type: styled79.type || "button"
+    $appearance: styled85.appearance || "solid",
+    $color: styled85.color,
+    $loading: styled85.loading ? +styled85.loading : 0,
+    $size: styled85.size || "small",
+    type: styled85.type || "button"
   };
   const htmlProps = filterObject(props, ["size", "appearance", "color", "loading", "content"]);
   const loaderSize = sizes[defaultValues.$size].lineHeight;
@@ -1190,13 +1190,86 @@ var inputTimeWidth = {
 };
 
 // src/components/Calendar/components/Basic/components/Main/index.tsx
-import React6, { useEffect as useEffect6, useState as useState7 } from "react";
+import React6, { useEffect as useEffect7, useState as useState8 } from "react";
+
+// src/hooks/useDebouncedCallback/index.ts
+import { useEffect as useEffect3, useMemo } from "react";
+var debounce = (fn, delay) => {
+  let timeout = null;
+  let lastArgs = null;
+  const debounced = (...args) => {
+    lastArgs = args;
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      if (lastArgs !== null) {
+        fn(...lastArgs);
+        lastArgs = null;
+      }
+      timeout = null;
+    }, delay);
+  };
+  debounced.cancel = () => {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    lastArgs = null;
+  };
+  debounced.flush = () => {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    if (lastArgs !== null) {
+      fn(...lastArgs);
+      lastArgs = null;
+    }
+  };
+  return debounced;
+};
+var useDebouncedCallback = (callback, delay) => {
+  const debounced = useMemo(() => debounce(callback, delay), [callback, delay]);
+  useEffect3(() => {
+    return () => {
+      debounced.cancel();
+    };
+  }, [debounced]);
+  return debounced;
+};
+var useDebouncedCallback_default = useDebouncedCallback;
+
+// src/hooks/useDebouncedState/index.ts
+import { useCallback as useCallback2, useState as useState3 } from "react";
+var useDebouncedState = (initial, onUpdate, ms) => {
+  const [state, setState] = useState3({ current: initial, debounced: initial });
+  const onUpdateSearch = useDebouncedCallback_default(
+    useCallback2((search) => {
+      onUpdate();
+      setState((prev) => ({ ...prev, debounced: search }));
+    }, []),
+    ms
+  );
+  const setCurrent = (input) => {
+    setState((prev) => ({ ...prev, current: input }));
+    onUpdateSearch(input);
+  };
+  const setDebounced = (value) => {
+    setState({ current: value, debounced: value });
+  };
+  return {
+    current: [state.current, setCurrent],
+    debounced: [state.debounced, setDebounced]
+  };
+};
+var useDebouncedState_default = useDebouncedState;
 
-// src/hooks/onClickOut.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+// src/hooks/useOnClickOut/index.ts
+import { useEffect as useEffect4, useState as useState4 } from "react";
 var useOnClickOut = (callback) => {
-  const [ref, setRef] = useState3(null);
-  useEffect3(() => {
+  const [ref, setRef] = useState4(null);
+  useEffect4(() => {
     const listener = (event) => {
       if (!ref || ref.contains(event.target)) {
         return;
@@ -1212,10 +1285,10 @@ var useOnClickOut = (callback) => {
   }, [ref, callback]);
   return setRef;
 };
-var onClickOut_default = useOnClickOut;
+var useOnClickOut_default = useOnClickOut;
 
 // src/theme/index.tsx
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 import { ThemeProvider as Provider, css as css5 } from "styled-components";
 
 // src/assets/helpers.ts
@@ -1663,7 +1736,7 @@ var theme3 = {
   components: theme_default2
 };
 var ThemeProvider = (props) => {
-  const value = useMemo(() => {
+  const value = useMemo2(() => {
     return {
       ...theme3,
       assetUrl: (asset) => assetUrl(asset, props.assetBaseUrl)
@@ -8690,14 +8763,14 @@ var getInitialCalendar = (date, min, max) => {
 };
 
 // src/components/Calendar/components/Basic/components/MonthPicker/index.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 
 // src/components/Menu/index.tsx
-import React4, { useEffect as useEffect4, useState as useState5 } from "react";
+import React4, { useEffect as useEffect5, useState as useState6 } from "react";
 import { Popup } from "semantic-ui-react";
 
 // src/components/ScrollContainer/index.tsx
-import React3, { useState as useState4 } from "react";
+import React3, { useState as useState5 } from "react";
 
 // src/components/ScrollContainer/styles/BeforeAfterContainer/index.ts
 import styled5, { css as css7 } from "styled-components";
@@ -8841,7 +8914,7 @@ var ScrollContainer = React3.forwardRef(
     const { loading } = props;
     const onScrollEnd = props.onScrollEnd || (() => {
     });
-    const [, setLastPagination] = useState4(/* @__PURE__ */ new Date());
+    const [, setLastPagination] = useState5(/* @__PURE__ */ new Date());
     const onScroll = (event) => {
       if (event.target !== event.currentTarget) return;
       const target = event.nativeEvent.target;
@@ -9033,8 +9106,8 @@ var isVisible = (elem, bound) => {
 };
 var MenuComponent = (props, ref) => {
   const { close, options, children, highlight } = { ...props };
-  const [scrollRef, setScrollRef] = useState5(null);
-  useEffect4(() => {
+  const [scrollRef, setScrollRef] = useState6(null);
+  useEffect5(() => {
     if (!scrollRef || highlight === void 0) return;
     const element = scrollRef.children[highlight];
     if (!element) return;
@@ -9254,8 +9327,8 @@ var NavBtn = styled10.button`
 import { jsx as jsx296, jsxs as jsxs145 } from "react/jsx-runtime";
 var MonthPicker = (props) => {
   const { setValue, close, min, max, year: initialYear, ...menuProps } = props;
-  const [year, setYear] = useState6(initialYear);
-  useEffect5(() => {
+  const [year, setYear] = useState7(initialYear);
+  useEffect6(() => {
     setYear(initialYear);
   }, [props.open, initialYear]);
   return /* @__PURE__ */ jsx296(
@@ -9357,9 +9430,9 @@ var Container6 = styled11.div`
     display: block;
     border-radius: 100%;
 
-    ${({ $size: size3 }) => css11`
-      width: ${sizes2[size3]};
-      height: ${sizes2[size3]};
+    ${({ $size: size4 }) => css11`
+      width: ${sizes2[size4]};
+      height: ${sizes2[size4]};
     `};
 
     background-color: ${({ theme: { colors: colors2 }, $type: type }) => colors2[types[type]]};
@@ -9369,7 +9442,7 @@ var Container6 = styled11.div`
 // src/components/Indicator/index.tsx
 import { jsx as jsx297 } from "react/jsx-runtime";
 var Indicator = ({
-  size: size3,
+  size: size4,
   type,
   labelColor,
   ...props
@@ -9378,7 +9451,7 @@ var Indicator = ({
     Container6,
     {
       ...{
-        $size: size3 || "small",
+        $size: size4 || "small",
         $type: type || "default",
         $labelColor: labelColor || "darkBlue",
         ...props
@@ -9524,8 +9597,8 @@ import { jsx as jsx298, jsxs as jsxs146 } from "react/jsx-runtime";
 var Main = React6.forwardRef(
   (props, ref) => {
     const { getDay, initialMonth } = props;
-    const [selectOpen, setSelectOpen] = useState7(false);
-    const [loading, setLoading] = useState7(false);
+    const [selectOpen, setSelectOpen] = useState8(false);
+    const [loading, setLoading] = useState8(false);
     const onChangeMonth = (() => {
       const { onChangeMonth: onChangeMonth2 } = props;
       if (!onChangeMonth2) return async () => {
@@ -9546,7 +9619,7 @@ var Main = React6.forwardRef(
       date.setHours(0, 0, 0, 0);
       return date;
     })() : void 0;
-    const [calendar, _setCalendar] = props.calendar || useState7(getInitialCalendar(initialMonth, min, max));
+    const [calendar, _setCalendar] = props.calendar || useState8(getInitialCalendar(initialMonth, min, max));
     const setCalendar = (value) => {
       _setCalendar((prev) => {
         const newv = typeof value === "function" ? value(prev) : value;
@@ -9554,7 +9627,7 @@ var Main = React6.forwardRef(
       });
     };
     const isControlled = props.calendar !== void 0;
-    useEffect6(() => {
+    useEffect7(() => {
       if (isControlled) return;
       setCalendar(getInitialCalendar(initialMonth, min, max));
     }, [
@@ -9563,7 +9636,7 @@ var Main = React6.forwardRef(
       min?.toISOString(),
       max?.toISOString()
     ]);
-    useEffect6(() => {
+    useEffect7(() => {
       const [first, last] = [
         calendar.weeks[0],
         calendar.weeks[calendar.weeks.length - 1]
@@ -9613,7 +9686,7 @@ var Main = React6.forwardRef(
         /* @__PURE__ */ jsxs146(Header, { children: [
           /* @__PURE__ */ jsxs146(MonthContainer, { children: [
             getPrev(),
-            /* @__PURE__ */ jsxs146("div", { ref: onClickOut_default(() => setSelectOpen(false)), children: [
+            /* @__PURE__ */ jsxs146("div", { ref: useOnClickOut_default(() => setSelectOpen(false)), children: [
               (() => {
                 if (min !== void 0 && max !== void 0 && min.getFullYear() === max.getFullYear() && min.getMonth() === max.getMonth()) {
                   return /* @__PURE__ */ jsxs146(MonthName, { children: [
@@ -9755,13 +9828,13 @@ var Basic_default = BasicCalendar;
 import React13 from "react";
 
 // src/components/Calendar/components/Interval/components/Main/index.tsx
-import React12, { useEffect as useEffect8, useState as useState8 } from "react";
+import React12, { useEffect as useEffect9, useState as useState9 } from "react";
 
 // src/components/Input/components/Time/index.tsx
 import React11 from "react";
 
 // src/components/Input/components/Input/index.tsx
-import React10, { useEffect as useEffect7, useMemo as useMemo2, useRef } from "react";
+import React10, { useEffect as useEffect8, useMemo as useMemo3, useRef } from "react";
 
 // src/components/Form/index.tsx
 import React9 from "react";
@@ -10188,8 +10261,8 @@ var Input2 = React10.forwardRef(
       props.name
     );
     const isComposing = useRef(false);
-    const maskFn = useMemo2(() => getMask(props.mask), [props.mask]);
-    useEffect7(() => {
+    const maskFn = useMemo3(() => getMask(props.mask), [props.mask]);
+    useEffect8(() => {
       if (isComposing.current) return;
       if (!isString(props.value)) return;
       const masked = maskFn(props.value);
@@ -10563,12 +10636,12 @@ import { jsx as jsx305, jsxs as jsxs148 } from "react/jsx-runtime";
 var Main2 = React12.forwardRef(
   (props, ref) => {
     const { initialMonth, initialValue, min, max } = props;
-    const [value, setValue] = props.value || useState8(getValue(initialValue || [], min, max));
-    const [invalid, setInvalid] = props.invalid || useState8([false, false]);
-    const [time, setTime] = useState8(() => {
+    const [value, setValue] = props.value || useState9(getValue(initialValue || [], min, max));
+    const [invalid, setInvalid] = props.invalid || useState9([false, false]);
+    const [time, setTime] = useState9(() => {
       return value.map(getTimeFromDate);
     });
-    const [calendar1, _setCalendar1] = useState8(() => {
+    const [calendar1, _setCalendar1] = useState9(() => {
       const calendar12 = getInitialCalendar(value[0] || initialMonth, min, max);
       return calendar12;
     });
@@ -10578,7 +10651,7 @@ var Main2 = React12.forwardRef(
         return newv.month === prev.month && newv.year === prev.year ? prev : newv;
       });
     };
-    const [calendar2, _setCalendar2] = useState8(() => {
+    const [calendar2, _setCalendar2] = useState9(() => {
       const calendar22 = getCalendar2(calendar1);
       return calendar22;
     });
@@ -10588,14 +10661,14 @@ var Main2 = React12.forwardRef(
         return newv.month === prev.month && newv.year === prev.year ? prev : newv;
       });
     };
-    const [hoverDay, setHoverDay] = useState8(null);
-    useEffect8(() => {
+    const [hoverDay, setHoverDay] = useState9(null);
+    useEffect9(() => {
       const calendar12 = getInitialCalendar(value[0] || initialMonth, min, max);
       const calendar22 = getCalendar2(calendar12);
       setCalendar1(calendar12);
       setCalendar2(calendar22);
     }, [initialMonth?.toISOString(), min?.toISOString(), max?.toISOString()]);
-    useEffect8(() => {
+    useEffect9(() => {
       const timeProps = getTimeProps(props.time, value);
       setHoverDay(null);
       if (value[0]) {
@@ -10826,12 +10899,12 @@ var Interval_default = CalendarInterval;
 import React15 from "react";
 
 // src/components/Calendar/components/Single/components/Main/index.tsx
-import React14, { useEffect as useEffect9, useState as useState9 } from "react";
+import React14, { useEffect as useEffect10, useState as useState10 } from "react";
 import { jsx as jsx307, jsxs as jsxs149 } from "react/jsx-runtime";
 var SingleCalendar = React14.forwardRef(
   (props, ref) => {
     const { initialValue, min, max } = props;
-    const [value, setValue] = props.value || useState9(
+    const [value, setValue] = props.value || useState10(
       initialValue && !isNaN(initialValue.getTime()) && isDateBetween(initialValue, min, max) ? initialValue : null
     );
     const timeProps = (() => {
@@ -10839,9 +10912,9 @@ var SingleCalendar = React14.forwardRef(
       if (typeof props.time === "function") return props.time(value);
       return props.time;
     })();
-    const [invalid, setInvalid] = props.invalid || useState9(false);
-    const [time, setTime] = useState9(getTimeFromDate(value));
-    useEffect9(() => {
+    const [invalid, setInvalid] = props.invalid || useState10(false);
+    const [time, setTime] = useState10(getTimeFromDate(value));
+    useEffect10(() => {
       setInvalid(isInvalid(value, time, timeProps, min, max));
     }, [value, time, timeProps]);
     const _getDay = props.getDay || (() => ({}));
@@ -10977,21 +11050,21 @@ var Container7 = styled17.div`
   border-left-width: 5px;
   padding: 14px;
 
-  ${({ $size: size3 }) => size3 === "mini" && css15`
+  ${({ $size: size4 }) => size4 === "mini" && css15`
       width: 394px;
       height: 99px;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css15`
+  ${({ $size: size4 }) => size4 === "small" && css15`
       width: 394px;
       height: 131px;
     `}
     
-  ${({ $size: size3 }) => size3 === "medium" && css15`
+  ${({ $size: size4 }) => size4 === "medium" && css15`
       width: 394px;
     `}
 
-  ${({ $size: size3 }) => size3 === "big" && css15`
+  ${({ $size: size4 }) => size4 === "big" && css15`
       width: 414px;
       height: 324px;
     `}
@@ -11019,13 +11092,13 @@ var Container7 = styled17.div`
 
 // src/components/Card/index.tsx
 import { jsx as jsx310 } from "react/jsx-runtime";
-var Card = ({ borderType, size: size3, ...rest }) => {
-  return /* @__PURE__ */ jsx310(Container7, { $borderType: borderType, $size: size3, ...rest });
+var Card = ({ borderType, size: size4, ...rest }) => {
+  return /* @__PURE__ */ jsx310(Container7, { $borderType: borderType, $size: size4, ...rest });
 };
 var Card_default = Card;
 
 // src/components/Filters/Button/index.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/Filters/Button/styles.ts
 import styled18, { css as css16 } from "styled-components";
@@ -11052,11 +11125,11 @@ var Container8 = styled18.div`
 import { jsx as jsx311, jsxs as jsxs150 } from "react/jsx-runtime";
 var Button3 = (props) => {
   const { getContent } = props;
-  const [open, setOpen] = useState10(false);
+  const [open, setOpen] = useState11(false);
   const close = () => setOpen(false);
   const onClick = props.disabled ? void 0 : () => setOpen((prev) => !prev);
   const buttonProps = filterObject(props, ["getContent", "gap"]);
-  return /* @__PURE__ */ jsxs150("div", { ref: onClickOut_default(close), children: [
+  return /* @__PURE__ */ jsxs150("div", { ref: useOnClickOut_default(close), children: [
     /* @__PURE__ */ jsxs150(Container8, { ...buttonProps, ...{ onClick }, $gap: props.gap, children: [
       props.children,
       /* @__PURE__ */ jsx311(
@@ -11074,13 +11147,13 @@ var Button3 = (props) => {
 var Button_default2 = Button3;
 
 // src/components/Filters/AppliedFilters/components/Menu/index.tsx
-import { useEffect as useEffect15, useState as useState20 } from "react";
+import { useEffect as useEffect16, useState as useState21 } from "react";
 
 // src/components/Input/index.tsx
-import React37 from "react";
+import React36 from "react";
 
 // src/components/Input/components/Checkbox/index.tsx
-import React18 from "react";
+import React17 from "react";
 
 // src/components/Input/components/Checkbox/styles.ts
 import styled19, { css as css17 } from "styled-components";
@@ -11281,7 +11354,7 @@ var DefaultLabel = (props) => {
     }
   );
 };
-var Checkbox = React18.forwardRef(
+var Checkbox = React17.forwardRef(
   (props, ref) => {
     const { padding, bordered } = props;
     const { isRequired, isInvalid: isInvalid2, isViewMode, isDisabled } = Form_default.useContext(
@@ -11343,7 +11416,7 @@ Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
 
 // src/components/Input/components/Date/index.tsx
-import React19, { useState as useState11 } from "react";
+import React18, { useState as useState12 } from "react";
 
 // src/components/Input/components/Date/functions.ts
 var JSDate = Date;
@@ -11405,12 +11478,12 @@ var mask2 = (v) => {
   else if (v.length < 5) return v.substring(0, 2) + "/" + v.substring(2);
   else return v.substring(0, 2) + "/" + v.substring(2, 4) + "/" + v.substring(4);
 };
-var Date2 = React19.forwardRef(
+var Date2 = React18.forwardRef(
   (props, ref) => {
     const { picker, value, min, max } = props;
     const setValue = props.setValue || (() => {
     });
-    const [open, setOpen] = useState11(false);
+    const [open, setOpen] = useState12(false);
     const _onKeyDown = props.onKeyDown || (() => {
     });
     const onKeyDown = (event) => {
@@ -11455,7 +11528,7 @@ var Date2 = React19.forwardRef(
       "min",
       "max"
     ]);
-    return /* @__PURE__ */ jsxs152(RelativeContainer2, { ref: onClickOut_default(() => setOpen(false)), children: [
+    return /* @__PURE__ */ jsxs152(RelativeContainer2, { ref: useOnClickOut_default(() => setOpen(false)), children: [
       /* @__PURE__ */ jsx313(
         Input_default,
         {
@@ -11496,7 +11569,7 @@ Date2.displayName = "Date";
 var Date_default = Date2;
 
 // src/components/Input/components/DateIntervalPicker/index.tsx
-import React20, { useEffect as useEffect10, useState as useState12 } from "react";
+import React19, { useEffect as useEffect11, useState as useState13 } from "react";
 
 // src/components/Input/components/DateIntervalPicker/functions.ts
 var validate = ([start, end], min, max) => {
@@ -11783,12 +11856,12 @@ var LabelText2 = styled21.label`
 
 // src/components/Input/components/DateIntervalPicker/index.tsx
 import { jsx as jsx314, jsxs as jsxs153 } from "react/jsx-runtime";
-var Component = React20.forwardRef(
+var Component = React19.forwardRef(
   (props, ref) => {
     const center = props.center || { x: 50, y: 50 };
     const value = parse(props.value);
-    const [open, setOpen] = useState12(null);
-    const [intervalType, setIntervalType] = useState12(
+    const [open, setOpen] = useState13(null);
+    const [intervalType, setIntervalType] = useState13(
       props.only || "day"
     );
     const config = intervalTypes[intervalType];
@@ -11799,7 +11872,7 @@ var Component = React20.forwardRef(
       );
       props.setValue(parsed);
     };
-    useEffect10(() => {
+    useEffect11(() => {
       if (props.min && props.max && props.min > props.max) {
         throw Error("Min prop must be less than Max");
       }
@@ -11864,7 +11937,7 @@ var Component = React20.forwardRef(
     return /* @__PURE__ */ jsxs153(
       RelativeContainer3,
       {
-        ref: onClickOut_default(() => setOpen(null)),
+        ref: useOnClickOut_default(() => setOpen(null)),
         $invalid: invalid,
         children: [
           props.label ? /* @__PURE__ */ jsxs153(LabelText2, { $required: props.required, children: [
@@ -11884,7 +11957,7 @@ var Component = React20.forwardRef(
                   if (intervalType === "custom") return label;
                   const incrementProps = getArrowProps("increment");
                   const decrementProps = getArrowProps("decrement");
-                  return /* @__PURE__ */ jsxs153(React20.Fragment, { children: [
+                  return /* @__PURE__ */ jsxs153(React19.Fragment, { children: [
                     /* @__PURE__ */ jsx314(
                       Button4,
                       {
@@ -12013,7 +12086,7 @@ var DatePicker = Object.assign(Component, {
 var DateIntervalPicker_default = DatePicker;
 
 // src/components/Input/components/DatePicker/index.tsx
-import React21, { useEffect as useEffect11, useState as useState13 } from "react";
+import React20, { useEffect as useEffect12, useState as useState14 } from "react";
 
 // src/components/Input/components/DatePicker/styles.ts
 import styled22, { css as css19 } from "styled-components";
@@ -12090,13 +12163,13 @@ var Button5 = styled22.button`
 
 // src/components/Input/components/DatePicker/index.tsx
 import { jsx as jsx315, jsxs as jsxs154 } from "react/jsx-runtime";
-var DatePicker2 = React21.forwardRef(
+var DatePicker2 = React20.forwardRef(
   (props, ref) => {
     const { picker, value, setValue, min, max } = props;
     const disabled = props.disabled || props.loading;
     const today = dateToIsoString(/* @__PURE__ */ new Date());
-    const [open, setOpen] = useState13(false);
-    useEffect11(() => {
+    const [open, setOpen] = useState14(false);
+    useEffect12(() => {
       const date = isoStringToDate(value);
       if (!date) {
         setValue(dateToIsoString(getMiddle(min, max)));
@@ -12128,7 +12201,7 @@ var DatePicker2 = React21.forwardRef(
       "min",
       "max"
     ]);
-    return /* @__PURE__ */ jsxs154(RelativeContainer4, { ref: onClickOut_default(() => setOpen(false)), children: [
+    return /* @__PURE__ */ jsxs154(RelativeContainer4, { ref: useOnClickOut_default(() => setOpen(false)), children: [
       /* @__PURE__ */ jsx315(Input_default, { ...inputProps, type: "text", icon, ref, htmlDisabled: true }),
       /* @__PURE__ */ jsxs154(
         Container10,
@@ -12215,7 +12288,7 @@ DatePicker2.displayName = "DatePicker";
 var DatePicker_default = DatePicker2;
 
 // src/components/Input/components/DateTime/index.tsx
-import React22, { useState as useState14 } from "react";
+import React21, { useState as useState15 } from "react";
 
 // src/components/Input/components/DateTime/styles.ts
 import styled23 from "styled-components";
@@ -12376,13 +12449,13 @@ var steps = {
     }
   }
 };
-var DateTime = React22.forwardRef(
+var DateTime = React21.forwardRef(
   (props, ref) => {
     const { picker, value, min, max } = props;
     const step = steps[props.step || "day"];
     const setValue = props.setValue || (() => {
     });
-    const [open, setOpen] = useState14(false);
+    const [open, setOpen] = useState15(false);
     const _onKeyDown = props.onKeyDown || (() => {
     });
     const onKeyDown = (event) => {
@@ -12460,7 +12533,7 @@ var DateTime = React22.forwardRef(
       "min",
       "max"
     ]);
-    return /* @__PURE__ */ jsxs155(RelativeContainer5, { ref: onClickOut_default(() => setOpen(false)), children: [
+    return /* @__PURE__ */ jsxs155(RelativeContainer5, { ref: useOnClickOut_default(() => setOpen(false)), children: [
       /* @__PURE__ */ jsx316(
         Input_default,
         {
@@ -12503,11 +12576,11 @@ DateTime.displayName = "DateTime";
 var DateTime_default = DateTime;
 
 // src/components/Input/components/Password/index.tsx
-import React23, { useState as useState15 } from "react";
+import React22, { useState as useState16 } from "react";
 import { jsx as jsx317 } from "react/jsx-runtime";
-var Password = React23.forwardRef(
+var Password = React22.forwardRef(
   (props, ref) => {
-    const [visibility, setVisibility] = useState15("hidden");
+    const [visibility, setVisibility] = useState16("hidden");
     const icons2 = {
       visible: {
         icon: "eye_off",
@@ -12542,7 +12615,7 @@ Password.displayName = "Password";
 var Password_default = Password;
 
 // src/components/Input/components/Phone/index.tsx
-import React24, { useEffect as useEffect12, useState as useState16 } from "react";
+import React23, { useEffect as useEffect13, useState as useState17 } from "react";
 
 // src/assets/icons/flags/index.ts
 import styled24, { css as css20 } from "styled-components";
@@ -12827,17 +12900,17 @@ var Button6 = (props) => {
     }
   );
 };
-var Component2 = React24.forwardRef(
+var Component2 = React23.forwardRef(
   (props, ref) => {
     const { value, setValue } = props;
-    const [inputValue, setInputValue] = useState16(
+    const [inputValue, setInputValue] = useState17(
       !value ? "" : () => {
         const details = getPhoneDetails(value);
         return details ? details.masked : value;
       }
     );
-    const [country, setCountry] = useState16(countries_default.br);
-    const [open, setOpen] = useState16(false);
+    const [country, setCountry] = useState17(countries_default.br);
+    const [open, setOpen] = useState17(false);
     const options = Object.keys(countries_default).map((iso) => ({
       label: (option) => {
         const country2 = option.data;
@@ -12861,7 +12934,7 @@ var Component2 = React24.forwardRef(
       if (country.mask) value2 = country.mask(value2);
       return value2;
     };
-    useEffect12(() => {
+    useEffect13(() => {
       if (!value) {
         setInputValue("");
         return;
@@ -12875,10 +12948,10 @@ var Component2 = React24.forwardRef(
         setInputValue(value);
       }
     }, [value]);
-    useEffect12(() => {
+    useEffect13(() => {
       setInputValue((prev) => mask4(prev));
     }, [country]);
-    useEffect12(() => {
+    useEffect13(() => {
       const v = inputValue.replace(/\D+/g, "").substring(0, country.charLimit);
       setValue(v ? `${country.ddi} ${v}` : v);
     }, [inputValue]);
@@ -12886,7 +12959,7 @@ var Component2 = React24.forwardRef(
     return /* @__PURE__ */ jsxs156(
       RelativeContainer6,
       {
-        ref: onClickOut_default(() => setOpen(false)),
+        ref: useOnClickOut_default(() => setOpen(false)),
         children: [
           /* @__PURE__ */ jsx318(
             Input_default,
@@ -12950,6 +13023,8 @@ var LabelContainer5 = styled26.div`
 `;
 var Label4 = styled26.label`
   display: flex;
+  align-items: center;
+
   gap: ${({ theme: theme4 }) => theme4.spacings.s1};
 
   min-height: ${size2};
@@ -13008,18 +13083,19 @@ var Label4 = styled26.label`
 
   > input {
     position: absolute;
-    top: 0;
-    left: 0;
-    height: 0;
-    width: 0;
-    /* Chrome, Safari, Edge, Opera */
+    height: 1px;
+    width: 1px;
+    opacity: 0;
+
+    /* Appearance (General) */
+    appearance: none;
+    /* Appearance (Chrome, Safari, Edge, Opera) */
     &:-webkit-outer-spin-button,
     &:-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
-
-    /* Firefox */
+    /* Appearance (Firefox) */
     -moz-appearance: none;
   }
 
@@ -13076,7 +13152,7 @@ var RadioButton = (props) => {
 var RadioButton_default = RadioButton;
 
 // src/components/Input/components/Range/index.tsx
-import React25 from "react";
+import React24 from "react";
 
 // src/components/Input/components/Range/styles/Input/index.ts
 import styled27, { css as css22 } from "styled-components";
@@ -13511,18 +13587,18 @@ var getMarkerLeft = (markers, range, index, value, min, strict) => {
   const left = `calc(${p}% - 10px - ${x}px)`;
   return left;
 };
-var getLeftCalc = (size3, bullet2, value, min, max) => {
+var getLeftCalc = (size4, bullet2, value, min, max) => {
   const percent = (value - min) * 100 / (max - min);
-  const calc = `calc(${percent}% - ${bullet2 * percent / 100}px + ${(bullet2 - size3) / 2}px)`;
+  const calc = `calc(${percent}% - ${bullet2 * percent / 100}px + ${(bullet2 - size4) / 2}px)`;
   return calc;
 };
-var getBarLeft = (size3, calc) => {
-  return `min(max(${calc}, 0%), calc(100% - ${size3}px))`;
+var getBarLeft = (size4, calc) => {
+  return `min(max(${calc}, 0%), calc(100% - ${size4}px))`;
 };
-var getIndicatorLeft = (size3, calc) => {
-  return `min(max(${calc}, calc(0% - ${size3}px)), calc(100% - ${size3}px))`;
+var getIndicatorLeft = (size4, calc) => {
+  return `min(max(${calc}, calc(0% - ${size4}px)), calc(100% - ${size4}px))`;
 };
-var Range = React25.forwardRef(
+var Range = React24.forwardRef(
   (props, ref) => {
     const { label, minLabel, maxLabel, width, setValue, hideNavbar } = props;
     const { isRequired, isInvalid: isInvalid2, isViewMode, isDisabled } = Form_default.useContext(
@@ -13732,10 +13808,10 @@ Range.displayName = "input";
 var Range_default = Range;
 
 // src/components/Input/components/Select/index.tsx
-import React33, { useCallback as useCallback3, useEffect as useEffect14, useState as useState18 } from "react";
+import React32, { useCallback as useCallback4, useEffect as useEffect15, useState as useState19 } from "react";
 
 // src/components/Input/components/Select/hooks/Select/index.tsx
-import React28 from "react";
+import React27 from "react";
 
 // src/components/Input/components/Select/styles.ts
 import styled38, { css as css28 } from "styled-components";
@@ -13763,7 +13839,7 @@ var HiddenInput = styled38.input`
 `;
 
 // src/components/Input/components/Select/hooks/Navigation/index.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 var isAvailable = (index, option) => {
   return !option.disabled && !(option.rules || []).some((rule) => rule(index, option.data) !== true);
 };
@@ -13773,7 +13849,7 @@ var useNavigation = (props) => {
     options,
     onSelectHighlight
   } = props;
-  const onKeyDown = useCallback2(
+  const onKeyDown = useCallback3(
     (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -13822,12 +13898,12 @@ var useNavigation = (props) => {
 var Navigation_default2 = useNavigation;
 
 // src/components/Input/components/Select/hooks/Select/components/Header/index.tsx
-import React27 from "react";
+import React26 from "react";
 
 // src/components/Input/components/Select/hooks/Select/context.ts
-import React26 from "react";
-var Provider3 = React26.createContext({});
-var useContext2 = () => React26.useContext(Provider3);
+import React25 from "react";
+var Provider3 = React25.createContext({});
+var useContext2 = () => React25.useContext(Provider3);
 var context_default2 = Provider3;
 
 // src/components/Input/components/Select/hooks/Select/components/Header/styles.ts
@@ -13843,7 +13919,7 @@ import { jsx as jsx321 } from "react/jsx-runtime";
 var Header2 = () => {
   const context = useContext2();
   if (!context.props.search) {
-    return /* @__PURE__ */ jsx321(React27.Fragment, {});
+    return /* @__PURE__ */ jsx321(React26.Fragment, {});
   }
   const {
     searchInput: [searchInput, setSearchInput]
@@ -13936,7 +14012,7 @@ var useSelect = (props, [highlight, setHighlight], [options, setOptions], setOpe
     onReset,
     menu: {
       itemSpacing: "s3",
-      before: /* @__PURE__ */ jsxs159(React28.Fragment, { children: [
+      before: /* @__PURE__ */ jsxs159(React27.Fragment, { children: [
         /* @__PURE__ */ jsx322(Header_default, {}),
         /* @__PURE__ */ jsx322(
           HiddenInput,
@@ -13967,15 +14043,15 @@ var useSelect = (props, [highlight, setHighlight], [options, setOptions], setOpe
 var Select_default = useSelect;
 
 // src/components/Input/components/Select/hooks/SelectMultiple/index.tsx
-import React32, { useEffect as useEffect13, useState as useState17 } from "react";
+import React31, { useEffect as useEffect14, useState as useState18 } from "react";
 
 // src/components/Input/components/Select/hooks/SelectMultiple/components/Footer/index.tsx
-import React30 from "react";
+import React29 from "react";
 
 // src/components/Input/components/Select/hooks/SelectMultiple/context.ts
-import React29 from "react";
-var Provider4 = React29.createContext({});
-var useContext3 = () => React29.useContext(Provider4);
+import React28 from "react";
+var Provider4 = React28.createContext({});
+var useContext3 = () => React28.useContext(Provider4);
 var context_default3 = Provider4;
 
 // src/components/Input/components/Select/hooks/SelectMultiple/components/Footer/index.tsx
@@ -14005,7 +14081,7 @@ var Footer2 = () => {
     setValue(value2, data);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs160(React30.Fragment, { children: [
+  return /* @__PURE__ */ jsxs160(React29.Fragment, { children: [
     error && /* @__PURE__ */ jsx323(
       "span",
       {
@@ -14033,14 +14109,14 @@ var Footer2 = () => {
 var Footer_default = Footer2;
 
 // src/components/Input/components/Select/hooks/SelectMultiple/components/Header/index.tsx
-import React31 from "react";
+import React30 from "react";
 
 // src/components/Link/index.tsx
 import styled40, { css as css30 } from "styled-components";
 import { jsx as jsx324 } from "react/jsx-runtime";
 var Container11 = styled40.div`
-  ${({ $size: size3 }) => {
-  const { fontSize, lineHeight } = sizes[size3 || "small"];
+  ${({ $size: size4 }) => {
+  const { fontSize, lineHeight } = sizes[size4 || "small"];
   return css30`
       font-size: ${fontSize};
       line-height: ${lineHeight};
@@ -14068,12 +14144,12 @@ var Container11 = styled40.div`
         ` : null;
 }}
 `;
-var Link = ({ size: size3, colorSetting, disabled, ...props }) => {
+var Link = ({ size: size4, colorSetting, disabled, ...props }) => {
   return /* @__PURE__ */ jsx324(
     Container11,
     {
       ...props,
-      $size: size3,
+      $size: size4,
       $colorSetting: colorSetting,
       $disabled: disabled
     }
@@ -14144,7 +14220,7 @@ var CheckAll = () => {
 var Header3 = () => {
   const context = useContext3();
   if (!context.props.search) {
-    return /* @__PURE__ */ jsx325(React31.Fragment, {});
+    return /* @__PURE__ */ jsx325(React30.Fragment, {});
   }
   const {
     searchInput: [searchInput, setSearchInput],
@@ -14281,12 +14357,12 @@ var parseValue = (value) => {
 };
 var useSelectMultiple = (props, [highlight, setHighlight], [options, setOptions]) => {
   const initial = parseValue(props.value);
-  const [checked, setChecked] = useState17([
+  const [checked, setChecked] = useState18([
     ...initial
   ]);
   const limits = resolveLimits(props.minSelected, props.maxSelected);
   const { max, enabled } = limits;
-  useEffect13(() => {
+  useEffect14(() => {
     if (limits.error) {
       console.error(`[SelectMultiple]: ${limits.error}`);
     }
@@ -14326,7 +14402,7 @@ var useSelectMultiple = (props, [highlight, setHighlight], [options, setOptions]
     onReset,
     menu: {
       itemSpacing: void 0,
-      before: /* @__PURE__ */ jsxs162(React32.Fragment, { children: [
+      before: /* @__PURE__ */ jsxs162(React31.Fragment, { children: [
         /* @__PURE__ */ jsx327(Header_default2, {}),
         /* @__PURE__ */ jsx327(
           HiddenInput,
@@ -14381,12 +14457,12 @@ var SelectMultiple_default = useSelectMultiple;
 
 // src/components/Input/components/Select/index.tsx
 import { jsx as jsx328, jsxs as jsxs163 } from "react/jsx-runtime";
-var Select = React33.forwardRef(
+var Select = React32.forwardRef(
   (props, ref) => {
     const { position, loader: loader2, initialLoader } = props;
-    const [options, setOptions] = useState18(initialLoader || []);
-    const [highlight, setHighlight] = useState18(-1);
-    const [open, setOpen] = useState18(false);
+    const [options, setOptions] = useState19(initialLoader || []);
+    const [highlight, setHighlight] = useState19(-1);
+    const [open, setOpen] = useState19(false);
     const hook = props.type === "select-multiple" ? SelectMultiple_default : Select_default;
     const {
       parsedOptions,
@@ -14402,11 +14478,11 @@ var Select = React33.forwardRef(
       [options, setOptions],
       setOpen
     );
-    const [_loading, setLoading] = useState18(true);
-    const [search, _setSearch] = useState18("");
-    const [searchInput, setSearchInput] = useState18("");
-    const [page, setPage] = useState18(1);
-    const [lastPage, setLastPage] = useState18(false);
+    const [_loading, setLoading] = useState19(true);
+    const [search, _setSearch] = useState19("");
+    const [searchInput, setSearchInput] = useState19("");
+    const [page, setPage] = useState19(1);
+    const [lastPage, setLastPage] = useState19(false);
     const loading = props.loading || _loading;
     const setSearch = (value) => {
       _setSearch(value);
@@ -14439,7 +14515,7 @@ var Select = React33.forwardRef(
       }
       _onScrollEnd(e);
     };
-    const onSubmit = useCallback3(async () => {
+    const onSubmit = useCallback4(async () => {
       setLoading(true);
       const optionsResult = await loader2(search, page);
       if (optionsResult === null) return;
@@ -14455,22 +14531,22 @@ var Select = React33.forwardRef(
       setLastPage(lastPage2);
       setLoading(false);
     }, [loader2, search, page, initialLoader]);
-    useEffect14(() => {
+    useEffect15(() => {
       const timeoutId = setTimeout(() => onSubmit(), 250);
       return () => clearTimeout(timeoutId);
     }, [onSubmit]);
-    useEffect14(() => {
+    useEffect15(() => {
       if (open) return;
       setSearch("");
       onReset();
     }, [props.value, open]);
-    useEffect14(() => {
+    useEffect15(() => {
       setSearchInput(search);
     }, [search]);
-    useEffect14(() => {
+    useEffect15(() => {
       if (page === 1) setHighlight(-1);
     }, [page]);
-    useEffect14(() => {
+    useEffect15(() => {
       const timeoutId = setTimeout(() => setSearch(searchInput), 1e3);
       return () => clearTimeout(timeoutId);
     }, [searchInput]);
@@ -14486,7 +14562,7 @@ var Select = React33.forwardRef(
       /* @__PURE__ */ jsxs163(
         RelativeContainer7,
         {
-          ref: onClickOut_default(() => setOpen(false)),
+          ref: useOnClickOut_default(() => setOpen(false)),
           $width: props.width,
           children: [
             /* @__PURE__ */ jsx328(
@@ -14562,7 +14638,7 @@ Select.displayName = "Select";
 var Select_default2 = Select;
 
 // src/components/Input/components/Switch/index.tsx
-import React34 from "react";
+import React33 from "react";
 
 // src/components/Input/components/Switch/styles.ts
 import styled42, { css as css32 } from "styled-components";
@@ -14723,7 +14799,7 @@ var Switch = (props) => {
             $keepSpace: true,
             children: label[props.checked ? "after" : "before"]
           }
-        ) : /* @__PURE__ */ jsxs164(React34.Fragment, { children: [
+        ) : /* @__PURE__ */ jsxs164(React33.Fragment, { children: [
           label.before && /* @__PURE__ */ jsx329(LabelContainer7, { children: label.before }),
           /* @__PURE__ */ jsx329("input", { ...htmlProps, type: "checkbox" }),
           /* @__PURE__ */ jsx329("span", {}),
@@ -14736,10 +14812,10 @@ var Switch = (props) => {
 var Switch_default = Switch;
 
 // src/components/Input/components/Tags/index.tsx
-import React36, { useState as useState19 } from "react";
+import React35, { useState as useState20 } from "react";
 
 // src/components/Input/components/Tags/components/Input/index.tsx
-import React35 from "react";
+import React34 from "react";
 
 // src/components/Input/components/Tags/components/Input/styles.ts
 import styled43 from "styled-components";
@@ -14773,7 +14849,7 @@ var Input4 = styled43.input`
 
 // src/components/Input/components/Tags/components/Input/index.tsx
 import { jsx as jsx330 } from "react/jsx-runtime";
-var Input5 = React35.forwardRef(
+var Input5 = React34.forwardRef(
   (props, ref) => {
     const [value, setValue] = props.value;
     const _onKeyDown = props.onKeyDown || (() => {
@@ -14930,10 +15006,10 @@ var TagContainer = styled46.div`
 
 // src/components/Input/components/Tags/index.tsx
 import { jsx as jsx333, jsxs as jsxs166 } from "react/jsx-runtime";
-var Tags = React36.forwardRef(
+var Tags = React35.forwardRef(
   (props, ref) => {
     const { value, setValue } = props;
-    const [inputValue, setInputValue] = props.input?.value ? props.input.value : useState19("");
+    const [inputValue, setInputValue] = props.input?.value ? props.input.value : useState20("");
     const paddingless = props.paddingless || false;
     const borderless = props.borderless || false;
     const maxTags = props.maxTags || Number.POSITIVE_INFINITY;
@@ -15001,7 +15077,7 @@ var Tags_default = Tags;
 
 // src/components/Input/index.tsx
 import { jsx as jsx334 } from "react/jsx-runtime";
-var Component3 = React37.forwardRef(
+var Component3 = React36.forwardRef(
   (props, ref) => {
     switch (props.type) {
       case "date": {
@@ -15145,9 +15221,9 @@ var AppliedFiltersMenu = (props) => {
     close,
     appliedFilters: [appliedFilters, setAppliedFilters]
   } = props;
-  const [search, setSearch] = useState20("");
-  const [searched, setSearched] = useState20("");
-  useEffect15(() => {
+  const [search, setSearch] = useState21("");
+  const [searched, setSearched] = useState21("");
+  useEffect16(() => {
     setSearch("");
     setSearched("");
   }, [open]);
@@ -15270,13 +15346,13 @@ var AppliedFilters = Object.assign(
 var AppliedFilters_default = AppliedFilters;
 
 // src/components/Filters/Filters/components/Menu/index.tsx
-import { useEffect as useEffect18, useState as useState23 } from "react";
+import { useEffect as useEffect19, useState as useState24 } from "react";
 
 // src/components/Filters/Filters/components/Submenu/index.tsx
-import React40, { useCallback as useCallback4, useEffect as useEffect17, useState as useState22 } from "react";
+import React39, { useCallback as useCallback5, useEffect as useEffect18, useState as useState23 } from "react";
 
 // src/components/Filters/Filters/components/Submenu/components/Header/index.tsx
-import { useEffect as useEffect16, useState as useState21 } from "react";
+import { useEffect as useEffect17, useState as useState22 } from "react";
 
 // src/components/Filters/Filters/components/Submenu/components/Header/styles.ts
 import styled48 from "styled-components";
@@ -15310,12 +15386,12 @@ var Header5 = (props) => {
     allowEmptySearch,
     withSearch
   } = props;
-  const [search, setSearch] = useState21("");
+  const [search, setSearch] = useState22("");
   const setSearched = allowEmptySearch ? _setSearched : (value) => {
     if (value === "") return;
     _setSearched(value);
   };
-  useEffect16(() => {
+  useEffect17(() => {
     setSearch(searched);
   }, [searched]);
   const onSubmit = () => {
@@ -15427,13 +15503,13 @@ var getInstance = (props) => {
 var Submenu = (props) => {
   const { item, close, setAppliedFilters, closeParent } = props;
   const { open, isDynamic, itemSpacing, label, allowEmptySearch, getOptions: getOptions3 } = getInstance(props);
-  const [options, setOptions] = useState22([]);
-  const [page, setPage] = useState22(1);
-  const [search, _setSearch] = useState22("");
-  const [lastPage, setLastPage] = useState22(false);
-  const [loading, setLoading] = useState22(false);
-  const [, setFirstRender] = useState22(true);
-  const onSearch = useCallback4(async () => {
+  const [options, setOptions] = useState23([]);
+  const [page, setPage] = useState23(1);
+  const [search, _setSearch] = useState23("");
+  const [lastPage, setLastPage] = useState23(false);
+  const [loading, setLoading] = useState23(false);
+  const [, setFirstRender] = useState23(true);
+  const onSearch = useCallback5(async () => {
     const { options: newOptions, lastPage: lastPage2 } = await getOptions3(search, page);
     setLastPage(lastPage2);
     setOptions([...newOptions]);
@@ -15448,12 +15524,12 @@ var Submenu = (props) => {
       onSearch();
     }
   };
-  useEffect17(() => {
+  useEffect18(() => {
     setOptions([]);
     setSearch("", false);
     setFirstRender(true);
   }, [item]);
-  useEffect17(() => {
+  useEffect18(() => {
     setFirstRender((firstRender) => {
       if (!item || isDynamic && firstRender) {
         setLoading(false);
@@ -15534,9 +15610,9 @@ var Submenu = (props) => {
       loading,
       emptyContent: isDynamic && options.length === 0 ? /* @__PURE__ */ jsx338(EmptyMessage, { children: (() => {
         if (search !== "") {
-          return /* @__PURE__ */ jsx338(React40.Fragment, { children: "Nenhum resultado foi encontrado" });
+          return /* @__PURE__ */ jsx338(React39.Fragment, { children: "Nenhum resultado foi encontrado" });
         }
-        return /* @__PURE__ */ jsxs170(React40.Fragment, { children: [
+        return /* @__PURE__ */ jsxs170(React39.Fragment, { children: [
           "Utilize a busca para pesquisar por ",
           /* @__PURE__ */ jsx338("br", {}),
           label.text
@@ -15557,7 +15633,7 @@ var Submenu_default = Submenu;
 import { jsx as jsx339 } from "react/jsx-runtime";
 var FiltersMenu = (props) => {
   const { open, close } = props;
-  const [active, setActive] = useState23(-1);
+  const [active, setActive] = useState24(-1);
   const items = props.items.map((item) => {
     return {
       label: typeof item.label === "string" ? item.label : item.label.element,
@@ -15571,7 +15647,7 @@ var FiltersMenu = (props) => {
     };
   });
   const selected = active >= 0 && active < props.items.length ? props.items[active] : void 0;
-  useEffect18(() => {
+  useEffect19(() => {
     if (open) return;
     setActive(-1);
   }, [open]);
@@ -15647,14 +15723,14 @@ var Filters = Object.assign(
 var Filters_default = Filters;
 
 // src/components/Grid/components/Col/index.tsx
-import React43 from "react";
+import React42 from "react";
 
 // src/components/Grid/components/Row/context.ts
-import React42 from "react";
-var Provider5 = React42.createContext({
+import React41 from "react";
+var Provider5 = React41.createContext({
   cols: {}
 });
-var useContext4 = () => React42.useContext(Provider5);
+var useContext4 = () => React41.useContext(Provider5);
 var context_default4 = Provider5;
 
 // src/components/Grid/components/Col/styles.ts
@@ -15827,7 +15903,7 @@ var Col = styled50.div`
 
 // src/components/Grid/components/Col/index.tsx
 import { jsx as jsx341 } from "react/jsx-runtime";
-var Col2 = React43.forwardRef((props, ref) => {
+var Col2 = React42.forwardRef((props, ref) => {
   const context = useContext4();
   const colProps = { ...context.cols, ...props };
   const htmlProps = filterObject(colProps, [
@@ -15864,15 +15940,15 @@ Col2.displayName = "Col";
 var Col_default = Col2;
 
 // src/components/Grid/components/Grid/index.tsx
-import React45 from "react";
+import React44 from "react";
 
 // src/components/Grid/components/Grid/context.ts
-import React44 from "react";
-var Provider6 = React44.createContext({
+import React43 from "react";
+var Provider6 = React43.createContext({
   rows: {},
   cols: {}
 });
-var useContext5 = () => React44.useContext(Provider6);
+var useContext5 = () => React43.useContext(Provider6);
 var context_default5 = Provider6;
 
 // src/components/Grid/components/Grid/styles.ts
@@ -15905,7 +15981,7 @@ var Grid = styled51.div`
 
 // src/components/Grid/components/Grid/index.tsx
 import { jsx as jsx342 } from "react/jsx-runtime";
-var Grid2 = React45.forwardRef((props, ref) => {
+var Grid2 = React44.forwardRef((props, ref) => {
   const cols = props.cols || {};
   const rows = props.rows || {};
   const gridProps = filterObject(props, [
@@ -15928,7 +16004,7 @@ Grid2.displayName = "Grid";
 var Grid_default2 = Grid2;
 
 // src/components/Grid/components/Row/index.tsx
-import React46 from "react";
+import React45 from "react";
 
 // src/components/Grid/components/Row/styles.ts
 import styled52, { css as css37 } from "styled-components";
@@ -16055,7 +16131,7 @@ var Row = styled52.div`
 
 // src/components/Grid/components/Row/index.tsx
 import { jsx as jsx343 } from "react/jsx-runtime";
-var Row2 = React46.forwardRef((props, ref) => {
+var Row2 = React45.forwardRef((props, ref) => {
   const context = useContext5();
   const cols = { ...context.cols, ...props.cols || {} };
   const rowProps = { ...props, ...context.rows };
@@ -16099,15 +16175,15 @@ var Grid3 = Object.assign(Grid_default2, {
 var Grid_default3 = Grid3;
 
 // src/components/Modal/component.tsx
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 
 // src/addons/Portal/index.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 import { createPortal } from "react-dom";
 var Portal = (props) => {
   const { id, opened, children } = props;
   const portalRoot = document.createElement("div");
-  useEffect19(() => {
+  useEffect20(() => {
     if (opened) {
       portalRoot.id = id + "-root";
       document.body.appendChild(portalRoot);
@@ -16200,7 +16276,7 @@ var Container14 = styled53.div`
 
   ${({
   theme: theme4,
-  $size: size3,
+  $size: size4,
   $customSize: customSize,
   $color: color,
   $inverted: inverted
@@ -16208,9 +16284,9 @@ var Container14 = styled53.div`
     background-color: ${theme4.colors.white};
     box-shadow: 0 0 21px 7px ${theme4.getColor("black", 15)};
 
-    width: ${size3 === "custom" && customSize ? customSize.width || "auto" : widths[size3]};
+    width: ${size4 === "custom" && customSize ? customSize.width || "auto" : widths[size4]};
 
-    height: ${size3 === "custom" && customSize ? customSize.height || "auto" : heights[size3]};
+    height: ${size4 === "custom" && customSize ? customSize.height || "auto" : heights[size4]};
 
     ${Header6} {
       background-color: ${inverted ? theme4.isDarkColor(color) : theme4.colors[color]};
@@ -16225,7 +16301,7 @@ var Modal = (props) => {
   const {
     openState,
     title,
-    size: size3,
+    size: size4,
     color,
     inverted,
     children,
@@ -16243,7 +16319,7 @@ var Modal = (props) => {
       setOpen(false);
     }
   };
-  useEffect20(() => {
+  useEffect21(() => {
     const onEscDown = (event) => {
       if (closeOnEsc && event.key === "Escape") {
         event.preventDefault();
@@ -16255,11 +16331,11 @@ var Modal = (props) => {
       document.removeEventListener("keydown", onEscDown);
     };
   }, []);
-  const _size = size3 ? heights[size3] : heights.default;
+  const _size = size4 ? heights[size4] : heights.default;
   return /* @__PURE__ */ jsx344(Portal_default, { opened: open || false, id: "modal", children: /* @__PURE__ */ jsx344(Background, { onClick: onClickOutside, children: /* @__PURE__ */ jsxs171(
     Container14,
     {
-      $size: size3 || "small",
+      $size: size4 || "small",
       $color: color || "blue",
       $inverted: inverted,
       $customSize: customSize,
@@ -16445,7 +16521,7 @@ var Modal2 = Object.assign(component_default, {
 var Modal_default = Modal2;
 
 // src/components/Placeholder/components/Template1/index.tsx
-import React48 from "react";
+import React47 from "react";
 
 // src/components/Placeholder/components/Template1/styles.ts
 import styled57, { css as css39 } from "styled-components";
@@ -16481,19 +16557,19 @@ var HeaderLine = styled57.div`
     margin-top: 14px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css39`
+  ${({ $size: size4 }) => size4 === "mini" && css39`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css39`
+  ${({ $size: size4 }) => size4 === "small" && css39`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css39`
+  ${({ $size: size4 }) => size4 === "medium" && css39`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css39`
+  ${({ $size: size4 }) => size4 === "large" && css39`
       width: 75%;
     `}
 `;
@@ -16505,7 +16581,7 @@ var MainLine = styled57(HeaderLine)`
 // src/components/Placeholder/components/Template1/index.tsx
 import { jsx as jsx348, jsxs as jsxs172 } from "react/jsx-runtime";
 var Template1 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx348(React48.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx348(React47.Fragment, {});
   return /* @__PURE__ */ jsxs172(Container15, { children: [
     /* @__PURE__ */ jsxs172(Header7, { children: [
       /* @__PURE__ */ jsx348(HeaderImage, {}),
@@ -16526,7 +16602,7 @@ var Template1 = (props) => {
 var Template1_default = Template1;
 
 // src/components/Placeholder/components/Template2/index.tsx
-import React49 from "react";
+import React48 from "react";
 
 // src/components/Placeholder/components/Template2/styles.ts
 import styled59 from "styled-components";
@@ -16542,19 +16618,19 @@ var HeaderLine2 = styled58.div`
     margin-top: 14px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css40`
+  ${({ $size: size4 }) => size4 === "mini" && css40`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css40`
+  ${({ $size: size4 }) => size4 === "small" && css40`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css40`
+  ${({ $size: size4 }) => size4 === "medium" && css40`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css40`
+  ${({ $size: size4 }) => size4 === "large" && css40`
       width: 75%;
     `}
 `;
@@ -16596,7 +16672,7 @@ var HeaderLine3 = styled59(HeaderLine2)``;
 // src/components/Placeholder/components/Template2/index.tsx
 import { jsx as jsx349, jsxs as jsxs173 } from "react/jsx-runtime";
 var Template2 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx349(React49.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx349(React48.Fragment, {});
   return /* @__PURE__ */ jsxs173(Template2Container, { children: [
     /* @__PURE__ */ jsxs173(Header8, { children: [
       /* @__PURE__ */ jsx349(HeaderImage2, {}),
@@ -16614,7 +16690,7 @@ var Template2 = (props) => {
 var Template2_default = Template2;
 
 // src/components/Placeholder/components/Template3/index.tsx
-import React50 from "react";
+import React49 from "react";
 
 // src/components/Placeholder/components/Template3/styles.ts
 import styled60 from "styled-components";
@@ -16633,7 +16709,7 @@ var Template3Line = styled60(HeaderLine2)`
 // src/components/Placeholder/components/Template3/index.tsx
 import { jsx as jsx350, jsxs as jsxs174 } from "react/jsx-runtime";
 var Template3 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx350(React50.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx350(React49.Fragment, {});
   return /* @__PURE__ */ jsxs174(Template3Container, { children: [
     /* @__PURE__ */ jsx350(Template3Line, { $size: "large", $height: "7px", $color: "#DADADA" }),
     /* @__PURE__ */ jsx350(Template3Line, { $size: "small", $height: "7px", $color: "#DADADA" }),
@@ -16645,7 +16721,7 @@ var Template3 = (props) => {
 var Template3_default = Template3;
 
 // src/components/Placeholder/components/Template4/index.tsx
-import React51 from "react";
+import React50 from "react";
 
 // src/components/Placeholder/components/Template4/styles.ts
 import styled61, { css as css41 } from "styled-components";
@@ -16664,19 +16740,19 @@ var HeaderLine4 = styled61.div`
     margin-top: 14px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css41`
+  ${({ $size: size4 }) => size4 === "mini" && css41`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css41`
+  ${({ $size: size4 }) => size4 === "small" && css41`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css41`
+  ${({ $size: size4 }) => size4 === "medium" && css41`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css41`
+  ${({ $size: size4 }) => size4 === "large" && css41`
       width: 75%;
     `}
 `;
@@ -16693,7 +16769,7 @@ var CustomLine = styled61(HeaderLine4)`
 // src/components/Placeholder/components/Template4/index.tsx
 import { jsx as jsx351, jsxs as jsxs175 } from "react/jsx-runtime";
 var Template4 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx351(React51.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx351(React50.Fragment, {});
   return /* @__PURE__ */ jsxs175(Template4Container, { children: [
     /* @__PURE__ */ jsx351(
       CustomLine,
@@ -16772,7 +16848,7 @@ var Template4 = (props) => {
 var Template4_default = Template4;
 
 // src/components/Placeholder/components/Template5/index.tsx
-import React52 from "react";
+import React51 from "react";
 
 // src/components/Placeholder/components/Template5/styles.ts
 import styled62, { css as css42 } from "styled-components";
@@ -16802,19 +16878,19 @@ var HeaderLine5 = styled62.div`
     margin-top: 14px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css42`
+  ${({ $size: size4 }) => size4 === "mini" && css42`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css42`
+  ${({ $size: size4 }) => size4 === "small" && css42`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css42`
+  ${({ $size: size4 }) => size4 === "medium" && css42`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css42`
+  ${({ $size: size4 }) => size4 === "large" && css42`
       width: 75%;
     `}
 `;
@@ -16831,7 +16907,7 @@ var MainContent3 = styled62.div`
 // src/components/Placeholder/components/Template5/index.tsx
 import { jsx as jsx352, jsxs as jsxs176 } from "react/jsx-runtime";
 var Template5 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx352(React52.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx352(React51.Fragment, {});
   return /* @__PURE__ */ jsxs176(Container19, { children: [
     /* @__PURE__ */ jsx352(Circle, {}),
     /* @__PURE__ */ jsxs176(MainContent3, { children: [
@@ -16877,7 +16953,7 @@ var Template5 = (props) => {
 var Template5_default = Template5;
 
 // src/components/Placeholder/components/Template6/index.tsx
-import React53 from "react";
+import React52 from "react";
 
 // src/components/Placeholder/components/Template6/styles.ts
 import styled63, { css as css43 } from "styled-components";
@@ -16913,15 +16989,15 @@ var HeaderLine6 = styled63.div`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css43`
+  ${({ $size: size4 }) => size4 === "small" && css43`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css43`
+  ${({ $size: size4 }) => size4 === "medium" && css43`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css43`
+  ${({ $size: size4 }) => size4 === "large" && css43`
       width: 75%;
     `}
 `;
@@ -16935,7 +17011,7 @@ var CustomLine3 = styled63(HeaderLine6)`
 // src/components/Placeholder/components/Template6/index.tsx
 import { jsx as jsx353, jsxs as jsxs177 } from "react/jsx-runtime";
 var Template6 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx353(React53.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx353(React52.Fragment, {});
   return /* @__PURE__ */ jsx353(Container20, { children: /* @__PURE__ */ jsxs177(Header9, { children: [
     /* @__PURE__ */ jsx353(
       CustomLine3,
@@ -16969,7 +17045,7 @@ var Template6 = (props) => {
 var Template6_default = Template6;
 
 // src/components/Placeholder/components/Template7/index.tsx
-import React54 from "react";
+import React53 from "react";
 
 // src/components/Placeholder/components/Template7/styles.ts
 import styled64, { css as css44 } from "styled-components";
@@ -16997,19 +17073,19 @@ var HeaderLine7 = styled64.div`
     margin-top: 14px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css44`
+  ${({ $size: size4 }) => size4 === "mini" && css44`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css44`
+  ${({ $size: size4 }) => size4 === "small" && css44`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css44`
+  ${({ $size: size4 }) => size4 === "medium" && css44`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css44`
+  ${({ $size: size4 }) => size4 === "large" && css44`
       width: 75%;
     `}
 `;
@@ -17037,7 +17113,7 @@ var Circle2 = styled64.div`
 // src/components/Placeholder/components/Template7/index.tsx
 import { jsx as jsx354, jsxs as jsxs178 } from "react/jsx-runtime";
 var Template7 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx354(React54.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx354(React53.Fragment, {});
   return /* @__PURE__ */ jsxs178(Container21, { children: [
     /* @__PURE__ */ jsx354(Header10, { children: /* @__PURE__ */ jsx354(
       CustomLine4,
@@ -17060,7 +17136,7 @@ var Template7 = (props) => {
 var Template7_default = Template7;
 
 // src/components/Placeholder/components/Template8/index.tsx
-import React55 from "react";
+import React54 from "react";
 
 // src/components/Placeholder/components/Template8/styles.ts
 import styled65, { css as css45 } from "styled-components";
@@ -17088,19 +17164,19 @@ var HeaderLine8 = styled65.div`
     margin-top: 14px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css45`
+  ${({ $size: size4 }) => size4 === "mini" && css45`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css45`
+  ${({ $size: size4 }) => size4 === "small" && css45`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css45`
+  ${({ $size: size4 }) => size4 === "medium" && css45`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css45`
+  ${({ $size: size4 }) => size4 === "large" && css45`
       width: 75%;
     `}
 `;
@@ -17121,7 +17197,7 @@ var Main4 = styled65.div`
 // src/components/Placeholder/components/Template8/index.tsx
 import { jsx as jsx355, jsxs as jsxs179 } from "react/jsx-runtime";
 var Template8 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx355(React55.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx355(React54.Fragment, {});
   return /* @__PURE__ */ jsxs179(Container22, { children: [
     /* @__PURE__ */ jsx355(Header11, { children: /* @__PURE__ */ jsx355(
       CustomLine5,
@@ -17157,7 +17233,7 @@ var Template8 = (props) => {
 var Template8_default = Template8;
 
 // src/components/Placeholder/components/Template9/index.tsx
-import React56 from "react";
+import React55 from "react";
 
 // src/components/Placeholder/components/Template9/styles.ts
 import styled66, { css as css46 } from "styled-components";
@@ -17185,19 +17261,19 @@ var HeaderLine9 = styled66.div`
     margin-top: 7px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css46`
+  ${({ $size: size4 }) => size4 === "mini" && css46`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css46`
+  ${({ $size: size4 }) => size4 === "small" && css46`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css46`
+  ${({ $size: size4 }) => size4 === "medium" && css46`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css46`
+  ${({ $size: size4 }) => size4 === "large" && css46`
       width: 75%;
     `}
 `;
@@ -17225,7 +17301,7 @@ var Circle3 = styled66.div`
 // src/components/Placeholder/components/Template9/index.tsx
 import { jsx as jsx356, jsxs as jsxs180 } from "react/jsx-runtime";
 var Template82 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx356(React56.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx356(React55.Fragment, {});
   return /* @__PURE__ */ jsxs180(Container23, { children: [
     /* @__PURE__ */ jsxs180(Header12, { children: [
       /* @__PURE__ */ jsx356(
@@ -17253,7 +17329,7 @@ var Template82 = (props) => {
 var Template9_default = Template82;
 
 // src/components/Placeholder/components/Template10/index.tsx
-import React57 from "react";
+import React56 from "react";
 
 // src/components/Placeholder/components/Template10/styles.ts
 import styled67, { css as css47 } from "styled-components";
@@ -17281,19 +17357,19 @@ var HeaderLine10 = styled67.div`
     margin-top: 7px;
   }
 
-  ${({ $size: size3 }) => size3 === "mini" && css47`
+  ${({ $size: size4 }) => size4 === "mini" && css47`
       width: 15%;
     `}
 
-  ${({ $size: size3 }) => size3 === "small" && css47`
+  ${({ $size: size4 }) => size4 === "small" && css47`
       width: 25%;
     `}
 
-  ${({ $size: size3 }) => size3 === "medium" && css47`
+  ${({ $size: size4 }) => size4 === "medium" && css47`
       width: 45%;
     `}
 
-  ${({ $size: size3 }) => size3 === "large" && css47`
+  ${({ $size: size4 }) => size4 === "large" && css47`
       width: 75%;
     `}
 `;
@@ -17325,7 +17401,7 @@ var Circle4 = styled67.div`
 // src/components/Placeholder/components/Template10/index.tsx
 import { jsx as jsx357, jsxs as jsxs181 } from "react/jsx-runtime";
 var Template10 = (props) => {
-  if (!props.loading) return /* @__PURE__ */ jsx357(React57.Fragment, {});
+  if (!props.loading) return /* @__PURE__ */ jsx357(React56.Fragment, {});
   return /* @__PURE__ */ jsxs181(Container24, { children: [
     /* @__PURE__ */ jsxs181(Header13, { children: [
       /* @__PURE__ */ jsx357(
@@ -17538,102 +17614,1927 @@ var ProgressBar = ({ type, value, ...props }) => {
 };
 var ProgressBar_default = ProgressBar;
 
-// src/components/Signature/index.tsx
-import { useCallback as useCallback5, useEffect as useEffect21, useMemo as useMemo3, useState as useState24 } from "react";
-import SignatureCanvas from "react-signature-canvas";
-
-// src/components/Signature/styles.ts
-import styled69 from "styled-components";
-var Container26 = styled69.div`
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: theme4 }) => theme4.spacings.s3};
-`;
-var CanvasContainer = styled69.div`
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-  background-color: ${({ theme: theme4, $invalid: invalid }) => invalid ? theme4.getColor("warningRed", 5) : theme4.colors.white};
-
-  &[data-placeholder]:before {
-    content: attr(data-placeholder);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    color: ${({ theme: theme4, $invalid: invalid }) => theme4.colors[invalid ? "warningRed" : "darkBlue"]};
-
-    ${({ theme: theme4 }) => theme4.useTypography("h1")}
-    font-size: 59px;
-    line-height: 71px;
-    opacity: 0.1;
-    z-index: 1;
-  }
-
-  canvas {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    border: 1px solid
-      ${({ theme: theme4, $invalid: invalid }) => theme4.colors[invalid ? "warningRed" : "lightGrey"]};
-    border-radius: 4px;
-    z-index: 2;
-  }
+// src/components/Select/index.tsx
+import React62, { useId, useMemo as useMemo13, useState as useState30 } from "react";
+import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
 
-  /* icons container */
-  > div:nth-child(1) {
-    position: absolute;
-    top: ${({ theme: theme4 }) => theme4.spacings.s3};
-    right: ${({ theme: theme4 }) => theme4.spacings.s3};
-    display: flex;
-    gap: ${({ theme: theme4 }) => theme4.spacings.s1};
-    z-index: 3;
+// src/components/Select/hooks/useAsyncOptions/index.ts
+import { useCallback as useCallback6, useEffect as useEffect22, useMemo as useMemo4, useState as useState25 } from "react";
 
-    > button {
-      padding: 0;
-      outline: none;
-      border: none;
-      background: none;
+// src/components/Select/constants.ts
+var SEARCH_DEBOUNCE_MS = 500;
+var MENU_EXIT_MS = 250;
 
-      > i.icon,
-      > i.icon:before {
-        color: #4e4e4e;
-        font-size: 20px;
-        line-height: 20px;
-        width: 20px;
+// src/components/Select/hooks/useAsyncOptions/index.ts
+var useAsyncOptions = (loader2) => {
+  const [options, setOptions] = useState25([]);
+  const [pagination, setPagination] = useState25({
+    page: 1,
+    last: false,
+    fetched: null
+  });
+  const cursor = useMemo4(
+    () => options.length > 0 ? options[options.length - 1] : null,
+    [options]
+  );
+  const {
+    current: [searchInput, setSearchInput],
+    debounced: [search]
+  } = useDebouncedState_default(
+    "",
+    () => {
+      setOptions([]);
+      setPagination({
+        page: 1,
+        last: true,
+        fetched: null
+      });
+    },
+    SEARCH_DEBOUNCE_MS
+  );
+  const loadOptions = useCallback6(async () => {
+    if (pagination.fetched !== null) return;
+    try {
+      const result = await loader2(search, pagination.page, cursor);
+      if (result === null) return;
+      setOptions(
+        pagination.page === 1 ? result.options : (prev) => [...prev, ...result.options]
+      );
+      setPagination((prev) => ({
+        ...prev,
+        fetched: /* @__PURE__ */ new Date(),
+        last: result.last
+      }));
+    } catch (e) {
+      setPagination((prev) => ({ ...prev, fetched: /* @__PURE__ */ new Date(), last: true }));
+    }
+  }, [loader2, search, pagination.page, pagination.fetched, cursor]);
+  const paginate2 = () => setPagination(
+    (prev) => prev.last ? prev : {
+      page: prev.page + 1,
+      last: true,
+      fetched: null
+    }
+  );
+  useEffect22(() => {
+    loadOptions();
+  }, [loadOptions]);
+  return {
+    options,
+    loading: pagination.fetched === null,
+    paginate: paginate2,
+    searchInput: [searchInput, setSearchInput]
+  };
+};
+var useAsyncOptions_default = useAsyncOptions;
+
+// src/components/Select/hooks/useFloatingMenu/index.ts
+import {
+  autoUpdate,
+  flip,
+  size as size3,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useTransitionStatus
+} from "@floating-ui/react";
+var useFloatingMenu = ({ open, onOpenChange }) => {
+  const floating = useFloating({
+    open,
+    onOpenChange,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      flip(),
+      size3({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`
+          });
+        }
+      })
+    ]
+  });
+  const transition = useTransitionStatus(floating.context, {
+    duration: MENU_EXIT_MS
+  });
+  const dismiss = useDismiss(floating.context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true
+  });
+  const interactions = useInteractions([dismiss]);
+  return {
+    floating,
+    transition,
+    interactions
+  };
+};
+var useFloatingMenu_default = useFloatingMenu;
+
+// src/components/Select/hooks/useListNavigation/index.ts
+import { useCallback as useCallback7, useEffect as useEffect23, useMemo as useMemo5, useState as useState26 } from "react";
+var INVALID_INDEX = -1;
+var useActiveIndex = (itemCount, scrollToIndex) => {
+  const [activeIndex, setActiveIndex] = useState26(INVALID_INDEX);
+  useEffect23(() => {
+    setActiveIndex((current) => {
+      if (current >= itemCount) return INVALID_INDEX;
+      return current;
+    });
+  }, [itemCount]);
+  const setActiveIndexMiddleware = (activeIndex2, scroll = true) => {
+    setActiveIndex(activeIndex2);
+    if (activeIndex2 < 0 || !scroll) return;
+    scrollToIndex?.(activeIndex2);
+  };
+  return [activeIndex, setActiveIndexMiddleware];
+};
+var useListNavigation = ({
+  itemCount,
+  isItemDisabled,
+  onSelect,
+  scrollToIndex
+}) => {
+  const [activeIndex, setActiveIndex] = useActiveIndex(itemCount, scrollToIndex);
+  const firstEnabledIndex = useMemo5(() => {
+    for (let index = 0; index < itemCount; index += 1) {
+      if (!isItemDisabled(index)) return index;
+    }
+    return INVALID_INDEX;
+  }, [isItemDisabled, itemCount]);
+  const lastEnabledIndex = useMemo5(() => {
+    for (let index = itemCount - 1; index >= 0; index -= 1) {
+      if (!isItemDisabled(index)) return index;
+    }
+    return INVALID_INDEX;
+  }, [isItemDisabled, itemCount]);
+  const findNextEnabled = useCallback7(
+    (from, direction) => {
+      let index = from;
+      while (index >= 0 && index < itemCount) {
+        if (!isItemDisabled(index)) return index;
+        index += direction;
       }
-
-      &:not(:disabled) {
-        cursor: pointer;
+      return INVALID_INDEX;
+    },
+    [isItemDisabled, itemCount]
+  );
+  const onKeyDown = useCallback7(
+    (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const from = activeIndex < 0 ? 0 : activeIndex + 1;
+        const next = findNextEnabled(from, 1);
+        if (next >= 0) setActiveIndex(next);
+        return;
       }
-      &:disabled {
-        opacity: 0.5;
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const from = activeIndex < 0 ? itemCount - 1 : activeIndex - 1;
+        const next = findNextEnabled(from, -1);
+        if (next >= 0) setActiveIndex(next);
+        return;
       }
-
-      transition: opacity 0.25s linear;
-    }
-  }
-`;
-
-// src/components/Signature/index.tsx
-import { jsx as jsx360, jsxs as jsxs183 } from "react/jsx-runtime";
-var FONTS = [
-  "GreatVibes",
-  "Pacifico",
-  "Allura"
-];
-var FONT_SIZE = 64;
-var voidFn = () => {
+      if (event.key === "Home") {
+        event.preventDefault();
+        if (firstEnabledIndex >= 0) setActiveIndex(firstEnabledIndex);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        if (lastEnabledIndex >= 0) setActiveIndex(lastEnabledIndex);
+        return;
+      }
+      if ((event.key === "Enter" || event.key === " ") && activeIndex >= 0) {
+        event.preventDefault();
+        if (!isItemDisabled(activeIndex)) {
+          onSelect(activeIndex);
+        }
+      }
+    },
+    [
+      activeIndex,
+      findNextEnabled,
+      firstEnabledIndex,
+      isItemDisabled,
+      itemCount,
+      lastEnabledIndex,
+      onSelect
+    ]
+  );
+  const onMouseEnter = (index) => setActiveIndex(index, false);
+  return {
+    activeIndex,
+    onMouseEnter,
+    onKeyDown
+  };
 };
-var SignatureInput = ({
-  setValue,
-  value,
+var useListNavigation_default = useListNavigation;
+
+// src/components/Select/hooks/useRuleIndex/index.ts
+import { useCallback as useCallback8, useMemo as useMemo6 } from "react";
+var useRuleIndex = ({
+  options,
+  getKey,
+  rules
+}) => {
+  const failedRuleByKey = useMemo6(() => {
+    const failedRuleByKey2 = /* @__PURE__ */ new Map();
+    options.forEach((option) => {
+      const key = getKey(option);
+      const failedRule = rules?.find((rule) => !rule.allow(option));
+      if (failedRule) {
+        failedRuleByKey2.set(key, failedRule);
+      }
+    });
+    return failedRuleByKey2;
+  }, [getKey, options, rules]);
+  const getFailedRuleByKey = useCallback8(
+    (key) => {
+      return failedRuleByKey.get(key);
+    },
+    [failedRuleByKey]
+  );
+  return {
+    getFailedRuleByKey,
+    enabledCount: options.length - failedRuleByKey.size
+  };
+};
+var useRuleIndex_default = useRuleIndex;
+
+// src/components/Select/hooks/useVirtualizedOptions/index.ts
+import { useEffect as useEffect24, useMemo as useMemo7, useRef as useRef2 } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+var useVirtualizedOptions = (params) => {
+  const { optionsLength, loading, onPaginate, overscan = 2 } = params;
+  const estimateSize = useMemo7(() => {
+    const estimateSize2 = params.estimateSize;
+    if (estimateSize2 === void 0) {
+      return () => 46;
+    }
+    if (typeof estimateSize2 === "function") {
+      return estimateSize2;
+    }
+    return () => estimateSize2;
+  }, [params.estimateSize]);
+  const listRef = useRef2(null);
+  const searchRef = useRef2(null);
+  const rowVirtualizer = useVirtualizer({
+    count: optionsLength,
+    getScrollElement: () => listRef.current,
+    estimateSize,
+    overscan
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  useEffect24(() => {
+    searchRef.current?.focus();
+  }, [searchRef.current]);
+  const endIndex = useMemo7(
+    () => virtualItems[virtualItems.length - 1]?.index ?? 0,
+    [virtualItems]
+  );
+  useEffect24(() => {
+    if (loading || optionsLength < 1) return;
+    if (endIndex >= optionsLength - 1 - overscan) {
+      onPaginate();
+    }
+  }, [loading, endIndex, optionsLength, overscan, onPaginate]);
+  return {
+    listRef,
+    searchRef,
+    rowVirtualizer,
+    virtualItems
+  };
+};
+var useVirtualizedOptions_default = useVirtualizedOptions;
+
+// src/components/Select/instances/multi/index.tsx
+import React60, { useCallback as useCallback9, useMemo as useMemo11, useState as useState29 } from "react";
+
+// src/components/Select/components/Apply/index.tsx
+import { useMemo as useMemo10 } from "react";
+
+// src/components/Popup/index.tsx
+import React57, { useMemo as useMemo9, useRef as useRef3 } from "react";
+import {
+  FloatingPortal,
+  arrow,
+  autoUpdate as autoUpdate2,
+  flip as flip2,
+  hide,
+  offset,
+  shift,
+  useClick,
+  useDismiss as useDismiss2,
+  useFloating as useFloating2,
+  useHover,
+  useInteractions as useInteractions2
+} from "@floating-ui/react";
+
+// src/components/Popup/hooks/fallbackPlacements/index.ts
+import { useMemo as useMemo8 } from "react";
+var FALLBACK_PLACEMENTS = {
+  top: ["top-start", "top-end", "bottom", "right", "left"],
+  "top-start": ["top", "top-end", "right-start", "left-start", "bottom-start"],
+  "top-end": ["top", "top-start", "right-end", "left-end", "bottom-end"],
+  right: ["right-start", "right-end", "bottom", "top", "left"],
+  "right-start": [
+    "right",
+    "right-end",
+    "bottom-start",
+    "top-start",
+    "left-start"
+  ],
+  "right-end": ["right", "right-start", "bottom-end", "top-end", "left-end"],
+  bottom: ["bottom-start", "bottom-end", "top", "right", "left"],
+  "bottom-start": [
+    "bottom",
+    "bottom-end",
+    "right-start",
+    "left-start",
+    "top-start"
+  ],
+  "bottom-end": ["bottom", "bottom-start", "right-end", "left-end", "top-end"],
+  left: ["left-start", "left-end", "bottom", "top", "right"],
+  "left-start": [
+    "left",
+    "left-end",
+    "bottom-start",
+    "top-start",
+    "right-start"
+  ],
+  "left-end": ["left", "left-start", "bottom-end", "top-end", "right-end"]
+};
+var useFallbackPlacements = (props) => {
+  const { placement, fallbackPlacements } = props;
+  const fallbackList = useMemo8(() => {
+    if (fallbackPlacements && fallbackPlacements.length > 0) {
+      return fallbackPlacements;
+    }
+    return FALLBACK_PLACEMENTS[placement];
+  }, [fallbackPlacements, placement]);
+  return fallbackList;
+};
+var fallbackPlacements_default = useFallbackPlacements;
+
+// src/components/Popup/hooks/open/index.ts
+import { useState as useState27 } from "react";
+var useOpen = (props) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState27(false);
+  const isControlled = props.open !== void 0;
+  const open = isControlled ? props.open : uncontrolledOpen;
+  const setOpen = (nextOpen) => {
+    if (isControlled) {
+      props.setOpen?.(nextOpen);
+      return;
+    }
+    setUncontrolledOpen(nextOpen);
+  };
+  return [open, setOpen];
+};
+var open_default = useOpen;
+
+// src/components/Popup/styles.ts
+import styled69, { css as css48 } from "styled-components";
+var TooltipArrow = styled69.div`
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+
+  ${({ $arrow: arrow2, $placement: placement }) => {
+  const width = (arrow2 || "pointed") === "flattened" ? 30 : 16;
+  const halfWidth = width / 2;
+  const borderSize = 1;
+  const length = 6;
+  const [side, align] = placement.split("-");
+  if (side === "top" || side === "bottom") {
+    const vertical = side === "top" ? css48`
+              bottom: 0;
+              &::before {
+                content: '';
+                position: absolute;
+                left: -${halfWidth}px;
+                border-left: ${halfWidth}px solid transparent;
+                border-right: ${halfWidth}px solid transparent;
+                border-top: ${length}px solid var(--tooltip-border);
+              }
+              &::after {
+                content: '';
+                position: absolute;
+                left: -${halfWidth - borderSize}px;
+                top: -${borderSize}px;
+                border-left: ${halfWidth - borderSize}px solid transparent;
+                border-right: ${halfWidth - borderSize}px solid transparent;
+                border-top: ${length - borderSize}px solid var(--tooltip-bg);
+              }
+            ` : css48`
+              top: -${length}px;
+              &::before {
+                content: '';
+                position: absolute;
+                left: -${halfWidth}px;
+                border-left: ${halfWidth}px solid transparent;
+                border-right: ${halfWidth}px solid transparent;
+                border-bottom: ${length}px solid var(--tooltip-border);
+              }
+              &::after {
+                content: '';
+                position: absolute;
+                left: -${halfWidth - borderSize}px;
+                top: ${borderSize}px;
+                border-left: ${halfWidth - borderSize}px solid transparent;
+                border-right: ${halfWidth - borderSize}px solid transparent;
+                border-bottom: ${length - borderSize}px solid var(--tooltip-bg);
+              }
+            `;
+    const alignStyles = align === "start" ? css48`
+              left: ${halfWidth}px;
+              margin-left: ${length}px;
+            ` : align === "end" ? css48`
+              right: ${halfWidth}px;
+              margin-right: ${length}px;
+            ` : css48`
+              left: 50%;
+            `;
+    return css48`
+        ${vertical}
+        ${alignStyles}
+      `;
+  }
+  const horizontal = side === "left" ? css48`
+            right: 0;
+            &::before {
+              content: '';
+              position: absolute;
+              top: -${halfWidth}px;
+              border-top: ${halfWidth}px solid transparent;
+              border-bottom: ${halfWidth}px solid transparent;
+              border-left: ${length}px solid var(--tooltip-border);
+            }
+            &::after {
+              content: '';
+              position: absolute;
+              top: -${halfWidth - borderSize}px;
+              left: -${borderSize}px;
+              border-top: ${halfWidth - borderSize}px solid transparent;
+              border-bottom: ${halfWidth - borderSize}px solid transparent;
+              border-left: ${length - borderSize}px solid var(--tooltip-bg);
+            }
+          ` : css48`
+            left: -${length}px;
+            &::before {
+              content: '';
+              position: absolute;
+              top: -${halfWidth}px;
+              border-top: ${halfWidth}px solid transparent;
+              border-bottom: ${halfWidth}px solid transparent;
+              border-right: ${length}px solid var(--tooltip-border);
+            }
+            &::after {
+              content: '';
+              position: absolute;
+              top: -${halfWidth - borderSize}px;
+              left: ${borderSize}px;
+              border-top: ${halfWidth - borderSize}px solid transparent;
+              border-bottom: ${halfWidth - borderSize}px solid transparent;
+              border-right: ${length - borderSize}px solid var(--tooltip-bg);
+            }
+          `;
+  if (align === "start") {
+    return css48`
+        top: ${halfWidth}px;
+        margin-top: ${length}px;
+        ${horizontal}
+      `;
+  }
+  if (align === "end") {
+    return css48`
+        bottom: ${halfWidth}px;
+        margin-bottom: ${length}px;
+        ${horizontal}
+      `;
+  }
+  return css48`
+      top: 50%;
+      ${horizontal}
+    `;
+}}
+`;
+var TooltipSurface = styled69.div`
+  position: relative;
+
+  ${({ theme: theme4, $background: background, $placement: placement }) => {
+  const [side] = placement.split("-");
+  const [bgColor, fontColor, borderColor, borderRadius] = background === "light" ? [theme4.colors.white, theme4.colors.greyishBlue, "#eeeeee", 5] : [
+    theme4.colors.greyishBlue,
+    theme4.colors.white,
+    theme4.colors.greyishBlue,
+    0
+  ];
+  const boxShadow = {
+    top: [0, -4],
+    bottom: [0, 4],
+    right: [4, 0],
+    left: [-4, 0]
+  }[side] || [0, 4];
+  return css48`
+      --tooltip-bg: ${bgColor};
+      --tooltip-border: ${borderColor};
+      border: 1px solid ${borderColor};
+      border-radius: ${borderRadius}px;
+      box-shadow: ${boxShadow[0]}px ${boxShadow[1]}px 10px
+        ${theme4.getColor("black", 10)};
+      color: ${fontColor};
+
+      &,
+      & ${TooltipArrow} {
+        background-color: ${bgColor};
+      }
+    `;
+}}
+
+  border-radius: 4px;
+  padding: 8px 10px;
+  font-size: 12px;
+  max-width: 240px;
+  z-index: 1000;
+`;
+
+// src/components/Popup/index.tsx
+import { jsx as jsx360, jsxs as jsxs183 } from "react/jsx-runtime";
+var mergeRefs = (...refs) => {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    });
+  };
+};
+var PopupComponent = (props) => {
+  const {
+    content: Content5,
+    renderTrigger,
+    triggerProps,
+    on = "hover",
+    placement,
+    offset: offsetValue = 8,
+    shift: shiftValue = 8,
+    background = "dark",
+    closeOnClip = false
+  } = props;
+  const arrowStyle = props.arrow || (background === "dark" ? "pointed" : "flattened");
+  const withArrow = arrowStyle !== "none";
+  const [open, setOpen] = open_default(props);
+  const arrowRef = useRef3(null);
+  const fallbackPlacements = fallbackPlacements_default(props);
+  const floating = useFloating2({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    whileElementsMounted: autoUpdate2,
+    middleware: [
+      offset(offsetValue),
+      flip2({ fallbackPlacements, padding: shiftValue }),
+      shift({ padding: shiftValue }),
+      ...withArrow ? [arrow({ element: arrowRef })] : [],
+      ...closeOnClip ? [
+        hide(),
+        {
+          name: "closeOnClip",
+          fn(state) {
+            if (state.middlewareData.hide?.referenceHidden) {
+              setOpen(false);
+            }
+            return {};
+          }
+        }
+      ] : []
+    ]
+  });
+  const hover = useHover(floating.context, {
+    move: false,
+    enabled: on === "hover"
+  });
+  const click = useClick(floating.context, {
+    enabled: on === "click"
+  });
+  const dismiss = useDismiss2(floating.context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true,
+    enabled: on === "click"
+  });
+  const interactions = useInteractions2([hover, click, dismiss]);
+  const referenceProps = useMemo9(() => {
+    const { ref: triggerRef, ...rest } = triggerProps || {};
+    return interactions.getReferenceProps({
+      ...rest,
+      ref: mergeRefs(floating.refs.setReference, triggerRef)
+    });
+  }, [floating.refs.setReference, interactions, triggerProps]);
+  return /* @__PURE__ */ jsxs183(React57.Fragment, { children: [
+    renderTrigger(referenceProps),
+    open ? /* @__PURE__ */ jsx360(FloatingPortal, { children: /* @__PURE__ */ jsxs183(
+      TooltipSurface,
+      {
+        ref: floating.refs.setFloating,
+        style: floating.floatingStyles,
+        $placement: floating.placement,
+        $background: background,
+        ...interactions.getFloatingProps(),
+        children: [
+          withArrow ? /* @__PURE__ */ jsx360(
+            TooltipArrow,
+            {
+              ref: arrowRef,
+              $arrow: arrowStyle,
+              $placement: floating.placement
+            }
+          ) : null,
+          /* @__PURE__ */ jsx360(Content5, {})
+        ]
+      }
+    ) }) : null
+  ] });
+};
+var Popup2 = ({
+  enabled,
+  ...props
+}) => {
+  return enabled !== false ? /* @__PURE__ */ jsx360(PopupComponent, { ...props }) : props.renderTrigger(props.triggerProps || {});
+};
+var Popup_default = Popup2;
+
+// src/components/Select/components/Apply/styles.ts
+import styled70 from "styled-components";
+var ApplyButton = styled70.button`
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+
+  background-color: ${({ theme: theme4 }) => theme4.colors.blue};
+  border-radius: 3px;
+
+  ${({ theme: theme4 }) => theme4.useTypography("h4")}
+  color: ${({ theme: theme4 }) => theme4.colors.white};
+
+  height: 35px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition-property: opacity;
+  transition-duration: 0.25s;
+  transition-timing-function: linear;
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+  }
+  &:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
+`;
+
+// src/components/Select/components/Apply/index.tsx
+import { jsx as jsx361 } from "react/jsx-runtime";
+var Apply = ({
+  setValue,
+  clearable,
+  applyRules,
+  onClose,
+  draft
+}) => {
+  const value = useMemo10(() => Array.from(draft.values()), [draft]);
+  const failedApplyRule = useMemo10(() => {
+    const rule = applyRules.find((rule2) => !rule2.allow(value));
+    return rule;
+  }, [value, applyRules]);
+  const ApplyRuleComponent = failedApplyRule?.Component;
+  const onApply = () => {
+    if (!clearable && draft.size < 1) return;
+    if (failedApplyRule !== void 0) return;
+    setValue(Array.from(draft.values()));
+    onClose();
+  };
+  return /* @__PURE__ */ jsx361(
+    Popup_default,
+    {
+      ...ApplyRuleComponent !== void 0 ? {
+        enabled: true,
+        content: () => /* @__PURE__ */ jsx361(ApplyRuleComponent, { value })
+      } : {
+        enabled: false,
+        content: () => null
+      },
+      on: "click",
+      closeOnClip: true,
+      placement: "right",
+      triggerType: "button",
+      triggerProps: {
+        onClick: onApply
+      },
+      renderTrigger: (props) => /* @__PURE__ */ jsx361(
+        ApplyButton,
+        {
+          type: "button",
+          "aria-disabled": !clearable && draft.size < 1 || failedApplyRule !== void 0,
+          ...props,
+          children: "Aplicar"
+        }
+      )
+    }
+  );
+};
+var Apply_default = Apply;
+
+// src/components/Select/components/Scroll/index.tsx
+import React58 from "react";
+
+// src/components/Select/components/Scroll/styles.ts
+import styled71 from "styled-components";
+var ListContainer = styled71.div`
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+`;
+var ListScroll = styled71.div`
+  overflow-y: scroll;
+  overflow-y: overlay;
+  width: 100%;
+  height: 100%;
+
+  /* Firefox */
+  @supports (scrollbar-width: thin) {
+    .scroll {
+      scrollbar-color: ${({ theme: theme4 }) => `${theme4.colors.grey} ${theme4.colors.white}`};
+      scrollbar-width: thin;
+    }
+  }
+
+  /* Chrome/Edge/Safari (WebKit/Blink) */
+  @supports selector(::-webkit-scrollbar) {
+    &::-webkit-scrollbar {
+      width: ${({ theme: theme4 }) => theme4.spacings.s1};
+    }
+    &::-webkit-scrollbar-thumb {
+      background: ${({ theme: theme4 }) => theme4.colors.grey};
+    }
+    &::-webkit-scrollbar-track {
+      background: ${({ theme: theme4 }) => theme4.colors.white};
+    }
+  }
+`;
+var ListInner = styled71.div`
+  position: relative;
+  width: 100%;
+`;
+var EmptyMessage2 = styled71.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
+  color: ${({ theme: theme4 }) => theme4.getColor("greyishBlue", 80)};
+`;
+var MultiHighlight = Checkmark;
+var SingleHighlight = styled71.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 3px;
+
+  transition-property: background-color;
+  transition-timing-function: linear;
+  transition-duration: 0.25s;
+`;
+var OptionRow = styled71.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme4 }) => theme4.spacings.s1};
+
+  background-color: ${({ theme: theme4, $active: active }) => active ? theme4.getColor("blue", 15) : theme4.colors.white};
+  padding: ${({ theme: theme4 }) => theme4.spacings.s3};
+
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
+  color: ${({ theme: theme4 }) => theme4.colors.greyishBlue};
+
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  &:nth-last-child(1) {
+    border-bottom-color: transparent;
+  }
+  &:not(:nth-last-child(1)) {
+    border-bottom-color: ${({ theme: theme4 }) => theme4.getColor("greyishBlue", 10)};
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  &:not([aria-disabled='true']) {
+    cursor: pointer;
+    opacity: 1;
+  }
+
+  &[aria-selected='true'] > ${SingleHighlight} {
+    background-color: ${({ theme: theme4 }) => theme4.colors.blue};
+  }
+  &:not([aria-selected='true']) > ${SingleHighlight} {
+    background-color: transparent;
+  }
+
+  > ${MultiHighlight} {
+    background-color: ${({ theme: theme4, $active: active }) => active ? theme4.colors.iceWhite : theme4.colors.white};
+  }
+
+  &[aria-selected='true'] > ${MultiHighlight} {
+    border-color: ${({ theme: theme4 }) => theme4.colors.blue};
+  }
+  &[aria-selected='true'] > ${MultiHighlight}:after {
+    width: 5px;
+    height: 9.5px;
+    border-width: 0 2px 2px 0;
+    left: 5px;
+    top: 1px;
+  }
+  &:not([aria-selected='true']) > ${MultiHighlight} {
+    border-color: ${({ theme: theme4 }) => theme4.colors.lightestGrey};
+  }
+
+  transition-property: background-color, opacity;
+  transition-timing-function: linear;
+  transition-duration: 0.25s;
+`;
+
+// src/components/Select/components/Scroll/index.tsx
+import { jsx as jsx362, jsxs as jsxs184 } from "react/jsx-runtime";
+var Scroll = React58.forwardRef(
+  ({
+    menuId,
+    loading,
+    options,
+    virtualItems,
+    totalSize,
+    measureElement,
+    OptionComponent,
+    onClickOption,
+    onMouseEnterOption,
+    activeIndex,
+    getKey,
+    getIsSelected,
+    getFailedRuleByKey,
+    mode,
+    ...props
+  }, ref) => {
+    const Highlight = mode === "single" ? SingleHighlight : MultiHighlight;
+    return /* @__PURE__ */ jsxs184(ListContainer, { children: [
+      loading ? /* @__PURE__ */ jsx362(Loader_default, { filled: true }) : options.length < 1 ? /* @__PURE__ */ jsx362(EmptyMessage2, { children: "Nenhuma op\xE7\xE3o encontrada" }) : null,
+      /* @__PURE__ */ jsx362(
+        ListScroll,
+        {
+          ref,
+          id: menuId,
+          role: "listbox",
+          ...props,
+          onMouseDown: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ jsx362(ListInner, { style: { height: `${totalSize}px` }, children: virtualItems.map((virtualItem) => {
+            const option = options[virtualItem.index];
+            if (!option) return null;
+            const optionKey = getKey(option);
+            const failedRule = getFailedRuleByKey(optionKey);
+            const disabled = Boolean(failedRule);
+            const isSelected = getIsSelected(optionKey);
+            const isActive = activeIndex === virtualItem.index;
+            const Component5 = failedRule?.Component;
+            return /* @__PURE__ */ jsx362(
+              Popup_default,
+              {
+                enabled: Boolean(Component5),
+                content: () => /* @__PURE__ */ jsx362(Component5, { option }),
+                on: "click",
+                closeOnClip: true,
+                placement: "right",
+                triggerProps: {
+                  ref: measureElement,
+                  onMouseEnter: () => onMouseEnterOption(virtualItem.index),
+                  onClick: () => onClickOption(virtualItem.index)
+                },
+                renderTrigger: (props2) => /* @__PURE__ */ jsxs184(
+                  OptionRow,
+                  {
+                    id: `${menuId}-option-${virtualItem.index}`,
+                    "data-index": virtualItem.index,
+                    role: "option",
+                    "aria-selected": isSelected,
+                    "aria-disabled": disabled,
+                    $active: isActive,
+                    style: {
+                      transform: `translateY(${virtualItem.start}px)`
+                    },
+                    ...props2,
+                    children: [
+                      /* @__PURE__ */ jsx362(Highlight, {}),
+                      /* @__PURE__ */ jsx362(
+                        OptionComponent,
+                        {
+                          option,
+                          isActive,
+                          isSelected,
+                          isDisabled: disabled
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              optionKey
+            );
+          }) })
+        }
+      )
+    ] });
+  }
+);
+var Scroll_default = Scroll;
+
+// src/components/Select/components/Search/index.tsx
+import React59, { useState as useState28 } from "react";
+
+// src/components/Select/components/Search/styles.ts
+import styled72 from "styled-components";
+var SearchContainer = styled72.div`
+  padding: 0 ${({ theme: theme4 }) => theme4.spacings.s3};
+  margin-bottom: ${({ theme: theme4 }) => theme4.spacings.s1};
+
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
+
+  position: relative;
+
+  > input {
+    width: 100%;
+    min-height: 35px;
+
+    padding-top: 0;
+    /* padding + icon width + gap */
+    padding-right: calc(
+      ${({ theme: theme4 }) => `${theme4.spacings.s1} + 24px + ${theme4.spacings.s1}`}
+    );
+    padding-bottom: 0;
+    padding-left: ${({ theme: theme4 }) => theme4.spacings.s3};
+
+    outline: none;
+
+    border-style: solid;
+    border-width: 1px;
+    border-color: ${({ theme: theme4 }) => theme4.colors.lightGrey};
+    border-radius: 4px;
+  }
+
+  > :last-child {
+    position: absolute;
+    top: 50%;
+
+    /* parent padding + input padding */
+    right: calc(
+      ${({ theme: theme4 }) => `${theme4.spacings.s3} + ${theme4.spacings.s1}`}
+    );
+    transform: translateY(-50%);
+  }
+`;
+
+// src/components/Select/components/Search/index.tsx
+import { jsx as jsx363, jsxs as jsxs185 } from "react/jsx-runtime";
+var Search = React59.forwardRef(
+  ({ menuId, onKeyDown, value: [value, setValue], activeIndex }, ref) => {
+    const [inputRef, setInputRef] = useState28(null);
+    return /* @__PURE__ */ jsxs185(SearchContainer, { children: [
+      /* @__PURE__ */ jsx363(
+        "input",
+        {
+          ref: (node) => {
+            setInputRef(node);
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          value,
+          onChange: (event) => setValue(event.target.value),
+          onKeyDown,
+          placeholder: "Buscar...",
+          role: "searchbox",
+          "aria-controls": menuId,
+          "aria-activedescendant": activeIndex >= 0 ? `${menuId}-option-${activeIndex}` : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx363(
+        Icon_default,
+        {
+          type: "feather",
+          ...value.length > 0 ? {
+            icon: "x",
+            onClick: (e) => {
+              e.preventDefault();
+              setValue("");
+              inputRef?.focus();
+            },
+            strokeWidth: "4px"
+          } : {
+            icon: "search",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              inputRef?.focus();
+            }
+          }
+        }
+      )
+    ] });
+  }
+);
+var Search_default2 = Search;
+
+// src/components/Select/instances/styles.ts
+import styled73 from "styled-components";
+var Header14 = styled73.div`
+  padding: 0 ${({ theme: theme4 }) => theme4.spacings.s3};
+  margin: ${({ theme: theme4 }) => theme4.spacings.s1} 0;
+  display: flex;
+  gap: ${({ theme: theme4 }) => theme4.spacings.s1};
+  justify-content: space-between;
+  align-items: center;
+`;
+var DraftSwitch = styled73.button`
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: calc(${({ theme: theme4 }) => theme4.spacings.s1} / 2);
+
+  ${({ theme: theme4 }) => theme4.useTypography("h4")}
+  color: ${({ theme: theme4 }) => theme4.getColor("black", 80)};
+
+  transition-property: color;
+  transition-duration: 0.4s;
+  transition-timing-function: ease-in-out;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:not(:disabled):hover {
+    color: ${({ theme: theme4 }) => theme4.colors.blue};
+  }
+
+  > span:nth-child(1) {
+    position: relative;
+    width: calc(${({ theme: theme4 }) => theme4.spacings.s3} * 2);
+    height: ${({ theme: theme4 }) => theme4.spacings.s3};
+    background-color: ${({ theme: theme4 }) => theme4.colors.warningGray};
+    border-radius: 20px;
+    transition-property: background-color;
+    transition-duration: 0.4s;
+    transition-timing-function: ease-in-out;
+    box-sizing: content-box;
+
+    &:before {
+      content: '';
+      transition-property: left, transform;
+      transition-duration: 0.4s;
+      transition-timing-function: ease-in-out;
+      position: absolute;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100%;
+      border-color: ${({ theme: theme4 }) => theme4.colors.lightGrey};
+      left: 0;
+      box-shadow: 0px 1px 3px ${({ theme: theme4 }) => theme4.getColor("black", 10)};
+      width: 50%;
+      height: 100%;
+      background-color: ${({ theme: theme4 }) => theme4.colors.white};
+      box-sizing: border-box;
+    }
+  }
+
+  &[aria-checked='true'] > span:nth-child(1) {
+    background-color: ${({ theme: theme4 }) => theme4.colors.blue};
+  }
+
+  &[aria-checked='true'] > span:nth-child(1):before {
+    left: 100%;
+    transform: translateX(-100%);
+  }
+`;
+var SelectAllButton = styled73.button`
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+
+  ${({ theme: theme4 }) => theme4.useTypography("h6")}
+  color: ${({ theme: theme4 }) => theme4.colors.greyishBlue};
+
+  transition-property: color;
+  transition-duration: 0.25s;
+  transition-timing-function: linear;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:not(:disabled):hover {
+    color: ${({ theme: theme4 }) => theme4.colors.blue};
+  }
+`;
+
+// src/components/Select/instances/multi/index.tsx
+import { jsx as jsx364, jsxs as jsxs186 } from "react/jsx-runtime";
+var buildMap = (values, getKey) => {
+  return new Map(values.map((option) => [getKey(option), option]));
+};
+var paginate = () => {
+};
+var useDraftOptions = (draft, finder) => {
+  const {
+    current: [searchInput, setSearchInput],
+    debounced: [search]
+  } = useDebouncedState_default("", () => {
+  }, SEARCH_DEBOUNCE_MS);
+  const options = useMemo11(() => {
+    const options2 = Array.from(draft.values());
+    if (!search) return options2;
+    return finder(search, options2);
+  }, [draft, search, finder]);
+  return {
+    options,
+    loading: false,
+    paginate,
+    searchInput: [searchInput, setSearchInput]
+  };
+};
+var useDraft = (value, getKey) => {
+  const [draft, setDraft] = useState29(() => ({
+    options: buildMap(value, getKey),
+    on: false
+  }));
+  const setOptions = (value2) => {
+    setDraft((prev) => {
+      const v = typeof value2 === "function" ? value2(prev.options) : value2;
+      if (v === prev.options) return prev;
+      return {
+        options: v,
+        on: prev.on && v.size > 0
+      };
+    });
+  };
+  const setOn = (value2) => {
+    setDraft((prev) => {
+      const v = typeof value2 === "function" ? value2(prev.on) : value2;
+      if (v === prev.on) return prev;
+      return {
+        options: prev.options,
+        on: v && prev.options.size > 0
+      };
+    });
+  };
+  return {
+    draft: [draft.options, setOptions],
+    switchDraft: [draft.on, setOn]
+  };
+};
+var SelectMultiOptions = ({
+  loader: loader2,
+  getKey,
+  OptionComponent,
+  rules,
+  overscan,
+  estimateSize,
+  value,
+  setValue,
+  menuId,
+  onClose,
+  clearable = false,
+  finder,
+  applyRules = []
+}) => {
+  const {
+    draft: [draft, setDraft],
+    switchDraft: [switchDraft, setSwitchDraft]
+  } = useDraft(value, getKey);
+  const asyncOptions = useAsyncOptions_default(loader2);
+  const draftOptions = useDraftOptions(draft, finder);
+  const {
+    options,
+    loading,
+    paginate: paginate2,
+    searchInput: [searchInput, setSearchInput]
+  } = switchDraft ? draftOptions : asyncOptions;
+  const { getFailedRuleByKey, enabledCount } = useRuleIndex_default({
+    options,
+    getKey,
+    rules
+  });
+  const { listRef, searchRef, rowVirtualizer, virtualItems } = useVirtualizedOptions_default({
+    optionsLength: options.length,
+    loading,
+    onPaginate: paginate2,
+    overscan,
+    estimateSize
+  });
+  const isIndexDisabled = (index) => {
+    const option = options[index];
+    if (!option) return true;
+    return Boolean(getFailedRuleByKey(getKey(option)));
+  };
+  const onToggleByIndex = (index) => {
+    const option = options[index];
+    if (!option) return;
+    if (isIndexDisabled(index)) {
+      searchRef.current?.focus();
+      return;
+    }
+    const key = getKey(option);
+    setDraft((current) => {
+      const next = new Map(current);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.set(key, option);
+      }
+      return next;
+    });
+  };
+  const navigation = useListNavigation_default({
+    itemCount: options.length,
+    isItemDisabled: isIndexDisabled,
+    onSelect: onToggleByIndex,
+    scrollToIndex: rowVirtualizer.scrollToIndex
+  });
+  const onSelectAll = () => {
+    setDraft((current) => {
+      const next = new Map(current);
+      options.forEach((option) => {
+        const key = getKey(option);
+        if (!getFailedRuleByKey(key)) {
+          next.set(key, option);
+        }
+      });
+      return next;
+    });
+  };
+  const onUnselectAll = () => {
+    setDraft(/* @__PURE__ */ new Map([]));
+  };
+  const getIsSelected = useCallback9((key) => draft.has(key), [draft]);
+  return /* @__PURE__ */ jsxs186(React60.Fragment, { children: [
+    /* @__PURE__ */ jsxs186(Header14, { children: [
+      /* @__PURE__ */ jsxs186(
+        DraftSwitch,
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": switchDraft,
+          onClick: () => setSwitchDraft((prev) => !prev),
+          disabled: draft.size < 1,
+          children: [
+            /* @__PURE__ */ jsx364("span", {}),
+            "Selecionados (",
+            draft.size,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx364(
+        SelectAllButton,
+        {
+          type: "button",
+          ...enabledCount > 0 && enabledCount === draft.size ? {
+            onClick: onUnselectAll,
+            children: "Desselecionar tudo"
+          } : {
+            onClick: onSelectAll,
+            children: "Selecionar tudo",
+            disabled: enabledCount < 1
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx364(
+      Search_default2,
+      {
+        ref: searchRef,
+        menuId,
+        value: [searchInput, setSearchInput],
+        activeIndex: navigation.activeIndex,
+        onKeyDown: navigation.onKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx364(
+      Scroll_default,
+      {
+        ref: listRef,
+        menuId,
+        options,
+        virtualItems,
+        totalSize: rowVirtualizer.getTotalSize(),
+        measureElement: rowVirtualizer.measureElement,
+        loading,
+        OptionComponent,
+        onClickOption: onToggleByIndex,
+        onMouseEnterOption: navigation.onMouseEnter,
+        activeIndex: navigation.activeIndex,
+        getKey,
+        getIsSelected,
+        getFailedRuleByKey,
+        mode: "multi",
+        "aria-multiselectable": true
+      }
+    ),
+    /* @__PURE__ */ jsx364(
+      Apply_default,
+      {
+        setValue,
+        onClose,
+        draft,
+        clearable,
+        applyRules
+      }
+    )
+  ] });
+};
+var useMultiSelect = ({
+  label,
+  loader: loader2,
+  getKey,
+  OptionComponent,
+  rules,
+  placeholder = "Selecione",
+  required,
+  invalid,
+  clearable,
+  readOnly,
+  viewMode,
+  overscan,
+  estimateSize,
+  height,
+  value,
+  setValue,
+  finder,
+  applyRules,
+  ...buttonProps
+}) => {
+  const closedLabel = useMemo11(() => {
+    if (value.length < 1) {
+      return viewMode ? /* @__PURE__ */ jsx364(React60.Fragment, { children: "\xA0" }) : placeholder;
+    }
+    return `H\xE1 ${value.length} op\xE7\xF5es selecionadas`;
+  }, [placeholder, value.length, viewMode]);
+  return {
+    isEmpty: value.length === 0,
+    placeholder: closedLabel,
+    onClear: () => setValue([]),
+    Component: SelectMultiOptions,
+    buttonProps
+  };
+};
+var multi_default = useMultiSelect;
+
+// src/components/Select/instances/single/index.tsx
+import React61, { useCallback as useCallback10, useMemo as useMemo12 } from "react";
+import { jsx as jsx365, jsxs as jsxs187 } from "react/jsx-runtime";
+var SelectSingleOptions = ({
+  loader: loader2,
+  getKey,
+  OptionComponent,
+  rules,
+  overscan,
+  estimateSize,
+  value,
+  setValue,
+  menuId,
+  onClose,
+  clearable
+}) => {
+  const {
+    options,
+    loading,
+    paginate: paginate2,
+    searchInput: [searchInput, setSearchInput]
+  } = useAsyncOptions_default(loader2);
+  const { getFailedRuleByKey } = useRuleIndex_default({
+    options,
+    getKey,
+    rules
+  });
+  const { listRef, searchRef, rowVirtualizer, virtualItems } = useVirtualizedOptions_default({
+    optionsLength: options.length,
+    loading,
+    onPaginate: paginate2,
+    overscan,
+    estimateSize
+  });
+  const selectedKey = value ? getKey(value) : null;
+  const isIndexDisabled = (index) => {
+    const option = options[index];
+    if (!option) return true;
+    return Boolean(getFailedRuleByKey(getKey(option)));
+  };
+  const onToggleByIndex = (index) => {
+    const option = options[index];
+    if (!option) return;
+    if (isIndexDisabled(index)) {
+      searchRef.current?.focus();
+      return;
+    }
+    const optionKey = getKey(option);
+    if (selectedKey === optionKey) {
+      if (!clearable) return;
+      setValue(null);
+    } else {
+      setValue(option);
+    }
+    onClose();
+  };
+  const navigation = useListNavigation_default({
+    itemCount: options.length,
+    isItemDisabled: isIndexDisabled,
+    onSelect: onToggleByIndex,
+    scrollToIndex: rowVirtualizer.scrollToIndex
+  });
+  const getIsSelected = useCallback10(
+    (key) => selectedKey === key,
+    [selectedKey]
+  );
+  return /* @__PURE__ */ jsxs187(React61.Fragment, { children: [
+    /* @__PURE__ */ jsx365(
+      Search_default2,
+      {
+        ref: searchRef,
+        menuId,
+        value: [searchInput, setSearchInput],
+        activeIndex: navigation.activeIndex,
+        onKeyDown: navigation.onKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx365(
+      Scroll_default,
+      {
+        ref: listRef,
+        menuId,
+        options,
+        virtualItems,
+        totalSize: rowVirtualizer.getTotalSize(),
+        measureElement: rowVirtualizer.measureElement,
+        loading,
+        OptionComponent,
+        onClickOption: onToggleByIndex,
+        onMouseEnterOption: navigation.onMouseEnter,
+        activeIndex: navigation.activeIndex,
+        getKey,
+        getIsSelected,
+        getFailedRuleByKey,
+        mode: "single",
+        "aria-multiselectable": true
+      }
+    )
+  ] });
+};
+var useSingleSelect = ({
+  label,
+  loader: loader2,
+  getKey,
+  OptionComponent,
+  rules,
+  placeholder = "Selecione",
+  required,
+  invalid,
+  clearable,
+  readOnly,
+  viewMode,
+  overscan,
+  estimateSize,
+  height,
+  value,
+  setValue,
+  ValueComponent,
+  ...buttonProps
+}) => {
+  const ClosedValueComponent = ValueComponent || OptionComponent;
+  const closedLabel = useMemo12(() => {
+    if (!value) {
+      return viewMode ? /* @__PURE__ */ jsx365(React61.Fragment, { children: "\xA0" }) : placeholder;
+    }
+    return /* @__PURE__ */ jsx365(
+      ClosedValueComponent,
+      {
+        option: value,
+        isActive: false,
+        isSelected: true,
+        isDisabled: false
+      }
+    );
+  }, [ClosedValueComponent, placeholder, value, viewMode]);
+  return {
+    isEmpty: !value,
+    placeholder: closedLabel,
+    onClear: () => setValue(null),
+    Component: SelectSingleOptions,
+    buttonProps
+  };
+};
+var single_default = useSingleSelect;
+
+// src/components/Select/instances/index.tsx
+var useSelect2 = (props) => {
+  return props.type === "multi-select" ? multi_default(props) : single_default(props);
+};
+var instances_default = useSelect2;
+
+// src/components/Select/styles.ts
+import styled74, { css as css49 } from "styled-components";
+var FloatingWrapper = styled74.div`
+  z-index: 1000;
+
+  &,
+  & > div {
+    height: var(--height);
+    min-height: var(--height);
+    max-height: var(--height);
+  }
+
+  > div {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-top: ${({ theme: theme4 }) => theme4.spacings.s1};
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  transition-property: height, max-height, min-height;
+  transition-timing-function: linear;
+  transition-duration: ${MENU_EXIT_MS}ms;
+
+  background: ${({ theme: theme4 }) => theme4.colors.white};
+  border: 1px solid ${({ theme: theme4 }) => theme4.colors.lightGrey};
+  border-radius: 6px;
+  box-shadow: 0px 3px 6px ${({ theme: theme4 }) => theme4.getColor("black", 15)};
+  overflow: hidden;
+`;
+var Trigger = styled74.button`
+  width: 100%;
+
+  transition-property: opacity, border-color, box-shadow, color,
+    background-color;
+  transition-timing-function: linear;
+  transition-duration: 0.25s;
+
+  ${({ $viewMode: viewMode }) => viewMode ? css49`
+          padding: 0;
+
+          border: none;
+        ` : css49`
+          min-height: 35px;
+          padding: 0 ${({ theme: theme4 }) => theme4.spacings.s3};
+
+          border-style: solid;
+          border-width: 1px;
+          border-radius: 4px;
+        `}
+
+  outline: none !important;
+
+  &:focus-visible {
+    box-shadow: 3px 3px 6px ${({ theme: theme4 }) => theme4.getColor("black", 15)};
+  }
+
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: theme4 }) => theme4.spacings.s1};
+
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
+
+  &[aria-invalid='true'] {
+    border-color: ${({ theme: theme4 }) => theme4.colors.warningRed};
+    color: ${({ theme: theme4 }) => theme4.colors.warningRed};
+    background-color: ${({ theme: theme4 }) => theme4.getColor("warningRed", 5)};
+  }
+  &:not([aria-invalid='true']) {
+    border-color: ${({ theme: theme4 }) => theme4.colors.lightGrey};
+    color: ${({ theme: theme4, $empty: empty }) => {
+  return empty ? theme4.colors.darkGrey : theme4.colors.darkBlue;
+}};
+    background-color: ${({ theme: theme4 }) => theme4.colors.white};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &:not(:disabled),
+  &:not([aria-readonly='true']) {
+    cursor: pointer;
+  }
+
+  &:disabled,
+  &[aria-readonly='true'] {
+    pointer-events: none;
+  }
+
+  > i {
+    transition-property: transform;
+    transition-timing-function: linear;
+    transition-duration: 0.25s;
+    transform: rotate(${({ $open: open }) => open ? "180deg" : "0deg"});
+  }
+`;
+var TriggerValue = styled74.div`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+var Label11 = styled74.label`
+  display: inline-block;
+  margin-bottom: ${({ theme: theme4, $viewMode: viewMode }) => theme4.spacings[viewMode ? "s3" : "s1"]};
+
+  ${({ theme: theme4, $viewMode: viewMode }) => theme4.useTypography("p", {
+  fontWeight: viewMode ? "bold" : "normal"
+})}
+  color: ${({ theme: theme4 }) => theme4.colors.greyishBlue};
+
+  transition-property: opacity, border-color, box-shadow, color,
+    background-color;
+  transition-timing-function: linear;
+  transition-duration: 0.25s;
+
+  &:has(+ [aria-required='true']):after {
+    content: ' *';
+  }
+
+  &:has(+ :disabled) {
+    opacity: 0.5;
+  }
+`;
+var OptionContainer = styled74.div`
+  display: flex;
+  flex-direction: column;
+  gap: calc(${({ theme: theme4 }) => theme4.spacings.s1} / 2);
+  overflow: hidden;
+
+  > div {
+    display: flex;
+    gap: calc(${({ theme: theme4 }) => theme4.spacings.s1} / 2);
+    color: ${({ theme: theme4 }) => theme4.colors.darkBlue};
+    white-space: nowrap;
+  }
+
+  > div:nth-child(1) {
+    ${({ theme: theme4 }) => theme4.useTypography("p")}
+  }
+
+  > div:not(:nth-child(1)) {
+    ${({ theme: theme4 }) => theme4.useTypography("h6")}
+    opacity: 0.5;
+  }
+`;
+
+// src/components/Select/index.tsx
+import { jsx as jsx366, jsxs as jsxs188 } from "react/jsx-runtime";
+var Select2 = React62.forwardRef(
+  (props, ref) => {
+    const [open, setOpen] = useState30(false);
+    const id = props.id || useId();
+    const { isRequired, isInvalid: isInvalid2, isViewMode, isDisabled } = Form_default.useContext(
+      props.name
+    );
+    const invalid = isInvalid2() || props.invalid;
+    const required = isRequired() || props.required;
+    const disabled = isDisabled() || props.disabled;
+    const viewMode = isViewMode() || props.viewMode;
+    const { floating, transition, interactions } = useFloatingMenu_default({
+      open,
+      onOpenChange: setOpen
+    });
+    const height = useMemo13(() => {
+      if (transition.status !== "open") return 0;
+      if (props.height !== void 0) return props.height;
+      return props.type === "single-select" ? 240 : 260;
+    }, [transition.status !== "open", props.type, props.height]);
+    const menuId = useId();
+    const onTriggerKeyDown = (event) => {
+      if (!open && ["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+        event.preventDefault();
+        setOpen(true);
+      }
+    };
+    const { isEmpty, placeholder, Component: Component5, onClear, buttonProps } = instances_default(props);
+    return /* @__PURE__ */ jsxs188(React62.Fragment, { children: [
+      props.label !== void 0 && /* @__PURE__ */ jsx366(Label11, { htmlFor: id, $viewMode: viewMode, children: props.label }),
+      /* @__PURE__ */ jsxs188(
+        Trigger,
+        {
+          id,
+          type: "button",
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          "aria-controls": menuId,
+          $open: open,
+          $empty: isEmpty,
+          $viewMode: viewMode,
+          "aria-readonly": props.readOnly || viewMode,
+          "aria-invalid": invalid,
+          "aria-required": required && !viewMode,
+          ...interactions.getReferenceProps({
+            ...buttonProps,
+            disabled,
+            onClick: (event) => {
+              if (props.readOnly || viewMode || disabled) return;
+              setOpen((current) => !current);
+              buttonProps.onClick?.(event);
+            },
+            onKeyDown: (event) => {
+              if (props.readOnly || viewMode || props.disabled) return;
+              onTriggerKeyDown(event);
+              buttonProps.onKeyDown?.(event);
+            }
+          }),
+          ref: (node) => {
+            floating.refs.setReference(node);
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx366(TriggerValue, { children: placeholder }),
+            !viewMode && /* @__PURE__ */ jsx366(
+              Icon_default,
+              {
+                width: "14px",
+                color: props.invalid ? colors.warningRed : colors.darkGrey,
+                ...!isEmpty && props.clearable && !props.disabled && !props.readOnly ? {
+                  type: "feather",
+                  icon: "x",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onClear();
+                  },
+                  strokeWidth: "4px"
+                } : {
+                  type: "semantic",
+                  icon: "caret down"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      transition.isMounted ? /* @__PURE__ */ jsx366(FloatingPortal2, { children: /* @__PURE__ */ jsx366(
+        FloatingWrapper,
+        {
+          ref: floating.refs.setFloating,
+          style: {
+            ...floating.floatingStyles,
+            "--height": `${height}px`
+          },
+          ...interactions.getFloatingProps(),
+          children: /* @__PURE__ */ jsx366("div", { children: /* @__PURE__ */ jsx366(
+            Component5,
+            {
+              ...props,
+              menuId,
+              onClose: () => setOpen(false)
+            }
+          ) })
+        }
+      ) }) : null
+    ] });
+  }
+);
+var Select_default3 = Object.assign(Select2, {
+  OptionContainer
+});
+
+// src/components/Signature/index.tsx
+import { useCallback as useCallback11, useEffect as useEffect25, useMemo as useMemo14, useState as useState31 } from "react";
+import SignatureCanvas from "react-signature-canvas";
+
+// src/components/Signature/styles.ts
+import styled75 from "styled-components";
+var Container26 = styled75.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: theme4 }) => theme4.spacings.s3};
+`;
+var CanvasContainer = styled75.div`
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  background-color: ${({ theme: theme4, $invalid: invalid }) => invalid ? theme4.getColor("warningRed", 5) : theme4.colors.white};
+
+  &[data-placeholder]:before {
+    content: attr(data-placeholder);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+
+    color: ${({ theme: theme4, $invalid: invalid }) => theme4.colors[invalid ? "warningRed" : "darkBlue"]};
+
+    ${({ theme: theme4 }) => theme4.useTypography("h1")}
+    font-size: 59px;
+    line-height: 71px;
+    opacity: 0.1;
+    z-index: 1;
+  }
+
+  canvas {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 1px solid
+      ${({ theme: theme4, $invalid: invalid }) => theme4.colors[invalid ? "warningRed" : "lightGrey"]};
+    border-radius: 4px;
+    z-index: 2;
+  }
+
+  /* icons container */
+  > div:nth-child(1) {
+    position: absolute;
+    top: ${({ theme: theme4 }) => theme4.spacings.s3};
+    right: ${({ theme: theme4 }) => theme4.spacings.s3};
+    display: flex;
+    gap: ${({ theme: theme4 }) => theme4.spacings.s1};
+    z-index: 3;
+
+    > button {
+      padding: 0;
+      outline: none;
+      border: none;
+      background: none;
+
+      > i.icon,
+      > i.icon:before {
+        color: #4e4e4e;
+        font-size: 20px;
+        line-height: 20px;
+        width: 20px;
+      }
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+      &:disabled {
+        opacity: 0.5;
+      }
+
+      transition: opacity 0.25s linear;
+    }
+  }
+`;
+
+// src/components/Signature/index.tsx
+import { jsx as jsx367, jsxs as jsxs189 } from "react/jsx-runtime";
+var FONTS = [
+  "GreatVibes",
+  "Pacifico",
+  "Allura"
+];
+var FONT_SIZE = 64;
+var voidFn = () => {
+};
+var SignatureInput = ({
+  setValue,
+  value,
   penColor,
   backgroundColor,
   invalid,
@@ -17644,12 +19545,12 @@ var SignatureInput = ({
   onEnd = voidFn,
   ...props
 }) => {
-  const [name, setName] = useState24("");
-  const [font, setFont] = useState24(FONTS[0]);
-  const [showPlaceholder, setShowPlaceholder] = useState24(true);
-  const [loading, setLoading] = useState24(false);
-  const [ref, setRef] = useState24(null);
-  useEffect21(() => {
+  const [name, setName] = useState31("");
+  const [font, setFont] = useState31(FONTS[0]);
+  const [showPlaceholder, setShowPlaceholder] = useState31(true);
+  const [loading, setLoading] = useState31(false);
+  const [ref, setRef] = useState31(null);
+  useEffect25(() => {
     if (!ref) return;
     const refreshValue = () => {
       if (ref.isEmpty() && !value) return;
@@ -17662,7 +19563,7 @@ var SignatureInput = ({
     window.addEventListener("resize", refreshValue);
     return () => window.removeEventListener("resize", refreshValue);
   }, [ref, value]);
-  const setByText = useCallback5(
+  const setByText = useCallback11(
     async (name2, font2) => {
       if (!ref) return;
       const trimmed = name2.trim();
@@ -17691,14 +19592,14 @@ var SignatureInput = ({
     },
     [ref]
   );
-  const onBeginHandler = useCallback5(
+  const onBeginHandler = useCallback11(
     (event) => {
       onBegin(event, ref);
       setShowPlaceholder(false);
     },
     [ref, onBegin]
   );
-  const onEndHandler = useCallback5(
+  const onEndHandler = useCallback11(
     (event) => {
       onEnd(event, ref);
       if (!ref || ref.isEmpty()) return;
@@ -17706,19 +19607,19 @@ var SignatureInput = ({
     },
     [ref, onEnd]
   );
-  const onApplyHandler = useCallback5(() => {
+  const onApplyHandler = useCallback11(() => {
     setByText(name, font);
   }, [name, font, setByText]);
-  const onClearHandler = useCallback5(() => {
+  const onClearHandler = useCallback11(() => {
     if (!ref) return;
     setShowPlaceholder(true);
     setName("");
     ref.clear();
     setValue("");
   }, [ref]);
-  const empty = useMemo3(() => !value && (!ref || ref.isEmpty()), [ref, value]);
-  return /* @__PURE__ */ jsxs183(Container26, { children: [
-    /* @__PURE__ */ jsx360(
+  const empty = useMemo14(() => !value && (!ref || ref.isEmpty()), [ref, value]);
+  return /* @__PURE__ */ jsxs189(Container26, { children: [
+    /* @__PURE__ */ jsx367(
       Input_default,
       {
         label,
@@ -17741,7 +19642,7 @@ var SignatureInput = ({
         } : {}
       }
     ),
-    /* @__PURE__ */ jsxs183(
+    /* @__PURE__ */ jsxs189(
       CanvasContainer,
       {
         $invalid: invalid,
@@ -17749,8 +19650,8 @@ var SignatureInput = ({
           "data-placeholder": canvasPlaceholder
         } : {},
         children: [
-          /* @__PURE__ */ jsxs183("div", { children: [
-            /* @__PURE__ */ jsx360(
+          /* @__PURE__ */ jsxs189("div", { children: [
+            /* @__PURE__ */ jsx367(
               "button",
               {
                 type: "button",
@@ -17763,10 +19664,10 @@ var SignatureInput = ({
                 },
                 disabled: loading || name.trim().length < 1,
                 title: "Trocar fonte",
-                children: /* @__PURE__ */ jsx360(Icon_default, { type: "semantic", icon: "font" })
+                children: /* @__PURE__ */ jsx367(Icon_default, { type: "semantic", icon: "font" })
               }
             ),
-            /* @__PURE__ */ jsx360(
+            /* @__PURE__ */ jsx367(
               "button",
               {
                 type: "button",
@@ -17776,12 +19677,12 @@ var SignatureInput = ({
                 },
                 disabled: empty,
                 title: "Recortar",
-                children: /* @__PURE__ */ jsx360(Icon_default, { type: "semantic", icon: "cut" })
+                children: /* @__PURE__ */ jsx367(Icon_default, { type: "semantic", icon: "cut" })
               }
             ),
-            /* @__PURE__ */ jsx360("button", { onClick: onClearHandler, disabled: empty, title: "Limpar", children: /* @__PURE__ */ jsx360(Icon_default, { type: "semantic", icon: "eraser" }) })
+            /* @__PURE__ */ jsx367("button", { onClick: onClearHandler, disabled: empty, title: "Limpar", children: /* @__PURE__ */ jsx367(Icon_default, { type: "semantic", icon: "eraser" }) })
           ] }),
-          /* @__PURE__ */ jsx360(
+          /* @__PURE__ */ jsx367(
             SignatureCanvas,
             {
               ref: setRef,
@@ -17800,17 +19701,17 @@ var SignatureInput = ({
 var Signature_default = SignatureInput;
 
 // src/components/Tabs/index.tsx
-import React63, { useState as useState27 } from "react";
+import React68, { useState as useState34 } from "react";
 
 // src/components/Tabs/components/ScrollButtons/index.tsx
-import React59, { useCallback as useCallback7, useEffect as useEffect22, useState as useState25 } from "react";
+import React64, { useCallback as useCallback13, useEffect as useEffect26, useState as useState32 } from "react";
 
 // src/components/Tabs/components/ScrollButton/index.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback12 } from "react";
 
 // src/components/Tabs/components/ScrollButton/styled.ts
-import styled70 from "styled-components";
-var Container27 = styled70.div`
+import styled76 from "styled-components";
+var Container27 = styled76.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -17833,31 +19734,31 @@ var Container27 = styled70.div`
 `;
 
 // src/components/Tabs/components/ScrollButton/index.tsx
-import { jsx as jsx361 } from "react/jsx-runtime";
+import { jsx as jsx368 } from "react/jsx-runtime";
 var ScrollButton = (props) => {
   const { mode, visible, scrollRef } = props;
   const icon = `chevron_${mode}`;
-  const onClick = useCallback6(() => {
+  const onClick = useCallback12(() => {
     if (!scrollRef) return;
     scrollRef.scrollBy({
       left: mode === "left" ? -(scrollRef.scrollWidth + 1) : scrollRef.scrollWidth,
       behavior: "smooth"
     });
   }, [scrollRef, mode]);
-  return /* @__PURE__ */ jsx361(
+  return /* @__PURE__ */ jsx368(
     Container27,
     {
       className: ["scroll-arrow", ...visible ? ["visible"] : []].join(" "),
       onClick,
-      children: /* @__PURE__ */ jsx361(Icon_default, { type: "feather", icon, width: 16, height: 16, color: "black" })
+      children: /* @__PURE__ */ jsx368(Icon_default, { type: "feather", icon, width: 16, height: 16, color: "black" })
     }
   );
 };
 var ScrollButton_default = ScrollButton;
 
 // src/components/Tabs/components/ScrollButtons/styled.ts
-import styled71, { css as css48 } from "styled-components";
-var Container28 = styled71.div`
+import styled77, { css as css50 } from "styled-components";
+var Container28 = styled77.div`
   overflow-x: auto;
   scrollbar-width: thin;
   scroll-behavior: smooth;
@@ -17872,19 +19773,19 @@ var Container28 = styled71.div`
     display: none; /* Chrome, Safari, Opera */
   }
 
-  ${({ theme: theme4, $internal: internal }) => internal && css48`
+  ${({ theme: theme4, $internal: internal }) => internal && css50`
       gap: ${theme4.spacings.s6};
     `}
 `;
 
 // src/components/Tabs/components/ScrollButtons/index.tsx
-import { jsx as jsx362, jsxs as jsxs184 } from "react/jsx-runtime";
+import { jsx as jsx369, jsxs as jsxs190 } from "react/jsx-runtime";
 var ScrollButtons = (props) => {
   const { activeTabIndex, tabsLength } = props;
-  const [ref, setRef] = useState25(null);
-  const [showLeftArrow, setShowLeftArrow] = useState25(false);
-  const [showRightArrow, setShowRightArrow] = useState25(false);
-  const checkScrollPosition = useCallback7(() => {
+  const [ref, setRef] = useState32(null);
+  const [showLeftArrow, setShowLeftArrow] = useState32(false);
+  const [showRightArrow, setShowRightArrow] = useState32(false);
+  const checkScrollPosition = useCallback13(() => {
     if (!ref) return;
     if (ref.scrollWidth > ref.offsetWidth) {
       const { scrollLeft, scrollWidth, clientWidth } = ref;
@@ -17895,12 +19796,12 @@ var ScrollButtons = (props) => {
       setShowRightArrow(false);
     }
   }, [ref]);
-  useEffect22(() => {
+  useEffect26(() => {
     checkScrollPosition();
     window.addEventListener("resize", checkScrollPosition);
     return () => window.removeEventListener("resize", checkScrollPosition);
   }, [checkScrollPosition, tabsLength]);
-  useEffect22(() => {
+  useEffect26(() => {
     if (!ref) return;
     if (ref.scrollWidth <= ref.offsetWidth) return;
     const element = ref.children[activeTabIndex];
@@ -17910,9 +19811,9 @@ var ScrollButtons = (props) => {
       inline: "nearest"
     });
   }, [activeTabIndex, ref]);
-  return /* @__PURE__ */ jsxs184(React59.Fragment, { children: [
-    /* @__PURE__ */ jsx362(ScrollButton_default, { scrollRef: ref, mode: "left", visible: showLeftArrow }),
-    /* @__PURE__ */ jsx362(
+  return /* @__PURE__ */ jsxs190(React64.Fragment, { children: [
+    /* @__PURE__ */ jsx369(ScrollButton_default, { scrollRef: ref, mode: "left", visible: showLeftArrow }),
+    /* @__PURE__ */ jsx369(
       Container28,
       {
         ref: setRef,
@@ -17927,13 +19828,13 @@ var ScrollButtons = (props) => {
         children: props.children
       }
     ),
-    /* @__PURE__ */ jsx362(ScrollButton_default, { scrollRef: ref, mode: "right", visible: showRightArrow })
+    /* @__PURE__ */ jsx369(ScrollButton_default, { scrollRef: ref, mode: "right", visible: showRightArrow })
   ] });
 };
 var ScrollButtons_default = ScrollButtons;
 
 // src/components/Tabs/components/TabItem/index.tsx
-import React62 from "react";
+import React67 from "react";
 
 // src/components/Tabs/functions.ts
 var sortTabs = (tabs, sorted = []) => {
@@ -17981,11 +19882,11 @@ var buildComponent = (component, provider) => {
 };
 
 // src/components/Tabs/components/TabItem/components/Close/index.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback14 } from "react";
 
 // src/components/Tabs/components/TabItem/components/Close/styles.ts
-import styled72 from "styled-components";
-var Close = styled72.div`
+import styled78 from "styled-components";
+var Close = styled78.div`
   position: relative;
   z-index: 2;
   display: flex;
@@ -18011,7 +19912,7 @@ var Close = styled72.div`
 `;
 
 // src/components/Tabs/components/TabItem/components/Close/index.tsx
-import { jsx as jsx363 } from "react/jsx-runtime";
+import { jsx as jsx370 } from "react/jsx-runtime";
 var Close2 = (props) => {
   const {
     index,
@@ -18019,7 +19920,7 @@ var Close2 = (props) => {
     options: [options, setOptions]
   } = props;
   const onClose = props.onClose || (() => true);
-  const onClickClose = useCallback8(
+  const onClickClose = useCallback14(
     async (event) => {
       if (options.length === 1) return;
       const newOptions = [...options];
@@ -18033,7 +19934,7 @@ var Close2 = (props) => {
     },
     [options, active, index, onClose]
   );
-  return /* @__PURE__ */ jsx363(Close, { children: /* @__PURE__ */ jsx363(
+  return /* @__PURE__ */ jsx370(Close, { children: /* @__PURE__ */ jsx370(
     Icon_default,
     {
       type: "feather",
@@ -18048,11 +19949,11 @@ var Close2 = (props) => {
 var Close_default = Close2;
 
 // src/components/Tabs/components/TabItem/components/LabelItem/index.tsx
-import { useState as useState26 } from "react";
+import { useState as useState33 } from "react";
 
 // src/components/Tabs/components/TabItem/components/LabelItem/styled.ts
-import styled73, { css as css49 } from "styled-components";
-var StyledTab = styled73.div`
+import styled79, { css as css51 } from "styled-components";
+var StyledTab = styled79.div`
   position: relative;
   flex: 1;
   white-space: nowrap;
@@ -18085,7 +19986,7 @@ var StyledTab = styled73.div`
     transition: --color 0.5s, --bgColor 0.5s;
   }
 
-  ${({ $primary, $hasSiblings, $internal }) => $primary && $hasSiblings && !$internal && css49`
+  ${({ $primary, $hasSiblings, $internal }) => $primary && $hasSiblings && !$internal && css51`
       &::before {
         content: '';
         position: absolute;
@@ -18101,11 +20002,11 @@ var StyledTab = styled73.div`
 `;
 
 // src/components/Tabs/components/TabItem/components/LabelItem/index.tsx
-import { jsx as jsx364 } from "react/jsx-runtime";
+import { jsx as jsx371 } from "react/jsx-runtime";
 var LabelItem = (props) => {
   const { children, onClick, primary, hasSiblings, internal } = props;
-  const [ref, setRef] = useState26(null);
-  return /* @__PURE__ */ jsx364(
+  const [ref, setRef] = useState33(null);
+  return /* @__PURE__ */ jsx371(
     StyledTab,
     {
       ref: setRef,
@@ -18124,8 +20025,8 @@ var LabelItem = (props) => {
 var LabelItem_default = LabelItem;
 
 // src/components/Tabs/components/TabItem/styled.ts
-import styled74 from "styled-components";
-var Container29 = styled74.div`
+import styled80 from "styled-components";
+var Container29 = styled80.div`
   @property --bgColor {
     syntax: '<color>';
     initial-value: #ffffff;
@@ -18159,8 +20060,8 @@ var Container29 = styled74.div`
 `;
 
 // src/components/Tabs/components/TabItem/index.tsx
-import { jsx as jsx365, jsxs as jsxs185 } from "react/jsx-runtime";
-var VoidClose = () => /* @__PURE__ */ jsx365(React62.Fragment, {});
+import { jsx as jsx372, jsxs as jsxs191 } from "react/jsx-runtime";
+var VoidClose = () => /* @__PURE__ */ jsx372(React67.Fragment, {});
 var TabItem = (props) => {
   const {
     active: [active, setActive],
@@ -18170,16 +20071,16 @@ var TabItem = (props) => {
     alwaysOpen
   } = props;
   const CloseComponent = alwaysOpen || tabs.length < 2 ? VoidClose : Close_default;
-  return /* @__PURE__ */ jsx365(React62.Fragment, { children: sortedTabs.map(({ index, ...tab }) => {
+  return /* @__PURE__ */ jsx372(React67.Fragment, { children: sortedTabs.map(({ index, ...tab }) => {
     const isActive = index === active;
     const hasSiblings = hasChildren(tabs, tab.group);
     const canClose = !props.internal && (!tab.primary || !hasSiblings);
-    return /* @__PURE__ */ jsxs185(
+    return /* @__PURE__ */ jsxs191(
       Container29,
       {
         ...isActive ? { className: "active" } : {},
         children: [
-          /* @__PURE__ */ jsx365(
+          /* @__PURE__ */ jsx372(
             LabelItem_default,
             {
               children: tab.label,
@@ -18189,7 +20090,7 @@ var TabItem = (props) => {
               internal: props.internal
             }
           ),
-          canClose && /* @__PURE__ */ jsx365(
+          canClose && /* @__PURE__ */ jsx372(
             CloseComponent,
             {
               index,
@@ -18207,13 +20108,13 @@ var TabItem = (props) => {
 var TabItem_default = TabItem;
 
 // src/components/Tabs/styled.ts
-import styled75, { css as css50 } from "styled-components";
+import styled81, { css as css52 } from "styled-components";
 var delimiters = {
   blue: ["blue"],
   grey: ["warningGray"]
 };
-var ComponentContainer = styled75.div``;
-var Tabs = styled75.div`
+var ComponentContainer = styled81.div``;
+var Tabs = styled81.div`
   position: relative;
   overflow: hidden;
 
@@ -18228,7 +20129,7 @@ var Tabs = styled75.div`
     bottom: "s4",
     left: "0"
   }).split(" ");
-  return css50`
+  return css52`
       margin: ${top} 0 ${bottom} 0;
       padding: 0 ${right} 0 ${left};
     `;
@@ -18236,7 +20137,7 @@ var Tabs = styled75.div`
 
   ${({ theme: theme4, $internal: internal, $delimiter: delimiter }) => {
   const border = delimiter === "none" ? "none" : internal ? `1px solid ${theme4.getColor(...delimiters[delimiter || "grey"])}` : `2px solid ${theme4.getColor(...delimiters[delimiter || "blue"])}`;
-  return css50`
+  return css52`
       border-bottom: ${border};
       + ${ComponentContainer} {
         border: 1px solid ${theme4.getColor(...delimiters.grey)};
@@ -18265,12 +20166,12 @@ var Tabs = styled75.div`
 `;
 
 // src/components/Tabs/index.tsx
-import { jsx as jsx366, jsxs as jsxs186 } from "react/jsx-runtime";
-var VoidProvider = (props) => /* @__PURE__ */ jsx366(React63.Fragment, { children: props.children });
+import { jsx as jsx373, jsxs as jsxs192 } from "react/jsx-runtime";
+var VoidProvider = (props) => /* @__PURE__ */ jsx373(React68.Fragment, { children: props.children });
 var Component4 = (props) => {
   const components = props.components || {};
-  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : useState27(props.options);
-  const [active, setActive] = Array.isArray(props.active) ? props.active : useState27(props.active);
+  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : useState34(props.options);
+  const [active, setActive] = Array.isArray(props.active) ? props.active : useState34(props.active);
   const sortedTabs = sortTabs(options.map((tab, index) => ({ ...tab, index })));
   const activeTabIndex = sortedTabs.findIndex((tab) => tab.index === active);
   const divProps = filterObject(props, [
@@ -18284,15 +20185,15 @@ var Component4 = (props) => {
     "delimiter",
     "spacing"
   ]);
-  return /* @__PURE__ */ jsxs186(React63.Fragment, { children: [
-    /* @__PURE__ */ jsx366(
+  return /* @__PURE__ */ jsxs192(React68.Fragment, { children: [
+    /* @__PURE__ */ jsx373(
       Tabs,
       {
         ...divProps,
         $internal: props.internal,
         $delimiter: props.delimiter,
         $spacing: props.spacing,
-        children: /* @__PURE__ */ jsx366(
+        children: /* @__PURE__ */ jsx373(
           ScrollButtons_default,
           {
             ...{
@@ -18300,7 +20201,7 @@ var Component4 = (props) => {
               tabsLength: options.length,
               internal: props.internal
             },
-            children: /* @__PURE__ */ jsx366(
+            children: /* @__PURE__ */ jsx373(
               TabItem_default,
               {
                 active: [active, setActive],
@@ -18317,7 +20218,7 @@ var Component4 = (props) => {
     ),
     options.map((tab, index) => {
       if (tab.component === void 0) {
-        return /* @__PURE__ */ jsx366(React63.Fragment, {}, index);
+        return /* @__PURE__ */ jsx373(React68.Fragment, {}, index);
       }
       const Component5 = components[tab.component];
       const Provider7 = Component5.provider || VoidProvider;
@@ -18337,7 +20238,7 @@ var Component4 = (props) => {
           return s === label ? prev : { ...prev, label };
         });
       };
-      return /* @__PURE__ */ jsx366(
+      return /* @__PURE__ */ jsx373(
         Provider7,
         {
           label: tab.label,
@@ -18346,7 +20247,7 @@ var Component4 = (props) => {
           setLabel,
           ...index === active ? {
             active: true,
-            children: /* @__PURE__ */ jsx366(ComponentContainer, { children: /* @__PURE__ */ jsx366(
+            children: /* @__PURE__ */ jsx373(ComponentContainer, { children: /* @__PURE__ */ jsx373(
               Component5,
               {
                 data: tab.data,
@@ -18368,8 +20269,8 @@ var Tabs2 = Object.assign(Component4, {
 var Tabs_default = Tabs2;
 
 // src/components/TextArea/styles.ts
-import styled76 from "styled-components";
-var Container30 = styled76.textarea`
+import styled82 from "styled-components";
+var Container30 = styled82.textarea`
   width: ${({ $width: width }) => width};
   height: ${({ $height: height }) => height};
   resize: none;
@@ -18381,26 +20282,26 @@ var Container30 = styled76.textarea`
 `;
 
 // src/components/TextArea/index.tsx
-import { jsx as jsx367 } from "react/jsx-runtime";
+import { jsx as jsx374 } from "react/jsx-runtime";
 var TextArea = ({
   width,
   height,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx367(Container30, { ...props, $width: width, $height: height });
+  return /* @__PURE__ */ jsx374(Container30, { ...props, $width: width, $height: height });
 };
 var TextArea_default = TextArea;
 
 // src/components/Toast/styles.ts
-import styled77, { css as css51 } from "styled-components";
-var Container31 = styled77.div`
+import styled83, { css as css53 } from "styled-components";
+var Container31 = styled83.div`
   border-radius: 4px;
-  width: ${({ $size: size3 }) => size3 === "large" ? "837px" : "460px"};
+  width: ${({ $size: size4 }) => size4 === "large" ? "837px" : "460px"};
   height: 88px;
   border: 1px solid transparent;
   position: relative;
 
-  ${({ $color: color }) => color === "success" && css51`
+  ${({ $color: color }) => color === "success" && css53`
       background-color: #fcfff5;
       opacity: 1;
       border-color: #a8c599;
@@ -18412,7 +20313,7 @@ var Container31 = styled77.div`
       }
     `}
 
-  ${({ $color: color }) => color === "error" && css51`
+  ${({ $color: color }) => color === "error" && css53`
       background-color: #fff6f6;
       opacity: 1;
       border-color: #973937;
@@ -18424,7 +20325,7 @@ var Container31 = styled77.div`
       }
     `}
 
-  ${({ $color: color }) => color === "warning" && css51`
+  ${({ $color: color }) => color === "warning" && css53`
       background-color: #fffaf3;
       opacity: 1;
       border-color: #ccbea0;
@@ -18445,7 +20346,7 @@ var Container31 = styled77.div`
     height: 13px;
   }
 `;
-var IconContainer3 = styled77.div`
+var IconContainer3 = styled83.div`
   width: 100%;
   display: flex;
   align-items: center;
@@ -18453,7 +20354,7 @@ var IconContainer3 = styled77.div`
   padding: 14px 14px 0 0;
   margin: 0;
 `;
-var IconContent = styled77.div`
+var IconContent = styled83.div`
   width: 100%;
   padding: 13px 0 21px 28px;
   display: flex;
@@ -18472,20 +20373,20 @@ var IconContent = styled77.div`
 `;
 
 // src/components/Toast/index.tsx
-import { jsx as jsx368, jsxs as jsxs187 } from "react/jsx-runtime";
+import { jsx as jsx375, jsxs as jsxs193 } from "react/jsx-runtime";
 var Toast = ({
-  size: size3,
+  size: size4,
   color,
   title,
   description,
   onClose: handlClose,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs187(Container31, { ...props, $size: size3, $color: color, children: [
-    /* @__PURE__ */ jsx368(IconContainer3, { children: /* @__PURE__ */ jsx368(Icon_default, { type: "feather", icon: "x", onClick: handlClose }) }),
-    /* @__PURE__ */ jsxs187(IconContent, { children: [
-      /* @__PURE__ */ jsx368("h4", { children: title }),
-      /* @__PURE__ */ jsxs187("p", { children: [
+  return /* @__PURE__ */ jsxs193(Container31, { ...props, $size: size4, $color: color, children: [
+    /* @__PURE__ */ jsx375(IconContainer3, { children: /* @__PURE__ */ jsx375(Icon_default, { type: "feather", icon: "x", onClick: handlClose }) }),
+    /* @__PURE__ */ jsxs193(IconContent, { children: [
+      /* @__PURE__ */ jsx375("h4", { children: title }),
+      /* @__PURE__ */ jsxs193("p", { children: [
         " ",
         description
       ] })
@@ -18495,15 +20396,15 @@ var Toast = ({
 var Toast_default = Toast;
 
 // src/components/Zoom/index.tsx
-import React64, { useState as useState28 } from "react";
+import React69, { useState as useState35 } from "react";
 
 // src/components/Zoom/styles.ts
-import styled78 from "styled-components";
-var Image = styled78.img`
+import styled84 from "styled-components";
+var Image = styled84.img`
   max-width: 100%;
   max-height: 100%;
 `;
-var Container32 = styled78.div`
+var Container32 = styled84.div`
   position: relative;
   display: inline-flex;
 
@@ -18532,7 +20433,7 @@ var Container32 = styled78.div`
 }};
   }
 `;
-var Dimmer = styled78.div`
+var Dimmer = styled84.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -18550,10 +20451,10 @@ var Dimmer = styled78.div`
     opacity: 1;
   }
 `;
-var Button7 = styled78(Button_default)`
+var Button7 = styled84(Button_default)`
   background-color: ${({ theme: theme4 }) => theme4.getColor("white", 50)};
 `;
-var ModalContent = styled78.div`
+var ModalContent = styled84.div`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -18567,12 +20468,12 @@ var ModalContent = styled78.div`
 `;
 
 // src/components/Zoom/index.tsx
-import { jsx as jsx369, jsxs as jsxs188 } from "react/jsx-runtime";
+import { jsx as jsx376, jsxs as jsxs194 } from "react/jsx-runtime";
 var Zoom = (props) => {
   const { src, width, height, ...imgProps } = props;
-  const [modalOpened, setModalOpened] = useState28(false);
-  return /* @__PURE__ */ jsxs188(React64.Fragment, { children: [
-    /* @__PURE__ */ jsxs188(
+  const [modalOpened, setModalOpened] = useState35(false);
+  return /* @__PURE__ */ jsxs194(React69.Fragment, { children: [
+    /* @__PURE__ */ jsxs194(
       Container32,
       {
         ...imgProps,
@@ -18580,8 +20481,8 @@ var Zoom = (props) => {
         $width: width,
         $height: height,
         children: [
-          /* @__PURE__ */ jsx369(Image, { src, alt: "zoom" }),
-          /* @__PURE__ */ jsx369(Dimmer, { children: /* @__PURE__ */ jsx369(
+          /* @__PURE__ */ jsx376(Image, { src, alt: "zoom" }),
+          /* @__PURE__ */ jsx376(Dimmer, { children: /* @__PURE__ */ jsx376(
             Button7,
             {
               content: "Zoom",
@@ -18592,14 +20493,14 @@ var Zoom = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx369(
+    /* @__PURE__ */ jsx376(
       Modal_default,
       {
         openState: [modalOpened, setModalOpened],
         size: "large",
         title: "Zoom",
         closeOnClickOutside: true,
-        children: /* @__PURE__ */ jsx369(ModalContent, { children: /* @__PURE__ */ jsx369("img", { src, alt: "zoom" }) })
+        children: /* @__PURE__ */ jsx376(ModalContent, { children: /* @__PURE__ */ jsx376("img", { src, alt: "zoom" }) })
       }
     )
   ] });
@@ -18625,6 +20526,7 @@ export {
   Placeholder_default as MwPlaceholder,
   ProgressBar_default as MwProgressBar,
   ScrollContainer_default as MwScrollContainer,
+  Select_default3 as MwSelect,
   Signature_default as MwSignature,
   Tabs_default as MwTabs,
   TextArea_default as MwTextArea,