@proximus/lavender 1.0.0-alpha.12 → 1.0.0-alpha.14

package/dist/lavender.es.js

@@ -1,4 +1,4 @@
-const commonStyles = "::slotted(*[grow]){flex-grow:var(--flex-grow-value)}::slotted(*[shrink]){flex-shrink:var(--flex-shrink-value)}::slotted(*[basis]){flex-basis:var(--flex-basis-value)}::slotted(*[align-self]){align-self:var(--flex-align-self-value)}::slotted(*[grow-mobile]){flex-grow:var(--flex-grow-mobile-value)}::slotted(*[shrink-mobile]){flex-shrink:var(--flex-shrink-mobile-value)}::slotted(*[basis-mobile]){flex-basis:var(--flex-basis-mobile-value)}::slotted(*[align-self-mobile]){align-self:var(--flex-align-self-mobile-value)}@media screen and (min-width: 768px){::slotted(*[grow-tablet]){flex-grow:var(--flex-grow-tablet-value)}::slotted(*[shrink-tablet]){flex-shrink:var(--flex-shrink-tablet-value)}::slotted(*[basis-tablet]){flex-basis:var(--flex-basis-tablet-value)}::slotted(*[align-self-tablet]){align-self:var(--flex-align-self-tablet-value)}}@media screen and (min-width: 1025px){::slotted(*[grow-laptop]){flex-grow:var(--flex-grow-laptop-value)}::slotted(*[shrink-laptop]){flex-shrink:var(--flex-shrink-laptop-value)}::slotted(*[basis-laptop]){flex-basis:var(--flex-basis-laptop-value)}::slotted(*[align-self-laptop]){align-self:var(--flex-align-self-laptop-value)}}@media screen and (min-width: 1441px){::slotted(*[grow-desktop]){flex-grow:var(--flex-grow-desktop-value)}::slotted(*[shrink-desktop]){flex-shrink:var(--flex-shrink-desktop-value)}::slotted(*[basis-desktop]){flex-basis:var(--flex-basis-desktop-value)}::slotted(*[align-self-desktop]){align-self:var(--flex-align-self-desktop-value)}}";
+const commonStyles = "::slotted(*[grow]){flex-grow:var(--flex-grow-value)}::slotted(*[shrink]){flex-shrink:var(--flex-shrink-value)}::slotted(*[basis]){flex-basis:var(--flex-basis-value)}::slotted(*[align-self]){align-self:var(--flex-align-self-value)}::slotted(*[grow-mobile]){flex-grow:var(--flex-grow-mobile-value)}::slotted(*[shrink-mobile]){flex-shrink:var(--flex-shrink-mobile-value)}::slotted(*[basis-mobile]){flex-basis:var(--flex-basis-mobile-value)}::slotted(*[align-self-mobile]){align-self:var(--flex-align-self-mobile-value)}@media screen and (min-width: 768px){::slotted(*[grow-tablet]){flex-grow:var(--flex-grow-tablet-value)}::slotted(*[shrink-tablet]){flex-shrink:var(--flex-shrink-tablet-value)}::slotted(*[basis-tablet]){flex-basis:var(--flex-basis-tablet-value)}::slotted(*[align-self-tablet]){align-self:var(--flex-align-self-tablet-value)}}@media screen and (min-width: 1025px){::slotted(*[grow-laptop]){flex-grow:var(--flex-grow-laptop-value)}::slotted(*[shrink-laptop]){flex-shrink:var(--flex-shrink-laptop-value)}::slotted(*[basis-laptop]){flex-basis:var(--flex-basis-laptop-value)}::slotted(*[align-self-laptop]){align-self:var(--flex-align-self-laptop-value)}}@media screen and (min-width: 1441px){::slotted(*[grow-desktop]){flex-grow:var(--flex-grow-desktop-value)}::slotted(*[shrink-desktop]){flex-shrink:var(--flex-shrink-desktop-value)}::slotted(*[basis-desktop]){flex-basis:var(--flex-basis-desktop-value)}::slotted(*[align-self-desktop]){align-self:var(--flex-align-self-desktop-value)}}@media only screen and (min-width: 0px) and (max-width: 767px){::slotted(*[hidden-mobile]){display:none}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted(*[hidden-tablet]){display:none}}@media only screen and (min-width: 1025px) and (max-width: 1440px){::slotted(*[hidden-laptop]){display:none}}@media only screen and (min-width: 1441px){::slotted(*[hidden-desktop]){display:none}}";
 function getSupportedAttributeNames(htmlElementName) {
   const $element = document.createElement(htmlElementName);
   const inputPrototype = Object.getPrototypeOf($element);
@@ -6,14 +6,6 @@ function getSupportedAttributeNames(htmlElementName) {
 }
 const commonStyleSheet = new CSSStyleSheet();
 commonStyleSheet.replaceSync(commonStyles);
-function replayAttributes(element, observedAttributes, callback) {
-  observedAttributes.forEach((name) => {
-    const value = element.getAttribute(name);
-    if (value !== null) {
-      callback(name, value);
-    }
-  });
-}
 class WithFlexAttributes extends HTMLElement {
   static get observedAttributes() {
     return [
@@ -31,7 +23,11 @@ class WithFlexAttributes extends HTMLElement {
       "basis-tablet",
       "basis-laptop",
       "basis-desktop",
-      "align-self"
+      "align-self",
+      "hidden-mobile",
+      "hidden-tablet",
+      "hidden-laptop",
+      "hidden-desktop"
     ];
   }
   constructor(...adoptedStylesheets) {
@@ -172,13 +168,32 @@ class WithFlexAttributes extends HTMLElement {
   get $el() {
     return this;
   }
+  get hiddenMobile() {
+    return this.getAttribute("hidden-mobile");
+  }
+  set hiddenMobile(value) {
+    this.setAttribute("hidden-mobile", value);
+  }
+  get hiddenTablet() {
+    return this.getAttribute("hidden-tablet");
+  }
+  set hiddenTablet(value) {
+    this.setAttribute("hidden-tablet", value);
+  }
+  get hiddenLaptop() {
+    return this.getAttribute("hidden-laptop");
+  }
+  set hiddenLaptop(value) {
+    this.setAttribute("hidden-laptop", value);
+  }
+  get hiddenDesktop() {
+    return this.getAttribute("hidden-desktop");
+  }
+  set hiddenDesktop(value) {
+    this.setAttribute("hidden-desktop", value);
+  }
 }
 class PxElement extends WithFlexAttributes {
-  constructor(semanticTokensStylesheet, ...adoptedStylesheets) {
-    super(semanticTokensStylesheet, ...adoptedStylesheets);
-    this.replayAttributes = false;
-    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
-  }
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
@@ -186,12 +201,6 @@ class PxElement extends WithFlexAttributes {
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.shadowRoot) {
-      console.warn(
-        "shadowRoot not available yet, replaying attributes once connected"
-      );
-      this.replayAttributes = true;
-    }
     super.attributeChangedCallback(name, oldValue, newValue);
     if (newValue === null) {
       this.$el.toggleAttribute(name);
@@ -199,18 +208,11 @@ class PxElement extends WithFlexAttributes {
       this.$el.setAttribute(name, newValue);
     }
   }
+  constructor(...adoptedStylesheets) {
+    super(...adoptedStylesheets);
+    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
+  }
   connectedCallback() {
-    if (this.replayAttributes) {
-      replayAttributes(
-        this,
-        Object.getPrototypeOf(this).constructor.observedAttributes,
-        (name, value) => {
-          if (this.getAttribute(name) !== null) {
-            this.attributeChangedCallback(name, null, value);
-          }
-        }
-      );
-    }
     for (const name of getSupportedAttributeNames(this.nativeName)) {
       if (name === "constructor") {
         continue;
@@ -248,23 +250,21 @@ const fontsizeValues = [
   "6xl",
   "7xl"
 ];
-const colorValues$2 = [
+const colorValues$1 = [
   "",
   "default",
   "inherit",
   "primary",
-  "inverted-primary",
-  "inverted",
   "body",
   "details",
   "hover",
   "disabled",
   "active",
   "promo",
-  "status-success",
-  "status-warning",
-  "status-error",
-  "status-unlimited"
+  "success",
+  "warning",
+  "error",
+  "unlimited"
 ];
 const fontweightValues = [
   "",
@@ -275,7 +275,7 @@ const fontweightValues = [
   "extrabold",
   "light"
 ];
-const iconSizeValues = [
+const iconSizeValues$1 = [
   "",
   "default",
   "2xs",
@@ -288,17 +288,7 @@ const iconSizeValues = [
 ];
 const paddingValues = ["", "none", "2xs", "xs", "s", "m", "l", "xl"];
 const borderValues = ["", "none", "s", "m", "l"];
-const borderRadiusValues = [
-  "",
-  "none",
-  "xs",
-  "s",
-  "m",
-  "l",
-  "xl",
-  "2xl",
-  "pill"
-];
+const borderRadiusValues = ["", "none", "main", "pill"];
 const bgColorValues = [
   "",
   "none",
@@ -316,6 +306,7 @@ const bgColorValues = [
   "canvas-rich",
   "action-primary",
   "action-secondary",
+  "action-hover-bordered",
   "action-hover",
   "action-disabled",
   "action-active",
@@ -395,12 +386,9 @@ function getViewportFormat() {
     return "mobile";
   }
 }
-const semanticStylesheet = ":host>*:first-child{--px-color-bg-action-primary-default: #5C2D91;--px-color-bg-action-primary-inverted: #ffffff;--px-color-bg-action-secondary-default: rgba(92, 45, 145, .16);--px-color-bg-action-secondary-inverted: rgba(255, 255, 255, .24);--px-color-bg-action-hover-inverted-default: rgba(255, 255, 255, .4);--px-color-bg-action-hover-inverted-inverted: rgba(0, 0, 0, .8);--px-color-bg-action-hover-default: rgba(0, 0, 0, .12);--px-color-bg-action-hover-inverted: rgba(255, 255, 255, .16);--px-color-bg-action-disabled-default: rgba(0, 0, 0, .04);--px-color-bg-action-disabled-inverted: rgba(255, 255, 255, .08);--px-color-bg-action-active-default: #8D79AD;--px-color-bg-action-active-inverted: rgba(255, 255, 255, .8);--px-color-border-main-default: rgba(0, 0, 0, .12);--px-color-border-main-inverted: rgba(255, 255, 255, .16);--px-color-border-contrasted-default: rgba(0, 0, 0, .56);--px-color-border-contrasted-inverted: rgba(255, 255, 255, .64);--px-color-border-action-hover-default: #5C2D91;--px-color-border-action-hover-inverted: #ffffff;--px-color-border-action-active-default: #8D79AD;--px-color-border-action-active-inverted: rgba(255, 255, 255, .8);--px-color-border-none-default: rgba(255, 255, 255, 0);--px-color-border-none-inverted: rgba(255, 255, 255, 0);--px-color-border-success-default: #008000;--px-color-border-success-inverted: #26BB26;--px-color-border-error-default: #B30000;--px-color-border-error-inverted: #F22613;--px-color-border-warning-default: #AC5915;--px-color-border-warning-inverted: #DB992F;--px-color-border-unlimited-default: #016BC1;--px-color-border-unlimited-inverted: #7295CF;--px-color-bg-container-none-default: rgba(255, 255, 255, 0);--px-color-bg-container-none-inverted: rgba(0, 0, 0, 0);--px-color-bg-container-weak-default: rgba(0, 0, 0, .08);--px-color-bg-container-weak-inverted: rgba(255, 255, 255, .12);--px-color-bg-container-moderate-default: rgba(0, 0, 0, .04);--px-color-bg-container-moderate-inverted: rgba(255, 255, 255, .08);--px-color-bg-container-strong-default: rgba(0, 0, 0, .08);--px-color-bg-container-strong-inverted: rgba(255, 255, 255, .12);--px-color-bg-container-rich-default: #252525;--px-color-bg-container-rich-inverted: #ffffff;--px-color-bg-container-main-default: #ffffff;--px-color-bg-container-main-inverted: #ffffff;--px-color-bg-gradient-purple-bottom-red: 180deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-bottom-magenta: 180deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-bottom-orange: 180deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-bottom-blue: 180deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-bottom-turquoise: 180deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-bottom-green: 180deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-purple-right-red: 90deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-right-magenta: 90deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-right-orange: 90deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-right-blue: 90deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-right-turquoise: 90deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-right-green: 90deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-purple-top-right-red: 25deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-top-right-magenta: 25deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-top-right-orange: 25deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-top-right-blue: 25deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-top-right-turquoise: 25deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-top-right-green: 25deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-purple-bottom-right-red: 155deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-bottom-right-magenta: 155deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-bottom-right-orange: 155deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-bottom-right-blue: 155deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-bottom-right-turquoise: 155deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-bottom-right-green: 155deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-color-bottom-red: 180deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-bottom-magenta: 180deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-bottom-orange: 180deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-bottom-blue: 180deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-bottom-turquoise: 180deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-bottom-green: 180deg, #5C2D91 3%, #81C747 66%;--px-color-bg-gradient-color-right-red: 90deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-right-magenta: 90deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-right-orange: 90deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-right-blue: 90deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-right-turquoise: 90deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-right-green: 90deg, #5C2D91 3%, #81C747 66%;--px-color-bg-gradient-color-top-right-red: 25deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-top-right-magenta: 25deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-top-right-orange: 25deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-top-right-blue: 25deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-top-right-turquoise: 25deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-top-right-green: 25deg, #5C2D91 3%, #81C747 66%;--px-color-bg-gradient-color-bottom-right-red: 155deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-bottom-right-magenta: 155deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-bottom-right-orange: 155deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-bottom-right-blue: 155deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-bottom-right-turquoise: 155deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-bottom-right-green: 155deg, #5C2D91 3%, #81C747 66%;--px-color-bg-notification-default: #DE2A56;--px-color-bg-notification-inverted: #DE2A56;--px-color-bg-promo-default: #DE2A56;--px-color-bg-promo-inverted: #E43C65;--px-color-bg-success-default: #008000;--px-color-bg-success-inverted: #26BB26;--px-color-bg-error-default: #B30000;--px-color-bg-error-inverted: #F22613;--px-color-bg-warning-default: #AC5915;--px-color-bg-warning-inverted: #DB992F;--px-color-bg-unlimited-default: #016BC1;--px-color-bg-unlimited-inverted: #7295CF;--px-color-canvas-weak: #f9f9f9;--px-color-canvas-light: #e4e4e4;--px-color-canvas-soft: #c6c6c6;--px-color-canvas-moderate: #a1a1a1;--px-color-canvas-strong: #727272;--px-color-canvas-deep: #464646;--px-color-canvas-rich: #252525;--px-color-datavis-green: #008000;--px-color-datavis-orange: #F39200;--px-color-datavis-red: #B30000;--px-color-datavis-magenta: #FF418C;--px-color-datavis-blue: #016BC1;--px-color-datavis-turquoise: #66D2CC;--px-color-icon-primary-default: #5C2D91;--px-color-icon-primary-inverted: #ffffff;--px-color-icon-body-default: #252525;--px-color-icon-body-inverted: #ffffff;--px-color-icon-details-default: rgba(0, 0, 0, .56);--px-color-icon-details-inverted: rgba(255, 255, 255, .64);--px-color-icon-hover-default: #8D79AD;--px-color-icon-hover-inverted: rgba(255, 255, 255, .8);--px-color-icon-active-default: #8D79AD;--px-color-icon-active-inverted: rgba(255, 255, 255, .8);--px-color-icon-disabled-default: rgba(0, 0, 0, .12);--px-color-icon-disabled-inverted: rgba(255, 255, 255, .16);--px-color-icon-success-default: #008000;--px-color-icon-success-inverted: #26BB26;--px-color-icon-warning-default: #AC5915;--px-color-icon-warning-inverted: #DB992F;--px-color-icon-error-default: #B30000;--px-color-icon-error-inverted: #F22613;--px-color-icon-unlimited-default: #016BC1;--px-color-icon-unlimited-inverted: #7295CF;--px-color-icon-promo-default: #DE2A56;--px-color-icon-promo-inverted: #FF4371;--px-color-illu-purple-bare: #F4F2F6;--px-color-illu-purple-weak: #E8E5ED;--px-color-illu-purple-light: #CEC8DA;--px-color-illu-purple-soft: #B0A5C5;--px-color-illu-purple-moderate: #8D79AD;--px-color-illu-purple-strong: #472370;--px-color-illu-red-weak: #F9E5E7;--px-color-illu-red-soft: #ECA5AE;--px-color-illu-red-core: #DE2A56;--px-color-illu-magenta-weak: #FFE6ED;--px-color-illu-magenta-soft: #FFA9C2;--px-color-illu-magenta-core: #FF418C;--px-color-illu-orange-weak: #FDEDE4;--px-color-illu-orange-soft: #F8C5A1;--px-color-illu-orange-core: #F39200;--px-color-illu-blue-bare: #F2F9FD;--px-color-illu-blue-weak: #E4F3FC;--px-color-illu-blue-soft: #A1D9F5;--px-color-illu-blue-core: #00BCEE;--px-color-illu-turquoise-weak: #E9F7F6;--px-color-illu-turquoise-soft: #B4E5E2;--px-color-illu-turquoise-moderate: #92DCD7;--px-color-illu-turquoise-core: #66D2CC;--px-color-illu-green-weak: #EBF5E6;--px-color-illu-green-soft: #BEDFAA;--px-color-illu-green-core: #81C747;--px-color-illu-yellow-core: #FFCA00;--px-color-txt-primary-default: #5C2D91;--px-color-txt-primary-inverted: #ffffff;--px-color-txt-inverted-primary-default: #ffffff;--px-color-txt-inverted-primary-inverted: #5C2D91;--px-color-txt-inverted-default: #ffffff;--px-color-txt-inverted-inverted: #252525;--px-color-txt-body-default: #252525;--px-color-txt-body-inverted: #ffffff;--px-color-txt-details-default: rgba(0, 0, 0, .56);--px-color-txt-details-inverted: rgba(255, 255, 255, .64);--px-color-txt-hover-default: #8D79AD;--px-color-txt-hover-inverted: rgba(255, 255, 255, .8);--px-color-txt-disabled-default: rgba(0, 0, 0, .12);--px-color-txt-disabled-inverted: rgba(255, 255, 255, .16);--px-color-txt-active-default: #8D79AD;--px-color-txt-active-inverted: rgba(255, 255, 255, .8);--px-color-txt-promo-default: #DE2A56;--px-color-txt-promo-inverted: #FF4371;--px-color-txt-status-success-default: #008000;--px-color-txt-status-success-inverted: #26BB26;--px-color-txt-status-error-default: #B30000;--px-color-txt-status-error-inverted: #F22613;--px-color-txt-status-warning-default: #AC5915;--px-color-txt-status-warning-inverted: #DB992F;--px-color-txt-status-unlimited-default: #016BC1;--px-color-txt-status-unlimited-inverted: #7295CF;--px-breakpoints-mobile-min: 0px;--px-breakpoints-mobile-max: 767px;--px-breakpoints-tablet-min: 768px;--px-breakpoints-tablet-max: 1024px;--px-breakpoints-laptop-min: 1025px;--px-breakpoints-laptop-max: 1440px;--px-breakpoints-desktop-min: 1441px;--px-breakpoints-desktop-max: 99999px;--px-border-none: 0px;--px-border-s: 1px;--px-border-m: 2px;--px-border-l: 3px;--px-radius-none: 0px;--px-radius-xs: 3px;--px-radius-s: 4px;--px-radius-m: 8px;--px-radius-l: 12px;--px-radius-xl: 16px;--px-radius-2xl: 22px;--px-radius-pill: 9999px;--px-shadow-none: 0px 0px 0px 0px #00000080;--px-shadow-s: 0px 1px 2px 0px rgba(0, 0, 0, .12);--px-shadow-m: 0px 4px 6px -1px rgba(0, 0, 0, .08);--px-shadow-l: 0px 10px 15px -3px rgba(0, 0, 0, .08);--px-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, .08);--px-spacing-between-icon-horizontal: 8px;--px-spacing-text-to-icon-compact-horizontal: 4px;--px-spacing-text-to-icon-horizontal: 24px;--px-spacing-component-compact-horizontal: 16px;--px-spacing-component-default-horizontal: 20px;--px-spacing-component-expanded-horizontal: 80px;--px-spacing-between-icon-horizontal-mobile: 8px;--px-spacing-text-to-icon-horizontal-mobile: 16px;--px-spacing-component-compact-horizontal-mobile: 8px;--px-spacing-component-default-horizontal-mobile: 16px;--px-spacing-component-expanded-horizontal-mobile: 32px;--px-padding-none: 0px;--px-padding-2xs: 4px;--px-padding-xs: 8px;--px-padding-s: 16px;--px-padding-m: 24px;--px-padding-l: 32px;--px-padding-xl: 40px;--px-padding-none-mobile: 0px;--px-padding-2xs-mobile: 4px;--px-padding-xs-mobile: 8px;--px-padding-s-mobile: 16px;--px-padding-mobile-mobile: 24px;--px-padding-l-mobile: 24px;--px-padding-xl-mobile: 24px;--px-size-action: 44px;--px-size-input-box: 44px;--px-size-default: 44px;--px-size-action-mobile: 40px;--px-size-input-box-mobile: 40px;--px-size-default-mobile: 40px;--px-spacing-between-options-vertical: 0px;--px-spacing-under-text-vertical: 8px;--px-spacing-display-to-subtitle-vertical: 16px;--px-spacing-under-display-vertical: 24px;--px-spacing-component-default-vertical: 24px;--px-spacing-component-expanded-vertical: 40px;--px-spacing-between-section-vertical: 80px;--px-spacing-between-options-vertical-mobile: 0px;--px-spacing-under-text-vertical-mobile: 8px;--px-spacing-display-to-subtitle-vertical-mobile: 8px;--px-spacing-under-display-vertical-mobile: 16px;--px-spacing-component-default-vertical-mobile: 16px;--px-spacing-component-expanded-vertical-mobile: 16px;--px-spacing-between-section-vertical-mobile: 32px;--px-icon-size-2xs-mobile: 12px;--px-icon-size-2xs-tablet: 12px;--px-icon-size-2xs-desktop: 12px;--px-icon-size-xs-mobile: 16px;--px-icon-size-xs-tablet: 16px;--px-icon-size-xs-desktop: 16px;--px-icon-size-s-mobile: 20px;--px-icon-size-s-tablet: 20px;--px-icon-size-s-desktop: 20px;--px-icon-size-m-mobile: 24px;--px-icon-size-m-tablet: 24px;--px-icon-size-m-desktop: 24px;--px-icon-size-l-mobile: 32px;--px-icon-size-l-tablet: 32px;--px-icon-size-l-desktop: 32px;--px-icon-size-xl-mobile: 40px;--px-icon-size-xl-tablet: 40px;--px-icon-size-xl-desktop: 40px;--px-icon-size-2xl-mobile: 48px;--px-icon-size-2xl-tablet: 48px;--px-icon-size-2xl-desktop: 48px;--px-line-height-xs-mobile: 15px;--px-line-height-xs-tablet: 15px;--px-line-height-xs-desktop: 18px;--px-line-height-s-mobile: 18px;--px-line-height-s-tablet: 18px;--px-line-height-s-desktop: 21px;--px-line-height-base-mobile: 21px;--px-line-height-base-tablet: 21px;--px-line-height-base-desktop: 24px;--px-line-height-m-mobile: 24px;--px-line-height-m-tablet: 24px;--px-line-height-m-desktop: 27px;--px-line-height-l-mobile: 27px;--px-line-height-l-tablet: 27px;--px-line-height-l-desktop: 30px;--px-line-height-xl-mobile: 30px;--px-line-height-xl-tablet: 30px;--px-line-height-xl-desktop: 36px;--px-line-height-2xl-mobile: 36px;--px-line-height-2xl-tablet: 36px;--px-line-height-2xl-desktop: 42px;--px-line-height-3xl-mobile: 42px;--px-line-height-3xl-tablet: 42px;--px-line-height-3xl-desktop: 48px;--px-line-height-4xl-mobile: 48px;--px-line-height-4xl-tablet: 48px;--px-line-height-4xl-desktop: 54px;--px-line-height-5xl-mobile: 54px;--px-line-height-5xl-tablet: 54px;--px-line-height-5xl-desktop: 60px;--px-line-height-6xl-mobile: 60px;--px-line-height-6xl-tablet: 60px;--px-line-height-6xl-desktop: 72px;--px-text-size-xs-mobile: 10px;--px-text-size-xs-tablet: 10px;--px-text-size-xs-desktop: 12px;--px-text-size-s-mobile: 12px;--px-text-size-s-tablet: 12px;--px-text-size-s-desktop: 14px;--px-text-size-base-mobile: 14px;--px-text-size-base-tablet: 14px;--px-text-size-base-desktop: 16px;--px-text-size-m-mobile: 16px;--px-text-size-m-tablet: 16px;--px-text-size-m-desktop: 18px;--px-text-size-l-mobile: 18px;--px-text-size-l-tablet: 18px;--px-text-size-l-desktop: 20px;--px-text-size-xl-mobile: 20px;--px-text-size-xl-tablet: 20px;--px-text-size-xl-desktop: 24px;--px-text-size-2xl-mobile: 24px;--px-text-size-2xl-tablet: 24px;--px-text-size-2xl-desktop: 28px;--px-text-size-3xl-mobile: 28px;--px-text-size-3xl-tablet: 28px;--px-text-size-3xl-desktop: 32px;--px-text-size-4xl-mobile: 32px;--px-text-size-4xl-tablet: 32px;--px-text-size-4xl-desktop: 36px;--px-text-size-5xl-mobile: 36px;--px-text-size-5xl-tablet: 36px;--px-text-size-5xl-desktop: 40px;--px-text-size-6xl-mobile: 40px;--px-text-size-6xl-tablet: 40px;--px-text-size-6xl-desktop: 48px;--px-text-size-7xl-mobile: 48px;--px-text-size-7xl-tablet: 48px;--px-text-size-7xl-desktop: 64px}";
-const proximusSemanticStyleSheet = new CSSStyleSheet();
-proximusSemanticStyleSheet.replaceSync(semanticStylesheet);
-const styles$e = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction-mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content-mobile-value);align-items:var(--flex-align-items-mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction-tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content-tablet-value);align-items:var(--flex-align-items-tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction-laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content-laptop-value);align-items:var(--flex-align-items-laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction-desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content-desktop-value);align-items:var(--flex-align-items-desktop-value)}}";
+const styles$d = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction-mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content-mobile-value);align-items:var(--flex-align-items-mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction-tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content-tablet-value);align-items:var(--flex-align-items-tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction-laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content-laptop-value);align-items:var(--flex-align-items-laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction-desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content-desktop-value);align-items:var(--flex-align-items-desktop-value)}}";
 const styleSheet$d = new CSSStyleSheet();
-styleSheet$d.replaceSync(styles$e);
+styleSheet$d.replaceSync(styles$d);
 const gapValues = [
   // Vertical
   "between-section-vertical",
@@ -431,17 +419,14 @@ const gapValues = [
   "component-default-horizontal-mobile"
 ];
 class Stack extends WithFlexAttributes {
-  constructor(semanticTokensStylesheet) {
-    super(semanticTokensStylesheet, styleSheet$d);
+  constructor() {
+    super(styleSheet$d);
     this.template = `<div class="flex-container">
       <slot></slot>
   </div>`;
     this.shadowRoot.innerHTML = this.template;
   }
   connectedCallback() {
-    replayAttributes(this, Stack.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     if (!this.hasAttribute("direction")) {
       this.direction = "row";
     }
@@ -781,9 +766,12 @@ class Stack extends WithFlexAttributes {
     return this.shadowRoot.querySelector(".flex-container");
   }
 }
+if (!customElements.get("px-stack")) {
+  customElements.define("px-stack", Stack);
+}
 class VStack extends Stack {
-  constructor(semanticsTokensStylesheet) {
-    super(semanticsTokensStylesheet);
+  constructor() {
+    super();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -794,9 +782,12 @@ class VStack extends Stack {
     this.directionDesktop = "column";
   }
 }
+if (!customElements.get("px-vstack")) {
+  customElements.define("px-vstack", VStack);
+}
 class HStack extends Stack {
-  constructor(semanticsTokensStylesheet) {
-    super(semanticsTokensStylesheet);
+  constructor() {
+    super();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -807,33 +798,8 @@ class HStack extends Stack {
     this.directionDesktop = "row";
   }
 }
-class PxStack extends Stack {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
-}
-if (!customElements.get("px-stack")) {
-  customElements.define("px-stack", PxStack);
-}
-if (!customElements.get("px-vstack")) {
-  customElements.define(
-    "px-vstack",
-    class PxVStack extends VStack {
-      constructor() {
-        super(proximusSemanticStyleSheet);
-      }
-    }
-  );
-}
 if (!customElements.get("px-hstack")) {
-  customElements.define(
-    "px-hstack",
-    class PxHStack extends HStack {
-      constructor() {
-        super(proximusSemanticStyleSheet);
-      }
-    }
-  );
+  customElements.define("px-hstack", HStack);
 }
 class Spacer extends HTMLElement {
   constructor() {
@@ -858,9 +824,9 @@ class Spacer extends HTMLElement {
   }
 }
 customElements.define("px-spacer", Spacer);
-const styles$d = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}";
+const styles$c = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}";
 const styleSheet$c = new CSSStyleSheet();
-styleSheet$c.replaceSync(styles$d);
+styleSheet$c.replaceSync(styles$c);
 let Section$1 = class Section extends WithFlexAttributes {
   constructor() {
     super(styleSheet$c);
@@ -894,12 +860,12 @@ let Section$1 = class Section extends WithFlexAttributes {
   }
 };
 customElements.define("px-section-damien", Section$1);
-const styles$c = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
+const styles$b = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
 const styleSheet$b = new CSSStyleSheet();
-styleSheet$b.replaceSync(styles$c);
+styleSheet$b.replaceSync(styles$b);
 class Page extends WithFlexAttributes {
   constructor() {
-    super(proximusSemanticStyleSheet, styleSheet$b);
+    super(styleSheet$b);
     this.template = (stickyContainer) => `
     <px-container borderradius="none" padding="none">
       <px-vstack>
@@ -971,7 +937,7 @@ class Page extends WithFlexAttributes {
           id="contact-container"
           borderradius="none"
           id="main"
-          bgcolor="strong"
+          bgcolor="weak"
           padding="none"
           paddingtop="xl"
           paddingbottom="xl"
@@ -1071,13 +1037,16 @@ class Page extends WithFlexAttributes {
     if (oldValue !== newValue) {
       switch (name) {
         case "background-image":
-          this.$imageContainer.bgImgMobile = newValue;
+          this.$imageContainer.setAttribute("bgimg-mobile", newValue);
           break;
         case "gap":
-          this.$bodyVStackContainer.gap = newValue;
+          this.$bodyVStackContainer.setAttribute("gap", newValue);
           break;
         case "background-color":
-          this.$bodyContainer.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "none";
+          this.$bodyContainer.setAttribute(
+            "bgcolor",
+            bgColorValues.indexOf(newValue) > 0 ? newValue : "none"
+          );
           break;
         case "padding-vertical":
           this.handlePaddingVerticalChange(newValue);
@@ -1091,8 +1060,8 @@ class Page extends WithFlexAttributes {
     }
   }
   handlePaddingVerticalChange(newValue) {
-    this.$headerContainer.paddingTop = newValue;
-    this.$footerContainer.paddingBottom = newValue;
+    this.$headerContainer.setAttribute("paddingtop", newValue);
+    this.$footerContainer.setAttribute("paddingbottom", newValue);
   }
   handlePaddingHorizontalChange(newValue) {
     this.$headerContainer.paddingLeft = newValue;
@@ -1110,59 +1079,75 @@ class Page extends WithFlexAttributes {
 if (customElements.get("px-page") === void 0) {
   customElements.define("px-page", Page);
 }
-const styles$b = ':host{line-height:1;display:inline-block;vertical-align:middle}i{font-family:PxIcon;color:var(--px-color-icon-primary-default);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}.inherit{color:inherit}.primary{color:var(--px-color-icon-primary-default)}.body{color:var(--px-color-icon-body-default)}.details{color:var(--px-color-icon-details-default)}.hover:hover{color:var(--px-color-icon-hover-default)}.hover:active{color:var(--px-color-icon-active-default)}.disabled{color:var(--px-color-icon-disabled-default)}.success{color:var(--px-color-icon-success-default)}.warning{color:var(--px-color-icon-warning-default)}.error{color:var(--px-color-icon-error-default)}.unlimited{color:var(--px-color-icon-unlimited-default)}.promo{color:var(--px-color-icon-promo-default)}:host([inverted]) i,:host([inverted]) .primary{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .body{color:var(--px-color-icon-body-inverted)}:host([inverted]) .details{color:var(--px-color-icon-details-inverted)}:host([inverted]) .hover:hover{color:var(--px-color-icon-hover-inverted)}:host([inverted]) .hover:active{color:var(--px-color-icon-active-inverted)}:host([inverted]) .disabled{color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .success{color:var(--px-color-icon-success-inverted)}:host([inverted]) .warning{color:var(--px-color-icon-warning-inverted)}:host([inverted]) .error{color:var(--px-color-icon-error-inverted)}:host([inverted]) .unlimited{color:var(--px-color-icon-unlimited-inverted)}:host([inverted]) .promo{color:var(--px-color-icon-promo-inverted)}.size-2xs{font-size:var(--px-icon-size-2xs-mobile)}.size-xs{font-size:var(--px-icon-size-xs-mobile)}.size-s{font-size:var(--px-icon-size-s-mobile)}.size-m{font-size:var(--px-icon-size-m-mobile)}.size-l{font-size:var(--px-icon-size-l-mobile)}.size-xl{font-size:var(--px-icon-size-xl-mobile)}.size-2xl{font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{font-size:var(--px-icon-size-2xs-tablet)}.size-xs{font-size:var(--px-icon-size-xs-tablet)}.size-s{font-size:var(--px-icon-size-s-tablet)}.size-m{font-size:var(--px-icon-size-m-tablet)}.size-l{font-size:var(--px-icon-size-l-tablet)}.size-xl{font-size:var(--px-icon-size-xl-tablet)}.size-2xl{font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{font-size:var(--px-icon-size-2xs-desktop)}.size-xs{font-size:var(--px-icon-size-xs-desktop)}.size-s{font-size:var(--px-icon-size-s-desktop)}.size-m{font-size:var(--px-icon-size-m-desktop)}.size-l{font-size:var(--px-icon-size-l-desktop)}.size-xl{font-size:var(--px-icon-size-xl-desktop)}.size-2xl{font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}.icon-Accessories:before{content:""}.icon-Account:before{content:""}.icon-Activeren:before{content:""}.icon-Addition:before{content:""}.icon-Administration:before{content:""}.icon-Advantage:before{content:""}.icon-Advantage-pig:before{content:""}.icon-AI:before{content:""}.icon-Airplane:before{content:""}.icon-Alarm:before{content:""}.icon-Answers:before{content:""}.icon-Antenna:before{content:""}.icon-Anywhere:before{content:""}.icon-Applications:before{content:""}.icon-Appointment:before{content:""}.icon-Arrow:before{content:""}.icon-Arrow-circle:before{content:""}.icon-Arrow-direction:before{content:""}.icon-Arrow-direction-horizontal:before{content:""}.icon-Arrow-down:before{content:""}.icon-Arrow-left:before{content:""}.icon-Arrow-navigation:before{content:""}.icon-Arrow-outline:before{content:""}.icon-Arrow-outline-direction:before{content:""}.icon-Arrowbutton:before{content:""}.icon-Arrowbutton-left:before{content:""}.icon-Articles:before{content:""}.icon-Baby:before{content:""}.icon-Back-camera:before{content:""}.icon-Battery:before{content:""}.icon-Belgique-ok:before{content:""}.icon-Best-seller:before{content:""}.icon-Best-seller-14:before{content:""}.icon-Best-seller-2:before{content:""}.icon-Bill:before{content:""}.icon-Bill-member:before{content:""}.icon-Birthday:before{content:""}.icon-Blacklisted:before{content:""}.icon-Blindness:before{content:""}.icon-Bluetooth:before{content:""}.icon-Broken-links:before{content:""}.icon-Bullet:before{content:""}.icon-Caddy:before{content:""}.icon-Calendar:before{content:""}.icon-Calendar-14:before{content:""}.icon-Calendar-7:before{content:""}.icon-Calls:before{content:""}.icon-Callsfromabroad:before{content:""}.icon-Callsfrombelgium:before{content:""}.icon-Calltransfert:before{content:""}.icon-Camera:before{content:""}.icon-Car:before{content:""}.icon-Card:before{content:""}.icon-Care:before{content:""}.icon-Circle:before{content:""}.icon-Circle-Remove:before{content:""}.icon-Close:before{content:""}.icon-Cloud:before{content:""}.icon-Cloud-ICT:before{content:""}.icon-Cloud-IoT:before{content:""}.icon-Cloud-Networks:before{content:""}.icon-Cloud-Security:before{content:""}.icon-Collaboration:before{content:""}.icon-Collapse:before{content:""}.icon-Community:before{content:""}.icon-Community2:before{content:""}.icon-Compare:before{content:""}.icon-Congratulations-box:before{content:""}.icon-Connected-house:before{content:""}.icon-Connection-error:before{content:""}.icon-Connection-manager:before{content:""}.icon-Connectivity:before{content:""}.icon-Contact:before{content:""}.icon-Contactlist:before{content:""}.icon-Contest:before{content:""}.icon-Continuity:before{content:""}.icon-Cookie:before{content:""}.icon-Copy:before{content:""}.icon-Crash:before{content:""}.icon-Customer-Zone:before{content:""}.icon-Dance:before{content:""}.icon-Data:before{content:""}.icon-Deafpeople:before{content:""}.icon-Delivery:before{content:""}.icon-Desktop:before{content:""}.icon-Devices:before{content:""}.icon-Dial:before{content:""}.icon-Digital-media:before{content:""}.icon-Directassist:before{content:""}.icon-Download:before{content:""}.icon-Drag:before{content:""}.icon-E-carte-Facebook:before{content:""}.icon-Easy:before{content:""}.icon-Edit:before{content:""}.icon-Energy:before{content:""}.icon-Entertainment:before{content:""}.icon-Error-box:before{content:""}.icon-Eservices:before{content:""}.icon-Exhibition-screens:before{content:""}.icon-Expand:before{content:""}.icon-Eyedeficiency:before{content:""}.icon-Facebook:before{content:""}.icon-Family:before{content:""}.icon-Favourite:before{content:""}.icon-Favourite-unselected:before{content:""}.icon-Feedback:before{content:""}.icon-Fiber:before{content:""}.icon-Filter:before{content:""}.icon-Fixed-connection:before{content:""}.icon-Fixed-ringing:before{content:""}.icon-Flexibility:before{content:""}.icon-Flexible-delivery:before{content:""}.icon-Football:before{content:""}.icon-Football-11:before{content:""}.icon-Football-11plus:before{content:""}.icon-Forum:before{content:""}.icon-Forward:before{content:""}.icon-Freedelivery:before{content:""}.icon-Freeservices:before{content:""}.icon-Frequently-questions:before{content:""}.icon-Front-camera:before{content:""}.icon-G-Tablet:before{content:""}.icon-Gallery:before{content:""}.icon-Games:before{content:""}.icon-Gift:before{content:""}.icon-Government:before{content:""}.icon-Guitar:before{content:""}.icon-Handicap:before{content:""}.icon-Help:before{content:""}.icon-Home:before{content:""}.icon-Home-added-value:before{content:""}.icon-Hub:before{content:""}.icon-ICT:before{content:""}.icon-Icon-Mood-happy:before{content:""}.icon-Icon-Mood-neutral:before{content:""}.icon-Icon-Mood-unhappy:before{content:""}.icon-Ict-networking:before{content:""}.icon-Idea:before{content:""}.icon-Incomingcalls:before{content:""}.icon-Infinity:before{content:""}.icon-Information:before{content:""}.icon-Information-box:before{content:""}.icon-Infrastructure:before{content:""}.icon-Innovation:before{content:""}.icon-Inscription:before{content:""}.icon-Instagram:before{content:""}.icon-International:before{content:""}.icon-Internet:before{content:""}.icon-Internetlaptop:before{content:""}.icon-Internetmobile:before{content:""}.icon-Internettablet:before{content:""}.icon-Invoice-insight-advanced:before{content:""}.icon-Layer243:before{content:""}.icon-Linkedin:before{content:""}.icon-Links:before{content:""}.icon-Local-data:before{content:""}.icon-Location:before{content:""}.icon-Login1:before{content:""}.icon-Login2:before{content:""}.icon-LoginOpen:before{content:""}.icon-Logout:before{content:""}.icon-Low-stock:before{content:""}.icon-Magnify:before{content:""}.icon-Manual:before{content:""}.icon-Markets:before{content:""}.icon-Meeting:before{content:""}.icon-Mentaldeficiency:before{content:""}.icon-Menu:before{content:""}.icon-Menuburger:before{content:""}.icon-Messaging:before{content:""}.icon-Messenger:before{content:""}.icon-Micro:before{content:""}.icon-MicroSIM-card:before{content:""}.icon-Microsoft-Office:before{content:""}.icon-Minus-fill:before{content:""}.icon-Minutes120:before{content:""}.icon-Minutes15:before{content:""}.icon-Minutes1600:before{content:""}.icon-Minutes240:before{content:""}.icon-Minutes30:before{content:""}.icon-Minutes400:before{content:""}.icon-Minutes60:before{content:""}.icon-Minutes800:before{content:""}.icon-Mobile:before{content:""}.icon-Mobile-Coverage:before{content:""}.icon-Mobility-insurance:before{content:""}.icon-Monitoring:before{content:""}.icon-Mood-joy:before{content:""}.icon-Mood-very-bad:before{content:""}.icon-Move-Sticker:before{content:""}.icon-Move-box:before{content:""}.icon-Moving:before{content:""}.icon-Music:before{content:""}.icon-Myentertainment:before{content:""}.icon-Network:before{content:""}.icon-Newsletter:before{content:""}.icon-Next:before{content:""}.icon-No-playing:before{content:""}.icon-No-stock:before{content:""}.icon-Norton-security:before{content:""}.icon-Not-Available:before{content:""}.icon-Number-1:before{content:""}.icon-Number-10:before{content:""}.icon-Number-2:before{content:""}.icon-Number-3:before{content:""}.icon-Number-4:before{content:""}.icon-Number-5:before{content:""}.icon-Number-6:before{content:""}.icon-Number-7:before{content:""}.icon-Number-8:before{content:""}.icon-Number-9:before{content:""}.icon-OS:before{content:""}.icon-On-app:before{content:""}.icon-On-web:before{content:""}.icon-OneClick:before{content:""}.icon-Online-exclu-en:before{content:""}.icon-Online-exclu-fr:before{content:""}.icon-Online-exclu-nl:before{content:""}.icon-Online-promo-en:before{content:""}.icon-Online-promo-fr:before{content:""}.icon-Online-promo-nl:before{content:""}.icon-Options:before{content:""}.icon-Outcomingcalls:before{content:""}.icon-Overview:before{content:""}.icon-Packs:before{content:""}.icon-Paperclip:before{content:""}.icon-Pedestrian:before{content:""}.icon-Photo:before{content:""}.icon-Picture:before{content:""}.icon-Pin:before{content:""}.icon-Place-map:before{content:""}.icon-Play:before{content:""}.icon-Plus:before{content:""}.icon-Plus-fill:before{content:""}.icon-Points:before{content:""}.icon-Positioning:before{content:""}.icon-Posts:before{content:""}.icon-Presencehome:before{content:""}.icon-Previous:before{content:""}.icon-Prime:before{content:""}.icon-Print:before{content:""}.icon-Processor:before{content:""}.icon-Products:before{content:""}.icon-Promo:before{content:""}.icon-Proximus-TV-app:before{content:""}.icon-Pxs:before{content:""}.icon-Quote:before{content:""}.icon-Raccording-flat:before{content:""}.icon-Ready-to-use:before{content:""}.icon-Recycling:before{content:""}.icon-Reducer:before{content:""}.icon-Refresh:before{content:""}.icon-Relaunch:before{content:""}.icon-Reload:before{content:""}.icon-Remote:before{content:""}.icon-Remove:before{content:""}.icon-Remove-filter:before{content:""}.icon-Restart:before{content:""}.icon-Roaming:before{content:""}.icon-Roaming-Belgium:before{content:""}.icon-Search:before{content:""}.icon-Secure-payment:before{content:""}.icon-Seealso:before{content:""}.icon-Server:before{content:""}.icon-Settings:before{content:""}.icon-Shopmag:before{content:""}.icon-Smarphone-configuration:before{content:""}.icon-Smart-ringing:before{content:""}.icon-Smartphone:before{content:""}.icon-Smartphone-1:before{content:""}.icon-Smartphone-2:before{content:""}.icon-Smartphone-3:before{content:""}.icon-Smartphone-4:before{content:""}.icon-Smartphone-5:before{content:""}.icon-Smartphone-6:before{content:""}.icon-Smartphone4G:before{content:""}.icon-Smiley:before{content:""}.icon-Sms:before{content:""}.icon-Sondage:before{content:""}.icon-Sort-0-9:before{content:""}.icon-Sort-9-0:before{content:""}.icon-Sort-a-z:before{content:""}.icon-Sort-z-a:before{content:""}.icon-Sound-off:before{content:""}.icon-Sound-on:before{content:""}.icon-Speed:before{content:""}.icon-Speedtest-download:before{content:""}.icon-Speedtest-upload:before{content:""}.icon-Status-nok:before{content:""}.icon-Status-ok:before{content:""}.icon-Status-ongoing:before{content:""}.icon-Status-warning:before{content:""}.icon-Stay-informed:before{content:""}.icon-Stayinformed:before{content:""}.icon-Stock:before{content:""}.icon-Stopwatch:before{content:""}.icon-Subscription:before{content:""}.icon-Surfgsm:before{content:""}.icon-Sustainability:before{content:""}.icon-Switchon-switchoff:before{content:""}.icon-TV-replay-36:before{content:""}.icon-TVReplay:before{content:""}.icon-Tablet:before{content:""}.icon-Tailor:before{content:""}.icon-Target-Blank:before{content:""}.icon-Tarifs:before{content:""}.icon-Technical-cast:before{content:""}.icon-Telephony:before{content:""}.icon-Television:before{content:""}.icon-Temp:before{content:""}.icon-Tips1:before{content:""}.icon-Tips2:before{content:""}.icon-Tools:before{content:""}.icon-Top:before{content:""}.icon-Touchscreens:before{content:""}.icon-Tractor:before{content:""}.icon-Train:before{content:""}.icon-Transfer:before{content:""}.icon-Transfer-people:before{content:""}.icon-Trash:before{content:""}.icon-Triangle:before{content:""}.icon-TV-10:before{content:""}.icon-TV-12:before{content:""}.icon-TV-14:before{content:""}.icon-TV-16:before{content:""}.icon-TV-18:before{content:""}.icon-Twitter:before{content:""}.icon-Under-construct:before{content:""}.icon-Upgrade-account:before{content:""}.icon-Upload:before{content:""}.icon-Usage:before{content:""}.icon-Usage2:before{content:""}.icon-Validation-box:before{content:""}.icon-Video:before{content:""}.icon-Video-zap:before{content:""}.icon-Videoscope:before{content:""}.icon-View360:before{content:""}.icon-Waiting:before{content:""}.icon-Warning-box:before{content:""}.icon-Watch:before{content:""}.icon-Watch2:before{content:""}.icon-WhatsApp:before{content:""}.icon-Wireless-hub:before{content:""}.icon-Youtube:before{content:""}.icon-circular-economy:before{content:""}.icon-eco:before{content:""}.icon-happy-weeks:before{content:""}.icon-icon-VOD:before{content:""}.icon-mms:before{content:""}.icon-new-en:before{content:""}.icon-new-fr:before{content:""}.icon-new-nl:before{content:""}.icon-prepaid:before{content:""}.icon-promo:before{content:""}.icon-repair-device:before{content:""}.icon-sales-en:before{content:""}.icon-sales-fr:before{content:""}.icon-sales-nl:before{content:""}.icon-simlocked:before{content:""}.icon-temporary-device:before{content:""}.icon-Test-branding-Account-1:before{content:""}.icon-Test-branding-Car-1:before{content:""}.icon-Test-branding-Sim-1:before{content:""}';
-const styleSheet$a = new CSSStyleSheet();
-styleSheet$a.replaceSync(styles$b);
-const colorValues$1 = ["", "default", "inherit", "primary", "body", "details", "hover", "active", "disabled", "promo", "success", "warning", "error", "unlimited"];
-const _Icon = class _Icon extends PxElement {
+class IconSet extends HTMLElement {
   constructor() {
-    super(proximusSemanticStyleSheet, styleSheet$a);
-    this.template = () => `<i aria-hidden="true"></i>`;
-    this.shadowRoot.innerHTML = this.template();
+    super();
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "name", "size", "color", "aria-label", "inverted"];
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  set name(value) {
-    this.setAttribute("name", value);
-  }
-  get size() {
-    return this.getAttribute("size");
-  }
-  set size(value) {
-    this.setAttribute("size", value);
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(value) {
-    this.setAttribute("color", value);
+    return ["name", "src", "type", "format"];
   }
-  get arialabel() {
-    return this.getAttribute("aria-label");
+  connectedCallback() {
+    const iconSets = document.querySelectorAll(
+      `px-icon-set[name="${this.getAttribute("name")}"]`
+    );
+    if (iconSets.length > 1) {
+      console.warn(
+        "Only one <px-icon-set> component is allowed, self removing"
+      );
+      this.remove();
+    }
+    if (this.getAttribute("type") === "font") {
+      const style = document.createElement("style");
+      style.setAttribute("type", "text/css");
+      style.setAttribute("data-name", this.getAttribute("name"));
+      style.textContent = `
+@font-face {
+  font-family: 'lavender';
+  src:
+    url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+      `;
+      document.head.appendChild(style);
+    }
   }
-  set arialabel(value) {
-    this.setAttribute("aria-label", value);
+  disconnectedCallback() {
+    const style = document.querySelector(
+      `style[data-name="${this.getAttribute("name")}"]`
+    );
+    if (style) {
+      style.remove();
+    }
   }
-  get inverted() {
-    return this.getAttribute("inverted");
+}
+if (!customElements.get("px-icon-set")) {
+  customElements.define("px-icon-set", IconSet);
+}
+const iconSizeValues = ["2xs", "xs", "s", "m", "l", "xl", "2xl"];
+const observedAttributes = [
+  "name",
+  "size",
+  "color",
+  "aria-label",
+  "inverted",
+  "from"
+];
+class Icon extends WithFlexAttributes {
+  static get observedAttributes() {
+    return [...super.observedAttributes, ...observedAttributes];
   }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
+  constructor(...styleSheets) {
+    var _a;
+    super(...styleSheets);
+    this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "name":
-          if (oldValue !== null && oldValue !== "") {
-            this.$el.classList.toggle(`icon-${oldValue}`);
-          }
-          if (newValue !== null && newValue !== "") {
-            this.$el.classList.toggle(`icon-${newValue}`);
-          }
+          this.updateName(oldValue, newValue);
           break;
         case "size":
           this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
@@ -1171,23 +1156,27 @@ const _Icon = class _Icon extends PxElement {
           this.updateAttribute(attrName, oldValue, newValue, colorValues$1);
           break;
         case "aria-label":
-          if (newValue !== null && newValue !== "") {
-            this.$el.setAttribute("aria-label", newValue);
-            this.$el.removeAttribute("aria-hidden");
+          if (!this.internals) {
+            return;
+          }
+          if (newValue) {
+            this.internals.ariaHidden = "false";
+          } else {
+            this.internals.ariaHidden = "true";
           }
           break;
       }
     }
   }
   updateAttribute(attrName, oldValue, newValue, attrValues) {
-    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+    if (oldValue !== null && oldValue !== "") {
       if (attrName === "size") {
         this.$el.classList.toggle(`${attrName}-${oldValue}`);
       } else {
         this.$el.classList.toggle(oldValue);
       }
     }
-    if (newValue !== null && newValue !== "" && oldValue !== "default") {
+    if (newValue !== null && newValue !== "") {
       if (attrName === "size") {
         this.$el.classList.toggle(`${attrName}-${newValue}`);
       } else {
@@ -1195,17 +1184,119 @@ const _Icon = class _Icon extends PxElement {
       }
     }
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
     }
   }
   checkName(values, value) {
     return values.includes(value);
   }
-};
-_Icon.nativeName = "i";
-let Icon = _Icon;
-customElements.define("px-icon", Icon);
-const containerCss = '.container{font-family:Proximus,Verdana,Helvetica,sans-serif;background-color:var(--px-color-bg-container-main-default);border-radius:var(--px-radius-m);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var(--px-color-bg-container-main-inverted);color:var(--px-color-txt-body-inverted)}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.paddingblock-2xs{padding-block:var(--px-padding-2xs)}.paddingblock-xs{padding-block:var(--px-padding-xs)}.paddingblock-s{padding-block:var(--px-padding-s)}.paddingblock-m{padding-block:var(--px-padding-m)}.paddingblock-l{padding-block:var(--px-padding-l)}.paddingblock-xl{padding-block:var(--px-padding-xl)}.paddingblock-none{padding-block:var(--px-padding-none)}.paddinginline-2xs{padding-inline:var(--px-padding-2xs)}.paddinginline-xs{padding-inline:var(--px-padding-xs)}.paddinginline-s{padding-inline:var(--px-padding-s)}.paddinginline-m{padding-inline:var(--px-padding-m)}.paddinginline-l{padding-inline:var(--px-padding-l)}.paddinginline-xl{padding-inline:var(--px-padding-xl)}.paddinginline-none{padding-inline:var(--px-padding-none)}.paddingtop-2xs{padding-top:var(--px-padding-2xs)}.paddingtop-xs{padding-top:var(--px-padding-xs)}.paddingtop-s{padding-top:var(--px-padding-s)}.paddingtop-m{padding-top:var(--px-padding-m)}.paddingtop-l{padding-top:var(--px-padding-l)}.paddingtop-xl{padding-top:var(--px-padding-xl)}.paddingtop-none{padding-top:var(--px-padding-none)}.paddingright-2xs{padding-right:var(--px-padding-2xs)}.paddingright-xs{padding-right:var(--px-padding-xs)}.paddingright-s{padding-right:var(--px-padding-s)}.paddingright-m{padding-right:var(--px-padding-m)}.paddingright-l{padding-right:var(--px-padding-l)}.paddingright-xl{padding-right:var(--px-padding-xl)}.paddingright-none{padding-right:var(--px-padding-none)}.paddingbottom-2xs{padding-bottom:var(--px-padding-2xs)}.paddingbottom-xs{padding-bottom:var(--px-padding-xs)}.paddingbottom-s{padding-bottom:var(--px-padding-s)}.paddingbottom-m{padding-bottom:var(--px-padding-m)}.paddingbottom-l{padding-bottom:var(--px-padding-l)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl)}.paddingbottom-none{padding-bottom:var(--px-padding-none)}.paddingleft-2xs{padding-left:var(--px-padding-2xs)}.paddingleft-xs{padding-left:var(--px-padding-xs)}.paddingleft-s{padding-left:var(--px-padding-s)}.paddingleft-m{padding-left:var(--px-padding-m)}.paddingleft-l{padding-left:var(--px-padding-l)}.paddingleft-xl{padding-left:var(--px-padding-xl)}.paddingleft-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.borderradius-xs{border-radius:var(--px-radius-xs)}.borderradius-s{border-radius:var(--px-radius-s)}.borderradius-m{border-radius:var(--px-radius-m)}.borderradius-l{border-radius:var(--px-radius-l)}.borderradius-2xl{border-radius:var(--px-radius-2xl)}.borderradius-pill{border-radius:var(--px-radius-pill)}.noborderradius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.noborderradius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.noborderradius-all,.borderradius-none{border-radius:var(--px-radius-none)}.bgcolor-none{background-color:var(--px-color-bg-container-none-default)}.bgcolor-weak{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-default)}.bgcolor-strong{background-color:var(--px-color-bg-container-strong-default)}.bgcolor-rich{background-color:var(--px-color-bg-container-rich-default)}.bgcolor-main{background-color:var(--px-color-bg-container-main-default)}.bgcolor-canvas-weak{background-color:var(--px-color-canvas-weak)}.bgcolor-canvas-light{background-color:var(--px-color-canvas-light)}.bgcolor-canvas-soft{background-color:var(--px-color-canvas-soft)}.bgcolor-canvas-moderate{background-color:var(--px-color-canvas-moderate)}.bgcolor-canvas-strong{background-color:var(--px-color-canvas-strong)}.bgcolor-canvas-deep{background-color:var(--px-color-canvas-deep)}.bgcolor-canvas-rich{background-color:var(--px-color-canvas-rich)}.bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-default)}.bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-default)}.bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-default)}.bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-default)}.bgcolor-action-active{background-color:var(--px-color-bg-action-active-default)}.bgcolor-notification{background-color:var(--px-color-bg-notification-default)}.bgcolor-promo{background-color:var(--px-color-bg-promo-default)}.bgcolor-success{background-color:var(--px-color-bg-success-default)}.bgcolor-error{background-color:var(--px-color-bg-error-default)}.bgcolor-warning{background-color:var(--px-color-bg-warning-default)}.bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-default)}:host([inverted]) .bgcolor-none{background-color:var(--px-color-bg-container-none-inverted)}:host([inverted]) .bgcolor-weak{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) .bgcolor-strong{background-color:var(--px-color-bg-container-strong-inverted)}:host([inverted]) .bgcolor-rich{background-color:var(--px-color-bg-container-rich-inverted)}:host([inverted]) .bgcolor-main{background-color:var(--px-color-bg-container-main-inverted)}:host([inverted]) .bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-inverted)}:host([inverted]) .bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .bgcolor-action-active{background-color:var(--px-color-bg-action-active-inverted)}:host([inverted]) .bgcolor-notification{background-color:var(--px-color-bg-notification-inverted)}:host([inverted]) .bgcolor-promo{background-color:var(--px-color-bg-promo-inverted)}:host([inverted]) .bgcolor-success{background-color:var(--px-color-bg-success-inverted)}:host([inverted]) .bgcolor-error{background-color:var(--px-color-bg-error-inverted)}:host([inverted]) .bgcolor-warning{background-color:var(--px-color-bg-warning-inverted)}:host([inverted]) .bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-inverted)}.bgimg{background-repeat:no-repeat}.bgimgsize-cover{background-size:cover;background-position:center center}.bgimgsize-contain{background-size:contain}.shadow-none{box-shadow:var(--px-shadow-none)}.shadow-s{box-shadow:var(--px-shadow-s)}.shadow-m{box-shadow:var(--px-shadow-m)}.shadow-l{box-shadow:var(--px-shadow-l)}.shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.paddingtop-l{padding-top:var(--px-padding-l-mobile)}.paddingtop-xl{padding-top:var(--px-padding-xl-mobile)}.paddingright-l{padding-right:var(--px-padding-l-mobile)}.paddingright-xl{padding-right:var(--px-padding-xl-mobile)}.paddingbottom-l{padding-bottom:var(--px-padding-l-mobile)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.paddingleft-l{padding-left:var(--px-padding-l-mobile)}.paddingleft-xl{padding-left:var(--px-padding-xl-mobile)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}';
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  get arialabel() {
+    return this.getAttribute("aria-label");
+  }
+  set arialabel(value) {
+    this.setAttribute("aria-label", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  get from() {
+    return this.getAttribute("from");
+  }
+  set from(value) {
+    this.setAttribute("from", value);
+  }
+}
+const styles$a = ":host{line-height:1;display:inline-block;vertical-align:middle}i{font-family:lavender;color:var(--px-color-icon-primary-default);font-size:var(--px-icon-size-m-mobile);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);color:var(--px-color-icon-primary-default)}.inherit{color:inherit}.primary{color:var(--px-color-icon-primary-default)}.body{color:var(--px-color-icon-body-default)}.details{color:var(--px-color-icon-details-default)}.hover:hover{color:var(--px-color-icon-hover-default)}.hover:active{color:var(--px-color-icon-active-default)}.disabled{color:var(--px-color-icon-disabled-default)}.success{color:var(--px-color-icon-success-default)}.warning{color:var(--px-color-icon-warning-default)}.error{color:var(--px-color-icon-error-default)}.unlimited{color:var(--px-color-icon-unlimited-default)}.promo{color:var(--px-color-icon-promo-default)}:host([inverted]) i{color:var(--px-color-icon-primary-inverted)}:host([inverted]) svg{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .primary{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .body{color:var(--px-color-icon-body-inverted)}:host([inverted]) .details{color:var(--px-color-icon-details-inverted)}:host([inverted]) .hover:hover{color:var(--px-color-icon-hover-inverted)}:host([inverted]) .hover:active{color:var(--px-color-icon-active-inverted)}:host([inverted]) .disabled{color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .success{color:var(--px-color-icon-success-inverted)}:host([inverted]) .warning{color:var(--px-color-icon-warning-inverted)}:host([inverted]) .error{color:var(--px-color-icon-error-inverted)}:host([inverted]) .unlimited{color:var(--px-color-icon-unlimited-inverted)}:host([inverted]) .promo{color:var(--px-color-icon-promo-inverted)}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile);font-size:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);font-size:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile);font-size:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile);font-size:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile);font-size:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile);font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet);font-size:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet);font-size:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet);font-size:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet);font-size:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet);font-size:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet);font-size:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet);font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop);font-size:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);font-size:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop);font-size:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop);font-size:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop);font-size:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop);font-size:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop);font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}";
+const styleSheet$a = new CSSStyleSheet();
+styleSheet$a.replaceSync(styles$a);
+class SVGIcon extends Icon {
+  constructor() {
+    super(styleSheet$a);
+    this.template = () => `<svg>
+  <use xlink:href="#icon-${this.name}"></use>
+</svg>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  connectedCallback() {
+    const iconSet = document.querySelectorAll("px-icon-set");
+    if (!iconSet) {
+      console.log("<px-icon-set> component not found");
+    }
+    for (const icon of iconSet) {
+      if (!icon.getAttribute("name") || !icon.getAttribute("src")) {
+        console.error("Icon name or src not found");
+        continue;
+      }
+      if (icon.getAttribute("name") === this.from && icon.getAttribute("type") !== "font") {
+        this.src = icon.getAttribute("src");
+        this.$el.firstElementChild.setAttribute(
+          "xlink:href",
+          `${this.src}#icon-${this.name}`
+        );
+      }
+    }
+  }
+  updateName(oldValue, newValue) {
+    if (this.src) {
+      this.$el.firstElementChild.setAttribute(
+        "xlink:href",
+        `${this.src}#icon-${newValue}`
+      );
+    }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector("svg");
+  }
+}
+if (!customElements.get("px-icon")) {
+  customElements.define("px-icon", SVGIcon);
+}
+const iconFontStyles = '.lavender-3g_tablet:before{content:""}.lavender-accessories:before{content:""}.lavender-account:before{content:""}.lavender-activate:before{content:""}.lavender-ai:before{content:""}.lavender-air_plane:before{content:""}.lavender-alarm:before{content:""}.lavender-answers:before{content:""}.lavender-antenna:before{content:""}.lavender-applications:before{content:""}.lavender-arrow_down:before{content:""}.lavender-arrow_left:before{content:""}.lavender-arrow_right:before{content:""}.lavender-arrow_up:before{content:""}.lavender-back_camera:before{content:""}.lavender-bbox_off:before{content:""}.lavender-batterie:before{content:""}.lavender-best_seller:before{content:""}.lavender-bell_circle:before{content:""}.lavender-best_seller_2:before{content:""}.lavender-best_seller_14:before{content:""}.lavender-bbox_on:before{content:""}.lavender-beta_02:before{content:""}.lavender-beta:before{content:""}.lavender-belgique_ok:before{content:""}.lavender-bicycle:before{content:""}.lavender-bill:before{content:""}.lavender-bill_member:before{content:""}.lavender-birthday_cake:before{content:""}.lavender-blindness:before{content:""}.lavender-bookmark:before{content:""}.lavender-broken_links:before{content:""}.lavender-burger_menu:before{content:""}.lavender-bus:before{content:""}.lavender-bug:before{content:""}.lavender-budget_manager:before{content:""}.lavender-cable:before{content:""}.lavender-caddy:before{content:""}.lavender-cadenas_cloud:before{content:""}.lavender-calendar:before{content:""}.lavender-call_from_abroad:before{content:""}.lavender-call_transfert:before{content:""}.lavender-calls:before{content:""}.lavender-camera:before{content:""}.lavender-calls_1:before{content:""}.lavender-calls_from_belgium:before{content:""}.lavender-car:before{content:""}.lavender-car_crash:before{content:""}.lavender-card:before{content:""}.lavender-care:before{content:""}.lavender-cash_back:before{content:""}.lavender-checkmark:before{content:""}.lavender-checkmark_branding:before{content:""}.lavender-chevron_down:before{content:""}.lavender-chevron_up:before{content:""}.lavender-circular_economy:before{content:""}.lavender-clock:before{content:""}.lavender-cloud:before{content:""}.lavender-cloud_ict:before{content:""}.lavender-cloud_iot_1:before{content:""}.lavender-cloud_iot_2:before{content:""}.lavender-chevron_right:before{content:""}.lavender-cloud_security:before{content:""}.lavender-cloud_network:before{content:""}.lavender-chevron_left:before{content:""}.lavender-collaboration:before{content:""}.lavender-congratulation_box:before{content:""}.lavender-connection_error:before{content:""}.lavender-community:before{content:""}.lavender-connected_devices:before{content:""}.lavender-contact:before{content:""}.lavender-crash:before{content:""}.lavender-copy_paste:before{content:""}.lavender-cookie:before{content:""}.lavender-contest:before{content:""}.lavender-cross:before{content:""}.lavender-cross_circle:before{content:""}.lavender-connectivity:before{content:""}.lavender-current_location:before{content:""}.lavender-connection_manager:before{content:""}.lavender-daily_comute:before{content:""}.lavender-daily_rooming:before{content:""}.lavender-data:before{content:""}.lavender-dance:before{content:""}.lavender-dashboard:before{content:""}.lavender-desktop:before{content:""}.lavender-delivery:before{content:""}.lavender-data_center:before{content:""}.lavender-easy:before{content:""}.lavender-download:before{content:""}.lavender-easy_1:before{content:""}.lavender-daily_rooming_02:before{content:""}.lavender-direct_assist:before{content:""}.lavender-edit:before{content:""}.lavender-electricity:before{content:""}.lavender-energy:before{content:""}.lavender-entertainmant_full:before{content:""}.lavender-entertainment:before{content:""}.lavender-exclamation_mark:before{content:""}.lavender-eco:before{content:""}.lavender-exclamation_filled:before{content:""}.lavender-exhibition_screen:before{content:""}.lavender-export:before{content:""}.lavender-eye:before{content:""}.lavender-eye_close:before{content:""}.lavender-family:before{content:""}.lavender-faq:before{content:""}.lavender-favorite:before{content:""}.lavender-favorite_unselected:before{content:""}.lavender-feedback:before{content:""}.lavender-filter:before{content:""}.lavender-fixed_connection:before{content:""}.lavender-fiber:before{content:""}.lavender-fire_wood:before{content:""}.lavender-flexibility04:before{content:""}.lavender-flexibility05:before{content:""}.lavender-flexibility03:before{content:""}.lavender-flexibility02:before{content:""}.lavender-flexible_delivery:before{content:""}.lavender-flexibility01:before{content:""}.lavender-fixed_phone:before{content:""}.lavender-football:before{content:""}.lavender-forum:before{content:""}.lavender-free_delivery:before{content:""}.lavender-free_service:before{content:""}.lavender-frequently_questions:before{content:""}.lavender-fuel:before{content:""}.lavender-front_camera:before{content:""}.lavender-galerry_02:before{content:""}.lavender-galerry:before{content:""}.lavender-games:before{content:""}.lavender-gaz:before{content:""}.lavender-gift:before{content:""}.lavender-government:before{content:""}.lavender-gps:before{content:""}.lavender-handicap:before{content:""}.lavender-handle:before{content:""}.lavender-heat_pump:before{content:""}.lavender-guitar:before{content:""}.lavender-home:before{content:""}.lavender-home_added_value:before{content:""}.lavender-hub:before{content:""}.lavender-home_wifi:before{content:""}.lavender-icon_advantage_pig:before{content:""}.lavender-ict:before{content:""}.lavender-ict_networking:before{content:""}.lavender-incoming_calls:before{content:""}.lavender-infinity:before{content:""}.lavender-information_box:before{content:""}.lavender-internet_mobile:before{content:""}.lavender-information:before{content:""}.lavender-internet_laptop:before{content:""}.lavender-internet_tablet:before{content:""}.lavender-invoice_insight_adv:before{content:""}.lavender-international:before{content:""}.lavender-layers:before{content:""}.lavender-internet:before{content:""}.lavender-licence_plate_managment:before{content:""}.lavender-inscription:before{content:""}.lavender-licence_plate_managment02:before{content:""}.lavender-innovation:before{content:""}.lavender-light_bulb:before{content:""}.lavender-links:before{content:""}.lavender-location:before{content:""}.lavender-login:before{content:""}.lavender-login_open:before{content:""}.lavender-logout:before{content:""}.lavender-magnify:before{content:""}.lavender-map:before{content:""}.lavender-markets:before{content:""}.lavender-metro:before{content:""}.lavender-microphone:before{content:""}.lavender-micro:before{content:""}.lavender-mental_deficiency:before{content:""}.lavender-minus_circle:before{content:""}.lavender-minus:before{content:""}.lavender-minutes_1600_01:before{content:""}.lavender-micro_sim_card:before{content:""}.lavender-messaging:before{content:""}.lavender-mobile:before{content:""}.lavender-minutes_1600_02:before{content:""}.lavender-mobile_coverage:before{content:""}.lavender-mobile_1:before{content:""}.lavender-mobile_touches:before{content:""}.lavender-mobility_insurance:before{content:""}.lavender-monitoring:before{content:""}.lavender-mood_happy:before{content:""}.lavender-mood_joy:before{content:""}.lavender-mood_neutral:before{content:""}.lavender-mood_unhappy:before{content:""}.lavender-move_sticker:before{content:""}.lavender-no_wifi:before{content:""}.lavender-no_playing:before{content:""}.lavender-number2:before{content:""}.lavender-number3:before{content:""}.lavender-number1:before{content:""}.lavender-norton_security_1:before{content:""}.lavender-mood_very_bad:before{content:""}.lavender-music:before{content:""}.lavender-norton_security:before{content:""}.lavender-natural_gas:before{content:""}.lavender-number4:before{content:""}.lavender-number5:before{content:""}.lavender-number6:before{content:""}.lavender-number7:before{content:""}.lavender-number8:before{content:""}.lavender-number9:before{content:""}.lavender-number10:before{content:""}.lavender-on_app:before{content:""}.lavender-on_off_switch:before{content:""}.lavender-on_web:before{content:""}.lavender-one_click:before{content:""}.lavender-outcoming_call:before{content:""}.lavender-options:before{content:""}.lavender-overview:before{content:""}.lavender-pack:before{content:""}.lavender-pack_off:before{content:""}.lavender-paperclip:before{content:""}.lavender-parking:before{content:""}.lavender-picture:before{content:""}.lavender-pin:before{content:""}.lavender-places:before{content:""}.lavender-play:before{content:""}.lavender-plus:before{content:""}.lavender-plus_circle:before{content:""}.lavender-positioning:before{content:""}.lavender-power:before{content:""}.lavender-presence_home:before{content:""}.lavender-prime:before{content:""}.lavender-print:before{content:""}.lavender-processor:before{content:""}.lavender-products:before{content:""}.lavender-qr_code:before{content:""}.lavender-qr:before{content:""}.lavender-reducer:before{content:""}.lavender-refresh:before{content:""}.lavender-reload:before{content:""}.lavender-relaunch:before{content:""}.lavender-recycling:before{content:""}.lavender-remote:before{content:""}.lavender-repair_device:before{content:""}.lavender-raccording_flat:before{content:""}.lavender-ready_to_use:before{content:""}.lavender-question_mark:before{content:""}.lavender-replay36:before{content:""}.lavender-requests_appointments_and_order:before{content:""}.lavender-reset:before{content:""}.lavender-roaming_belgium:before{content:""}.lavender-roadwork:before{content:""}.lavender-roaming:before{content:""}.lavender-settings:before{content:""}.lavender-serveur:before{content:""}.lavender-settings_full:before{content:""}.lavender-restaurant:before{content:""}.lavender-shopmag:before{content:""}.lavender-secure_paiement:before{content:""}.lavender-sim_card:before{content:""}.lavender-share:before{content:""}.lavender-search:before{content:""}.lavender-smartphone1:before{content:""}.lavender-smartphone2:before{content:""}.lavender-smartphone3:before{content:""}.lavender-smartphone4:before{content:""}.lavender-smartphone4g:before{content:""}.lavender-smartphone5:before{content:""}.lavender-smartphone6:before{content:""}.lavender-solar_panel:before{content:""}.lavender-solar_pump:before{content:""}.lavender-sondage:before{content:""}.lavender-sound_alert:before{content:""}.lavender-sound_on:before{content:""}.lavender-sound_off:before{content:""}.lavender-stop_watch:before{content:""}.lavender-speedtest_dl:before{content:""}.lavender-speed:before{content:""}.lavender-surf_gsm:before{content:""}.lavender-sustainability:before{content:""}.lavender-speedtest_ul:before{content:""}.lavender-switch:before{content:""}.lavender-succes:before{content:""}.lavender-subscription_1:before{content:""}.lavender-tablet:before{content:""}.lavender-tailor:before{content:""}.lavender-subscription:before{content:""}.lavender-target_blank:before{content:""}.lavender-threedots_horizontal02:before{content:""}.lavender-terms_and_conditions:before{content:""}.lavender-tractor:before{content:""}.lavender-toucscreens:before{content:""}.lavender-threedots_vertical02:before{content:""}.lavender-train:before{content:""}.lavender-traffic_jam:before{content:""}.lavender-tram:before{content:""}.lavender-trash:before{content:""}.lavender-tv:before{content:""}.lavender-under_construction:before{content:""}.lavender-upload:before{content:""}.lavender-usage:before{content:""}.lavender-view360_02:before{content:""}.lavender-view360:before{content:""}.lavender-view360_01:before{content:""}.lavender-videoscope:before{content:""}.lavender-wifi_warning:before{content:""}.lavender-wireless_hub:before{content:""}.lavender-wrench:before{content:""}.lavender-wifi_ok:before{content:""}.lavender-water:before{content:""}.lavender-walking:before{content:""}.lavender-watch:before{content:""}.lavender-voucher:before{content:""}';
+const iconFontStyleSheet = new CSSStyleSheet();
+const styleSheet$9 = new CSSStyleSheet();
+iconFontStyleSheet.replaceSync(iconFontStyles);
+styleSheet$9.replaceSync(styles$a);
+class FontIcon extends Icon {
+  constructor() {
+    super(iconFontStyleSheet, styleSheet$9);
+    this.template = () => `<i></i>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  updateName(oldValue, newValue) {
+    this.$el.classList.remove(`lavender-${oldValue}`);
+    if (newValue) {
+      this.$el.classList.add(`lavender-${newValue}`);
+    }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector("i");
+  }
+}
+customElements.define("px-icon-f", FontIcon);
+const containerCss = '.container{font-family:var(--px-font-family);background-color:var(--px-color-bg-container-rich-inverted);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.paddingblock-2xs{padding-block:var(--px-padding-2xs)}.paddingblock-xs{padding-block:var(--px-padding-xs)}.paddingblock-s{padding-block:var(--px-padding-s)}.paddingblock-m{padding-block:var(--px-padding-m)}.paddingblock-l{padding-block:var(--px-padding-l)}.paddingblock-xl{padding-block:var(--px-padding-xl)}.paddingblock-none{padding-block:var(--px-padding-none)}.paddinginline-2xs{padding-inline:var(--px-padding-2xs)}.paddinginline-xs{padding-inline:var(--px-padding-xs)}.paddinginline-s{padding-inline:var(--px-padding-s)}.paddinginline-m{padding-inline:var(--px-padding-m)}.paddinginline-l{padding-inline:var(--px-padding-l)}.paddinginline-xl{padding-inline:var(--px-padding-xl)}.paddinginline-none{padding-inline:var(--px-padding-none)}.paddingtop-2xs{padding-top:var(--px-padding-2xs)}.paddingtop-xs{padding-top:var(--px-padding-xs)}.paddingtop-s{padding-top:var(--px-padding-s)}.paddingtop-m{padding-top:var(--px-padding-m)}.paddingtop-l{padding-top:var(--px-padding-l)}.paddingtop-xl{padding-top:var(--px-padding-xl)}.paddingtop-none{padding-top:var(--px-padding-none)}.paddingright-2xs{padding-right:var(--px-padding-2xs)}.paddingright-xs{padding-right:var(--px-padding-xs)}.paddingright-s{padding-right:var(--px-padding-s)}.paddingright-m{padding-right:var(--px-padding-m)}.paddingright-l{padding-right:var(--px-padding-l)}.paddingright-xl{padding-right:var(--px-padding-xl)}.paddingright-none{padding-right:var(--px-padding-none)}.paddingbottom-2xs{padding-bottom:var(--px-padding-2xs)}.paddingbottom-xs{padding-bottom:var(--px-padding-xs)}.paddingbottom-s{padding-bottom:var(--px-padding-s)}.paddingbottom-m{padding-bottom:var(--px-padding-m)}.paddingbottom-l{padding-bottom:var(--px-padding-l)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl)}.paddingbottom-none{padding-bottom:var(--px-padding-none)}.paddingleft-2xs{padding-left:var(--px-padding-2xs)}.paddingleft-xs{padding-left:var(--px-padding-xs)}.paddingleft-s{padding-left:var(--px-padding-s)}.paddingleft-m{padding-left:var(--px-padding-m)}.paddingleft-l{padding-left:var(--px-padding-l)}.paddingleft-xl{padding-left:var(--px-padding-xl)}.paddingleft-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.borderradius-main{border-radius:var(--px-radius-main)}.borderradius-pill{border-radius:var(--px-radius-pill)}.noborderradius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.noborderradius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.noborderradius-all,.borderradius-none{border-radius:var(--px-radius-none)}.bgcolor-none{background-color:var(--px-color-bg-container-none-default)}.bgcolor-weak{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-default)}.bgcolor-strong{background-color:var(--px-color-bg-container-strong-default)}.bgcolor-rich{background-color:var(--px-color-bg-container-rich-default)}.bgcolor-main{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-canvas-weak{background-color:var(--px-color-canvas-weak)}.bgcolor-canvas-light{background-color:var(--px-color-canvas-light)}.bgcolor-canvas-soft{background-color:var(--px-color-canvas-soft)}.bgcolor-canvas-moderate{background-color:var(--px-color-canvas-moderate)}.bgcolor-canvas-strong{background-color:var(--px-color-canvas-strong)}.bgcolor-canvas-deep{background-color:var(--px-color-canvas-deep)}.bgcolor-canvas-rich{background-color:var(--px-color-canvas-rich)}.bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-default)}.bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-default)}.bgcolor-action-hover-bordered{background-color:var(--px-color-bg-action-hover-bordered-default)}.bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-default)}.bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-default)}.bgcolor-action-active{background-color:var(--px-color-bg-action-active-default)}.bgcolor-notification{background-color:var(--px-color-bg-notification-default)}.bgcolor-promo{background-color:var(--px-color-bg-promo-default)}.bgcolor-success{background-color:var(--px-color-bg-success-default)}.bgcolor-error{background-color:var(--px-color-bg-error-default)}.bgcolor-warning{background-color:var(--px-color-bg-warning-default)}.bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-default)}:host([inverted]) .bgcolor-none{background-color:var(--px-color-bg-container-none-inverted)}:host([inverted]) .bgcolor-weak{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) .bgcolor-strong{background-color:var(--px-color-bg-container-strong-inverted)}:host([inverted]) .bgcolor-rich{background-color:var(--px-color-bg-container-rich-inverted)}:host([inverted]) .bgcolor-main{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-bordered-default)}:host([inverted]) .bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .bgcolor-action-active{background-color:var(--px-color-bg-action-active-inverted)}:host([inverted]) .bgcolor-notification{background-color:var(--px-color-bg-notification-inverted)}:host([inverted]) .bgcolor-promo{background-color:var(--px-color-bg-promo-inverted)}:host([inverted]) .bgcolor-success{background-color:var(--px-color-bg-success-inverted)}:host([inverted]) .bgcolor-error{background-color:var(--px-color-bg-error-inverted)}:host([inverted]) .bgcolor-warning{background-color:var(--px-color-bg-warning-inverted)}:host([inverted]) .bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-inverted)}.bgimg{background-repeat:no-repeat}.bgimgsize-cover{background-size:cover;background-position:center center}.bgimgsize-contain{background-size:contain}.shadow-none{box-shadow:var(--px-shadow-none)}.shadow-s{box-shadow:var(--px-shadow-s)}.shadow-m{box-shadow:var(--px-shadow-m)}.shadow-l{box-shadow:var(--px-shadow-l)}.shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.paddingtop-l{padding-top:var(--px-padding-l-mobile)}.paddingtop-xl{padding-top:var(--px-padding-xl-mobile)}.paddingright-l{padding-right:var(--px-padding-l-mobile)}.paddingright-xl{padding-right:var(--px-padding-xl-mobile)}.paddingbottom-l{padding-bottom:var(--px-padding-l-mobile)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.paddingleft-l{padding-left:var(--px-padding-l-mobile)}.paddingleft-xl{padding-left:var(--px-padding-xl-mobile)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}';
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
 const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
@@ -1213,7 +1304,7 @@ const noBorderRadiusValues = ["", "all", "top", "right", "bottom", "left"];
 const bgImgSizeValues = ["", "cover", "contain", "default"];
 const _Container = class _Container extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, containerStyles);
+    super(containerStyles);
     this.template = () => `<div class="container">
     <slot name="anchor-left"></slot>
     <slot name="anchor-right"></slot>
@@ -1372,7 +1463,7 @@ const _Container = class _Container extends PxElement {
     this.setAttribute("inverted", value);
   }
   connectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     super.connectedCallback();
     const anchorSlot = this.querySelector("[slot]");
     if (anchorSlot) {
@@ -1387,6 +1478,9 @@ const _Container = class _Container extends PxElement {
         this.$el.style.height = "100%";
       }
     }
+    if (((_c = this.parentElement) == null ? void 0 : _c.localName) === "px-grid-item") {
+      this.$el.style.height = "100%";
+    }
     if (this.hasAttribute("bgimg-mobile") || this.hasAttribute("bgimg-tablet") || this.hasAttribute("bgimg-laptop")) {
       window.addEventListener("resize", this.onWindowResize);
     }
@@ -1494,22 +1588,22 @@ const _Container = class _Container extends PxElement {
 _Container.nativeName = "div";
 let Container = _Container;
 customElements.define("px-container", Container);
-const headingCss = "h1,.h1,::slotted(h1),h2,.h2,::slotted(h2),h3,.h3,::slotted(h3),h4,.h4,::slotted(h4),h5,.h5,::slotted(h5),h6,.h6,::slotted(h6),.h7,.subtitle{margin:0;font-family:Proximus,Verdana,Helvetica,sans-serif;color:var(--px-color-txt-primary-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:700}:host([inverted]) h1,:host([inverted]) .h1,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .h2,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .h3,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .h4,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .h5,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .h6,:host([inverted]) ::slotted(h6),:host([inverted]) .h7,:host([inverted]) .subtitle{color:var(--px-color-txt-primary-inverted)}h1,.h1,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-4xl-mobile);font-weight:900}h2,.h2,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-3xl-mobile);font-weight:900}h3,.h3,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-3xl-mobile)}h4,.h4,::slotted(h4){font-size:var(--px-text-size-2xl-mobile);line-height:var(--px-line-height-2xl-mobile)}h5,.h5,::slotted(h5){font-size:var(--px-text-size-l-mobile);line-height:var(--px-line-height-l-mobile)}h6,.h6,::slotted(h6){font-size:var(--px-text-size-m-mobile);line-height:var(--px-line-height-m-mobile)}.subtitle{font-size:var(--px-text-size-xl-mobile);line-height:var(--px-line-height-xl-mobile);font-weight:300}@media only screen and (min-width: 64rem){h1,.h1,::slotted(h1){font-size:var(--px-text-size-5xl-tablet);line-height:var(--px-line-height-4xl-tablet);font-weight:900}h2,.h2,::slotted(h2){font-size:var(--px-text-size-4xl-tablet);line-height:var(--px-line-height-3xl-tablet);font-weight:900}h3,.h3,::slotted(h3){font-size:var(--px-text-size-3xl-tablet);line-height:var(--px-line-height-3xl-tablet)}h4,.h4,::slotted(h4){font-size:var(--px-text-size-2xl-tablet);line-height:var(--px-line-height-2xl-tablet)}h5,.h5,::slotted(h5){font-size:var(--px-text-size-l-tablet);line-height:var(--px-line-height-l-tablet)}h6,.h6,::slotted(h6){font-size:var(--px-text-size-m-tablet);line-height:var(--px-line-height-m-tablet)}.h7{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}.subtitle{font-size:var(--px-text-size-xl-tablet);line-height:var(--px-line-height-xl-tablet);font-weight:300}}@media only screen and (min-width: 90rem){h1,.h1,::slotted(h1){font-size:var(--px-text-size-5xl-desktop);line-height:var(--px-line-height-4xl-desktop);font-weight:900}h2,.h2,::slotted(h2){font-size:var(--px-text-size-4xl-desktop);line-height:var(--px-line-height-3xl-desktop);font-weight:900}h3,.h3,::slotted(h3){font-size:var(--px-text-size-3xl-desktop);line-height:var(--px-line-height-3xl-desktop)}h4,.h4,::slotted(h4){font-size:var(--px-text-size-2xl-desktop);line-height:var(--px-line-height-2xl-desktop)}h5,.h5,::slotted(h5){font-size:var(--px-text-size-l-desktop);line-height:var(--px-line-height-l-desktop)}h6,.h6,::slotted(h6){font-size:var(--px-text-size-m-desktop);line-height:var(--px-line-height-m-desktop)}.h7{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}.subtitle{font-size:var(--px-text-size-xl-desktop);line-height:var(--px-line-height-xl-desktop);font-weight:300}}";
-const typographyCss$1 = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-inverted-primary{color:var(--px-color-txt-inverted-primary-default)}.color-inverted{color:var(--px-color-txt-inverted-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-status-success{color:var(--px-color-txt-status-success-default)}.color-status-error{color:var(--px-color-txt-status-error-default)}.color-status-warning{color:var(--px-color-txt-status-warning-default)}.color-status-unlimited{color:var(--px-color-txt-status-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-inverted-primary{color:var(--px-color-txt-inverted-primary-inverted)}:host([inverted]) .color-inverted{color:var(--px-color-txt-inverted-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-status-success{color:var(--px-color-txt-status-success-inverted)}:host([inverted]) .color-status-error{color:var(--px-color-txt-status-error-inverted)}:host([inverted]) .color-status-warning{color:var(--px-color-txt-status-warning-inverted)}:host([inverted]) .color-status-unlimited{color:var(--px-color-txt-status-unlimited-inverted)}.fontsize-inherit{font-size:inherit;line-height:inherit}.fontsize-xs{font-size:var(--px-text-size-xs-mobile);line-height:var(--px-line-height-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile);line-height:var(--px-line-height-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile);line-height:var(--px-line-height-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile);line-height:var(--px-line-height-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile);line-height:var(--px-line-height-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-7xl-mobile)}@media only screen and (min-width: 768px){.fontsize-xs{font-size:var(--px-text-size-xs-mobile);line-height:var(--px-line-height-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile);line-height:var(--px-line-height-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile);line-height:var(--px-line-height-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile);line-height:var(--px-line-height-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile);line-height:var(--px-line-height-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-7xl-mobile)}}@media only screen and (min-width: 1025px){.fontsize-xs{font-size:var(--px-text-size-xs-tablet);line-height:var(--px-line-height-xs-tablet)}.fontsize-s{font-size:var(--px-text-size-s-tablet);line-height:var(--px-line-height-s-tablet)}.fontsize-base{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}.fontsize-m{font-size:var(--px-text-size-m-tablet);line-height:var(--px-line-height-m-tablet)}.fontsize-l{font-size:var(--px-text-size-l-tablet);line-height:var(--px-line-height-l-tablet)}.fontsize-xl{font-size:var(--px-text-size-xl-tablet);line-height:var(--px-line-height-xl-tablet)}.fontsize-2xl{font-size:var(--px-text-size-2xl-tablet);line-height:var(--px-line-height-2xl-tablet)}.fontsize-3xl{font-size:var(--px-text-size-3xl-tablet);line-height:var(--px-line-height-3xl-tablet)}.fontsize-4xl{font-size:var(--px-text-size-4xl-tablet);line-height:var(--px-line-height-4xl-tablet)}.fontsize-5xl{font-size:var(--px-text-size-5xl-tablet);line-height:var(--px-line-height-5xl-tablet)}.fontsize-6xl{font-size:var(--px-text-size-6xl-tablet);line-height:var(--px-line-height-6xl-tablet)}.fontsize-7xl{font-size:var(--px-text-size-7xl-tablet);line-height:var(--px-line-height-7xl-tablet)}}@media only screen and (min-width: 1441px){.fontsize-xs{font-size:var(--px-text-size-xs-desktop);line-height:var(--px-line-height-xs-desktop)}.fontsize-s{font-size:var(--px-text-size-s-desktop);line-height:var(--px-line-height-s-desktop)}.fontsize-base{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}.fontsize-m{font-size:var(--px-text-size-m-desktop);line-height:var(--px-line-height-m-desktop)}.fontsize-l{font-size:var(--px-text-size-l-desktop);line-height:var(--px-line-height-l-desktop)}.fontsize-xl{font-size:var(--px-text-size-xl-desktop);line-height:var(--px-line-height-xl-desktop)}.fontsize-2xl{font-size:var(--px-text-size-2xl-desktop);line-height:var(--px-line-height-2xl-desktop)}.fontsize-3xl{font-size:var(--px-text-size-3xl-desktop);line-height:var(--px-line-height-3xl-desktop)}.fontsize-4xl{font-size:var(--px-text-size-4xl-desktop);line-height:var(--px-line-height-4xl-desktop)}.fontsize-5xl{font-size:var(--px-text-size-5xl-desktop);line-height:var(--px-line-height-5xl-desktop)}.fontsize-6xl{font-size:var(--px-text-size-6xl-desktop);line-height:var(--px-line-height-6xl-desktop)}.fontsize-7xl{font-size:var(--px-text-size-7xl-desktop);line-height:var(--px-line-height-7xl-desktop)}}.fontweight-inherit{font-weight:inherit}.fontweight-normal{font-weight:var(--font-weight-regular)}.fontweight-bold{font-weight:var(--font-weight-bold)}.fontweight-extrabold{font-weight:var(--font-weight-extrabold)}.fontweight-light{font-weight:var(--font-weight-light)}";
+const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-txt-primary-default));font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-txt-primary-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-mobile)}.style-subtitle{font-size:var(--px-text-size-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-base-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-tablet)}.style-title-s{font-size:var(--px-text-size-base-tablet)}.style-subtitle{font-size:var(--px-text-size-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-desktop)}.style-title-s{font-size:var(--px-text-size-base-desktop)}.style-subtitle{font-size:var(--px-text-size-xl-desktop)}}";
+const typographyCss$1 = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.fontsize-inherit{font-size:inherit;line-height:inherit}.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.fontsize-xs{font-size:var(--px-text-size-xs-tablet)}.fontsize-s{font-size:var(--px-text-size-s-tablet)}.fontsize-base{font-size:var(--px-text-size-base-tablet)}.fontsize-m{font-size:var(--px-text-size-m-tablet)}.fontsize-l{font-size:var(--px-text-size-l-tablet)}.fontsize-xl{font-size:var(--px-text-size-xl-tablet)}.fontsize-2xl{font-size:var(--px-text-size-2xl-tablet)}.fontsize-3xl{font-size:var(--px-text-size-3xl-tablet)}.fontsize-4xl{font-size:var(--px-text-size-4xl-tablet)}.fontsize-5xl{font-size:var(--px-text-size-5xl-tablet)}.fontsize-6xl{font-size:var(--px-text-size-6xl-tablet)}.fontsize-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.fontsize-xs{font-size:var(--px-text-size-xs-desktop)}.fontsize-s{font-size:var(--px-text-size-s-desktop)}.fontsize-base{font-size:var(--px-text-size-base-desktop)}.fontsize-m{font-size:var(--px-text-size-m-desktop)}.fontsize-l{font-size:var(--px-text-size-l-desktop)}.fontsize-xl{font-size:var(--px-text-size-xl-desktop)}.fontsize-2xl{font-size:var(--px-text-size-2xl-desktop)}.fontsize-3xl{font-size:var(--px-text-size-3xl-desktop)}.fontsize-4xl{font-size:var(--px-text-size-4xl-desktop)}.fontsize-5xl{font-size:var(--px-text-size-5xl-desktop)}.fontsize-6xl{font-size:var(--px-text-size-6xl-desktop)}.fontsize-7xl{font-size:var(--px-text-size-7xl-desktop)}}.fontweight-inherit{font-weight:inherit}.fontweight-normal{font-weight:var(--font-weight-regular)}.fontweight-bold{font-weight:var(--font-weight-bold)}.fontweight-extrabold{font-weight:var(--font-weight-extrabold)}.fontweight-light{font-weight:var(--font-weight-light)}";
 const headingStyles$2 = new CSSStyleSheet();
 headingStyles$2.replaceSync(headingCss);
 const typographyStyles$4 = new CSSStyleSheet();
 typographyStyles$4.replaceSync(typographyCss$1);
-const variantValues$3 = [
+const variantValues$6 = [
   "",
   "default",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "h7",
+  "title-4xl",
+  "title-3xl",
+  "title-2xl",
+  "title-xl",
+  "title-l",
+  "title-m",
+  "title-s",
   "subtitle"
 ];
 class AbstractHeading extends PxElement {
@@ -1517,20 +1611,13 @@ class AbstractHeading extends PxElement {
     return `<slot></slot>`;
   }
   constructor(tagName) {
-    super(proximusSemanticStyleSheet, headingStyles$2, typographyStyles$4);
+    super(headingStyles$2, typographyStyles$4);
     const $root = document.createElement(tagName);
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
   static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "variant",
-      "color",
-      "fontsize",
-      "fontweight",
-      "inverted"
-    ];
+    return [...super.observedAttributes, "variant", "color", "inverted"];
   }
   get variant() {
     return this.getAttribute("variant");
@@ -1544,18 +1631,6 @@ class AbstractHeading extends PxElement {
   set color(value) {
     this.setAttribute("color", value);
   }
-  get fontsize() {
-    return this.getAttribute("fontsize");
-  }
-  set fontsize(value) {
-    this.setAttribute("fontsize", value);
-  }
-  get fontweight() {
-    return this.getAttribute("fontweight");
-  }
-  set fontweight(value) {
-    this.setAttribute("fontweight", value);
-  }
   get inverted() {
     return this.getAttribute("inverted");
   }
@@ -1566,16 +1641,10 @@ class AbstractHeading extends PxElement {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "variant":
-          this.updateAttribute(attrName, oldValue, newValue, variantValues$3);
+          this.updateAttribute(attrName, oldValue, newValue, variantValues$6);
           break;
         case "color":
-          this.updateTypography(attrName, oldValue, newValue, colorValues$2);
-          break;
-        case "fontsize":
-          this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
-          break;
-        case "fontweight":
-          this.updateTypography(attrName, oldValue, newValue, fontweightValues);
+          this.updateColor(oldValue, newValue, colorValues$1);
           break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -1585,30 +1654,38 @@ class AbstractHeading extends PxElement {
   }
   toggleClass(oldValue, newValue) {
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.$el.classList.toggle(oldValue);
+      this.$el.classList.toggle(`style-${oldValue}`);
     }
     if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.$el.classList.toggle(newValue);
+      this.$el.classList.toggle(`style-${newValue}`);
     }
   }
   checkName(values, value) {
     return values.includes(value);
   }
   updateAttribute(attrName, oldValue, newValue, attrValue) {
-    this.toggleClass(oldValue, newValue);
     if (!this.checkName(attrValue, newValue)) {
       console.error(`Bad "${attrName}" value for`, this.$el);
+    } else {
+      this.toggleClass(oldValue, newValue);
     }
   }
-  updateTypography(attrName, oldValue, newValue, attrValue) {
+  updateColor(oldValue, newValue, attrValue) {
+    const invertedStatus = this.inverted === null ? "default" : "inverted";
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.$el.classList.toggle(`${attrName}-${oldValue}`);
+      this.$el.style.setProperty(
+        `--heading-color-${invertedStatus}`,
+        `var(--px-color-txt-${oldValue}-${invertedStatus})`
+      );
     }
     if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.$el.classList.toggle(`${attrName}-${newValue}`);
+      this.$el.style.setProperty(
+        `--heading-color-${invertedStatus}`,
+        `var(--px-color-txt-${newValue}-${invertedStatus})`
+      );
     }
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`Bad "${attrName}" value for`, this.$el);
+      console.error(`Bad color value for`, this.$el);
     }
   }
 }
@@ -1660,11 +1737,11 @@ const _H6 = class _H6 extends AbstractHeading {
 _H6.nativeName = "h6";
 let H6 = _H6;
 customElements.define("px-h6", H6);
-const styles$a = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}";
-const styleSheet$9 = new CSSStyleSheet();
-styleSheet$9.replaceSync(styles$a);
+const styles$9 = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}";
+const styleSheet$8 = new CSSStyleSheet();
+styleSheet$8.replaceSync(styles$9);
 class Section2 extends HTMLElement {
-  constructor(semanticTokensStylesheet) {
+  constructor() {
     super();
     this.template = () => `
     <px-container borderradius="none" padding="none" bgcolor="${this.bgColor}">
@@ -1680,12 +1757,9 @@ class Section2 extends HTMLElement {
   `;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$9];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
   }
   connectedCallback() {
-    replayAttributes(this, Section2.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     const headingSlot = this.querySelector('[slot="heading"]');
     if (!headingSlot) {
       this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
@@ -1805,19 +1879,14 @@ class Section2 extends HTMLElement {
     this.setAttribute("paddingbottom", value);
   }
 }
-class ProximusSection extends Section2 {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
-}
-customElements.define("px-section", ProximusSection);
-const accordionCss = `details{font-family:Proximus,Verdana,Helvetica,sans-serif;display:flex;flex-direction:column;align-items:flex-start}details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-spacing-component-default-vertical)}summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details:not(.single) summary{display:flex;padding:var(--px-padding-s);gap:var(--px-spacing-text-to-icon-horizontal);align-self:stretch}summary:after{content:"";width:24px;height:24px;flex-shrink:0;background-color:var(--px-color-bg-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-s) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}summary:hover{cursor:pointer}details:not(.single) summary:hover{background-color:var(--px-color-bg-container-moderate-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-default);border:var(--px-border-s) solid var(--px-color-border-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details.single summary{display:inline-flex;gap:var(--px-spacing-between-icon-horizontal-mobile);justify-content:center;color:var(--px-color-txt-primary-default);font-weight:700;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:0;padding:0 var(--px-padding-xs);border-color:var(--px-color-border-action-hover-default)}details.single summary:hover:after{border-color:transparent;margin-right:calc(var(--px-padding-xs) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-component-default-vertical)}details[open] summary slot[name=title]{color:var(--px-color-txt-primary-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-txt-body-inverted)}:host([inverted]) details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-inverted)}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent}:host([inverted]) summary:after{background-color:var(--px-color-bg-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) summary:hover{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
+customElements.define("px-section", Section2);
+const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column;align-items:flex-start}details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-spacing-component-default-vertical)}summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details:not(.single) summary{display:flex;padding:var(--px-padding-s);gap:var(--px-spacing-text-to-icon-horizontal);align-self:stretch}summary:after{content:"";width:24px;height:24px;flex-shrink:0;background-color:var(--px-color-bg-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-s) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}summary:hover{cursor:pointer}details:not(.single) summary:hover{background-color:var(--px-color-bg-container-weak-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-bordered-default);border:var(--px-border-s) solid var(--px-color-border-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details.single summary{display:inline-flex;gap:var(--px-spacing-between-icon-horizontal-mobile);justify-content:center;color:var(--px-color-txt-primary-default);font-weight:700;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:0;padding:0 var(--px-padding-xs);border-color:var(--px-color-border-action-hover-default)}details.single summary:hover:after{border-color:transparent;margin-right:calc(var(--px-padding-xs) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-component-default-vertical)}details[open] summary slot[name=title]{color:var(--px-color-txt-primary-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-txt-body-inverted)}:host([inverted]) details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-inverted)}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent}:host([inverted]) summary:after{background-color:var(--px-color-bg-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) summary:hover{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) summary:hover:after{background-color:var(--px-color-bg-action-bordered-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
 const accordionStyles = new CSSStyleSheet();
 accordionStyles.replaceSync(accordionCss);
-const variantValues$2 = ["", "none", "single"];
+const variantValues$5 = ["", "none", "single"];
 const _Accordion = class _Accordion extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, accordionStyles);
+    super(accordionStyles);
     this.template = () => `<details>
       <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
       <slot name="content"></slot>
@@ -1843,7 +1912,7 @@ const _Accordion = class _Accordion extends PxElement {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "variant":
-          this.updateAttribute(attrName, oldValue, newValue, variantValues$2);
+          this.updateAttribute(attrName, oldValue, newValue, variantValues$5);
           break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -1859,7 +1928,9 @@ const _Accordion = class _Accordion extends PxElement {
       this.$el.classList.toggle(`${newValue}`);
     }
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
     }
   }
   checkName(values, value) {
@@ -1869,169 +1940,21 @@ const _Accordion = class _Accordion extends PxElement {
 _Accordion.nativeName = "details";
 let Accordion = _Accordion;
 customElements.define("px-accordion", Accordion);
-const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:700;gap:var(--px-spacing-between-icon-horizontal-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent;--slotted-icon-size: var(--px-icon-size-xs-mobile)}.btn,.btn *{box-sizing:border-box}.btn:hover:not([disabled],[aria-disabled=true],.loading),.btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);outline:0}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-mobile)}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-default);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),.btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-xs)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),.btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-xs)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-2xs-mobile);border-radius:50%;background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading){gap:0;padding:0 .5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(*),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(*){background:transparent}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){margin:0 -8px}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]){margin:0 0 0 -.5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]){margin:0 -.5rem 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:50%;background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading),.btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-inverted);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action)}.btn.secondary{min-height:var(--px-size-action)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
-const linkCss = 'a,.link,::slotted(a){font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,a:focus,.link:hover,.link:focus{color:var(--px-color-txt-hover-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(*),.link ::slotted(*){display:inline-block}::slotted(a:hover),::slotted(a:focus){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-main-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) a:focus,:host([inverted]) .link:hover,:host([inverted]) .link:focus{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover),:host([inverted]) ::slotted(a:focus){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-main-inverted)}@media only screen and (min-width: 64rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 90rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}';
-const styles$9 = ".patch{display:inline-block;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0;font-family:Proximus,Verdana,Helvetica,sans-serif;font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-inverted-primary-default)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 640px){.patch{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-inverted-primary-default)}.bottom-right{border-radius:var(--px-radius-l) var(--px-radius-l) 0 var(--px-radius-l)}.bottom-left{border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-inverted-inverted)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-inverted)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}";
-const buttonStyles$1 = new CSSStyleSheet();
-const linkStyles$2 = new CSSStyleSheet();
-const patchStyles = new CSSStyleSheet();
-buttonStyles$1.replaceSync(buttonCss);
-linkStyles$2.replaceSync(linkCss);
-patchStyles.replaceSync(styles$9);
-const _Button = class _Button extends PxElement {
-  constructor(semanticTokensStylesheet) {
-    super(semanticTokensStylesheet, buttonStyles$1, linkStyles$2, patchStyles);
-    this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
-    const $root = document.createElement(this.nativeName);
-    $root.classList.add("btn");
-    $root.innerHTML = this.template();
-    this.shadowRoot.appendChild($root);
+const imgCss = "img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}@media only screen and (max-width: 40em){.mo,.m,.l{display:none}}@media only screen and (min-width: 40.0625em) and (max-width: 64em){.l{display:none}}@media only screen and (min-width: 40.0625em){.so{display:none}}@media only screen and (min-width: 64.0625em){.so,.mo{display:none}}";
+const styleSheet$7 = new CSSStyleSheet();
+styleSheet$7.replaceSync(imgCss);
+class AbstractImage extends PxElement {
+  constructor() {
+    super(styleSheet$7);
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "variant", "state", "extended", "loading", "shape", "inverted"];
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(value) {
-    this.setAttribute("variant", value);
-  }
-  get state() {
-    return this.getAttribute("state");
+    return [...super.observedAttributes, "showfor"];
   }
-  set state(value) {
-    this.setAttribute("state", value);
+  get showfor() {
+    return this.getAttribute("showfor");
   }
-  get extended() {
-    return this.getAttribute("extended");
-  }
-  set extended(value) {
-    this.setAttribute("extended", value);
-  }
-  get loading() {
-    return this.getAttribute("loading");
-  }
-  set loading(value) {
-    this.setAttribute("loading", value);
-  }
-  get shape() {
-    return this.getAttribute("shape");
-  }
-  set shape(value) {
-    this.setAttribute("shape", value);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "variant":
-          this.updateVariant(oldValue, newValue);
-          break;
-        case "state":
-          this.updateState(oldValue, newValue);
-          break;
-        case "extended":
-          this.updateExtended();
-          break;
-        case "loading":
-          this.updateLoading();
-          break;
-        case "shape":
-          this.updateShape(oldValue, newValue);
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
-  }
-  checkName(values, value) {
-    if (values.includes(value)) {
-      return true;
-    }
-    return false;
-  }
-  checkClass(value) {
-    if (value.startsWith("patch-")) {
-      const splittedValue = value.split(/-(.*)/s);
-      for (const classVar of splittedValue) {
-        if (classVar != "") {
-          this.$el.classList.toggle(classVar);
-        }
-      }
-    } else {
-      this.$el.classList.toggle(value);
-    }
-  }
-  _toggleClass(oldValue, newValue) {
-    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.checkClass(oldValue);
-    }
-    if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.checkClass(newValue);
-    }
-  }
-  updateVariant(oldValue, newValue) {
-    const values = ["", "default", "secondary", "tertiary", "link", "patch", "patch-info", "patch-black-friday", "patch-eco"];
-    if (newValue === "link") {
-      this.$el.classList.remove("btn");
-    } else {
-      this.$el.classList.add("btn");
-    }
-    this._toggleClass(oldValue, newValue);
-    if (!this.checkName(values, newValue)) {
-      console.error(`Bad "variant" value for ${this.$el}`);
-    }
-  }
-  updateState(oldValue, newValue) {
-    const values = ["", "default", "success", "error"];
-    this._toggleClass(oldValue, newValue);
-    if (!this.checkName(values, newValue)) {
-      console.error(`Bad "sate" value for ${this.$el}`);
-    }
-  }
-  updateExtended() {
-    this.$el.classList.toggle("extended");
-  }
-  updateLoading() {
-    this.$el.classList.toggle("loading");
-  }
-  updateShape(oldValue, newValue) {
-    const values = ["", "default", "bottom-right", "bottom-left", "alternative"];
-    this._toggleClass(oldValue, newValue);
-    if (!this.checkName(values, newValue)) {
-      console.error(`Bad "shape" value for ${this.$el}`);
-    }
-  }
-};
-_Button.nativeName = "button";
-let Button = _Button;
-class ProximusButton extends Button {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
-}
-customElements.define("px-button", ProximusButton);
-const imgCss = "img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}@media only screen and (max-width: 40em){.mo,.m,.l{display:none}}@media only screen and (min-width: 40.0625em) and (max-width: 64em){.l{display:none}}@media only screen and (min-width: 40.0625em){.so{display:none}}@media only screen and (min-width: 64.0625em){.so,.mo{display:none}}";
-const styleSheet$8 = new CSSStyleSheet();
-styleSheet$8.replaceSync(imgCss);
-class AbstractImage extends PxElement {
-  constructor() {
-    super(styleSheet$8);
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "showfor"];
-  }
-  get showfor() {
-    return this.getAttribute("showfor");
-  }
-  set showfor(value) {
-    this.setAttribute("showfor", value);
+  set showfor(value) {
+    this.setAttribute("showfor", value);
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -2210,24 +2133,19 @@ const _Picture = class _Picture extends AbstractImage {
 _Picture.nativeName = "picture";
 let Picture = _Picture;
 customElements.define("px-picture", Picture);
-const styleSheet$7 = new CSSStyleSheet();
-styleSheet$7.replaceSync(styles$9);
+const styles$8 = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-inverted-inverted)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-inverted)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}";
+const styleSheet$6 = new CSSStyleSheet();
+styleSheet$6.replaceSync(styles$8);
+const variantValues$4 = [
+  "",
+  "default",
+  "info",
+  "black-friday",
+  "eco",
+  "greyed"
+];
+const shapeValues$1 = ["", "default", "bottom-right", "bottom-left"];
 class Patch extends HTMLElement {
-  constructor(semanticTokensStylesheet) {
-    super();
-    this.variantValues = [
-      "",
-      "default",
-      "info",
-      "black-friday",
-      "eco",
-      "greyed"
-    ];
-    this.shapeValues = ["", "default", "bottom-right", "bottom-left"];
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$7];
-  }
   template() {
     return `
         <div class="patch">
@@ -2235,6 +2153,12 @@ class Patch extends HTMLElement {
         </div>
     `;
   }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$6];
+  }
   static get observedAttributes() {
     return ["variant", "shape", "inverted"];
   }
@@ -2250,11 +2174,6 @@ class Patch extends HTMLElement {
       }
     }
   }
-  connectedCallback() {
-    replayAttributes(this, Patch.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
-  }
   _toggleClass(oldValue, newValue) {
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
       this.$el.classList.toggle(oldValue);
@@ -2268,13 +2187,13 @@ class Patch extends HTMLElement {
   }
   updateVariant(oldValue, newValue) {
     this._toggleClass(oldValue, newValue);
-    if (!this.checkName(this.variantValues, newValue)) {
+    if (!this.checkName(variantValues$4, newValue)) {
       console.error(`Bad "variant" value for patch`);
     }
   }
   updateShape(oldValue, newValue) {
     this._toggleClass(oldValue, newValue);
-    if (!this.checkName(this.shapeValues, newValue)) {
+    if (!this.checkName(shapeValues$1, newValue)) {
       console.error(`Bad "shape" value for patch`);
     }
   }
@@ -2300,21 +2219,25 @@ class Patch extends HTMLElement {
     this.setAttribute("inverted", value);
   }
 }
-class ProximusPatch extends Patch {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
+if (!customElements.get("px-patch")) {
+  customElements.define("px-patch", Patch);
 }
-customElements.define("px-patch", ProximusPatch);
-const css$1 = '.price{--price-s: var(--px-text-size-l-mobile);--price-m: var(--px-text-size-xl-mobile);--price-l: var(--px-text-size-3xl-mobile);font-family:Proximus,Verdana,Helvetica,sans-serif;white-space:nowrap;font-weight:700;color:var(--px-color-txt-primary-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-l-tablet);--price-m: var(--px-text-size-xl-tablet);--price-l: var(--px-text-size-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-l-desktop);--price-m: var(--px-text-size-xl-desktop);--price-l: var(--px-text-size-3xl-desktop)}}.promo,.free{color:var(--px-color-txt-promo-default)}.neutral{color:var(--px-color-txt-body-default)}.exceeding{color:var(--px-color-txt-status-error-default)}.disabled{color:var(--px-color-txt-disabled-default)}::slotted(s){color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .price{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-txt-body-inverted)}:host([inverted]) .exceeding{color:var(--px-color-txt-status-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(s){color:var(--px-color-txt-body-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}';
-const styles$8 = new CSSStyleSheet();
-styles$8.replaceSync(css$1);
-const variantValues$1 = ["default", "promo", "free", "neutral", "exceeding", "disabled"];
+const css$1 = '.price{--price-s: var(--px-text-size-l-mobile);--price-m: var(--px-text-size-xl-mobile);--price-l: var(--px-text-size-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-color-txt-primary-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-l-tablet);--price-m: var(--px-text-size-xl-tablet);--price-l: var(--px-text-size-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-l-desktop);--price-m: var(--px-text-size-xl-desktop);--price-l: var(--px-text-size-3xl-desktop)}}.promo,.free{color:var(--px-color-txt-promo-default)}.neutral{color:var(--px-color-txt-body-default)}.exceeding{color:var(--px-color-txt-error-default)}.disabled{color:var(--px-color-txt-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-base-desktop)}}::slotted([slot="newpromoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-txt-body-inverted)}:host([inverted]) .exceeding{color:var(--px-color-txt-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(s){color:var(--px-color-txt-body-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}';
+const styles$7 = new CSSStyleSheet();
+styles$7.replaceSync(css$1);
+const variantValues$3 = [
+  "default",
+  "promo",
+  "free",
+  "neutral",
+  "exceeding",
+  "disabled"
+];
 const sizeValues$1 = ["", "s", "m", "l"];
 const _Price = class _Price extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, styles$8);
-    this.template = () => `<span class="price"><slot name="oldprice"></slot><slot></slot></span>`;
+    super(styles$7);
+    this.template = () => `<span class="price"><slot name="oldprice"></slot><slot name="newpromoprice"></slot><slot></slot></span>`;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
@@ -2345,7 +2268,7 @@ const _Price = class _Price extends PxElement {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "variant":
-          this.updateAttribute(attrName, oldValue, newValue, variantValues$1);
+          this.updateAttribute(attrName, oldValue, newValue, variantValues$3);
           break;
         case "size":
           this.updateAttribute(attrName, oldValue, newValue, sizeValues$1);
@@ -2370,18 +2293,28 @@ const _Price = class _Price extends PxElement {
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     this.toggleClass(oldValue, newValue);
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
     }
   }
   buildPrice() {
     let price = this.innerHTML.trim();
-    const oldPrice = this.querySelector("s");
+    const oldPrice = this.querySelector('[slot="oldprice"]');
     let strikethroughPrice = "";
-    if (oldPrice && oldPrice.innerText !== "") {
-      oldPrice.innerText = "€" + oldPrice.innerText;
-      price = oldPrice.nextSibling.textContent;
+    let newPriceSrText = "";
+    let newPriceSrSpan;
+    if (oldPrice && oldPrice.innerHTML !== "") {
+      oldPrice.innerHTML = "€" + oldPrice.innerHTML;
+      newPriceSrSpan = this.querySelector('[slot="newpromoprice"]');
+      if (newPriceSrSpan) {
+        newPriceSrText = newPriceSrSpan.outerHTML;
+        price = newPriceSrSpan.nextSibling.textContent;
+      } else {
+        price = oldPrice.nextSibling.textContent;
+      }
       strikethroughPrice = oldPrice.outerHTML + " ";
-    } else if (oldPrice && oldPrice.innerText === "") {
+    } else if (oldPrice && oldPrice.innerHTML === "") {
       price = oldPrice.nextSibling.textContent;
     }
     const isNumeric = /^[\d|.|,]+/.test(price);
@@ -2394,21 +2327,21 @@ const _Price = class _Price extends PxElement {
     const separator = price.charAt(price.length - 3);
     if (separator === "." || separator === ",") {
       const [nbrPart, decPart] = price.split(separator);
-      this.innerHTML = `${strikethroughPrice}${euro}${nbrPart}<span class="decimals">${separator}${decPart}</span>`;
+      this.innerHTML = `${strikethroughPrice}${newPriceSrText}${euro}${nbrPart}<span class="decimals">${separator}${decPart}</span>`;
     } else {
-      this.innerHTML = `${strikethroughPrice}${euro}${price}`;
+      this.innerHTML = `${strikethroughPrice}${newPriceSrText}${euro}${price}`;
     }
   }
 };
 _Price.nativeName = "span";
 let Price = _Price;
 customElements.define("px-price", Price);
-const css = ":host{box-sizing:border-box}.ribbon{font-family:Proximus,Verdana,Helvetica,sans-serif;font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);white-space:nowrap;text-align:left;color:var(--px-color-txt-body-inverted);background-color:var(--px-color-bg-container-rich-default);padding:var(--px-padding-xs) var(--px-padding-s);border-radius:var(--px-radius-s) var(--px-radius-s) 0 0}.ribbon,.ribbon *{box-sizing:border-box}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}";
-const styles$7 = new CSSStyleSheet();
-styles$7.replaceSync(css);
+const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);white-space:nowrap;text-align:left;color:var(--px-color-txt-body-inverted);background-color:var(--px-color-bg-container-rich-default);padding:var(--px-padding-xs) var(--px-padding-s);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}.ribbon,.ribbon *{box-sizing:border-box}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-base-desktop)}}";
+const styles$6 = new CSSStyleSheet();
+styles$6.replaceSync(css);
 const _Ribbon = class _Ribbon extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, styles$7);
