@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -1,47 +1,93 @@
 import { h, Host } from "@stencil/core";
+import { normalizeColorValue } from "../../utils/utils";
 export class PdsBox {
     constructor() {
-        this.alignItems = undefined;
-        this.auto = undefined;
-        this.backgroundColor = undefined;
+        /**
+         * If `true`, the box will have a border.
+         */
         this.border = false;
-        this.borderColor = undefined;
-        this.borderRadius = undefined;
-        this.direction = undefined;
-        this.display = undefined;
-        this.fit = undefined;
-        this.gap = undefined;
-        this.flex = undefined;
-        this.justifyContent = undefined;
-        this.minHeight = undefined;
-        this.minWidth = undefined;
-        this.offset = undefined;
-        this.offsetXs = undefined;
-        this.offsetSm = undefined;
-        this.offsetMd = undefined;
-        this.offsetLg = undefined;
-        this.offsetXl = undefined;
-        this.padding = undefined;
-        this.shadow = undefined;
-        this.size = undefined;
-        this.sizeXs = undefined;
-        this.sizeSm = undefined;
-        this.sizeMd = undefined;
-        this.sizeLg = undefined;
-        this.sizeXl = undefined;
     }
     render() {
         const boxClasses = `
     ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignItemsXs !== undefined && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}
+    ${this.alignItemsSm !== undefined && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}
+    ${this.alignItemsMd !== undefined && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}
+    ${this.alignItemsLg !== undefined && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}
+    ${this.alignItemsXl !== undefined && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}
+    ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}
+    ${this.alignSelfXs !== undefined && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}
+    ${this.alignSelfSm !== undefined && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}
+    ${this.alignSelfMd !== undefined && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}
+    ${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.borderBlockStart === true ? 'pds-box--border-block-start' : ''}
+    ${this.borderBlockStart === false ? 'pds-box--border-block-start-none' : ''}
+    ${this.borderBlockEnd === true ? 'pds-box--border-block-end' : ''}
+    ${this.borderBlockEnd === false ? 'pds-box--border-block-end-none' : ''}
+    ${this.borderInlineStart === true ? 'pds-box--border-inline-start' : ''}
+    ${this.borderInlineStart === false ? 'pds-box--border-inline-start-none' : ''}
+    ${this.borderInlineEnd === true ? 'pds-box--border-inline-end' : ''}
+    ${this.borderInlineEnd === false ? 'pds-box--border-inline-end-none' : ''}
     ${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.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}
+    ${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}` : ''}
+    ${this.justifyContentSm !== undefined && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}
+    ${this.justifyContentMd !== undefined && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}
+    ${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}` : ''}
@@ -49,6 +95,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}` : ''}
@@ -62,8 +137,11 @@ export class PdsBox {
             this.sizeLg == undefined &&
             this.sizeXl == undefined ? 'pds-box' : ''}
     `;
-        const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--color-background-box': this.backgroundColor })), (this.borderColor && { '--color-border-box': this.borderColor })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-height-box': this.minWidth }));
-        return (h(Host, { key: '5293f99d80187d4345c4e7120bb1dd53887b4065', class: boxClasses, style: boxInlineStyles }));
+        // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)
+        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: '7bdd52391194a0c5f1c864453a9d5b04d5c6396c', class: boxClasses, style: boxInlineStyles }));
     }
     static get is() { return "pds-box"; }
     static get originalStyleUrls() {
@@ -88,92 +166,2443 @@ export class PdsBox {
                 },
                 "required": false,
                 "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "stretch"
+                        }],
+                    "text": "Defines how items within the box are aligned."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-items"
+            },
+            "alignItemsXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "stretch"
+                        }],
+                    "text": "Defines how items within the box are aligned at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-items-xs"
+            },
+            "alignItemsSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "stretch"
+                        }],
+                    "text": "Defines how items within the box are aligned at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-items-sm"
+            },
+            "alignItemsMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "stretch"
+                        }],
+                    "text": "Defines how items within the box are aligned at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-items-md"
+            },
+            "alignItemsLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "stretch"
+                        }],
+                    "text": "Defines how items within the box are aligned at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-items-lg"
+            },
+            "alignItemsXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "stretch"
+                        }],
+                    "text": "Defines how items within the box are aligned at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-items-xl"
+            },
+            "alignSelf": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "stretch"
+                        }],
+                    "text": "Defines how the box is aligned within its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-self"
+            },
+            "alignSelfXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines how the box is aligned within its container at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-self-xs"
+            },
+            "alignSelfSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines how the box is aligned within its container at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-self-sm"
+            },
+            "alignSelfMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines how the box is aligned within its container at the MD breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-self-md"
+            },
+            "alignSelfLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines how the box is aligned within its container at the LG breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-self-lg"
+            },
+            "alignSelfXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines how the box is aligned within its container at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-self-xl"
+            },
+            "auto": {
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "auto-xs"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "auto-sm"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "auto-md"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "auto-lg"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "auto-xl"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the background-color of the box."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color"
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will have a border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border",
+                "defaultValue": "false"
+            },
+            "borderBlockEnd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will have a border on the block-end edge. If `false`, the block-end edge will have no border.\nOverrides `border` for this edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-block-end"
+            },
+            "borderBlockStart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will have a border on the block-start edge. If `false`, the block-start edge will have no border.\nOverrides `border` for this edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-block-start"
+            },
+            "borderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the border color of the box."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-color"
+            },
+            "borderInlineEnd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will have a border on the inline-end edge. If `false`, the inline-end edge will have no border.\nOverrides `border` for this edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-inline-end"
+            },
+            "borderInlineStart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the box will have a border on the inline-start edge. If `false`, the inline-start edge will have no border.\nOverrides `border` for this edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-inline-start"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`none` | `xs`| `sm` | `md` | `lg` | `circle`",
+                    "resolved": "\"circle\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines how rounded the box corners are."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-radius"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`row` | `column`",
+                    "resolved": "\"column\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "row"
+                        }],
+                    "text": "Defines the orientation of the box items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction"
+            },
+            "display": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`flex` | `inline-flex` | `block` | `inline-block`",
+                    "resolved": "\"block\" | \"flex\" | \"inline-block\" | \"inline-flex\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "flex"
+                        }],
+                    "text": "Defines the display style of the box."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display"
+            },
+            "fit": {
+                "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%`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fit"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "fit-xs"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "fit-sm"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "fit-md"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "fit-lg"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "fit-xl"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap"
+            },
+            "gapXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "gap-xs"
+            },
+            "gapSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "gap-sm"
+            },
+            "gapMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "gap-md"
+            },
+            "gapLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "gap-lg"
+            },
+            "gapXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "gap-xl"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "wrap"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "wrap-xs"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "wrap-sm"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "wrap-md"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "wrap-lg"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "wrap-xl"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "flex"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "justify-content"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "justify-content-xs"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "justify-content-sm"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "justify-content-md"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "justify-content-lg"
+            },
+            "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 vertical alignment of the box items."
+                    "text": "Defines the horizontal alignment of the box items at the XL breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "justify-content-xl"
+            },
+            "marginBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-start"
+            },
+            "marginBlockStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-start-xs"
+            },
+            "marginBlockStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-start-sm"
+            },
+            "marginBlockStartMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-start-md"
+            },
+            "marginBlockStartLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-start-lg"
+            },
+            "marginBlockStartXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-start-xl"
+            },
+            "marginInlineStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-start"
+            },
+            "marginInlineStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-start-xs"
+            },
+            "marginInlineStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-start-sm"
+            },
+            "marginInlineStartMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-start-md"
+            },
+            "marginInlineStartLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-start-lg"
+            },
+            "marginInlineStartXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-start-xl"
+            },
+            "marginInlineEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-end"
+            },
+            "marginInlineEndXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-end-xs"
+            },
+            "marginInlineEndSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-end-sm"
+            },
+            "marginInlineEndMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-end-md"
+            },
+            "marginInlineEndLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-end-lg"
+            },
+            "marginInlineEndXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-inline-end-xl"
+            },
+            "marginBlockEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-end"
+            },
+            "marginBlockEndXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-end-xs"
+            },
+            "marginBlockEndSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-end-sm"
+            },
+            "marginBlockEndMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-end-md"
+            },
+            "marginBlockEndLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-end-lg"
+            },
+            "marginBlockEndXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "margin-block-end-xl"
+            },
+            "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,
+                "reflect": true,
+                "attribute": "min-height"
+            },
+            "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,
+                "reflect": true,
+                "attribute": "min-width"
+            },
+            "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",
+                            "referenceLocation": "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,
+                "reflect": false,
+                "attribute": "offset"
+            },
+            "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",
+                            "referenceLocation": "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,
+                "reflect": false,
+                "attribute": "offset-xs"
+            },
+            "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",
+                            "referenceLocation": "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,
+                "reflect": false,
+                "attribute": "offset-sm"
+            },
+            "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",
+                            "referenceLocation": "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,
+                "reflect": false,
+                "attribute": "offset-md"
+            },
+            "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",
+                            "referenceLocation": "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,
+                "reflect": false,
+                "attribute": "offset-lg"
+            },
+            "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",
+                            "referenceLocation": "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,
+                "reflect": false,
+                "attribute": "offset-xl"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the spacing between the box items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding"
+            },
+            "paddingXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "padding-xs"
+            },
+            "paddingSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "padding-sm"
+            },
+            "paddingMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "padding-md"
+            },
+            "paddingLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "padding-lg"
+            },
+            "paddingXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "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,
+                "reflect": false,
+                "attribute": "padding-xl"
+            },
+            "paddingBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-start"
+            },
+            "paddingBlockStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing at the XS breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-start-xs"
+            },
+            "paddingBlockStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing at the SM breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-start-sm"
+            },
+            "paddingBlockStartMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing at the MD breakpoint."
                 },
