@vaneui/ui 0.3.0-alpha.20250914103012.c204dad → 0.3.1-alpha.20250914210126.5142197

package/dist/index.esm.js

@@ -33,11 +33,25 @@ const LINK = 'link';
 const APPEARANCE_VALUES = [DEFAULT, ACCENT, PRIMARY, SECONDARY, TERTIARY, SUCCESS, DANGER, WARNING, INFO, LINK];
 
 /** Show border - adds appearance-based border styling */
-const BORDER = 'border';
+const BORDER$1 = 'border';
+/** Show top border */
+const BORDER_T = 'borderT';
+/** Show bottom border */
+const BORDER_B = 'borderB';
+/** Show left border */
+const BORDER_L = 'borderL';
+/** Show right border */
+const BORDER_R = 'borderR';
+/** Show horizontal borders (left and right) */
+const BORDER_X = 'borderX';
+/** Show vertical borders (top and bottom) */
+const BORDER_Y = 'borderY';
 /** Hide border - removes border styling (overrides appearance colors) */
 const NO_BORDER = 'noBorder';
-/** All border property values */
-const BORDER_VALUES = [BORDER, NO_BORDER];
+/** All border property values - includes all border variations and noBorder */
+const BORDER_VALUES = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_X, BORDER_Y, NO_BORDER];
+/** All border side keys (excluding noBorder since it doesn't have a CSS class) */
+const BORDER_KEYS = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_X, BORDER_Y];
 
 /** Extra-small column breakpoint - responsive grid column sizing for xs screens */
 const XS_COL = 'xsCol';
@@ -372,10 +386,12 @@ const PADDING = ['padding'];
 const BREAKPOINT = ['breakpoint'];
 /** Core visual properties including appearance colors and transparency */
 const VISUAL_CORE = ['appearance', 'transparent'];
-/** Visual decoration properties for borders, shadows, and focus rings */
-const VISUAL_DECORATION = ['border', 'shadow', 'ring', 'focusVisible'];
+/** Border properties for visual decoration */
+const BORDER = ['border'];
+/** Visual decoration properties for shadows and focus rings */
+const VISUAL_DECORATION = ['shadow', 'ring', 'focusVisible'];
 /** Layout-specific visual decoration (excluding focusVisible for non-interactive elements) */
-const VISUAL_DECORATION_LAYOUT = ['border', 'shadow', 'ring'];
+const VISUAL_DECORATION_LAYOUT = ['shadow', 'ring'];
 /** Shape properties for border radius and corner rounding */
 const SHAPE = ['shape'];
 /** Typography styling properties for text appearance and formatting */
