@pine-ds/core 3.5.2 → 3.7.0

package/dist/collection/components/pds-box/pds-box.js

@@ -22,13 +22,33 @@ export class PdsBox {
     ${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
     ${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
     ${this.auto ? 'pds-box--auto' : ''}
+    ${this.autoXs ? 'pds-box--auto-xs' : ''}
+    ${this.autoSm ? 'pds-box--auto-sm' : ''}
+    ${this.autoMd ? 'pds-box--auto-md' : ''}
+    ${this.autoLg ? 'pds-box--auto-lg' : ''}
+    ${this.autoXl ? 'pds-box--auto-xl' : ''}
     ${this.border ? 'pds-box--border' : ''}
     ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
     ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
     ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
     ${this.fit ? 'pds-box--fit' : ''}
+    ${this.fitXs ? 'pds-box--fit-xs' : ''}
+    ${this.fitSm ? 'pds-box--fit-sm' : ''}
+    ${this.fitMd ? 'pds-box--fit-md' : ''}
+    ${this.fitLg ? 'pds-box--fit-lg' : ''}
+    ${this.fitXl ? 'pds-box--fit-xl' : ''}
     ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
+    ${this.gapXs !== undefined && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
+    ${this.gapSm !== undefined && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
+    ${this.gapMd !== undefined && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
+    ${this.gapLg !== undefined && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
+    ${this.gapXl !== undefined && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}
     ${this.wrap ? 'pds-box--wrap' : ''}
+    ${this.wrapXs ? 'pds-box--wrap-xs' : ''}
+    ${this.wrapSm ? 'pds-box--wrap-sm' : ''}
+    ${this.wrapMd ? 'pds-box--wrap-md' : ''}
+    ${this.wrapLg ? 'pds-box--wrap-lg' : ''}
+    ${this.wrapXl ? 'pds-box--wrap-xl' : ''}
     ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
     ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
     ${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
@@ -37,9 +57,29 @@ export class PdsBox {
     ${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
     ${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
     ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
+    ${this.marginBlockStartXs !== undefined && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
+    ${this.marginBlockStartSm !== undefined && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
+    ${this.marginBlockStartMd !== undefined && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
+    ${this.marginBlockStartLg !== undefined && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
+    ${this.marginBlockStartXl !== undefined && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
     ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
+    ${this.marginInlineStartXs !== undefined && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
+    ${this.marginInlineStartSm !== undefined && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
+    ${this.marginInlineStartMd !== undefined && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
+    ${this.marginInlineStartLg !== undefined && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
+    ${this.marginInlineStartXl !== undefined && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
     ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
+    ${this.marginInlineEndXs !== undefined && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
+    ${this.marginInlineEndSm !== undefined && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
+    ${this.marginInlineEndMd !== undefined && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
+    ${this.marginInlineEndLg !== undefined && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
+    ${this.marginInlineEndXl !== undefined && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
     ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
+    ${this.marginBlockEndXs !== undefined && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
+    ${this.marginBlockEndSm !== undefined && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
+    ${this.marginBlockEndMd !== undefined && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
+    ${this.marginBlockEndLg !== undefined && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
+    ${this.marginBlockEndXl !== undefined && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
     ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
     ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
     ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
@@ -47,10 +87,35 @@ export class PdsBox {
     ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
     ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
     ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
+    ${this.paddingXs !== undefined && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
+    ${this.paddingSm !== undefined && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
+    ${this.paddingMd !== undefined && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
+    ${this.paddingLg !== undefined && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
+    ${this.paddingXl !== undefined && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
     ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
+    ${this.paddingBlockStartXs !== undefined && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
+    ${this.paddingBlockStartSm !== undefined && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
+    ${this.paddingBlockStartMd !== undefined && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
+    ${this.paddingBlockStartLg !== undefined && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
+    ${this.paddingBlockStartXl !== undefined && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
     ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
+    ${this.paddingBlockEndXs !== undefined && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
+    ${this.paddingBlockEndSm !== undefined && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
+    ${this.paddingBlockEndMd !== undefined && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
+    ${this.paddingBlockEndLg !== undefined && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
+    ${this.paddingBlockEndXl !== undefined && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
     ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
+    ${this.paddingInlineStartXs !== undefined && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
+    ${this.paddingInlineStartSm !== undefined && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
+    ${this.paddingInlineStartMd !== undefined && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
+    ${this.paddingInlineStartLg !== undefined && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
+    ${this.paddingInlineStartXl !== undefined && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
     ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
+    ${this.paddingInlineEndXs !== undefined && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
+    ${this.paddingInlineEndSm !== undefined && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
+    ${this.paddingInlineEndMd !== undefined && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
+    ${this.paddingInlineEndLg !== undefined && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
+    ${this.paddingInlineEndXl !== undefined && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
     ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
     ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
     ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
@@ -68,7 +133,7 @@ export class PdsBox {
         const normalizedBackground = normalizeColorValue(this.backgroundColor);
         const normalizedBorder = normalizeColorValue(this.borderColor);
         const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
-        return (h(Host, { key: '6a5c3cc51052bbc735c7dbd60ff57f2a43070a71', class: boxClasses, style: boxInlineStyles }));
+        return (h(Host, { key: '63a5dfc55625ad930494caa79f2b26a663d9cddd', class: boxClasses, style: boxInlineStyles }));
     }
     static get is() { return "pds-box"; }
     static get originalStyleUrls() {
@@ -351,6 +416,101 @@ export class PdsBox {
                 "attribute": "auto",
                 "reflect": false
             },
+            "autoXs": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will be sized to fit its contents at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-xs",
+                "reflect": false
+            },
+            "autoSm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will be sized to fit its contents at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-sm",
+                "reflect": false
+            },
+            "autoMd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will be sized to fit its contents at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-md",
+                "reflect": false
+            },
+            "autoLg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will be sized to fit its contents at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-lg",
+                "reflect": false
+            },
+            "autoXl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will be sized to fit its contents at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-xl",
+                "reflect": false
+            },
             "backgroundColor": {
                 "type": "string",
                 "mutable": false,
@@ -494,6 +654,101 @@ export class PdsBox {
                 "attribute": "fit",
                 "reflect": false
             },
+            "fitXs": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, sets the box `max-width` to `100%` at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fit-xs",
+                "reflect": false
+            },
+            "fitSm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, sets the box `max-width` to `100%` at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fit-sm",
+                "reflect": false
+            },
+            "fitMd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, sets the box `max-width` to `100%` at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fit-md",
+                "reflect": false
+            },
+            "fitLg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, sets the box `max-width` to `100%` at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fit-lg",
+                "reflect": false
+            },
+            "fitXl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, sets the box `max-width` to `100%` at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fit-xl",
+                "reflect": false
+            },
             "gap": {
                 "type": "string",
                 "mutable": false,
@@ -522,35 +777,47 @@ export class PdsBox {
                 "attribute": "gap",
                 "reflect": false
             },
-            "wrap": {
-                "type": "boolean",
+            "gapXs": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "false"
+                            "text": "none"
                         }],
-                    "text": "Defines whether flex items are forced onto one line or can wrap onto multiple lines."
+                    "text": "Defines the spacing between the box items at the XS breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "wrap",
+                "attribute": "gap-xs",
                 "reflect": false
             },
-            "flex": {
+            "gapSm": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`none` | `grow` | `shrink` | string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -559,146 +826,1608 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines how a box will grow or shrink to fit the space available in its container.\nCan be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto')."
+                    "text": "Defines the spacing between the box items at the SM breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "flex",
+                "attribute": "gap-sm",
                 "reflect": false
             },
-            "justifyContent": {
+            "gapMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
-                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "text": "none"
                         }],
-                    "text": "Defines the horizontal alignment of the box items."
+                    "text": "Defines the spacing between the box items at the MD breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "justify-content",
+                "attribute": "gap-md",
                 "reflect": false
             },
-            "justifyContentXs": {
+            "gapLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
-                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "gap-lg",
+                "reflect": false
+            },
+            "gapXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "gap-xl",
+                "reflect": false
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether flex items are forced onto one line or can wrap onto multiple lines."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "wrap",
+                "reflect": false
+            },
+            "wrapXs": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether flex items can wrap onto multiple lines at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "wrap-xs",
+                "reflect": false
+            },
+            "wrapSm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether flex items can wrap onto multiple lines at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "wrap-sm",
+                "reflect": false
+            },
+            "wrapMd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether flex items can wrap onto multiple lines at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "wrap-md",
+                "reflect": false
+            },
+            "wrapLg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether flex items can wrap onto multiple lines at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "wrap-lg",
+                "reflect": false
+            },
+            "wrapXl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether flex items can wrap onto multiple lines at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "wrap-xl",
+                "reflect": false
+            },
+            "flex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`none` | `grow` | `shrink` | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines how a box will grow or shrink to fit the space available in its container.\nCan be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto')."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "flex",
+                "reflect": false
+            },
+            "justifyContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "start"
+                        }],
+                    "text": "Defines the horizontal alignment of the box items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "justify-content",
+                "reflect": false
+            },
+            "justifyContentXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "start"
+                        }],
+                    "text": "Defines the horizontal alignment of the box items at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "justify-content-xs",
+                "reflect": false
+            },
+            "justifyContentSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "start"
+                        }],
+                    "text": "Defines the horizontal alignment of the box items at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "justify-content-sm",
+                "reflect": false
+            },
+            "justifyContentMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "start"
+                        }],
+                    "text": "Defines the horizontal alignment of the box items at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "justify-content-md",
+                "reflect": false
+            },
+            "justifyContentLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "start"
+                        }],
+                    "text": "Defines the horizontal alignment of the box items at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "justify-content-lg",
+                "reflect": false
+            },
+            "justifyContentXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "start"
+                        }],
+                    "text": "Defines the horizontal alignment of the box items at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "justify-content-xl",
+                "reflect": false
+            },
+            "marginBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-start",
+                "reflect": false
+            },
+            "marginBlockStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-start-xs",
+                "reflect": false
+            },
+            "marginBlockStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-start-sm",
+                "reflect": false
+            },
+            "marginBlockStartMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-start-md",
+                "reflect": false
+            },
+            "marginBlockStartLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-start-lg",
+                "reflect": false
+            },
+            "marginBlockStartXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-start-xl",
+                "reflect": false
+            },
+            "marginInlineStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-start",
+                "reflect": false
+            },
+            "marginInlineStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-start-xs",
+                "reflect": false
+            },
+            "marginInlineStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-start-sm",
+                "reflect": false
+            },
+            "marginInlineStartMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-start-md",
+                "reflect": false
+            },
+            "marginInlineStartLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-start-lg",
+                "reflect": false
+            },
+            "marginInlineStartXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-start-xl",
+                "reflect": false
+            },
+            "marginInlineEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-end",
+                "reflect": false
+            },
+            "marginInlineEndXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-end-xs",
+                "reflect": false
+            },
+            "marginInlineEndSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-end-sm",
+                "reflect": false
+            },
+            "marginInlineEndMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-end-md",
+                "reflect": false
+            },
+            "marginInlineEndLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-end-lg",
+                "reflect": false
+            },
+            "marginInlineEndXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-inline-end-xl",
+                "reflect": false
+            },
+            "marginBlockEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-end",
+                "reflect": false
+            },
+            "marginBlockEndXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-end-xs",
+                "reflect": false
+            },
+            "marginBlockEndSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-end-sm",
+                "reflect": false
+            },
+            "marginBlockEndMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-end-md",
+                "reflect": false
+            },
+            "marginBlockEndLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-end-lg",
+                "reflect": false
+            },
+            "marginBlockEndXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-block-end-xl",
+                "reflect": false
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum height of the row. Used in conjunction with alignment props"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-height",
+                "reflect": true
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum width of the row. Used in conjunction with alignment props"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-width",
+                "reflect": true
+            },
+            "offset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxColumnType",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "references": {
+                        "BoxColumnType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxColumnType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset",
+                "reflect": false
+            },
+            "offsetXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxColumnType",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "references": {
+                        "BoxColumnType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxColumnType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset-xs",
+                "reflect": false
+            },
+            "offsetSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxColumnType",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "references": {
+                        "BoxColumnType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxColumnType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset-sm",
+                "reflect": false
+            },
+            "offsetMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxColumnType",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "references": {
+                        "BoxColumnType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxColumnType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset-md",
+                "reflect": false
+            },
+            "offsetLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxColumnType",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "references": {
+                        "BoxColumnType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxColumnType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset-lg",
+                "reflect": false
+            },
+            "offsetXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxColumnType",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "references": {
+                        "BoxColumnType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxColumnType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset-xl",
+                "reflect": false
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding",
+                "reflect": false
+            },
+            "paddingXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding-xs",
+                "reflect": false
+            },
+            "paddingSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding-sm",
+                "reflect": false
+            },
+            "paddingMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding-md",
+                "reflect": false
+            },
+            "paddingLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding-lg",
+                "reflect": false
+            },
+            "paddingXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding-xl",
+                "reflect": false
+            },
+            "paddingBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding-block-start",
+                "reflect": false
+            },
+            "paddingBlockStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding-block-start-xs",
+                "reflect": false
+            },
+            "paddingBlockStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "text": "none"
                         }],