-                "attribute": "align-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-start-md"
             },
-            "auto": {
-                "type": "boolean",
+            "paddingBlockStartLg": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "If `true`, the box will be sized to fit its contents."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing at the LG breakpoint."
                 },
-                "attribute": "auto",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-start-lg"
             },
-            "backgroundColor": {
+            "paddingBlockStartXl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Defines the background-color of the box."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the top spacing at the XL breakpoint."
                 },
-                "attribute": "background-color",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-start-xl"
             },
-            "border": {
-                "type": "boolean",
+            "paddingBlockEnd": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "If `true`, the box will have a border."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the bottom spacing."
                 },
-                "attribute": "border",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "attribute": "padding-block-end"
             },
-            "borderColor": {
+            "paddingBlockEndXs": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Defines the border color of the box."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the bottom spacing at the XS breakpoint."
                 },
-                "attribute": "border-color",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-end-xs"
             },
-            "borderRadius": {
+            "paddingBlockEndSm": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`none` | `xs`| `sm` | `md` | `lg` | `circle`",
-                    "resolved": "\"circle\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xs\"",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -182,79 +2611,112 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines how rounded the box corners are."
+                    "text": "Defines the bottom spacing at the SM breakpoint."
                 },
-                "attribute": "border-radius",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-end-sm"
             },
