@trackunit/react-form-components 0.1.58 → 0.1.60

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 React = require('react');
-var uuid = require('uuid');
+var sharedUtils = require('@trackunit/shared-utils');
 var dateFns = require('date-fns');
 var parsePhoneNumberFromString = require('libphonenumber-js');
 var reactHookForm = require('react-hook-form');
@@ -14,7 +14,6 @@ var ReactSelect = require('react-select');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
-var sharedUtils = require('@trackunit/shared-utils');
 var tailwindMerge = require('tailwind-merge');
 var zod = require('zod');
 
@@ -635,7 +634,7 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
  * _**Do use**_ the CheckboxField for boolean input.
  */
 const CheckboxField = React.forwardRef(({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ...rest }, ref) => {
-    const htmlForId = id ? id : "checkboxField-" + uuid.v4();
+    const htmlForId = id ? id : "checkboxField-" + sharedUtils.uuidv4();
     return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(Checkbox, { checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
 });
 CheckboxField.displayName = "CheckboxField";
@@ -689,7 +688,7 @@ const isValidHEXColor = (value) => {
  *
  */
 const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, ...rest }, ref) => {
-    const htmlForId = React.useMemo(() => (id ? id : "colorField-" + uuid.v4()), [id]);
+    const htmlForId = React.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
     const [t] = useTranslation();
@@ -745,7 +744,7 @@ DateInput.displayName = "DateInput";
  */
 const DateField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlForId = id ? id : "dateField-" + uuid.v4();
+    const htmlForId = id ? id : "dateField-" + sharedUtils.uuidv4();
     return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(DateInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 DateField.displayName = "DateField";
@@ -923,7 +922,7 @@ EmailInput.displayName = "EmailInput";
  *
  */
 const EmailField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, disabled, onChange, onBlur, isInvalid = false, ...rest }, ref) => {
-    const htmlForId = id ? id : "emailField-" + uuid.v4();
+    const htmlForId = id ? id : "emailField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
         var _a;
@@ -1016,7 +1015,7 @@ NumberInput.displayName = "NumberInput";
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
 const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ...rest }, ref) => {
-    const htmlForId = id ? id : "numberField-" + uuid.v4();
+    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());
@@ -1087,7 +1086,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-" + uuid.v4();
+    const htmlForId = id !== null && id !== void 0 ? 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`, 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] })] }));
@@ -1114,7 +1113,7 @@ PasswordInput.displayName = "PasswordInput";
  */
 const PasswordField = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "passwordField-" + uuid.v4();
+    const htmlFor = id ? id : "passwordField-" + sharedUtils.uuidv4();
     const handleChange = React.useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
@@ -1301,7 +1300,7 @@ const phoneErrorMessage = (phoneNumber, required) => {
  * @returns {JSX.Element} - The PhoneField component.
  */
 const PhoneField = React.forwardRef(({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ...rest }, ref) => {
-    const htmlForId = id ? id : "phoneField-" + uuid.v4();
+    const htmlForId = id ? id : "phoneField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
         var _a;
@@ -2392,7 +2391,7 @@ const FormFieldSelectAdapter = React.forwardRef(({ className, dataTestId, helpTe
         setInnerValue(defaultValue);
     }, [defaultValue]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = React.useMemo(() => (id ? id : "selectField-" + uuid.v4()), [id]);
+    const htmlFor = React.useMemo(() => (id ? id : "selectField-" + sharedUtils.uuidv4()), [id]);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
     React.useEffect(() => {
@@ -2529,7 +2528,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
 const TextAreaField = React__namespace.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    const htmlForId = id ? id : "textAreaField-" + uuid.v4();
+    const htmlForId = id ? id : "textAreaField-" + sharedUtils.uuidv4();
     const handleChange = React__namespace.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
@@ -2551,7 +2550,7 @@ TextAreaField.displayName = "TextAreaField";
 const TextField = React__namespace.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "textField-" + uuid.v4();
+    const htmlFor = id ? id : "textField-" + sharedUtils.uuidv4();
     const handleChange = React__namespace.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
@@ -2571,7 +2570,7 @@ TextField.displayName = "TextField";
  */
 const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "timeRangeField-" + uuid.v4();
+    const htmlFor = id ? id : "timeRangeField-" + sharedUtils.uuidv4();
     return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
@@ -2676,7 +2675,7 @@ UploadInput.displayName = "UploadInput";
  */
 const UploadField = React.forwardRef(({ label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    const htmlForId = id ? id : "uploadField-" + uuid.v4();
+    const htmlForId = id ? id : "uploadField-" + sharedUtils.uuidv4();
     return (jsxRuntime.jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 UploadField.displayName = "UploadField";
@@ -2730,7 +2729,7 @@ UrlInput.displayName = "UrlField";
  *
  */
 const UrlField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, onBlur, ...rest }, ref) => {
-    const htmlForId = id ? id : "urlField-" + uuid.v4();
+    const htmlForId = id ? id : "urlField-" + sharedUtils.uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
         var _a;

package/index.esm.js

@@ -5,7 +5,7 @@ import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
 import React__default, { isValidElement, forwardRef, useMemo, useState, useCallback, useRef, cloneElement, useEffect, useImperativeHandle } from 'react';
-import { v4 } from 'uuid';
+import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { format } from 'date-fns';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
 import { Controller } from 'react-hook-form';
@@ -14,7 +14,6 @@ export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
-import { nonNullable } from '@trackunit/shared-utils';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 
@@ -616,7 +615,7 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
  * _**Do use**_ the CheckboxField for boolean input.
  */
 const CheckboxField = forwardRef(({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ...rest }, ref) => {
-    const htmlForId = id ? id : "checkboxField-" + v4();
+    const htmlForId = id ? id : "checkboxField-" + uuidv4();
     return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsx(Checkbox, { checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
 });
 CheckboxField.displayName = "CheckboxField";
@@ -670,7 +669,7 @@ const isValidHEXColor = (value) => {
  *
  */
 const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, ...rest }, ref) => {
-    const htmlForId = useMemo(() => (id ? id : "colorField-" + v4()), [id]);
+    const htmlForId = useMemo(() => (id ? id : "colorField-" + uuidv4()), [id]);
     const innerRef = React__default.useRef(null);
     React__default.useImperativeHandle(ref, () => innerRef.current, []);
     const [t] = useTranslation();
@@ -726,7 +725,7 @@ DateInput.displayName = "DateInput";
  */
 const DateField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlForId = id ? id : "dateField-" + v4();
+    const htmlForId = id ? id : "dateField-" + uuidv4();
     return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(DateInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 DateField.displayName = "DateField";
@@ -904,7 +903,7 @@ EmailInput.displayName = "EmailInput";
  *
  */
 const EmailField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, disabled, onChange, onBlur, isInvalid = false, ...rest }, ref) => {
-    const htmlForId = id ? id : "emailField-" + v4();
+    const htmlForId = id ? id : "emailField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         var _a;
@@ -997,7 +996,7 @@ NumberInput.displayName = "NumberInput";
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
 const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ...rest }, ref) => {
-    const htmlForId = id ? id : "numberField-" + v4();
+    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());
@@ -1068,7 +1067,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-" + v4();
+    const htmlForId = id !== null && id !== void 0 ? 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`, 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] })] }));
@@ -1095,7 +1094,7 @@ PasswordInput.displayName = "PasswordInput";
  */
 const PasswordField = forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "passwordField-" + v4();
+    const htmlFor = id ? id : "passwordField-" + uuidv4();
     const handleChange = useCallback((event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange]);
@@ -1282,7 +1281,7 @@ const phoneErrorMessage = (phoneNumber, required) => {
  * @returns {JSX.Element} - The PhoneField component.
  */
 const PhoneField = forwardRef(({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ...rest }, ref) => {
-    const htmlForId = id ? id : "phoneField-" + v4();
+    const htmlForId = id ? id : "phoneField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         var _a;
@@ -2373,7 +2372,7 @@ const FormFieldSelectAdapter = forwardRef(({ className, dataTestId, helpText, he
         setInnerValue(defaultValue);
     }, [defaultValue]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = useMemo(() => (id ? id : "selectField-" + v4()), [id]);
+    const htmlFor = useMemo(() => (id ? id : "selectField-" + uuidv4()), [id]);
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
     useEffect(() => {
@@ -2510,7 +2509,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
 const TextAreaField = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    const htmlForId = id ? id : "textAreaField-" + v4();
+    const htmlForId = id ? id : "textAreaField-" + uuidv4();
     const handleChange = React.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
@@ -2532,7 +2531,7 @@ TextAreaField.displayName = "TextAreaField";
 const TextField = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
     const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "textField-" + v4();
+    const htmlFor = id ? id : "textField-" + uuidv4();
     const handleChange = React.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
@@ -2552,7 +2551,7 @@ TextField.displayName = "TextField";
  */
 const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    const htmlFor = id ? id : "timeRangeField-" + v4();
+    const htmlFor = id ? id : "timeRangeField-" + uuidv4();
     return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, { className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
@@ -2657,7 +2656,7 @@ UploadInput.displayName = "UploadInput";
  */
 const UploadField = forwardRef(({ label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId, ...rest }, ref) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    const htmlForId = id ? id : "uploadField-" + v4();
+    const htmlForId = id ? id : "uploadField-" + uuidv4();
     return (jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 UploadField.displayName = "UploadField";
@@ -2711,7 +2710,7 @@ UrlInput.displayName = "UrlField";
  *
  */
 const UrlField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, onBlur, ...rest }, ref) => {
-    const htmlForId = id ? id : "urlField-" + v4();
+    const htmlForId = id ? id : "urlField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
         var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,7 +10,6 @@
     "@trackunit/react-components": "*",
     "@trackunit/ui-icons": "*",
     "react": "18.3.1",
-    "uuid": "^9.0.1",
     "usehooks-ts": "^3.1.0",
     "date-fns": "^2.30.0",
     "react-select": "^5.8.0",