@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -1,69 +1,160 @@
 import { h, Host } from "@stencil/core";
+import { normalizeColorValue } from "../../utils/utils";
+import { HostStylingKeeper } from "../../utils/attributes";
+/**
+ * @lightDom host-only
+ */
 export class PdsBox {
     constructor() {
-        this.alignItems = undefined;
-        this.auto = undefined;
-        this.backgroundColor = undefined;
+        this.hostKeeper = new HostStylingKeeper();
+        /**
+         * 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;
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
     }
     render() {
         const boxClasses = `
-    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignItemsXs != null && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}
+    ${this.alignItemsSm != null && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}
+    ${this.alignItemsMd != null && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}
+    ${this.alignItemsLg != null && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}
+    ${this.alignItemsXl != null && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}
+    ${this.alignSelf != null && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}
+    ${this.alignSelfXs != null && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}
+    ${this.alignSelfSm != null && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}
+    ${this.alignSelfMd != null && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}
+    ${this.alignSelfLg != null && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
+    ${this.alignSelfXl != null && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
     ${this.auto ? 'pds-box--auto' : ''}
+    ${this.autoXs ? 'pds-box--auto-xs' : ''}
+    ${this.autoSm ? 'pds-box--auto-sm' : ''}
+    ${this.autoMd ? 'pds-box--auto-md' : ''}
+    ${this.autoLg ? 'pds-box--auto-lg' : ''}
+    ${this.autoXl ? 'pds-box--auto-xl' : ''}
     ${this.border ? 'pds-box--border' : ''}
-    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
-    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
-    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
+    ${this.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 != null && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
+    ${this.container != null && this.container.trim() !== '' ? `pds-box--container-${this.container}` : ''}
+    ${this.direction != null && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
+    ${this.display != null && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
     ${this.fit ? 'pds-box--fit' : ''}
-    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
-    ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}
-    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
-    ${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}` : ''}
-    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
-    ${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.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}` : ''}
-    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
-    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
-    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
-    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
+    ${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 != null && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
+    ${this.gapXs != null && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
+    ${this.gapSm != null && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
+    ${this.gapMd != null && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
+    ${this.gapLg != null && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
+    ${this.gapXl != null && 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 != null && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
+    ${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
+    ${this.justifyContentXs != null && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
+    ${this.justifyContentSm != null && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}
+    ${this.justifyContentMd != null && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}
+    ${this.justifyContentLg != null && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
+    ${this.justifyContentXl != null && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
+    ${this.marginBlockStart != null && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
+    ${this.marginBlockStartXs != null && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
+    ${this.marginBlockStartSm != null && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
+    ${this.marginBlockStartMd != null && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
+    ${this.marginBlockStartLg != null && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
+    ${this.marginBlockStartXl != null && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
+    ${this.marginInlineStart != null && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
+    ${this.marginInlineStartXs != null && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
+    ${this.marginInlineStartSm != null && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
+    ${this.marginInlineStartMd != null && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
+    ${this.marginInlineStartLg != null && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
+    ${this.marginInlineStartXl != null && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
+    ${this.marginInlineEnd != null && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
+    ${this.marginInlineEndXs != null && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
+    ${this.marginInlineEndSm != null && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
+    ${this.marginInlineEndMd != null && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
+    ${this.marginInlineEndLg != null && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
+    ${this.marginInlineEndXl != null && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
+    ${this.marginBlockEnd != null && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
+    ${this.marginBlockEndXs != null && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
+    ${this.marginBlockEndSm != null && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
+    ${this.marginBlockEndMd != null && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
+    ${this.marginBlockEndLg != null && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
+    ${this.marginBlockEndXl != null && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
+    ${this.offset != null && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
+    ${this.offsetXs != null && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
+    ${this.offsetSm != null && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
+    ${this.offsetMd != null && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
+    ${this.offsetLg != null && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
+    ${this.offsetXl != null && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
+    ${this.padding != null && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
+    ${this.paddingXs != null && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
+    ${this.paddingSm != null && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
+    ${this.paddingMd != null && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
+    ${this.paddingLg != null && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
+    ${this.paddingXl != null && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
+    ${this.paddingBlockStart != null && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
+    ${this.paddingBlockStartXs != null && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
+    ${this.paddingBlockStartSm != null && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
+    ${this.paddingBlockStartMd != null && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
+    ${this.paddingBlockStartLg != null && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
+    ${this.paddingBlockStartXl != null && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
+    ${this.paddingBlockEnd != null && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
+    ${this.paddingBlockEndXs != null && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
+    ${this.paddingBlockEndSm != null && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
+    ${this.paddingBlockEndMd != null && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
+    ${this.paddingBlockEndLg != null && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
+    ${this.paddingBlockEndXl != null && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
+    ${this.paddingInlineStart != null && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
+    ${this.paddingInlineStartXs != null && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
+    ${this.paddingInlineStartSm != null && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
+    ${this.paddingInlineStartMd != null && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
+    ${this.paddingInlineStartLg != null && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
+    ${this.paddingInlineStartXl != null && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
+    ${this.paddingInlineEnd != null && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
+    ${this.paddingInlineEndXs != null && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
+    ${this.paddingInlineEndSm != null && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
+    ${this.paddingInlineEndMd != null && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
+    ${this.paddingInlineEndLg != null && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
+    ${this.paddingInlineEndXl != null && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
+    ${this.shadow != null && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
+    ${this.size != null && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
+    ${this.sizeXs != null && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
+    ${this.sizeSm != null && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
+    ${this.sizeMd != null && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
+    ${this.sizeLg != null && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
+    ${this.sizeXl != null && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
     ${this.size == undefined &&
             this.sizeSm == undefined &&
             this.sizeMd == undefined &&
             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 }));
+        this.hostKeeper.record(boxClasses, boxInlineStyles);
+        return (h(Host, { key: '666b852248ab8514f5858daa6dc9010f9d9aee6e', class: boxClasses, style: boxInlineStyles }));
     }
     static get is() { return "pds-box"; }
     static get originalStyleUrls() {
@@ -91,89 +182,2463 @@ export class PdsBox {
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "start"
+                            "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"
+            },
+            "container": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxContainerType",
+                    "resolved": "\"inline-size\" | \"size\"",
+                    "references": {
+                        "BoxContainerType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxContainerType",
+                            "referenceLocation": "BoxContainerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the box a size container by setting `container-type`. `inline-size` stops the box's\ncontent from setting its width, so long unwrapped text truncates instead of widening it, and\nlets children use container query units. `size` does the same for both axes, so the box needs\na height from somewhere else. Either way the box still needs its width from its parent, such as\nthe default `flex-grow`, `flex=\"grow\"` or `fit`; with `flex=\"none\"` or `flex=\"shrink\"`, or the\n`auto` prop, it collapses."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container"
+            },
+            "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 `width`, `min-width` and `max-width` to `100%`, so it fills its parent's width.\nA box in a `direction=\"column\"` parent needs it when the parent sets `align-items`, and a box that isn't a flex item needs it to fill its container."
+                },
+                "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 `width`, `min-width` and `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 `width`, `min-width` and `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 `width`, `min-width` and `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 `width`, `min-width` and `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 `width`, `min-width` and `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": [],
+                    "text": "Defines how a box will grow or shrink to fit the space available in its container.\nCan be a predefined value or a custom flex value (e.g., '1', '0 1 auto'). The predefined values are\n`none` (`flex: 0 0 auto`), `grow` (`flex: 1 1 auto`) and `shrink` (`flex: 0 1 auto`).\nWithout it, a box grows to share its row with its siblings (`flex-grow: 1; flex-basis: 0`)."
+                },
+                "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 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": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-start"
+            },
+            "marginBlockStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the XS breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-start-xs"
+            },
+            "marginBlockStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the SM breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-start-sm"
+            },
+            "marginBlockStartMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the MD breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-start-md"
+            },
+            "marginBlockStartLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the LG breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-start-lg"
+            },
+            "marginBlockStartXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer top spacing at the XL breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-start-xl"
+            },
+            "marginInlineStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-start"
+            },
+            "marginInlineStartXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the XS breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-start-xs"
+            },
+            "marginInlineStartSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the SM breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-start-sm"
+            },
+            "marginInlineStartMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the MD breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-start-md"
+            },
+            "marginInlineStartLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the LG breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-start-lg"
+            },
+            "marginInlineStartXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer left spacing at the XL breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-start-xl"
+            },
+            "marginInlineEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-end"
+            },
+            "marginInlineEndXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the XS breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-end-xs"
+            },
+            "marginInlineEndSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the SM breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-end-sm"
+            },
+            "marginInlineEndMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the MD breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-end-md"
+            },
+            "marginInlineEndLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the LG breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-end-lg"
+            },
+            "marginInlineEndXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer right spacing at the XL breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-inline-end-xl"
+            },
+            "marginBlockEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-end"
+            },
+            "marginBlockEndXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the XS breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-end-xs"
+            },
+            "marginBlockEndSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the SM breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-end-sm"
+            },
+            "marginBlockEndMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the MD breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-end-md"
+            },
+            "marginBlockEndLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the LG breakpoint. Accepts a spacing token or `auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-block-end-lg"
+            },
+            "marginBlockEndXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxMarginType",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"auto\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxMarginType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxMarginType",
+                            "referenceLocation": "BoxMarginType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "none"
+                        }],
+                    "text": "Defines the box's outer bottom spacing at the XL breakpoint. Accepts a spacing token or `auto`."
+                },
+                "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 vertical alignment of the box items."
+                    "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 +2647,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 +2763,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 +2792,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 +3082,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 +3113,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 +3128,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 +3137,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 +3154,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 +3163,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 +3180,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 +3189,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 +3206,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 +3215,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 +3232,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 +3241,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 +3258,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 +3267,14 @@ 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"
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-box.js.map