@giro-ds/react 12.1.0 → 12.2.0

package/dist/index.cjs

@@ -84,7 +84,7 @@ const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, s
 
 var styles$s = {"button":"Button-module__button___18Bed","button-lg":"Button-module__button-lg___-A8B9","button-sm":"Button-module__button-sm___L7aT7","button-filled":"Button-module__button-filled___IQx1z","button-outlined":"Button-module__button-outlined___hLkLN","button-text":"Button-module__button-text___8GFeA","buttonWithIcon":"Button-module__buttonWithIcon___8ehK1","buttonIconPosition-left":"Button-module__buttonIconPosition-left___uOY6b","buttonIconPosition-right":"Button-module__buttonIconPosition-right___eswRS","buttonIconPosition-both":"Button-module__buttonIconPosition-both___1Lith","buttonNoContent":"Button-module__buttonNoContent___Tc9jk","buttonIconOnly":"Button-module__buttonIconOnly___aifk4","buttonIconLeft":"Button-module__buttonIconLeft___RICR3","buttonIconRight":"Button-module__buttonIconRight___71lu2","buttonFullWidth":"Button-module__buttonFullWidth___tXuVE","disabled":"Button-module__disabled___UzdWL","buttonLoading":"Button-module__buttonLoading___RGdNw","buttonContentHidden":"Button-module__buttonContentHidden___CoCiN","buttonLoadingSpinner":"Button-module__buttonLoadingSpinner___oZxEU","spin":"Button-module__spin___kQKH9"};
 
-const Button = ({ ref, as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', scale = 1, className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', ...rest }) => {
+const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', scale = 1, className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', ...rest }, ref) => {
     const generatedId = React.useId();
     const componentId = id || generatedId;
     const getComponent = () => {
@@ -200,7 +200,7 @@ const Button = ({ ref, as, children, variant = 'filled', iconPosition = 'left',
         return (jsxRuntime.jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: jsxRuntime.jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }) }));
     }
     return (jsxRuntime.jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }));
-};
+});
 Button.displayName = 'Button';
 
 function buildFormatLongFn(args) {
@@ -2864,11 +2864,13 @@ const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, st
                 }), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { className: styles$o.root, checked: indeterminate ? 'indeterminate' : checked, id: componentId, onCheckedChange: onCheckedChange, disabled: disabled, "data-disabled": disabled, "data-indeterminate": indeterminate, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', ...rest, children: jsxRuntime.jsx(radixUi.Checkbox.Indicator, { className: styles$o.indicator, children: indeterminate ? jsxRuntime.jsx(CheckHalf, {}) : jsxRuntime.jsx(CheckSmall, {}) }) }) }), jsxRuntime.jsx("label", { className: clsx(styles$o.label, { [styles$o.disabled]: disabled }), htmlFor: componentId, children: label })] }));
 };
 
-var styles$n = {"chips":"Chips-module__chips___SOvBe","title":"Chips-module__title___ZhuQi","iconLeft":"Chips-module__iconLeft___tPhnw","iconRight":"Chips-module__iconRight___-HxL2","hasLeftIcon":"Chips-module__hasLeftIcon___D3quS","hasRightIcon":"Chips-module__hasRightIcon___ZMx2Y","brand":"Chips-module__brand___q1Gsm","success":"Chips-module__success___UhxQa","alert":"Chips-module__alert___nvPnr","disabled":"Chips-module__disabled___ElWLI"};
+var styles$n = {"chips":"Chips-module__chips___SOvBe","title":"Chips-module__title___ZhuQi","iconLeft":"Chips-module__iconLeft___tPhnw","iconRight":"Chips-module__iconRight___-HxL2","hasLeftIcon":"Chips-module__hasLeftIcon___D3quS","hasRightIcon":"Chips-module__hasRightIcon___ZMx2Y","brand":"Chips-module__brand___q1Gsm","success":"Chips-module__success___UhxQa","alert":"Chips-module__alert___nvPnr","interactive":"Chips-module__interactive___4ytKl","disabled":"Chips-module__disabled___ElWLI"};
 
 const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled = false, backgroundColor, textColor, scale = 1, className, style, ...rest }) => {
+    const isInteractive = typeof rest.onClick === 'function';
     const chipsClass = clsx(styles$n.chips, styles$n[variant], {
         [styles$n.disabled]: disabled,
+        [styles$n.interactive]: isInteractive && !disabled,
         [styles$n.hasLeftIcon]: leftIcon,
         [styles$n.hasRightIcon]: rightIcon,
     }, className);
@@ -2878,7 +2880,6 @@ const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled =
         ...(!disabled && textColor && { '--chips-text': `var(--${textColor})` }),
         ...style,
     };
