@proximus/lavender-angular 1.4.14-alpha.7 → 1.4.14-alpha.8

package/fesm2022/proximus-lavender-angular.mjs

@@ -3874,21 +3874,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-button>
+ * @description Type-only wrapper for <px-button-icon>
  */
-class PxButton {
+class PxButtonIcon {
     elementRef;
-    set variant(value) {
-        this.elementRef.nativeElement['variant'] = value;
-    }
-    get variant() {
-        return this.elementRef.nativeElement['variant'];
-    }
-    set state(value) {
-        this.elementRef.nativeElement['state'] = value;
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
     }
-    get state() {
-        return this.elementRef.nativeElement['state'];
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
     }
     set loading(value) {
         this.elementRef.nativeElement['loading'] = value;
@@ -3896,41 +3890,17 @@ class PxButton {
     get loading() {
         return this.elementRef.nativeElement['loading'];
     }
-    set shape(value) {
-        this.elementRef.nativeElement['shape'] = value;
-    }
-    get shape() {
-        return this.elementRef.nativeElement['shape'];
-    }
-    set shapeMobile(value) {
-        this.elementRef.nativeElement['shapeMobile'] = value;
-    }
-    get shapeMobile() {
-        return this.elementRef.nativeElement['shapeMobile'];
-    }
-    set shapeTablet(value) {
-        this.elementRef.nativeElement['shapeTablet'] = value;
-    }
-    get shapeTablet() {
-        return this.elementRef.nativeElement['shapeTablet'];
-    }
-    set shapeLaptop(value) {
-        this.elementRef.nativeElement['shapeLaptop'] = value;
-    }
-    get shapeLaptop() {
-        return this.elementRef.nativeElement['shapeLaptop'];
-    }
-    set shapeDesktop(value) {
-        this.elementRef.nativeElement['shapeDesktop'] = value;
+    set size(value) {
+        this.elementRef.nativeElement['size'] = value;
     }
-    get shapeDesktop() {
-        return this.elementRef.nativeElement['shapeDesktop'];
+    get size() {
+        return this.elementRef.nativeElement['size'];
     }
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
+    set variant(value) {
+        this.elementRef.nativeElement['variant'] = value;
     }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
+    get variant() {
+        return this.elementRef.nativeElement['variant'];
     }
     set ariaExpanded(value) {
         this.elementRef.nativeElement['ariaExpanded'] = value;
@@ -3938,42 +3908,6 @@ class PxButton {
     get ariaExpanded() {
         return this.elementRef.nativeElement['ariaExpanded'];
     }
-    set extended(value) {
-        this.elementRef.nativeElement['extended'] = value;
-    }
-    get extended() {
-        return this.elementRef.nativeElement['extended'];
-    }
-    set extendedMobile(value) {
-        this.elementRef.nativeElement['extendedMobile'] = value;
-    }
-    get extendedMobile() {
-        return this.elementRef.nativeElement['extendedMobile'];
-    }
-    set extendedTablet(value) {
-        this.elementRef.nativeElement['extendedTablet'] = value;
-    }
-    get extendedTablet() {
-        return this.elementRef.nativeElement['extendedTablet'];
-    }
-    set extendedLaptop(value) {
-        this.elementRef.nativeElement['extendedLaptop'] = value;
-    }
-    get extendedLaptop() {
-        return this.elementRef.nativeElement['extendedLaptop'];
-    }
-    set extendedDesktop(value) {
-        this.elementRef.nativeElement['extendedDesktop'] = value;
-    }
-    get extendedDesktop() {
-        return this.elementRef.nativeElement['extendedDesktop'];
-    }
-    set size(value) {
-        this.elementRef.nativeElement['size'] = value;
-    }
-    get size() {
-        return this.elementRef.nativeElement['size'];
-    }
     /** The name of the button, submitted as a pair with the button's value as part of the form data. */
     set name(value) {
         this.elementRef.nativeElement['name'] = value;
@@ -4317,55 +4251,25 @@ class PxButton {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButton, selector: "px-button", inputs: { variant: "variant", state: "state", loading: "loading", shape: "shape", shapeMobile: ["shape--mobile", "shapeMobile"], shapeTablet: ["shape--tablet", "shapeTablet"], shapeLaptop: ["shape--laptop", "shapeLaptop"], shapeDesktop: ["shape--desktop", "shapeDesktop"], inverted: "inverted", ariaExpanded: ["aria-expanded", "ariaExpanded"], extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], size: "size", name: "name", value: "value", type: "type", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButtonIcon, selector: "px-button-icon", inputs: { inverted: "inverted", loading: "loading", size: "size", variant: "variant", ariaExpanded: ["aria-expanded", "ariaExpanded"], name: "name", value: "value", type: "type", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-button',
+                    selector: 'px-button-icon',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
-                type: Input
-            }], state: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
             }], loading: [{
                 type: Input
-            }], shape: [{
+            }], size: [{
                 type: Input
-            }], shapeMobile: [{
-                type: Input,
-                args: ['shape--mobile']
-            }], shapeTablet: [{
-                type: Input,
-                args: ['shape--tablet']
-            }], shapeLaptop: [{
-                type: Input,
-                args: ['shape--laptop']
-            }], shapeDesktop: [{
-                type: Input,
-                args: ['shape--desktop']
-            }], inverted: [{
+            }], variant: [{
                 type: Input
             }], ariaExpanded: [{
                 type: Input,
                 args: ['aria-expanded']
-            }], extended: [{
-                type: Input
-            }], extendedMobile: [{
-                type: Input,
-                args: ['extended--mobile']
-            }], extendedTablet: [{
-                type: Input,
-                args: ['extended--tablet']
-            }], extendedLaptop: [{
-                type: Input,
-                args: ['extended--laptop']
-            }], extendedDesktop: [{
-                type: Input,
-                args: ['extended--desktop']
-            }], size: [{
-                type: Input
             }], name: [{
                 type: Input
             }], value: [{
@@ -4527,38 +4431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-button-wrapper>
+ * @description Type-only wrapper for <px-button>
  */
-class PxButtonWrapper {
+class PxButton {
     elementRef;
-    /** The name of the button, submitted as a pair with the button's value as part of the form data. */
-    set name(value) {
-        this.elementRef.nativeElement['name'] = value;
-    }
-    get name() {
-        return this.elementRef.nativeElement['name'];
-    }
-    /** The value associated with the button's name when it's submitted with a form. */
-    set value(value) {
-        this.elementRef.nativeElement['value'] = value;
-    }
-    get value() {
-        return this.elementRef.nativeElement['value'];
-    }
-    /** The default behavior of the button. Possible values are 'submit', 'reset', and 'button'. */
-    set type(value) {
-        this.elementRef.nativeElement['type'] = value;
-    }
-    get type() {
-        return this.elementRef.nativeElement['type'];
-    }
-    /** Whether the button is disabled. */
-    set disabled(value) {
-        this.elementRef.nativeElement['disabled'] = value;
-    }
-    get disabled() {
-        return this.elementRef.nativeElement['disabled'];
-    }
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
     }
@@ -4655,6 +4531,34 @@ class PxButtonWrapper {
     get size() {
         return this.elementRef.nativeElement['size'];
     }
+    /** The name of the button, submitted as a pair with the button's value as part of the form data. */
+    set name(value) {
+        this.elementRef.nativeElement['name'] = value;
+    }
+    get name() {
+        return this.elementRef.nativeElement['name'];
+    }
+    /** The value associated with the button's name when it's submitted with a form. */
+    set value(value) {
+        this.elementRef.nativeElement['value'] = value;
+    }
+    get value() {
+        return this.elementRef.nativeElement['value'];
+    }
+    /** The default behavior of the button. Possible values are 'submit', 'reset', and 'button'. */
+    set type(value) {
+        this.elementRef.nativeElement['type'] = value;
+    }
+    get type() {
+        return this.elementRef.nativeElement['type'];
+    }
+    /** Whether the button is disabled. */
+    set disabled(value) {
+        this.elementRef.nativeElement['disabled'] = value;
+    }
+    get disabled() {
+        return this.elementRef.nativeElement['disabled'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -4970,23 +4874,15 @@ class PxButtonWrapper {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonWrapper, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButtonWrapper, selector: "px-button-wrapper", inputs: { name: "name", value: "value", type: "type", disabled: "disabled", variant: "variant", state: "state", loading: "loading", shape: "shape", shapeMobile: ["shape--mobile", "shapeMobile"], shapeTablet: ["shape--tablet", "shapeTablet"], shapeLaptop: ["shape--laptop", "shapeLaptop"], shapeDesktop: ["shape--desktop", "shapeDesktop"], inverted: "inverted", ariaExpanded: ["aria-expanded", "ariaExpanded"], extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], size: "size", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButton, selector: "px-button", inputs: { variant: "variant", state: "state", loading: "loading", shape: "shape", shapeMobile: ["shape--mobile", "shapeMobile"], shapeTablet: ["shape--tablet", "shapeTablet"], shapeLaptop: ["shape--laptop", "shapeLaptop"], shapeDesktop: ["shape--desktop", "shapeDesktop"], inverted: "inverted", ariaExpanded: ["aria-expanded", "ariaExpanded"], extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], size: "size", name: "name", value: "value", type: "type", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-button-wrapper',
+                    selector: 'px-button',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], variant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
             }], state: [{
                 type: Input
@@ -5027,6 +4923,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['extended--desktop']
             }], size: [{
                 type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -5180,40 +5084,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-button-icon>
+ * @description Type-only wrapper for <px-button-wrapper>
  */
-class PxButtonIcon {
+class PxButtonWrapper {
     elementRef;
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
-    }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
-    }
-    set loading(value) {
-        this.elementRef.nativeElement['loading'] = value;
-    }
-    get loading() {
-        return this.elementRef.nativeElement['loading'];
-    }
-    set size(value) {
-        this.elementRef.nativeElement['size'] = value;
-    }
-    get size() {
-        return this.elementRef.nativeElement['size'];
-    }
-    set variant(value) {
-        this.elementRef.nativeElement['variant'] = value;
-    }
-    get variant() {
-        return this.elementRef.nativeElement['variant'];
-    }
-    set ariaExpanded(value) {
-        this.elementRef.nativeElement['ariaExpanded'] = value;
-    }
-    get ariaExpanded() {
-        return this.elementRef.nativeElement['ariaExpanded'];
-    }
     /** The name of the button, submitted as a pair with the button's value as part of the form data. */
     set name(value) {
         this.elementRef.nativeElement['name'] = value;
@@ -5242,6 +5116,102 @@ class PxButtonIcon {
     get disabled() {
         return this.elementRef.nativeElement['disabled'];
     }
+    set variant(value) {
+        this.elementRef.nativeElement['variant'] = value;
+    }
+    get variant() {
+        return this.elementRef.nativeElement['variant'];
+    }
+    set state(value) {
+        this.elementRef.nativeElement['state'] = value;
+    }
+    get state() {
+        return this.elementRef.nativeElement['state'];
+    }
+    set loading(value) {
+        this.elementRef.nativeElement['loading'] = value;
+    }
+    get loading() {
+        return this.elementRef.nativeElement['loading'];
+    }
+    set shape(value) {
+        this.elementRef.nativeElement['shape'] = value;
+    }
+    get shape() {
+        return this.elementRef.nativeElement['shape'];
+    }
+    set shapeMobile(value) {
+        this.elementRef.nativeElement['shapeMobile'] = value;
+    }
+    get shapeMobile() {
+        return this.elementRef.nativeElement['shapeMobile'];
+    }
+    set shapeTablet(value) {
+        this.elementRef.nativeElement['shapeTablet'] = value;
+    }
+    get shapeTablet() {
+        return this.elementRef.nativeElement['shapeTablet'];
+    }
+    set shapeLaptop(value) {
+        this.elementRef.nativeElement['shapeLaptop'] = value;
+    }
+    get shapeLaptop() {
+        return this.elementRef.nativeElement['shapeLaptop'];
+    }
+    set shapeDesktop(value) {
+        this.elementRef.nativeElement['shapeDesktop'] = value;
+    }
+    get shapeDesktop() {
+        return this.elementRef.nativeElement['shapeDesktop'];
+    }
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
+    }
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
+    }
+    set ariaExpanded(value) {
+        this.elementRef.nativeElement['ariaExpanded'] = value;
+    }
+    get ariaExpanded() {
+        return this.elementRef.nativeElement['ariaExpanded'];
+    }
+    set extended(value) {
+        this.elementRef.nativeElement['extended'] = value;
+    }
+    get extended() {
+        return this.elementRef.nativeElement['extended'];
+    }
+    set extendedMobile(value) {
+        this.elementRef.nativeElement['extendedMobile'] = value;
+    }
+    get extendedMobile() {
+        return this.elementRef.nativeElement['extendedMobile'];
+    }
+    set extendedTablet(value) {
+        this.elementRef.nativeElement['extendedTablet'] = value;
+    }
+    get extendedTablet() {
+        return this.elementRef.nativeElement['extendedTablet'];
+    }
+    set extendedLaptop(value) {
+        this.elementRef.nativeElement['extendedLaptop'] = value;
+    }
+    get extendedLaptop() {
+        return this.elementRef.nativeElement['extendedLaptop'];
+    }
+    set extendedDesktop(value) {
+        this.elementRef.nativeElement['extendedDesktop'] = value;
+    }
+    get extendedDesktop() {
+        return this.elementRef.nativeElement['extendedDesktop'];
+    }
+    set size(value) {
+        this.elementRef.nativeElement['size'] = value;
+    }
+    get size() {
+        return this.elementRef.nativeElement['size'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -5557,32 +5527,62 @@ class PxButtonIcon {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButtonIcon, selector: "px-button-icon", inputs: { inverted: "inverted", loading: "loading", size: "size", variant: "variant", ariaExpanded: ["aria-expanded", "ariaExpanded"], name: "name", value: "value", type: "type", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonWrapper, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButtonWrapper, selector: "px-button-wrapper", inputs: { name: "name", value: "value", type: "type", disabled: "disabled", variant: "variant", state: "state", loading: "loading", shape: "shape", shapeMobile: ["shape--mobile", "shapeMobile"], shapeTablet: ["shape--tablet", "shapeTablet"], shapeLaptop: ["shape--laptop", "shapeLaptop"], shapeDesktop: ["shape--desktop", "shapeDesktop"], inverted: "inverted", ariaExpanded: ["aria-expanded", "ariaExpanded"], extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], size: "size", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonWrapper, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-button-icon',
+                    selector: 'px-button-wrapper',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { name: [{
                 type: Input
-            }], loading: [{
+            }], value: [{
                 type: Input
-            }], size: [{
+            }], type: [{
+                type: Input
+            }], disabled: [{
                 type: Input
             }], variant: [{
                 type: Input
+            }], state: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }], shapeMobile: [{
+                type: Input,
+                args: ['shape--mobile']
+            }], shapeTablet: [{
+                type: Input,
+                args: ['shape--tablet']
+            }], shapeLaptop: [{
+                type: Input,
+                args: ['shape--laptop']
+            }], shapeDesktop: [{
+                type: Input,
+                args: ['shape--desktop']
+            }], inverted: [{
+                type: Input
             }], ariaExpanded: [{
                 type: Input,
                 args: ['aria-expanded']
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], type: [{
+            }], extended: [{
                 type: Input
-            }], disabled: [{
+            }], extendedMobile: [{
+                type: Input,
+                args: ['extended--mobile']
+            }], extendedTablet: [{
+                type: Input,
+                args: ['extended--tablet']
+            }], extendedLaptop: [{
+                type: Input,
+                args: ['extended--laptop']
+            }], extendedDesktop: [{
+                type: Input,
+                args: ['extended--desktop']
+            }], size: [{
                 type: Input
             }], grow: [{
                 type: Input
@@ -14352,153 +14352,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-grid>
+ * @description Type-only wrapper for <px-h1>
  */
-class PxGrid {
+class PxH1 {
     elementRef;
-    set gridCols(value) {
-        this.elementRef.nativeElement['gridCols'] = value;
-    }
-    get gridCols() {
-        return this.elementRef.nativeElement['gridCols'];
-    }
-    set gridColsMobile(value) {
-        this.elementRef.nativeElement['gridColsMobile'] = value;
-    }
-    get gridColsMobile() {
-        return this.elementRef.nativeElement['gridColsMobile'];
-    }
-    set gridColsTablet(value) {
-        this.elementRef.nativeElement['gridColsTablet'] = value;
-    }
-    get gridColsTablet() {
-        return this.elementRef.nativeElement['gridColsTablet'];
-    }
-    set gridColsLaptop(value) {
-        this.elementRef.nativeElement['gridColsLaptop'] = value;
-    }
-    get gridColsLaptop() {
-        return this.elementRef.nativeElement['gridColsLaptop'];
-    }
-    set justifyContent(value) {
-        this.elementRef.nativeElement['justifyContent'] = value;
-    }
-    get justifyContent() {
-        return this.elementRef.nativeElement['justifyContent'];
-    }
-    set justifyItems(value) {
-        this.elementRef.nativeElement['justifyItems'] = value;
-    }
-    get justifyItems() {
-        return this.elementRef.nativeElement['justifyItems'];
-    }
-    set alignContent(value) {
-        this.elementRef.nativeElement['alignContent'] = value;
-    }
-    get alignContent() {
-        return this.elementRef.nativeElement['alignContent'];
-    }
-    set alignItems(value) {
-        this.elementRef.nativeElement['alignItems'] = value;
-    }
-    get alignItems() {
-        return this.elementRef.nativeElement['alignItems'];
-    }
-    set justifyContentMobile(value) {
-        this.elementRef.nativeElement['justifyContentMobile'] = value;
-    }
-    get justifyContentMobile() {
-        return this.elementRef.nativeElement['justifyContentMobile'];
-    }
-    set justifyItemsMobile(value) {
-        this.elementRef.nativeElement['justifyItemsMobile'] = value;
-    }
-    get justifyItemsMobile() {
-        return this.elementRef.nativeElement['justifyItemsMobile'];
-    }
-    set alignContentMobile(value) {
-        this.elementRef.nativeElement['alignContentMobile'] = value;
-    }
-    get alignContentMobile() {
-        return this.elementRef.nativeElement['alignContentMobile'];
-    }
-    set alignItemsMobile(value) {
-        this.elementRef.nativeElement['alignItemsMobile'] = value;
-    }
-    get alignItemsMobile() {
-        return this.elementRef.nativeElement['alignItemsMobile'];
-    }
-    set justifyContentTablet(value) {
-        this.elementRef.nativeElement['justifyContentTablet'] = value;
-    }
-    get justifyContentTablet() {
-        return this.elementRef.nativeElement['justifyContentTablet'];
-    }
-    set justifyItemsTablet(value) {
-        this.elementRef.nativeElement['justifyItemsTablet'] = value;
-    }
-    get justifyItemsTablet() {
-        return this.elementRef.nativeElement['justifyItemsTablet'];
-    }
-    set alignContentTablet(value) {
-        this.elementRef.nativeElement['alignContentTablet'] = value;
-    }
-    get alignContentTablet() {
-        return this.elementRef.nativeElement['alignContentTablet'];
-    }
-    set alignItemsTablet(value) {
-        this.elementRef.nativeElement['alignItemsTablet'] = value;
+    set variant(value) {
+        this.elementRef.nativeElement['variant'] = value;
     }
-    get alignItemsTablet() {
-        return this.elementRef.nativeElement['alignItemsTablet'];
+    get variant() {
+        return this.elementRef.nativeElement['variant'];
     }
-    set justifyContentLaptop(value) {
-        this.elementRef.nativeElement['justifyContentLaptop'] = value;
+    set color(value) {
+        this.elementRef.nativeElement['color'] = value;
     }
-    get justifyContentLaptop() {
-        return this.elementRef.nativeElement['justifyContentLaptop'];
+    get color() {
+        return this.elementRef.nativeElement['color'];
     }
-    set justifyItemsLaptop(value) {
-        this.elementRef.nativeElement['justifyItemsLaptop'] = value;
+    set textAlign(value) {
+        this.elementRef.nativeElement['textAlign'] = value;
     }
-    get justifyItemsLaptop() {
-        return this.elementRef.nativeElement['justifyItemsLaptop'];
+    get textAlign() {
+        return this.elementRef.nativeElement['textAlign'];
     }
-    set alignContentLaptop(value) {
-        this.elementRef.nativeElement['alignContentLaptop'] = value;
+    set textAlignMobile(value) {
+        this.elementRef.nativeElement['textAlignMobile'] = value;
     }
-    get alignContentLaptop() {
-        return this.elementRef.nativeElement['alignContentLaptop'];
+    get textAlignMobile() {
+        return this.elementRef.nativeElement['textAlignMobile'];
     }
-    set alignItemsLaptop(value) {
-        this.elementRef.nativeElement['alignItemsLaptop'] = value;
+    set textAlignTablet(value) {
+        this.elementRef.nativeElement['textAlignTablet'] = value;
     }
-    get alignItemsLaptop() {
-        return this.elementRef.nativeElement['alignItemsLaptop'];
+    get textAlignTablet() {
+        return this.elementRef.nativeElement['textAlignTablet'];
     }
-    set justifyContentDesktop(value) {
-        this.elementRef.nativeElement['justifyContentDesktop'] = value;
+    set textAlignLaptop(value) {
+        this.elementRef.nativeElement['textAlignLaptop'] = value;
     }
-    get justifyContentDesktop() {
-        return this.elementRef.nativeElement['justifyContentDesktop'];
+    get textAlignLaptop() {
+        return this.elementRef.nativeElement['textAlignLaptop'];
     }
-    set justifyItemsDesktop(value) {
-        this.elementRef.nativeElement['justifyItemsDesktop'] = value;
+    set textAlignDesktop(value) {
+        this.elementRef.nativeElement['textAlignDesktop'] = value;
     }
-    get justifyItemsDesktop() {
-        return this.elementRef.nativeElement['justifyItemsDesktop'];
+    get textAlignDesktop() {
+        return this.elementRef.nativeElement['textAlignDesktop'];
     }
-    set alignContentDesktop(value) {
-        this.elementRef.nativeElement['alignContentDesktop'] = value;
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
     }
-    get alignContentDesktop() {
-        return this.elementRef.nativeElement['alignContentDesktop'];
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
     }
-    set alignItemsDesktop(value) {
-        this.elementRef.nativeElement['alignItemsDesktop'] = value;
+    set autoSpacing(value) {
+        this.elementRef.nativeElement['autoSpacing'] = value;
     }
-    get alignItemsDesktop() {
-        return this.elementRef.nativeElement['alignItemsDesktop'];
+    get autoSpacing() {
+        return this.elementRef.nativeElement['autoSpacing'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -14815,86 +14725,38 @@ class PxGrid {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxGrid, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxGrid, selector: "px-grid", inputs: { gridCols: ["grid-cols", "gridCols"], gridColsMobile: ["grid-cols--mobile", "gridColsMobile"], gridColsTablet: ["grid-cols--tablet", "gridColsTablet"], gridColsLaptop: ["grid-cols--laptop", "gridColsLaptop"], justifyContent: ["justify-content", "justifyContent"], justifyItems: ["justify-items", "justifyItems"], alignContent: ["align-content", "alignContent"], alignItems: ["align-items", "alignItems"], justifyContentMobile: ["justify-content--mobile", "justifyContentMobile"], justifyItemsMobile: ["justify-items--mobile", "justifyItemsMobile"], alignContentMobile: ["align-content--mobile", "alignContentMobile"], alignItemsMobile: ["align-items--mobile", "alignItemsMobile"], justifyContentTablet: ["justify-content--tablet", "justifyContentTablet"], justifyItemsTablet: ["justify-items--tablet", "justifyItemsTablet"], alignContentTablet: ["align-content--tablet", "alignContentTablet"], alignItemsTablet: ["align-items--tablet", "alignItemsTablet"], justifyContentLaptop: ["justify-content--laptop", "justifyContentLaptop"], justifyItemsLaptop: ["justify-items--laptop", "justifyItemsLaptop"], alignContentLaptop: ["align-content--laptop", "alignContentLaptop"], alignItemsLaptop: ["align-items--laptop", "alignItemsLaptop"], justifyContentDesktop: ["justify-content--desktop", "justifyContentDesktop"], justifyItemsDesktop: ["justify-items--desktop", "justifyItemsDesktop"], alignContentDesktop: ["align-content--desktop", "alignContentDesktop"], alignItemsDesktop: ["align-items--desktop", "alignItemsDesktop"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH1, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH1, selector: "px-h1", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH1, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-grid',
+                    selector: 'px-h1',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { gridCols: [{
-                type: Input,
-                args: ['grid-cols']
-            }], gridColsMobile: [{
-                type: Input,
-                args: ['grid-cols--mobile']
-            }], gridColsTablet: [{
-                type: Input,
-                args: ['grid-cols--tablet']
-            }], gridColsLaptop: [{
-                type: Input,
-                args: ['grid-cols--laptop']
-            }], justifyContent: [{
-                type: Input,
-                args: ['justify-content']
-            }], justifyItems: [{
-                type: Input,
-                args: ['justify-items']
-            }], alignContent: [{
-                type: Input,
-                args: ['align-content']
-            }], alignItems: [{
-                type: Input,
-                args: ['align-items']
-            }], justifyContentMobile: [{
-                type: Input,
-                args: ['justify-content--mobile']
-            }], justifyItemsMobile: [{
-                type: Input,
-                args: ['justify-items--mobile']
-            }], alignContentMobile: [{
-                type: Input,
-                args: ['align-content--mobile']
-            }], alignItemsMobile: [{
-                type: Input,
-                args: ['align-items--mobile']
-            }], justifyContentTablet: [{
-                type: Input,
-                args: ['justify-content--tablet']
-            }], justifyItemsTablet: [{
-                type: Input,
-                args: ['justify-items--tablet']
-            }], alignContentTablet: [{
-                type: Input,
-                args: ['align-content--tablet']
-            }], alignItemsTablet: [{
-                type: Input,
-                args: ['align-items--tablet']
-            }], justifyContentLaptop: [{
-                type: Input,
-                args: ['justify-content--laptop']
-            }], justifyItemsLaptop: [{
-                type: Input,
-                args: ['justify-items--laptop']
-            }], alignContentLaptop: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], textAlign: [{
                 type: Input,
-                args: ['align-content--laptop']
-            }], alignItemsLaptop: [{
+                args: ['text-align']
+            }], textAlignMobile: [{
                 type: Input,
-                args: ['align-items--laptop']
-            }], justifyContentDesktop: [{
+                args: ['text-align--mobile']
+            }], textAlignTablet: [{
                 type: Input,
-                args: ['justify-content--desktop']
-            }], justifyItemsDesktop: [{
+                args: ['text-align--tablet']
+            }], textAlignLaptop: [{
                 type: Input,
-                args: ['justify-items--desktop']
-            }], alignContentDesktop: [{
+                args: ['text-align--laptop']
+            }], textAlignDesktop: [{
                 type: Input,
-                args: ['align-content--desktop']
-            }], alignItemsDesktop: [{
+                args: ['text-align--desktop']
+            }], inverted: [{
+                type: Input
+            }], autoSpacing: [{
                 type: Input,
-                args: ['align-items--desktop']
+                args: ['auto-spacing']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -15048,9 +14910,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-h1>
+ * @description Type-only wrapper for <px-h2>
  */
-class PxH1 {
+class PxH2 {
     elementRef;
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
@@ -15421,13 +15283,13 @@ class PxH1 {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH1, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH1, selector: "px-h1", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH2, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH2, selector: "px-h2", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH2, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-h1',
+                    selector: 'px-h2',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
@@ -15606,9 +15468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-h2>
+ * @description Type-only wrapper for <px-h3>
  */
-class PxH2 {
+class PxH3 {
     elementRef;
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
@@ -15979,13 +15841,13 @@ class PxH2 {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH2, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH2, selector: "px-h2", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH3, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH3, selector: "px-h3", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH3, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-h2',
+                    selector: 'px-h3',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
@@ -16164,9 +16026,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-h3>
+ * @description Type-only wrapper for <px-h4>
  */
-class PxH3 {
+class PxH4 {
     elementRef;
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
@@ -16537,13 +16399,13 @@ class PxH3 {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH3, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH3, selector: "px-h3", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH4, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH4, selector: "px-h4", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH3, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH4, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-h3',
+                    selector: 'px-h4',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
@@ -16722,9 +16584,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-h4>
+ * @description Type-only wrapper for <px-h5>
  */
-class PxH4 {
+class PxH5 {
     elementRef;
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
@@ -17095,13 +16957,13 @@ class PxH4 {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH4, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH4, selector: "px-h4", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH5, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH5, selector: "px-h5", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH4, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH5, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-h4',
+                    selector: 'px-h5',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
@@ -17280,9 +17142,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-h5>
+ * @description Type-only wrapper for <px-h6>
  */
-class PxH5 {
+class PxH6 {
     elementRef;
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
@@ -17653,13 +17515,13 @@ class PxH5 {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH5, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH5, selector: "px-h5", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH6, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH6, selector: "px-h6", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH5, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH6, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-h5',
+                    selector: 'px-h6',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
@@ -17838,63 +17700,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-h6>
+ * @description Type-only wrapper for <px-grid>
  */
-class PxH6 {
+class PxGrid {
     elementRef;
-    set variant(value) {
-        this.elementRef.nativeElement['variant'] = value;
+    set gridCols(value) {
+        this.elementRef.nativeElement['gridCols'] = value;
     }
-    get variant() {
-        return this.elementRef.nativeElement['variant'];
+    get gridCols() {
+        return this.elementRef.nativeElement['gridCols'];
     }
-    set color(value) {
-        this.elementRef.nativeElement['color'] = value;
+    set gridColsMobile(value) {
+        this.elementRef.nativeElement['gridColsMobile'] = value;
     }
-    get color() {
-        return this.elementRef.nativeElement['color'];
+    get gridColsMobile() {
+        return this.elementRef.nativeElement['gridColsMobile'];
     }
-    set textAlign(value) {
-        this.elementRef.nativeElement['textAlign'] = value;
+    set gridColsTablet(value) {
+        this.elementRef.nativeElement['gridColsTablet'] = value;
     }
-    get textAlign() {
-        return this.elementRef.nativeElement['textAlign'];
+    get gridColsTablet() {
+        return this.elementRef.nativeElement['gridColsTablet'];
     }
-    set textAlignMobile(value) {
-        this.elementRef.nativeElement['textAlignMobile'] = value;
+    set gridColsLaptop(value) {
+        this.elementRef.nativeElement['gridColsLaptop'] = value;
     }
-    get textAlignMobile() {
-        return this.elementRef.nativeElement['textAlignMobile'];
+    get gridColsLaptop() {
+        return this.elementRef.nativeElement['gridColsLaptop'];
     }
-    set textAlignTablet(value) {
-        this.elementRef.nativeElement['textAlignTablet'] = value;
+    set justifyContent(value) {
+        this.elementRef.nativeElement['justifyContent'] = value;
     }
-    get textAlignTablet() {
-        return this.elementRef.nativeElement['textAlignTablet'];
+    get justifyContent() {
+        return this.elementRef.nativeElement['justifyContent'];
     }
-    set textAlignLaptop(value) {
-        this.elementRef.nativeElement['textAlignLaptop'] = value;
+    set justifyItems(value) {
+        this.elementRef.nativeElement['justifyItems'] = value;
     }
-    get textAlignLaptop() {
-        return this.elementRef.nativeElement['textAlignLaptop'];
+    get justifyItems() {
+        return this.elementRef.nativeElement['justifyItems'];
     }
-    set textAlignDesktop(value) {
-        this.elementRef.nativeElement['textAlignDesktop'] = value;
+    set alignContent(value) {
+        this.elementRef.nativeElement['alignContent'] = value;
     }
-    get textAlignDesktop() {
-        return this.elementRef.nativeElement['textAlignDesktop'];
+    get alignContent() {
+        return this.elementRef.nativeElement['alignContent'];
     }
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
+    set alignItems(value) {
+        this.elementRef.nativeElement['alignItems'] = value;
     }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
+    get alignItems() {
+        return this.elementRef.nativeElement['alignItems'];
     }
-    set autoSpacing(value) {
-        this.elementRef.nativeElement['autoSpacing'] = value;
+    set justifyContentMobile(value) {
+        this.elementRef.nativeElement['justifyContentMobile'] = value;
     }
-    get autoSpacing() {
-        return this.elementRef.nativeElement['autoSpacing'];
+    get justifyContentMobile() {
+        return this.elementRef.nativeElement['justifyContentMobile'];
+    }
+    set justifyItemsMobile(value) {
+        this.elementRef.nativeElement['justifyItemsMobile'] = value;
+    }
+    get justifyItemsMobile() {
+        return this.elementRef.nativeElement['justifyItemsMobile'];
+    }
+    set alignContentMobile(value) {
+        this.elementRef.nativeElement['alignContentMobile'] = value;
+    }
+    get alignContentMobile() {
+        return this.elementRef.nativeElement['alignContentMobile'];
+    }
+    set alignItemsMobile(value) {
+        this.elementRef.nativeElement['alignItemsMobile'] = value;
+    }
+    get alignItemsMobile() {
+        return this.elementRef.nativeElement['alignItemsMobile'];
+    }
+    set justifyContentTablet(value) {
+        this.elementRef.nativeElement['justifyContentTablet'] = value;
+    }
+    get justifyContentTablet() {
+        return this.elementRef.nativeElement['justifyContentTablet'];
+    }
+    set justifyItemsTablet(value) {
+        this.elementRef.nativeElement['justifyItemsTablet'] = value;
+    }
+    get justifyItemsTablet() {
+        return this.elementRef.nativeElement['justifyItemsTablet'];
+    }
+    set alignContentTablet(value) {
+        this.elementRef.nativeElement['alignContentTablet'] = value;
+    }
+    get alignContentTablet() {
+        return this.elementRef.nativeElement['alignContentTablet'];
+    }
+    set alignItemsTablet(value) {
+        this.elementRef.nativeElement['alignItemsTablet'] = value;
+    }
+    get alignItemsTablet() {
+        return this.elementRef.nativeElement['alignItemsTablet'];
+    }
+    set justifyContentLaptop(value) {
+        this.elementRef.nativeElement['justifyContentLaptop'] = value;
+    }
+    get justifyContentLaptop() {
+        return this.elementRef.nativeElement['justifyContentLaptop'];
+    }
+    set justifyItemsLaptop(value) {
+        this.elementRef.nativeElement['justifyItemsLaptop'] = value;
+    }
+    get justifyItemsLaptop() {
+        return this.elementRef.nativeElement['justifyItemsLaptop'];
+    }
+    set alignContentLaptop(value) {
+        this.elementRef.nativeElement['alignContentLaptop'] = value;
+    }
+    get alignContentLaptop() {
+        return this.elementRef.nativeElement['alignContentLaptop'];
+    }
+    set alignItemsLaptop(value) {
+        this.elementRef.nativeElement['alignItemsLaptop'] = value;
+    }
+    get alignItemsLaptop() {
+        return this.elementRef.nativeElement['alignItemsLaptop'];
+    }
+    set justifyContentDesktop(value) {
+        this.elementRef.nativeElement['justifyContentDesktop'] = value;
+    }
+    get justifyContentDesktop() {
+        return this.elementRef.nativeElement['justifyContentDesktop'];
+    }
+    set justifyItemsDesktop(value) {
+        this.elementRef.nativeElement['justifyItemsDesktop'] = value;
+    }
+    get justifyItemsDesktop() {
+        return this.elementRef.nativeElement['justifyItemsDesktop'];
+    }
+    set alignContentDesktop(value) {
+        this.elementRef.nativeElement['alignContentDesktop'] = value;
+    }
+    get alignContentDesktop() {
+        return this.elementRef.nativeElement['alignContentDesktop'];
+    }
+    set alignItemsDesktop(value) {
+        this.elementRef.nativeElement['alignItemsDesktop'] = value;
+    }
+    get alignItemsDesktop() {
+        return this.elementRef.nativeElement['alignItemsDesktop'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -18211,38 +18163,86 @@ class PxH6 {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH6, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxH6, selector: "px-h6", inputs: { variant: "variant", color: "color", textAlign: ["text-align", "textAlign"], textAlignMobile: ["text-align--mobile", "textAlignMobile"], textAlignTablet: ["text-align--tablet", "textAlignTablet"], textAlignLaptop: ["text-align--laptop", "textAlignLaptop"], textAlignDesktop: ["text-align--desktop", "textAlignDesktop"], inverted: "inverted", autoSpacing: ["auto-spacing", "autoSpacing"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxGrid, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxGrid, selector: "px-grid", inputs: { gridCols: ["grid-cols", "gridCols"], gridColsMobile: ["grid-cols--mobile", "gridColsMobile"], gridColsTablet: ["grid-cols--tablet", "gridColsTablet"], gridColsLaptop: ["grid-cols--laptop", "gridColsLaptop"], justifyContent: ["justify-content", "justifyContent"], justifyItems: ["justify-items", "justifyItems"], alignContent: ["align-content", "alignContent"], alignItems: ["align-items", "alignItems"], justifyContentMobile: ["justify-content--mobile", "justifyContentMobile"], justifyItemsMobile: ["justify-items--mobile", "justifyItemsMobile"], alignContentMobile: ["align-content--mobile", "alignContentMobile"], alignItemsMobile: ["align-items--mobile", "alignItemsMobile"], justifyContentTablet: ["justify-content--tablet", "justifyContentTablet"], justifyItemsTablet: ["justify-items--tablet", "justifyItemsTablet"], alignContentTablet: ["align-content--tablet", "alignContentTablet"], alignItemsTablet: ["align-items--tablet", "alignItemsTablet"], justifyContentLaptop: ["justify-content--laptop", "justifyContentLaptop"], justifyItemsLaptop: ["justify-items--laptop", "justifyItemsLaptop"], alignContentLaptop: ["align-content--laptop", "alignContentLaptop"], alignItemsLaptop: ["align-items--laptop", "alignItemsLaptop"], justifyContentDesktop: ["justify-content--desktop", "justifyContentDesktop"], justifyItemsDesktop: ["justify-items--desktop", "justifyItemsDesktop"], alignContentDesktop: ["align-content--desktop", "alignContentDesktop"], alignItemsDesktop: ["align-items--desktop", "alignItemsDesktop"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxH6, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxGrid, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-h6',
+                    selector: 'px-grid',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], textAlign: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { gridCols: [{
                 type: Input,
-                args: ['text-align']
-            }], textAlignMobile: [{
+                args: ['grid-cols']
+            }], gridColsMobile: [{
                 type: Input,
-                args: ['text-align--mobile']
-            }], textAlignTablet: [{
+                args: ['grid-cols--mobile']
+            }], gridColsTablet: [{
                 type: Input,
-                args: ['text-align--tablet']
-            }], textAlignLaptop: [{
+                args: ['grid-cols--tablet']
+            }], gridColsLaptop: [{
                 type: Input,
-                args: ['text-align--laptop']
-            }], textAlignDesktop: [{
+                args: ['grid-cols--laptop']
+            }], justifyContent: [{
                 type: Input,
-                args: ['text-align--desktop']
-            }], inverted: [{
-                type: Input
-            }], autoSpacing: [{
+                args: ['justify-content']
+            }], justifyItems: [{
                 type: Input,
-                args: ['auto-spacing']
+                args: ['justify-items']
+            }], alignContent: [{
+                type: Input,
+                args: ['align-content']
+            }], alignItems: [{
+                type: Input,
+                args: ['align-items']
+            }], justifyContentMobile: [{
+                type: Input,
+                args: ['justify-content--mobile']
+            }], justifyItemsMobile: [{
+                type: Input,
+                args: ['justify-items--mobile']
+            }], alignContentMobile: [{
+                type: Input,
+                args: ['align-content--mobile']
+            }], alignItemsMobile: [{
+                type: Input,
+                args: ['align-items--mobile']
+            }], justifyContentTablet: [{
+                type: Input,
+                args: ['justify-content--tablet']
+            }], justifyItemsTablet: [{
+                type: Input,
+                args: ['justify-items--tablet']
+            }], alignContentTablet: [{
+                type: Input,
+                args: ['align-content--tablet']
+            }], alignItemsTablet: [{
+                type: Input,
+                args: ['align-items--tablet']
+            }], justifyContentLaptop: [{
+                type: Input,
+                args: ['justify-content--laptop']
+            }], justifyItemsLaptop: [{
+                type: Input,
+                args: ['justify-items--laptop']
+            }], alignContentLaptop: [{
+                type: Input,
+                args: ['align-content--laptop']
+            }], alignItemsLaptop: [{
+                type: Input,
+                args: ['align-items--laptop']
+            }], justifyContentDesktop: [{
+                type: Input,
+                args: ['justify-content--desktop']
+            }], justifyItemsDesktop: [{
+                type: Input,
+                args: ['justify-items--desktop']
+            }], alignContentDesktop: [{
+                type: Input,
+                args: ['align-content--desktop']
+            }], alignItemsDesktop: [{
+                type: Input,
+                args: ['align-items--desktop']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -28057,172 +28057,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input,
                 args: ['word-break-all--desktop']
             }] } });
-/**
- * @description Type-only wrapper for <px-card-actions>
- */
-class PxCardActions {
-    elementRef;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardActions, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCardActions, selector: "px-card-actions", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardActions, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-card-actions',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-/**
- * @description Type-only wrapper for <px-card-container>
- */
-class PxCardContainer {
-    elementRef;
-    /** Switches to a dark surface with inverted text colors. */
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
-    }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
-    }
-    /** URL of the card media image. */
-    set src(value) {
-        this.elementRef.nativeElement['src'] = value;
-    }
-    get src() {
-        return this.elementRef.nativeElement['src'];
-    }
-    /** Where the media image is rendered. */
-    set mediaPosition(value) {
-        this.elementRef.nativeElement['mediaPosition'] = value;
-    }
-    get mediaPosition() {
-        return this.elementRef.nativeElement['mediaPosition'];
-    }
-    /** How the media image is fitted. */
-    set mediaSize(value) {
-        this.elementRef.nativeElement['mediaSize'] = value;
-    }
-    get mediaSize() {
-        return this.elementRef.nativeElement['mediaSize'];
-    }
-    set mediaAltText(value) {
-        this.elementRef.nativeElement['mediaAltText'] = value;
-    }
-    get mediaAltText() {
-        return this.elementRef.nativeElement['mediaAltText'];
-    }
-    /** Inner content padding size. */
-    set padding(value) {
-        this.elementRef.nativeElement['padding'] = value;
-    }
-    get padding() {
-        return this.elementRef.nativeElement['padding'];
-    }
-    /** Aspect ratio applied to top media (e.g. `'16:9'`, `'1:1'`, `'4:3'`). */
-    set aspectRatio(value) {
-        this.elementRef.nativeElement['aspectRatio'] = value;
-    }
-    get aspectRatio() {
-        return this.elementRef.nativeElement['aspectRatio'];
-    }
-    /** Whether the card has a visible border. */
-    set hasBorder(value) {
-        this.elementRef.nativeElement['hasBorder'] = value;
-    }
-    get hasBorder() {
-        return this.elementRef.nativeElement['hasBorder'];
-    }
-    /** Surface color preset. */
-    set backgroundColor(value) {
-        this.elementRef.nativeElement['backgroundColor'] = value;
-    }
-    get backgroundColor() {
-        return this.elementRef.nativeElement['backgroundColor'];
-    }
-    /** URL of a full-card background image (delegated to `<px-container>`). */
-    set backgroundImage(value) {
-        this.elementRef.nativeElement['backgroundImage'] = value;
-    }
-    get backgroundImage() {
-        return this.elementRef.nativeElement['backgroundImage'];
-    }
-    set interactiveState(value) {
-        this.elementRef.nativeElement['interactiveState'] = value;
-    }
-    get interactiveState() {
-        return this.elementRef.nativeElement['interactiveState'];
-    }
-    /** Alt text for the media image. */
-    set alternativeText(value) {
-        this.elementRef.nativeElement['alternativeText'] = value;
-    }
-    get alternativeText() {
-        return this.elementRef.nativeElement['alternativeText'];
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCardContainer, selector: "px-card-container", inputs: { inverted: "inverted", src: "src", mediaPosition: ["media-position", "mediaPosition"], mediaSize: ["media-size", "mediaSize"], mediaAltText: ["media-alt-text", "mediaAltText"], padding: "padding", aspectRatio: ["aspect-ratio", "aspectRatio"], hasBorder: ["has-border", "hasBorder"], backgroundColor: ["background-color", "backgroundColor"], backgroundImage: ["background-image", "backgroundImage"], interactiveState: ["interactive-state", "interactiveState"], alternativeText: ["alternative-text", "alternativeText"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardContainer, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-card-container',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], mediaPosition: [{
-                type: Input,
-                args: ['media-position']
-            }], mediaSize: [{
-                type: Input,
-                args: ['media-size']
-            }], mediaAltText: [{
-                type: Input,
-                args: ['media-alt-text']
-            }], padding: [{
-                type: Input
-            }], aspectRatio: [{
-                type: Input,
-                args: ['aspect-ratio']
-            }], hasBorder: [{
-                type: Input,
-                args: ['has-border']
-            }], backgroundColor: [{
-                type: Input,
-                args: ['background-color']
-            }], backgroundImage: [{
-                type: Input,
-                args: ['background-image']
-            }], interactiveState: [{
-                type: Input,
-                args: ['interactive-state']
-            }], alternativeText: [{
-                type: Input,
-                args: ['alternative-text']
-            }] } });
-/**
- * @description Type-only wrapper for <px-card-heading>
- */
-class PxCardHeading {
-    elementRef;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardHeading, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCardHeading, selector: "px-card-heading", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardHeading, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-card-heading',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
  * @description Type-only wrapper for <px-price>
  */
@@ -28727,6 +28561,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input,
                 args: ['word-break-all--desktop']
             }] } });
+/**
+ * @description Type-only wrapper for <px-card-actions>
+ */
+class PxCardActions {
+    elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardActions, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCardActions, selector: "px-card-actions", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-card-actions',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+/**
+ * @description Type-only wrapper for <px-card-container>
+ */
+class PxCardContainer {
+    elementRef;
+    /** Switches to a dark surface with inverted text colors. */
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
+    }
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
+    }
+    /** URL of the card media image. */
+    set src(value) {
+        this.elementRef.nativeElement['src'] = value;
+    }
+    get src() {
+        return this.elementRef.nativeElement['src'];
+    }
+    /** Where the media image is rendered. */
+    set mediaPosition(value) {
+        this.elementRef.nativeElement['mediaPosition'] = value;
+    }
+    get mediaPosition() {
+        return this.elementRef.nativeElement['mediaPosition'];
+    }
+    /** How the media image is fitted. */
+    set mediaSize(value) {
+        this.elementRef.nativeElement['mediaSize'] = value;
+    }
+    get mediaSize() {
+        return this.elementRef.nativeElement['mediaSize'];
+    }
+    set mediaAltText(value) {
+        this.elementRef.nativeElement['mediaAltText'] = value;
+    }
+    get mediaAltText() {
+        return this.elementRef.nativeElement['mediaAltText'];
+    }
+    /** Inner content padding size. */
+    set padding(value) {
+        this.elementRef.nativeElement['padding'] = value;
+    }
+    get padding() {
+        return this.elementRef.nativeElement['padding'];
+    }
+    /** Aspect ratio applied to top media (e.g. `'16:9'`, `'1:1'`, `'4:3'`). */
+    set aspectRatio(value) {
+        this.elementRef.nativeElement['aspectRatio'] = value;
+    }
+    get aspectRatio() {
+        return this.elementRef.nativeElement['aspectRatio'];
+    }
+    /** Whether the card has a visible border. */
+    set hasBorder(value) {
+        this.elementRef.nativeElement['hasBorder'] = value;
+    }
+    get hasBorder() {
+        return this.elementRef.nativeElement['hasBorder'];
+    }
+    /** Surface color preset. */
+    set backgroundColor(value) {
+        this.elementRef.nativeElement['backgroundColor'] = value;
+    }
+    get backgroundColor() {
+        return this.elementRef.nativeElement['backgroundColor'];
+    }
+    /** URL of a full-card background image (delegated to `<px-container>`). */
+    set backgroundImage(value) {
+        this.elementRef.nativeElement['backgroundImage'] = value;
+    }
+    get backgroundImage() {
+        return this.elementRef.nativeElement['backgroundImage'];
+    }
+    set interactiveState(value) {
+        this.elementRef.nativeElement['interactiveState'] = value;
+    }
+    get interactiveState() {
+        return this.elementRef.nativeElement['interactiveState'];
+    }
+    /** Alt text for the media image. */
+    set alternativeText(value) {
+        this.elementRef.nativeElement['alternativeText'] = value;
+    }
+    get alternativeText() {
+        return this.elementRef.nativeElement['alternativeText'];
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCardContainer, selector: "px-card-container", inputs: { inverted: "inverted", src: "src", mediaPosition: ["media-position", "mediaPosition"], mediaSize: ["media-size", "mediaSize"], mediaAltText: ["media-alt-text", "mediaAltText"], padding: "padding", aspectRatio: ["aspect-ratio", "aspectRatio"], hasBorder: ["has-border", "hasBorder"], backgroundColor: ["background-color", "backgroundColor"], backgroundImage: ["background-image", "backgroundImage"], interactiveState: ["interactive-state", "interactiveState"], alternativeText: ["alternative-text", "alternativeText"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardContainer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-card-container',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], mediaPosition: [{
+                type: Input,
+                args: ['media-position']
+            }], mediaSize: [{
+                type: Input,
+                args: ['media-size']
+            }], mediaAltText: [{
+                type: Input,
+                args: ['media-alt-text']
+            }], padding: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input,
+                args: ['aspect-ratio']
+            }], hasBorder: [{
+                type: Input,
+                args: ['has-border']
+            }], backgroundColor: [{
+                type: Input,
+                args: ['background-color']
+            }], backgroundImage: [{
+                type: Input,
+                args: ['background-image']
+            }], interactiveState: [{
+                type: Input,
+                args: ['interactive-state']
+            }], alternativeText: [{
+                type: Input,
+                args: ['alternative-text']
+            }] } });
+/**
+ * @description Type-only wrapper for <px-card-heading>
+ */
+class PxCardHeading {
+    elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardHeading, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCardHeading, selector: "px-card-heading", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCardHeading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-card-heading',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
  * @description Type-only wrapper for <px-radio>
  */
@@ -35300,6 +35300,12 @@ class PxStatusCard {
     get statusIconAriaLabel() {
         return this.elementRef.nativeElement['statusIconAriaLabel'];
     }
+    set backgroundColor(value) {
+        this.elementRef.nativeElement['backgroundColor'] = value;
+    }
+    get backgroundColor() {
+        return this.elementRef.nativeElement['backgroundColor'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -35620,7 +35626,7 @@ class PxStatusCard {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxStatusCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxStatusCard, selector: "px-status-card", inputs: { state: "state", inverted: "inverted", statusIconAriaLabel: ["status-icon-aria-label", "statusIconAriaLabel"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, outputs: { CLOSE_EVENT: "CLOSE_EVENT" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxStatusCard, selector: "px-status-card", inputs: { state: "state", inverted: "inverted", statusIconAriaLabel: ["status-icon-aria-label", "statusIconAriaLabel"], backgroundColor: ["background-color", "backgroundColor"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"], wordBreakAll: ["word-break-all", "wordBreakAll"], wordBreakAllMobile: ["word-break-all--mobile", "wordBreakAllMobile"], wordBreakAllTablet: ["word-break-all--tablet", "wordBreakAllTablet"], wordBreakAllLaptop: ["word-break-all--laptop", "wordBreakAllLaptop"], wordBreakAllDesktop: ["word-break-all--desktop", "wordBreakAllDesktop"] }, outputs: { CLOSE_EVENT: "CLOSE_EVENT" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxStatusCard, decorators: [{
             type: Directive,
@@ -35634,6 +35640,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], statusIconAriaLabel: [{
                 type: Input,
                 args: ['status-icon-aria-label']
+            }], backgroundColor: [{
+                type: Input,
+                args: ['background-color']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -41157,7 +41166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 class Lavender {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: Lavender, declarations: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButton, PxButtonWrapper, PxButtonIcon, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider], exports: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButton, PxButtonWrapper, PxButtonIcon, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: Lavender, declarations: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButtonIcon, PxButton, PxButtonWrapper, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxGrid, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxPrice, PxCardActions, PxCardContainer, PxCardHeading, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider], exports: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButtonIcon, PxButton, PxButtonWrapper, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxGrid, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxPrice, PxCardActions, PxCardContainer, PxCardHeading, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender, decorators: [{
@@ -41171,9 +41180,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxBanner,
                         PxBreadcrumbItem,
                         PxBreadcrumb,
+                        PxButtonIcon,
                         PxButton,
                         PxButtonWrapper,
-                        PxButtonIcon,
                         PxCard,
                         PxAppleseed,
                         PxCarousel,
@@ -41192,13 +41201,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxDrawer,
                         PxDropdown,
                         PxFieldset,
-                        PxGrid,
                         PxH1,
                         PxH2,
                         PxH3,
                         PxH4,
                         PxH5,
                         PxH6,
+                        PxGrid,
                         PxHeadingGroup,
                         PxImg,
                         PxPicture,
@@ -41218,10 +41227,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxModal,
                         PxP,
                         PxPillar,
+                        PxPrice,
                         PxCardActions,
                         PxCardContainer,
                         PxCardHeading,
-                        PxPrice,
                         PxRadio,
                         PxRadioBase,
                         PxRadioGroup,
@@ -41273,9 +41282,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxBanner,
                         PxBreadcrumbItem,
                         PxBreadcrumb,
+                        PxButtonIcon,
                         PxButton,
                         PxButtonWrapper,
-                        PxButtonIcon,
                         PxCard,
                         PxAppleseed,
                         PxCarousel,
@@ -41294,13 +41303,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxDrawer,
                         PxDropdown,
                         PxFieldset,
-                        PxGrid,
                         PxH1,
                         PxH2,
                         PxH3,
                         PxH4,
                         PxH5,
                         PxH6,
+                        PxGrid,
                         PxHeadingGroup,
                         PxImg,
                         PxPicture,
@@ -41320,10 +41329,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxModal,
                         PxP,
                         PxPillar,
+                        PxPrice,
                         PxCardActions,
                         PxCardContainer,
                         PxCardHeading,
-                        PxPrice,
                         PxRadio,
                         PxRadioBase,
                         PxRadioGroup,