+    super(styles$6);
     this.template = () => `<div class="ribbon"><slot></slot></div>`;
     this.shadowRoot.innerHTML = this.template();
   }
@@ -2416,20 +2349,41 @@ const _Ribbon = class _Ribbon extends PxElement {
 _Ribbon.nativeName = "div";
 let Ribbon = _Ribbon;
 customElements.define("px-ribbon", Ribbon);
-const styles$6 = "hr{--separator-size: 2px;clear:both;margin:0;border-width:var(--separator-size) 0 0;border-style:solid;border-color:var(--px-color-border-main-default)}.vertical{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}.none{--separator-size: 0}.s{--separator-size: 1px}.m{--separator-size: 2px}.l{--separator-size: 3px}.contrasted{border-color:var(--px-color-border-contrasted-default)}.action-hover{border-color:var(--px-color-border-action-hover-default)}.action-active{border-color:var(--px-color-border-action-active-default)}.none{border-color:var(--px-color-border-none-default)}.success{border-color:var(--px-color-border-success-default)}.error{border-color:var(--px-color-border-error-default)}.warning{border-color:var(--px-color-border-warning-default)}.unlimited{border-color:var(--px-color-border-unlimited-default)}:host([inverted]) hr{border-color:var(--px-color-border-main-inverted)}:host([inverted]) .contrasted{border-color:var(--px-color-border-contrasted-inverted)}:host([inverted]) .action-hover{border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .action-active{border-color:var(--px-color-border-action-active-inverted)}:host([inverted]) .none{border-color:var(--px-color-border-none-inverted)}:host([inverted]) .success{border-color:var(--px-color-border-success-inverted)}:host([inverted]) .error{border-color:var(--px-color-border-error-inverted)}:host([inverted]) .warning{border-color:var(--px-color-border-warning-inverted)}:host([inverted]) .unlimited{border-color:var(--px-color-border-unlimited-inverted)}";
-const styleSheet$6 = new CSSStyleSheet();
-styleSheet$6.replaceSync(styles$6);
-const directionValues = ["", "default", "vertical"];
+const styles$5 = ".separator{--separator-size: var(--px-border-m);--px-separator-color: var(--px-color-border-main-default);--separator-direction-mobile-border-width: var(--separator-size) 0 0;--separator-direction-mobile-width: initial;--separator-direction-mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var(--px-separator-color);border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_horizontal{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}@media only screen and (min-width: 0px) and (max-width: 767px){.separator_direction_horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 768px) and (max-width: 1024px){.separator_direction_horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px) and (max-width: 1440px){.separator_direction_horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator_direction_horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}:host([inverted]) .separator{--px-separator-color: var(--px-color-border-main-inverted)}";
+const styleSheet$5 = new CSSStyleSheet();
+styleSheet$5.replaceSync(styles$5);
+const directionValues = ["", "default", "horizontal", "vertical"];
 const sizeValues = ["", "none", "s", "m", "l"];
-const colorValues = ["", "contrasted", "action-hover", "action-active", "none", "success", "error", "warning", "unlimited"];
+const colorValues = [
+  "",
+  "contrasted",
+  "action-hover",
+  "action-active",
+  "none",
+  "success",
+  "error",
+  "warning",
+  "unlimited"
+];
 const _Separator = class _Separator extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, styleSheet$6);
+    super(styleSheet$5);
     const $root = document.createElement(this.nativeName);
+    $root.classList.add("separator");
     this.shadowRoot.appendChild($root);
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "direction", "size", "color", "inverted"];
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction-mobile",
+      "direction-tablet",
+      "direction-laptop",
+      "direction-desktop",
+      "size",
+      "color",
+      "inverted"
+    ];
   }
   get direction() {
     return this.getAttribute("direction");
@@ -2437,6 +2391,30 @@ const _Separator = class _Separator extends PxElement {
   set direction(value) {
     this.setAttribute("direction", value);
   }
+  get directionMobile() {
+    return this.getAttribute("direction-mobile");
+  }
+  set directionMobile(value) {
+    this.setAttribute("direction-mobile", value);
+  }
+  get directionTablet() {
+    return this.getAttribute("direction-tablet");
+  }
+  set directionTablet(value) {
+    this.setAttribute("direction-tablet", value);
+  }
+  get directionLaptop() {
+    return this.getAttribute("direction-laptop");
+  }
+  set directionLaptop(value) {
+    this.setAttribute("direction-laptop", value);
+  }
+  get directionDesktop() {
+    return this.getAttribute("direction-desktop");
+  }
+  set directionDesktop(value) {
+    this.setAttribute("direction-desktop", value);
+  }
   get size() {
     return this.getAttribute("size");
   }
@@ -2459,13 +2437,17 @@ const _Separator = class _Separator extends PxElement {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "direction":
-          this.updateAttribute(attrName, oldValue, newValue, directionValues);
+        case "direction-mobile":
+        case "direction-tablet":
+        case "direction-laptop":
+        case "direction-desktop":
+          this.updateDirection(attrName, newValue);
           break;
         case "size":
-          this.updateAttribute(attrName, oldValue, newValue, sizeValues);
+          this.updateSize(newValue, sizeValues);
           break;
         case "color":
-          this.updateAttribute(attrName, oldValue, newValue, colorValues);
+          this.updateColor(newValue, colorValues);
           break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -2473,39 +2455,68 @@ const _Separator = class _Separator extends PxElement {
       }
     }
   }
-  toggleClass(oldValue, newValue) {
-    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.$el.classList.toggle(oldValue);
-    }
-    if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.$el.classList.toggle(newValue);
-    }
-  }
   checkName(values, value) {
     return values.includes(value);
   }
