@proximus/lavender-header 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist/index.es.js

@@ -0,0 +1,3949 @@
+var Ct = (i) => {
+  throw TypeError(i);
+};
+var J = (i, t, e) => t.has(i) || Ct("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) ? Ct("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), D = (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 u, cssTokenBreakpoints as f, paddingValues as x, boxShadowValues as me, backgroundSizeValues as ke, noBorderRadiusValues as Ae, borderRadiusValues as ye, borderSideValues as $e, borderValues as Ce, gradientValues as we, backgroundColorValues as Lt, borderColorValues as Se, checkName as y, transferAccessibilityAttributes as Tt, WithExtraAttributes as E, fontsizeValues as ze, fontweightValues as Ee, colorValues as Le } from "@proximus/lavender-common";
+import "@proximus/lavender-layout";
+const Te = ':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}}', Mt = new CSSStyleSheet();
+Mt.replaceSync(Te);
+const Me = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:host([${i}${e ? `--${e}` : ""}='${t}']) .container`, k = "px-padding", bt = class bt extends u {
+  constructor() {
+    super(
+      Mt,
+      f(
+        "padding",
+        m,
+        x,
+        k,
+        "--container-padding"
+      ),
+      f(
+        "padding-inline",
+        m,
+        x,
+        k
+      ),
+      f(
+        "padding-block",
+        m,
+        x,
+        k
+      ),
+      f(
+        "padding-top",
+        m,
+        x,
+        k
+      ),
+      f(
+        "padding-right",
+        m,
+        x,
+        k,
+        "--container-padding-right"
+      ),
+      f(
+        "padding-bottom",
+        m,
+        x,
+        k
+      ),
+      f(
+        "padding-left",
+        m,
+        x,
+        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 && Me.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, Ce);
+          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, $e);
+          break;
+        case "border-radius":
+          this.updateAttribute(
+            t,
+            e,
+            r,
+            ye
+          );
+          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,
+            Ae
+          );
+          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,
+            ke
+          );
+          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, me);
+          break;
+        case "anchor-offset":
+          this.updateAnchorOffset(e, r, x);
+          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(we, 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(Lt, 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(Se, 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);
+  }
+};
+bt.nativeName = "div";
+let V = bt;
+customElements.get("px-container") || customElements.define("px-container", V);
+const Bt = `.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)}}`, Rt = ':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)}}', Be = ".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)}}", Re = ":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)}}", It = new CSSStyleSheet(), Dt = new CSSStyleSheet(), qt = new CSSStyleSheet(), Pt = new CSSStyleSheet();
+It.replaceSync(Bt);
+Dt.replaceSync(Rt);
+qt.replaceSync(Be);
+Pt.replaceSync(Re);
+const Ie = [
+  "",
+  "default",
+  "secondary",
+  "tertiary",
+  "link",
+  "patch",
+  "patch-info",
+  "patch-black-friday",
+  "patch-eco",
+  "actionable-tag",
+  "header-dropdown"
+], De = [
+  "",
+  "default",
+  "bottom-right",
+  "bottom-left",
+  "alternative"
+], pt = class pt extends u {
+  constructor() {
+    super(It, Dt, qt, Pt), 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"));
+    }), Tt(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, De);
+          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(Ie, 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");
+  }
+};
+pt.nativeName = "button";
+let tt = pt;
+customElements.get("px-button") || customElements.define("px-button", tt);
+const qe = ':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)}}', _t = new CSSStyleSheet();
+_t.replaceSync(qe);
+class Pe 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 = [_t];
+  }
+  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 = Lt.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", Pe);
+const _e = ["", "default", "naked", "contained"], He = [
+  "",
+  "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 Oe(i, t, e) {
+  if (!y(_e, 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 je(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 Ht(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)}", Fe = ':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)}', Ot = new CSSStyleSheet(), jt = new CSSStyleSheet();
+Ot.replaceSync(M);
+jt.replaceSync(Fe);
+const wt = ["secondary"], We = ["", "default", "top", "bottom", "none"], ht = class ht extends u {
+  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(jt, Ot);
+    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":
+          Oe(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, We);
+          break;
+        case "background-color":
+          je(
+            this.$el,
+            t,
+            e,
+            r,
+            He
+          );
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
+          break;
+      }
+  }
+  configureSlotSuffixButtonIcon(t) {
+    t.hasAttribute("variant") ? y(
+      wt,
+      t.getAttribute("variant")
+    ) || (console.error(
+      `Wrong button-icon variant value for suffix. Allowed values are: ${wt.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");
+  }
+};
+ht.nativeName = "div";
+let et = ht;
+customElements.get("px-cell") || customElements.define("px-cell", et);
+const Ze = '.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)}', Ft = new CSSStyleSheet();
+Ft.replaceSync(M);
+const Wt = new CSSStyleSheet();
+Wt.replaceSync(Ze);
+const ut = class ut extends u {
+  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(Wt, Ft);
+    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":
+          Ht(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");
+  }
+};
+ut.nativeName = "a";
+let rt = ut;
+customElements.get("px-cell-link") || customElements.define("px-cell-link", rt);
+const Ne = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", Zt = new CSSStyleSheet();
+Zt.replaceSync(M);
+const Nt = new CSSStyleSheet();
+Nt.replaceSync(Ne);
+const gt = class gt extends u {
+  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(Nt, Zt);
+    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":
+          Ht(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");
+  }
+};
+gt.nativeName = "button";
+let ot = gt;
+customElements.get("px-cell-button") || customElements.define("px-cell-button", ot);
+const Ue = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.checkbox.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;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(: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([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){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(: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([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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),: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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),: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(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),: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(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),: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{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: 768px){.checkbox{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: 1025px){.checkbox{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)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Ut = new CSSStyleSheet();
+Ut.replaceSync(Ue);
+const Ye = ["", "default", "selectable-tag"], Yt = ["", "error"], vt = class vt extends u {
+  constructor() {
+    var t;
+    super(Ut), this.template = () => `<div class="checkbox">
+      <input type="checkbox"/>
+      <label><slot name="before"></slot><slot name="label"></slot></label>
+    </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");
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
+      switch (t) {
+        case "state":
+          this.updateAttribute(
+            e,
+            r,
+            Yt,
+            t
+          );
+          break;
+        case "variant":
+          this.updateAttribute(
+            e,
+            r,
+            Ye,
+            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);
+  }
+  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 $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 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");
+  }
+};
+vt.nativeName = "input";
+let it = vt;
+customElements.get("px-checkbox") || customElements.define("px-checkbox", it);
+const Gt = new CSSStyleSheet();
+Gt.replaceSync(M);
+const Ge = ["", "left", "right"];
+class Ke extends E {
+  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(Gt), 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(Yt, 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(Ge, 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", Ke);
+const Kt = new CSSStyleSheet();
+Kt.replaceSync(M);
+class Xe extends E {
+  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(Kt), 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", Xe);
+const Je = `: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)}}`, Xt = new CSSStyleSheet();
+Xt.replaceSync(Je);
+const Jt = ["", "default", "selectable-tag"], Qt = ["", "error"], xt = class xt extends u {
+  constructor() {
+    super(Xt), 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);
+  }
+};
+xt.nativeName = "input";
+let W = xt;
+customElements.get("px-radio-base") || customElements.define("px-radio-base", W);
+const ft = class ft 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.firstElementChild) === 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, Qt, t);
+          break;
+        case "variant":
+          this.updateAttribute(
+            e,
+            r,
+            Jt,
+            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"]');
+  }
+};
+ft.nativeName = "input";
+let at = ft;
+customElements.get("px-radio") || customElements.define("px-radio", at);
+const Qe = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var(--px-radiogroup-gap--mobile, var(--px-spacing-s-mobile))}div[role=radiogroup].selectable-tag{display:inline-flex;flex-direction:row}@media screen and (min-width: 768px){div[role=radiogroup]{gap:var(--px-radiogroup-gap--tablet, var(--px-spacing-s-tablet))}}@media screen and (min-width: 1025px){div[role=radiogroup]{gap:var(--px-radiogroup-gap--laptop, var(--px-spacing-s-laptop))}}", Vt = new CSSStyleSheet();
+Vt.replaceSync(Qe);
+const Ve = [
+  "",
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "default",
+  "l"
+], mt = class mt extends u {
+  constructor() {
+    var t;
+    super(Vt), this.template = () => `<div role="radiogroup">
+      <slot></slot>
+    </div>`, this.handleKeyDown = () => {
+      var r;
+      const e = this.currentCheckedRadio ? ((r = this.currentCheckedRadio) == null ? void 0 : r.nextElementSibling) ?? this.$radioList[0] : this.$radioList[1];
+      e.checked = !0, e.focus();
+    }, this.handleKeyUp = () => {
+      var r;
+      const e = ((r = this.currentCheckedRadio) == null ? void 0 : r.previousElementSibling) ?? this.$radioList[this.$radioList.length - 1];
+      e.checked = !0, e.focus();
+    }, this.handleRadioChange = (e) => {
+      const r = e.target;
+      if (r.localName === "px-tile-radio" || r.localName === "px-radio" || r.localName === "px-cell-radio") {
+        this.currentCheckedRadio = r;
+        const o = r.getAttribute("name");
+        o && this.currentCheckedRadio.checked && this.uncheckOtherRadios(o);
+      }
+    }, this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "name",
+      "gap",
+      "variant",
+      "required",
+      "disabled",
+      "state",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    (!this.hasAttribute("name") || this.getAttribute("name") === "") && console.error(
+      '<px-radio-group> requires a "name" attribute to function properly.'
+    ), this.addEventListener("change", this.handleRadioChange), this.addEventListener("keydown", (t) => {
+      switch (t.code) {
+        case "ArrowUp":
+        case "ArrowDown":
+          t.stopPropagation(), t.preventDefault();
+      }
+    }), this.addEventListener("keyup", (t) => {
+      switch (t.stopPropagation(), t.preventDefault(), t.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) {
+    e !== r && (t === "gap" ? this.updateGap(e, r, Ve) : t === "variant" ? this.updateVariant(e, r, Jt) : this.$radioList.forEach((o) => {
+      if (r === null)
+        o.removeAttribute(t);
+      else
+        switch (t) {
+          case "required":
+            this.$el.ariaRequired = "true";
+            break;
+          case "state":
+            r === "error" && (this.$el.ariaInvalid = "true", o.setAttribute(t, r));
+            break;
+          case "disabled":
+            this.$el.ariaDisabled = "true", o.setAttribute(t, r);
+            break;
+          default:
+            o.setAttribute(t, 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}-desktop)`
+    ));
+  }
+  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);
+  }
+};
+mt.nativeName = "div";
+let st = mt;
+customElements.get("px-radio-group") || customElements.define("px-radio-group", st);
+const te = new CSSStyleSheet();
+te.replaceSync(M);
+const tr = ["", "left", "right"];
+class er extends E {
+  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(te), 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(Qt, 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(tr, 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", er);
+const rr = ":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)}}", ee = new CSSStyleSheet();
+ee.replaceSync(rr);
+class or extends E {
+  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 = [ee], 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", or);
+const ir = ".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)}@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)}}@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-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)}", re = new CSSStyleSheet(), oe = new CSSStyleSheet(), ie = new CSSStyleSheet();
+re.replaceSync(Rt);
+oe.replaceSync(Bt);
+ie.replaceSync(ir);
+const ar = [...ze, "link-m", "link-s"], sr = [
+  "link",
+  "no-style",
+  "skip-link",
+  "btn-default",
+  "btn-secondary",
+  "btn-tertiary",
+  "icon-link"
+], nr = ["", "default", "alternative"], kt = class kt extends u {
+  constructor() {
+    super(re, oe, ie), 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), Tt(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, nr);
+          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,
+            ar
+          );
+          break;
+        case "color":
+          this.updateTypography(t, e, r, Le);
+          break;
+        case "font-weight":
+          this.updateTypography(t, e, r, Ee);
+          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(sr, 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");
+  }
+};
+kt.nativeName = "a";
+let nt = kt;
+customElements.get("px-a") || customElements.define("px-a", nt);
+class dr 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", dr);
+const lr = "#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 Z(i) {
+  var t = typeof i;
+  return i != null && (t == "object" || t == "function");
+}
+var cr = typeof global == "object" && global && global.Object === Object && global, br = typeof self == "object" && self && self.Object === Object && self, ae = cr || br || Function("return this")(), Q = function() {
+  return ae.Date.now();
+}, pr = /\s/;
+function hr(i) {
+  for (var t = i.length; t-- && pr.test(i.charAt(t)); )
+    ;
+  return t;
+}
+var ur = /^\s+/;
+function gr(i) {
+  return i && i.slice(0, hr(i) + 1).replace(ur, "");
+}
+var N = ae.Symbol, se = Object.prototype, vr = se.hasOwnProperty, xr = se.toString, q = N ? N.toStringTag : void 0;
+function fr(i) {
+  var t = vr.call(i, q), e = i[q];
+  try {
+    i[q] = void 0;
+    var r = !0;
+  } catch {
+  }
+  var o = xr.call(i);
+  return r && (t ? i[q] = e : delete i[q]), o;
+}
+var mr = Object.prototype, kr = mr.toString;
+function Ar(i) {
+  return kr.call(i);
+}
+var yr = "[object Null]", $r = "[object Undefined]", St = N ? N.toStringTag : void 0;
+function Cr(i) {
+  return i == null ? i === void 0 ? $r : yr : St && St in Object(i) ? fr(i) : Ar(i);
+}
+function wr(i) {
+  return i != null && typeof i == "object";
+}
+var Sr = "[object Symbol]";
+function zr(i) {
+  return typeof i == "symbol" || wr(i) && Cr(i) == Sr;
+}
+var zt = NaN, Er = /^[-+]0x[0-9a-f]+$/i, Lr = /^0b[01]+$/i, Tr = /^0o[0-7]+$/i, Mr = parseInt;
+function Et(i) {
+  if (typeof i == "number")
+    return i;
+  if (zr(i))
+    return zt;
+  if (Z(i)) {
+    var t = typeof i.valueOf == "function" ? i.valueOf() : i;
+    i = Z(t) ? t + "" : t;
+  }
+  if (typeof i != "string")
+    return i === 0 ? i : +i;
+  i = gr(i);
+  var e = Lr.test(i);
+  return e || Tr.test(i) ? Mr(i.slice(2), e ? 2 : 8) : Er.test(i) ? zt : +i;
+}
+var Br = "Expected a function", Rr = Math.max, Ir = Math.min;
+function Dr(i, t, e) {
+  var r, o, a, s, l, b, g = 0, B = !1, R = !1, G = !0;
+  if (typeof i != "function")
+    throw new TypeError(Br);
+  t = Et(t) || 0, Z(e) && (B = !!e.leading, R = "maxWait" in e, a = R ? Rr(Et(e.maxWait) || 0, t) : a, G = "trailing" in e ? !!e.trailing : G);
+  function K(c) {
+    var v = r, I = o;
+    return r = o = void 0, g = c, s = i.apply(I, v), s;
+  }
+  function ge(c) {
+    return g = c, l = setTimeout(j, t), B ? K(c) : s;
+  }
+  function ve(c) {
+    var v = c - b, I = c - g, $t = t - v;
+    return R ? Ir($t, a - I) : $t;
+  }
+  function At(c) {
+    var v = c - b, I = c - g;
+    return b === void 0 || v >= t || v < 0 || R && I >= a;
+  }
+  function j() {
+    var c = Q();
+    if (At(c))
+      return yt(c);
+    l = setTimeout(j, ve(c));
+  }
+  function yt(c) {
+    return l = void 0, G && r ? K(c) : (r = o = void 0, s);
+  }
+  function xe() {
+    l !== void 0 && clearTimeout(l), g = 0, r = b = o = l = void 0;
+  }
+  function fe() {
+    return l === void 0 ? s : yt(Q());
+  }
+  function X() {
+    var c = Q(), v = At(c);
+    if (r = arguments, o = this, b = c, v) {
+      if (l === void 0)
+        return ge(b);
+      if (R)
+        return clearTimeout(l), l = setTimeout(j, t), K(b);
+    }
+    return l === void 0 && (l = setTimeout(j, t)), s;
+  }
+  return X.cancel = xe, X.flush = fe, X;
+}
+var qr = "Expected a function";
+function Pr(i, t, e) {
+  var r = !0, o = !0;
+  if (typeof i != "function")
+    throw new TypeError(qr);
+  return Z(e) && (r = "leading" in e ? !!e.leading : r, o = "trailing" in e ? !!e.trailing : o), Dr(i, t, {
+    leading: r,
+    maxWait: t,
+    trailing: o
+  });
+}
+const ne = new CSSStyleSheet();
+ne.replaceSync(lr);
+const _r = "Menu";
+var H, n, de, dt, lt, le, ct, A, P, _, $;
+class Hr extends E {
+  constructor() {
+    var e;
+    super(ne);
+    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>
+  `, D(this, H, () => {
+      window.innerWidth >= 768 && (p(this, n, le).call(this), p(this, n, de).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, dt).call(this, e.target.for)) : p(this, n, ct).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, dt).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, lt).call(this);
+    }), this.shadowRoot.addEventListener("click", (e) => {
+      e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), p(this, n, lt).call(this));
+    }), this.addEventListener("close-panel", () => {
+      p(this, n, ct).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", _r), window.addEventListener("resize", Pr(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, $).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, $).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(), de = function() {
+  const e = this.querySelectorAll("px-mdd"), r = d(this, n, _).getBoundingClientRect().bottom;
+  e.forEach((o) => {
+    o.dialogOffsetTop = `${r}px`;
+  });
+}, dt = function(e) {
+  d(this, n, A).$megaDropDown.hidden = !0, d(this, n, $).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);
+  });
+}, lt = function() {
+  this.$backdropFilter.style.display = "none", d(this, n, $).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";
+}, le = 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");
+}, ct = 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, $).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");
+}, $ = function() {
+  return this.querySelectorAll("px-mdd");
+};
+customElements.get("px-header") || customElements.define("px-header", Hr);
+const Or = ':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}}', jr = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+function Fr(i, t, e = "bottom-left", r) {
+  "anchorName" in document.documentElement.style || t.addEventListener("toggle", () => {
+    var g, B;
+    if (!i || !t)
+      return;
+    const o = i.getBoundingClientRect(), a = ((g = window.visualViewport) == null ? void 0 : g.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 ce = new CSSStyleSheet();
+ce.replaceSync(Or);
+const F = "bottom-left";
+var z, be, C, w, S, pe;
+class Wr extends E {
+  constructor() {
+    super(ce);
+    h(this, z);
+    h(this, C);
+    h(this, w);
+    h(this, S);
+    this.template = () => `
+  <style>${this.css}</style>
+  <slot name="trigger"></slot>
+  <slot name="popover"></slot>`, this.isAboutToClose = !1, D(this, C, () => {
+      this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
+    }), D(this, w, () => {
+      this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
+    }), D(this, S, () => {
+      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), Fr(
+      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, z, be).call(this), p(this, z, pe).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) {
+    jr.includes(e) ? this.setAttribute("anchoralignment", e) : (console.warn(
+      `Invalid anchor alignment value: ${e}. Using default ${F}.`
+    ), this.setAttribute("anchoralignment", F));
+  }
+}
+z = new WeakSet(), be = function() {
+  this.isAboutToClose = !1, this.$trigger.removeEventListener("click", d(this, C)), this.$popoverElement.removeEventListener(
+    "beforetoggle",
+    d(this, w)
+  ), this.$popoverElement.removeEventListener("toggle", d(this, S));
+}, C = new WeakMap(), w = new WeakMap(), S = 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.
+ */
+pe = function() {
+  this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", d(this, C)), this.$popoverElement.addEventListener("beforetoggle", d(this, w)), this.$popoverElement.addEventListener("toggle", d(this, S)));
+};
+customElements.get("px-dropdown") || customElements.define("px-dropdown", Wr);
+const he = new CSSStyleSheet();
+he.replaceSync(`
+  @media screen and (min-width: 48em) {
+    :host {
+      display: none;
+    }
+  }
+`);
+var U, Y, ue;
+class Zr 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 = [he];
+  }
+  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, ue).call(this).forEach((s) => {
+      s && this.$megaDropDown.appendChild(s);
+    });
+  }
+  get $megaDropDown() {
+    return this.shadowRoot.querySelector("px-mdd");
+  }
+}
+U = new WeakMap(), Y = new WeakSet(), ue = 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", Zr);
+export {
+  Hr as Header,
+  or as HeaderItem,
+  Zr as HeaderMobileMenu
+};