@fpkit/acss 2.2.0 → 3.1.0

package/libs/index.d.ts

@@ -1,12 +1,12 @@
 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';
 export { default as Input } from './components/form/inputs.js';
-export { default as Link, default as To } from './components/link/link.js';
-export { List } from './components/list/list.js';
+export { _ as Link, L as LinkProps, _ as To } from './link-59ad884f.js';
+export { default as List } from './components/list/list.js';
 export { Modal, ModalProps } from './components/modal.js';
 export { default as Popover, PopoverProps } from './components/popover/popover.js';
 export { RenderTable as TBL, TableProps } from './components/tables/table.js';
@@ -19,7 +19,7 @@ export { default as Textarea } from './components/form/textarea.js';
 import { C as ComponentProps$1 } from './component-props-67d978a2.js';
 export { default as Breadcrumb, BreadcrumbProps, CustomRoute, useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
 export { I as InputProps, T as TextareaProps } from './form.types-d25ebfac.js';
-export { L as ListItemProps } from './list.types-d26de310.js';
+export { L as ListItemProps, a as ListProps } from './list.types-d26de310.js';
 
 /**
  * Valid severity levels for alerts.
@@ -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,245 +480,10 @@ 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;
 };
 
-/**
- * Props for the Link component.
- *
- * The Link component renders accessible anchor elements with enhanced security,
- * styling variants, and WCAG 2.1 AA compliance. It supports both traditional
- * text links and button-styled links for call-to-action scenarios.
- *
- * ## Accessibility Considerations
- *
- * - External links automatically include `rel="noopener noreferrer"` for security
- * - Links should have descriptive text or `aria-label` for screen readers
- * - Focus indicators must meet WCAG 2.4.7 contrast requirements (3:1 minimum)
- * - Button-styled links maintain semantic `<a>` element for proper navigation
- *
- * @example
- * ```tsx
- * // Basic link
- * <Link href="/about">About Us</Link>
- *
- * // External link with prefetch
- * <Link href="https://example.com" target="_blank" prefetch>
- *   Visit Example
- * </Link>
- *
- * // Button-styled link
- * <Link href="/signup" btnStyle="primary">
- *   <b>Sign Up Now</b>
- * </Link>
- * ```
- */
-type LinkProps = {
-    /**
-     * The URL that the hyperlink points to.
-     * Can be relative or absolute, internal or external.
-     *
-     * @example
-     * ```tsx
-     * href="/products"
-     * href="https://example.com"
-     * href="mailto:hello@example.com"
-     * href="tel:+1234567890"
-     * ```
-     */
-    href?: string;
-    /**
-     * Where to display the linked URL.
-     *
-     * - `_self` (default): Current browsing context
-     * - `_blank`: New tab/window (automatically adds security attributes)
-     * - `_parent`: Parent browsing context
-     * - `_top`: Top-level browsing context
-     *
-     * Note: When `target="_blank"`, `rel="noopener noreferrer"` is automatically
-     * added for security unless explicitly overridden.
-     *
-     * @example
-     * ```tsx
-     * target="_blank" // Opens in new tab with security
-     * ```
-     */
-    target?: string;
-    /**
-     * Relationship between current document and linked URL.
-     *
-     * Common values:
-     * - `noopener`: Prevents window.opener access (security)
-     * - `noreferrer`: Prevents referrer header (privacy)
-     * - `nofollow`: Hints search engines not to follow (SEO)
-     * - `prefetch`: Hints to prefetch the resource (performance)
-     *
-     * Note: For `target="_blank"`, this component automatically merges
-     * `noopener noreferrer` with any user-provided values for security.
-     *
-     * @example
-     * ```tsx
-     * rel="nofollow noopener"
-     * rel="author"
-     * ```
-     */
-    rel?: string;
-    /**
-     * Content to display inside the link.
-     *
-     * For accessibility, ensure link text is descriptive and meaningful.
-     * Avoid generic text like "click here" or "read more" without context.
-     *
-     * @example
-     * ```tsx
-     * // ✅ Good: Descriptive link text
-     * <Link href="/products">View all products</Link>
-     *
-     * // ❌ Bad: Generic link text without context
-     * <Link href="/products">Click here</Link>
-     *
-     * // ✅ Good: Icon with accessible label
-     * <Link href="/home" aria-label="Return to homepage">
-     *   <HomeIcon aria-hidden="true" />
-     * </Link>
-     * ```
-     */
-    children: React.ReactNode;
-    /**
-     * Inline CSS styles to apply to the link element.
-     * Can be used to override CSS custom properties.
-     *
-     * @example
-     * ```tsx
-     * styles={{
-     *   '--link-color': '#ff0000',
-     *   '--link-decoration': 'underline',
-     * }}
-     * ```
-     */
-    styles?: React.CSSProperties;
-    /**
-     * Hints to the browser to prefetch the linked resource.
-     *
-     * When `true` and `target="_blank"`, adds `rel="prefetch"` along with
-     * security attributes. This can improve perceived performance but should
-     * be used judiciously as it consumes bandwidth.
-     *
-     * Note: Browser support varies. Modern browsers may ignore this hint.
-     *
-     * @default false
-     * @example
-     * ```tsx
-     * <Link href="/next-page" prefetch>Next Page</Link>
-     * ```
-     */
-    prefetch?: boolean;
-    /**
-     * Applies button-like styling to the link.
-     *
-     * When set, the link renders with button styling including padding,
-     * borders, and hover effects while maintaining semantic anchor behavior.
-     *
-     * Common values:
-     * - `"btn"`: Standard button styling
-     * - `"pill"`: Rounded pill button styling
-     *
-     * Alternative: Wrap children in `<b>` or `<i>` tags for automatic styling:
-     * - `<b>`: Applies button styling
-     * - `<i>`: Applies pill styling
-     *
-     * @example
-     * ```tsx
-     * // Using btnStyle prop
-     * <Link href="/signup" btnStyle="btn">Sign Up</Link>
-     *
-     * // Using child wrapper (automatic detection)
-     * <Link href="/signup"><b>Sign Up</b></Link>
-     * <Link href="/signup"><i>Pill Button</i></Link>
-     * ```
-     */
-    btnStyle?: string;
-    /**
-     * Event handler called when the link is clicked or activated.
-     *
-     * **Recommended for most use cases**, especially analytics and tracking.
-     * This event fires for:
-     * - Mouse clicks
-     * - Touch/tap interactions
-     * - Keyboard activation (Enter key)
-     * - Assistive technology activation
-     *
-     * Use `onClick` when you need to track ALL user activations, including
-     * keyboard users. This ensures full accessibility coverage.
-     *
-     * @param event - The mouse event
-     * @example
-     * ```tsx
-     * // ✅ RECOMMENDED: onClick tracks all activation methods
-     * <Link
-     *   href="/products"
-     *   onClick={(e) => {
-     *     trackEvent('link_click', { href: '/products' });
-     *   }}
-     * >
-     *   Products
-     * </Link>
-     * ```
-     */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Event handler called when a pointer device button is pressed on the link.
-     *
-     * Use this for specific pointer interactions like:
-     * - Drag-and-drop detection
-     * - Touch gesture recognition
-     * - Distinguishing input types (mouse vs touch vs pen)
-     * - Providing early visual feedback before click completes
-     *
-     * **⚠️ Accessibility Note**: Unlike `onClick`, this does NOT fire for
-     * keyboard activation (Enter key). If you need to track all user interactions
-     * including keyboard users, use `onClick` instead.
-     *
-     * @param event - The pointer event
-     * @example
-     * ```tsx
-     * // Use onPointerDown for pointer-specific interactions
-     * <Link
-     *   href="/products"
-     *   onPointerDown={(e) => {
-     *     // Distinguish between mouse (2), touch (5), and pen (3)
-     *     console.log('Pointer type:', e.pointerType);
-     *   }}
-     * >
-     *   Products
-     * </Link>
-     * ```
-     *
-     * @example
-     * ```tsx
-     * // ✅ Use both handlers together for comprehensive tracking
-     * <Link
-     *   href="/products"
-     *   onClick={(e) => trackAllActivations(e)}
-     *   onPointerDown={(e) => provideFeedback(e)}
-     * >
-     *   Products
-     * </Link>
-     * ```
-     */
-    onPointerDown?: (event: React.PointerEvent<HTMLAnchorElement>) => void;
-    /**
-     * Icon element to display in the link (used by IconLink).
-     *
-     * @example
-     * ```tsx
-     * <IconLink href="/home" icon={<HomeIcon />} />
-     * ```
-     */
-    icon?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<"a">, 'style'>;
-
 /**
  * Props for the TextToSpeechComponent.
  * @interface TextToSpeechComponentProps
@@ -737,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;
 }
@@ -746,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;
@@ -775,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.
  *
@@ -785,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.
@@ -793,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.
  *
@@ -802,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.
  *
@@ -810,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" | "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
@@ -827,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
  *
@@ -898,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;
 };
 
@@ -978,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
@@ -1001,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
@@ -1095,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, dataStyle, children, ...props }: ComponentProps$1): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -1155,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.
@@ -1165,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.
@@ -1192,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.
@@ -1243,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;
 }>;
 /**
@@ -1307,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;
 };
 /**
@@ -1346,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, LinkProps, 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 };