@trackunit/react-form-components 1.0.29 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,7 +18,7 @@
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "1.0.8",
-    "@trackunit/react-components": "1.1.11",
+    "@trackunit/react-components": "1.1.13",
     "@trackunit/ui-icons": "1.0.11",
     "@trackunit/shared-utils": "1.2.5",
     "@trackunit/i18n-library-translation": "1.0.17"

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

@@ -1,6 +1,4 @@
-import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
-import { cvaActionButton } from "./ActionButton.variants";
 type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY";
 interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
@@ -11,10 +9,6 @@ interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
      * The value to be passed into the button.
      */
     value?: string | React.RefObject<HTMLInputElement> | null;
-    /**
-     *  The size of the icon.
-     */
-    iconSize?: VariantProps<typeof cvaActionButton>["size"];
 }
 interface GenericActionButtonProps extends AbstractActionButtonProps {
     /**
@@ -43,5 +37,5 @@ type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps;
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled, className }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionButton: ({ type, value, dataTestId, size, disabled, className }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,45 +1,35 @@
-import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import * as React from "react";
-import { cvaInputField } from "./BaseInput.variants";
-import { DisabledForReasons } from "./DisabledForReasonsTip";
-type FilteredInputProps = MappedOmit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "disabled">;
+import { InputHTMLAttributes, ReactNode } from "react";
+import { FormComponentSizes } from "../../types";
+import { LockedForReasons } from "./InputLockReasonTooltip";
+import { BaseInputActionTypes } from "./components";
+type FilteredInputProps = MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "disabled" | "readOnly">;
 export interface BaseInputProps extends FilteredInputProps, CommonProps {
     /**
      * A React element to render before the text in the input.
-     * This is typically used to render an icon.
-     * For elements other than icons, please consider using the addonBefore prop.
      */
-    prefix?: React.ReactNode;
+    prefix?: ReactNode;
     /**
      * A React element to render after the text in the input.
-     * This is typically used to render an icon.
-     * For other elements than icons, please consider using the addonAfter prop.
      */
-    suffix?: React.ReactNode;
+    suffix?: ReactNode;
     /**
      * A React element to render in a separate container before the text in the input.
-     * This is typically used to render text.
-     * For icons, please consider using the prefix prop.
      */
-    addonBefore?: React.ReactNode;
+    addonBefore?: ReactNode;
     /**
      * A React element to render in a separate container after the text in the input.
-     * This is typically used to render text.
-     * For icons, please consider using the suffix prop.
      */
-    addonAfter?: React.ReactNode;
+    addonAfter?: ReactNode;
     /**
      * A ReactNode to render at the end of the input field before the addonAfter.
-     * Mainly meant for the icon button actions for special input types.
      */
-    actions?: React.ReactNode;
+    actions?: ReactNode;
     /**
-     *  The size of the input.
-     *  Default == 40px, Small == 32px.
+     * The size of the input field.
      */
-    fieldSize?: VariantProps<typeof cvaInputField>["size"];
+    fieldSize?: FormComponentSizes;
     /**
      * If true the field is rendered in its invalid state.
      */
@@ -49,7 +39,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      */
     placeholder?: string;
     /**
-     * A flag to disable interaction with input for example if you want to use input as a child of higher component
+     * Flag to disable direct interaction with the input.
      */
     nonInteractive?: boolean;
     /**
@@ -61,15 +51,21 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      */
     addonBeforeClassName?: string;
     /**
-     *  If true the default actions are shown.
+     * If true, shows the input in warning state.
      */
-    showDefaultActions?: boolean;
+    isWarning?: boolean;
     /**
-     * If true the input is readonly.
+     * Render a generic action, like "copy".
      */
-    readonly?: boolean;
-    disabled?: boolean | DisabledForReasons;
-    style?: React.CSSProperties;
+    genericAction?: BaseInputActionTypes;
+    /**
+     * Flag or object to disable the input. If an object, shows a tooltip with the reason.
+     */
+    disabled?: boolean | LockedForReasons;
+    /**
+     * Flag or object to set the input as readOnly. If an object, shows a tooltip with the reason.
+     */
+    readOnly?: boolean | LockedForReasons;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.
@@ -79,5 +75,5 @@ 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: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -2,19 +2,23 @@ export declare const cvaInputBase: (props?: import("class-variance-authority/dis
 export declare const cvaInputBaseDisabled: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaInputBaseInvalid: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaInput: (props?: ({
-    size?: "small" | "medium" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
     disabled?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
+    isWarning?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputField: (props?: ({
-    size?: "small" | "medium" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
     disabled?: boolean | null | undefined;
+    readOnly?: boolean | null | undefined;
     autoFocus?: boolean | null | undefined;
     addonBefore?: boolean | null | undefined;
     prefix?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputAddon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputAddonBefore: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputAddonBefore: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputPrefix: (props?: ({
     disabled?: boolean | null | undefined;
     addonBefore?: boolean | null | undefined;
@@ -24,8 +28,6 @@ export declare const cvaInputSuffix: (props?: ({
     addonAfter?: boolean | null | undefined;
     actions?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaInputAddonAfter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputAction: (props?: ({
-    addonAfter?: boolean | null | undefined;
-    suffix?: boolean | null | undefined;
+export declare const cvaInputAddonAfter: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,15 @@
+type LockedKind = "locked" | "disabled";
+export type LockedForReasons = {
+    kind: LockedKind;
+    reasons?: string | string[];
+};
+/**
+ * Icon with explanation tooltip for why an input is locked or disabled.
+ * If locked, a permission lacks but the input **can** sometimes be edited.
+ * If disabled, the input **cannot** be edited and is only ever for displaying information.
+ *
+ * @param {LockedForReasons} props - The reasons for the disabled state.
+ * @param {LockedKind} kind - The kind of disabled state. If locked, the input can sometimes be edited. If disabled, the input cannot be edited.
+ */
+export declare const InputLockReasonTooltip: ({ reasons, kind }: LockedForReasons) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { FormComponentSizes } from "../../../types";
+export declare const AddonAfterRenderer: ({ addonAfter, dataTestId, fieldSize, }: {
+    addonAfter?: ReactNode;
+    dataTestId?: string;
+    fieldSize: FormComponentSizes;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,7 @@
+import { FormComponentSizes } from "../../../types";
+export declare const AddonBeforeRenderer: ({ addonBefore, addonBeforeClassName, dataTestId, fieldSize, }: {
+    addonBefore?: React.ReactNode;
+    addonBeforeClassName?: string;
+    dataTestId?: string;
+    fieldSize: FormComponentSizes;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+import { FormComponentSizes } from "../../../types";
+export type BaseInputActionTypes = "copy";
+export declare const GenericActionsRenderer: ({ genericAction, fieldSize, innerRef, }: {
+    genericAction?: BaseInputActionTypes;
+    fieldSize?: FormComponentSizes;
+    innerRef: RefObject<HTMLInputElement>;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,5 @@
+import { LockedForReasons } from "../InputLockReasonTooltip";
+export declare const LockReasonRenderer: ({ lockReason, dataTestId, }: {
+    lockReason?: LockedForReasons | boolean;
+    dataTestId?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,8 @@
+import { HTMLInputTypeAttribute, ReactNode } from "react";
+export declare const PrefixRenderer: ({ prefix, type, addonBefore, dataTestId, disabled, }: {
+    prefix?: ReactNode;
+    type?: HTMLInputTypeAttribute;
+    addonBefore?: ReactNode;
+    dataTestId?: string;
+    disabled: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export declare const SuffixRenderer: ({ suffix, addonAfter, actions, isInvalid, isWarning, dataTestId, disabled, }: {
+    suffix?: ReactNode;
+    addonAfter?: ReactNode;
+    actions?: ReactNode;
+    isInvalid?: boolean;
+    isWarning?: boolean;
+    dataTestId?: string;
+    disabled: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,6 @@
+export * from "./AddonAfterRenderer";
+export * from "./AddonBeforeRenderer";
+export * from "./GenericActionsRenderer";
+export * from "./LockReasonRenderer";
+export * from "./PrefixRenderer";
+export * from "./SuffixRenderer";

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

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface EmailInputProps extends BaseInputExposedProps {
@@ -22,5 +21,5 @@ 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: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const EmailInput: import("react").ForwardRefExoticComponent<EmailInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -29,6 +29,11 @@ export interface FormGroupProps extends CommonProps {
      * If true the input is required with an asterisk prepended to the label.
      */
     required?: boolean;
+    /**
+     * If true the input is rendered in its warning state.
+     * This is used for when the input is valid but the user should be aware of something.
+     */
+    isWarning?: boolean;
 }
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
@@ -37,4 +42,4 @@ export interface FormGroupProps extends CommonProps {
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required, }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;
+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/FormGroup/FormGroup.variants.d.ts

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

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { ReactNode } from "react";
 import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
 export interface PhoneInputProps extends BaseInputExposedProps {
@@ -15,7 +15,7 @@ export interface PhoneInputProps extends BaseInputExposedProps {
      * A ReactNode to render at the end of the input field before the addonAfter.
      * Mainly meant for the icon button actions for special input types.
      */
-    actions?: React.ReactNode;
+    actions?: ReactNode;
 }
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
@@ -27,5 +27,5 @@ export interface PhoneInputProps extends BaseInputExposedProps {
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  * @returns {JSX.Element} - The PhoneInput component.
  */
-export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/src/components/Search/Search.d.ts

@@ -65,6 +65,10 @@ export interface SearchProps extends CommonProps, TextInputProps {
      */
     iconName?: IconName;
     style?: React.CSSProperties;
+    /**
+     * Ref object for the "Clear" button (with the XMark icon), allowing external control of the button.
+     */
+    xMarkRef?: React.RefObject<HTMLButtonElement>;
 }
 /**
  * The Search component is used to render a search input field.

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

@@ -1,4 +1,5 @@
 export declare const cvaSelect: (props?: ({
+    fieldSize?: "small" | "medium" | "large" | null | undefined;
     invalid?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -1,5 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import * as React from "react";
+import { FormComponentSizes } from "../../../types";
 interface SelectMenuItemProps extends CommonProps {
     /**
      * An string to render as a item label.
@@ -24,6 +25,10 @@ interface SelectMenuItemProps extends CommonProps {
      * Such as a description or a hint for the option
      */
     optionLabelDescription?: string;
+    /**
+     * The size of the selected item
+     */
+    fieldSize?: FormComponentSizes;
 }
 export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
     /**
@@ -38,12 +43,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Select/useCustomComponents.d.ts

@@ -1,6 +1,7 @@
 import { MutableRefObject } from "react";
 import { GroupBase } from "react-select";
 import { SelectComponents } from "react-select/dist/declarations/src/components";
+import { FormComponentSizes } from "../../types";
 /**
  * A hook to retrieve components override object.
  * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
@@ -18,7 +19,7 @@ import { SelectComponents } from "react-select/dist/declarations/src/components"
  * @param {JSX.Element} prefix a prefix element
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, getOptionLabelDescription, }: {
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, fieldSize, getOptionLabelDescription, }: {
     componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
     disabled: boolean;
     readOnly: boolean;
@@ -28,5 +29,6 @@ export declare const useCustomComponents: <Option, IsMulti extends boolean = fal
     dropdownIcon?: JSX.Element;
     prefix?: JSX.Element;
     hasError?: boolean;
+    fieldSize?: FormComponentSizes;
     getOptionLabelDescription?: (option: Option) => string | undefined;
 }) => Partial<SelectComponents<Option, IsMulti, Group>>;

package/src/components/Select/useCustomStyles.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { GroupBase, StylesConfig } from "react-select";
+import { FormComponentSizes } from "../../types";
 /**
  * @template IsMulti
  * @template Group
@@ -9,12 +10,13 @@ import { GroupBase, StylesConfig } from "react-select";
  * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
  * @returns {StylesConfig<Option, boolean>} styles to override in select
  */
-export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, }: {
+export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, fieldSize, }: {
     refContainer: React.RefObject<HTMLDivElement>;
     refPrefix: React.RefObject<HTMLDivElement>;
     maxSelectedDisplayCount: number | undefined;
     styles: StylesConfig<Option, IsMulti, Group> | undefined;
     disabled: boolean | undefined;
+    fieldSize: FormComponentSizes;
 }) => {
     customStyles: StylesConfig<Option, IsMulti, Group>;
 };

package/src/components/Select/useSelect.d.ts

@@ -3,7 +3,8 @@ import { MappedOmit } from "@trackunit/shared-utils";
 import React from "react";
 import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
 import { SelectComponents } from "react-select/dist/declarations/src/components";
-import { DisabledForReasons } from "../BaseInput/DisabledForReasonsTip";
+import { FormComponentSizes } from "../../types";
+import { LockedForReasons } from "../BaseInput/InputLockReasonTooltip";
 export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
     loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
     defaultOptions?: OptionsOrGroups<Option, Group>;
@@ -29,7 +30,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      *
      * @memberof SelectProps
      */
-    disabled?: boolean | DisabledForReasons;
+    disabled?: boolean | LockedForReasons;
     /**
      * An boolean flag to make the field readonly
      *
@@ -128,6 +129,12 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      * @memberof SelectProps
      */
     getOptionLabelDescription?: (option: Option) => string | undefined;
+    /**
+     *  The size of the select component.
+     *  Large = 40px, Medium = 32px, Small = 28px.
+     *  Default is Medium.
+     */
+    fieldSize?: FormComponentSizes;
 };
 interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     customStyles: StylesConfig<Option, IsMulti, Group>;
@@ -145,5 +152,5 @@ interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
+export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, fieldSize, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
 export {};

package/src/components/TextField/TextField.d.ts

@@ -15,10 +15,6 @@ export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
 }
 /**
  * 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.
- *
- * _**Do use** when the user has to input or edit simple text based information, such as metadata._
- *
- * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export {};

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

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

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
+export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };

package/src/types.d.ts

@@ -0,0 +1 @@
+export type FormComponentSizes = "small" | "medium" | "large" | undefined | null;

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

@@ -1,15 +0,0 @@
-type DisabledKind = "locked" | "disabled";
-export type DisabledForReasons = {
-    kind: DisabledKind;
-    reasons?: string | string[];
-};
-/**
- * Icon with explanation tooltip for why an input is locked or disabled.
- * If locked, a permission lacks but the input **can** sometimes be edited.
- * If disabled, the input **cannot** be edited and is only ever for displaying information.
- *
- * @param {DisabledForReasons} props - The reasons for the disabled state.
- * @param {DisabledKind} kind - The kind of disabled state. If locked, the input can sometimes be edited. If disabled, the input cannot be edited.
- */
-export declare const DisabledForReasonsTip: ({ reasons, kind }: DisabledForReasons) => import("react/jsx-runtime").JSX.Element;
-export {};