@vaneui/ui 0.2.1-alpha.20250810113755.26a118a → 0.2.1-alpha.20250812182914.4e44540

package/dist/components/ui/label.d.ts

@@ -1,3 +1,109 @@
-import { JSX } from 'react';
-import { LabelProps } from './props';
-export declare const Label: (props: LabelProps) => JSX.Element;
+import React from 'react';
+export declare const Label: React.ForwardRefExoticComponent<{
+    className?: string;
+    children?: React.ReactNode;
+} & React.LabelHTMLAttributes<HTMLLabelElement> & {
+    transparent?: boolean | undefined;
+    gap?: boolean | undefined;
+    reverse?: boolean | undefined;
+    link?: boolean | undefined;
+    default?: boolean | undefined;
+    accent?: boolean | undefined;
+    primary?: boolean | undefined;
+    secondary?: boolean | undefined;
+    tertiary?: boolean | undefined;
+    success?: boolean | undefined;
+    danger?: boolean | undefined;
+    warning?: boolean | undefined;
+    info?: boolean | undefined;
+    inline?: boolean | undefined;
+    block?: boolean | undefined;
+    inlineBlock?: boolean | undefined;
+    flex?: boolean | undefined;
+    inlineFlex?: boolean | undefined;
+    grid?: boolean | undefined;
+    inlineGrid?: boolean | undefined;
+    contents?: boolean | undefined;
+    table?: boolean | undefined;
+    tableCell?: boolean | undefined;
+    hidden?: boolean | undefined;
+    row?: boolean | undefined;
+    column?: boolean | undefined;
+    rowReverse?: boolean | undefined;
+    columnReverse?: boolean | undefined;
+    sans?: boolean | undefined;
+    serif?: boolean | undefined;
+    mono?: boolean | undefined;
+    italic?: boolean | undefined;
+    notItalic?: boolean | undefined;
+    thin?: boolean | undefined;
+    extralight?: boolean | undefined;
+    light?: boolean | undefined;
+    normal?: boolean | undefined;
+    medium?: boolean | undefined;
+    semibold?: boolean | undefined;
+    bold?: boolean | undefined;
+    extrabold?: boolean | undefined;
+    black?: boolean | undefined;
+    noGap?: boolean | undefined;
+    xsHide?: boolean | undefined;
+    smHide?: boolean | undefined;
+    mdHide?: boolean | undefined;
+    lgHide?: boolean | undefined;
+    xlHide?: boolean | undefined;
+    itemsStart?: boolean | undefined;
+    itemsEnd?: boolean | undefined;
+    itemsCenter?: boolean | undefined;
+    itemsBaseline?: boolean | undefined;
+    itemsStretch?: boolean | undefined;
+    justifyStart?: boolean | undefined;
+    justifyEnd?: boolean | undefined;
+    justifyCenter?: boolean | undefined;
+    justifyBetween?: boolean | undefined;
+    justifyAround?: boolean | undefined;
+    justifyEvenly?: boolean | undefined;
+    justifyStretch?: boolean | undefined;
+    justifyBaseline?: boolean | undefined;
+    overflowAuto?: boolean | undefined;
+    overflowHidden?: boolean | undefined;
+    overflowClip?: boolean | undefined;
+    overflowVisible?: boolean | undefined;
+    overflowScroll?: boolean | undefined;
+    overflowXAuto?: boolean | undefined;
+    overflowYAuto?: boolean | undefined;
+    overflowXHidden?: boolean | undefined;
+    overflowYHidden?: boolean | undefined;
+    overflowXClip?: boolean | undefined;
+    overflowYClip?: boolean | undefined;
+    overflowXVisible?: boolean | undefined;
+    overflowYVisible?: boolean | undefined;
+    overflowXScroll?: boolean | undefined;
+    overflowYScroll?: boolean | undefined;
+    relative?: boolean | undefined;
+    absolute?: boolean | undefined;
+    fixed?: boolean | undefined;
+    sticky?: boolean | undefined;
+    static?: boolean | undefined;
+    xs?: boolean | undefined;
+    sm?: boolean | undefined;
+    md?: boolean | undefined;
+    lg?: boolean | undefined;
+    xl?: boolean | undefined;
+    textLeft?: boolean | undefined;
+    textCenter?: boolean | undefined;
+    textRight?: boolean | undefined;
+    textJustify?: boolean | undefined;
+    underline?: boolean | undefined;
+    lineThrough?: boolean | undefined;
+    noUnderline?: boolean | undefined;
+    overline?: boolean | undefined;
+    uppercase?: boolean | undefined;
+    lowercase?: boolean | undefined;
+    capitalize?: boolean | undefined;
+    normalCase?: boolean | undefined;
+    flexWrap?: boolean | undefined;
+    flexNoWrap?: boolean | undefined;
+    flexWrapReverse?: boolean | undefined;
+} & {
+    tag?: React.ElementType;
+} & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/ui/layout.d.ts

@@ -2,6 +2,6 @@ export { Section } from './section';
 export { Container } from './container';
 export { Col } from './col';
 export { Row } from './row';
-export { Grid3, Grid4 } from './grid';
+export { Grid2, Grid3, Grid4 } from './grid';
 export { Card } from './card';
 export { Stack } from './stack';

package/dist/components/ui/props/keys.d.ts

@@ -93,6 +93,6 @@ export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify
 export type CategoryProps = {
     [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];
 };
-export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
+export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid2", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
 export type ComponentKey = typeof COMPONENT[number];
 export declare const ComponentCategories: Record<ComponentKey, readonly string[]>;

package/dist/components/ui/row.d.ts

@@ -1,3 +1,3 @@
-import { JSX } from 'react';
+import React from 'react';
 import { RowProps } from './props/props';
-export declare const Row: (props: RowProps) => JSX.Element;
+export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/section.d.ts

@@ -1,3 +1,3 @@
-import { JSX } from 'react';
+import React from 'react';
 import { SectionProps } from './props/props';
-export declare const Section: (props: SectionProps) => JSX.Element;
+export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/stack.d.ts

@@ -1,3 +1,3 @@
-import { JSX } from 'react';
+import React from 'react';
 import { StackProps } from './props/props';
-export declare const Stack: (props: StackProps) => JSX.Element;
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/theme/gridTheme.d.ts

@@ -16,5 +16,6 @@ export interface GridTheme extends BaseComponentTheme {
         flexDirection: DirectionTheme;
     };
 }
+export declare const defaultGrid2Theme: ComponentTheme<GridProps, GridTheme>;
 export declare const defaultGrid3Theme: ComponentTheme<GridProps, GridTheme>;
 export declare const defaultGrid4Theme: ComponentTheme<GridProps, GridTheme>;

package/dist/components/ui/typography.d.ts

@@ -1,9 +1,110 @@
-import { JSX } from 'react';
-import { TypographyProps, ListProps } from './props/props';
-export declare const PageTitle: (props: TypographyProps) => JSX.Element;
-export declare const SectionTitle: (props: TypographyProps) => JSX.Element;
-export declare const Title: (props: TypographyProps) => JSX.Element;
-export declare const Text: (props: TypographyProps) => JSX.Element;
-export declare const Link: (props: TypographyProps) => JSX.Element;
-export declare const ListItem: (props: TypographyProps) => JSX.Element;
-export declare const List: (props: ListProps) => JSX.Element;
+import React from 'react';
+import { TypographyProps } from './props/props';
+export declare const PageTitle: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SectionTitle: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Title: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Text: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const Link: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const ListItem: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLLIElement>>;
+export declare const List: React.ForwardRefExoticComponent<{
+    className?: string;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & {
+    link?: boolean | undefined;
+    table?: boolean | undefined;
+    hidden?: boolean | undefined;
+    transparent?: boolean | undefined;
+    padding?: boolean | undefined;
+    default?: boolean | undefined;
+    accent?: boolean | undefined;
+    primary?: boolean | undefined;
+    secondary?: boolean | undefined;
+    tertiary?: boolean | undefined;
+    success?: boolean | undefined;
+    danger?: boolean | undefined;
+    warning?: boolean | undefined;
+    info?: boolean | undefined;
+    inline?: boolean | undefined;
+    block?: boolean | undefined;
+    inlineBlock?: boolean | undefined;
+    flex?: boolean | undefined;
+    inlineFlex?: boolean | undefined;
+    grid?: boolean | undefined;
+    inlineGrid?: boolean | undefined;
+    contents?: boolean | undefined;
+    tableCell?: boolean | undefined;
+    sans?: boolean | undefined;
+    serif?: boolean | undefined;
+    mono?: boolean | undefined;
+    italic?: boolean | undefined;
+    notItalic?: boolean | undefined;
+    thin?: boolean | undefined;
+    extralight?: boolean | undefined;
+    light?: boolean | undefined;
+    normal?: boolean | undefined;
+    medium?: boolean | undefined;
+    semibold?: boolean | undefined;
+    bold?: boolean | undefined;
+    extrabold?: boolean | undefined;
+    black?: boolean | undefined;
+    xsHide?: boolean | undefined;
+    smHide?: boolean | undefined;
+    mdHide?: boolean | undefined;
+    lgHide?: boolean | undefined;
+    xlHide?: boolean | undefined;
+    itemsStart?: boolean | undefined;
+    itemsEnd?: boolean | undefined;
+    itemsCenter?: boolean | undefined;
+    itemsBaseline?: boolean | undefined;
+    itemsStretch?: boolean | undefined;
+    justifyStart?: boolean | undefined;
+    justifyEnd?: boolean | undefined;
+    justifyCenter?: boolean | undefined;
+    justifyBetween?: boolean | undefined;
+    justifyAround?: boolean | undefined;
+    justifyEvenly?: boolean | undefined;
+    justifyStretch?: boolean | undefined;
+    justifyBaseline?: boolean | undefined;
+    disc?: boolean | undefined;
+    decimal?: boolean | undefined;
+    overflowAuto?: boolean | undefined;
+    overflowHidden?: boolean | undefined;
+    overflowClip?: boolean | undefined;
+    overflowVisible?: boolean | undefined;
+    overflowScroll?: boolean | undefined;
+    overflowXAuto?: boolean | undefined;
+    overflowYAuto?: boolean | undefined;
+    overflowXHidden?: boolean | undefined;
+    overflowYHidden?: boolean | undefined;
+    overflowXClip?: boolean | undefined;
+    overflowYClip?: boolean | undefined;
+    overflowXVisible?: boolean | undefined;
+    overflowYVisible?: boolean | undefined;
+    overflowXScroll?: boolean | undefined;
+    overflowYScroll?: boolean | undefined;
+    noPadding?: boolean | undefined;
+    relative?: boolean | undefined;
+    absolute?: boolean | undefined;
+    fixed?: boolean | undefined;
+    sticky?: boolean | undefined;
+    static?: boolean | undefined;
+    xs?: boolean | undefined;
+    sm?: boolean | undefined;
+    md?: boolean | undefined;
+    lg?: boolean | undefined;
+    xl?: boolean | undefined;
+    textLeft?: boolean | undefined;
+    textCenter?: boolean | undefined;
+    textRight?: boolean | undefined;
+    textJustify?: boolean | undefined;
+    underline?: boolean | undefined;
+    lineThrough?: boolean | undefined;
+    noUnderline?: boolean | undefined;
+    overline?: boolean | undefined;
+    uppercase?: boolean | undefined;
+    lowercase?: boolean | undefined;
+    capitalize?: boolean | undefined;
+    normalCase?: boolean | undefined;
+} & {
+    tag?: React.ElementType;
+} & React.RefAttributes<HTMLUListElement>>;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { Code } from "./components/ui/code";
 export { Checkbox } from "./components/ui/checkbox";
 export { Label } from "./components/ui/label";
 export { Img } from "./components/ui/img";
-export { Section, Container, Col, Row, Stack, Grid3, Grid4, Card } from "./components/ui/layout";
+export { Section, Container, Col, Row, Stack, Grid2, Grid3, Grid4, Card } from "./components/ui/layout";
 export { Text, Title, Link, List, ListItem, SectionTitle, PageTitle } from "./components/ui/typography";
 export { COMPONENT, ComponentKeys, ComponentCategories, type ComponentKey, } from "./components/ui/props/keys";
 export { ThemeProvider, useTheme, defaultTheme, type ThemeProps, type ThemeDefaults, type ThemeExtraClasses, type ThemeProviderProps, type PartialTheme, } from './components/themeContext';

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useMemo, useContext } from 'react';
+import { createContext, useContext, useMemo, forwardRef } from 'react';
 
 /**
  * Base Theme class that all theme types will extend
@@ -92,7 +92,7 @@ const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
 // Media component categories
 const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
-    'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
+    'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
 const ComponentCategories = {
     badge: BADGE_CATEGORIES,
     button: BUTTON_CATEGORIES,
@@ -103,6 +103,7 @@ const ComponentCategories = {
     col: COL_CATEGORIES,
     container: CONTAINER_CATEGORIES,
     divider: DIVIDER_CATEGORIES,
+    grid2: GRID_CATEGORIES,
     grid3: GRID_CATEGORIES,
     grid4: GRID_CATEGORIES,
     img: IMG_CATEGORIES,
@@ -4641,6 +4642,9 @@ const gridSubThemes = {
         flexDirection: new DirectionTheme(),
     },
 };
+const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
+    return props.href ? "a" : "div";
+});
 const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
@@ -4771,6 +4775,7 @@ const defaultTheme = {
     col: defaultColTheme,
     stack: defaultStackTheme,
     section: defaultSectionTheme,
+    grid2: defaultGrid2Theme,
     grid3: defaultGrid3Theme,
     grid4: defaultGrid4Theme,
     pageTitle: pageTitleTheme,
@@ -4880,41 +4885,41 @@ function useTheme() {
     return useContext(ThemeContext);
 }
 
-function ThemedComponent(allProps) {
+const ThemedComponent = forwardRef(function ThemedComponent(allProps, ref) {
     const { theme, ...props } = allProps;
     const { Tag, finalClasses, finalProps } = useMemo(() => {
         // Pass the full allProps and let getComponentConfig handle filtering
         return theme.getComponentConfig(allProps);
     }, [theme, allProps]);
-    return (jsx(Tag, { className: finalClasses, ...finalProps, children: props.children }));
-}
+    return (jsx(Tag, { ref: ref, className: finalClasses, ...finalProps, children: props.children }));
+});
 
-const Button = (props) => {
+const Button = forwardRef(function Button(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.button, ...props });
-};
+    return jsx(ThemedComponent, { ref: ref, theme: theme.button, ...props });
+});
 
-const Badge = (props) => {
+const Badge = forwardRef(function Badge(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.badge, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.badge, ref: ref, ...props });
+});
 
-const Divider = (props) => {
+const Divider = forwardRef(function Divider(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.divider, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.divider, ref: ref, ...props });
+});
 
-const Chip = (props) => {
+const Chip = forwardRef(function Chip(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.chip, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.chip, ref: ref, ...props });
+});
 
-const Code = (props) => {
+const Code = forwardRef(function Code(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.code, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.code, ref: ref, ...props });
+});
 
-const Checkbox = (props) => {
+const Checkbox = forwardRef(function Checkbox(props, ref) {
     const theme = useTheme();
     // Extract only theme-relevant props for wrapper and check components
     const { 
@@ -4934,87 +4939,91 @@ const Checkbox = (props) => {
         filled, outline,
         pill, sharp, rounded
     };
-    return (jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ...themeProps, children: [jsx(ThemedComponent, { theme: theme.checkbox.input, ...props, type: "checkbox" }), jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
-};
+    return (jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ref: ref, ...themeProps, children: [jsx(ThemedComponent, { theme: theme.checkbox.input, ...props, type: "checkbox" }), jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
+});
 
-const Label = (props) => {
+const Label = forwardRef(function Label(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.label, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.label, ref: ref, ...props });
+});
 
-const Img = (props) => {
+const Img = forwardRef(function Img(props, ref) {
     const theme = useTheme();
-    return (jsx(ThemedComponent, { theme: theme.img, ...props }));
-};
+    return (jsx(ThemedComponent, { theme: theme.img, ref: ref, ...props }));
+});
 
-const Section = (props) => {
+const Section = forwardRef(function Section(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.section, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.section, ref: ref, ...props });
+});
 
-const Container = (props) => {
+const Container = forwardRef(function Container(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.container, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.container, ref: ref, ...props });
+});
 
-const Col = (props) => {
+const Col = forwardRef(function Col(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.col, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.col, ref: ref, ...props });
+});
 
-const Row = (props) => {
+const Row = forwardRef(function Row(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.row, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
+});
 
-const Grid3 = (props) => {
+const Grid2 = forwardRef(function Grid2(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.grid3, ...props });
-};
-const Grid4 = (props) => {
+    return jsx(ThemedComponent, { theme: theme.grid2, ref: ref, ...props });
+});
+const Grid3 = forwardRef(function Grid3(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.grid4, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
+});
+const Grid4 = forwardRef(function Grid4(props, ref) {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.grid4, ref: ref, ...props });
+});
 
-const Card = (props) => {
+const Card = forwardRef(function Card(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.card, ...props });
-};
+    return jsx(ThemedComponent, { ref: ref, theme: theme.card, ...props });
+});
 
-const Stack = (props) => {
+const Stack = forwardRef(function Stack(props, ref) {
     const theme = useTheme();
     const stackTheme = theme.stack;
-    return jsx(ThemedComponent, { theme: stackTheme, ...props });
-};
+    return jsx(ThemedComponent, { theme: stackTheme, ref: ref, ...props });
+});
 
-const PageTitle = (props) => {
+const PageTitle = forwardRef(function PageTitle(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.pageTitle, ...props });
-};
-const SectionTitle = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.pageTitle, ...props });
+});
+const SectionTitle = forwardRef(function SectionTitle(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.sectionTitle, ...props });
-};
-const Title = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.sectionTitle, ...props });
+});
+const Title = forwardRef(function Title(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.title, ...props });
-};
-const Text = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.title, ...props });
+});
+const Text = forwardRef(function Text(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.text, ...props });
-};
-const Link = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.text, ...props });
+});
+const Link = forwardRef(function Link(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.link, ...props });
-};
-const ListItem = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.link, ...props });
+});
+const ListItem = forwardRef(function ListItem(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.listItem, ...props });
-};
-const List = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.listItem, ...props });
+});
+const List = forwardRef(function List(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.list, ...props });
-};
+    return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
+});
 
-export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LINK, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, useTheme };
+export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid2, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LINK, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, useTheme };
 //# sourceMappingURL=index.esm.js.map