-    const isInteractive = typeof rest.onClick === 'function';
     const { onKeyDown: userOnKeyDown, ...otherRest } = rest;
     const handleKeyDown = (e) => {
         userOnKeyDown?.(e);
@@ -2927,6 +2928,7 @@ const ICON_KEY_MAP = {
     capslock: reactIcons.KeyboardShiftUppercase20Regular,
     downkeyboard: reactIcons.ChevronDown20Regular,
     emoji: reactIcons.Emoji20Regular,
+    enterNumpad: reactIcons.ArrowImport20Regular,
 };
 const SHARED_DISPLAY = {
     '{capslock}': iconSlot('capslock'),
@@ -2952,9 +2954,11 @@ const LAYOUT_DISPLAY = {
 const EMOTICON_KEY = '{emoticon}';
 const DOWN_KEYBOARD_KEY = '{downkeyboard}';
 const ENTER_KEY = '{enter}';
-const removeKeyFromLayout = (layout, key) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
+const removeKeyFromLayout = (layout, key, skipLayouts = []) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
     layoutName,
-    rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
+    skipLayouts.includes(layoutName)
+        ? rows
+        : rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
 ]));
 const replaceKeyWithBlank = (layout, key) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
     layoutName,
@@ -2967,7 +2971,8 @@ const QWERTY_LOWERCASE = [
     '{shift} z x c v b n m {bksp}',
     '{numbers} {alt} {space} . {enter}',
 ];
