@trackunit/react-form-components 1.0.16 → 1.0.17

package/index.cjs.js

@@ -148,7 +148,6 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
         }
     };
     const buttonAction = () => {
-        var _a, _b;
         switch (type) {
             case "EMAIL":
                 return window.open(`mailto:${value}`);
@@ -163,7 +162,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
                 // Typescript seems to be unable to detect RefObject
                 // as one of the members of the union RefObject | string | null which gives access to the `current` property
                 // eslint-disable-next-line react/prop-types
-                return copyToClipboard((_b = (_a = value === null || value === void 0 ? void 0 : value.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+                return copyToClipboard(value?.current?.value ?? "");
             default:
                 return null;
         }
@@ -379,7 +378,6 @@ const DisabledForReasonsTip = ({ reasons, kind }) => {
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
 const BaseInput = React__namespace.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, style, ...rest }, ref) => {
-    var _a;
     const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
     const innerRef = React__namespace.useRef(null);
     // eslint-disable-next-line local-rules/no-typescript-assertion
@@ -407,7 +405,7 @@ const BaseInput = React__namespace.forwardRef(({ className, isInvalid, dataTestI
                     actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
                 }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null, rest.readOnly === true &&
                 showDefaultActions &&
-                ((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.value.length) &&
+                innerRef.current?.value.length &&
                 innerRef.current.value.length > 0 ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && !compareReactNodes(addonBefore, actions) ? (jsxRuntime.jsx("div", { className: cvaInputAction({
                     addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
                     suffix: !compareReactNodes(addonBefore, suffix),
@@ -587,13 +585,12 @@ const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbo
     const textIsCutOff = reactComponents.useIsTextCutOff(labelRef);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
-        var _a, _b;
         if ("Space" === e.code) {
             e.preventDefault();
-            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            internalRef.current?.click();
         }
         if ("Enter" === e.code) {
-            (_b = internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
+            internalRef.current?.click();
         }
     };
     const uuid = rest.id;
@@ -716,7 +713,7 @@ const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, h
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!errorType);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorType, onBlur]);
     const handleChange = React.useCallback((event) => {
         const newValue = event.target.value;
@@ -864,13 +861,12 @@ const DropZone = ({ className, dataTestId, filesSelected, label = jsxRuntime.jsx
     };
     //function to handle focusable button click (for accessibility)
     const handleButtonClick = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         if (disabled) {
             return;
         }
-        (_a = inputLabelRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        inputLabelRef.current?.click();
     };
     return (jsxRuntime.jsx("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
             if (disabled) {
@@ -929,7 +925,7 @@ const EmailInput = React__namespace.forwardRef(({ fieldSize = "medium", disabled
     };
     const handleChange = React.useCallback(event => {
         const newValue = event.target.value;
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        onChange?.(event);
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
@@ -946,17 +942,16 @@ const EmailField = React.forwardRef(({ label, id, tip, helpText, errorMessage, h
     const htmlForId = id ? id : "emailField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+        return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid);
-    const errorType = React.useMemo(() => validateEmailId(innerValue !== null && innerValue !== void 0 ? innerValue : "", rest.required), [rest.required, innerValue]);
+    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 => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!errorType);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorType, onBlur]);
     const handleChange = React.useCallback((event) => {
         setInnerValue(event.target.value);
@@ -1039,10 +1034,10 @@ const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage,
     const htmlForId = id ? id : "numberField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
-        return Number(value === null || value === void 0 ? void 0 : value.toString()) || Number(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString());
+        return Number(value?.toString()) || Number(defaultValue?.toString());
     });
     const [renderAsInvalid, setRenderAsInvalid] = React.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!validateNumber(value === null || value === void 0 ? void 0 : value.toString(), rest.required, rest.min, rest.max));
+        !!validateNumber(value?.toString(), rest.required, rest.min, rest.max));
     const errorType = React.useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
     const error = React.useMemo(() => {
         // for the case when a custom error message is provided
@@ -1065,7 +1060,7 @@ const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage,
         else {
             setRenderAsInvalid(!!validateNumber(newValue, rest.required, rest.min, rest.max));
         }
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
     const handleChange = React.useCallback((event) => {
         setInnerValue(event.target.value);
@@ -1107,7 +1102,7 @@ const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
  * A card version of a radio button that includes an icon, headings and a description.
  */
 const OptionCard = React.forwardRef(({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ...rest }, ref) => {
-    const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + sharedUtils.uuidv4();
+    const htmlForId = id ?? "option-card-" + sharedUtils.uuidv4();
     return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
                         ? React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
                         : 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 ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
@@ -1136,7 +1131,7 @@ const PasswordField = React.forwardRef(({ id, label, tip, helpText, helpAddon, e
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "passwordField-" + sharedUtils.uuidv4();
     const handleChange = React.useCallback((event) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        onChange?.(event);
     }, [onChange]);
     return (jsxRuntime.jsx(FormGroup, { dataTestId: 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(PasswordInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
 });
@@ -1208,8 +1203,7 @@ const DEFAULT_COUNTRY_CODE = undefined;
  */
 const PhoneInput = React.forwardRef(({ dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ...rest }, ref) => {
     const [innerValue, setInnerValue] = React.useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+        return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const fieldIsFocused = React.useRef(false);
     const [countryCode, setCountryCode] = React.useState(DEFAULT_COUNTRY_CODE);
@@ -1222,7 +1216,7 @@ const PhoneInput = React.forwardRef(({ dataTestId, isInvalid, disabled = false,
         const newValue = event.target.value;
         const noneFormattedValue = parsePhoneNumberFromString.parseIncompletePhoneNumber(newValue);
         event.target.value = noneFormattedValue;
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        onChange?.(event);
         setInnerValue(newValue);
         determineCountry(newValue);
     }, [onChange, determineCountry]);
@@ -1240,17 +1234,17 @@ const PhoneInput = React.forwardRef(({ dataTestId, isInvalid, disabled = false,
     const handleBlur = React.useCallback(event => {
         const newValue = event.target.value;
         makePretty(newValue);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
         fieldIsFocused.current = false;
     }, [makePretty, onBlur]);
     const handleFocus = React.useCallback(event => {
         const newValue = event.target.value;
         const noneFormattedValue = parsePhoneNumberFromString.parseIncompletePhoneNumber(newValue);
         setInnerValue(noneFormattedValue);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        onFocus?.(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
+    return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
 });
 PhoneInput.displayName = "PhoneInput";
 
@@ -1324,11 +1318,10 @@ const PhoneField = React.forwardRef(({ label, id, tip, helpText, isInvalid, erro
     const htmlForId = id ? id : "phoneField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : undefined;
+        return (value?.toString() || defaultValue?.toString()) ?? undefined;
     });
     const [renderAsInvalid, setRenderAsInvalid] = React.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!phoneErrorMessage(value === null || value === void 0 ? void 0 : value.toString(), rest.required));
+        !!phoneErrorMessage(value?.toString(), rest.required));
     const errorType = React.useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
     const error = React.useMemo(() => {
         // for the case when a custom error message is provided
@@ -1351,7 +1344,7 @@ const PhoneField = React.forwardRef(({ label, id, tip, helpText, isInvalid, erro
         else {
             setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
         }
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorMessage, onBlur, rest.required]);
     return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: 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(PhoneInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
 });
@@ -1491,21 +1484,21 @@ RadioGroup.displayName = "RadioGroup";
  */
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = React.useContext(RadioGroupContext);
-    const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+    const isChecked = groupCtx?.value === value;
     const labelRef = React.useRef(null);
     const descriptionRef = React.useRef(null);
     const labelTextIsCutOff = reactComponents.useIsTextCutOff(labelRef);
     const descriptionTextIsCutOff = reactComponents.useIsTextCutOff(descriptionRef);
-    const descriptionId = description ? `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}-description` : undefined;
-    const inputId = `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`;
+    const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
+    const inputId = `${groupCtx?.id}-${value}`;
     return (jsxRuntime.jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
-                    disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-                    invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
-                        invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                        disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsxRuntime.jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+                    disabled: groupCtx?.disabled,
+                    invalid: groupCtx?.isInvalid,
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                        invalid: groupCtx?.isInvalid,
+                        disabled: groupCtx?.disabled,
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsxRuntime.jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
 const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
@@ -1525,7 +1518,7 @@ const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} TimeRange component
  */
 const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    const [timeRange, setTimeRange] = React.useState(range !== null && range !== void 0 ? range : {
+    const [timeRange, setTimeRange] = React.useState(range ?? {
         timeFrom: "",
         timeTo: "",
     });
@@ -1536,7 +1529,7 @@ const TimeRange = ({ id, className, dataTestId, children, range, onChange, disab
         setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom }), children !== null && children !== void 0 ? children : jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom }), children ?? jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo })] }));
 };
 
 const cvaScheduleItem = cssClassVarianceUtilities.cvaMerge([
@@ -1609,7 +1602,7 @@ const parseSchedule = (scheduleString) => {
     }
     const schedule = scheduleString.split(",").map(daySchedule => {
         const [day, timeRange] = daySchedule.split("#");
-        const [timeFrom, timeTo] = (timeRange !== null && timeRange !== void 0 ? timeRange : "").split("-");
+        const [timeFrom, timeTo] = (timeRange ?? "").split("-");
         const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
         return {
             day: Number(day),
@@ -1683,7 +1676,7 @@ const serializeSchedule = (weekSchedule) => {
  * @returns {boolean} Whether the schedule is uniform
  */
 const isUniform = (schedule) => {
-    return schedule.every((day, _, collection) => { var _a, _b, _c, _d, _e, _f; return ((_b = (_a = collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) && ((_e = (_d = collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day.range) === null || _f === void 0 ? void 0 : _f.timeTo); });
+    return schedule.every((day, _, collection) => collection[0]?.range?.timeFrom === day.range?.timeFrom && collection[0]?.range?.timeTo === day.range?.timeTo);
 };
 /**
  * Checks if a list of schedule objects are consecutive days
@@ -1735,8 +1728,7 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} Search component
  */
 const Search = React.forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", ...rest }, ref) => {
-    var _a, _b;
-    return (jsxRuntime.jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", size: (_a = rest.fieldSize) !== null && _a !== void 0 ? _a : undefined })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: (_b = rest.fieldSize) !== null && _b !== void 0 ? _b : undefined })), ref: ref, suffix: 
+    return (jsxRuntime.jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
         //only show the clear button if there is a value and the onClear function is provided
         onClear && value ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
@@ -1868,8 +1860,7 @@ const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, o
 const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
     const ref = React.useRef(null);
     React.useLayoutEffect(() => {
-        var _a;
-        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
+        onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
     }, [ref, onWidthKnown]);
     return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, children: children }));
 };
@@ -1888,8 +1879,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
     const childrenWidth = React.useRef([]);
     const itemsCount = items.length;
     React.useLayoutEffect(() => {
-        var _a;
-        availableWidth.current = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        availableWidth.current = containerRef.current?.offsetWidth || 0;
     }, [containerRef]);
     const onWidthKnownHandler = ({ width: reportedWidth }) => {
         childrenWidth.current.push({ width: reportedWidth + itemsGap });
@@ -1958,11 +1948,10 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
     const customComponents = React__namespace.useMemo(() => {
         return {
             ValueContainer: props => {
-                var _a;
                 if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
                     const PLACEHOLDER_KEY = "placeholder";
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const key = props && props.children && props.children[0] ? (_a = props.children[0]) === null || _a === void 0 ? void 0 : _a.key : "";
+                    const key = props && props.children && props.children[0] ? props.children[0]?.key : "";
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const values = props && props.children ? props.children[0] : [];
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
@@ -1983,12 +1972,11 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                 })
                                 : [], postFix: searchInput, width: "100%" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags
                                     ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        var _a;
                                         return (jsxRuntime.jsx(reactComponents.Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
-                                            }, children: tagProps.children }, (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()));
+                                            }, children: tagProps.children }, tagProps.children?.toString()));
                                     })
                                     : null, tags && tags.length > maxSelectedDisplayCount ? (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
                 }
@@ -1999,7 +1987,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
             },
             DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon !== null && dropdownIcon !== void 0 ? dropdownIcon : icon }) }));
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, { ...props, children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ?? icon }) }));
             },
             IndicatorSeparator: () => null,
             ClearIndicator: props => {
@@ -2049,7 +2037,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) }));
+                    }, children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, optionLabelDescription: getOptionLabelDescription?.(props.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, optionLabelDescription: getOptionLabelDescription?.(props.data) })) }));
             },
             ...componentsProps,
         };
@@ -2167,7 +2155,6 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
  * @returns {UseSelectProps} Select component
  */
 const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, ...props }) => {
-    var _a;
     const refContainer = React.useRef(null);
     const refPrefix = React.useRef(null);
     const { customStyles } = useCustomStyles({
@@ -2177,7 +2164,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         styles,
         disabled: Boolean(disabled),
     });
-    const [menuIsOpen, setMenuIsOpen] = React.useState((_a = props.menuIsOpen) !== null && _a !== void 0 ? _a : false);
+    const [menuIsOpen, setMenuIsOpen] = React.useState(props.menuIsOpen ?? false);
     const refMenuIsEnabled = React.useRef(true);
     const customComponents = useCustomComponents({
         componentsProps: components,
@@ -2193,7 +2180,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
     });
     const menuPlacement = "auto";
     const openMenuHandler = async () => {
-        onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
+        onMenuOpen?.();
         if (refMenuIsEnabled.current) {
             setMenuIsOpen(true);
         }
@@ -2367,7 +2354,6 @@ const FormFieldSelectAdapter = React.forwardRef(({ className, dataTestId, helpTe
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
     React.useEffect(() => {
-        var _a;
         if (innerValue === undefined) {
             return;
         }
@@ -2375,8 +2361,8 @@ const FormFieldSelectAdapter = React.forwardRef(({ className, dataTestId, helpTe
         if (innerValue === "" && innerRef.current) {
             innerRef.current.value = ""; // Set the desired option value
         }
-        (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        innerRef.current?.dispatchEvent(event);
+        onChange?.(event);
     }, [onChange, innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
@@ -2712,7 +2698,7 @@ const validateUrl = (url, required) => {
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
 const UrlInput = React.forwardRef(({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ...rest }, ref) => {
-    const [url, setUrl] = React.useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
+    const [url, setUrl] = React.useState(value?.toString() || defaultValue?.toString());
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
     return (jsxRuntime.jsx(BaseInput, { dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) }));
 });
@@ -2727,17 +2713,16 @@ const UrlField = React.forwardRef(({ label, id, tip, helpText, errorMessage, hel
     const htmlForId = id ? id : "urlField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+        return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid);
-    const errorType = React.useMemo(() => validateUrl(innerValue !== null && innerValue !== void 0 ? innerValue : "", rest.required), [rest.required, innerValue]);
+    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 => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!validateUrl(newValue, rest.required));
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [onBlur, rest.required]);
     return (jsxRuntime.jsx(FormGroup, { dataTestId: 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(UrlInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
 });

package/index.esm.js

@@ -129,7 +129,6 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
         }
     };
     const buttonAction = () => {
-        var _a, _b;
         switch (type) {
             case "EMAIL":
                 return window.open(`mailto:${value}`);
@@ -144,7 +143,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
                 // Typescript seems to be unable to detect RefObject
                 // as one of the members of the union RefObject | string | null which gives access to the `current` property
                 // eslint-disable-next-line react/prop-types
-                return copyToClipboard((_b = (_a = value === null || value === void 0 ? void 0 : value.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+                return copyToClipboard(value?.current?.value ?? "");
             default:
                 return null;
         }
@@ -360,7 +359,6 @@ const DisabledForReasonsTip = ({ reasons, kind }) => {
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
 const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, style, ...rest }, ref) => {
-    var _a;
     const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
     const innerRef = React.useRef(null);
     // eslint-disable-next-line local-rules/no-typescript-assertion
@@ -388,7 +386,7 @@ const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix,
                     actions: (actions && !compareReactNodes(addonBefore, actions)) || false,
                 }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null, rest.readOnly === true &&
                 showDefaultActions &&
-                ((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.value.length) &&
+                innerRef.current?.value.length &&
                 innerRef.current.value.length > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && !compareReactNodes(addonBefore, actions) ? (jsx("div", { className: cvaInputAction({
                     addonAfter: addonAfter !== undefined && !compareReactNodes(addonBefore, addonAfter),
                     suffix: !compareReactNodes(addonBefore, suffix),
@@ -568,13 +566,12 @@ const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChang
     const textIsCutOff = useIsTextCutOff(labelRef);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
-        var _a, _b;
         if ("Space" === e.code) {
             e.preventDefault();
-            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            internalRef.current?.click();
         }
         if ("Enter" === e.code) {
-            (_b = internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
+            internalRef.current?.click();
         }
     };
     const uuid = rest.id;
@@ -697,7 +694,7 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!errorType);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorType, onBlur]);
     const handleChange = useCallback((event) => {
         const newValue = event.target.value;
@@ -845,13 +842,12 @@ const DropZone = ({ className, dataTestId, filesSelected, label = jsx(DropZoneDe
     };
     //function to handle focusable button click (for accessibility)
     const handleButtonClick = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         if (disabled) {
             return;
         }
-        (_a = inputLabelRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        inputLabelRef.current?.click();
     };
     return (jsx("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
             if (disabled) {
@@ -910,7 +906,7 @@ const EmailInput = React.forwardRef(({ fieldSize = "medium", disabled = false, d
     };
     const handleChange = useCallback(event => {
         const newValue = event.target.value;
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        onChange?.(event);
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
@@ -927,17 +923,16 @@ const EmailField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
     const htmlForId = id ? id : "emailField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+        return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid);
-    const errorType = useMemo(() => validateEmailId(innerValue !== null && innerValue !== void 0 ? innerValue : "", rest.required), [rest.required, innerValue]);
+    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 => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!errorType);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorType, onBlur]);
     const handleChange = useCallback((event) => {
         setInnerValue(event.target.value);
@@ -1020,10 +1015,10 @@ const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAd
     const htmlForId = id ? id : "numberField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
-        return Number(value === null || value === void 0 ? void 0 : value.toString()) || Number(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString());
+        return Number(value?.toString()) || Number(defaultValue?.toString());
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!validateNumber(value === null || value === void 0 ? void 0 : value.toString(), rest.required, rest.min, rest.max));
+        !!validateNumber(value?.toString(), rest.required, rest.min, rest.max));
     const errorType = useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
     const error = useMemo(() => {
         // for the case when a custom error message is provided
@@ -1046,7 +1041,7 @@ const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAd
         else {
             setRenderAsInvalid(!!validateNumber(newValue, rest.required, rest.min, rest.max));
         }
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
     const handleChange = useCallback((event) => {
         setInnerValue(event.target.value);
@@ -1088,7 +1083,7 @@ const cvaOptionCardContainer = cvaMerge(["contents"]);
  * A card version of a radio button that includes an icon, headings and a description.
  */
 const OptionCard = forwardRef(({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ...rest }, ref) => {
-    const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + uuidv4();
+    const htmlForId = id ?? "option-card-" + uuidv4();
     return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
                         ? cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
                         : 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 ? (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsx(Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
@@ -1117,7 +1112,7 @@ const PasswordField = forwardRef(({ id, label, tip, helpText, helpAddon, errorMe
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "passwordField-" + uuidv4();
     const handleChange = useCallback((event) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        onChange?.(event);
     }, [onChange]);
     return (jsx(FormGroup, { dataTestId: 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(PasswordInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
 });
@@ -1189,8 +1184,7 @@ const DEFAULT_COUNTRY_CODE = undefined;
  */
 const PhoneInput = forwardRef(({ dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ...rest }, ref) => {
     const [innerValue, setInnerValue] = useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+        return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const fieldIsFocused = useRef(false);
     const [countryCode, setCountryCode] = useState(DEFAULT_COUNTRY_CODE);
@@ -1203,7 +1197,7 @@ const PhoneInput = forwardRef(({ dataTestId, isInvalid, disabled = false, value,
         const newValue = event.target.value;
         const noneFormattedValue = parseIncompletePhoneNumber(newValue);
         event.target.value = noneFormattedValue;
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        onChange?.(event);
         setInnerValue(newValue);
         determineCountry(newValue);
     }, [onChange, determineCountry]);
@@ -1221,17 +1215,17 @@ const PhoneInput = forwardRef(({ dataTestId, isInvalid, disabled = false, value,
     const handleBlur = useCallback(event => {
         const newValue = event.target.value;
         makePretty(newValue);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
         fieldIsFocused.current = false;
     }, [makePretty, onBlur]);
     const handleFocus = useCallback(event => {
         const newValue = event.target.value;
         const noneFormattedValue = parseIncompletePhoneNumber(newValue);
         setInnerValue(noneFormattedValue);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        onFocus?.(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
+    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, dataTestId: dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue, ...rest }) }));
 });
 PhoneInput.displayName = "PhoneInput";
 
@@ -1305,11 +1299,10 @@ const PhoneField = forwardRef(({ label, id, tip, helpText, isInvalid, errorMessa
     const htmlForId = id ? id : "phoneField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : undefined;
+        return (value?.toString() || defaultValue?.toString()) ?? undefined;
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
-        !!phoneErrorMessage(value === null || value === void 0 ? void 0 : value.toString(), rest.required));
+        !!phoneErrorMessage(value?.toString(), rest.required));
     const errorType = useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
     const error = useMemo(() => {
         // for the case when a custom error message is provided
@@ -1332,7 +1325,7 @@ const PhoneField = forwardRef(({ label, id, tip, helpText, isInvalid, errorMessa
         else {
             setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
         }
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [errorMessage, onBlur, rest.required]);
     return (jsx(FormGroup, { className: className, dataTestId: 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(PhoneInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
 });
@@ -1472,21 +1465,21 @@ RadioGroup.displayName = "RadioGroup";
  */
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = useContext(RadioGroupContext);
-    const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+    const isChecked = groupCtx?.value === value;
     const labelRef = useRef(null);
     const descriptionRef = useRef(null);
     const labelTextIsCutOff = useIsTextCutOff(labelRef);
     const descriptionTextIsCutOff = useIsTextCutOff(descriptionRef);
-    const descriptionId = description ? `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}-description` : undefined;
-    const inputId = `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`;
+    const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
+    const inputId = `${groupCtx?.id}-${value}`;
     return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
-                    disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-                    invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, type: "radio", value: value, ...rest }), jsx(Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
-                        invalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-                        disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+                    disabled: groupCtx?.disabled,
+                    invalid: groupCtx?.isInvalid,
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsx(Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !labelTextIsCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                        invalid: groupCtx?.isInvalid,
+                        disabled: groupCtx?.disabled,
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !descriptionTextIsCutOff, label: description, placement: "top", children: jsx("span", { className: cvaRadioItemDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
 const cvaTimeRange = cvaMerge([
@@ -1506,7 +1499,7 @@ const cvaTimeRange = cvaMerge([
  * @returns {JSX.Element} TimeRange component
  */
 const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    const [timeRange, setTimeRange] = React__default.useState(range !== null && range !== void 0 ? range : {
+    const [timeRange, setTimeRange] = React__default.useState(range ?? {
         timeFrom: "",
         timeTo: "",
     });
@@ -1517,7 +1510,7 @@ const TimeRange = ({ id, className, dataTestId, children, range, onChange, disab
         setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom }), children !== null && children !== void 0 ? children : jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo })] }));
+    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom }), children ?? jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo })] }));
 };
 
 const cvaScheduleItem = cvaMerge([
@@ -1590,7 +1583,7 @@ const parseSchedule = (scheduleString) => {
     }
     const schedule = scheduleString.split(",").map(daySchedule => {
         const [day, timeRange] = daySchedule.split("#");
-        const [timeFrom, timeTo] = (timeRange !== null && timeRange !== void 0 ? timeRange : "").split("-");
+        const [timeFrom, timeTo] = (timeRange ?? "").split("-");
         const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
         return {
             day: Number(day),
@@ -1664,7 +1657,7 @@ const serializeSchedule = (weekSchedule) => {
  * @returns {boolean} Whether the schedule is uniform
  */
 const isUniform = (schedule) => {
-    return schedule.every((day, _, collection) => { var _a, _b, _c, _d, _e, _f; return ((_b = (_a = collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) && ((_e = (_d = collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day.range) === null || _f === void 0 ? void 0 : _f.timeTo); });
+    return schedule.every((day, _, collection) => collection[0]?.range?.timeFrom === day.range?.timeFrom && collection[0]?.range?.timeTo === day.range?.timeTo);
 };
 /**
  * Checks if a list of schedule objects are consecutive days
@@ -1716,8 +1709,7 @@ const cvaSearch = cvaMerge([
  * @returns {JSX.Element} Search component
  */
 const Search = forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", ...rest }, ref) => {
-    var _a, _b;
-    return (jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? (jsx(Spinner, { centering: "centered", size: (_a = rest.fieldSize) !== null && _a !== void 0 ? _a : undefined })) : (jsx(Icon, { name: iconName, size: (_b = rest.fieldSize) !== null && _b !== void 0 ? _b : undefined })), ref: ref, suffix: 
+    return (jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? (jsx(Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsx(Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
         //only show the clear button if there is a value and the onClear function is provided
         onClear && value ? (jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
@@ -1849,8 +1841,7 @@ const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, o
 const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
     const ref = React__default.useRef(null);
     React__default.useLayoutEffect(() => {
-        var _a;
-        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
+        onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
     }, [ref, onWidthKnown]);
     return (jsx(Tag, { ref: ref, ...rest, children: children }));
 };
@@ -1869,8 +1860,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
     const childrenWidth = React__default.useRef([]);
     const itemsCount = items.length;
     React__default.useLayoutEffect(() => {
-        var _a;
-        availableWidth.current = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        availableWidth.current = containerRef.current?.offsetWidth || 0;
     }, [containerRef]);
     const onWidthKnownHandler = ({ width: reportedWidth }) => {
         childrenWidth.current.push({ width: reportedWidth + itemsGap });
@@ -1939,11 +1929,10 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
     const customComponents = React.useMemo(() => {
         return {
             ValueContainer: props => {
-                var _a;
                 if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
                     const PLACEHOLDER_KEY = "placeholder";
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const key = props && props.children && props.children[0] ? (_a = props.children[0]) === null || _a === void 0 ? void 0 : _a.key : "";
+                    const key = props && props.children && props.children[0] ? props.children[0]?.key : "";
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const values = props && props.children ? props.children[0] : [];
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
@@ -1964,12 +1953,11 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                 })
                                 : [], postFix: searchInput, width: "100%" })) : (jsxs(Fragment, { children: [tags
                                     ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        var _a;
                                         return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
-                                            }, children: tagProps.children }, (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()));
+                                            }, children: tagProps.children }, tagProps.children?.toString()));
                                     })
                                     : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
                 }
@@ -1980,7 +1968,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
             },
             DropdownIndicator: props => {
                 const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUp", size: "medium" })) : (jsx(Icon, { name: "ChevronDown", size: "medium" }));
-                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsx(components.DropdownIndicator, { ...props, children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon !== null && dropdownIcon !== void 0 ? dropdownIcon : icon }) }));
+                return props.selectProps.isLoading || props.selectProps.isDisabled || readOnly ? null : (jsx(components.DropdownIndicator, { ...props, children: jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ?? icon }) }));
             },
             IndicatorSeparator: () => null,
             ClearIndicator: props => {
@@ -2030,7 +2018,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, optionLabelDescription: getOptionLabelDescription === null || getOptionLabelDescription === void 0 ? void 0 : getOptionLabelDescription(props.data) })) }));
+                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, optionLabelDescription: getOptionLabelDescription?.(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, optionLabelDescription: getOptionLabelDescription?.(props.data) })) }));
             },
             ...componentsProps,
         };
@@ -2148,7 +2136,6 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
  * @returns {UseSelectProps} Select component
  */
 const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, ...props }) => {
-    var _a;
     const refContainer = React__default.useRef(null);
     const refPrefix = React__default.useRef(null);
     const { customStyles } = useCustomStyles({
@@ -2158,7 +2145,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         styles,
         disabled: Boolean(disabled),
     });
-    const [menuIsOpen, setMenuIsOpen] = React__default.useState((_a = props.menuIsOpen) !== null && _a !== void 0 ? _a : false);
+    const [menuIsOpen, setMenuIsOpen] = React__default.useState(props.menuIsOpen ?? false);
     const refMenuIsEnabled = React__default.useRef(true);
     const customComponents = useCustomComponents({
         componentsProps: components,
@@ -2174,7 +2161,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
     });
     const menuPlacement = "auto";
     const openMenuHandler = async () => {
-        onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
+        onMenuOpen?.();
         if (refMenuIsEnabled.current) {
             setMenuIsOpen(true);
         }
@@ -2348,7 +2335,6 @@ const FormFieldSelectAdapter = forwardRef(({ className, dataTestId, helpText, he
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
     useEffect(() => {
-        var _a;
         if (innerValue === undefined) {
             return;
         }
@@ -2356,8 +2342,8 @@ const FormFieldSelectAdapter = forwardRef(({ className, dataTestId, helpText, he
         if (innerValue === "" && innerRef.current) {
             innerRef.current.value = ""; // Set the desired option value
         }
-        (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        innerRef.current?.dispatchEvent(event);
+        onChange?.(event);
     }, [onChange, innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
@@ -2693,7 +2679,7 @@ const validateUrl = (url, required) => {
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
 const UrlInput = forwardRef(({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ...rest }, ref) => {
-    const [url, setUrl] = useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
+    const [url, setUrl] = useState(value?.toString() || defaultValue?.toString());
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
     return (jsx(BaseInput, { dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || disableAction, iconSize: fieldSize, type: "WEB_ADDRESS", value: url })) }));
 });
@@ -2708,17 +2694,16 @@ const UrlField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon
     const htmlForId = id ? id : "urlField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
-        var _a;
-        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+        return (value?.toString() || defaultValue?.toString()) ?? "";
     });
     const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid);
-    const errorType = useMemo(() => validateUrl(innerValue !== null && innerValue !== void 0 ? innerValue : "", rest.required), [rest.required, innerValue]);
+    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 => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!validateUrl(newValue, rest.required));
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }, [onBlur, rest.required]);
     return (jsx(FormGroup, { dataTestId: 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(UrlInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,7 +18,7 @@
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "^1.0.1",
-    "@trackunit/react-components": "^1.0.13",
+    "@trackunit/react-components": "^1.1.0",
     "@trackunit/ui-icons": "^1.0.3",
     "@trackunit/shared-utils": "^1.0.3",
     "@trackunit/i18n-library-translation": "^1.0.7"

package/src/components/SelectField/CreatableSelectField.d.ts

@@ -11,10 +11,10 @@ import { BaseOptionType } from "./FormFieldSelectAdapter";
  * @returns {JSX.Element} CreatableSelectField component
  */
 export declare const CreatableSelectField: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
-    label: string | import("react").ReactNode;
-    tip?: string | import("react").ReactNode;
+    label: string | React.ReactNode;
+    tip?: string | React.ReactNode;
     helpText?: (string | null) | undefined;
-    helpAddon?: string | import("react").ReactNode;
+    helpAddon?: string | React.ReactNode;
     isInvalid?: boolean | undefined;
 } & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;

package/src/components/SelectField/SelectField.d.ts

@@ -10,10 +10,10 @@ import { BaseOptionType } from "./FormFieldSelectAdapter";
  * @returns {JSX.Element} SelectField component
  */
 export declare const SelectField: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
-    label: string | import("react").ReactNode;
-    tip?: string | import("react").ReactNode;
+    label: string | React.ReactNode;
+    tip?: string | React.ReactNode;
     helpText?: (string | null) | undefined;
-    helpAddon?: string | import("react").ReactNode;
+    helpAddon?: string | React.ReactNode;
     isInvalid?: boolean | undefined;
 } & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;