@proximus/lavender-header 1.0.0-alpha.9 → 1.0.0

package/dist/index.es.js

@@ -0,0 +1,4031 @@
+var yt = (i) => {
+  throw TypeError(i);
+};
+var J = (i, t, e) => t.has(i) || yt("Cannot " + e);
+var d = (i, t, e) => (J(i, t, "read from private field"), e ? e.call(i) : t.get(i)), h = (i, t, e) => t.has(i) ? yt("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), q = (i, t, e, r) => (J(i, t, "write to private field"), r ? r.call(i, e) : t.set(i, e), e), p = (i, t, e) => (J(i, t, "access private method"), e);
+import { PxElement as x, cssTokenBreakpoints as f, paddingValues as v, boxShadowValues as xe, backgroundSizeValues as fe, noBorderRadiusValues as me, borderRadiusValues as ke, borderSideValues as Ae, borderValues as ye, gradientValues as $e, backgroundColorValues as zt, borderColorValues as Ce, checkName as y, transferAccessibilityAttributes as Et, WithExtraAttributes as $, fontsizeValues as we, fontweightValues as Se, colorValues as ze } from "@proximus/lavender-common";
+import "@proximus/lavender-layout";
+const Ee = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.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:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', Lt = new CSSStyleSheet();
+Lt.replaceSync(Ee);
+const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:host([${i}${e ? `--${e}` : ""}='${t}']) .container`, k = "px-padding", ct = class ct extends x {
+  constructor() {
+    super(
+      Lt,
+      f(
+        "padding",
+        m,
+        v,
+        k,
+        "--container-padding"
+      ),
+      f(
+        "padding-inline",
+        m,
+        v,
+        k
+      ),
+      f(
+        "padding-block",
+        m,
+        v,
+        k
+      ),
+      f(
+        "padding-top",
+        m,
+        v,
+        k
+      ),
+      f(
+        "padding-right",
+        m,
+        v,
+        k,
+        "--container-padding-right"
+      ),
+      f(
+        "padding-bottom",
+        m,
+        v,
+        k
+      ),
+      f(
+        "padding-left",
+        m,
+        v,
+        k,
+        "--container-padding-left"
+      )
+    ), this.template = () => `<div class="container">
+    <slot name="anchor-left"></slot>
+    <slot name="anchor-right"></slot>
+    <slot name="anchor-full"></slot>
+    <slot></slot>
+    </div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "border",
+      "border-color",
+      "border-side",
+      "border-side--mobile",
+      "border-side--tablet",
+      "border-side--laptop",
+      "border-radius",
+      "no-border-radius",
+      "no-border-radius--mobile",
+      "no-border-radius--tablet",
+      "no-border-radius--laptop",
+      "background-color",
+      "background-color--mobile",
+      "background-color--tablet",
+      "background-color--laptop",
+      "background-gradient",
+      "background-gradient--mobile",
+      "background-gradient--tablet",
+      "background-gradient--laptop",
+      "background-image",
+      "background-image--mobile",
+      "background-image--tablet",
+      "background-image--laptop",
+      "background-size",
+      "background-position",
+      "box-shadow",
+      "anchor-offset",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main");
+    const t = this.querySelector("[slot]");
+    t && Le.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), this._bgObserver = new IntersectionObserver((e) => {
+      e.forEach((r) => {
+        var o;
+        r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (o = this._bgObserver) == null || o.disconnect());
+      });
+    }), this._bgObserver.observe(this.$el);
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this._bgObserver) == null || t.disconnect();
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "border":
+          this.updateAttribute(t, e, r, ye);
+          break;
+        case "border-color":
+          this.updateBorderColor(t, r);
+          break;
+        case "border-side":
+        case "border-side--mobile":
+        case "border-side--tablet":
+        case "border-side--laptop":
+          this.updateAttribute(t, e, r, Ae);
+          break;
+        case "border-radius":
+          this.updateAttribute(
+            t,
+            e,
+            r,
+            ke
+          );
+          break;
+        case "no-border-radius":
+        case "no-border-radius--mobile":
+        case "no-border-radius--tablet":
+        case "no-border-radius--laptop":
+          this.updateNoBorderRadius(
+            t,
+            e,
+            r,
+            me
+          );
+          break;
+        case "background-color":
+        case "background-color--mobile":
+        case "background-color--tablet":
+        case "background-color--laptop":
+          this.updateBackgroundColor(t, r);
+          break;
+        case "background-gradient":
+        case "background-gradient--mobile":
+        case "background-gradient--tablet":
+        case "background-gradient--laptop":
+          this.updateGradient(t, r);
+          break;
+        case "background-size":
+          this.updateAttribute(
+            t,
+            e,
+            r,
+            fe
+          );
+          break;
+        case "background-image":
+        case "background-image--mobile":
+        case "background-image--tablet":
+        case "background-image--laptop":
+          this._isInViewport && this.updateBackgroundImg(t, r);
+          break;
+        case "background-position":
+          r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
+          break;
+        case "box-shadow":
+          this.updateAttribute(t, e, r, xe);
+          break;
+        case "anchor-offset":
+          this.updateAnchorOffset(e, r, v);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  _loadBackgroundImages() {
+    [
+      "background-image",
+      "background-image--mobile",
+      "background-image--tablet",
+      "background-image--laptop"
+    ].forEach((e) => {
+      const r = this.getAttribute(e);
+      r && this.updateBackgroundImg(e, r);
+    });
+  }
+  updateBackgroundImg(t, e) {
+    this.$el.style.setProperty(`--${t}`, `url("${e}")`);
+  }
+  updateGradient(t, e) {
+    if (this.checkName($e, e)) {
+      const r = this.splitAttrNameFromBreakpoint(t);
+      t = r.attrName;
+      const o = r.breakpoint;
+      this.$el.style.setProperty(
+        `--${t}${o}`,
+        `linear-gradient(var(--px-color-background-gradient-${e}))`
+      );
+    } else
+      console.error(`${e} is not an allowed background-gradient value`);
+  }
+  updateBackgroundColor(t, e) {
+    const r = e.startsWith("surface-");
+    if (this.checkName(zt, e)) {
+      const o = this.splitAttrNameFromBreakpoint(t), a = o.breakpoint;
+      this.$el.style.setProperty(
+        `--${o.attrName}${a}`,
+        `var(--px-color-background-${e}${r ? "" : "-default"})`
+      ), this.$el.style.setProperty(
+        `--${o.attrName}-inverted${a}`,
+        `var(--px-color-background-${e}${r ? "" : "-inverted"})`
+      );
+    } else
+      console.error(`${e} is not an allowed ${t} value`);
+  }
+  updateBorderColor(t, e) {
+    this.checkName(Ce, e) ? (this.$el.style.setProperty(
+      `--${t}`,
+      `var(--px-color-border-${e}-default)`
+    ), this.$el.style.setProperty(
+      `--${t}-inverted`,
+      `var(--px-color-border-${e}-inverted)`
+    )) : console.error(`${e} is not an allowed ${t} value`);
+  }
+  updateNoBorderRadius(t, e, r, o) {
+    if (!this.checkName(o, r))
+      console.error(`${r} is not an allowed ${t} value`);
+    else {
+      const a = this.splitAttrNameFromBreakpoint(t), s = a.breakpoint;
+      e !== null && e !== "" && this.$el.classList.toggle(
+        `${a.attrName}-${e}${s}`
+      ), r !== null && r !== "" && this.$el.classList.toggle(
+        `${a.attrName}-${r}${s}`
+      );
+    }
+  }
+  updateAttribute(t, e, r, o) {
+    if (!this.checkName(o, r))
+      console.error(`${r} is not an allowed ${t} value`);
+    else {
+      const a = this.splitAttrNameFromBreakpoint(t), s = a.breakpoint;
+      e !== null && e !== "" && this.$el.classList.toggle(
+        `${a.attrName}-${e}${s}`
+      ), r !== null && r !== "" && this.$el.classList.toggle(
+        `${a.attrName}-${r}${s}`
+      );
+    }
+  }
+  splitAttrNameFromBreakpoint(t) {
+    let e = "";
+    if (["--mobile", "--tablet", "--laptop"].some(
+      (r) => t.includes(r)
+    )) {
+      const r = t.split("--");
+      t = r[0], e = `--${r[1]}`;
+    }
+    return { attrName: t, breakpoint: e };
+  }
+  updateAnchorOffset(t, e, r) {
+    if (!y(r, e)) {
+      console.error(`${e} is not a valid anchor-offset value`);
+      return;
+    }
+    const o = (a) => {
+      a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
+        "--container-anchor-offset--mobile",
+        `var(--px-padding-${a}-mobile)`
+      ), this.$el.style.setProperty(
+        "--container-anchor-offset--tablet",
+        `var(--px-padding-${a}-tablet)`
+      ), this.$el.style.setProperty(
+        "--container-anchor-offset--laptop",
+        `var(--px-padding-${a}-laptop)`
+      ));
+    };
+    o(t), o(e);
+  }
+  get padding() {
+    return this.getAttribute("padding");
+  }
+  set padding(t) {
+    this.setAttribute("padding", t);
+  }
+  get paddingBlock() {
+    return this.getAttribute("padding-block");
+  }
+  set paddingBlock(t) {
+    this.setAttribute("padding-block", t);
+  }
+  get paddingInline() {
+    return this.getAttribute("padding-inline");
+  }
+  set paddingInline(t) {
+    this.setAttribute("padding-inline", t);
+  }
+  get paddingTop() {
+    return this.getAttribute("padding-top");
+  }
+  set paddingTop(t) {
+    this.setAttribute("padding-top", t);
+  }
+  get paddingRight() {
+    return this.getAttribute("padding-right");
+  }
+  set paddingRight(t) {
+    this.setAttribute("padding-right", t);
+  }
+  get paddingBottom() {
+    return this.getAttribute("padding-bottom");
+  }
+  set paddingBottom(t) {
+    this.setAttribute("padding-bottom", t);
+  }
+  get paddingLeft() {
+    return this.getAttribute("padding-left");
+  }
+  set paddingLeft(t) {
+    this.setAttribute("padding-left", t);
+  }
+  get paddingMobile() {
+    return this.getAttribute("padding--mobile");
+  }
+  set paddingMobile(t) {
+    this.setAttribute("padding--mobile", t);
+  }
+  get paddingBlockMobile() {
+    return this.getAttribute("padding-block--mobile");
+  }
+  set paddingBlockMobile(t) {
+    this.setAttribute("padding-block--mobile", t);
+  }
+  get paddingInlineMobile() {
+    return this.getAttribute("padding-inline--mobile");
+  }
+  set paddingInlineMobile(t) {
+    this.setAttribute("padding-inline--mobile", t);
+  }
+  get paddingTopMobile() {
+    return this.getAttribute("padding-top--mobile");
+  }
+  set paddingTopMobile(t) {
+    this.setAttribute("padding-top--mobile", t);
+  }
+  get paddingRightMobile() {
+    return this.getAttribute("padding-right--mobile");
+  }
+  set paddingRightMobile(t) {
+    this.setAttribute("padding-right--mobile", t);
+  }
+  get paddingBottomMobile() {
+    return this.getAttribute("padding-bottom--mobile");
+  }
+  set paddingBottomMobile(t) {
+    this.setAttribute("padding-bottom--mobile", t);
+  }
+  get paddingLeftMobile() {
+    return this.getAttribute("padding-left--mobile");
+  }
+  set paddingLeftMobile(t) {
+    this.setAttribute("padding-left--mobile", t);
+  }
+  get paddingTablet() {
+    return this.getAttribute("padding--tablet");
+  }
+  set paddingTablet(t) {
+    this.setAttribute("padding--tablet", t);
+  }
+  get paddingBlockTablet() {
+    return this.getAttribute("padding-block--tablet");
+  }
+  set paddingBlockTablet(t) {
+    this.setAttribute("padding-block--tablet", t);
+  }
+  get paddingInlineTablet() {
+    return this.getAttribute("padding-inline--tablet");
+  }
+  set paddingInlineTablet(t) {
+    this.setAttribute("padding-inline--tablet", t);
+  }
+  get paddingTopTablet() {
+    return this.getAttribute("padding-top--tablet");
+  }
+  set paddingTopTablet(t) {
+    this.setAttribute("padding-top--tablet", t);
+  }
+  get paddingRightTablet() {
+    return this.getAttribute("padding-right--tablet");
+  }
+  set paddingRightTablet(t) {
+    this.setAttribute("padding-right--tablet", t);
+  }
+  get paddingBottomTablet() {
+    return this.getAttribute("padding-bottom--tablet");
+  }
+  set paddingBottomTablet(t) {
+    this.setAttribute("padding-bottom--tablet", t);
+  }
+  get paddingLeftTablet() {
+    return this.getAttribute("padding-left--tablet");
+  }
+  set paddingLeftTablet(t) {
+    this.setAttribute("padding-left--tablet", t);
+  }
+  get paddingLaptop() {
+    return this.getAttribute("padding--laptop");
+  }
+  set paddingLaptop(t) {
+    this.setAttribute("padding--laptop", t);
+  }
+  get paddingBlockLaptop() {
+    return this.getAttribute("padding-block--laptop");
+  }
+  set paddingBlockLaptop(t) {
+    this.setAttribute("padding-block--laptop", t);
+  }
+  get paddingInlineLaptop() {
+    return this.getAttribute("padding-inline--laptop");
+  }
+  set paddingInlineLaptop(t) {
+    this.setAttribute("padding-inline--laptop", t);
+  }
+  get paddingTopLaptop() {
+    return this.getAttribute("padding-top--laptop");
+  }
+  set paddingTopLaptop(t) {
+    this.setAttribute("padding-top--laptop", t);
+  }
+  get paddingRightLaptop() {
+    return this.getAttribute("padding-right--laptop");
+  }
+  set paddingRightLaptop(t) {
+    this.setAttribute("padding-right--laptop", t);
+  }
+  get paddingBottomLaptop() {
+    return this.getAttribute("padding-bottom--laptop");
+  }
+  set paddingBottomLaptop(t) {
+    this.setAttribute("padding-bottom--laptop", t);
+  }
+  get paddingLeftLaptop() {
+    return this.getAttribute("padding-left--laptop");
+  }
+  set paddingLeftLaptop(t) {
+    this.setAttribute("padding-left--laptop", t);
+  }
+  get border() {
+    return this.getAttribute("border");
+  }
+  set border(t) {
+    this.setAttribute("border", t);
+  }
+  get borderColor() {
+    return this.getAttribute("border-color");
+  }
+  set borderColor(t) {
+    this.setAttribute("border-color", t);
+  }
+  get borderSide() {
+    return this.getAttribute("border-side");
+  }
+  set borderSide(t) {
+    this.setAttribute("border-side", t);
+  }
+  get borderSideMobile() {
+    return this.getAttribute("border-side--mobile");
+  }
+  set borderSideMobile(t) {
+    this.setAttribute("border-side--mobile", t);
+  }
+  get borderSideTablet() {
+    return this.getAttribute("border-side--tablet");
+  }
+  set borderSideTablet(t) {
+    this.setAttribute("border-side--tablet", t);
+  }
+  get borderSideLaptop() {
+    return this.getAttribute("border-side--laptop");
+  }
+  set borderSideLaptop(t) {
+    this.setAttribute("border-side--laptop", t);
+  }
+  get borderRadius() {
+    return this.getAttribute("border-radius");
+  }
+  set borderRadius(t) {
+    this.setAttribute("border-radius", t);
+  }
+  get noBorderRadius() {
+    return this.getAttribute("no-border-radius");
+  }
+  set noBorderRadius(t) {
+    this.setAttribute("no-border-radius", t);
+  }
+  get noBorderRadiusMobile() {
+    return this.getAttribute("no-border-radius--mobile");
+  }
+  set noBorderRadiusMobile(t) {
+    this.setAttribute("no-border-radius--mobile", t);
+  }
+  get noBorderRadiusTablet() {
+    return this.getAttribute("no-border-radius--tablet");
+  }
+  set noBorderRadiusTablet(t) {
+    this.setAttribute("no-border-radius--tablet", t);
+  }
+  get noBorderRadiusLaptop() {
+    return this.getAttribute("no-border-radius--laptop");
+  }
+  set noBorderRadiusLaptop(t) {
+    this.setAttribute("no-border-radius--laptop", t);
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    this.setAttribute("background-color", t);
+  }
+  get backgroundColorMobile() {
+    return this.getAttribute("background-color--mobile");
+  }
+  set backgroundColorMobile(t) {
+    this.setAttribute("background-color--mobile", t);
+  }
+  get backgroundColorTablet() {
+    return this.getAttribute("background-color--tablet");
+  }
+  set backgroundColorTablet(t) {
+    this.setAttribute("background-color--tablet", t);
+  }
+  get backgroundColorLaptop() {
+    return this.getAttribute("background-color--laptop");
+  }
+  set backgroundColorLaptop(t) {
+    this.setAttribute("background-color--laptop", t);
+  }
+  get gradient() {
+    return this.getAttribute("background-gradient");
+  }
+  set gradient(t) {
+    this.setAttribute("background-gradient", t);
+  }
+  get gradientMobile() {
+    return this.getAttribute("background-gradient--mobile");
+  }
+  set gradientMobile(t) {
+    this.setAttribute("background-gradient--mobile", t);
+  }
+  get gradientTablet() {
+    return this.getAttribute("background-gradient--tablet");
+  }
+  set gradientTablet(t) {
+    this.setAttribute("background-gradient--tablet", t);
+  }
+  get gradientLaptop() {
+    return this.getAttribute("background-gradient--laptop");
+  }
+  set gradientLaptop(t) {
+    this.setAttribute("background-gradient--laptop", t);
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  set backgroundImage(t) {
+    this.setAttribute("background-image", t);
+  }
+  get backgroundImageMobile() {
+    return this.getAttribute("background-image--mobile");
+  }
+  set backgroundImageMobile(t) {
+    this.setAttribute("background-image--mobile", t);
+  }
+  get backgroundImageTablet() {
+    return this.getAttribute("background-image--tablet");
+  }
+  set backgroundImageTablet(t) {
+    this.setAttribute("background-image--tablet", t);
+  }
+  get backgroundImageLaptop() {
+    return this.getAttribute("background-image--laptop");
+  }
+  set backgroundImageLaptop(t) {
+    this.setAttribute("background-image--laptop", t);
+  }
+  get backgroundSize() {
+    return this.getAttribute("background-size");
+  }
+  set backgroundSize(t) {
+    this.setAttribute("background-size", t);
+  }
+  get backgroundPosition() {
+    return this.getAttribute("background-position");
+  }
+  set backgroundPosition(t) {
+    this.setAttribute("background-position", t);
+  }
+  get boxShadow() {
+    return this.getAttribute("box-shadow");
+  }
+  set boxShadow(t) {
+    this.setAttribute("box-shadow", t);
+  }
+  get anchorOffset() {
+    return this.getAttribute("anchor-offset");
+  }
+  set anchorOffset(t) {
+    this.setAttribute("anchor-offset", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+};
+ct.nativeName = "div";
+let V = ct;
+customElements.get("px-container") || customElements.define("px-container", V);
+const Tt = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-state-hover-bordered-default);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-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='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-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='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-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-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var( --px-color-background-state-state-hover-bordered-inverted );color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (min-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, Mt = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Te = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);text-align:center;background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Me = ":host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", Bt = new CSSStyleSheet(), Rt = new CSSStyleSheet(), It = new CSSStyleSheet(), qt = new CSSStyleSheet();
+Bt.replaceSync(Tt);
+Rt.replaceSync(Mt);
+It.replaceSync(Te);
+qt.replaceSync(Me);
+const Be = [
+  "",
+  "default",
+  "secondary",
+  "tertiary",
+  "link",
+  "patch",
+  "patch-info",
+  "patch-black-friday",
+  "patch-eco",
+  "actionable-tag",
+  "header-dropdown"
+], Re = [
+  "",
+  "default",
+  "bottom-right",
+  "bottom-left",
+  "alternative"
+], bt = class bt extends x {
+  constructor() {
+    super(Bt, Rt, It, qt), this.template = () => `<button class="btn">
+      <slot name="before"></slot><slot></slot><slot name="after"></slot>
+     </button>`, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "state",
+      "loading",
+      "shape",
+      "shape--mobile",
+      "shape--tablet",
+      "shape--laptop",
+      "shape--desktop",
+      "inverted",
+      "aria-expanded",
+      "extended",
+      "extended--mobile",
+      "extended--tablet",
+      "extended--laptop",
+      "extended--desktop"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.querySelectorAll("px-icon");
+    t && t.forEach((e) => {
+      const r = e.getAttribute("size"), o = e.getAttribute("color");
+      e && (e.addEventListener("click", () => {
+        this.$el.focus();
+      }), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
+    }), Et(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
+      var r;
+      e.preventDefault(), (r = this.closest("form")) == null || r.submit();
+    }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
+      var r;
+      e.preventDefault(), (r = this.closest("form")) == null || r.reset();
+    });
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "variant":
+          this.updateVariant(e, r);
+          break;
+        case "state":
+          this.updateState(e, r);
+          break;
+        case "extended":
+        case "extended--mobile":
+        case "extended--tablet":
+        case "extended--laptop":
+        case "extended--desktop":
+          this.updateExtended(t, r);
+          break;
+        case "loading":
+          this.updateLoading();
+          break;
+        case "shape":
+        case "shape--mobile":
+        case "shape--tablet":
+        case "shape--laptop":
+        case "shape--desktop":
+          this.updateShape(t, r, Re);
+          break;
+        case "aria-expanded":
+          r && (this.$el.setAttribute("aria-expanded", r), this.removeAttribute("aria-expanded"));
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  checkClass(t) {
+    if (t.startsWith("patch-")) {
+      const e = t.split(/-(.*)/s);
+      for (const r of e)
+        r != "" && this.$el.classList.toggle(r);
+    } else
+      this.$el.classList.toggle(t);
+  }
+  _toggleClass(t, e) {
+    t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
+  }
+  updateVariant(t, e) {
+    e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(Be, e) || console.error(
+      `${e} is not a valid "variant" value for ${e}`
+    );
+  }
+  updateState(t, e) {
+    const r = ["", "default", "success", "error"];
+    this._toggleClass(t, e), this.checkName(r, e) || console.error(`${e} is not a valid "sate" value`);
+  }
+  updateExtended(t, e) {
+    e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
+  }
+  updateLoading() {
+    const t = this.querySelector("px-spinner");
+    t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
+  }
+  updateShape(t, e, r) {
+    if (!y(r, e)) {
+      console.error(`${e} is not a valid shape value`);
+      return;
+    }
+    e !== null && e !== "" && this.$el.setAttribute(t, e);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    this.setAttribute("state", t);
+  }
+  get extended() {
+    return this.getAttribute("extended");
+  }
+  set extended(t) {
+    this.setAttribute("extended", t);
+  }
+  get extendedMobile() {
+    return this.getAttribute("extended--mobile");
+  }
+  set extendedMobile(t) {
+    this.setAttribute("extended--mobile", t);
+  }
+  get extendedTablet() {
+    return this.getAttribute("extended--tablet");
+  }
+  set extendedTablet(t) {
+    this.setAttribute("extended--tablet", t);
+  }
+  get extendedLaptop() {
+    return this.getAttribute("extended--laptop");
+  }
+  set extendedLaptop(t) {
+    this.setAttribute("extended--laptop", t);
+  }
+  get extendedDesktop() {
+    return this.getAttribute("extended--desktop");
+  }
+  set extendedDesktop(t) {
+    this.setAttribute("extended--desktop", t);
+  }
+  get loading() {
+    return this.getAttribute("loading");
+  }
+  set loading(t) {
+    this.setAttribute("loading", t);
+  }
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(t) {
+    this.setAttribute("shape", t);
+  }
+  get shapeMobile() {
+    return this.getAttribute("shape--mobile");
+  }
+  set shapeMobile(t) {
+    this.setAttribute("shape--mobile", t);
+  }
+  get shapeTablet() {
+    return this.getAttribute("shape--tablet");
+  }
+  set shapeTablet(t) {
+    this.setAttribute("shape--tablet", t);
+  }
+  get shapeLaptop() {
+    return this.getAttribute("shape--laptop");
+  }
+  set shapeLaptop(t) {
+    this.setAttribute("shape--laptop", t);
+  }
+  get shapeDesktop() {
+    return this.getAttribute("shape--desktop");
+  }
+  set shapeDesktop(t) {
+    this.setAttribute("shape--desktop", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get ariaExpanded() {
+    return this.getAttribute("aria-expanded");
+  }
+  set ariaExpanded(t) {
+    t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
+  }
+};
+bt.nativeName = "button";
+let tt = bt;
+customElements.get("px-button") || customElements.define("px-button", tt);
+const Ie = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', Dt = new CSSStyleSheet();
+Dt.replaceSync(Ie);
+class qe extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+    <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
+      <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
+        <px-vstack gap="heading-to-content">
+          <slot name="heading"></slot>
+          <px-vstack gap="none">
+            <slot></slot>
+          </px-vstack>
+        </px-vstack>
+      </div>
+    </px-container>
+    <div class="content-wrapper">
+      <slot name="overlap"></slot>
+    </div>
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [Dt];
+  }
+  connectedCallback() {
+    const t = this.querySelector('[slot="heading"]');
+    !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
+  }
+  static get observedAttributes() {
+    return [
+      "background-color",
+      "background-gradient",
+      "background-image",
+      "background-image--mobile",
+      "background-image--tablet",
+      "background-image--laptop",
+      "background-size",
+      "background-position",
+      "padding-block",
+      "padding-top",
+      "padding-bottom",
+      "padding-block--mobile",
+      "padding-top--mobile",
+      "padding-bottom--mobile",
+      "padding-block--tablet",
+      "padding-top--tablet",
+      "padding-bottom--tablet",
+      "padding-block--laptop",
+      "padding-top--laptop",
+      "padding-bottom--laptop",
+      "border",
+      "border-side",
+      "border-side--mobile",
+      "border-side--tablet",
+      "border-side--laptop"
+    ];
+  }
+  get $container() {
+    return this.shadowRoot.querySelector("px-container");
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "background-color":
+          this.$container.backgroundColor = zt.indexOf(r) > 0 ? r : "none";
+          break;
+        case "background-gradient":
+          this.$container.gradient = this.gradient;
+          break;
+        case "background-image":
+          this.$container.backgroundImage = r;
+          break;
+        case "background-image--mobile":
+          this.$container.backgroundImageMobile = r;
+          break;
+        case "background-image--tablet":
+          this.$container.backgroundImageTablet = r;
+          break;
+        case "background-image--laptop":
+          this.$container.backgroundImageLaptop = r;
+          break;
+        case "background-size":
+          this.$container.backgroundSize = r;
+          break;
+        case "background-position":
+          this.$container.backgroundPosition = r;
+          break;
+        case "padding-block":
+          this.$container.paddingBlock = r;
+          break;
+        case "padding-top":
+          this.$container.paddingTop = r;
+          break;
+        case "padding-bottom":
+          this.$container.paddingBottom = r;
+          break;
+        case "padding-block--mobile":
+          this.$container.paddingBlockMobile = r;
+          break;
+        case "padding-top--mobile":
+          this.$container.paddingTopMobile = r;
+          break;
+        case "padding-bottom--mobile":
+          this.$container.paddingBottomMobile = r;
+          break;
+        case "padding-block--tablet":
+          this.$container.paddingBlockTablet = r;
+          break;
+        case "padding-top--tablet":
+          this.$container.paddingTopTablet = r;
+          break;
+        case "padding-bottom--tablet":
+          this.$container.paddingBottomTablet = r;
+          break;
+        case "padding-block--laptop":
+          this.$container.paddingBlockLaptop = r;
+          break;
+        case "padding-top--laptop":
+          this.$container.paddingTopLaptop = r;
+          break;
+        case "padding-bottom--laptop":
+          this.$container.paddingBottomLaptop = r;
+          break;
+        case "border":
+          this.$container.border = r;
+          break;
+        case "border-side":
+          this.$container.borderSide = r;
+          break;
+        case "border-side--mobile":
+          this.$container.borderSideMobile = r;
+          break;
+        case "border-side--tablet":
+          this.$container.borderSideTablet = r;
+          break;
+        case "border-side--laptop":
+          this.$container.borderSideLaptop = r;
+          break;
+      }
+  }
+  get $slotOverlap() {
+    return this.querySelector('[slot="overlap"]');
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color") || "none";
+  }
+  set backgroundColor(t) {
+    this.setAttribute("background-color", t);
+  }
+  get gradient() {
+    return this.getAttribute("background-gradient");
+  }
+  set gradient(t) {
+    this.setAttribute("background-gradient", t);
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  set backgroundImage(t) {
+    this.setAttribute("background-image", t);
+  }
+  get backgroundImageMobile() {
+    return this.getAttribute("background-image--mobile");
+  }
+  set backgroundImageMobile(t) {
+    this.setAttribute("background-image--mobile", t);
+  }
+  get backgroundImageTablet() {
+    return this.getAttribute("background-image--tablet");
+  }
+  set backgroundImageTablet(t) {
+    this.setAttribute("background-image--tablet", t);
+  }
+  get backgroundImageLaptop() {
+    return this.getAttribute("background-image--laptop");
+  }
+  set backgroundImageLaptop(t) {
+    this.setAttribute("background-image--laptop", t);
+  }
+  get backgroundSize() {
+    return this.getAttribute("background-size");
+  }
+  set backgroundSize(t) {
+    this.setAttribute("background-size", t);
+  }
+  get backgroundPosition() {
+    return this.getAttribute("background-position");
+  }
+  set backgroundPosition(t) {
+    this.setAttribute("background-position", t);
+  }
+  get paddingBlock() {
+    return this.getAttribute("padding-block");
+  }
+  set paddingBlock(t) {
+    this.setAttribute("padding-block", t);
+  }
+  get paddingTop() {
+    return this.getAttribute("padding-top");
+  }
+  set paddingTop(t) {
+    this.setAttribute("padding-top", t);
+  }
+  get paddingBottom() {
+    return this.getAttribute("padding-bottom");
+  }
+  set paddingBottom(t) {
+    this.setAttribute("padding-bottom", t);
+  }
+  get paddingBlockMobile() {
+    return this.getAttribute("padding-block--mobile");
+  }
+  set paddingBlockMobile(t) {
+    this.setAttribute("padding-block--mobile", t);
+  }
+  get paddingTopMobile() {
+    return this.getAttribute("padding-top--mobile");
+  }
+  set paddingTopMobile(t) {
+    this.setAttribute("padding-top--mobile", t);
+  }
+  get paddingBottomMobile() {
+    return this.getAttribute("padding-bottom--mobile");
+  }
+  set paddingBottomMobile(t) {
+    this.setAttribute("padding-bottom--mobile", t);
+  }
+  get paddingBlockTablet() {
+    return this.getAttribute("padding-block--tablet");
+  }
+  set paddingBlockTablet(t) {
+    this.setAttribute("padding-block--tablet", t);
+  }
+  get paddingTopTablet() {
+    return this.getAttribute("padding-top--tablet");
+  }
+  set paddingTopTablet(t) {
+    this.setAttribute("padding-top--tablet", t);
+  }
+  get paddingBottomTablet() {
+    return this.getAttribute("padding-bottom--tablet");
+  }
+  set paddingBottomTablet(t) {
+    this.setAttribute("padding-bottom--tablet", t);
+  }
+  get paddingBlockLaptop() {
+    return this.getAttribute("padding-block--laptop");
+  }
+  set paddingBlockLaptop(t) {
+    this.setAttribute("padding-block--laptop", t);
+  }
+  get paddingTopLaptop() {
+    return this.getAttribute("padding-top--laptop");
+  }
+  set paddingTopLaptop(t) {
+    this.setAttribute("padding-top--laptop", t);
+  }
+  get paddingBottomLaptop() {
+    return this.getAttribute("padding-bottom--laptop");
+  }
+  set paddingBottomLaptop(t) {
+    this.setAttribute("padding-bottom--laptop", t);
+  }
+  get border() {
+    return this.getAttribute("border");
+  }
+  set border(t) {
+    this.setAttribute("border", t);
+  }
+  get borderSide() {
+    return this.getAttribute("border-side");
+  }
+  set borderSide(t) {
+    this.setAttribute("border-side", t);
+  }
+  get borderSideMobile() {
+    return this.getAttribute("border-side--mobile");
+  }
+  set borderSideMobile(t) {
+    this.setAttribute("border-side--mobile", t);
+  }
+  get borderSideTablet() {
+    return this.getAttribute("border-side--tablet");
+  }
+  set borderSideTablet(t) {
+    this.setAttribute("border-side--tablet", t);
+  }
+  get borderSideLaptop() {
+    return this.getAttribute("border-side--laptop");
+  }
+  set borderSideLaptop(t) {
+    this.setAttribute("border-side--laptop", t);
+  }
+}
+customElements.get("px-section") || customElements.define("px-section", qe);
+const De = ["", "default", "naked", "contained"], Pe = [
+  "",
+  "container-light",
+  "container-default"
+];
+function L(i) {
+  i.hasAttribute("width") || i.setAttribute("width", "s"), i.setAttribute("border-radius", "pill");
+}
+function T(i) {
+  i.getAttribute("variant") === "contained" && !i.getAttribute("background-color") && i.setAttribute("background-color", "container-light");
+}
+function _e(i, t, e) {
+  if (!y(De, e)) {
+    console.error(`${e} is not an allowed variant value.`);
+    return;
+  }
+  t !== null && t !== "" && t !== "default" && i.classList.toggle(t), e !== null && e !== "" && e !== "default" && i.classList.toggle(e);
+}
+function O(i, t, e, r = []) {
+  e ? (i.setAttribute("inverted", ""), r.forEach((o) => o.setAttribute("inverted", "")), t.forEach((o) => {
+    o.hasAttribute("inverted") || o.setAttribute("inverted", "");
+  })) : (i.removeAttribute("inverted"), r.forEach((o) => o.removeAttribute("inverted")), t.forEach((o) => {
+    o.hasAttribute("inverted") && o.removeAttribute("inverted");
+  }));
+}
+function He(i, t, e, r, o) {
+  if (!y(o, r)) {
+    console.error(`${r} is not an allowed ${t} value`);
+    return;
+  }
+  const a = (s) => {
+    s !== null && s !== "" && s !== "default" && (i.style.setProperty(
+      "--cell-contained-background-color-default",
+      `var(--px-color-background-${s}-default)`
+    ), i.style.setProperty(
+      "--cell-contained-background-color-inverted",
+      `var(--px-color-background-${s}-inverted)`
+    ));
+  };
+  a(e), a(r);
+}
+function Pt(i, t, e, r = [], o = {}) {
+  e ? (i.setAttribute("disabled", ""), r.forEach((a) => a.setAttribute("disabled", "")), t.forEach((a) => {
+    a.hasAttribute("disabled") || a.setAttribute("disabled", "");
+  }), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "true"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = -1)) : (i.removeAttribute("disabled"), r.forEach((a) => a.removeAttribute("disabled")), t.forEach((a) => {
+    a.hasAttribute("disabled") && a.removeAttribute("disabled");
+  }), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "false"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = 0));
+}
+const M = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", Oe = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}', _t = new CSSStyleSheet(), Ht = new CSSStyleSheet();
+_t.replaceSync(M);
+Ht.replaceSync(Oe);
+const $t = ["secondary"], je = ["", "default", "top", "bottom", "none"], pt = class pt extends x {
+  template() {
+    return `
+      <px-hstack gap="s" justify-content="space-between" align-items="center">
+        <px-hstack gap="s" align-items="center">
+          <slot name="prefix"></slot>
+          <slot name="visual"></slot>
+          <px-vstack gap="2xs">
+            <slot name="label"></slot>
+            <slot name="description"></slot>
+          </px-vstack>
+        </px-hstack>
+        <px-hstack gap="s" align-items="center" class="cell-layout__suffix-action-container">
+          <px-stack direction="column" gap="2xs" align-items="flex-end" class="cell__suffix-container">
+            <slot name="suffix"></slot>
+          </px-stack>
+          <slot name="action-indicator"></slot>
+        </px-hstack>
+      </px-hstack>
+    `;
+  }
+  constructor() {
+    super(Ht, _t);
+    const t = document.createElement(this.nativeName);
+    t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.$slotVisual) {
+      const t = this.querySelector('px-img[slot="visual"]');
+      t && L(t);
+    }
+    if (this.$slotSuffix) {
+      const t = this.querySelectorAll(
+        'px-button-icon[slot="suffix"]'
+      ), e = t.length > 0, r = t.length > 1;
+      e && t.forEach((o) => {
+        this.configureSlotSuffixButtonIcon(o);
+      }), r && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
+    }
+    T(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "inverted",
+      "variant",
+      "disabled",
+      "separator",
+      "separator--mobile",
+      "separator--tablet",
+      "separator--laptop",
+      "separator--desktop",
+      "radius",
+      "radius--mobile",
+      "radius--tablet",
+      "radius--laptop",
+      "radius--desktop",
+      "background-color",
+      "compact"
+    ];
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "variant":
+          _e(this.$el, e, r);
+          break;
+        case "inverted":
+          for (let o = 0; o < this.$children.length; o++)
+            this.$children[o].hasAttribute("inverted") ? this.$children[o].removeAttribute("inverted") : this.$children[o].setAttribute("inverted", "");
+          break;
+        case "radius":
+        case "radius--mobile":
+        case "radius--tablet":
+        case "radius--laptop":
+        case "radius--desktop":
+          this.updateRadius(t, e, r, je);
+          break;
+        case "background-color":
+          He(
+            this.$el,
+            t,
+            e,
+            r,
+            Pe
+          );
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  configureSlotSuffixButtonIcon(t) {
+    t.hasAttribute("variant") ? y(
+      $t,
+      t.getAttribute("variant")
+    ) || (console.error(
+      `Wrong button-icon variant value for suffix. Allowed values are: ${$t.join(
+        ", "
+      )}.`
+    ), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
+  }
+  updateRadius(t, e, r, o) {
+    if (!y(o, r)) {
+      console.error(`${r} is not a valid ${t} value`);
+      return;
+    }
+    const a = t.includes("--"), s = [];
+    if (!a)
+      this.separatorMobile || s.push("mobile"), this.separatorTablet || s.push("tablet"), this.separatorLaptop || s.push("laptop"), this.separatorDesktop || s.push("desktop");
+    else {
+      const l = t.split("--")[1];
+      s.push(l);
+    }
+    s.forEach((l) => {
+      e !== null && e !== "" && e !== "default" && this.updateStyle(l, e), r !== null && r !== "" && r !== "default" && this.updateStyle(l, r);
+    });
+  }
+  updateStyle(t, e) {
+    let r = [];
+    e === "top" ? r = ["bottom-right", "bottom-left"] : e === "bottom" ? r = ["top-right", "top-left"] : e === "none" && (r = ["top-right", "bottom-right", "bottom-left", "top-left"]), r.forEach((o) => {
+      this.$el.style.setProperty(
+        `--cell-contained-border-radius-${o}--${t}`,
+        "0"
+      );
+    });
+  }
+  get $children() {
+    return this.querySelectorAll("px-cell > *");
+  }
+  get $slotVisual() {
+    return this.querySelector('[slot="visual"]');
+  }
+  get $slotSuffix() {
+    return this.querySelector('[slot="suffix"]');
+  }
+  get $suffixContainer() {
+    return this.shadowRoot.querySelector(".cell__suffix-container");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get separator() {
+    return this.getAttribute("separator");
+  }
+  set separator(t) {
+    this.setAttribute("separator", t);
+  }
+  get separatorMobile() {
+    return this.getAttribute("separator--mobile");
+  }
+  set separatorMobile(t) {
+    this.setAttribute("separator--mobile", t);
+  }
+  get separatorTablet() {
+    return this.getAttribute("separator--tablet");
+  }
+  set separatorTablet(t) {
+    this.setAttribute("separator--tablet", t);
+  }
+  get separatorLaptop() {
+    return this.getAttribute("separator--laptop");
+  }
+  set separatorLaptop(t) {
+    this.setAttribute("separator--laptop", t);
+  }
+  get separatorDesktop() {
+    return this.getAttribute("separator--desktop");
+  }
+  set separatorDesktop(t) {
+    this.setAttribute("separator--desktop", t);
+  }
+  get radius() {
+    return this.getAttribute("radius");
+  }
+  set radius(t) {
+    this.setAttribute("radius", t);
+  }
+  get radiusMobile() {
+    return this.getAttribute("radius--mobile");
+  }
+  set radiusMobile(t) {
+    this.setAttribute("radius--mobile", t);
+  }
+  get radiusTablet() {
+    return this.getAttribute("radius--tablet");
+  }
+  set radiusTablet(t) {
+    this.setAttribute("radius--tablet", t);
+  }
+  get radiusLaptop() {
+    return this.getAttribute("radius--laptop");
+  }
+  set radiusLaptop(t) {
+    this.setAttribute("radius--laptop", t);
+  }
+  get radiusDesktop() {
+    return this.getAttribute("radius--desktop");
+  }
+  set radiusDesktop(t) {
+    this.setAttribute("radius--desktop", t);
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
+  }
+  get compact() {
+    return this.hasAttribute("compact");
+  }
+  set compact(t) {
+    t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
+  }
+};
+pt.nativeName = "div";
+let et = pt;
+customElements.get("px-cell") || customElements.define("px-cell", et);
+const Fe = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', Ot = new CSSStyleSheet();
+Ot.replaceSync(M);
+const jt = new CSSStyleSheet();
+jt.replaceSync(Fe);
+const ht = class ht extends x {
+  template() {
+    return `
+      <px-cell hoverable>
+        <slot name="visual" slot="visual"></slot>
+        <slot name="label" slot="label"></slot>
+        <slot name="description" slot="description"></slot>
+        <slot name="suffix" slot="suffix"></slot>
+        <px-icon
+          name="chevron_right"
+          slot="action-indicator"
+          from="lavender"
+          size="m"
+          color="inherit"
+        ></px-icon>
+      </px-cell>
+    `;
+  }
+  constructor() {
+    super(jt, Ot);
+    const t = document.createElement(this.nativeName);
+    t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.$slotVisual) {
+      const e = this.querySelector('px-img[slot="visual"]');
+      e && L(e);
+    }
+    this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
+      "aria-label",
+      this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
+    )), T(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "inverted",
+      "variant",
+      "disabled",
+      "separator",
+      "separator--mobile",
+      "separator--tablet",
+      "separator--laptop",
+      "separator--desktop",
+      "radius",
+      "radius--mobile",
+      "radius--tablet",
+      "radius--laptop",
+      "radius--desktop",
+      "target-blank-aria-label",
+      "background-color",
+      "noicon",
+      "compact"
+    ];
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "variant":
+          this.$cell.variant = this.variant;
+          break;
+        case "inverted":
+          O(this.$cell, this.$children, this.inverted, [
+            this.$pxIcon
+          ]);
+          break;
+        case "disabled":
+          Pt(this.$cell, this.$children, this.disabled, [], {
+            ariaEl: this.$el,
+            setAria: !0,
+            setTabIndex: !0
+          });
+          break;
+        case "radius":
+        case "radius--mobile":
+        case "radius--tablet":
+        case "radius--laptop":
+        case "radius--desktop":
+        case "separator":
+        case "separator--mobile":
+        case "separator--tablet":
+        case "separator--laptop":
+        case "separator--desktop":
+        case "background-color":
+        case "compact":
+          this.$cell.setAttribute(t, this.getAttribute(t) || "");
+          break;
+        case "target-blank-aria-label":
+          this.$pxIcon && this.$pxIcon.setAttribute(
+            "aria-label",
+            this.targetBlankAriaLabel || "Opens in a new tab"
+          );
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  get $cell() {
+    return this.shadowRoot.querySelector("px-cell");
+  }
+  get $slotVisual() {
+    return this.querySelector('[slot="visual"]');
+  }
+  get $children() {
+    return this.querySelectorAll("px-cell-link > *");
+  }
+  get $pxIcon() {
+    return this.shadowRoot.querySelector("px-icon");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get separator() {
+    return this.getAttribute("separator");
+  }
+  set separator(t) {
+    this.setAttribute("separator", t);
+  }
+  get separatorMobile() {
+    return this.getAttribute("separator--mobile");
+  }
+  set separatorMobile(t) {
+    this.setAttribute("separator--mobile", t);
+  }
+  get separatorTablet() {
+    return this.getAttribute("separator--tablet");
+  }
+  set separatorTablet(t) {
+    this.setAttribute("separator--tablet", t);
+  }
+  get separatorLaptop() {
+    return this.getAttribute("separator--laptop");
+  }
+  set separatorLaptop(t) {
+    this.setAttribute("separator--laptop", t);
+  }
+  get separatorDesktop() {
+    return this.getAttribute("separator--desktop");
+  }
+  set separatorDesktop(t) {
+    this.setAttribute("separator--desktop", t);
+  }
+  get radius() {
+    return this.getAttribute("radius");
+  }
+  set radius(t) {
+    this.setAttribute("radius", t);
+  }
+  get radiusMobile() {
+    return this.getAttribute("radius--mobile");
+  }
+  set radiusMobile(t) {
+    this.setAttribute("radius--mobile", t);
+  }
+  get radiusTablet() {
+    return this.getAttribute("radius--tablet");
+  }
+  set radiusTablet(t) {
+    this.setAttribute("radius--tablet", t);
+  }
+  get radiusLaptop() {
+    return this.getAttribute("radius--laptop");
+  }
+  set radiusLaptop(t) {
+    this.setAttribute("radius--laptop", t);
+  }
+  get radiusDesktop() {
+    return this.getAttribute("radius--desktop");
+  }
+  set radiusDesktop(t) {
+    this.setAttribute("radius--desktop", t);
+  }
+  get targetBlankAriaLabel() {
+    return this.getAttribute("target-blank-aria-label");
+  }
+  set targetBlankAriaLabel(t) {
+    this.setAttribute("target-blank-aria-label", t);
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
+  }
+  get compact() {
+    return this.hasAttribute("compact");
+  }
+  set compact(t) {
+    t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
+  }
+};
+ht.nativeName = "a";
+let rt = ht;
+customElements.get("px-cell-link") || customElements.define("px-cell-link", rt);
+const We = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", Ft = new CSSStyleSheet();
+Ft.replaceSync(M);
+const Wt = new CSSStyleSheet();
+Wt.replaceSync(We);
+const ut = class ut extends x {
+  template() {
+    return `
+      <px-cell hoverable>
+        <slot name="visual" slot="visual"></slot>
+        <slot name="label" slot="label"></slot>
+        <slot name="description" slot="description"></slot>
+        <slot name="suffix" slot="suffix"></slot>
+      </px-cell>
+    `;
+  }
+  constructor() {
+    super(Wt, Ft);
+    const t = document.createElement(this.nativeName);
+    t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.$slotVisual) {
+      const t = this.querySelector('px-img[slot="visual"]');
+      t && L(t);
+    }
+    T(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "inverted",
+      "variant",
+      "disabled",
+      "separator",
+      "separator--mobile",
+      "separator--tablet",
+      "separator--laptop",
+      "separator--desktop",
+      "radius",
+      "radius--mobile",
+      "radius--tablet",
+      "radius--laptop",
+      "radius--desktop",
+      "background-color",
+      "compact"
+    ];
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "variant":
+          this.$cell.variant = this.variant;
+          break;
+        case "inverted":
+          O(this.$cell, this.$children, this.inverted);
+          break;
+        case "disabled":
+          Pt(this.$cell, this.$children, this.disabled, [], {
+            ariaEl: this.$el,
+            setAria: !0,
+            setTabIndex: !0
+          });
+          break;
+        case "radius":
+        case "radius--mobile":
+        case "radius--tablet":
+        case "radius--laptop":
+        case "radius--desktop":
+        case "separator":
+        case "separator--mobile":
+        case "separator--tablet":
+        case "separator--laptop":
+        case "separator--desktop":
+        case "background-color":
+        case "compact":
+          this.$cell.setAttribute(t, this.getAttribute(t) || "");
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  get $cell() {
+    return this.shadowRoot.querySelector("px-cell");
+  }
+  get $slotVisual() {
+    return this.querySelector('[slot="visual"]');
+  }
+  get $children() {
+    return this.querySelectorAll("px-cell-button > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get separator() {
+    return this.getAttribute("separator");
+  }
+  set separator(t) {
+    this.setAttribute("separator", t);
+  }
+  get separatorMobile() {
+    return this.getAttribute("separator--mobile");
+  }
+  set separatorMobile(t) {
+    this.setAttribute("separator--mobile", t);
+  }
+  get separatorTablet() {
+    return this.getAttribute("separator--tablet");
+  }
+  set separatorTablet(t) {
+    this.setAttribute("separator--tablet", t);
+  }
+  get separatorLaptop() {
+    return this.getAttribute("separator--laptop");
+  }
+  set separatorLaptop(t) {
+    this.setAttribute("separator--laptop", t);
+  }
+  get separatorDesktop() {
+    return this.getAttribute("separator--desktop");
+  }
+  set separatorDesktop(t) {
+    this.setAttribute("separator--desktop", t);
+  }
+  get radius() {
+    return this.getAttribute("radius");
+  }
+  set radius(t) {
+    this.setAttribute("radius", t);
+  }
+  get radiusMobile() {
+    return this.getAttribute("radius--mobile");
+  }
+  set radiusMobile(t) {
+    this.setAttribute("radius--mobile", t);
+  }
+  get radiusTablet() {
+    return this.getAttribute("radius--tablet");
+  }
+  set radiusTablet(t) {
+    this.setAttribute("radius--tablet", t);
+  }
+  get radiusLaptop() {
+    return this.getAttribute("radius--laptop");
+  }
+  set radiusLaptop(t) {
+    this.setAttribute("radius--laptop", t);
+  }
+  get radiusDesktop() {
+    return this.getAttribute("radius--desktop");
+  }
+  set radiusDesktop(t) {
+    this.setAttribute("radius--desktop", t);
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
+  }
+  get compact() {
+    return this.hasAttribute("compact");
+  }
+  set compact(t) {
+    t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
+  }
+};
+ut.nativeName = "button";
+let ot = ut;
+customElements.get("px-cell-button") || customElements.define("px-cell-button", ot);
+const Ne = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-purpose-error-default)}.checkbox #checkbox-container{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.all-slots-empty :is(.checkbox #checkbox-container){gap:0}.checkbox label{line-height:calc(var(--px-line-height-ratio-l) * 1em);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover{cursor:pointer}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag,.checkbox.selectable-tag #checkbox-container{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 48em){.checkbox{gap:var(--px-spacing-xs-tablet)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}#checkbox-container{gap:var(--px-spacing-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){.checkbox{gap:var(--px-spacing-xs-laptop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}#checkbox-container{gap:var(--px-spacing-s-laptop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-laptop);outline-offset:var(--px-focus-offset-laptop)}label{font-size:var(--px-text-size-label-m-laptop)}}@media only screen and (min-width: 90.0625em){.checkbox{gap:var(--px-spacing-xs-desktop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}#checkbox-container{gap:var(--px-spacing-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .checkbox ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Nt = new CSSStyleSheet();
+Nt.replaceSync(Ne);
+const Ze = ["", "default", "selectable-tag"], Zt = ["", "error"], gt = class gt extends x {
+  constructor() {
+    var t;
+    super(Nt), this.template = () => `<div class="checkbox">
+      <slot name="error-text"></slot>
+      <div id="checkbox-container">
+        <input type="checkbox"/>
+        <label><slot name="before"></slot><slot name="label"></slot></label>
+      </div>
+    </div>`, this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "state",
+      "variant",
+      "indeterminate",
+      "inverted",
+      "hover"
+    ];
+  }
+  connectedCallback() {
+    this.hasAttribute("name") || console.error(
+      '<px-checkbox> requires a "name" attribute to function properly.'
+    ), this.$el.addEventListener("change", () => {
+      var e;
+      const t = new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      });
+      this.dispatchEvent(t), (e = this.internals) == null || e.setFormValue(this.formData()), this.$el.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+    }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot && this.$checkbox.classList.add("all-slots-empty"), this.setupAriaDescribedBy(
+      this.$slotErrorText,
+      this.$errorTextSlot,
+      "error-text"
+    );
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "state":
+          this.updateAttribute(
+            e,
+            r,
+            Zt,
+            t
+          ), this.setupAriaDescribedBy(
+            this.$slotErrorText,
+            this.$errorTextSlot,
+            "error-text"
+          );
+          break;
+        case "variant":
+          this.updateAttribute(
+            e,
+            r,
+            Ze,
+            t
+          );
+          break;
+        case "hover":
+          this.$el.classList.toggle("hover");
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  updateAttribute(t, e, r, o) {
+    var a, s;
+    if (!this.checkName(r, e)) {
+      console.error(`${e} is not a valid ${o} value`);
+      return;
+    }
+    t !== null && (o === "variant" ? (a = this.$checkbox) == null || a.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (o === "variant" ? (s = this.$checkbox) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
+  }
+  formData() {
+    if (this.$el.name) {
+      const t = new FormData();
+      return t.append(this.getAttribute("name"), this.$el.value), t;
+    }
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t;
+  }
+  setupForId() {
+    const t = Math.random().toString(36).substr(2, 9);
+    this.$el.setAttribute("id", t), this.$label && this.$label.setAttribute("for", t);
+  }
+  setupAriaDescribedBy(t, e, r) {
+    if (t.length > 0 && this.$el.hasAttribute("id")) {
+      e.setAttribute("id", `${this.$el.id}-${r}`);
+      let o = this.$el.getAttribute("aria-describedby");
+      o ? o += ` ${this.$el.id}-${r}` : o = `${this.$el.id}-${r}`, this.$el.setAttribute("aria-describedby", o);
+    }
+  }
+  get $checkbox() {
+    return this.shadowRoot.querySelector(".checkbox");
+  }
+  get $label() {
+    return this.shadowRoot.querySelector("label");
+  }
+  get $labelSlot() {
+    return this.querySelector('[slot="label"]');
+  }
+  get $iconSlot() {
+    return this.querySelector('px-icon[slot="before"]');
+  }
+  get $errorTextSlot() {
+    return this.shadowRoot.querySelector('slot[name="error-text"]');
+  }
+  get $slotErrorText() {
+    return this.querySelectorAll('[slot="error-text"]');
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    this.setAttribute("state", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get checked() {
+    return this.$el.checked;
+  }
+  set checked(t) {
+    this.$el.checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+};
+gt.nativeName = "input";
+let it = gt;
+customElements.get("px-checkbox") || customElements.define("px-checkbox", it);
+const Ut = new CSSStyleSheet();
+Ut.replaceSync(M);
+const Ue = ["", "left", "right"];
+class Ye extends $ {
+  template() {
+    return `
+    <div class="cell-checkbox">
+      <px-cell hoverable>
+        <px-checkbox slot="prefix" aria-hidden="true" tabindex="-1" ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
+        <slot name="visual" slot="visual"></slot>
+        <slot name="label" slot="label"></slot>
+        <slot name="description" slot="description"></slot>
+        <slot name="suffix" slot="suffix"></slot>
+      </px-cell>
+    `;
+  }
+  constructor() {
+    var t;
+    super(Ut), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
+  }
+  connectedCallback() {
+    if (this.$slotVisual) {
+      const t = this.querySelector('px-img[slot="visual"]');
+      t && L(t);
+    }
+    this.addEventListener("mouseover", () => {
+      this.$checkbox.setAttribute("hover", "");
+    }), this.addEventListener("mouseout", () => {
+      this.$checkbox.removeAttribute("hover");
+    }), this.addEventListener("keypress", (t) => {
+      switch (t.stopPropagation(), t.preventDefault(), t.code) {
+        case "Space":
+          this.click();
+          break;
+      }
+    }), this.addEventListener("click", (t) => {
+      this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
+    }), this.hasAttribute("checked") && (this.checked = !0), T(this);
+  }
+  static get observedAttributes() {
+    return [
+      "inverted",
+      "variant",
+      "disabled",
+      "separator",
+      "separator--mobile",
+      "separator--tablet",
+      "separator--laptop",
+      "separator--desktop",
+      "radius",
+      "radius--mobile",
+      "radius--tablet",
+      "radius--laptop",
+      "radius--desktop",
+      "name",
+      "value",
+      "state",
+      "checked",
+      "checkbox-position",
+      "background-color",
+      "compact"
+    ];
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "variant":
+          this.$cell.variant = this.variant;
+          break;
+        case "inverted":
+          O(this.$cell, this.$children, this.inverted, [
+            this.$checkbox
+          ]);
+          break;
+        case "disabled":
+          this.handleDisabledAttributeChange(r !== null);
+          break;
+        case "radius":
+        case "radius--mobile":
+        case "radius--tablet":
+        case "radius--laptop":
+        case "radius--desktop":
+        case "separator":
+        case "separator--mobile":
+        case "separator--tablet":
+        case "separator--laptop":
+        case "separator--desktop":
+        case "background-color":
+        case "compact":
+          this.$cell.setAttribute(t, this.getAttribute(t) || "");
+          break;
+        case "name":
+        case "value":
+          this.$checkbox && this.$checkbox.setAttribute(t, r);
+          break;
+        case "state":
+          if (this.$checkbox)
+            if (this.checkName(Zt, r))
+              this.$checkbox.setAttribute("state", r);
+            else {
+              console.error(`${r} is not a valid state value`);
+              return;
+            }
+          break;
+        case "checked":
+          this.handleCheckedAttributeChange(r);
+          break;
+        case "checkbox-position":
+          this.handleCheckboxPositionChange(r);
+          break;
+      }
+  }
+  handleDisabledAttributeChange(t) {
+    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$checkbox.setAttribute("disabled", ""), this.$children.forEach((e) => {
+      e.hasAttribute("disabled") || e.setAttribute("disabled", "");
+    })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$checkbox.removeAttribute("disabled"), this.$children.forEach((e) => {
+      e.hasAttribute("disabled") && e.removeAttribute("disabled");
+    }));
+  }
+  handleCheckedAttributeChange(t) {
+    var e;
+    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    ));
+  }
+  handleCheckboxPositionChange(t) {
+    if (!this.checkName(Ue, t)) {
+      console.error(`${t} is not a valid position value`);
+      return;
+    }
+    this.$checkbox && (t === "" || t === "left" ? this.$checkbox.setAttribute("slot", "prefix") : t === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t;
+  }
+  formData() {
+    if (this.name) {
+      const t = new FormData(), e = this.getAttribute("name");
+      return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
+    }
+  }
+  get $cell() {
+    return this.shadowRoot.querySelector("px-cell");
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".cell-checkbox");
+  }
+  get $checkbox() {
+    return this.shadowRoot.querySelector("px-checkbox");
+  }
+  get $slotVisual() {
+    return this.querySelector('[slot="visual"]');
+  }
+  get $children() {
+    return this.querySelectorAll("px-cell-checkbox > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get separator() {
+    return this.getAttribute("separator");
+  }
+  set separator(t) {
+    this.setAttribute("separator", t);
+  }
+  get separatorMobile() {
+    return this.getAttribute("separator--mobile");
+  }
+  set separatorMobile(t) {
+    this.setAttribute("separator--mobile", t);
+  }
+  get separatorTablet() {
+    return this.getAttribute("separator--tablet");
+  }
+  set separatorTablet(t) {
+    this.setAttribute("separator--tablet", t);
+  }
+  get separatorLaptop() {
+    return this.getAttribute("separator--laptop");
+  }
+  set separatorLaptop(t) {
+    this.setAttribute("separator--laptop", t);
+  }
+  get separatorDesktop() {
+    return this.getAttribute("separator--desktop");
+  }
+  set separatorDesktop(t) {
+    this.setAttribute("separator--desktop", t);
+  }
+  get radius() {
+    return this.getAttribute("radius");
+  }
+  set radius(t) {
+    this.setAttribute("radius", t);
+  }
+  get radiusMobile() {
+    return this.getAttribute("radius--mobile");
+  }
+  set radiusMobile(t) {
+    this.setAttribute("radius--mobile", t);
+  }
+  get radiusTablet() {
+    return this.getAttribute("radius--tablet");
+  }
+  set radiusTablet(t) {
+    this.setAttribute("radius--tablet", t);
+  }
+  get radiusLaptop() {
+    return this.getAttribute("radius--laptop");
+  }
+  set radiusLaptop(t) {
+    this.setAttribute("radius--laptop", t);
+  }
+  get radiusDesktop() {
+    return this.getAttribute("radius--desktop");
+  }
+  set radiusDesktop(t) {
+    this.setAttribute("radius--desktop", t);
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(t) {
+    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(t) {
+    t ? this.setAttribute("name", t) : this.removeAttribute("name");
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    t ? this.setAttribute("state", t) : this.removeAttribute("state");
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t ? this.setAttribute("value", t) : this.removeAttribute("value");
+  }
+  get checkboxPosition() {
+    return this.getAttribute("checkbox-position");
+  }
+  set checkboxPosition(t) {
+    t ? this.setAttribute("checkbox-position", t) : this.removeAttribute("checkbox-position");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
+  }
+  get compact() {
+    return this.hasAttribute("compact");
+  }
+  set compact(t) {
+    t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
+  }
+}
+customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", Ye);
+const Yt = new CSSStyleSheet();
+Yt.replaceSync(M);
+class Ge extends $ {
+  template() {
+    return `
+    <div class="cell-switch">
+      <px-cell hoverable>
+        <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
+        <slot name="visual" slot="visual"></slot>
+        <slot name="label" slot="label"></slot>
+        <slot name="description" slot="description"></slot>
+        <slot name="suffix" slot="suffix"></slot>
+      </px-cell>
+    `;
+  }
+  constructor() {
+    var t;
+    super(Yt), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
+  }
+  connectedCallback() {
+    if (this.$slotVisual) {
+      const t = this.querySelector('px-img[slot="visual"]');
+      t && L(t);
+    }
+    this.addEventListener("mouseover", () => {
+      this.$switch.setAttribute("hover", "");
+    }), this.addEventListener("mouseout", () => {
+      this.$switch.removeAttribute("hover");
+    }), this.addEventListener("keypress", (t) => {
+      switch (t.stopPropagation(), t.preventDefault(), t.code) {
+        case "Space":
+          this.click();
+          break;
+      }
+    }), this.addEventListener("click", (t) => {
+      this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
+    }), this.hasAttribute("checked") && (this.checked = !0), T(this);
+  }
+  static get observedAttributes() {
+    return [
+      "inverted",
+      "variant",
+      "disabled",
+      "separator",
+      "separator--mobile",
+      "separator--tablet",
+      "separator--laptop",
+      "separator--desktop",
+      "radius",
+      "radius--mobile",
+      "radius--tablet",
+      "radius--laptop",
+      "radius--desktop",
+      "name",
+      "value",
+      "checked",
+      "background-color",
+      "compact"
+    ];
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "variant":
+          this.$cell.variant = this.variant;
+          break;
+        case "inverted":
+          O(this.$cell, this.$children, this.inverted, [
+            this.$switch
+          ]);
+          break;
+        case "disabled":
+          this.handleDisabledAttributeChange(r !== null);
+          break;
+        case "radius":
+        case "radius--mobile":
+        case "radius--tablet":
+        case "radius--laptop":
+        case "radius--desktop":
+        case "separator":
+        case "separator--mobile":
+        case "separator--tablet":
+        case "separator--laptop":
+        case "separator--desktop":
+        case "background-color":
+        case "compact":
+          this.$cell.setAttribute(t, this.getAttribute(t) || "");
+          break;
+        case "name":
+        case "value":
+          this.$switch && this.$switch.setAttribute(t, r);
+          break;
+        case "checked":
+          this.handleCheckedAttributeChange(r);
+          break;
+      }
+  }
+  handleDisabledAttributeChange(t) {
+    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$switch.setAttribute("disabled", ""), this.$children.forEach((e) => {
+      e.hasAttribute("disabled") || e.setAttribute("disabled", "");
+    })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$switch.removeAttribute("disabled"), this.$children.forEach((e) => {
+      e.hasAttribute("disabled") && e.removeAttribute("disabled");
+    }));
+  }
+  handleCheckedAttributeChange(t) {
+    var e;
+    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    ));
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t;
+  }
+  formData() {
+    if (this.name) {
+      const t = new FormData(), e = this.getAttribute("name");
+      return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
+    }
+  }
+  get $cell() {
+    return this.shadowRoot.querySelector("px-cell");
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".cell-switch");
+  }
+  get $switch() {
+    return this.shadowRoot.querySelector("px-switch");
+  }
+  get $slotVisual() {
+    return this.querySelector('[slot="visual"]');
+  }
+  get $children() {
+    return this.querySelectorAll("px-cell-switch > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get separator() {
+    return this.getAttribute("separator");
+  }
+  set separator(t) {
+    this.setAttribute("separator", t);
+  }
+  get separatorMobile() {
+    return this.getAttribute("separator--mobile");
+  }
+  set separatorMobile(t) {
+    this.setAttribute("separator--mobile", t);
+  }
+  get separatorTablet() {
+    return this.getAttribute("separator--tablet");
+  }
+  set separatorTablet(t) {
+    this.setAttribute("separator--tablet", t);
+  }
+  get separatorLaptop() {
+    return this.getAttribute("separator--laptop");
+  }
+  set separatorLaptop(t) {
+    this.setAttribute("separator--laptop", t);
+  }
+  get separatorDesktop() {
+    return this.getAttribute("separator--desktop");
+  }
+  set separatorDesktop(t) {
+    this.setAttribute("separator--desktop", t);
+  }
+  get radius() {
+    return this.getAttribute("radius");
+  }
+  set radius(t) {
+    this.setAttribute("radius", t);
+  }
+  get radiusMobile() {
+    return this.getAttribute("radius--mobile");
+  }
+  set radiusMobile(t) {
+    this.setAttribute("radius--mobile", t);
+  }
+  get radiusTablet() {
+    return this.getAttribute("radius--tablet");
+  }
+  set radiusTablet(t) {
+    this.setAttribute("radius--tablet", t);
+  }
+  get radiusLaptop() {
+    return this.getAttribute("radius--laptop");
+  }
+  set radiusLaptop(t) {
+    this.setAttribute("radius--laptop", t);
+  }
+  get radiusDesktop() {
+    return this.getAttribute("radius--desktop");
+  }
+  set radiusDesktop(t) {
+    this.setAttribute("radius--desktop", t);
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(t) {
+    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(t) {
+    t ? this.setAttribute("name", t) : this.removeAttribute("name");
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    t ? this.setAttribute("state", t) : this.removeAttribute("state");
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t ? this.setAttribute("value", t) : this.removeAttribute("value");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
+  }
+  get compact() {
+    return this.hasAttribute("compact");
+  }
+  set compact(t) {
+    t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
+  }
+}
+customElements.get("px-cell-switch") || customElements.define("px-cell-switch", Ge);
+const Ke = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}input{font-size:var(--px-font-size-base)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-ratio-l) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-color-border-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E");border-color:var(--px-color-border-none-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-color-text-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Gt = new CSSStyleSheet();
+Gt.replaceSync(Ke);
+const Kt = ["", "default", "selectable-tag"], Xt = ["", "error"], vt = class vt extends x {
+  constructor() {
+    super(Gt), this.template = () => `<div class="radio" tabindex="-1">
+      <input type="radio" tabindex="-1" />
+      <label><slot name="before"></slot><slot name="label"></slot></label>
+    </div>`, this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "hover", "inverted"];
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "hover":
+          this.$el.classList.toggle("hover");
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  get $radio() {
+    return this.shadowRoot.querySelector(".radio");
+  }
+  get $labelSlot() {
+    return this.querySelector('[slot="label"]');
+  }
+  get $iconSlot() {
+    return this.querySelector('px-icon[slot="before"]');
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+};
+vt.nativeName = "input";
+let W = vt;
+customElements.get("px-radio-base") || customElements.define("px-radio-base", W);
+const xt = class xt extends W {
+  constructor() {
+    var t, e;
+    super(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.querySelector("px-radio")) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "state", "variant", "inverted"];
+  }
+  connectedCallback() {
+    this.addEventListener("keypress", (t) => {
+      switch (t.stopPropagation(), t.preventDefault(), t.code) {
+        case "Space":
+          this.click();
+          break;
+      }
+    }), this.addEventListener("click", (t) => {
+      this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
+    }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot ? this.$radio.classList.add("all-slots-empty") : this.$radio.classList.remove("all-slots-empty");
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "state":
+          this.updateAttribute(e, r, Xt, t);
+          break;
+        case "variant":
+          this.updateAttribute(
+            e,
+            r,
+            Kt,
+            t
+          );
+          break;
+        case "checked":
+          this.handleCheckedChange(r !== null);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t;
+  }
+  updateAttribute(t, e, r, o) {
+    var a, s;
+    if (!this.checkName(r, e)) {
+      console.error(`${e} is not a valid ${o} value`);
+      return;
+    }
+    t !== null && (o === "variant" ? (a = this.$el.parentElement) == null || a.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (o === "variant" ? (s = this.$el.parentElement) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
+  }
+  handleCheckedChange(t) {
+    var e;
+    this.$el.checked = t, (e = this.internals) == null || e.setFormValue(this.formData()), t ? (this.tabIndex = 0, this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("checked", "")) : (this.tabIndex = -1, this.removeAttribute("checked"), this.internals && (this.internals.ariaChecked = "false")), t && this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    );
+  }
+  formData() {
+    if (this.$el.name) {
+      const t = new FormData(), e = this.getAttribute("name");
+      return e && (this.$el.checked ? t.set(e, this.$el.value) : t.delete(e)), t;
+    }
+  }
+  setupForId() {
+    const t = Math.random().toString(36).substr(2, 9);
+    this.$el.setAttribute("id", t), this.$label && this.$label.setAttribute("for", t);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    this.setAttribute("state", t);
+  }
+  get disabled() {
+    return this.getAttribute("disabled") !== null;
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get $label() {
+    return this.shadowRoot.querySelector("label");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get checked() {
+    return this.$el.checked;
+  }
+  set checked(t) {
+    t ? this.setAttribute("checked", t ? "" : "false") : this.removeAttribute("checked");
+  }
+  get $radio() {
+    return this.shadowRoot.querySelector(".radio");
+  }
+  get $labelSlot() {
+    return this.querySelector('[slot="label"]');
+  }
+  get $iconSlot() {
+    return this.querySelector('px-icon[slot="before"]');
+  }
+};
+xt.nativeName = "input";
+let at = xt;
+customElements.get("px-radio") || customElements.define("px-radio", at);
+const Xe = ":host{display:block}:host *{box-sizing:border-box}#radio-container{display:inline-flex;flex-direction:column;gap:var(--px-radiogroup-gap--mobile, var(--px-spacing-s-mobile));font-family:var(--px-font-family)}.selectable-tag #radio-container{flex-direction:row}@media only screen and (min-width: 48em){#radio-container{gap:var(--px-radiogroup-gap--tablet, var(--px-spacing-s-tablet))}}@media only screen and (min-width: 64.0625em){#radio-container{gap:var(--px-radiogroup-gap--laptop, var(--px-spacing-s-laptop))}}@media only screen and (min-width: 90.0625em){#radio-container{gap:var(--px-radiogroup-gap--desktop, var(--px-spacing-s-desktop))}}", Jt = new CSSStyleSheet();
+Jt.replaceSync(Xe);
+const Je = [
+  "",
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "default",
+  "l"
+];
+class Qe extends $ {
+  constructor() {
+    super(Jt), this.template = () => `<px-fieldset role="radiogroup">
+      <slot name="legend" slot="legend"></slot>
+      <slot name="error-text" slot="error-text"></slot>
+      <div id="radio-container">
+        <slot></slot>
+      </div>
+    </px-fieldset>`, this.handleKeyDown = () => {
+      var e;
+      const t = this.currentCheckedRadio ? ((e = this.currentCheckedRadio) == null ? void 0 : e.nextElementSibling) ?? this.$radioList[0] : this.$radioList[1];
+      t.checked = !0, t.focus();
+    }, this.handleKeyUp = () => {
+      var e;
+      const t = ((e = this.currentCheckedRadio) == null ? void 0 : e.previousElementSibling) ?? this.$radioList[this.$radioList.length - 1];
+      t.checked = !0, t.focus();
+    }, this.handleRadioChange = (t) => {
+      const e = t.target;
+      if (e.localName === "px-tile-radio" || e.localName === "px-radio" || e.localName === "px-cell-radio") {
+        this.currentCheckedRadio = e;
+        const r = e.getAttribute("name");
+        r && this.currentCheckedRadio.checked && this.uncheckOtherRadios(r);
+      }
+    }, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "name",
+      "gap",
+      "variant",
+      "required",
+      "disabled",
+      "state",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    var e;
+    (!this.hasAttribute("name") || this.getAttribute("name") === "") && console.error(
+      '<px-radio-group> requires a "name" attribute to function properly.'
+    ), ((e = this.$slotLegend) == null ? void 0 : e.assignedNodes().length) > 0 || console.error(
+      '<px-radiogroup> requires a slot="legend" containing the description of the fieldset radiogroup.'
+    ), this.setupErrorState(), this.addEventListener("change", this.handleRadioChange), this.addEventListener("keydown", (r) => {
+      switch (r.code) {
+        case "ArrowUp":
+        case "ArrowDown":
+          r.stopPropagation(), r.preventDefault();
+      }
+    }), this.addEventListener("keyup", (r) => {
+      switch (r.stopPropagation(), r.preventDefault(), r.code) {
+        case "ArrowUp":
+        case "ArrowLeft":
+          this.handleKeyUp();
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          this.handleKeyDown();
+          break;
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("change", this.handleRadioChange);
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "gap":
+          this.updateGap(e, r, Je);
+          break;
+        case "variant":
+          this.updateVariant(e, r, Kt);
+          break;
+        case "disabled":
+          this.$el.ariaDisabled = "true", this.$radioList.forEach((o) => {
+            o.setAttribute(t, r);
+          });
+          break;
+        case "required":
+          this.$el.ariaRequired = "true";
+          break;
+        case "name":
+          this.$radioList.forEach((o) => {
+            o.setAttribute(t, r);
+          });
+          break;
+        case "inverted":
+          this.$el.setAttribute(t, r), this.$radioList.forEach((o) => {
+            o.setAttribute(t, r);
+          });
+          break;
+        case "state":
+          this.setupErrorState();
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  uncheckOtherRadios(t) {
+    this.querySelectorAll(
+      `px-radio[name="${t}"], px-tile-radio[name="${t}"], px-cell-radio[name="${t}"]`
+    ).forEach((r) => {
+      r !== this.currentCheckedRadio && (r.checked = !1);
+    });
+  }
+  updateVariant(t, e, r) {
+    if (!this.checkName(r, e)) {
+      console.error(`${e} is not a valid variant value`);
+      return;
+    }
+    t !== null && t !== "" && this.$el.classList.toggle(t), e !== null && e !== "" && (this.$el.classList.toggle(e), this.$radioList.forEach((o) => {
+      o.setAttribute("variant", e);
+    }));
+  }
+  updateGap(t, e, r) {
+    if (!this.checkName(r, e)) {
+      console.error(`${e} is not a valid gap value`);
+      return;
+    }
+    this.updateGapStyle(t), this.updateGapStyle(e);
+  }
+  updateGapStyle(t) {
+    t !== null && t !== "" && t !== "default" && (this.$el.style.setProperty(
+      "--px-radiogroup-gap--mobile",
+      `var(--px-spacing-${t}-mobile)`
+    ), this.$el.style.setProperty(
+      "--px-radiogroup-gap--tablet",
+      `var(--px-spacing-${t}-tablet)`
+    ), this.$el.style.setProperty(
+      "--px-radiogroup-gap--laptop",
+      `var(--px-spacing-${t}-laptop)`
+    ), this.$el.style.setProperty(
+      "--px-radiogroup-gap--desktop",
+      `var(--px-spacing-${t}-desktop)`
+    ));
+  }
+  setupErrorState() {
+    var e;
+    const t = ((e = this.$slotError) == null ? void 0 : e.assignedNodes().length) > 0;
+    this.state === "error" && !t && console.error(
+      '<px-radiogroup> with state="error" requires a slot="error-text" containing the error description.'
+    ), this.state === "error" && t ? (this.$el.setAttribute("state", "error"), this.$radioList.forEach((r) => {
+      r.setAttribute("state", "error");
+    })) : (this.$el.removeAttribute("state"), this.$radioList.forEach((r) => {
+      r.removeAttribute("state");
+    }));
+  }
+  get $el() {
+    return this.shadowRoot.querySelector("px-fieldset");
+  }
+  get $slotLegend() {
+    return this.shadowRoot.querySelector(
+      'slot[name="legend"]'
+    );
+  }
+  get $slotError() {
+    return this.shadowRoot.querySelector(
+      'slot[name="error-text"]'
+    );
+  }
+  get $radioList() {
+    return this.querySelectorAll(
+      "px-radio, px-tile-radio, px-cell-radio"
+    );
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    this.setAttribute("state", t);
+  }
+  get $label() {
+    return this.shadowRoot.querySelector("label");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+  set required(t) {
+    t ? this.setAttribute("required", "") : this.removeAttribute("required");
+  }
+}
+customElements.get("px-radio-group") || customElements.define("px-radio-group", Qe);
+const Qt = new CSSStyleSheet();
+Qt.replaceSync(M);
+const Ve = ["", "left", "right"];
+class tr extends $ {
+  template() {
+    return `
+    <div class="cell-radio">
+      <px-cell hoverable>
+        <px-radio-base slot="prefix" aria-hidden="true" tabindex="-1"></px-radio-base>
+        <slot name="visual" slot="visual"></slot>
+        <slot name="label" slot="label"></slot>
+        <slot name="description" slot="description"></slot>
+        <slot name="suffix" slot="suffix"></slot>
+      </px-cell>
+    `;
+  }
+  constructor() {
+    var t, e;
+    super(Qt), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
+  }
+  connectedCallback() {
+    if (this.$slotVisual) {
+      const t = this.querySelector('px-img[slot="visual"]');
+      t && L(t);
+    }
+    this.addEventListener("mouseover", () => {
+      this.$radio.setAttribute("hover", "");
+    }), this.addEventListener("mouseout", () => {
+      this.$radio.removeAttribute("hover");
+    }), this.addEventListener("keypress", (t) => {
+      switch (t.stopPropagation(), t.preventDefault(), t.code) {
+        case "Space":
+          this.click();
+          break;
+      }
+    }), this.addEventListener("click", (t) => {
+      this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
+    }), this.hasAttribute("checked") && (this.checked = !0), T(this);
+  }
+  static get observedAttributes() {
+    return [
+      "inverted",
+      "variant",
+      "disabled",
+      "separator",
+      "separator--mobile",
+      "separator--tablet",
+      "separator--laptop",
+      "separator--desktop",
+      "radius",
+      "radius--mobile",
+      "radius--tablet",
+      "radius--laptop",
+      "radius--desktop",
+      "name",
+      "value",
+      "state",
+      "checked",
+      "radio-position",
+      "background-color",
+      "compact"
+    ];
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "variant":
+          this.$cell.variant = this.variant;
+          break;
+        case "inverted":
+          O(this.$cell, this.$children, this.inverted, [
+            this.$radio
+          ]);
+          break;
+        case "disabled":
+          this.handleDisabledAttributeChange(r !== null);
+          break;
+        case "radius":
+        case "radius--mobile":
+        case "radius--tablet":
+        case "radius--laptop":
+        case "radius--desktop":
+        case "separator":
+        case "separator--mobile":
+        case "separator--tablet":
+        case "separator--laptop":
+        case "separator--desktop":
+        case "background-color":
+        case "compact":
+          this.$cell.setAttribute(t, this.getAttribute(t) || "");
+          break;
+        case "name":
+        case "value":
+          this.$radio && this.$radio.setAttribute(t, r);
+          break;
+        case "state":
+          if (this.$radio)
+            if (this.checkName(Xt, r))
+              this.$radio.setAttribute("state", r);
+            else {
+              console.error(`${r} is not a valid state value`);
+              return;
+            }
+          break;
+        case "checked":
+          this.handleCheckedAttributeChange(r);
+          break;
+        case "radio-position":
+          this.handleRadioPositionChange(r);
+          break;
+      }
+  }
+  handleDisabledAttributeChange(t) {
+    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$radio.setAttribute("disabled", ""), this.$children.forEach((e) => {
+      e.hasAttribute("disabled") || e.setAttribute("disabled", "");
+    })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$radio.removeAttribute("disabled"), this.$children.forEach((e) => {
+      e.hasAttribute("disabled") && e.removeAttribute("disabled");
+    }));
+  }
+  handleCheckedAttributeChange(t) {
+    var e;
+    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.setAttribute("tabIndex", "-1"), this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("tabIndex", "0"), this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    ));
+  }
+  handleRadioPositionChange(t) {
+    if (!this.checkName(Ve, t)) {
+      console.error(`${t} is not a valid position value`);
+      return;
+    }
+    this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t;
+  }
+  formData() {
+    if (this.name) {
+      const t = new FormData(), e = this.getAttribute("name");
+      return e && (this.checked ? t.set(e, this.$radio.value) : t.delete(e)), t;
+    }
+  }
+  get $cell() {
+    return this.shadowRoot.querySelector("px-cell");
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".cell-radio");
+  }
+  get $radio() {
+    return this.shadowRoot.querySelector("px-radio-base");
+  }
+  get $slotVisual() {
+    return this.querySelector('[slot="visual"]');
+  }
+  get $children() {
+    return this.querySelectorAll("px-cell-radio > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get separator() {
+    return this.getAttribute("separator");
+  }
+  set separator(t) {
+    this.setAttribute("separator", t);
+  }
+  get separatorMobile() {
+    return this.getAttribute("separator--mobile");
+  }
+  set separatorMobile(t) {
+    this.setAttribute("separator--mobile", t);
+  }
+  get separatorTablet() {
+    return this.getAttribute("separator--tablet");
+  }
+  set separatorTablet(t) {
+    this.setAttribute("separator--tablet", t);
+  }
+  get separatorLaptop() {
+    return this.getAttribute("separator--laptop");
+  }
+  set separatorLaptop(t) {
+    this.setAttribute("separator--laptop", t);
+  }
+  get separatorDesktop() {
+    return this.getAttribute("separator--desktop");
+  }
+  set separatorDesktop(t) {
+    this.setAttribute("separator--desktop", t);
+  }
+  get radius() {
+    return this.getAttribute("radius");
+  }
+  set radius(t) {
+    this.setAttribute("radius", t);
+  }
+  get radiusMobile() {
+    return this.getAttribute("radius--mobile");
+  }
+  set radiusMobile(t) {
+    this.setAttribute("radius--mobile", t);
+  }
+  get radiusTablet() {
+    return this.getAttribute("radius--tablet");
+  }
+  set radiusTablet(t) {
+    this.setAttribute("radius--tablet", t);
+  }
+  get radiusLaptop() {
+    return this.getAttribute("radius--laptop");
+  }
+  set radiusLaptop(t) {
+    this.setAttribute("radius--laptop", t);
+  }
+  get radiusDesktop() {
+    return this.getAttribute("radius--desktop");
+  }
+  set radiusDesktop(t) {
+    this.setAttribute("radius--desktop", t);
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(t) {
+    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(t) {
+    t ? this.setAttribute("name", t) : this.removeAttribute("name");
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    t ? this.setAttribute("state", t) : this.removeAttribute("state");
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t ? this.setAttribute("value", t) : this.removeAttribute("value");
+  }
+  get radioPosition() {
+    return this.getAttribute("radio-position");
+  }
+  set radioPosition(t) {
+    t ? this.setAttribute("radio-position", t) : this.removeAttribute("radio-position");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
+  }
+  get compact() {
+    return this.hasAttribute("compact");
+  }
+  set compact(t) {
+    t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
+  }
+}
+customElements.get("px-cell-radio") || customElements.define("px-cell-radio", tr);
+const er = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", Vt = new CSSStyleSheet();
+Vt.replaceSync(er);
+class rr extends $ {
+  constructor() {
+    var t;
+    super(), this.template = () => `${this.getAttribute("href") ? `<a href="${this.getAttribute("href")}" data-label="${this.textContent}">
+          <slot></slot>
+        </a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [Vt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
+  }
+  static get observedAttributes() {
+    return ["for", "href"];
+  }
+  connectedCallback() {
+    this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y(), this.contentObserver = new MutationObserver(() => {
+      this.updateDataLabel();
+    }), this.contentObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    });
+  }
+  disconnectedCallback() {
+    this.contentObserver.disconnect();
+  }
+  attributeChangedCallback(t, e, r) {
+    super.attributeChangedCallback(t, e, r), t === "href" && this.$a && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$button && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
+  }
+  setupButtonA11y() {
+    this.$button.ariaExpanded = "false", this.$button.setAttribute("aria-controls", this.for || "");
+  }
+  updateDataLabel() {
+    this.$button && this.$button.setAttribute("data-label", this.textContent), this.$a && this.$a.setAttribute("data-label", this.textContent);
+  }
+  get for() {
+    return this.getAttribute("for");
+  }
+  set for(t) {
+    this.setAttribute("for", t);
+  }
+  get checked() {
+    return this.$button.ariaExpanded === "true";
+  }
+  set checked(t) {
+    if (typeof t != "boolean")
+      throw new Error("checked must be a boolean");
+    this.$button && (this.$button.ariaExpanded = `${!!t}`, this.$button.setAttribute("aria-controls", this.for));
+  }
+  get $button() {
+    return this.shadowRoot.querySelector("button");
+  }
+  get $a() {
+    return this.shadowRoot.querySelector("a");
+  }
+}
+customElements.get("px-header-item") || customElements.define("px-header-item", rr);
+const or = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", te = new CSSStyleSheet(), ee = new CSSStyleSheet(), re = new CSSStyleSheet();
+te.replaceSync(Mt);
+ee.replaceSync(Tt);
+re.replaceSync(or);
+const ir = [...we, "link-m", "link-s"], ar = [
+  "link",
+  "no-style",
+  "skip-link",
+  "btn-default",
+  "btn-secondary",
+  "btn-tertiary",
+  "icon-link"
+], sr = ["", "default", "alternative"], ft = class ft extends x {
+  constructor() {
+    super(te, ee, re), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
+    const t = document.createElement(this.nativeName);
+    t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "disabled",
+      "variant",
+      "shape",
+      "shape--mobile",
+      "shape--tablet",
+      "shape--laptop",
+      "shape--desktop",
+      "extended",
+      "extended--mobile",
+      "extended--tablet",
+      "extended--laptop",
+      "extended--desktop",
+      "inverted",
+      "font-size",
+      "color",
+      "font-weight",
+      "title"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), Et(this, this.$el, !1);
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "disabled":
+          this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
+          break;
+        case "variant":
+          this.updateVariant(e, r);
+          break;
+        case "shape":
+        case "shape--mobile":
+        case "shape--tablet":
+        case "shape--laptop":
+        case "shape--desktop":
+          this.updateShape(t, r, sr);
+          break;
+        case "extended":
+        case "extended--mobile":
+        case "extended--tablet":
+        case "extended--laptop":
+        case "extended--desktop":
+          this.updateExtended(t, r);
+          break;
+        case "font-size":
+          this.updateTypography(
+            t,
+            e,
+            r,
+            ir
+          );
+          break;
+        case "color":
+          this.updateTypography(t, e, r, ze);
+          break;
+        case "font-weight":
+          this.updateTypography(t, e, r, Se);
+          break;
+        case "title":
+          r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  configureBeforeAfterIcon(t) {
+    const e = t.getAttribute("size"), r = t.getAttribute("color");
+    t.addEventListener("click", () => {
+      this.$el.focus();
+    }), e || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit");
+  }
+  _toggleClassList(t) {
+    if (t.startsWith("btn-")) {
+      const e = t.split("-");
+      for (const r of e)
+        this.$el.classList.toggle(r);
+    } else
+      this.$el.classList.toggle(t);
+  }
+  updateVariant(t, e) {
+    t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(ar, e) || console.error(`Bad "variant" value for ${e}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
+  }
+  updateShape(t, e, r) {
+    if (!y(r, e)) {
+      console.error(`${e} is not a valid shape value`);
+      return;
+    }
+    e !== null && e !== "" && this.$el.setAttribute(t, e);
+  }
+  updateTypography(t, e, r, o) {
+    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || console.error(`Bad ${t} value: ${r}`);
+  }
+  updateExtended(t, e) {
+    e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
+  }
+  get $before() {
+    return this.querySelector('[slot="before"]');
+  }
+  get $after() {
+    return this.querySelector('[slot="after"]');
+  }
+  get $iconNotBeforeAfter() {
+    return this.querySelector(
+      'px-icon:not([slot="before"], [slot="after"])'
+    );
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(t) {
+    this.setAttribute("disabled", t);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(t) {
+    this.setAttribute("shape", t);
+  }
+  get shapeMobile() {
+    return this.getAttribute("shape--mobile");
+  }
+  set shapeMobile(t) {
+    this.setAttribute("shape--mobile", t);
+  }
+  get shapeTablet() {
+    return this.getAttribute("shape--tablet");
+  }
+  set shapeTablet(t) {
+    this.setAttribute("shape--tablet", t);
+  }
+  get shapeLaptop() {
+    return this.getAttribute("shape--laptop");
+  }
+  set shapeLaptop(t) {
+    this.setAttribute("shape--laptop", t);
+  }
+  get shapeDesktop() {
+    return this.getAttribute("shape--desktop");
+  }
+  set shapeDesktop(t) {
+    this.setAttribute("shape--desktop", t);
+  }
+  get extended() {
+    return this.getAttribute("extended");
+  }
+  set extended(t) {
+    this.setAttribute("extended", t);
+  }
+  get extendedMobile() {
+    return this.getAttribute("extended--mobile");
+  }
+  set extendedMobile(t) {
+    this.setAttribute("extended--mobile", t);
+  }
+  get extendedTablet() {
+    return this.getAttribute("extended--tablet");
+  }
+  set extendedTablet(t) {
+    this.setAttribute("extended--tablet", t);
+  }
+  get extendedLaptop() {
+    return this.getAttribute("extended--laptop");
+  }
+  set extendedLaptop(t) {
+    this.setAttribute("extended--laptop", t);
+  }
+  get extendedDesktop() {
+    return this.getAttribute("extended--desktop");
+  }
+  set extendedDesktop(t) {
+    this.setAttribute("extended--desktop", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get fontsize() {
+    return this.getAttribute("font-size");
+  }
+  set fontsize(t) {
+    this.setAttribute("font-size", t);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(t) {
+    this.setAttribute("color", t);
+  }
+  get fontweight() {
+    return this.getAttribute("font-weight");
+  }
+  set fontweight(t) {
+    this.setAttribute("font-weight", t);
+  }
+  get title() {
+    return this.getAttribute("title");
+  }
+  set title(t) {
+    t ? this.setAttribute("title", t) : this.removeAttribute("title");
+  }
+};
+ft.nativeName = "a";
+let st = ft;
+customElements.get("px-a") || customElements.define("px-a", st);
+class nr extends HTMLElement {
+  constructor() {
+    super(), this.template = `<px-a font-weight="title" font-size="body-l" color="brand" variant="no-style">
+    <slot></slot>
+  </px-a>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
+    const t = this.shadowRoot.querySelector("px-a");
+    t && Array.from(this.attributes).forEach((e) => {
+      t.setAttribute(e.name, e.value);
+    });
+  }
+}
+customElements.get("px-mdd-a") || customElements.define("px-mdd-a", nr);
+const dr = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media only screen and (min-width: 48em){#dropdown-zone--desktop{display:block;margin-block:var(--px-padding-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media only screen and (min-width: 64.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
+function N(i) {
+  var t = typeof i;
+  return i != null && (t == "object" || t == "function");
+}
+var lr = typeof global == "object" && global && global.Object === Object && global, cr = typeof self == "object" && self && self.Object === Object && self, oe = lr || cr || Function("return this")(), Q = function() {
+  return oe.Date.now();
+}, br = /\s/;
+function pr(i) {
+  for (var t = i.length; t-- && br.test(i.charAt(t)); )
+    ;
+  return t;
+}
+var hr = /^\s+/;
+function ur(i) {
+  return i && i.slice(0, pr(i) + 1).replace(hr, "");
+}
+var Z = oe.Symbol, ie = Object.prototype, gr = ie.hasOwnProperty, vr = ie.toString, D = Z ? Z.toStringTag : void 0;
+function xr(i) {
+  var t = gr.call(i, D), e = i[D];
+  try {
+    i[D] = void 0;
+    var r = !0;
+  } catch {
+  }
+  var o = vr.call(i);
+  return r && (t ? i[D] = e : delete i[D]), o;
+}
+var fr = Object.prototype, mr = fr.toString;
+function kr(i) {
+  return mr.call(i);
+}
+var Ar = "[object Null]", yr = "[object Undefined]", Ct = Z ? Z.toStringTag : void 0;
+function $r(i) {
+  return i == null ? i === void 0 ? yr : Ar : Ct && Ct in Object(i) ? xr(i) : kr(i);
+}
+function Cr(i) {
+  return i != null && typeof i == "object";
+}
+var wr = "[object Symbol]";
+function Sr(i) {
+  return typeof i == "symbol" || Cr(i) && $r(i) == wr;
+}
+var wt = NaN, zr = /^[-+]0x[0-9a-f]+$/i, Er = /^0b[01]+$/i, Lr = /^0o[0-7]+$/i, Tr = parseInt;
+function St(i) {
+  if (typeof i == "number")
+    return i;
+  if (Sr(i))
+    return wt;
+  if (N(i)) {
+    var t = typeof i.valueOf == "function" ? i.valueOf() : i;
+    i = N(t) ? t + "" : t;
+  }
+  if (typeof i != "string")
+    return i === 0 ? i : +i;
+  i = ur(i);
+  var e = Er.test(i);
+  return e || Lr.test(i) ? Tr(i.slice(2), e ? 2 : 8) : zr.test(i) ? wt : +i;
+}
+var Mr = "Expected a function", Br = Math.max, Rr = Math.min;
+function Ir(i, t, e) {
+  var r, o, a, s, l, b, u = 0, B = !1, R = !1, G = !0;
+  if (typeof i != "function")
+    throw new TypeError(Mr);
+  t = St(t) || 0, N(e) && (B = !!e.leading, R = "maxWait" in e, a = R ? Br(St(e.maxWait) || 0, t) : a, G = "trailing" in e ? !!e.trailing : G);
+  function K(c) {
+    var g = r, I = o;
+    return r = o = void 0, u = c, s = i.apply(I, g), s;
+  }
+  function he(c) {
+    return u = c, l = setTimeout(j, t), B ? K(c) : s;
+  }
+  function ue(c) {
+    var g = c - b, I = c - u, At = t - g;
+    return R ? Rr(At, a - I) : At;
+  }
+  function mt(c) {
+    var g = c - b, I = c - u;
+    return b === void 0 || g >= t || g < 0 || R && I >= a;
+  }
+  function j() {
+    var c = Q();
+    if (mt(c))
+      return kt(c);
+    l = setTimeout(j, ue(c));
+  }
+  function kt(c) {
+    return l = void 0, G && r ? K(c) : (r = o = void 0, s);
+  }
+  function ge() {
+    l !== void 0 && clearTimeout(l), u = 0, r = b = o = l = void 0;
+  }
+  function ve() {
+    return l === void 0 ? s : kt(Q());
+  }
+  function X() {
+    var c = Q(), g = mt(c);
+    if (r = arguments, o = this, b = c, g) {
+      if (l === void 0)
+        return he(b);
+      if (R)
+        return clearTimeout(l), l = setTimeout(j, t), K(b);
+    }
+    return l === void 0 && (l = setTimeout(j, t)), s;
+  }
+  return X.cancel = ge, X.flush = ve, X;
+}
+var qr = "Expected a function";
+function Dr(i, t, e) {
+  var r = !0, o = !0;
+  if (typeof i != "function")
+    throw new TypeError(qr);
+  return N(e) && (r = "leading" in e ? !!e.leading : r, o = "trailing" in e ? !!e.trailing : o), Ir(i, t, {
+    leading: r,
+    maxWait: t,
+    trailing: o
+  });
+}
+const ae = new CSSStyleSheet();
+ae.replaceSync(dr);
+const Pr = "Menu";
+var H, n, se, nt, dt, ne, lt, A, P, _, C;
+class _r extends $ {
+  constructor() {
+    var e;
+    super(ae);
+    h(this, n);
+    h(this, H);
+    this.template = `
+    <div>
+      <header>
+        <slot name="skip"></slot>
+        <px-section id="navigation-container" padding-block--mobile="s" padding-block="none"
+                    background-color="none">
+          <px-hstack id="dropdown-zone--desktop" justify-content="space-between" align-items="center">
+            <slot name="target-group"></slot>
+            <slot name="user-language"></slot>
+          </px-hstack>
+          <px-hstack gap="default" wrap="wrap" align-items="center">
+            <slot name="header-logo"></slot>
+            <nav id="primary-navigation" aria-label="${this.primaryNavigationAriaLabel}">
+              <div role="list">
+                <px-hstack gap="default" wrap="wrap" align-items="center">
+                  <slot name="header-entries"></slot>
+                </px-hstack>
+              </div>
+            </nav>
+            <px-spacer></px-spacer>
+            <px-hstack gap--mobile="none" gap="default">
+              <slot name="header-actions"></slot>
+              <px-button-icon variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
+                              aria-expanded="false" aria-controls="__lavender_mobile_menu" hidden--tablet hidden--laptop
+                              hidden--desktop>
+                <px-icon name="burger_menu" from="lavender"></px-icon>
+              </px-button-icon>
+            </px-hstack>
+          </px-hstack>
+        </px-section>
+        <px-section id="panel-container" background-color="surface-default" padding="none"
+                    background-color="none">
+          <slot name="header-panels">
+        </px-section>
+      </header>
+      <div id="backdrop-filter"></div>
+      <slot name="main"></slot>
+    </div>
+  `, q(this, H, () => {
+      window.innerWidth >= 768 && (p(this, n, ne).call(this), p(this, n, se).call(this));
+    }), this.shadowRoot.innerHTML = this.template, this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.internals && (this.internals.role = "navigation", this.internals.ariaOrientation = "horizontal");
+  }
+  connectedCallback() {
+    this.addEventListener("click", (e) => {
+      const r = e.target.closest(
+        "px-header-item"
+      );
+      r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block", d(this, n, P).forEach((o) => {
+        o.checked = !1;
+      }), r.checked = !0, p(this, n, nt).call(this, e.target.for)) : p(this, n, lt).call(this));
+    }), this.addEventListener("section-item-click", (e) => {
+      this.$backdropFilter.style.display = "block", d(this, n, P).forEach((r) => {
+        r.checked = !1;
+      }), this.querySelector(
+        `px-header-item[for="${e.detail.for}"]`
+      ).checked = !0, p(this, n, nt).call(this, e.detail.for);
+    }), this.addEventListener("back-to-mobile-menu", () => {
+      this.$backdropFilter.style.display = "block", d(this, n, P).forEach((e) => {
+        e.checked = !1;
+      }), p(this, n, dt).call(this);
+    }), this.shadowRoot.addEventListener("click", (e) => {
+      e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), p(this, n, dt).call(this));
+    }), this.addEventListener("close-panel", () => {
+      p(this, n, lt).call(this), this.$burgerMenu.setAttribute("aria-expanded", "false");
+    }), this.addEventListener(
+      "close-panel-from-dialog",
+      (e) => {
+        this.dispatchEvent(new CustomEvent("close-panel")), e.detail.clientY < d(this, n, _).getBoundingClientRect().bottom && requestAnimationFrame(() => {
+          var r;
+          (r = document.elementFromPoint(
+            e.detail.clientX,
+            e.detail.clientY
+          )) == null || r.click();
+        });
+      }
+    ), !this.$targetGroupDropdown && !this.$userLanguageDropdown && (this.$dropDownZoneDesktop.style.display = "none"), this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", Pr), window.addEventListener("resize", Dr(d(this, H), 200));
+  }
+  static get observedAttributes() {
+    return [
+      "burger-menu-aria-label",
+      "close-button-aria-label",
+      "primary-navigation-aria-label",
+      "back-to-menu-label"
+    ];
+  }
+  attributeChangedCallback(e, r, o) {
+    if (r !== o)
+      switch (e) {
+        case "close-button-aria-label":
+          d(this, n, C).forEach((a) => {
+            a.setAttribute("close-button-aria-label", o);
+          });
+          break;
+        case "burger-menu-aria-label":
+          this.$burgerMenu.setAttribute("aria-label", o);
+          break;
+        case "primary-navigation-aria-label":
+          this.$primaryNavigation.setAttribute("aria-label", o);
+          break;
+        case "back-to-menu-label":
+          d(this, n, C).forEach((a) => {
+            a.setAttribute("back-to-menu-label", o);
+          });
+          break;
+      }
+  }
+  get $backdropFilter() {
+    return this.shadowRoot.querySelector("#backdrop-filter");
+  }
+  get $burgerMenu() {
+    return this.shadowRoot.querySelector("px-button-icon");
+  }
+  get $slotMain() {
+    return this.querySelector('[slot="main"]');
+  }
+  get $targetGroupDropdown() {
+    return this.querySelector('px-dropdown[slot="target-group"]');
+  }
+  get $userLanguageDropdown() {
+    return this.querySelector('px-dropdown[slot="user-language"]');
+  }
+  get $dropDownZoneDesktop() {
+    return this.shadowRoot.querySelector("#dropdown-zone--desktop");
+  }
+  get $primaryNavigation() {
+    return this.shadowRoot.querySelector("#primary-navigation");
+  }
+  get closeButtonAriaLabel() {
+    return this.getAttribute("close-button-aria-label");
+  }
+  set closeButtonAriaLabel(e) {
+    e ? this.setAttribute("close-button-aria-label", e) : this.removeAttribute("close-button-aria-label");
+  }
+  get burgerMenuAriaLabel() {
+    return this.getAttribute("burger-menu-aria-label");
+  }
+  set burgerMenuAriaLabel(e) {
+    e ? this.setAttribute("burger-menu-aria-label", e) : this.removeAttribute("burger-menu-aria-label");
+  }
+  get backToMenuLabel() {
+    return this.getAttribute("back-to-menu-label");
+  }
+  set backToMenuLabel(e) {
+    e ? this.setAttribute("back-to-menu-label", e) : this.removeAttribute("back-to-menu-label");
+  }
+  get primaryNavigationAriaLabel() {
+    return this.getAttribute("primary-navigation-aria-label");
+  }
+  set primaryNavigationAriaLabel(e) {
+    e ? this.setAttribute("primary-navigation-aria-label", e) : this.removeAttribute("primary-navigation-aria-label");
+  }
+}
+H = new WeakMap(), n = new WeakSet(), se = function() {
+  const e = this.querySelectorAll("px-mdd"), r = d(this, n, _).getBoundingClientRect().bottom;
+  e.forEach((o) => {
+    o.dialogOffsetTop = `${r}px`;
+  });
+}, nt = function(e) {
+  d(this, n, A).$megaDropDown.hidden = !0, d(this, n, C).forEach((r) => {
+    r.name === e && r.hidden && (r.dialogOffsetTop = `${d(this, n, _).getBoundingClientRect().bottom}px`, r.hidden = !r.hidden, this.querySelector(`px-header-item[for="${e}"]`).checked = !r.hidden, document.body.style.overflow = r.hidden ? "auto" : "hidden"), r.name !== e && !r.hidden && (r.hidden = !0);
+  });
+}, dt = function() {
+  this.$backdropFilter.style.display = "none", d(this, n, C).forEach((e) => {
+    e.hidden || (e.hidden = !0);
+  }), d(this, n, A).$megaDropDown.dialogOffsetTop = `${d(this, n, _).getBoundingClientRect().bottom}px`, d(this, n, A).$megaDropDown.hidden = !1, document.body.style.overflow = "hidden";
+}, ne = function() {
+  d(this, n, A) && (d(this, n, A).$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none");
+}, lt = function() {
+  this.$backdropFilter.style.display = "none", d(this, n, A).$megaDropDown.hidden = !0, d(this, n, P).forEach((e) => {
+    e.checked = !1;
+  }), d(this, n, C).forEach((e) => {
+    e.hidden = !0;
+  }), document.body.style.overflow = "auto";
+}, A = function() {
+  return this.querySelector("px-header-mobile-menu");
+}, P = function() {
+  return this.querySelectorAll("px-header-item");
+}, _ = function() {
+  return this.shadowRoot.querySelector("header");
+}, C = function() {
+  return this.querySelectorAll("px-mdd");
+};
+customElements.get("px-header") || customElements.define("px-header", _r);
+const Hr = ':host{position:relative}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 767px){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}', Or = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+function jr(i, t, e = "bottom-left", r) {
+  "anchorName" in document.documentElement.style || t.addEventListener("toggle", () => {
+    var u, B;
+    if (!i || !t)
+      return;
+    const o = i.getBoundingClientRect(), a = ((u = window.visualViewport) == null ? void 0 : u.height) ?? window.innerHeight, s = ((B = window.visualViewport) == null ? void 0 : B.width) ?? window.innerWidth, l = r.getPropertyValue("--px-padding-s-mobile") || "16px", b = parseInt(
+      (r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
+    );
+    ["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${l} + ${a - o.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = s < 768 ? `${l}px` : `${o.left}px` : t.style.right = s < 768 ? `${l}px` : `${s - o.right}px`) : (t.style.top = `${o.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = s < 768 ? `${l}px` : `${o.left}px` : t.style.right = s < 768 ? `${l}px` : `${s - o.right - b}px`);
+  });
+}
+const de = new CSSStyleSheet();
+de.replaceSync(Hr);
+const F = "bottom-left";
+var E, le, w, S, z, ce;
+class Fr extends $ {
+  constructor() {
+    super(de);
+    h(this, E);
+    h(this, w);
+    h(this, S);
+    h(this, z);
+    this.template = () => `
+  <style>${this.css}</style>
+  <slot name="trigger"></slot>
+  <slot name="popover"></slot>`, this.isAboutToClose = !1, q(this, w, () => {
+      this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
+    }), q(this, S, () => {
+      this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
+    }), q(this, z, () => {
+      this.$popoverElement.matches(":popover-open") || setTimeout(() => {
+        this.isAboutToClose = !1;
+      });
+    }), this.shadowRoot.innerHTML = this.template();
+  }
+  /**
+   * Instance level styling for the dropdown component.
+   * This is used to set the anchor name and position of the popover.
+   * @private
+   */
+  get css() {
+    return `::slotted([slot='trigger']) {
+      anchor-name: ${this.anchorName};
+    }
+    :host([anchoralignment="bottom-left"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        top: anchor(${this.anchorName} bottom);
+        left: anchor(${this.anchorName} left);
+      } 
+    }
+    :host([anchoralignment="bottom-right"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        top: anchor(${this.anchorName} bottom);
+        right: calc(anchor(${this.anchorName} right) - var(--px-size-icon-xs));
+      }
+    }
+    :host([anchoralignment="top-left"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
+        left: anchor(${this.anchorName} left);
+      } 
+    }
+    :host([anchoralignment="top-right"]) {
+      ::slotted([slot="popover"]) {
+        position-anchor: ${this.anchorName};
+        bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
+        right: anchor(${this.anchorName} right);
+      }
+    }`;
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "id", "anchoralignment"];
+  }
+  connectedCallback() {
+    this.getAttribute("id") || this.setAttribute(
+      "id",
+      `px-dropdown-${Math.random().toString(36).substring(2, 15)}`
+    ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", F), jr(
+      this.$trigger,
+      this.$popoverElement,
+      this.anchorAlignment,
+      getComputedStyle(this)
+    );
+  }
+  attributeChangedCallback(e, r, o) {
+    switch (e) {
+      case "id":
+        r !== o && this.initPopover();
+        break;
+      default:
+        super.attributeChangedCallback(e, r, o);
+        break;
+    }
+  }
+  initPopover() {
+    this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.popoverId), this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, p(this, E, le).call(this), p(this, E, ce).call(this));
+  }
+  get popoverId() {
+    return `${this.getAttribute("id")}-popover`;
+  }
+  get anchorName() {
+    return `--${this.getAttribute("id")}-anchor`;
+  }
+  get $style() {
+    return this.shadowRoot.querySelector("style");
+  }
+  get $trigger() {
+    return this.querySelector('[slot="trigger"]');
+  }
+  get $popoverElement() {
+    return this.querySelector('[slot="popover"]');
+  }
+  get anchorAlignment() {
+    return this.getAttribute("anchoralignment") || F;
+  }
+  set anchorAlignment(e) {
+    Or.includes(e) ? this.setAttribute("anchoralignment", e) : (console.warn(
+      `Invalid anchor alignment value: ${e}. Using default ${F}.`
+    ), this.setAttribute("anchoralignment", F));
+  }
+}
+E = new WeakSet(), le = function() {
+  this.isAboutToClose = !1, this.$trigger.removeEventListener("click", d(this, w)), this.$popoverElement.removeEventListener(
+    "beforetoggle",
+    d(this, S)
+  ), this.$popoverElement.removeEventListener("toggle", d(this, z));
+}, w = new WeakMap(), S = new WeakMap(), z = new WeakMap(), /**
+ * Handles the manual display of the popover when the trigger is clicked.
+ * This is necessary for cases where the trigger is not a button or input element.
+ * This method adds event listeners to the trigger element to toggle the popover.
+ * It also manages the state of whether the popover is about to close or not to avoid
+ * race conditions when the popover is toggled and the trigger click event is fired.
+ */
+ce = function() {
+  this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", d(this, w)), this.$popoverElement.addEventListener("beforetoggle", d(this, S)), this.$popoverElement.addEventListener("toggle", d(this, z)));
+};
+customElements.get("px-dropdown") || customElements.define("px-dropdown", Fr);
+const be = new CSSStyleSheet();
+be.replaceSync(`
+  @media screen and (min-width: 48em) {
+    :host {
+      display: none;
+    }
+  }
+`);
+var U, Y, pe;
+class Wr extends HTMLElement {
+  constructor() {
+    super();
+    h(this, Y);
+    h(this, U, `<px-mdd
+    name="__lavender_mobile_menu"
+    hidden--tablet
+    hidden--laptop
+    hidden--desktop
+  >
+    <span slot="title"><slot name="title"></slot></span>
+    <px-mdd-section title-hidden></px-mdd-section>
+  </px-mdd>`);
+    this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = d(this, U), this.shadowRoot.adoptedStyleSheets = [be];
+  }
+  connectedCallback() {
+    this.setAttribute("slot", "header-panels");
+    const e = this.closest("px-header");
+    if (!e)
+      throw new Error(
+        "<px-header-mobile-menu> must be used within a <px-header>."
+      );
+    const r = e.querySelectorAll("px-header-item"), o = e.querySelectorAll("px-action-link"), a = this.shadowRoot.querySelector("px-mdd-section");
+    a.innerHTML = `
+     ${[...r].map((s) => {
+      const l = s.getAttribute("for"), b = s.getAttribute("href");
+      return l ? `<px-mdd-section-item for="${l}">${s.innerText}</px-mdd-section-item>` : b ? `<px-mdd-section-item href="${b}">${s.innerText}</px-mdd-section-item>` : "";
+    }).join("")}
+          ${[...o].filter((s) => !s.hasAttribute("promoted")).map(
+      (s) => `<px-mdd-a  href="${s.getAttribute("href")}" slot="footer">${s.innerText}</px-mdd-a>`
+    ).join("")}`, p(this, Y, pe).call(this).forEach((s) => {
+      s && this.$megaDropDown.appendChild(s);
+    });
+  }
+  get $megaDropDown() {
+    return this.shadowRoot.querySelector("px-mdd");
+  }
+}
+U = new WeakMap(), Y = new WeakSet(), pe = function() {
+  const e = this.closest("px-header"), r = e.querySelector(
+    'px-dropdown[slot="target-group"]'
+  ), o = e.querySelector(
+    'px-dropdown[slot="user-language"]'
+  ), a = r == null ? void 0 : r.cloneNode(
+    !0
+  );
+  a == null || a.removeAttribute("id"), a == null || a.setAttribute("slot", "mdd-footer"), a == null || a.setAttribute("grow", "3"), a == null || a.setAttribute("anchoralignment", "top-left");
+  const s = o == null ? void 0 : o.cloneNode(
+    !0
+  );
+  return s == null || s.removeAttribute("id"), s == null || s.setAttribute("slot", "mdd-footer"), s == null || s.setAttribute("grow", "1"), s == null || s.setAttribute("anchoralignment", "top-right"), [a, s];
+};
+customElements.get("px-header-mobile-menu") || customElements.define("px-header-mobile-menu", Wr);
+export {
+  _r as Header,
+  rr as HeaderItem,
+  Wr as HeaderMobileMenu
+};