@fpkit/acss 3.0.0 → 3.1.1

package/libs/index.d.ts

@@ -1,6 +1,6 @@
 export { Button, ButtonProps } from './components/button.js';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.js';
-import React, { ReactNode } from 'react';
+import React$1, { ReactNode } from 'react';
 import { I as IconProps } from './icons-287fce3a.js';
 export { a as Icon, b as IconProps } from './icons-287fce3a.js';
 export { default as Field, FieldProps } from './components/form/fields.js';
@@ -42,7 +42,7 @@ type AlertProps = {
     /**
      * The main message content.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Optional title for the alert.
      */
@@ -121,7 +121,7 @@ type AlertProps = {
      * </Alert>
      * ```
      */
-    actions?: React.ReactNode;
+    actions?: React$1.ReactNode;
     /**
      * Whether to automatically focus the alert when it becomes visible.
      * Useful for critical alerts that require immediate attention.
@@ -173,8 +173,8 @@ type AlertProps = {
      * ```
      */
     contentType?: "text" | "node";
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children">;
-declare const Alert: React.FC<AlertProps>;
+} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children">;
+declare const Alert: React$1.FC<AlertProps>;
 
 /**
  * Props for the Img component.
@@ -221,7 +221,7 @@ declare const Alert: React.FC<AlertProps>;
  *
  * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
  */
-interface ImgProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
+interface ImgProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
     /**
      * The image source URL.
      * @default '//'
@@ -255,7 +255,7 @@ interface ImgProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'plac
     /**
      * Inline styles to apply to the image.
      */
-    styles?: React.CSSProperties;
+    styles?: React$1.CSSProperties;
     /**
      * Loading behavior for the image.
      * - `"lazy"` (default): Defers loading until near viewport
@@ -355,7 +355,7 @@ interface ImgProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'plac
      * />
      * ```
      */
-    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onError?: (event: React$1.SyntheticEvent<HTMLImageElement, Event>) => void;
     /**
      * Callback fired when the image successfully loads.
      *
@@ -370,7 +370,7 @@ interface ImgProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'plac
      * />
      * ```
      */
-    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onLoad?: (event: React$1.SyntheticEvent<HTMLImageElement, Event>) => void;
 }
 
 /**
@@ -480,7 +480,7 @@ interface ImgProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'plac
  * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
  */
 declare const Img: {
-    ({ src, alt, width, height, styles, loading, placeholder, fetchpriority, decoding, srcSet, sizes, onError, onLoad, ...props }: ImgProps): React.JSX.Element;
+    ({ src, alt, width, height, styles, loading, placeholder, fetchpriority, decoding, srcSet, sizes, onError, onLoad, ...props }: ImgProps): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -502,7 +502,7 @@ interface TextToSpeechComponentProps {
     /** The language to be used for speech synthesis. */
     language?: string;
     /** Player label */
-    label?: string | React.ReactNode;
+    label?: string | React$1.ReactNode;
     /** Callback function to be called when speech ends. */
     onEnd?: () => void;
 }
@@ -511,22 +511,22 @@ interface TextToSpeechComponentProps {
  * @param {TextToSpeechComponentProps} props - The props for the component.
  * @returns {JSX.Element} The rendered TextToSpeechComponent.
  */
-declare const TextToSpeech: React.FC<TextToSpeechComponentProps>;
+declare const TextToSpeech: React$1.FC<TextToSpeechComponentProps>;
 
-type ComponentProps = React.ComponentProps<typeof UI>;
+type ComponentProps = React$1.ComponentProps<typeof UI>;
 /**
  * Renders children elements without any wrapping component.
  * Can be used as a placeholder when no semantic landmark is needed.
  */
 declare const Landmarks: {
-    (children?: React.FC): React.JSX.Element;
+    (children?: React$1.FC): React$1.JSX.Element;
     displayName: string;
-    Header: ({ id, children, headerBackground, styles, classes, ...props }: HeaderProps) => React.JSX.Element;
-    Main: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
-    Footer: ({ id, classes, children, styles, ...props }: ComponentProps) => React.JSX.Element;
-    Aside: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
-    Section: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
-    Article: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
+    Header: ({ id, children, headerBackground, styles, classes, ...props }: HeaderProps) => React$1.JSX.Element;
+    Main: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
+    Footer: ({ id, classes, children, styles, ...props }: ComponentProps) => React$1.JSX.Element;
+    Aside: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
+    Section: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
+    Article: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
 };
 type HeaderProps = {
     headerBackground?: ReactNode;
@@ -540,7 +540,7 @@ type HeaderProps = {
  * @param styles - Optional styles object.
  * @param props - Other props.
  */
-declare const Header: ({ id, children, headerBackground, styles, classes, ...props }: HeaderProps) => React.JSX.Element;
+declare const Header: ({ id, children, headerBackground, styles, classes, ...props }: HeaderProps) => React$1.JSX.Element;
 /**
  * Main component.
  *
@@ -550,7 +550,7 @@ declare const Header: ({ id, children, headerBackground, styles, classes, ...pro
  * @param styles - Optional styles object.
  * @param props - Other props.
  */
-declare const Main: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
+declare const Main: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
 /**
  * Footer component that renders a footer element with a section element inside.
  * @param {ReactNode} children - Child elements to render inside the section element.
@@ -558,8 +558,8 @@ declare const Main: ({ id, children, styles, classes, ...props }: ComponentProps
  * @param props - Additional props to pass to the footer element.
  * @returns A React component that renders a footer element with a section element inside.
  */
-declare const Footer: ({ id, classes, children, styles, ...props }: ComponentProps) => React.JSX.Element;
-declare const Aside: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
+declare const Footer: ({ id, classes, children, styles, ...props }: ComponentProps) => React$1.JSX.Element;
+declare const Aside: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
 /**
  * Section component that renders a section element.
  *
@@ -567,7 +567,7 @@ declare const Aside: ({ id, children, styles, classes, ...props }: ComponentProp
  * @param styles - CSS styles to apply to the section.
  * @param props - Other props.
  */
-declare const Section: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
+declare const Section: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
 /**
  * Article component renders an HTML <article> element.
  *
@@ -575,7 +575,198 @@ declare const Section: ({ id, children, styles, classes, ...props }: ComponentPr
  * @param styles - CSS styles to apply to the article.
  * @param props - Additional props to pass to the article element.
  */
-declare const Article: ({ id, children, styles, classes, ...props }: ComponentProps) => React.JSX.Element;
+declare const Article: ({ id, children, styles, classes, ...props }: ComponentProps) => React$1.JSX.Element;
+
+/**
+ * Type definitions for Flex container components
+ * Supports responsive flexbox layouts with CSS custom properties
+ */
+/**
+ * Valid HTML elements for Flex container
+ * Restricted to semantic container elements only
+ */
+type FlexContainerElement = "div" | "section" | "article" | "aside" | "main" | "header" | "footer" | "nav" | "ul" | "ol" | "dl" | "li" | "form" | "fieldset";
+/**
+ * Valid HTML elements for Flex.Item
+ * Includes list item elements in addition to container elements
+ */
+type FlexItemElement = FlexContainerElement | "li" | "dt" | "dd";
+/**
+ * Flex container direction
+ */
+type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+/**
+ * Flex wrap behavior
+ */
+type FlexWrap = "wrap" | "nowrap" | "wrap-reverse";
+/**
+ * Flex justify-content alignment
+ */
+type FlexJustify = "start" | "end" | "center" | "between" | "around" | "evenly";
+/**
+ * Flex align-items alignment
+ */
+type FlexAlign = "start" | "end" | "center" | "baseline" | "stretch";
+/**
+ * Flex align-content alignment (multi-line)
+ */
+type FlexAlignContent = "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch";
+/**
+ * Flex align-self alignment (individual items)
+ */
+type FlexAlignSelf = "auto" | "start" | "end" | "center" | "baseline" | "stretch";
+/**
+ * Gap size options
+ */
+type FlexGap = "0" | "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Preset flex layout variants
+ */
+type FlexVariant = "center" | "between" | "around" | "stack" | "spread";
+/**
+ * Responsive flex properties for breakpoints
+ */
+interface ResponsiveFlexProps {
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Flex wrap behavior */
+    wrap?: FlexWrap;
+    /** Gap between flex items */
+    gap?: FlexGap;
+    /** Row gap (vertical spacing) */
+    rowGap?: FlexGap;
+    /** Column gap (horizontal spacing) */
+    colGap?: FlexGap;
+    /** Justify content (main axis alignment) */
+    justify?: FlexJustify;
+    /** Align items (cross axis alignment) */
+    align?: FlexAlign;
+    /** Align content (multi-line alignment) */
+    alignContent?: FlexAlignContent;
+}
+/**
+ * Base Flex component props
+ *
+ * ## Semantic Elements Only
+ * The `as` prop is restricted to semantic container elements to ensure
+ * proper HTML structure and accessibility. Use only block-level container
+ * elements like div, section, article, or form elements.
+ *
+ * **Allowed elements**: div, section, article, aside, main, header, footer,
+ * nav, ul, ol, dl, form, fieldset
+ *
+ * **Not allowed**: span, a, button, input, or other inline/interactive elements
+ */
+interface FlexProps extends ResponsiveFlexProps, Omit<React.HTMLAttributes<HTMLElement>, "className"> {
+    /** Preset layout variant */
+    variant?: FlexVariant;
+    /** Use inline-flex instead of flex */
+    inline?: boolean;
+    /**
+     * Element type to render as
+     * @remarks Restricted to semantic container elements only for proper HTML structure
+     */
+    as?: FlexContainerElement;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles and CSS custom properties */
+    styles?: React.CSSProperties;
+    /** Children elements */
+    children?: React.ReactNode;
+    /** Responsive props for small screens (≥30rem / 480px) */
+    sm?: ResponsiveFlexProps;
+    /** Responsive props for medium screens (≥48rem / 768px) */
+    md?: ResponsiveFlexProps;
+    /** Responsive props for large screens (≥62rem / 992px) */
+    lg?: ResponsiveFlexProps;
+    /** Responsive props for extra large screens (≥80rem / 1280px) */
+    xl?: ResponsiveFlexProps;
+}
+/**
+ * Flex.Item component props
+ *
+ * ## Semantic Elements
+ * The `as` prop accepts container elements plus list item elements (li, dt, dd)
+ * to support semantic list structures within flex containers.
+ *
+ * **Allowed elements**: div, section, article, aside, main, header, footer,
+ * nav, ul, ol, dl, form, fieldset, li, dt, dd
+ */
+interface FlexItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
+    /** Flex grow factor */
+    grow?: 0 | 1;
+    /** Flex shrink factor */
+    shrink?: 0 | 1;
+    /** Flex basis */
+    basis?: "auto" | "0" | "full";
+    /** Flex shorthand: '1' | 'auto' | 'initial' | 'none' */
+    flex?: "1" | "auto" | "initial" | "none";
+    /** Align self (overrides parent align-items) */
+    alignSelf?: FlexAlignSelf;
+    /** Order of the flex item */
+    order?: "first" | "last" | "none";
+    /**
+     * Element type to render as
+     * @remarks Includes list item elements (li, dt, dd) in addition to container elements
+     */
+    as?: FlexItemElement;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles and CSS custom properties */
+    styles?: React.CSSProperties;
+    /** Children elements */
+    children?: React.ReactNode;
+    /** Responsive props for small screens (≥30rem / 480px) */
+    sm?: {
+        flex?: "1" | "auto" | "none";
+    };
+    /** Responsive props for medium screens (≥48rem / 768px) */
+    md?: {
+        flex?: "1" | "auto" | "none";
+    };
+    /** Responsive props for large screens (≥62rem / 992px) */
+    lg?: {
+        flex?: "1" | "auto" | "none";
+    };
+    /** Responsive props for extra large screens (≥80rem / 1280px) */
+    xl?: {
+        flex?: "1" | "auto" | "none";
+    };
+}
+/**
+ * Flex.Spacer component props
+ * Creates an auto-expanding spacer element (flex: 1)
+ *
+ * ## Semantic Elements Only
+ * The `as` prop is restricted to container elements. Spacers are purely
+ * presentational and should use non-semantic containers like div.
+ *
+ * **Allowed elements**: div, section, article, aside, main, header, footer,
+ * nav, ul, ol, dl, form, fieldset
+ */
+interface FlexSpacerProps extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
+    /**
+     * Element type to render as
+     * @remarks Restricted to container elements. Default is 'div'.
+     */
+    as?: FlexContainerElement;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles and CSS custom properties */
+    styles?: React.CSSProperties;
+}
+/**
+ * Combined Flex component type with sub-components
+ */
+type FlexComponent = React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLElement>> & {
+    Item: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLElement>>;
+    Spacer: React.ForwardRefExoticComponent<FlexSpacerProps & React.RefAttributes<HTMLElement>>;
+};
+
+/**
+ * Attach sub-components to Flex using compound component pattern
+ */
+declare const Flex: FlexComponent;
 
 /**
  * Props for the Badge component
@@ -592,13 +783,13 @@ type BadgeProps = {
     /**
      * Content to display inside the badge (typically numbers or short text)
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Visual variant of the badge
      * - 'rounded': Circular badge style
      */
     variant?: 'rounded';
-} & React.ComponentProps<typeof UI>;
+} & React$1.ComponentProps<typeof UI>;
 /**
  * Badge - A small label component for displaying status, counts, or notifications
  *
@@ -663,7 +854,7 @@ type BadgeProps = {
  * <Badge>12</Badge>
  */
 declare const Badge: {
-    ({ id, styles, classes, children, variant, ...props }: BadgeProps): React.JSX.Element;
+    ({ id, styles, classes, children, variant, ...props }: BadgeProps): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -743,7 +934,7 @@ type TagProps = {
      * REQUIRED - Ensures tag has meaningful content for all users including screen reader users
      * Typically short text, version numbers, or status labels
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Accessible label for screen readers
      * Provides additional context beyond visible text
@@ -766,7 +957,7 @@ type TagProps = {
      * - 'assertive': Announces immediately (use sparingly for critical updates)
      */
     'aria-live'?: 'off' | 'polite' | 'assertive';
-} & Omit<React.ComponentProps<typeof UI>, 'as' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-live'>;
+} & Omit<React$1.ComponentProps<typeof UI>, 'as' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-live'>;
 
 /**
  * Tag - A small inline label component for displaying status, versions, or environment indicators
@@ -860,32 +1051,32 @@ type TagProps = {
  * <Tag role="status" variant="stable">v1.0</Tag>
  */
 declare const Tag: {
-    ({ elm, role, variant, children, styles, ...props }: TagProps): React.JSX.Element;
+    ({ elm, role, variant, children, styles, ...props }: TagProps): React$1.JSX.Element;
     displayName: string;
 };
 
 declare const Caption: {
-    ({ children, ...props }: ComponentProps$1): React.JSX.Element;
+    ({ children, ...props }: ComponentProps$1): React$1.JSX.Element;
     displayName: string;
 };
 declare const Thead: {
-    ({ children, ...props }: ComponentProps$1): React.JSX.Element;
+    ({ children, ...props }: ComponentProps$1): React$1.JSX.Element;
     displayName: string;
 };
 declare const Tbody: {
-    ({ children, ...props }: ComponentProps$1): React.JSX.Element;
+    ({ children, ...props }: ComponentProps$1): React$1.JSX.Element;
     displayName: string;
 };
 declare const Tr: {
-    ({ children, ...props }: ComponentProps$1): React.JSX.Element;
+    ({ children, ...props }: ComponentProps$1): React$1.JSX.Element;
     displayName: string;
 };
 declare const Td: {
-    ({ children, ...props }: ComponentProps$1): React.JSX.Element;
+    ({ children, ...props }: ComponentProps$1): React$1.JSX.Element;
     displayName: string;
 };
 declare const Table: {
-    ({ id, dataStyle, children, ...props }: ComponentProps$1): React.JSX.Element;
+    ({ id, children, ...props }: ComponentProps$1): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -920,7 +1111,7 @@ type DetailsProps = {
      * summary={<><Icon /> Shipping Information</>}
      * ```
      */
-    summary: React.ReactNode;
+    summary: React$1.ReactNode;
     /**
      * Optional icon displayed before the summary text.
      * Commonly used for chevron/arrow indicators.
@@ -930,7 +1121,7 @@ type DetailsProps = {
      * icon={<ChevronDownIcon />}
      * ```
      */
-    icon?: React.ReactNode;
+    icon?: React$1.ReactNode;
     /**
      * Accessible label for screen readers.
      * If not provided, the native `<details>` semantic will be used.
@@ -957,7 +1148,7 @@ type DetailsProps = {
      * ```
      */
     name?: string;
-} & React.ComponentProps<"details"> & Partial<React.ComponentProps<typeof UI>>;
+} & React$1.ComponentProps<"details"> & Partial<React$1.ComponentProps<typeof UI>>;
 
 /**
  * Details - A progressive disclosure component using native HTML `<details>` element.
@@ -1008,44 +1199,44 @@ type DetailsProps = {
  * <Details name="faq" summary="Question 3">Answer 3</Details>
  * ```
  */
-declare const Details: React.ForwardRefExoticComponent<Omit<DetailsProps, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
+declare const Details: React$1.ForwardRefExoticComponent<Omit<DetailsProps, "ref"> & React$1.RefAttributes<HTMLDetailsElement>>;
 
 /**
  * @deprecated This type is deprecated. Use `PolymorphicRef` from './ui.tsx' instead.
  * The UI component provides better type safety and accessibility features.
  */
-type PolymorphicRef<C extends React.ElementType> = React.Ref<React.ElementRef<C>>;
+type PolymorphicRef<C extends React$1.ElementType> = React$1.Ref<React$1.ElementRef<C>>;
 /**
  * @deprecated This type is deprecated. Use `AsProp` from './ui.tsx' instead.
  * The UI component provides better type safety and accessibility features.
  */
-type AsProp<C extends React.ElementType> = {
+type AsProp<C extends React$1.ElementType> = {
     as?: C;
 };
 /**
  * @deprecated This type is deprecated. Use `PropsToOmit` from './ui.tsx' instead.
  * The UI component provides better type safety and accessibility features.
  */
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+type PropsToOmit<C extends React$1.ElementType, P> = keyof (AsProp<C> & P);
 /**
  * @deprecated This type is deprecated. Use `PolymorphicComponentProp` from './ui.tsx' instead.
  * The UI component provides better type safety and accessibility features.
  */
-type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+type PolymorphicComponentProp<C extends React$1.ElementType, Props = {}> = React$1.PropsWithChildren<Props & AsProp<C>> & Omit<React$1.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 /**
  * @deprecated This type is deprecated. Use `PolymorphicComponentPropWithRef` from './ui.tsx' instead.
  * The UI component provides better type safety and accessibility features.
  */
-type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
-    ref?: PolymorphicRef<C> | React.ForwardedRef<React.ElementRef<C>>;
+type PolymorphicComponentPropWithRef<C extends React$1.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
+    ref?: PolymorphicRef<C> | React$1.ForwardedRef<React$1.ElementRef<C>>;
 };
 /**
  * @deprecated This type is deprecated. Use `UIProps` from './ui.tsx' instead.
  * The UI component provides better type safety and accessibility features.
  */
-type FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, {
+type FPProps<C extends React$1.ElementType> = PolymorphicComponentPropWithRef<C, {
     renderStyles?: boolean;
-    styles?: React.CSSProperties;
+    styles?: React$1.CSSProperties;
     classes?: string;
 }>;
 /**
@@ -1072,7 +1263,7 @@ type FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, {
  * ```
  */
 type FPComponent = {
-    <C extends React.ElementType = 'span'>(props: FPProps<C>): React.ReactElement | null;
+    <C extends React$1.ElementType = 'span'>(props: FPProps<C>): React$1.ReactElement | null;
     displayName?: string;
 };
 /**
@@ -1111,4 +1302,4 @@ type FPComponent = {
  */
 declare const FP: FPComponent;
 
-export { Alert, AlertProps, Article, Aside, Badge, BadgeProps, FP as Box, Caption, ComponentProps$1 as ComponentProps, Details, FP, Footer, Header, Img, ImgProps, Landmarks, Main, Section, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr, UI };
+export { Alert, AlertProps, Article, Aside, Badge, BadgeProps, FP as Box, Caption, ComponentProps$1 as ComponentProps, Details, FP, Flex, FlexAlign, FlexAlignContent, FlexAlignSelf, FlexContainerElement, FlexDirection, FlexGap, FlexItemElement, FlexItemProps, FlexJustify, FlexProps, FlexSpacerProps, FlexVariant, FlexWrap, Footer, Header, Img, ImgProps, Landmarks, Main, ResponsiveFlexProps, Section, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr, UI };