@trackunit/react-form-components 1.25.12 → 1.26.0

package/index.cjs.js

@@ -35,6 +35,7 @@ var defaultTranslations = {
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",
 	"emailField.error.REQUIRED": "The email address is required",
+	"emailField.sendEmailAction.label": "Email",
 	"field.notEditable.tooltip": "This field is not editable",
 	"field.required.asterisk.tooltip": "This field is required",
 	"numberField.error.GREATER_THAN": "Value must be greater than or equal to {{min}}",
@@ -42,6 +43,8 @@ var defaultTranslations = {
 	"numberField.error.LESS_THAN": "Value must be less than or equal to {{max}}",
 	"numberField.error.NOT_IN_BETWEEN": "Must be between {{min}} and {{max}}",
 	"numberField.error.REQUIRED": "This field is required",
+	"passwordField.tooltip.hide": "Hide password",
+	"passwordField.tooltip.show": "Show password",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -51,14 +54,17 @@ var defaultTranslations = {
 	"phoneField.error.TOO_LONG": "The phone number is too long",
 	"phoneField.error.TOO_SHORT": "The phone number is too short",
 	"phoneField.error.undefined": "",
+	"phoneField.phoneNumber.label": "Phone Number",
 	"schedule.label.active": "Active",
 	"schedule.label.allDay": "All Day",
 	"schedule.label.day": "Day",
 	"search.placeholder": "Search",
 	"select.loadingMessage": "Loading...",
+	"select.multiValue.remove": "Remove",
 	"select.noOptionsMessage": "No options found",
 	"urlField.error.INVALID_URL": "Please enter a valid URL",
-	"urlField.error.REQUIRED": "The URL is required"
+	"urlField.error.REQUIRED": "The URL is required",
+	"urlField.url.label": "Web address"
 };
 
 /** The translation namespace for this library */
@@ -608,7 +614,7 @@ const AddonRenderer = ({ addon, "data-testid": dataTestId, className, fieldSize,
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, style, ref, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, title, style, ref, }) => {
     const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -647,15 +653,18 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium",
         }
     };
     const adjustedIconSize = size === "large" ? "medium" : size;
-    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, style: style, children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
+    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, style: style, children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", title: title, variant: "ghost-neutral" }) }));
 };
 