-  updateAttribute(attrName, oldValue, newValue, attrValue) {
-    this.toggleClass(oldValue, newValue);
+  updateSize(newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad size value for`, this.$el);
+      this.$el.style.setProperty("--separator-size", "var(--px-border-m)");
+    } else {
+      this.$el.style.setProperty(
+        "--separator-size",
+        `var(--px-border-${newValue})`
+      );
+    }
+  }
+  updateColor(newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad color value for`, this.$el);
+      this.$el.style.setProperty(
+        "--px-separator-color",
+        `var(--px-color-border-main-${this.inverted === null ? "default" : "inverted"})`
+      );
+    } else {
+      this.$el.style.setProperty(
+        "--px-separator-color",
+        `var(--px-color-border-${newValue}-${this.inverted === null ? "default" : "inverted"})`
+      );
+    }
+  }
+  updateDirection(attrName, newValue) {
+    if (!this.checkName(directionValues, newValue)) {
       console.error(`Bad "${attrName}" value for`, this.$el);
+    } else {
+      if (attrName === "direction") {
+        this.$el.classList.add(`separator_direction_${newValue}`);
+      } else {
+        const classList = this.$el.classList;
+        const mediaquery = attrName.split("-")[1];
+        for (let i = 0; i < classList.length; i++) {
+          if (classList[i].includes(mediaquery)) {
+            this.$el.classList.replace(
+              classList[i],
+              `separator_direction_${newValue}--${mediaquery}`
+            );
+          } else {
+            this.$el.classList.add(
+              `separator_direction_${newValue}--${mediaquery}`
+            );
+          }
+        }
+      }
     }
   }
 };
 _Separator.nativeName = "hr";
 let Separator = _Separator;
 customElements.define("px-separator", Separator);
