@marigold/components 0.6.0 → 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Marigold UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,16 +1,21 @@
-import { Theme as Theme$1, ThemeProviderProps, BoxOwnProps, ResponsiveStyleValue, CSSObject } from '@marigold/system';
+import { Theme as Theme$1, ThemeProviderProps, ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, BoxOwnProps, CSSObject, StateAttrProps, ResponsiveStyleValue } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
-import React from 'react';
-import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, PolymorphicProps, PolymorphicComponent } from '@marigold/types';
-import { ToggleProps } from '@react-types/checkbox';
+import React, { ReactNode, Key, LabelHTMLAttributes, HTMLAttributes, ReactChild } from 'react';
+import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, PolymorphicProps, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
+import * as _react_types_shared from '@react-types/shared';
+import { PressEvents, CollectionElement, SingleSelection, Node } from '@react-types/shared';
+import { AriaCheckboxProps, AriaCheckboxGroupProps, ToggleProps } from '@react-types/checkbox';
+import { CheckboxGroupState } from '@react-stately/checkbox';
 import { SeparatorProps } from '@react-aria/separator';
+import { AriaTextFieldProps } from '@react-types/textfield';
 import { AriaSelectProps } from '@react-types/select';
-import { SingleSelection } from '@react-types/shared';
 import { AriaSwitchProps } from '@react-types/switch';
-import { AriaTextFieldProps } from '@react-types/textfield';
+import { TableProps as TableProps$1 } from '@react-aria/table';
+import { TableState, TableStateProps, TableBody, Cell, Column, TableHeader, Row } from '@react-stately/table';
 import { TooltipTriggerProps } from '@react-types/tooltip';
+import { aspect, size } from '@marigold/tokens';
 import * as _react_stately_overlays from '@react-stately/overlays';
-import { OverlayProps } from '@react-aria/overlays';
+import { OverlayProps as OverlayProps$1 } from '@react-aria/overlays';
 import { AriaDialogProps } from '@react-types/dialog';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 export { SSRProvider } from '@react-aria/ssr';
@@ -27,158 +32,222 @@ interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T>
 }
 declare function MarigoldProvider<T extends Theme$1>({ theme, children, }: MarigoldProviderProps<T>): JSX.Element;
 
