@vaneui/ui 0.2.1-alpha.20250820100624.167a145 → 0.2.1-alpha.20250820172812.236c9ec

package/dist/components/ui/theme/common/ComponentTheme.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BaseTheme } from "./baseTheme";
-import type { ComponentCategoryKey } from "../../props";
+import { ComponentCategoryKey } from "../../props";
 import { HideTheme } from "../layout/hideTheme";
 import { ItemsTheme } from "../layout/itemsTheme";
 import { JustifyTheme } from "../layout/justifyTheme";
@@ -52,7 +52,7 @@ export declare class ComponentTheme<P extends ComponentProps, TTheme extends obj
     readonly base: string;
     readonly themes: TTheme;
     defaults: Partial<P>;
-    extraClasses: Record<string, string>;
+    extraClasses: Partial<Record<keyof P, string>>;
     private readonly categories;
     private readonly tagFunction?;
     constructor(tag: React.ElementType, base: string, themes: DeepPartial<TTheme>, defaults: Partial<P> | undefined, categories: readonly ComponentCategoryKey[], tagFunction?: (props: P, defaults: Partial<P>) => React.ElementType);

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

@@ -0,0 +1,5 @@
+import { ThemeDefaults } from '../../themeContext';
+/**
+ * Default props for all components using the existing ThemeDefaults type
+ */
+export declare const themeDefaults: ThemeDefaults;

package/dist/index.d.ts

@@ -10,4 +10,5 @@ export { Section, Container, Col, Row, Stack, Grid2, Grid3, Grid4, Card } from "
 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';
+export { themeDefaults } from './components/ui/theme/defaults';
 export * from "./components/ui/props/index";

package/dist/index.esm.js

