@marigold/components 0.7.0 → 1.0.0-beta.0

package/dist/index.d.ts

@@ -1,22 +1,27 @@
-import { Theme as Theme$1, ThemeProviderProps, BoxOwnProps, ResponsiveStyleValue, CSSObject } from '@marigold/system';
+import { Theme as Theme$1, ThemeProviderProps, ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, BoxOwnProps, StateAttrProps, CSSObject, ResponsiveStyleValue } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
-import React, { ReactChild } from 'react';
+import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ReactChild } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, PolymorphicProps, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
-import { ToggleProps } from '@react-types/checkbox';
+import * as _react_types_shared from '@react-types/shared';
+import { PressEvents, CollectionElement } from '@react-types/shared';
+import { AriaCheckboxProps, AriaCheckboxGroupProps } from '@react-types/checkbox';
+import { CheckboxGroupState } from '@react-stately/checkbox';
+import { AriaDialogProps } from '@react-types/dialog';
 import { SeparatorProps } from '@react-aria/separator';
+import { AriaNumberFieldProps } from '@react-types/numberfield';
+import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
 import { AriaSelectProps } from '@react-types/select';
-import { SingleSelection } from '@react-types/shared';
+import { AriaSliderProps } from '@react-types/slider';
 import { AriaSwitchProps } from '@react-types/switch';
+import { TableProps as TableProps$1 } from '@react-aria/table';
+import { TableStateProps, TableBody, Cell, Column, TableHeader, Row } from '@react-stately/table';
 import { AriaTextFieldProps } from '@react-types/textfield';
 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 { AriaDialogProps } from '@react-types/dialog';
-export { VisuallyHidden } from '@react-aria/visually-hidden';
+import { OverlayProps as OverlayProps$1 } from '@react-aria/overlays';
 export { SSRProvider } from '@react-aria/ssr';
 import { TooltipTriggerState } from '@react-stately/tooltip';
