@proximus/lavender-angular 1.4.15-alpha.2 → 1.4.15-alpha.21

package/fesm2022/proximus-lavender-angular.mjs

@@ -18449,45 +18449,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
- * @description Type-only wrapper for <px-input>
+ * @description Type-only wrapper for <px-img>
  */
-class PxInput {
+class PxImg {
     elementRef;
-    set state(value) {
-        this.elementRef.nativeElement['state'] = value;
+    /** The URL of the image. */
+    set src(value) {
+        this.elementRef.nativeElement['src'] = value;
     }
-    get state() {
-        return this.elementRef.nativeElement['state'];
+    get src() {
+        return this.elementRef.nativeElement['src'];
     }
-    set extended(value) {
-        this.elementRef.nativeElement['extended'] = value;
+    /** The alternative text for the image. */
+    set alt(value) {
+        this.elementRef.nativeElement['alt'] = value;
     }
-    get extended() {
-        return this.elementRef.nativeElement['extended'];
+    get alt() {
+        return this.elementRef.nativeElement['alt'];
     }
-    set extendedMobile(value) {
-        this.elementRef.nativeElement['extendedMobile'] = value;
+    /** The loading strategy for the image ('lazy' or 'eager'). */
+    set loading(value) {
+        this.elementRef.nativeElement['loading'] = value;
     }
-    get extendedMobile() {
-        return this.elementRef.nativeElement['extendedMobile'];
+    get loading() {
+        return this.elementRef.nativeElement['loading'];
     }
-    set extendedTablet(value) {
-        this.elementRef.nativeElement['extendedTablet'] = value;
+    set borderRadius(value) {
+        this.elementRef.nativeElement['borderRadius'] = value;
     }
-    get extendedTablet() {
-        return this.elementRef.nativeElement['extendedTablet'];
+    get borderRadius() {
+        return this.elementRef.nativeElement['borderRadius'];
     }
-    set extendedLaptop(value) {
-        this.elementRef.nativeElement['extendedLaptop'] = value;
+    set noBorderRadius(value) {
+        this.elementRef.nativeElement['noBorderRadius'] = value;
     }
-    get extendedLaptop() {
-        return this.elementRef.nativeElement['extendedLaptop'];
+    get noBorderRadius() {
+        return this.elementRef.nativeElement['noBorderRadius'];
     }
-    set extendedDesktop(value) {
-        this.elementRef.nativeElement['extendedDesktop'] = value;
+    set noBorderRadiusMobile(value) {
+        this.elementRef.nativeElement['noBorderRadiusMobile'] = value;
     }
-    get extendedDesktop() {
-        return this.elementRef.nativeElement['extendedDesktop'];
+    get noBorderRadiusMobile() {
+        return this.elementRef.nativeElement['noBorderRadiusMobile'];
+    }
+    set noBorderRadiusTablet(value) {
+        this.elementRef.nativeElement['noBorderRadiusTablet'] = value;
+    }
+    get noBorderRadiusTablet() {
+        return this.elementRef.nativeElement['noBorderRadiusTablet'];
+    }
+    set noBorderRadiusLaptop(value) {
+        this.elementRef.nativeElement['noBorderRadiusLaptop'] = value;
+    }
+    get noBorderRadiusLaptop() {
+        return this.elementRef.nativeElement['noBorderRadiusLaptop'];
+    }
+    set width(value) {
+        this.elementRef.nativeElement['width'] = value;
+    }
+    get width() {
+        return this.elementRef.nativeElement['width'];
+    }
+    set widthMobile(value) {
+        this.elementRef.nativeElement['widthMobile'] = value;
+    }
+    get widthMobile() {
+        return this.elementRef.nativeElement['widthMobile'];
+    }
+    set widthTablet(value) {
+        this.elementRef.nativeElement['widthTablet'] = value;
+    }
+    get widthTablet() {
+        return this.elementRef.nativeElement['widthTablet'];
+    }
+    set widthLaptop(value) {
+        this.elementRef.nativeElement['widthLaptop'] = value;
+    }
+    get widthLaptop() {
+        return this.elementRef.nativeElement['widthLaptop'];
+    }
+    set widthDesktop(value) {
+        this.elementRef.nativeElement['widthDesktop'] = value;
+    }
+    get widthDesktop() {
+        return this.elementRef.nativeElement['widthDesktop'];
+    }
+    set cover(value) {
+        this.elementRef.nativeElement['cover'] = value;
+    }
+    get cover() {
+        return this.elementRef.nativeElement['cover'];
+    }
+    set disabled(value) {
+        this.elementRef.nativeElement['disabled'] = value;
+    }
+    get disabled() {
+        return this.elementRef.nativeElement['disabled'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -18801,38 +18858,57 @@ class PxInput {
     get wordBreakAllDesktop() {
         return this.elementRef.nativeElement['wordBreakAllDesktop'];
     }
-    event = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this.elementRef.nativeElement.addEventListener('event', (e) => {
-            this.event.emit(e.detail);
-        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxInput, isStandalone: true, selector: "px-input", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], 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: { event: "event" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxImg, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxImg, isStandalone: true, selector: "px-img", inputs: { src: "src", alt: "alt", loading: "loading", borderRadius: ["border-radius", "borderRadius"], noBorderRadius: ["no-border-radius", "noBorderRadius"], noBorderRadiusMobile: ["no-border-radius--mobile", "noBorderRadiusMobile"], noBorderRadiusTablet: ["no-border-radius--tablet", "noBorderRadiusTablet"], noBorderRadiusLaptop: ["no-border-radius--laptop", "noBorderRadiusLaptop"], width: "width", widthMobile: ["width--mobile", "widthMobile"], widthTablet: ["width--tablet", "widthTablet"], widthLaptop: ["width--laptop", "widthLaptop"], widthDesktop: ["width--desktop", "widthDesktop"], cover: "cover", 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: "19.2.25", ngImport: i0, type: PxInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxImg, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-input',
+                    selector: 'px-img',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { src: [{
                 type: Input
-            }], extended: [{
+            }], alt: [{
                 type: Input
-            }], extendedMobile: [{
+            }], loading: [{
+                type: Input
+            }], borderRadius: [{
                 type: Input,
-                args: ['extended--mobile']
-            }], extendedTablet: [{
+                args: ['border-radius']
+            }], noBorderRadius: [{
                 type: Input,
-                args: ['extended--tablet']
-            }], extendedLaptop: [{
+                args: ['no-border-radius']
+            }], noBorderRadiusMobile: [{
                 type: Input,
-                args: ['extended--laptop']
-            }], extendedDesktop: [{
+                args: ['no-border-radius--mobile']
+            }], noBorderRadiusTablet: [{
                 type: Input,
-                args: ['extended--desktop']
+                args: ['no-border-radius--tablet']
+            }], noBorderRadiusLaptop: [{
+                type: Input,
+                args: ['no-border-radius--laptop']
+            }], width: [{
+                type: Input
+            }], widthMobile: [{
+                type: Input,
+                args: ['width--mobile']
+            }], widthTablet: [{
+                type: Input,
+                args: ['width--tablet']
+            }], widthLaptop: [{
+                type: Input,
+                args: ['width--laptop']
+            }], widthDesktop: [{
+                type: Input,
+                args: ['width--desktop']
+            }], cover: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -18984,79 +19060,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], wordBreakAllDesktop: [{
                 type: Input,
                 args: ['word-break-all--desktop']
-            }], event: [{
-                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-select>
+ * @description Type-only wrapper for <px-picture>
  */
-class PxSelect {
+class PxPicture {
     elementRef;
-    set state(value) {
-        this.elementRef.nativeElement['state'] = value;
-    }
-    get state() {
-        return this.elementRef.nativeElement['state'];
+    set loading(value) {
+        this.elementRef.nativeElement['loading'] = value;
     }
-    set extended(value) {
-        this.elementRef.nativeElement['extended'] = value;
+    get loading() {
+        return this.elementRef.nativeElement['loading'];
     }
-    get extended() {
-        return this.elementRef.nativeElement['extended'];
+    set alt(value) {
+        this.elementRef.nativeElement['alt'] = value;
     }
-    set extendedMobile(value) {
-        this.elementRef.nativeElement['extendedMobile'] = value;
+    get alt() {
+        return this.elementRef.nativeElement['alt'];
     }
-    get extendedMobile() {
-        return this.elementRef.nativeElement['extendedMobile'];
+    set src(value) {
+        this.elementRef.nativeElement['src'] = value;
     }
-    set extendedTablet(value) {
-        this.elementRef.nativeElement['extendedTablet'] = value;
+    get src() {
+        return this.elementRef.nativeElement['src'];
     }
-    get extendedTablet() {
-        return this.elementRef.nativeElement['extendedTablet'];
+    set borderRadius(value) {
+        this.elementRef.nativeElement['borderRadius'] = value;
     }
-    set extendedLaptop(value) {
-        this.elementRef.nativeElement['extendedLaptop'] = value;
+    get borderRadius() {
+        return this.elementRef.nativeElement['borderRadius'];
     }
-    get extendedLaptop() {
-        return this.elementRef.nativeElement['extendedLaptop'];
+    set noBorderRadius(value) {
+        this.elementRef.nativeElement['noBorderRadius'] = value;
     }
-    set extendedDesktop(value) {
-        this.elementRef.nativeElement['extendedDesktop'] = value;
+    get noBorderRadius() {
+        return this.elementRef.nativeElement['noBorderRadius'];
     }
-    get extendedDesktop() {
-        return this.elementRef.nativeElement['extendedDesktop'];
+    set noBorderRadiusMobile(value) {
+        this.elementRef.nativeElement['noBorderRadiusMobile'] = value;
     }
-    set grow(value) {
-        this.elementRef.nativeElement['grow'] = value;
+    get noBorderRadiusMobile() {
+        return this.elementRef.nativeElement['noBorderRadiusMobile'];
     }
-    get grow() {
-        return this.elementRef.nativeElement['grow'];
+    set noBorderRadiusTablet(value) {
+        this.elementRef.nativeElement['noBorderRadiusTablet'] = value;
     }
-    set growMobile(value) {
-        this.elementRef.nativeElement['growMobile'] = value;
+    get noBorderRadiusTablet() {
+        return this.elementRef.nativeElement['noBorderRadiusTablet'];
     }
-    get growMobile() {
-        return this.elementRef.nativeElement['growMobile'];
+    set noBorderRadiusLaptop(value) {
+        this.elementRef.nativeElement['noBorderRadiusLaptop'] = value;
     }
-    set growTablet(value) {
-        this.elementRef.nativeElement['growTablet'] = value;
+    get noBorderRadiusLaptop() {
+        return this.elementRef.nativeElement['noBorderRadiusLaptop'];
     }
-    get growTablet() {
-        return this.elementRef.nativeElement['growTablet'];
+    set width(value) {
+        this.elementRef.nativeElement['width'] = value;
     }
-    set growLaptop(value) {
-        this.elementRef.nativeElement['growLaptop'] = value;
+    get width() {
+        return this.elementRef.nativeElement['width'];
     }
-    get growLaptop() {
-        return this.elementRef.nativeElement['growLaptop'];
+    set widthMobile(value) {
+        this.elementRef.nativeElement['widthMobile'] = value;
     }
-    set growDesktop(value) {
-        this.elementRef.nativeElement['growDesktop'] = value;
+    get widthMobile() {
+        return this.elementRef.nativeElement['widthMobile'];
     }
-    get growDesktop() {
-        return this.elementRef.nativeElement['growDesktop'];
+    set widthTablet(value) {
+        this.elementRef.nativeElement['widthTablet'] = value;
+    }
+    get widthTablet() {
+        return this.elementRef.nativeElement['widthTablet'];
+    }
+    set widthLaptop(value) {
+        this.elementRef.nativeElement['widthLaptop'] = value;
+    }
+    get widthLaptop() {
+        return this.elementRef.nativeElement['widthLaptop'];
+    }
+    set widthDesktop(value) {
+        this.elementRef.nativeElement['widthDesktop'] = value;
+    }
+    get widthDesktop() {
+        return this.elementRef.nativeElement['widthDesktop'];
+    }
+    set cover(value) {
+        this.elementRef.nativeElement['cover'] = value;
+    }
+    get cover() {
+        return this.elementRef.nativeElement['cover'];
+    }
+    set disabled(value) {
+        this.elementRef.nativeElement['disabled'] = value;
+    }
+    get disabled() {
+        return this.elementRef.nativeElement['disabled'];
+    }
+    set grow(value) {
+        this.elementRef.nativeElement['grow'] = value;
+    }
+    get grow() {
+        return this.elementRef.nativeElement['grow'];
+    }
+    set growMobile(value) {
+        this.elementRef.nativeElement['growMobile'] = value;
+    }
+    get growMobile() {
+        return this.elementRef.nativeElement['growMobile'];
+    }
+    set growTablet(value) {
+        this.elementRef.nativeElement['growTablet'] = value;
+    }
+    get growTablet() {
+        return this.elementRef.nativeElement['growTablet'];
+    }
+    set growLaptop(value) {
+        this.elementRef.nativeElement['growLaptop'] = value;
+    }
+    get growLaptop() {
+        return this.elementRef.nativeElement['growLaptop'];
+    }
+    set growDesktop(value) {
+        this.elementRef.nativeElement['growDesktop'] = value;
+    }
+    get growDesktop() {
+        return this.elementRef.nativeElement['growDesktop'];
     }
     set shrink(value) {
         this.elementRef.nativeElement['shrink'] = value;
@@ -19340,38 +19468,57 @@ class PxSelect {
     get wordBreakAllDesktop() {
         return this.elementRef.nativeElement['wordBreakAllDesktop'];
     }
-    event = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this.elementRef.nativeElement.addEventListener('event', (e) => {
-            this.event.emit(e.detail);
-        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelect, isStandalone: true, selector: "px-select", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], 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: { event: "event" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxPicture, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxPicture, isStandalone: true, selector: "px-picture", inputs: { loading: "loading", alt: "alt", src: "src", borderRadius: ["border-radius", "borderRadius"], noBorderRadius: ["no-border-radius", "noBorderRadius"], noBorderRadiusMobile: ["no-border-radius--mobile", "noBorderRadiusMobile"], noBorderRadiusTablet: ["no-border-radius--tablet", "noBorderRadiusTablet"], noBorderRadiusLaptop: ["no-border-radius--laptop", "noBorderRadiusLaptop"], width: "width", widthMobile: ["width--mobile", "widthMobile"], widthTablet: ["width--tablet", "widthTablet"], widthLaptop: ["width--laptop", "widthLaptop"], widthDesktop: ["width--desktop", "widthDesktop"], cover: "cover", 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: "19.2.25", ngImport: i0, type: PxSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxPicture, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-select',
+                    selector: 'px-picture',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loading: [{
                 type: Input
-            }], extended: [{
+            }], alt: [{
                 type: Input
-            }], extendedMobile: [{
+            }], src: [{
+                type: Input
+            }], borderRadius: [{
                 type: Input,
-                args: ['extended--mobile']
-            }], extendedTablet: [{
+                args: ['border-radius']
+            }], noBorderRadius: [{
                 type: Input,
-                args: ['extended--tablet']
-            }], extendedLaptop: [{
+                args: ['no-border-radius']
+            }], noBorderRadiusMobile: [{
                 type: Input,
-                args: ['extended--laptop']
-            }], extendedDesktop: [{
+                args: ['no-border-radius--mobile']
+            }], noBorderRadiusTablet: [{
                 type: Input,
-                args: ['extended--desktop']
+                args: ['no-border-radius--tablet']
+            }], noBorderRadiusLaptop: [{
+                type: Input,
+                args: ['no-border-radius--laptop']
+            }], width: [{
+                type: Input
+            }], widthMobile: [{
+                type: Input,
+                args: ['width--mobile']
+            }], widthTablet: [{
+                type: Input,
+                args: ['width--tablet']
+            }], widthLaptop: [{
+                type: Input,
+                args: ['width--laptop']
+            }], widthDesktop: [{
+                type: Input,
+                args: ['width--desktop']
+            }], cover: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -19523,13 +19670,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], wordBreakAllDesktop: [{
                 type: Input,
                 args: ['word-break-all--desktop']
-            }], event: [{
-                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-textarea>
+ * @description Type-only wrapper for <px-input>
  */
-class PxTextarea {
+class PxInput {
     elementRef;
     set state(value) {
         this.elementRef.nativeElement['state'] = value;
@@ -19567,6 +19712,12 @@ class PxTextarea {
     get extendedDesktop() {
         return this.elementRef.nativeElement['extendedDesktop'];
     }
+    set ariaDescribedby(value) {
+        this.elementRef.nativeElement['ariaDescribedby'] = value;
+    }
+    get ariaDescribedby() {
+        return this.elementRef.nativeElement['ariaDescribedby'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -19886,13 +20037,13 @@ class PxTextarea {
             this.event.emit(e.detail);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxTextarea, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxTextarea, isStandalone: true, selector: "px-textarea", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], 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: { event: "event" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxInput, isStandalone: true, selector: "px-input", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], 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: { event: "event" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-textarea',
+                    selector: 'px-input',
                     standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
@@ -19911,6 +20062,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], extendedDesktop: [{
                 type: Input,
                 args: ['extended--desktop']
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -20066,9 +20220,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-fileupload>
+ * @description Type-only wrapper for <px-select>
  */
-class PxFileupload {
+class PxSelect {
     elementRef;
     set state(value) {
         this.elementRef.nativeElement['state'] = value;
@@ -20106,6 +20260,12 @@ class PxFileupload {
     get extendedDesktop() {
         return this.elementRef.nativeElement['extendedDesktop'];
     }
+    set ariaDescribedby(value) {
+        this.elementRef.nativeElement['ariaDescribedby'] = value;
+    }
+    get ariaDescribedby() {
+        return this.elementRef.nativeElement['ariaDescribedby'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -20425,13 +20585,13 @@ class PxFileupload {
             this.event.emit(e.detail);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxFileupload, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxFileupload, isStandalone: true, selector: "px-fileupload", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], 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: { event: "event" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelect, isStandalone: true, selector: "px-select", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], 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: { event: "event" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxFileupload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelect, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-fileupload',
+                    selector: 'px-select',
                     standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
@@ -20450,6 +20610,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], extendedDesktop: [{
                 type: Input,
                 args: ['extended--desktop']
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -20605,102 +20768,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-img>
+ * @description Type-only wrapper for <px-textarea>
  */
-class PxImg {
+class PxTextarea {
     elementRef;
-    /** The URL of the image. */
-    set src(value) {
-        this.elementRef.nativeElement['src'] = value;
-    }
-    get src() {
-        return this.elementRef.nativeElement['src'];
-    }
-    /** The alternative text for the image. */
-    set alt(value) {
-        this.elementRef.nativeElement['alt'] = value;
-    }
-    get alt() {
-        return this.elementRef.nativeElement['alt'];
-    }
-    /** The loading strategy for the image ('lazy' or 'eager'). */
-    set loading(value) {
-        this.elementRef.nativeElement['loading'] = value;
-    }
-    get loading() {
-        return this.elementRef.nativeElement['loading'];
-    }
-    set borderRadius(value) {
-        this.elementRef.nativeElement['borderRadius'] = value;
-    }
-    get borderRadius() {
-        return this.elementRef.nativeElement['borderRadius'];
-    }
-    set noBorderRadius(value) {
-        this.elementRef.nativeElement['noBorderRadius'] = value;
-    }
-    get noBorderRadius() {
-        return this.elementRef.nativeElement['noBorderRadius'];
-    }
-    set noBorderRadiusMobile(value) {
-        this.elementRef.nativeElement['noBorderRadiusMobile'] = value;
-    }
-    get noBorderRadiusMobile() {
-        return this.elementRef.nativeElement['noBorderRadiusMobile'];
-    }
-    set noBorderRadiusTablet(value) {
-        this.elementRef.nativeElement['noBorderRadiusTablet'] = value;
-    }
-    get noBorderRadiusTablet() {
-        return this.elementRef.nativeElement['noBorderRadiusTablet'];
-    }
-    set noBorderRadiusLaptop(value) {
-        this.elementRef.nativeElement['noBorderRadiusLaptop'] = value;
-    }
-    get noBorderRadiusLaptop() {
-        return this.elementRef.nativeElement['noBorderRadiusLaptop'];
-    }
-    set width(value) {
-        this.elementRef.nativeElement['width'] = value;
+    set state(value) {
+        this.elementRef.nativeElement['state'] = value;
     }
-    get width() {
-        return this.elementRef.nativeElement['width'];
+    get state() {
+        return this.elementRef.nativeElement['state'];
     }
-    set widthMobile(value) {
-        this.elementRef.nativeElement['widthMobile'] = value;
+    set extended(value) {
+        this.elementRef.nativeElement['extended'] = value;
     }
-    get widthMobile() {
-        return this.elementRef.nativeElement['widthMobile'];
+    get extended() {
+        return this.elementRef.nativeElement['extended'];
     }
-    set widthTablet(value) {
-        this.elementRef.nativeElement['widthTablet'] = value;
+    set extendedMobile(value) {
+        this.elementRef.nativeElement['extendedMobile'] = value;
     }
-    get widthTablet() {
-        return this.elementRef.nativeElement['widthTablet'];
+    get extendedMobile() {
+        return this.elementRef.nativeElement['extendedMobile'];
     }
-    set widthLaptop(value) {
-        this.elementRef.nativeElement['widthLaptop'] = value;
+    set extendedTablet(value) {
+        this.elementRef.nativeElement['extendedTablet'] = value;
     }
-    get widthLaptop() {
-        return this.elementRef.nativeElement['widthLaptop'];
+    get extendedTablet() {
+        return this.elementRef.nativeElement['extendedTablet'];
     }
-    set widthDesktop(value) {
-        this.elementRef.nativeElement['widthDesktop'] = value;
+    set extendedLaptop(value) {
+        this.elementRef.nativeElement['extendedLaptop'] = value;
     }
-    get widthDesktop() {
-        return this.elementRef.nativeElement['widthDesktop'];
+    get extendedLaptop() {
+        return this.elementRef.nativeElement['extendedLaptop'];
     }
-    set cover(value) {
-        this.elementRef.nativeElement['cover'] = value;
+    set extendedDesktop(value) {
+        this.elementRef.nativeElement['extendedDesktop'] = value;
     }
-    get cover() {
-        return this.elementRef.nativeElement['cover'];
+    get extendedDesktop() {
+        return this.elementRef.nativeElement['extendedDesktop'];
     }
-    set disabled(value) {
-        this.elementRef.nativeElement['disabled'] = value;
+    set ariaDescribedby(value) {
+        this.elementRef.nativeElement['ariaDescribedby'] = value;
     }
-    get disabled() {
-        return this.elementRef.nativeElement['disabled'];
+    get ariaDescribedby() {
+        return this.elementRef.nativeElement['ariaDescribedby'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -21014,57 +21126,41 @@ class PxImg {
     get wordBreakAllDesktop() {
         return this.elementRef.nativeElement['wordBreakAllDesktop'];
     }
+    event = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
+        this.elementRef.nativeElement.addEventListener('event', (e) => {
+            this.event.emit(e.detail);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxImg, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxImg, isStandalone: true, selector: "px-img", inputs: { src: "src", alt: "alt", loading: "loading", borderRadius: ["border-radius", "borderRadius"], noBorderRadius: ["no-border-radius", "noBorderRadius"], noBorderRadiusMobile: ["no-border-radius--mobile", "noBorderRadiusMobile"], noBorderRadiusTablet: ["no-border-radius--tablet", "noBorderRadiusTablet"], noBorderRadiusLaptop: ["no-border-radius--laptop", "noBorderRadiusLaptop"], width: "width", widthMobile: ["width--mobile", "widthMobile"], widthTablet: ["width--tablet", "widthTablet"], widthLaptop: ["width--laptop", "widthLaptop"], widthDesktop: ["width--desktop", "widthDesktop"], cover: "cover", 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: "19.2.25", ngImport: i0, type: PxTextarea, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxTextarea, isStandalone: true, selector: "px-textarea", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], 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: { event: "event" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxImg, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxTextarea, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-img',
+                    selector: 'px-textarea',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { src: [{
-                type: Input
-            }], alt: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
                 type: Input
-            }], loading: [{
+            }], extended: [{
                 type: Input
-            }], borderRadius: [{
-                type: Input,
-                args: ['border-radius']
-            }], noBorderRadius: [{
-                type: Input,
-                args: ['no-border-radius']
-            }], noBorderRadiusMobile: [{
-                type: Input,
-                args: ['no-border-radius--mobile']
-            }], noBorderRadiusTablet: [{
-                type: Input,
-                args: ['no-border-radius--tablet']
-            }], noBorderRadiusLaptop: [{
+            }], extendedMobile: [{
                 type: Input,
-                args: ['no-border-radius--laptop']
-            }], width: [{
-                type: Input
-            }], widthMobile: [{
+                args: ['extended--mobile']
+            }], extendedTablet: [{
                 type: Input,
-                args: ['width--mobile']
-            }], widthTablet: [{
+                args: ['extended--tablet']
+            }], extendedLaptop: [{
                 type: Input,
-                args: ['width--tablet']
-            }], widthLaptop: [{
+                args: ['extended--laptop']
+            }], extendedDesktop: [{
                 type: Input,
-                args: ['width--laptop']
-            }], widthDesktop: [{
+                args: ['extended--desktop']
+            }], ariaDescribedby: [{
                 type: Input,
-                args: ['width--desktop']
-            }], cover: [{
-                type: Input
-            }], disabled: [{
-                type: Input
+                args: ['aria-describedby']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -21216,101 +21312,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], wordBreakAllDesktop: [{
                 type: Input,
                 args: ['word-break-all--desktop']
+            }], event: [{
+                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-picture>
+ * @description Type-only wrapper for <px-fileupload>
  */
-class PxPicture {
+class PxFileupload {
     elementRef;
-    set loading(value) {
-        this.elementRef.nativeElement['loading'] = value;
-    }
-    get loading() {
-        return this.elementRef.nativeElement['loading'];
-    }
-    set alt(value) {
-        this.elementRef.nativeElement['alt'] = value;
-    }
-    get alt() {
-        return this.elementRef.nativeElement['alt'];
-    }
-    set src(value) {
-        this.elementRef.nativeElement['src'] = value;
-    }
-    get src() {
-        return this.elementRef.nativeElement['src'];
-    }
-    set borderRadius(value) {
-        this.elementRef.nativeElement['borderRadius'] = value;
-    }
-    get borderRadius() {
-        return this.elementRef.nativeElement['borderRadius'];
-    }
-    set noBorderRadius(value) {
-        this.elementRef.nativeElement['noBorderRadius'] = value;
-    }
-    get noBorderRadius() {
-        return this.elementRef.nativeElement['noBorderRadius'];
-    }
-    set noBorderRadiusMobile(value) {
-        this.elementRef.nativeElement['noBorderRadiusMobile'] = value;
-    }
-    get noBorderRadiusMobile() {
-        return this.elementRef.nativeElement['noBorderRadiusMobile'];
-    }
-    set noBorderRadiusTablet(value) {
-        this.elementRef.nativeElement['noBorderRadiusTablet'] = value;
-    }
-    get noBorderRadiusTablet() {
-        return this.elementRef.nativeElement['noBorderRadiusTablet'];
-    }
-    set noBorderRadiusLaptop(value) {
-        this.elementRef.nativeElement['noBorderRadiusLaptop'] = value;
-    }
-    get noBorderRadiusLaptop() {
-        return this.elementRef.nativeElement['noBorderRadiusLaptop'];
-    }
-    set width(value) {
-        this.elementRef.nativeElement['width'] = value;
+    set state(value) {
+        this.elementRef.nativeElement['state'] = value;
     }
-    get width() {
-        return this.elementRef.nativeElement['width'];
+    get state() {
+        return this.elementRef.nativeElement['state'];
     }
-    set widthMobile(value) {
-        this.elementRef.nativeElement['widthMobile'] = value;
+    set extended(value) {
+        this.elementRef.nativeElement['extended'] = value;
     }
-    get widthMobile() {
-        return this.elementRef.nativeElement['widthMobile'];
+    get extended() {
+        return this.elementRef.nativeElement['extended'];
     }
-    set widthTablet(value) {
-        this.elementRef.nativeElement['widthTablet'] = value;
+    set extendedMobile(value) {
+        this.elementRef.nativeElement['extendedMobile'] = value;
     }
-    get widthTablet() {
-        return this.elementRef.nativeElement['widthTablet'];
+    get extendedMobile() {
+        return this.elementRef.nativeElement['extendedMobile'];
     }
-    set widthLaptop(value) {
-        this.elementRef.nativeElement['widthLaptop'] = value;
+    set extendedTablet(value) {
+        this.elementRef.nativeElement['extendedTablet'] = value;
     }
-    get widthLaptop() {
-        return this.elementRef.nativeElement['widthLaptop'];
+    get extendedTablet() {
+        return this.elementRef.nativeElement['extendedTablet'];
     }
-    set widthDesktop(value) {
-        this.elementRef.nativeElement['widthDesktop'] = value;
+    set extendedLaptop(value) {
+        this.elementRef.nativeElement['extendedLaptop'] = value;
     }
-    get widthDesktop() {
-        return this.elementRef.nativeElement['widthDesktop'];
+    get extendedLaptop() {
+        return this.elementRef.nativeElement['extendedLaptop'];
     }
-    set cover(value) {
-        this.elementRef.nativeElement['cover'] = value;
+    set extendedDesktop(value) {
+        this.elementRef.nativeElement['extendedDesktop'] = value;
     }
-    get cover() {
-        return this.elementRef.nativeElement['cover'];
+    get extendedDesktop() {
+        return this.elementRef.nativeElement['extendedDesktop'];
     }
-    set disabled(value) {
-        this.elementRef.nativeElement['disabled'] = value;
+    set ariaDescribedby(value) {
+        this.elementRef.nativeElement['ariaDescribedby'] = value;
     }
-    get disabled() {
-        return this.elementRef.nativeElement['disabled'];
+    get ariaDescribedby() {
+        return this.elementRef.nativeElement['ariaDescribedby'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -21624,57 +21674,41 @@ class PxPicture {
     get wordBreakAllDesktop() {
         return this.elementRef.nativeElement['wordBreakAllDesktop'];
     }
+    event = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
+        this.elementRef.nativeElement.addEventListener('event', (e) => {
+            this.event.emit(e.detail);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxPicture, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxPicture, isStandalone: true, selector: "px-picture", inputs: { loading: "loading", alt: "alt", src: "src", borderRadius: ["border-radius", "borderRadius"], noBorderRadius: ["no-border-radius", "noBorderRadius"], noBorderRadiusMobile: ["no-border-radius--mobile", "noBorderRadiusMobile"], noBorderRadiusTablet: ["no-border-radius--tablet", "noBorderRadiusTablet"], noBorderRadiusLaptop: ["no-border-radius--laptop", "noBorderRadiusLaptop"], width: "width", widthMobile: ["width--mobile", "widthMobile"], widthTablet: ["width--tablet", "widthTablet"], widthLaptop: ["width--laptop", "widthLaptop"], widthDesktop: ["width--desktop", "widthDesktop"], cover: "cover", 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: "19.2.25", ngImport: i0, type: PxFileupload, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxFileupload, isStandalone: true, selector: "px-fileupload", inputs: { state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], 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: { event: "event" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxPicture, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxFileupload, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-picture',
+                    selector: 'px-fileupload',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loading: [{
-                type: Input
-            }], alt: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
                 type: Input
-            }], src: [{
+            }], extended: [{
                 type: Input
-            }], borderRadius: [{
-                type: Input,
-                args: ['border-radius']
-            }], noBorderRadius: [{
-                type: Input,
-                args: ['no-border-radius']
-            }], noBorderRadiusMobile: [{
-                type: Input,
-                args: ['no-border-radius--mobile']
-            }], noBorderRadiusTablet: [{
-                type: Input,
-                args: ['no-border-radius--tablet']
-            }], noBorderRadiusLaptop: [{
+            }], extendedMobile: [{
                 type: Input,
-                args: ['no-border-radius--laptop']
-            }], width: [{
-                type: Input
-            }], widthMobile: [{
+                args: ['extended--mobile']
+            }], extendedTablet: [{
                 type: Input,
-                args: ['width--mobile']
-            }], widthTablet: [{
+                args: ['extended--tablet']
+            }], extendedLaptop: [{
                 type: Input,
-                args: ['width--tablet']
-            }], widthLaptop: [{
+                args: ['extended--laptop']
+            }], extendedDesktop: [{
                 type: Input,
-                args: ['width--laptop']
-            }], widthDesktop: [{
+                args: ['extended--desktop']
+            }], ariaDescribedby: [{
                 type: Input,
-                args: ['width--desktop']
-            }], cover: [{
-                type: Input
-            }], disabled: [{
-                type: Input
+                args: ['aria-describedby']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -21826,50 +21860,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], wordBreakAllDesktop: [{
                 type: Input,
                 args: ['word-break-all--desktop']
+            }], event: [{
+                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-page>
+ * @description Type-only wrapper for <px-code-input>
  */
-class PxPage {
+class PxCodeInput {
     elementRef;
-    set backgroundImage(value) {
-        this.elementRef.nativeElement['backgroundImage'] = value;
+    set size(value) {
+        this.elementRef.nativeElement['size'] = value;
     }
-    get backgroundImage() {
-        return this.elementRef.nativeElement['backgroundImage'];
+    get size() {
+        return this.elementRef.nativeElement['size'];
     }
-    set gap(value) {
-        this.elementRef.nativeElement['gap'] = value;
+    set state(value) {
+        this.elementRef.nativeElement['state'] = value;
     }
-    get gap() {
-        return this.elementRef.nativeElement['gap'];
+    get state() {
+        return this.elementRef.nativeElement['state'];
     }
-    set backgroundColor(value) {
-        this.elementRef.nativeElement['backgroundColor'] = value;
+    set extended(value) {
+        this.elementRef.nativeElement['extended'] = value;
     }
-    get backgroundColor() {
-        return this.elementRef.nativeElement['backgroundColor'];
+    get extended() {
+        return this.elementRef.nativeElement['extended'];
     }
-    set paddingVertical(value) {
-        this.elementRef.nativeElement['paddingVertical'] = value;
+    set extendedMobile(value) {
+        this.elementRef.nativeElement['extendedMobile'] = value;
     }
-    get paddingVertical() {
-        return this.elementRef.nativeElement['paddingVertical'];
+    get extendedMobile() {
+        return this.elementRef.nativeElement['extendedMobile'];
     }
-    set paddingHorizontal(value) {
-        this.elementRef.nativeElement['paddingHorizontal'] = value;
+    set extendedTablet(value) {
+        this.elementRef.nativeElement['extendedTablet'] = value;
     }
-    get paddingHorizontal() {
-        return this.elementRef.nativeElement['paddingHorizontal'];
+    get extendedTablet() {
+        return this.elementRef.nativeElement['extendedTablet'];
     }
-    set grow(value) {
-        this.elementRef.nativeElement['grow'] = value;
+    set extendedLaptop(value) {
+        this.elementRef.nativeElement['extendedLaptop'] = value;
     }
-    get grow() {
-        return this.elementRef.nativeElement['grow'];
+    get extendedLaptop() {
+        return this.elementRef.nativeElement['extendedLaptop'];
     }
-    set growMobile(value) {
-        this.elementRef.nativeElement['growMobile'] = value;
+    set extendedDesktop(value) {
+        this.elementRef.nativeElement['extendedDesktop'] = value;
+    }
+    get extendedDesktop() {
+        return this.elementRef.nativeElement['extendedDesktop'];
+    }
+    set ariaDescribedby(value) {
+        this.elementRef.nativeElement['ariaDescribedby'] = value;
+    }
+    get ariaDescribedby() {
+        return this.elementRef.nativeElement['ariaDescribedby'];
+    }
+    set grow(value) {
+        this.elementRef.nativeElement['grow'] = value;
+    }
+    get grow() {
+        return this.elementRef.nativeElement['grow'];
+    }
+    set growMobile(value) {
+        this.elementRef.nativeElement['growMobile'] = value;
     }
     get growMobile() {
         return this.elementRef.nativeElement['growMobile'];
@@ -22174,32 +22228,43 @@ class PxPage {
     get wordBreakAllDesktop() {
         return this.elementRef.nativeElement['wordBreakAllDesktop'];
     }
+    event = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
+        this.elementRef.nativeElement.addEventListener('event', (e) => {
+            this.event.emit(e.detail);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxPage, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxPage, isStandalone: true, selector: "px-page", inputs: { backgroundImage: ["background-image", "backgroundImage"], gap: "gap", backgroundColor: ["background-color", "backgroundColor"], paddingVertical: ["padding-vertical", "paddingVertical"], paddingHorizontal: ["padding-horizontal", "paddingHorizontal"], 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: "19.2.25", ngImport: i0, type: PxCodeInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxCodeInput, isStandalone: true, selector: "px-code-input", inputs: { size: "size", state: "state", extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], 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: { event: "event" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxCodeInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-page',
+                    selector: 'px-code-input',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { backgroundImage: [{
-                type: Input,
-                args: ['background-image']
-            }], gap: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{
                 type: Input
-            }], backgroundColor: [{
+            }], state: [{
+                type: Input
+            }], extended: [{
+                type: Input
+            }], extendedMobile: [{
                 type: Input,
-                args: ['background-color']
-            }], paddingVertical: [{
+                args: ['extended--mobile']
+            }], extendedTablet: [{
                 type: Input,
-                args: ['padding-vertical']
-            }], paddingHorizontal: [{
+                args: ['extended--tablet']
+            }], extendedLaptop: [{
                 type: Input,
-                args: ['padding-horizontal']
+                args: ['extended--laptop']
+            }], extendedDesktop: [{
+                type: Input,
+                args: ['extended--desktop']
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -22351,168 +22416,695 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], wordBreakAllDesktop: [{
                 type: Input,
                 args: ['word-break-all--desktop']
+            }], event: [{
+                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-spacer>
+ * @description Type-only wrapper for <px-page>
  */
-class PxSpacer {
+class PxPage {
     elementRef;
-    set grow(value) {
-        this.elementRef.nativeElement['grow'] = value;
+    set backgroundImage(value) {
+        this.elementRef.nativeElement['backgroundImage'] = value;
     }
-    get grow() {
-        return this.elementRef.nativeElement['grow'];
+    get backgroundImage() {
+        return this.elementRef.nativeElement['backgroundImage'];
     }
-    set nogap(value) {
-        this.elementRef.nativeElement['nogap'] = value;
+    set gap(value) {
+        this.elementRef.nativeElement['gap'] = value;
     }
-    get nogap() {
-        return this.elementRef.nativeElement['nogap'];
+    get gap() {
+        return this.elementRef.nativeElement['gap'];
     }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    set backgroundColor(value) {
+        this.elementRef.nativeElement['backgroundColor'] = value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSpacer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSpacer, isStandalone: true, selector: "px-spacer", inputs: { grow: "grow", nogap: "nogap" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSpacer, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-spacer',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { grow: [{
-                type: Input
-            }], nogap: [{
-                type: Input
-            }] } });
-/**
- * @description Type-only wrapper for <px-stack>
- */
-class PxStack {
-    elementRef;
-    set direction(value) {
-        this.elementRef.nativeElement['direction'] = value;
+    get backgroundColor() {
+        return this.elementRef.nativeElement['backgroundColor'];
     }
-    get direction() {
-        return this.elementRef.nativeElement['direction'];
+    set paddingVertical(value) {
+        this.elementRef.nativeElement['paddingVertical'] = value;
     }
-    set directionMobile(value) {
-        this.elementRef.nativeElement['directionMobile'] = value;
+    get paddingVertical() {
+        return this.elementRef.nativeElement['paddingVertical'];
     }
-    get directionMobile() {
-        return this.elementRef.nativeElement['directionMobile'];
+    set paddingHorizontal(value) {
+        this.elementRef.nativeElement['paddingHorizontal'] = value;
     }
-    set directionTablet(value) {
-        this.elementRef.nativeElement['directionTablet'] = value;
+    get paddingHorizontal() {
+        return this.elementRef.nativeElement['paddingHorizontal'];
     }
-    get directionTablet() {
-        return this.elementRef.nativeElement['directionTablet'];
+    set grow(value) {
+        this.elementRef.nativeElement['grow'] = value;
     }
-    set directionLaptop(value) {
-        this.elementRef.nativeElement['directionLaptop'] = value;
+    get grow() {
+        return this.elementRef.nativeElement['grow'];
     }
-    get directionLaptop() {
-        return this.elementRef.nativeElement['directionLaptop'];
+    set growMobile(value) {
+        this.elementRef.nativeElement['growMobile'] = value;
     }
-    set directionDesktop(value) {
-        this.elementRef.nativeElement['directionDesktop'] = value;
+    get growMobile() {
+        return this.elementRef.nativeElement['growMobile'];
     }
-    get directionDesktop() {
-        return this.elementRef.nativeElement['directionDesktop'];
+    set growTablet(value) {
+        this.elementRef.nativeElement['growTablet'] = value;
     }
-    set gap(value) {
-        this.elementRef.nativeElement['gap'] = value;
+    get growTablet() {
+        return this.elementRef.nativeElement['growTablet'];
     }
-    get gap() {
-        return this.elementRef.nativeElement['gap'];
+    set growLaptop(value) {
+        this.elementRef.nativeElement['growLaptop'] = value;
     }
-    set gapMobile(value) {
-        this.elementRef.nativeElement['gapMobile'] = value;
+    get growLaptop() {
+        return this.elementRef.nativeElement['growLaptop'];
     }
-    get gapMobile() {
-        return this.elementRef.nativeElement['gapMobile'];
+    set growDesktop(value) {
+        this.elementRef.nativeElement['growDesktop'] = value;
     }
-    set gapTablet(value) {
-        this.elementRef.nativeElement['gapTablet'] = value;
+    get growDesktop() {
+        return this.elementRef.nativeElement['growDesktop'];
     }
-    get gapTablet() {
-        return this.elementRef.nativeElement['gapTablet'];
+    set shrink(value) {
+        this.elementRef.nativeElement['shrink'] = value;
     }
-    set gapLaptop(value) {
-        this.elementRef.nativeElement['gapLaptop'] = value;
+    get shrink() {
+        return this.elementRef.nativeElement['shrink'];
     }
-    get gapLaptop() {
-        return this.elementRef.nativeElement['gapLaptop'];
+    set shrinkMobile(value) {
+        this.elementRef.nativeElement['shrinkMobile'] = value;
     }
-    set gapDesktop(value) {
-        this.elementRef.nativeElement['gapDesktop'] = value;
+    get shrinkMobile() {
+        return this.elementRef.nativeElement['shrinkMobile'];
     }
-    get gapDesktop() {
-        return this.elementRef.nativeElement['gapDesktop'];
+    set shrinkTablet(value) {
+        this.elementRef.nativeElement['shrinkTablet'] = value;
     }
-    set justifyContent(value) {
-        this.elementRef.nativeElement['justifyContent'] = value;
+    get shrinkTablet() {
+        return this.elementRef.nativeElement['shrinkTablet'];
     }
-    get justifyContent() {
-        return this.elementRef.nativeElement['justifyContent'];
+    set shrinkLaptop(value) {
+        this.elementRef.nativeElement['shrinkLaptop'] = value;
     }
-    set justifyContentMobile(value) {
-        this.elementRef.nativeElement['justifyContentMobile'] = value;
+    get shrinkLaptop() {
+        return this.elementRef.nativeElement['shrinkLaptop'];
     }
-    get justifyContentMobile() {
-        return this.elementRef.nativeElement['justifyContentMobile'];
+    set shrinkDesktop(value) {
+        this.elementRef.nativeElement['shrinkDesktop'] = value;
     }
-    set justifyContentTablet(value) {
-        this.elementRef.nativeElement['justifyContentTablet'] = value;
+    get shrinkDesktop() {
+        return this.elementRef.nativeElement['shrinkDesktop'];
     }
-    get justifyContentTablet() {
-        return this.elementRef.nativeElement['justifyContentTablet'];
+    set basis(value) {
+        this.elementRef.nativeElement['basis'] = value;
     }
-    set justifyContentLaptop(value) {
-        this.elementRef.nativeElement['justifyContentLaptop'] = value;
+    get basis() {
+        return this.elementRef.nativeElement['basis'];
     }
-    get justifyContentLaptop() {
-        return this.elementRef.nativeElement['justifyContentLaptop'];
+    set basisMobile(value) {
+        this.elementRef.nativeElement['basisMobile'] = value;
     }
-    set justifyContentDesktop(value) {
-        this.elementRef.nativeElement['justifyContentDesktop'] = value;
+    get basisMobile() {
+        return this.elementRef.nativeElement['basisMobile'];
     }
-    get justifyContentDesktop() {
-        return this.elementRef.nativeElement['justifyContentDesktop'];
+    set basisTablet(value) {
+        this.elementRef.nativeElement['basisTablet'] = value;
     }
-    set alignItems(value) {
-        this.elementRef.nativeElement['alignItems'] = value;
+    get basisTablet() {
+        return this.elementRef.nativeElement['basisTablet'];
     }
-    get alignItems() {
-        return this.elementRef.nativeElement['alignItems'];
+    set basisLaptop(value) {
+        this.elementRef.nativeElement['basisLaptop'] = value;
     }
-    set alignItemsMobile(value) {
-        this.elementRef.nativeElement['alignItemsMobile'] = value;
+    get basisLaptop() {
+        return this.elementRef.nativeElement['basisLaptop'];
     }
-    get alignItemsMobile() {
-        return this.elementRef.nativeElement['alignItemsMobile'];
+    set basisDesktop(value) {
+        this.elementRef.nativeElement['basisDesktop'] = value;
     }
-    set alignItemsTablet(value) {
-        this.elementRef.nativeElement['alignItemsTablet'] = value;
+    get basisDesktop() {
+        return this.elementRef.nativeElement['basisDesktop'];
     }
-    get alignItemsTablet() {
-        return this.elementRef.nativeElement['alignItemsTablet'];
+    set alignSelf(value) {
+        this.elementRef.nativeElement['alignSelf'] = value;
     }
-    set alignItemsLaptop(value) {
-        this.elementRef.nativeElement['alignItemsLaptop'] = value;
+    get alignSelf() {
+        return this.elementRef.nativeElement['alignSelf'];
     }
-    get alignItemsLaptop() {
-        return this.elementRef.nativeElement['alignItemsLaptop'];
+    set alignSelfMobile(value) {
+        this.elementRef.nativeElement['alignSelfMobile'] = value;
     }
-    set alignItemsDesktop(value) {
-        this.elementRef.nativeElement['alignItemsDesktop'] = value;
+    get alignSelfMobile() {
+        return this.elementRef.nativeElement['alignSelfMobile'];
     }
-    get alignItemsDesktop() {
-        return this.elementRef.nativeElement['alignItemsDesktop'];
+    set alignSelfTablet(value) {
+        this.elementRef.nativeElement['alignSelfTablet'] = value;
     }
-    set wrap(value) {
-        this.elementRef.nativeElement['wrap'] = value;
+    get alignSelfTablet() {
+        return this.elementRef.nativeElement['alignSelfTablet'];
+    }
+    set alignSelfLaptop(value) {
+        this.elementRef.nativeElement['alignSelfLaptop'] = value;
+    }
+    get alignSelfLaptop() {
+        return this.elementRef.nativeElement['alignSelfLaptop'];
+    }
+    set alignSelfDesktop(value) {
+        this.elementRef.nativeElement['alignSelfDesktop'] = value;
+    }
+    get alignSelfDesktop() {
+        return this.elementRef.nativeElement['alignSelfDesktop'];
+    }
+    set justifySelf(value) {
+        this.elementRef.nativeElement['justifySelf'] = value;
+    }
+    get justifySelf() {
+        return this.elementRef.nativeElement['justifySelf'];
+    }
+    set justifySelfMobile(value) {
+        this.elementRef.nativeElement['justifySelfMobile'] = value;
+    }
+    get justifySelfMobile() {
+        return this.elementRef.nativeElement['justifySelfMobile'];
+    }
+    set justifySelfTablet(value) {
+        this.elementRef.nativeElement['justifySelfTablet'] = value;
+    }
+    get justifySelfTablet() {
+        return this.elementRef.nativeElement['justifySelfTablet'];
+    }
+    set justifySelfLaptop(value) {
+        this.elementRef.nativeElement['justifySelfLaptop'] = value;
+    }
+    get justifySelfLaptop() {
+        return this.elementRef.nativeElement['justifySelfLaptop'];
+    }
+    set justifySelfDesktop(value) {
+        this.elementRef.nativeElement['justifySelfDesktop'] = value;
+    }
+    get justifySelfDesktop() {
+        return this.elementRef.nativeElement['justifySelfDesktop'];
+    }
+    set hidden(value) {
+        this.elementRef.nativeElement['hidden'] = value;
+    }
+    get hidden() {
+        return this.elementRef.nativeElement['hidden'];
+    }
+    set hiddenMobile(value) {
+        this.elementRef.nativeElement['hiddenMobile'] = value;
+    }
+    get hiddenMobile() {
+        return this.elementRef.nativeElement['hiddenMobile'];
+    }
+    set hiddenTablet(value) {
+        this.elementRef.nativeElement['hiddenTablet'] = value;
+    }
+    get hiddenTablet() {
+        return this.elementRef.nativeElement['hiddenTablet'];
+    }
+    set hiddenLaptop(value) {
+        this.elementRef.nativeElement['hiddenLaptop'] = value;
+    }
+    get hiddenLaptop() {
+        return this.elementRef.nativeElement['hiddenLaptop'];
+    }
+    set hiddenDesktop(value) {
+        this.elementRef.nativeElement['hiddenDesktop'] = value;
+    }
+    get hiddenDesktop() {
+        return this.elementRef.nativeElement['hiddenDesktop'];
+    }
+    set shownSr(value) {
+        this.elementRef.nativeElement['shownSr'] = value;
+    }
+    get shownSr() {
+        return this.elementRef.nativeElement['shownSr'];
+    }
+    set shownSrMobile(value) {
+        this.elementRef.nativeElement['shownSrMobile'] = value;
+    }
+    get shownSrMobile() {
+        return this.elementRef.nativeElement['shownSrMobile'];
+    }
+    set shownSrTablet(value) {
+        this.elementRef.nativeElement['shownSrTablet'] = value;
+    }
+    get shownSrTablet() {
+        return this.elementRef.nativeElement['shownSrTablet'];
+    }
+    set shownSrLaptop(value) {
+        this.elementRef.nativeElement['shownSrLaptop'] = value;
+    }
+    get shownSrLaptop() {
+        return this.elementRef.nativeElement['shownSrLaptop'];
+    }
+    set shownSrDesktop(value) {
+        this.elementRef.nativeElement['shownSrDesktop'] = value;
+    }
+    get shownSrDesktop() {
+        return this.elementRef.nativeElement['shownSrDesktop'];
+    }
+    set colSpan(value) {
+        this.elementRef.nativeElement['colSpan'] = value;
+    }
+    get colSpan() {
+        return this.elementRef.nativeElement['colSpan'];
+    }
+    set colSpanMobile(value) {
+        this.elementRef.nativeElement['colSpanMobile'] = value;
+    }
+    get colSpanMobile() {
+        return this.elementRef.nativeElement['colSpanMobile'];
+    }
+    set colSpanTablet(value) {
+        this.elementRef.nativeElement['colSpanTablet'] = value;
+    }
+    get colSpanTablet() {
+        return this.elementRef.nativeElement['colSpanTablet'];
+    }
+    set colSpanLaptop(value) {
+        this.elementRef.nativeElement['colSpanLaptop'] = value;
+    }
+    get colSpanLaptop() {
+        return this.elementRef.nativeElement['colSpanLaptop'];
+    }
+    set colSpanDesktop(value) {
+        this.elementRef.nativeElement['colSpanDesktop'] = value;
+    }
+    get colSpanDesktop() {
+        return this.elementRef.nativeElement['colSpanDesktop'];
+    }
+    set order(value) {
+        this.elementRef.nativeElement['order'] = value;
+    }
+    get order() {
+        return this.elementRef.nativeElement['order'];
+    }
+    set orderMobile(value) {
+        this.elementRef.nativeElement['orderMobile'] = value;
+    }
+    get orderMobile() {
+        return this.elementRef.nativeElement['orderMobile'];
+    }
+    set orderTablet(value) {
+        this.elementRef.nativeElement['orderTablet'] = value;
+    }
+    get orderTablet() {
+        return this.elementRef.nativeElement['orderTablet'];
+    }
+    set orderLaptop(value) {
+        this.elementRef.nativeElement['orderLaptop'] = value;
+    }
+    get orderLaptop() {
+        return this.elementRef.nativeElement['orderLaptop'];
+    }
+    set orderDesktop(value) {
+        this.elementRef.nativeElement['orderDesktop'] = value;
+    }
+    get orderDesktop() {
+        return this.elementRef.nativeElement['orderDesktop'];
+    }
+    set stickyTop(value) {
+        this.elementRef.nativeElement['stickyTop'] = value;
+    }
+    get stickyTop() {
+        return this.elementRef.nativeElement['stickyTop'];
+    }
+    set stickyBottom(value) {
+        this.elementRef.nativeElement['stickyBottom'] = value;
+    }
+    get stickyBottom() {
+        return this.elementRef.nativeElement['stickyBottom'];
+    }
+    set wordBreakAll(value) {
+        this.elementRef.nativeElement['wordBreakAll'] = value;
+    }
+    get wordBreakAll() {
+        return this.elementRef.nativeElement['wordBreakAll'];
+    }
+    set wordBreakAllMobile(value) {
+        this.elementRef.nativeElement['wordBreakAllMobile'] = value;
+    }
+    get wordBreakAllMobile() {
+        return this.elementRef.nativeElement['wordBreakAllMobile'];
+    }
+    set wordBreakAllTablet(value) {
+        this.elementRef.nativeElement['wordBreakAllTablet'] = value;
+    }
+    get wordBreakAllTablet() {
+        return this.elementRef.nativeElement['wordBreakAllTablet'];
+    }
+    set wordBreakAllLaptop(value) {
+        this.elementRef.nativeElement['wordBreakAllLaptop'] = value;
+    }
+    get wordBreakAllLaptop() {
+        return this.elementRef.nativeElement['wordBreakAllLaptop'];
+    }
+    set wordBreakAllDesktop(value) {
+        this.elementRef.nativeElement['wordBreakAllDesktop'] = value;
+    }
+    get wordBreakAllDesktop() {
+        return this.elementRef.nativeElement['wordBreakAllDesktop'];
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxPage, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxPage, isStandalone: true, selector: "px-page", inputs: { backgroundImage: ["background-image", "backgroundImage"], gap: "gap", backgroundColor: ["background-color", "backgroundColor"], paddingVertical: ["padding-vertical", "paddingVertical"], paddingHorizontal: ["padding-horizontal", "paddingHorizontal"], 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: "19.2.25", ngImport: i0, type: PxPage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-page',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { backgroundImage: [{
+                type: Input,
+                args: ['background-image']
+            }], gap: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input,
+                args: ['background-color']
+            }], paddingVertical: [{
+                type: Input,
+                args: ['padding-vertical']
+            }], paddingHorizontal: [{
+                type: Input,
+                args: ['padding-horizontal']
+            }], grow: [{
+                type: Input
+            }], growMobile: [{
+                type: Input,
+                args: ['grow--mobile']
+            }], growTablet: [{
+                type: Input,
+                args: ['grow--tablet']
+            }], growLaptop: [{
+                type: Input,
+                args: ['grow--laptop']
+            }], growDesktop: [{
+                type: Input,
+                args: ['grow--desktop']
+            }], shrink: [{
+                type: Input
+            }], shrinkMobile: [{
+                type: Input,
+                args: ['shrink--mobile']
+            }], shrinkTablet: [{
+                type: Input,
+                args: ['shrink--tablet']
+            }], shrinkLaptop: [{
+                type: Input,
+                args: ['shrink--laptop']
+            }], shrinkDesktop: [{
+                type: Input,
+                args: ['shrink--desktop']
+            }], basis: [{
+                type: Input
+            }], basisMobile: [{
+                type: Input,
+                args: ['basis--mobile']
+            }], basisTablet: [{
+                type: Input,
+                args: ['basis--tablet']
+            }], basisLaptop: [{
+                type: Input,
+                args: ['basis--laptop']
+            }], basisDesktop: [{
+                type: Input,
+                args: ['basis--desktop']
+            }], alignSelf: [{
+                type: Input,
+                args: ['align-self']
+            }], alignSelfMobile: [{
+                type: Input,
+                args: ['align-self--mobile']
+            }], alignSelfTablet: [{
+                type: Input,
+                args: ['align-self--tablet']
+            }], alignSelfLaptop: [{
+                type: Input,
+                args: ['align-self--laptop']
+            }], alignSelfDesktop: [{
+                type: Input,
+                args: ['align-self--desktop']
+            }], justifySelf: [{
+                type: Input,
+                args: ['justify-self']
+            }], justifySelfMobile: [{
+                type: Input,
+                args: ['justify-self--mobile']
+            }], justifySelfTablet: [{
+                type: Input,
+                args: ['justify-self--tablet']
+            }], justifySelfLaptop: [{
+                type: Input,
+                args: ['justify-self--laptop']
+            }], justifySelfDesktop: [{
+                type: Input,
+                args: ['justify-self--desktop']
+            }], hidden: [{
+                type: Input
+            }], hiddenMobile: [{
+                type: Input,
+                args: ['hidden--mobile']
+            }], hiddenTablet: [{
+                type: Input,
+                args: ['hidden--tablet']
+            }], hiddenLaptop: [{
+                type: Input,
+                args: ['hidden--laptop']
+            }], hiddenDesktop: [{
+                type: Input,
+                args: ['hidden--desktop']
+            }], shownSr: [{
+                type: Input,
+                args: ['shown--sr']
+            }], shownSrMobile: [{
+                type: Input,
+                args: ['shown--sr--mobile']
+            }], shownSrTablet: [{
+                type: Input,
+                args: ['shown--sr--tablet']
+            }], shownSrLaptop: [{
+                type: Input,
+                args: ['shown--sr--laptop']
+            }], shownSrDesktop: [{
+                type: Input,
+                args: ['shown--sr--desktop']
+            }], colSpan: [{
+                type: Input,
+                args: ['col-span']
+            }], colSpanMobile: [{
+                type: Input,
+                args: ['col-span--mobile']
+            }], colSpanTablet: [{
+                type: Input,
+                args: ['col-span--tablet']
+            }], colSpanLaptop: [{
+                type: Input,
+                args: ['col-span--laptop']
+            }], colSpanDesktop: [{
+                type: Input,
+                args: ['col-span--desktop']
+            }], order: [{
+                type: Input
+            }], orderMobile: [{
+                type: Input,
+                args: ['order--mobile']
+            }], orderTablet: [{
+                type: Input,
+                args: ['order--tablet']
+            }], orderLaptop: [{
+                type: Input,
+                args: ['order--laptop']
+            }], orderDesktop: [{
+                type: Input,
+                args: ['order--desktop']
+            }], stickyTop: [{
+                type: Input,
+                args: ['sticky-top']
+            }], stickyBottom: [{
+                type: Input,
+                args: ['sticky-bottom']
+            }], wordBreakAll: [{
+                type: Input,
+                args: ['word-break-all']
+            }], wordBreakAllMobile: [{
+                type: Input,
+                args: ['word-break-all--mobile']
+            }], wordBreakAllTablet: [{
+                type: Input,
+                args: ['word-break-all--tablet']
+            }], wordBreakAllLaptop: [{
+                type: Input,
+                args: ['word-break-all--laptop']
+            }], wordBreakAllDesktop: [{
+                type: Input,
+                args: ['word-break-all--desktop']
+            }] } });
+/**
+ * @description Type-only wrapper for <px-spacer>
+ */
+class PxSpacer {
+    elementRef;
+    set grow(value) {
+        this.elementRef.nativeElement['grow'] = value;
+    }
+    get grow() {
+        return this.elementRef.nativeElement['grow'];
+    }
+    set nogap(value) {
+        this.elementRef.nativeElement['nogap'] = value;
+    }
+    get nogap() {
+        return this.elementRef.nativeElement['nogap'];
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSpacer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSpacer, isStandalone: true, selector: "px-spacer", inputs: { grow: "grow", nogap: "nogap" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSpacer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-spacer',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { grow: [{
+                type: Input
+            }], nogap: [{
+                type: Input
+            }] } });
+/**
+ * @description Type-only wrapper for <px-stack>
+ */
+class PxStack {
+    elementRef;
+    set direction(value) {
+        this.elementRef.nativeElement['direction'] = value;
+    }
+    get direction() {
+        return this.elementRef.nativeElement['direction'];
+    }
+    set directionMobile(value) {
+        this.elementRef.nativeElement['directionMobile'] = value;
+    }
+    get directionMobile() {
+        return this.elementRef.nativeElement['directionMobile'];
+    }
+    set directionTablet(value) {
+        this.elementRef.nativeElement['directionTablet'] = value;
+    }
+    get directionTablet() {
+        return this.elementRef.nativeElement['directionTablet'];
+    }
+    set directionLaptop(value) {
+        this.elementRef.nativeElement['directionLaptop'] = value;
+    }
+    get directionLaptop() {
+        return this.elementRef.nativeElement['directionLaptop'];
+    }
+    set directionDesktop(value) {
+        this.elementRef.nativeElement['directionDesktop'] = value;
+    }
+    get directionDesktop() {
+        return this.elementRef.nativeElement['directionDesktop'];
+    }
+    set gap(value) {
+        this.elementRef.nativeElement['gap'] = value;
+    }
+    get gap() {
+        return this.elementRef.nativeElement['gap'];
+    }
+    set gapMobile(value) {
+        this.elementRef.nativeElement['gapMobile'] = value;
+    }
+    get gapMobile() {
+        return this.elementRef.nativeElement['gapMobile'];
+    }
+    set gapTablet(value) {
+        this.elementRef.nativeElement['gapTablet'] = value;
+    }
+    get gapTablet() {
+        return this.elementRef.nativeElement['gapTablet'];
+    }
+    set gapLaptop(value) {
+        this.elementRef.nativeElement['gapLaptop'] = value;
+    }
+    get gapLaptop() {
+        return this.elementRef.nativeElement['gapLaptop'];
+    }
+    set gapDesktop(value) {
+        this.elementRef.nativeElement['gapDesktop'] = value;
+    }
+    get gapDesktop() {
+        return this.elementRef.nativeElement['gapDesktop'];
+    }
+    set justifyContent(value) {
+        this.elementRef.nativeElement['justifyContent'] = value;
+    }
+    get justifyContent() {
+        return this.elementRef.nativeElement['justifyContent'];
+    }
+    set justifyContentMobile(value) {
+        this.elementRef.nativeElement['justifyContentMobile'] = value;
+    }
+    get justifyContentMobile() {
+        return this.elementRef.nativeElement['justifyContentMobile'];
+    }
+    set justifyContentTablet(value) {
+        this.elementRef.nativeElement['justifyContentTablet'] = value;
+    }
+    get justifyContentTablet() {
+        return this.elementRef.nativeElement['justifyContentTablet'];
+    }
+    set justifyContentLaptop(value) {
+        this.elementRef.nativeElement['justifyContentLaptop'] = value;
+    }
+    get justifyContentLaptop() {
+        return this.elementRef.nativeElement['justifyContentLaptop'];
+    }
+    set justifyContentDesktop(value) {
+        this.elementRef.nativeElement['justifyContentDesktop'] = value;
+    }
+    get justifyContentDesktop() {
+        return this.elementRef.nativeElement['justifyContentDesktop'];
+    }
+    set alignItems(value) {
+        this.elementRef.nativeElement['alignItems'] = value;
+    }
+    get alignItems() {
+        return this.elementRef.nativeElement['alignItems'];
+    }
+    set alignItemsMobile(value) {
+        this.elementRef.nativeElement['alignItemsMobile'] = value;
+    }
+    get alignItemsMobile() {
+        return this.elementRef.nativeElement['alignItemsMobile'];
+    }
+    set alignItemsTablet(value) {
+        this.elementRef.nativeElement['alignItemsTablet'] = value;
+    }
+    get alignItemsTablet() {
+        return this.elementRef.nativeElement['alignItemsTablet'];
+    }
+    set alignItemsLaptop(value) {
+        this.elementRef.nativeElement['alignItemsLaptop'] = value;
+    }
+    get alignItemsLaptop() {
+        return this.elementRef.nativeElement['alignItemsLaptop'];
+    }
+    set alignItemsDesktop(value) {
+        this.elementRef.nativeElement['alignItemsDesktop'] = value;
+    }
+    get alignItemsDesktop() {
+        return this.elementRef.nativeElement['alignItemsDesktop'];
+    }
+    set wrap(value) {
+        this.elementRef.nativeElement['wrap'] = value;
     }
     get wrap() {
         return this.elementRef.nativeElement['wrap'];
@@ -30313,250 +30905,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: ['justify-self']
             }], justifySelfMobile: [{
                 type: Input,
-                args: ['justify-self--mobile']
-            }], justifySelfTablet: [{
-                type: Input,
-                args: ['justify-self--tablet']
-            }], justifySelfLaptop: [{
-                type: Input,
-                args: ['justify-self--laptop']
-            }], justifySelfDesktop: [{
-                type: Input,
-                args: ['justify-self--desktop']
-            }], hidden: [{
-                type: Input
-            }], hiddenMobile: [{
-                type: Input,
-                args: ['hidden--mobile']
-            }], hiddenTablet: [{
-                type: Input,
-                args: ['hidden--tablet']
-            }], hiddenLaptop: [{
-                type: Input,
-                args: ['hidden--laptop']
-            }], hiddenDesktop: [{
-                type: Input,
-                args: ['hidden--desktop']
-            }], shownSr: [{
-                type: Input,
-                args: ['shown--sr']
-            }], shownSrMobile: [{
-                type: Input,
-                args: ['shown--sr--mobile']
-            }], shownSrTablet: [{
-                type: Input,
-                args: ['shown--sr--tablet']
-            }], shownSrLaptop: [{
-                type: Input,
-                args: ['shown--sr--laptop']
-            }], shownSrDesktop: [{
-                type: Input,
-                args: ['shown--sr--desktop']
-            }], colSpan: [{
-                type: Input,
-                args: ['col-span']
-            }], colSpanMobile: [{
-                type: Input,
-                args: ['col-span--mobile']
-            }], colSpanTablet: [{
-                type: Input,
-                args: ['col-span--tablet']
-            }], colSpanLaptop: [{
-                type: Input,
-                args: ['col-span--laptop']
-            }], colSpanDesktop: [{
-                type: Input,
-                args: ['col-span--desktop']
-            }], order: [{
-                type: Input
-            }], orderMobile: [{
-                type: Input,
-                args: ['order--mobile']
-            }], orderTablet: [{
-                type: Input,
-                args: ['order--tablet']
-            }], orderLaptop: [{
-                type: Input,
-                args: ['order--laptop']
-            }], orderDesktop: [{
-                type: Input,
-                args: ['order--desktop']
-            }], stickyTop: [{
-                type: Input,
-                args: ['sticky-top']
-            }], stickyBottom: [{
-                type: Input,
-                args: ['sticky-bottom']
-            }], wordBreakAll: [{
-                type: Input,
-                args: ['word-break-all']
-            }], wordBreakAllMobile: [{
-                type: Input,
-                args: ['word-break-all--mobile']
-            }], wordBreakAllTablet: [{
-                type: Input,
-                args: ['word-break-all--tablet']
-            }], wordBreakAllLaptop: [{
-                type: Input,
-                args: ['word-break-all--laptop']
-            }], wordBreakAllDesktop: [{
-                type: Input,
-                args: ['word-break-all--desktop']
-            }] } });
-/**
- * @description Type-only wrapper for <px-section>
- */
-class PxSection {
-    elementRef;
-    set backgroundColor(value) {
-        this.elementRef.nativeElement['backgroundColor'] = value;
-    }
-    get backgroundColor() {
-        return this.elementRef.nativeElement['backgroundColor'];
-    }
-    set backgroundGradient(value) {
-        this.elementRef.nativeElement['backgroundGradient'] = value;
-    }
-    get backgroundGradient() {
-        return this.elementRef.nativeElement['backgroundGradient'];
-    }
-    set backgroundImage(value) {
-        this.elementRef.nativeElement['backgroundImage'] = value;
-    }
-    get backgroundImage() {
-        return this.elementRef.nativeElement['backgroundImage'];
-    }
-    set backgroundImageMobile(value) {
-        this.elementRef.nativeElement['backgroundImageMobile'] = value;
-    }
-    get backgroundImageMobile() {
-        return this.elementRef.nativeElement['backgroundImageMobile'];
-    }
-    set backgroundImageTablet(value) {
-        this.elementRef.nativeElement['backgroundImageTablet'] = value;
-    }
-    get backgroundImageTablet() {
-        return this.elementRef.nativeElement['backgroundImageTablet'];
-    }
-    set backgroundImageLaptop(value) {
-        this.elementRef.nativeElement['backgroundImageLaptop'] = value;
-    }
-    get backgroundImageLaptop() {
-        return this.elementRef.nativeElement['backgroundImageLaptop'];
-    }
-    set backgroundSize(value) {
-        this.elementRef.nativeElement['backgroundSize'] = value;
-    }
-    get backgroundSize() {
-        return this.elementRef.nativeElement['backgroundSize'];
-    }
-    set backgroundPosition(value) {
-        this.elementRef.nativeElement['backgroundPosition'] = value;
-    }
-    get backgroundPosition() {
-        return this.elementRef.nativeElement['backgroundPosition'];
-    }
-    set paddingBlock(value) {
-        this.elementRef.nativeElement['paddingBlock'] = value;
-    }
-    get paddingBlock() {
-        return this.elementRef.nativeElement['paddingBlock'];
-    }
-    set paddingTop(value) {
-        this.elementRef.nativeElement['paddingTop'] = value;
-    }
-    get paddingTop() {
-        return this.elementRef.nativeElement['paddingTop'];
-    }
-    set paddingBottom(value) {
-        this.elementRef.nativeElement['paddingBottom'] = value;
-    }
-    get paddingBottom() {
-        return this.elementRef.nativeElement['paddingBottom'];
-    }
-    set paddingBlockMobile(value) {
-        this.elementRef.nativeElement['paddingBlockMobile'] = value;
-    }
-    get paddingBlockMobile() {
-        return this.elementRef.nativeElement['paddingBlockMobile'];
-    }
-    set paddingTopMobile(value) {
-        this.elementRef.nativeElement['paddingTopMobile'] = value;
-    }
-    get paddingTopMobile() {
-        return this.elementRef.nativeElement['paddingTopMobile'];
-    }
-    set paddingBottomMobile(value) {
-        this.elementRef.nativeElement['paddingBottomMobile'] = value;
-    }
-    get paddingBottomMobile() {
-        return this.elementRef.nativeElement['paddingBottomMobile'];
-    }
-    set paddingBlockTablet(value) {
-        this.elementRef.nativeElement['paddingBlockTablet'] = value;
-    }
-    get paddingBlockTablet() {
-        return this.elementRef.nativeElement['paddingBlockTablet'];
-    }
-    set paddingTopTablet(value) {
-        this.elementRef.nativeElement['paddingTopTablet'] = value;
-    }
-    get paddingTopTablet() {
-        return this.elementRef.nativeElement['paddingTopTablet'];
-    }
-    set paddingBottomTablet(value) {
-        this.elementRef.nativeElement['paddingBottomTablet'] = value;
-    }
-    get paddingBottomTablet() {
-        return this.elementRef.nativeElement['paddingBottomTablet'];
-    }
-    set paddingBlockLaptop(value) {
-        this.elementRef.nativeElement['paddingBlockLaptop'] = value;
-    }
-    get paddingBlockLaptop() {
-        return this.elementRef.nativeElement['paddingBlockLaptop'];
-    }
-    set paddingTopLaptop(value) {
-        this.elementRef.nativeElement['paddingTopLaptop'] = value;
-    }
-    get paddingTopLaptop() {
-        return this.elementRef.nativeElement['paddingTopLaptop'];
-    }
-    set paddingBottomLaptop(value) {
-        this.elementRef.nativeElement['paddingBottomLaptop'] = value;
-    }
-    get paddingBottomLaptop() {
-        return this.elementRef.nativeElement['paddingBottomLaptop'];
-    }
-    set border(value) {
-        this.elementRef.nativeElement['border'] = value;
-    }
-    get border() {
-        return this.elementRef.nativeElement['border'];
-    }
-    set borderSide(value) {
-        this.elementRef.nativeElement['borderSide'] = value;
-    }
-    get borderSide() {
-        return this.elementRef.nativeElement['borderSide'];
-    }
-    set borderSideMobile(value) {
-        this.elementRef.nativeElement['borderSideMobile'] = value;
-    }
-    get borderSideMobile() {
-        return this.elementRef.nativeElement['borderSideMobile'];
-    }
-    set borderSideTablet(value) {
-        this.elementRef.nativeElement['borderSideTablet'] = value;
-    }
-    get borderSideTablet() {
-        return this.elementRef.nativeElement['borderSideTablet'];
-    }
-    set borderSideLaptop(value) {
-        this.elementRef.nativeElement['borderSideLaptop'] = value;
+                args: ['justify-self--mobile']
+            }], justifySelfTablet: [{
+                type: Input,
+                args: ['justify-self--tablet']
+            }], justifySelfLaptop: [{
+                type: Input,
+                args: ['justify-self--laptop']
+            }], justifySelfDesktop: [{
+                type: Input,
+                args: ['justify-self--desktop']
+            }], hidden: [{
+                type: Input
+            }], hiddenMobile: [{
+                type: Input,
+                args: ['hidden--mobile']
+            }], hiddenTablet: [{
+                type: Input,
+                args: ['hidden--tablet']
+            }], hiddenLaptop: [{
+                type: Input,
+                args: ['hidden--laptop']
+            }], hiddenDesktop: [{
+                type: Input,
+                args: ['hidden--desktop']
+            }], shownSr: [{
+                type: Input,
+                args: ['shown--sr']
+            }], shownSrMobile: [{
+                type: Input,
+                args: ['shown--sr--mobile']
+            }], shownSrTablet: [{
+                type: Input,
+                args: ['shown--sr--tablet']
+            }], shownSrLaptop: [{
+                type: Input,
+                args: ['shown--sr--laptop']
+            }], shownSrDesktop: [{
+                type: Input,
+                args: ['shown--sr--desktop']
+            }], colSpan: [{
+                type: Input,
+                args: ['col-span']
+            }], colSpanMobile: [{
+                type: Input,
+                args: ['col-span--mobile']
+            }], colSpanTablet: [{
+                type: Input,
+                args: ['col-span--tablet']
+            }], colSpanLaptop: [{
+                type: Input,
+                args: ['col-span--laptop']
+            }], colSpanDesktop: [{
+                type: Input,
+                args: ['col-span--desktop']
+            }], order: [{
+                type: Input
+            }], orderMobile: [{
+                type: Input,
+                args: ['order--mobile']
+            }], orderTablet: [{
+                type: Input,
+                args: ['order--tablet']
+            }], orderLaptop: [{
+                type: Input,
+                args: ['order--laptop']
+            }], orderDesktop: [{
+                type: Input,
+                args: ['order--desktop']
+            }], stickyTop: [{
+                type: Input,
+                args: ['sticky-top']
+            }], stickyBottom: [{
+                type: Input,
+                args: ['sticky-bottom']
+            }], wordBreakAll: [{
+                type: Input,
+                args: ['word-break-all']
+            }], wordBreakAllMobile: [{
+                type: Input,
+                args: ['word-break-all--mobile']
+            }], wordBreakAllTablet: [{
+                type: Input,
+                args: ['word-break-all--tablet']
+            }], wordBreakAllLaptop: [{
+                type: Input,
+                args: ['word-break-all--laptop']
+            }], wordBreakAllDesktop: [{
+                type: Input,
+                args: ['word-break-all--desktop']
+            }] } });
+/**
+ * @description Type-only wrapper for <px-ribbon>
+ */
+class PxRibbon {
+    elementRef;
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
     }
-    get borderSideLaptop() {
-        return this.elementRef.nativeElement['borderSideLaptop'];
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -30873,89 +31321,17 @@ class PxSection {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSection, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSection, isStandalone: true, selector: "px-section", inputs: { backgroundColor: ["background-color", "backgroundColor"], backgroundGradient: ["background-gradient", "backgroundGradient"], backgroundImage: ["background-image", "backgroundImage"], backgroundImageMobile: ["background-image--mobile", "backgroundImageMobile"], backgroundImageTablet: ["background-image--tablet", "backgroundImageTablet"], backgroundImageLaptop: ["background-image--laptop", "backgroundImageLaptop"], backgroundSize: ["background-size", "backgroundSize"], backgroundPosition: ["background-position", "backgroundPosition"], paddingBlock: ["padding-block", "paddingBlock"], paddingTop: ["padding-top", "paddingTop"], paddingBottom: ["padding-bottom", "paddingBottom"], paddingBlockMobile: ["padding-block--mobile", "paddingBlockMobile"], paddingTopMobile: ["padding-top--mobile", "paddingTopMobile"], paddingBottomMobile: ["padding-bottom--mobile", "paddingBottomMobile"], paddingBlockTablet: ["padding-block--tablet", "paddingBlockTablet"], paddingTopTablet: ["padding-top--tablet", "paddingTopTablet"], paddingBottomTablet: ["padding-bottom--tablet", "paddingBottomTablet"], paddingBlockLaptop: ["padding-block--laptop", "paddingBlockLaptop"], paddingTopLaptop: ["padding-top--laptop", "paddingTopLaptop"], paddingBottomLaptop: ["padding-bottom--laptop", "paddingBottomLaptop"], border: "border", borderSide: ["border-side", "borderSide"], borderSideMobile: ["border-side--mobile", "borderSideMobile"], borderSideTablet: ["border-side--tablet", "borderSideTablet"], borderSideLaptop: ["border-side--laptop", "borderSideLaptop"], 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: "19.2.25", ngImport: i0, type: PxRibbon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxRibbon, isStandalone: true, selector: "px-ribbon", inputs: { inverted: "inverted", 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: "19.2.25", ngImport: i0, type: PxSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxRibbon, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-section',
+                    selector: 'px-ribbon',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { backgroundColor: [{
-                type: Input,
-                args: ['background-color']
-            }], backgroundGradient: [{
-                type: Input,
-                args: ['background-gradient']
-            }], backgroundImage: [{
-                type: Input,
-                args: ['background-image']
-            }], backgroundImageMobile: [{
-                type: Input,
-                args: ['background-image--mobile']
-            }], backgroundImageTablet: [{
-                type: Input,
-                args: ['background-image--tablet']
-            }], backgroundImageLaptop: [{
-                type: Input,
-                args: ['background-image--laptop']
-            }], backgroundSize: [{
-                type: Input,
-                args: ['background-size']
-            }], backgroundPosition: [{
-                type: Input,
-                args: ['background-position']
-            }], paddingBlock: [{
-                type: Input,
-                args: ['padding-block']
-            }], paddingTop: [{
-                type: Input,
-                args: ['padding-top']
-            }], paddingBottom: [{
-                type: Input,
-                args: ['padding-bottom']
-            }], paddingBlockMobile: [{
-                type: Input,
-                args: ['padding-block--mobile']
-            }], paddingTopMobile: [{
-                type: Input,
-                args: ['padding-top--mobile']
-            }], paddingBottomMobile: [{
-                type: Input,
-                args: ['padding-bottom--mobile']
-            }], paddingBlockTablet: [{
-                type: Input,
-                args: ['padding-block--tablet']
-            }], paddingTopTablet: [{
-                type: Input,
-                args: ['padding-top--tablet']
-            }], paddingBottomTablet: [{
-                type: Input,
-                args: ['padding-bottom--tablet']
-            }], paddingBlockLaptop: [{
-                type: Input,
-                args: ['padding-block--laptop']
-            }], paddingTopLaptop: [{
-                type: Input,
-                args: ['padding-top--laptop']
-            }], paddingBottomLaptop: [{
-                type: Input,
-                args: ['padding-bottom--laptop']
-            }], border: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
-            }], borderSide: [{
-                type: Input,
-                args: ['border-side']
-            }], borderSideMobile: [{
-                type: Input,
-                args: ['border-side--mobile']
-            }], borderSideTablet: [{
-                type: Input,
-                args: ['border-side--tablet']
-            }], borderSideLaptop: [{
-                type: Input,
-                args: ['border-side--laptop']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -31109,15 +31485,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: ['word-break-all--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-ribbon>
+ * @description Type-only wrapper for <px-section>
  */
-class PxRibbon {
+class PxSection {
     elementRef;
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
+    set backgroundColor(value) {
+        this.elementRef.nativeElement['backgroundColor'] = value;
+    }
+    get backgroundColor() {
+        return this.elementRef.nativeElement['backgroundColor'];
+    }
+    set backgroundGradient(value) {
+        this.elementRef.nativeElement['backgroundGradient'] = value;
+    }
+    get backgroundGradient() {
+        return this.elementRef.nativeElement['backgroundGradient'];
+    }
+    set backgroundImage(value) {
+        this.elementRef.nativeElement['backgroundImage'] = value;
+    }
+    get backgroundImage() {
+        return this.elementRef.nativeElement['backgroundImage'];
+    }
+    set backgroundImageMobile(value) {
+        this.elementRef.nativeElement['backgroundImageMobile'] = value;
+    }
+    get backgroundImageMobile() {
+        return this.elementRef.nativeElement['backgroundImageMobile'];
+    }
+    set backgroundImageTablet(value) {
+        this.elementRef.nativeElement['backgroundImageTablet'] = value;
+    }
+    get backgroundImageTablet() {
+        return this.elementRef.nativeElement['backgroundImageTablet'];
+    }
+    set backgroundImageLaptop(value) {
+        this.elementRef.nativeElement['backgroundImageLaptop'] = value;
+    }
+    get backgroundImageLaptop() {
+        return this.elementRef.nativeElement['backgroundImageLaptop'];
+    }
+    set backgroundSize(value) {
+        this.elementRef.nativeElement['backgroundSize'] = value;
+    }
+    get backgroundSize() {
+        return this.elementRef.nativeElement['backgroundSize'];
+    }
+    set backgroundPosition(value) {
+        this.elementRef.nativeElement['backgroundPosition'] = value;
+    }
+    get backgroundPosition() {
+        return this.elementRef.nativeElement['backgroundPosition'];
+    }
+    set paddingBlock(value) {
+        this.elementRef.nativeElement['paddingBlock'] = value;
+    }
+    get paddingBlock() {
+        return this.elementRef.nativeElement['paddingBlock'];
+    }
+    set paddingTop(value) {
+        this.elementRef.nativeElement['paddingTop'] = value;
+    }
+    get paddingTop() {
+        return this.elementRef.nativeElement['paddingTop'];
+    }
+    set paddingBottom(value) {
+        this.elementRef.nativeElement['paddingBottom'] = value;
+    }
+    get paddingBottom() {
+        return this.elementRef.nativeElement['paddingBottom'];
+    }
+    set paddingBlockMobile(value) {
+        this.elementRef.nativeElement['paddingBlockMobile'] = value;
     }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
+    get paddingBlockMobile() {
+        return this.elementRef.nativeElement['paddingBlockMobile'];
+    }
+    set paddingTopMobile(value) {
+        this.elementRef.nativeElement['paddingTopMobile'] = value;
+    }
+    get paddingTopMobile() {
+        return this.elementRef.nativeElement['paddingTopMobile'];
+    }
+    set paddingBottomMobile(value) {
+        this.elementRef.nativeElement['paddingBottomMobile'] = value;
+    }
+    get paddingBottomMobile() {
+        return this.elementRef.nativeElement['paddingBottomMobile'];
+    }
+    set paddingBlockTablet(value) {
+        this.elementRef.nativeElement['paddingBlockTablet'] = value;
+    }
+    get paddingBlockTablet() {
+        return this.elementRef.nativeElement['paddingBlockTablet'];
+    }
+    set paddingTopTablet(value) {
+        this.elementRef.nativeElement['paddingTopTablet'] = value;
+    }
+    get paddingTopTablet() {
+        return this.elementRef.nativeElement['paddingTopTablet'];
+    }
+    set paddingBottomTablet(value) {
+        this.elementRef.nativeElement['paddingBottomTablet'] = value;
+    }
+    get paddingBottomTablet() {
+        return this.elementRef.nativeElement['paddingBottomTablet'];
+    }
+    set paddingBlockLaptop(value) {
+        this.elementRef.nativeElement['paddingBlockLaptop'] = value;
+    }
+    get paddingBlockLaptop() {
+        return this.elementRef.nativeElement['paddingBlockLaptop'];
+    }
+    set paddingTopLaptop(value) {
+        this.elementRef.nativeElement['paddingTopLaptop'] = value;
+    }
+    get paddingTopLaptop() {
+        return this.elementRef.nativeElement['paddingTopLaptop'];
+    }
+    set paddingBottomLaptop(value) {
+        this.elementRef.nativeElement['paddingBottomLaptop'] = value;
+    }
+    get paddingBottomLaptop() {
+        return this.elementRef.nativeElement['paddingBottomLaptop'];
+    }
+    set border(value) {
+        this.elementRef.nativeElement['border'] = value;
+    }
+    get border() {
+        return this.elementRef.nativeElement['border'];
+    }
+    set borderSide(value) {
+        this.elementRef.nativeElement['borderSide'] = value;
+    }
+    get borderSide() {
+        return this.elementRef.nativeElement['borderSide'];
+    }
+    set borderSideMobile(value) {
+        this.elementRef.nativeElement['borderSideMobile'] = value;
+    }
+    get borderSideMobile() {
+        return this.elementRef.nativeElement['borderSideMobile'];
+    }
+    set borderSideTablet(value) {
+        this.elementRef.nativeElement['borderSideTablet'] = value;
+    }
+    get borderSideTablet() {
+        return this.elementRef.nativeElement['borderSideTablet'];
+    }
+    set borderSideLaptop(value) {
+        this.elementRef.nativeElement['borderSideLaptop'] = value;
+    }
+    get borderSideLaptop() {
+        return this.elementRef.nativeElement['borderSideLaptop'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -31434,17 +31954,89 @@ class PxRibbon {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxRibbon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxRibbon, isStandalone: true, selector: "px-ribbon", inputs: { inverted: "inverted", 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: "19.2.25", ngImport: i0, type: PxSection, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSection, isStandalone: true, selector: "px-section", inputs: { backgroundColor: ["background-color", "backgroundColor"], backgroundGradient: ["background-gradient", "backgroundGradient"], backgroundImage: ["background-image", "backgroundImage"], backgroundImageMobile: ["background-image--mobile", "backgroundImageMobile"], backgroundImageTablet: ["background-image--tablet", "backgroundImageTablet"], backgroundImageLaptop: ["background-image--laptop", "backgroundImageLaptop"], backgroundSize: ["background-size", "backgroundSize"], backgroundPosition: ["background-position", "backgroundPosition"], paddingBlock: ["padding-block", "paddingBlock"], paddingTop: ["padding-top", "paddingTop"], paddingBottom: ["padding-bottom", "paddingBottom"], paddingBlockMobile: ["padding-block--mobile", "paddingBlockMobile"], paddingTopMobile: ["padding-top--mobile", "paddingTopMobile"], paddingBottomMobile: ["padding-bottom--mobile", "paddingBottomMobile"], paddingBlockTablet: ["padding-block--tablet", "paddingBlockTablet"], paddingTopTablet: ["padding-top--tablet", "paddingTopTablet"], paddingBottomTablet: ["padding-bottom--tablet", "paddingBottomTablet"], paddingBlockLaptop: ["padding-block--laptop", "paddingBlockLaptop"], paddingTopLaptop: ["padding-top--laptop", "paddingTopLaptop"], paddingBottomLaptop: ["padding-bottom--laptop", "paddingBottomLaptop"], border: "border", borderSide: ["border-side", "borderSide"], borderSideMobile: ["border-side--mobile", "borderSideMobile"], borderSideTablet: ["border-side--tablet", "borderSideTablet"], borderSideLaptop: ["border-side--laptop", "borderSideLaptop"], 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: "19.2.25", ngImport: i0, type: PxRibbon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSection, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-ribbon',
+                    selector: 'px-section',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { backgroundColor: [{
+                type: Input,
+                args: ['background-color']
+            }], backgroundGradient: [{
+                type: Input,
+                args: ['background-gradient']
+            }], backgroundImage: [{
+                type: Input,
+                args: ['background-image']
+            }], backgroundImageMobile: [{
+                type: Input,
+                args: ['background-image--mobile']
+            }], backgroundImageTablet: [{
+                type: Input,
+                args: ['background-image--tablet']
+            }], backgroundImageLaptop: [{
+                type: Input,
+                args: ['background-image--laptop']
+            }], backgroundSize: [{
+                type: Input,
+                args: ['background-size']
+            }], backgroundPosition: [{
+                type: Input,
+                args: ['background-position']
+            }], paddingBlock: [{
+                type: Input,
+                args: ['padding-block']
+            }], paddingTop: [{
+                type: Input,
+                args: ['padding-top']
+            }], paddingBottom: [{
+                type: Input,
+                args: ['padding-bottom']
+            }], paddingBlockMobile: [{
+                type: Input,
+                args: ['padding-block--mobile']
+            }], paddingTopMobile: [{
+                type: Input,
+                args: ['padding-top--mobile']
+            }], paddingBottomMobile: [{
+                type: Input,
+                args: ['padding-bottom--mobile']
+            }], paddingBlockTablet: [{
+                type: Input,
+                args: ['padding-block--tablet']
+            }], paddingTopTablet: [{
+                type: Input,
+                args: ['padding-top--tablet']
+            }], paddingBottomTablet: [{
+                type: Input,
+                args: ['padding-bottom--tablet']
+            }], paddingBlockLaptop: [{
+                type: Input,
+                args: ['padding-block--laptop']
+            }], paddingTopLaptop: [{
+                type: Input,
+                args: ['padding-top--laptop']
+            }], paddingBottomLaptop: [{
+                type: Input,
+                args: ['padding-bottom--laptop']
+            }], border: [{
                 type: Input
+            }], borderSide: [{
+                type: Input,
+                args: ['border-side']
+            }], borderSideMobile: [{
+                type: Input,
+                args: ['border-side--mobile']
+            }], borderSideTablet: [{
+                type: Input,
+                args: ['border-side--tablet']
+            }], borderSideLaptop: [{
+                type: Input,
+                args: ['border-side--laptop']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -31614,6 +32206,12 @@ class PxSelectableBox {
     get hideFooter() {
         return this.elementRef.nativeElement['hideFooter'];
     }
+    set footerPosition(value) {
+        this.elementRef.nativeElement['footerPosition'] = value;
+    }
+    get footerPosition() {
+        return this.elementRef.nativeElement['footerPosition'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -31930,7 +32528,7 @@ class PxSelectableBox {
         this.elementRef = elementRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelectableBox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelectableBox, isStandalone: true, selector: "px-selectable-box", inputs: { inverted: "inverted", hideFooter: ["hide-footer", "hideFooter"], 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 ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelectableBox, isStandalone: true, selector: "px-selectable-box", inputs: { inverted: "inverted", hideFooter: ["hide-footer", "hideFooter"], footerPosition: ["footer-position", "footerPosition"], 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: "19.2.25", ngImport: i0, type: PxSelectableBox, decorators: [{
             type: Directive,
@@ -31943,6 +32541,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], hideFooter: [{
                 type: Input,
                 args: ['hide-footer']
+            }], footerPosition: [{
+                type: Input,
+                args: ['footer-position']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -32130,6 +32731,12 @@ class PxSelectableBoxCheckbox {
     get disabled() {
         return this.elementRef.nativeElement['disabled'];
     }
+    set footerPosition(value) {
+        this.elementRef.nativeElement['footerPosition'] = value;
+    }
+    get footerPosition() {
+        return this.elementRef.nativeElement['footerPosition'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -32450,7 +33057,7 @@ class PxSelectableBoxCheckbox {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelectableBoxCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelectableBoxCheckbox, isStandalone: true, selector: "px-selectable-box-checkbox", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", 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"] }, outputs: { change: "change" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelectableBoxCheckbox, isStandalone: true, selector: "px-selectable-box-checkbox", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", disabled: "disabled", footerPosition: ["footer-position", "footerPosition"], 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: { change: "change" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelectableBoxCheckbox, decorators: [{
             type: Directive,
@@ -32468,6 +33075,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], footerPosition: [{
+                type: Input,
+                args: ['footer-position']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -32657,6 +33267,12 @@ class PxSelectableBoxRadio {
     get disabled() {
         return this.elementRef.nativeElement['disabled'];
     }
+    set footerPosition(value) {
+        this.elementRef.nativeElement['footerPosition'] = value;
+    }
+    get footerPosition() {
+        return this.elementRef.nativeElement['footerPosition'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -32985,7 +33601,7 @@ class PxSelectableBoxRadio {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelectableBoxRadio, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelectableBoxRadio, isStandalone: true, selector: "px-selectable-box-radio", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", 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"] }, outputs: { SELECTABLE_BOX_RADIO_CONNECTED_EVENT: "SELECTABLE_BOX_RADIO_CONNECTED_EVENT", SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT: "SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT", change: "change" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxSelectableBoxRadio, isStandalone: true, selector: "px-selectable-box-radio", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", disabled: "disabled", footerPosition: ["footer-position", "footerPosition"], 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: { SELECTABLE_BOX_RADIO_CONNECTED_EVENT: "SELECTABLE_BOX_RADIO_CONNECTED_EVENT", SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT: "SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT", change: "change" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxSelectableBoxRadio, decorators: [{
             type: Directive,
@@ -33003,6 +33619,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], footerPosition: [{
+                type: Input,
+                args: ['footer-position']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -35869,42 +36488,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], CLOSE_EVENT: [{
                 type: Output
             }] } });
-/**
- * @description Type-only wrapper for <px-sticky-container>
- */
-class PxStickyContainer {
-    elementRef;
-    set offsetLeft(value) {
-        this.elementRef.nativeElement['offsetLeft'] = value;
-    }
-    get offsetLeft() {
-        return this.elementRef.nativeElement['offsetLeft'];
-    }
-    set offsetRight(value) {
-        this.elementRef.nativeElement['offsetRight'] = value;
-    }
-    get offsetRight() {
-        return this.elementRef.nativeElement['offsetRight'];
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxStickyContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxStickyContainer, isStandalone: true, selector: "px-sticky-container", inputs: { offsetLeft: ["offset-left", "offsetLeft"], offsetRight: ["offset-right", "offsetRight"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxStickyContainer, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-sticky-container',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { offsetLeft: [{
-                type: Input,
-                args: ['offset-left']
-            }], offsetRight: [{
-                type: Input,
-                args: ['offset-right']
-            }] } });
 /**
  * @description Type-only wrapper for <px-theme-switcher>
  */
@@ -40519,6 +41102,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], TIMELINE_ITEM_CONNECTED_EVENT: [{
                 type: Output
             }] } });
+/**
+ * @description Type-only wrapper for <px-toaster>
+ */
+class PxToaster {
+    elementRef;
+    set id(value) {
+        this.elementRef.nativeElement['id'] = value;
+    }
+    get id() {
+        return this.elementRef.nativeElement['id'];
+    }
+    set open(value) {
+        this.elementRef.nativeElement['open'] = value;
+    }
+    get open() {
+        return this.elementRef.nativeElement['open'];
+    }
+    set status(value) {
+        this.elementRef.nativeElement['status'] = value;
+    }
+    get status() {
+        return this.elementRef.nativeElement['status'];
+    }
+    set duration(value) {
+        this.elementRef.nativeElement['duration'] = value;
+    }
+    get duration() {
+        return this.elementRef.nativeElement['duration'];
+    }
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
+    }
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
+    }
+    HIDE_EVENT = new EventEmitter();
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.elementRef.nativeElement.addEventListener('HIDE_EVENT', (e) => {
+            this.HIDE_EVENT.emit(e.detail);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxToaster, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PxToaster, isStandalone: true, selector: "px-toaster", inputs: { id: "id", open: "open", status: "status", duration: "duration", inverted: "inverted" }, outputs: { HIDE_EVENT: "HIDE_EVENT" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PxToaster, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-toaster',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], duration: [{
+                type: Input
+            }], inverted: [{
+                type: Input
+            }], HIDE_EVENT: [{
+                type: Output
+            }] } });
 /**
  * @description Type-only wrapper for <px-typography>
  */
@@ -41266,7 +41913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }] } });
 class Lavender {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Lavender, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: Lavender, imports: [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, PxInput, PxSelect, PxTextarea, PxFileupload, PxImg, PxPicture, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxSection, PxRibbon, 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, PxInput, PxSelect, PxTextarea, PxFileupload, PxImg, PxPicture, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxSection, PxRibbon, 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: "19.2.25", ngImport: i0, type: Lavender, imports: [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, PxCodeInput, 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, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxToaster, 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, PxCodeInput, 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, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxToaster, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Lavender });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Lavender, decorators: [{
@@ -41309,12 +41956,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxH5,
                         PxH6,
                         PxHeadingGroup,
+                        PxImg,
+                        PxPicture,
                         PxInput,
                         PxSelect,
                         PxTextarea,
                         PxFileupload,
-                        PxImg,
-                        PxPicture,
+                        PxCodeInput,
                         PxPage,
                         PxSpacer,
                         PxStack,
@@ -41334,8 +41982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxRadio,
                         PxRadioBase,
                         PxRadioGroup,
-                        PxSection,
                         PxRibbon,
+                        PxSection,
                         PxSelectableBox,
                         PxSelectableBoxCheckbox,
                         PxSelectableBoxRadio,
@@ -41345,7 +41993,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxSpinner,
                         PxStatus,
                         PxStatusCard,
-                        PxStickyContainer,
                         PxThemeSwitcher,
                         PxSwitch,
                         PxTable,
@@ -41366,6 +42013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxTileSwitch,
                         PxTimeline,
                         PxTimelineItem,
+                        PxToaster,
                         PxTypography,
                         PxPatch,
                         PxIcon,
@@ -41411,12 +42059,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxH5,
                         PxH6,
                         PxHeadingGroup,
+                        PxImg,
+                        PxPicture,
                         PxInput,
                         PxSelect,
                         PxTextarea,
                         PxFileupload,
-                        PxImg,
-                        PxPicture,
+                        PxCodeInput,
                         PxPage,
                         PxSpacer,
                         PxStack,
@@ -41436,8 +42085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxRadio,
                         PxRadioBase,
                         PxRadioGroup,
-                        PxSection,
                         PxRibbon,
+                        PxSection,
                         PxSelectableBox,
                         PxSelectableBoxCheckbox,
                         PxSelectableBoxRadio,
@@ -41447,7 +42096,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxSpinner,
                         PxStatus,
                         PxStatusCard,
-                        PxStickyContainer,
                         PxThemeSwitcher,
                         PxSwitch,
                         PxTable,
@@ -41468,6 +42116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         PxTileSwitch,
                         PxTimeline,
                         PxTimelineItem,
+                        PxToaster,
                         PxTypography,
                         PxPatch,
                         PxIcon,
@@ -41483,5 +42132,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Lavender, LavenderValueAccessors, PxA, PxAWrapper, PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxAppleseed, PxBanner, PxBreadcrumb, PxBreadcrumbItem, PxButton, PxButtonIcon, PxButtonWrapper, PxCard, PxCardActions, PxCardContainer, PxCardHeading, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxCheckboxValueAccessor, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxFileupload, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxHstack, PxIcon, PxIconSet, PxImg, PxInput, PxInputValueAccessor, PxList, PxListItem, PxModal, PxP, PxPage, PxPatch, PxPicture, PxPillar, PxPrice, PxProximusThemeProvider, PxRadio, PxRadioBase, PxRadioGroup, PxRadioGroupValueAccessor, PxRibbon, PxScarletThemeProvider, PxSection, PxSelect, PxSelectValueAccessor, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpacer, PxSpan, PxSpinner, PxStack, PxStatus, PxStatusCard, PxStickyContainer, PxSwitch, PxSwitchValueAccessor, PxTab, PxTabPanel, PxTable, PxTabs, PxTag, PxTbody, PxTd, PxTextarea, PxTextareaValueAccessor, PxTh, PxThead, PxThemeProvider, PxThemeSwitcher, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTr, PxTypography, PxVstack };
+export { Lavender, LavenderValueAccessors, PxA, PxAWrapper, PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxAppleseed, PxBanner, PxBreadcrumb, PxBreadcrumbItem, PxButton, PxButtonIcon, PxButtonWrapper, PxCard, PxCardActions, PxCardContainer, PxCardHeading, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxCheckboxValueAccessor, PxCodeInput, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxFileupload, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxHstack, PxIcon, PxIconSet, PxImg, PxInput, PxInputValueAccessor, PxList, PxListItem, PxModal, PxP, PxPage, PxPatch, PxPicture, PxPillar, PxPrice, PxProximusThemeProvider, PxRadio, PxRadioBase, PxRadioGroup, PxRadioGroupValueAccessor, PxRibbon, PxScarletThemeProvider, PxSection, PxSelect, PxSelectValueAccessor, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpacer, PxSpan, PxSpinner, PxStack, PxStatus, PxStatusCard, PxSwitch, PxSwitchValueAccessor, PxTab, PxTabPanel, PxTable, PxTabs, PxTag, PxTbody, PxTd, PxTextarea, PxTextareaValueAccessor, PxTh, PxThead, PxThemeProvider, PxThemeSwitcher, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxToaster, PxTr, PxTypography, PxVstack };
 //# sourceMappingURL=proximus-lavender-angular.mjs.map