@proximus/lavender-angular 1.4.10-alpha.9 → 1.4.10-beta.1

package/fesm2022/proximus-lavender-angular.mjs

@@ -26023,66 +26023,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
- * @description Type-only wrapper for <px-radio>
+ * @description Type-only wrapper for <px-price>
  */
-class PxRadio {
+class PxPrice {
     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 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'];
     }
-    /** 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;
     }
@@ -26365,38 +26327,23 @@ class PxRadio {
     get stickyBottom() {
         return this.elementRef.nativeElement['stickyBottom'];
     }
-    /** Fired when the radio button becomes checked. */
-    change = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this.elementRef.nativeElement.addEventListener('change', (e) => {
-            this.change.emit(e.detail);
-        });
     }
-    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", 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"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, outputs: { change: "change" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxPrice, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxPrice, selector: "px-price", inputs: { variant: "variant", size: "size", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxPrice, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-radio',
+                    selector: 'px-price',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
-            }], variant: [{
+            }], size: [{
                 type: Input
             }], inverted: [{
                 type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], hover: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -26533,26 +26480,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], stickyBottom: [{
                 type: Input,
                 args: ['sticky-bottom']
-            }], change: [{
-                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-radio-base>
+ * @description Type-only wrapper for <px-radio>
  */
-class PxRadioBase {
+class PxRadio {
     elementRef;
-    set hover(value) {
-        this.elementRef.nativeElement['hover'] = value;
+    /** The validation state of the radio button. */
+    set state(value) {
+        this.elementRef.nativeElement['state'] = value;
     }
-    get hover() {
-        return this.elementRef.nativeElement['hover'];
+    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;
     }
@@ -26835,21 +26824,38 @@ class PxRadioBase {
     get stickyBottom() {
         return this.elementRef.nativeElement['stickyBottom'];
     }
+    /** Fired when the radio button becomes checked. */
+    change = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
+        this.elementRef.nativeElement.addEventListener('change', (e) => {
+            this.change.emit(e.detail);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxRadioBase, selector: "px-radio-base", inputs: { hover: "hover", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
+    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", 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"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, outputs: { change: "change" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadio, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-radio-base',
+                    selector: 'px-radio',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hover: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{
+                type: Input
+            }], variant: [{
                 type: Input
             }], inverted: [{
                 type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hover: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -26986,47 +26992,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], stickyBottom: [{
                 type: Input,
                 args: ['sticky-bottom']
+            }], change: [{
+                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-radio-group>
+ * @description Type-only wrapper for <px-radio-base>
  */
-class PxRadioGroup {
+class PxRadioBase {
     elementRef;
-    set name(value) {
-        this.elementRef.nativeElement['name'] = value;
-    }
-    get name() {
-        return this.elementRef.nativeElement['name'];
-    }
-    set gap(value) {
-        this.elementRef.nativeElement['gap'] = value;
-    }
-    get gap() {
-        return this.elementRef.nativeElement['gap'];
-    }
-    set variant(value) {
-        this.elementRef.nativeElement['variant'] = value;
-    }
-    get variant() {
-        return this.elementRef.nativeElement['variant'];
-    }
-    set required(value) {
-        this.elementRef.nativeElement['required'] = value;
-    }
-    get required() {
-        return this.elementRef.nativeElement['required'];
-    }
-    set disabled(value) {
-        this.elementRef.nativeElement['disabled'] = value;
-    }
-    get disabled() {
-        return this.elementRef.nativeElement['disabled'];
-    }
-    set state(value) {
-        this.elementRef.nativeElement['state'] = value;
+    set hover(value) {
+        this.elementRef.nativeElement['hover'] = value;
     }
-    get state() {
-        return this.elementRef.nativeElement['state'];
+    get hover() {
+        return this.elementRef.nativeElement['hover'];
     }
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
@@ -27319,25 +27297,15 @@ class PxRadioGroup {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioGroup, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxRadioGroup, selector: "px-radio-group", inputs: { name: "name", gap: "gap", variant: "variant", required: "required", disabled: "disabled", state: "state", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxRadioBase, selector: "px-radio-base", inputs: { hover: "hover", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioBase, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-radio-group',
+                    selector: 'px-radio-base',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { name: [{
-                type: Input
-            }], gap: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], state: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hover: [{
                 type: Input
             }], inverted: [{
                 type: Input
@@ -27479,24 +27447,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['sticky-bottom']
             }] } });
 /**
- * @description Type-only wrapper for <px-price>
+ * @description Type-only wrapper for <px-radio-group>
  */
-class PxPrice {
+class PxRadioGroup {
     elementRef;
+    set name(value) {
+        this.elementRef.nativeElement['name'] = value;
+    }
+    get name() {
+        return this.elementRef.nativeElement['name'];
+    }
+    set gap(value) {
+        this.elementRef.nativeElement['gap'] = value;
+    }
+    get gap() {
+        return this.elementRef.nativeElement['gap'];
+    }
     set variant(value) {
         this.elementRef.nativeElement['variant'] = value;
     }
     get variant() {
         return this.elementRef.nativeElement['variant'];
     }
-    set size(value) {
-        this.elementRef.nativeElement['size'] = value;
+    set required(value) {
+        this.elementRef.nativeElement['required'] = value;
     }
-    get size() {
-        return this.elementRef.nativeElement['size'];
+    get required() {
+        return this.elementRef.nativeElement['required'];
     }
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
+    set disabled(value) {
+        this.elementRef.nativeElement['disabled'] = value;
+    }
+    get disabled() {
+        return this.elementRef.nativeElement['disabled'];
+    }
+    set state(value) {
+        this.elementRef.nativeElement['state'] = value;
+    }
+    get state() {
+        return this.elementRef.nativeElement['state'];
+    }
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
     }
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
@@ -27786,17 +27778,25 @@ class PxPrice {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxPrice, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxPrice, selector: "px-price", inputs: { variant: "variant", size: "size", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioGroup, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxRadioGroup, selector: "px-radio-group", inputs: { name: "name", gap: "gap", variant: "variant", required: "required", disabled: "disabled", state: "state", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxPrice, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxRadioGroup, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-price',
+                    selector: 'px-radio-group',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { name: [{
                 type: Input
-            }], size: [{
+            }], gap: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], state: [{
                 type: Input
             }], inverted: [{
                 type: Input
@@ -28535,11 +28535,293 @@ class PxSection {
     get borderSideLaptop() {
         return this.elementRef.nativeElement['borderSideLaptop'];
     }
+    set grow(value) {
+        this.elementRef.nativeElement['grow'] = value;
+    }
+    get grow() {
+        return this.elementRef.nativeElement['grow'];
+    }
+    set growMobile(value) {
+        this.elementRef.nativeElement['growMobile'] = value;
+    }
+    get growMobile() {
+        return this.elementRef.nativeElement['growMobile'];
+    }
+    set growTablet(value) {
+        this.elementRef.nativeElement['growTablet'] = value;
+    }
+    get growTablet() {
+        return this.elementRef.nativeElement['growTablet'];
+    }
+    set growLaptop(value) {
+        this.elementRef.nativeElement['growLaptop'] = value;
+    }
+    get growLaptop() {
+        return this.elementRef.nativeElement['growLaptop'];
+    }
+    set growDesktop(value) {
+        this.elementRef.nativeElement['growDesktop'] = value;
+    }
+    get growDesktop() {
+        return this.elementRef.nativeElement['growDesktop'];
+    }
+    set shrink(value) {
+        this.elementRef.nativeElement['shrink'] = value;
+    }
+    get shrink() {
+        return this.elementRef.nativeElement['shrink'];
+    }
+    set shrinkMobile(value) {
+        this.elementRef.nativeElement['shrinkMobile'] = value;
+    }
+    get shrinkMobile() {
+        return this.elementRef.nativeElement['shrinkMobile'];
+    }
+    set shrinkTablet(value) {
+        this.elementRef.nativeElement['shrinkTablet'] = value;
+    }
+    get shrinkTablet() {
+        return this.elementRef.nativeElement['shrinkTablet'];
+    }
+    set shrinkLaptop(value) {
+        this.elementRef.nativeElement['shrinkLaptop'] = value;
+    }
+    get shrinkLaptop() {
+        return this.elementRef.nativeElement['shrinkLaptop'];
+    }
+    set shrinkDesktop(value) {
+        this.elementRef.nativeElement['shrinkDesktop'] = value;
+    }
+    get shrinkDesktop() {
+        return this.elementRef.nativeElement['shrinkDesktop'];
+    }
+    set basis(value) {
+        this.elementRef.nativeElement['basis'] = value;
+    }
+    get basis() {
+        return this.elementRef.nativeElement['basis'];
+    }
+    set basisMobile(value) {
+        this.elementRef.nativeElement['basisMobile'] = value;
+    }
+    get basisMobile() {
+        return this.elementRef.nativeElement['basisMobile'];
+    }
+    set basisTablet(value) {
+        this.elementRef.nativeElement['basisTablet'] = value;
+    }
+    get basisTablet() {
+        return this.elementRef.nativeElement['basisTablet'];
+    }
+    set basisLaptop(value) {
+        this.elementRef.nativeElement['basisLaptop'] = value;
+    }
+    get basisLaptop() {
+        return this.elementRef.nativeElement['basisLaptop'];
+    }
+    set basisDesktop(value) {
+        this.elementRef.nativeElement['basisDesktop'] = value;
+    }
+    get basisDesktop() {
+        return this.elementRef.nativeElement['basisDesktop'];
+    }
+    set alignSelf(value) {
+        this.elementRef.nativeElement['alignSelf'] = value;
+    }
+    get alignSelf() {
+        return this.elementRef.nativeElement['alignSelf'];
+    }
+    set alignSelfMobile(value) {
+        this.elementRef.nativeElement['alignSelfMobile'] = value;
+    }
+    get alignSelfMobile() {
+        return this.elementRef.nativeElement['alignSelfMobile'];
+    }
+    set alignSelfTablet(value) {
+        this.elementRef.nativeElement['alignSelfTablet'] = value;
+    }
+    get alignSelfTablet() {
+        return this.elementRef.nativeElement['alignSelfTablet'];
+    }
+    set alignSelfLaptop(value) {
+        this.elementRef.nativeElement['alignSelfLaptop'] = value;
+    }
+    get alignSelfLaptop() {
+        return this.elementRef.nativeElement['alignSelfLaptop'];
+    }
+    set alignSelfDesktop(value) {
+        this.elementRef.nativeElement['alignSelfDesktop'] = value;
+    }
+    get alignSelfDesktop() {
+        return this.elementRef.nativeElement['alignSelfDesktop'];
+    }
+    set justifySelf(value) {
+        this.elementRef.nativeElement['justifySelf'] = value;
+    }
+    get justifySelf() {
+        return this.elementRef.nativeElement['justifySelf'];
+    }
+    set justifySelfMobile(value) {
+        this.elementRef.nativeElement['justifySelfMobile'] = value;
+    }
+    get justifySelfMobile() {
+        return this.elementRef.nativeElement['justifySelfMobile'];
+    }
+    set justifySelfTablet(value) {
+        this.elementRef.nativeElement['justifySelfTablet'] = value;
+    }
+    get justifySelfTablet() {
+        return this.elementRef.nativeElement['justifySelfTablet'];
+    }
+    set justifySelfLaptop(value) {
+        this.elementRef.nativeElement['justifySelfLaptop'] = value;
+    }
+    get justifySelfLaptop() {
+        return this.elementRef.nativeElement['justifySelfLaptop'];
+    }
+    set justifySelfDesktop(value) {
+        this.elementRef.nativeElement['justifySelfDesktop'] = value;
+    }
+    get justifySelfDesktop() {
+        return this.elementRef.nativeElement['justifySelfDesktop'];
+    }
+    set hidden(value) {
+        this.elementRef.nativeElement['hidden'] = value;
+    }
+    get hidden() {
+        return this.elementRef.nativeElement['hidden'];
+    }
+    set hiddenMobile(value) {
+        this.elementRef.nativeElement['hiddenMobile'] = value;
+    }
+    get hiddenMobile() {
+        return this.elementRef.nativeElement['hiddenMobile'];
+    }
+    set hiddenTablet(value) {
+        this.elementRef.nativeElement['hiddenTablet'] = value;
+    }
+    get hiddenTablet() {
+        return this.elementRef.nativeElement['hiddenTablet'];
+    }
+    set hiddenLaptop(value) {
+        this.elementRef.nativeElement['hiddenLaptop'] = value;
+    }
+    get hiddenLaptop() {
+        return this.elementRef.nativeElement['hiddenLaptop'];
+    }
+    set hiddenDesktop(value) {
+        this.elementRef.nativeElement['hiddenDesktop'] = value;
+    }
+    get hiddenDesktop() {
+        return this.elementRef.nativeElement['hiddenDesktop'];
+    }
+    set shownSr(value) {
+        this.elementRef.nativeElement['shownSr'] = value;
+    }
+    get shownSr() {
+        return this.elementRef.nativeElement['shownSr'];
+    }
+    set shownSrMobile(value) {
+        this.elementRef.nativeElement['shownSrMobile'] = value;
+    }
+    get shownSrMobile() {
+        return this.elementRef.nativeElement['shownSrMobile'];
+    }
+    set shownSrTablet(value) {
+        this.elementRef.nativeElement['shownSrTablet'] = value;
+    }
+    get shownSrTablet() {
+        return this.elementRef.nativeElement['shownSrTablet'];
+    }
+    set shownSrLaptop(value) {
+        this.elementRef.nativeElement['shownSrLaptop'] = value;
+    }
+    get shownSrLaptop() {
+        return this.elementRef.nativeElement['shownSrLaptop'];
+    }
+    set shownSrDesktop(value) {
+        this.elementRef.nativeElement['shownSrDesktop'] = value;
+    }
+    get shownSrDesktop() {
+        return this.elementRef.nativeElement['shownSrDesktop'];
+    }
+    set colSpan(value) {
+        this.elementRef.nativeElement['colSpan'] = value;
+    }
+    get colSpan() {
+        return this.elementRef.nativeElement['colSpan'];
+    }
+    set colSpanMobile(value) {
+        this.elementRef.nativeElement['colSpanMobile'] = value;
+    }
+    get colSpanMobile() {
+        return this.elementRef.nativeElement['colSpanMobile'];
+    }
+    set colSpanTablet(value) {
+        this.elementRef.nativeElement['colSpanTablet'] = value;
+    }
+    get colSpanTablet() {
+        return this.elementRef.nativeElement['colSpanTablet'];
+    }
+    set colSpanLaptop(value) {
+        this.elementRef.nativeElement['colSpanLaptop'] = value;
+    }
+    get colSpanLaptop() {
+        return this.elementRef.nativeElement['colSpanLaptop'];
+    }
+    set colSpanDesktop(value) {
+        this.elementRef.nativeElement['colSpanDesktop'] = value;
+    }
+    get colSpanDesktop() {
+        return this.elementRef.nativeElement['colSpanDesktop'];
+    }
+    set order(value) {
+        this.elementRef.nativeElement['order'] = value;
+    }
+    get order() {
+        return this.elementRef.nativeElement['order'];
+    }
+    set orderMobile(value) {
+        this.elementRef.nativeElement['orderMobile'] = value;
+    }
+    get orderMobile() {
+        return this.elementRef.nativeElement['orderMobile'];
+    }
+    set orderTablet(value) {
+        this.elementRef.nativeElement['orderTablet'] = value;
+    }
+    get orderTablet() {
+        return this.elementRef.nativeElement['orderTablet'];
+    }
+    set orderLaptop(value) {
+        this.elementRef.nativeElement['orderLaptop'] = value;
+    }
+    get orderLaptop() {
+        return this.elementRef.nativeElement['orderLaptop'];
+    }
+    set orderDesktop(value) {
+        this.elementRef.nativeElement['orderDesktop'] = value;
+    }
+    get orderDesktop() {
+        return this.elementRef.nativeElement['orderDesktop'];
+    }
+    set stickyTop(value) {
+        this.elementRef.nativeElement['stickyTop'] = value;
+    }
+    get stickyTop() {
+        return this.elementRef.nativeElement['stickyTop'];
+    }
+    set stickyBottom(value) {
+        this.elementRef.nativeElement['stickyBottom'] = value;
+    }
+    get stickyBottom() {
+        return this.elementRef.nativeElement['stickyBottom'];
+    }
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSection, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSection, selector: "px-section", inputs: { backgroundColor: ["background-color", "backgroundColor"], backgroundGradient: ["background-gradient", "backgroundGradient"], backgroundImage: ["background-image", "backgroundImage"], backgroundImageMobile: ["background-image--mobile", "backgroundImageMobile"], backgroundImageTablet: ["background-image--tablet", "backgroundImageTablet"], backgroundImageLaptop: ["background-image--laptop", "backgroundImageLaptop"], backgroundSize: ["background-size", "backgroundSize"], backgroundPosition: ["background-position", "backgroundPosition"], paddingBlock: ["padding-block", "paddingBlock"], paddingTop: ["padding-top", "paddingTop"], paddingBottom: ["padding-bottom", "paddingBottom"], paddingBlockMobile: ["padding-block--mobile", "paddingBlockMobile"], paddingTopMobile: ["padding-top--mobile", "paddingTopMobile"], paddingBottomMobile: ["padding-bottom--mobile", "paddingBottomMobile"], paddingBlockTablet: ["padding-block--tablet", "paddingBlockTablet"], paddingTopTablet: ["padding-top--tablet", "paddingTopTablet"], paddingBottomTablet: ["padding-bottom--tablet", "paddingBottomTablet"], paddingBlockLaptop: ["padding-block--laptop", "paddingBlockLaptop"], paddingTopLaptop: ["padding-top--laptop", "paddingTopLaptop"], paddingBottomLaptop: ["padding-bottom--laptop", "paddingBottomLaptop"], border: "border", borderSide: ["border-side", "borderSide"], borderSideMobile: ["border-side--mobile", "borderSideMobile"], borderSideTablet: ["border-side--tablet", "borderSideTablet"], borderSideLaptop: ["border-side--laptop", "borderSideLaptop"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSection, selector: "px-section", inputs: { backgroundColor: ["background-color", "backgroundColor"], backgroundGradient: ["background-gradient", "backgroundGradient"], backgroundImage: ["background-image", "backgroundImage"], backgroundImageMobile: ["background-image--mobile", "backgroundImageMobile"], backgroundImageTablet: ["background-image--tablet", "backgroundImageTablet"], backgroundImageLaptop: ["background-image--laptop", "backgroundImageLaptop"], backgroundSize: ["background-size", "backgroundSize"], backgroundPosition: ["background-position", "backgroundPosition"], paddingBlock: ["padding-block", "paddingBlock"], paddingTop: ["padding-top", "paddingTop"], paddingBottom: ["padding-bottom", "paddingBottom"], paddingBlockMobile: ["padding-block--mobile", "paddingBlockMobile"], paddingTopMobile: ["padding-top--mobile", "paddingTopMobile"], paddingBottomMobile: ["padding-bottom--mobile", "paddingBottomMobile"], paddingBlockTablet: ["padding-block--tablet", "paddingBlockTablet"], paddingTopTablet: ["padding-top--tablet", "paddingTopTablet"], paddingBottomTablet: ["padding-bottom--tablet", "paddingBottomTablet"], paddingBlockLaptop: ["padding-block--laptop", "paddingBlockLaptop"], paddingTopLaptop: ["padding-top--laptop", "paddingTopLaptop"], paddingBottomLaptop: ["padding-bottom--laptop", "paddingBottomLaptop"], border: "border", borderSide: ["border-side", "borderSide"], borderSideMobile: ["border-side--mobile", "borderSideMobile"], borderSideTablet: ["border-side--tablet", "borderSideTablet"], borderSideLaptop: ["border-side--laptop", "borderSideLaptop"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSection, decorators: [{
             type: Directive,
@@ -28620,24 +28902,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], borderSideLaptop: [{
                 type: Input,
                 args: ['border-side--laptop']
+            }], grow: [{
+                type: Input
+            }], growMobile: [{
+                type: Input,
+                args: ['grow--mobile']
+            }], growTablet: [{
+                type: Input,
+                args: ['grow--tablet']
+            }], growLaptop: [{
+                type: Input,
+                args: ['grow--laptop']
+            }], growDesktop: [{
+                type: Input,
+                args: ['grow--desktop']
+            }], shrink: [{
+                type: Input
+            }], shrinkMobile: [{
+                type: Input,
+                args: ['shrink--mobile']
+            }], shrinkTablet: [{
+                type: Input,
+                args: ['shrink--tablet']
+            }], shrinkLaptop: [{
+                type: Input,
+                args: ['shrink--laptop']
+            }], shrinkDesktop: [{
+                type: Input,
+                args: ['shrink--desktop']
+            }], basis: [{
+                type: Input
+            }], basisMobile: [{
+                type: Input,
+                args: ['basis--mobile']
+            }], basisTablet: [{
+                type: Input,
+                args: ['basis--tablet']
+            }], basisLaptop: [{
+                type: Input,
+                args: ['basis--laptop']
+            }], basisDesktop: [{
+                type: Input,
+                args: ['basis--desktop']
+            }], alignSelf: [{
+                type: Input,
+                args: ['align-self']
+            }], alignSelfMobile: [{
+                type: Input,
+                args: ['align-self--mobile']
+            }], alignSelfTablet: [{
+                type: Input,
+                args: ['align-self--tablet']
+            }], alignSelfLaptop: [{
+                type: Input,
+                args: ['align-self--laptop']
+            }], alignSelfDesktop: [{
+                type: Input,
+                args: ['align-self--desktop']
+            }], justifySelf: [{
+                type: Input,
+                args: ['justify-self']
+            }], justifySelfMobile: [{
+                type: Input,
+                args: ['justify-self--mobile']
+            }], justifySelfTablet: [{
+                type: Input,
+                args: ['justify-self--tablet']
+            }], justifySelfLaptop: [{
+                type: Input,
+                args: ['justify-self--laptop']
+            }], justifySelfDesktop: [{
+                type: Input,
+                args: ['justify-self--desktop']
+            }], hidden: [{
+                type: Input
+            }], hiddenMobile: [{
+                type: Input,
+                args: ['hidden--mobile']
+            }], hiddenTablet: [{
+                type: Input,
+                args: ['hidden--tablet']
+            }], hiddenLaptop: [{
+                type: Input,
+                args: ['hidden--laptop']
+            }], hiddenDesktop: [{
+                type: Input,
+                args: ['hidden--desktop']
+            }], shownSr: [{
+                type: Input,
+                args: ['shown--sr']
+            }], shownSrMobile: [{
+                type: Input,
+                args: ['shown--sr--mobile']
+            }], shownSrTablet: [{
+                type: Input,
+                args: ['shown--sr--tablet']
+            }], shownSrLaptop: [{
+                type: Input,
+                args: ['shown--sr--laptop']
+            }], shownSrDesktop: [{
+                type: Input,
+                args: ['shown--sr--desktop']
+            }], colSpan: [{
+                type: Input,
+                args: ['col-span']
+            }], colSpanMobile: [{
+                type: Input,
+                args: ['col-span--mobile']
+            }], colSpanTablet: [{
+                type: Input,
+                args: ['col-span--tablet']
+            }], colSpanLaptop: [{
+                type: Input,
+                args: ['col-span--laptop']
+            }], colSpanDesktop: [{
+                type: Input,
+                args: ['col-span--desktop']
+            }], order: [{
+                type: Input
+            }], orderMobile: [{
+                type: Input,
+                args: ['order--mobile']
+            }], orderTablet: [{
+                type: Input,
+                args: ['order--tablet']
+            }], orderLaptop: [{
+                type: Input,
+                args: ['order--laptop']
+            }], orderDesktop: [{
+                type: Input,
+                args: ['order--desktop']
+            }], stickyTop: [{
+                type: Input,
+                args: ['sticky-top']
+            }], stickyBottom: [{
+                type: Input,
+                args: ['sticky-bottom']
             }] } });
 /**
- * @description Type-only wrapper for <px-selectable-box>
+ * @description Type-only wrapper for <px-separator>
  */
-class PxSelectableBox {
+class PxSeparator {
     elementRef;
+    set direction(value) {
+        this.elementRef.nativeElement['direction'] = value;
+    }
+    get direction() {
+        return this.elementRef.nativeElement['direction'];
+    }
+    set directionMobile(value) {
+        this.elementRef.nativeElement['directionMobile'] = value;
+    }
+    get directionMobile() {
+        return this.elementRef.nativeElement['directionMobile'];
+    }
+    set directionTablet(value) {
+        this.elementRef.nativeElement['directionTablet'] = value;
+    }
+    get directionTablet() {
+        return this.elementRef.nativeElement['directionTablet'];
+    }
+    set directionLaptop(value) {
+        this.elementRef.nativeElement['directionLaptop'] = value;
+    }
+    get directionLaptop() {
+        return this.elementRef.nativeElement['directionLaptop'];
+    }
+    set directionDesktop(value) {
+        this.elementRef.nativeElement['directionDesktop'] = value;
+    }
+    get directionDesktop() {
+        return this.elementRef.nativeElement['directionDesktop'];
+    }
+    set size(value) {
+        this.elementRef.nativeElement['size'] = value;
+    }
+    get size() {
+        return this.elementRef.nativeElement['size'];
+    }
+    set color(value) {
+        this.elementRef.nativeElement['color'] = value;
+    }
+    get color() {
+        return this.elementRef.nativeElement['color'];
+    }
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
     }
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
-    set hideFooter(value) {
-        this.elementRef.nativeElement['hideFooter'] = value;
-    }
-    get hideFooter() {
-        return this.elementRef.nativeElement['hideFooter'];
-    }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
     }
@@ -28923,19 +29377,34 @@ class PxSelectableBox {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSelectableBox, selector: "px-selectable-box", inputs: { inverted: "inverted", hideFooter: ["hide-footer", "hideFooter"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSeparator, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSeparator, selector: "px-separator", inputs: { direction: "direction", directionMobile: ["direction--mobile", "directionMobile"], directionTablet: ["direction--tablet", "directionTablet"], directionLaptop: ["direction--laptop", "directionLaptop"], directionDesktop: ["direction--desktop", "directionDesktop"], size: "size", color: "color", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSeparator, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-selectable-box',
+                    selector: 'px-separator',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { direction: [{
                 type: Input
-            }], hideFooter: [{
+            }], directionMobile: [{
                 type: Input,
-                args: ['hide-footer']
+                args: ['direction--mobile']
+            }], directionTablet: [{
+                type: Input,
+                args: ['direction--tablet']
+            }], directionLaptop: [{
+                type: Input,
+                args: ['direction--laptop']
+            }], directionDesktop: [{
+                type: Input,
+                args: ['direction--desktop']
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], inverted: [{
+                type: Input
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -29074,9 +29543,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['sticky-bottom']
             }] } });
 /**
- * @description Type-only wrapper for <px-selectable-box-checkbox>
+ * @description Type-only wrapper for <px-selectable-box>
  */
-class PxSelectableBoxCheckbox {
+class PxSelectableBox {
     elementRef;
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
@@ -29084,29 +29553,11 @@ class PxSelectableBoxCheckbox {
     get inverted() {
         return this.elementRef.nativeElement['inverted'];
     }
-    set name(value) {
-        this.elementRef.nativeElement['name'] = value;
-    }
-    get name() {
-        return this.elementRef.nativeElement['name'];
-    }
-    set value(value) {
-        this.elementRef.nativeElement['value'] = value;
-    }
-    get value() {
-        return this.elementRef.nativeElement['value'];
-    }
-    set checked(value) {
-        this.elementRef.nativeElement['checked'] = value;
-    }
-    get checked() {
-        return this.elementRef.nativeElement['checked'];
-    }
-    set disabled(value) {
-        this.elementRef.nativeElement['disabled'] = value;
+    set hideFooter(value) {
+        this.elementRef.nativeElement['hideFooter'] = value;
     }
-    get disabled() {
-        return this.elementRef.nativeElement['disabled'];
+    get hideFooter() {
+        return this.elementRef.nativeElement['hideFooter'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -29390,31 +29841,22 @@ class PxSelectableBoxCheckbox {
     get stickyBottom() {
         return this.elementRef.nativeElement['stickyBottom'];
     }
-    change = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this.elementRef.nativeElement.addEventListener('change', (e) => {
-            this.change.emit(e.detail);
-        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSelectableBoxCheckbox, selector: "px-selectable-box-checkbox", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, outputs: { change: "change" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSelectableBox, selector: "px-selectable-box", inputs: { inverted: "inverted", hideFooter: ["hide-footer", "hideFooter"], grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBox, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-selectable-box-checkbox',
+                    selector: 'px-selectable-box',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
+            }], hideFooter: [{
+                type: Input,
+                args: ['hide-footer']
             }], grow: [{
                 type: Input
             }], growMobile: [{
@@ -29551,13 +29993,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], stickyBottom: [{
                 type: Input,
                 args: ['sticky-bottom']
-            }], change: [{
-                type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-selectable-box-radio>
+ * @description Type-only wrapper for <px-selectable-box-checkbox>
  */
-class PxSelectableBoxRadio {
+class PxSelectableBoxCheckbox {
     elementRef;
     set inverted(value) {
         this.elementRef.nativeElement['inverted'] = value;
@@ -29878,13 +30318,13 @@ class PxSelectableBoxRadio {
             this.change.emit(e.detail);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxRadio, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSelectableBoxRadio, selector: "px-selectable-box-radio", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, outputs: { change: "change" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSelectableBoxCheckbox, selector: "px-selectable-box-checkbox", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, outputs: { change: "change" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxCheckbox, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-selectable-box-radio',
+                    selector: 'px-selectable-box-checkbox',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
@@ -30036,57 +30476,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 /**
- * @description Type-only wrapper for <px-separator>
+ * @description Type-only wrapper for <px-selectable-box-radio>
  */
-class PxSeparator {
+class PxSelectableBoxRadio {
     elementRef;
-    set direction(value) {
-        this.elementRef.nativeElement['direction'] = value;
-    }
-    get direction() {
-        return this.elementRef.nativeElement['direction'];
-    }
-    set directionMobile(value) {
-        this.elementRef.nativeElement['directionMobile'] = value;
-    }
-    get directionMobile() {
-        return this.elementRef.nativeElement['directionMobile'];
-    }
-    set directionTablet(value) {
-        this.elementRef.nativeElement['directionTablet'] = value;
-    }
-    get directionTablet() {
-        return this.elementRef.nativeElement['directionTablet'];
-    }
-    set directionLaptop(value) {
-        this.elementRef.nativeElement['directionLaptop'] = value;
+    set inverted(value) {
+        this.elementRef.nativeElement['inverted'] = value;
     }
-    get directionLaptop() {
-        return this.elementRef.nativeElement['directionLaptop'];
+    get inverted() {
+        return this.elementRef.nativeElement['inverted'];
     }
-    set directionDesktop(value) {
-        this.elementRef.nativeElement['directionDesktop'] = value;
+    set name(value) {
+        this.elementRef.nativeElement['name'] = value;
     }
-    get directionDesktop() {
-        return this.elementRef.nativeElement['directionDesktop'];
+    get name() {
+        return this.elementRef.nativeElement['name'];
     }
-    set size(value) {
-        this.elementRef.nativeElement['size'] = value;
+    set value(value) {
+        this.elementRef.nativeElement['value'] = value;
     }
-    get size() {
-        return this.elementRef.nativeElement['size'];
+    get value() {
+        return this.elementRef.nativeElement['value'];
     }
-    set color(value) {
-        this.elementRef.nativeElement['color'] = value;
+    set checked(value) {
+        this.elementRef.nativeElement['checked'] = value;
     }
-    get color() {
-        return this.elementRef.nativeElement['color'];
+    get checked() {
+        return this.elementRef.nativeElement['checked'];
     }
-    set inverted(value) {
-        this.elementRef.nativeElement['inverted'] = value;
+    set disabled(value) {
+        this.elementRef.nativeElement['disabled'] = value;
     }
-    get inverted() {
-        return this.elementRef.nativeElement['inverted'];
+    get disabled() {
+        return this.elementRef.nativeElement['disabled'];
     }
     set grow(value) {
         this.elementRef.nativeElement['grow'] = value;
@@ -30370,36 +30792,30 @@ class PxSeparator {
     get stickyBottom() {
         return this.elementRef.nativeElement['stickyBottom'];
     }
+    change = new EventEmitter();
     constructor(elementRef) {
         this.elementRef = elementRef;
+        this.elementRef.nativeElement.addEventListener('change', (e) => {
+            this.change.emit(e.detail);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSeparator, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSeparator, selector: "px-separator", inputs: { direction: "direction", directionMobile: ["direction--mobile", "directionMobile"], directionTablet: ["direction--tablet", "directionTablet"], directionLaptop: ["direction--laptop", "directionLaptop"], directionDesktop: ["direction--desktop", "directionDesktop"], size: "size", color: "color", inverted: "inverted", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxRadio, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxSelectableBoxRadio, selector: "px-selectable-box-radio", inputs: { inverted: "inverted", name: "name", value: "value", checked: "checked", disabled: "disabled", grow: "grow", growMobile: ["grow--mobile", "growMobile"], growTablet: ["grow--tablet", "growTablet"], growLaptop: ["grow--laptop", "growLaptop"], growDesktop: ["grow--desktop", "growDesktop"], shrink: "shrink", shrinkMobile: ["shrink--mobile", "shrinkMobile"], shrinkTablet: ["shrink--tablet", "shrinkTablet"], shrinkLaptop: ["shrink--laptop", "shrinkLaptop"], shrinkDesktop: ["shrink--desktop", "shrinkDesktop"], basis: "basis", basisMobile: ["basis--mobile", "basisMobile"], basisTablet: ["basis--tablet", "basisTablet"], basisLaptop: ["basis--laptop", "basisLaptop"], basisDesktop: ["basis--desktop", "basisDesktop"], alignSelf: ["align-self", "alignSelf"], alignSelfMobile: ["align-self--mobile", "alignSelfMobile"], alignSelfTablet: ["align-self--tablet", "alignSelfTablet"], alignSelfLaptop: ["align-self--laptop", "alignSelfLaptop"], alignSelfDesktop: ["align-self--desktop", "alignSelfDesktop"], justifySelf: ["justify-self", "justifySelf"], justifySelfMobile: ["justify-self--mobile", "justifySelfMobile"], justifySelfTablet: ["justify-self--tablet", "justifySelfTablet"], justifySelfLaptop: ["justify-self--laptop", "justifySelfLaptop"], justifySelfDesktop: ["justify-self--desktop", "justifySelfDesktop"], hidden: "hidden", hiddenMobile: ["hidden--mobile", "hiddenMobile"], hiddenTablet: ["hidden--tablet", "hiddenTablet"], hiddenLaptop: ["hidden--laptop", "hiddenLaptop"], hiddenDesktop: ["hidden--desktop", "hiddenDesktop"], shownSr: ["shown--sr", "shownSr"], shownSrMobile: ["shown--sr--mobile", "shownSrMobile"], shownSrTablet: ["shown--sr--tablet", "shownSrTablet"], shownSrLaptop: ["shown--sr--laptop", "shownSrLaptop"], shownSrDesktop: ["shown--sr--desktop", "shownSrDesktop"], colSpan: ["col-span", "colSpan"], colSpanMobile: ["col-span--mobile", "colSpanMobile"], colSpanTablet: ["col-span--tablet", "colSpanTablet"], colSpanLaptop: ["col-span--laptop", "colSpanLaptop"], colSpanDesktop: ["col-span--desktop", "colSpanDesktop"], order: "order", orderMobile: ["order--mobile", "orderMobile"], orderTablet: ["order--tablet", "orderTablet"], orderLaptop: ["order--laptop", "orderLaptop"], orderDesktop: ["order--desktop", "orderDesktop"], stickyTop: ["sticky-top", "stickyTop"], stickyBottom: ["sticky-bottom", "stickyBottom"] }, outputs: { change: "change" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxSelectableBoxRadio, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'px-separator',
+                    selector: 'px-selectable-box-radio',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { direction: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inverted: [{
                 type: Input
-            }], directionMobile: [{
-                type: Input,
-                args: ['direction--mobile']
-            }], directionTablet: [{
-                type: Input,
-                args: ['direction--tablet']
-            }], directionLaptop: [{
-                type: Input,
-                args: ['direction--laptop']
-            }], directionDesktop: [{
-                type: Input,
-                args: ['direction--desktop']
-            }], size: [{
+            }], name: [{
                 type: Input
-            }], color: [{
+            }], value: [{
                 type: Input
-            }], inverted: [{
+            }], checked: [{
+                type: Input
+            }], disabled: [{
                 type: Input
             }], grow: [{
                 type: Input
@@ -30537,6 +30953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], stickyBottom: [{
                 type: Input,
                 args: ['sticky-bottom']
+            }], change: [{
+                type: Output
             }] } });
 /**
  * @description Type-only wrapper for <px-skeleton>
@@ -32503,6 +32921,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], CLOSE_EVENT: [{
                 type: Output
             }] } });
+/**
+ * @description Type-only wrapper for <px-theme-switcher>
+ */
+class PxThemeSwitcher {
+    elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxThemeSwitcher, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxThemeSwitcher, selector: "px-theme-switcher", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxThemeSwitcher, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'px-theme-switcher',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
  * @description Type-only wrapper for <px-sticky-container>
  */
@@ -32538,23 +32973,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input,
                 args: ['offset-right']
             }] } });
-/**
- * @description Type-only wrapper for <px-theme-switcher>
- */
-class PxThemeSwitcher {
-    elementRef;
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxThemeSwitcher, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PxThemeSwitcher, selector: "px-theme-switcher", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PxThemeSwitcher, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'px-theme-switcher',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 /**
  * @description Type-only wrapper for <px-switch>
  */
@@ -37433,7 +37851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 class Lavender {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: Lavender, declarations: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButton, PxButtonWrapper, PxButtonIcon, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxRadio, PxRadioBase, PxRadioGroup, PxPrice, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider], exports: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButton, PxButtonWrapper, PxButtonIcon, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxRadio, PxRadioBase, PxRadioGroup, PxPrice, PxRibbon, PxSection, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSeparator, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxStickyContainer, PxThemeSwitcher, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: Lavender, declarations: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButton, PxButtonWrapper, PxButtonIcon, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSeparator, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxThemeSwitcher, PxStickyContainer, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider], exports: [PxAccordion, PxAgGridTable, PxAgGridTableThButton, PxAgGridTableThContent, PxBanner, PxBreadcrumbItem, PxBreadcrumb, PxButton, PxButtonWrapper, PxButtonIcon, PxCard, PxAppleseed, PxCarousel, PxCarouselItem, PxCell, PxCellButton, PxCellCheckbox, PxCellLink, PxCellRadio, PxCellSwitch, PxCheckbox, PxColorOption, PxColorOptionLink, PxContainer, PxContentHeader, PxDrawer, PxDropdown, PxFieldset, PxGrid, PxH1, PxH2, PxH3, PxH4, PxH5, PxH6, PxHeadingGroup, PxImg, PxPicture, PxInput, PxSelect, PxTextarea, PxFileupload, PxPage, PxSpacer, PxStack, PxVstack, PxHstack, PxA, PxAWrapper, PxList, PxListItem, PxModal, PxP, PxPillar, PxCardActions, PxCardContainer, PxCardHeading, PxPrice, PxRadio, PxRadioBase, PxRadioGroup, PxRibbon, PxSection, PxSeparator, PxSelectableBox, PxSelectableBoxCheckbox, PxSelectableBoxRadio, PxSkeleton, PxSpan, PxSpinner, PxStatus, PxStatusCard, PxThemeSwitcher, PxStickyContainer, PxSwitch, PxTable, PxTbody, PxTd, PxTh, PxThead, PxTr, PxTabs, PxTab, PxTabPanel, PxTag, PxTile, PxTileButton, PxTileCheckbox, PxTileLink, PxTileRadio, PxTileSwitch, PxTimeline, PxTimelineItem, PxTypography, PxPatch, PxIcon, PxIconSet, PxThemeProvider, PxProximusThemeProvider, PxScarletThemeProvider] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Lavender, decorators: [{
@@ -37497,23 +37915,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxCardActions,
                         PxCardContainer,
                         PxCardHeading,
+                        PxPrice,
                         PxRadio,
                         PxRadioBase,
                         PxRadioGroup,
-                        PxPrice,
                         PxRibbon,
                         PxSection,
+                        PxSeparator,
                         PxSelectableBox,
                         PxSelectableBoxCheckbox,
                         PxSelectableBoxRadio,
-                        PxSeparator,
                         PxSkeleton,
                         PxSpan,
                         PxSpinner,
                         PxStatus,
                         PxStatusCard,
-                        PxStickyContainer,
                         PxThemeSwitcher,
+                        PxStickyContainer,
                         PxSwitch,
                         PxTable,
                         PxTbody,
@@ -37599,23 +38017,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PxCardActions,
                         PxCardContainer,
                         PxCardHeading,
+                        PxPrice,
                         PxRadio,
                         PxRadioBase,
                         PxRadioGroup,
-                        PxPrice,
                         PxRibbon,
                         PxSection,
+                        PxSeparator,
                         PxSelectableBox,
                         PxSelectableBoxCheckbox,
                         PxSelectableBoxRadio,
-                        PxSeparator,
                         PxSkeleton,
                         PxSpan,
                         PxSpinner,
                         PxStatus,
                         PxStatusCard,
-                        PxStickyContainer,
                         PxThemeSwitcher,
+                        PxStickyContainer,
                         PxSwitch,
                         PxTable,
                         PxTbody,