+/**
+ *
+ */
 const GenericActionsRenderer = ({ genericAction = undefined, disabled, fieldSize = undefined, innerRef, tooltipLabel, }) => {
     const [t] = useTranslation();
     if (!genericAction) {
         return null;
     }
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsxRuntime.jsx(ActionButton, { "data-testid": "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
+    return (jsxRuntime.jsx(ActionButton, { "data-testid": "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, title: tooltipLabel ?? t("baseInput.copyAction.toolTip"), type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }));
 };
 
 /**
@@ -1347,7 +1356,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, onBlur, o
                     onPopoverOpenStateChange(true);
                 }
             };
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "flex w-full min-w-0 items-center", children: jsxRuntime.jsx(BaseInput, { ...rest, "aria-readonly": true, className: tailwindMerge.twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onBlur: handleInputBlur, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, placeholder: rest.placeholder ?? getDateFieldPlaceholder(locale), ref: setInputRef, suffix: suffixProp ?? (jsxRuntime.jsx("div", { className: cvaActionContainer({ size: "medium" }), children: jsxRuntime.jsx(reactComponents.IconButton, { "aria-expanded": isOpen, "aria-label": t("dateField.openPicker.ariaLabel"), className: cvaActionButton({ size: "small" }), "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", disabled: isPickerDisabled, icon: jsxRuntime.jsx(reactComponents.Icon, { "aria-label": undefined, name: "Calendar", size: "small", type: "solid" }), onClick: togglePopover, size: "small", tabIndex: isOpen ? -1 : undefined, variant: "ghost-neutral" }) })), tabIndex: isOpen ? -1 : rest.tabIndex, type: "text", value: resolvedValue }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { initialFocus: 1, children: closePopover => (jsxRuntime.jsx(DateBaseInputPickerContent, { applyDate: applyDate, closePopover: closePopover, "data-testid": dataTestId, onApply: onApply, onCalendarChange: onCalendarChange, onCancel: onCancel, onClear: onClear, pendingDate: pendingDate, selectedDate: selectedDate, tileDisabled: tileDisabled })) })] }));
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "flex w-full min-w-0 items-center", children: jsxRuntime.jsx(BaseInput, { ...rest, "aria-readonly": true, className: tailwindMerge.twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onBlur: handleInputBlur, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, placeholder: rest.placeholder ?? getDateFieldPlaceholder(locale), ref: setInputRef, suffix: suffixProp ?? (jsxRuntime.jsx("div", { className: cvaActionContainer({ size: "medium" }), children: jsxRuntime.jsx(reactComponents.IconButton, { "aria-expanded": isOpen, ariaLabel: t("dateField.openPicker.ariaLabel"), className: cvaActionButton({ size: "small" }), "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", disabled: isPickerDisabled, icon: jsxRuntime.jsx(reactComponents.Icon, { "aria-label": undefined, name: "Calendar", size: "small", type: "solid" }), onClick: togglePopover, size: "small", tabIndex: isOpen ? -1 : undefined, variant: "ghost-neutral" }) })), tabIndex: isOpen ? -1 : rest.tabIndex, type: "text", value: resolvedValue }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { initialFocus: 1, children: closePopover => (jsxRuntime.jsx(DateBaseInputPickerContent, { applyDate: applyDate, closePopover: closePopover, "data-testid": dataTestId, onApply: onApply, onCalendarChange: onCalendarChange, onCancel: onCancel, onClear: onClear, pendingDate: pendingDate, selectedDate: selectedDate, tileDisabled: tileDisabled })) })] }));
         } }));
 };
 
@@ -1454,6 +1463,7 @@ const DEFAULT_COUNTRY_CODE = undefined;
  * @returns {ReactElement} The phone input component.
  */
 const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }) => {
+    const [t] = useTranslation();
     const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
@@ -1495,7 +1505,7 @@ const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false
         onFocus?.(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, "data-testid": dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
+    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { ...rest, actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize, title: t("phoneField.phoneNumber.label"), type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, "data-testid": dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }) }));
 };
 
 const cvaTextAreaBaseInput = cssClassVarianceUtilities.cvaMerge([
@@ -1671,7 +1681,7 @@ const CounterTag = ({ fieldSize, hiddenCount, totalCount, ref, className, "data-
  * Internal component for rendering multi-select values with measurement support.
  * Uses the measurement state to determine if the value should be displayed or hidden based on available width.
  */
-const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, ref, "data-testid": dataTestId, }) => {
+const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, removeTagLabel, ref, "data-testid": dataTestId, }) => {
     const optionPrefix = getOptionPrefix ? getOptionPrefix(data) : null;
     const handleOnClose = (e) => {
         if (disabled) {
@@ -1680,7 +1690,10 @@ const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, g
         e.stopPropagation();
         onClose?.(e);
     };
-    return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge(className), color: disabled ? "neutral" : "white", "data-testid": dataTestId, icon: optionPrefix, onClickClose: disabled ? undefined : handleOnClose, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsxRuntime.jsx("span", { className: "flex items-center gap-1", children: children }) }));
+    if (disabled) {
+        return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge(className), color: "neutral", "data-testid": dataTestId, icon: optionPrefix, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsxRuntime.jsx("span", { className: "flex items-center gap-1", children: children }) }));
+    }
+    return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge(className), color: "white", "data-testid": dataTestId, icon: optionPrefix, onClickClose: handleOnClose, ref: ref, removeTagLabel: removeTagLabel, size: fieldSize === "small" ? "small" : "medium", children: jsxRuntime.jsx("span", { className: "flex items-center gap-1", children: children }) }));
 };
 
 /**
@@ -2483,7 +2496,7 @@ formatOptionLabel, }) => {
                 return (jsxRuntime.jsx(ReactSelect.components.MultiValue, { ...selectMultiValue, getStyles: getNoStyles, children: jsxRuntime.jsx(MultiValue, { className: cvaSelectMultiValue({
                             hidden: currentIsComplete && index + 1 > currentVisibleCount, // Hide if doesn't fit
                             invisible: currentWithCounter && !currentIsComplete, // Make invisible if measuring with counter. When there's a counter, it would otherwise briefly change layout to make room for the "fake" counter
-                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefix, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), children: selectMultiValue.children }) }));
+                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefix, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
             },
             Menu: selectMenu => {
                 return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
@@ -2937,7 +2950,7 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [label !== undefined && label !== null ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsxRuntime.jsx("span", { className: "ml-1", children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, (helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null) ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [label !== undefined && label !== null ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsxRuntime.jsx("span", { className: "ml-1 mt-1 flex items-center", children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, (helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null) ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -3429,6 +3442,7 @@ const validateEmailId = (emailId, required) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid": dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
+    const [t] = useTranslation();
     const [email, setEmail] = react.useState(rest.value?.toString() || rest.defaultValue?.toString());
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -3439,7 +3453,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid":
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize, type: "EMAIL", value: email })) : null, "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+    return (jsxRuntime.jsx(BaseInput, { ...rest, actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize, title: t("emailField.sendEmailAction.label"), type: "EMAIL", value: email })) : null, "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }));
 };
 
 /**
@@ -3512,7 +3526,7 @@ const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(EmailBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(EmailBaseInput, { ...rest, "aria-labelledby": htmlForId + "-label", className: className, "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value }) }));
 };
 EmailField.displayName = "EmailField";
 
@@ -3848,7 +3862,7 @@ const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
     },
 });
 const cvaOptionCardContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
-const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
+const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["flex", "grow-0"]);
 const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge(["text-neutral-600"], {
     variants: {
         layout: {
@@ -3910,7 +3924,8 @@ OptionCard.displayName = "OptionCard";
  */
 const PasswordBaseInput = ({ ref, fieldSize = undefined, ...rest }) => {
     const [showPassword, setShowPassword] = react.useState(false);
-    return (jsxRuntime.jsx(BaseInput, { ref: ref, ...rest, actions: jsxRuntime.jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
+    const [t] = useTranslation();
+    return (jsxRuntime.jsx(BaseInput, { ref: ref, ...rest, actions: jsxRuntime.jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", title: showPassword ? t("passwordField.tooltip.hide") : t("passwordField.tooltip.show"), variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
 };
 
 /**
@@ -5152,7 +5167,7 @@ const cvaToggleSwitchThumb = cssClassVarianceUtilities.cvaMerge(["block", "round
  * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
  * @returns {ReactElement} ToggleSwitch component
  */
-const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, className, "data-testid": dataTestId = "toggle-switch", showInputFocus = false, toggled, size = "medium", tabIndex = 0, readOnly = false, disabled = false, ref, ...rest }) => {
+const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, className, "data-testid": dataTestId = "toggle-switch", showInputFocus = false, toggled, size = "medium", tabIndex = 0, readOnly = false, disabled = false, tooltipLabel, ref, ...rest }) => {
     const localInputRef = react.useRef(null);
     const mergedRef = reactComponents.useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
@@ -5187,12 +5202,12 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, classN
         e.stopPropagation();
         onChange?.(!toggled, e);
     };
-    return (jsxRuntime.jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, ...dataAttributes, children: jsxRuntime.jsxs("span", { className: cvaToggleSwitchTrack({
-                toggled,
-                disabled: disabled || readOnly,
-                size,
-                focused: showInputFocus,
-            }), "data-testid": `${dataTestId}-track`, children: [jsxRuntime.jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsxRuntime.jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }));
+    return (jsxRuntime.jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, ...dataAttributes, children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, children: jsxRuntime.jsxs("span", { className: cvaToggleSwitchTrack({
+                    toggled,
+                    disabled: disabled || readOnly,
+                    size,
+                    focused: showInputFocus,
+                }), "data-testid": `${dataTestId}-track`, children: [jsxRuntime.jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsxRuntime.jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }) }));
 };
 ToggleSwitch.displayName = "ToggleSwitch";
 
@@ -5408,9 +5423,10 @@ const validateUrl = (url, required) => {
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
 const UrlBaseInput = ({ isInvalid = false, "data-testid": dataTestId, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
+    const [t] = useTranslation();
     const [url, setUrl] = react.useState(value?.toString() || defaultValue?.toString());
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, { "data-testid": dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { "data-testid": (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize, type: "WEB_ADDRESS", value: url })) }));
+    return (jsxRuntime.jsx(BaseInput, { ...rest, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { "data-testid": (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize, title: t("urlField.url.label"), type: "WEB_ADDRESS", value: url })), "data-testid": dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }));
 };
 
 /**
@@ -5477,7 +5493,7 @@ const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className
         setRenderAsInvalid(!!validateUrl(newValue, required));
         onBlur?.(event);
     }, [onBlur, required]);
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(UrlBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, required: required, value: value ?? defaultValue, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(UrlBaseInput, { ...rest, "aria-labelledby": htmlForId + "-label", className: className, "data-testid": dataTestId, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, required: required, value: value ?? defaultValue }) }));
 };
 UrlField.displayName = "UrlField";
 

package/index.esm.js

@@ -34,6 +34,7 @@ var defaultTranslations = {
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",
 	"emailField.error.REQUIRED": "The email address is required",
+	"emailField.sendEmailAction.label": "Email",
 	"field.notEditable.tooltip": "This field is not editable",
 	"field.required.asterisk.tooltip": "This field is required",
 	"numberField.error.GREATER_THAN": "Value must be greater than or equal to {{min}}",
@@ -41,6 +42,8 @@ var defaultTranslations = {
 	"numberField.error.LESS_THAN": "Value must be less than or equal to {{max}}",
 	"numberField.error.NOT_IN_BETWEEN": "Must be between {{min}} and {{max}}",
 	"numberField.error.REQUIRED": "This field is required",
+	"passwordField.tooltip.hide": "Hide password",
+	"passwordField.tooltip.show": "Show password",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -50,14 +53,17 @@ var defaultTranslations = {
 	"phoneField.error.TOO_LONG": "The phone number is too long",
 	"phoneField.error.TOO_SHORT": "The phone number is too short",
 	"phoneField.error.undefined": "",
+	"phoneField.phoneNumber.label": "Phone Number",
 	"schedule.label.active": "Active",
 	"schedule.label.allDay": "All Day",
 	"schedule.label.day": "Day",
 	"search.placeholder": "Search",
 	"select.loadingMessage": "Loading...",
+	"select.multiValue.remove": "Remove",
 	"select.noOptionsMessage": "No options found",
 	"urlField.error.INVALID_URL": "Please enter a valid URL",
-	"urlField.error.REQUIRED": "The URL is required"
+	"urlField.error.REQUIRED": "The URL is required",
+	"urlField.url.label": "Web address"
 };
 
 /** The translation namespace for this library */