-const styles$5 = '.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-s-mobile);font-weight:400;gap:var(--px-spacing-text-to-icon-compact-horizontal);background-color:var(--px-color-bg-action-secondary-default);color:var(--px-color-txt-primary-default);padding:var(--px-padding-2xs) var(--px-padding-xs);border:var(--px-border-s) solid transparent;border-radius:var(--px-radius-s);--slotted-icon-size: var(--px-icon-size-xs-mobile)}.tag,.tag *{box-sizing:border-box}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-mobile);line-height:var(--px-icon-size-xs-mobile)}.light{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-body-default)}.outline{background-color:transparent;color:var(--px-color-txt-primary-default);border-color:var(--px-color-border-action-hover-default)}.pill{border-radius:var(--px-radius-pill)}:host([inverted]) .tag{background-color:var(--px-color-bg-action-secondary-inverted);color:var(--px-color-txt-primary-inverted)}:host([inverted]) .light{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-body-inverted)}:host([inverted]) .outline{background-color:transparent;color:var(--px-color-txt-primary-inverted);border-color:var(--px-color-border-action-hover-inverted)}@media only screen and (min-width: 64rem){.tag{font-size:var(--px-text-size-s-tablet);line-height:var(--px-line-height-s-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-tablet);line-height:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 90rem){.tag{font-size:var(--px-text-size-s-desktop);line-height:var(--px-line-height-s-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-desktop);line-height:var(--px-icon-size-xs-desktop)}}';
-const styleSheet$5 = new CSSStyleSheet();
-styleSheet$5.replaceSync(styles$5);
+const styles$4 = '.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-m);font-weight:400;gap:var(--px-spacing-text-to-icon-compact-horizontal);background-color:var(--px-color-bg-action-secondary-default);color:var(--px-color-txt-primary-default);padding:var(--px-padding-2xs) var(--px-padding-xs);border:var(--px-border-s) solid transparent;border-radius:var(--px-radius-main);--slotted-icon-size: var(--px-icon-size-xs-mobile)}.tag,.tag *{box-sizing:border-box}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-mobile)}.light{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-body-default)}.outline{background-color:transparent;color:var(--px-color-txt-primary-default);border-color:var(--px-color-border-action-hover-default)}.pill{border-radius:var(--px-radius-pill)}:host([inverted]) .tag{background-color:var(--px-color-bg-action-secondary-inverted);color:var(--px-color-txt-primary-inverted)}:host([inverted]) .light{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-body-inverted)}:host([inverted]) .outline{background-color:transparent;color:var(--px-color-txt-primary-inverted);border-color:var(--px-color-border-action-hover-inverted)}@media only screen and (min-width: 64rem){.tag{font-size:var(--px-text-size-s-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 90rem){.tag{font-size:var(--px-text-size-s-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-desktop)}}';
+const styleSheet$4 = new CSSStyleSheet();
+styleSheet$4.replaceSync(styles$4);
+const variantValues$2 = ["", "default", "light", "outline"];
+const shapeValues = ["", "default", "pill"];
 class Tag extends HTMLElement {
-  constructor(semanticTokensStylesheet) {
-    super();
-    this.variantValues = ["", "default", "light", "outline"];
-    this.shapeValues = ["", "default", "pill"];
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$5];
-  }
   template() {
     return `
         <div class="tag">
@@ -2514,6 +2525,12 @@ class Tag extends HTMLElement {
         </div>
     `;
   }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
