@trackunit/react-form-components 1.18.2 → 1.18.4

package/index.cjs.js

@@ -319,7 +319,7 @@ const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-ce
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, ref, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, ref, }) => {
     const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -361,7 +361,7 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled,
     return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, 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" }) }));
 };
 
-const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
+const GenericActionsRenderer = ({ genericAction = undefined, disabled, fieldSize = undefined, innerRef, tooltipLabel, }) => {
     const [t] = useTranslation();
     if (!genericAction) {
         return null;
@@ -692,7 +692,7 @@ const cvaTextAreaBaseInput = cssClassVarianceUtilities.cvaMerge([
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
  */
-const TextAreaBaseInput = ({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, "data-testid": dataTestId, isInvalid, className, ref, ...rest }) => {
+const TextAreaBaseInput = ({ id, name, value, rows, disabled = false, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, "data-testid": dataTestId, isInvalid = false, className, ref, ...rest }) => {
     return (jsxRuntime.jsx("textarea", { className: cvaTextAreaBaseInput({ className, resize, invalid: isInvalid, disabled }), defaultValue: defaultValue, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, ref: ref, required: required, rows: rows, tabIndex: tabIndex, value: value, ...rest, "data-testid": dataTestId, onChange: onChange }));
 };
 
@@ -2029,7 +2029,7 @@ const CreatableSelect = (props) => {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, ref, }) => {
+const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled = false, isInvalid = false, ref, }) => {
     return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, children: children }));
 };
 
@@ -2120,9 +2120,9 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
  * ```
  * @param {CheckboxFieldProps} props - The props for the CheckboxField component
  */
-const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, "data-testid": dataTestId, checkboxLabel, onChange, ref, ...rest }) => {
+const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, "data-testid": dataTestId, checkboxLabel, onChange, ref, disabled = false, readOnly = false, required = false, ...rest }) => {
     const htmlForId = id ? id : "checkboxField-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(Checkbox, { checked: checked, className: className, "data-testid": dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
+    return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: required ? !(disabled || readOnly) : false, tip: tip, children: jsxRuntime.jsx(Checkbox, { checked: checked, className: className, "data-testid": dataTestId, disabled: disabled, id: htmlForId, label: checkboxLabel, onChange: onChange, readOnly: readOnly, ref: ref, required: required, ...rest }) }));
 };
 CheckboxField.displayName = "CheckboxField";
 
@@ -2232,7 +2232,7 @@ const isValidHEXColor = (value) => {
  * />
  * ```
  */
-const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning, inputClassName, ref, ...inputProps }) => {
+const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid = undefined, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning = false, inputClassName, ref, required = false, ...inputProps }) => {
     const renderAsDisabled = Boolean(disabled);
     const renderAsReadonly = Boolean(readOnly);
     const htmlForId = react.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
@@ -2242,7 +2242,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
     // Internal state for color value
     const [innerValue, setInnerValue] = react.useState(propValue ?? defaultValue ?? "");
     const [hasBeenBlurred, setHasBeenBlurred] = react.useState(false);
-    const errorType = react.useMemo(() => validateColorCode(innerValue, inputProps.required), [inputProps.required, innerValue]);
+    const errorType = react.useMemo(() => validateColorCode(innerValue, required), [required, innerValue]);
     const error = react.useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     // Derive renderAsInvalid from props and internal validation
     const renderAsInvalid = react.useMemo(() => {
@@ -2275,7 +2275,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
         setHasBeenBlurred(true);
         onBlur?.(event);
     }, [onBlur]);
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: inputProps.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput$1({
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput$1({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
@@ -2284,7 +2284,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
                 className,
             }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: mergedRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
                         className: tailwindMerge.twMerge("focus-visible:outline-hidden px-1", inputClassName),
-                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue, ...inputProps }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, required: required, type: "text", value: innerValue, ...inputProps }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 };
 ColorField.displayName = "ColorField";
 
@@ -2336,10 +2336,10 @@ ColorField.displayName = "ColorField";
  * };
  * ```
  */
-const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, ...rest }) => {
+const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, className, defaultValue, "data-testid": dataTestId, ref, required = false, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "dateField-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, required: required, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 DateField.displayName = "DateField";
 
@@ -2618,14 +2618,14 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid":
  * />
  * ```
  */
