@proximus/lavender-angular 1.0.0-alpha.4 → 1.0.0-alpha.6

package/fesm2022/proximus-lavender-angular.mjs

@@ -1,19 +1,17 @@
 import * as i0 from '@angular/core';
-import { forwardRef, HostListener, Directive, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import { HostListener, Directive, forwardRef, NgModule, Input, EventEmitter, Output } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-class PxSelectValueAccessor {
+// ─── Base ────────────────────────────────────────────────────────────────────
+class BaseValueAccessor {
     elementRef;
     onChange = () => { };
     onTouched = () => { };
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    handleInput(value) {
-        this.onChange(value);
-    }
-    writeValue(value) {
-        this.elementRef.nativeElement.value = value;
+    handleBlur() {
+        this.onTouched();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -24,14 +22,65 @@ class PxSelectValueAccessor {
     setDisabledState(isDisabled) {
         this.elementRef.nativeElement.disabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: BaseValueAccessor, host: { listeners: { "blur": "handleBlur()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseValueAccessor, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+// ─── Text-based (value) accessors ────────────────────────────────────────────
+class TextValueAccessor extends BaseValueAccessor {
+    handleInput(value) {
+        this.onChange(value);
+    }
+    writeValue(value) {
+        this.elementRef.nativeElement.value = value ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TextValueAccessor, host: { listeners: { "input": "handleInput($event.target.value)" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextValueAccessor, decorators: [{
+            type: Directive
+        }], propDecorators: { handleInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target.value']]
+            }] } });
+// ─── Boolean-based (checked) accessors ───────────────────────────────────────
+class CheckedValueAccessor extends BaseValueAccessor {
+    handleChange(checked) {
+        this.onChange(checked);
+    }
+    writeValue(value) {
+        this.elementRef.nativeElement.checked = !!value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckedValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CheckedValueAccessor, host: { listeners: { "change": "handleChange($event.target.checked)" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckedValueAccessor, decorators: [{
+            type: Directive
+        }], propDecorators: { handleChange: [{
+                type: HostListener,
+                args: ['change', ['$event.target.checked']]
+            }] } });
+// ─── px-select ───────────────────────────────────────────────────────────────
+class PxSelectValueAccessor extends BaseValueAccessor {
+    handleInput(value) {
+        this.onChange(value);
+    }
+    writeValue(value) {
+        this.elementRef.nativeElement.value = value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSelectValueAccessor, isStandalone: true, selector: "px-select[formControlName],px-select[formControl],px-select[ngModel]", host: { listeners: { "change": "handleInput($event.target.value)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PxSelectValueAccessor),
                 multi: true,
             },
-        ], ngImport: i0 });
+        ], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectValueAccessor, decorators: [{
             type: Directive,
@@ -46,10 +95,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleInput: [{
+        }], propDecorators: { handleInput: [{
                 type: HostListener,
                 args: ['change', ['$event.target.value']]
             }] } });
+// ─── px-input ────────────────────────────────────────────────────────────────
+class PxInputValueAccessor extends TextValueAccessor {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxInputValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxInputValueAccessor, isStandalone: true, selector: "px-input[formControlName],px-input[formControl],px-input[ngModel]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PxInputValueAccessor),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxInputValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-input[formControlName],px-input[formControl],px-input[ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PxInputValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }] });
+// ─── px-textarea ─────────────────────────────────────────────────────────────
+class PxTextareaValueAccessor extends TextValueAccessor {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTextareaValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTextareaValueAccessor, isStandalone: true, selector: "px-textarea[formControlName],px-textarea[formControl],px-textarea[ngModel]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PxTextareaValueAccessor),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTextareaValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-textarea[formControlName],px-textarea[formControl],px-textarea[ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PxTextareaValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }] });
+// ─── px-checkbox ─────────────────────────────────────────────────────────────
+class PxCheckboxValueAccessor extends CheckedValueAccessor {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCheckboxValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCheckboxValueAccessor, isStandalone: true, selector: "px-checkbox[formControlName],px-checkbox[formControl],px-checkbox[ngModel]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PxCheckboxValueAccessor),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCheckboxValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-checkbox[formControlName],px-checkbox[formControl],px-checkbox[ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PxCheckboxValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }] });
+// ─── px-switch ───────────────────────────────────────────────────────────────
+class PxSwitchValueAccessor extends CheckedValueAccessor {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSwitchValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSwitchValueAccessor, isStandalone: true, selector: "px-switch[formControlName],px-switch[formControl],px-switch[ngModel]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PxSwitchValueAccessor),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSwitchValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-switch[formControlName],px-switch[formControl],px-switch[ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PxSwitchValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }] });
+// ─── px-radio-group ──────────────────────────────────────────────────────────
+class PxRadioGroupValueAccessor extends BaseValueAccessor {
+    handleChange(event) {
+        const radio = event.target;
+        this.onChange(radio.getAttribute('value'));
+    }
+    writeValue(value) {
+        const radios = this.elementRef.nativeElement.querySelectorAll('px-radio');
+        radios.forEach((radio) => {
+            radio.checked = radio.getAttribute('value') === value;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioGroupValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxRadioGroupValueAccessor, isStandalone: true, selector: "px-radio-group[formControlName],px-radio-group[formControl],px-radio-group[ngModel]", host: { listeners: { "change": "handleChange($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PxRadioGroupValueAccessor),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioGroupValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-radio-group[formControlName],px-radio-group[formControl],px-radio-group[ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PxRadioGroupValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }], propDecorators: { handleChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }] } });
+// ─── NgModule ────────────────────────────────────────────────────────────────
+const VALUE_ACCESSORS = [
+    PxSelectValueAccessor,
+    PxInputValueAccessor,
+    PxTextareaValueAccessor,
+    PxCheckboxValueAccessor,
+    PxSwitchValueAccessor,
+    PxRadioGroupValueAccessor,
+];
+class LavenderValueAccessors {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LavenderValueAccessors, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LavenderValueAccessors, imports: [PxSelectValueAccessor, PxInputValueAccessor, PxTextareaValueAccessor, PxCheckboxValueAccessor, PxSwitchValueAccessor, PxRadioGroupValueAccessor], exports: [PxSelectValueAccessor, PxInputValueAccessor, PxTextareaValueAccessor, PxCheckboxValueAccessor, PxSwitchValueAccessor, PxRadioGroupValueAccessor] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LavenderValueAccessors });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LavenderValueAccessors, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: VALUE_ACCESSORS,
+                    exports: VALUE_ACCESSORS,
+                }]
+        }] });
 
 /**
  * @description Type-only wrapper for <px-accordion>
@@ -2360,16 +2568,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['order--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-breadcrumb-item>
+ * @description Type-only wrapper for <px-button>
  */
-class PxBreadcrumbItem {
+class PxButton {
     elementRef;
+    set variant(value) {
+        this.elementRef.nativeElement['variant'] = value;
+    }
+    get variant() {
+        return this.elementRef.nativeElement['variant'];
+    }
+    set state(value) {
+        this.elementRef.nativeElement['state'] = value;
+    }
+    get state() {
+        return this.elementRef.nativeElement['state'];
+    }
+    set loading(value) {
+        this.elementRef.nativeElement['loading'] = value;
+    }
+    get loading() {
+        return this.elementRef.nativeElement['loading'];
+    }
+    set shape(value) {
+        this.elementRef.nativeElement['shape'] = value;
+    }
+    get shape() {
+        return this.elementRef.nativeElement['shape'];
+    }
+    set shapeMobile(value) {
+        this.elementRef.nativeElement['shapeMobile'] = value;
+    }
+    get shapeMobile() {
+        return this.elementRef.nativeElement['shapeMobile'];
+    }
+    set shapeTablet(value) {
+        this.elementRef.nativeElement['shapeTablet'] = value;
+    }
+    get shapeTablet() {
+        return this.elementRef.nativeElement['shapeTablet'];
+    }
+    set shapeLaptop(value) {
+        this.elementRef.nativeElement['shapeLaptop'] = value;
+    }
+    get shapeLaptop() {
+        return this.elementRef.nativeElement['shapeLaptop'];
+    }
+    set shapeDesktop(value) {
+        this.elementRef.nativeElement['shapeDesktop'] = value;
+    }
+    get shapeDesktop() {
+        return this.elementRef.nativeElement['shapeDesktop'];
+    }
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
     }
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
+    set ariaExpanded(value) {
+        this.elementRef.nativeElement['ariaExpanded'] = value;
+    }
+    get ariaExpanded() {
+        return this.elementRef.nativeElement['ariaExpanded'];
+    }
+    set extended(value) {
+        this.elementRef.nativeElement['extended'] = value;
+    }
+    get extended() {
+        return this.elementRef.nativeElement['extended'];
+    }
+    set extendedMobile(value) {
+        this.elementRef.nativeElement['extendedMobile'] = value;
+    }
+    get extendedMobile() {
+        return this.elementRef.nativeElement['extendedMobile'];
+    }
+    set extendedTablet(value) {
+        this.elementRef.nativeElement['extendedTablet'] = value;
+    }
+    get extendedTablet() {
+        return this.elementRef.nativeElement['extendedTablet'];
+    }
+    set extendedLaptop(value) {
+        this.elementRef.nativeElement['extendedLaptop'] = value;
+    }
+    get extendedLaptop() {
+        return this.elementRef.nativeElement['extendedLaptop'];
+    }
+    set extendedDesktop(value) {
+        this.elementRef.nativeElement['extendedDesktop'] = value;
+    }
+    get extendedDesktop() {
+        return this.elementRef.nativeElement['extendedDesktop'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -2643,16 +2935,53 @@ class PxBreadcrumbItem {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumbItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxBreadcrumbItem, selector: "px-breadcrumb-item", 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"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButton, selector: "px-button", inputs: { variant: "variant", state: "state", loading: "loading", shape: "shape", shapeMobile: ["shape--mobile", "shapeMobile"], shapeTablet: ["shape--tablet", "shapeTablet"], shapeLaptop: ["shape--laptop", "shapeLaptop"], shapeDesktop: ["shape--desktop", "shapeDesktop"], inverted: "inverted", ariaExpanded: ["aria-expanded", "ariaExpanded"], extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], 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"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumbItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-breadcrumb-item',
+                    selector: 'px-button',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], shape: [{
                 type: Input
+            }], shapeMobile: [{
+                type: Input,
+                args: ['shape--mobile']
+            }], shapeTablet: [{
+                type: Input,
+                args: ['shape--tablet']
+            }], shapeLaptop: [{
+                type: Input,
+                args: ['shape--laptop']
+            }], shapeDesktop: [{
+                type: Input,
+                args: ['shape--desktop']
+            }], inverted: [{
+                type: Input
+            }], ariaExpanded: [{
+                type: Input,
+                args: ['aria-expanded']
+            }], extended: [{
+                type: Input
+            }], extendedMobile: [{
+                type: Input,
+                args: ['extended--mobile']
+            }], extendedTablet: [{
+                type: Input,
+                args: ['extended--tablet']
+            }], extendedLaptop: [{
+                type: Input,
+                args: ['extended--laptop']
+            }], extendedDesktop: [{
+                type: Input,
+                args: ['extended--desktop']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -2785,9 +3114,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['order--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-breadcrumb>
+ * @description Type-only wrapper for <px-breadcrumb-item>
  */
-class PxBreadcrumb {
+class PxBreadcrumbItem {
     elementRef;
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
@@ -2795,12 +3124,6 @@ class PxBreadcrumb {
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
-    set ariaLabel(value) {
-        this.elementRef.nativeElement['ariaLabel'] = value;
-    }
-    get ariaLabel() {
-        return this.elementRef.nativeElement['ariaLabel'];
-    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -3074,19 +3397,16 @@ class PxBreadcrumb {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumb, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxBreadcrumb, selector: "px-breadcrumb", inputs: { inverted: "inverted", ariaLabel: ["aria-label", "ariaLabel"], 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"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumbItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxBreadcrumbItem, selector: "px-breadcrumb-item", 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"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumbItem, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-breadcrumb',
+                    selector: 'px-breadcrumb-item',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -3219,99 +3539,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['order--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-button>
+ * @description Type-only wrapper for <px-breadcrumb>
  */
-class PxButton {
+class PxBreadcrumb {
     elementRef;
-    set variant(value) {
-        this.elementRef.nativeElement['variant'] = value;
-    }
-    get variant() {
-        return this.elementRef.nativeElement['variant'];
-    }
-    set state(value) {
-        this.elementRef.nativeElement['state'] = value;
-    }
-    get state() {
-        return this.elementRef.nativeElement['state'];
-    }
-    set loading(value) {
-        this.elementRef.nativeElement['loading'] = value;
-    }
-    get loading() {
-        return this.elementRef.nativeElement['loading'];
-    }
-    set shape(value) {
-        this.elementRef.nativeElement['shape'] = value;
-    }
-    get shape() {
-        return this.elementRef.nativeElement['shape'];
-    }
-    set shapeMobile(value) {
-        this.elementRef.nativeElement['shapeMobile'] = value;
-    }
-    get shapeMobile() {
-        return this.elementRef.nativeElement['shapeMobile'];
-    }
-    set shapeTablet(value) {
-        this.elementRef.nativeElement['shapeTablet'] = value;
-    }
-    get shapeTablet() {
-        return this.elementRef.nativeElement['shapeTablet'];
-    }
-    set shapeLaptop(value) {
-        this.elementRef.nativeElement['shapeLaptop'] = value;
-    }
-    get shapeLaptop() {
-        return this.elementRef.nativeElement['shapeLaptop'];
-    }
-    set shapeDesktop(value) {
-        this.elementRef.nativeElement['shapeDesktop'] = value;
-    }
-    get shapeDesktop() {
-        return this.elementRef.nativeElement['shapeDesktop'];
-    }
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
     }
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
-    set ariaExpanded(value) {
-        this.elementRef.nativeElement['ariaExpanded'] = value;
-    }
-    get ariaExpanded() {
-        return this.elementRef.nativeElement['ariaExpanded'];
-    }
-    set extended(value) {
-        this.elementRef.nativeElement['extended'] = value;
-    }
-    get extended() {
-        return this.elementRef.nativeElement['extended'];
-    }
-    set extendedMobile(value) {
-        this.elementRef.nativeElement['extendedMobile'] = value;
-    }
-    get extendedMobile() {
-        return this.elementRef.nativeElement['extendedMobile'];
-    }
-    set extendedTablet(value) {
-        this.elementRef.nativeElement['extendedTablet'] = value;
-    }
-    get extendedTablet() {
-        return this.elementRef.nativeElement['extendedTablet'];
-    }
-    set extendedLaptop(value) {
-        this.elementRef.nativeElement['extendedLaptop'] = value;
-    }
-    get extendedLaptop() {
-        return this.elementRef.nativeElement['extendedLaptop'];
-    }
-    set extendedDesktop(value) {
-        this.elementRef.nativeElement['extendedDesktop'] = value;
+    set ariaLabel(value) {
+        this.elementRef.nativeElement['ariaLabel'] = value;
     }
-    get extendedDesktop() {
-        return this.elementRef.nativeElement['extendedDesktop'];
+    get ariaLabel() {
+        return this.elementRef.nativeElement['ariaLabel'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -3586,53 +3828,19 @@ class PxButton {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButton, selector: "px-button", inputs: { variant: "variant", state: "state", loading: "loading", shape: "shape", shapeMobile: ["shape--mobile", "shapeMobile"], shapeTablet: ["shape--tablet", "shapeTablet"], shapeLaptop: ["shape--laptop", "shapeLaptop"], shapeDesktop: ["shape--desktop", "shapeDesktop"], inverted: "inverted", ariaExpanded: ["aria-expanded", "ariaExpanded"], extended: "extended", extendedMobile: ["extended--mobile", "extendedMobile"], extendedTablet: ["extended--tablet", "extendedTablet"], extendedLaptop: ["extended--laptop", "extendedLaptop"], extendedDesktop: ["extended--desktop", "extendedDesktop"], 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"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumb, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxBreadcrumb, selector: "px-breadcrumb", inputs: { inverted: "inverted", ariaLabel: ["aria-label", "ariaLabel"], 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"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxBreadcrumb, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-button',
+                    selector: 'px-breadcrumb',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], shape: [{
-                type: Input
-            }], shapeMobile: [{
-                type: Input,
-                args: ['shape--mobile']
-            }], shapeTablet: [{
-                type: Input,
-                args: ['shape--tablet']
-            }], shapeLaptop: [{
-                type: Input,
-                args: ['shape--laptop']
-            }], shapeDesktop: [{
-                type: Input,
-                args: ['shape--desktop']
-            }], inverted: [{
-                type: Input
-            }], ariaExpanded: [{
-                type: Input,
-                args: ['aria-expanded']
-            }], extended: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
-            }], extendedMobile: [{
-                type: Input,
-                args: ['extended--mobile']
-            }], extendedTablet: [{
-                type: Input,
-                args: ['extended--tablet']
-            }], extendedLaptop: [{
-                type: Input,
-                args: ['extended--laptop']
-            }], extendedDesktop: [{
+            }], ariaLabel: [{
                 type: Input,
-                args: ['extended--desktop']
+                args: ['aria-label']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -3765,9 +3973,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['order--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-button-icon>
+ * @description Type-only wrapper for <px-appleseed>
  */
-class PxButtonIcon {
+class PxAppleseed {
+    elementRef;
+    set amount(value) {
+        this.elementRef.nativeElement['amount'] = value;
+    }
+    get amount() {
+        return this.elementRef.nativeElement['amount'];
+    }
+    set active(value) {
+        this.elementRef.nativeElement['active'] = value;
+    }
+    get active() {
+        return this.elementRef.nativeElement['active'];
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxAppleseed, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxAppleseed, selector: "px-appleseed", inputs: { amount: "amount", active: "active" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxAppleseed, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-appleseed',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { amount: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }] } });
+/**
+ * @description Type-only wrapper for <px-carousel>
+ */
+class PxCarousel {
+    elementRef;
+    set visibleItems(value) {
+        this.elementRef.nativeElement['visibleItems'] = value;
+    }
+    get visibleItems() {
+        return this.elementRef.nativeElement['visibleItems'];
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarousel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCarousel, selector: "px-carousel", inputs: { visibleItems: ["visible-items", "visibleItems"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarousel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-carousel',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibleItems: [{
+                type: Input,
+                args: ['visible-items']
+            }] } });
+/**
+ * @description Type-only wrapper for <px-carousel-item>
+ */
+class PxCarouselItem {
+    elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarouselItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCarouselItem, selector: "px-carousel-item", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarouselItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-carousel-item',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+/**
+ * @description Type-only wrapper for <px-card>
+ */
+class PxCard {
     elementRef;
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
@@ -3775,29 +4059,83 @@ class PxButtonIcon {
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
-    set loading(value) {
-        this.elementRef.nativeElement['loading'] = value;
+    set backgroundColor(value) {
+        this.elementRef.nativeElement['backgroundColor'] = value;
     }
-    get loading() {
-        return this.elementRef.nativeElement['loading'];
+    get backgroundColor() {
+        return this.elementRef.nativeElement['backgroundColor'];
     }
-    set size(value) {
-        this.elementRef.nativeElement['size'] = value;
+    set backgroundSize(value) {
+        this.elementRef.nativeElement['backgroundSize'] = value;
     }
-    get size() {
-        return this.elementRef.nativeElement['size'];
+    get backgroundSize() {
+        return this.elementRef.nativeElement['backgroundSize'];
     }
-    set variant(value) {
-        this.elementRef.nativeElement['variant'] = value;
+    set backgroundPosition(value) {
+        this.elementRef.nativeElement['backgroundPosition'] = value;
     }
-    get variant() {
-        return this.elementRef.nativeElement['variant'];
+    get backgroundPosition() {
+        return this.elementRef.nativeElement['backgroundPosition'];
     }
-    set ariaExpanded(value) {
-        this.elementRef.nativeElement['ariaExpanded'] = value;
+    set contrastHelperGradient(value) {
+        this.elementRef.nativeElement['contrastHelperGradient'] = value;
     }
-    get ariaExpanded() {
-        return this.elementRef.nativeElement['ariaExpanded'];
+    get contrastHelperGradient() {
+        return this.elementRef.nativeElement['contrastHelperGradient'];
+    }
+    set contrastHelperOverlay(value) {
+        this.elementRef.nativeElement['contrastHelperOverlay'] = value;
+    }
+    get contrastHelperOverlay() {
+        return this.elementRef.nativeElement['contrastHelperOverlay'];
+    }
+    set mediaPosition(value) {
+        this.elementRef.nativeElement['mediaPosition'] = value;
+    }
+    get mediaPosition() {
+        return this.elementRef.nativeElement['mediaPosition'];
+    }
+    set mediaPositionMobile(value) {
+        this.elementRef.nativeElement['mediaPositionMobile'] = value;
+    }
+    get mediaPositionMobile() {
+        return this.elementRef.nativeElement['mediaPositionMobile'];
+    }
+    set mediaPositionTablet(value) {
+        this.elementRef.nativeElement['mediaPositionTablet'] = value;
+    }
+    get mediaPositionTablet() {
+        return this.elementRef.nativeElement['mediaPositionTablet'];
+    }
+    set mediaPositionLaptop(value) {
+        this.elementRef.nativeElement['mediaPositionLaptop'] = value;
+    }
+    get mediaPositionLaptop() {
+        return this.elementRef.nativeElement['mediaPositionLaptop'];
+    }
+    set mediaSrc(value) {
+        this.elementRef.nativeElement['mediaSrc'] = value;
+    }
+    get mediaSrc() {
+        return this.elementRef.nativeElement['mediaSrc'];
+    }
+    set mediaSrcMobile(value) {
+        this.elementRef.nativeElement['mediaSrcMobile'] = value;
+    }
+    get mediaSrcMobile() {
+        return this.elementRef.nativeElement['mediaSrcMobile'];
+    }
+    set mediaSrcTablet(value) {
+        this.elementRef.nativeElement['mediaSrcTablet'] = value;
+    }
+    get mediaSrcTablet() {
+        return this.elementRef.nativeElement['mediaSrcTablet'];
+    }
+    set mediaSrcLaptop(value) {
+        this.elementRef.nativeElement['mediaSrcLaptop'] = value;
+    }
+    get mediaSrcLaptop() {
+        return this.elementRef.nativeElement['mediaSrcLaptop'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -4072,25 +4410,55 @@ class PxButtonIcon {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButtonIcon, selector: "px-button-icon", inputs: { inverted: "inverted", loading: "loading", size: "size", variant: "variant", ariaExpanded: ["aria-expanded", "ariaExpanded"], 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"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCard, selector: "px-card", inputs: { inverted: "inverted", backgroundColor: ["background-color", "backgroundColor"], backgroundSize: ["background-size", "backgroundSize"], backgroundPosition: ["background-position", "backgroundPosition"], contrastHelperGradient: ["contrast-helper-gradient", "contrastHelperGradient"], contrastHelperOverlay: ["contrast-helper-overlay", "contrastHelperOverlay"], mediaPosition: ["media-position", "mediaPosition"], mediaPositionMobile: ["media-position--mobile", "mediaPositionMobile"], mediaPositionTablet: ["media-position--tablet", "mediaPositionTablet"], mediaPositionLaptop: ["media-position--laptop", "mediaPositionLaptop"], mediaSrc: ["media-src", "mediaSrc"], mediaSrcMobile: ["media-src--mobile", "mediaSrcMobile"], mediaSrcTablet: ["media-src--tablet", "mediaSrcTablet"], mediaSrcLaptop: ["media-src--laptop", "mediaSrcLaptop"], 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"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-button-icon',
+                    selector: 'px-card',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
-            }], loading: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], ariaExpanded: [{
+            }], backgroundColor: [{
                 type: Input,
-                args: ['aria-expanded']
+                args: ['background-color']
+            }], backgroundSize: [{
+                type: Input,
+                args: ['background-size']
+            }], backgroundPosition: [{
+                type: Input,
+                args: ['background-position']
+            }], contrastHelperGradient: [{
+                type: Input,
+                args: ['contrast-helper-gradient']
+            }], contrastHelperOverlay: [{
+                type: Input,
+                args: ['contrast-helper-overlay']
+            }], mediaPosition: [{
+                type: Input,
+                args: ['media-position']
+            }], mediaPositionMobile: [{
+                type: Input,
+                args: ['media-position--mobile']
+            }], mediaPositionTablet: [{
+                type: Input,
+                args: ['media-position--tablet']
+            }], mediaPositionLaptop: [{
+                type: Input,
+                args: ['media-position--laptop']
+            }], mediaSrc: [{
+                type: Input,
+                args: ['media-src']
+            }], mediaSrcMobile: [{
+                type: Input,
+                args: ['media-src--mobile']
+            }], mediaSrcTablet: [{
+                type: Input,
+                args: ['media-src--tablet']
+            }], mediaSrcLaptop: [{
+                type: Input,
+                args: ['media-src--laptop']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -4223,85 +4591,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['order--desktop']
             }] } });
 /**
- * @description Type-only wrapper for <px-appleseed>
- */
-class PxAppleseed {
-    elementRef;
-    set amount(value) {
-        this.elementRef.nativeElement['amount'] = value;
-    }
-    get amount() {
-        return this.elementRef.nativeElement['amount'];
-    }
-    set active(value) {
-        this.elementRef.nativeElement['active'] = value;
-    }
-    get active() {
-        return this.elementRef.nativeElement['active'];
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxAppleseed, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxAppleseed, selector: "px-appleseed", inputs: { amount: "amount", active: "active" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxAppleseed, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-appleseed',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { amount: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }] } });
-/**
- * @description Type-only wrapper for <px-carousel>
- */
-class PxCarousel {
-    elementRef;
-    set visibleItems(value) {
-        this.elementRef.nativeElement['visibleItems'] = value;
-    }
-    get visibleItems() {
-        return this.elementRef.nativeElement['visibleItems'];
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarousel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCarousel, selector: "px-carousel", inputs: { visibleItems: ["visible-items", "visibleItems"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarousel, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-carousel',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibleItems: [{
-                type: Input,
-                args: ['visible-items']
-            }] } });
-/**
- * @description Type-only wrapper for <px-carousel-item>
- */
-class PxCarouselItem {
-    elementRef;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarouselItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCarouselItem, selector: "px-carousel-item", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCarouselItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-carousel-item',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-/**
- * @description Type-only wrapper for <px-card>
+ * @description Type-only wrapper for <px-button-icon>
  */
-class PxCard {
+class PxButtonIcon {
     elementRef;
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
@@ -4309,83 +4601,29 @@ class PxCard {
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
-    set backgroundColor(value) {
-        this.elementRef.nativeElement['backgroundColor'] = value;
-    }
-    get backgroundColor() {
-        return this.elementRef.nativeElement['backgroundColor'];
-    }
-    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 contrastHelperGradient(value) {
-        this.elementRef.nativeElement['contrastHelperGradient'] = value;
-    }
-    get contrastHelperGradient() {
-        return this.elementRef.nativeElement['contrastHelperGradient'];
-    }
-    set contrastHelperOverlay(value) {
-        this.elementRef.nativeElement['contrastHelperOverlay'] = value;
-    }
-    get contrastHelperOverlay() {
-        return this.elementRef.nativeElement['contrastHelperOverlay'];
-    }
-    set mediaPosition(value) {
-        this.elementRef.nativeElement['mediaPosition'] = value;
-    }
-    get mediaPosition() {
-        return this.elementRef.nativeElement['mediaPosition'];
-    }
-    set mediaPositionMobile(value) {
-        this.elementRef.nativeElement['mediaPositionMobile'] = value;
-    }
-    get mediaPositionMobile() {
-        return this.elementRef.nativeElement['mediaPositionMobile'];
-    }
-    set mediaPositionTablet(value) {
-        this.elementRef.nativeElement['mediaPositionTablet'] = value;
-    }
-    get mediaPositionTablet() {
-        return this.elementRef.nativeElement['mediaPositionTablet'];
-    }
-    set mediaPositionLaptop(value) {
-        this.elementRef.nativeElement['mediaPositionLaptop'] = value;
-    }
-    get mediaPositionLaptop() {
-        return this.elementRef.nativeElement['mediaPositionLaptop'];
-    }
-    set mediaSrc(value) {
-        this.elementRef.nativeElement['mediaSrc'] = value;
+    set loading(value) {
+        this.elementRef.nativeElement['loading'] = value;
     }
-    get mediaSrc() {
-        return this.elementRef.nativeElement['mediaSrc'];
+    get loading() {
+        return this.elementRef.nativeElement['loading'];
     }
-    set mediaSrcMobile(value) {
-        this.elementRef.nativeElement['mediaSrcMobile'] = value;
+    set size(value) {
+        this.elementRef.nativeElement['size'] = value;
     }
-    get mediaSrcMobile() {
-        return this.elementRef.nativeElement['mediaSrcMobile'];
+    get size() {
+        return this.elementRef.nativeElement['size'];
     }
-    set mediaSrcTablet(value) {
-        this.elementRef.nativeElement['mediaSrcTablet'] = value;
+    set variant(value) {
+        this.elementRef.nativeElement['variant'] = value;
     }
-    get mediaSrcTablet() {
-        return this.elementRef.nativeElement['mediaSrcTablet'];
+    get variant() {
+        return this.elementRef.nativeElement['variant'];
     }
-    set mediaSrcLaptop(value) {
-        this.elementRef.nativeElement['mediaSrcLaptop'] = value;
+    set ariaExpanded(value) {
+        this.elementRef.nativeElement['ariaExpanded'] = value;
     }
-    get mediaSrcLaptop() {
-        return this.elementRef.nativeElement['mediaSrcLaptop'];
+    get ariaExpanded() {
+        return this.elementRef.nativeElement['ariaExpanded'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -4660,55 +4898,25 @@ class PxCard {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxCard, selector: "px-card", inputs: { inverted: "inverted", backgroundColor: ["background-color", "backgroundColor"], backgroundSize: ["background-size", "backgroundSize"], backgroundPosition: ["background-position", "backgroundPosition"], contrastHelperGradient: ["contrast-helper-gradient", "contrastHelperGradient"], contrastHelperOverlay: ["contrast-helper-overlay", "contrastHelperOverlay"], mediaPosition: ["media-position", "mediaPosition"], mediaPositionMobile: ["media-position--mobile", "mediaPositionMobile"], mediaPositionTablet: ["media-position--tablet", "mediaPositionTablet"], mediaPositionLaptop: ["media-position--laptop", "mediaPositionLaptop"], mediaSrc: ["media-src", "mediaSrc"], mediaSrcMobile: ["media-src--mobile", "mediaSrcMobile"], mediaSrcTablet: ["media-src--tablet", "mediaSrcTablet"], mediaSrcLaptop: ["media-src--laptop", "mediaSrcLaptop"], 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"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxButtonIcon, selector: "px-button-icon", inputs: { inverted: "inverted", loading: "loading", size: "size", variant: "variant", ariaExpanded: ["aria-expanded", "ariaExpanded"], 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"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxButtonIcon, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-card',
+                    selector: 'px-button-icon',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
-            }], backgroundColor: [{
-                type: Input,
-                args: ['background-color']
-            }], backgroundSize: [{
-                type: Input,
-                args: ['background-size']
-            }], backgroundPosition: [{
-                type: Input,
-                args: ['background-position']
-            }], contrastHelperGradient: [{
-                type: Input,
-                args: ['contrast-helper-gradient']
-            }], contrastHelperOverlay: [{
-                type: Input,
-                args: ['contrast-helper-overlay']
-            }], mediaPosition: [{
-                type: Input,
-                args: ['media-position']
-            }], mediaPositionMobile: [{
-                type: Input,
-                args: ['media-position--mobile']
-            }], mediaPositionTablet: [{
-                type: Input,
-                args: ['media-position--tablet']
-            }], mediaPositionLaptop: [{
-                type: Input,
-                args: ['media-position--laptop']
-            }], mediaSrc: [{
-                type: Input,
-                args: ['media-src']
-            }], mediaSrcMobile: [{
-                type: Input,
-                args: ['media-src--mobile']
-            }], mediaSrcTablet: [{
-                type: Input,
-                args: ['media-src--tablet']
-            }], mediaSrcLaptop: [{
+            }], loading: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], ariaExpanded: [{
                 type: Input,
-                args: ['media-src--laptop']
+                args: ['aria-expanded']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -23712,30 +23920,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class PxRadio {
     elementRef;
+    /** The validation state of the radio button. */
     set state(value) {
         this.elementRef.nativeElement['state'] = value;
     }
     get state() {
         return this.elementRef.nativeElement['state'];
     }
+    /** The visual variant of the radio button. */
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
     }
     get variant() {
         return this.elementRef.nativeElement['variant'];
     }
+    /** Whether to use inverted (dark background) styling. */
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
     }
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
+    /** Whether the radio button is checked. */
+    set checked(value) {
+        this.elementRef.nativeElement['checked'] = value;
+    }
+    get checked() {
+        return this.elementRef.nativeElement['checked'];
+    }
+    /** Whether the radio button is disabled. */
+    set disabled(value) {
+        this.elementRef.nativeElement['disabled'] = value;
+    }
+    get disabled() {
+        return this.elementRef.nativeElement['disabled'];
+    }
+    /** Whether to apply hover styling. */
     set hover(value) {
         this.elementRef.nativeElement['hover'] = value;
     }
     get hover() {
         return this.elementRef.nativeElement['hover'];
     }
+    /** The name of the radio button, used for form submission. */
+    set name(value) {
+        this.elementRef.nativeElement['name'] = value;
+    }
+    get name() {
+        return this.elementRef.nativeElement['name'];
+    }
+    /** The value of the radio button, used for form submission. */
+    set value(value) {
+        this.elementRef.nativeElement['value'] = value;
+    }
+    get value() {
+        return this.elementRef.nativeElement['value'];
+    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -24006,6 +24246,7 @@ class PxRadio {
     get orderDesktop() {
         return this.elementRef.nativeElement['orderDesktop'];
     }
+    /** Fired when the radio button becomes checked. */
     change = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -24014,7 +24255,7 @@ class PxRadio {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadio, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxRadio, selector: "px-radio", inputs: { state: "state", variant: "variant", inverted: "inverted", hover: "hover", 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"] }, outputs: { change: "change" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxRadio, selector: "px-radio", inputs: { state: "state", variant: "variant", inverted: "inverted", checked: "checked", disabled: "disabled", hover: "hover", name: "name", value: "value", 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"] }, outputs: { change: "change" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadio, decorators: [{
             type: Directive,
@@ -24027,8 +24268,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], inverted: [{
                 type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }], hover: [{
                 type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -28012,6 +28261,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input,
                 args: ['order--desktop']
             }] } });
+/**
+ * @description Type-only wrapper for <px-spinner>
+ */
+class PxSpinner {
+    elementRef;
+    set size(value) {
+        this.elementRef.nativeElement['size'] = value;
+    }
+    get size() {
+        return this.elementRef.nativeElement['size'];
+    }
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
+    }
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
+    }
+    set timeout(value) {
+        this.elementRef.nativeElement['timeout'] = value;
+    }
+    get timeout() {
+        return this.elementRef.nativeElement['timeout'];
+    }
+    set ariaLabel(value) {
+        this.elementRef.nativeElement['ariaLabel'] = value;
+    }
+    get ariaLabel() {
+        return this.elementRef.nativeElement['ariaLabel'];
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSpinner, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSpinner, selector: "px-spinner", inputs: { size: "size", inverted: "inverted", timeout: "timeout", ariaLabel: ["aria-label", "ariaLabel"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSpinner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-spinner',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{
+                type: Input
+            }], inverted: [{
+                type: Input
+            }], timeout: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }] } });
 /**
  * @description Type-only wrapper for <px-span>
  */
@@ -28471,56 +28770,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input,
                 args: ['order--desktop']
             }] } });
-/**
- * @description Type-only wrapper for <px-spinner>
- */
-class PxSpinner {
-    elementRef;
-    set size(value) {
-        this.elementRef.nativeElement['size'] = value;
-    }
-    get size() {
-        return this.elementRef.nativeElement['size'];
-    }
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
-    }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
-    }
-    set timeout(value) {
-        this.elementRef.nativeElement['timeout'] = value;
-    }
-    get timeout() {
-        return this.elementRef.nativeElement['timeout'];
-    }
-    set ariaLabel(value) {
-        this.elementRef.nativeElement['ariaLabel'] = value;
-    }
-    get ariaLabel() {
-        return this.elementRef.nativeElement['ariaLabel'];
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSpinner, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSpinner, selector: "px-spinner", inputs: { size: "size", inverted: "inverted", timeout: "timeout", ariaLabel: ["aria-label", "ariaLabel"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSpinner, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-spinner',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{
-                type: Input
-            }], inverted: [{
-                type: Input
-            }], timeout: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }] } });
 /**
  * @description Type-only wrapper for <px-status>
  */
@@ -29940,57 +30189,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input,
                 args: ['order--desktop']
             }] } });
-/**
- * @description Type-only wrapper for <px-tabs>
- */
-class PxTabs {
-    elementRef;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabs, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTabs, selector: "px-tabs", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabs, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-tabs',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-/**
- * @description Type-only wrapper for <px-tab>
- */
-class PxTab {
-    elementRef;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTab, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTab, selector: "px-tab", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTab, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-tab',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-/**
- * @description Type-only wrapper for <px-tab-panel>
- */
-class PxTabPanel {
-    elementRef;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabPanel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTabPanel, selector: "px-tab-panel", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabPanel, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-tab-panel',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
  * @description Type-only wrapper for <px-table>
  */
@@ -30093,6 +30291,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'px-tr',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
+/**
+ * @description Type-only wrapper for <px-tabs>
+ */
+class PxTabs {
+    elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabs, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTabs, selector: "px-tabs", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabs, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-tabs',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+/**
+ * @description Type-only wrapper for <px-tab>
+ */
+class PxTab {
+    elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTab, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTab, selector: "px-tab", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTab, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-tab',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+/**
+ * @description Type-only wrapper for <px-tab-panel>
+ */
+class PxTabPanel {
+    elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabPanel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTabPanel, selector: "px-tab-panel", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTabPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-tab-panel',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
  * @description Type-only wrapper for <px-tag>
  */
@@ -33373,6 +33622,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], change: [{
                 type: Output
             }] } });
+/**
+ * @description Type-only wrapper for <px-typography>
+ */
+class PxTypography {
+    elementRef;
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
+    }
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTypography, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTypography, selector: "px-typography", inputs: { inverted: "inverted" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTypography, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-typography',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
+                type: Input
+            }] } });
 /**
  * @description Type-only wrapper for <px-timeline>
  */
@@ -33439,31 +33713,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], item: [{
                 type: Input
             }] } });
-/**
- * @description Type-only wrapper for <px-typography>
- */
-class PxTypography {
-    elementRef;
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
-    }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTypography, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxTypography, selector: "px-typography", inputs: { inverted: "inverted" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxTypography, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-typography',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
-                type: Input
-            }] } });
 /**
  * @description Type-only wrapper for <px-patch>
  */
@@ -34032,7 +34281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 class Lavender {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: Lavender, declarations: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButton, PxButtonIcon, PxAppleseed, PxCarousel, PxCarouselItem, PxCard, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxList, PxListItem, PxModal, PxP, PxPillar, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTabs, PxTab, PxTabPanel, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, 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, PxButtonIcon, PxAppleseed, PxCarousel, PxCarouselItem, PxCard, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxList, PxListItem, PxModal, PxP, PxPillar, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTabs, PxTab, PxTabPanel, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: Lavender, declarations: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxButton, PxBreadcrumbItem, PxBreadcrumb, PxAppleseed, PxCarousel, PxCarouselItem, PxCard, PxButtonIcon, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxList, PxListItem, PxModal, PxP, PxPillar, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpinner, PxSpan, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTypography, PxTimeline, PxTimelineItem, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider], exports: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxButton, PxBreadcrumbItem, PxBreadcrumb, PxAppleseed, PxCarousel, PxCarouselItem, PxCard, PxButtonIcon, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxList, PxListItem, PxModal, PxP, PxPillar, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpinner, PxSpan, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTypography, PxTimeline, PxTimelineItem, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender, decorators: [{
@@ -34044,14 +34293,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxAgGridTableThButton,
                         PxAgGridTableThContent,
                         PxBanner,
+                        PxButton,
                         PxBreadcrumbItem,
                         PxBreadcrumb,
-                        PxButton,
-                        PxButtonIcon,
                         PxAppleseed,
                         PxCarousel,
                         PxCarouselItem,
                         PxCard,
+                        PxButtonIcon,
                         PxCell,
                         PxCellButton,
                         PxCellCheckbox,
@@ -34102,22 +34351,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxSelectableBoxRadio,
                         PxSeparator,
                         PxSkeleton,
-                        PxSpan,
                         PxSpinner,
+                        PxSpan,
                         PxStatus,
                         PxStatusCard,
                         PxStickyContainer,
                         PxThemeSwitcher,
                         PxSwitch,
-                        PxTabs,
-                        PxTab,
-                        PxTabPanel,
                         PxTable,
                         PxTbody,
                         PxTd,
                         PxTh,
                         PxThead,
                         PxTr,
+                        PxTabs,
+                        PxTab,
+                        PxTabPanel,
                         PxTag,
                         PxTile,
                         PxTileButton,
@@ -34125,9 +34374,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxTileLink,
                         PxTileRadio,
                         PxTileSwitch,
+                        PxTypography,
                         PxTimeline,
                         PxTimelineItem,
-                        PxTypography,
                         PxPatch,
                         PxIcon,
                         PxIconSet,
@@ -34141,14 +34390,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxAgGridTableThButton,
                         PxAgGridTableThContent,
                         PxBanner,
+                        PxButton,
                         PxBreadcrumbItem,
                         PxBreadcrumb,
-                        PxButton,
-                        PxButtonIcon,
                         PxAppleseed,
                         PxCarousel,
                         PxCarouselItem,
                         PxCard,
+                        PxButtonIcon,
                         PxCell,
                         PxCellButton,
                         PxCellCheckbox,
@@ -34199,22 +34448,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxSelectableBoxRadio,
                         PxSeparator,
                         PxSkeleton,
-                        PxSpan,
                         PxSpinner,
+                        PxSpan,
                         PxStatus,
                         PxStatusCard,
                         PxStickyContainer,
                         PxThemeSwitcher,
                         PxSwitch,
-                        PxTabs,
-                        PxTab,
-                        PxTabPanel,
                         PxTable,
                         PxTbody,
                         PxTd,
                         PxTh,
                         PxThead,
                         PxTr,
+                        PxTabs,
+                        PxTab,
+                        PxTabPanel,
                         PxTag,
                         PxTile,
                         PxTileButton,
@@ -34222,9 +34471,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxTileLink,
                         PxTileRadio,
                         PxTileSwitch,
+                        PxTypography,
                         PxTimeline,
                         PxTimelineItem,
-                        PxTypography,
                         PxPatch,
                         PxIcon,
                         PxIconSet,
@@ -34239,5 +34488,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Lavender, PxA, PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxAppleseed, PxBanner, PxBreadcrumb, PxBreadcrumbItem, PxButton, PxButtonIcon, PxCard, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxFileupload, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxHstack, PxIcon, PxIconSet, PxImg, PxInput, PxList, PxListItem, PxModal, PxP, PxPage, PxPatch, PxPicture, PxPillar, PxPrice, PxProximusThemeProvider, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxScarletThemeProvider, PxSection, PxSelect, PxSelectValueAccessor, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpacer, PxSpan, PxSpinner, PxStack, PxStatus, PxStatusCard, PxStickyContainer, PxSwitch, PxTab, PxTabPanel, PxTable, PxTabs, PxTag, PxTbody, PxTd, PxTextarea, PxTh, PxThead, PxThemeProvider, PxThemeSwitcher, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTr, PxTypography, PxVstack };
+export { Lavender, LavenderValueAccessors, PxA, PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxAppleseed, PxBanner, PxBreadcrumb, PxBreadcrumbItem, PxButton, PxButtonIcon, PxCard, 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 };
 //# sourceMappingURL=proximus-lavender-angular.mjs.map