-interface BadgeThemeExtension<Value> {
-    badge?: {
-        [key: string]: Value;
-    };
+interface BadgeThemeExtension extends ThemeExtension<'Badge'> {
 }
 interface BadgeProps extends ComponentProps<'div'> {
+    children?: React.ReactNode;
     variant?: string;
-    bgColor?: string;
-    borderColor?: string;
+    size?: string;
 }
-declare const Badge: React.FC<BadgeProps>;
+declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => JSX.Element;
 
-interface ButtonThemeExtension<Value> {
-    button?: {
-        [key: string]: Value;
-    };
+interface ButtonThemeExtension extends ThemeExtension<'Button'> {
+}
+interface ButtonOwnProps extends PressEvents {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
 }
-interface ButtonProps extends PolymorphicPropsWithRef<BoxOwnProps, 'button'> {
+interface ButtonProps extends PolymorphicPropsWithRef<ButtonOwnProps, 'button'> {
 }
-declare const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'>;
+declare const Button: PolymorphicComponentWithRef<ButtonOwnProps, 'button'>;
 
-interface CardThemeExtension<Value> {
-    card?: {
-        [key: string]: Value;
-    };
+interface CardThemeExtension extends ThemeExtension<'Card'> {
 }
-interface CardProps extends ComponentProps<'div'> {
-    title?: string;
-    width?: ResponsiveStyleValue<string>;
-    variant?: string;
+interface CardProps extends ThemeComponentProps, ComponentProps<'div'> {
+    children?: ReactNode;
+}
+declare const Card: ({ children, variant, size, ...props }: CardProps) => JSX.Element;
+
+interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
+    'container',
+    'label',
+    'checkbox'
+]> {
+}
+/**
+ * `react-aria` has a slightly different API for the above events.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur';
+interface CheckboxProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<AriaCheckboxProps, CustomCheckboxProps> {
+    children?: ReactNode;
+    indeterminate?: boolean;
+    error?: boolean;
 }
-declare const Card: React.FC<CardProps>;
+declare const Checkbox: ({ size, variant, disabled, checked, defaultChecked, indeterminate, readOnly, required, error, ...props }: CheckboxProps) => JSX.Element;
 
-interface CheckboxIconProps {
+interface CheckboxGroupContextProps extends CheckboxGroupState {
+    error?: boolean;
     variant?: string;
-    checked?: boolean;
+    size?: string;
+}
+declare const CheckboxGroupContext: React.Context<CheckboxGroupContextProps>;
+declare const useCheckboxGroupContext: () => CheckboxGroupContextProps;
+interface CheckboxGroupThemeExtension extends ThemeExtensionsWithParts<'CheckboxGroup', ['container', 'group']> {
+}
+interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, AriaCheckboxGroupProps {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
+    label?: ReactNode;
+    required?: boolean;
     disabled?: boolean;
-    indeterminated?: boolean;
+    readOnly?: boolean;
     error?: boolean;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
 }
+declare const CheckboxGroup: ({ children, variant, size, required, disabled, readOnly, error, ...rest }: CheckboxGroupProps) => JSX.Element;
 
-interface CheckboxThemeExtension<Value> {
-    checkbox?: {
-        [key: string]: Value;
-    };
+interface ContentThemeExtension extends ThemeExtension<'Content'> {
 }
-declare type CheckboxInputProps = CheckboxIconProps & ToggleProps & ComponentProps<'input'>;
-interface CheckboxProps extends CheckboxInputProps {
-    id: string;
-    required?: boolean;
-    labelVariant?: string;
-    errorMessage?: string;
+interface ContentProps extends ThemeComponentProps, ComponentProps<'section'> {
+    children?: ReactNode;
 }
-declare const Checkbox: React.FC<CheckboxProps>;
+declare const Content: ({ children, variant, size, ...props }: ContentProps) => JSX.Element;
 
-interface DividerThemeExtension<Value> {
-    divider?: {
-        [key: string]: Value;
-    };
+interface DividerThemeExtension extends ThemeExtension<'Divider'> {
 }
 interface DividerProps extends SeparatorProps {
     variant?: string;
 }
-declare const Divider: React.FC<DividerProps>;
+declare const Divider: ({ variant, ...props }: DividerProps) => JSX.Element;
 
-interface ImageThemeExtension<Value> {
-    image?: {
-        [key: string]: Value;
-    };
+interface FooterThemeExtension extends ThemeExtension<'Footer'> {
 }
-interface ImageProps extends ComponentProps<'img'> {
-    variant?: string;
-    children?: never;
+interface FooterProps extends ThemeComponentProps, ComponentProps<'footer'> {
+    children?: ReactNode;
 }
-declare const Image: React.FC<ImageProps>;
+declare const Footer: ({ children, variant, size, ...props }: FooterProps) => JSX.Element;
 
-interface InputThemeExtension<Value> {
-    input?: {
-        [key: string]: Value;
-    };
+interface HeaderThemeExtension extends ThemeExtension<'Header'> {
 }
-interface InputProps extends ComponentProps<'input'> {
-    variant?: string;
+interface HeaderProps extends ThemeComponentProps, ComponentProps<'header'> {
+    children?: ReactNode;
 }
-declare const Input: React.FC<InputProps>;
+declare const Header: ({ children, variant, size, ...props }: HeaderProps) => JSX.Element;
 
-interface LabelThemeExtension<Value> {
-    label?: {
-        [key: string]: Value;
-    };
+interface HeadlineThemeExtension extends ThemeExtension<'Headline'> {
 }
-declare type LabelBaseProps = {
-    htmlFor?: string;
+interface HeadlineProps extends ThemeComponentProps, ComponentProps<'h1'> {
+    children?: ReactNode;
+    level?: '1' | '2' | '3' | '4' | '5' | '6';
+}
+declare const Headline: ({ children, variant, size, level, ...props }: HeadlineProps) => JSX.Element;
+
+interface HelpTextThemeExtension extends ThemeExtensionsWithParts<'HelpText', ['container', 'icon']> {
+}
+
+interface ImageThemeExtension extends ThemeExtension<'Image'> {
+}
+interface ImageProps extends ComponentProps<'img'> {
     variant?: string;
-    required?: boolean;
-    color?: ResponsiveStyleValue<string>;
-} & ComponentProps<'label'>;
-declare const LabelBase: React.FC<LabelProps>;
-interface LabelProps extends LabelBaseProps {
-    required?: boolean;
+    children?: never;
 }
-declare const Label: React.FC<LabelProps>;
+declare const Image: ({ variant, ...props }: ImageProps) => JSX.Element;
 
-interface TextThemeExtension<Value> {
-    text?: {
-        [key: string]: Value;
-    };
+interface InputThemeExtension extends ThemeExtension<'Input'> {
 }
-interface TextOwnProps extends BoxOwnProps {
-    align?: ResponsiveStyleValue<string>;
-    color?: ResponsiveStyleValue<string>;
-    cursor?: ResponsiveStyleValue<string>;
-    size?: ResponsiveStyleValue<keyof Theme$1['fontSizes'] | string>;
-    outline?: ResponsiveStyleValue<string>;
-    userSelect?: ResponsiveStyleValue<string>;
+interface InputOwnProps extends Omit<ComponentProps<'input'>, 'size'> {
+    size?: string;
+    variant?: string;
+}
+interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
 }
-interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
+declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
+
+interface LabelThemeExtension$1 extends ThemeExtension<'Label'> {
 }
-declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
 
-interface LinkThemeExtension<Value> {
-    link?: Value;
+interface LinkThemeExtension extends ThemeExtension<'Link'> {
 }
-interface LinkOwnProps extends TextOwnProps {
+interface LinkOwnProps extends BoxOwnProps {
     disabled?: boolean;
+    variant?: string;
+    size?: string;
 }
 interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
 }
 declare const Link: PolymorphicComponent<LinkOwnProps, "a">;
 
-interface MenuThemeExtension<Value> {
-    menu?: Value;
+interface MenuTriggerProps {
+    children: [trigger: ReactNode, menu: ReactNode];
+    disabled?: boolean;
+}
+
+interface MenuThemeExtension extends ThemeExtensionsWithParts<'Menu', ['container', 'item']> {
 }
-interface MenuProps {
+interface MenuProps extends Omit<ComponentProps<'ul'>, 'onSelect' | 'size'> {
+    children: CollectionElement<object> | CollectionElement<object>[];
     variant?: string;
-    label?: string;
-    onClick: ComponentProps<typeof Button>['onClick'];
-    show?: boolean;
-    className?: string;
-    title?: string;
+    size?: string;
+    onSelect?: (key: Key) => void;
+}
+declare const Menu: {
+    ({ variant, size, ...props }: MenuProps): JSX.Element;
+    Trigger: ({ disabled, children }: MenuTriggerProps) => JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
+
+interface TextThemeExtension extends ThemeExtension<'Text'> {
+}
+interface TextProps extends ThemeComponentProps, ComponentProps<'p'>, Omit<BoxOwnProps, 'variant'> {
+    align?: CSSObject['textAlign'];
+    color?: string;
+    cursor?: string;
+    fontSize?: string;
+    outline?: string;
+    children?: React.ReactNode;
+}
+declare const Text: ({ variant, size, align, color, fontSize, cursor, outline, children, ...props }: TextProps) => JSX.Element;
+
+interface FieldBaseProps {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    required?: boolean;
+    label?: ReactNode;
+    labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+    description?: ReactNode;
+    descriptionProps?: HTMLAttributes<HTMLElement>;
+    error?: boolean;
+    errorMessage?: ReactNode;
+    errorMessageProps?: HTMLAttributes<HTMLElement>;
+    stateProps?: StateAttrProps;
+}
+
+interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
+}
+/**
+ * `react-aria` has a slightly different API for the above events.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomTextAreEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onCopy' | 'onSelect' | 'onPaste' | 'onCut' | 'onCompositionStart' | 'onCompositionUpdate' | 'onCompositionEnd' | 'onBeforeInput' | 'onInput';
+interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'value' | 'defaultValue' | CustomTextAreEvents>, Pick<AriaTextFieldProps, CustomTextAreEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+    value?: string;
+    defaultValue?: string;
 }
-declare const Menu: React.FC<MenuProps>;
+declare const TextArea: ({ disabled, required, readOnly, error, ...props }: TextAreaProps) => JSX.Element;
 
-interface MenuItemThemeExtension<Value> {
-    menuItem?: {
+interface LabelThemeExtension<Value> {
+    label?: {
         [key: string]: Value;
     };
 }
-interface MenuItemProps extends ComponentProps<typeof Link> {
+declare type LabelBaseProps = {
+    htmlFor?: string;
     variant?: string;
+    required?: boolean;
+    color?: ResponsiveStyleValue<string>;
+} & ComponentProps<'label'>;
+declare const LabelBase: React.FC<LabelProps>;
+interface LabelProps extends LabelBaseProps {
+    required?: boolean;
 }
-declare const MenuItem: React.FC<MenuItemProps>;
+declare const Label: React.FC<LabelProps>;
 
 interface MessageThemeExtension<Value> {
     message?: {
@@ -258,18 +327,52 @@ declare type SwitchProps = {
 } & AriaSwitchProps & ToggleProps & ComponentProps<'input'>;
 declare const Switch: React.FC<SwitchProps>;
 
-interface TextareaThemeExtension<Value> {
-    textarea?: {
-        [key: string]: Value;
-    };
-}
-declare type TextareaProps = {
+interface TableCellProps {
+    item: Node<object>;
+    state: TableState<object>;
+    /**
+     * Wheter it is a cell with a checkbox or a regular data cell
+     */
+    isSelectionCell?: boolean;
+    align?: 'left' | 'center' | 'right';
+    css?: CSSObject;
+}
+
+interface TableColumnHeaderProps {
+    chilren?: ReactNode;
+    item: Node<object>;
+    state: TableState<object>;
+    isSelectionColumn?: boolean;
+    align?: 'left' | 'center' | 'right';
+    css?: CSSObject;
+}
+
+interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
+    'table',
+    'header',
+    'row',
+    'cell'
+]> {
+}
+interface TableProps extends Pick<TableProps$1<object>, 'onRowAction' | 'onCellAction'>, TableStateProps<object> {
+    align?: TableCellProps['align'];
+    alignHeader?: TableColumnHeaderProps['align'];
     variant?: string;
-    htmlFor: string;
-    required?: boolean;
-    error?: boolean;
-} & AriaTextFieldProps & ComponentProps<'textarea'>;
-declare const Textarea: React.FC<TextareaProps>;
+    size?: string;
+}
+declare const Table: Table;
+/**
+ * Necessary since TypeScript can not infer the
+ * types of the @react-stately components correctly.
+ */
+interface Table {
+    (props: TableProps): JSX.Element;
+    Body: typeof TableBody;
+    Cell: typeof Cell;
+    Column: typeof Column;
+    Header: typeof TableHeader;
+    Row: typeof Row;
+}
 
 interface TooltipThemeExtension<Value> {
     tooltip?: {
@@ -296,31 +399,54 @@ interface ValidationMessageProps extends ComponentProps<'span'> {
 }
 declare const ValidationMessage: React.FC<ValidationMessageProps>;
 
-interface Theme extends Theme$1, RootThemeExtension<CSSObject>, BadgeThemeExtension<CSSObject>, ButtonThemeExtension<CSSObject>, CardThemeExtension<CSSObject>, CheckboxThemeExtension<CSSObject>, DividerThemeExtension<CSSObject>, ImageThemeExtension<CSSObject>, InputThemeExtension<CSSObject>, LabelThemeExtension<CSSObject>, LinkThemeExtension<CSSObject>, MenuThemeExtension<CSSObject>, MenuItemThemeExtension<CSSObject>, MessageThemeExtension<CSSObject>, RadioThemeExtension<CSSObject>, SelectThemeExtension<CSSObject>, SliderThemeExtension<CSSObject>, SwitchThemeExtension<CSSObject>, TextThemeExtension<CSSObject>, TextareaThemeExtension<CSSObject>, TooltipThemeExtension<CSSObject>, ValidationMessageThemeExtension<CSSObject> {
+interface ComponentStyles extends BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, CheckboxGroupThemeExtension, ContentThemeExtension, DividerThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension$1, LabelThemeExtension$1, LinkThemeExtension, MenuThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension {
+}
+interface Theme extends Theme$1, RootThemeExtension<CSSObject>, LabelThemeExtension<CSSObject>, MessageThemeExtension<CSSObject>, RadioThemeExtension<CSSObject>, SelectThemeExtension<CSSObject>, SliderThemeExtension<CSSObject>, SwitchThemeExtension<CSSObject>, TooltipThemeExtension<CSSObject>, ValidationMessageThemeExtension<CSSObject> {
+    components: ComponentStyles;
 }
 
-interface ActionGroupProps extends ComponentProps<'div'> {
+interface AsideProps {
+    children: [ReactChild, ReactChild];
+    side?: 'left' | 'right';
+    sideWidth?: ResponsiveStyleValue<string>;
     space?: ResponsiveStyleValue<string>;
-    verticalAlignment?: boolean;
+    stretch?: boolean;
+    wrap?: NonZeroPercentage;
+}
+declare const Aside: ({ children, sideWidth, space, side, stretch, wrap, }: AsideProps) => JSX.Element;
+
+/**
+ * Based on https://theme-ui.com/components/aspect-ratio
+ */
+
+interface AspectProps extends ComponentProps<'div'> {
+    children?: ReactNode;
+    ratio?: keyof typeof aspect;
+    maxWidth?: string;
 }
-declare const ActionGroup: React.FC<ActionGroupProps>;
+declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
 
-declare type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-interface ColumnProps {
-    className?: string;
-    width?: WidthValues | WidthValues[];
+interface BreakoutProps extends ComponentProps<'div'> {
+    horizontalAlign?: 'top' | 'bottom' | 'center';
+    verticalAlign?: 'left' | 'right' | 'center';
+}
+declare const Breakout: React.FC<BreakoutProps>;
+
+interface CenterProps extends ComponentProps<'div'> {
+    maxWidth?: string;
+    space?: ResponsiveStyleValue<string>;
 }
-declare const Column: React.FC<ColumnProps>;
+declare const Center: React.FC<CenterProps>;
 
 interface ColumnsProps {
-    className?: string;
+    columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
-    horizontalAlign?: 'left' | 'right' | 'center';
-    verticalAlign?: 'top' | 'bottom' | 'center';
+    columnLimit?: number;
+    collapseAt?: string;
 }
 declare const Columns: React.FC<ColumnsProps>;
 
-interface ModalDialogProps extends OverlayProps, AriaDialogProps {
+interface ModalDialogProps extends OverlayProps$1, AriaDialogProps {
     variant?: string;
     backdropVariant?: string;
 }
@@ -340,29 +466,57 @@ declare const useDialogButtonProps: () => {
     openButtonRef: React.RefObject<HTMLElement>;
 };
 
-declare type FieldProps = {
-    variant?: string;
-    labelVariant?: string;
-    htmlFor: string;
-    required?: boolean;
-    error?: boolean;
-} & AriaTextFieldProps & ComponentProps<'input'>;
-declare const Field: React.FC<FieldProps>;
-
 interface InlineProps {
     space?: ResponsiveStyleValue<string>;
     align?: 'top' | 'center' | 'bottom';
 }
 declare const Inline: React.FC<InlineProps>;
 
+interface OverlayProps extends ComponentProps<'div'> {
+    children: ReactNode;
+    open?: boolean;
+    container?: Element;
+}
+declare const Overlay: ({ children, open, container, ...props }: OverlayProps) => JSX.Element | null;
+
+interface PopoverProps extends Omit<OverlayProps$1, 'isOpen' | 'isDismissable' | 'isKeyboardDismissDisabled'> {
+    children?: ReactNode;
+    open?: boolean;
+    dismissable?: boolean;
+    keyboardDismissDisabled?: boolean;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
+
 interface StackProps {
+    as?: 'div' | 'ul' | 'ol';
     space?: ResponsiveStyleValue<string>;
     align?: 'left' | 'right' | 'center';
 }
 declare const Stack: React.FC<StackProps>;
 
+interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'>, 
+/**
+ * `react-aria` has a slightly different API for `onChange`, `onFocus`
+ * and `onBlur` events. Thus, we adjust our regular props to match them.
+ */
+Pick<AriaTextFieldProps, 'onChange' | 'onFocus' | 'onBlur'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+    value?: string;
+    defaultValue?: string;
+}
+declare const TextField: ({ disabled, required, readOnly, error, ...props }: TextFieldProps) => JSX.Element;
+
+interface TilesProps {
+    space?: ResponsiveStyleValue<string>;
+    itemMinWidth?: ResponsiveStyleValue<string>;
+}
+declare const Tiles: React.FC<TilesProps>;
+
 interface ContainerProps extends ComponentProps<'div'> {
+    contentType?: 'content' | 'header';
+    size?: keyof typeof size.content | keyof typeof size.header;
+    align?: 'left' | 'right' | 'center';
+    alignContainer?: 'left' | 'right' | 'center';
 }
 declare const Container: React.FC<ContainerProps>;
 
-export { ActionGroup, ActionGroupProps, Badge, BadgeProps, BadgeThemeExtension, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Checkbox, CheckboxProps, CheckboxThemeExtension, Column, ColumnProps, Columns, ColumnsProps, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, Tooltip, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };
+export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Content, ContentProps, ContentThemeExtension, CustomCheckboxProps, CustomTextAreEvents, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useCheckboxGroupContext, useDialogButtonProps };