-                    "text": "Defines the horizontal alignment of the box items at the XS breakpoint."
+                    "text": "Defines the top spacing at the SM breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "justify-content-xs",
+                "attribute": "padding-block-start-sm",
                 "reflect": false
             },
-            "justifyContentSm": {
+            "paddingBlockStartMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
-                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "text": "none"
                         }],
-                    "text": "Defines the horizontal alignment of the box items at the SM breakpoint."
+                    "text": "Defines the top spacing at the MD breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "justify-content-sm",
+                "attribute": "padding-block-start-md",
                 "reflect": false
             },
-            "justifyContentMd": {
+            "paddingBlockStartLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
-                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "text": "none"
                         }],
-                    "text": "Defines the horizontal alignment of the box items at the MD breakpoint."
+                    "text": "Defines the top spacing at the LG breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "justify-content-md",
+                "attribute": "padding-block-start-lg",
                 "reflect": false
             },
-            "justifyContentLg": {
+            "paddingBlockStartXl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
-                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "text": "none"
                         }],
-                    "text": "Defines the horizontal alignment of the box items at the LG breakpoint."
+                    "text": "Defines the top spacing at the XL breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "justify-content-lg",
+                "attribute": "padding-block-start-xl",
                 "reflect": false
             },
-            "justifyContentXl": {
+            "paddingBlockEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`",
-                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "text": "none"
                         }],