+  }
   static get observedAttributes() {
     return ["variant", "shape", "inverted"];
   }
@@ -2563,28 +2580,25 @@ class Tag extends HTMLElement {
   }
   updateVariant(oldValue, newValue) {
     this._toggleClass(oldValue, newValue);
-    if (!this.checkName(this.variantValues, newValue)) {
+    if (!this.checkName(variantValues$2, newValue)) {
       console.error(`Bad "variant" value for tag`);
     }
   }
   updateShape(oldValue, newValue) {
     this._toggleClass(oldValue, newValue);
-    if (!this.checkName(this.shapeValues, newValue)) {
+    if (!this.checkName(shapeValues, newValue)) {
       console.error(`Bad "shape" value for tag`);
     }
   }
 }
-class ProximusTag extends Tag {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
+if (!customElements.get("px-tag")) {
+  customElements.define("px-tag", Tag);
 }
-customElements.define("px-tag", ProximusTag);
-const styles$4 = '*{font-family:Proximus,Verdana,Helvetica,sans-serif}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-component-default-vertical)}#panels{width:100%}div[role=tablist]{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:80vw;box-sizing:border-box}div[role=tablist] ::slotted(px-tab){background-color:var(--px-color-bg-container-weak-default)}div[role=tablist] ::slotted(px-tab[inverted=""]){background-color:var(--px-color-bg-container-weak-inverted)}div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-color-bg-action-active-default);padding-block:var(--px-padding-m);border-radius:var(--px-radius-s)!important}div[role=tablist] ::slotted(px-tab[selected=""][inverted=""]){background-color:var(--px-color-bg-action-active-inverted)}div[role=tablist] ::slotted(px-tab:first-child){border-radius:var(--px-radius-s) 0 0 var(--px-radius-s)}div[role=tablist] ::slotted(px-tab:last-of-type){border-radius:0 var(--px-radius-s) var(--px-radius-s) 0}div[role=tablist]::-webkit-scrollbar{display:none}button[role=tab]{background:none;border:none;padding:0;margin:0;cursor:pointer;height:inherit;width:inherit;padding:var(--px-padding-s);font-size:var(--px-text-size-base-mobile);font-weight:700;text-wrap:nowrap;color:var(--px-color-txt-body-default);outline:none}button[role=tab][inverted=""]{color:var(--px-color-txt-body-inverted)}@media screen and (min-width: 768px){button[role=tab]{font-size:var(--px-text-size-base-tablet)}}@media screen and (min-width: 1025px){button[role=tab]{font-size:var(--px-text-size-base-laptop)}}@media screen and (min-width: 1441px){button[role=tab]{font-size:var(--px-text-size-base-desktop)}}button[aria-selected=""]{padding-block:0;cursor:auto;color:var(--px-color-txt-primary-inverted)}button[aria-selected=""][inverted=""]{color:var(--px-color-txt-primary-default)}';
-const styleSheet$4 = new CSSStyleSheet();
-styleSheet$4.replaceSync(styles$4);
+const styles$3 = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-component-default-vertical)}#panels{width:100%}div[role=tablist]{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:80vw;box-sizing:border-box}div[role=tablist] ::slotted(px-tab){background-color:var(--px-color-bg-container-weak-default)}div[role=tablist] ::slotted(px-tab[inverted=""]){background-color:var(--px-color-bg-container-weak-inverted)}div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-color-bg-action-active-default);padding-block:var(--px-padding-m);border-radius:var(--px-radius-main)!important}div[role=tablist] ::slotted(px-tab[selected=""][inverted=""]){background-color:var(--px-color-bg-action-active-inverted)}div[role=tablist] ::slotted(px-tab:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}div[role=tablist] ::slotted(px-tab:last-of-type){border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}div[role=tablist]::-webkit-scrollbar{display:none}button[role=tab]{background:none;border:none;padding:0;margin:0;cursor:pointer;height:inherit;width:inherit;padding:var(--px-padding-s);font-size:var(--px-text-size-base-mobile);font-weight:700;text-wrap:nowrap;color:var(--px-color-txt-body-default);outline:none}button[role=tab][inverted=""]{color:var(--px-color-txt-body-inverted)}@media screen and (min-width: 768px){button[role=tab]{font-size:var(--px-text-size-base-tablet)}}@media screen and (min-width: 1025px){button[role=tab]{font-size:var(--px-text-size-base-laptop)}}@media screen and (min-width: 1441px){button[role=tab]{font-size:var(--px-text-size-base-desktop)}}button[aria-selected=""]{padding-block:0;cursor:auto;color:var(--px-color-txt-primary-inverted)}button[aria-selected=""][inverted=""]{color:var(--px-color-txt-primary-default)}';
+const styleSheet$3 = new CSSStyleSheet();
+styleSheet$3.replaceSync(styles$3);
 class Tabs extends HTMLElement {
-  constructor(semanticStyleSheet) {
+  constructor() {
     super();
     this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`;
     this.template = () => `
@@ -2602,7 +2616,7 @@ class Tabs extends HTMLElement {
       this._label = this.getAttribute("label");
     }
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
   }
   static get observedAttributes() {
     return ["label", "inverted"];
@@ -2613,9 +2627,6 @@ class Tabs extends HTMLElement {
     }
   }
   connectedCallback() {
-    replayAttributes(this, Tabs.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     this.addEventListener("click", (event) => {
       var _a;
       if ((_a = event.target.localName) == null ? void 0 : _a.endsWith("-tab")) {
@@ -2683,7 +2694,7 @@ class Tabs extends HTMLElement {
   }
 }
 class Tab extends HTMLElement {
-  constructor(semanticStyleSheet) {
+  constructor() {
     super();
     this.template = () => `
     <button role="tab" aria-selected="false" type="button" tabindex="-1">
@@ -2692,15 +2703,12 @@ class Tab extends HTMLElement {
   `;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
   }
   static get observedAttributes() {
     return ["selected", "for", "name"];
   }
   connectedCallback() {
-    replayAttributes(this, Tab.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     if (!this.name) {
       console.error("Tab needs a name attribute");
     }
@@ -2758,7 +2766,7 @@ class Tab extends HTMLElement {
   }
 }
 class TabPanel extends HTMLElement {
-  constructor(semanticStyleSheet) {
+  constructor() {
     super();
     this.template = () => `
     <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
@@ -2767,7 +2775,7 @@ class TabPanel extends HTMLElement {
   `;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
   }
   static get observedAttributes() {
     return ["name"];
@@ -2821,7 +2829,7 @@ class TabPanel extends HTMLElement {
 }
 class PxTabs extends Tabs {
   constructor() {
-    super(proximusSemanticStyleSheet);
+    super();
     this.querySelectorAll("px-tab").forEach((tab) => {
       tab.setAttribute("slot", "tabs");
     });
@@ -2832,7 +2840,7 @@ if (!customElements.get("px-tabs")) {
 }
 class PxTab extends Tab {
   constructor() {
-    super(proximusSemanticStyleSheet);
+    super();
   }
 }
 if (!customElements.get("px-tab")) {
@@ -2840,15 +2848,15 @@ if (!customElements.get("px-tab")) {
 }
 class PxTabPanel extends TabPanel {
   constructor() {
-    super(proximusSemanticStyleSheet);
+    super();
   }
 }
 if (!customElements.get("px-tab-panel")) {
   customElements.define("px-tab-panel", PxTabPanel);
 }
-const styles$3 = ".timeline{list-style:none;margin:0;padding:0}";
-const styleSheet$3 = new CSSStyleSheet();
-styleSheet$3.replaceSync(styles$3);
+const styles$2 = ".timeline{list-style:none;margin:0;padding:0}";
+const styleSheet$2 = new CSSStyleSheet();
+styleSheet$2.replaceSync(styles$2);
 class Timeline extends HTMLElement {
   template() {
     return `
@@ -2857,19 +2865,16 @@ class Timeline extends HTMLElement {
         </ol>
     `;
   }
-  constructor(semanticTokensStylesheet) {
+  constructor() {
     super();
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$3];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$2];
   }
   static get observedAttributes() {
     return ["inverted"];
   }
   connectedCallback() {
-    replayAttributes(this, Timeline.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     this.configureChildren();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2903,15 +2908,12 @@ class Timeline extends HTMLElement {
     this.setAttribute("inverted", value);
   }
 }
-class ProximusTimeline extends Timeline {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
+if (!customElements.get("px-timeline")) {
+  customElements.define("px-timeline", Timeline);
 }
-customElements.define("px-timeline", ProximusTimeline);
-const styles$2 = '.timeline-item{display:flex;gap:var(--px-spacing-text-to-icon-horizontal);font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:700;font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-s-mobile);color:var(--px-color-icon-body-default);border-radius:var(--px-radius-pill);background:var(--px-color-bg-container-strong-default)}.content-area{margin-bottom:var(--px-spacing-component-default-vertical)}.content-area ::slotted([slot="title"]){font-weight:700;color:var(--px-color-txt-body-default)}.content-area ::slotted([slot="content"]){font-weight:400;color:var(--px-color-txt-details-default);margin-top:var(--px-spacing-under-text-vertical)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator-area .indicator{color:var(--px-color-icon-body-inverted);background:var(--px-color-bg-container-strong-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-txt-body-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-txt-details-inverted)}@media only screen and (min-width: 64rem){.timeline-item{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-s-tablet);line-height:var(--px-line-height-s-tablet)}}@media only screen and (min-width: 90rem){.timeline-item{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-s-desktop);line-height:var(--px-line-height-s-desktop)}}';
-const styleSheet$2 = new CSSStyleSheet();
-styleSheet$2.replaceSync(styles$2);
+const styles$1 = '.timeline-item{display:flex;gap:var(--px-spacing-text-to-icon-horizontal);font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:700;font-size:var(--px-text-size-s-mobile);color:var(--px-color-icon-body-default);border-radius:var(--px-radius-pill);background:var(--px-color-bg-container-weak-default)}.content-area{margin-bottom:var(--px-spacing-component-default-vertical)}.content-area ::slotted([slot="title"]){font-weight:700;color:var(--px-color-txt-body-default)}.content-area ::slotted([slot="content"]){font-weight:400;color:var(--px-color-txt-details-default);margin-top:var(--px-spacing-under-text-vertical)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator-area .indicator{color:var(--px-color-icon-body-inverted);background:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-txt-body-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-txt-details-inverted)}@media only screen and (min-width: 64rem){.timeline-item{font-size:var(--px-text-size-base-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-s-tablet)}}@media only screen and (min-width: 90rem){.timeline-item{font-size:var(--px-text-size-base-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-s-desktop)}}';
+const styleSheet$1 = new CSSStyleSheet();
+styleSheet$1.replaceSync(styles$1);
 let item = "1";
 class TimelineItem extends HTMLElement {
   template() {
@@ -2927,23 +2929,15 @@ class TimelineItem extends HTMLElement {
         </li>
     `;
   }
-  constructor(semanticTokensStylesheet) {
+  constructor() {
     super();
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [
-      semanticTokensStylesheet,
-      styleSheet$2
-    ];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
   }
   static get observedAttributes() {
     return ["inverted", "lastchild", "item"];
   }
-  connectedCallback() {
-    replayAttributes(this, TimelineItem.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
-  }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
@@ -2988,16 +2982,13 @@ class TimelineItem extends HTMLElement {
     this.setAttribute("item", value);
   }
 }
-class ProximusTimelineItem extends TimelineItem {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
+if (!customElements.get("px-timeline-item")) {
+  customElements.define("px-timeline-item", TimelineItem);
 }
-customElements.define("px-timeline-item", ProximusTimelineItem);
-const styles$1 = "px-container{width:1000px;display:block;border:0;border-radius:var(--px-radius-s)}@media screen and (max-width: 1025px){px-container{width:700px}}@media screen and (max-width: 640px){px-container{width:295px}}";
+const styles = "px-container{width:1000px;display:block;border:0;border-radius:var(--px-radius-main)}@media screen and (max-width: 1025px){px-container{width:700px}}@media screen and (max-width: 640px){px-container{width:295px}}";
 const lightStyles$1 = ".lavender-blurred-modal-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;z-index:999;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}";
-const styleSheet$1 = new CSSStyleSheet();
-styleSheet$1.replaceSync(styles$1);
+const styleSheet = new CSSStyleSheet();
+styleSheet.replaceSync(styles);
 addGlobalStylesheet(lightStyles$1);
 class Modal extends HTMLElement {
   constructor() {
@@ -3018,11 +3009,13 @@ class Modal extends HTMLElement {
   </px-container>`;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template;
-    this.shadowRoot.adoptedStyleSheets = [proximusSemanticStyleSheet, styleSheet$1];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet];
   }
   connectedCallback() {
     var _a;
-    const targetButtonList = document.querySelectorAll(`px-button[popovertarget="${this.getAttribute("id")}"]`);
+    const targetButtonList = document.querySelectorAll(
+      `px-button[popovertarget="${this.getAttribute("id")}"]`
+    );
     targetButtonList.forEach((targetButton) => {
       targetButton.onclick = (event) => {
         var _a2;
@@ -3047,7 +3040,9 @@ class Modal extends HTMLElement {
   displayBlurredBackground() {
     this.blurredBackground = document.createElement("div");
     this.blurredBackground.id = "popover-background";
-    this.blurredBackground.classList.toggle("lavender-blurred-modal-background");
+    this.blurredBackground.classList.toggle(
+      "lavender-blurred-modal-background"
+    );
     this.blurredBackground.addEventListener("click", (event) => {
       if (this.open && !this.contains(event.target)) {
         this._hidePopover();
@@ -3068,14 +3063,14 @@ class Modal extends HTMLElement {
 if (!customElements.get("px-modal")) {
   customElements.define("px-modal", Modal);
 }
-const spanCss = "span,::slotted(span){font-family:Proximus,Verdana,Helvetica,sans-serif;color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-txt-body-inverted)}span.link{text-decoration:underline}@media only screen and (min-width: 64rem){span,::slotted(span){font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 90rem){span,::slotted(span){font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}";
+const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-txt-body-inverted)}span.link{text-decoration:underline}@media only screen and (min-width: 64rem){span,::slotted(span){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 90rem){span,::slotted(span){font-size:var(--px-text-size-base-desktop)}}";
 const spanStyles$1 = new CSSStyleSheet();
 const typographyStyles$3 = new CSSStyleSheet();
 spanStyles$1.replaceSync(spanCss);
 typographyStyles$3.replaceSync(typographyCss$1);
 const _Span = class _Span extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, spanStyles$1, typographyStyles$3);
+    super(spanStyles$1, typographyStyles$3);
     this.template = () => `<span>
         <slot name="before"></slot>
         <slot></slot>
@@ -3084,7 +3079,13 @@ const _Span = class _Span extends PxElement {
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "color", "fontsize", "fontweight", "inverted"];
+    return [
+      ...super.observedAttributes,
+      "color",
+      "fontsize",
+      "fontweight",
+      "inverted"
+    ];
   }
   get color() {
     return this.getAttribute("color");
@@ -3118,7 +3119,7 @@ const _Span = class _Span extends PxElement {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "color":
-          this.updateTypography(attrName, oldValue, newValue, colorValues$2);
+          this.updateTypography(attrName, oldValue, newValue, colorValues$1);
           break;
         case "fontsize":
           this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
@@ -3150,16 +3151,25 @@ const _Span = class _Span extends PxElement {
 _Span.nativeName = "span";
 let Span = _Span;
 customElements.define("px-span", Span);
+const linkCss = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,a:focus,.link:hover,.link:focus{color:var(--px-color-txt-hover-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(*),.link ::slotted(*){display:inline-block}::slotted(a:hover),::slotted(a:focus){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) a:focus,:host([inverted]) .link:hover,:host([inverted]) .link:focus{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover),:host([inverted]) ::slotted(a:focus){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 64rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 90rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}}';
+const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent;--slotted-icon-size: var(--px-icon-size-xs-mobile)}.btn,.btn *{box-sizing:border-box}.btn:hover:not([disabled],[aria-disabled=true],.loading),.btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);outline:0}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:var(--px-line-height-xs)}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),.btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),.btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-2xs-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading){gap:0;padding:0 .5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(*),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(*){background:transparent}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){margin:0 -8px}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]){margin:0 0 0 -.5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]){margin:0 -.5rem 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading),.btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
 const linkStyles$1 = new CSSStyleSheet();
 const buttonStyles = new CSSStyleSheet();
 const typographyStyles$2 = new CSSStyleSheet();
 linkStyles$1.replaceSync(linkCss);
 buttonStyles.replaceSync(buttonCss);
 typographyStyles$2.replaceSync(typographyCss$1);
+const variantValues$1 = [
+  "link",
+  "no-style",
+  "skip-link",
+  "btn-default",
+  "btn-secondary",
+  "btn-tertiary"
+];
 const _Link = class _Link extends PxElement {
-  constructor(semanticTokensStylesheet) {
-    super(semanticTokensStylesheet, linkStyles$1, buttonStyles, typographyStyles$2);
-    this.variantValues = ["link", "no-style", "skip-link", "btn-default", "btn-secondary", "btn-tertiary"];
+  constructor() {
+    super(linkStyles$1, buttonStyles, typographyStyles$2);
     this.shapeValues = ["", "default", "alternative"];
     this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
     const $root = document.createElement(this.nativeName);
@@ -3167,7 +3177,17 @@ const _Link = class _Link extends PxElement {
     this.shadowRoot.appendChild($root);
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "disabled", "variant", "shape", "extended", "inverted", "fontsize", "color", "fontweight"];
+    return [
+      ...super.observedAttributes,
+      "disabled",
+      "variant",
+      "shape",
+      "extended",
+      "inverted",
+      "fontsize",
+      "color",
+      "fontweight"
+    ];
   }
   get disabled() {
     return this.getAttribute("disabled");
@@ -3239,7 +3259,7 @@ const _Link = class _Link extends PxElement {
           this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
           break;
         case "color":
-          this.updateTypography(attrName, oldValue, newValue, colorValues$2);
+          this.updateTypography(attrName, oldValue, newValue, colorValues$1);
           break;
         case "fontweight":
           this.updateTypography(attrName, oldValue, newValue, fontweightValues);
@@ -3270,7 +3290,7 @@ const _Link = class _Link extends PxElement {
     if (newValue !== null && newValue !== "" && newValue !== "link") {
       this._toggleClassList(newValue);
     }
-    if (!this.checkName(this.variantValues, newValue)) {
+    if (!this.checkName(variantValues$1, newValue)) {
       console.error(`Bad "variant" value for ${this.$el}`);
     }
   }
@@ -3299,29 +3319,44 @@ const _Link = class _Link extends PxElement {
 };
 _Link.nativeName = "a";
 let Link = _Link;
-class ProximusLink extends Link {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
+if (!customElements.get("px-a")) {
+  customElements.define("px-a", Link);
 }
-customElements.define("px-a", ProximusLink);
-const paragraphCss = "p,::slotted(p){font-family:Proximus,Verdana,Helvetica,sans-serif;color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);margin:0}.textalign-left{text-align:left}.textalign-center{text-align:center}.textalign-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-txt-body-inverted)}@media only screen and (min-width: 64rem){p,::slotted(p){font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 90rem){p,::slotted(p){font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}";
+const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);margin:0}.textalign-left{text-align:left}.textalign-center{text-align:center}.textalign-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-txt-body-inverted)}@media only screen and (min-width: 64rem){p,::slotted(p){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 90rem){p,::slotted(p){font-size:var(--px-text-size-base-desktop)}}";
 const paragraphStyles$1 = new CSSStyleSheet();
 const typographyStyles$1 = new CSSStyleSheet();
 const headingStyles$1 = new CSSStyleSheet();
 paragraphStyles$1.replaceSync(paragraphCss);
 typographyStyles$1.replaceSync(typographyCss$1);
 headingStyles$1.replaceSync(headingCss);
-const variantValues = ["", "default", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle"];
+const variantValues = [
+  "",
+  "default",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "subtitle"
+];
 const textalignValues = ["", "default", "left", "center", "right"];
 const _Paragraph = class _Paragraph extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, paragraphStyles$1, typographyStyles$1, headingStyles$1);
+    super(paragraphStyles$1, typographyStyles$1, headingStyles$1);
     this.template = () => `<p><slot></slot></p>`;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "variant", "color", "fontsize", "fontweight", "textalign", "inverted"];
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "color",
+      "fontsize",
+      "fontweight",
+      "textalign",
+      "inverted"
+    ];
   }
   get variant() {
     return this.getAttribute("variant");
@@ -3366,7 +3401,7 @@ const _Paragraph = class _Paragraph extends PxElement {
           this.updateAttribute(attrName, oldValue, newValue, variantValues);
           break;
         case "color":
-          this.updateTypography(attrName, oldValue, newValue, colorValues$2);
+          this.updateTypography(attrName, oldValue, newValue, colorValues$1);
           break;
         case "fontsize":
           this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
@@ -3415,29 +3450,7 @@ const _Paragraph = class _Paragraph extends PxElement {
 _Paragraph.nativeName = "p";
 let Paragraph = _Paragraph;
 customElements.define("px-p", Paragraph);
-const styles = "div{--px-heading-margin-title: 0 0 15px 0}";
-const styleSheet = new CSSStyleSheet();
-styleSheet.replaceSync(styles);
-class HeadingGroup extends HTMLElement {
-  template() {
-    return `
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet];
-  }
-  get $el() {
-    return this.shadowRoot.querySelector("div");
-  }
-}
-customElements.define("px-heading-group", HeadingGroup);
-const typographyCss = ":host{font-family:Proximus,Verdana,Helvetica,sans-serif}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-component-default-horizontal);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-color-txt-body-inverted)}";
+const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-component-default-horizontal);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-color-txt-body-inverted)}";
 const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
 const typographyStyles = new CSSStyleSheet();
 const headingStyles = new CSSStyleSheet();
@@ -3457,7 +3470,6 @@ class Typography extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
     this.shadowRoot.adoptedStyleSheets = [
-      proximusSemanticStyleSheet,
       typographyStyles,
       headingStyles,
       linkStyles,
@@ -3484,6 +3496,7 @@ customElements.define("px-typography", Typography);
 export {
   Accordion,
   Container,
+  FontIcon,
   H1,
   H2,
   H3,
@@ -3491,32 +3504,28 @@ export {
   H5,
   H6,
   HStack,
-  HeadingGroup,
-  Icon,
+  IconSet,
   Image,
+  Link,
   Modal,
   Page,
   Paragraph,
+  Patch,
   Picture,
   Price,
-  ProximusButton,
-  ProximusLink,
-  ProximusPatch,
-  ProximusSection,
-  ProximusTag,
-  ProximusTimeline,
-  ProximusTimelineItem,
   PxElement,
-  PxStack,
   PxTab,
   PxTabPanel,
   PxTabs,
   Ribbon,
-  Section$1 as Section,
+  SVGIcon,
   Separator,
   Spacer,
   Span,
   Stack,
+  Tag,
+  Timeline,
+  TimelineItem,
   Typography,
   VStack,
   WithFlexAttributes,
@@ -3524,17 +3533,16 @@ export {
   bgColorValues,
   borderRadiusValues,
   borderValues,
-  colorValues$2 as colorValues,
+  colorValues$1 as colorValues,
   fontsizeValues,
   fontweightValues,
-  gapValues,
   getSupportedAttributeNames,
   getViewportFormat,
   gradientValues,
-  iconSizeValues,
+  iconSizeValues$1 as iconSizeValues,
   isFalsy,
   paddingValues,
-  proximusSemanticStyleSheet,
-  replayAttributes,
-  shadowValues
+  shadowValues,
+  sizeValues$1 as sizeValues,
+  textalignValues
 };