-            "direction": {
+            "paddingBlockEndMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`row` | `column`",
-                    "resolved": "\"column\" | \"row\"",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "row"
+                            "text": "none"
                         }],
-                    "text": "Defines the orientation of the box items."
+                    "text": "Defines the bottom spacing at the MD breakpoint."
                 },
-                "attribute": "direction",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-end-md"
             },
-            "display": {
+            "paddingBlockEndLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`flex` | `inline-flex` | `block` | `inline-block`",
-                    "resolved": "\"block\" | \"flex\" | \"inline-block\" | \"inline-flex\"",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "flex"
+                            "text": "none"
                         }],
-                    "text": "Defines the display style of the box."
+                    "text": "Defines the bottom spacing at the LG breakpoint."
                 },
-                "attribute": "display",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-end-lg"
             },
-            "fit": {
-                "type": "boolean",
+            "paddingBlockEndXl": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "If `true`, sets the box `max-width` to `100%`."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the bottom spacing at the XL breakpoint."
                 },
-                "attribute": "fit",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-block-end-xl"
             },
-            "gap": {
+            "paddingInlineStart": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxTShirtSizeType",
-                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxTShirtSizeType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
@@ -265,18 +2727,27 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the spacing between the box items."
+                    "text": "Defines the left spacing."
                 },
-                "attribute": "gap",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-start"
             },
-            "flex": {
+            "paddingInlineStartXs": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`none` | `grow` | `shrink`",
-                    "resolved": "\"grow\" | \"none\" | \"shrink\"",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -285,214 +2756,286 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines how a box will grow or shrink to fit the space available in its container."
+                    "text": "Defines the left spacing at the XS breakpoint."
                 },
-                "attribute": "flex",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-start-xs"
             },
-            "justifyContent": {
+            "paddingInlineStartSm": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`start` | `center` | `end` | `space-between` | `space-around`",
-                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"start\"",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "text": "none"
                         }],
-                    "text": "Defines the horizontal alignment of the box items."
+                    "text": "Defines the left spacing at the SM breakpoint."
                 },
-                "attribute": "justify-content",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-start-sm"
             },
-            "minHeight": {
+            "paddingInlineStartMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "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 left spacing at the MD breakpoint."
                 },
-                "attribute": "min-height",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-start-md"
             },
-            "minWidth": {
+            "paddingInlineStartLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
                 },
                 "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 at the LG breakpoint."
                 },
-                "attribute": "min-width",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-start-lg"
             },
