@mw-kit/mw-ui 1.10.1 → 1.10.3

package/dist/index.js

@@ -18974,8 +18974,8 @@ var ProgressBar = ({ type, value, ...props }) => {
 var ProgressBar_default = ProgressBar;
 
 // src/components/Select/index.tsx
-var import_react80 = __toESM(require("react"));
-var import_react81 = require("@floating-ui/react");
+var import_react81 = __toESM(require("react"));
+var import_react82 = require("@floating-ui/react");
 
 // src/components/Select/hooks/useAsyncOptions/index.ts
 var import_react70 = require("react");
@@ -19049,11 +19049,15 @@ var useAsyncOptions_default = useAsyncOptions;
 
 // src/components/Select/hooks/useFloatingMenu/index.ts
 var import_react71 = require("@floating-ui/react");
-var useFloatingMenu = ({ open, onOpenChange }) => {
+var useFloatingMenu = ({
+  open,
+  onOpenChange,
+  placement = "bottom"
+}) => {
   const floating = (0, import_react71.useFloating)({
     open,
     onOpenChange,
-    placement: "bottom-start",
+    placement: `${placement}-start`,
     whileElementsMounted: import_react71.autoUpdate,
     middleware: [
       (0, import_react71.flip)(),
@@ -19082,12 +19086,59 @@ var useFloatingMenu = ({ open, onOpenChange }) => {
 };
 var useFloatingMenu_default = useFloatingMenu;
 
-// src/components/Select/hooks/useListNavigation/index.ts
+// src/components/Select/hooks/useInitialPlacement/index.ts
 var import_react72 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react72.useLayoutEffect : import_react72.useEffect;
+var resolveSelectPlacement = (triggerRect, context) => {
+  const midpoint = context.top + context.height / 2;
+  return triggerRect.top >= midpoint ? "top" : "bottom";
+};
+var useInitialPlacement = (props, referenceNode) => {
+  const [placement, setPlacement] = (0, import_react72.useState)(
+    props.placement ?? "bottom"
+  );
+  const syncPlacement = (0, import_react72.useCallback)(
+    (node) => {
+      if (props.placement !== void 0) {
+        setPlacement(props.placement);
+        return;
+      }
+      if (!node) return;
+      const context = props.boundRef ? props.boundRef.getBoundingClientRect() : {
+        top: 0,
+        height: window.innerHeight
+      };
+      const nextPlacement = resolveSelectPlacement(
+        node.getBoundingClientRect(),
+        context
+      );
+      setPlacement(nextPlacement);
+    },
+    [props.boundRef, props.placement]
+  );
+  useIsomorphicLayoutEffect(() => {
+    syncPlacement(referenceNode);
+    if (props.placement !== void 0 || !referenceNode) return;
+    const onUpdate = () => {
+      syncPlacement(referenceNode);
+    };
+    window.addEventListener("scroll", onUpdate, true);
+    window.addEventListener("resize", onUpdate);
+    return () => {
+      window.removeEventListener("scroll", onUpdate, true);
+      window.removeEventListener("resize", onUpdate);
+    };
+  }, [referenceNode, syncPlacement, props.placement]);
+  return { placement, syncPlacement };
+};
+var useInitialPlacement_default = useInitialPlacement;
+
+// src/components/Select/hooks/useListNavigation/index.ts
+var import_react73 = require("react");
 var INVALID_INDEX = -1;
 var useActiveIndex = (itemCount, scrollToIndex) => {
-  const [activeIndex, setActiveIndex] = (0, import_react72.useState)(INVALID_INDEX);
-  (0, import_react72.useEffect)(() => {
+  const [activeIndex, setActiveIndex] = (0, import_react73.useState)(INVALID_INDEX);
+  (0, import_react73.useEffect)(() => {
     setActiveIndex((current) => {
       if (current >= itemCount) return INVALID_INDEX;
       return current;
@@ -19107,19 +19158,19 @@ var useListNavigation = ({
   scrollToIndex
 }) => {
   const [activeIndex, setActiveIndex] = useActiveIndex(itemCount, scrollToIndex);
-  const firstEnabledIndex = (0, import_react72.useMemo)(() => {
+  const firstEnabledIndex = (0, import_react73.useMemo)(() => {
     for (let index = 0; index < itemCount; index += 1) {
       if (!isItemDisabled(index)) return index;
     }
     return INVALID_INDEX;
   }, [isItemDisabled, itemCount]);
-  const lastEnabledIndex = (0, import_react72.useMemo)(() => {
+  const lastEnabledIndex = (0, import_react73.useMemo)(() => {
     for (let index = itemCount - 1; index >= 0; index -= 1) {
       if (!isItemDisabled(index)) return index;
     }
     return INVALID_INDEX;
   }, [isItemDisabled, itemCount]);
-  const findNextEnabled = (0, import_react72.useCallback)(
+  const findNextEnabled = (0, import_react73.useCallback)(
     (from, direction) => {
       let index = from;
       while (index >= 0 && index < itemCount) {
@@ -19130,7 +19181,7 @@ var useListNavigation = ({
     },
     [isItemDisabled, itemCount]
   );
-  const onKeyDown = (0, import_react72.useCallback)(
+  const onKeyDown = (0, import_react73.useCallback)(
     (event) => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -19183,13 +19234,13 @@ var useListNavigation = ({
 var useListNavigation_default = useListNavigation;
 
 // src/components/Select/hooks/useRuleIndex/index.ts
-var import_react73 = require("react");
+var import_react74 = require("react");
 var useRuleIndex = ({
   options,
   getKey,
   rules
 }) => {
-  const failedRuleByKey = (0, import_react73.useMemo)(() => {
+  const failedRuleByKey = (0, import_react74.useMemo)(() => {
     const failedRuleByKey2 = /* @__PURE__ */ new Map();
     options.forEach((option) => {
       const key = getKey(option);
@@ -19200,7 +19251,7 @@ var useRuleIndex = ({
     });
     return failedRuleByKey2;
   }, [getKey, options, rules]);
-  const getFailedRuleByKey = (0, import_react73.useCallback)(
+  const getFailedRuleByKey = (0, import_react74.useCallback)(
     (key) => {
       return failedRuleByKey.get(key);
     },
@@ -19214,11 +19265,11 @@ var useRuleIndex = ({
 var useRuleIndex_default = useRuleIndex;
 
 // src/components/Select/hooks/useVirtualizedOptions/index.ts
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_react_virtual = require("@tanstack/react-virtual");
 var useVirtualizedOptions = (params) => {
   const { optionsLength, loading, onPaginate, overscan = 2 } = params;
-  const estimateSize = (0, import_react74.useMemo)(() => {
+  const estimateSize = (0, import_react75.useMemo)(() => {
     const estimateSize2 = params.estimateSize;
     if (estimateSize2 === void 0) {
       return () => 46;
@@ -19228,8 +19279,8 @@ var useVirtualizedOptions = (params) => {
     }
     return () => estimateSize2;
   }, [params.estimateSize]);
-  const listRef = (0, import_react74.useRef)(null);
-  const searchRef = (0, import_react74.useRef)(null);
+  const listRef = (0, import_react75.useRef)(null);
+  const searchRef = (0, import_react75.useRef)(null);
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: optionsLength,
     getScrollElement: () => listRef.current,
@@ -19237,14 +19288,14 @@ var useVirtualizedOptions = (params) => {
     overscan
   });
   const virtualItems = rowVirtualizer.getVirtualItems();
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     searchRef.current?.focus();
   }, [searchRef.current]);
-  const endIndex = (0, import_react74.useMemo)(
+  const endIndex = (0, import_react75.useMemo)(
     () => virtualItems[virtualItems.length - 1]?.index ?? 0,
     [virtualItems]
   );
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     if (loading || optionsLength < 1) return;
     if (endIndex >= optionsLength - 1 - overscan) {
       onPaginate();
@@ -19260,10 +19311,10 @@ var useVirtualizedOptions = (params) => {
 var useVirtualizedOptions_default = useVirtualizedOptions;
 
 // src/components/Select/instances/multi/index.tsx
-var import_react78 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 
 // src/components/Select/components/Apply/index.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 
 // src/components/Select/components/Apply/styles.ts
 var import_styled_components73 = __toESM(require("styled-components"));
@@ -19306,8 +19357,8 @@ var Apply = ({
   onClose,
   draft
 }) => {
-  const value = (0, import_react75.useMemo)(() => Array.from(draft.values()), [draft]);
-  const failedApplyRule = (0, import_react75.useMemo)(() => {
+  const value = (0, import_react76.useMemo)(() => Array.from(draft.values()), [draft]);
+  const failedApplyRule = (0, import_react76.useMemo)(() => {
     const rule = applyRules.find((rule2) => !rule2.allow(value));
     return rule;
   }, [value, applyRules]);
@@ -19350,7 +19401,7 @@ var Apply = ({
 var Apply_default = Apply;
 
 // src/components/Select/components/Scroll/index.tsx
-var import_react76 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 
 // src/components/Select/components/Scroll/styles.ts
 var import_styled_components74 = __toESM(require("styled-components"));
@@ -19478,7 +19529,7 @@ var OptionRow = import_styled_components74.default.div`
 
 // src/components/Select/components/Scroll/index.tsx
 var import_jsx_runtime362 = require("react/jsx-runtime");
-var Scroll = import_react76.default.forwardRef(
+var Scroll = import_react77.default.forwardRef(
   ({
     menuId,
     loading,
@@ -19568,7 +19619,7 @@ var Scroll = import_react76.default.forwardRef(
 var Scroll_default = Scroll;
 
 // src/components/Select/components/Search/index.tsx
-var import_react77 = __toESM(require("react"));
+var import_react78 = __toESM(require("react"));
 
 // src/components/Select/components/Search/styles.ts
 var import_styled_components75 = __toESM(require("styled-components"));
@@ -19614,9 +19665,9 @@ var SearchContainer = import_styled_components75.default.div`
 
 // src/components/Select/components/Search/index.tsx
 var import_jsx_runtime363 = require("react/jsx-runtime");
-var Search = import_react77.default.forwardRef(
+var Search = import_react78.default.forwardRef(
   ({ menuId, onKeyDown, value: [value, setValue], activeIndex }, ref) => {
-    const [inputRef, setInputRef] = (0, import_react77.useState)(null);
+    const [inputRef, setInputRef] = (0, import_react78.useState)(null);
     return /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(SearchContainer, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime363.jsx)(
         "input",
@@ -19773,7 +19824,7 @@ var useDraftOptions = (draft, finder) => {
     debounced: [search]
   } = useDebouncedState_default("", () => {
   }, SEARCH_DEBOUNCE_MS);
-  const options = (0, import_react78.useMemo)(() => {
+  const options = (0, import_react79.useMemo)(() => {
     const options2 = Array.from(draft.values());
     if (!search) return options2;
     return finder(search, options2);
@@ -19786,7 +19837,7 @@ var useDraftOptions = (draft, finder) => {
   };
 };
 var useDraft = (value, getKey) => {
-  const [draft, setDraft] = (0, import_react78.useState)(() => ({
+  const [draft, setDraft] = (0, import_react79.useState)(() => ({
     options: buildMap(value, getKey),
     on: false
   }));
@@ -19898,8 +19949,8 @@ var SelectMultiOptions = ({
   const onUnselectAll = () => {
     setDraft(/* @__PURE__ */ new Map([]));
   };
-  const getIsSelected = (0, import_react78.useCallback)((key) => draft.has(key), [draft]);
-  return /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(import_react78.default.Fragment, { children: [
+  const getIsSelected = (0, import_react79.useCallback)((key) => draft.has(key), [draft]);
+  return /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(import_react79.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(Header14, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(
         DraftSwitch,
@@ -19987,6 +20038,11 @@ var useMultiSelect = ({
   clearable,
   readOnly,
   viewMode,
+  borderless,
+  paddingless,
+  zIndex,
+  placement,
+  boundRef,
   overscan,
   estimateSize,
   height,
@@ -19996,9 +20052,9 @@ var useMultiSelect = ({
   applyRules,
   ...buttonProps
 }) => {
-  const closedLabel = (0, import_react78.useMemo)(() => {
+  const closedLabel = (0, import_react79.useMemo)(() => {
     if (value.length < 1) {
-      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(import_react78.default.Fragment, { children: "\xA0" }) : placeholder;
+      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(import_react79.default.Fragment, { children: "\xA0" }) : placeholder;
     }
     return `H\xE1 ${value.length} op\xE7\xF5es selecionadas`;
   }, [placeholder, value.length, viewMode]);
@@ -20013,7 +20069,7 @@ var useMultiSelect = ({
 var multi_default = useMultiSelect;
 
 // src/components/Select/instances/single/index.tsx
-var import_react79 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var import_jsx_runtime365 = require("react/jsx-runtime");
 var SelectSingleOptions = ({
   loader: loader2,
@@ -20074,11 +20130,11 @@ var SelectSingleOptions = ({
     onSelect: onToggleByIndex,
     scrollToIndex: rowVirtualizer.scrollToIndex
   });
-  const getIsSelected = (0, import_react79.useCallback)(
+  const getIsSelected = (0, import_react80.useCallback)(
     (key) => selectedKey === key,
     [selectedKey]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime365.jsxs)(import_react79.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime365.jsxs)(import_react80.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(
       Search_default2,
       {
@@ -20124,6 +20180,11 @@ var useSingleSelect = ({
   clearable,
   readOnly,
   viewMode,
+  borderless,
+  paddingless,
+  zIndex,
+  placement,
+  boundRef,
   overscan,
   estimateSize,
   height,
@@ -20133,9 +20194,9 @@ var useSingleSelect = ({
   ...buttonProps
 }) => {
   const ClosedValueComponent = ValueComponent || OptionComponent;
-  const closedLabel = (0, import_react79.useMemo)(() => {
+  const closedLabel = (0, import_react80.useMemo)(() => {
     if (!value) {
-      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(import_react79.default.Fragment, { children: "\xA0" }) : placeholder;
+      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(import_react80.default.Fragment, { children: "\xA0" }) : placeholder;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(
       ClosedValueComponent,
@@ -20166,8 +20227,6 @@ var instances_default = useSelect2;
 // src/components/Select/styles.ts
 var import_styled_components77 = __toESM(require("styled-components"));
 var FloatingWrapper = import_styled_components77.default.div`
-  z-index: 1000;
-
   &,
   & > div {
     height: var(--height);
@@ -20205,17 +20264,30 @@ var Trigger = import_styled_components77.default.button`
   transition-timing-function: linear;
   transition-duration: 0.25s;
 
-  ${({ $viewMode: viewMode }) => viewMode ? import_styled_components77.css`
+  ${({
+  theme: theme4,
+  $viewMode: viewMode,
+  $borderless: borderless,
+  $paddingless: paddingless
+}) => viewMode ? import_styled_components77.css`
           padding: 0;
 
           border: none;
         ` : import_styled_components77.css`
-          min-height: 35px;
-          padding: 0 ${({ theme: theme4 }) => theme4.spacings.s3};
-
-          border-style: solid;
-          border-width: 1px;
-          border-radius: 4px;
+          ${paddingless ? import_styled_components77.css`
+                padding: 0;
+              ` : import_styled_components77.css`
+                min-height: 35px;
+                padding: 0 ${theme4.spacings.s3};
+              `}
+
+          ${borderless ? import_styled_components77.css`
+                border: none;
+              ` : import_styled_components77.css`
+                border-style: solid;
+                border-width: 1px;
+                border-radius: 4px;
+              `}
         `}
 
   outline: none !important;
@@ -20259,11 +20331,11 @@ var Trigger = import_styled_components77.default.button`
     pointer-events: none;
   }
 
-  > i {
+  > div:nth-child(2) > svg {
     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 0.25s;
-    transform: rotate(${({ $open: open }) => open ? "180deg" : "0deg"});
+    transform: rotate(${({ $rotate: rotate }) => rotate ? "180deg" : "0deg"});
   }
 `;
 var TriggerValue = import_styled_components77.default.div`
@@ -20320,10 +20392,12 @@ var OptionContainer = import_styled_components77.default.div`
 
 // src/components/Select/index.tsx
 var import_jsx_runtime366 = require("react/jsx-runtime");
-var Select2 = import_react80.default.forwardRef(
+var Select2 = import_react81.default.forwardRef(
   (props, ref) => {
-    const [open, setOpen] = (0, import_react80.useState)(false);
-    const id = props.id || (0, import_react80.useId)();
+    const [open, setOpen] = (0, import_react81.useState)(false);
+    const [triggerRef, setTriggerRef] = (0, import_react81.useState)(null);
+    const { placement, syncPlacement } = useInitialPlacement_default(props, triggerRef);
+    const id = props.id || (0, import_react81.useId)();
     const { isRequired, isInvalid: isInvalid2, isViewMode, isDisabled } = Form_default.useContext(
       props.name
     );
@@ -20333,14 +20407,15 @@ var Select2 = import_react80.default.forwardRef(
     const viewMode = isViewMode() || props.viewMode;
     const { floating, transition, interactions } = useFloatingMenu_default({
       open,
-      onOpenChange: setOpen
+      onOpenChange: setOpen,
+      placement
     });
-    const height = (0, import_react80.useMemo)(() => {
+    const height = (0, import_react81.useMemo)(() => {
       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 = (0, import_react80.useId)();
+    const menuId = (0, import_react81.useId)();
     const onTriggerKeyDown = (event) => {
       if (!open && ["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
         event.preventDefault();
@@ -20348,7 +20423,21 @@ var Select2 = import_react80.default.forwardRef(
       }
     };
     const { isEmpty, placeholder, Component: Component5, onClear, buttonProps } = instances_default(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(import_react80.default.Fragment, { children: [
+    const clearEnabled = !isEmpty && props.clearable && !props.disabled && !props.readOnly;
+    const setRef = (0, import_react81.useCallback)(
+      (node) => {
+        floating.refs.setReference(node);
+        setTriggerRef(node);
+        syncPlacement(node);
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [floating.refs.setReference, ref, syncPlacement]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(import_react81.default.Fragment, { children: [
       props.label !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(Label11, { htmlFor: id, $viewMode: viewMode, children: props.label }),
       /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(
         Trigger,
@@ -20359,9 +20448,11 @@ var Select2 = import_react80.default.forwardRef(
           "aria-haspopup": "listbox",
           "aria-expanded": open,
           "aria-controls": menuId,
-          $open: open,
+          $rotate: open && !clearEnabled,
           $empty: isEmpty,
           $viewMode: viewMode,
+          $borderless: props.borderless,
+          $paddingless: props.paddingless,
           "aria-readonly": props.readOnly || viewMode,
           "aria-invalid": invalid,
           "aria-required": required && !viewMode,
@@ -20379,14 +20470,7 @@ var Select2 = import_react80.default.forwardRef(
               buttonProps.onKeyDown?.(event);
             }
           }),
-          ref: (node) => {
-            floating.refs.setReference(node);
-            if (typeof ref === "function") {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-          },
+          ref: setRef,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(TriggerValue, { children: placeholder }),
             !viewMode && /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
@@ -20394,7 +20478,7 @@ var Select2 = import_react80.default.forwardRef(
               {
                 width: "14px",
                 color: props.invalid ? ["warningRed"] : ["darkGrey"],
-                ...!isEmpty && props.clearable && !props.disabled && !props.readOnly ? {
+                ...clearEnabled ? {
                   type: "feather",
                   icon: "x",
                   onClick: (e) => {
@@ -20411,13 +20495,14 @@ var Select2 = import_react80.default.forwardRef(
           ]
         }
       ),
-      transition.isMounted ? /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(import_react81.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
+      transition.isMounted ? /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(import_react82.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
         FloatingWrapper,
         {
           ref: floating.refs.setFloating,
           style: {
             ...floating.floatingStyles,
-            "--height": `${height}px`
+            "--height": `${height}px`,
+            zIndex: props.zIndex !== void 0 ? props.zIndex : 1e3
           },
           ...interactions.getFloatingProps(),
           children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
@@ -20438,7 +20523,7 @@ var Select_default3 = Object.assign(Select2, {
 });
 
 // src/components/Signature/index.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_react_signature_canvas = __toESM(require("react-signature-canvas"));
 
 // src/components/Signature/styles.ts
@@ -20544,12 +20629,12 @@ var SignatureInput = ({
   onEnd = voidFn,
   ...props
 }) => {
-  const [name, setName] = (0, import_react82.useState)("");
-  const [font, setFont] = (0, import_react82.useState)(FONTS[0]);
-  const [showPlaceholder, setShowPlaceholder] = (0, import_react82.useState)(true);
-  const [loading, setLoading] = (0, import_react82.useState)(false);
-  const [ref, setRef] = (0, import_react82.useState)(null);
-  (0, import_react82.useEffect)(() => {
+  const [name, setName] = (0, import_react83.useState)("");
+  const [font, setFont] = (0, import_react83.useState)(FONTS[0]);
+  const [showPlaceholder, setShowPlaceholder] = (0, import_react83.useState)(true);
+  const [loading, setLoading] = (0, import_react83.useState)(false);
+  const [ref, setRef] = (0, import_react83.useState)(null);
+  (0, import_react83.useEffect)(() => {
     if (!ref) return;
     const refreshValue = () => {
       if (ref.isEmpty() && !value) return;
@@ -20562,7 +20647,7 @@ var SignatureInput = ({
     window.addEventListener("resize", refreshValue);
     return () => window.removeEventListener("resize", refreshValue);
   }, [ref, value]);
-  const setByText = (0, import_react82.useCallback)(
+  const setByText = (0, import_react83.useCallback)(
     async (name2, font2) => {
       if (!ref) return;
       const trimmed = name2.trim();
@@ -20591,14 +20676,14 @@ var SignatureInput = ({
     },
     [ref]
   );
-  const onBeginHandler = (0, import_react82.useCallback)(
+  const onBeginHandler = (0, import_react83.useCallback)(
     (event) => {
       onBegin(event, ref);
       setShowPlaceholder(false);
     },
     [ref, onBegin]
   );
-  const onEndHandler = (0, import_react82.useCallback)(
+  const onEndHandler = (0, import_react83.useCallback)(
     (event) => {
       onEnd(event, ref);
       if (!ref || ref.isEmpty()) return;
@@ -20606,17 +20691,17 @@ var SignatureInput = ({
     },
     [ref, onEnd]
   );
-  const onApplyHandler = (0, import_react82.useCallback)(() => {
+  const onApplyHandler = (0, import_react83.useCallback)(() => {
     setByText(name, font);
   }, [name, font, setByText]);
-  const onClearHandler = (0, import_react82.useCallback)(() => {
+  const onClearHandler = (0, import_react83.useCallback)(() => {
     if (!ref) return;
     setShowPlaceholder(true);
     setName("");
     ref.clear();
     setValue("");
   }, [ref]);
-  const empty = (0, import_react82.useMemo)(() => !value && (!ref || ref.isEmpty()), [ref, value]);
+  const empty = (0, import_react83.useMemo)(() => !value && (!ref || ref.isEmpty()), [ref, value]);
   return /* @__PURE__ */ (0, import_jsx_runtime367.jsxs)(Container26, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime367.jsx)(
       Input_default,
@@ -20700,13 +20785,13 @@ var SignatureInput = ({
 var Signature_default = SignatureInput;
 
 // src/components/Tabs/index.tsx
-var import_react88 = __toESM(require("react"));
+var import_react89 = __toESM(require("react"));
 
 // src/components/Tabs/components/ScrollButtons/index.tsx
-var import_react84 = __toESM(require("react"));
+var import_react85 = __toESM(require("react"));
 
 // src/components/Tabs/components/ScrollButton/index.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 
 // src/components/Tabs/components/ScrollButton/styled.ts
 var import_styled_components79 = __toESM(require("styled-components"));
@@ -20737,7 +20822,7 @@ var import_jsx_runtime368 = require("react/jsx-runtime");
 var ScrollButton = (props) => {
   const { mode, visible, scrollRef } = props;
   const icon = `chevron_${mode}`;
-  const onClick = (0, import_react83.useCallback)(() => {
+  const onClick = (0, import_react84.useCallback)(() => {
     if (!scrollRef) return;
     scrollRef.scrollBy({
       left: mode === "left" ? -(scrollRef.scrollWidth + 1) : scrollRef.scrollWidth,
@@ -20790,10 +20875,10 @@ var Container28 = import_styled_components80.default.div`
 var import_jsx_runtime369 = require("react/jsx-runtime");
 var ScrollButtons = (props) => {
   const { activeTabIndex, tabsLength } = props;
-  const [ref, setRef] = (0, import_react84.useState)(null);
-  const [showLeftArrow, setShowLeftArrow] = (0, import_react84.useState)(false);
-  const [showRightArrow, setShowRightArrow] = (0, import_react84.useState)(false);
-  const checkScrollPosition = (0, import_react84.useCallback)(() => {
+  const [ref, setRef] = (0, import_react85.useState)(null);
+  const [showLeftArrow, setShowLeftArrow] = (0, import_react85.useState)(false);
+  const [showRightArrow, setShowRightArrow] = (0, import_react85.useState)(false);
+  const checkScrollPosition = (0, import_react85.useCallback)(() => {
     if (!ref) return;
     if (ref.scrollWidth > ref.offsetWidth) {
       const { scrollLeft, scrollWidth, clientWidth } = ref;
@@ -20804,12 +20889,12 @@ var ScrollButtons = (props) => {
       setShowRightArrow(false);
     }
   }, [ref]);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     checkScrollPosition();
     window.addEventListener("resize", checkScrollPosition);
     return () => window.removeEventListener("resize", checkScrollPosition);
   }, [checkScrollPosition, tabsLength]);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     if (!ref) return;
     if (ref.scrollWidth <= ref.offsetWidth) return;
     const element = ref.children[activeTabIndex];
@@ -20819,7 +20904,7 @@ var ScrollButtons = (props) => {
       inline: "nearest"
     });
   }, [activeTabIndex, ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime369.jsxs)(import_react84.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime369.jsxs)(import_react85.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime369.jsx)(ScrollButton_default, { scrollRef: ref, mode: "left", visible: showLeftArrow }),
     /* @__PURE__ */ (0, import_jsx_runtime369.jsx)(
       Container28,
@@ -20842,7 +20927,7 @@ var ScrollButtons = (props) => {
 var ScrollButtons_default = ScrollButtons;
 
 // src/components/Tabs/components/TabItem/index.tsx
-var import_react87 = __toESM(require("react"));
+var import_react88 = __toESM(require("react"));
 
 // src/components/Tabs/functions.ts
 var sortTabs = (tabs, sorted = []) => {
@@ -20890,7 +20975,7 @@ var buildComponent = (component, provider) => {
 };
 
 // src/components/Tabs/components/TabItem/components/Close/index.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 
 // src/components/Tabs/components/TabItem/components/Close/styles.ts
 var import_styled_components81 = __toESM(require("styled-components"));
@@ -20928,7 +21013,7 @@ var Close2 = (props) => {
     options: [options, setOptions]
   } = props;
   const onClose = props.onClose || (() => true);
-  const onClickClose = (0, import_react85.useCallback)(
+  const onClickClose = (0, import_react86.useCallback)(
     async (event) => {
       if (options.length === 1) return;
       const newOptions = [...options];
@@ -20957,7 +21042,7 @@ var Close2 = (props) => {
 var Close_default = Close2;
 
 // src/components/Tabs/components/TabItem/components/LabelItem/index.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 
 // src/components/Tabs/components/TabItem/components/LabelItem/styled.ts
 var import_styled_components82 = __toESM(require("styled-components"));
@@ -21015,7 +21100,7 @@ var StyledTab = import_styled_components82.default.div`
 var import_jsx_runtime371 = require("react/jsx-runtime");
 var LabelItem = (props) => {
   const { children, onClick, primary, hasSiblings, internal } = props;
-  const [ref, setRef] = (0, import_react86.useState)(null);
+  const [ref, setRef] = (0, import_react87.useState)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime371.jsx)(
     StyledTab,
     {
@@ -21071,7 +21156,7 @@ var Container29 = import_styled_components83.default.div`
 
 // src/components/Tabs/components/TabItem/index.tsx
 var import_jsx_runtime372 = require("react/jsx-runtime");
-var VoidClose = () => /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react87.default.Fragment, {});
+var VoidClose = () => /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react88.default.Fragment, {});
 var TabItem = (props) => {
   const {
     active: [active, setActive],
@@ -21081,7 +21166,7 @@ var TabItem = (props) => {
     alwaysOpen
   } = props;
   const CloseComponent = alwaysOpen || tabs.length < 2 ? VoidClose : Close_default;
-  return /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react87.default.Fragment, { children: sortedTabs.map(({ index, ...tab }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react88.default.Fragment, { children: sortedTabs.map(({ index, ...tab }) => {
     const isActive = index === active;
     const hasSiblings = hasChildren(tabs, tab.group);
     const canClose = !props.internal && (!tab.primary || !hasSiblings);
@@ -21177,11 +21262,11 @@ var Tabs = import_styled_components84.default.div`
 
 // src/components/Tabs/index.tsx
 var import_jsx_runtime373 = require("react/jsx-runtime");
-var VoidProvider = (props) => /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react88.default.Fragment, { children: props.children });
+var VoidProvider = (props) => /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react89.default.Fragment, { children: props.children });
 var Component4 = (props) => {
   const components = props.components || {};
-  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : (0, import_react88.useState)(props.options);
-  const [active, setActive] = Array.isArray(props.active) ? props.active : (0, import_react88.useState)(props.active);
+  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : (0, import_react89.useState)(props.options);
+  const [active, setActive] = Array.isArray(props.active) ? props.active : (0, import_react89.useState)(props.active);
   const sortedTabs = sortTabs(options.map((tab, index) => ({ ...tab, index })));
   const activeTabIndex = sortedTabs.findIndex((tab) => tab.index === active);
   const divProps = filterObject(props, [
@@ -21195,7 +21280,7 @@ var Component4 = (props) => {
     "delimiter",
     "spacing"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime373.jsxs)(import_react88.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime373.jsxs)(import_react89.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(
       Tabs,
       {
@@ -21228,7 +21313,7 @@ var Component4 = (props) => {
     ),
     options.map((tab, index) => {
       if (tab.component === void 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react88.default.Fragment, {}, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react89.default.Fragment, {}, index);
       }
       const Component5 = components[tab.component];
       const Provider7 = Component5.provider || VoidProvider;
@@ -21406,7 +21491,7 @@ var Toast = ({
 var Toast_default = Toast;
 
 // src/components/Zoom/index.tsx
-var import_react89 = __toESM(require("react"));
+var import_react90 = __toESM(require("react"));
 
 // src/components/Zoom/styles.ts
 var import_styled_components87 = __toESM(require("styled-components"));
@@ -21481,8 +21566,8 @@ var ModalContent = import_styled_components87.default.div`
 var import_jsx_runtime376 = require("react/jsx-runtime");
 var Zoom = (props) => {
   const { src, width, height, ...imgProps } = props;
-  const [modalOpened, setModalOpened] = (0, import_react89.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime376.jsxs)(import_react89.default.Fragment, { children: [
+  const [modalOpened, setModalOpened] = (0, import_react90.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime376.jsxs)(import_react90.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime376.jsxs)(
       Container32,
       {