-                    "text": "Defines the horizontal alignment of the box items at the XL breakpoint."
+                    "text": "Defines the bottom spacing."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "justify-content-xl",
+                "attribute": "padding-block-end",
                 "reflect": false
             },
-            "marginBlockStart": {
+            "paddingBlockEndXs": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -719,14 +2448,14 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the box's outer top spacing."
+                    "text": "Defines the bottom spacing at the XS breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin-block-start",
+                "attribute": "padding-block-end-xs",
                 "reflect": false
             },
-            "marginInlineStart": {
+            "paddingBlockEndSm": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -747,14 +2476,14 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the box's outer left spacing."
+                    "text": "Defines the bottom spacing at the SM breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin-inline-start",
+                "attribute": "padding-block-end-sm",
                 "reflect": false
             },
-            "marginInlineEnd": {
+            "paddingBlockEndMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -775,14 +2504,14 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the box's outer right spacing."
+                    "text": "Defines the bottom spacing at the MD breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin-inline-end",
+                "attribute": "padding-block-end-md",
                 "reflect": false
             },
-            "marginBlockEnd": {
+            "paddingBlockEndLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -803,202 +2532,238 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the box's outer bottom spacing."
+                    "text": "Defines the bottom spacing at the LG breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin-block-end",
+                "attribute": "padding-block-end-lg",
                 "reflect": false
             },