-            "offset": {
+            "paddingInlineStartXl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
                 "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 XL breakpoint."
                 },
-                "attribute": "offset",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-start-xl"
             },
-            "offsetXs": {
+            "paddingInlineEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
                 "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 right spacing."
                 },
-                "attribute": "offset-xs",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-end"
             },
-            "offsetSm": {
+            "paddingInlineEndXs": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
                 "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 right spacing at the XS breakpoint."
                 },
-                "attribute": "offset-sm",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-end-xs"
             },
-            "offsetMd": {
+            "paddingInlineEndSm": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
                 "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 right spacing at the SM breakpoint."
                 },
-                "attribute": "offset-md",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-end-sm"
             },
-            "offsetLg": {
+            "paddingInlineEndMd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
                 "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 right spacing at the MD breakpoint."
                 },
-                "attribute": "offset-lg",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-end-md"
             },
-            "offsetXl": {
+            "paddingInlineEndLg": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxColumnType",
-                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxColumnType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
                 "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 at the LG breakpoint."
                 },
-                "attribute": "offset-xl",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-end-lg"
             },
-            "padding": {
+            "paddingInlineEndXl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxTShirtSizeType",
-                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "original": "BoxSpacingType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxTShirtSizeType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
@@ -503,22 +3046,25 @@ export class PdsBox {
                             "name": "defaultValue",
                             "text": "none"
                         }],
-                    "text": "Defines the spacing between the box items."
+                    "text": "Defines the right spacing at the XL breakpoint."
                 },
-                "attribute": "padding",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding-inline-end-xl"
             },
             "shadow": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxTShirtSizeType",
-                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "original": "BoxShadowSizeType",
+                    "resolved": "\"050\" | \"100\" | \"150\" | \"200\" | \"300\" | \"400\" | \"500\" | \"none\"",
                     "references": {
-                        "BoxTShirtSizeType": {
+                        "BoxShadowSizeType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                            "id": "src/utils/types.ts::BoxShadowSizeType",
+                            "referenceLocation": "BoxShadowSizeType"
                         }
                     }
                 },
@@ -531,8 +3077,10 @@ export class PdsBox {
                         }],
                     "text": "Defines the box shadow."
                 },
-                "attribute": "shadow",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shadow"
             },
             "size": {
                 "type": "string",
@@ -544,7 +3092,8 @@ export class PdsBox {
                         "BoxColumnType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxColumnType",
+                            "referenceLocation": "BoxColumnType"
                         }
                     }
                 },
@@ -552,10 +3101,12 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Size of the column for all screen sizes that are not explicitly set."
+                    "text": "Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger."
                 },
-                "attribute": "size",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
             },
             "sizeXs": {
                 "type": "string",
@@ -567,7 +3118,8 @@ export class PdsBox {
                         "BoxColumnType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxColumnType",
+                            "referenceLocation": "BoxColumnType"
                         }
                     }
                 },
@@ -575,10 +3127,12 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes less than the `XS` breakpoint, this will take the number of columns specified."
+                    "text": "At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range."
                 },
-                "attribute": "size-xs",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size-xs"
             },
             "sizeSm": {
                 "type": "string",
@@ -590,7 +3144,8 @@ export class PdsBox {
                         "BoxColumnType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxColumnType",
+                            "referenceLocation": "BoxColumnType"
                         }
                     }
                 },
@@ -598,10 +3153,12 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs."
                 },
-                "attribute": "size-sm",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size-sm"
             },
             "sizeMd": {
                 "type": "string",
@@ -613,7 +3170,8 @@ export class PdsBox {
                         "BoxColumnType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxColumnType",
+                            "referenceLocation": "BoxColumnType"
                         }
                     }
                 },
@@ -621,10 +3179,12 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up."
                 },
-                "attribute": "size-md",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size-md"
             },
             "sizeLg": {
                 "type": "string",
@@ -636,7 +3196,8 @@ export class PdsBox {
                         "BoxColumnType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxColumnType",
+                            "referenceLocation": "BoxColumnType"
                         }
                     }
                 },
@@ -644,10 +3205,12 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up."
                 },
-                "attribute": "size-lg",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size-lg"
             },
             "sizeXl": {
                 "type": "string",
@@ -659,7 +3222,8 @@ export class PdsBox {
                         "BoxColumnType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxColumnType"
+                            "id": "src/utils/types.ts::BoxColumnType",
+                            "referenceLocation": "BoxColumnType"
                         }
                     }
                 },
@@ -667,12 +3231,13 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up."
                 },
-                "attribute": "size-xl",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size-xl"
             }
         };
     }
 }
-//# sourceMappingURL=pds-box.js.map