-const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
+const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value, onChange, onBlur, isInvalid = false, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "emailField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (typeof value === "string" && value !== "" && !validateEmailAddress(value)) || isInvalid);
-    const errorType = react.useMemo(() => validateEmailId(innerValue ?? "", rest.required), [rest.required, innerValue]);
+    const errorType = react.useMemo(() => validateEmailId(innerValue ?? "", required), [required, innerValue]);
     const error = react.useMemo(() => (errorType ? t(`emailField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
@@ -2639,7 +2639,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: rest.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, 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, { "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 }) }));
 };
 EmailField.displayName = "EmailField";
 
@@ -2660,7 +2660,7 @@ const IGNORED_RS_ACTIONS = new Set(["set-value", "input-blur", "menu-close"]);
  * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = undefined, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
     const [inputValue, setInputValue] = react.useState("");
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = react.useRef(null);
@@ -2896,15 +2896,15 @@ const validateNumber = (number, required = false, min, max) => {
  * };
  * ```
  */
-const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
+const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "numberField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = react.useState(() => {
         return Number(value?.toString()) || Number(defaultValue?.toString());
     });
     const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!validateNumber(value?.toString(), rest.required, rest.min, rest.max));
-    const errorType = react.useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
+        !!validateNumber(value?.toString(), required, rest.min, rest.max));
+    const errorType = react.useMemo(() => validateNumber(innerValue, required, rest.min, rest.max), [innerValue, rest.max, rest.min, required]);
     const error = react.useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
@@ -2924,21 +2924,21 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         const newValue = event.target.value;
         setInnerValue(newValue.toString());
         // for the case when a custom error message is provided
-        if (errorMessage && !validateNumber(newValue, rest.required, rest.min, rest.max)) {
+        if (errorMessage && !validateNumber(newValue, required, rest.min, rest.max)) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
         else {
-            setRenderAsInvalid(!!validateNumber(newValue, rest.required, rest.min, rest.max));
+            setRenderAsInvalid(!!validateNumber(newValue, required, rest.min, rest.max));
         }
         onBlur?.(event);
-    }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
+    }, [errorMessage, onBlur, rest.max, rest.min, required]);
     const handleChange = react.useCallback((event) => {
         setInnerValue(event.target.value);
         if (onChange) {
             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: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, 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(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 NumberField.displayName = "NumberField";
 
@@ -3021,7 +3021,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([], {
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, "data-testid": dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled = false, id, value, className, contentClassName, "data-testid": dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
     const htmlForId = id ?? "option-card-" + sharedUtils.uuidv4();
     const subContent = react.useMemo(() => (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading !== undefined && subheading !== null ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description !== undefined && description !== null ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
     return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: layout !== "compact" || ((subheading === undefined || subheading === null) && (description === undefined || description === null)), label: subContent, mode: "light", placement: "top", children: jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: cvaInput(), "data-testid": dataTestId ? `${dataTestId}-option-card` : undefined, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": dataTestId ? `${dataTestId}-option-card-label` : undefined, htmlFor: htmlForId, children: [disabled && icon && !customImage
@@ -3035,7 +3035,7 @@ OptionCard.displayName = "OptionCard";
  *
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
+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" }));
 };
@@ -3096,13 +3096,13 @@ const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
  * />
  * ```
  */
-const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
+const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid = undefined, maxLength, onChange, className, value, "data-testid": dataTestId, ref, required = false, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "passwordField-" + sharedUtils.uuidv4();
     const handleChange = react.useCallback((event) => {
         onChange?.(event);
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, "data-testid": dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, "data-testid": dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, required: required, value: value }) }));
 };
 PasswordField.displayName = "PasswordField";
 
@@ -3204,15 +3204,15 @@ const phoneErrorMessage = (phoneNumber, required) => {
  * />
  * ```
  */
-const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, ...rest }) => {
+const PhoneField = ({ label, id, tip, helpText, isInvalid = undefined, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "phoneField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? undefined;
     });
     const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!phoneErrorMessage(value?.toString(), rest.required));
-    const errorType = react.useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
+        !!phoneErrorMessage(value?.toString(), required));
+    const errorType = react.useMemo(() => phoneErrorMessage(innerValue, required), [innerValue, required]);
     const error = react.useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
@@ -3230,15 +3230,15 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         const newValue = event.target.value;
         setInnerValue(newValue);
         // for the case when a custom error message is provided
-        if (errorMessage && !phoneErrorMessage(newValue.toString(), rest.required)) {
+        if (errorMessage && !phoneErrorMessage(newValue.toString(), required)) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
         else {
-            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
+            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), required));
         }
         onBlur?.(event);
-    }, [errorMessage, onBlur, rest.required]);
-    return (jsxRuntime.jsx(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
+    }, [errorMessage, onBlur, required]);
+    return (jsxRuntime.jsx(FormGroup, { className: className, "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(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, required: required, value: value, ...rest }) }));
 };
 PhoneField.displayName = "PhoneField";
 
@@ -4003,7 +4003,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
  * @param {TextAreaFieldProps} props - The props for the TextAreaField component
  * @returns {ReactElement} TextAreaField component
  */
-const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
+const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid = false, maxLength, onChange, className, value, "data-testid": dataTestId, ref, disabled = false, readOnly = false, required = false, ...rest }) => {
     const [valueLength, setValueLength] = react.useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + sharedUtils.uuidv4();
@@ -4014,7 +4014,7 @@ const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
         }
     }, [onChange]);
     return (jsxRuntime.jsx(FormGroup, { className: tailwindMerge.twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ??
-            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsx(TextAreaBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: "h-auto", "data-testid": dataTestId, onChange: handleChange }) }));
+            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(disabled || readOnly) : false, tip: tip, children: jsxRuntime.jsx(TextAreaBaseInput, { "aria-labelledby": htmlForId + "-label", disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, readOnly: readOnly, ref: ref, required: required, value: value, ...rest, className: "h-auto", "data-testid": dataTestId, onChange: handleChange }) }));
 };
 TextAreaField.displayName = "TextAreaField";
 