@@ -3158,7 +3158,10 @@ class ComponentTheme {
         const defaults = this.defaults;
         const extractedKeys = {};
         for (const category of this.categories) {
-            extractedKeys[category] = pickFirstTruthyKeyByCategory(componentProps, defaults, category);
+            const key = pickFirstTruthyKeyByCategory(componentProps, defaults, category);
+            if (key !== undefined) {
+                extractedKeys[category] = key;
+            }
         }
         const walk = (map) => {
             for (const key of Object.keys(map)) {
@@ -3175,7 +3178,11 @@ class ComponentTheme {
         // Apply extra classes based on extracted keys
         for (const [key, value] of Object.entries(extractedKeys)) {
             if (value && this.extraClasses[value]) {
-                classes.push(...this.extraClasses[value].split(/\s+/));
+                const existingClasses = this.extraClasses[value];
+                if (existingClasses !== undefined) {
+                    const cs = existingClasses.split(/\s+/);
+                    classes.push(...cs);
+                }
             }
         }
         return classes.filter(Boolean);
@@ -3988,6 +3995,223 @@ DirectionTheme.defaultClasses = {
     columnReverse: "flex-col-reverse",
 };
 
+/**
+ * Default props for all components using the existing ThemeDefaults type
+ */
+const themeDefaults = {
+    button: {
+        md: true,
+        inlineFlex: true,
+        itemsCenter: true,
+        justifyCenter: true,
+        outline: true,
+        default: true,
+        rounded: true,
+        sans: true,
+        semibold: true,
+        textCenter: true,
+        noBorder: true,
+        gap: true,
+        padding: true,
+        ring: true,
+        shadow: true,
+    },
+    card: {
+        md: true,
+        flex: true,
+        default: true,
+        rounded: true,
+        normal: true,
+        column: true,
+        border: true,
+        gap: true,
+        padding: true,
+    },
+    chip: {
+        md: true,
+        inlineFlex: true,
+        itemsCenter: true,
+        outline: true,
+        secondary: true,
+        rounded: true,
+        mono: true,
+        normal: true,
+        noShadow: true,
+        padding: true,
+        gap: true,
+        ring: true,
+    },
+    badge: {
+        md: true,
+        default: true,
+        inlineFlex: true,
+        outline: true,
+        pill: true,
+        sans: true,
+        semibold: true,
+        uppercase: true,
+        noShadow: true,
+        itemsCenter: true,
+        padding: true,
+        gap: true,
+        ring: true,
+    },
+    container: {
+        noRing: true,
+        flex: true,
+        md: true,
+        itemsCenter: true,
+        gap: true,
+        sharp: true,
+    },
+    section: {
+        md: true,
+        flex: true,
+        default: true,
+        itemsStart: true,
+        gap: true,
+        padding: true,
+        noBorder: true,
+        noRing: true,
+        noShadow: true,
+        sharp: true,
+    },
+    stack: {
+        md: true,
+        flex: true,
+        column: true,
+        flexWrap: true,
+        gap: true,
+        padding: true,
+        noBorder: true,
+        noRing: true,
+        sharp: true,
+    },
+    row: {
+        row: true,
+        md: true,
+        flex: true,
+        itemsCenter: true,
+        gap: true,
+        noBorder: true,
+        noRing: true,
+        sharp: true,
+    },
+    col: {
+        column: true,
+        md: true,
+        flex: true,
+        gap: true,
+        noBorder: true,
+        noRing: true,
+        sharp: true,
+    },
+    grid2: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
+    grid3: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
+    grid4: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
+    divider: {
+        md: true,
+        default: true,
+        noPadding: true,
+    },
+    label: {
+        md: true,
+        flex: true,
+        gap: true,
+        default: true,
+        sans: true,
+        medium: true,
+    },
+    img: {
+        rounded: true,
+    },
+    code: {
+        md: true,
+        mono: true,
+        semibold: true,
+        rounded: true,
+        inline: true,
+        padding: true,
+        default: true,
+        ring: true,
+    },
+    text: {
+        md: true,
+        default: true,
+        sans: true,
+        textLeft: true,
+    },
+    title: {
+        md: true,
+        default: true,
+        sans: true,
+        semibold: true,
+        textLeft: true,
+    },
+    pageTitle: {
+        md: true,
+        default: true,
+        sans: true,
+        semibold: true,
+        textLeft: true,
+    },
+    sectionTitle: {
+        md: true,
+        default: true,
+        sans: true,
+        semibold: true,
+        textLeft: true,
+    },
+    link: {
+        underline: true,
+        link: true,
+        sans: true,
+    },
+    listItem: {
+        sans: true,
+    },
+    list: {
+        md: true,
+        default: true,
+        sans: true,
+        normal: true,
+        padding: true,
+        disc: true,
+    },
+    checkbox: {
+        input: {
+            md: true,
+            default: true,
+            border: true,
+            rounded: true,
+            noRing: true,
+            noShadow: true,
+            filled: true,
+        },
+        check: {
+            default: true,
+        },
+        wrapper: {
+            md: true,
+            inlineGrid: true,
+            itemsCenter: true,
+            justifyCenter: true,
+        },
+    },
+};
+
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
         px: new PxTheme({
@@ -4013,23 +4237,7 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    inlineFlex: true,
-    itemsCenter: true,
-    justifyCenter: true,
-    outline: true,
-    default: true,
-    rounded: true,
-    sans: true,
-    semibold: true,
-    textCenter: true,
-    noBorder: true,
-    gap: true,
-    padding: true,
-    ring: true,
-    shadow: true,
-}, BUTTON_CATEGORIES, (props, defaults) => {
+}, themeDefaults.button, BUTTON_CATEGORIES, (props, defaults) => {
     // Determine tag based on href prop
     return props.href ? "a" : "button";
 });
@@ -4057,21 +4265,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    default: true,
-    inlineFlex: true,
-    outline: true,
-    pill: true,
-    sans: true,
-    semibold: true,
-    uppercase: true,
-    noShadow: true,
-    itemsCenter: true,
-    padding: true,
-    gap: true,
-    ring: true,
-}, BADGE_CATEGORIES, (props, defaults) => {
+}, themeDefaults.badge, BADGE_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "span";
 });
 
@@ -4098,20 +4292,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    inlineFlex: true,
-    itemsCenter: true,
-    outline: true,
-    secondary: true,
-    rounded: true,
-    mono: true,
-    normal: true,
-    noShadow: true,
-    padding: true,
-    gap: true,
-    ring: true,
-}, CHIP_CATEGORIES, (props, defaults) => {
+}, themeDefaults.chip, CHIP_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "span";
 });
 
@@ -4138,16 +4319,7 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    inline: true,
-    outline: true,
-    default: true,
-    rounded: true,
-    mono: true,
-    padding: true,
-    gap: true,
-    ring: true,
-}, CODE_CATEGORIES);
+}, themeDefaults.code, CODE_CATEGORIES);
 
 const isObject = (item) => {
     return item !== null && typeof item === 'object' && !Array.isArray(item);
@@ -4266,12 +4438,7 @@ class ListStyleTheme extends BaseTheme {
     }
 }
 
-const typographyThemeDefaults = {
-    md: true,
-    default: true,
-    sans: true,
-};
-const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = typographyThemeDefaults) => {
+const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = {}) => {
     return new ComponentTheme(tag, base, {
         size: {
             text: new SizeTheme(textSizeMap),
@@ -4293,7 +4460,7 @@ const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracki
     md: "text-5xl max-lg:text-4xl max-md:text-3xl",
     lg: "text-6xl max-lg:text-5xl max-md:text-4xl",
     xl: "text-7xl max-lg:text-6xl max-md:text-5xl"
-}, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+}, mergeDefaults(themeDefaults.pageTitle, { semibold: true }));
 // Section title specific theme
 const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", {
     xs: "text-2xl max-lg:text-xl  max-md:text-lg",
@@ -4301,11 +4468,11 @@ const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-f
     md: "text-4xl max-lg:text-3xl max-md:text-2xl",
     lg: "text-5xl max-lg:text-4xl max-md:text-3xl",
     xl: "text-6xl max-lg:text-5xl max-md:text-4xl"
-}, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+}, mergeDefaults(themeDefaults.sectionTitle, { semibold: true }));
 // Title specific theme
-const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", { xs: "text-lg", sm: "text-xl", md: "text-2xl", lg: "text-3xl", xl: "text-4xl" }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", { xs: "text-lg", sm: "text-xl", md: "text-2xl", lg: "text-3xl", xl: "text-4xl" }, mergeDefaults(themeDefaults.title, { semibold: true }));
 // Text specific theme
-const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses);
+const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, themeDefaults.text);
 // Link specific theme
 const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer", {
     size: {
@@ -4316,10 +4483,7 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
-}, {
-    link: true,
-    sans: true,
-}, TYPOGRAPHY_CATEGORIES);
+}, themeDefaults.link, TYPOGRAPHY_CATEGORIES);
 // List specific theme
 const listItemTheme = new ComponentTheme("li", "", {
     size: {
@@ -4329,8 +4493,7 @@ const listItemTheme = new ComponentTheme("li", "", {
         text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
     },
     typography: defaultTypographyTheme,
-}, {}, //keep empty to apply parent style
-TYPOGRAPHY_CATEGORIES);
+}, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
 // List specific theme
 const listTheme = new ComponentTheme("ul", "list-inside", {
     size: {
@@ -4343,14 +4506,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
     listStyle: new ListStyleTheme(),
-}, {
-    md: true,
-    default: true,
-    sans: true,
-    normal: true,
-    padding: true,
-    disc: true,
-}, LIST_CATEGORIES, (props, defaults) => {
+}, themeDefaults.list, LIST_CATEGORIES, (props, defaults) => {
     // Determine tag based on list style from props and defaults
     const componentProps = props;
     const defaultsRecord = defaults;
@@ -4417,17 +4573,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    flex: true,
-    default: true,
-    rounded: true,
-    normal: true,
-    column: true,
-    border: true,
-    gap: true,
-    padding: true,
-}, CARD_CATEGORIES, (props, defaults) => {
+}, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4450,16 +4596,7 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    row: true,
-    md: true,
-    flex: true,
-    itemsCenter: true,
-    gap: true,
-    noBorder: true,
-    noRing: true,
-    sharp: true,
-}, ROW_CATEGORIES, (props, defaults) => {
+}, themeDefaults.row, ROW_CATEGORIES, (props, defaults) => {
     // Determine tag based on href prop
     return props.href ? "a" : "div";
 });
@@ -4474,11 +4611,7 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
         }),
     },
     layout: defaultLayoutTheme,
