@trackunit/react-form-components 1.3.28 → 1.3.33

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.3.28",
+  "version": "1.3.33",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=20.x"
   },
   "dependencies": {
-    "react": "18.3.1",
+    "react": "19.0.0",
     "usehooks-ts": "^3.1.0",
+    "react-select": "^5.10.0",
     "@js-temporal/polyfill": "^0.4.4",
     "libphonenumber-js": "1.10.36",
+    "@testing-library/react": "16.2.0",
     "jest-fetch-mock": "^3.0.3",
     "zod": "3.22.4",
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.23",
-    "@trackunit/react-components": "1.4.23",
-    "@trackunit/ui-icons": "1.3.23",
-    "@trackunit/shared-utils": "1.5.23",
-    "@trackunit/ui-design-tokens": "1.3.23",
-    "@trackunit/i18n-library-translation": "1.3.24",
-    "string-ts": "^2.0.0",
-    "react-select": "^5.8.0",
-    "@testing-library/react": "15.0.6"
+    "@trackunit/css-class-variance-utilities": "1.3.28",
+    "@trackunit/react-components": "1.4.28",
+    "@trackunit/ui-icons": "1.3.28",
+    "@trackunit/shared-utils": "1.5.28",
+    "@trackunit/ui-design-tokens": "1.3.28",
+    "@trackunit/i18n-library-translation": "1.3.29",
+    "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,4 +1,5 @@
 import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
+import { RefObject } from "react";
 export type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY" | "EDIT";
 interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
@@ -8,7 +9,7 @@ interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
      * The value to be passed into the button.
      */
-    value?: string | React.RefObject<HTMLInputElement> | null;
+    value?: string | RefObject<HTMLInputElement | null> | null;
 }
 interface GenericActionButtonProps extends AbstractActionButtonProps {
     /**
@@ -28,7 +29,7 @@ interface CopyActionButtonProps extends AbstractActionButtonProps {
     /**
      * The value to be passed into the button.
      */
-    value?: React.RefObject<HTMLInputElement>;
+    value?: RefObject<HTMLInputElement | null>;
 }
 interface EditActionButtonProps extends AbstractActionButtonProps {
     /**
@@ -38,14 +39,14 @@ interface EditActionButtonProps extends AbstractActionButtonProps {
     /**
      * The value to be passed into the button.
      */
-    value?: React.RefObject<HTMLInputElement>;
+    value?: React.RefObject<HTMLInputElement | null>;
 }
 type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps | EditActionButtonProps;
 /**
  * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
  *
  * @param {ActionButtonProps} props - The props for the ActionButton component
- * @returns {JSX.Element} ActionButton component
+ * @returns {ReactElement} ActionButton component
  */
 export declare const ActionButton: ({ type, value, dataTestId, size, disabled, className, onClick }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/BaseInput/BaseInput.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { InputHTMLAttributes, ReactNode } from "react";
+import { InputHTMLAttributes, ReactNode, Ref } from "react";
 import { FormComponentSizes } from "../../types";
 import { LockedForReasons } from "./InputLockReasonTooltip";
 import { BaseInputActionTypes } from "./components";
@@ -62,6 +62,10 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * Flag or object to set the input as readOnly. If an object, shows a tooltip with the reason.
      */
     readOnly?: boolean | LockedForReasons;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.
@@ -71,5 +75,8 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
-export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const BaseInput: {
+    ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize, nonInteractive, inputClassName, placeholder, isWarning, type, genericAction, style, ref, ...rest }: BaseInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/BaseInput/components/GenericActionsRenderer.d.ts

@@ -5,7 +5,7 @@ type GenericActionsRendererProps = {
     genericAction?: BaseInputActionTypes;
     disabled?: boolean;
     fieldSize?: FormComponentSizes;
-    innerRef: RefObject<HTMLInputElement>;
+    innerRef: RefObject<HTMLInputElement | null>;
     tooltipLabel?: string;
 };
 export declare const GenericActionsRenderer: ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }: GenericActionsRendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/components/Checkbox/CheckIcon.d.ts

@@ -5,7 +5,7 @@ interface CheckIconProps extends CommonProps {
  * The CheckIcon component is used by the checkbox to display the checked state.
  *
  * @param {CheckIconProps} props - The props for the CheckIcon component
- * @returns {JSX.Element} CheckIcon component
+ * @returns {ReactElement} CheckIcon component
  */
 export declare const CheckIcon: ({ className, dataTestId }: CheckIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { InputHTMLAttributes, ReactNode } from "react";
+import { InputHTMLAttributes, ReactNode, Ref } from "react";
 export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * A string element to be displayed as a label
@@ -35,6 +35,10 @@ export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttribut
      * An boolean flag to stop propagation of the click event
      */
     stopPropagation?: boolean;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
@@ -48,6 +52,8 @@ export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttribut
  * @description A reference to the input element is provided as the `ref` prop.
  * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
  * @param {CheckboxProps} props - The props for the Checkbox component
- * @returns {JSX.Element} Checkbox component
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: {
+    ({ className, dataTestId, onChange, checked, disabled, isInvalid, readOnly, indeterminate, suffix, label, tabIndex, stopPropagation, ref, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/components/Checkbox/IndeterminateIcon.d.ts

@@ -2,7 +2,7 @@
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
  *
  * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
- * @returns {JSX.Element} IndeterminateIcon component
+ * @returns {ReactElement} IndeterminateIcon component
  */
 export declare const IndeterminateIcon: ({ className }: {
     className?: string;

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

@@ -1,14 +1,21 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { CheckboxProps } from "../Checkbox/Checkbox";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 type FormGroupExposedProps = Pick<FormGroupProps, "tip" | "helpText" | "helpAddon">;
 export interface CheckboxFieldProps extends CheckboxProps, FormGroupExposedProps {
     checkboxLabel?: string | ReactNode;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The checkbox field component is used for entering boolean values.
  *
  * _**Do use**_ the CheckboxField for boolean input.
  */
-export declare const CheckboxField: import("react").ForwardRefExoticComponent<CheckboxFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const CheckboxField: {
+    ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ref, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { BaseInputProps } from "../BaseInput";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -20,5 +19,5 @@ export interface ColorFieldProps extends FormGroupExposedProps, BaseInputProps {
  * ColorField validates that user enters a valid color address.
  *
  */
-export declare const ColorField: React.ForwardRefExoticComponent<ColorFieldProps & React.RefAttributes<HTMLInputElement>>;
+export declare const ColorField: import("react").ForwardRefExoticComponent<Omit<ColorFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 import { DateInputProps } from "../DateInput/DateInput";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -6,6 +7,10 @@ export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The date field component is used for entering date values.
@@ -14,5 +19,8 @@ export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
  *
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
-export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const DateField: {
+    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ref, ...rest }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/DateInput/DateInput.d.ts

@@ -23,5 +23,11 @@ export interface DateInputProps extends BaseInputExposedProps {
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ *
+ */
+export declare const DateInput: {
+    ({ min, max, defaultValue, value, ref, ...rest }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/DropZone/DropZone.d.ts

@@ -1,11 +1,12 @@
 import { CommonProps, Size } from "@trackunit/react-components";
+import { ReactElement, ReactNode } from "react";
 import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size" | "nonInteractive">;
 export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
     /**
      * A JSX element or a string to set a focusable label in Drop Zone. If not provided, the default label will be used.
      */
-    label?: JSX.Element | string;
+    label?: ReactNode | string;
     /**
      * A flag to disable the drop zone.
      */
@@ -27,7 +28,7 @@ export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
  * The Drop Zone can be used to drag and drop files or to browse and select files from the file system.
  *
  * @param {DropZoneProps} props - The props for the DropZone component
- * @returns {JSX.Element} DropZone component
+ * @returns {ReactElement} DropZone component
  */
-export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, accept, multiple, ...rest }: DropZoneProps) => JSX.Element;
+export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, accept, multiple, ...rest }: DropZoneProps) => ReactElement;
 export {};

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { BaseInputProps } from "../BaseInput";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -13,5 +12,8 @@ export interface EmailFieldProps extends FormGroupExposedProps, BaseInputProps {
  * EmailField validates that user enters a valid email address.
  *
  */
-export declare const EmailField: React.ForwardRefExoticComponent<EmailFieldProps & React.RefAttributes<HTMLInputElement>>;
+export declare const EmailField: {
+    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, onBlur, isInvalid, ref, ...rest }: EmailFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/EmailInput/EmailInput.d.ts

@@ -21,5 +21,8 @@ export interface EmailInputProps extends BaseInputExposedProps {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-export declare const EmailInput: import("react").ForwardRefExoticComponent<EmailInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const EmailInput: {
+    ({ fieldSize, disabled, dataTestId, isInvalid, onChange, disableAction, ref, ...rest }: EmailInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/FormGroup/FormGroup.d.ts

@@ -1,14 +1,14 @@
 import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
+import { ReactNode } from "react";
 export interface FormGroupProps extends CommonProps {
     /**
      * The label for the form group.
      */
-    label: string | React.ReactNode;
+    label: string | ReactNode;
     /**
      * Content to display in the tooltip when hovering the ? icon next to the label.
      */
-    tip?: string | React.ReactNode;
+    tip?: string | ReactNode;
     htmlFor?: string;
     /**
      * A string to display under the input element to help the user understand the input.
@@ -18,12 +18,12 @@ export interface FormGroupProps extends CommonProps {
      * An addon element to render to the right under the input element.
      * Used for displaying maxLength etc.
      */
-    helpAddon?: string | React.ReactNode;
+    helpAddon?: string | ReactNode;
     /**
      * If true the input is rendered in its invalid state.
      */
     isInvalid?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
     name?: string;
     /**
      * If true the input is required with an asterisk prepended to the label.
@@ -40,6 +40,6 @@ export interface FormGroupProps extends CommonProps {
  * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
  *
  * @param {FormGroupProps} props - The props for the FormGroup component
- * @returns {JSX.Element} FormGroup component
+ * @returns {ReactElement} FormGroup component
  */
 export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required, }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
+import { ReactElement, ReactNode } from "react";
 export interface LabelProps extends CommonProps {
     /**
      * ID of the label.
@@ -12,7 +12,7 @@ export interface LabelProps extends CommonProps {
     /**
      * The label value.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Whether the label is disabled or not.
      */
@@ -28,6 +28,6 @@ export interface LabelProps extends CommonProps {
  * This component is **not used directly**, but is part of the FormGroup and Field components.
  *
  * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
+ * @returns {ReactElement} Label component
  */
-export declare const Label: ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }: LabelProps) => JSX.Element;
+export declare const Label: ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }: LabelProps) => ReactElement;

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

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { NumberInputProps } from "../NumberInput/NumberInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -6,6 +7,10 @@ export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProp
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
@@ -14,5 +19,8 @@ export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProp
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const NumberField: {
+    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ref, ...rest }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/NumberInput/NumberInput.d.ts

@@ -7,5 +7,8 @@ export interface NumberInputProps extends BaseInputExposedProps {
  *
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
-export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const NumberInput: {
+    ({ ref, ...rest }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

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

@@ -1,5 +1,5 @@
 import { CommonProps, IconProps } from "@trackunit/react-components";
-import { InputHTMLAttributes, ReactElement } from "react";
+import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
 export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>, CommonProps {
     /**
      * Icon displayed at the top inside the OptionCard.
@@ -12,11 +12,11 @@ export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
     /**
      * Subheading displayed above the description.
      */
-    subheading?: string | JSX.Element;
+    subheading?: string | ReactNode;
     /**
      * Descriptive text displayed inside the OptionCard.
      */
-    description?: string | JSX.Element;
+    description?: string | ReactNode;
     /**
      * A custom image to be displayed instead of icon (ex logo)
      */
@@ -25,6 +25,10 @@ export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
      * Styles for the OptionCard content.
      */
     contentClassName?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 interface CustomImage {
     src: string;
@@ -33,5 +37,8 @@ interface CustomImage {
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-export declare const OptionCard: import("react").ForwardRefExoticComponent<OptionCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const OptionCard: {
+    ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ref, ...rest }: OptionCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

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

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { PasswordInputProps } from "../PasswordInput/PasswordInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -6,6 +7,10 @@ export interface PasswordFieldProps extends Omit<PasswordInputProps, "obfuscate"
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * Password fields enter a password or other confidential information. Characters are masked as they are typed.
@@ -14,5 +19,8 @@ export interface PasswordFieldProps extends Omit<PasswordInputProps, "obfuscate"
  *
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PasswordField: {
+    ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/PasswordInput/PasswordInput.d.ts

@@ -8,5 +8,8 @@ export interface PasswordInputProps extends BaseInputExposedProps {
  *
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PasswordInput: {
+    ({ ref, fieldSize, ...rest }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

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

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { PhoneInputProps } from "../PhoneInput/PhoneInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "name">;
@@ -6,6 +7,10 @@ export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The PhoneField component is used to enter phone number.
@@ -21,7 +26,9 @@ export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps
  * @param {boolean} [disabled=false] - Whether the component is disabled or not.
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneField component.
  */
-export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PhoneField: {
+    ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ref, ...rest }: PhoneFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/PhoneFieldWithController/PhoneFieldWithController.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 import { Control, ControllerProps } from "react-hook-form";
 import { PhoneFieldProps } from "../PhoneField/PhoneField";
 export interface PhoneFieldWithControllerProps extends PhoneFieldProps {
@@ -13,10 +14,16 @@ export interface PhoneFieldWithControllerProps extends PhoneFieldProps {
      * Used to overwrite controller props.
      */
     controllerProps?: Partial<Omit<ControllerProps<any>, "render">>;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
  *
- * @returns {JSX.Element} - The PhoneFieldWithController component.
  */
-export declare const PhoneFieldWithController: import("react").ForwardRefExoticComponent<PhoneFieldWithControllerProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PhoneFieldWithController: {
+    ({ control, controllerProps, name, value, ref, ...rest }: PhoneFieldWithControllerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/components/PhoneInput/CountryCodeSelect.d.ts

@@ -20,7 +20,7 @@ interface CountryCodeSelectProps extends CommonProps {
  * The CountryCodeSelect component is used to select a country code for a phone number.
  *
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
- * @returns {JSX.Element} CountryCodeSelect component
+ * @returns {ReactElement} CountryCodeSelect component
  */
 export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, isClearable, }: CountryCodeSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -25,7 +25,9 @@ export interface PhoneInputProps extends BaseInputExposedProps {
  * @param {boolean} [disabled=false] - Whether the component is disabled or not.
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneInput component.
  */
-export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PhoneInput: {
+    ({ dataTestId, isInvalid, disabled, value, defaultValue, fieldSize, disableAction, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

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

@@ -1,9 +1,9 @@
 import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
-export interface RadioGroupProps<V extends string | number> extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+import { ChangeEvent, InputHTMLAttributes, ReactElement, ReactNode } from "react";
+export interface RadioGroupProps<V extends string | number> extends CommonProps, InputHTMLAttributes<HTMLInputElement> {
     /**
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * The id of the radio group.
      */
@@ -11,7 +11,7 @@ export interface RadioGroupProps<V extends string | number> extends CommonProps,
     /**
      * onChange handler for the radio group.
      */
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * The value of the radio group.
      */
@@ -48,9 +48,9 @@ export interface RadioGroupProps<V extends string | number> extends CommonProps,
  * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
  *
  * @param {RadioGroupProps} props - The props for the RadioGroup component
- * @returns {JSX.Element} RadioGroup component
+ * @returns {ReactElement} RadioGroup component
  */
 export declare const RadioGroup: {
-    <V extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }: RadioGroupProps<V>): JSX.Element;
+    <V extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }: RadioGroupProps<V>): ReactElement;
     displayName: string;
 };

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

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { InputHTMLAttributes, ReactNode } from "react";
+import { InputHTMLAttributes, ReactElement, ReactNode } from "react";
 export interface RadioItemProps<V extends string | number = string> extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * The label of the radio item.
@@ -23,6 +23,6 @@ export interface RadioItemProps<V extends string | number = string> extends Comm
  * The RadioItem component.
  *
  * @param {RadioItemProps} props - The props for the RadioItem component
- * @returns {JSX.Element} RadioItem component
+ * @returns {ReactElement} RadioItem component
  */
-export declare const RadioItem: <V extends string | number>({ label, value, dataTestId, className, description, suffix, ...rest }: RadioItemProps<V>) => JSX.Element;
+export declare const RadioItem: <V extends string | number>({ label, value, dataTestId, className, description, suffix, ...rest }: RadioItemProps<V>) => ReactElement;

package/src/components/Schedule/Schedule.d.ts

@@ -47,6 +47,6 @@ export interface ScheduleProps extends CommonProps {
  * Schedule is used to create a time range entries.
  *
  * @param {ScheduleProps} props - The props for the Schedule component
- * @returns {JSX.Element} Schedule component
+ * @returns {ReactElement} Schedule component
  */
 export declare const Schedule: ({ className, dataTestId, schedule, onChange, invalidKeys }: ScheduleProps) => import("react/jsx-runtime").JSX.Element;