@@ -4076,7 +4076,7 @@ TextAreaField.displayName = "TextAreaField";
  * };
  * ```
  */
-const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, ...rest }) => {
+const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid = undefined, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning = false, ref, required = false, ...rest }) => {
     const [valueLength, setValueLength] = react.useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + sharedUtils.uuidv4();
@@ -4087,7 +4087,7 @@ const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvali
         }
     }, [onChange]);
     return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ??
-            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(TextBaseInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, "data-testid": dataTestId, onChange: handleChange }) }));
+            (typeof maxLength === "number" && jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(TextBaseInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId, onChange: handleChange }) }));
 };
 TextField.displayName = "TextField";
 
@@ -4130,7 +4130,7 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
+const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid = undefined, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + sharedUtils.uuidv4();
     return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
@@ -4262,7 +4262,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, className, "data-testid": dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, 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, ref, ...rest }) => {
     const localInputRef = react.useRef(null);
     const mergedRef = reactComponents.useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
@@ -4369,13 +4369,13 @@ ToggleSwitch.displayName = "ToggleSwitch";
  * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
  * @returns {ReactElement} ToggleSwitchOption component
  */
-const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, ...rest }) => {
+const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, disabled = false, readOnly = false, ...rest }) => {
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
-    return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, ref: ref, tabIndex: -1, children: [jsxRuntime.jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsxRuntime.jsx("span", { className: cvaLabel({
-                            disabled: rest.disabled || rest.readOnly,
+    return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, ref: ref, tabIndex: -1, children: [jsxRuntime.jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, disabled: disabled, id: `${id}-toggle-switch`, readOnly: readOnly, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsxRuntime.jsx("span", { className: cvaLabel({
+                            disabled: disabled || readOnly,
                             className: "select-none",
-                        }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }) }, `${id}-label-tooltip`), suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description !== undefined ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("div", { className: cvaBinaryControlDescriptionTooltip(), children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }) }, `${id}-description-tooltip`)) : null] }));
+                        }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }) }, `${id}-label-tooltip`), suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description !== undefined ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("div", { className: cvaBinaryControlDescriptionTooltip(), children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: disabled || readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }) }, `${id}-description-tooltip`)) : null] }));
 };
 ToggleSwitchOption.displayName = "ToggleSwitchOption";
 
@@ -4474,10 +4474,10 @@ UploadInput.displayName = "UploadInput";
  * />
  * ```
  */