-export { Item, Section } from '@react-stately/collections';
+export { VisuallyHidden } from '@react-aria/visually-hidden';
 
 interface RootThemeExtension<Value> {
     root?: {
@@ -28,249 +33,421 @@ 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 ButtonProps extends PolymorphicPropsWithRef<BoxOwnProps, 'button'> {
+interface ButtonOwnProps extends PressEvents {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
 }
-declare const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'>;
+interface ButtonProps extends PolymorphicPropsWithRef<ButtonOwnProps, '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: React.FC<CardProps>;
+declare const Card: ({ children, variant, size, ...props }: CardProps) => JSX.Element;
 
-interface CheckboxIconProps {
+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 Checkbox: ({ size, variant, disabled, checked, defaultChecked, indeterminate, readOnly, required, error, ...props }: CheckboxProps) => JSX.Element;
+
+interface CheckboxGroupContextProps extends CheckboxGroupState {
+    error?: boolean;
     variant?: string;
-    checked?: boolean;
+    size?: string;
+}
+/**
+ * Needs to be falsy so we can check if a checkbox is used as standalone
+ * or in a group.
+ */
+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 DialogTriggerProps {
+    children: [trigger: ReactNode, menu: ReactNode];
+    dismissable?: boolean;
+    keyboardDismissable?: boolean;
+}
+
+interface DialogContextProps {
+    open?: boolean;
+    close?: () => void;
+}
+
+interface DialogThemeExtension extends ThemeExtensionsWithParts<'Dialog', ['container', 'closeButton']> {
+}
+interface DialogChildProps {
+    close: DialogContextProps['close'];
+    titleProps: HTMLAttributes<HTMLElement>;
+}
+interface DialogProps extends AriaDialogProps {
+    children?: ReactNode | ((props: DialogChildProps) => ReactNode);
+    variant?: string;
+    size?: string;
+    closeButton?: boolean;
+}
+declare const Dialog: {
+    ({ children, variant, size, closeButton, ...props }: DialogProps): JSX.Element;
+    Trigger: ({ children, dismissable, keyboardDismissable, }: DialogTriggerProps) => JSX.Element;
+};
+
+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 FooterProps extends ThemeComponentProps, ComponentProps<'footer'> {
+    children?: ReactNode;
+}
+declare const Footer: ({ children, variant, size, ...props }: FooterProps) => JSX.Element;
+
+interface HeaderThemeExtension extends ThemeExtension<'Header'> {
+}
+interface HeaderProps extends ThemeComponentProps, ComponentProps<'header'> {
+    children?: ReactNode;
+}
+declare const Header: ({ children, variant, size, ...props }: HeaderProps) => JSX.Element;
+
+interface HeadlineThemeExtension extends ThemeExtension<'Headline'> {
+}
+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;
     children?: never;
 }
-declare const Image: React.FC<ImageProps>;
+declare const Image: ({ variant, ...props }: ImageProps) => JSX.Element;
 
-interface InputThemeExtension<Value> {
-    input?: {
-        [key: string]: Value;
-    };
+interface InputThemeExtension extends ThemeExtension<'Input'> {
 }
-interface InputProps extends ComponentProps<'input'> {
+interface InputOwnProps extends Omit<ComponentProps<'input'>, 'size'> {
+    size?: string;
     variant?: string;
 }
-declare const Input: React.FC<InputProps>;
+interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
+}
+declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
 
-interface LabelThemeExtension<Value> {
-    label?: {
-        [key: string]: Value;
-    };
+interface LabelThemeExtension extends ThemeExtension<'Label'> {
 }
-declare type LabelBaseProps = {
-    htmlFor?: string;
+interface LabelProps extends ComponentProps<'label'> {
+    as?: 'label' | 'span';
     variant?: string;
-    required?: boolean;
-    color?: ResponsiveStyleValue<string>;
-} & ComponentProps<'label'>;
-declare const LabelBase: React.FC<LabelProps>;
-interface LabelProps extends LabelBaseProps {
+    size?: string;
     required?: boolean;
 }
-declare const Label: React.FC<LabelProps>;
+declare const Label: ({ as, required, children, variant, size, ...props }: LabelProps) => JSX.Element;
 
-interface TextThemeExtension<Value> {
-    text?: {
-        [key: string]: Value;
-    };
+interface LinkThemeExtension extends ThemeExtension<'Link'> {
 }
-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 LinkOwnProps extends BoxOwnProps {
+    disabled?: boolean;
+    variant?: string;
+    size?: string;
 }
-interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
+interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
 }
-declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
+declare const Link: PolymorphicComponent<LinkOwnProps, "a">;
 
-interface LinkThemeExtension<Value> {
-    link?: Value;
+interface ListBoxThemeExtension extends ThemeExtensionsWithParts<'ListBox', [
+    'container',
+    'list',
+    'option',
+    'section',
+    'sectionTitle'
+]> {
 }
-interface LinkOwnProps extends TextOwnProps {
+
+interface MenuTriggerProps {
+    children: [trigger: ReactNode, menu: ReactNode];
     disabled?: boolean;
 }
-interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
+
+interface MenuThemeExtension extends ThemeExtensionsWithParts<'Menu', ['container', 'item']> {
 }
-declare const Link: PolymorphicComponent<LinkOwnProps, "a">;
+interface MenuProps extends Omit<ComponentProps<'ul'>, 'onSelect' | 'size'> {
+    children: CollectionElement<object> | CollectionElement<object>[];
+    variant?: 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 MenuThemeExtension<Value> {
-    menu?: Value;
+interface MessageThemeExtension extends ThemeExtensionsWithParts<'Message', [
+    'container',
+    'icon',
+    'title',
+    'content'
+]> {
 }
-interface MenuProps {
+interface MessageProps extends ComponentProps<'div'> {
+    messageTitle: ReactNode;
     variant?: string;
-    label?: string;
-    onClick: ComponentProps<typeof Button>['onClick'];
-    show?: boolean;
-    className?: string;
-    title?: string;
+    size?: string;
 }
-declare const Menu: React.FC<MenuProps>;
+declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => JSX.Element;
 
-interface MenuItemThemeExtension<Value> {
-    menuItem?: {
-        [key: string]: Value;
-    };
+interface FieldBaseProps {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    required?: boolean;
+    label?: ReactNode;
+    labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
+    description?: ReactNode;
+    descriptionProps?: HTMLAttributes<HTMLElement>;
+    error?: boolean;
+    errorMessage?: ReactNode;
+    errorMessageProps?: HTMLAttributes<HTMLElement>;
+    stateProps?: StateAttrProps;
 }
-interface MenuItemProps extends ComponentProps<typeof Link> {
+
+interface NumberFieldThemeExtension extends ThemeExtensionsWithParts<'NumberField', ['group', 'stepper']> {
+}
+/**
+ * `react-aria` has a slightly different API for some DOM props.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomProps = 'size' | 'type' | 'value' | 'defaultValue' | 'step' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'min' | 'max';
+interface NumberFieldProps extends Omit<ComponentProps<'input'>, CustomProps>, Omit<AriaNumberFieldProps, 'isDisabled' | 'isRequired' | 'isReadOnly'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
+    size?: string;
+    hideStepper?: boolean;
 }
-declare const MenuItem: React.FC<MenuItemProps>;
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
 
-interface MessageThemeExtension<Value> {
-    message?: {
-        [key: string]: Value;
-    };
+interface OverlayProps extends ComponentProps<'div'> {
+    children: ReactNode;
+    open?: boolean;
+    container?: HTMLElement;
 }
-interface MessageProps extends ComponentProps<'div'> {
-    messageTitle: string;
+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;
+    /**
+     * Adjust size of the popover. This is used to make the popover
+     * at least the same width as its anchor element.
+     */
+    minWidth?: number | string;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
+
+interface UnderlayThemeExtension extends ThemeExtension<'Underlay'> {
+}
+interface UnderlayProps extends HTMLAttributes<HTMLElement> {
     variant?: string;
+    size?: string;
 }
-declare const Message: React.FC<MessageProps>;
+declare const Underlay: ({ size, variant, ...props }: UnderlayProps) => JSX.Element;
 
-interface RadioIconProps {
+interface RadioGroupThemeExtension extends ThemeExtensionsWithParts<'RadioGroup', ['container', 'group']> {
+}
+interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'isDisabled' | 'isRquired' | 'isReadOnly ' | 'validationState'> {
+    children: ReactNode[];
     variant?: string;
-    checked?: boolean;
+    size?: string;
+    required?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
     error?: boolean;
 }
 
-interface RadioThemeExtension<Value> {
-    radio?: {
-        [key: string]: Value;
-    };
+interface RadioThemeExtension extends ThemeExtensionsWithParts<'Radio', ['container', 'label', 'radio']> {
 }
-interface RadioInputProps extends RadioIconProps, ComponentProps<'input'> {
+declare type CustomRadioProps = 'value' | 'onFocus' | 'onBlur' | 'onKeyUp' | 'onKeyDown';
+interface RadioProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, 'size' | 'type' | 'defaultChecked' | CustomRadioProps>, AriaRadioProps {
+    disabled?: boolean;
 }
-interface RadioProps extends RadioInputProps {
-    id: string;
-    required?: boolean;
-    labelVariant?: string;
-    errorMessage?: string;
-}
-declare const Radio: React.FC<RadioProps>;
-
-interface SelectThemeExtension<Value> {
-    select?: {
-        __default: Value;
-        disabled?: Value;
-        listbox?: {
-            __default: Value;
-            error?: Value;
-        };
-        section?: Value;
-        option?: Value;
-    };
+declare const Radio: {
+    ({ disabled, ...props }: RadioProps): JSX.Element;
+    Group: ({ children, orientation, size, variant, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
+};
+
+interface SelectThemeExtension extends ThemeExtensionsWithParts<'Select', ['container', 'button', 'icon']> {
 }
-declare type SelectProps = {
-    labelVariant?: string;
-    placeholder?: string;
+interface SelectProps extends Omit<AriaSelectProps<object>, 'autoComplete' | 'isOpen' | 'isLoading' | 'onLoadMore' | 'isDisabled' | 'isRequired' | 'validationState'>, Omit<ComponentProps<'select'>, 'onKeyUp' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'children' | 'size'> {
+    open?: boolean;
     disabled?: boolean;
     required?: boolean;
-    width?: ResponsiveStyleValue<number | string>;
     error?: boolean;
-    errorMessage?: string;
-} & ComponentProps<'select'> & AriaSelectProps<object> & SingleSelection;
-declare const Select: ({ labelVariant, placeholder, disabled, required, error, errorMessage, width, className, ...props }: SelectProps) => JSX.Element;
+    variant?: string;
+    size?: string;
+    css?: CSSObject;
+}
+declare const Select: {
+    ({ open, disabled, required, error, variant, size, css, ...rest }: SelectProps): JSX.Element;
+    Option: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+    Section: <T_1>(props: _react_types_shared.SectionProps<T_1>) => JSX.Element;
+};
 
-interface SliderThemeExtension<Value> {
-    slider?: {
-        [key: string]: Value;
-    };
+/**
+ * Thanks to react-aria: https://react-spectrum.adobe.com/react-aria/useSlider.html
+ */
+
+interface SliderThemeExtension extends ThemeExtensionsWithParts<'Slider', [
+    'track',
+    'thumb',
+    'label',
+    'output'
+]> {
 }
-interface SliderProps extends ComponentProps<'input'> {
+interface SliderProps extends Omit<ComponentProps<'input'>, 'step' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size'>, 
+/**
+ * `react-aria` has a slightly different API for some events e.g `onChange`, `onFocus`
+ * `onBlur`. Thus, we adjust our regular props to match them.
+ */
+Pick<AriaSliderProps, 'maxValue' | 'step' | 'value' | 'defaultValue' | 'onChange'> {
     variant?: string;
+    size?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    children?: ReactNode;
 }
-declare const Slider: React.FC<SliderProps>;
+/**
+ * Component Slider
+ * The slider consists of two parts.
+ * A label + the output value and the slider functionality itself.
+ * The slider itself consists of a track line and a thumb.
+ */
+declare const Slider: ({ variant, size, ...props }: SliderProps) => JSX.Element;
 
-interface SwitchThemeExtension<Value> {
-    switch?: {
-        [key: string]: Value;
-    };
+interface SwitchThemeExtension extends ThemeExtensionsWithParts<'Switch', [
+    'container',
+    'label',
+    'track',
+    'thumb'
+]> {
 }
-declare type SwitchProps = {
+declare type CustomSwitchProps = 'size' | 'value' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp';
+interface SwitchProps extends Omit<AriaSwitchProps, 'isSelected'>, Omit<ComponentProps<'input'>, CustomSwitchProps> {
+    checked?: boolean;
     variant?: string;
-    labelVariant?: string;
-    disabled?: boolean;
-} & AriaSwitchProps & ToggleProps & ComponentProps<'input'>;
-declare const Switch: React.FC<SwitchProps>;
+    size?: string;
+}
+declare const Switch: ({ variant, size, checked, disabled, readOnly, defaultChecked, ...rest }: SwitchProps) => JSX.Element;
 
-interface TextareaThemeExtension<Value> {
-    textarea?: {
-        [key: string]: Value;
-    };
+interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
+    'table',
+    'header',
+    'row',
+    'cell'
+]> {
 }
-declare type TextareaProps = {
+interface TableProps extends Pick<TableProps$1<object>, 'onRowAction' | 'onCellAction'>, TableStateProps<object> {
     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 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 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 | 'size'>, Pick<AriaTextFieldProps, CustomTextAreEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+    variant?: string;
+    size?: string;
+    value?: string;
+    defaultValue?: string;
+}
+declare const TextArea: ({ disabled, required, readOnly, error, variant, size, ...props }: TextAreaProps) => JSX.Element;
 
 interface TooltipThemeExtension<Value> {
     tooltip?: {
@@ -287,24 +464,11 @@ declare const TooltipContext: React.Context<{
 }>;
 declare const TooltipTrigger: React.FC;
 
-interface ValidationMessageThemeExtension<Value> {
-    validation?: {
-        [key: string]: Value;
-    };
-}
-interface ValidationMessageProps extends ComponentProps<'span'> {
-    variant?: string;
-}
-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, DialogThemeExtension, DividerThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, RadioGroupThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, UnderlayThemeExtension {
 }
-
-interface ActionGroupProps extends ComponentProps<'div'> {
-    space?: ResponsiveStyleValue<string>;
-    verticalAlignment?: boolean;
+interface Theme extends Theme$1, RootThemeExtension<CSSObject>, TooltipThemeExtension<CSSObject> {
+    components: ComponentStyles;
 }
-declare const ActionGroup: React.FC<ActionGroupProps>;
 
 interface AsideProps {
     children: [ReactChild, ReactChild];
@@ -321,54 +485,40 @@ declare const Aside: ({ children, sideWidth, space, side, stretch, wrap, }: Asid
  */
 
 interface AspectProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     ratio?: keyof typeof aspect;
     maxWidth?: string;
 }
-declare const Aspect: React.FC<AspectProps>;
+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 Column: React.FC<ColumnProps>;
+declare const Breakout: React.FC<BreakoutProps>;
 
-interface ColumnsProps {
-    className?: string;
+interface CenterProps extends ComponentProps<'div'> {
+    maxWidth?: string;
     space?: ResponsiveStyleValue<string>;
-    horizontalAlign?: 'left' | 'right' | 'center';
-    verticalAlign?: 'top' | 'bottom' | 'center';
 }
-declare const Columns: React.FC<ColumnsProps>;
+declare const Center: React.FC<CenterProps>;
 
-interface ModalDialogProps extends OverlayProps, AriaDialogProps {
-    variant?: string;
-    backdropVariant?: string;
+interface ColumnsProps {
+    children?: ReactNode;
+    columns: Array<number>;
+    space?: ResponsiveStyleValue<string>;
+    columnLimit?: number;
+    collapseAt?: string;
 }
+declare const Columns: ({ space, columns, collapseAt, children, ...props }: ColumnsProps) => JSX.Element;
 
-interface DialogProps extends ModalDialogProps, ComponentProps<'div'> {
-    backdropVariant?: string;
-    close: ComponentProps<typeof Button>['onClick'];
-    isOpen: boolean;
-    title?: string;
-    variant?: string;
-    role?: 'dialog' | 'alertdialog';
+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 Dialog: React.FC<DialogProps>;
-declare const useDialogButtonProps: () => {
-    state: _react_stately_overlays.OverlayTriggerState;
-    openButtonProps: React.HTMLAttributes<HTMLSpanElement>;
-    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>;
+declare const Container: React.FC<ContainerProps>;
 
 interface InlineProps {
     space?: ResponsiveStyleValue<string>;
@@ -377,10 +527,25 @@ interface InlineProps {
 declare const Inline: React.FC<InlineProps>;
 
 interface StackProps {
+    as?: 'div' | 'ul' | 'ol';
     space?: ResponsiveStyleValue<string>;
     align?: 'left' | 'right' | 'center';
+    children?: ReactNode;
 }
-declare const Stack: React.FC<StackProps>;
+declare const Stack: ({ space, align, children, ...props }: StackProps) => JSX.Element;
+
+interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size'>, 
+/**
+ * `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'> {
+    variant?: string;
+    size?: string;
+    value?: string;
+    defaultValue?: string;
+}
+declare const TextField: ({ disabled, required, readOnly, error, variant, size, ...props }: TextFieldProps) => JSX.Element;
 
 interface TilesProps {
     space?: ResponsiveStyleValue<string>;
@@ -388,11 +553,4 @@ interface TilesProps {
 }
 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';
-}
-declare const Container: React.FC<ContainerProps>;
-
-export { ActionGroup, ActionGroupProps, Aside, AsideProps, Aspect, AspectProps, 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, Tiles, TilesProps, 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, CustomRadioProps, CustomSwitchProps, CustomTextAreEvents, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioGroupProps, RadioGroupThemeExtension, 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, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };