@vaneui/ui 0.1.7 → 0.1.8-alpha.20250714170309.cd74562

package/dist/components/themeContext.d.ts

@@ -3,7 +3,7 @@ import { ComponentTheme } from "./ui/theme/common/ComponentTheme";
 import { ButtonTheme } from './ui/theme/buttonTheme';
 import { BadgeTheme } from './ui/theme/badgeTheme';
 import { ChipTheme } from './ui/theme/chipTheme';
-import { TypographyComponentTheme } from './ui/theme/typographyComponentTheme';
+import { ListTheme, TypographyComponentTheme } from './ui/theme/typographyComponentTheme';
 import { CardTheme } from "./ui/theme/cardTheme";
 import { RowTheme } from "./ui/theme/rowTheme";
 import { DividerTheme } from './ui/theme/dividerTheme';
@@ -12,7 +12,7 @@ import { ColTheme } from './ui/theme/colTheme';
 import { StackTheme } from './ui/theme/stackTheme';
 import { SectionTheme } from "./ui/theme/sectionTheme";
 import { GridTheme } from "./ui/theme/gridTheme";
-import { BadgeProps, ButtonProps, CardProps, ChipProps, ColProps, ContainerProps, DividerProps, GridProps, RowProps, SectionProps, StackProps, TypographyComponentProps } from "./ui/props/props";
+import { BadgeProps, ButtonProps, CardProps, ChipProps, ColProps, ContainerProps, DividerProps, GridProps, RowProps, SectionProps, StackProps, TypographyProps } from "./ui/props/props";
 import { DeepPartial } from "./utils/deepPartial";
 export declare const COMPONENT_KEYS: readonly ["button", "badge", "chip", "card", "divider", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem"];
 export type ComponentKey = typeof COMPONENT_KEYS[number];
@@ -29,13 +29,13 @@ export interface ThemeProps extends Record<ComponentKey, ComponentTheme<object,
     section: ComponentTheme<SectionProps, SectionTheme>;
     grid3: ComponentTheme<GridProps, GridTheme>;
     grid4: ComponentTheme<GridProps, GridTheme>;
-    pageTitle: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-    sectionTitle: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-    title: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-    text: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-    link: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-    list: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-    listItem: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
+    pageTitle: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+    sectionTitle: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+    title: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+    text: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+    link: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+    list: ComponentTheme<TypographyProps, ListTheme>;
+    listItem: ComponentTheme<TypographyProps, TypographyComponentTheme>;
 }
 export type PartialTheme = DeepPartial<ThemeProps>;
 export declare const defaultTheme: ThemeProps;

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

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { TypographyComponentProps } from './props/props';
-export declare const Chip: (props: TypographyComponentProps) => JSX.Element;
+import { TypographyProps } from './props/props';
+export declare const Chip: (props: TypographyProps) => JSX.Element;

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

@@ -56,8 +56,8 @@ export type DisplayKey = typeof DISPLAY_KEYS[number];
 export type OverflowKey = typeof OVERFLOW_KEYS[number];
 export declare const BASE_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll"];
 export declare const FONT_KEYS: readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
-export declare const TYPOGRAPHY_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
-export type TypographyComponentKey = typeof TYPOGRAPHY_COMPONENT_KEYS[number];
+export declare const TYPOGRAPHY_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
+export type TypographyKey = typeof TYPOGRAPHY_KEYS[number];
 export declare const BUTTON_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "filled", "outline", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link"];
 export type ButtonKey = typeof BUTTON_KEYS[number];
 export declare const GRID_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll", "gap", "noGap", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];

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

@@ -1,12 +1,12 @@
 import React from "react";
-import { BadgeKey, ButtonKey, GridKey, RowKey, ColKey, CardKey, StackKey, ChipKey, DividerKey, ContainerKey, SectionKey, TypographyComponentKey } from "./keys";
+import { BadgeKey, ButtonKey, GridKey, RowKey, ColKey, CardKey, StackKey, ChipKey, DividerKey, ContainerKey, SectionKey, TypographyKey } from "./keys";
 export type ComponentProps = {
     tag?: React.ReactNode | string | any;
     className?: string;
     children?: React.ReactNode;
 } & React.HTMLProps<HTMLElement>;
-export type TypographyComponentProps = {
-    [K in TypographyComponentKey]?: boolean;
+export type TypographyProps = {
+    [K in TypographyKey]?: boolean;
 } & ComponentProps;
 export type ButtonProps = {
     [K in ButtonKey]?: boolean;

package/dist/components/ui/theme/size/paddingTheme.d.ts

@@ -0,0 +1,9 @@
+import { SizeKey, PaddingKey } from "../../props";
+import { BaseTheme } from "../common/baseTheme";
+export interface PaddingTheme extends Record<PaddingKey, string | Record<SizeKey, string>> {
+}
+export declare class PaddingTheme extends BaseTheme {
+    readonly defaultClasses: Record<PaddingKey, string | Record<SizeKey, string>>;
+    constructor(initial?: Partial<Record<PaddingKey, string | Record<SizeKey, string>>>);
+    getClasses(props: Record<string, boolean>, defaults: Record<string, boolean>): string[];
+}

package/dist/components/ui/theme/size/plTheme.d.ts

@@ -0,0 +1,7 @@
+import { SizeKey, PaddingKey } from "../../props";
+import { PaddingTheme } from "./paddingTheme";
+export interface PlTheme extends Record<PaddingKey, string | Record<SizeKey, string>> {
+}
+export declare class PlTheme extends PaddingTheme {
+    readonly defaultClasses: Record<PaddingKey, string | Record<SizeKey, string>>;
+}

package/dist/components/ui/theme/size/pxTheme.d.ts

@@ -1,9 +1,7 @@
-import { SizeKey, PaddingKey } from "../../props/keys";
-import { BaseTheme } from "../common/baseTheme";
+import { SizeKey, PaddingKey } from "../../props";
+import { PaddingTheme } from "./paddingTheme";
 export interface PxTheme extends Record<PaddingKey, string | Record<SizeKey, string>> {
 }
-export declare class PxTheme extends BaseTheme {
-    static readonly defaultClasses: Record<PaddingKey, string | Record<SizeKey, string>>;
-    constructor(initial?: Partial<Record<PaddingKey, string | Record<SizeKey, string>>>);
-    getClasses(props: Record<string, boolean>, defaults: Record<string, boolean>): string[];
+export declare class PxTheme extends PaddingTheme {
+    readonly defaultClasses: Record<PaddingKey, string | Record<SizeKey, string>>;
 }

package/dist/components/ui/theme/size/pyTheme.d.ts

@@ -1,9 +1,7 @@
-import { SizeKey, PaddingKey } from "../../props/keys";
-import { BaseTheme } from "../common/baseTheme";
+import { SizeKey, PaddingKey } from "../../props";
+import { PaddingTheme } from "./paddingTheme";
 export interface PyTheme extends Record<PaddingKey, string | Record<SizeKey, string>> {
 }
-export declare class PyTheme extends BaseTheme {
-    static readonly defaultClasses: Record<PaddingKey, string | Record<SizeKey, string>>;
-    constructor(initial?: Partial<Record<PaddingKey, string | Record<SizeKey, string>>>);
-    getClasses(props: Record<string, boolean>, defaults: Record<string, boolean>): string[];
+export declare class PyTheme extends PaddingTheme {
+    readonly defaultClasses: Record<PaddingKey, string | Record<SizeKey, string>>;
 }

package/dist/components/ui/theme/size/sizeTheme.d.ts

@@ -1,5 +1,5 @@
 import { BaseTheme } from "../common/baseTheme";
-import { SizeKey } from "../../props/keys";
+import { SizeKey } from "../../props";
 export interface SizeTheme extends Record<SizeKey, string> {
 }
 export declare class SizeTheme extends BaseTheme {

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

@@ -1,9 +1,10 @@
-import { TypographyComponentProps } from "../props/props";
+import { TypographyProps } from "../props/props";
 import React from "react";
 import { BaseTypographyComponentTheme, ComponentTheme } from "./common/ComponentTheme";
 import { SizeTheme } from "./size/sizeTheme";
 import { TextAppearanceTheme } from "./appearance/textAppearanceTheme";
 import { SizeKey } from "../props";
+import { PlTheme } from "./size/plTheme";
 export interface TypographyComponentTheme extends BaseTypographyComponentTheme {
     size: {
         text: SizeTheme;
@@ -12,11 +13,17 @@ export interface TypographyComponentTheme extends BaseTypographyComponentTheme {
         text: TextAppearanceTheme;
     };
 }
-export declare const createTypographyComponentTheme: (tag: React.ReactNode | string | any, base?: string, textSizeMap?: Record<SizeKey, string>, defaults?: Partial<TypographyComponentProps>) => ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-export declare const pageTitleTheme: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-export declare const sectionTitleTheme: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-export declare const titleTheme: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-export declare const textTheme: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-export declare const linkTheme: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-export declare const listItemTheme: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
-export declare const listTheme: ComponentTheme<TypographyComponentProps, TypographyComponentTheme>;
+export interface ListTheme extends TypographyComponentTheme {
+    size: {
+        text: SizeTheme;
+        paddingLeft: PlTheme;
+    };
+}
+export declare const createTypographyComponentTheme: (tag: React.ReactNode | string | any, base?: string, textSizeMap?: Record<SizeKey, string>, defaults?: Partial<TypographyProps>) => ComponentTheme<TypographyProps, TypographyComponentTheme>;
+export declare const pageTitleTheme: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+export declare const sectionTitleTheme: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+export declare const titleTheme: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+export declare const textTheme: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+export declare const linkTheme: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+export declare const listItemTheme: ComponentTheme<TypographyProps, TypographyComponentTheme>;
+export declare const listTheme: ComponentTheme<TypographyProps, ListTheme>;

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

@@ -1,9 +1,9 @@
 import { JSX } from 'react';
-import { TypographyComponentProps } from './props/props';
-export declare const PageTitle: (props: TypographyComponentProps) => JSX.Element;
-export declare const SectionTitle: (props: TypographyComponentProps) => JSX.Element;
-export declare const Title: (props: TypographyComponentProps) => JSX.Element;
-export declare const Text: (props: TypographyComponentProps) => JSX.Element;
-export declare const Link: (props: TypographyComponentProps) => JSX.Element;
-export declare const ListItem: (props: TypographyComponentProps) => JSX.Element;
-export declare const List: (props: TypographyComponentProps) => JSX.Element;
+import { TypographyProps } 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: TypographyProps) => JSX.Element;

package/dist/index.esm.js

@@ -89,13 +89,13 @@ const FONT_KEYS = [
     ...TEXT_ALIGN_KEYS
 ];
 // Typography component keys
-const TYPOGRAPHY_COMPONENT_KEYS = [
+const TYPOGRAPHY_KEYS = [
     ...BASE_COMPONENT_KEYS,
     ...FONT_KEYS
 ];
 // Button keys
 const BUTTON_KEYS = [
-    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...TYPOGRAPHY_KEYS,
     ...SHAPE_KEYS,
     ...BORDER_KEYS,
     ...SHADOW_KEYS,
@@ -130,7 +130,7 @@ const COL_KEYS = [
 ];
 // Card keys
 const CARD_KEYS = [
-    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...TYPOGRAPHY_KEYS,
     ...GAP_KEYS,
     ...SHARP_KEYS,
     ...ROUNDED_KEYS,
@@ -157,7 +157,7 @@ const STACK_KEYS = [
 ];
 // Badge keys
 const BADGE_KEYS = [
-    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...TYPOGRAPHY_KEYS,
     ...SHAPE_KEYS,
     ...VARIANT_KEYS,
     ...SHADOW_KEYS,
@@ -169,7 +169,7 @@ const BADGE_KEYS = [
 ];
 // Chip keys
 const CHIP_KEYS = [
-    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...TYPOGRAPHY_KEYS,
     ...SHAPE_KEYS,
     ...VARIANT_KEYS,
     ...SHADOW_KEYS,
@@ -3409,12 +3409,22 @@ RingTheme.defaultClasses = {
     },
 };
 
-class PxTheme extends BaseTheme {
+class PaddingTheme extends BaseTheme {
     constructor(initial) {
         super();
+        this.defaultClasses = {
+            padding: {
+                xs: "",
+                sm: "",
+                md: "",
+                lg: "",
+                xl: ""
+            },
+            noPadding: ""
+        };
         PADDING_KEYS.forEach((key) => {
             var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : PxTheme.defaultClasses[key];
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : this.defaultClasses[key];
         });
     }
     getClasses(props, defaults) {
@@ -3423,41 +3433,38 @@ class PxTheme extends BaseTheme {
         return [typeof this[key] === 'string' ? this[key] : this[key][size]];
     }
 }
-PxTheme.defaultClasses = {
-    padding: {
-        xs: "px-2",
-        sm: "px-4",
-        md: "px-6",
-        lg: "px-8",
-        xl: "px-10"
-    },
-    noPadding: "px-0"
-};
 
-class PyTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        PADDING_KEYS.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : PyTheme.defaultClasses[key];
-        });
+class PxTheme extends PaddingTheme {
+    constructor() {
+        super(...arguments);
+        this.defaultClasses = {
+            padding: {
+                xs: "px-2",
+                sm: "px-4",
+                md: "px-6",
+                lg: "px-8",
+                xl: "px-10"
+            },
+            noPadding: "px-0"
+        };
     }
-    getClasses(props, defaults) {
-        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
-        const key = pickFirstTruthyKey(props, defaults, PADDING_KEYS) || 'noPadding';
-        return [typeof this[key] === 'string' ? this[key] : this[key][size]];
+}
+
+class PyTheme extends PaddingTheme {
+    constructor() {
+        super(...arguments);
+        this.defaultClasses = {
+            padding: {
+                xs: "py-2",
+                sm: "py-4",
+                md: "py-6",
+                lg: "py-8",
+                xl: "py-10"
+            },
+            noPadding: "py-0"
+        };
     }
 }
-PyTheme.defaultClasses = {
-    padding: {
-        xs: "py-2",
-        sm: "py-4",
-        md: "py-6",
-        lg: "py-8",
-        xl: "py-10"
-    },
-    noPadding: "py-0"
-};
 
 class TextAppearanceTheme extends BaseTheme {
     constructor(config) {
@@ -4073,6 +4080,22 @@ const mergeDefaults = (baseDefaults, overrideDefaults) => {
     return finalDefaults;
 };
 
+class PlTheme extends PaddingTheme {
+    constructor() {
+        super(...arguments);
+        this.defaultClasses = {
+            padding: {
+                xs: "pl-2",
+                sm: "pl-4",
+                md: "pl-6",
+                lg: "pl-8",
+                xl: "pl-10"
+            },
+            noPadding: "pl-0"
+        };
+    }
+}
+
 const typographyThemeDefaults = {
     md: true,
     default: true,
@@ -4121,7 +4144,16 @@ const linkTheme = createTypographyComponentTheme("a", "hover:underline w-fit", t
 // List item specific theme
 const listItemTheme = createTypographyComponentTheme("li");
 // List specific theme
-const listTheme = createTypographyComponentTheme("ul", "list-disc list-inside");
+const listTheme = new ComponentTheme("ul", "list-disc list-inside", {
+    size: {
+        text: new SizeTheme(textSizeClasses),
+        paddingLeft: new PlTheme(),
+    },
+    appearance: {
+        text: TextAppearanceTheme.createTheme({ base: textAppearanceClasses }),
+    },
+    typography: defaultTypographyTheme,
+}, typographyThemeDefaults);
 
 class DirectionTheme extends BaseTheme {
     constructor(initial) {
@@ -4524,8 +4556,8 @@ const defaultTheme = {
     title: titleTheme,
     text: textTheme,
     link: linkTheme,
-    listItem: listItemTheme,
     list: listTheme,
+    listItem: listItemTheme,
 };
 const ThemeContext = createContext(defaultTheme);
 function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, themeOverride }) {
@@ -4625,32 +4657,32 @@ const Stack = (props) => {
 
 const PageTitle = (props) => {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.pageTitle, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+    return jsx(ThemedComponent, { theme: theme.pageTitle, propsToOmit: TYPOGRAPHY_KEYS, ...props });
 };
 const SectionTitle = (props) => {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.sectionTitle, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+    return jsx(ThemedComponent, { theme: theme.sectionTitle, propsToOmit: TYPOGRAPHY_KEYS, ...props });
 };
 const Title = (props) => {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.title, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+    return jsx(ThemedComponent, { theme: theme.title, propsToOmit: TYPOGRAPHY_KEYS, ...props });
 };
 const Text = (props) => {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.text, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+    return jsx(ThemedComponent, { theme: theme.text, propsToOmit: TYPOGRAPHY_KEYS, ...props });
 };
 const Link = (props) => {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.link, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+    return jsx(ThemedComponent, { theme: theme.link, propsToOmit: TYPOGRAPHY_KEYS, ...props });
 };
 const ListItem = (props) => {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.listItem, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+    return jsx(ThemedComponent, { theme: theme.listItem, propsToOmit: TYPOGRAPHY_KEYS, ...props });
 };
 const List = (props) => {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.list, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+    return jsx(ThemedComponent, { theme: theme.list, propsToOmit: TYPOGRAPHY_KEYS, ...props });
 };
 
-export { BADGE_KEYS, BASE_COMPONENT_KEYS, BG_APPEARANCE_KEYS, BORDER_KEYS, BREAKPOINT_KEYS, BUTTON_KEYS, Badge, Button, CARD_KEYS, CHIP_KEYS, COL_KEYS, COMPONENT_KEYS, CONTAINER_KEYS, Card, Chip, Col, Container, DIRECTION_REVERSE_KEYS, DISPLAY_KEYS, DIVIDER_KEYS, Divider, EXCLUSIVE_KEY_GROUPS, FLEX_DIRECTION_KEYS, FONT_FAMILY_KEYS, FONT_KEYS, FONT_STYLE_KEYS, FONT_WEIGHT_KEYS, GAP_KEYS, GRID_KEYS, Grid3, Grid4, HIDE_KEYS, ITEMS_KEYS, JUSTIFY_KEYS, Link, List, ListItem, MODE_KEYS, OVERFLOW_KEYS, PADDING_KEYS, PILL_KEYS, POSITION_KEYS, PageTitle, RING_KEYS, ROUNDED_KEYS, ROW_KEYS, Row, SECTION_KEYS, SHADOW_KEYS, SHAPE_KEYS, SHARP_KEYS, SIZE_KEYS, STACK_KEYS, Section, SectionTitle, Stack, TEXT_ALIGN_KEYS, TEXT_APPEARANCE_KEYS, TEXT_DECORATION_KEYS, TEXT_TRANSFORM_KEYS, TYPOGRAPHY_COMPONENT_KEYS, Text, ThemeProvider, Title, VARIANT_KEYS, WRAP_KEYS, defaultTheme, useTheme };
+export { BADGE_KEYS, BASE_COMPONENT_KEYS, BG_APPEARANCE_KEYS, BORDER_KEYS, BREAKPOINT_KEYS, BUTTON_KEYS, Badge, Button, CARD_KEYS, CHIP_KEYS, COL_KEYS, COMPONENT_KEYS, CONTAINER_KEYS, Card, Chip, Col, Container, DIRECTION_REVERSE_KEYS, DISPLAY_KEYS, DIVIDER_KEYS, Divider, EXCLUSIVE_KEY_GROUPS, FLEX_DIRECTION_KEYS, FONT_FAMILY_KEYS, FONT_KEYS, FONT_STYLE_KEYS, FONT_WEIGHT_KEYS, GAP_KEYS, GRID_KEYS, Grid3, Grid4, HIDE_KEYS, ITEMS_KEYS, JUSTIFY_KEYS, Link, List, ListItem, MODE_KEYS, OVERFLOW_KEYS, PADDING_KEYS, PILL_KEYS, POSITION_KEYS, PageTitle, RING_KEYS, ROUNDED_KEYS, ROW_KEYS, Row, SECTION_KEYS, SHADOW_KEYS, SHAPE_KEYS, SHARP_KEYS, SIZE_KEYS, STACK_KEYS, Section, SectionTitle, Stack, TEXT_ALIGN_KEYS, TEXT_APPEARANCE_KEYS, TEXT_DECORATION_KEYS, TEXT_TRANSFORM_KEYS, TYPOGRAPHY_KEYS, Text, ThemeProvider, Title, VARIANT_KEYS, WRAP_KEYS, defaultTheme, useTheme };
 //# sourceMappingURL=index.esm.js.map