-const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, "data-testid": dataTestId, ref, ...rest }) => {
+const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid = false, className, value, "data-testid": dataTestId, ref, disabled = false, required = false, ...rest }) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "uploadField-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(disabled || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, required: required, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 UploadField.displayName = "UploadField";
 
@@ -4572,22 +4572,22 @@ const UrlBaseInput = ({ isInvalid = false, "data-testid": dataTestId, disabled =
  * />
  * ```
  */
-const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, isInvalid = false, value, onBlur, ref, ...rest }) => {
+const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, isInvalid = false, value, onBlur, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "urlField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (typeof value === "string" && value !== "" && !validateUrlAddress(value)) || isInvalid);
-    const errorType = react.useMemo(() => validateUrl(innerValue ?? "", rest.required), [rest.required, innerValue]);
+    const errorType = react.useMemo(() => validateUrl(innerValue ?? "", required), [required, innerValue]);
     const error = react.useMemo(() => (errorType ? t(`urlField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
-        setRenderAsInvalid(!!validateUrl(newValue, rest.required));
+        setRenderAsInvalid(!!validateUrl(newValue, required));
         onBlur?.(event);
-    }, [onBlur, rest.required]);
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.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, value: value ?? defaultValue, ...rest, className: className, "data-testid": dataTestId }) }));
+    }, [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 }) }));
 };
 UrlField.displayName = "UrlField";
 

package/index.esm.js

@@ -318,7 +318,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, ref, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, ref, }) => {
     const [, copyToClipboard] = useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -360,7 +360,7 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled,
     return (jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, 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" }) }));
 };
 
-const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
+const GenericActionsRenderer = ({ genericAction = undefined, disabled, fieldSize = undefined, innerRef, tooltipLabel, }) => {
     const [t] = useTranslation();
     if (!genericAction) {
         return null;
@@ -691,7 +691,7 @@ const cvaTextAreaBaseInput = cvaMerge([
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
  */
-const TextAreaBaseInput = ({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, "data-testid": dataTestId, isInvalid, className, ref, ...rest }) => {
+const TextAreaBaseInput = ({ id, name, value, rows, disabled = false, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, "data-testid": dataTestId, isInvalid = false, className, ref, ...rest }) => {
     return (jsx("textarea", { className: cvaTextAreaBaseInput({ className, resize, invalid: isInvalid, disabled }), defaultValue: defaultValue, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, ref: ref, required: required, rows: rows, tabIndex: tabIndex, value: value, ...rest, "data-testid": dataTestId, onChange: onChange }));
 };
 
@@ -2028,7 +2028,7 @@ const CreatableSelect = (props) => {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, ref, }) => {
+const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled = false, isInvalid = false, ref, }) => {
     return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, children: children }));
 };
 
@@ -2119,9 +2119,9 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
  * ```
  * @param {CheckboxFieldProps} props - The props for the CheckboxField component
  */
-const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, "data-testid": dataTestId, checkboxLabel, onChange, ref, ...rest }) => {
+const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, "data-testid": dataTestId, checkboxLabel, onChange, ref, disabled = false, readOnly = false, required = false, ...rest }) => {
     const htmlForId = id ? id : "checkboxField-" + uuidv4();
-    return (jsx(FormGroup, { className: "flex flex-col gap-1", "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(Checkbox, { checked: checked, className: className, "data-testid": dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
+    return (jsx(FormGroup, { className: "flex flex-col gap-1", "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: required ? !(disabled || readOnly) : false, tip: tip, children: jsx(Checkbox, { checked: checked, className: className, "data-testid": dataTestId, disabled: disabled, id: htmlForId, label: checkboxLabel, onChange: onChange, readOnly: readOnly, ref: ref, required: required, ...rest }) }));
 };
 CheckboxField.displayName = "CheckboxField";
 
@@ -2231,7 +2231,7 @@ const isValidHEXColor = (value) => {
  * />
  * ```
  */
-const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning, inputClassName, ref, ...inputProps }) => {
+const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid = undefined, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning = false, inputClassName, ref, required = false, ...inputProps }) => {
     const renderAsDisabled = Boolean(disabled);
     const renderAsReadonly = Boolean(readOnly);
     const htmlForId = useMemo(() => (id ? id : "colorField-" + uuidv4()), [id]);
@@ -2241,7 +2241,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
     // Internal state for color value
     const [innerValue, setInnerValue] = useState(propValue ?? defaultValue ?? "");
     const [hasBeenBlurred, setHasBeenBlurred] = useState(false);
-    const errorType = useMemo(() => validateColorCode(innerValue, inputProps.required), [inputProps.required, innerValue]);
+    const errorType = useMemo(() => validateColorCode(innerValue, required), [required, innerValue]);
     const error = useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     // Derive renderAsInvalid from props and internal validation
     const renderAsInvalid = useMemo(() => {
@@ -2274,7 +2274,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
         setHasBeenBlurred(true);
         onBlur?.(event);
     }, [onBlur]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: inputProps.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput$1({
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput$1({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
@@ -2283,7 +2283,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
                 className,
             }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: mergedRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
                         className: twMerge("focus-visible:outline-hidden px-1", inputClassName),
-                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue, ...inputProps }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, required: required, type: "text", value: innerValue, ...inputProps }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 };
 ColorField.displayName = "ColorField";
 
@@ -2335,10 +2335,10 @@ ColorField.displayName = "ColorField";
  * };
  * ```
  */
-const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, ...rest }) => {
+const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, className, defaultValue, "data-testid": dataTestId, ref, required = false, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "dateField-" + uuidv4();
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, required: required, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 DateField.displayName = "DateField";
 
@@ -2617,14 +2617,14 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid":
  * />
  * ```
  */
-const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
+const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value, onChange, onBlur, isInvalid = false, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "emailField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (typeof value === "string" && value !== "" && !validateEmailAddress(value)) || isInvalid);
-    const errorType = useMemo(() => validateEmailId(innerValue ?? "", rest.required), [rest.required, innerValue]);
+    const errorType = useMemo(() => validateEmailId(innerValue ?? "", required), [required, innerValue]);
     const error = useMemo(() => (errorType ? t(`emailField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = useCallback(event => {
         const newValue = event.target.value;
@@ -2638,7 +2638,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: rest.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, 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, { "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 }) }));
 };
 EmailField.displayName = "EmailField";
 
@@ -2659,7 +2659,7 @@ const IGNORED_RS_ACTIONS = new Set(["set-value", "input-blur", "menu-close"]);
  * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = undefined, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
     const [inputValue, setInputValue] = useState("");
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = useRef(null);
@@ -2895,15 +2895,15 @@ const validateNumber = (number, required = false, min, max) => {
  * };
  * ```
  */
-const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
+const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "numberField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         return Number(value?.toString()) || Number(defaultValue?.toString());
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!validateNumber(value?.toString(), rest.required, rest.min, rest.max));
-    const errorType = useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
+        !!validateNumber(value?.toString(), required, rest.min, rest.max));
+    const errorType = useMemo(() => validateNumber(innerValue, required, rest.min, rest.max), [innerValue, rest.max, rest.min, required]);
     const error = useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
@@ -2923,21 +2923,21 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         const newValue = event.target.value;
         setInnerValue(newValue.toString());
         // for the case when a custom error message is provided
-        if (errorMessage && !validateNumber(newValue, rest.required, rest.min, rest.max)) {
+        if (errorMessage && !validateNumber(newValue, required, rest.min, rest.max)) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
         else {
-            setRenderAsInvalid(!!validateNumber(newValue, rest.required, rest.min, rest.max));
+            setRenderAsInvalid(!!validateNumber(newValue, required, rest.min, rest.max));
         }
         onBlur?.(event);
-    }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
+    }, [errorMessage, onBlur, rest.max, rest.min, required]);
     const handleChange = useCallback((event) => {
         setInnerValue(event.target.value);
         if (onChange) {
             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: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, 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(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 NumberField.displayName = "NumberField";
 
@@ -3020,7 +3020,7 @@ const cvaTag = cvaMerge([], {
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, "data-testid": dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled = false, id, value, className, contentClassName, "data-testid": dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
     const htmlForId = id ?? "option-card-" + uuidv4();
     const subContent = useMemo(() => (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading !== undefined && subheading !== null ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description !== undefined && description !== null ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
     return (jsx(Tooltip, { disabled: layout !== "compact" || ((subheading === undefined || subheading === null) && (description === undefined || description === null)), label: subContent, mode: "light", placement: "top", children: jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: cvaInput(), "data-testid": dataTestId ? `${dataTestId}-option-card` : undefined, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": dataTestId ? `${dataTestId}-option-card-label` : undefined, htmlFor: htmlForId, children: [disabled && icon && !customImage
@@ -3034,7 +3034,7 @@ OptionCard.displayName = "OptionCard";
  *
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
+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" }));
 };
@@ -3095,13 +3095,13 @@ const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
  * />
  * ```
  */
-const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
+const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid = undefined, maxLength, onChange, className, value, "data-testid": dataTestId, ref, required = false, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "passwordField-" + uuidv4();
     const handleChange = useCallback((event) => {
         onChange?.(event);
     }, [onChange]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, "data-testid": dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, "data-testid": dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, required: required, value: value }) }));
 };
 PasswordField.displayName = "PasswordField";
 
@@ -3203,15 +3203,15 @@ const phoneErrorMessage = (phoneNumber, required) => {
  * />
  * ```
  */
-const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, ...rest }) => {
+const PhoneField = ({ label, id, tip, helpText, isInvalid = undefined, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "phoneField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? undefined;
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!phoneErrorMessage(value?.toString(), rest.required));
-    const errorType = useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
+        !!phoneErrorMessage(value?.toString(), required));
+    const errorType = useMemo(() => phoneErrorMessage(innerValue, required), [innerValue, required]);
     const error = useMemo(() => {
         // for the case when a custom error message is provided
         if (errorMessage) {
@@ -3229,15 +3229,15 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         const newValue = event.target.value;
         setInnerValue(newValue);
         // for the case when a custom error message is provided
-        if (errorMessage && !phoneErrorMessage(newValue.toString(), rest.required)) {
+        if (errorMessage && !phoneErrorMessage(newValue.toString(), required)) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
         else {
-            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
+            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), required));
         }
         onBlur?.(event);
-    }, [errorMessage, onBlur, rest.required]);
-    return (jsx(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
+    }, [errorMessage, onBlur, required]);
+    return (jsx(FormGroup, { className: className, "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(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, required: required, value: value, ...rest }) }));
 };
 PhoneField.displayName = "PhoneField";
 
@@ -4002,7 +4002,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
  * @param {TextAreaFieldProps} props - The props for the TextAreaField component
  * @returns {ReactElement} TextAreaField component
  */
-const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
+const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid = false, maxLength, onChange, className, value, "data-testid": dataTestId, ref, disabled = false, readOnly = false, required = false, ...rest }) => {
     const [valueLength, setValueLength] = useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + uuidv4();
@@ -4013,7 +4013,7 @@ const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
         }
     }, [onChange]);
     return (jsx(FormGroup, { className: twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ??
-            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(TextAreaBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: "h-auto", "data-testid": dataTestId, onChange: handleChange }) }));
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(disabled || readOnly) : false, tip: tip, children: jsx(TextAreaBaseInput, { "aria-labelledby": htmlForId + "-label", disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, readOnly: readOnly, ref: ref, required: required, value: value, ...rest, className: "h-auto", "data-testid": dataTestId, onChange: handleChange }) }));
 };
 TextAreaField.displayName = "TextAreaField";
 
@@ -4075,7 +4075,7 @@ TextAreaField.displayName = "TextAreaField";
  * };
  * ```
  */
-const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, ...rest }) => {
+const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid = undefined, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning = false, ref, required = false, ...rest }) => {
     const [valueLength, setValueLength] = useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + uuidv4();
@@ -4086,7 +4086,7 @@ const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvali
         }
     }, [onChange]);
     return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ??
-            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(TextBaseInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, "data-testid": dataTestId, onChange: handleChange }) }));
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(TextBaseInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId, onChange: handleChange }) }));
 };
 TextField.displayName = "TextField";
 
@@ -4129,7 +4129,7 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
+const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid = undefined, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + uuidv4();
     return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, tip: tip, children: jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
@@ -4261,7 +4261,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, className, "data-testid": dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, 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, ref, ...rest }) => {
     const localInputRef = useRef(null);
     const mergedRef = useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
@@ -4368,13 +4368,13 @@ ToggleSwitch.displayName = "ToggleSwitch";
  * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
  * @returns {ReactElement} ToggleSwitchOption component
  */
-const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, ...rest }) => {
+const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ref, disabled = false, readOnly = false, ...rest }) => {
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
-    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, ref: ref, tabIndex: -1, children: [jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsx(Tooltip, { "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsx("span", { className: cvaLabel({
-                            disabled: rest.disabled || rest.readOnly,
+    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, ref: ref, tabIndex: -1, children: [jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, disabled: disabled, id: `${id}-toggle-switch`, readOnly: readOnly, ...rest }), jsx(Tooltip, { "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("div", { className: cvaBinaryControlLabelTooltip(), children: jsx("span", { className: cvaLabel({
+                            disabled: disabled || readOnly,
                             className: "select-none",
-                        }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }) }, `${id}-label-tooltip`), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description !== undefined ? (jsx(Tooltip, { "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("div", { className: cvaBinaryControlDescriptionTooltip(), children: jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }) }, `${id}-description-tooltip`)) : null] }));
+                        }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }) }, `${id}-label-tooltip`), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description !== undefined ? (jsx(Tooltip, { "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("div", { className: cvaBinaryControlDescriptionTooltip(), children: jsx("span", { className: cvaBinaryControlDescription({ disabled: disabled || readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }) }, `${id}-description-tooltip`)) : null] }));
 };
 ToggleSwitchOption.displayName = "ToggleSwitchOption";
 
@@ -4473,10 +4473,10 @@ UploadInput.displayName = "UploadInput";
  * />
  * ```
  */
-const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, "data-testid": dataTestId, ref, ...rest }) => {
+const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid = false, className, value, "data-testid": dataTestId, ref, disabled = false, required = false, ...rest }) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "uploadField-" + uuidv4();
-    return (jsx(FormGroup, { "data-testid": `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(disabled || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, required: required, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 UploadField.displayName = "UploadField";
 
@@ -4571,22 +4571,22 @@ const UrlBaseInput = ({ isInvalid = false, "data-testid": dataTestId, disabled =
  * />
  * ```
  */
-const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, isInvalid = false, value, onBlur, ref, ...rest }) => {
+const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, isInvalid = false, value, onBlur, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : "urlField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (typeof value === "string" && value !== "" && !validateUrlAddress(value)) || isInvalid);
-    const errorType = useMemo(() => validateUrl(innerValue ?? "", rest.required), [rest.required, innerValue]);
+    const errorType = useMemo(() => validateUrl(innerValue ?? "", required), [required, innerValue]);
     const error = useMemo(() => (errorType ? t(`urlField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
-        setRenderAsInvalid(!!validateUrl(newValue, rest.required));
+        setRenderAsInvalid(!!validateUrl(newValue, required));
         onBlur?.(event);
-    }, [onBlur, rest.required]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.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, value: value ?? defaultValue, ...rest, className: className, "data-testid": dataTestId }) }));
+    }, [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 }) }));
 };
 UrlField.displayName = "UrlField";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.18.2",
+  "version": "1.18.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,11 +14,11 @@
     "zod": "^3.23.8",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "1.11.77",
-    "@trackunit/react-components": "1.20.2",
+    "@trackunit/react-components": "1.20.4",
     "@trackunit/ui-icons": "1.11.73",
     "@trackunit/shared-utils": "1.13.77",
     "@trackunit/ui-design-tokens": "1.11.74",
-    "@trackunit/i18n-library-translation": "1.15.2",
+    "@trackunit/i18n-library-translation": "1.15.4",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/CheckboxField/CheckboxField.d.ts

@@ -40,7 +40,7 @@ export interface CheckboxFieldProps extends CheckboxProps, FormGroupExposedProps
  * @param {CheckboxFieldProps} props - The props for the CheckboxField component
  */
 export declare const CheckboxField: {
-    ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, "data-testid": dataTestId, checkboxLabel, onChange, ref, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, "data-testid": dataTestId, checkboxLabel, onChange, ref, disabled, readOnly, required, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/ColorField/ColorField.d.ts

@@ -54,7 +54,7 @@ export interface ColorFieldProps extends FormGroupExposedProps, ColorFieldBaseIn
  * ```
  */
 export declare const ColorField: {
-    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize, style, disabled, readOnly, isWarning, inputClassName, ref, ...inputProps }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize, style, disabled, readOnly, isWarning, inputClassName, ref, required, ...inputProps }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/DateField/DateField.d.ts

@@ -56,7 +56,7 @@ export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProp
  * ```
  */
 export declare const DateField: {
-    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, ...rest }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, required, ...rest }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -57,7 +57,7 @@ export interface EmailFieldProps extends FormGroupExposedProps, BaseInputProps {
  * ```
  */
 export declare const EmailField: {
-    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value, onChange, onBlur, isInvalid, ref, ...rest }: EmailFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value, onChange, onBlur, isInvalid, ref, required, ...rest }: EmailFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/NumberField/NumberField.d.ts

@@ -59,7 +59,7 @@ export interface NumberFieldProps extends NumberBaseInputProps, FormGroupExposed
  * ```
  */
 export declare const NumberField: {
-    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, ...rest }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required, ...rest }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/PasswordField/PasswordField.d.ts

@@ -64,7 +64,7 @@ export interface PasswordFieldProps extends Omit<PasswordBaseInputProps, "obfusc
  * ```
  */
 export declare const PasswordField: {
-    ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, required, ...rest }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/PhoneField/PhoneField.d.ts

@@ -56,7 +56,7 @@ export interface PhoneFieldProps extends FormGroupExposedProps, PhoneBaseInputPr
  * ```
  */
 export declare const PhoneField: {
-    ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, ...rest }: PhoneFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, required, ...rest }: PhoneFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/TextAreaField/TextAreaField.d.ts

@@ -66,7 +66,7 @@ export interface TextAreaFieldProps extends TextAreaBaseInputProps, FormGroupExp
  * @returns {ReactElement} TextAreaField component
  */
 export declare const TextAreaField: {
-    ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, disabled, readOnly, required, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/TextField/TextField.d.ts

@@ -71,7 +71,7 @@ export interface TextFieldProps extends TextBaseInputProps, FormGroupExposedProp
  * ```
  */
 export declare const TextField: {
-    ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, required, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/ToggleSwitchOption/ToggleSwitchOption.d.ts

@@ -79,6 +79,6 @@ export interface ToggleSwitchOptionProps extends Omit<ToggleSwitchProps, "ref">,
  * @returns {ReactElement} ToggleSwitchOption component
  */
 export declare const ToggleSwitchOption: {
-    ({ label, className, description, suffix, id, "data-testid": dataTestId, ref, ...rest }: ToggleSwitchOptionProps): ReactElement;
+    ({ label, className, description, suffix, id, "data-testid": dataTestId, ref, disabled, readOnly, ...rest }: ToggleSwitchOptionProps): ReactElement;
     displayName: string;
 };

package/src/components/UploadField/UploadField.d.ts

@@ -57,7 +57,7 @@ export interface UploadFieldProps extends UploadInputProps, FormGroupExposedProp
  * ```
  */
 export declare const UploadField: {
-    ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, "data-testid": dataTestId, ref, ...rest }: UploadFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, "data-testid": dataTestId, ref, disabled, required, ...rest }: UploadFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/src/components/UrlField/UrlField.d.ts

@@ -57,7 +57,7 @@ export interface UrlFieldProps extends FormGroupExposedProps, UrlBaseInputProps
  * ```
  */
 export declare const UrlField: {
-    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, isInvalid, value, onBlur, ref, ...rest }: UrlFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, isInvalid, value, onBlur, ref, required, ...rest }: UrlFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};