-            "minHeight": {
+            "paddingBlockEndXl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The minimum height of the row. Used in conjunction with alignment props"
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the bottom spacing at the XL breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-height",
-                "reflect": true
+                "attribute": "padding-block-end-xl",
+                "reflect": false
             },
-            "minWidth": {
+            "paddingInlineStart": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxTShirtSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The minimum width of the row. Used in conjunction with alignment props"
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the left spacing."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-width",
-                "reflect": true
+                "attribute": "padding-inline-start",
+                "reflect": false
             },
-            "offset": {
+            "paddingInlineStartXs": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxTShirtSizeType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the left spacing at the XS breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "offset",
+                "attribute": "padding-inline-start-xs",
                 "reflect": false
             },
-            "offsetXs": {
+            "paddingInlineStartSm": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxTShirtSizeType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the left spacing at the SM breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "offset-xs",
+                "attribute": "padding-inline-start-sm",
                 "reflect": false
             },
-            "offsetSm": {
+            "paddingInlineStartMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxTShirtSizeType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the left spacing at the MD breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "offset-sm",
+                "attribute": "padding-inline-start-md",
                 "reflect": false
             },
-            "offsetMd": {
+            "paddingInlineStartLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxTShirtSizeType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the left spacing at the LG breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "offset-md",
+                "attribute": "padding-inline-start-lg",
                 "reflect": false
             },