-}, {
-    md: true,
-    default: true,
-    noPadding: true,
-}, DIVIDER_CATEGORIES);
+}, themeDefaults.divider, DIVIDER_CATEGORIES);
 
 const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
     size: {
@@ -4506,14 +4639,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    noRing: true,
-    flex: true,
-    md: true,
-    itemsCenter: true,
-    gap: true,
-    sharp: true,
-}, CONTAINER_CATEGORIES, (props, defaults) => {
+}, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4535,15 +4661,7 @@ const defaultColTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    column: true,
-    md: true,
-    flex: true,
-    gap: true,
-    noBorder: true,
-    noRing: true,
-    sharp: true,
-}, COL_CATEGORIES, (props, defaults) => {
+}, themeDefaults.col, COL_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4568,17 +4686,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    md: true,
-    flex: true,
-    column: true,
-    flexWrap: true,
-    gap: true,
-    padding: true,
-    noBorder: true,
-    noRing: true,
-    sharp: true,
-}, STACK_CATEGORIES, (props, defaults) => {
+}, themeDefaults.stack, STACK_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4616,26 +4724,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         ring: new RingTheme(),
         radius: RadiusTheme.createLayoutTheme(),
     },
-}, {
-    md: true,
-    flex: true,
-    default: true,
-    itemsStart: true,
-    gap: true,
-    padding: true,
-    noBorder: true,
-    noRing: true,
-    noShadow: true,
-    sharp: true,
-}, SECTION_CATEGORIES, (props, defaults) => {
+}, themeDefaults.section, SECTION_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
-const gridDefaults = {
-    md: true,
-    gap: true,
-    grid: true,
-};
 const gridSubThemes = {
     size: {
         gap: new GapTheme({
@@ -4655,16 +4747,17 @@ const gridSubThemes = {
         flexDirection: new DirectionTheme(),
     },
 };
-const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
+const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, 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) => {
+const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
-const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
+const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
+var _a, _b, _c;
 const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent", {
     size: {
         size: new SizeTheme({
@@ -4696,25 +4789,14 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
         check: GenericVariantTheme.createCheckedAppearanceTheme(),
         shadow: GenericVariantTheme.createUIElementShadowTheme(),
     }
-}, {
-    md: true,
-    default: true,
-    border: true,
-    rounded: true,
-    noRing: true,
-    noShadow: true,
-    filled: true,
-}, CHECKBOX_CATEGORIES);
+}, ((_a = themeDefaults.checkbox) === null || _a === void 0 ? void 0 : _a.input) || {}, CHECKBOX_CATEGORIES);
 const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-start-1 peer-checked:visible", {
     checkElement: () => jsx("svg", { viewBox: "0 0 14 14", fill: "none", children: jsx("path", { d: "M3 8L6 11L11 3.5", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", stroke: "currentColor" }) }),
     appearance: {
         color: GenericVariantTheme.createUIElementTextTheme()
     },
     layout: defaultLayoutTheme,
-}, {
-    default: true,
-    filled: true,
-}, CHECKBOX_CATEGORIES);
+}, ((_b = themeDefaults.checkbox) === null || _b === void 0 ? void 0 : _b.check) || {}, CHECKBOX_CATEGORIES);
 const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
     size: {
         height: new SizeTheme({
@@ -4726,12 +4808,7 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
         })
     },
     layout: defaultLayoutTheme,
-}, {
-    md: true,
-    inlineGrid: true,
-    itemsCenter: true,
-    justifyCenter: true,
-}, CHECKBOX_CATEGORIES);
+}, ((_c = themeDefaults.checkbox) === null || _c === void 0 ? void 0 : _c.wrapper) || {}, CHECKBOX_CATEGORIES);
 
 const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointer cursor-default", {
     size: {
@@ -4747,14 +4824,7 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
-}, {
-    md: true,
-    flex: true,
-    gap: true,
-    default: true,
-    sans: true,
-    medium: true,
-}, LABEL_CATEGORIES);
+}, themeDefaults.label, LABEL_CATEGORIES);
 
 const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to cover for better image display
 {
@@ -4769,12 +4839,7 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme()
     }
-}, {
-    rounded: true,
-    noShadow: true,
-    noBorder: true,
-    noRing: true,
-}, IMG_CATEGORIES);
+}, themeDefaults.img, IMG_CATEGORIES);
 
 const defaultTheme = {
     button: defaultButtonTheme,
@@ -5043,5 +5108,5 @@ const List = forwardRef(function List(props, ref) {
     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, Grid2, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, 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, 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, themeDefaults, useTheme };
 //# sourceMappingURL=index.esm.js.map