@proximus/lavender 1.0.0-alpha.6

package/dist/lavender.es.js

@@ -0,0 +1,3225 @@
+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)}}";
+function getSupportedAttributeNames(htmlElementName) {
+  const $element = document.createElement(htmlElementName);
+  const inputPrototype = Object.getPrototypeOf($element);
+  return Object.getOwnPropertyNames(inputPrototype);
+}
+const commonStyleSheet = new CSSStyleSheet();
+commonStyleSheet.replaceSync(commonStyles);
+class WithFlexAttributes extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "grow",
+      "grow-tablet",
+      "grow-laptop",
+      "grow-desktop",
+      "shrink",
+      "shrink-mobile",
+      "shrink-tablet",
+      "shrink-laptop",
+      "shrink-desktop",
+      "basis",
+      "basis-mobile",
+      "basis-tablet",
+      "basis-laptop",
+      "basis-desktop",
+      "align-self"
+    ];
+  }
+  constructor(...adoptedStylesheets) {
+    super();
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.shadowRoot.adoptedStyleSheets = [
+      commonStyleSheet,
+      ...adoptedStylesheets
+    ];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (WithFlexAttributes.observedAttributes.indexOf(name) === -1) {
+      return;
+    }
+    if (newValue === null) {
+      this.style.removeProperty(name);
+    } else {
+      switch (name) {
+        case "grow":
+        case "shrink":
+        case "basis":
+        case "grow-mobile":
+        case "grow-tablet":
+        case "grow-laptop":
+        case "grow-desktop":
+        case "shrink-mobile":
+        case "shrink-tablet":
+        case "shrink-laptop":
+        case "shrink-desktop":
+        case "basis-mobile":
+        case "basis-tablet":
+        case "basis-laptop":
+        case "basis-desktop":
+        case "align-self":
+          this.style.setProperty(`--flex-${name}-value`, newValue);
+          break;
+      }
+    }
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(value) {
+    this.setAttribute("grow", value);
+  }
+  get shrink() {
+    return this.getAttribute("shrink");
+  }
+  set shrink(value) {
+    this.setAttribute("shrink", value);
+  }
+  get basis() {
+    return this.getAttribute("basis");
+  }
+  set basis(value) {
+    this.setAttribute("basis", value);
+  }
+  get growMobile() {
+    return this.getAttribute("grow-mobile");
+  }
+  set growMobile(value) {
+    this.setAttribute("grow-mobile", value);
+  }
+  get growTablet() {
+    return this.getAttribute("grow-tablet");
+  }
+  set growTablet(value) {
+    this.setAttribute("grow-tablet", value);
+  }
+  get growLaptop() {
+    return this.getAttribute("grow-laptop");
+  }
+  set growLaptop(value) {
+    this.setAttribute("grow-laptop", value);
+  }
+  get growDesktop() {
+    return this.getAttribute("grow-desktop");
+  }
+  set growDesktop(value) {
+    this.setAttribute("grow-desktop", value);
+  }
+  get shrinkMobile() {
+    return this.getAttribute("shrink-mobile");
+  }
+  set shrinkMobile(value) {
+    this.setAttribute("shrink-mobile", value);
+  }
+  get shrinkTablet() {
+    return this.getAttribute("shrink-tablet");
+  }
+  set shrinkTablet(value) {
+    this.setAttribute("shrink-tablet", value);
+  }
+  get shrinkLaptop() {
+    return this.getAttribute("shrink-laptop");
+  }
+  set shrinkLaptop(value) {
+    this.setAttribute("shrink-laptop", value);
+  }
+  get shrinkDesktop() {
+    return this.getAttribute("shrink-desktop");
+  }
+  set shrinkDesktop(value) {
+    this.setAttribute("shrink-desktop", value);
+  }
+  get basisMobile() {
+    return this.getAttribute("basis-mobile");
+  }
+  set basisMobile(value) {
+    this.setAttribute("basis-mobile", value);
+  }
+  get basisTablet() {
+    return this.getAttribute("basis-tablet");
+  }
+  set basisTablet(value) {
+    this.setAttribute("basis-tablet", value);
+  }
+  get basisLaptop() {
+    return this.getAttribute("basis-laptop");
+  }
+  set basisLaptop(value) {
+    this.setAttribute("basis-laptop", value);
+  }
+  get basisDesktop() {
+    return this.getAttribute("basis-desktop");
+  }
+  set basisDesktop(value) {
+    this.setAttribute("basis-desktop", value);
+  }
+  get alignSelf() {
+    return this.getAttribute("align-self");
+  }
+  set alignSelf(value) {
+    this.setAttribute("align-self", value);
+  }
+  get $el() {
+    return this;
+  }
+}
+class PxElement extends WithFlexAttributes {
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      ...getSupportedAttributeNames(this.nativeName)
+    ];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (newValue === null) {
+      this.$el.toggleAttribute(name);
+    } else {
+      this.$el.setAttribute(name, newValue);
+    }
+  }
+  constructor(semanticTokensStylesheet, ...adoptedStylesheets) {
+    super(semanticTokensStylesheet, ...adoptedStylesheets);
+    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
+  }
+  connectedCallback() {
+    for (const name of getSupportedAttributeNames(this.nativeName)) {
+      if (name === "constructor") {
+        continue;
+      }
+      Object.defineProperty(this, name, {
+        get() {
+          return this.$el[name];
+        },
+        set(value) {
+          if (this.$el[name] !== value) {
+            this.$el[name] = value;
+          }
+        }
+      });
+    }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(this.nativeName);
+  }
+}
+const fontsizeValues = [
+  "",
+  "default",
+  "inherit",
+  "xs",
+  "s",
+  "base",
+  "m",
+  "l",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl"
+];
+const colorValues$2 = [
+  "",
+  "default",
+  "inherit",
+  "primary",
+  "inverted-primary",
+  "inverted",
+  "body",
+  "details",
+  "hover",
+  "disabled",
+  "active",
+  "promo",
+  "status-success",
+  "status-warning",
+  "status-error",
+  "status-unlimited"
+];
+const fontweightValues = [
+  "",
+  "default",
+  "inherit",
+  "normal",
+  "bold",
+  "extrabold",
+  "light"
+];
+const iconSizeValues = [
+  "",
+  "default",
+  "2xs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl",
+  "2xl"
+];
+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 bgColorValues = [
+  "",
+  "none",
+  "weak",
+  "moderate",
+  "strong",
+  "rich",
+  "main",
+  "canvas-weak",
+  "canvas-light",
+  "canvas-soft",
+  "canvas-moderate",
+  "canvas-strong",
+  "canvas-deep",
+  "canvas-rich",
+  "action-primary",
+  "action-secondary",
+  "action-hover",
+  "action-disabled",
+  "action-active",
+  "notification",
+  "promo",
+  "success",
+  "error",
+  "warning",
+  "unlimited"
+];
+const shadowValues = ["", "none", "s", "m", "l", "xl"];
+const gradientValues = [
+  "",
+  "purple-bottom-red",
+  "purple-bottom-magenta",
+  "purple-bottom-orange",
+  "purple-bottom-blue",
+  "purple-bottom-turquoise",
+  "purple-bottom-green",
+  "purple-right-red",
+  "purple-right-magenta",
+  "purple-right-orange",
+  "purple-right-blue",
+  "purple-right-turquoise",
+  "purple-right-green",
+  "purple-top-right-red",
+  "purple-top-right-magenta",
+  "purple-top-right-orange",
+  "purple-top-right-blue",
+  "purple-top-right-turquoise",
+  "purple-top-right-green",
+  "purple-bottom-right-red",
+  "purple-bottom-right-magenta",
+  "purple-bottom-right-orange",
+  "purple-bottom-right-blue",
+  "purple-bottom-right-turquoise",
+  "purple-bottom-right-green",
+  "color-bottom-red",
+  "color-bottom-magenta",
+  "color-bottom-orange",
+  "color-bottom-blue",
+  "color-bottom-turquoise",
+  "color-bottom-green",
+  "color-right-red",
+  "color-right-magenta",
+  "color-right-orange",
+  "color-right-blue",
+  "color-right-turquoise",
+  "color-right-green",
+  "color-top-right-red",
+  "color-top-right-magenta",
+  "color-top-right-orange",
+  "color-top-right-blue",
+  "color-top-right-turquoise",
+  "color-top-right-green",
+  "color-bottom-right-red",
+  "color-bottom-right-magenta",
+  "color-bottom-right-orange",
+  "color-bottom-right-blue",
+  "color-bottom-right-turquoise",
+  "color-bottom-right-green"
+];
+function addGlobalStylesheet(inlineStyles) {
+  const style = document.createElement("style");
+  style.innerHTML = inlineStyles;
+  document.head.appendChild(style);
+}
+function isFalsy(value) {
+  return typeof value === "string" && (value === "false" || value === "0" || value === "null") || typeof value === "boolean" && !value;
+}
+function getViewportFormat() {
+  if (window.matchMedia("only screen and (min-width: 768px)").matches) {
+    return "tablet";
+  } else if (window.matchMedia("only screen and (min-width: 1025px)").matches) {
+    return "laptop";
+  } else {
+    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$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$c = new CSSStyleSheet();
+styleSheet$c.replaceSync(styles$d);
+const gapValues = [
+  // Vertical
+  "between-options-vertical",
+  "under-text-vertical",
+  "display-to-subtitle-vertical",
+  "under-display-vertical",
+  "component-default-vertical",
+  "component-expanded-vertical",
+  "between-options-vertical-mobile",
+  "under-text-vertical-mobile",
+  "display-to-subtitle-vertical-mobile",
+  "under-display-vertical-mobile",
+  "component-default-vertical-mobile",
+  "component-expanded-vertical-mobile",
+  // Horizontal
+  "between-icon-horizontal",
+  "text-to-icon-compact-horizontal",
+  "text-to-icon-horizontal",
+  "component-compact-horizontal",
+  "component-default-horizontal",
+  "component-expanded-horizontal",
+  "between-icon-horizontal-mobile",
+  "text-to-icon-compact-horizontal-mobile",
+  "text-to-icon-horizontal-mobile",
+  "component-compact-horizontal-mobile",
+  "component-default-horizontal-mobile"
+];
+class Stack extends WithFlexAttributes {
+  constructor(semanticTokensStylesheet) {
+    super(semanticTokensStylesheet, styleSheet$c);
+    this.template = `<div class="flex-container">
+      <slot></slot>
+  </div>`;
+    this.shadowRoot.innerHTML = this.template;
+  }
+  connectedCallback() {
+    if (!this.hasAttribute("direction")) {
+      this.direction = "row";
+    }
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction-mobile",
+      "direction-tablet",
+      "direction-laptop",
+      "direction-desktop",
+      "gap",
+      "gap-mobile",
+      "gap-tablet",
+      "gap-laptop",
+      "gap-desktop",
+      "justify-content",
+      "justify-content-mobile",
+      "justify-content-tablet",
+      "justify-content-laptop",
+      "justify-content-desktop",
+      "align-items",
+      "align-items-mobile",
+      "align-items-tablet",
+      "align-items-laptop",
+      "align-items-desktop",
+      "wrap",
+      "wrap-mobile",
+      "wrap-tablet",
+      "wrap-laptop",
+      "wrap-desktop"
+    ];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name.indexOf("direction") > -1 && !["column", "row"].includes(newValue)) {
+      throw new Error("Invalid direction");
+    }
+    switch (name) {
+      case "gap":
+        if (!this.$el.style.getPropertyValue("--flex-gap-mobile-value")) {
+          this.$el.style.setProperty(
+            `--flex-gap-mobile-value`,
+            this.getGapCSSVariable(newValue)
+          );
+        }
+        if (!this.$el.style.getPropertyValue("--flex-gap-tablet-value")) {
+          this.$el.style.setProperty(
+            `--flex-gap-tablet-value`,
+            this.getGapCSSVariable(newValue)
+          );
+        }
+        if (!this.$el.style.getPropertyValue("--flex-gap-laptop-value")) {
+          this.$el.style.setProperty(
+            `--flex-gap-laptop-value`,
+            this.getGapCSSVariable(newValue)
+          );
+        }
+        if (!this.$el.style.getPropertyValue("--flex-gap-desktop-value")) {
+          this.$el.style.setProperty(
+            `--flex-gap-desktop-value`,
+            this.getGapCSSVariable(newValue)
+          );
+        }
+        break;
+      case "gap-mobile":
+      case "gap-tablet":
+      case "gap-laptop":
+      case "gap-desktop":
+        this.$el.style.setProperty(
+          `--flex-${name}-value`,
+          this.getGapCSSVariable(newValue)
+        );
+        break;
+      case "direction":
+        if (!this.$el.style.getPropertyValue("--flex-direction-mobile-value")) {
+          this.$el.style.setProperty(`--flex-direction-mobile-value`, newValue);
+        }
+        if (!this.$el.style.getPropertyValue("--flex-direction-tablet-value")) {
+          this.$el.style.setProperty(`--flex-direction-tablet-value`, newValue);
+        }
+        if (!this.$el.style.getPropertyValue("--flex-direction-laptop-value")) {
+          this.$el.style.setProperty(`--flex-direction-laptop-value`, newValue);
+        }
+        if (!this.$el.style.getPropertyValue("--flex-direction-desktop-value")) {
+          this.$el.style.setProperty(
+            `--flex-direction-desktop-value`,
+            newValue
+          );
+        }
+        break;
+      case "justify-content":
+        if (!this.$el.style.getPropertyValue(
+          "--flex-justify-content-mobile-value"
+        )) {
+          this.$el.style.setProperty(
+            `--flex-justify-content-mobile-value`,
+            newValue
+          );
+        }
+        if (!this.$el.style.getPropertyValue(
+          "--flex-justify-content-tablet-value"
+        )) {
+          this.$el.style.setProperty(
+            `--flex-justify-content-tablet-value`,
+            newValue
+          );
+        }
+        if (!this.$el.style.getPropertyValue(
+          "--flex-justify-content-laptop-value"
+        )) {
+          this.$el.style.setProperty(
+            `--flex-justify-content-laptop-value`,
+            newValue
+          );
+        }
+        if (!this.$el.style.getPropertyValue(
+          "--flex-justify-content-desktop-value"
+        )) {
+          this.$el.style.setProperty(
+            `--flex-justify-content-desktop-value`,
+            newValue
+          );
+        }
+        break;
+      case "align-items":
+        if (!this.$el.style.getPropertyValue("--flex-align-items-mobile-value")) {
+          this.$el.style.setProperty(
+            `--flex-align-items-mobile-value`,
+            newValue
+          );
+        }
+        if (!this.$el.style.getPropertyValue("--flex-align-items-tablet-value")) {
+          this.$el.style.setProperty(
+            `--flex-align-items-tablet-value`,
+            newValue
+          );
+        }
+        if (!this.$el.style.getPropertyValue("--flex-align-items-laptop-value")) {
+          this.$el.style.setProperty(
+            `--flex-align-items-laptop-value`,
+            newValue
+          );
+        }
+        if (!this.$el.style.getPropertyValue("--flex-align-items-desktop-value")) {
+          this.$el.style.setProperty(
+            `--flex-align-items-desktop-value`,
+            newValue
+          );
+        }
+        break;
+      case "wrap":
+        if (!this.$el.style.getPropertyValue(`--flex-wrap-mobile-value`)) {
+          this.$el.style.setProperty(`--flex-wrap-mobile-value`, newValue);
+        }
+        if (!this.$el.style.getPropertyValue(`--flex-wrap-tablet-value`)) {
+          this.$el.style.setProperty(`--flex-wrap-tablet-value`, newValue);
+        }
+        if (!this.$el.style.getPropertyValue(`--flex-wrap-laptop-value`)) {
+          this.$el.style.setProperty(`--flex-wrap-laptop-value`, newValue);
+        }
+        if (!this.$el.style.getPropertyValue(`--flex-wrap-desktop-value`)) {
+          this.$el.style.setProperty(`--flex-wrap-desktop-value`, newValue);
+        }
+        break;
+      case "direction-mobile":
+      case "direction-tablet":
+      case "direction-laptop":
+      case "direction-desktop":
+      case "justify-content-mobile":
+      case "justify-content-tablet":
+      case "justify-content-laptop":
+      case "justify-content-desktop":
+      case "align-items-mobile":
+      case "align-items-tablet":
+      case "align-items-laptop":
+      case "align-items-desktop":
+      case "wrap-mobile":
+      case "wrap-tablet":
+      case "wrap-laptop":
+      case "wrap-desktop":
+        this.$el.style.setProperty(`--flex-${name}-value`, newValue);
+        break;
+      default:
+        super.attributeChangedCallback(name, oldValue, newValue);
+        break;
+    }
+  }
+  getGapCSSVariable(newValue) {
+    console.log(newValue);
+    return gapValues.includes(newValue) ? `var(--px-spacing-${newValue})` : newValue;
+  }
+  get direction() {
+    return this.getAttribute("direction");
+  }
+  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 gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(value) {
+    this.setAttribute("gap", value);
+  }
+  get gapMobile() {
+    return this.getAttribute("gap-mobile");
+  }
+  set gapMobile(value) {
+    this.setAttribute("gap-mobile", value);
+  }
+  get gapTablet() {
+    return this.getAttribute("gap-tablet");
+  }
+  set gapTablet(value) {
+    this.setAttribute("gap-tablet", value);
+  }
+  get gapLaptop() {
+    return this.getAttribute("gap-laptop");
+  }
+  set gapLaptop(value) {
+    this.setAttribute("gap-laptop", value);
+  }
+  get justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(value) {
+    this.setAttribute("justify-content", value);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content-mobile");
+  }
+  set justifyContentMobile(value) {
+    this.setAttribute("justify-content-mobile", value);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content-tablet");
+  }
+  set justifyContentTablet(value) {
+    this.setAttribute("justify-content-tablet", value);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content-laptop");
+  }
+  set justifyContentLaptop(value) {
+    this.setAttribute("justify-content-laptop", value);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content-desktop");
+  }
+  set justifyContentDesktop(value) {
+    this.setAttribute("justify-content-desktop", value);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(value) {
+    this.setAttribute("align-items", value);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items-mobile");
+  }
+  set alignItemsMobile(value) {
+    this.setAttribute("align-items-mobile", value);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items-tablet");
+  }
+  set alignItemsTablet(value) {
+    this.setAttribute("align-items-tablet", value);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items-laptop");
+  }
+  set alignItemsLaptop(value) {
+    this.setAttribute("align-items-laptop", value);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items-desktop");
+  }
+  set alignItemsDesktop(value) {
+    this.setAttribute("align-items-desktop", value);
+  }
+  get wrap() {
+    return this.getAttribute("wrap");
+  }
+  set wrap(value) {
+    this.setAttribute("wrap", value);
+  }
+  get wrapMobile() {
+    return this.getAttribute("wrap-mobile");
+  }
+  set wrapMobile(value) {
+    this.setAttribute("wrap-mobile", value);
+  }
+  get wrapTablet() {
+    return this.getAttribute("wrap-tablet");
+  }
+  set wrapTablet(value) {
+    this.setAttribute("wrap-tablet", value);
+  }
+  get wrapLaptop() {
+    return this.getAttribute("wrap-laptop");
+  }
+  set wrapLaptop(value) {
+    this.setAttribute("wrap-laptop", value);
+  }
+  get wrapDesktop() {
+    return this.getAttribute("wrap-desktop");
+  }
+  set wrapDesktop(value) {
+    this.setAttribute("wrap-desktop", value);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".flex-container");
+  }
+}
+class VStack extends Stack {
+  constructor(semanticsTokensStylesheet) {
+    super(semanticsTokensStylesheet);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.direction = "column";
+    this.directionMobile = "column";
+    this.directionTablet = "column";
+    this.directionLaptop = "column";
+    this.directionDesktop = "column";
+  }
+}
+class HStack extends Stack {
+  constructor(semanticsTokensStylesheet) {
+    super(semanticsTokensStylesheet);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.direction = "row";
+    this.directionMobile = "row";
+    this.directionTablet = "row";
+    this.directionLaptop = "row";
+    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);
+      }
+    }
+  );
+}
+class Spacer extends HTMLElement {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["grow"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "grow") {
+      this.style.flexGrow = newValue;
+    }
+  }
+  connectedCallback() {
+    this.style.flexGrow = this.getAttribute("grow") || `${1}`;
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(value) {
+    this.setAttribute("grow", value);
+  }
+}
+customElements.define("px-spacer", Spacer);
+const styles$c = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}";
+const styleSheet$b = new CSSStyleSheet();
+styleSheet$b.replaceSync(styles$c);
+class Section extends WithFlexAttributes {
+  constructor() {
+    super(styleSheet$b);
+    this.template = `
+  <section>
+    <slot name="heading"></slot>
+    <px-stack direction="column" gap="1rem">
+      <slot></slot>
+    </px-stack>
+  </section>`;
+    this.shadowRoot.innerHTML = this.template;
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "gap"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "gap" && oldValue !== newValue) {
+      this.$el.gap = newValue;
+      return;
+    }
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(value) {
+    this.setAttribute("gap", value);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector('px-stack[direction="column"]');
+  }
+}
+customElements.define("px-section", Section);
+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$a = new CSSStyleSheet();
+styleSheet$a.replaceSync(styles$b);
+class Page extends WithFlexAttributes {
+  constructor() {
+    super(proximusSemanticStyleSheet, styleSheet$a);
+    this.template = (stickyContainer) => `
+    <px-container borderradius="none" padding="none" >
+      <px-vstack>
+        <px-container id="header-container"  borderradius="none">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack id="header-vstack-container" gap="1rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="header-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container id="image-container"  borderradius="none" padding="none" paddingtop="xl" id="image-box" bgimgsize="cover" bgimgposition="top center" paddingbottom="xl" borderradius="none" bgimg="${this.backgroundImage}">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack grow="${this.grow}" basis="${this.basis}">
+              <slot name="image-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        ${stickyContainer ? ` <px-hstack>
+        <px-spacer></px-spacer>
+        <px-container borderradius="none" shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" borderradius="m">
+          <px-vstack gap="1rem">
+            <slot name="image-sticky-container"></slot>
+          </px-vstack>
+        </px-container>
+        <px-spacer></px-spacer>
+      </px-hstack>` : ""}
+        <px-container id="body-container"  id="main" bgcolor="${this.backgroundColor}" padding="none" paddingtop="xl" paddingbottom="xl" >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack id="body-vstack-container" gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="body-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container id="contact-container" borderradius="none" id="main" bgcolor="strong" padding="none"  paddingtop="xl" paddingbottom="xl">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack  gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="contact-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container id="footer-container"  bgcolor="none" borderradius="none" style="background-color: rgb(108, 66, 156)"   paddingtop="xl" paddingbottom="xl">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="footer-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+      </px-vstack>
+    </px-container>
+  `;
+    this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "background-image",
+      "gap",
+      "background-color",
+      "padding-vertical",
+      "padding-horizontal"
+    ];
+  }
+  get $wideImage() {
+    return this.shadowRoot.querySelector("#image-box");
+  }
+  get $bodyVStackContainer() {
+    return this.shadowRoot.querySelector("#header-vstack-container");
+  }
+  get $bodyContainer() {
+    return this.shadowRoot.querySelector("#body-container");
+  }
+  get $contactContainer() {
+    return this.shadowRoot.querySelector("#contact-container");
+  }
+  get $footerContainer() {
+    return this.shadowRoot.querySelector("#footer-container");
+  }
+  get $headerContainer() {
+    return this.shadowRoot.querySelector("#header-container");
+  }
+  get $imageContainer() {
+    return this.shadowRoot.querySelector("#image-container");
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  get $imageStickySlot() {
+    return this.querySelector('*[slot="image-sticky-container"]');
+  }
+  get $main() {
+    return this.shadowRoot.querySelector("#main");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color") || "none";
+  }
+  get paddingVertical() {
+    return this.getAttribute("padding-vertical");
+  }
+  get paddingHorizontal() {
+    return this.getAttribute("padding-horizontal");
+  }
+  set paddingVertical(value) {
+    this.setAttribute("padding-vertical", value);
+  }
+  set paddingHorizontal(value) {
+    this.setAttribute("padding-horizontal", value);
+  }
+  connectedCallback() {
+    this.handlePaddingVerticalChange(this.paddingVertical);
+    this.handlePaddingHorizontalChange(this.paddingHorizontal);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (name) {
+        case "background-image":
+          this.$imageContainer.bgImgMobile = newValue;
+          break;
+        case "gap":
+          this.$bodyVStackContainer.gap = newValue;
+          break;
+        case "background-color":
+          this.$bodyContainer.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "none";
+          break;
+        case "padding-vertical":
+          this.handlePaddingVerticalChange(newValue);
+          break;
+        case "padding-horizontal":
+          this.handlePaddingHorizontalChange(newValue);
+          break;
+        default:
+          super.attributeChangedCallback(name, oldValue, newValue);
+      }
+    }
+  }
+  handlePaddingVerticalChange(newValue) {
+    this.$headerContainer.paddingTop = newValue;
+    this.$footerContainer.paddingBottom = newValue;
+  }
+  handlePaddingHorizontalChange(newValue) {
+    this.$headerContainer.paddingLeft = newValue;
+    this.$headerContainer.paddingRight = newValue;
+    this.$bodyContainer.paddingLeft = newValue;
+    this.$bodyContainer.paddingRight = newValue;
+    this.$contactContainer.paddingLeft = newValue;
+    this.$contactContainer.paddingRight = newValue;
+    this.$footerContainer.paddingLeft = newValue;
+    this.$footerContainer.paddingRight = newValue;
+    this.$imageContainer.paddingLeft = newValue;
+    this.$imageContainer.paddingRight = newValue;
+  }
+}
+if (customElements.get("px-page") === void 0) {
+  customElements.define("px-page", Page);
+}
+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)}`;
+const accordionStyles = new CSSStyleSheet();
+accordionStyles.replaceSync(accordionCss);
+const variantValues$3 = ["", "none", "single"];
+const _Accordion = class _Accordion extends PxElement {
+  constructor() {
+    super(proximusSemanticStyleSheet, accordionStyles);
+    this.template = () => `<details>
+      <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
+      <slot name="content"></slot>
+    </details>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "variant", "inverted"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", 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.updateAttribute(attrName, oldValue, newValue, variantValues$3);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
+    if (oldValue !== null && oldValue !== "") {
+      this.$el.classList.toggle(`${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "") {
+      this.$el.classList.toggle(`${newValue}`);
+    }
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+};
+_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$a = ".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$a);
+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);
+  }
+  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");
+  }
+  set state(value) {
+    this.setAttribute("state", value);
+  }
+  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 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)}';
+const containerStyles = new CSSStyleSheet();
+containerStyles.replaceSync(containerCss);
+const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
+const noBorderRadiusValues = ["", "all", "top", "right", "bottom", "left"];
+const bgImgSizeValues = ["", "cover", "contain", "default"];
+const _Container = class _Container extends PxElement {
+  constructor() {
+    super(proximusSemanticStyleSheet, containerStyles);
+    this.template = () => `<div class="container">
+    <slot name="anchor-left"></slot>
+    <slot name="anchor-right"></slot>
+    <slot name="anchor-full"></slot>
+    <slot></slot>
+    </div>`;
+    this.onWindowResize = () => {
+      if (this.hasAttribute("bgimg-mobile")) {
+        this.loadImg("bgimg-mobile", this.getAttribute("bgimg-mobile"));
+      }
+      if (this.hasAttribute("bgimg-tablet")) {
+        this.loadImg("bgimg-tablet", this.getAttribute("bgimg-tablet"));
+      }
+      if (this.hasAttribute("bgimg-laptop")) {
+        this.loadImg("bgimg-laptop", this.getAttribute("bgimg-laptop"));
+      }
+    };
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "padding",
+      "paddinginline",
+      "paddingblock",
+      "paddingtop",
+      "paddingright",
+      "paddingbottom",
+      "paddingleft",
+      "border",
+      "borderradius",
+      "noborderradius",
+      "bgcolor",
+      "gradient",
+      "bgimg-mobile",
+      "bgimg-tablet",
+      "bgimg-laptop",
+      "bgimgsize",
+      "bgimgposition",
+      "shadow",
+      "inverted"
+    ];
+  }
+  get padding() {
+    return this.getAttribute("padding");
+  }
+  set padding(value) {
+    this.setAttribute("padding", value);
+  }
+  get paddingBlock() {
+    return this.getAttribute("paddingblock");
+  }
+  set paddingBlock(value) {
+    this.setAttribute("paddingblock", value);
+  }
+  get paddingInline() {
+    return this.getAttribute("paddinginline");
+  }
+  set paddingInline(value) {
+    this.setAttribute("paddinginline", value);
+  }
+  get paddingTop() {
+    return this.getAttribute("paddingtop");
+  }
+  set paddingTop(value) {
+    this.setAttribute("paddingtop", value);
+  }
+  get paddingRight() {
+    return this.getAttribute("paddingright");
+  }
+  set paddingRight(value) {
+    this.setAttribute("paddingright", value);
+  }
+  get paddingBottom() {
+    return this.getAttribute("paddingbottom");
+  }
+  set paddingBottom(value) {
+    this.setAttribute("paddingbottom", value);
+  }
+  get paddingLeft() {
+    return this.getAttribute("paddingleft");
+  }
+  set paddingLeft(value) {
+    this.setAttribute("paddingleft", value);
+  }
+  get border() {
+    return this.getAttribute("border");
+  }
+  set border(value) {
+    this.setAttribute("border", value);
+  }
+  get borderRadius() {
+    return this.getAttribute("borderradius");
+  }
+  set borderRadius(value) {
+    this.setAttribute("borderradius", value);
+  }
+  get noBorderRadius() {
+    return this.getAttribute("noborderradius");
+  }
+  set noBorderRadius(value) {
+    this.setAttribute("noborderradius", value);
+  }
+  get bgColor() {
+    return this.getAttribute("bgcolor");
+  }
+  set bgColor(value) {
+    this.setAttribute("bgcolor", value);
+  }
+  get gradient() {
+    return this.getAttribute("gradient");
+  }
+  set gradient(value) {
+    this.setAttribute("gradient", value);
+  }
+  get bgImgMobile() {
+    return this.getAttribute("bgimg-mobile");
+  }
+  set bgImgMobile(value) {
+    this.setAttribute("bgimg-mobile", value);
+  }
+  get bgImgTablet() {
+    return this.getAttribute("bgimg-tablet");
+  }
+  set bgImgTablet(value) {
+    this.setAttribute("bgimg-tablet", value);
+  }
+  get bgImgLaptop() {
+    return this.getAttribute("bgimg-laptop");
+  }
+  set bgImgLaptop(value) {
+    this.setAttribute("bgimg-laptop", value);
+  }
+  get bgImgSize() {
+    return this.getAttribute("bgimgsize");
+  }
+  set bgImgSize(value) {
+    this.setAttribute("bgimgsize", value);
+  }
+  get bgImgPosition() {
+    return this.getAttribute("bgimgposition");
+  }
+  set bgImgPosition(value) {
+    this.setAttribute("bgimgposition", value);
+  }
+  get shadow() {
+    return this.getAttribute("shadow");
+  }
+  set shadow(value) {
+    this.setAttribute("shadow", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  connectedCallback() {
+    var _a, _b;
+    const anchorSlot = this.querySelector("[slot]");
+    if (anchorSlot) {
+      if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
+        this.shadowRoot.querySelector(".container").classList.toggle("anchored");
+      }
+    }
+    if (((_a = this.parentElement) == null ? void 0 : _a.getAttribute("align-items")) === "stretch") {
+      if (((_b = this.parentElement) == null ? void 0 : _b.getAttribute("direction")) === "column") {
+        this.$el.style.width = "100%";
+      } else {
+        this.$el.style.height = "100%";
+      }
+    }
+    if (this.hasAttribute("bgimg-mobile") || this.hasAttribute("bgimg-tablet") || this.hasAttribute("bgimg-laptop")) {
+      window.addEventListener("resize", this.onWindowResize);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.onWindowResize);
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "padding":
+        case "paddingblock":
+        case "paddinginline":
+        case "paddingtop":
+        case "paddingright":
+        case "paddingbottom":
+        case "paddingleft":
+          this.updateAttribute(attrName, oldValue, newValue, paddingValues);
+          break;
+        case "border":
+          this.updateAttribute(attrName, oldValue, newValue, borderValues);
+          break;
+        case "borderradius":
+          this.updateAttribute(attrName, oldValue, newValue, borderRadiusValues);
+          break;
+        case "noborderradius":
+          this.updateAttribute(attrName, oldValue, newValue, noBorderRadiusValues);
+          break;
+        case "bgcolor":
+          this.updateAttribute(attrName, oldValue, newValue, bgColorValues);
+          break;
+        case "gradient":
+          this.updateGradient(oldValue, newValue);
+          break;
+        case "bgimgsize":
+          this.updateAttribute(attrName, oldValue, newValue, bgImgSizeValues);
+          break;
+        case "bgimg-mobile":
+        case "bgimg-tablet":
+        case "bgimg-laptop":
+          if (newValue !== "") {
+            this.$el.classList.toggle("bgimg");
+            this.loadImg(attrName, newValue);
+          }
+          break;
+        case "bgimgposition":
+          if (newValue !== null && newValue !== "") {
+            this.$el.style.backgroundPosition = newValue;
+          }
+          break;
+        case "shadow":
+          this.updateAttribute(attrName, oldValue, newValue, shadowValues);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  loadImg(attrName, newValue) {
+    if (attrName === "bgimg-mobile") {
+      this.$el.style.backgroundImage = `url("${newValue}")`;
+    } else if (window.matchMedia("only screen and (min-width: 768px)").matches && attrName === "bgimg-tablet") {
+      this.$el.style.backgroundImage = `url("${newValue}")`;
+    } else if (window.matchMedia("only screen and (min-width: 1025px)").matches && attrName === "bgimg-laptop") {
+      this.$el.style.backgroundImage = `url("${newValue}")`;
+    }
+  }
+  updateGradient(oldValue, newValue) {
+    if (this.checkName(gradientValues, newValue)) {
+      this.$el.style.background = `linear-gradient(var(--px-color-bg-gradient-${newValue}))`;
+    } else {
+      console.error(`${newValue} is not an allowed gradient value for ${this.$el}`);
+    }
+  }
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
+    if (oldValue !== null && oldValue !== "") {
+      this.$el.classList.toggle(`${attrName}-${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "") {
+      this.$el.classList.toggle(`${attrName}-${newValue}`);
+    }
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+};
+_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 headingStyles$2 = new CSSStyleSheet();
+headingStyles$2.replaceSync(headingCss);
+const typographyStyles$4 = new CSSStyleSheet();
+typographyStyles$4.replaceSync(typographyCss$1);
+const variantValues$2 = ["", "default", "h1", "h2", "h3", "h4", "h5", "h6", "h7", "subtitle"];
+class AbstractHeading extends PxElement {
+  template() {
+    return `<slot></slot>`;
+  }
+  constructor(tagName) {
+    super(proximusSemanticStyleSheet, 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"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  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");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "variant":
+          this.updateAttribute(attrName, oldValue, newValue, variantValues$2);
+          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);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  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);
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad "${attrName}" value for`, this.$el);
+    }
+  }
+  updateTypography(attrName, oldValue, newValue, attrValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${newValue}`);
+    }
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad "${attrName}" value for`, this.$el);
+    }
+  }
+}
+const _H1 = class _H1 extends AbstractHeading {
+  constructor() {
+    super("h1");
+  }
+};
+_H1.nativeName = "h1";
+let H1 = _H1;
+customElements.define("px-h1", H1);
+const _H2 = class _H2 extends AbstractHeading {
+  constructor() {
+    super("h2");
+  }
+};
+_H2.nativeName = "h2";
+let H2 = _H2;
+customElements.define("px-h2", H2);
+const _H3 = class _H3 extends AbstractHeading {
+  constructor() {
+    super("h3");
+  }
+};
+_H3.nativeName = "h3";
+let H3 = _H3;
+customElements.define("px-h3", H3);
+const _H4 = class _H4 extends AbstractHeading {
+  constructor() {
+    super("h4");
+  }
+};
+_H4.nativeName = "h4";
+let H4 = _H4;
+customElements.define("px-h4", H4);
+const _H5 = class _H5 extends AbstractHeading {
+  constructor() {
+    super("h5");
+  }
+};
+_H5.nativeName = "h5";
+let H5 = _H5;
+customElements.define("px-h5", H5);
+const _H6 = class _H6 extends AbstractHeading {
+  constructor() {
+    super("h6");
+  }
+};
+_H6.nativeName = "h6";
+let H6 = _H6;
+customElements.define("px-h6", H6);
+const styles$9 = ':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$9 = new CSSStyleSheet();
+styleSheet$9.replaceSync(styles$9);
+const colorValues$1 = ["", "default", "inherit", "primary", "body", "details", "hover", "active", "disabled", "promo", "success", "warning", "error", "unlimited"];
+const _Icon = class _Icon extends PxElement {
+  constructor() {
+    super(proximusSemanticStyleSheet, styleSheet$9);
+    this.template = () => `<i aria-hidden="true"></i>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  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);
+  }
+  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);
+  }
+  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}`);
+          }
+          break;
+        case "size":
+          this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
+          break;
+        case "color":
+          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");
+          }
+          break;
+      }
+    }
+  }
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      if (attrName === "size") {
+        this.$el.classList.toggle(`${attrName}-${oldValue}`);
+      } else {
+        this.$el.classList.toggle(oldValue);
+      }
+    }
+    if (newValue !== null && newValue !== "" && oldValue !== "default") {
+      if (attrName === "size") {
+        this.$el.classList.toggle(`${attrName}-${newValue}`);
+      } else {
+        this.$el.classList.toggle(newValue);
+      }
+    }
+    if (!this.checkName(attrValues, newValue)) {
+      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 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);
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "showfor":
+          this.updateShowFor(oldValue, newValue);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  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(value) {
+    return ["", "s", "so", "mo", "m", "l"].includes(value);
+  }
+  updateShowFor(oldValue, newValue) {
+    if (this.checkName(newValue)) {
+      this.toggleClass(oldValue, newValue);
+    } else {
+      console.error(`Bad "showfor" value for`, this);
+    }
+  }
+}
+const _Image = class _Image extends AbstractImage {
+  constructor() {
+    super();
+    const $root = document.createElement(this.nativeName);
+    this.shadowRoot.appendChild($root);
+  }
+};
+_Image.nativeName = "img";
+let Image = _Image;
+customElements.define("px-image", Image);
+const _Picture = class _Picture extends AbstractImage {
+  constructor() {
+    super();
+    this.possibleImgExtension = ["webp", "svg", "apng", "png", "jpg", "jpeg", "jfif", "pjpeg", "pjp", "avif", "gif", "bmp", "ico", "cur", "tif", "tiff"];
+    const $root = document.createElement(this.nativeName);
+    this.shadowRoot.appendChild($root);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "loading", "alt", "src"];
+  }
+  get loading() {
+    return this.getAttribute("loading");
+  }
+  set loading(value) {
+    this.setAttribute("loading", value);
+  }
+  get alt() {
+    return this.getAttribute("alt");
+  }
+  set alt(value) {
+    this.setAttribute("alt", value);
+  }
+  get src() {
+    return this.getAttribute("src");
+  }
+  set src(value) {
+    this.setAttribute("src", value);
+  }
+  get $imgEl() {
+    return this.shadowRoot.querySelector("img");
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "src":
+          this.addSrc(newValue, this.alt, this.loading);
+          break;
+        case "loading":
+          this.updateLoading(newValue);
+          break;
+        case "alt":
+          this.updateAlt(newValue);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  removeSrc() {
+    this.$el.innerHTML = "";
+  }
+  async imgExists(imgUrl) {
+    const response = await fetch(imgUrl, { method: "HEAD" }).catch((err) => console.log("Error:", err));
+    return typeof response === "object" && response.ok && response.status != 404 && response.status != 403 && response.headers.get("Content-Type") != "text/html";
+  }
+  async transformImgPath(imgName, imgExtension, breakpoint) {
+    let imgLang = "";
+    if (imgName.endsWith("-en") || imgName.endsWith("-fr") || imgName.endsWith("-nl") || imgName.endsWith("-de")) {
+      imgLang = imgName.slice(-3);
+      imgName = imgName.slice(0, -3);
+    }
+    if (imgName.endsWith("-s") || imgName.endsWith("-m") || imgName.endsWith("-l")) {
+      imgName = imgName.slice(0, -2);
+    }
+    let imgPath = `${imgName}${breakpoint}${imgLang}.${imgExtension}`;
+    const imgOk = await this.imgExists(imgPath);
+    if (!imgOk) {
+      imgPath = "";
+    }
+    return imgPath;
+  }
+  addImg(imgPath, alt, loading) {
+    const img = document.createElement("img");
+    img.src = imgPath;
+    img.alt = alt || "";
+    if (loading && (loading === "lazy" || loading === "eager")) {
+      img.loading = loading;
+    }
+    this.$el.appendChild(img);
+  }
+  addSrcset(imgPath, media) {
+    if (imgPath !== "") {
+      const source = document.createElement("source");
+      source.media = media;
+      source.srcset = imgPath;
+      this.$el.insertBefore(source, this.$el.firstChild);
+    }
+  }
+  async addSrc(value, alt, loading) {
+    this.removeSrc();
+    if (!value) {
+      console.error('No "src" value for ', this);
+      return;
+    }
+    const imgExtension = value.split(".").pop();
+    if (!this.possibleImgExtension.includes(imgExtension)) {
+      console.error('No extensions image to "src" value for ', this);
+      return;
+    }
+    const imgName = value.slice(0, (imgExtension.length + 1) * -1);
+    let imgPathS = value;
+    const imgOk = await this.imgExists(imgPathS);
+    if (!imgOk) {
+      imgPathS = await this.transformImgPath(imgName, imgExtension, "-s");
+    }
+    if (imgPathS === "") {
+      console.error('Bad "src" value for ', this);
+      return;
+    }
+    const imgPathM = await this.transformImgPath(imgName, imgExtension, "-m");
+    this.addSrcset(imgPathM, "only screen and (min-width: 40.0625em)");
+    const imgPathL = await this.transformImgPath(imgName, imgExtension, "-l");
+    this.addSrcset(imgPathL, "only screen and (min-width: 64.0625em)");
+    this.addImg(imgPathS, alt, loading);
+  }
+  updateLoading(loading) {
+    if (!this.$imgEl || !this.src) {
+      return;
+    }
+    if (loading && (loading === "lazy" || loading === "eager")) {
+      this.$imgEl.loading = loading;
+    } else {
+      this.$imgEl.removeAttribute("loading");
+    }
+  }
+  updateAlt(alt) {
+    if (!this.$imgEl || !this.src) {
+      return;
+    }
+    this.$imgEl.alt = alt || "";
+  }
+};
+_Picture.nativeName = "picture";
+let Picture = _Picture;
+customElements.define("px-picture", Picture);
+const styleSheet$7 = new CSSStyleSheet();
+styleSheet$7.replaceSync(styles$a);
+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">
+            <slot></slot>
+        </div>
+    `;
+  }
+  static get observedAttributes() {
+    return ["variant", "shape", "inverted"];
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".patch");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", 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 "shape":
+          this.updateShape(oldValue, newValue);
+          break;
+      }
+    }
+  }
+  _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);
+  }
+  updateVariant(oldValue, newValue) {
+    this._toggleClass(oldValue, newValue);
+    if (!this.checkName(this.variantValues, newValue)) {
+      console.error(`Bad "variant" value for patch`);
+    }
+  }
+  updateShape(oldValue, newValue) {
+    this._toggleClass(oldValue, newValue);
+    if (!this.checkName(this.shapeValues, newValue)) {
+      console.error(`Bad "shape" value for patch`);
+    }
+  }
+}
+class ProximusPatch extends Patch {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+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 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>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "variant", "size", "inverted"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  connectedCallback() {
+    this.buildPrice();
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "variant":
+          this.updateAttribute(attrName, oldValue, newValue, variantValues$1);
+          break;
+        case "size":
+          this.updateAttribute(attrName, oldValue, newValue, sizeValues$1);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+  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);
+    }
+  }
+  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}`);
+    }
+  }
+  buildPrice() {
+    let price = this.innerHTML.trim();
+    const oldPrice = this.querySelector("s");
+    let strikethroughPrice = "";
+    if (oldPrice && oldPrice.innerText !== "") {
+      oldPrice.innerText = "€" + oldPrice.innerText;
+      price = oldPrice.nextSibling.textContent;
+      strikethroughPrice = oldPrice.outerHTML + " ";
+    } else if (oldPrice && oldPrice.innerText === "") {
+      price = oldPrice.nextSibling.textContent;
+    }
+    const isNumeric = /^[\d|.|,]+/.test(price);
+    let euro = "";
+    if (isNumeric) {
+      euro = '<span class="euro">€</span>';
+    } else {
+      euro = "";
+    }
+    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>`;
+    } else {
+      this.innerHTML = `${strikethroughPrice}${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 _Ribbon = class _Ribbon extends PxElement {
+  constructor() {
+    super(proximusSemanticStyleSheet, styles$7);
+    this.template = () => `<div class="ribbon"><slot></slot></div>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+};
+_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 sizeValues = ["", "none", "s", "m", "l"];
+const colorValues = ["", "contrasted", "action-hover", "action-active", "none", "success", "error", "warning", "unlimited"];
+const _Separator = class _Separator extends PxElement {
+  constructor() {
+    super(proximusSemanticStyleSheet, styleSheet$6);
+    const $root = document.createElement(this.nativeName);
+    this.shadowRoot.appendChild($root);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "direction", "size", "color", "inverted"];
+  }
+  get direction() {
+    return this.getAttribute("direction");
+  }
+  set direction(value) {
+    this.setAttribute("direction", 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 inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "direction":
+          this.updateAttribute(attrName, oldValue, newValue, directionValues);
+          break;
+        case "size":
+          this.updateAttribute(attrName, oldValue, newValue, sizeValues);
+          break;
+        case "color":
+          this.updateAttribute(attrName, oldValue, newValue, colorValues);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  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);
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad "${attrName}" value for`, this.$el);
+    }
+  }
+};
+_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);
+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">
+            <slot name="before"></slot>
+            <slot></slot>
+        </div>
+    `;
+  }
+  static get observedAttributes() {
+    return ["variant", "shape", "inverted"];
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".tag");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", 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 "shape":
+          this.updateShape(oldValue, newValue);
+          break;
+      }
+    }
+  }
+  _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);
+  }
+  updateVariant(oldValue, newValue) {
+    this._toggleClass(oldValue, newValue);
+    if (!this.checkName(this.variantValues, newValue)) {
+      console.error(`Bad "variant" value for tag`);
+    }
+  }
+  updateShape(oldValue, newValue) {
+    this._toggleClass(oldValue, newValue);
+    if (!this.checkName(this.shapeValues, newValue)) {
+      console.error(`Bad "shape" value for tag`);
+    }
+  }
+}
+class ProximusTag extends Tag {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+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);
+class Tabs extends HTMLElement {
+  constructor(semanticStyleSheet) {
+    super();
+    this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`;
+    this.template = () => `
+    <div id="container">
+      <div role="tablist" aria-labelledby="${this._label}">
+        <slot name="tabs"></slot> 
+      </div>
+      <div id="panels">
+        <slot name="tabpanels"></slot>
+      </div>
+    </div>
+  `;
+    this.attachShadow({ mode: "open" });
+    if (this.getAttribute("label")) {
+      this._label = this.getAttribute("label");
+    }
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
+  }
+  static get observedAttributes() {
+    return ["label", "inverted"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "label") {
+      this.label = newValue;
+    }
+  }
+  connectedCallback() {
+    this.addEventListener("click", (event) => {
+      var _a;
+      if ((_a = event.target.localName) == null ? void 0 : _a.endsWith("-tab")) {
+        this.$activePanel.selected = false;
+        this.$activeTab.selected = "false";
+        const tab = event.target;
+        if (tab) {
+          tab.selected = "";
+        }
+        if (this.$activePanel) {
+          this.$activePanel.selected = true;
+        } else {
+          console.error("No panel found for this tab");
+        }
+      }
+    });
+    this.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        const nextTab = this.$nextTab;
+        const previousTab = this.$previousTab;
+        this.$activePanel.selected = false;
+        this.$activeTab.selected = "false";
+        if (event.key === "ArrowRight") {
+          nextTab.selected = "";
+        } else if (event.key === "ArrowLeft") {
+          previousTab.selected = "";
+        }
+        this.$activePanel.selected = true;
+      }
+    });
+  }
+  get $activeTab() {
+    return this.querySelector('[selected=""][slot="tabs"]');
+  }
+  get $nextTab() {
+    const nextTab = this.$activeTab.nextElementSibling;
+    if (nextTab.slot !== "tabs") {
+      return this.querySelector('[slot="tabs"]');
+    } else {
+      return nextTab;
+    }
+  }
+  get $previousTab() {
+    const previousTab = this.$activeTab.previousElementSibling;
+    if (!previousTab) {
+      return Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
+    } else {
+      return previousTab;
+    }
+  }
+  get $activePanel() {
+    return this.querySelector(`[name="${this.$activeTab.for}"]`);
+  }
+  get $tabList() {
+    return this.shadowRoot.querySelector('[role="tablist"]');
+  }
+  get label() {
+    return this.$tabList.getAttribute("aria-labelledby");
+  }
+  set label(value) {
+    this.$tabList.setAttribute("aria-labelledby", value);
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+}
+class Tab extends HTMLElement {
+  constructor(semanticStyleSheet) {
+    super();
+    this.template = (title, selected) => `
+    <button role="tab" aria-selected="${selected}" type="button" tabindex="-1">
+      <span><slot>${title}</slot></span>
+    </button>
+  `;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template(this.getAttribute("title"), this.getAttribute("selected"));
+    this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
+    if (!this.name) {
+      console.error("Tab needs a name attribute");
+    }
+    if (!this.for) {
+      console.error("Tab needs a for attribute");
+    }
+    this.slot = "tabs";
+  }
+  static get observedAttributes() {
+    return ["selected", "for", "name"];
+  }
+  connectedCallback() {
+    if (this.parentElement.inverted) {
+      this.setAttribute("inverted", "");
+      this.$button.setAttribute("inverted", "");
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "selected") {
+      this.handleSelected(newValue);
+    } else if (name === "name") {
+      this.$button.setAttribute("id", newValue);
+    } else if (name === "for") {
+      this.$button.setAttribute("aria-controls", newValue);
+    }
+  }
+  get $button() {
+    return this.shadowRoot.querySelector("button");
+  }
+  get selected() {
+    return this.$button.getAttribute("aria-selected");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set for(value) {
+    this.setAttribute("for", value);
+  }
+  get for() {
+    return this.getAttribute("for");
+  }
+  handleSelected(value) {
+    if (!isFalsy(value)) {
+      this.$button.setAttribute("aria-selected", value);
+      this.$button.removeAttribute("tabindex");
+      this.$button.focus();
+    } else {
+      this.$button.removeAttribute("aria-selected");
+      this.$button.tabIndex = -1;
+    }
+  }
+  set selected(value) {
+    this.setAttribute("selected", value);
+  }
+}
+class TabPanel extends HTMLElement {
+  constructor(semanticStyleSheet) {
+    super();
+    this.template = () => `
+    <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
+      <slot></slot>
+    </div>
+  `;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
+    if (!this.name) {
+      console.error("TabPanel needs a name attribute");
+    }
+    this.slot = "tabpanels";
+  }
+  static get observedAttributes() {
+    return ["name"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "name") {
+      this.$panel.setAttribute("aria-labelledby", newValue);
+    }
+  }
+  connectedCallback() {
+    const labelledBy = this.parentElement.querySelector(`[for="${this.getAttribute("name")}"]`);
+    if (labelledBy) {
+      this.$panel.setAttribute("aria-labelledby", labelledBy.getAttribute("name"));
+    } else {
+      console.error("No tab found for this panel");
+    }
+    const selectedTab = this.parentElement.querySelector(`[for="${this.name}"]`);
+    if (!isFalsy(selectedTab.selected)) {
+      this.selected = true;
+    } else {
+      this.selected = false;
+    }
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  set selected(value) {
+    if (value) {
+      this.$panel.style.display = "block";
+    } else {
+      this.$panel.style.display = "none";
+    }
+  }
+  get $panel() {
+    return this.shadowRoot.querySelector('[role="tabpanel"]');
+  }
+}
+class PxTabs extends Tabs {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+    this.querySelectorAll("px-tab").forEach((tab) => {
+      tab.setAttribute("slot", "tabs");
+    });
+  }
+}
+if (!customElements.get("px-tabs")) {
+  customElements.define("px-tabs", PxTabs);
+}
+class PxTab extends Tab {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+if (!customElements.get("px-tab")) {
+  customElements.define("px-tab", PxTab);
+}
+class PxTabPanel extends TabPanel {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+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);
+class Timeline extends HTMLElement {
+  template() {
+    return `
+        <ol class="timeline" role="list">
+            <slot></slot>
+        </ol>
+    `;
+  }
+  constructor(semanticTokensStylesheet) {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$3];
+  }
+  static get observedAttributes() {
+    return ["inverted"];
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".timeline");
+  }
+  get $children() {
+    return this.querySelectorAll("px-timeline-item");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  connectedCallback() {
+    this.configureChildren();
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "inverted":
+          for (let i = 0; i < this.$children.length; i++) {
+            this.$children[i].toggleAttribute("inverted");
+          }
+          break;
+      }
+    }
+  }
+  configureChildren() {
+    const lastChild = this.$children[this.$children.length - 1];
+    lastChild == null ? void 0 : lastChild.toggleAttribute("lastchild");
+    for (let i = 0; i < this.$children.length; i++) {
+      this.$children[i].setAttribute("item", `${i + 1}`);
+    }
+  }
+}
+class ProximusTimeline extends Timeline {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+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);
+let item = "1";
+class TimelineItem extends HTMLElement {
+  template() {
+    return `
+        <li class="timeline-item" role="listitem">
+            <div class="indicator-area">
+                <div class="indicator"></div>
+            </div>
+            <div class="content-area">
+                <slot name="title"></slot>
+                <slot name="content"></slot>
+            </div>
+        </li>
+    `;
+  }
+  constructor(semanticTokensStylesheet) {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$2];
+  }
+  static get observedAttributes() {
+    return ["inverted", "lastchild", "item"];
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".timeline-item");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  get lastchild() {
+    return this.getAttribute("lastchild");
+  }
+  set lastchild(value) {
+    this.setAttribute("lastchild", value);
+  }
+  get item() {
+    return this.getAttribute("item");
+  }
+  set item(value) {
+    this.setAttribute("item", value);
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "item":
+          this.updateItem(oldValue, newValue);
+          this.updateIndicator(item);
+          break;
+      }
+    }
+  }
+  updateItem(oldValue, newValue) {
+    if (oldValue !== null && oldValue !== "") {
+      item = oldValue;
+    }
+    if (newValue !== null && newValue !== "") {
+      item = newValue;
+    }
+  }
+  updateIndicator(item2) {
+    const indicator = this.$el.querySelector(".indicator");
+    indicator.innerHTML = item2;
+  }
+}
+class ProximusTimelineItem extends TimelineItem {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+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 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);
+addGlobalStylesheet(lightStyles$1);
+class Modal extends HTMLElement {
+  constructor() {
+    super();
+    this.open = false;
+    this.template = `<px-container padding="m" popover> <!-- adding popver here is the only way to style of the modal -->
+    <px-stack gap="component-default-vertical" direction="column">
+      <px-stack direction="column" gap="under-text-vertical">
+        <slot name="title"></slot>
+        <slot name="description"></slot>
+      </px-stack>
+      <slot></slot>
+      <px-separator size="l"></px-separator>
+      <px-stack gap="component-compact-horizontal" justify-content="end">
+        <slot name="footer"></slot>
+      </px-stack>
+    </px-stack>
+  </px-container>`;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template;
+    this.shadowRoot.adoptedStyleSheets = [proximusSemanticStyleSheet, styleSheet$1];
+  }
+  connectedCallback() {
+    var _a;
+    const targetButtonList = document.querySelectorAll(`px-button[popovertarget="${this.getAttribute("id")}"]`);
+    targetButtonList.forEach((targetButton) => {
+      targetButton.onclick = (event) => {
+        var _a2;
+        (_a2 = this.showPopover) == null ? void 0 : _a2.call(this);
+        this.open = true;
+        this.displayBlurredBackground();
+        event.stopPropagation();
+      };
+    });
+    const ctas = this.querySelectorAll('px-button[slot="footer"]');
+    ctas.forEach((cta) => {
+      cta.onclick = () => {
+        this._hidePopover();
+      };
+    });
+    if (this.autoShow != null) {
+      (_a = this.showPopover) == null ? void 0 : _a.call(this);
+      this.open = true;
+      this.displayBlurredBackground();
+    }
+  }
+  displayBlurredBackground() {
+    this.blurredBackground = document.createElement("div");
+    this.blurredBackground.id = "popover-background";
+    this.blurredBackground.classList.toggle("lavender-blurred-modal-background");
+    this.blurredBackground.addEventListener("click", (event) => {
+      if (this.open && !this.contains(event.target)) {
+        this._hidePopover();
+      }
+    });
+    document.body.appendChild(this.blurredBackground);
+  }
+  _hidePopover() {
+    var _a;
+    this.blurredBackground.parentElement.removeChild(this.blurredBackground);
+    (_a = this.hidePopover) == null ? void 0 : _a.call(this);
+    this.open = false;
+  }
+  get autoShow() {
+    return this.getAttribute("autoshow");
+  }
+}
+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 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);
+    this.template = () => `<span>
+        <slot name="before"></slot>
+        <slot></slot>
+        <slot name="after"></slot>
+    </span>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "color", "fontsize", "fontweight", "inverted"];
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  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");
+  }
+  set inverted(value) {
+    if (isFalsy(value)) {
+      this.removeAttribute("inverted");
+    } else {
+      this.setAttribute("inverted", value);
+    }
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        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);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+  updateTypography(attrName, oldValue, newValue, attrValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${newValue}`);
+    }
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad ${attrName} value for ${this.$el}`);
+    }
+  }
+};
+_Span.nativeName = "span";
+let Span = _Span;
+customElements.define("px-span", Span);
+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 _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"];
+    this.shapeValues = ["", "default", "alternative"];
+    this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
+    const $root = document.createElement(this.nativeName);
+    $root.innerHTML = this.template();
+    this.shadowRoot.appendChild($root);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "disabled", "variant", "shape", "extended", "inverted", "fontsize", "color", "fontweight"];
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(value) {
+    this.setAttribute("disabled", value);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(value) {
+    this.setAttribute("shape", value);
+  }
+  get extended() {
+    return this.getAttribute("extended");
+  }
+  set extended(value) {
+    this.setAttribute("extended", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  get fontsize() {
+    return this.getAttribute("fontsize");
+  }
+  set fontsize(value) {
+    this.setAttribute("fontsize", value);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  get fontweight() {
+    return this.getAttribute("fontweight");
+  }
+  set fontweight(value) {
+    this.setAttribute("fontweight", value);
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "disabled":
+          this.$el.toggleAttribute("aria-disabled");
+          if (newValue !== null) {
+            this.$el.setAttribute("aria-disabled", "true");
+          }
+          break;
+        case "variant":
+          this.updateVariant(oldValue, newValue);
+          break;
+        case "shape":
+          this.updateShape(oldValue, newValue);
+          break;
+        case "extended":
+          this.$el.classList.toggle(attrName);
+          break;
+        case "fontsize":
+          this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
+          break;
+        case "color":
+          this.updateTypography(attrName, oldValue, newValue, colorValues$2);
+          break;
+        case "fontweight":
+          this.updateTypography(attrName, oldValue, newValue, fontweightValues);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+  _toggleClassList(value) {
+    if (value.startsWith("btn-")) {
+      const splittedValue = value.split("-");
+      for (const classVar of splittedValue) {
+        this.$el.classList.toggle(classVar);
+      }
+    } else {
+      this.$el.classList.toggle(value);
+    }
+  }
+  updateVariant(oldValue, newValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "link") {
+      this._toggleClassList(oldValue);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "link") {
+      this._toggleClassList(newValue);
+    }
+    if (!this.checkName(this.variantValues, newValue)) {
+      console.error(`Bad "variant" value for ${this.$el}`);
+    }
+  }
+  updateShape(oldValue, newValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this._toggleClassList(oldValue);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this._toggleClassList(newValue);
+    }
+    if (!this.checkName(this.shapeValues, newValue)) {
+      console.error(`Bad "shape" value for ${this.$el}`);
+    }
+  }
+  updateTypography(attrName, oldValue, newValue, attrValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${newValue}`);
+    }
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad ${attrName} value for ${this.$el}`);
+    }
+  }
+};
+_Link.nativeName = "a";
+let Link = _Link;
+class ProximusLink extends Link {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+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 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 textalignValues = ["", "default", "left", "center", "right"];
+const _Paragraph = class _Paragraph extends PxElement {
+  constructor() {
+    super(proximusSemanticStyleSheet, 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"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  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 textalign() {
+    return this.getAttribute("textalign");
+  }
+  set textalign(value) {
+    this.setAttribute("textalign", 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.updateAttribute(attrName, oldValue, newValue, variantValues);
+          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);
+          break;
+        case "textalign":
+          this.updateTypography(attrName, oldValue, newValue, textalignValues);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  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);
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad ${attrName} value for ${this.$el}`);
+    }
+  }
+  updateTypography(attrName, oldValue, newValue, attrValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${newValue}`);
+    }
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad ${attrName} value for ${this.$el}`);
+    }
+  }
+};
+_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 lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
+const typographyStyles = new CSSStyleSheet();
+const headingStyles = new CSSStyleSheet();
+const linkStyles = new CSSStyleSheet();
+const paragraphStyles = new CSSStyleSheet();
+const spanStyles = new CSSStyleSheet();
+typographyStyles.replaceSync(typographyCss);
+headingStyles.replaceSync(headingCss);
+linkStyles.replaceSync(linkCss);
+paragraphStyles.replaceSync(paragraphCss);
+spanStyles.replaceSync(spanCss);
+addGlobalStylesheet(lightStyles);
+class Typography extends HTMLElement {
+  constructor() {
+    super();
+    this.template = () => `<slot></slot>`;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [proximusSemanticStyleSheet, typographyStyles, headingStyles, linkStyles, paragraphStyles, spanStyles];
+  }
+  static get observedAttributes() {
+    return ["inverted"];
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  connectedCallback() {
+    this.querySelectorAll("li").forEach((li) => {
+      li.classList.add("li");
+    });
+  }
+}
+customElements.define("px-typography", Typography);
+export {
+  Accordion,
+  Container,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  HStack,
+  HeadingGroup,
+  Icon,
+  Image,
+  Modal,
+  Page,
+  Paragraph,
+  Picture,
+  Price,
+  ProximusButton,
+  ProximusLink,
+  ProximusPatch,
+  ProximusTag,
+  ProximusTimeline,
+  ProximusTimelineItem,
+  PxElement,
+  PxStack,
+  PxTab,
+  PxTabPanel,
+  PxTabs,
+  Ribbon,
+  Section,
+  Separator,
+  Spacer,
+  Span,
+  Stack,
+  Typography,
+  VStack,
+  WithFlexAttributes,
+  addGlobalStylesheet,
+  bgColorValues,
+  borderRadiusValues,
+  borderValues,
+  colorValues$2 as colorValues,
+  fontsizeValues,
+  fontweightValues,
+  gapValues,
+  getSupportedAttributeNames,
+  getViewportFormat,
+  gradientValues,
+  iconSizeValues,
+  isFalsy,
+  paddingValues,
+  proximusSemanticStyleSheet,
+  shadowValues
+};