@@ -393,6 +409,7 @@ const COMPONENT_PROPS_CATEGORY = [
     ...LAYOUT_CORE,
     ...BREAKPOINT,
     ...PADDING,
+    ...BORDER,
     ...VISUAL_DECORATION,
     ...SHAPE,
     ...VARIANT,
@@ -406,7 +423,7 @@ const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent',
 const ComponentKeys = {
     /** Color appearance options */
     appearance: APPEARANCE_VALUES,
-    /** Border visibility: border (show) or noBorder (hide) */
+    /** Border visibility: includes all border variations and noBorder (border, borderT, borderB, etc., noBorder) */
     border: BORDER_VALUES,
     /** Column breakpoints for responsive grid layouts */
     breakpoint: BREAKPOINT_VALUES,
@@ -465,9 +482,9 @@ const ComponentKeys = {
 /** Complete layout category including core and flex properties */
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
 /** Complete visual category including core, decoration, and shape properties */
-const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
+const VISUAL_FULL = [...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE];
 /** Layout-specific visual category (excludes focusVisible for non-interactive elements) */
-const VISUAL_LAYOUT = [...VISUAL_CORE, ...VISUAL_DECORATION_LAYOUT, ...SHAPE];
+const VISUAL_LAYOUT = [...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION_LAYOUT, ...SHAPE];
 /** Complete typography category for text styling */
 const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE];
 /** Categories for interactive components like buttons, badges, chips */
@@ -504,14 +521,14 @@ const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
 const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT];
 /** Form component categories */
 /** Categories for checkbox form components */
-const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 /** Categories for label form components with typography support */
 const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
 /** Categories for input form components with interactive and form-specific properties */
 const INPUT_CATEGORIES = [...INTERACTIVE_CATEGORIES];
 /** Media component categories */
 /** Categories for image media components */
-const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 /** All available component names in the library */
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
     'grid2', 'grid3', 'grid4', 'grid5', 'grid6', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img', 'input'];
@@ -549,10 +566,15 @@ const ComponentCategories = {
 class HideTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Hide element on extra-small screens and below */
         this.xsHide = "max-xs:hidden";
+        /** Hide element on small screens and below */
         this.smHide = "max-sm:hidden";
+        /** Hide element on medium screens and below */
         this.mdHide = "max-md:hidden";
+        /** Hide element on large screens and below */
         this.lgHide = "max-lg:hidden";
+        /** Hide element on extra-large screens and below */
         this.xlHide = "max-xl:hidden";
     }
     getClasses(extractedKeys) {
@@ -563,10 +585,15 @@ class HideTheme extends BaseTheme {
 class ItemsTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Align flex items to the start of the cross axis */
         this.itemsStart = "items-start";
+        /** Align flex items to the end of the cross axis */
         this.itemsEnd = "items-end";
+        /** Center flex items along the cross axis */
         this.itemsCenter = "items-center";
+        /** Align flex items along their baseline */
         this.itemsBaseline = "items-baseline";
+        /** Stretch flex items to fill the cross axis */
         this.itemsStretch = "items-stretch";
     }
     getClasses(extractedKeys) {
@@ -577,13 +604,21 @@ class ItemsTheme extends BaseTheme {
 class JustifyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Pack flex items toward the start of the main axis */
         this.justifyStart = "justify-start";
+        /** Pack flex items toward the end of the main axis */
         this.justifyEnd = "justify-end";
+        /** Pack flex items around the center of the main axis */
         this.justifyCenter = "justify-center";
+        /** Distribute flex items with equal space between them */
         this.justifyBetween = "justify-between";
+        /** Distribute flex items with equal space around them */
         this.justifyAround = "justify-around";
+        /** Distribute flex items with equal space around them, including edges */
         this.justifyEvenly = "justify-evenly";
+        /** Stretch flex items to fill the main axis */
         this.justifyStretch = "justify-stretch";
+        /** Align flex items along their baseline on the main axis */
         this.justifyBaseline = "justify-baseline";
     }
     getClasses(extractedKeys) {
@@ -594,10 +629,15 @@ class JustifyTheme extends BaseTheme {
 class PositionTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Relative positioning - positioned relative to its normal position */
         this.relative = "relative";
+        /** Absolute positioning - positioned relative to its closest positioned ancestor */
         this.absolute = "absolute";
+        /** Fixed positioning - positioned relative to the viewport */
         this.fixed = "fixed";
+        /** Sticky positioning - toggles between relative and fixed based on scroll position */
         this.sticky = "sticky";
+        /** Static positioning - default positioning, not affected by top/left/right/bottom */
         this.static = "static";
     }
     getClasses(extractedKeys) {
@@ -608,7 +648,9 @@ class PositionTheme extends BaseTheme {
 class FontStyleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Italic font style - slanted text */
         this.italic = "italic";
+        /** Normal font style - upright text (not italic) */
         this.notItalic = "not-italic";
     }
     getClasses(extractedKeys) {
@@ -619,8 +661,11 @@ class FontStyleTheme extends BaseTheme {
 class FontFamilyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Sans-serif font family - clean, modern fonts without serifs */
         this.sans = "font-sans";
+        /** Serif font family - traditional fonts with serifs */
         this.serif = "font-serif";
+        /** Monospace font family - fixed-width fonts for code and data */
         this.mono = "font-mono";
     }
     getClasses(extractedKeys) {
@@ -631,14 +676,23 @@ class FontFamilyTheme extends BaseTheme {
 class FontWeightTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Thin font weight (100) - lightest weight */
         this.thin = "font-thin";
+        /** Extra-light font weight (200) - very light */
         this.extralight = "font-extralight";
+        /** Light font weight (300) - lighter than normal */
         this.light = "font-light";
+        /** Normal font weight (400) - default font weight */
         this.normal = "font-normal";
+        /** Medium font weight (500) - slightly bold */
         this.medium = "font-medium";
+        /** Semi-bold font weight (600) - moderately bold */
         this.semibold = "font-semibold";
+        /** Bold font weight (700) - standard bold */
         this.bold = "font-bold";
+        /** Extra-bold font weight (800) - very bold */
         this.extrabold = "font-extrabold";
+        /** Black font weight (900) - heaviest weight */
         this.black = "font-black";
     }
     getClasses(extractedKeys) {
@@ -649,9 +703,13 @@ class FontWeightTheme extends BaseTheme {
 class TextDecorationTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Underline text decoration - line below text */
         this.underline = "underline";
+        /** Line-through text decoration - strikethrough */
         this.lineThrough = "line-through";
+        /** Remove underline text decoration */
         this.noUnderline = "no-underline";
+        /** Overline text decoration - line above text */
         this.overline = "overline";
     }
     getClasses(extractedKeys) {
@@ -662,9 +720,13 @@ class TextDecorationTheme extends BaseTheme {
 class TextTransformTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Transform text to UPPERCASE */
         this.uppercase = "uppercase";
+        /** Transform text to lowercase */
         this.lowercase = "lowercase";
+        /** Capitalize First Letter Of Each Word */
         this.capitalize = "capitalize";
+        /** Normal case - no text transformation */
         this.normalCase = "normal-case";
     }
     getClasses(extractedKeys) {
@@ -675,9 +737,13 @@ class TextTransformTheme extends BaseTheme {
 class TextAlignTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Left-align text */
         this.textLeft = "text-left";
+        /** Center-align text */
         this.textCenter = "text-center";
+        /** Right-align text */
         this.textRight = "text-right";
+        /** Justify text - stretch lines to fill width */
         this.textJustify = "text-justify";
     }
     getClasses(extractedKeys) {
@@ -688,16 +754,27 @@ class TextAlignTheme extends BaseTheme {
 class DisplayTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Inline display - element flows with text */
         this.inline = "inline";
+        /** Block display - element takes full width */
         this.block = "block";
+        /** Inline-block display - element flows with text but can have width/height */
         this.inlineBlock = "inline-block";
+        /** Flex display - creates a flex container */
         this.flex = "flex";
+        /** Inline-flex display - creates an inline flex container */
         this.inlineFlex = "inline-flex";
+        /** Grid display - creates a grid container */
         this.grid = "grid";
+        /** Inline-grid display - creates an inline grid container */
         this.inlineGrid = "inline-grid";
+        /** Contents display - element's children behave as if they are direct children of the parent */
         this.contents = "contents";
+        /** Table display - element behaves like a table */
         this.table = "table";
+        /** Table-cell display - element behaves like a table cell */
         this.tableCell = "table-cell";
+        /** Hidden display - element is completely removed from layout */
         this.hidden = "hidden";
     }
     getClasses(extractedKeys) {
@@ -3419,20 +3496,35 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 class OverflowTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Auto overflow - adds scrollbars when content overflows */
         this.overflowAuto = 'overflow-auto';
+        /** Hidden overflow - clips content that overflows */
         this.overflowHidden = 'overflow-hidden';
+        /** Clip overflow - clips content without scrollbars */
         this.overflowClip = 'overflow-clip';
+        /** Visible overflow - content overflows and remains visible */
         this.overflowVisible = 'overflow-visible';
+        /** Scroll overflow - always shows scrollbars */
         this.overflowScroll = 'overflow-scroll';
+        /** Auto horizontal overflow - adds horizontal scrollbar when needed */
         this.overflowXAuto = 'overflow-x-auto';
+        /** Auto vertical overflow - adds vertical scrollbar when needed */
         this.overflowYAuto = 'overflow-y-auto';
+        /** Hidden horizontal overflow - clips content horizontally */
         this.overflowXHidden = 'overflow-x-hidden';
+        /** Hidden vertical overflow - clips content vertically */
         this.overflowYHidden = 'overflow-y-hidden';
+        /** Clip horizontal overflow - clips content horizontally without scrollbars */
         this.overflowXClip = 'overflow-x-clip';
+        /** Clip vertical overflow - clips content vertically without scrollbars */
         this.overflowYClip = 'overflow-y-clip';
+        /** Visible horizontal overflow - content overflows horizontally and remains visible */
         this.overflowXVisible = 'overflow-x-visible';
+        /** Visible vertical overflow - content overflows vertically and remains visible */
         this.overflowYVisible = 'overflow-y-visible';
+        /** Scroll horizontal overflow - always shows horizontal scrollbar */
         this.overflowXScroll = 'overflow-x-scroll';
+        /** Scroll vertical overflow - always shows vertical scrollbar */
         this.overflowYScroll = 'overflow-y-scroll';
     }
     getClasses(extractedKeys) {
@@ -3504,6 +3596,9 @@ class ComponentTheme {
                 extractedKeys[category] = key;
             }
         }
+        // No need for border/noBorder mutual exclusion logic anymore
+        // since noBorder is now part of the border category and 
+        // pickFirstTruthyKeyByCategory handles the priority naturally
         const walk = (map) => {
             for (const key of Object.keys(map)) {
                 const node = map[key];
@@ -3559,10 +3654,15 @@ class ComponentTheme {
 class SizeTheme extends BaseTheme {
     constructor(sizeMap, useDefaultKey = true) {
         super();
+        /** Extra-small size variant */
         this.xs = "";
+        /** Small size variant */
         this.sm = "";
+        /** Medium size variant (default) */
         this.md = "";
+        /** Large size variant */
         this.lg = "";
+        /** Extra-large size variant */
         this.xl = "";
         this.useDefaultKey = useDefaultKey;
         ComponentKeys.size.forEach((key) => {
@@ -3580,10 +3680,15 @@ class SizeTheme extends BaseTheme {
 class GapTheme extends BaseTheme {
     constructor(sizeMap) {
         super();
+        /** Extra-small gap - 0.5rem spacing between items */
         this.xs = 'gap-2';
+        /** Small gap - 0.75rem spacing between items */
         this.sm = 'gap-3';
+        /** Medium gap - 1rem spacing between items */
         this.md = 'gap-4';
+        /** Large gap - 1.25rem spacing between items */
         this.lg = 'gap-5';
+        /** Extra-large gap - 1.5rem spacing between items */
         this.xl = 'gap-6';
         if (sizeMap) {
             ComponentKeys.size.forEach((key) => {
@@ -3621,7 +3726,9 @@ const layoutBorderRadiusClasses = {
 class RadiusTheme extends BaseTheme {
     constructor(roundedClasses) {
         super();
+        /** Pill shape - fully rounded corners */
         this.pill = "rounded-full";
+        /** Sharp shape - no rounded corners */
         this.sharp = "rounded-none";
         this.rounded = roundedClasses;
     }
@@ -3653,26 +3760,49 @@ class RadiusTheme extends BaseTheme {
 class BorderTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        this.base = "border";
-        this.hover = "";
-        this.active = "";
-        this.focus = "";
-        this.focusVisible = "";
+        /** Show border - adds appearance-based border styling */
+        this.border = "border";
+        /** Show top border */
+        this.borderT = "border-t";
+        /** Show bottom border */
+        this.borderB = "border-b";
+        /** Show left border */
+        this.borderL = "border-l";
+        /** Show right border */
+        this.borderR = "border-r";
+        /** Show horizontal borders (left and right) */
+        this.borderX = "border-x";
+        /** Show vertical borders (top and bottom) */
+        this.borderY = "border-y";
     }
     getClasses(extractedKeys) {
-        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border) === "border"
-            ? ModeKeys.mode.map((mode) => this[mode])
-            : [];
+        const classes = [];
+        // Now all border variations and noBorder come through the 'border' category
+        const borderValue = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border;
+        // If noBorder is selected, don't apply any border classes
+        if (borderValue === "noBorder") {
+            return [];
+        }
+        // Check if the border value matches any of our border keys (BORDER_KEYS excludes noBorder)
+        if (borderValue && BORDER_KEYS.includes(borderValue)) {
+            classes.push(this[borderValue]);
+        }
+        return classes;
     }
 }
 
 class RingTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base ring styling - ring with inset positioning */
         this.base = "ring ring-inset";
+        /** Ring styling on hover state */
         this.hover = "";
+        /** Ring styling on active state */
         this.active = "";
+        /** Ring styling on focus state */
         this.focus = "";
+        /** Ring styling on focus-visible state for keyboard navigation */
         this.focusVisible = "";
     }
     getClasses(extractedKeys) {
@@ -3685,10 +3815,15 @@ class RingTheme extends BaseTheme {
 class FocusVisibleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base focus-visible styling */
         this.base = "";
+        /** Focus-visible styling on hover state */
         this.hover = "";
+        /** Focus-visible styling on active state */
         this.active = "";
+        /** Focus-visible styling on focus state */
         this.focus = "";
+        /** Focus-visible styling for keyboard navigation - outline on focus */
         this.focusVisible = "focus-visible:outline-2 focus-visible:outline-offset-2";
     }
     getClasses(extractedKeys) {
@@ -3701,10 +3836,15 @@ class FocusVisibleTheme extends BaseTheme {
 class PaddingTheme extends BaseTheme {
     constructor(initial) {
         super();
+        /** Extra-small padding - varies by component implementation */
         this.xs = "";
+        /** Small padding - varies by component implementation */
         this.sm = "";
+        /** Medium padding - varies by component implementation */
         this.md = "";
+        /** Large padding - varies by component implementation */
         this.lg = "";
+        /** Extra-large padding - varies by component implementation */
         this.xl = "";
         if (initial) {
             ComponentKeys.size.forEach((key) => {
@@ -3724,6 +3864,7 @@ class PaddingTheme extends BaseTheme {
     }
 }
 
+/** Horizontal padding theme - controls left and right padding */
 class PxTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -3738,6 +3879,7 @@ class PxTheme extends PaddingTheme {
     }
 }
 
+/** Vertical padding theme - controls top and bottom padding */
 class PyTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -3762,8 +3904,17 @@ class AppearanceTheme extends BaseTheme {
     }
     getClasses(extractedKeys) {
         var _a;
-        if (this.category === 'border' && (extractedKeys.border === 'noBorder' || extractedKeys.border === undefined)) {
-            return [];
+        if (this.category === 'border') {
+            // If noBorder is selected from the border category, don't apply appearance colors
+            if (extractedKeys.border === NO_BORDER) {
+                return [];
+            }
+            // Only apply appearance colors if any border prop is set (and not noBorder)
+            const hasBorderProps = extractedKeys.border !== undefined && extractedKeys.border !== NO_BORDER;
+            // If no border props are set, don't apply appearance colors
+            if (!hasBorderProps) {
+                return [];
+            }
         }
         if (this.category === 'ring' && (extractedKeys.ring === 'noRing' || extractedKeys.ring === undefined)) {
             return [];
@@ -4306,8 +4457,11 @@ class GenericVariantTheme extends BaseTheme {
 class WrapTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Allow flex items to wrap to new lines */
         this.flexWrap = "flex-wrap";
+        /** Prevent flex items from wrapping - keep on single line */
         this.flexNoWrap = "flex-nowrap";
+        /** Allow flex items to wrap in reverse order */
         this.flexWrapReverse = "flex-wrap-reverse";
     }
     getClasses(extractedKeys) {
@@ -4318,9 +4472,13 @@ class WrapTheme extends BaseTheme {
 class DirectionTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Horizontal flex direction - items flow left to right */
         this.row = "flex-row";
+        /** Vertical flex direction - items flow top to bottom */
         this.column = "flex-col";
+        /** Reversed horizontal flex direction - items flow right to left */
         this.rowReverse = "flex-row-reverse";
+        /** Reversed vertical flex direction - items flow bottom to top */
         this.columnReverse = "flex-col-reverse";
     }
     getClasses(extractedKeys) {
@@ -4765,6 +4923,7 @@ const mergeDefaults = (baseDefaults, overrideDefaults) => {
     return finalDefaults;
 };
 
+/** Left padding theme - controls left padding only */
 class PlTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -4782,7 +4941,9 @@ class PlTheme extends PaddingTheme {
 class ListStyleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Disc list style - bullet points for unordered lists */
         this.disc = 'list-disc';
+        /** Decimal list style - numbers for ordered lists */
         this.decimal = 'list-decimal';
     }
     getClasses(extractedKeys) {
@@ -4874,10 +5035,15 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
 class BreakpointTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Switch to column layout on extra-small screens and below */
         this.xsCol = "max-xs:flex-col";
+        /** Switch to column layout on small screens and below */
         this.smCol = "max-sm:flex-col";
+        /** Switch to column layout on medium screens and below */
         this.mdCol = "max-md:flex-col";
+        /** Switch to column layout on large screens and below */
         this.lgCol = "max-lg:flex-col";
+        /** Switch to column layout on extra-large screens and below */
         this.xlCol = "max-xl:flex-col";
     }
     getClasses(extractedKeys) {
@@ -5517,5 +5683,5 @@ const List = forwardRef(function List(props, ref) {
     return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
 });
 
-export { ABSOLUTE, ACCENT, ACTIVE, APPEARANCE_CATEGORY, APPEARANCE_VALUES, BADGE_CATEGORIES, BASE, BLACK, BLOCK, BOLD, BORDER, BORDER_VALUES, BREAKPOINT, BREAKPOINT_VALUES, BUTTON_CATEGORIES, Badge, Button, CAPITALIZE, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COLUMN, COLUMN_REVERSE, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, CONTENTS, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DANGER, DECIMAL, DEFAULT, DISC, DISPLAY_VALUES, DIVIDER_CATEGORIES, Divider, EXTRABOLD, EXTRALIGHT, FILLED, FIXED, FLEX, FLEX_DIRECTION_VALUES, FLEX_NO_WRAP, FLEX_WRAP, FLEX_WRAP_REVERSE, FOCUS, FOCUS_VISIBLE, FOCUS_VISIBLE_OUTLINE, FOCUS_VISIBLE_VALUES, FONT_FAMILY_VALUES, FONT_STYLE_VALUES, FONT_WEIGHT_VALUES, GAP, GAP_VALUES, GRID, GRID_CATEGORIES, Grid2, Grid3, Grid4, Grid5, Grid6, HIDDEN, HIDE_VALUES, HOVER, IMG_CATEGORIES, INFO, INLINE, INLINE_BLOCK, INLINE_FLEX, INLINE_GRID, INPUT_CATEGORIES, INTERACTIVE_CATEGORIES, ITALIC, ITEMS_BASELINE, ITEMS_CENTER, ITEMS_END, ITEMS_START, ITEMS_STRETCH, ITEMS_VALUES, Img, Input, JUSTIFY_AROUND, JUSTIFY_BASELINE, JUSTIFY_BETWEEN, JUSTIFY_CENTER, JUSTIFY_END, JUSTIFY_EVENLY, JUSTIFY_START, JUSTIFY_STRETCH, JUSTIFY_VALUES, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LG, LG_COL, LG_HIDE, LIGHT, LINE_THROUGH, LINK, LIST_CATEGORIES, LIST_STYLE, LIST_STYLE_VALUES, LOWERCASE, Label, Link, List, ListItem, MD, MD_COL, MD_HIDE, MEDIUM, MODE_VALUES, MONO, ModeKeys, NORMAL, NORMAL_CASE, NOT_ITALIC, NO_BORDER, NO_FOCUS_VISIBLE_OUTLINE, NO_GAP, NO_PADDING, NO_RING, NO_SHADOW, NO_UNDERLINE, OUTLINE, OVERFLOW_AUTO, OVERFLOW_CLIP, OVERFLOW_HIDDEN, OVERFLOW_SCROLL, OVERFLOW_VALUES, OVERFLOW_VISIBLE, OVERFLOW_X_AUTO, OVERFLOW_X_CLIP, OVERFLOW_X_HIDDEN, OVERFLOW_X_SCROLL, OVERFLOW_X_VISIBLE, OVERFLOW_Y_AUTO, OVERFLOW_Y_CLIP, OVERFLOW_Y_HIDDEN, OVERFLOW_Y_SCROLL, OVERFLOW_Y_VISIBLE, OVERLINE, PADDING, PADDING_VALUES, PILL, POSITION_VALUES, PRIMARY, PageTitle, RELATIVE, REVERSE, REVERSE_VALUES, RING, RING_VALUES, ROUNDED, ROW, ROW_CATEGORIES, ROW_REVERSE, Row, SANS, SECONDARY, SECTION_CATEGORIES, SEMIBOLD, SERIF, SHADOW, SHADOW_VALUES, SHAPE, SHAPE_VALUES, SHARP, SIZE_VALUES, SM, SM_COL, SM_HIDE, STACK_CATEGORIES, STATIC, STICKY, SUCCESS, Section, SectionTitle, Stack, TABLE, TABLE_CELL, TERTIARY, TEXT_ALIGN_VALUES, TEXT_CENTER, TEXT_DECORATION_VALUES, TEXT_JUSTIFY, TEXT_LEFT, TEXT_RIGHT, TEXT_TRANSFORM_VALUES, THIN, TRANSPARENT, TRANSPARENT_VALUES, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, UNDERLINE, UPPERCASE, VARIANT, VARIANT_VALUES, VISUAL_CORE, VISUAL_DECORATION, VISUAL_DECORATION_LAYOUT, VISUAL_FULL, VISUAL_LAYOUT, WARNING, WRAP_VALUES, XL, XL_COL, XL_HIDE, XS, XS_COL, XS_HIDE, defaultTheme, themeDefaults, useTheme };
+export { ABSOLUTE, ACCENT, ACTIVE, APPEARANCE_CATEGORY, APPEARANCE_VALUES, BADGE_CATEGORIES, BASE, BLACK, BLOCK, BOLD, BORDER, BORDER_B, BORDER_KEYS, BORDER_L, BORDER_R, BORDER_T, BORDER_VALUES, BORDER_X, BORDER_Y, BREAKPOINT, BREAKPOINT_VALUES, BUTTON_CATEGORIES, Badge, Button, CAPITALIZE, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COLUMN, COLUMN_REVERSE, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, CONTENTS, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DANGER, DECIMAL, DEFAULT, DISC, DISPLAY_VALUES, DIVIDER_CATEGORIES, Divider, EXTRABOLD, EXTRALIGHT, FILLED, FIXED, FLEX, FLEX_DIRECTION_VALUES, FLEX_NO_WRAP, FLEX_WRAP, FLEX_WRAP_REVERSE, FOCUS, FOCUS_VISIBLE, FOCUS_VISIBLE_OUTLINE, FOCUS_VISIBLE_VALUES, FONT_FAMILY_VALUES, FONT_STYLE_VALUES, FONT_WEIGHT_VALUES, GAP, GAP_VALUES, GRID, GRID_CATEGORIES, Grid2, Grid3, Grid4, Grid5, Grid6, HIDDEN, HIDE_VALUES, HOVER, IMG_CATEGORIES, INFO, INLINE, INLINE_BLOCK, INLINE_FLEX, INLINE_GRID, INPUT_CATEGORIES, INTERACTIVE_CATEGORIES, ITALIC, ITEMS_BASELINE, ITEMS_CENTER, ITEMS_END, ITEMS_START, ITEMS_STRETCH, ITEMS_VALUES, Img, Input, JUSTIFY_AROUND, JUSTIFY_BASELINE, JUSTIFY_BETWEEN, JUSTIFY_CENTER, JUSTIFY_END, JUSTIFY_EVENLY, JUSTIFY_START, JUSTIFY_STRETCH, JUSTIFY_VALUES, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LG, LG_COL, LG_HIDE, LIGHT, LINE_THROUGH, LINK, LIST_CATEGORIES, LIST_STYLE, LIST_STYLE_VALUES, LOWERCASE, Label, Link, List, ListItem, MD, MD_COL, MD_HIDE, MEDIUM, MODE_VALUES, MONO, ModeKeys, NORMAL, NORMAL_CASE, NOT_ITALIC, NO_BORDER, NO_FOCUS_VISIBLE_OUTLINE, NO_GAP, NO_PADDING, NO_RING, NO_SHADOW, NO_UNDERLINE, OUTLINE, OVERFLOW_AUTO, OVERFLOW_CLIP, OVERFLOW_HIDDEN, OVERFLOW_SCROLL, OVERFLOW_VALUES, OVERFLOW_VISIBLE, OVERFLOW_X_AUTO, OVERFLOW_X_CLIP, OVERFLOW_X_HIDDEN, OVERFLOW_X_SCROLL, OVERFLOW_X_VISIBLE, OVERFLOW_Y_AUTO, OVERFLOW_Y_CLIP, OVERFLOW_Y_HIDDEN, OVERFLOW_Y_SCROLL, OVERFLOW_Y_VISIBLE, OVERLINE, PADDING, PADDING_VALUES, PILL, POSITION_VALUES, PRIMARY, PageTitle, RELATIVE, REVERSE, REVERSE_VALUES, RING, RING_VALUES, ROUNDED, ROW, ROW_CATEGORIES, ROW_REVERSE, Row, SANS, SECONDARY, SECTION_CATEGORIES, SEMIBOLD, SERIF, SHADOW, SHADOW_VALUES, SHAPE, SHAPE_VALUES, SHARP, SIZE_VALUES, SM, SM_COL, SM_HIDE, STACK_CATEGORIES, STATIC, STICKY, SUCCESS, Section, SectionTitle, Stack, TABLE, TABLE_CELL, TERTIARY, TEXT_ALIGN_VALUES, TEXT_CENTER, TEXT_DECORATION_VALUES, TEXT_JUSTIFY, TEXT_LEFT, TEXT_RIGHT, TEXT_TRANSFORM_VALUES, THIN, TRANSPARENT, TRANSPARENT_VALUES, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, UNDERLINE, UPPERCASE, VARIANT, VARIANT_VALUES, VISUAL_CORE, VISUAL_DECORATION, VISUAL_DECORATION_LAYOUT, VISUAL_FULL, VISUAL_LAYOUT, WARNING, WRAP_VALUES, XL, XL_COL, XL_HIDE, XS, XS_COL, XS_HIDE, defaultTheme, themeDefaults, useTheme };
 //# sourceMappingURL=index.esm.js.map