braid-design-system 33.13.0 → 33.14.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
+import react__default, { FC, ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
 import { Optional } from 'utility-types';
@@ -313,13 +313,13 @@ interface BraidProviderProps {
     linkComponent?: LinkComponent$1;
     children: ReactNode;
 }
-declare const BraidProvider$1: ({ theme, styleBody, linkComponent, children, }: BraidProviderProps) => react.JSX.Element;
+declare const BraidProvider$1: FC<BraidProviderProps>;
 
 interface BraidPortalProps {
     children: ReactNode;
     container?: Element;
 }
-declare const BraidPortal$1: ({ children, container }: BraidPortalProps) => react.ReactPortal;
+declare const BraidPortal$1: FC<BraidPortalProps>;
 
 interface ThemeNameConsumerProps {
     children(name: string): ReactElement;
@@ -2809,7 +2809,7 @@ interface TextProps extends TypographyProps {
     weight?: TextStyleProps['weight'];
     baseline?: TextStyleProps['baseline'];
 }
-declare const Text: ({ size: sizeProp, tone: toneProp, weight: weightProp, maxLines: maxLinesProp, baseline, ...typographyProps }: TextProps) => react.JSX.Element;
+declare const Text: FC<TextProps>;
 
 declare const validTones: readonly ["neutral", "secondary"];
 interface AccordionContextValue {
@@ -2828,7 +2828,7 @@ interface AccordionProps {
     space?: RequiredResponsiveValue<(typeof validSpaceValues)[number]>;
     data?: DataAttributeMap;
 }
-declare const Accordion$1: ({ children, size, tone, weight, space: spaceProp, dividers, data, ...restProps }: AccordionProps) => react.JSX.Element;
+declare const Accordion$1: FC<AccordionProps>;
 
 type ValueOrArray<T> = T | T[];
 declare const validBadgeTones: readonly ["promote", "info", "neutral", "positive", "caution", "critical"];
@@ -2868,7 +2868,7 @@ interface AccordionItemBaseProps {
 }
 type AccordionItemProps = AccordionItemBaseProps & UseDisclosureProps;
 type AccordionItemStateProps = DisclosureStateProps;
-declare const AccordionItem$1: ({ id, label, children, badge, size: sizeProp, tone: toneProp, weight: weightProp, icon, data, ...restProps }: AccordionItemProps) => react.JSX.Element;
+declare const AccordionItem$1: FC<AccordionItemProps>;
 
 declare const buttonTones: readonly ["formAccent", "brandAccent", "critical", "neutral"];
 
@@ -2930,14 +2930,14 @@ type InlineProps = CollapsibleAlignmentProps & {
     data?: DataAttributeMap;
     children: ReactNodeNoStrings;
 };
-declare const Inline$1: ({ space, align, alignY, collapseBelow, reverse, component, data, children, ...restProps }: InlineProps) => react.JSX.Element;
+declare const Inline$1: FC<InlineProps>;
 
 interface ActionsProps {
     size?: ButtonProps['size'];
     children: InlineProps['children'];
     data?: InlineProps['data'];
 }
-declare const Actions: ({ size, data, children }: ActionsProps) => react.JSX.Element;
+declare const Actions: FC<ActionsProps>;
 
 type Tone$1 = 'promote' | 'info' | 'positive' | 'caution' | 'critical';
 type CloseProps = AllOrNone<{
@@ -2950,7 +2950,7 @@ type AlertProps = {
     data?: DataAttributeMap;
     id?: string;
 } & CloseProps;
-declare const Alert$1: ({ tone, children, id, closeLabel, data, onClose, ...restProps }: AlertProps) => react.JSX.Element;
+declare const Alert$1: FC<AlertProps>;
 
 interface AutosuggestTranslations {
     assistiveDescription: string;
@@ -2971,7 +2971,7 @@ interface FieldLabelProps {
     descriptionId?: string;
     data?: DataAttributeMap;
 }
-declare const FieldLabel$1: ({ id, htmlFor, label, disabled, secondaryLabel, tertiaryLabel, description, descriptionId, data, }: FieldLabelProps) => react.JSX.Element | null;
+declare const FieldLabel$1: FC<FieldLabelProps>;
 
 declare const tones$1: readonly ["neutral", "critical", "positive", "caution"];
 type FieldTone = (typeof tones$1)[number];
@@ -2984,7 +2984,7 @@ interface FieldMessageProps {
     disabled?: boolean;
     data?: DataAttributeMap;
 }
-declare const FieldMessage$1: ({ id, tone, message, secondaryMessage, reserveMessageSpace, disabled, data, ...restProps }: FieldMessageProps) => react.JSX.Element | null;
+declare const FieldMessage$1: FC<FieldMessageProps>;
 
 type FormElementProps$1 = AllHTMLAttributes<HTMLFormElement>;
 type FieldLabelVariant$1 = {
@@ -3090,7 +3090,7 @@ interface BleedProps {
     component?: (typeof validBleedComponents)[number];
     data?: DataAttributeMap;
 }
-declare const Bleed$1: ({ space, horizontal, vertical, top, bottom, left, right, children, component, data, ...restProps }: BleedProps) => react.JSX.Element;
+declare const Bleed$1: FC<BleedProps>;
 
 interface BoxRendererProps extends BoxBaseProps {
     component?: Atoms['reset'];
@@ -3151,7 +3151,7 @@ type CardProps = {
     height?: Extract<BoxProps['height'], 'full'> | 'content';
     data?: DataAttributeMap;
 } & (SimpleCardRounding | ResponsiveCardRounding);
-declare const Card$1: ({ children, component, tone, data, height, ...restProps }: CardProps) => react.JSX.Element;
+declare const Card$1: FC<CardProps>;
 
 declare const sizes$1: {
     readonly standard: "standard";
@@ -3215,7 +3215,7 @@ interface ColumnProps {
     hideAbove?: ResponsiveRangeProps['above'];
     data?: DataAttributeMap;
 }
-declare const Column: ({ component, children, data, width, hideBelow, hideAbove, ...restProps }: ColumnProps) => react.JSX.Element;
+declare const Column: FC<ColumnProps>;
 
 declare const validColumnsComponents: readonly ["div", "span", "p", "article", "section", "main", "nav", "aside", "ul", "ol", "li"];
 
@@ -3225,7 +3225,7 @@ type ColumnsProps = CollapsibleAlignmentProps & {
     component?: (typeof validColumnsComponents)[number];
     data?: DataAttributeMap;
 };
-declare const Columns$1: ({ children, collapseBelow, reverse, space, align, alignY, component, data, ...restProps }: ColumnsProps) => react.JSX.Element;
+declare const Columns$1: FC<ColumnsProps>;
 
 interface ContentBlockProps {
     children: ReactNode;
@@ -3233,7 +3233,7 @@ interface ContentBlockProps {
     align?: 'left' | 'center';
     data?: DataAttributeMap;
 }
-declare const ContentBlock: ({ width, align, data, children, ...restProps }: ContentBlockProps) => react.JSX.Element;
+declare const ContentBlock: FC<ContentBlockProps>;
 
 interface ModalContentProps {
     id?: string;
@@ -3264,7 +3264,7 @@ declare const modalStyle$1: {
 interface DialogProps extends Omit<ModalProps, keyof typeof modalStyle$1 | 'width'> {
     width?: ModalProps['width'];
 }
-declare const Dialog$1: ({ width, ...restProps }: DialogProps) => react.JSX.Element;
+declare const Dialog$1: FC<DialogProps>;
 
 interface TextLinkStyles {
     weight?: 'regular' | 'weak';
@@ -3291,7 +3291,7 @@ interface TextLinkButtonProps extends Omit<TextLinkStyles, 'showVisited'> {
     tabIndex?: NativeSpanProps['tabIndex'];
     icon?: ReactElement<UseIconProps> | null;
 }
-declare const TextLinkButton: ({ weight, hitArea, id, onClick, data, children, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, tabIndex, icon, iconPosition, ...restProps }: TextLinkButtonProps) => react.JSX.Element;
+declare const TextLinkButton: FC<TextLinkButtonProps>;
 
 interface DisclosureBaseProps {
     expandLabel: string;
@@ -3304,12 +3304,12 @@ interface DisclosureBaseProps {
 }
 type DisclosureProps = DisclosureBaseProps & UseDisclosureProps;
 
-declare const Disclosure$1: ({ id, expandLabel, collapseLabel, space, size: sizeProp, children, data, weight, ...restProps }: DisclosureProps) => react.JSX.Element;
+declare const Disclosure$1: FC<DisclosureProps>;
 
 interface DividerProps {
     weight?: 'regular' | 'strong';
 }
-declare const Divider: ({ weight }: DividerProps) => react.JSX.Element;
+declare const Divider: FC<DividerProps>;
 
 declare const validWidths: readonly ["small", "medium", "large"];
 declare const validPositions: readonly ["left", "right"];
@@ -3321,7 +3321,7 @@ interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width'
     width?: (typeof validWidths)[number];
     position?: (typeof validPositions)[number];
 }
-declare const Drawer$1: ({ width, position, ...restProps }: DrawerProps) => react.JSX.Element;
+declare const Drawer$1: FC<DrawerProps>;
 
 type ValidDropdownChildren = AllHTMLAttributes<HTMLOptionElement | HTMLOptGroupElement>;
 type SelectProps = AllHTMLAttributes<HTMLSelectElement>;
@@ -3342,7 +3342,7 @@ interface HeadingProps extends TypographyProps {
     weight?: keyof typeof headingWeight;
     children: ReactNode;
 }
-declare const Heading$1: ({ level, weight, component, ...typographyProps }: HeadingProps) => react.JSX.Element;
+declare const Heading$1: FC<HeadingProps>;
 
 interface HiddenProps extends ResponsiveRangeProps {
     children: ReactNode;
@@ -3358,21 +3358,21 @@ interface HiddenProps extends ResponsiveRangeProps {
     inline?: boolean;
     data?: DataAttributeMap;
 }
-declare const Hidden: ({ children, component, above, below, screen, print, inline: inlineProp, data, ...restProps }: HiddenProps) => react.JSX.Element;
+declare const Hidden: FC<HiddenProps>;
 
 interface HiddenVisuallyProps {
     id?: string;
     children: BoxProps['children'];
     data?: DataAttributeMap;
 }
-declare const HiddenVisually: ({ id, data, children, ...restProps }: HiddenVisuallyProps) => react.JSX.Element;
+declare const HiddenVisually: FC<HiddenVisuallyProps>;
 
 interface IconRendererProps {
     children: ({ className }: {
         className: string;
     }) => ReactElement | null;
 }
-declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
+declare const IconRenderer: FC<IconRendererProps>;
 
 type LinkProps = Omit<LinkComponentProps, 'className'> & {
     className?: ClassValue;
@@ -3391,7 +3391,7 @@ interface StackProps {
     align?: OptionalResponsiveValue<Align>;
     data?: DataAttributeMap;
 }
-declare const Stack$1: ({ component, children, space, align: alignProp, data, ...restProps }: StackProps) => react.JSX.Element;
+declare const Stack$1: FC<StackProps>;
 
 interface ListTypeCharacter {
     type?: 'bullet' | 'number' | 'alpha' | 'roman';
@@ -3409,7 +3409,7 @@ type ListProps = {
     start?: number;
     data?: StackProps['data'];
 } & (ListTypeIcon | ListTypeCharacter);
-declare const List$1: ({ children, size: sizeProp, tone: toneProp, space: spaceProp, type, start, data, ...restProps }: ListProps) => react.JSX.Element;
+declare const List$1: FC<ListProps>;
 
 declare const size: Record<"xsmall" | "small" | "large" | "standard", string>;
 
@@ -3419,9 +3419,9 @@ interface LoaderProps {
     delayVisibility?: boolean;
     data?: DataAttributeMap;
 }
-declare const Loader: ({ size, "aria-label": ariaLabel, delayVisibility, data, ...restProps }: LoaderProps) => react.JSX.Element;
+declare const Loader: FC<LoaderProps>;
 
-type Placement = 'top' | 'bottom';
+type Placement = 'top' | 'bottom' | 'left' | 'right';
 interface PopoverPlacementData {
     placement: Placement;
     arrow?: {
@@ -3432,7 +3432,7 @@ interface PopoverPlacementData {
 interface PopoverProps {
     id?: string;
     role: NonNullable<AllHTMLAttributes<HTMLElement>['role'] | false>;
-    align?: 'left' | 'right' | 'center';
+    align?: 'start' | 'end' | 'center';
     width?: 'content' | 'full';
     placement?: Placement;
     lockPlacement?: boolean;
@@ -3476,14 +3476,14 @@ interface MenuRendererProps {
     offsetSpace?: ResponsiveSpace;
     size?: MenuSize;
     width?: keyof typeof width | 'content';
-    placement?: PopoverProps['placement'];
+    placement?: Extract<PopoverProps['placement'], 'top' | 'bottom'>;
     onOpen?: () => void;
     onClose?: (closeReason: CloseReason) => void;
     data?: DataAttributeMap;
     reserveIconSpace?: boolean;
     children: ReactNode;
 }
-declare const MenuRenderer: ({ onOpen, onClose, trigger, size, width, align, offsetSpace, reserveIconSpace, placement, children, data, ...restProps }: MenuRendererProps) => react.JSX.Element;
+declare const MenuRenderer: FC<MenuRendererProps>;
 
 type MenuItemTone = 'critical' | undefined;
 interface UseMenuItemProps {
@@ -3507,38 +3507,26 @@ interface MenuItemProps extends Pick<UseMenuItemProps, 'tone' | 'onClick' | 'dat
     badge?: MenuItemChildrenProps['badge'];
     icon?: MenuItemChildrenProps['leftSlot'];
 }
-declare const MenuItem$1: {
-    ({ children, onClick, data, tone, badge, icon, id, }: MenuItemProps): react.JSX.Element;
-    __isMenuItem__: boolean;
-};
+declare const MenuItem$1: FC<MenuItemProps>;
 
 interface MenuItemCheckboxProps extends Pick<MenuItemProps, 'data' | 'badge' | 'id'> {
     children: ReactNode;
     onChange: (checked: boolean) => void;
     checked: boolean;
 }
-declare const MenuItemCheckbox$1: {
-    ({ children, onChange, checked, data, badge, id, }: MenuItemCheckboxProps): react.JSX.Element;
-    __isMenuItem__: boolean;
-};
+declare const MenuItemCheckbox$1: FC<MenuItemCheckboxProps>;
 
-declare const MenuItemDivider: {
-    (): react.JSX.Element;
-    __isMenuItem__: boolean;
-};
+declare const MenuItemDivider: FC;
 
 interface MenuItemLinkProps extends MenuItemProps, Pick<LinkProps, 'href' | 'target' | 'rel'> {
 }
-declare const MenuItemLink$1: {
-    ({ href, target, rel, onClick, tone, data, children, badge, icon, id, }: MenuItemLinkProps): react.JSX.Element;
-    __isMenuItem__: boolean;
-};
+declare const MenuItemLink$1: FC<MenuItemLinkProps>;
 
 interface OverflowMenuProps extends Omit<MenuRendererProps, 'trigger' | 'align' | 'offsetSpace'> {
     label: string;
     id?: string;
 }
-declare const OverflowMenu: ({ size, label, children, id, ...menuProps }: OverflowMenuProps) => react.JSX.Element;
+declare const OverflowMenu: FC<OverflowMenuProps>;
 
 type FormElementProps = AllHTMLAttributes<HTMLFormElement>;
 type FieldLabelVariant = {
@@ -3611,7 +3599,7 @@ interface NoticeProps {
     data?: DataAttributeMap;
     children: ReactNode;
 }
-declare const Notice$1: ({ tone, data, children, ...restProps }: NoticeProps) => react.JSX.Element;
+declare const Notice$1: FC<NoticeProps>;
 
 declare const validPageBlockComponents: readonly ["div", "article", "aside", "main", "section", "nav"];
 interface Props$1 {
@@ -3620,7 +3608,7 @@ interface Props$1 {
     component?: (typeof validPageBlockComponents)[number];
     data?: DataAttributeMap;
 }
-declare const PageBlock: ({ children, width, component: componentProp, data, ...restProps }: Props$1) => react.JSX.Element;
+declare const PageBlock: FC<Props$1>;
 
 interface PageProps {
     children: ReactNode;
@@ -3628,7 +3616,7 @@ interface PageProps {
     footerPosition?: 'belowFold';
     data?: DataAttributeMap;
 }
-declare const Page: ({ children, footer, footerPosition, data, ...restProps }: PageProps) => react.JSX.Element;
+declare const Page: FC<PageProps>;
 
 interface PaginationProps {
     page: number;
@@ -3644,7 +3632,7 @@ interface PaginationProps {
     pageLimit?: number;
     data?: DataAttributeMap;
 }
-declare const Pagination$1: ({ page, total, linkProps, label, pageLabel, nextLabel, previousLabel, pageLimit, data, ...restProps }: PaginationProps) => react.JSX.Element;
+declare const Pagination$1: FC<PaginationProps>;
 
 type InputProps$1 = AllHTMLAttributes<HTMLInputElement>;
 type PasswordFieldBaseProps = Omit<FieldBaseProps, 'value' | 'secondaryMessage' | 'icon' | 'prefix'> & {
@@ -3695,14 +3683,14 @@ type RatingProps = RatingBaseProps & ({
     weight: TextProps['weight'];
     variant?: Exclude<RatingVariants, 'starsOnly'>;
 });
-declare const Rating$1: ({ rating, size, weight, variant, tone, "aria-label": ariaLabel, data, }: RatingProps) => react.JSX.Element;
+declare const Rating$1: FC<RatingProps>;
 
 interface SecondaryProps {
     children: ReactNode;
     id?: string;
     data?: DataAttributeMap;
 }
-declare const Secondary: ({ children, data, id, ...restProps }: SecondaryProps) => react.JSX.Element;
+declare const Secondary: FC<SecondaryProps>;
 
 type ValidSpreadComponent = 'div' | 'span' | 'p' | 'article' | 'section' | 'main' | 'nav' | 'aside' | 'li';
 interface SpreadProps {
@@ -3714,17 +3702,14 @@ interface SpreadProps {
     alignY?: OptionalResponsiveValue<AlignY>;
     data?: DataAttributeMap;
 }
-declare const Spread$1: ({ component, children, space, direction, align, alignY, data, ...restProps }: SpreadProps) => react.JSX.Element;
+declare const Spread$1: FC<SpreadProps>;
 
 interface StepProps {
     children: string;
     complete?: boolean;
     id?: string | number;
 }
-declare const Step$1: {
-    ({ complete, id, children }: StepProps): react.JSX.Element;
-    __isStep__: boolean;
-};
+declare const Step$1: FC<StepProps>;
 
 declare const tone: {
     formAccent: string;
@@ -3757,14 +3742,14 @@ type StepperProps = {
     id?: string;
     align?: 'left' | 'center';
 } & (LinearProps | NonLinearProps);
-declare const Stepper: ({ activeStep, label, mode, tone, children, data, align, id, onStepClick, ...restProps }: StepperProps) => react.JSX.Element;
+declare const Stepper: FC<StepperProps>;
 
 interface StrongProps {
     children: ReactNode;
     id?: string;
     data?: DataAttributeMap;
 }
-declare const Strong: ({ children, data, id, ...restProps }: StrongProps) => react.JSX.Element;
+declare const Strong: FC<StrongProps>;
 
 declare const alignY: Record<"top" | "center", string>;
 
@@ -3825,10 +3810,7 @@ interface TabProps {
     icon?: TextProps['icon'];
     data?: DataAttributeMap;
 }
-declare const Tab$1: {
-    ({ children, data, badge, icon, item, ...restProps }: TabProps): react.JSX.Element;
-    __isTab__: boolean;
-};
+declare const Tab$1: FC<TabProps>;
 
 interface TabsProviderProps {
     children: ReactNode;
@@ -3836,7 +3818,7 @@ interface TabsProviderProps {
     selectedItem?: string;
     onChange?: (selectedIndex: number, selectedItem?: string) => void;
 }
-declare const TabsProvider: ({ children, onChange, id, selectedItem, }: TabsProviderProps) => react.JSX.Element;
+declare const TabsProvider: FC<TabsProviderProps>;
 
 interface TabsProps {
     children: ReactNodeNoStrings;
@@ -3848,24 +3830,20 @@ interface TabsProps {
     size?: TabSize;
     divider?: 'full' | 'minimal' | 'none';
 }
-declare const Tabs$1: (props: TabsProps) => react.JSX.Element;
+declare const Tabs$1: FC<TabsProps>;
 
 interface TabPanelsProps {
     renderInactivePanels?: boolean;
     children: ReactNodeNoStrings;
 }
-declare const TabPanels: ({ renderInactivePanels, children, }: TabPanelsProps) => react.JSX.Element;
+declare const TabPanels: FC<TabPanelsProps>;
 
 interface TabPanelProps {
     children: ReactNode;
     item?: string;
     data?: DataAttributeMap;
 }
-declare const TabPanel: {
-    ({ children, data, item, ...restProps }: TabPanelProps): react.JSX.Element;
-    displayName: string;
-    __isTabPanel__: boolean;
-};
+declare const TabPanel: FC<TabPanelProps>;
 
 declare const tagSizes: readonly ["small", "standard"];
 type CommonProps = {
@@ -3890,7 +3868,7 @@ interface BaseTag extends CommonProps {
     addLabel?: never;
 }
 type TagProps = ClearableTag | AddableTag | BaseTag;
-declare const Tag$1: ({ size, data, id, icon, children, ...restProps }: TagProps) => react.JSX.Element;
+declare const Tag$1: FC<TagProps>;
 
 type NativeTextareaProps = AllHTMLAttributes<HTMLTextAreaElement>;
 type TextareaBaseProps = Omit<FieldBaseProps, 'value' | 'secondaryMessage' | 'icon' | 'prefix'> & {
@@ -3964,7 +3942,7 @@ interface TilesProps {
     columns: RequiredResponsiveValue<number>;
     data?: DataAttributeMap;
 }
-declare const Tiles$1: ({ children, space, columns, data, ...restProps }: TilesProps) => react.JSX.Element;
+declare const Tiles$1: FC<TilesProps>;
 
 declare const sizes: {
     readonly standard: "standard";
@@ -4009,7 +3987,7 @@ type Toast = {
 interface ToastProviderProps {
     children: ReactNode;
 }
-declare const ToastProvider: ({ children }: ToastProviderProps) => react.JSX.Element;
+declare const ToastProvider: FC<ToastProviderProps>;
 declare const useToast: () => (toast: Toast) => void;
 
 interface TriggerProps {
@@ -4025,364 +4003,364 @@ interface TooltipRendererProps {
         triggerProps: TriggerProps;
     }) => ReactNode;
 }
-declare const TooltipRenderer: ({ id, tooltip, placement, children, }: TooltipRendererProps) => react.JSX.Element;
+declare const TooltipRenderer: FC<TooltipRendererProps>;
 
 type IconContainerProps = UseIconProps;
 
 type IconAiProps = IconContainerProps;
-declare const IconAI: (props: IconAiProps) => react.JSX.Element;
+declare const IconAI: FC<IconAiProps>;
 
 type IconAddProps = IconContainerProps;
-declare const IconAdd: (props: IconAddProps) => react.JSX.Element;
+declare const IconAdd: FC<IconAddProps>;
 
 type IconArrowProps = IconContainerProps & {
     direction?: 'up' | 'down' | 'left' | 'right';
 };
-declare const IconArrow: ({ direction, ...props }: IconArrowProps) => react.JSX.Element;
+declare const IconArrow: FC<IconArrowProps>;
 
 type IconAttachmentProps = IconContainerProps;
-declare const IconAttachment: (props: IconAttachmentProps) => react.JSX.Element;
+declare const IconAttachment: FC<IconAttachmentProps>;
 
 type IconBluetoothProps = IconContainerProps;
-declare const IconBluetooth: (props: IconBluetoothProps) => react.JSX.Element;
+declare const IconBluetooth: FC<IconBluetoothProps>;
 
 type IconBoldProps = IconContainerProps;
-declare const IconBold: (props: IconBoldProps) => react.JSX.Element;
+declare const IconBold: FC<IconBoldProps>;
 
 type IconBookmarkProps = IconContainerProps & {
     active?: boolean;
 };
-declare const IconBookmark: ({ active, ...props }: IconBookmarkProps) => react.JSX.Element;
+declare const IconBookmark: FC<IconBookmarkProps>;
 
 type IconBulletListProps = IconContainerProps;
-declare const IconBulletList: (props: IconBulletListProps) => react.JSX.Element;
+declare const IconBulletList: FC<IconBulletListProps>;
 
 type IconCareerProps = IconContainerProps & {
     active?: boolean;
 };
-declare const IconCareer: ({ active, ...props }: IconCareerProps) => react.JSX.Element;
+declare const IconCareer: FC<IconCareerProps>;
 
 type IconCategoryProps = IconContainerProps;
-declare const IconCategory: (props: IconCategoryProps) => react.JSX.Element;
+declare const IconCategory: FC<IconCategoryProps>;
 
 type IconCautionProps = IconContainerProps;
-declare const IconCaution: (props: IconCautionProps) => react.JSX.Element;
+declare const IconCaution: FC<IconCautionProps>;
 
 type IconChecklistProps = IconContainerProps;
-declare const IconChecklist: (props: IconChecklistProps) => react.JSX.Element;
+declare const IconChecklist: FC<IconChecklistProps>;
 
 type IconChevronProps = IconContainerProps & {
     direction?: 'up' | 'down' | 'left' | 'right';
 };
-declare const IconChevron: ({ direction, ...props }: IconChevronProps) => react.JSX.Element;
+declare const IconChevron: FC<IconChevronProps>;
 
 type IconClearProps = IconContainerProps;
-declare const IconClear: (props: IconClearProps) => react.JSX.Element;
+declare const IconClear: FC<IconClearProps>;
 
 type IconCompanyProps = IconContainerProps;
-declare const IconCompany: (props: IconCompanyProps) => react.JSX.Element;
+declare const IconCompany: FC<IconCompanyProps>;
 
 type IconComposeProps = IconContainerProps;
-declare const IconCompose: (props: IconComposeProps) => react.JSX.Element;
+declare const IconCompose: FC<IconComposeProps>;
 
 type IconCopyProps = IconContainerProps;
-declare const IconCopy: (props: IconCopyProps) => react.JSX.Element;
+declare const IconCopy: FC<IconCopyProps>;
 
 type IconCoverLetterProps = IconContainerProps;
-declare const IconCoverLetter: (props: IconCoverLetterProps) => react.JSX.Element;
+declare const IconCoverLetter: FC<IconCoverLetterProps>;
 
 type IconCreditCardProps = IconContainerProps;
-declare const IconCreditCard: (props: IconCreditCardProps) => react.JSX.Element;
+declare const IconCreditCard: FC<IconCreditCardProps>;
 
 type IconCriticalProps = IconContainerProps;
-declare const IconCritical: (props: IconCriticalProps) => react.JSX.Element;
+declare const IconCritical: FC<IconCriticalProps>;
 
 type IconDateProps = IconContainerProps;
-declare const IconDate: (props: IconDateProps) => react.JSX.Element;
+declare const IconDate: FC<IconDateProps>;
 
 type IconDeleteProps = IconContainerProps;
-declare const IconDelete: (props: IconDeleteProps) => react.JSX.Element;
+declare const IconDelete: FC<IconDeleteProps>;
 
 type IconDesktopProps = IconContainerProps;
-declare const IconDesktop: (props: IconDesktopProps) => react.JSX.Element;
+declare const IconDesktop: FC<IconDesktopProps>;
 
 type IconDisallowProps = IconContainerProps;
-declare const IconDisallow: (props: IconDisallowProps) => react.JSX.Element;
+declare const IconDisallow: FC<IconDisallowProps>;
 
 type IconDocumentProps = IconContainerProps;
-declare const IconDocument: (props: IconDocumentProps) => react.JSX.Element;
+declare const IconDocument: FC<IconDocumentProps>;
 
 type IconDocumentBrokenProps = IconContainerProps;
-declare const IconDocumentBroken: (props: IconDocumentBrokenProps) => react.JSX.Element;
+declare const IconDocumentBroken: FC<IconDocumentBrokenProps>;
 
 type IconDownloadProps = IconContainerProps;
-declare const IconDownload: (props: IconDownloadProps) => react.JSX.Element;
+declare const IconDownload: FC<IconDownloadProps>;
 
 type IconEditProps = IconContainerProps;
-declare const IconEdit: (props: IconEditProps) => react.JSX.Element;
+declare const IconEdit: FC<IconEditProps>;
 
 type IconEducationProps = IconContainerProps;
-declare const IconEducation: (props: IconEducationProps) => react.JSX.Element;
+declare const IconEducation: FC<IconEducationProps>;
 
 type IconEnlargeProps = IconContainerProps & {
     active?: boolean;
 };
-declare const IconEnlarge: ({ active, ...props }: IconEnlargeProps) => react.JSX.Element;
+declare const IconEnlarge: FC<IconEnlargeProps>;
 
 type IconExperienceProps = IconContainerProps;
-declare const IconExperience: (props: IconExperienceProps) => react.JSX.Element;
+declare const IconExperience: FC<IconExperienceProps>;
 
 type IconFilterProps = IconContainerProps;
-declare const IconFilter: (props: IconFilterProps) => react.JSX.Element;
+declare const IconFilter: FC<IconFilterProps>;
 
 type IconFlagProps = IconContainerProps;
-declare const IconFlag: (props: IconFlagProps) => react.JSX.Element;
+declare const IconFlag: FC<IconFlagProps>;
 
 type IconGiftProps = IconContainerProps;
-declare const IconGift: (props: IconGiftProps) => react.JSX.Element;
+declare const IconGift: FC<IconGiftProps>;
 
 type IconGlobeProps = IconContainerProps;
-declare const IconGlobe: (props: IconGlobeProps) => react.JSX.Element;
+declare const IconGlobe: FC<IconGlobeProps>;
 
 type IconGridProps = IconContainerProps;
-declare const IconGrid: (props: IconGridProps) => react.JSX.Element;
+declare const IconGrid: FC<IconGridProps>;
 
 type IconHashProps = IconContainerProps;
-declare const IconHash: (props: IconHashProps) => react.JSX.Element;
+declare const IconHash: FC<IconHashProps>;
 
 type IconHeartProps = IconContainerProps & {
     active?: boolean;
 };
-declare const IconHeart: ({ active, ...props }: IconHeartProps) => react.JSX.Element;
+declare const IconHeart: FC<IconHeartProps>;
 
 type IconHelpProps = IconContainerProps;
-declare const IconHelp: (props: IconHelpProps) => react.JSX.Element;
+declare const IconHelp: FC<IconHelpProps>;
 
 type IconHistoryProps = IconContainerProps;
-declare const IconHistory: (props: IconHistoryProps) => react.JSX.Element;
+declare const IconHistory: FC<IconHistoryProps>;
 
 type IconHomeProps = IconContainerProps;
-declare const IconHome: (props: IconHomeProps) => react.JSX.Element;
+declare const IconHome: FC<IconHomeProps>;
 
 type IconImageProps = IconContainerProps;
-declare const IconImage: (props: IconImageProps) => react.JSX.Element;
+declare const IconImage: FC<IconImageProps>;
 
 type IconInfoProps = IconContainerProps;
-declare const IconInfo: (props: IconInfoProps) => react.JSX.Element;
+declare const IconInfo: FC<IconInfoProps>;
 
 type IconInvoiceProps = IconContainerProps;
-declare const IconInvoice: (props: IconInvoiceProps) => react.JSX.Element;
+declare const IconInvoice: FC<IconInvoiceProps>;
 
 type IconItalicProps = IconContainerProps;
-declare const IconItalic: (props: IconItalicProps) => react.JSX.Element;
+declare const IconItalic: FC<IconItalicProps>;
 
 type IconLanguageProps = IconContainerProps;
-declare const IconLanguage: (props: IconLanguageProps) => react.JSX.Element;
+declare const IconLanguage: FC<IconLanguageProps>;
 
 type IconLicenceProps = IconContainerProps;
-declare const IconLicence: (props: IconLicenceProps) => react.JSX.Element;
+declare const IconLicence: FC<IconLicenceProps>;
 
 type IconLinkProps = IconContainerProps;
-declare const IconLink: (props: IconLinkProps) => react.JSX.Element;
+declare const IconLink: FC<IconLinkProps>;
 
 type IconLinkBrokenProps = IconContainerProps;
-declare const IconLinkBroken: (props: IconLinkBrokenProps) => react.JSX.Element;
+declare const IconLinkBroken: FC<IconLinkBrokenProps>;
 
 type IconListProps = IconContainerProps;
 /** @deprecated  Use `IconBulletList` instead */
-declare const IconList: (props: IconListProps) => react.JSX.Element;
+declare const IconList: FC<IconListProps>;
 
 type IconLocationProps = IconContainerProps;
-declare const IconLocation: (props: IconLocationProps) => react.JSX.Element;
+declare const IconLocation: FC<IconLocationProps>;
 
 type IconMailProps = IconContainerProps;
-declare const IconMail: (props: IconMailProps) => react.JSX.Element;
+declare const IconMail: FC<IconMailProps>;
 
 type IconMessageProps = IconContainerProps;
-declare const IconMessage: (props: IconMessageProps) => react.JSX.Element;
+declare const IconMessage: FC<IconMessageProps>;
 
 type IconMicrophoneProps = IconContainerProps;
-declare const IconMicrophone: (props: IconMicrophoneProps) => react.JSX.Element;
+declare const IconMicrophone: FC<IconMicrophoneProps>;
 
 type IconMinusProps = IconContainerProps;
-declare const IconMinus: (props: IconMinusProps) => react.JSX.Element;
+declare const IconMinus: FC<IconMinusProps>;
 
 type IconMobileProps = IconContainerProps;
-declare const IconMobile: (props: IconMobileProps) => react.JSX.Element;
+declare const IconMobile: FC<IconMobileProps>;
 
 type IconMoneyProps = IconContainerProps;
-declare const IconMoney: (props: IconMoneyProps) => react.JSX.Element;
+declare const IconMoney: FC<IconMoneyProps>;
 
 type IconNewWindowProps = IconContainerProps;
-declare const IconNewWindow: (props: IconNewWindowProps) => react.JSX.Element;
+declare const IconNewWindow: FC<IconNewWindowProps>;
 
 type IconNoteProps = IconContainerProps;
-declare const IconNote: (props: IconNoteProps) => react.JSX.Element;
+declare const IconNote: FC<IconNoteProps>;
 
 type IconNotificationProps = IconContainerProps;
-declare const IconNotification: (props: IconNotificationProps) => react.JSX.Element;
+declare const IconNotification: FC<IconNotificationProps>;
 
 type IconNumberedListProps = IconContainerProps;
-declare const IconNumberedList: (props: IconNumberedListProps) => react.JSX.Element;
+declare const IconNumberedList: FC<IconNumberedListProps>;
 
 type IconOverflowProps = IconContainerProps;
-declare const IconOverflow: (props: IconOverflowProps) => react.JSX.Element;
+declare const IconOverflow: FC<IconOverflowProps>;
 
 type IconPeopleProps = IconContainerProps;
-declare const IconPeople: (props: IconPeopleProps) => react.JSX.Element;
+declare const IconPeople: FC<IconPeopleProps>;
 
 type IconPersonAddProps = IconContainerProps;
-declare const IconPersonAdd: (props: IconPersonAddProps) => react.JSX.Element;
+declare const IconPersonAdd: FC<IconPersonAddProps>;
 
 type IconPersonVerifiedProps = IconContainerProps;
-declare const IconPersonVerified: (props: IconPersonVerifiedProps) => react.JSX.Element;
+declare const IconPersonVerified: FC<IconPersonVerifiedProps>;
 
 type IconPhoneProps = IconContainerProps;
-declare const IconPhone: (props: IconPhoneProps) => react.JSX.Element;
+declare const IconPhone: FC<IconPhoneProps>;
 
 type IconPlatformAndroidProps = IconContainerProps;
-declare const IconPlatformAndroid: (props: IconPlatformAndroidProps) => react.JSX.Element;
+declare const IconPlatformAndroid: FC<IconPlatformAndroidProps>;
 
 type IconPlatformAppleProps = IconContainerProps;
-declare const IconPlatformApple: (props: IconPlatformAppleProps) => react.JSX.Element;
+declare const IconPlatformApple: FC<IconPlatformAppleProps>;
 
 type IconPositiveProps = IconContainerProps;
-declare const IconPositive: (props: IconPositiveProps) => react.JSX.Element;
+declare const IconPositive: FC<IconPositiveProps>;
 
 type IconPrintProps = IconContainerProps;
-declare const IconPrint: (props: IconPrintProps) => react.JSX.Element;
+declare const IconPrint: FC<IconPrintProps>;
 
 type IconProfileProps = IconContainerProps;
-declare const IconProfile: (props: IconProfileProps) => react.JSX.Element;
+declare const IconProfile: FC<IconProfileProps>;
 
 type IconPromoteProps = IconContainerProps;
-declare const IconPromote: (props: IconPromoteProps) => react.JSX.Element;
+declare const IconPromote: FC<IconPromoteProps>;
 
 type IconQRProps = IconContainerProps;
-declare const IconQR: (props: IconQRProps) => react.JSX.Element;
+declare const IconQR: FC<IconQRProps>;
 
 type IconRecommendedProps = IconContainerProps;
-declare const IconRecommended: (props: IconRecommendedProps) => react.JSX.Element;
+declare const IconRecommended: FC<IconRecommendedProps>;
 
 type IconRedoProps = IconContainerProps;
-declare const IconRedo: (props: IconRedoProps) => react.JSX.Element;
+declare const IconRedo: FC<IconRedoProps>;
 
 type IconRefreshProps = IconContainerProps;
-declare const IconRefresh: (props: IconRefreshProps) => react.JSX.Element;
+declare const IconRefresh: FC<IconRefreshProps>;
 
 type IconResumeProps = IconContainerProps;
-declare const IconResume: (props: IconResumeProps) => react.JSX.Element;
+declare const IconResume: FC<IconResumeProps>;
 
 type IconRocketProps = IconContainerProps;
-declare const IconRocket: (props: IconRocketProps) => react.JSX.Element;
+declare const IconRocket: FC<IconRocketProps>;
 
 type IconSearchProps = IconContainerProps;
-declare const IconSearch: (props: IconSearchProps) => react.JSX.Element;
+declare const IconSearch: FC<IconSearchProps>;
 
 type IconSecurityProps = IconContainerProps;
-declare const IconSecurity: (props: IconSecurityProps) => react.JSX.Element;
+declare const IconSecurity: FC<IconSecurityProps>;
 
 type IconSendProps = IconContainerProps;
-declare const IconSend: (props: IconSendProps) => react.JSX.Element;
+declare const IconSend: FC<IconSendProps>;
 
 type IconSentProps = IconContainerProps;
-declare const IconSent: (props: IconSentProps) => react.JSX.Element;
+declare const IconSent: FC<IconSentProps>;
 
 type Feeling = 'positive' | 'negative' | 'neutral';
 type IconSentimentProps = IconContainerProps & {
     feeling?: Feeling;
 };
-declare const IconSentiment: ({ feeling, ...props }: IconSentimentProps) => react.JSX.Element;
+declare const IconSentiment: FC<IconSentimentProps>;
 
 type IconSettingsProps = IconContainerProps;
-declare const IconSettings: (props: IconSettingsProps) => react.JSX.Element;
+declare const IconSettings: FC<IconSettingsProps>;
 
 type IconShareProps = IconContainerProps;
-declare const IconShare: (props: IconShareProps) => react.JSX.Element;
+declare const IconShare: FC<IconShareProps>;
 
 type IconSkillsProps = IconContainerProps;
-declare const IconSkills: (props: IconSkillsProps) => react.JSX.Element;
+declare const IconSkills: FC<IconSkillsProps>;
 
 type IconSocialFacebookProps = IconContainerProps;
-declare const IconSocialFacebook: (props: IconSocialFacebookProps) => react.JSX.Element;
+declare const IconSocialFacebook: FC<IconSocialFacebookProps>;
 
 type IconSocialGitHubProps = IconContainerProps;
-declare const IconSocialGitHub: (props: IconSocialGitHubProps) => react.JSX.Element;
+declare const IconSocialGitHub: FC<IconSocialGitHubProps>;
 
 type IconSocialInstagramProps = IconContainerProps;
-declare const IconSocialInstagram: (props: IconSocialInstagramProps) => react.JSX.Element;
+declare const IconSocialInstagram: FC<IconSocialInstagramProps>;
 
 type IconSocialLinkedInProps = IconContainerProps;
-declare const IconSocialLinkedIn: (props: IconSocialLinkedInProps) => react.JSX.Element;
+declare const IconSocialLinkedIn: FC<IconSocialLinkedInProps>;
 
 type IconSocialMediumProps = IconContainerProps;
-declare const IconSocialMedium: (props: IconSocialMediumProps) => react.JSX.Element;
+declare const IconSocialMedium: FC<IconSocialMediumProps>;
 
 type IconSocialTiktokProps = IconContainerProps;
-declare const IconSocialTiktok: (props: IconSocialTiktokProps) => react.JSX.Element;
+declare const IconSocialTiktok: FC<IconSocialTiktokProps>;
 
 type IconSocialXProps = IconContainerProps;
-declare const IconSocialX: (props: IconSocialXProps) => react.JSX.Element;
+declare const IconSocialX: FC<IconSocialXProps>;
 
 type IconSocialYouTubeProps = IconContainerProps;
-declare const IconSocialYouTube: (props: IconSocialYouTubeProps) => react.JSX.Element;
+declare const IconSocialYouTube: FC<IconSocialYouTubeProps>;
 
 type IconSortProps = IconContainerProps;
-declare const IconSort: (props: IconSortProps) => react.JSX.Element;
+declare const IconSort: FC<IconSortProps>;
 
 type IconStarProps = IconContainerProps & {
     active?: boolean;
 };
-declare const IconStar: ({ active, ...props }: IconStarProps) => react.JSX.Element;
+declare const IconStar: FC<IconStarProps>;
 
 type IconStatisticsProps = IconContainerProps;
-declare const IconStatistics: (props: IconStatisticsProps) => react.JSX.Element;
+declare const IconStatistics: FC<IconStatisticsProps>;
 
 type IconSubCategoryProps = IconContainerProps;
-declare const IconSubCategory: (props: IconSubCategoryProps) => react.JSX.Element;
+declare const IconSubCategory: FC<IconSubCategoryProps>;
 
 type IconTagProps = IconContainerProps;
-declare const IconTag: (props: IconTagProps) => react.JSX.Element;
+declare const IconTag: FC<IconTagProps>;
 
 type IconThumbProps = IconContainerProps & {
     direction?: 'up' | 'down';
 };
-declare const IconThumb: ({ direction, ...props }: IconThumbProps) => react.JSX.Element;
+declare const IconThumb: FC<IconThumbProps>;
 
 type IconTickProps = IconContainerProps;
-declare const IconTick: (props: IconTickProps) => react.JSX.Element;
+declare const IconTick: FC<IconTickProps>;
 
 type IconTimeProps = IconContainerProps;
-declare const IconTime: (props: IconTimeProps) => react.JSX.Element;
+declare const IconTime: FC<IconTimeProps>;
 
 type IconTipProps = IconContainerProps;
-declare const IconTip: (props: IconTipProps) => react.JSX.Element;
+declare const IconTip: FC<IconTipProps>;
 
 type IconTitleProps = IconContainerProps;
-declare const IconTitle: (props: IconTitleProps) => react.JSX.Element;
+declare const IconTitle: FC<IconTitleProps>;
 
 type IconUndoProps = IconContainerProps;
-declare const IconUndo: (props: IconUndoProps) => react.JSX.Element;
+declare const IconUndo: FC<IconUndoProps>;
 
 type IconUploadProps = IconContainerProps;
-declare const IconUpload: (props: IconUploadProps) => react.JSX.Element;
+declare const IconUpload: FC<IconUploadProps>;
 
 type IconVideoProps = IconContainerProps;
-declare const IconVideo: (props: IconVideoProps) => react.JSX.Element;
+declare const IconVideo: FC<IconVideoProps>;
 
 type IconVisibilityProps = IconContainerProps & {
     hidden?: boolean;
 };
-declare const IconVisibility: ({ hidden, ...props }: IconVisibilityProps) => react.JSX.Element;
+declare const IconVisibility: FC<IconVisibilityProps>;
 
 type IconWorkExperienceProps = IconContainerProps;
-declare const IconWorkExperience: (props: IconWorkExperienceProps) => react.JSX.Element;
+declare const IconWorkExperience: FC<IconWorkExperienceProps>;
 
 type IconZoomInProps = IconContainerProps;
-declare const IconZoomIn: (props: IconZoomInProps) => react.JSX.Element;
+declare const IconZoomIn: FC<IconZoomInProps>;
 
 type IconZoomOutProps = IconContainerProps;
-declare const IconZoomOut: (props: IconZoomOutProps) => react.JSX.Element;
+declare const IconZoomOut: FC<IconZoomOutProps>;
 
 type LinkComponent = LinkComponent$1;
 
@@ -5074,7 +5052,7 @@ interface Props {
 }
 declare const _default$1: ({ theme, children }: Props) => react.JSX.Element;
 
-declare const Accordion: ({ space, size, tone, weight, ...restProps }: AccordionProps) => react.JSX.Element;
+declare const Accordion: FC<AccordionProps>;
 
 interface StateProp {
     stateName?: string;
@@ -5082,19 +5060,16 @@ interface StateProp {
 
 type OptionalProps$1 = 'id';
 type PlayroomAccordionItemProps = StateProp & AccordionItemBaseProps & AccordionItemStateProps & Partial<Pick<AccordionItemProps, OptionalProps$1>>;
-declare const AccordionItem: ({ label, stateName, expanded, onToggle, size, tone, weight, badge, icon, ...restProps }: PlayroomAccordionItemProps) => react.JSX.Element;
+declare const AccordionItem: FC<PlayroomAccordionItemProps>;
 
-declare const Alert: ({ tone, ...restProps }: AlertProps) => react.JSX.Element;
+declare const Alert: FC<AlertProps>;
 
 type PlayroomAutosuggestProps<Value> = StateProp & Optional<AutosuggestBaseProps<Value>, 'id' | 'value' | 'onChange'> & AutosuggestLabelProps;
 declare function Autosuggest<Value>({ stateName, value, onChange, onClear, tabIndex, ...restProps }: PlayroomAutosuggestProps<Value>): react.JSX.Element;
 
-declare const Badge: {
-    ({ tone, ...restProps }: BadgeProps): react.JSX.Element;
-    __isBadge__: boolean;
-};
+declare const Badge: FC<BadgeProps>;
 
-declare const Bleed: ({ component, ...restProps }: BleedProps) => react.JSX.Element;
+declare const Bleed: FC<BleedProps>;
 
 declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLElement>>;
 
@@ -5104,95 +5079,83 @@ declare const ButtonIcon: react.ForwardRefExoticComponent<ButtonIconProps & reac
 
 declare const ButtonLink: react.ForwardRefExoticComponent<ButtonLinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-declare const Card: ({ component, ...restProps }: CardProps) => react.JSX.Element;
+declare const Card: FC<CardProps>;
 
 type PlayroomCheckboxProps = StateProp & Optional<CheckboxProps, 'checked' | 'onChange'>;
-declare const Checkbox: ({ stateName, checked, onChange, ...restProps }: PlayroomCheckboxProps) => react.JSX.Element;
+declare const Checkbox: FC<PlayroomCheckboxProps>;
 
 type PlayroomCheckboxStandaloneProps = StateProp & Optional<CheckboxStandaloneProps, 'checked' | 'onChange'>;
-declare const CheckboxStandalone: ({ stateName, checked, onChange, tabIndex, "aria-label": ariaLabel, ...restProps }: PlayroomCheckboxStandaloneProps) => react.JSX.Element;
+declare const CheckboxStandalone: FC<PlayroomCheckboxStandaloneProps>;
 
-declare const Columns: ({ space, align, alignY, ...restProps }: ColumnsProps) => react.JSX.Element;
+declare const Columns: FC<ColumnsProps>;
 
 type PlayroomDialogProps = StateProp & Optional<DialogProps, 'onClose' | 'open'>;
-declare const Dialog: ({ stateName, open, onClose, ...restProps }: PlayroomDialogProps) => react.JSX.Element;
+declare const Dialog: FC<PlayroomDialogProps>;
 
 type OptionalProps = 'id';
 type PlayroomDisclosureProps = StateProp & DisclosureBaseProps & DisclosureStateProps & Partial<Pick<DisclosureProps, OptionalProps>>;
-declare const Disclosure: ({ stateName, expanded, expandLabel, collapseLabel, onToggle, ...restProps }: PlayroomDisclosureProps) => react.JSX.Element;
+declare const Disclosure: FC<PlayroomDisclosureProps>;
 
 type PlayroomDrawerProps = StateProp & Optional<DrawerProps, 'onClose' | 'open'>;
-declare const Drawer: ({ stateName, open, onClose, ...restProps }: PlayroomDrawerProps) => react.JSX.Element;
+declare const Drawer: FC<PlayroomDrawerProps>;
 
 type PlayroomDropdownProps = StateProp & Optional<DropdownBaseProps, 'value' | 'onChange'> & DropdownLabelProps;
-declare const Dropdown: ({ stateName, value, onChange, tabIndex, ...restProps }: PlayroomDropdownProps) => react.JSX.Element;
+declare const Dropdown: FC<PlayroomDropdownProps>;
 
 type PlayroomFieldLabelProps = Optional<FieldLabelProps, 'htmlFor'>;
-declare const FieldLabel: ({ htmlFor, ...restProps }: PlayroomFieldLabelProps) => react.JSX.Element;
+declare const FieldLabel: FC<PlayroomFieldLabelProps>;
 
 type PlayroomFieldMessageProps = Optional<FieldMessageProps, 'id'>;
-declare const FieldMessage: ({ id, tone, ...restProps }: PlayroomFieldMessageProps) => react.JSX.Element;
+declare const FieldMessage: FC<PlayroomFieldMessageProps>;
 
-declare const Heading: ({ level, ...restProps }: HeadingProps) => react.JSX.Element;
+declare const Heading: FC<HeadingProps>;
 
-declare const Inline: ({ space, align, alignY, ...restProps }: InlineProps) => react.JSX.Element;
+declare const Inline: FC<InlineProps>;
 
 declare const Link: react.ForwardRefExoticComponent<Omit<LinkComponentProps, "className"> & {
     className?: clsx.ClassValue;
     data?: DataAttributeMap;
 } & react.RefAttributes<HTMLAnchorElement>>;
 
-declare const List: ({ space, ...props }: ListProps) => react.JSX.Element;
+declare const List: FC<ListProps>;
 
 type PlayroomMonthPickerProps = StateProp & Optional<MonthPickerBaseProps, 'value' | 'onChange'> & MonthPickerLabelProps;
-declare const MonthPicker: ({ stateName, value, onChange, tabIndex, ...restProps }: PlayroomMonthPickerProps) => react.JSX.Element;
+declare const MonthPicker: FC<PlayroomMonthPickerProps>;
 
-declare const MenuItem: {
-    ({ badge, ...restProps }: MenuItemProps): react.JSX.Element;
-    __isMenuItem__: boolean;
-};
+declare const MenuItem: FC<MenuItemProps>;
 
-declare const MenuItemLink: {
-    ({ badge, ...restProps }: MenuItemLinkProps): react.JSX.Element;
-    __isMenuItem__: boolean;
-};
+declare const MenuItemLink: FC<MenuItemLinkProps>;
 
-declare const MenuItemCheckbox: {
-    ({ badge, ...restProps }: MenuItemCheckboxProps): react.JSX.Element;
-    __isMenuItem__: boolean;
-};
+declare const MenuItemCheckbox: FC<MenuItemCheckboxProps>;
 
-declare const Notice: ({ tone, ...restProps }: NoticeProps) => react.JSX.Element;
+declare const Notice: FC<NoticeProps>;
 
 type PlayroomPaginationProps = StateProp & Optional<PaginationProps, 'label' | 'linkProps' | 'page' | 'total'>;
-declare const Pagination: ({ page, total, linkProps, label, ...restProps }: PlayroomPaginationProps) => react.JSX.Element;
+declare const Pagination: FC<PlayroomPaginationProps>;
 
 type PlayroomPasswordFieldProps = StateProp & Optional<PasswordFieldBaseProps, 'value' | 'onChange'> & PasswordFieldLabelProps;
-declare const PasswordField: ({ stateName, value, onChange, tabIndex, ...restProps }: PlayroomPasswordFieldProps) => react.JSX.Element;
+declare const PasswordField: FC<PlayroomPasswordFieldProps>;
 
 type PlayroomRadioProps = StateProp & Optional<RadioGroupBaseProps, 'id' | 'value' | 'onChange'> & RadioGroupLabelProps;
-declare const RadioGroup: ({ stateName, value, onChange, children, tabIndex, ...restProps }: PlayroomRadioProps) => react.JSX.Element;
+declare const RadioGroup: FC<PlayroomRadioProps>;
 
-declare const Rating: ({ rating, ...restProps }: RatingProps) => react.JSX.Element;
+declare const Rating: FC<RatingProps>;
 
-declare const Spread: ({ space, ...restProps }: SpreadProps) => react.JSX.Element;
+declare const Spread: FC<SpreadProps>;
 
-declare const Stack: ({ space, align, ...restProps }: StackProps) => react.JSX.Element;
+declare const Stack: FC<StackProps>;
 
 type PlayroomTabsProps = Optional<TabsProps, 'label'>;
-declare const Tabs: ({ label, size, ...restProps }: PlayroomTabsProps) => react.JSX.Element;
-declare const Tab: {
-    ({ icon, ...restProps }: TabProps): react.JSX.Element;
-    __isTab__: boolean;
-};
+declare const Tabs: FC<PlayroomTabsProps>;
+declare const Tab: FC<TabProps>;
 
 declare const Tag: ({ icon, size, ...restProps }: TagProps) => react.JSX.Element;
 
 type PlayroomTextareaProps = StateProp & Optional<TextareaBaseProps, 'id' | 'value' | 'onChange'> & TextareaLabelProps;
-declare const Textarea: ({ stateName, value, onChange, ...restProps }: PlayroomTextareaProps) => react.JSX.Element;
+declare const Textarea: FC<PlayroomTextareaProps>;
 
 type PlayroomTextDropdownProps<Value> = Optional<TextDropdownProps<Value>, 'id' | 'value' | 'label' | 'onChange' | 'options'>;
-declare function TextDropdown<Value>({ value, label, onChange, options, tabIndex, ...restProps }: PlayroomTextDropdownProps<Value | string>): react.JSX.Element;
+declare const TextDropdown: FC<PlayroomTextDropdownProps<any>>;
 
 type PlayroomTextFieldProps = StateProp & Optional<Omit<TextFieldBaseProps, 'onClear'>, 'id' | 'value' | 'onChange'> & TextFieldLabelProps & {
     onChange?: (fakeEvent: {
@@ -5202,12 +5165,12 @@ type PlayroomTextFieldProps = StateProp & Optional<Omit<TextFieldBaseProps, 'onC
     }) => void;
     onClear?: boolean | TextFieldBaseProps['onClear'];
 };
-declare const TextField: ({ stateName, value, onChange, onClear, tabIndex, ...restProps }: PlayroomTextFieldProps) => react.JSX.Element;
+declare const TextField: FC<PlayroomTextFieldProps>;
 
-declare const Tiles: ({ space, ...restProps }: TilesProps) => react.JSX.Element;
+declare const Tiles: FC<TilesProps>;
 
 type PlayroomToggleProps = StateProp & Optional<ToggleProps, 'id' | 'on' | 'onChange'>;
-declare const Toggle: ({ stateName, on, onChange, ...restProps }: PlayroomToggleProps) => react.JSX.Element;
+declare const Toggle: FC<PlayroomToggleProps>;
 
 interface PlaceholderProps {
     height: string | number;