-const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{bksp} 0 {abc}'];
+const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {bksp}'];
+const NUMPAD_WITH_ENTER = ['1 2 3 -', '4 5 6 _', '7 8 9 {bksp}', '{abc} 0 . {enter}'];
 const SHARED_LAYOUTS = {
     shift: [
         '1 2 3 4 5 6 7 8 9 0',
@@ -3017,11 +3022,17 @@ const NATIVE_LAYOUTS = {
 const NATIVE_LAYOUT_KEYS = new Set([
     'default', 'numeric',
 ]);
-const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false, showEnterKey = true, showTypeSwitchKey = true) => {
+const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false, showEnterKey = true, showTypeSwitchKey = true, numpadWithEnter = false) => {
     const layout = NATIVE_LAYOUTS[type] ?? NATIVE_LAYOUTS.default ?? null;
     if (!layout)
         return null;
-    let computedLayout = layout;
+    let computedLayout = numpadWithEnter
+        ? {
+            ...layout,
+            ...(type === 'numeric' ? { default: NUMPAD_WITH_ENTER } : {}),
+            numbers: NUMPAD_WITH_ENTER,
+        }
+        : layout;
     if (!Emoji) {
         computedLayout = removeKeyFromLayout(computedLayout, EMOTICON_KEY);
     }
@@ -3029,7 +3040,9 @@ const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFi
         computedLayout = removeKeyFromLayout(computedLayout, DOWN_KEYBOARD_KEY);
     }
     if (!showEnterKey) {
-        computedLayout = removeKeyFromLayout(computedLayout, ENTER_KEY);
+        // Numpad layouts always preserve {enter}; only remove from QWERTY layouts
+        const numpadLayouts = type === 'numeric' ? ['default', 'numbers'] : ['numbers'];
+        computedLayout = removeKeyFromLayout(computedLayout, ENTER_KEY, numpadLayouts);
     }
     if (!showTypeSwitchKey) {
         computedLayout = removeKeyFromLayout(computedLayout, '{numbers}');
@@ -3100,13 +3113,16 @@ const ACCENT_OPTIONS = {
  * <VirtualKeyboard targetRef={inputRef} value={value} onChange={setValue} />
  * ```
  */
-const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onChange, onKeyPress, onTypeChange, maxLength, Emoji = false, className, id, placeholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, textFieldScale = 1, showEnterKey = true, showTypeSwitchKey = true, }) => {
+const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange, onKeyPress, onEnterPress, onTypeChange, maxLength, Emoji = false, className, id, placeholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, textFieldScale = 1, showEnterKey = true, showTypeSwitchKey = true, numpadWithEnter = false, }) => {
+    const [internalValue, setInternalValue] = React.useState(value ?? '');
     const [layoutName, setLayoutName] = React.useState('default');
     const [capsLockOn, setCapsLockOn] = React.useState(false);
     const [accentMenu, setAccentMenu] = React.useState(null);
     const [accentMenuOffsetX, setAccentMenuOffsetX] = React.useState(0);
-    const [activeLayout, setActiveLayout] = React.useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
+    const [activeLayout, setActiveLayout] = React.useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey, numpadWithEnter));
     const visualType = NATIVE_LAYOUT_KEYS.has(type) ? type : 'default';
+    const effectiveValue = onChange !== undefined ? (value ?? '') : internalValue;
+    const isNumpadLayout = (type === 'numeric' && layoutName === 'default') || layoutName === 'numbers';
     const [isOpen, setIsOpen] = React.useState(variant !== 'native');
     const hideTimeoutRef = React.useRef(null);
     const scrollTimeoutRef = React.useRef(null);
@@ -3119,15 +3135,15 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
     const keyboardInstanceRef = React.useRef(null);
     const accentMenuRef = React.useRef(null);
     const accentButtonRef = React.useRef(null);
-    const valueRef = React.useRef(value);
+    const valueRef = React.useRef(value ?? '');
     const [iconSlots, setIconSlots] = React.useState([]);
     const [keyPreview, setKeyPreview] = React.useState(null);
     const [keyPreviewOffsetX, setKeyPreviewOffsetX] = React.useState(0);
     const keyPreviewRef = React.useRef(null);
     const [containerWidth, setContainerWidth] = React.useState(Infinity);
     React.useEffect(() => {
-        valueRef.current = value;
-    }, [value]);
+        valueRef.current = effectiveValue;
+    }, [effectiveValue]);
     const clearLongPressTimeout = React.useCallback(() => {
         if (longPressTimeoutRef.current !== null) {
             clearTimeout(longPressTimeoutRef.current);
@@ -3142,8 +3158,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         keyboardInstanceRef.current?.setInput(nextValue);
     }, []);
     React.useEffect(() => {
-        syncKeyboardInput(value);
-    }, [value, syncKeyboardInput]);
+        syncKeyboardInput(effectiveValue);
+    }, [effectiveValue, syncKeyboardInput]);
     React.useEffect(() => {
         onTypeChange?.(type);
     }, [type, onTypeChange]);
@@ -3221,8 +3237,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
     React.useEffect(() => {
         setLayoutName('default');
         setCapsLockOn(false);
-        setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
-    }, [type, Emoji, variant, showEnterKey, showTypeSwitchKey]);
+        setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey, numpadWithEnter));
+    }, [type, Emoji, variant, showEnterKey, showTypeSwitchKey, numpadWithEnter]);
     React.useEffect(() => {
         if (!Emoji && layoutName === 'emoticon') {
             setLayoutName(type === 'numeric' ? 'abc' : 'default');
@@ -3302,7 +3318,10 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
             if (newSlots.length === 0)
                 return;
             newSlots.forEach((s) => s.setAttribute('data-icon-root', 'true'));
-            setIconSlots((prev) => [...prev, ...newSlots]);
+            setIconSlots((prev) => [
+                ...prev.filter((slot) => container.contains(slot)),
+                ...newSlots,
+            ]);
         };
         registerNewSlots();
         const observer = new MutationObserver(() => {
@@ -3313,7 +3332,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         return () => {
             observer.disconnect();
         };
-    }, []);
+    }, [variant]);
     React.useEffect(() => {
         closeAccentMenu();
         setAccentMenuOffsetX(0);
@@ -3395,6 +3414,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
             const currentValue = valueRef.current;
             if (maxLength === undefined || currentValue.length < maxLength) {
                 const nextValue = `${currentValue}${heldKey}`;
+                if (onChange === undefined)
+                    setInternalValue(nextValue);
                 onChange?.(nextValue);
                 onKeyPress?.(heldKey);
                 syncKeyboardInput(nextValue);
@@ -3428,6 +3449,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
             return;
         }
         const nextValue = `${currentValue}${accentedChar}`;
+        if (onChange === undefined)
+            setInternalValue(nextValue);
         onChange?.(nextValue);
         onKeyPress?.(accentedChar);
         closeAccentMenu();
@@ -3518,12 +3541,16 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         if (isHeldAccentKey) {
             return;
         }
+        if (button === '{enter}') {
+            onEnterPress?.();
+        }
         onKeyPress?.(button);
     }, [
         type,
         layoutName,
         capsLockOn,
         onKeyPress,
+        onEnterPress,
         onTypeChange,
         Emoji,
         variant,
@@ -3550,8 +3577,10 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         }
         if (maxLength !== undefined && input.length > maxLength)
             return;
+        if (onChange === undefined)
+            setInternalValue(input);
         onChange?.(input);
-    }, [maxLength, onChange, syncKeyboardInput]);
+    }, [maxLength, onChange, setInternalValue, syncKeyboardInput]);
     const portalSizes = React.useMemo(() => {
         if (containerWidth <= 360)
             return { preview: 42, option: 44, fontSize: 'var(--font-size-16)' };
@@ -3567,15 +3596,16 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         const baseDisplay = LAYOUT_DISPLAY[visualType];
         if (!baseDisplay)
             return baseDisplay;
-        if (variant !== 'fixed') {
-            return baseDisplay;
+        const display = { ...baseDisplay };
+        if (numpadWithEnter && isNumpadLayout) {
+            display['{enter}'] = '<span data-icon-key="enterNumpad"></span>';
         }
-        return {
-            ...baseDisplay,
-            '{bksp}': (baseDisplay['{bksp}'] ?? '').replace(/\s*Apagar$/, ''),
-        };
-    }, [visualType, variant]);
-    const keyboardEl = activeLayout ? (jsxRuntime.jsxs("div", { ref: keyboardWrapperRef, className: clsx(styles$k.keyboardWrapper, ((type === 'numeric' && layoutName === 'default') || layoutName === 'numbers' || type === 'default') && styles$k.keyboardNumpadActive), onPointerDownCapture: handleLongPressStart, onPointerUpCapture: handleLongPressEnd, onPointerLeave: handleLongPressEnd, onPointerCancelCapture: handleLongPressEnd, children: [jsxRuntime.jsx(Keyboard, { keyboardRef: (instance) => {
+        if (variant === 'fixed') {
+            display['{bksp}'] = (display['{bksp}'] ?? '').replace(/\s*Apagar$/, '');
+        }
+        return display;
+    }, [visualType, variant, numpadWithEnter, isNumpadLayout]);
+    const keyboardEl = activeLayout ? (jsxRuntime.jsxs("div", { ref: keyboardWrapperRef, className: clsx(styles$k.keyboardWrapper, isNumpadLayout && styles$k.keyboardNumpadActive), onPointerDownCapture: handleLongPressStart, onPointerUpCapture: handleLongPressEnd, onPointerLeave: handleLongPressEnd, onPointerCancelCapture: handleLongPressEnd, children: [jsxRuntime.jsx(Keyboard, { keyboardRef: (instance) => {
                     keyboardInstanceRef.current = instance;
                     if (instance) {
                         instance.setInput(valueRef.current);
@@ -3613,9 +3643,9 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
                                 event.stopPropagation();
                             }, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
     if (variant === 'native' && typeof document !== 'undefined') {
-        return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[`layout--${visualType}`], className), children: keyboardEl }), document.body);
+        return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), children: keyboardEl }), document.body);
     }
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$k.textFieldContainer, children: jsxRuntime.jsx(TextField, { placeholder: placeholder, value: value, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, disableAutoComplete: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$k.textFieldWrapper, scale: textFieldScale }) })), keyboardEl] }));
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$k.textFieldContainer, children: jsxRuntime.jsx(TextField, { placeholder: placeholder, value: effectiveValue, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, disableAutoComplete: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$k.textFieldWrapper, scale: textFieldScale }) })), keyboardEl] }));
 };
 
 var styles$j = {"container":"TextField-module__container___WJHFR","inputWrapper":"TextField-module__inputWrapper___INjfd","inputContainer":"TextField-module__inputContainer___3EsFJ","icon":"TextField-module__icon___p1vwi","clearButton":"TextField-module__clearButton___kgOot","inputWithIcon":"TextField-module__inputWithIcon___shqkL","helperText":"TextField-module__helperText___d5QGC","error":"TextField-module__error___IGQzp","disabled":"TextField-module__disabled___roIKP","attachedToVirtualKeyboard":"TextField-module__attachedToVirtualKeyboard___fuO2O","errorWithMessage":"TextField-module__errorWithMessage___m-5AA","clearButtonIcon":"TextField-module__clearButtonIcon___Z2iyc"};
@@ -3644,7 +3674,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
     return container;
 };
 
-const TextField$1 = ({ ref, className, style, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, persistIcon = false, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }) => {
+const TextField$1 = React.forwardRef(({ className, style, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, persistIcon = false, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }, ref) => {
     const normalizeValue = (val) => {
         return val === undefined || val === null ? '' : String(val);
     };
@@ -3708,7 +3738,7 @@ const TextField$1 = ({ ref, className, style, value, label, placeholder, type =
     const containerClass = clsx(styles$j.container, className, {
         [styles$j.attachedToVirtualKeyboard]: attachedToVirtualKeyboard,
         [styles$j.disabled]: disabled,
-        [styles$j.error]: error,
+        [styles$j.error]: hasError,
         [styles$j.errorWithMessage]: !!errorMessage,
     });
     return (jsxRuntime.jsxs("div", { className: containerClass, style: { ...containerStyle, ...style }, children: [label && (jsxRuntime.jsx(LabelComponent, { scale: scale, htmlFor: componentId, required: required, tooltip: !!tooltipText, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxRuntime.jsxs("div", { className: styles$j.inputWrapper, children: [jsxRuntime.jsxs("div", { className: styles$j.inputContainer, children: [jsxRuntime.jsx("input", { ...rest, ref: setInputRefs, id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, inputMode: (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'none' : rest.inputMode, autoComplete: (disableAutoComplete || virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'off' : rest.autoComplete, className: clsx({
@@ -3722,7 +3752,7 @@ const TextField$1 = ({ ref, className, style, value, label, placeholder, type =
                             onChange?.(val);
                         }
                     } }) }))] }));
-};
+});
 TextField$1.displayName = 'TextField';
 var TextField = React.memo(TextField$1);
 
@@ -3818,7 +3848,7 @@ function validatePartialDate(value, locale = 'pt-br') {
     return 'incomplete';
 }
 
-const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, scale = 1, className, style, ...rest }) => {
+const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, scale = 1, id, className, style, ...rest }) => {
     const fieldId = React.useId();
     const calendarId = `${fieldId}-calendar`;
     const containerStyle = { '--giro-scale': scale };
@@ -3948,7 +3978,7 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
             }
         }
     };
-    return (jsxRuntime.jsx("div", { ref: wrapperRef, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
+    return (jsxRuntime.jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
                     handleTextFieldChange(String(e));
                 }, onKeyDown: handleKeyDown, onFocus: handleFocus, persistIcon: true, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsxRuntime.jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
                     handleDateChange(null);
@@ -4052,7 +4082,7 @@ const matchesAccept = (file, accept) => {
         return fileType === type;
     });
 };
-const FileUpload = ({ ref, value, onChange, helperText, error = false, errorMessage, maxFileSize, maxFilesQuantity, disabled = false, className, id, accept, multiple = true, description = 'Clique ou arraste os arquivos aqui', descriptionErrorMessage = 'Falha ao subir um ou mais arquivos.', ...rest }) => {
+const FileUpload = React.forwardRef(({ value, onChange, helperText, error = false, errorMessage, maxFileSize, maxFilesQuantity, disabled = false, className, id, accept, multiple = true, description = 'Clique ou arraste os arquivos aqui', descriptionErrorMessage = 'Falha ao subir um ou mais arquivos.', ...rest }, ref) => {
     const generatedId = React.useId();
     const componentId = id || generatedId;
     const helperId = `${componentId}-helper`;
@@ -4187,7 +4217,7 @@ const FileUpload = ({ ref, value, onChange, helperText, error = false, errorMess
                                             }
                                         }, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, { "aria-hidden": "true" }) })] }, `${file.name}-${index}`));
                         }) }))] }), displayedHelper && (jsxRuntime.jsx("span", { id: helperId, role: isError ? 'alert' : undefined, className: clsx(styles$e.helperText, isError && styles$e.errorText), children: displayedHelper }))] }));
-};
+});
 FileUpload.displayName = 'FileUpload';
 
 var styles$d = {"container":"Filter-module__container___cqntK","panel":"Filter-module__panel___19HqD","search":"Filter-module__search___f0gzj","list":"Filter-module__list___UpBk1","item":"Filter-module__item___oNdeY","itemSelected":"Filter-module__itemSelected___JIpJV","itemText":"Filter-module__itemText___RS--0","itemDisabled":"Filter-module__itemDisabled___X-ktg","itemIcon":"Filter-module__itemIcon___RjJSa","noResults":"Filter-module__noResults___3m6pn","footer":"Filter-module__footer___yYS5j","buttonContent":"Filter-module__buttonContent___28fKe","buttonArrow":"Filter-module__buttonArrow___VJlpc","buttonIcon":"Filter-module__buttonIcon___OOBpZ","triggerWrapper":"Filter-module__triggerWrapper___ptPRL","triggerContent":"Filter-module__triggerContent___LYo9j","body":"Filter-module__body___qsyhk","combinedFooter":"Filter-module__combinedFooter___kTnHP"};
@@ -4214,7 +4244,7 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
 
 var styles$c = {"search":"Search-module__search___u3QsV","searchLeftIcon":"Search-module__searchLeftIcon___OKOBq","disabled":"Search-module__disabled___adbxO","inputWithClearIcon":"Search-module__inputWithClearIcon___cqvkq","searchClearIcon":"Search-module__searchClearIcon___qX9-h"};
 
-const Search = ({ ref, placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, style, virtualKeyboard, 'data-testid': testId, ...rest }) => {
+const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, style, virtualKeyboard, 'data-testid': testId, ...rest }, ref) => {
     const [internalValue, setInternalValue] = React.useState('');
     const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
     const isControlled = value !== undefined && onChange !== undefined;
@@ -4286,7 +4316,7 @@ const Search = ({ ref, placeholder = 'Dica do que deve ser buscado', disabled =
                             setInternalValue(val);
                         }
                     } }) }))] }));
-};
+});
 Search.displayName = 'Search';
 
 const Simple = ({ items, type = 'multiple', selectedIds, onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, side = 'bottom', align = 'start', disabled = false, className, selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', id, ...rest }) => {
@@ -5116,13 +5146,13 @@ const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level =
                     }, role: "button", tabIndex: item.disabled ? -1 : 0, "data-disabled": item.disabled || undefined, "data-selected": isSelected && !hasChildren ? 'true' : undefined, "data-testid": `select-item-${item.value}`, children: [variant === 'icon' && item.icon && (jsxRuntime.jsx("span", { className: styles$6.icon, children: item.icon })), jsxRuntime.jsxs("div", { className: styles$6.textContent, children: [jsxRuntime.jsx("div", { className: styles$6.title, children: item.text }), item.subTitle && jsxRuntime.jsx("div", { className: styles$6.subTitle, children: item.subTitle })] }), hasChildren && (jsxRuntime.jsx("span", { className: styles$6.chevron, children: isExpanded ? jsxRuntime.jsx(reactIcons.ChevronDown16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsxRuntime.jsx("div", { className: styles$6.childrenWrapper, children: item.children.map((child) => (jsxRuntime.jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
 };
 
-const SelectItem = ({ ref, text, subTitle, icon, disabled, value, variant, disableFocusOnHover, ...restProps }) => {
+const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, disableFocusOnHover, ...restProps }, ref) => {
     return (jsxRuntime.jsxs("div", { className: clsx(styles$6.itemWrapper, {
             [styles$6.disabled]: disabled,
         }), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsxRuntime.jsx("span", { className: styles$6.icon, children: icon })), jsxRuntime.jsxs(radixUi.Select.Item, { className: clsx(styles$6.item, {
                     [styles$6.disabled]: disabled,
                 }), value: value, disabled: disabled, onPointerMove: disableFocusOnHover ? (e) => e.preventDefault() : undefined, ...restProps, children: [jsxRuntime.jsx(radixUi.Select.ItemText, { className: styles$6.title, children: text }), subTitle && jsxRuntime.jsx("div", { className: styles$6.subTitle, children: subTitle }), jsxRuntime.jsx(radixUi.Select.ItemIndicator, { className: styles$6.itemIndicator })] })] }));
-};
+});
 SelectItem.displayName = 'SelectItem';
 
 const initialState = {
@@ -5692,7 +5722,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
                                             maxWidth: col.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
                                                 ? col.column.columnDef.maxSize
                                                 : undefined,
-                                        }, children: jsxRuntime.jsx("div", { className: styles$5.tableThContent, children: col.isPlaceholder ? null : col.column.getCanSort() ? (jsxRuntime.jsxs("button", { type: "button", className: styles$5.tableSortButton, onClick: col.column.getToggleSortingHandler(), "aria-label": `Ordenar por ${typeof col.column.columnDef.header === 'string' ? col.column.columnDef.header : col.id}`, children: [reactTable.flexRender(col.column.columnDef.header, col.getContext()), col.column.getIsSorted() === 'asc' ? (jsxRuntime.jsx(reactIcons.ArrowSortUp16Regular, { className: styles$5.tableSortIcon })) : col.column.getIsSorted() === 'desc' ? (jsxRuntime.jsx(reactIcons.ArrowSortDown16Regular, { className: styles$5.tableSortIcon })) : (jsxRuntime.jsx(reactIcons.ArrowSort16Regular, { className: clsx(styles$5.tableSortIcon, styles$5.tableSortIconNeutral) }))] })) : (reactTable.flexRender(col.column.columnDef.header, col.getContext())) }) }, col.id))) }, headerGroup.id))) }), jsxRuntime.jsx("tbody", { className: styles$5.tableBody, children: loading ? (Array.from({ length: skeletonRowCount }).map((_, rowIdx) => (jsxRuntime.jsx("tr", { className: styles$5.tableRow, children: table.getVisibleLeafColumns().map((col) => (jsxRuntime.jsx("td", { className: styles$5.tableTd, children: jsxRuntime.jsx(Skeleton, {}) }, col.id))) }, `skeleton-row-${rowIdx}`)))) : table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map((row, index) => {
+                                        }, children: jsxRuntime.jsx("div", { className: styles$5.tableThContent, children: col.isPlaceholder ? null : col.column.getCanSort() ? (jsxRuntime.jsxs("button", { type: "button", className: styles$5.tableSortButton, onClick: col.column.getToggleSortingHandler(), "aria-label": `Ordenar por ${typeof col.column.columnDef.header === 'string' ? col.column.columnDef.header : col.id}`, children: [reactTable.flexRender(col.column.columnDef.header, col.getContext()), col.column.getIsSorted() === 'asc' ? (jsxRuntime.jsx(reactIcons.ArrowSortUp16Regular, { className: styles$5.tableSortIcon })) : col.column.getIsSorted() === 'desc' ? (jsxRuntime.jsx(reactIcons.ArrowSortDown16Regular, { className: styles$5.tableSortIcon })) : (jsxRuntime.jsx(reactIcons.ArrowSort16Regular, { className: styles$5.tableSortIconNeutral }))] })) : (reactTable.flexRender(col.column.columnDef.header, col.getContext())) }) }, col.id))) }, headerGroup.id))) }), jsxRuntime.jsx("tbody", { className: styles$5.tableBody, children: loading ? (Array.from({ length: skeletonRowCount }).map((_, rowIdx) => (jsxRuntime.jsx("tr", { className: styles$5.tableRow, children: table.getVisibleLeafColumns().map((col) => (jsxRuntime.jsx("td", { className: styles$5.tableTd, children: jsxRuntime.jsx(Skeleton, {}) }, col.id))) }, `skeleton-row-${rowIdx}`)))) : table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map((row, index) => {
                                     const rowProps = onRow?.(row.original, index) ?? {};
                                     return (jsxRuntime.jsx("tr", { className: clsx(styles$5.tableRow, rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: row.getVisibleCells().map((cell) => (jsxRuntime.jsx("td", { className: styles$5.tableTd, style: {
                                                 textAlign: cell.column.columnDef.meta?.align,
@@ -5717,7 +5747,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
 
 var styles$3 = {"container":"TextArea-module__container___WEBC-","inputWrapper":"TextArea-module__inputWrapper___-omPx","inputContainer":"TextArea-module__inputContainer___0-jKY","footer":"TextArea-module__footer___7XMlj","helperText":"TextArea-module__helperText___709rD","charCount":"TextArea-module__charCount___zdbxM","error":"TextArea-module__error___DWDms","disabled":"TextArea-module__disabled___lHxCa"};
 
-const TextArea = ({ ref, className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', charCount = false, height, virtualKeyboard, ...rest }) => {
+const TextArea = React.forwardRef(({ className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', charCount = false, height, virtualKeyboard, ...rest }, ref) => {
     const normalizeValue = (val) => {
         return val === undefined || val === null ? '' : String(val);
     };
@@ -5762,7 +5792,7 @@ const TextArea = ({ ref, className, value, label, placeholder, onChange, disable
                             onChange?.(val);
                         }
                     } }) }))] }));
-};
+});
 TextArea.displayName = 'TextArea';
 var TextArea_default = React.memo(TextArea);