@trackunit/react-form-components 1.3.136 → 1.3.138

package/index.cjs.js

@@ -6,7 +6,7 @@ var reactComponents = require('@trackunit/react-components');
 var usehooksTs = require('usehooks-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
-var React = require('react');
+var react = require('react');
 var stringTs = require('string-ts');
 var sharedUtils = require('@trackunit/shared-utils');
 var polyfill = require('@js-temporal/polyfill');
@@ -19,25 +19,6 @@ var ReactAsyncSelect = require('react-select/async');
 var tailwindMerge = require('tailwind-merge');
 var zod = require('zod');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 var defaultTranslations = {
 	"baseInput.copyAction.toolTip": "Copy value",
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
@@ -396,7 +377,7 @@ const LockReasonRenderer = ({ lockReason, dataTestId, }) => {
 };
 
 // Renders the prefix element or falls back to a default prefix for certain types
-const PrefixRenderer = React.forwardRef(({ prefix, type, dataTestId, disabled }, ref) => {
+const PrefixRenderer = react.forwardRef(({ prefix, type, dataTestId, disabled }, ref) => {
     // Default icons for specific input types
     const defaultPrefixMap = {
         email: jsxRuntime.jsx(reactComponents.Icon, { name: "AtSymbol", size: "small" }),
@@ -442,13 +423,13 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     // Derive final flags
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
-    const beforeContainerRef = React.useRef(null);
+    const beforeContainerRef = react.useRef(null);
     const { width: beforeContainerWidth } = reactComponents.useGeometry(beforeContainerRef);
-    const afterContainerRef = React.useRef(null);
+    const afterContainerRef = react.useRef(null);
     const { width: afterContainerWidth } = reactComponents.useGeometry(afterContainerRef);
     // Keep a reference to the input element
-    const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current, []);
+    const innerRef = react.useRef(null);
+    react.useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxRuntime.jsxs("div", { className: cvaInput$1({
             disabled: renderAsDisabled,
             invalid: isInvalid,
@@ -661,7 +642,7 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { className:
  */
 const Checkbox = ({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ref, ...rest }) => {
     const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
-    const internalRef = React.useRef(null);
+    const internalRef = react.useRef(null);
     const { isTextTruncated: isLabelCutOff, ref: labelRef } = reactComponents.useIsTextTruncated();
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
@@ -728,7 +709,7 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
  */
 const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
     const [t] = useTranslation();
-    const validationStateIcon = React.useMemo(() => {
+    const validationStateIcon = react.useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
@@ -820,26 +801,26 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
+const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
-    const htmlForId = React.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
-    const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current, []);
+    const htmlForId = react.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
+    const innerRef = react.useRef(null);
+    react.useImperativeHandle(ref, () => innerRef.current, []);
     const [t] = useTranslation();
     // Internal state for color value
-    const [innerValue, setInnerValue] = React.useState(propValue || defaultValue || "");
-    const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
-    const errorType = React.useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
-    const error = React.useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
-    const handleInputChange = React.useCallback((event) => {
+    const [innerValue, setInnerValue] = react.useState(propValue || defaultValue || "");
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
+    const errorType = react.useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
+    const error = react.useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    const handleInputChange = react.useCallback((event) => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    const handleBlur = React.useCallback(event => {
+    const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!errorType);
@@ -954,10 +935,10 @@ const DropZoneDefaultLabel = () => (jsxRuntime.jsx(Trans, { components: {
  * @returns {ReactElement} DropZone component
  */
 const DropZone = ({ className, dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ...rest }) => {
-    const [dragActive, setDragActive] = React.useState(false);
-    const [fileDropped, setFileDropped] = React.useState(false);
+    const [dragActive, setDragActive] = react.useState(false);
+    const [fileDropped, setFileDropped] = react.useState(false);
     const [t] = useTranslation();
-    const inputLabelRef = React.useRef(null);
+    const inputLabelRef = react.useRef(null);
     // function that handles drag enter, drag leave and drag over
     const handleDrag = (e) => {
         e.preventDefault();
@@ -1047,11 +1028,11 @@ const validateEmailId = (emailId, required) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = ({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
-    const [email, setEmail] = React.useState("");
+    const [email, setEmail] = react.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
     };
-    const handleChange = React.useCallback(event => {
+    const handleChange = react.useCallback(event => {
         const newValue = event.target.value;
         onChange?.(event);
         setEmail(newValue);
@@ -1069,19 +1050,19 @@ EmailInput.displayName = "EmailInput";
 const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
     const htmlForId = id ? id : "emailField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
-    const [innerValue, setInnerValue] = React.useState(() => {
+    const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (value && isString(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 => {
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (value && isString(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 => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!errorType);
         onBlur?.(event);
     }, [errorType, onBlur]);
-    const handleChange = React.useCallback((event) => {
+    const handleChange = react.useCallback((event) => {
         setInnerValue(event.target.value);
         if (onChange) {
             onChange(event);
@@ -1161,13 +1142,13 @@ NumberInput.displayName = "NumberInput";
 const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
     const htmlForId = id ? id : "numberField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
-    const [innerValue, setInnerValue] = React.useState(() => {
+    const [innerValue, setInnerValue] = react.useState(() => {
         return Number(value?.toString()) || Number(defaultValue?.toString());
     });
-    const [renderAsInvalid, setRenderAsInvalid] = React.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
         !!validateNumber(value?.toString(), rest.required, rest.min, rest.max));
-    const errorType = React.useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
-    const error = React.useMemo(() => {
+    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
         if (errorMessage) {
             return errorMessage;
@@ -1177,12 +1158,12 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         }
         return errorMessage;
     }, [errorMessage, errorType, rest.max, rest.min, t]);
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (errorMessage) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
     }, [errorMessage]);
-    const handleBlur = React.useCallback(event => {
+    const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue.toString());
         // for the case when a custom error message is provided
@@ -1194,7 +1175,7 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         }
         onBlur?.(event);
     }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
-    const handleChange = React.useCallback((event) => {
+    const handleChange = react.useCallback((event) => {
         setInnerValue(event.target.value);
         if (onChange) {
             onChange(event);
@@ -1209,12 +1190,11 @@ const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
     "transition",
     "bg-white",
     "outline",
-    "outline-2",
+    "outline-1",
     "outline-slate-300",
     "hover:bg-slate-100",
     "focus:bg-slate-200",
     "active:bg-slate-200",
-    "disabled:bg-slate-200",
     "peer-checked:bg-primary-50",
     "peer-checked:outline-primary-600",
     "peer-checked:outline-2",
@@ -1224,10 +1204,11 @@ const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
     "items-center",
     "text-center",
     "rounded-md",
+    "relative"
 ], {
     variants: {
         disabled: {
-            true: ["cursor-not-allowed"],
+            true: ["cursor-not-allowed", "bg-slate-100"],
             false: ["cursor-pointer"],
         },
         layout: {
@@ -1250,27 +1231,63 @@ const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
 });
 const cvaOptionCardContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
 const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
-const cvaCompactOptionCardText = cssClassVarianceUtilities.cvaMerge([
-    "hover:text-slate-700",
-    "focus:text-slate-800",
-    "active:text-slate-800",
-    "disabled:text-slate-400",
-    "text-sm",
+const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge([
     "text-slate-600",
     "whitespace-nowrap",
-]);
+], {
+    variants: {
+        layout: {
+            default: ["text-lg"],
+            compact: ["text-sm"]
+        },
+        disabled: {
+            true: ["text-slate-400"],
+            false: ["focus:text-slate-800", "active:text-slate-800"]
+        },
+    },
+});
+const cvaOptionCardText = cssClassVarianceUtilities.cvaMerge([
+    "text-slate-600",
+    "text-sm"
+], {
+    variants: {
+        type: {
+            subheading: ["font-medium"],
+            description: ["font-normal"]
+        },
+        disabled: {
+            true: ["text-slate-400"],
+            false: ["focus:text-slate-800", "active:text-slate-800"]
+        }
+    }
+});
 const cvaInput = cssClassVarianceUtilities.cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
-const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-secondary-400"]);
+const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-slate-400"], {
+    variants: {
+        disabled: {
+            true: ["!text-slate-400"],
+            false: [""]
+        },
+    },
+});
+const cvaTag = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        layout: {
+            default: ["absolute", "top-2", "right-2"],
+            compact: [],
+        },
+    },
+});
 
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout = "default", ref, ...rest }) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, 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", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
+    const subContent = react.useMemo(() => (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), children: description })) : null] })), [subheading, description, contentClassName, disabled]);
     return (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-fit", 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}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
-                            ? React.cloneElement(icon, { className: cvaCustomImage({ 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, { subtle: disabled, variant: "secondary", children: heading })) : (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaCompactOptionCardText(), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null] })] }) }));
+                            ? 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] })] }) }));
 };
 OptionCard.displayName = "OptionCard";
 
@@ -1280,7 +1297,7 @@ OptionCard.displayName = "OptionCard";
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
 const PasswordInput = ({ ref, fieldSize, ...rest }) => {
-    const [showPassword, setShowPassword] = React.useState(false);
+    const [showPassword, setShowPassword] = react.useState(false);
     return (jsxRuntime.jsx(BaseInput, { ref: ref, ...rest, actions: jsxRuntime.jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
 };
 PasswordInput.displayName = "PasswordInput";
@@ -1295,7 +1312,7 @@ PasswordInput.displayName = "PasswordInput";
 const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "passwordField-" + sharedUtils.uuidv4();
-    const handleChange = React.useCallback((event) => {
+    const handleChange = react.useCallback((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 }) }));
@@ -1366,41 +1383,41 @@ const DEFAULT_COUNTRY_CODE = undefined;
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  */
 const PhoneInput = ({ dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }) => {
-    const [innerValue, setInnerValue] = React.useState(() => {
+    const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const fieldIsFocused = React.useRef(false);
-    const [countryCode, setCountryCode] = React.useState(DEFAULT_COUNTRY_CODE);
-    const determineCountry = React.useCallback((newValue) => {
+    const fieldIsFocused = react.useRef(false);
+    const [countryCode, setCountryCode] = react.useState(DEFAULT_COUNTRY_CODE);
+    const determineCountry = react.useCallback((newValue) => {
         const asYouType = new parsePhoneNumberFromString.AsYouType();
         asYouType.input(newValue);
         setCountryCode(asYouType.getCountry());
     }, []);
-    const handleChange = React.useCallback(event => {
+    const handleChange = react.useCallback(event => {
         const newValue = event.target.value;
         event.target.value = parsePhoneNumberFromString.parseIncompletePhoneNumber(newValue);
         onChange?.(event);
         setInnerValue(newValue);
         determineCountry(newValue);
     }, [onChange, determineCountry]);
-    const makePretty = React.useCallback((newValue) => {
+    const makePretty = react.useCallback((newValue) => {
         const asYouType = new parsePhoneNumberFromString.AsYouType();
         const pretty = asYouType.input(newValue);
         setInnerValue(pretty);
         setCountryCode(asYouType.getCountry());
     }, []);
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (!fieldIsFocused.current) {
             makePretty(typeof value === "string" ? value : "");
         }
     }, [makePretty, value]);
-    const handleBlur = React.useCallback(event => {
+    const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
         makePretty(newValue);
         onBlur?.(event);
         fieldIsFocused.current = false;
     }, [makePretty, onBlur]);
-    const handleFocus = React.useCallback(event => {
+    const handleFocus = react.useCallback(event => {
         const newValue = event.target.value;
         const noneFormattedValue = parsePhoneNumberFromString.parseIncompletePhoneNumber(newValue);
         setInnerValue(noneFormattedValue);
@@ -1479,13 +1496,13 @@ const phoneErrorMessage = (phoneNumber, required) => {
 const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ref, ...rest }) => {
     const htmlForId = id ? id : "phoneField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
-    const [innerValue, setInnerValue] = React.useState(() => {
+    const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? undefined;
     });
-    const [renderAsInvalid, setRenderAsInvalid] = React.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
         !!phoneErrorMessage(value?.toString(), rest.required));
-    const errorType = React.useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
-    const error = React.useMemo(() => {
+    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
         if (errorMessage) {
             return errorMessage;
@@ -1495,10 +1512,10 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         }
         return errorMessage;
     }, [errorMessage, errorType, t]);
-    React.useEffect(() => {
+    react.useEffect(() => {
         setRenderAsInvalid(Boolean(errorMessage));
     }, [errorMessage]);
-    const handleBlur = React.useCallback(event => {
+    const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         // for the case when a custom error message is provided
@@ -1594,7 +1611,7 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     ],
 });
 
-const RadioGroupContext = React__namespace.createContext(null);
+const RadioGroupContext = react.createContext(null);
 
 /**
  * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
@@ -1627,7 +1644,7 @@ RadioGroup.displayName = "RadioGroup";
  * @returns {ReactElement} RadioItem component
  */
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
-    const groupCtx = React.useContext(RadioGroupContext);
+    const groupCtx = react.useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
@@ -1660,7 +1677,7 @@ const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
  * @returns {ReactElement} TimeRange component
  */
 const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    const [timeRange, setTimeRange] = React.useState(range ?? {
+    const [timeRange, setTimeRange] = react.useState(range ?? {
         timeFrom: DEFAULT_TIME,
         timeTo: DEFAULT_TIME,
     });
@@ -2014,8 +2031,8 @@ const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, o
  * @returns {ReactElement} TagWithWidth component
  */
 const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
-    const ref = React.useRef(null);
-    React.useLayoutEffect(() => {
+    const ref = react.useRef(null);
+    react.useLayoutEffect(() => {
         onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
     }, [ref, onWidthKnown]);
     return (jsxRuntime.jsx(reactComponents.Tag, { ref: ref, ...rest, children: children }));
@@ -2028,19 +2045,19 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
  * @returns {ReactElement} TagsContainer
  */
 const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
-    const containerRef = React.useRef(null);
-    const [isReady, setIsReady] = React.useState(false);
-    const [counterWidth, setCounterWidth] = React.useState(0);
-    const [availableSpaceWidth, setAvailableSpaceWidth] = React.useState(0);
-    const [childrenWidths, setChildrenWidths] = React.useState([]);
+    const containerRef = react.useRef(null);
+    const [isReady, setIsReady] = react.useState(false);
+    const [counterWidth, setCounterWidth] = react.useState(0);
+    const [availableSpaceWidth, setAvailableSpaceWidth] = react.useState(0);
+    const [childrenWidths, setChildrenWidths] = react.useState([]);
     const itemsCount = items.length;
     const dimensions = reactComponents.useResize();
     const { width: windowWidth } = reactComponents.useDebounce(dimensions, 100);
-    React.useEffect(() => {
+    react.useEffect(() => {
         const containerWidth = containerRef.current?.offsetWidth || 0;
         setAvailableSpaceWidth(containerWidth);
     }, [windowWidth]);
-    const onWidthKnownHandler = React.useCallback(({ width: reportedWidth }) => {
+    const onWidthKnownHandler = react.useCallback(({ width: reportedWidth }) => {
         setChildrenWidths(prev => {
             const next = [...prev, { width: reportedWidth + itemsGap }];
             if (next.length === itemsCount) {
@@ -2049,7 +2066,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
             return next;
         });
     }, [itemsCount, itemsGap]);
-    const renderedElements = React.useMemo(() => {
+    const renderedElements = react.useMemo(() => {
         const requiredSpace = childrenWidths.reduce((previous, current) => {
             return previous + current.width;
         }, 0);
@@ -2117,7 +2134,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
 const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
-    const customComponents = React.useMemo(() => {
+    const customComponents = react.useMemo(() => {
         return {
             ValueContainer: props => {
                 if (props.isMulti && Array.isArray(props.children) && props.children.length > 0) {
@@ -2243,7 +2260,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
 const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }) => {
-    const customStyles = React.useMemo(() => {
+    const customStyles = react.useMemo(() => {
         return {
             control: base => {
                 return {
@@ -2343,7 +2360,7 @@ const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabl
  * @returns {UseSelectProps} Select component
  */
 const useSelect = ({ id, className, dataTestId = "select", prefix, async, 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, fieldSize = "medium", ...props }) => {
-    const refContainer = React.useRef(document.createElement("div"));
+    const refContainer = react.useRef(document.createElement("div"));
     const { customStyles } = useCustomStyles({
         refContainer,
         maxSelectedDisplayCount,
@@ -2351,8 +2368,8 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMen
         disabled: Boolean(disabled),
         fieldSize,
     });
-    const [menuIsOpen, setMenuIsOpen] = React.useState(props.menuIsOpen ?? false);
-    const [menuIsEnabled, setMenuIsEnabled] = React.useState(true);
+    const [menuIsOpen, setMenuIsOpen] = react.useState(props.menuIsOpen ?? false);
+    const [menuIsEnabled, setMenuIsEnabled] = react.useState(true);
     const customComponents = useCustomComponents({
         componentsProps: components,
         disabled: Boolean(disabled),
@@ -2399,7 +2416,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMen
 const CreatableSelect = (props) => {
     const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
-    const reactCreatableSelectProps = React.useMemo(() => ({
+    const reactCreatableSelectProps = react.useMemo(() => ({
         value,
         menuPlacement,
         maxMenuHeight,
@@ -2471,7 +2488,7 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
 const Select = (props) => {
     const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
-    const reactSelectProps = React.useMemo(() => ({
+    const reactSelectProps = react.useMemo(() => ({
         value,
         menuPlacement,
         maxMenuHeight,
@@ -2542,15 +2559,15 @@ Select.displayName = "Select";
  */
 const FormFieldSelectAdapter = ({ className, dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...rest }) => {
     const isFirstRender = reactComponents.useIsFirstRender();
-    const [innerValue, setInnerValue] = React.useState(value || defaultValue);
-    React.useEffect(() => {
+    const [innerValue, setInnerValue] = react.useState(value || defaultValue);
+    react.useEffect(() => {
         setInnerValue(defaultValue);
     }, [defaultValue]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = React.useMemo(() => (id ? id : "selectField-" + sharedUtils.uuidv4()), [id]);
-    const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current, []);
-    React.useEffect(() => {
+    const htmlFor = react.useMemo(() => (id ? id : "selectField-" + sharedUtils.uuidv4()), [id]);
+    const innerRef = react.useRef(null);
+    react.useImperativeHandle(ref, () => innerRef.current, []);
+    react.useEffect(() => {
         if (innerValue === undefined) {
             return;
         }
@@ -2682,10 +2699,10 @@ const TextLengthIndicator = ({ length, maxLength }) => {
  *
  */
 const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }) => {
-    const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+    const [valueLength, setValueLength] = react.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + sharedUtils.uuidv4();
-    const handleChange = React.useCallback((event) => {
+    const handleChange = react.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
@@ -2700,10 +2717,10 @@ TextAreaField.displayName = "TextAreaField";
  * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
  */
 const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, isWarning, ref, ...rest }) => {
-    const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+    const [valueLength, setValueLength] = react.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + sharedUtils.uuidv4();
-    const handleChange = React.useCallback((event) => {
+    const handleChange = react.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
@@ -2808,8 +2825,8 @@ const cvaToggleSwitchThumb = cssClassVarianceUtilities.cvaMerge(["block", "round
  * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
  * @returns {ReactElement} ToggleSwitch component
  */
-const ToggleSwitch = React.forwardRef(({ onChange, onClick, preventDefaultOnClick, className, dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
-    const localInputRef = React.useRef(null);
+const ToggleSwitch = react.forwardRef(({ onChange, onClick, preventDefaultOnClick, className, dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
+    const localInputRef = react.useRef(null);
     const inputRef = typeof ref === "function" ? localInputRef : ref || localInputRef;
     const handleWrapperClick = (e) => {
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
@@ -2935,7 +2952,7 @@ const validateUrl = (url, required) => {
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
 const UrlInput = ({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
-    const [url, setUrl] = React.useState(value?.toString() || 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 || Boolean(disabled) || disableAction, size: fieldSize ?? undefined, type: "WEB_ADDRESS", value: url })) }));
 };
@@ -2949,13 +2966,13 @@ UrlInput.displayName = "UrlField";
 const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, onBlur, ref, ...rest }) => {
     const htmlForId = id ? id : "urlField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
-    const [innerValue, setInnerValue] = React.useState(() => {
+    const [innerValue, setInnerValue] = react.useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
-    const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (value && isString(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 => {
+    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (value && isString(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 => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         setRenderAsInvalid(!!validateUrl(newValue, rest.required));
@@ -2975,7 +2992,7 @@ UrlField.displayName = "UrlField";
  */
 const useGetPhoneValidationRules = () => {
     const [t] = useTranslation();
-    const getPhoneNumberValidationRules = React.useCallback((skipValidation = false) => {
+    const getPhoneNumberValidationRules = react.useCallback((skipValidation = false) => {
         const defaultRules = {};
         const pattern = {
             ...defaultRules,
@@ -3023,7 +3040,7 @@ const usePhoneInput = () => {
  */
 const useZodValidators = () => {
     const [t] = useTranslation();
-    const ZodPhoneValidator = React.useMemo(() => zod.z.string().superRefine((phoneNumber, ctx) => {
+    const ZodPhoneValidator = react.useMemo(() => zod.z.string().superRefine((phoneNumber, ctx) => {
         if (!phoneNumber) {
             return undefined;
         }
@@ -3065,7 +3082,7 @@ const useZodValidators = () => {
             });
         }
     }), [t]);
-    return React.useMemo(() => ({ ZodPhoneValidator }), [ZodPhoneValidator]);
+    return react.useMemo(() => ({ ZodPhoneValidator }), [ZodPhoneValidator]);
 };
 
 /*

package/index.esm.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Text, Heading, Spinner, MenuItem, Tag, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Text, Heading, Tag, Spinner, MenuItem, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
-import * as React from 'react';
-import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, useEffect, cloneElement, useContext, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, useEffect, cloneElement, createContext, useContext, useLayoutEffect } from 'react';
 import { titleCase } from 'string-ts';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Temporal } from '@js-temporal/polyfill';
@@ -1190,12 +1189,11 @@ const cvaOptionCardLabel = cvaMerge([
     "transition",
     "bg-white",
     "outline",
-    "outline-2",
+    "outline-1",
     "outline-slate-300",
     "hover:bg-slate-100",
     "focus:bg-slate-200",
     "active:bg-slate-200",
-    "disabled:bg-slate-200",
     "peer-checked:bg-primary-50",
     "peer-checked:outline-primary-600",
     "peer-checked:outline-2",
@@ -1205,10 +1203,11 @@ const cvaOptionCardLabel = cvaMerge([
     "items-center",
     "text-center",
     "rounded-md",
+    "relative"
 ], {
     variants: {
         disabled: {
-            true: ["cursor-not-allowed"],
+            true: ["cursor-not-allowed", "bg-slate-100"],
             false: ["cursor-pointer"],
         },
         layout: {
@@ -1231,27 +1230,63 @@ const cvaOptionCardLabel = cvaMerge([
 });
 const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
 const cvaOptionCardContainer = cvaMerge(["contents"]);
-const cvaCompactOptionCardText = cvaMerge([
-    "hover:text-slate-700",
-    "focus:text-slate-800",
-    "active:text-slate-800",
-    "disabled:text-slate-400",
-    "text-sm",
+const cvaOptionCardTitle = cvaMerge([
     "text-slate-600",
     "whitespace-nowrap",
-]);
+], {
+    variants: {
+        layout: {
+            default: ["text-lg"],
+            compact: ["text-sm"]
+        },
+        disabled: {
+            true: ["text-slate-400"],
+            false: ["focus:text-slate-800", "active:text-slate-800"]
+        },
+    },
+});
+const cvaOptionCardText = cvaMerge([
+    "text-slate-600",
+    "text-sm"
+], {
+    variants: {
+        type: {
+            subheading: ["font-medium"],
+            description: ["font-normal"]
+        },
+        disabled: {
+            true: ["text-slate-400"],
+            false: ["focus:text-slate-800", "active:text-slate-800"]
+        }
+    }
+});
 const cvaInput = cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
-const cvaCustomImage = cvaMerge(["text-secondary-400"]);
+const cvaCustomImage = cvaMerge(["text-slate-400"], {
+    variants: {
+        disabled: {
+            true: ["!text-slate-400"],
+            false: [""]
+        },
+    },
+});
+const cvaTag = cvaMerge([], {
+    variants: {
+        layout: {
+            default: ["absolute", "top-2", "right-2"],
+            compact: [],
+        },
+    },
+});
 
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout = "default", ref, ...rest }) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, 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", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsx(Text, { align: "center", subtle: disabled, type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
+    const subContent = useMemo(() => (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), children: subheading })) : null, description ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), children: description })) : null] })), [subheading, description, contentClassName, disabled]);
     return (jsx(Tooltip, { className: "w-fit", 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}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
-                            ? cloneElement(icon, { className: cvaCustomImage({ 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, { subtle: disabled, variant: "secondary", children: heading })) : (jsx(Text, { align: "center", className: cvaCompactOptionCardText(), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null] })] }) }));
+                            ? 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] })] }) }));
 };
 OptionCard.displayName = "OptionCard";
 
@@ -1575,7 +1610,7 @@ const cvaRadioItem = cvaMerge([
     ],
 });
 
-const RadioGroupContext = React.createContext(null);
+const RadioGroupContext = createContext(null);
 
 /**
  * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.3.136",
+  "version": "1.3.138",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "zod": "3.22.4",
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.100",
-    "@trackunit/react-components": "1.4.120",
-    "@trackunit/ui-icons": "1.3.102",
-    "@trackunit/shared-utils": "1.5.100",
-    "@trackunit/ui-design-tokens": "1.3.100",
-    "@trackunit/i18n-library-translation": "1.3.111",
+    "@trackunit/css-class-variance-utilities": "1.3.101",
+    "@trackunit/react-components": "1.4.122",
+    "@trackunit/ui-icons": "1.3.103",
+    "@trackunit/shared-utils": "1.5.101",
+    "@trackunit/ui-design-tokens": "1.3.101",
+    "@trackunit/i18n-library-translation": "1.3.112",
     "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",

package/src/components/OptionCard/OptionCard.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, IconProps } from "@trackunit/react-components";
+import { CommonProps, IconProps, TagProps } from "@trackunit/react-components";
 import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
 export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>, CommonProps {
     /**
@@ -33,6 +33,10 @@ export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
      * The layout of the component.
      */
     layout?: "compact" | "default";
+    /**
+     * Props for the tag.
+     */
+    tagProps?: TagProps;
 }
 interface CustomImage {
     src: string;
@@ -42,7 +46,7 @@ interface CustomImage {
  * A card version of a radio button that includes an icon, headings and a description.
  */
 export declare const OptionCard: {
-    ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout, ref, ...rest }: OptionCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout, ref, tagProps, ...rest }: OptionCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -4,6 +4,18 @@ export declare const cvaOptionCardLabel: (props?: ({
 } & 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;
-export declare const cvaCompactOptionCardText: (props?: import("class-variance-authority/dist/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;
+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;
-export declare const cvaCustomImage: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCustomImage: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTag: (props?: ({
+    layout?: "default" | "compact" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/RadioGroup/RadioGroupContext.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import { ChangeEvent } from "react";
 interface RadioGroupContextProps {
     id: string;
     name: string;
     value: string | number;
     disabled?: boolean;
     isInvalid?: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextProps | null>;
 export {};