-            "offsetLg": {
+            "paddingInlineStartXl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxTShirtSizeType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the left spacing at the XL breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "offset-lg",
+                "attribute": "padding-inline-start-xl",
                 "reflect": false
             },
-            "offsetXl": {
+            "paddingInlineEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxTShirtSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxTShirtSizeType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the right spacing."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "offset-xl",
+                "attribute": "padding-inline-end",
                 "reflect": false
             },
-            "padding": {
+            "paddingInlineEndXs": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1019,14 +2784,14 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the spacing between the box items."
+                    "text": "Defines the right spacing at the XS breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
+                "attribute": "padding-inline-end-xs",
                 "reflect": false
             },
-            "paddingBlockStart": {
+            "paddingInlineEndSm": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1047,14 +2812,14 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the top spacing."
+                    "text": "Defines the right spacing at the SM breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding-block-start",
+                "attribute": "padding-inline-end-sm",
                 "reflect": false
             },
-            "paddingBlockEnd": {
+            "paddingInlineEndMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1075,14 +2840,14 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the bottom spacing."
+                    "text": "Defines the right spacing at the MD breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding-block-end",
+                "attribute": "padding-inline-end-md",
                 "reflect": false
             },
-            "paddingInlineStart": {
+            "paddingInlineEndLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1103,14 +2868,14 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the left spacing."
+                    "text": "Defines the right spacing at the LG breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding-inline-start",
+                "attribute": "padding-inline-end-lg",
                 "reflect": false
             },
-            "paddingInlineEnd": {
+            "paddingInlineEndXl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1131,11 +2896,11 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the right spacing."
+                    "text": "Defines the right spacing at the XL breakpoint."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding-inline-end",
+                "attribute": "padding-inline-end-xl",
                 "reflect": false
             },
             "shadow": {