@marigold/components 5.6.0 → 6.0.1

package/dist/index.d.ts

@@ -1,19 +1,25 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtensionsWithParts, CSSObject, ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, StateAttrProps, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
-export { Box, BoxOwnProps, BoxProps, ThemeProvider, useTheme } from '@marigold/system';
 import React, { ReactElement, ReactNode, Key, HTMLAttributes, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { TreeState } from '@react-stately/tree';
+import { AriaAccordionProps } from '@react-aria/accordion';
 import * as _react_types_shared from '@react-types/shared';
 import { ItemElement, ItemProps, Node, PressEvents, FocusableDOMProps, CollectionElement, StyleProps, LabelableProps, HelpTextProps } from '@react-types/shared';
+import { TreeState } from '@react-stately/tree';
+import { GapSpaceProp, AspectProp, WidthProp, AlignmentProp, alignment, PaddingSpaceProp, PaddingSpacePropX, PaddingSpacePropY, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PlaceItemsProp, GridColumn, GridColsAlignProp, StateAttrProps, TextAlignProp, ObjectFitProp, ObjectPositionProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, SVGProps } from '@marigold/system';
+export { ThemeProvider, useTheme } from '@marigold/system';
+import { NonZeroPercentage, HtmlProps, PropsOf, PolymorphicComponent } from '@marigold/types';
 import { SearchAutocompleteProps } from '@react-types/autocomplete';
-import { HtmlProps, PropsOf, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
+import { ComboBoxProps as ComboBoxProps$1 } from '@react-types/combobox';
 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 { AriaDateFieldProps, AriaDatePickerProps } from '@react-aria/datepicker';
 import { DateValue, CalendarDate } from '@internationalized/date';
-import { AriaButtonProps } from '@react-aria/button';
+import { AriaCalendarProps, DateValue as DateValue$1, AriaCalendarCellProps, AriaCalendarGridProps } from '@react-aria/calendar';
+import { CalendarState } from '@react-stately/calendar';
 import { AriaNumberFieldProps } from '@react-types/numberfield';
+import { OverlayProps as OverlayProps$1, AriaPopoverProps, AriaModalOverlayProps } from '@react-aria/overlays';
+import { OverlayTriggerState } from '@react-stately/overlays';
 import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
 import { Item, Section } from '@react-stately/collections';
 import { AriaSelectProps } from '@react-types/select';
@@ -24,25 +30,16 @@ import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, Column, Table
 import { AriaTextFieldProps } from '@react-types/textfield';
 import { PositionProps } from '@react-types/overlays';
 import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
-import { AriaCalendarProps, DateValue as DateValue$1, AriaCalendarCellProps, AriaCalendarGridProps } from '@react-aria/calendar';
-import { AriaTabListProps } from '@react-types/tabs';
-import { AriaAccordionProps } from '@react-aria/accordion';
-import { aspect, size } from '@marigold/tokens';
-import { ComboBoxProps as ComboBoxProps$1 } from '@react-types/combobox';
-import { CheckboxGroupState } from '@react-stately/checkbox';
-import { CalendarState } from '@react-stately/calendar';
-import { OverlayProps as OverlayProps$1, AriaPopoverProps, AriaModalOverlayProps } from '@react-aria/overlays';
-import { OverlayTriggerState } from '@react-stately/overlays';
-export { SSRProvider } from '@react-aria/ssr';
 import { AriaTagGroupProps } from '@react-aria/tag';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
+import { AriaTabListProps } from '@react-types/tabs';
 
 interface AccordionProps extends Omit<AriaAccordionProps<object>, 'children' | 'expandedKeys' | 'disabledKeys' | 'onExpandedChange'> {
     children: ItemElement<object>[] | ItemElement<object>;
     selectionMode?: string;
 }
 declare const Accordion: {
-    ({ children, ...props }: AccordionProps): JSX.Element;
+    ({ children, ...props }: AccordionProps): React.JSX.Element;
     Item: <T>(props: AccordionOwnItemProps<T>) => JSX.Element;
 };
 interface AccordionOwnItemProps<T> extends ItemProps<T> {
@@ -51,20 +48,34 @@ interface AccordionOwnItemProps<T> extends ItemProps<T> {
     title: string | ReactElement;
 }
 
-interface AccordionThemeExtension extends ThemeExtensionsWithParts<'Accordion', ['button', 'item']> {
-}
 interface AccordionItemProps {
     item: Node<object>;
     state: TreeState<object>;
-    css?: CSSObject;
     title: string | ReactNode;
     variant?: string;
     size?: string;
 }
-declare const AccordionItem: ({ item, state, css, title, variant, size, ...props }: AccordionItemProps) => JSX.Element;
+declare const AccordionItem: ({ item, state, title, variant, size, ...props }: AccordionItemProps) => React.JSX.Element;
+
+interface AsideProps extends GapSpaceProp {
+    children: [ReactElement, ReactElement];
+    side?: 'left' | 'right';
+    sideWidth?: string;
+    stretch?: boolean;
+    wrap?: NonZeroPercentage;
+}
+declare const Aside: ({ children, sideWidth, space, side, stretch, wrap, }: AsideProps) => React.JSX.Element;
 
-interface AutocompleteThemeExtension extends ThemeExtensionsWithParts<'Autocomplete', ['icon', 'clear']> {
+/**
+ * Based on https://theme-ui.com/components/aspect-ratio
+ */
+
+interface AspectProps extends HtmlProps<'div'>, AspectProp {
+    children?: ReactNode;
+    maxWidth?: string;
 }
+declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => React.JSX.Element;
+
 interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDisabled' | 'isRequired' | 'isReadonly' | 'validationState' | 'icon' | 'onInputChange' | 'inputValue' | 'defaultInputValue'> {
     disabled?: boolean;
     required?: boolean;
@@ -88,31 +99,52 @@ interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDis
     onSubmit?: (key: Key | null, value: string | null) => void;
     variant?: string;
     size?: string;
-    width?: string;
+    width?: WidthProp['width'];
 }
 declare const Autocomplete: {
-    ({ disabled, required, readOnly, error, onChange, value, defaultValue, variant, size, width, ...rest }: AutocompleteProps): JSX.Element;
+    ({ disabled, required, readOnly, error, onChange, value, defaultValue, variant, size, width, ...rest }: AutocompleteProps): React.JSX.Element;
     Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
 };
 
-interface BadgeThemeExtension extends ThemeExtension<'Badge'> {
+interface ComboBoxProps extends Omit<ComboBoxProps$1<object>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'defaultInputValue' | 'inputValue' | 'onInputChange'> {
+    variant?: string;
+    size?: string;
+    error?: boolean;
+    width?: WidthProp['width'];
+    disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    defaultValue?: ComboBoxProps$1<object>['defaultInputValue'];
+    value?: ComboBoxProps$1<object>['inputValue'];
+    onChange?: ComboBoxProps$1<object>['onInputChange'];
 }
+declare const ComboBox: {
+    ({ error, width, disabled, required, readOnly, defaultValue, value, onChange, variant, size, ...rest }: ComboBoxProps): React.JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
+
 interface BadgeProps extends HtmlProps<'div'> {
     children?: React.ReactNode;
     variant?: string;
     size?: string;
 }
-declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => JSX.Element;
+declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => React.JSX.Element;
 
-interface BodyThemeExtension extends ThemeExtension<'Body'> {
-}
-interface BodyProps extends ThemeComponentProps, HtmlProps<'section'> {
+interface BreakoutProps extends HtmlProps<'div'>, AlignmentProp {
     children?: ReactNode;
+    height?: string;
+    alignX?: keyof typeof alignment.horizontal.alignmentX;
+    alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
-declare const Body: ({ children, variant, size, ...props }: BodyProps) => JSX.Element;
+declare const Breakout: ({ height, children, orientation, alignX, alignY, ...props }: BreakoutProps) => React.JSX.Element;
 
-interface ButtonThemeExtension extends ThemeExtension<'Button'> {
+interface BodyProps extends HtmlProps<'section'> {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
 }
+declare const Body: ({ children, variant, size, ...props }: BodyProps) => React.JSX.Element;
+
 interface ButtonOwnProps extends PressEvents, FocusableDOMProps, HtmlProps<'button'> {
     children?: ReactNode;
     variant?: string;
@@ -123,36 +155,33 @@ interface ButtonProps extends PropsOf<typeof Button> {
 }
 declare const Button: PolymorphicComponent<"button", ButtonOwnProps>;
 
-interface CardThemeExtension extends ThemeExtension<'Card'> {
+interface CardProps extends HtmlProps<'div'>, GapSpaceProp, PaddingSpaceProp, PaddingSpacePropX, PaddingSpacePropY, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
+    p?: PaddingSpaceProp['space'];
+    px?: PaddingSpacePropX['spaceX'];
+    py?: PaddingSpacePropY['spaceY'];
 }
-interface CardProps extends ThemeComponentProps, HtmlProps<'div'> {
+declare const Card: ({ children, variant, size, space, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => React.JSX.Element;
+
+interface CenterProps extends HtmlProps<'div'>, GapSpaceProp {
     children?: ReactNode;
-    space?: ResponsiveStyleValue<string>;
-    p?: ResponsiveStyleValue<string>;
-    px?: ResponsiveStyleValue<string>;
-    py?: ResponsiveStyleValue<string>;
-    pt?: ResponsiveStyleValue<string>;
-    pb?: ResponsiveStyleValue<string>;
-    pl?: ResponsiveStyleValue<string>;
-    pr?: ResponsiveStyleValue<string>;
-}
-declare const Card: ({ children, variant, size, space, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => JSX.Element;
-
-interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
-    'container',
-    'label',
-    'checkbox'
-]> {
+    maxWidth?: string;
 }
+declare const Center: ({ maxWidth, space, children, ...props }: CenterProps) => React.JSX.Element;
+
 /**
  * `react-aria` has a slightly different API for the above events.
  * Thus, we adjust our regular props to match them.
  */
 type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
-interface CheckboxProps extends ThemeComponentProps, Omit<HtmlProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<AriaCheckboxProps, CustomCheckboxProps> {
+interface CheckboxProps extends Omit<HtmlProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<AriaCheckboxProps, CustomCheckboxProps> {
     children?: ReactNode;
     indeterminate?: boolean;
     error?: boolean;
+    variant?: string;
+    size?: string;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -177,8 +206,36 @@ interface CheckboxGroupProps extends Omit<HtmlProps<'div'>, 'onChange'>, AriaChe
     value?: string[];
     defaultValue?: string[];
     onChange?: (value: string[]) => void;
+    width?: WidthProp['width'];
 }
-declare const CheckboxGroup: ({ children, required, disabled, readOnly, error, ...rest }: CheckboxGroupProps) => JSX.Element;
+declare const CheckboxGroup: ({ children, required, disabled, readOnly, error, width, ...rest }: CheckboxGroupProps) => React.JSX.Element;
+
+interface ColumnsProps extends GapSpaceProp {
+    children?: ReactNode;
+    columns: Array<number>;
+    collapseAt?: string | 0;
+    stretch?: boolean;
+}
+declare const Columns: ({ space, columns, collapseAt, stretch, children, ...props }: ColumnsProps) => React.JSX.Element;
+
+interface ContainerProps extends HtmlProps<'div'>, PlaceItemsProp, GridColumn, GridColsAlignProp {
+    children?: ReactNode;
+    contentType?: 'content' | 'header';
+    size?: keyof typeof content | keyof typeof header;
+    align?: 'left' | 'right' | 'center';
+    alignItems?: PlaceItemsProp['align'];
+}
+declare const content: {
+    small: string;
+    medium: string;
+    large: string;
+};
+declare const header: {
+    small: string;
+    medium: string;
+    large: string;
+};
+declare const Container: ({ contentType, size, align, alignItems, children, ...props }: ContainerProps) => React.JSX.Element;
 
 interface DialogControllerProps {
     children: ReactNode;
@@ -199,8 +256,6 @@ interface DialogContextProps {
     close?: () => void;
 }
 
-interface DialogThemeExtension extends ThemeExtensionsWithParts<'Dialog', ['container', 'closeButton']> {
-}
 interface DialogChildProps {
     close: DialogContextProps['close'];
     titleProps: HTMLAttributes<HTMLElement>;
@@ -212,36 +267,29 @@ interface DialogProps extends AriaDialogProps {
     closeButton?: boolean;
 }
 declare const Dialog: {
-    ({ children, variant, size, closeButton, ...props }: DialogProps): JSX.Element;
-    Trigger: ({ children, dismissable, keyboardDismissable, }: DialogTriggerProps) => JSX.Element;
-    Controller: ({ children, dismissable, keyboardDismissable, open, onOpenChange, }: DialogControllerProps) => JSX.Element;
+    ({ children, variant, size, closeButton, ...props }: DialogProps): React.JSX.Element;
+    Trigger: ({ children, dismissable, keyboardDismissable, }: DialogTriggerProps) => React.JSX.Element;
+    Controller: ({ children, dismissable, keyboardDismissable, open, onOpenChange, }: DialogControllerProps) => React.JSX.Element;
 };
 
-interface DividerThemeExtension extends ThemeExtension<'Divider'> {
-}
 interface DividerProps extends SeparatorProps {
     variant?: string;
 }
-declare const Divider: ({ variant, ...props }: DividerProps) => JSX.Element;
+declare const Divider: ({ variant, ...props }: DividerProps) => React.JSX.Element;
 
-interface LabelThemeExtension extends ThemeExtension<'Label'> {
-}
 interface LabelProps extends HtmlProps<'label'> {
     as?: 'label' | 'span';
     variant?: string;
     size?: string;
-    required?: boolean;
     labelWidth?: string;
 }
-declare const Label: ({ as, required, children, variant, size, labelWidth, ...props }: LabelProps) => JSX.Element;
+declare const Label: ({ as, children, variant, size, labelWidth, ...props }: LabelProps) => React.JSX.Element;
 
-interface FieldBaseProps {
+interface FieldBaseProps extends WidthProp {
     children?: ReactNode;
     variant?: string;
     size?: string;
-    width?: string;
     disabled?: boolean;
-    required?: boolean;
     label?: ReactNode;
     labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
     description?: ReactNode;
@@ -251,9 +299,7 @@ interface FieldBaseProps {
     errorMessageProps?: HTMLAttributes<HTMLElement>;
     stateProps?: StateAttrProps;
 }
-interface FieldThemeExtension extends ThemeExtension<'Field'> {
-}
-declare const FieldBase: ({ children, variant, size, width, disabled, required, label, labelProps, description, descriptionProps, error, errorMessage, errorMessageProps, stateProps, ...props }: FieldBaseProps) => JSX.Element;
+declare const FieldBase: ({ children, variant, size, width, disabled, label, labelProps, description, descriptionProps, error, errorMessage, errorMessageProps, stateProps, ...props }: FieldBaseProps) => React.JSX.Element;
 
 interface FieldGroupContextProps {
     labelWidth?: string;
@@ -264,89 +310,125 @@ interface FieldGroupProps {
     labelWidth?: string;
     children: ReactNode;
 }
-declare const FieldGroup: ({ labelWidth, children }: FieldGroupProps) => JSX.Element;
+declare const FieldGroup: ({ labelWidth, children }: FieldGroupProps) => React.JSX.Element;
 
-interface DateFieldThemeExtension extends ThemeExtensionsWithParts<'DateField', [
-    'segment',
-    'placeholder',
-    'field',
-    'calendarButton',
-    'segmentsContainer'
-]> {
-}
-interface DateFieldProps extends Omit<AriaDateFieldProps<DateValue>, 'isDisabled' | 'isReadOnly' | 'isRequired'> {
-    onChange?: (value: DateValue) => void;
-    value?: DateValue | null;
-    defaultValue?: DateValue | null;
-    ref?: React.RefObject<unknown> | undefined;
-    icon?: ReactElement;
-    action?: ReactElement;
-    buttonProps?: AriaButtonProps<'button'>;
-    isPressed?: boolean;
-    error?: boolean;
-    errorMessageProps?: HTMLAttributes<HTMLElement>;
-    disabled?: boolean;
-    readOnly?: boolean;
-    required?: boolean;
+interface FooterProps extends HtmlProps<'footer'> {
+    children?: ReactNode;
     variant?: string;
     size?: string;
 }
-declare const DateField: ({ disabled, readOnly, required, error, errorMessage, errorMessageProps, buttonProps, variant, size, icon, action, isPressed, ...res }: DateFieldProps) => JSX.Element;
-
-interface FooterThemeExtension extends ThemeExtension<'Footer'> {
-}
-interface FooterProps extends ThemeComponentProps, HtmlProps<'footer'> {
-    children?: ReactNode;
-}
-declare const Footer: ({ children, variant, size, ...props }: FooterProps) => JSX.Element;
+declare const Footer: ({ children, variant, size, ...props }: FooterProps) => React.JSX.Element;
 
-interface HeaderThemeExtension extends ThemeExtension<'Header'> {
-}
-interface HeaderProps extends ThemeComponentProps, HtmlProps<'header'> {
+interface HeaderProps extends HtmlProps<'header'> {
     children?: ReactNode;
+    variant?: string;
+    size?: string;
 }
-declare const Header: ({ children, variant, size, ...props }: HeaderProps) => JSX.Element;
+declare const Header: ({ children, variant, size, className, ...props }: HeaderProps) => React.JSX.Element;
 
-interface HeadlineThemeExtension extends ThemeExtension<'Headline'> {
-}
-interface HeadlineProps extends ThemeComponentProps, HtmlProps<'h1'> {
+interface HeadlineProps extends HtmlProps<'h1'>, TextAlignProp {
     children?: ReactNode;
     level?: '1' | '2' | '3' | '4' | '5' | '6';
-    align?: CSSObject['textAlign'];
     color?: string;
+    variant?: string;
+    size?: string;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
-declare const Headline: ({ children, variant, size, align, color, level, ...props }: HeadlineProps) => JSX.Element;
-
-interface HelpTextThemeExtension extends ThemeExtensionsWithParts<'HelpText', ['container', 'icon']> {
-}
+declare const Headline: ({ children, variant, size, align, color, level, as, ...props }: HeadlineProps) => React.JSX.Element;
 
-interface ImageThemeExtension extends ThemeExtension<'Image'> {
-}
-interface ImageProps extends HtmlProps<'img'> {
+interface ImageProps extends HtmlProps<'img'>, ObjectFitProp, ObjectPositionProp {
     variant?: string;
     size?: string;
-    fit?: CSSObject['objectFit'];
-    position?: CSSObject['objectPosition'];
     children?: never;
     alt: string;
 }
-declare const Image: ({ variant, size, fit, position, ...props }: ImageProps) => JSX.Element;
+declare const Image: ({ variant, size, fit, position, ...props }: ImageProps) => React.JSX.Element;
 
-interface InputThemeExtension extends ThemeExtensionsWithParts<'Input', ['input', 'icon', 'container']> {
+interface InlineProps extends AlignmentProp, GapSpaceProp {
+    children?: ReactNode;
+    alignX?: keyof typeof alignment.horizontal.alignmentX;
+    alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
-interface InputOwnProps extends Omit<HtmlProps<'input'>, 'size'> {
+declare const Inline: ({ space, orientation, alignX, alignY, children, ...props }: InlineProps) => React.JSX.Element;
+
+interface InputOwnProps extends Omit<HtmlProps<'input'>, 'size' | 'className'> {
     icon?: ReactElement;
     action?: ReactElement;
     variant?: string;
     size?: string;
+    className?: {
+        container?: string;
+        input?: string;
+        icon?: string;
+    };
 }
-interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
+interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'className'>, InputOwnProps {
 }
 declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
 
-interface LinkThemeExtension extends ThemeExtension<'Link'> {
+interface DateFieldProps extends Omit<AriaDateFieldProps<DateValue>, 'isDisabled' | 'isReadOnly' | 'isRequired'> {
+    onChange?: (value: DateValue) => void;
+    value?: DateValue | null;
+    defaultValue?: DateValue | null;
+    ref?: React.RefObject<unknown> | undefined;
+    triggerRef?: React.RefObject<HTMLDivElement> | undefined;
+    action?: ReactElement;
+    isPressed?: boolean;
+    error?: boolean;
+    errorMessageProps?: HTMLAttributes<HTMLElement>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    variant?: string;
+    size?: string;
+    width?: WidthProp['width'];
 }
-interface LinkOwnProps extends PressEvents, BoxOwnProps {
+declare const DateField: ({ disabled, readOnly, required, error, errorMessage, errorMessageProps, variant, size, action, isPressed, triggerRef, width, ...res }: DateFieldProps) => React.JSX.Element;
+
+interface CalendarProps extends Omit<AriaCalendarProps<DateValue$1>, 'isDisabled' | 'isReadOnly'> {
+    disabled?: boolean;
+    readOnly?: boolean;
+    variant?: string;
+    size?: string;
+}
+declare const Calendar: ({ disabled, readOnly, size, variant, ...rest }: CalendarProps) => React.JSX.Element;
+
+interface CalendarCellProps extends AriaCalendarCellProps {
+    state: CalendarState;
+}
+declare const CalendarCell: (props: CalendarCellProps) => React.JSX.Element;
+
+interface CalendarGridProps extends AriaCalendarGridProps {
+    state: CalendarState;
+}
+declare const CalendarGrid: ({ state, ...props }: CalendarGridProps) => React.JSX.Element;
+
+interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'isOpen'> {
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    open?: boolean;
+    error?: boolean;
+    shouldCloseOnSelect?: boolean;
+    variant?: string;
+    size?: string;
+}
+declare const DatePicker: ({ disabled, required, readonly, open, error, shouldCloseOnSelect, variant, size, ...rest }: DatePickerProps) => React.JSX.Element;
+
+type InsetProps = {
+    children: ReactNode;
+    space?: never;
+    spaceX?: PaddingSpacePropX['spaceX'];
+    spaceY?: PaddingSpacePropY['spaceY'];
+} | {
+    children: ReactNode;
+    space?: PaddingSpaceProp['space'];
+    spaceX?: never;
+    spaceY?: never;
+};
+declare const Inset: ({ space, spaceX, spaceY, children, }: InsetProps) => React.JSX.Element;
+
+interface LinkOwnProps extends PressEvents {
     disabled?: boolean;
     variant?: string;
     size?: string;
@@ -360,8 +442,6 @@ interface ListItemProps extends HtmlProps<'li'> {
     children?: ReactNode;
 }
 
-interface ListThemeExtension extends ThemeExtensionsWithParts<'List', ['ul', 'ol', 'item']> {
-}
 interface ListProps extends HtmlProps<'ul'> {
     variant?: string;
     size?: string;
@@ -369,19 +449,10 @@ interface ListProps extends HtmlProps<'ul'> {
     children?: ReactNode;
 }
 declare const List: {
-    ({ as, children, variant, size, ...props }: ListProps): JSX.Element;
-    Item: ({ children, ...props }: ListItemProps) => JSX.Element;
+    ({ as, children, variant, size, ...props }: ListProps): React.JSX.Element;
+    Item: ({ children, ...props }: ListItemProps) => React.JSX.Element;
 };
 
-interface ListBoxThemeExtension extends ThemeExtensionsWithParts<'ListBox', [
-    'container',
-    'list',
-    'option',
-    'section',
-    'sectionTitle'
-]> {
-}
-
 interface MenuTriggerProps {
     children: [trigger: ReactNode, menu: ReactNode];
     disabled?: boolean;
@@ -389,8 +460,6 @@ interface MenuTriggerProps {
     onOpenChange?: (isOpen: boolean) => void;
 }
 
-interface MenuThemeExtension extends ThemeExtensionsWithParts<'Menu', ['container', 'item', 'section']> {
-}
 interface MenuProps extends Omit<HtmlProps<'ul'>, 'onSelect' | 'size'> {
     children: CollectionElement<object> | CollectionElement<object>[];
     variant?: string;
@@ -398,32 +467,28 @@ interface MenuProps extends Omit<HtmlProps<'ul'>, 'onSelect' | 'size'> {
     onAction?: (key: Key) => void;
 }
 declare const Menu: {
-    ({ variant, size, ...props }: MenuProps): JSX.Element;
-    Trigger: ({ disabled, open, onOpenChange, children, }: MenuTriggerProps) => JSX.Element;
+    ({ variant, size, ...props }: MenuProps): React.JSX.Element;
+    Trigger: ({ disabled, open, onOpenChange, children, }: MenuTriggerProps) => React.JSX.Element;
     Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
     Section: <T_1>(props: _react_types_shared.SectionProps<T_1>) => JSX.Element;
 };
 
 interface ActionMenuProps extends MenuProps {
 }
-declare const ActionMenu: (props: ActionMenuProps) => JSX.Element;
+declare const ActionMenu: (props: ActionMenuProps) => React.JSX.Element;
 
-interface MessageThemeExtension extends ThemeExtensionsWithParts<'Message', [
-    'container',
-    'icon',
-    'title',
-    'content'
-]> {
-}
+declare const icons: {
+    info: () => React.JSX.Element;
+    warning: () => React.JSX.Element;
+    error: () => React.JSX.Element;
+};
 interface MessageProps extends HtmlProps<'div'> {
     messageTitle: ReactNode;
-    variant?: string;
+    variant?: keyof typeof icons;
     size?: string;
 }
-declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => JSX.Element;
+declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => React.JSX.Element;
 
-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.
@@ -432,7 +497,7 @@ type CustomProps = 'size' | 'width' | 'type' | 'value' | 'defaultValue' | 'step'
 interface NumberFieldProps extends Omit<HtmlProps<'input'>, CustomProps>, Omit<AriaNumberFieldProps, 'isDisabled' | 'isRequired' | 'isReadOnly'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
-    width?: string;
+    width?: WidthProp['width'];
     hideStepper?: boolean;
 }
 declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
@@ -451,7 +516,7 @@ interface OverlayProps {
     children: OverlayProps$1['children'];
     container?: OverlayProps$1['portalContainer'];
 }
-declare const Overlay: ({ children, container, open }: OverlayProps) => JSX.Element | null;
+declare const Overlay: ({ children, container, open }: OverlayProps) => React.JSX.Element | null;
 
 interface PopoverProps extends Pick<AriaPopoverProps, 'triggerRef' | 'scrollRef' | 'isNonModal'> {
     keyboardDismissDisabled?: AriaPopoverProps['isKeyboardDismissDisabled'];
@@ -469,29 +534,31 @@ interface TrayWrapperProps extends TrayProps {
 declare const Tray: React.ForwardRefExoticComponent<TrayProps & React.RefAttributes<HTMLDivElement>>;
 declare const TrayWrapper: React.ForwardRefExoticComponent<TrayWrapperProps & React.RefAttributes<HTMLDivElement>>;
 
-interface UnderlayThemeExtension extends ThemeExtension<'Underlay'> {
-}
 interface UnderlayProps extends HTMLAttributes<HTMLElement> {
     variant?: string;
     size?: string;
 }
-declare const Underlay: ({ size, variant, ...props }: UnderlayProps) => JSX.Element;
+declare const Underlay: ({ size, variant, ...props }: UnderlayProps) => React.JSX.Element;
+
+interface MarigoldProviderProps<T extends Theme> extends ThemeProviderProps<T> {
+}
+declare function MarigoldProvider<T extends Theme>({ children, theme, }: MarigoldProviderProps<T>): React.JSX.Element;
 
 interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'isDisabled' | 'isRquired' | 'isReadOnly ' | 'validationState'> {
     children: ReactNode[];
-    width?: string;
+    width?: WidthProp['width'];
     required?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
     error?: boolean;
 }
-declare const RadioGroup: ({ children, orientation, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
+declare const RadioGroup: ({ children, orientation, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => React.JSX.Element;
 
-interface RadioThemeExtension extends ThemeExtensionsWithParts<'Radio', ['container', 'label', 'radio']> {
-}
 type CustomRadioProps = 'size' | 'width' | 'type' | 'defaultChecked' | 'value' | 'onFocus' | 'onBlur' | 'onKeyUp' | 'onKeyDown';
-interface RadioProps extends ThemeComponentProps, Omit<HtmlProps<'input'>, CustomRadioProps>, AriaRadioProps {
+interface RadioProps extends Omit<HtmlProps<'input'>, CustomRadioProps>, AriaRadioProps {
     width?: string;
+    variant?: string;
+    size?: string;
     disabled?: boolean;
 }
 declare const Radio: RadioComponent;
@@ -503,12 +570,10 @@ interface RadioComponent extends ForwardRefExoticComponent<RadioProps & RefAttri
     Group: typeof RadioGroup;
 }
 
-interface SelectThemeExtension extends ThemeExtensionsWithParts<'Select', ['container', 'button', 'icon']> {
-}
 interface SelectProps extends Omit<AriaSelectProps<object>, 'autoComplete' | 'isOpen' | 'isLoading' | 'onLoadMore' | 'isDisabled' | 'isRequired' | 'validationState' | 'onSelectionChange'>, Omit<HtmlProps<'select'>, 'onKeyUp' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'children' | 'size' | 'onChange'> {
     variant?: string;
     size?: string;
-    width?: string;
+    width?: WidthProp['width'];
     open?: boolean;
     disabled?: boolean;
     required?: boolean;
@@ -529,13 +594,6 @@ interface SelectComponent extends ForwardRefExoticComponent<SelectProps & RefAtt
  * 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 Omit<HtmlProps<'input'>, 'step' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size' | 'width'>, 
 /**
  * `react-aria` has a slightly different API for some events e.g `onChange`, `onFocus`
@@ -555,29 +613,27 @@ Pick<AriaSliderProps, 'maxValue' | 'step' | 'value' | 'defaultValue' | 'onChange
  */
 declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
 
-interface SwitchThemeExtension extends ThemeExtensionsWithParts<'Switch', [
-    'container',
-    'label',
-    'track',
-    'thumb'
-]> {
+interface SplitProps extends HtmlProps<'div'> {
+}
+declare const Split: (props: SplitProps) => React.JSX.Element;
+
+interface StackProps extends AlignmentProp, GapSpaceProp {
+    children?: ReactNode;
+    stretch?: boolean;
+    alignX?: keyof typeof alignment.vertical.alignmentX;
+    alignY?: keyof typeof alignment.vertical.alignmentY;
 }
+declare const Stack: ({ children, space, stretch, orientation, alignX, alignY, ...props }: StackProps) => React.JSX.Element;
+
 type CustomSwitchProps = 'size' | 'value' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp';
 interface SwitchProps extends Omit<AriaSwitchProps, 'isSelected'>, Omit<HtmlProps<'input'>, CustomSwitchProps> {
-    checked?: boolean;
+    selected?: boolean;
     variant?: string;
     size?: string;
     width?: string;
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 
-interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
-    'table',
-    'header',
-    'row',
-    'cell'
-]> {
-}
 interface TableProps extends Pick<AriaTableProps<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
     variant?: string;
     size?: string;
@@ -601,23 +657,14 @@ interface Table {
     Row: (props: RowProps) => JSX.Element;
 }
 
-interface TextThemeExtension extends ThemeExtension<'Text'> {
-}
-interface TextProps extends ThemeComponentProps, HtmlProps<'p'> {
-    display?: CSSObject['display'];
-    align?: CSSObject['textAlign'];
-    color?: string;
-    cursor?: string;
-    fontSize?: string;
-    fontWeight?: string;
-    fontStyle?: string;
-    outline?: string;
+interface TextProps extends HtmlProps<'p'>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp {
     children?: React.ReactNode;
+    variant?: string;
+    color?: string;
+    size?: string;
 }
-declare const Text: ({ variant, size, display, align, color, fontSize, fontStyle, fontWeight, cursor, outline, children, ...props }: TextProps) => JSX.Element;
+declare const Text: ({ variant, size, color, align, cursor, weight, fontSize, fontStyle, children, ...props }: TextProps) => React.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.
@@ -626,223 +673,12 @@ type CustomTextAreaEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onCopy' | 'onSe
 interface TextAreaProps extends Omit<HtmlProps<'textarea'>, 'value' | 'defaultValue' | 'size' | CustomTextAreaEvents>, Pick<AriaTextFieldProps, CustomTextAreaEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
-    width?: string;
+    width?: WidthProp['width'];
     value?: string;
     defaultValue?: string;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
-interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
-    children: [trigger: ReactElement, menu: ReactElement];
-    disabled?: boolean;
-    open?: boolean;
-}
-
-interface TooltipThemeExtension extends ThemeExtensionsWithParts<'Tooltip', ['container', 'arrow']> {
-}
-interface TooltipProps extends HtmlProps<'div'> {
-    children?: ReactNode;
-    variant?: string;
-    size?: string;
-}
-declare const Tooltip: {
-    ({ children, variant, size }: TooltipProps): JSX.Element;
-    Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
-};
-
-interface CalendarProps extends Omit<AriaCalendarProps<DateValue$1>, 'isDisabled' | 'isReadOnly'> {
-    disabled?: boolean;
-    readOnly?: boolean;
-    variant?: string;
-    size?: string;
-}
-interface CalendarThemeExtension extends ThemeExtensionsWithParts<'Calendar', [
-    'calendar',
-    'calendarCell',
-    'calendarControllers'
-]> {
-}
-declare const Calendar: ({ disabled, readOnly, size, variant, ...rest }: CalendarProps) => JSX.Element;
-
-interface CalendarCellProps extends AriaCalendarCellProps {
-    state: CalendarState;
-}
-declare const CalendarCell: (props: CalendarCellProps) => JSX.Element;
-
-interface CalendarGridProps extends AriaCalendarGridProps {
-    state: CalendarState;
-}
-declare const CalendarGrid: ({ state, ...props }: CalendarGridProps) => JSX.Element;
-
-interface DatePickerThemeExtension extends ThemeExtensionsWithParts<'DatePicker', ['field', 'actionButton']> {
-}
-interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'isOpen'> {
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    open?: boolean;
-    error?: boolean;
-    shouldCloseOnSelect?: boolean;
-}
-declare const DatePicker: ({ disabled, required, readonly, open, error, shouldCloseOnSelect, ...rest }: DatePickerProps) => JSX.Element;
-
-interface TagThemeExtension extends ThemeExtensionsWithParts<'Tag', ['tag', 'gridCell', 'closeButton']> {
-}
-
-interface TabsThemeExtension extends ThemeExtensionsWithParts<'Tabs', ['tabs', 'tab', 'tabPanel']> {
-}
-interface TabsProps extends Omit<AriaTabListProps<object>, 'orientation' | 'isDisabled'> {
-    gap?: number;
-    size?: 'small' | 'medium' | 'large';
-    disabled?: boolean;
-}
-declare const Tabs: {
-    ({ gap, size, disabled, ...res }: TabsProps): JSX.Element;
-    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
-};
-
-interface ComponentStyles extends AccordionThemeExtension, AutocompleteThemeExtension, BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, DateFieldThemeExtension, FieldThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, DateFieldThemeExtension, CalendarThemeExtension, DatePickerThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension, TagThemeExtension, CalendarThemeExtension, TabsThemeExtension {
-}
-interface Theme extends Theme$1 {
-    components: ComponentStyles;
-}
-interface CustomizedTheme extends Theme$1 {
-    components?: Partial<ComponentStyles>;
-}
-declare const extendTheme: (baseTheme: Theme, extendTheme: CustomizedTheme) => Theme;
-
-interface AsideProps {
-    children: [ReactElement, ReactElement];
-    side?: 'left' | 'right';
-    sideWidth?: ResponsiveStyleValue<string>;
-    space?: ResponsiveStyleValue<string>;
-    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 HtmlProps<'div'> {
-    children?: ReactNode;
-    ratio?: keyof typeof aspect;
-    maxWidth?: string;
-}
-declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
-
-interface ComboBoxProps extends Omit<ComboBoxProps$1<object>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'defaultInputValue' | 'inputValue' | 'onInputChange'> {
-    variant?: string;
-    size?: string;
-    error?: boolean;
-    width?: string;
-    disabled?: boolean;
-    required?: boolean;
-    readOnly?: boolean;
-    defaultValue?: ComboBoxProps$1<object>['defaultInputValue'];
-    value?: ComboBoxProps$1<object>['inputValue'];
-    onChange?: ComboBoxProps$1<object>['onInputChange'];
-}
-declare const ComboBox: {
-    ({ error, width, disabled, required, readOnly, defaultValue, value, onChange, ...rest }: ComboBoxProps): JSX.Element;
-    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
-};
-
-interface BreakoutProps extends HtmlProps<'div'> {
-    children?: ReactNode;
-    alignY?: 'top' | 'bottom' | 'center';
-    alignX?: 'left' | 'right' | 'center';
-    height?: string;
-}
-declare const Breakout: ({ alignX, alignY, height, children, ...props }: BreakoutProps) => JSX.Element;
-
-interface CenterProps extends HtmlProps<'div'> {
-    children?: ReactNode;
-    maxWidth?: string;
-    space?: ResponsiveStyleValue<string>;
-}
-declare const Center: ({ maxWidth, space, children, ...props }: CenterProps) => JSX.Element;
-
-interface ColumnsProps {
-    children?: ReactNode;
-    columns: Array<number>;
-    space?: ResponsiveStyleValue<string>;
-    columnLimit?: number;
-    collapseAt?: string | 0;
-    stretch?: boolean;
-}
-declare const Columns: ({ space, columns, collapseAt, stretch, children, ...props }: ColumnsProps) => JSX.Element;
-
-interface ContainerProps extends HtmlProps<'div'> {
-    children?: ReactNode;
-    contentType?: 'content' | 'header';
-    size?: keyof typeof size.content | keyof typeof size.header;
-    align?: 'left' | 'right' | 'center';
-    alignItems?: 'left' | 'right' | 'center' | 'none';
-}
-declare const Container: ({ contentType, size, align, alignItems, children, ...props }: ContainerProps) => JSX.Element;
-
-declare const ALIGNMENT_X$1: {
-    left: string;
-    center: string;
-    right: string;
-};
-declare const ALIGNMENT_Y$1: {
-    top: string;
-    center: string;
-    bottom: string;
-};
-interface InlineProps {
-    children?: ReactNode;
-    space?: ResponsiveStyleValue<string>;
-    alignX?: keyof typeof ALIGNMENT_X$1;
-    alignY?: keyof typeof ALIGNMENT_Y$1;
-}
-declare const Inline: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
-
-type InsetProps = {
-    children: ReactNode;
-    space?: never;
-    spaceX?: ResponsiveStyleValue<string>;
-    spaceY?: ResponsiveStyleValue<string>;
-} | {
-    children: ReactNode;
-    space?: ResponsiveStyleValue<string>;
-    spaceX?: never;
-    spaceY?: never;
-};
-declare const Inset: ({ space, spaceX, spaceY, children }: InsetProps) => JSX.Element;
-
-interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T>, GlobalProps {
-}
-declare function MarigoldProvider<T extends Theme$1>({ children, theme, selector, normalizeDocument, }: MarigoldProviderProps<T>): JSX.Element;
-
-interface SplitProps extends HtmlProps<'div'> {
-}
-declare const Split: (props: SplitProps) => JSX.Element;
-
-declare const ALIGNMENT_X: {
-    none: string;
-    left: string;
-    center: string;
-    right: string;
-};
-declare const ALIGNMENT_Y: {
-    none: string;
-    top: string;
-    center: string;
-    bottom: string;
-};
-interface StackProps {
-    children?: ReactNode;
-    space?: ResponsiveStyleValue<string>;
-    alignX?: keyof typeof ALIGNMENT_X;
-    alignY?: keyof typeof ALIGNMENT_Y;
-    stretch?: boolean;
-}
-declare const Stack: ({ children, space, alignX, alignY, stretch, ...props }: StackProps) => JSX.Element;
-
 /**
  * `react-aria` has a slightly different API for the above events.
  * Thus, we adjust our regular props to match them.
@@ -856,27 +692,43 @@ interface TextFieldProps extends Omit<HtmlProps<'input'>, 'value' | 'defaultValu
 Pick<AriaTextFieldProps, CustomTextFieldEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
-    width?: string;
+    width?: WidthProp['width'];
     value?: string;
     defaultValue?: string;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
-interface TilesProps {
+interface TilesProps extends GapSpaceProp {
     children: ReactNode;
     tilesWidth: string;
-    space?: ResponsiveStyleValue<string>;
     stretch?: boolean;
     equalHeight?: boolean;
 }
-declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => JSX.Element;
+declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => React.JSX.Element;
+
+interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
+    children: [trigger: ReactElement, menu: ReactElement];
+    disabled?: boolean;
+    open?: boolean;
+}
+
+interface TooltipProps extends HtmlProps<'div'> {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
+}
+declare const Tooltip: {
+    ({ children, variant, size }: TooltipProps): React.JSX.Element;
+    Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => React.JSX.Element;
+};
 
 interface TagGroupProps extends Omit<AriaTagGroupProps<object>, 'isRequired' | 'validationState'>, LabelableProps, HelpTextProps {
-    width?: string;
+    width?: WidthProp['width'];
     required?: boolean;
     error?: boolean;
+    allowsRemoving?: boolean;
 }
-declare const TagGroup: ({ width, required, error, ...rest }: TagGroupProps) => JSX.Element;
+declare const TagGroup: ({ width, required, error, allowsRemoving, ...rest }: TagGroupProps) => React.JSX.Element;
 
 declare const Tag: TagComponent;
 /**
@@ -890,4 +742,14 @@ interface TagComponent extends ItemComponent {
 
 declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
 
-export { Accordion, AccordionItem, AccordionItemProps, AccordionOwnItemProps, AccordionProps, AccordionThemeExtension, ActionMenu, Aside, AsideProps, Aspect, AspectProps, Autocomplete, AutocompleteProps, AutocompleteThemeExtension, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Calendar, CalendarCell, CalendarCellProps, CalendarGrid, CalendarGridProps, CalendarProps, CalendarThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupProps, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, ComboBox, ComboBoxProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, DateField, DateFieldProps, DateFieldThemeExtension, DatePicker, DatePickerProps, DatePickerThemeExtension, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, FieldBase, FieldBaseProps, FieldGroup, FieldGroupContext, FieldGroupContextProps, FieldGroupProps, FieldThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Inset, InsetProps, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Modal, ModalProps, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioProps, RadioThemeExtension, RowProps, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Tabs, TabsThemeExtension, Tag, TagComponent, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Tray, TrayProps, TrayWrapper, Underlay, UnderlayProps, UnderlayThemeExtension, XLoader, extendTheme, useCheckboxGroupContext, useFieldGroupContext };
+interface TabsProps extends Omit<AriaTabListProps<object>, 'orientation' | 'isDisabled'>, GapSpaceProp {
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    variant?: string;
+}
+declare const Tabs: {
+    ({ space, size, disabled, variant, ...rest }: TabsProps): React.JSX.Element;
+    Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
+};
+
+export { Accordion, AccordionItem, AccordionItemProps, AccordionOwnItemProps, AccordionProps, ActionMenu, Aside, AsideProps, Aspect, AspectProps, Autocomplete, AutocompleteProps, Badge, BadgeProps, Body, BodyProps, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, Calendar, CalendarCell, CalendarCellProps, CalendarGrid, CalendarGridProps, CalendarProps, Card, CardProps, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupProps, CheckboxProps, Columns, ColumnsProps, ComboBox, ComboBoxProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, DateField, DateFieldProps, DatePicker, DatePickerProps, Dialog, DialogChildProps, DialogProps, Divider, DividerProps, FieldBase, FieldBaseProps, FieldGroup, FieldGroupContext, FieldGroupContextProps, FieldGroupProps, Footer, FooterProps, Header, HeaderProps, Headline, HeadlineProps, Image, ImageProps, Inline, InlineProps, Input, InputOwnProps, InputProps, Inset, InsetProps, Label, LabelProps, Link, LinkOwnProps, LinkProps, List, ListProps, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, Message, MessageProps, Modal, ModalProps, NumberField, NumberFieldProps, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioProps, RowProps, Select, SelectComponent, SelectProps, Slider, SliderProps, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, Table, TableProps, Tabs, Tag, TagComponent, Text, TextArea, TextAreaProps, TextField, TextFieldProps, TextProps, Tiles, TilesProps, Tooltip, TooltipProps, Tray, TrayProps, TrayWrapper, Underlay, UnderlayProps, XLoader, useCheckboxGroupContext, useFieldGroupContext };