@sonic-equipment/ui 0.0.13 → 0.0.15

package/dist/base.css

@@ -7,12 +7,11 @@
 html {
   font-family: var(--font-family-sonic);
   font-size: var(--font-size-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+  text-rendering: optimizelegibility;
   -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
           text-size-adjust: none;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }

package/dist/buttons/add-to-cart-button/add-to-cart-button.d.ts

@@ -0,0 +1,8 @@
+type AddToCartState = 'initial' | 'spinner' | 'manual-input';
+interface AddToCartButtonProps {
+    initialState?: AddToCartState;
+    onChange?: (quantity: number) => void;
+    quantity: number;
+}
+export declare function AddToCartButton({ initialState, onChange, quantity, }: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/buttons/add-to-cart-button/add-to-cart-button.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+import { AddToCartButton } from './add-to-cart-button';
+declare const meta: {
+    args: {
+        onChange: import("@storybook/test").Mock<[quantity: number], void>;
+        quantity: number;
+    };
+    component: typeof AddToCartButton;
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InitialState: Story;
+export declare const SpinnerState: Story;
+export declare const ManualInputState: Story;
+export declare const RightAligned: Story;

package/dist/buttons/button/button.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
 export interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children: string;
+    children?: string;
     className?: string;
     color?: 'primary' | 'secondary';
+    condensed?: boolean;
     icon?: React.ReactNode;
     isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
+    type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, icon, isDisabled, onPress, size, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, icon, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.stories.d.ts

@@ -2,7 +2,8 @@ import type { StoryObj } from '@storybook/react';
 import { Button } from './button';
 declare const meta: {
     args: {
-        onPress: import("@vitest/spy").Mock<[], void>;
+        onPress: import("@storybook/test").Mock<[], void>;
+        size: "lg";
     };
     component: typeof Button;
     parameters: {
@@ -21,3 +22,5 @@ export declare const WithArrow: Story;
 export declare const Outlined: Story;
 export declare const SecondaryActive: Story;
 export declare const Ghost: Story;
+export declare const SizeMD: Story;
+export declare const SizeMDCondensed: Story;

package/dist/buttons/favorite/favorite-button.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { FavoriteButton } from './favorite-button';
 declare const meta: {
     args: {
-        onPress: import("@vitest/spy").Mock<[], void>;
+        onPress: import("@storybook/test").Mock<[], void>;
     };
     component: typeof FavoriteButton;
     parameters: {

package/dist/buttons/icon-button/icon-button.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { IconButton } from './icon-button';
 declare const meta: {
     args: {
-        onPress: import("@vitest/spy").Mock<[], void>;
+        onPress: import("@storybook/test").Mock<[], void>;
     };
     component: typeof IconButton;
     parameters: {

package/dist/cards/product-card/product-card.d.ts

@@ -1,9 +1,14 @@
-import { ComponentType } from 'react';
-import type { Product } from 'shared/types/product';
+import { ReactElement } from 'react';
+import { ImageProps } from 'media/image/image';
+import type { ProductPrice as ProductPriceType } from 'shared/types/price';
 export interface ProductCardProps {
-    favoriteButton: ComponentType<{
-        productId: string;
-    }>;
-    product: Product;
+    addToCartButton: ReactElement;
+    favoriteButton?: ReactElement;
+    image: ImageProps;
+    onClick: React.MouseEventHandler<HTMLDivElement>;
+    price: ProductPriceType;
+    sku: string;
+    tag?: 'new' | 'sale';
+    title: string;
 }
-export declare function ProductCard({ favoriteButton: FavoriteButton, product, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.stories.d.ts

@@ -1,8 +1,29 @@
+/// <reference types="react" />
 import { StoryObj } from '@storybook/react';
 import { ProductCard } from './product-card';
 declare const meta: {
+    args: {
+        addToCartButton: import("react/jsx-runtime").JSX.Element;
+        favoriteButton: import("react/jsx-runtime").JSX.Element;
+        image: {
+            alt: string;
+            fit: "contain";
+            src: string;
+            title: string;
+        };
+        onClick: import("@storybook/test").Mock<[event: import("react").MouseEvent<HTMLDivElement, MouseEvent>], void>;
+        sku: string;
+        tag: "new";
+    };
     component: typeof ProductCard;
     parameters: {
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
         layout: string;
     };
     tags: string[];
@@ -10,4 +31,9 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Large: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const LargeLongText: Story;
+export declare const MediumLongText: Story;
+export declare const SmallLongText: Story;

package/dist/display/product-price/product-price.d.ts

@@ -1,11 +1,7 @@
-interface Price {
-    exclVat: number;
-    inclVat: number;
-}
 export interface ProductPriceProps {
-    current: Price;
+    className?: string;
+    current: number;
     includeVat?: boolean;
-    original?: Price;
+    original?: number;
 }
-export declare function ProductPrice({ current, includeVat, original, }: ProductPriceProps): import("react/jsx-runtime").JSX.Element | undefined;
-export {};
+export declare function ProductPrice({ className, current, includeVat, original, }: ProductPriceProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/display/product-price/product-price.stories.d.ts

@@ -10,6 +10,5 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const InclVat: Story;
-export declare const ExclVat: Story;
+export declare const WithOriginalPrice: Story;
 export declare const WithoutOriginalPrice: Story;

package/dist/fonts.css

@@ -7,191 +7,191 @@
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: 100;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100022/fonts/pancetta/pancettapro-thin-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100018/fonts/pancetta/pancettapro-thin-webfont.woff')
       format('woff');
-  font-weight: 100;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: 100;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100030/fonts/pancetta/pancettapro-thinitalic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100042/fonts/pancetta/pancettapro-thinitalic-webfont.woff')
       format('woff');
-  font-weight: 100;
-  font-style: italic;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: 200;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099957/fonts/pancetta/pancettapro-extralight-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099944/fonts/pancetta/pancettapro-extralight-webfont.woff')
       format('woff');
-  font-weight: 200;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: 200;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099964/fonts/pancetta/pancettapro-extralightitalic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099960/fonts/pancetta/pancettapro-extralightitalic-webfont.woff')
       format('woff');
-  font-weight: 200;
-  font-style: italic;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: 300;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099985/fonts/pancetta/pancettapro-light-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099977/fonts/pancetta/pancettapro-light-webfont.woff')
       format('woff');
-  font-weight: 300;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: 300;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100009/fonts/pancetta/pancettapro-lightitalic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099989/fonts/pancetta/pancettapro-lightitalic-webfont.woff')
       format('woff');
-  font-weight: 300;
-  font-style: italic;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: normal;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100013/fonts/pancetta/pancettapro-regular-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100005/fonts/pancetta/pancettapro-regular-webfont.woff')
       format('woff');
-  font-weight: 400;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: normal;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099973/fonts/pancetta/pancettapro-italic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099969/fonts/pancetta/pancettapro-italic-webfont.woff')
       format('woff');
-  font-weight: 400;
-  font-style: italic;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: 500;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099997/fonts/pancetta/pancettapro-medium-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099981/fonts/pancetta/pancettapro-medium-webfont.woff')
       format('woff');
-  font-weight: 500;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: 500;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100001/fonts/pancetta/pancettapro-mediumitalic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099993/fonts/pancetta/pancettapro-mediumitalic-webfont.woff')
       format('woff');
-  font-weight: 500;
-  font-style: italic;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: 600;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100038/fonts/pancetta/pancettapro-semibold-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100034/fonts/pancetta/pancettapro-semibold-webfont.woff')
       format('woff');
-  font-weight: 600;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: 600;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100026/fonts/pancetta/pancettapro-semibolditalic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100047/fonts/pancetta/pancettapro-semibolditalic-webfont.woff')
       format('woff');
-  font-weight: 600;
-  font-style: italic;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: bold;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099948/fonts/pancetta/pancettapro-bold-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099932/fonts/pancetta/pancettapro-bold-webfont.woff')
       format('woff');
-  font-weight: 700;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: bold;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099952/fonts/pancetta/pancettapro-bolditalic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099936/fonts/pancetta/pancettapro-bolditalic-webfont.woff')
       format('woff');
-  font-weight: 700;
-  font-style: italic;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: normal;
+  font-weight: 900;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099929/fonts/pancetta/pancettapro-black-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099921/fonts/pancetta/pancettapro-black-webfont.woff')
       format('woff');
-  font-weight: 900;
-  font-style: normal;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Pancetta';
+  font-style: italic;
+  font-weight: 900;
   src:
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099941/fonts/pancetta/pancettapro-blackitalic-webfont.woff2')
       format('woff2'),
     url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099924/fonts/pancetta/pancettapro-blackitalic-webfont.woff')
       format('woff');
-  font-weight: 900;
-  font-style: italic;
 }

package/dist/{inputs → forms}/checkbox/checkbox.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { Checkbox } from './checkbox';
 declare const meta: {
     args: {
-        onChange: import("@vitest/spy").Mock<[isSelected: boolean], void>;
+        onChange: import("@storybook/test").Mock<[isSelected: boolean], void>;
     };
     component: typeof Checkbox;
     parameters: {

package/dist/forms/field-error/field-error.d.ts

@@ -0,0 +1,5 @@
+interface FieldErrorProps {
+    children?: string;
+}
+export declare function FieldError({ children }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/field-error/field-error.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { FieldError } from './field-error';
+declare const meta: {
+    args: {};
+    component: typeof FieldError;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof FieldError>;
+export declare const Default: Story;
+export declare const PredefinedErrorMessage: Story;

package/dist/forms/input/input.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, FC } from 'react';
+import { Input as AriaInput } from 'react-aria-components';
+export interface InputProps extends Omit<ComponentProps<typeof AriaInput>, 'size'> {
+    _pseudo?: 'focus' | 'none';
+    autoGrow?: boolean;
+    size?: 'md' | 'lg';
+    value?: string | number;
+}
+/**
+ * This component is used to create an input that grows as the user types.
+ * It uses a shadow input to calculate the width of the input.
+ */
+export declare const Input: FC<InputProps>;

package/dist/forms/input/input.stories.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { Input } from './input';
+declare const meta: {
+    argTypes: {
+        value: {
+            control: {
+                type: "text";
+            };
+        };
+    };
+    args: {
+        size: "lg";
+    };
+    component: import("react").FC<import("./input").InputProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const Focus: Story;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;

package/dist/forms/label/label.d.ts

@@ -0,0 +1,6 @@
+interface LabelProps {
+    children: string;
+    isRequired?: boolean;
+}
+export declare function Label({ children, isRequired }: LabelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/forms/label/label.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { Label } from './label';
+declare const meta: {
+    args: {};
+    component: typeof Label;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof Label>;
+export declare const Default: Story;
+export declare const Required: Story;

package/dist/forms/number-field/number-field.d.ts

@@ -0,0 +1,31 @@
+import { FormEventHandler, KeyboardEvent } from 'react';
+export type NumberFieldSize = 'md' | 'lg';
+interface NumberFieldProps {
+    autoFocus?: boolean;
+    autoGrow?: boolean;
+    defaultValue?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    label: string;
+    maxLength?: number;
+    maxValue?: number;
+    minValue?: number;
+    name?: string;
+    onChange?: (value: number) => void;
+    onInput?: FormEventHandler<HTMLInputElement>;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    placeholder?: string;
+    showLabel?: boolean;
+    size?: NumberFieldSize;
+    value?: number;
+    withButtons?: boolean;
+}
+/**
+ * This component is used to create a number field.
+ * This field can also grow when a user types in text.
+ */
+export declare function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel, size, value, withButtons, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/number-field/number-field.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/react';
+import { NumberField } from './number-field';
+declare const meta: {
+    args: {
+        onChange: {
+            (...data: any[]): void;
+            (message?: any, ...optionalParams: any[]): void;
+            (message?: any, ...optionalParams: any[]): void;
+        };
+        size: "lg";
+    };
+    component: typeof NumberField;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+export declare const Default: Story;
+export declare const DefaultMinMaxValue: Story;
+export declare const Formatting: Story;
+export declare const Placeholder: Story;
+export declare const Label: Story;
+export declare const AutoGrow: Story;
+export declare const AutoGrowWithButtons: Story;
+export declare const AutoGrowSizeMD: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const Validation: Story;

package/dist/forms/text-field/text-field.d.ts

@@ -0,0 +1,28 @@
+import { FormEventHandler, KeyboardEvent } from 'react';
+interface TextFieldProps {
+    autoFocus?: boolean;
+    autoGrow?: boolean;
+    defaultValue?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isMultiline?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    label: string;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+    onInput?: FormEventHandler<HTMLInputElement>;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    placeholder?: string;
+    rows?: number;
+    showLabel?: boolean;
+    size?: 'md' | 'lg';
+    value?: string;
+}
+/**
+ * This component is used to create a text field.
+ * It can be used as a single line input or as a textarea.
+ * This field can also grow when a user types in text.
+ */
+export declare function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, onChange, onInput, onKeyUp, placeholder, rows, showLabel, size, value, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/text-field/text-field.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+import { TextField } from './text-field';
+declare const meta: {
+    component: typeof TextField;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof TextField>;
+export declare const Default: Story;
+export declare const Placeholder: Story;
+export declare const Label: Story;
+export declare const AutoGrow: Story;
+export declare const AutoGrowSizeMD: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const Validation: Story;
+export declare const Multline: Story;
+export declare const MultlineAutoGrow: Story;
+export declare const MultlineSizeMD: Story;

package/dist/forms/textarea/textarea.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, FC } from 'react';
+import { TextArea as AriaTextArea } from 'react-aria-components';
+export interface TextAreaProps extends Omit<ComponentProps<typeof AriaTextArea>, 'size'> {
+    autoGrow?: boolean;
+    size?: 'md' | 'lg';
+}
+/**
+ * This component is used to create a textarea that can grow as the user types.
+ * It uses the scrollHeight property to calculate the height of the textarea.
+ * The initial height is calculated based on the style of the textarea.
+ * The height is updated everytime the user types.
+ */
+export declare const TextArea: FC<TextAreaProps>;