@@ -607,7 +613,7 @@ const AddonRenderer = ({ addon, "data-testid": dataTestId, className, fieldSize,
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, style, ref, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, title, style, ref, }) => {
     const [, copyToClipboard] = useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -646,15 +652,18 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium",
         }
     };
     const adjustedIconSize = size === "large" ? "medium" : size;
-    return (jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, style: style, children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
+    return (jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, style: style, children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", title: title, variant: "ghost-neutral" }) }));
 };
 
+/**
+ *
+ */
 const GenericActionsRenderer = ({ genericAction = undefined, disabled, fieldSize = undefined, innerRef, tooltipLabel, }) => {
     const [t] = useTranslation();
     if (!genericAction) {
         return null;
     }
-    return (jsx(Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsx(ActionButton, { "data-testid": "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
+    return (jsx(ActionButton, { "data-testid": "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, title: tooltipLabel ?? t("baseInput.copyAction.toolTip"), type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }));
 };
 
 /**
@@ -1346,7 +1355,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, onBlur, o
                     onPopoverOpenStateChange(true);
                 }
             };
-            return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { className: "flex w-full min-w-0 items-center", children: jsx(BaseInput, { ...rest, "aria-readonly": true, className: twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onBlur: handleInputBlur, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, placeholder: rest.placeholder ?? getDateFieldPlaceholder(locale), ref: setInputRef, suffix: suffixProp ?? (jsx("div", { className: cvaActionContainer({ size: "medium" }), children: jsx(IconButton, { "aria-expanded": isOpen, "aria-label": t("dateField.openPicker.ariaLabel"), className: cvaActionButton({ size: "small" }), "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", disabled: isPickerDisabled, icon: jsx(Icon, { "aria-label": undefined, name: "Calendar", size: "small", type: "solid" }), onClick: togglePopover, size: "small", tabIndex: isOpen ? -1 : undefined, variant: "ghost-neutral" }) })), tabIndex: isOpen ? -1 : rest.tabIndex, type: "text", value: resolvedValue }) }) }), jsx(PopoverContent, { initialFocus: 1, children: closePopover => (jsx(DateBaseInputPickerContent, { applyDate: applyDate, closePopover: closePopover, "data-testid": dataTestId, onApply: onApply, onCalendarChange: onCalendarChange, onCancel: onCancel, onClear: onClear, pendingDate: pendingDate, selectedDate: selectedDate, tileDisabled: tileDisabled })) })] }));
+            return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { className: "flex w-full min-w-0 items-center", children: jsx(BaseInput, { ...rest, "aria-readonly": true, className: twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onBlur: handleInputBlur, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, placeholder: rest.placeholder ?? getDateFieldPlaceholder(locale), ref: setInputRef, suffix: suffixProp ?? (jsx("div", { className: cvaActionContainer({ size: "medium" }), children: jsx(IconButton, { "aria-expanded": isOpen, ariaLabel: t("dateField.openPicker.ariaLabel"), className: cvaActionButton({ size: "small" }), "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", disabled: isPickerDisabled, icon: jsx(Icon, { "aria-label": undefined, name: "Calendar", size: "small", type: "solid" }), onClick: togglePopover, size: "small", tabIndex: isOpen ? -1 : undefined, variant: "ghost-neutral" }) })), tabIndex: isOpen ? -1 : rest.tabIndex, type: "text", value: resolvedValue }) }) }), jsx(PopoverContent, { initialFocus: 1, children: closePopover => (jsx(DateBaseInputPickerContent, { applyDate: applyDate, closePopover: closePopover, "data-testid": dataTestId, onApply: onApply, onCalendarChange: onCalendarChange, onCancel: onCancel, onClear: onClear, pendingDate: pendingDate, selectedDate: selectedDate, tileDisabled: tileDisabled })) })] }));
         } }));
 };
 
@@ -1453,6 +1462,7 @@ const DEFAULT_COUNTRY_CODE = undefined;
  * @returns {ReactElement} The phone input component.
  */
 const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }) => {
+    const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
@@ -1494,7 +1504,7 @@ const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false
         onFocus?.(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, "data-testid": dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
+    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { ...rest, actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize, title: t("phoneField.phoneNumber.label"), type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, "data-testid": dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }) }));
 };
 
 const cvaTextAreaBaseInput = cvaMerge([
@@ -1670,7 +1680,7 @@ const CounterTag = ({ fieldSize, hiddenCount, totalCount, ref, className, "data-
  * Internal component for rendering multi-select values with measurement support.
  * Uses the measurement state to determine if the value should be displayed or hidden based on available width.
  */
-const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, ref, "data-testid": dataTestId, }) => {
+const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, removeTagLabel, ref, "data-testid": dataTestId, }) => {
     const optionPrefix = getOptionPrefix ? getOptionPrefix(data) : null;
     const handleOnClose = (e) => {
         if (disabled) {
@@ -1679,7 +1689,10 @@ const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, g
         e.stopPropagation();
         onClose?.(e);
     };
-    return (jsx(Tag, { className: twMerge(className), color: disabled ? "neutral" : "white", "data-testid": dataTestId, icon: optionPrefix, onClickClose: disabled ? undefined : handleOnClose, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsx("span", { className: "flex items-center gap-1", children: children }) }));
+    if (disabled) {
+        return (jsx(Tag, { className: twMerge(className), color: "neutral", "data-testid": dataTestId, icon: optionPrefix, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsx("span", { className: "flex items-center gap-1", children: children }) }));
+    }
+    return (jsx(Tag, { className: twMerge(className), color: "white", "data-testid": dataTestId, icon: optionPrefix, onClickClose: handleOnClose, ref: ref, removeTagLabel: removeTagLabel, size: fieldSize === "small" ? "small" : "medium", children: jsx("span", { className: "flex items-center gap-1", children: children }) }));
 };
 
 /**
@@ -2482,7 +2495,7 @@ formatOptionLabel, }) => {
                 return (jsx(components.MultiValue, { ...selectMultiValue, getStyles: getNoStyles, children: jsx(MultiValue, { className: cvaSelectMultiValue({
                             hidden: currentIsComplete && index + 1 > currentVisibleCount, // Hide if doesn't fit
                             invisible: currentWithCounter && !currentIsComplete, // Make invisible if measuring with counter. When there's a counter, it would otherwise briefly change layout to make room for the "fake" counter
-                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefix, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), children: selectMultiValue.children }) }));
+                        }), data: selectMultiValue.data, "data-testid": dataTestId ? `${dataTestId}-multiValue-${index}` : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, getOptionPrefix: getOptionPrefix, onClose: selectMultiValue.removeProps.onClick, ref: setGeometryRef(index), removeTagLabel: t("select.multiValue.remove"), children: selectMultiValue.children }) }));
             },
             Menu: selectMenu => {
                 return (jsx(components.Menu, { ...selectMenu, className: cvaSelectMenu({ className: selectMenu.className, placement: selectMenu.placement }), getStyles: getNoStyles, innerProps: {
@@ -2936,7 +2949,7 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [label !== undefined && label !== null ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsx("span", { className: "ml-1", children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, (helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null) ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [label !== undefined && label !== null ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsx("span", { className: "ml-1 mt-1 flex items-center", children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, (helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null) ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -3428,6 +3441,7 @@ const validateEmailId = (emailId, required) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid": dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
+    const [t] = useTranslation();
     const [email, setEmail] = useState(rest.value?.toString() || rest.defaultValue?.toString());
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -3438,7 +3452,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid":
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsx(BaseInput, { actions: email && email.length > 0 ? (jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize, type: "EMAIL", value: email })) : null, "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+    return (jsx(BaseInput, { ...rest, actions: email && email.length > 0 ? (jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize, title: t("emailField.sendEmailAction.label"), type: "EMAIL", value: email })) : null, "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }));
 };
 
 /**
@@ -3511,7 +3525,7 @@ const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(EmailBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(EmailBaseInput, { ...rest, "aria-labelledby": htmlForId + "-label", className: className, "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value }) }));
 };
 EmailField.displayName = "EmailField";
 
@@ -3847,7 +3861,7 @@ const cvaOptionCardLabel = cvaMerge([
     },
 });
 const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
-const cvaOptionCardContainer = cvaMerge(["contents"]);
+const cvaOptionCardContainer = cvaMerge(["flex", "grow-0"]);
 const cvaOptionCardTitle = cvaMerge(["text-neutral-600"], {
     variants: {
         layout: {
@@ -3909,7 +3923,8 @@ OptionCard.displayName = "OptionCard";
  */
 const PasswordBaseInput = ({ ref, fieldSize = undefined, ...rest }) => {
     const [showPassword, setShowPassword] = useState(false);
-    return (jsx(BaseInput, { ref: ref, ...rest, actions: jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsx(IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
+    const [t] = useTranslation();
+    return (jsx(BaseInput, { ref: ref, ...rest, actions: jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsx(IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", title: showPassword ? t("passwordField.tooltip.hide") : t("passwordField.tooltip.show"), variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
 };
 
 /**
@@ -5151,7 +5166,7 @@ const cvaToggleSwitchThumb = cvaMerge(["block", "rounded-full", "bg-white", "asp
  * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
  * @returns {ReactElement} ToggleSwitch component
  */
-const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, className, "data-testid": dataTestId = "toggle-switch", showInputFocus = false, toggled, size = "medium", tabIndex = 0, readOnly = false, disabled = false, ref, ...rest }) => {
+const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, className, "data-testid": dataTestId = "toggle-switch", showInputFocus = false, toggled, size = "medium", tabIndex = 0, readOnly = false, disabled = false, tooltipLabel, ref, ...rest }) => {
     const localInputRef = useRef(null);
     const mergedRef = useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
@@ -5186,12 +5201,12 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick = false, classN
         e.stopPropagation();
         onChange?.(!toggled, e);
     };
-    return (jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, ...dataAttributes, children: jsxs("span", { className: cvaToggleSwitchTrack({
-                toggled,
-                disabled: disabled || readOnly,
-                size,
-                focused: showInputFocus,
-            }), "data-testid": `${dataTestId}-track`, children: [jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }));
+    return (jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, ...dataAttributes, children: jsx(Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, children: jsxs("span", { className: cvaToggleSwitchTrack({
+                    toggled,
+                    disabled: disabled || readOnly,
+                    size,
+                    focused: showInputFocus,
+                }), "data-testid": `${dataTestId}-track`, children: [jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }) }));
 };
 ToggleSwitch.displayName = "ToggleSwitch";
 
@@ -5407,9 +5422,10 @@ const validateUrl = (url, required) => {
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
 const UrlBaseInput = ({ isInvalid = false, "data-testid": dataTestId, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
+    const [t] = useTranslation();
     const [url, setUrl] = useState(value?.toString() || defaultValue?.toString());
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsx(BaseInput, { "data-testid": dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsx(ActionButton, { "data-testid": (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize, type: "WEB_ADDRESS", value: url })) }));
+    return (jsx(BaseInput, { ...rest, actions: !disableAction && (jsx(ActionButton, { "data-testid": (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize, title: t("urlField.url.label"), type: "WEB_ADDRESS", value: url })), "data-testid": dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url }));
 };
 
 /**
@@ -5476,7 +5492,7 @@ const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className
         setRenderAsInvalid(!!validateUrl(newValue, required));
         onBlur?.(event);
     }, [onBlur, required]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(UrlBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, required: required, value: value ?? defaultValue, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(UrlBaseInput, { ...rest, "aria-labelledby": htmlForId + "-label", className: className, "data-testid": dataTestId, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, required: required, value: value ?? defaultValue }) }));
 };
 UrlField.displayName = "UrlField";
 

package/migrations/entry.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=entry.js.map

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/form-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["// Migration entry point for @nx/js:tsc build target.\n// Migrations are registered in ../migrations.json and resolved by NX at runtime.\nexport {};\n"]}

package/migrations/utils/jsx-utils.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertAttributeIntoOpeningTag = exports.logSummary = exports.tsquery = exports.parseTsx = exports.hasSpreadAttribute = exports.findJsxAttribute = exports.findJsxElements = exports.getLocalAliasFor = exports.getImportedAliases = exports.visitTsFiles = exports.visitTsxFiles = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+Object.defineProperty(exports, "tsquery", { enumerable: true, get: function () { return tsquery_1.tsquery; } });
+const ts = tslib_1.__importStar(require("typescript"));
+const TSX_EXTENSIONS = [".tsx", ".jsx"];
+const TS_EXTENSIONS = [".ts", ".tsx", ".jsx"];
+const isTsxFile = (filePath) => TSX_EXTENSIONS.some(ext => filePath.endsWith(ext));
+const isTsFile = (filePath) => TS_EXTENSIONS.some(ext => filePath.endsWith(ext));
+const isUnderNodeModules = (filePath) => filePath.includes("/node_modules/") || filePath.startsWith("node_modules/");
+const isUnderDist = (filePath) => filePath.includes("/dist/") || filePath.startsWith("dist/") || filePath.includes("/.nx/");
+/**
+ * Visits every `.tsx`/`.jsx` file under the workspace root and invokes the
+ * callback with the file path and its current contents. Files that don't
+ * include the marker substring are skipped, which makes large workspaces
+ * cheap to scan.
+ */
+const visitTsxFiles = (tree, marker, callback) => {
+    let touched = 0;
+    (0, devkit_1.visitNotIgnoredFiles)(tree, "/", filePath => {
+        if (!isTsxFile(filePath))
+            return;
+        if (isUnderNodeModules(filePath) || isUnderDist(filePath))
+            return;
+        const content = tree.read(filePath, "utf-8");
+        if (content === null)
+            return;
+        if (!content.includes(marker))
+            return;
+        const updated = callback(filePath, content);
+        if (updated !== null && updated !== undefined && updated !== content) {
+            tree.write(filePath, updated);
+            touched += 1;
+        }
+    });
+    return touched;
+};
+exports.visitTsxFiles = visitTsxFiles;
+/**
+ * Same as {@link visitTsxFiles} but also includes plain `.ts` files. Use this
+ * when the codemod also rewrites non-JSX files such as helpers or hooks.
+ */
+const visitTsFiles = (tree, marker, callback) => {
+    let touched = 0;
+    (0, devkit_1.visitNotIgnoredFiles)(tree, "/", filePath => {
+        if (!isTsFile(filePath))
+            return;
+        if (isUnderNodeModules(filePath) || isUnderDist(filePath))
+            return;
+        const content = tree.read(filePath, "utf-8");
+        if (content === null)
+            return;
+        if (!content.includes(marker))
+            return;
+        const updated = callback(filePath, content);
+        if (updated !== null && updated !== undefined && updated !== content) {
+            tree.write(filePath, updated);
+            touched += 1;
+        }
+    });
+    return touched;
+};
+exports.visitTsFiles = visitTsFiles;
+/**
+ * Mapping of imported component aliases to their original names for a given
+ * package. For `import { IconButton as Btn } from "@trackunit/react-components"`
+ * this returns `{ Btn: "IconButton" }`.
+ *
+ * Returns `null` when the file imports nothing from the package, which lets
+ * callers short-circuit before parsing JSX.
+ */
+const getImportedAliases = (sourceFile, packageName) => {
+    const result = {};
+    let found = false;
+    for (const stmt of sourceFile.statements) {
+        if (!ts.isImportDeclaration(stmt))
+            continue;
+        const moduleSpecifier = stmt.moduleSpecifier;
+        if (!ts.isStringLiteral(moduleSpecifier))
+            continue;
+        if (moduleSpecifier.text !== packageName)
+            continue;
+        const namedBindings = stmt.importClause?.namedBindings;
+        if (namedBindings === undefined || !ts.isNamedImports(namedBindings))
+            continue;
+        for (const element of namedBindings.elements) {
+            const localName = element.name.text;
+            const importedName = element.propertyName?.text ?? localName;
+            result[localName] = importedName;
+            found = true;
+        }
+    }
+    return found ? result : null;
+};
+exports.getImportedAliases = getImportedAliases;
+/**
+ * Returns the local alias used in this file for `originalName` when imported
+ * from `packageName`, or `null` if the component is not imported.
+ */
+const getLocalAliasFor = (sourceFile, packageName, originalName) => {
+    const aliases = (0, exports.getImportedAliases)(sourceFile, packageName);
+    if (aliases === null)
+        return null;
+    for (const [local, original] of Object.entries(aliases)) {
+        if (original === originalName)
+            return local;
+    }
+    return null;
+};
+exports.getLocalAliasFor = getLocalAliasFor;
+/**
+ * Finds every JSX element whose tag name resolves to one of `tagNames`
+ * (typically the local aliases returned by {@link getImportedAliases}).
+ *
+ * The result intentionally includes both opening and full elements so callers
+ * can manipulate attributes (via `openingElement`) or wrap/replace the whole
+ * element (via `element`).
+ */
+const findJsxElements = (sourceFile, tagNames) => {
+    const matches = [];
+    const tagSet = new Set(tagNames);
+    const visit = (node) => {
+        if (ts.isJsxSelfClosingElement(node)) {
+            if (ts.isIdentifier(node.tagName) && tagSet.has(node.tagName.text)) {
+                matches.push({ openingElement: node, element: node });
+            }
+        }
+        else if (ts.isJsxElement(node)) {
+            const opening = node.openingElement;
+            if (ts.isIdentifier(opening.tagName) && tagSet.has(opening.tagName.text)) {
+                matches.push({ openingElement: opening, element: node });
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return matches;
+};
+exports.findJsxElements = findJsxElements;
+/**
+ * Looks up a named JSX attribute on the opening element. Returns `null` when
+ * the attribute is missing or part of a spread attribute (which we cannot
+ * statically inspect).
+ */
+const findJsxAttribute = (openingElement, attributeName) => {
+    for (const attr of openingElement.attributes.properties) {
+        if (!ts.isJsxAttribute(attr))
+            continue;
+        if (!ts.isIdentifier(attr.name))
+            continue;
+        if (attr.name.text === attributeName)
+            return attr;
+    }
+    return null;
+};
+exports.findJsxAttribute = findJsxAttribute;
+/**
+ * `true` when the element forwards a spread expression such as `{...rest}`,
+ * which means we can't be sure which attributes are actually set.
+ */
+const hasSpreadAttribute = (openingElement) => {
+    return openingElement.attributes.properties.some(prop => ts.isJsxSpreadAttribute(prop));
+};
+exports.hasSpreadAttribute = hasSpreadAttribute;
+/**
+ * Parses the file as TSX so JSX is recognised. We do not need a full program
+ * here; tsquery's `ast` helper produces a script-kind source file which loses
+ * JSX context, so we go through `createSourceFile` directly.
+ */
+const parseTsx = (content, fileName = "file.tsx") => ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+exports.parseTsx = parseTsx;
+/**
+ * Helper for codemods to log a one-line summary at the end of a run. Migration
+ * runners aggregate logs per migration, so this keeps output focused.
+ */
+const logSummary = (migrationName, touched, manualReviewNeeded) => {
+    if (touched === 0) {
+        devkit_1.logger.info(`  ${migrationName}: no files changed`);
+        return;
+    }
+    const reviewSuffix = manualReviewNeeded !== undefined && manualReviewNeeded > 0
+        ? ` (${manualReviewNeeded} location(s) need manual review)`
+        : "";
+    devkit_1.logger.info(`  ${migrationName}: updated ${touched} file(s)${reviewSuffix}`);
+};
+exports.logSummary = logSummary;
+/**
+ * Inserts an attribute string immediately after the tag name (so the new
+ * attribute appears first). Returns the resulting source content.
+ *
+ * The added attribute is rendered verbatim, so callers are responsible for
+ * including the leading space (e.g. ` title="Close"`).
+ */
+const insertAttributeIntoOpeningTag = (content, openingElement, attributeText) => {
+    const tagName = openingElement.tagName;
+    const insertPos = tagName.getEnd();
+    return content.slice(0, insertPos) + ` ${attributeText}` + content.slice(insertPos);
+};
+exports.insertAttributeIntoOpeningTag = insertAttributeIntoOpeningTag;
+//# sourceMappingURL=jsx-utils.js.map

package/migrations/utils/jsx-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-utils.js","sourceRoot":"","sources":["../../../../../../libs/react/form-components/migrations/utils/jsx-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { logger, type Tree, visitNotIgnoredFiles } from \"@nx/devkit\";\nimport { tsquery } from \"@phenomnomnominal/tsquery\";\nimport * as ts from \"typescript\";\n\nconst TSX_EXTENSIONS = [\".tsx\", \".jsx\"] as const;\nconst TS_EXTENSIONS = [\".ts\", \".tsx\", \".jsx\"] as const;\n\nconst isTsxFile = (filePath: string): boolean => TSX_EXTENSIONS.some(ext => filePath.endsWith(ext));\nconst isTsFile = (filePath: string): boolean => TS_EXTENSIONS.some(ext => filePath.endsWith(ext));\n\nconst isUnderNodeModules = (filePath: string): boolean =>\n  filePath.includes(\"/node_modules/\") || filePath.startsWith(\"node_modules/\");\n\nconst isUnderDist = (filePath: string): boolean =>\n  filePath.includes(\"/dist/\") || filePath.startsWith(\"dist/\") || filePath.includes(\"/.nx/\");\n\n/**\n * Visits every `.tsx`/`.jsx` file under the workspace root and invokes the\n * callback with the file path and its current contents. Files that don't\n * include the marker substring are skipped, which makes large workspaces\n * cheap to scan.\n */\nexport const visitTsxFiles = (\n  tree: Tree,\n  marker: string,\n  callback: (filePath: string, content: string) => string | null | undefined\n): number => {\n  let touched = 0;\n  visitNotIgnoredFiles(tree, \"/\", filePath => {\n    if (!isTsxFile(filePath)) return;\n    if (isUnderNodeModules(filePath) || isUnderDist(filePath)) return;\n    const content = tree.read(filePath, \"utf-8\");\n    if (content === null) return;\n    if (!content.includes(marker)) return;\n    const updated = callback(filePath, content);\n    if (updated !== null && updated !== undefined && updated !== content) {\n      tree.write(filePath, updated);\n      touched += 1;\n    }\n  });\n  return touched;\n};\n\n/**\n * Same as {@link visitTsxFiles} but also includes plain `.ts` files. Use this\n * when the codemod also rewrites non-JSX files such as helpers or hooks.\n */\nexport const visitTsFiles = (\n  tree: Tree,\n  marker: string,\n  callback: (filePath: string, content: string) => string | null | undefined\n): number => {\n  let touched = 0;\n  visitNotIgnoredFiles(tree, \"/\", filePath => {\n    if (!isTsFile(filePath)) return;\n    if (isUnderNodeModules(filePath) || isUnderDist(filePath)) return;\n    const content = tree.read(filePath, \"utf-8\");\n    if (content === null) return;\n    if (!content.includes(marker)) return;\n    const updated = callback(filePath, content);\n    if (updated !== null && updated !== undefined && updated !== content) {\n      tree.write(filePath, updated);\n      touched += 1;\n    }\n  });\n  return touched;\n};\n\n/**\n * Mapping of imported component aliases to their original names for a given\n * package. For `import { IconButton as Btn } from \"@trackunit/react-components\"`\n * this returns `{ Btn: \"IconButton\" }`.\n *\n * Returns `null` when the file imports nothing from the package, which lets\n * callers short-circuit before parsing JSX.\n */\nexport const getImportedAliases = (sourceFile: ts.SourceFile, packageName: string): Record<string, string> | null => {\n  const result: Record<string, string> = {};\n  let found = false;\n\n  for (const stmt of sourceFile.statements) {\n    if (!ts.isImportDeclaration(stmt)) continue;\n    const moduleSpecifier = stmt.moduleSpecifier;\n    if (!ts.isStringLiteral(moduleSpecifier)) continue;\n    if (moduleSpecifier.text !== packageName) continue;\n\n    const namedBindings = stmt.importClause?.namedBindings;\n    if (namedBindings === undefined || !ts.isNamedImports(namedBindings)) continue;\n\n    for (const element of namedBindings.elements) {\n      const localName = element.name.text;\n      const importedName = element.propertyName?.text ?? localName;\n      result[localName] = importedName;\n      found = true;\n    }\n  }\n\n  return found ? result : null;\n};\n\n/**\n * Returns the local alias used in this file for `originalName` when imported\n * from `packageName`, or `null` if the component is not imported.\n */\nexport const getLocalAliasFor = (\n  sourceFile: ts.SourceFile,\n  packageName: string,\n  originalName: string\n): string | null => {\n  const aliases = getImportedAliases(sourceFile, packageName);\n  if (aliases === null) return null;\n  for (const [local, original] of Object.entries(aliases)) {\n    if (original === originalName) return local;\n  }\n  return null;\n};\n\nexport type JsxElementMatch = {\n  /** The opening JSX element (the one carrying the attributes). */\n  openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement;\n  /** The full element including children, or the self-closing element. */\n  element: ts.JsxElement | ts.JsxSelfClosingElement;\n};\n\n/**\n * Finds every JSX element whose tag name resolves to one of `tagNames`\n * (typically the local aliases returned by {@link getImportedAliases}).\n *\n * The result intentionally includes both opening and full elements so callers\n * can manipulate attributes (via `openingElement`) or wrap/replace the whole\n * element (via `element`).\n */\nexport const findJsxElements = (\n  sourceFile: ts.SourceFile,\n  tagNames: ReadonlyArray<string>\n): ReadonlyArray<JsxElementMatch> => {\n  const matches: Array<JsxElementMatch> = [];\n  const tagSet = new Set(tagNames);\n\n  const visit = (node: ts.Node): void => {\n    if (ts.isJsxSelfClosingElement(node)) {\n      if (ts.isIdentifier(node.tagName) && tagSet.has(node.tagName.text)) {\n        matches.push({ openingElement: node, element: node });\n      }\n    } else if (ts.isJsxElement(node)) {\n      const opening = node.openingElement;\n      if (ts.isIdentifier(opening.tagName) && tagSet.has(opening.tagName.text)) {\n        matches.push({ openingElement: opening, element: node });\n      }\n    }\n    ts.forEachChild(node, visit);\n  };\n\n  visit(sourceFile);\n  return matches;\n};\n\n/**\n * Looks up a named JSX attribute on the opening element. Returns `null` when\n * the attribute is missing or part of a spread attribute (which we cannot\n * statically inspect).\n */\nexport const findJsxAttribute = (\n  openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement,\n  attributeName: string\n): ts.JsxAttribute | null => {\n  for (const attr of openingElement.attributes.properties) {\n    if (!ts.isJsxAttribute(attr)) continue;\n    if (!ts.isIdentifier(attr.name)) continue;\n    if (attr.name.text === attributeName) return attr;\n  }\n  return null;\n};\n\n/**\n * `true` when the element forwards a spread expression such as `{...rest}`,\n * which means we can't be sure which attributes are actually set.\n */\nexport const hasSpreadAttribute = (openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement): boolean => {\n  return openingElement.attributes.properties.some(prop => ts.isJsxSpreadAttribute(prop));\n};\n\n/**\n * Parses the file as TSX so JSX is recognised. We do not need a full program\n * here; tsquery's `ast` helper produces a script-kind source file which loses\n * JSX context, so we go through `createSourceFile` directly.\n */\nexport const parseTsx = (content: string, fileName = \"file.tsx\"): ts.SourceFile =>\n  ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);\n\n/** Re-exported for codemods that need direct AST queries. */\nexport { tsquery };\n\n/**\n * Helper for codemods to log a one-line summary at the end of a run. Migration\n * runners aggregate logs per migration, so this keeps output focused.\n */\nexport const logSummary = (migrationName: string, touched: number, manualReviewNeeded?: number): void => {\n  if (touched === 0) {\n    logger.info(`  ${migrationName}: no files changed`);\n    return;\n  }\n  const reviewSuffix =\n    manualReviewNeeded !== undefined && manualReviewNeeded > 0\n      ? ` (${manualReviewNeeded} location(s) need manual review)`\n      : \"\";\n  logger.info(`  ${migrationName}: updated ${touched} file(s)${reviewSuffix}`);\n};\n\n/**\n * Inserts an attribute string immediately after the tag name (so the new\n * attribute appears first). Returns the resulting source content.\n *\n * The added attribute is rendered verbatim, so callers are responsible for\n * including the leading space (e.g. ` title=\"Close\"`).\n */\nexport const insertAttributeIntoOpeningTag = (\n  content: string,\n  openingElement: ts.JsxOpeningElement | ts.JsxSelfClosingElement,\n  attributeText: string\n): string => {\n  const tagName = openingElement.tagName;\n  const insertPos = tagName.getEnd();\n  return content.slice(0, insertPos) + ` ${attributeText}` + content.slice(insertPos);\n};\n"]}

package/migrations/v2-0-0/actionbutton-add-title.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actionButtonAddTitle = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const ts = tslib_1.__importStar(require("typescript"));
+const jsx_utils_1 = require("../utils/jsx-utils");
+const PACKAGE_NAME = "@trackunit/react-form-components";
+const COMPONENT_NAME = "ActionButton";
+const ACTION_TYPE_TO_TITLE = {
+    COPY: "Copy value",
+    EDIT: "Edit value",
+    EMAIL: "Send email",
+    PHONE_NUMBER: "Call number",
+    WEB_ADDRESS: "Open link",
+};
+const DEFAULT_TITLE = "Action";
+const resolveTitleForType = (typeAttr) => {
+    if (typeAttr === null)
+        return DEFAULT_TITLE;
+    const initializer = typeAttr.initializer;
+    if (initializer === undefined)
+        return DEFAULT_TITLE;
+    if (ts.isStringLiteral(initializer)) {
+        return ACTION_TYPE_TO_TITLE[initializer.text] ?? DEFAULT_TITLE;
+    }
+    return DEFAULT_TITLE;
+};
+const transformActionButtonUsage = (filePath, content) => {
+    const sourceFile = (0, jsx_utils_1.parseTsx)(content, filePath);
+    const aliases = (0, jsx_utils_1.getImportedAliases)(sourceFile, PACKAGE_NAME);
+    if (aliases === null)
+        return null;
+    const localAlias = Object.entries(aliases).find(([, name]) => name === COMPONENT_NAME)?.[0];
+    if (localAlias === undefined)
+        return null;
+    const matches = (0, jsx_utils_1.findJsxElements)(sourceFile, [localAlias]);
+    if (matches.length === 0)
+        return null;
+    const edits = [];
+    for (const { openingElement } of matches) {
+        if ((0, jsx_utils_1.hasSpreadAttribute)(openingElement))
+            continue;
+        if ((0, jsx_utils_1.findJsxAttribute)(openingElement, "title") !== null)
+            continue;
+        const typeAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "type");
+        const title = resolveTitleForType(typeAttr);
+        edits.push({
+            offset: openingElement.tagName.getEnd(),
+            text: ` title="${title}"`,
+        });
+    }
+    if (edits.length === 0)
+        return null;
+    edits.sort((a, b) => (a.offset === b.offset ? 0 : b.offset - a.offset));
+    let updated = content;
+    for (const { offset, text } of edits) {
+        updated = updated.slice(0, offset) + text + updated.slice(offset);
+    }
+    return updated;
+};
+/**
+ * Adds the now-required `title` prop to `<ActionButton>` usages that don't
+ * already provide one. The default value is derived from the `type` prop when
+ * possible (e.g. `COPY` → "Copy value"); consumers should replace the
+ * placeholders with their own localized strings.
+ */
+const actionButtonAddTitle = (tree) => {
+    const touched = (0, jsx_utils_1.visitTsxFiles)(tree, "ActionButton", transformActionButtonUsage);
+    (0, jsx_utils_1.logSummary)("actionbutton-add-title", touched);
+    if (touched > 0) {
+        devkit_1.logger.info(`  Replace placeholder ActionButton titles with your own localized strings.`);
+    }
+};
+exports.actionButtonAddTitle = actionButtonAddTitle;
+exports.default = exports.actionButtonAddTitle;
+//# sourceMappingURL=actionbutton-add-title.js.map

package/migrations/v2-0-0/actionbutton-add-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionbutton-add-title.js","sourceRoot":"","sources":["../../../../../../libs/react/form-components/migrations/v2-0-0/actionbutton-add-title.ts"],"names":[],"mappings":"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","sourcesContent":["import { type Tree, logger } from \"@nx/devkit\";\nimport * as ts from \"typescript\";\nimport {\n  findJsxAttribute,\n  findJsxElements,\n  getImportedAliases,\n  hasSpreadAttribute,\n  logSummary,\n  parseTsx,\n  visitTsxFiles,\n} from \"../utils/jsx-utils\";\n\nconst PACKAGE_NAME = \"@trackunit/react-form-components\";\nconst COMPONENT_NAME = \"ActionButton\";\n\nconst ACTION_TYPE_TO_TITLE: Record<string, string> = {\n  COPY: \"Copy value\",\n  EDIT: \"Edit value\",\n  EMAIL: \"Send email\",\n  PHONE_NUMBER: \"Call number\",\n  WEB_ADDRESS: \"Open link\",\n};\n\nconst DEFAULT_TITLE = \"Action\";\n\nconst resolveTitleForType = (typeAttr: ts.JsxAttribute | null): string => {\n  if (typeAttr === null) return DEFAULT_TITLE;\n  const initializer = typeAttr.initializer;\n  if (initializer === undefined) return DEFAULT_TITLE;\n  if (ts.isStringLiteral(initializer)) {\n    return ACTION_TYPE_TO_TITLE[initializer.text] ?? DEFAULT_TITLE;\n  }\n  return DEFAULT_TITLE;\n};\n\nconst transformActionButtonUsage = (filePath: string, content: string): string | null => {\n  const sourceFile = parseTsx(content, filePath);\n\n  const aliases = getImportedAliases(sourceFile, PACKAGE_NAME);\n  if (aliases === null) return null;\n\n  const localAlias = Object.entries(aliases).find(([, name]) => name === COMPONENT_NAME)?.[0];\n  if (localAlias === undefined) return null;\n\n  const matches = findJsxElements(sourceFile, [localAlias]);\n  if (matches.length === 0) return null;\n\n  type Edit = { offset: number; text: string };\n  const edits: Array<Edit> = [];\n\n  for (const { openingElement } of matches) {\n    if (hasSpreadAttribute(openingElement)) continue;\n    if (findJsxAttribute(openingElement, \"title\") !== null) continue;\n\n    const typeAttr = findJsxAttribute(openingElement, \"type\");\n    const title = resolveTitleForType(typeAttr);\n    edits.push({\n      offset: openingElement.tagName.getEnd(),\n      text: ` title=\"${title}\"`,\n    });\n  }\n\n  if (edits.length === 0) return null;\n\n  edits.sort((a, b) => (a.offset === b.offset ? 0 : b.offset - a.offset));\n\n  let updated = content;\n  for (const { offset, text } of edits) {\n    updated = updated.slice(0, offset) + text + updated.slice(offset);\n  }\n  return updated;\n};\n\n/**\n * Adds the now-required `title` prop to `<ActionButton>` usages that don't\n * already provide one. The default value is derived from the `type` prop when\n * possible (e.g. `COPY` → \"Copy value\"); consumers should replace the\n * placeholders with their own localized strings.\n */\nexport const actionButtonAddTitle = (tree: Tree): void => {\n  const touched = visitTsxFiles(tree, \"ActionButton\", transformActionButtonUsage);\n  logSummary(\"actionbutton-add-title\", touched);\n  if (touched > 0) {\n    logger.info(`  Replace placeholder ActionButton titles with your own localized strings.`);\n  }\n};\n\nexport default actionButtonAddTitle;\n"]}

package/migrations.json

@@ -0,0 +1,9 @@
+{
+  "generators": {
+    "v2-0-0-actionbutton-add-title": {
+      "version": "2.0.0",
+      "description": "Add the now-required title prop to ActionButton usages, defaulting to a sensible English string per action type.",
+      "implementation": "./migrations/v2-0-0/actionbutton-add-title"
+    }
+  }
+}

package/package.json

@@ -1,25 +1,26 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.25.12",
+  "version": "1.26.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
+  "migrations": "./migrations.json",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.13.4",
+    "@trackunit/date-and-time-utils": "1.13.5",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.13.4",
-    "@trackunit/react-components": "1.24.7",
-    "@trackunit/ui-icons": "1.13.4",
-    "@trackunit/shared-utils": "1.15.4",
-    "@trackunit/ui-design-tokens": "1.13.4",
-    "@trackunit/i18n-library-translation": "1.21.8",
+    "@trackunit/css-class-variance-utilities": "1.13.5",
+    "@trackunit/react-components": "1.25.0",
+    "@trackunit/ui-icons": "1.13.5",
+    "@trackunit/shared-utils": "1.15.5",
+    "@trackunit/ui-design-tokens": "1.13.5",
+    "@trackunit/i18n-library-translation": "1.22.0",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,7 +1,7 @@
 import { ButtonCommonProps, CommonProps, Refable, type Styleable } from "@trackunit/react-components";
-import { RefObject } from "react";
+import { ReactElement, RefObject } from "react";
 export type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY" | "EDIT";
-interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps, Refable<HTMLDivElement>, Styleable {
+interface AbstractActionButtonProps extends Omit<ButtonCommonProps, "title">, CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The type of action performed when clicking the button.
      */
@@ -10,6 +10,10 @@ interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps, Refa
      * The value to be passed into the button.
      */
     value?: string | RefObject<HTMLInputElement | null> | null;
+    /**
+     * The title of the action button.
+     */
+    title: string;
 }
 interface GenericActionButtonProps extends AbstractActionButtonProps {
     /**
@@ -48,5 +52,5 @@ type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps | Edit
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-export declare const ActionButton: ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, style, ref, }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionButton: ({ type, value, "data-testid": dataTestId, size, disabled, className, title, style, ref, }: ActionButtonProps) => ReactElement;
 export {};

package/src/components/BaseInput/components/GenericActionsRenderer.d.ts

@@ -8,5 +8,8 @@ type GenericActionsRendererProps = {
     innerRef: RefObject<HTMLInputElement | null>;
     tooltipLabel?: string;
 };
+/**
+ *
+ */
 export declare const GenericActionsRenderer: ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }: GenericActionsRendererProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/components/BaseSelect/custom-components/MultiValue.d.ts

@@ -8,11 +8,12 @@ type MultiValueProps<TOption> = {
     disabled: boolean;
     fieldSize: FormComponentSizes;
     getOptionPrefix?: (option: TOption) => ReactNode;
+    removeTagLabel: string;
     ref: (el: HTMLDivElement | null) => void;
 } & CommonProps;
 /**
  * Internal component for rendering multi-select values with measurement support.
  * Uses the measurement state to determine if the value should be displayed or hidden based on available width.
  */
-export declare const MultiValue: <TOption>({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, ref, "data-testid": dataTestId, }: MultiValueProps<TOption>) => ReactElement | null;
+export declare const MultiValue: <TOption>({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, removeTagLabel, ref, "data-testid": dataTestId, }: MultiValueProps<TOption>) => ReactElement | null;
 export {};

package/src/components/EmailField/EmailBaseInput/EmailBaseInput.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { BaseInputProps } from "../../BaseInput/BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface EmailBaseInputProps extends BaseInputExposedProps {
@@ -21,5 +22,5 @@ export interface EmailBaseInputProps extends BaseInputExposedProps {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-export declare const EmailBaseInput: ({ fieldSize, disabled, "data-testid": dataTestId, isInvalid, onChange, disableAction, ref, ...rest }: EmailBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmailBaseInput: ({ fieldSize, disabled, "data-testid": dataTestId, isInvalid, onChange, disableAction, ref, ...rest }: EmailBaseInputProps) => ReactElement;
 export {};

package/src/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -38,6 +38,10 @@ export interface ToggleSwitchProps extends CommonProps, MappedOmit<InputHTMLAttr
      * Prevents the native checkbox toggle behavior of the toggle switch.
      */
     preventDefaultOnClick?: boolean;
+    /**
+     * Tooltip label for the toggle switch.
+     */
+    tooltipLabel?: string;
 }
 /**
  * The `<ToggleSwitch>` is a low-level checkbox input wrapper with `role="switch"`.
@@ -93,6 +97,6 @@ export interface ToggleSwitchProps extends CommonProps, MappedOmit<InputHTMLAttr
  * @returns {ReactElement} ToggleSwitch component
  */
 export declare const ToggleSwitch: {
-    ({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId, showInputFocus, toggled, size, tabIndex, readOnly, disabled, ref, ...rest }: ToggleSwitchProps): ReactElement;
+    ({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId, showInputFocus, toggled, size, tabIndex, readOnly, disabled, tooltipLabel, ref, ...rest }: ToggleSwitchProps): ReactElement;
     displayName: string;
 };

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dateField.actions.apply" | "dateField.actions.cancel" | "dateField.actions.clear" | "dateField.openPicker.ariaLabel" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dateField.actions.apply" | "dateField.actions.cancel" | "dateField.actions.clear" | "dateField.openPicker.ariaLabel" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
+export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dateField.actions.apply" | "dateField.actions.cancel" | "dateField.actions.clear" | "dateField.openPicker.ariaLabel" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "emailField.sendEmailAction.label" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "passwordField.tooltip.hide" | "passwordField.tooltip.show" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "phoneField.phoneNumber.label" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.multiValue.remove" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED" | "urlField.url.label">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dateField.actions.apply" | "dateField.actions.cancel" | "dateField.actions.clear" | "dateField.openPicker.ariaLabel" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "emailField.sendEmailAction.label" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "passwordField.tooltip.hide" | "passwordField.tooltip.show" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "phoneField.phoneNumber.label" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.multiValue.remove" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED" | "urlField.url.label">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };