npm - @trackunit/react-form-components - Versions diffs - 1.15.8 → 1.15.10-alpha-ae1ff73fc64.0 - Mend

@trackunit/react-form-components 1.15.8 → 1.15.10-alpha-ae1ff73fc64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/index.cjs.js CHANGED Viewed

@@ -279,7 +279,7 @@ const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-cent
  * Renders the addon element if provided
  */
 const AddonRenderer = ({ addon, "data-testid": dataTestId, className, fieldSize, position, }) => {
-    if (!addon) {
+    if (addon === undefined || addon === null) {
         return null;
     }
     return (jsxRuntime.jsx("div", { className: cvaInputAddon({ size: fieldSize, position, className }), "data-testid": dataTestId ? `${dataTestId}-addon${stringTs.titleCase(position)}` : null, children: addon }));
@@ -407,8 +407,8 @@ const PrefixRenderer = ({ prefix, type, "data-testid": dataTestId, disabled, ref
         url: jsxRuntime.jsx(reactComponents.Icon, { name: "Link", size: "small" }),
     };
     // Decide what to show as prefix
-    const resolvedPrefix = prefix || (type && type !== "text" ? (defaultPrefixMap[type] ?? null) : null);
-    if (!resolvedPrefix) {
+    const resolvedPrefix = prefix ?? (type !== undefined && type !== "text" ? (defaultPrefixMap[type] ?? null) : null);
+    if (resolvedPrefix === null) {
         return null;
     }
     return (jsxRuntime.jsx("div", { className: cvaInputPrefix({ disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: ref, children: resolvedPrefix }));
@@ -417,7 +417,7 @@ const PrefixRenderer = ({ prefix, type, "data-testid": dataTestId, disabled, ref
 // Renders the suffix element or shows an icon if invalid/warning
 const SuffixRenderer = ({ suffix, isInvalid, isWarning, "data-testid": dataTestId, disabled, }) => {
     // If user provided suffix that's not identical to addonBefore, render it
-    if (suffix) {
+    if (suffix !== undefined && suffix !== null) {
         return (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                 disabled,
             }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }));
@@ -1595,13 +1595,8 @@ autoComplete, // see https://github.com/JedWatson/react-select/issues/758
                 return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...selectValueContainer, className: cvaSelectValueContainer({ className: selectValueContainer.className }), getStyles: getNoStyles, innerProps: {
                         ...selectValueContainer.innerProps,
                         ref: reactComponents.useMergeRefs([setValueContainerRef, selectValueContainer.innerProps?.ref]),
-                    }, children: selectValueContainer.isMulti ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getPlaceholderElement(selectValueContainer.children), currentWithCounter && !currentIsComplete ? (
-                            // Render the test-counter-tag in the beginning to make sure it's included in the calculation
-                            // will be removed when the calculation is complete
-                            jsxRuntime.jsx(CounterTag, { className: "invisible" // Is invisible because we're only putting it here to measure the width
-                                , "data-testid": "fake-multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setFakeCounterRef, totalCount: currentTotalCount })) : null, getMultiValueComponents(selectValueContainer.children), currentWithCounter && currentIsComplete ? (
-                            // This is the actual tag that will be visible in the UI
-                            jsxRuntime.jsx(CounterTag, { "data-testid": dataTestId ? `${dataTestId}-multiselect-counter` : "multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setCounterRef, totalCount: currentTotalCount })) : null, getInputComponent(selectValueContainer.children)] })) : (selectValueContainer.children) }));
+                    }, children: selectValueContainer.isMulti ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getPlaceholderElement(selectValueContainer.children), currentWithCounter && !currentIsComplete ? (jsxRuntime.jsx(CounterTag, { className: "invisible" // Is invisible because we're only putting it here to measure the width
+                                , "data-testid": "fake-multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setFakeCounterRef, totalCount: currentTotalCount })) : null, getMultiValueComponents(selectValueContainer.children), currentWithCounter && currentIsComplete ? (jsxRuntime.jsx(CounterTag, { "data-testid": dataTestId ? `${dataTestId}-multiselect-counter` : "multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setCounterRef, totalCount: currentTotalCount })) : null, getInputComponent(selectValueContainer.children)] })) : (selectValueContainer.children) }));
             },
             IndicatorSeparator: () => null,
             Input: selectInput => {
@@ -2087,7 +2082,7 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip ? (jsxRuntime.jsx("span", { className: "ml-1", children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, helpText || helpAddon ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label !== undefined && label !== null ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsxRuntime.jsx("span", { className: "ml-1", children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, ((helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null)) ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 /**
@@ -2147,13 +2142,13 @@ const isNumber = (inputValue) => {
  * Validates a url
  */
 const validateColorCode = (colorCode, required) => {
-    if (!colorCode && !required) {
+    if ((colorCode === undefined || colorCode === "" || colorCode === 0) && !required) {
         return undefined;
     }
-    if (!colorCode && required) {
+    if ((colorCode === undefined || colorCode === "" || colorCode === 0) && required) {
         return "REQUIRED";
     }
-    if (colorCode && isString(colorCode) && isValidHEXColor(colorCode)) {
+    if (colorCode !== undefined && colorCode !== "" && colorCode !== 0 && isString(colorCode) && isValidHEXColor(colorCode)) {
         return undefined;
     }
     return "INVALID_HEX_CODE";
@@ -2339,7 +2334,7 @@ ColorField.displayName = "ColorField";
 const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, ...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 ? !(rest.disabled || 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: 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 }) }));
 };
 DateField.displayName = "DateField";
@@ -2533,13 +2528,13 @@ const validateEmailAddress = (email) => {
  * Validates a email id
  */
 const validateEmailId = (emailId, required) => {
-    if (!emailId && !required) {
+    if ((emailId === undefined || emailId === "" || emailId === 0) && !required) {
         return undefined;
     }
-    if (!emailId && required) {
+    if ((emailId === undefined || emailId === "" || emailId === 0) && required) {
         return "REQUIRED";
     }
-    if (emailId && isString(emailId) && validateEmailAddress(emailId)) {
+    if (emailId !== undefined && emailId !== "" && emailId !== 0 && isString(emailId) && validateEmailAddress(emailId)) {
         return undefined;
     }
     return "INVALID_EMAIL";
@@ -2624,7 +2619,7 @@ const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
     const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid);
+    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 error = react.useMemo(() => (errorType ? t(`emailField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = react.useCallback(event => {
@@ -2639,7 +2634,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 ? !(rest.disabled || 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: 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 }) }));
 };
 EmailField.displayName = "EmailField";
@@ -2810,19 +2805,24 @@ const validateNumber = (number, required = false, min, max) => {
         return undefined;
     }
     // if the value is a string eg:'test'
-    if (number && !isNaN(+number) === false) {
+    if (number !== "" && number !== 0 && !isNaN(+number) === false) {
         return "INVALID_NUMBER";
     }
     // if the value is empty and not required
-    if (!parsedNumber && !required && !min && !max && !!number) {
+    if ((parsedNumber === 0 || Number.isNaN(parsedNumber)) &&
+        !required &&
+        (min === undefined || min === "" || min === 0) &&
+        (max === undefined || max === "" || max === 0) &&
+        number !== "" &&
+        number !== 0) {
         return undefined;
     }
     // if the value is empty and required
-    if (required && !!number === false) {
+    if (required && (number === "" || number === 0)) {
         return "REQUIRED";
     }
     // if the value is not in between min and max
-    if (minValue && maxValue && isNumberValid(parsedNumber) && !(parsedNumber >= minValue && parsedNumber <= maxValue)) {
+    if (minValue !== undefined && maxValue !== undefined && isNumberValid(parsedNumber) && !(parsedNumber >= minValue && parsedNumber <= maxValue)) {
         return "NOT_IN_BETWEEN";
     }
     // if the value is less than min
@@ -2933,7 +2933,7 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
             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 ? !(rest.disabled || 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: 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 }) }));
 };
 NumberField.displayName = "NumberField";
@@ -3018,10 +3018,10 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([], {
  */
 const OptionCard = ({ icon, heading, subheading, description, disabled, 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 ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description ? (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 && !description), 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
+    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
                             ? react.cloneElement(icon, { className: cvaCustomImage({ disabled, className: icon.props.className }) })
-                            : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsxRuntime.jsx(reactComponents.Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null, tagProps ? jsxRuntime.jsx(reactComponents.Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
+                            : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsxRuntime.jsx(reactComponents.Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && ((subheading !== undefined && subheading !== null) || (description !== undefined && description !== null)) ? subContent : null, tagProps ? jsxRuntime.jsx(reactComponents.Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
 };
 OptionCard.displayName = "OptionCard";
@@ -3097,7 +3097,7 @@ const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
     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 ? !(rest.disabled || 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: 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 }) }));
 };
 PasswordField.displayName = "PasswordField";
@@ -3233,7 +3233,7 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         }
         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 ? !(rest.disabled || 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 }) }));
+    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 }) }));
 };
 PhoneField.displayName = "PhoneField";
@@ -3653,7 +3653,7 @@ const parseSchedule = (scheduleString) => {
 const serializeSchedule = (weekSchedule) => {
     return weekSchedule.schedule
         .filter(({ range, day, isAllDay }) => {
-        const hasRange = range.timeFrom && range.timeTo;
+        const hasRange = Boolean(range.timeFrom) && Boolean(range.timeTo);
         switch (weekSchedule.variant) {
             case exports.ScheduleVariant.WEEKDAYS:
                 return day <= 5 && hasRange;
@@ -3989,7 +3989,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
  * @returns {ReactElement} TextAreaField component
  */
 const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
-    const [valueLength, setValueLength] = react.useState(value ? `${value}`.length : 0);
+    const [valueLength, setValueLength] = react.useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + sharedUtils.uuidv4();
     const handleChange = react.useCallback((event) => {
@@ -3998,7 +3998,7 @@ const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { className: tailwindMerge.twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+    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 }) }));
 };
 TextAreaField.displayName = "TextAreaField";
@@ -4062,7 +4062,7 @@ TextAreaField.displayName = "TextAreaField";
  * ```
  */
 const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, ...rest }) => {
-    const [valueLength, setValueLength] = react.useState(value ? `${value}`.length : 0);
+    const [valueLength, setValueLength] = react.useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + sharedUtils.uuidv4();
     const handleChange = react.useCallback((event) => {
@@ -4071,8 +4071,8 @@ const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvali
             onChange(event);
         }
     }, [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 ? !(rest.disabled || 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 }) }));
+    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 }) }));
 };
 TextField.displayName = "TextField";
@@ -4260,7 +4260,7 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick, className, "da
     }, {}), [rest]);
     const handleWrapperClick = (e) => {
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
-        const isFromLabel = e.target instanceof Element && e.target.closest("label");
+        const isFromLabel = e.target instanceof Element ? e.target.closest("label") : null;
         if (!isFromLabel && !preventDefaultOnClick && !disabled && !readOnly) {
             localInputRef.current?.click();
         }
@@ -4360,7 +4360,7 @@ const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-t
     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,
                             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 ? (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: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }) }, `${id}-description-tooltip`)) : null] }));
 };
 ToggleSwitchOption.displayName = "ToggleSwitchOption";
@@ -4462,7 +4462,7 @@ UploadInput.displayName = "UploadInput";
 const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, "data-testid": dataTestId, ref, ...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 ? !(rest.disabled || 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: 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 }) }));
 };
 UploadField.displayName = "UploadField";
@@ -4485,13 +4485,13 @@ const validateUrlAddress = (url) => {
  * Validates a url
  */
 const validateUrl = (url, required) => {
-    if (!url && !required) {
+    if ((url === undefined || url === "" || url === 0) && !required) {
         return undefined;
     }
-    if (!url && required) {
+    if ((url === undefined || url === "" || url === 0) && required) {
         return "REQUIRED";
     }
-    if (url && isString(url) && validateUrlAddress(url)) {
+    if (url !== undefined && url !== "" && url !== 0 && isString(url) && validateUrlAddress(url)) {
         return undefined;
     }
     return "INVALID_URL";
@@ -4563,7 +4563,7 @@ const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className
     const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid);
+    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 error = react.useMemo(() => (errorType ? t(`urlField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = react.useCallback(event => {
@@ -4572,7 +4572,7 @@ const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className
         setRenderAsInvalid(!!validateUrl(newValue, rest.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 ? !(rest.disabled || 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 }) }));
+    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 }) }));
 };
 UrlField.displayName = "UrlField";

package/index.esm.js CHANGED Viewed

@@ -278,7 +278,7 @@ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text
  * Renders the addon element if provided
  */
 const AddonRenderer = ({ addon, "data-testid": dataTestId, className, fieldSize, position, }) => {
-    if (!addon) {
+    if (addon === undefined || addon === null) {
         return null;
     }
     return (jsx("div", { className: cvaInputAddon({ size: fieldSize, position, className }), "data-testid": dataTestId ? `${dataTestId}-addon${titleCase(position)}` : null, children: addon }));
@@ -406,8 +406,8 @@ const PrefixRenderer = ({ prefix, type, "data-testid": dataTestId, disabled, ref
         url: jsx(Icon, { name: "Link", size: "small" }),
     };
     // Decide what to show as prefix
-    const resolvedPrefix = prefix || (type && type !== "text" ? (defaultPrefixMap[type] ?? null) : null);
-    if (!resolvedPrefix) {
+    const resolvedPrefix = prefix ?? (type !== undefined && type !== "text" ? (defaultPrefixMap[type] ?? null) : null);
+    if (resolvedPrefix === null) {
         return null;
     }
     return (jsx("div", { className: cvaInputPrefix({ disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: ref, children: resolvedPrefix }));
@@ -416,7 +416,7 @@ const PrefixRenderer = ({ prefix, type, "data-testid": dataTestId, disabled, ref
 // Renders the suffix element or shows an icon if invalid/warning
 const SuffixRenderer = ({ suffix, isInvalid, isWarning, "data-testid": dataTestId, disabled, }) => {
     // If user provided suffix that's not identical to addonBefore, render it
-    if (suffix) {
+    if (suffix !== undefined && suffix !== null) {
         return (jsx("div", { className: cvaInputSuffix({
                 disabled,
             }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }));
@@ -1594,13 +1594,8 @@ autoComplete, // see https://github.com/JedWatson/react-select/issues/758
                 return (jsx(components.ValueContainer, { ...selectValueContainer, className: cvaSelectValueContainer({ className: selectValueContainer.className }), getStyles: getNoStyles, innerProps: {
                         ...selectValueContainer.innerProps,
                         ref: useMergeRefs([setValueContainerRef, selectValueContainer.innerProps?.ref]),
-                    }, children: selectValueContainer.isMulti ? (jsxs(Fragment, { children: [getPlaceholderElement(selectValueContainer.children), currentWithCounter && !currentIsComplete ? (
-                            // Render the test-counter-tag in the beginning to make sure it's included in the calculation
-                            // will be removed when the calculation is complete
-                            jsx(CounterTag, { className: "invisible" // Is invisible because we're only putting it here to measure the width
-                                , "data-testid": "fake-multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setFakeCounterRef, totalCount: currentTotalCount })) : null, getMultiValueComponents(selectValueContainer.children), currentWithCounter && currentIsComplete ? (
-                            // This is the actual tag that will be visible in the UI
-                            jsx(CounterTag, { "data-testid": dataTestId ? `${dataTestId}-multiselect-counter` : "multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setCounterRef, totalCount: currentTotalCount })) : null, getInputComponent(selectValueContainer.children)] })) : (selectValueContainer.children) }));
+                    }, children: selectValueContainer.isMulti ? (jsxs(Fragment, { children: [getPlaceholderElement(selectValueContainer.children), currentWithCounter && !currentIsComplete ? (jsx(CounterTag, { className: "invisible" // Is invisible because we're only putting it here to measure the width
+                                , "data-testid": "fake-multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setFakeCounterRef, totalCount: currentTotalCount })) : null, getMultiValueComponents(selectValueContainer.children), currentWithCounter && currentIsComplete ? (jsx(CounterTag, { "data-testid": dataTestId ? `${dataTestId}-multiselect-counter` : "multiselect-counter", fieldSize: fieldSize, hiddenCount: currentTotalCount - currentVisibleCount, ref: setCounterRef, totalCount: currentTotalCount })) : null, getInputComponent(selectValueContainer.children)] })) : (selectValueContainer.children) }));
             },
             IndicatorSeparator: () => null,
             Input: selectInput => {
@@ -2086,7 +2081,7 @@ const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon,
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip ? (jsx("span", { className: "ml-1", children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label !== undefined && label !== null ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsx("span", { className: "ml-1", children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, ((helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null)) ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 /**
@@ -2146,13 +2141,13 @@ const isNumber = (inputValue) => {
  * Validates a url
  */
 const validateColorCode = (colorCode, required) => {
-    if (!colorCode && !required) {
+    if ((colorCode === undefined || colorCode === "" || colorCode === 0) && !required) {
         return undefined;
     }
-    if (!colorCode && required) {
+    if ((colorCode === undefined || colorCode === "" || colorCode === 0) && required) {
         return "REQUIRED";
     }
-    if (colorCode && isString(colorCode) && isValidHEXColor(colorCode)) {
+    if (colorCode !== undefined && colorCode !== "" && colorCode !== 0 && isString(colorCode) && isValidHEXColor(colorCode)) {
         return undefined;
     }
     return "INVALID_HEX_CODE";
@@ -2338,7 +2333,7 @@ ColorField.displayName = "ColorField";
 const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, ...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 ? !(rest.disabled || 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: 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 }) }));
 };
 DateField.displayName = "DateField";
@@ -2532,13 +2527,13 @@ const validateEmailAddress = (email) => {
  * Validates a email id
  */
 const validateEmailId = (emailId, required) => {
-    if (!emailId && !required) {
+    if ((emailId === undefined || emailId === "" || emailId === 0) && !required) {
         return undefined;
     }
-    if (!emailId && required) {
+    if ((emailId === undefined || emailId === "" || emailId === 0) && required) {
         return "REQUIRED";
     }
-    if (emailId && isString(emailId) && validateEmailAddress(emailId)) {
+    if (emailId !== undefined && emailId !== "" && emailId !== 0 && isString(emailId) && validateEmailAddress(emailId)) {
         return undefined;
     }
     return "INVALID_EMAIL";
@@ -2623,7 +2618,7 @@ const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
     const [innerValue, setInnerValue] = useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid);
+    const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (typeof value === "string" && value !== "" && !validateEmailAddress(value)) || isInvalid);
     const errorType = useMemo(() => validateEmailId(innerValue ?? "", rest.required), [rest.required, innerValue]);
     const error = useMemo(() => (errorType ? t(`emailField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = useCallback(event => {
@@ -2638,7 +2633,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 ? !(rest.disabled || 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: 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 }) }));
 };
 EmailField.displayName = "EmailField";
@@ -2809,19 +2804,24 @@ const validateNumber = (number, required = false, min, max) => {
         return undefined;
     }
     // if the value is a string eg:'test'
-    if (number && !isNaN(+number) === false) {
+    if (number !== "" && number !== 0 && !isNaN(+number) === false) {
         return "INVALID_NUMBER";
     }
     // if the value is empty and not required
-    if (!parsedNumber && !required && !min && !max && !!number) {
+    if ((parsedNumber === 0 || Number.isNaN(parsedNumber)) &&
+        !required &&
+        (min === undefined || min === "" || min === 0) &&
+        (max === undefined || max === "" || max === 0) &&
+        number !== "" &&
+        number !== 0) {
         return undefined;
     }
     // if the value is empty and required
-    if (required && !!number === false) {
+    if (required && (number === "" || number === 0)) {
         return "REQUIRED";
     }
     // if the value is not in between min and max
-    if (minValue && maxValue && isNumberValid(parsedNumber) && !(parsedNumber >= minValue && parsedNumber <= maxValue)) {
+    if (minValue !== undefined && maxValue !== undefined && isNumberValid(parsedNumber) && !(parsedNumber >= minValue && parsedNumber <= maxValue)) {
         return "NOT_IN_BETWEEN";
     }
     // if the value is less than min
@@ -2932,7 +2932,7 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
             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 ? !(rest.disabled || 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: 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 }) }));
 };
 NumberField.displayName = "NumberField";
@@ -3017,10 +3017,10 @@ const cvaTag = cvaMerge([], {
  */
 const OptionCard = ({ icon, heading, subheading, description, disabled, 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 ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description ? (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 && !description), 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
+    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
                             ? cloneElement(icon, { className: cvaCustomImage({ disabled, className: icon.props.className }) })
-                            : null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsx(Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsx(Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null, tagProps ? jsx(Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
+                            : null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsx(Heading, { className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, variant: "secondary", children: heading })) : (jsx(Text, { align: "center", className: cvaOptionCardTitle({ disabled, layout }), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && ((subheading !== undefined && subheading !== null) || (description !== undefined && description !== null)) ? subContent : null, tagProps ? jsx(Tag, { className: cvaTag({ className: tagProps.className, layout }), ...tagProps }) : null] })] }) }));
 };
 OptionCard.displayName = "OptionCard";
@@ -3096,7 +3096,7 @@ const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
     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 ? !(rest.disabled || 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: 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 }) }));
 };
 PasswordField.displayName = "PasswordField";
@@ -3232,7 +3232,7 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         }
         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 ? !(rest.disabled || 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 }) }));
+    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 }) }));
 };
 PhoneField.displayName = "PhoneField";
@@ -3652,7 +3652,7 @@ const parseSchedule = (scheduleString) => {
 const serializeSchedule = (weekSchedule) => {
     return weekSchedule.schedule
         .filter(({ range, day, isAllDay }) => {
-        const hasRange = range.timeFrom && range.timeTo;
+        const hasRange = Boolean(range.timeFrom) && Boolean(range.timeTo);
         switch (weekSchedule.variant) {
             case ScheduleVariant.WEEKDAYS:
                 return day <= 5 && hasRange;
@@ -3988,7 +3988,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
  * @returns {ReactElement} TextAreaField component
  */
 const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
-    const [valueLength, setValueLength] = useState(value ? `${value}`.length : 0);
+    const [valueLength, setValueLength] = useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + uuidv4();
     const handleChange = useCallback((event) => {
@@ -3997,7 +3997,7 @@ const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { className: twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+    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 }) }));
 };
 TextAreaField.displayName = "TextAreaField";
@@ -4061,7 +4061,7 @@ TextAreaField.displayName = "TextAreaField";
  * ```
  */
 const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, ...rest }) => {
-    const [valueLength, setValueLength] = useState(value ? `${value}`.length : 0);
+    const [valueLength, setValueLength] = useState(value !== undefined ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + uuidv4();
     const handleChange = useCallback((event) => {
@@ -4070,8 +4070,8 @@ const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvali
             onChange(event);
         }
     }, [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 ? !(rest.disabled || 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 }) }));
+    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 }) }));
 };
 TextField.displayName = "TextField";
@@ -4259,7 +4259,7 @@ const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick, className, "da
     }, {}), [rest]);
     const handleWrapperClick = (e) => {
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
-        const isFromLabel = e.target instanceof Element && e.target.closest("label");
+        const isFromLabel = e.target instanceof Element ? e.target.closest("label") : null;
         if (!isFromLabel && !preventDefaultOnClick && !disabled && !readOnly) {
             localInputRef.current?.click();
         }
@@ -4359,7 +4359,7 @@ const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-t
     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,
                             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 ? (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: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }) }, `${id}-description-tooltip`)) : null] }));
 };
 ToggleSwitchOption.displayName = "ToggleSwitchOption";
@@ -4461,7 +4461,7 @@ UploadInput.displayName = "UploadInput";
 const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, "data-testid": dataTestId, ref, ...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 ? !(rest.disabled || 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: 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 }) }));
 };
 UploadField.displayName = "UploadField";
@@ -4484,13 +4484,13 @@ const validateUrlAddress = (url) => {
  * Validates a url
  */
 const validateUrl = (url, required) => {
-    if (!url && !required) {
+    if ((url === undefined || url === "" || url === 0) && !required) {
         return undefined;
     }
-    if (!url && required) {
+    if ((url === undefined || url === "" || url === 0) && required) {
         return "REQUIRED";
     }
-    if (url && isString(url) && validateUrlAddress(url)) {
+    if (url !== undefined && url !== "" && url !== 0 && isString(url) && validateUrlAddress(url)) {
         return undefined;
     }
     return "INVALID_URL";
@@ -4562,7 +4562,7 @@ const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className
     const [innerValue, setInnerValue] = useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid);
+    const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (typeof value === "string" && value !== "" && !validateUrlAddress(value)) || isInvalid);
     const errorType = useMemo(() => validateUrl(innerValue ?? "", rest.required), [rest.required, innerValue]);
     const error = useMemo(() => (errorType ? t(`urlField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
     const handleBlur = useCallback(event => {
@@ -4571,7 +4571,7 @@ const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className
         setRenderAsInvalid(!!validateUrl(newValue, rest.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 ? !(rest.disabled || 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 }) }));
+    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 }) }));
 };
 UrlField.displayName = "UrlField";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.15.8",
+  "version": "1.15.10-alpha-ae1ff73fc64.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,18 +9,18 @@
   "dependencies": {
     "react": "19.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.11.68",
+    "@trackunit/date-and-time-utils": "1.11.70-alpha-ae1ff73fc64.0",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.67",
-    "@trackunit/react-components": "1.18.8",
-    "@trackunit/ui-icons": "1.11.65",
-    "@trackunit/shared-utils": "1.13.67",
-    "@trackunit/ui-design-tokens": "1.11.66",
-    "@trackunit/i18n-library-translation": "1.12.58",
+    "@trackunit/css-class-variance-utilities": "1.11.69-alpha-ae1ff73fc64.0",
+    "@trackunit/react-components": "1.18.10-alpha-ae1ff73fc64.0",
+    "@trackunit/ui-icons": "1.11.67-alpha-ae1ff73fc64.0",
+    "@trackunit/shared-utils": "1.13.69-alpha-ae1ff73fc64.0",
+    "@trackunit/ui-design-tokens": "1.11.68-alpha-ae1ff73fc64.0",
+    "@trackunit/i18n-library-translation": "1.12.60-alpha-ae1ff73fc64.0",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/ActionButton/ActionButton.variants.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 export declare const cvaActionButton: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaActionContainer: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/BaseInput/BaseInput.variants.d.ts CHANGED Viewed

@@ -1,18 +1,18 @@
-export declare const cvaInputBase: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputBaseDisabled: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputBaseInvalid: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputBaseReadOnly: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputBase: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaInputBaseDisabled: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaInputBaseInvalid: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaInputBaseReadOnly: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaInputBaseSize: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     defaultVariants?: "size" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaInput: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     disabled?: boolean | null | undefined;
     readOnly?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
     isWarning?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Used for placing items in the grid, using a grid z-stack trick.
  * The span position is used for the input field, which spans the entire grid.
@@ -20,21 +20,21 @@ export declare const cvaInput: (props?: ({
  */
 export declare const cvaInputItemPlacementManager: (props?: ({
     position?: "before" | "after" | "span" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAccessoriesContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaAccessoriesContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**
  * Text size and color is handled by cvaInput
  */
 export declare const cvaInputElement: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaInputAddon: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     position?: "before" | "after" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaInputPrefix: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaInputSuffix: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/BaseSelect/BaseSelect.variants.d.ts CHANGED Viewed

@@ -9,25 +9,25 @@ export declare const cvaSelectContainer: (props?: ({
     focused?: boolean | null | undefined;
     readOnly?: boolean | null | undefined;
     defaultVariants?: "fieldSize" | "disabled" | "invalid" | "focused" | "readOnly" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectControl: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectLoadingMessage: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectNoOptionsMessage: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectDropdownIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectPrefixSuffix: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectClearIndicator: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaSelectControl: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectLoadingMessage: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectNoOptionsMessage: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectDropdownIconContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectPrefixSuffix: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectClearIndicator: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaSelectDropdownIndicator: (props?: ({
     menuIsOpen?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectValueContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectSingleValue: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaSelectValueContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectSingleValue: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaSelectMenu: (props?: ({
     placement?: "bottom" | "top" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectMenuList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectPlaceholder: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectIndicatorsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaSelectMenuList: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectPlaceholder: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaSelectIndicatorsContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaSelectMultiValue: (props?: ({
     hidden?: boolean | null | undefined;
     invisible?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Checkbox/Checkbox.variants.d.ts CHANGED Viewed

@@ -6,9 +6,9 @@ export declare const cvaCheckbox: (props?: ({
     invalid?: boolean | null | undefined;
     state?: "selected" | "deselected" | "indeterminate" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Icon overlay container - positioned on top of the input, receives no pointer events
  */
-export declare const cvaCheckboxIconOverlay: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCheckboxIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCheckboxIconOverlay: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaCheckboxIcon: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/ColorField/ColorField.variants.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export declare const cvaInputColorField: (props?: ({
     readOnly?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/DropZone/DropZone.variants.d.ts CHANGED Viewed

@@ -4,8 +4,8 @@ export declare const cvaDropZone: (props?: ({
     dragActive?: boolean | null | undefined;
     dropComplete?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaDropZoneLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaDropZoneLabel: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaDropZoneIconBackground: (props?: ({
     invalid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/FormGroup/FormGroup.variants.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-export declare const cvaFormGroup: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaFormGroupContainerBefore: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaFormGroup: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaFormGroupContainerBefore: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaFormGroupContainerAfter: (props?: ({
     invalid?: boolean | null | undefined;
     isWarning?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaHelpAddon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaHelpAddon: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Label/Label.variants.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ export declare const cvaLabel: (props?: ({
     invalid?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     truncate?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/OptionCard/OptionCard.variants.d.ts CHANGED Viewed

@@ -1,21 +1,21 @@
 export declare const cvaOptionCardLabel: (props?: ({
     disabled?: boolean | null | undefined;
     layout?: "default" | "compact" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaOptionCardContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaOptionCardContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaOptionCardContent: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaOptionCardContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaOptionCardTitle: (props?: ({
     layout?: "default" | "compact" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaOptionCardText: (props?: ({
     type?: "subheading" | "description" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaInput: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaCustomImage: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTag: (props?: ({
     layout?: "default" | "compact" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/RadioGroup/RadioGroup.variants.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 export declare const cvaInputGroup: (props?: ({
     layout?: "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaRadioItem: (props?: ({
     checked?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Schedule/Schedule.variants.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const cvaScheduleItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaScheduleItemText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaScheduleItem: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaScheduleItemText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Search/Search.variants.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 export declare const cvaSearch: (props?: ({
     border?: boolean | null | undefined;
     widenOnFocus?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/TextAreaField/TextArea/TextAreaBaseInput.variants.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ export declare const cvaTextAreaBaseInput: (props?: ({
     disabled?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
     resize?: "both" | "vertical" | "horizontal" | "none" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/TimeRange/TimeRange.variants.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const cvaTimeRange: (props?: import("class-variance-authority/~~dist/~~types").ClassProp \| undefined) => string;
1	+ export declare const cvaTimeRange: (props?: import("class-variance-authority/types").ClassProp \| undefined) => string;

package/src/components/ToggleSwitch/ToggleSwitch.variants.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
-export declare const cvaToggleSwitchWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaToggleSwitchInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleSwitchWrapper: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaToggleSwitchInput: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaToggleSwitchTrack: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     disabled?: boolean | null | undefined;
     toggled?: boolean | null | undefined;
     focused?: boolean | "auto" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaToggleSwitchThumb: (props?: ({
     toggled?: boolean | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/UploadInput/UploadInput.variants.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const cvaUploadInputField: (props?: import("class-variance-authority/~~dist/~~types").ClassProp \| undefined) => string;
1	+ export declare const cvaUploadInputField: (props?: import("class-variance-authority/types").ClassProp \| undefined) => string;

package/src/shared-cva/BinaryControlItem.variants.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 /**
  * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
  */
-export declare const cvaBinaryControlWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaBinaryControlLabelTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaBinaryControlDescriptionTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBinaryControlWrapper: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaBinaryControlLabelTooltip: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaBinaryControlDescriptionTooltip: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaBinaryControlDescription: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaBinaryControlSuffixContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaBinaryControlSuffixContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;