@marigold/components 0.9.0 → 1.0.1

package/dist/index.d.ts

@@ -1,26 +1,27 @@
-import { Theme as Theme$1, ThemeProviderProps, ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, BoxOwnProps, CSSObject, StateAttrProps, ResponsiveStyleValue } 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, { ReactNode, Key, LabelHTMLAttributes, HTMLAttributes, ReactChild } from 'react';
+import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ReactElement, 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 { 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 { AriaTextFieldProps } from '@react-types/textfield';
+import { AriaNumberFieldProps } from '@react-types/numberfield';
+import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
 import { AriaSelectProps } from '@react-types/select';
+import { AriaSliderProps } from '@react-types/slider';
 import { AriaSwitchProps } from '@react-types/switch';
 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 { TableStateProps, TableBody, Cell, Column, TableHeader, Row } from '@react-stately/table';
+import { AriaTextFieldProps } from '@react-types/textfield';
+import { PositionProps } from '@react-types/overlays';
+import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
 import { aspect, size } from '@marigold/tokens';
-import * as _react_stately_overlays from '@react-stately/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';
-import { TooltipTriggerState } from '@react-stately/tooltip';
-export { Item, Section } from '@react-stately/collections';
+export { VisuallyHidden } from '@react-aria/visually-hidden';
 
 interface RootThemeExtension<Value> {
     root?: {
@@ -82,12 +83,16 @@ interface CheckboxGroupContextProps extends CheckboxGroupState {
     variant?: string;
     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;
+    children: ReactNode;
     variant?: string;
     size?: string;
     label?: ReactNode;
@@ -108,6 +113,34 @@ interface ContentProps extends ThemeComponentProps, ComponentProps<'section'> {
 }
 declare const Content: ({ children, variant, size, ...props }: ContentProps) => JSX.Element;
 
+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 {
@@ -144,6 +177,7 @@ interface ImageThemeExtension extends ThemeExtension<'Image'> {
 }
 interface ImageProps extends ComponentProps<'img'> {
     variant?: string;
+    size?: string;
     children?: never;
 }
 declare const Image: ({ variant, ...props }: ImageProps) => JSX.Element;
@@ -158,8 +192,15 @@ interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>,
 }
 declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
 
-interface LabelThemeExtension$1 extends ThemeExtension<'Label'> {
+interface LabelThemeExtension extends ThemeExtension<'Label'> {
+}
+interface LabelProps extends ComponentProps<'label'> {
+    as?: 'label' | 'span';
+    variant?: string;
+    size?: string;
+    required?: boolean;
 }
+declare const Label: ({ as, required, children, variant, size, ...props }: LabelProps) => JSX.Element;
 
 interface LinkThemeExtension extends ThemeExtension<'Link'> {
 }
@@ -167,11 +208,21 @@ interface LinkOwnProps extends BoxOwnProps {
     disabled?: boolean;
     variant?: string;
     size?: string;
+    children?: ReactNode;
 }
 interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
 }
 declare const Link: PolymorphicComponent<LinkOwnProps, "a">;
 
+interface ListBoxThemeExtension extends ThemeExtensionsWithParts<'ListBox', [
+    'container',
+    'list',
+    'option',
+    'section',
+    'sectionTitle'
+]> {
+}
+
 interface MenuTriggerProps {
     children: [trigger: ReactNode, menu: ReactNode];
     disabled?: boolean;
@@ -191,26 +242,29 @@ declare const Menu: {
     Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
 };
 
-interface TextThemeExtension extends ThemeExtension<'Text'> {
+interface MessageThemeExtension extends ThemeExtensionsWithParts<'Message', [
+    'container',
+    'icon',
+    'title',
+    'content'
+]> {
 }
-interface TextProps extends ThemeComponentProps, ComponentProps<'p'>, Omit<BoxOwnProps, 'variant'> {
-    align?: CSSObject['textAlign'];
-    color?: string;
-    cursor?: string;
-    fontSize?: string;
-    outline?: string;
-    children?: React.ReactNode;
+interface MessageProps extends ComponentProps<'div'> {
+    messageTitle: ReactNode;
+    variant?: string;
+    size?: string;
 }
-declare const Text: ({ variant, size, align, color, fontSize, cursor, outline, children, ...props }: TextProps) => JSX.Element;
+declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => JSX.Element;
 
 interface FieldBaseProps {
     children?: ReactNode;
     variant?: string;
     size?: string;
+    width?: string;
     disabled?: boolean;
     required?: boolean;
     label?: ReactNode;
-    labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+    labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
     description?: ReactNode;
     descriptionProps?: HTMLAttributes<HTMLElement>;
     error?: boolean;
@@ -219,133 +273,136 @@ interface FieldBaseProps {
     stateProps?: StateAttrProps;
 }
 
-interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
+interface NumberFieldThemeExtension extends ThemeExtensionsWithParts<'NumberField', ['group', 'stepper']> {
 }
 /**
- * `react-aria` has a slightly different API for the above events.
+ * `react-aria` has a slightly different API for some DOM props.
  * 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 type CustomProps = 'size' | 'width' | '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;
+    width?: string;
+    hideStepper?: boolean;
 }
-declare const TextArea: ({ disabled, required, readOnly, error, ...props }: TextAreaProps) => JSX.Element;
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
 
-interface LabelThemeExtension<Value> {
-    label?: {
-        [key: string]: Value;
-    };
+interface OverlayProps extends ComponentProps<'div'> {
+    children: ReactNode;
+    open?: boolean;
+    container?: HTMLElement;
 }
-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 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 Label: React.FC<LabelProps>;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
 
-interface MessageThemeExtension<Value> {
-    message?: {
-        [key: string]: Value;
-    };
+interface UnderlayThemeExtension extends ThemeExtension<'Underlay'> {
 }
-interface MessageProps extends ComponentProps<'div'> {
-    messageTitle: string;
+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;
+    width?: 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 = 'size' | 'width' | 'type' | 'defaultChecked' | 'value' | 'onFocus' | 'onBlur' | 'onKeyUp' | 'onKeyDown';
+interface RadioProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, CustomRadioProps>, AriaRadioProps {
+    width?: string;
+    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: {
+    ({ width, disabled, ...props }: RadioProps): JSX.Element;
+    Group: ({ children, orientation, size, variant, width, 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'> {
+    variant?: string;
+    size?: string;
+    width?: string;
+    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;
+}
+declare const Select: {
+    ({ variant, size, width, open, disabled, required, error, ...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' | 'width'>, 
+/**
+ * `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;
+    width?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    children?: ReactNode;
 }
-declare const Slider: React.FC<SliderProps>;
+/**
+ * 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, width, ...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>;
-
-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;
+    size?: string;
+    width?: string;
 }
+declare const Switch: ({ variant, size, width, checked, disabled, readOnly, defaultChecked, ...rest }: SwitchProps) => JSX.Element;
 
 interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
     'table',
@@ -354,16 +411,14 @@ interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
     'cell'
 ]> {
 }
-interface TableProps extends Pick<TableProps$1<object>, 'onRowAction' | 'onCellAction'>, TableStateProps<object> {
-    align?: TableCellProps['align'];
-    alignHeader?: TableColumnHeaderProps['align'];
+interface TableProps extends Pick<TableProps$1<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
     variant?: string;
     size?: string;
 }
 declare const Table: Table;
 /**
  * Necessary since TypeScript can not infer the
- * types of the @react-stately components correctly.
+ * types of the @react-stately components.
  */
 interface Table {
     (props: TableProps): JSX.Element;
@@ -374,34 +429,55 @@ interface Table {
     Row: typeof Row;
 }
 
-interface TooltipThemeExtension<Value> {
-    tooltip?: {
-        [key: string]: Value;
-    };
+interface TextThemeExtension extends ThemeExtension<'Text'> {
 }
-interface TooltipProps extends TooltipTriggerProps {
+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' | 'size' | CustomTextAreEvents>, Pick<AriaTextFieldProps, CustomTextAreEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
+    size?: string;
+    width?: string;
+    value?: string;
+    defaultValue?: string;
 }
-declare const Tooltip: React.FC<TooltipProps>;
+declare const TextArea: ({ variant, size, width, disabled, required, readOnly, error, rows, ...props }: TextAreaProps) => JSX.Element;
 
-declare const TooltipContext: React.Context<{
-    state?: TooltipTriggerState | undefined;
-}>;
-declare const TooltipTrigger: React.FC;
+interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
+    children: [trigger: ReactElement, menu: ReactElement];
+    disabled?: boolean;
+    open?: boolean;
+}
 
-interface ValidationMessageThemeExtension<Value> {
-    validation?: {
-        [key: string]: Value;
-    };
+interface TooltipThemeExtension extends ThemeExtensionsWithParts<'Tooltip', ['container', 'arrow']> {
 }
-interface ValidationMessageProps extends ComponentProps<'span'> {
+interface TooltipProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     variant?: string;
+    size?: string;
 }
-declare const ValidationMessage: React.FC<ValidationMessageProps>;
+declare const Tooltip: {
+    ({ children, variant, size }: TooltipProps): JSX.Element;
+    Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
+};
 
-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 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, TooltipThemeExtension, UnderlayThemeExtension {
 }
-interface Theme extends Theme$1, RootThemeExtension<CSSObject>, LabelThemeExtension<CSSObject>, MessageThemeExtension<CSSObject>, RadioThemeExtension<CSSObject>, SelectThemeExtension<CSSObject>, SliderThemeExtension<CSSObject>, SwitchThemeExtension<CSSObject>, TooltipThemeExtension<CSSObject>, ValidationMessageThemeExtension<CSSObject> {
+interface Theme extends Theme$1, RootThemeExtension<CSSObject> {
     components: ComponentStyles;
 }
 
@@ -427,96 +503,94 @@ interface AspectProps extends ComponentProps<'div'> {
 declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
 
 interface BreakoutProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     horizontalAlign?: 'top' | 'bottom' | 'center';
     verticalAlign?: 'left' | 'right' | 'center';
 }
-declare const Breakout: React.FC<BreakoutProps>;
+declare const Breakout: ({ horizontalAlign, verticalAlign, children, ...props }: BreakoutProps) => JSX.Element;
 
 interface CenterProps extends ComponentProps<'div'> {
+    children?: ReactNode;
     maxWidth?: string;
     space?: ResponsiveStyleValue<string>;
 }
-declare const Center: React.FC<CenterProps>;
+declare const Center: ({ maxWidth, space, children, ...props }: CenterProps) => JSX.Element;
 
 interface ColumnsProps {
+    children?: ReactNode;
     columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
     columnLimit?: number;
     collapseAt?: string;
 }
-declare const Columns: React.FC<ColumnsProps>;
+declare const Columns: ({ space, columns, collapseAt, children, ...props }: ColumnsProps) => JSX.Element;
 
-interface ModalDialogProps extends OverlayProps$1, AriaDialogProps {
-    variant?: string;
-    backdropVariant?: string;
+interface ContainerProps extends ComponentProps<'div'> {
+    children?: ReactNode;
+    contentType?: 'content' | 'header';
+    size?: keyof typeof size.content | keyof typeof size.header;
+    align?: 'left' | 'right' | 'center';
+    alignContainer?: 'left' | 'right' | 'center';
 }
+declare const Container: ({ contentType, size, align, alignContainer, children, ...props }: ContainerProps) => JSX.Element;
 
-interface DialogProps extends ModalDialogProps, ComponentProps<'div'> {
-    backdropVariant?: string;
-    close: ComponentProps<typeof Button>['onClick'];
-    isOpen: boolean;
-    title?: string;
-    variant?: string;
-    role?: 'dialog' | 'alertdialog';
-}
-declare const Dialog: React.FC<DialogProps>;
-declare const useDialogButtonProps: () => {
-    state: _react_stately_overlays.OverlayTriggerState;
-    openButtonProps: React.HTMLAttributes<HTMLSpanElement>;
-    openButtonRef: React.RefObject<HTMLElement>;
+declare const ALIGNMENT_X$1: {
+    left: string;
+    center: string;
+    right: string;
+};
+declare const ALIGNMENT_Y$1: {
+    top: string;
+    center: string;
+    bottom: string;
 };
-
 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;
+    space?: ResponsiveStyleValue<string>;
+    alignX?: keyof typeof ALIGNMENT_X$1;
+    alignY?: keyof typeof ALIGNMENT_Y$1;
 }
-declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
+declare const Inline: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
 
+declare const ALIGNMENT_X: {
+    left: string;
+    center: string;
+    right: string;
+};
+declare const ALIGNMENT_Y: {
+    top: string;
+    center: string;
+    bottom: string;
+};
 interface StackProps {
     as?: 'div' | 'ul' | 'ol';
+    children?: ReactNode;
     space?: ResponsiveStyleValue<string>;
-    align?: 'left' | 'right' | 'center';
+    alignX?: keyof typeof ALIGNMENT_X;
+    alignY?: keyof typeof ALIGNMENT_Y;
+    stretch?: boolean;
 }
-declare const Stack: React.FC<StackProps>;
+declare const Stack: ({ children, space, alignX, alignY, stretch, ...props }: StackProps) => JSX.Element;
 
-interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'>, 
+interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size' | 'width'>, 
 /**
  * `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;
+    width?: string;
     value?: string;
     defaultValue?: string;
 }
-declare const TextField: ({ disabled, required, readOnly, error, ...props }: TextFieldProps) => JSX.Element;
+declare const TextField: ({ variant, size, width, disabled, required, readOnly, error, ...props }: TextFieldProps) => JSX.Element;
 
 interface TilesProps {
+    children: ReactNode;
     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>;
+declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLDivElement>>;
 
-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 };
+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, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };