@marigold/components 0.9.0 → 1.0.0-beta.0

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, 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 { 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 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 {
@@ -158,8 +191,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'> {
 }
@@ -172,6 +212,15 @@ 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,17 +240,19 @@ 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;
@@ -210,7 +261,7 @@ interface FieldBaseProps {
     disabled?: boolean;
     required?: boolean;
     label?: ReactNode;
-    labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+    labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
     description?: ReactNode;
     descriptionProps?: HTMLAttributes<HTMLElement>;
     error?: boolean;
@@ -219,133 +270,132 @@ 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' | '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 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;
+    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;
-
-interface SliderThemeExtension<Value> {
-    slider?: {
-        [key: string]: Value;
-    };
-}
-interface SliderProps extends ComponentProps<'input'> {
     variant?: string;
+    size?: string;
+    css?: CSSObject;
 }
-declare const Slider: React.FC<SliderProps>;
+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 SwitchThemeExtension<Value> {
-    switch?: {
-        [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'
+]> {
 }
-declare type SwitchProps = {
+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;
-    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;
+    size?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    children?: ReactNode;
 }
+/**
+ * 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 TableColumnHeaderProps {
-    chilren?: ReactNode;
-    item: Node<object>;
-    state: TableState<object>;
-    isSelectionColumn?: boolean;
-    align?: 'left' | 'center' | 'right';
-    css?: CSSObject;
+interface SwitchThemeExtension extends ThemeExtensionsWithParts<'Switch', [
+    'container',
+    'label',
+    'track',
+    'thumb'
+]> {
 }
+declare type CustomSwitchProps = 'size' | 'value' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp';
+interface SwitchProps extends Omit<AriaSwitchProps, 'isSelected'>, Omit<ComponentProps<'input'>, CustomSwitchProps> {
+    checked?: boolean;
+    variant?: string;
+    size?: string;
+}
+declare const Switch: ({ variant, size, checked, disabled, readOnly, defaultChecked, ...rest }: SwitchProps) => JSX.Element;
 
 interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
     'table',
@@ -355,8 +405,6 @@ interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
 ]> {
 }
 interface TableProps extends Pick<TableProps$1<object>, 'onRowAction' | 'onCellAction'>, TableStateProps<object> {
-    align?: TableCellProps['align'];
-    alignHeader?: TableColumnHeaderProps['align'];
     variant?: string;
     size?: string;
 }
@@ -374,6 +422,33 @@ interface Table {
     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?: {
         [key: string]: Value;
@@ -389,19 +464,9 @@ 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 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, 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>, TooltipThemeExtension<CSSObject> {
     components: ComponentStyles;
 }
 
@@ -439,32 +504,21 @@ interface CenterProps extends ComponentProps<'div'> {
 declare const Center: React.FC<CenterProps>;
 
 interface ColumnsProps {
+    children?: ReactNode;
     columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
     columnLimit?: number;
     collapseAt?: string;
 }
-declare const Columns: React.FC<ColumnsProps>;
-
-interface ModalDialogProps extends OverlayProps$1, AriaDialogProps {
-    variant?: string;
-    backdropVariant?: 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 const Container: React.FC<ContainerProps>;
 
 interface InlineProps {
     space?: ResponsiveStyleValue<string>;
@@ -472,38 +526,26 @@ interface InlineProps {
 }
 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';
+    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'>, 
+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, ...props }: TextFieldProps) => JSX.Element;
+declare const TextField: ({ disabled, required, readOnly, error, variant, size, ...props }: TextFieldProps) => JSX.Element;
 
 interface TilesProps {
     space?: ResponsiveStyleValue<string>;
@@ -511,12 +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';
-    alignContainer?: 'left' | 'right' | 'center';
-}
-declare const Container: React.FC<ContainerProps>;
-
-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, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };