@proximus/lavender-content-header 2.0.0-alpha.165 → 2.0.0-alpha.169

package/dist/index.es.js

@@ -1,1185 +1,1036 @@
-import { cssTokenBreakpoints as d, paddingValues as g, gapValues as x, WithExtraAttributes as m, boxShadowValues as D, backgroundSizeValues as C, noBorderRadiusValues as P, borderRadiusValues as E, borderSideValues as O, borderValues as H, gradientValues as f, log as s, backgroundColorValues as u, borderColorValues as S, checkName as h, AttributeBreakpointHandlerDelegate as G, PxElement as L } from "@proximus/lavender-common";
+import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, backgroundSizeValues as i, booleanPropertyToAttributeSetter as a, borderColorValues as o, borderRadiusValues as s, borderSideValues as c, borderValues as l, boxShadowValues as u, checkName as d, cssTokenBreakpoints as f, gapValues as p, gradientValues as m, log as h, noBorderRadiusValues as g, paddingValues as _, propertyToAttributeSetter as v } from "@proximus/lavender-common";
 import "@proximus/lavender-heading";
-const q = ':host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;z-index:2;position:relative;box-sizing:border-box}.content-header-content ::slotted([slot="patch"]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content ::slotted([slot="patch"]){flex-shrink:0}.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (min-width: 90.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}', N = ':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 screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', X = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}: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%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.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)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{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)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{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)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (min-width: 64.0625rem){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{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)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.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}}@media screen and (min-width: 90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}', T = new CSSStyleSheet();
-T.replaceSync(X);
-const F = [
-  "top-patch",
-  "top-neighbor-patch",
-  "top-ribbon",
-  "top-neighbor-ribbon",
-  "top-patch-and-neighbor-ribbon"
-], _ = [
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12"
-], l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, p = "px-padding", Z = [
-  d(
-    "padding",
-    l,
-    g,
-    p,
-    "--container-padding"
-  ),
-  d(
-    "padding-inline",
-    l,
-    g,
-    p
-  ),
-  d(
-    "padding-block",
-    l,
-    g,
-    p
-  ),
-  d(
-    "padding-top",
-    l,
-    g,
-    p
-  ),
-  d(
-    "padding-right",
-    l,
-    g,
-    p,
-    "--container-padding-right"
-  ),
-  d(
-    "padding-bottom",
-    l,
-    g,
-    p
-  ),
-  d(
-    "padding-left",
-    l,
-    g,
-    p,
-    "--container-padding-left"
-  ),
-  d(
-    "gap",
-    l,
-    x,
-    "px-spacing",
-    void 0,
-    "subgrid-gap"
-  )
-], $ = class $ extends m {
-  constructor() {
-    super(T, ...Z), this.template = () => `<div class="container">
-      <slot></slot>
-      <slot name="anchor-left"></slot>
-      <slot name="anchor-right"></slot>
-      <slot name="anchor-full"></slot>
-    </div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, 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",
-      "anchor-spacing",
-      "inverted",
-      "subgrid-rows"
-    ];
-  }
-  connectedCallback() {
-    this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
-      this.$slotAnchor && this.addAnchorClass();
-    }), this.contentObserver.observe(this, {
-      childList: !0,
-      subtree: !0,
-      characterData: !0
-    }), this._bgObserver = new IntersectionObserver((t) => {
-      t.forEach((i) => {
-        var e;
-        i.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (e = this._bgObserver) == null || e.disconnect());
-      });
-    }), this._bgObserver.observe(this.$el);
-  }
-  disconnectedCallback() {
-    var t, i;
-    (t = this._bgObserver) == null || t.disconnect(), (i = this.contentObserver) == null || i.disconnect();
-  }
-  attributeChangedCallback(t, i, e) {
-    if (i !== e)
-      switch (t) {
-        case "border":
-          this.updateAttribute(t, i, e, H);
-          break;
-        case "border-color":
-          this.updateBorderColor(t, e);
-          break;
-        case "border-side":
-        case "border-side--mobile":
-        case "border-side--tablet":
-        case "border-side--laptop":
-          this.updateAttribute(t, i, e, O);
-          break;
-        case "border-radius":
-          this.updateAttribute(
-            t,
-            i,
-            e,
-            E
-          );
-          break;
-        case "no-border-radius":
-        case "no-border-radius--mobile":
-        case "no-border-radius--tablet":
-        case "no-border-radius--laptop":
-          this.updateNoBorderRadius(
-            t,
-            i,
-            e,
-            P
-          );
-          break;
-        case "background-color":
-        case "background-color--mobile":
-        case "background-color--tablet":
-        case "background-color--laptop":
-          this.updateBackgroundColor(t, e);
-          break;
-        case "background-gradient":
-        case "background-gradient--mobile":
-        case "background-gradient--tablet":
-        case "background-gradient--laptop":
-          this.updateGradient(t, e);
-          break;
-        case "background-size":
-          this.updateAttribute(
-            t,
-            i,
-            e,
-            C
-          );
-          break;
-        case "background-image":
-        case "background-image--mobile":
-        case "background-image--tablet":
-        case "background-image--laptop":
-          this._isInViewport && this.updateBackgroundImg(t, e);
-          break;
-        case "background-position":
-          e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
-          break;
-        case "box-shadow":
-          this.updateAttribute(t, i, e, D);
-          break;
-        case "anchor-offset":
-          this.updateAnchorOffset(i, e, g);
-          break;
-        case "anchor-spacing":
-          this.updateAnchorSpacing(i, e, F);
-          break;
-        case "subgrid-rows":
-          this.updateSubgridRows(
-            t,
-            i,
-            e,
-            _
-          );
-          break;
-        default:
-          super.attributeChangedCallback(t, i, e);
-          break;
-      }
-  }
-  _loadBackgroundImages() {
-    [
-      "background-image",
-      "background-image--mobile",
-      "background-image--tablet",
-      "background-image--laptop"
-    ].forEach((i) => {
-      const e = this.getAttribute(i);
-      e && this.updateBackgroundImg(i, e);
-    });
-  }
-  updateBackgroundImg(t, i) {
-    this.$el.style.setProperty(`--${t}`, `url("${i}")`);
-  }
-  updateGradient(t, i) {
-    if (this.checkName(f, i)) {
-      const e = this.splitAttrNameFromBreakpoint(t);
-      t = e.attrName;
-      const o = e.breakpoint;
-      this.$el.style.setProperty(
-        `--${t}${o}`,
-        `linear-gradient(var(--px-color-background-gradient-${i}))`
-      );
-    } else
-      s(
-        `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${f.join('", "')}".`
-      );
-  }
-  updateBackgroundColor(t, i) {
-    const e = i.startsWith("surface-");
-    if (this.checkName(u, i)) {
-      const o = this.splitAttrNameFromBreakpoint(t), r = o.breakpoint;
-      this.$el.style.setProperty(
-        `--${o.attrName}${r}`,
-        `var(--px-color-background-${i}${e ? "" : "-default"})`
-      ), this.$el.style.setProperty(
-        `--${o.attrName}-inverted${r}`,
-        `var(--px-color-background-${i}${e ? "" : "-inverted"})`
-      );
-    } else
-      s(
-        `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${u.join('", "')}".`
-      );
-  }
-  updateBorderColor(t, i) {
-    this.checkName(S, i) ? (this.$el.style.setProperty(
-      `--${t}`,
-      `var(--px-color-border-${i}-default)`
-    ), this.$el.style.setProperty(
-      `--${t}-inverted`,
-      `var(--px-color-border-${i}-inverted)`
-    )) : s(
-      `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${S.join('", "')}".`
-    );
-  }
-  updateNoBorderRadius(t, i, e, o) {
-    if (!this.checkName(o, e))
-      s(
-        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
-      );
-    else {
-      const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
-      i !== null && i !== "" && this.$el.classList.toggle(
-        `${r.attrName}-${i}${a}`
-      ), e !== null && e !== "" && this.$el.classList.toggle(
-        `${r.attrName}-${e}${a}`
-      );
-    }
-  }
-  updateAttribute(t, i, e, o) {
-    if (!this.checkName(o, e))
-      s(
-        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
-      );
-    else {
-      const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
-      i !== null && i !== "" && this.$el.classList.toggle(
-        `${r.attrName}-${i}${a}`
-      ), e !== null && e !== "" && this.$el.classList.toggle(
-        `${r.attrName}-${e}${a}`
-      );
-    }
-  }
-  splitAttrNameFromBreakpoint(t) {
-    let i = "";
-    if (["--mobile", "--tablet", "--laptop"].some(
-      (e) => t.includes(e)
-    )) {
-      const e = t.split("--");
-      t = e[0], i = `--${e[1]}`;
-    }
-    return { attrName: t, breakpoint: i };
-  }
-  updateAnchorOffset(t, i, e) {
-    if (!h(e, i)) {
-      s(
-        `"${i}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
-      );
-      return;
-    }
-    const o = (r) => {
-      r !== null && r !== "" && r !== "default" && (this.$el.style.setProperty(
-        "--container-anchor-offset--mobile",
-        `var(--px-padding-${r}-mobile)`
-      ), this.$el.style.setProperty(
-        "--container-anchor-offset--tablet",
-        `var(--px-padding-${r}-tablet)`
-      ), this.$el.style.setProperty(
-        "--container-anchor-offset--laptop",
-        `var(--px-padding-${r}-laptop)`
-      ));
-    };
-    o(t), o(i);
-  }
-  addAnchorClass() {
-    this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
-  }
-  updateAnchorSpacing(t, i, e) {
-    if (!h(e, i)) {
-      s(
-        `"${i}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
-      );
-      return;
-    }
-    const o = (r) => {
-      r !== null && r !== "" && r !== "default" && (this.style.setProperty(
-        "--container-anchor-spacing--mobile",
-        `var(--px-spacing-${r}-mobile)`
-      ), this.style.setProperty(
-        "--container-anchor-spacing--tablet",
-        `var(--px-spacing-${r}-tablet)`
-      ), this.style.setProperty(
-        "--container-anchor-spacing--laptop",
-        `var(--px-spacing-${r}-laptop)`
-      ), this.style.setProperty(
-        "--container-anchor-spacing--desktop",
-        `var(--px-spacing-${r}-desktop)`
-      ));
-    };
-    o(t), o(i);
-  }
-  updateSubgridRows(t, i, e, o) {
-    h(o, e) ? this.style.setProperty(`--${t}`, e) : s(
-      `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
-    );
-  }
-  get $el() {
-    var t;
-    return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
-  }
-  get $slotAnchor() {
-    return this.querySelector('[slot^="anchor"]');
-  }
-  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 anchorSpacing() {
-    return this.getAttribute("anchor-spacing");
-  }
-  set anchorSpacing(t) {
-    this.setAttribute("anchor-spacing", t);
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get subgridRows() {
-    return this.getAttribute("subgrid-rows");
-  }
-  set subgridRows(t) {
-    this.setAttribute("subgrid-rows", t);
-  }
-  get subgridGap() {
-    return this.getAttribute("subgrid-gap");
-  }
-  set subgridGap(t) {
-    this.setAttribute("subgrid-gap", t);
-  }
-  get subgridGapMobile() {
-    return this.getAttribute("subgrid-gap--mobile");
-  }
-  set subgridGapMobile(t) {
-    this.setAttribute("subgrid-gap--mobile", t);
-  }
-  get subgridGapTablet() {
-    return this.getAttribute("subgrid-gap--tablet");
-  }
-  set subgridGapTablet(t) {
-    this.setAttribute("subgrid-gap--tablet", t);
-  }
-  get subgridGapLaptop() {
-    return this.getAttribute("subgrid-gap--laptop");
-  }
-  set subgridGapLaptop(t) {
-    this.setAttribute("subgrid-gap--laptop", t);
-  }
+//#region src/contentheader.css?inline
+var y = ":host{--min-height--mobile:15.625rem;--min-height--tablet:17.5rem;--min-height--laptop:17.5rem;--min-height--desktop:17.5rem}:host,:host>*{box-sizing:border-box;display:block}.content-header{z-index:0;position:relative}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2) )}.content-header-content{z-index:2;box-sizing:border-box;flex-direction:column;display:flex;position:relative}.content-header-content ::slotted([slot=patch]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{z-index:1;pointer-events:none;display:none;position:absolute;inset:0}[contrast-helper-gradient] .contrast-helper{background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%);display:block}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{background-color:#ffffffb3;display:block}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (width>=48rem){.content-header-content ::slotted([slot=patch]){flex-shrink:0}.content-header-content ::slotted([slot=patch]),.content-header-content ::slotted([slot=patch-description]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (width>=64.0625rem){.content-header-content ::slotted([slot=patch]),.content-header-content ::slotted([slot=patch-description]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (width>=90.0625rem){.content-header-content ::slotted([slot=patch]),.content-header-content ::slotted([slot=patch-description]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}", b = ":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 screen and (width>=77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-mobile)}@media screen and (width>=48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-desktop)}}@media screen and (width>=64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-desktop)}}", x = ":host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}: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-left-style:none;border-right-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-left-style:none;border-right-style:none}.border-side-left{border-top-style:none;border-bottom-style:none;border-right-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-position:50%;background-size:cover}.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]){z-index:3;transform:translateY(-50%)}::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]){text-align:center;z-index:2;left:0;right:0;transform:translateY(-100%)}::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%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.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)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{grid-template-rows:subgrid;grid-row:span var(--subgrid-rows);display:grid}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (width<=47.938rem){.container{background-color:var(--background-color--mobile,var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile,var(--background-image))}:host([background-gradient--mobile]) .container{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-style:solid none none}.border-side-right--mobile{border-style:none solid none none}.border-side-bottom--mobile{border-style:none none solid}.border-side-left--mobile{border-style:none none none solid}.border-side-block--mobile{border-block-style:solid;border-inline-style:none}.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)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (width>=48rem) and (width<=64rem){.container{background-color:var(--background-color--tablet,var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet,var(--background-image))}:host([background-gradient--tablet]) .container{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-style:solid none none}.border-side-right--tablet{border-style:none solid none none}.border-side-bottom--tablet{border-style:none none solid}.border-side-left--tablet{border-style:none none none solid}.border-side-block--tablet{border-block-style:solid;border-inline-style:none}.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))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (width>=64.0625rem){.container{background-color:var(--background-color--laptop,var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop,var(--background-image))}:host([background-gradient--laptop]) .container{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))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-style:solid none none}.border-side-right--laptop{border-style:none solid none none}.border-side-bottom--laptop{border-style:none none solid}.border-side-left--laptop{border-style:none none none solid}.border-side-block--laptop{border-block-style:solid;border-inline-style:none}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (width>=90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}", S = new CSSStyleSheet();
+S.replaceSync(x);
+var C = [
+	"top-patch",
+	"top-neighbor-patch",
+	"top-ribbon",
+	"top-neighbor-ribbon",
+	"top-patch-and-neighbor-ribbon"
+], w = [
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11",
+	"12"
+], T = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, E = "px-padding", D = [
+	f("padding", T, _, E, "--container-padding"),
+	f("padding-inline", T, _, E),
+	f("padding-block", T, _, E),
+	f("padding-top", T, _, E),
+	f("padding-right", T, _, E, "--container-padding-right"),
+	f("padding-bottom", T, _, E),
+	f("padding-left", T, _, E, "--container-padding-left"),
+	f("gap", T, p, "px-spacing", void 0, "subgrid-gap")
+], O = class extends n {
+	static {
+		this.nativeName = "div";
+	}
+	constructor() {
+		super(S, ...D), this.template = () => "<div class=\"container\">\n      <slot></slot>\n      <slot name=\"anchor-left\"></slot>\n      <slot name=\"anchor-right\"></slot>\n      <slot name=\"anchor-full\"></slot>\n    </div>", this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, 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",
+			"anchor-spacing",
+			"inverted",
+			"subgrid-rows"
+		];
+	}
+	connectedCallback() {
+		this.padding ||= "m", this.backgroundColor ||= "surface-light", this.borderColor ||= "main", this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
+			this.$slotAnchor && this.addAnchorClass();
+		}), this.contentObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			characterData: !0
+		}), this._bgObserver = new IntersectionObserver((e) => {
+			e.forEach((e) => {
+				e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), this._bgObserver?.disconnect());
+			});
+		}), this._bgObserver.observe(this.$el);
+	}
+	disconnectedCallback() {
+		this._bgObserver?.disconnect(), this.contentObserver?.disconnect();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "border":
+				this.updateAttribute(e, t, n, l);
+				break;
+			case "border-color":
+				this.updateBorderColor(e, n);
+				break;
+			case "border-side":
+			case "border-side--mobile":
+			case "border-side--tablet":
+			case "border-side--laptop":
+				this.updateAttribute(e, t, n, c);
+				break;
+			case "border-radius":
+				this.updateAttribute(e, t, n, s);
+				break;
+			case "no-border-radius":
+			case "no-border-radius--mobile":
+			case "no-border-radius--tablet":
+			case "no-border-radius--laptop":
+				this.updateNoBorderRadius(e, t, n, g);
+				break;
+			case "background-color":
+			case "background-color--mobile":
+			case "background-color--tablet":
+			case "background-color--laptop":
+				this.updateBackgroundColor(e, n);
+				break;
+			case "background-gradient":
+			case "background-gradient--mobile":
+			case "background-gradient--tablet":
+			case "background-gradient--laptop":
+				this.updateGradient(e, n);
+				break;
+			case "background-size":
+				this.updateAttribute(e, t, n, i);
+				break;
+			case "background-image":
+			case "background-image--mobile":
+			case "background-image--tablet":
+			case "background-image--laptop":
+				this._isInViewport && this.updateBackgroundImg(e, n);
+				break;
+			case "background-position":
+				n !== null && n !== "" && (this.$el.style.backgroundPosition = n);
+				break;
+			case "box-shadow":
+				this.updateAttribute(e, t, n, u);
+				break;
+			case "anchor-offset":
+				this.updateAnchorOffset(t, n, _);
+				break;
+			case "anchor-spacing":
+				this.updateAnchorSpacing(t, n, C);
+				break;
+			case "subgrid-rows":
+				this.updateSubgridRows(e, t, n, w);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	_loadBackgroundImages() {
+		[
+			"background-image",
+			"background-image--mobile",
+			"background-image--tablet",
+			"background-image--laptop"
+		].forEach((e) => {
+			let t = this.getAttribute(e);
+			t && this.updateBackgroundImg(e, t);
+		});
+	}
+	updateBackgroundImg(e, t) {
+		this.$el.style.setProperty(`--${e}`, `url("${t}")`);
+	}
+	updateGradient(e, t) {
+		if (this.checkName(m, t)) {
+			let n = this.splitAttrNameFromBreakpoint(e);
+			e = n.attrName;
+			let r = n.breakpoint;
+			this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
+		} else h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${m.join("\", \"")}".`);
+	}
+	updateBackgroundColor(e, t) {
+		let n = t.startsWith("surface-");
+		if (this.checkName(r, t)) {
+			let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
+			this.$el.style.setProperty(`--${r.attrName}${i}`, `var(--px-color-background-${t}${n ? "" : "-default"})`), this.$el.style.setProperty(`--${r.attrName}-inverted${i}`, `var(--px-color-background-${t}${n ? "" : "-inverted"})`);
+		} else h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+	}
+	updateBorderColor(e, t) {
+		this.checkName(o, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) : h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
+	}
+	updateNoBorderRadius(e, t, n, r) {
+		if (!this.checkName(r, n)) h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+		else {
+			let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
+			t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
+		}
+	}
+	updateAttribute(e, t, n, r) {
+		if (!this.checkName(r, n)) h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+		else {
+			let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
+			t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
+		}
+	}
+	splitAttrNameFromBreakpoint(e) {
+		let t = "";
+		if ([
+			"--mobile",
+			"--tablet",
+			"--laptop"
+		].some((t) => e.includes(t))) {
+			let n = e.split("--");
+			e = n[0], t = `--${n[1]}`;
+		}
+		return {
+			attrName: e,
+			breakpoint: t
+		};
+	}
+	updateAnchorOffset(e, t, n) {
+		if (!d(n, t)) {
+			h(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
+			return;
+		}
+		let r = (e) => {
+			e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--container-anchor-offset--mobile", `var(--px-padding-${e}-mobile)`), this.$el.style.setProperty("--container-anchor-offset--tablet", `var(--px-padding-${e}-tablet)`), this.$el.style.setProperty("--container-anchor-offset--laptop", `var(--px-padding-${e}-laptop)`));
+		};
+		r(e), r(t);
+	}
+	addAnchorClass() {
+		this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
+	}
+	updateAnchorSpacing(e, t, n) {
+		if (!d(n, t)) {
+			h(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
+			return;
+		}
+		let r = (e) => {
+			e !== null && e !== "" && e !== "default" && (this.style.setProperty("--container-anchor-spacing--mobile", `var(--px-spacing-${e}-mobile)`), this.style.setProperty("--container-anchor-spacing--tablet", `var(--px-spacing-${e}-tablet)`), this.style.setProperty("--container-anchor-spacing--laptop", `var(--px-spacing-${e}-laptop)`), this.style.setProperty("--container-anchor-spacing--desktop", `var(--px-spacing-${e}-desktop)`));
+		};
+		r(e), r(t);
+	}
+	updateSubgridRows(e, t, n, r) {
+		d(r, n) ? this.style.setProperty(`--${e}`, n) : h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+	}
+	get $el() {
+		return this?.shadowRoot?.querySelector(".container");
+	}
+	get $slotAnchor() {
+		return this.querySelector("[slot^=\"anchor\"]");
+	}
+	get padding() {
+		return this.getAttribute("padding");
+	}
+	set padding(e) {
+		v(this, "padding", e);
+	}
+	get paddingBlock() {
+		return this.getAttribute("padding-block");
+	}
+	set paddingBlock(e) {
+		v(this, "padding-block", e);
+	}
+	get paddingInline() {
+		return this.getAttribute("padding-inline");
+	}
+	set paddingInline(e) {
+		v(this, "padding-inline", e);
+	}
+	get paddingTop() {
+		return this.getAttribute("padding-top");
+	}
+	set paddingTop(e) {
+		v(this, "padding-top", e);
+	}
+	get paddingRight() {
+		return this.getAttribute("padding-right");
+	}
+	set paddingRight(e) {
+		v(this, "padding-right", e);
+	}
+	get paddingBottom() {
+		return this.getAttribute("padding-bottom");
+	}
+	set paddingBottom(e) {
+		v(this, "padding-bottom", e);
+	}
+	get paddingLeft() {
+		return this.getAttribute("padding-left");
+	}
+	set paddingLeft(e) {
+		v(this, "padding-left", e);
+	}
+	get paddingMobile() {
+		return this.getAttribute("padding--mobile");
+	}
+	set paddingMobile(e) {
+		v(this, "padding--mobile", e);
+	}
+	get paddingBlockMobile() {
+		return this.getAttribute("padding-block--mobile");
+	}
+	set paddingBlockMobile(e) {
+		v(this, "padding-block--mobile", e);
+	}
+	get paddingInlineMobile() {
+		return this.getAttribute("padding-inline--mobile");
+	}
+	set paddingInlineMobile(e) {
+		v(this, "padding-inline--mobile", e);
+	}
+	get paddingTopMobile() {
+		return this.getAttribute("padding-top--mobile");
+	}
+	set paddingTopMobile(e) {
+		v(this, "padding-top--mobile", e);
+	}
+	get paddingRightMobile() {
+		return this.getAttribute("padding-right--mobile");
+	}
+	set paddingRightMobile(e) {
+		v(this, "padding-right--mobile", e);
+	}
+	get paddingBottomMobile() {
+		return this.getAttribute("padding-bottom--mobile");
+	}
+	set paddingBottomMobile(e) {
+		v(this, "padding-bottom--mobile", e);
+	}
+	get paddingLeftMobile() {
+		return this.getAttribute("padding-left--mobile");
+	}
+	set paddingLeftMobile(e) {
+		v(this, "padding-left--mobile", e);
+	}
+	get paddingTablet() {
+		return this.getAttribute("padding--tablet");
+	}
+	set paddingTablet(e) {
+		v(this, "padding--tablet", e);
+	}
+	get paddingBlockTablet() {
+		return this.getAttribute("padding-block--tablet");
+	}
+	set paddingBlockTablet(e) {
+		v(this, "padding-block--tablet", e);
+	}
+	get paddingInlineTablet() {
+		return this.getAttribute("padding-inline--tablet");
+	}
+	set paddingInlineTablet(e) {
+		v(this, "padding-inline--tablet", e);
+	}
+	get paddingTopTablet() {
+		return this.getAttribute("padding-top--tablet");
+	}
+	set paddingTopTablet(e) {
+		v(this, "padding-top--tablet", e);
+	}
+	get paddingRightTablet() {
+		return this.getAttribute("padding-right--tablet");
+	}
+	set paddingRightTablet(e) {
+		v(this, "padding-right--tablet", e);
+	}
+	get paddingBottomTablet() {
+		return this.getAttribute("padding-bottom--tablet");
+	}
+	set paddingBottomTablet(e) {
+		v(this, "padding-bottom--tablet", e);
+	}
+	get paddingLeftTablet() {
+		return this.getAttribute("padding-left--tablet");
+	}
+	set paddingLeftTablet(e) {
+		v(this, "padding-left--tablet", e);
+	}
+	get paddingLaptop() {
+		return this.getAttribute("padding--laptop");
+	}
+	set paddingLaptop(e) {
+		v(this, "padding--laptop", e);
+	}
+	get paddingBlockLaptop() {
+		return this.getAttribute("padding-block--laptop");
+	}
+	set paddingBlockLaptop(e) {
+		v(this, "padding-block--laptop", e);
+	}
+	get paddingInlineLaptop() {
+		return this.getAttribute("padding-inline--laptop");
+	}
+	set paddingInlineLaptop(e) {
+		v(this, "padding-inline--laptop", e);
+	}
+	get paddingTopLaptop() {
+		return this.getAttribute("padding-top--laptop");
+	}
+	set paddingTopLaptop(e) {
+		v(this, "padding-top--laptop", e);
+	}
+	get paddingRightLaptop() {
+		return this.getAttribute("padding-right--laptop");
+	}
+	set paddingRightLaptop(e) {
+		v(this, "padding-right--laptop", e);
+	}
+	get paddingBottomLaptop() {
+		return this.getAttribute("padding-bottom--laptop");
+	}
+	set paddingBottomLaptop(e) {
+		v(this, "padding-bottom--laptop", e);
+	}
+	get paddingLeftLaptop() {
+		return this.getAttribute("padding-left--laptop");
+	}
+	set paddingLeftLaptop(e) {
+		v(this, "padding-left--laptop", e);
+	}
+	get border() {
+		return this.getAttribute("border");
+	}
+	set border(e) {
+		v(this, "border", e);
+	}
+	get borderColor() {
+		return this.getAttribute("border-color");
+	}
+	set borderColor(e) {
+		v(this, "border-color", e);
+	}
+	get borderSide() {
+		return this.getAttribute("border-side");
+	}
+	set borderSide(e) {
+		v(this, "border-side", e);
+	}
+	get borderSideMobile() {
+		return this.getAttribute("border-side--mobile");
+	}
+	set borderSideMobile(e) {
+		v(this, "border-side--mobile", e);
+	}
+	get borderSideTablet() {
+		return this.getAttribute("border-side--tablet");
+	}
+	set borderSideTablet(e) {
+		v(this, "border-side--tablet", e);
+	}
+	get borderSideLaptop() {
+		return this.getAttribute("border-side--laptop");
+	}
+	set borderSideLaptop(e) {
+		v(this, "border-side--laptop", e);
+	}
+	get borderRadius() {
+		return this.getAttribute("border-radius");
+	}
+	set borderRadius(e) {
+		v(this, "border-radius", e);
+	}
+	get noBorderRadius() {
+		return this.getAttribute("no-border-radius");
+	}
+	set noBorderRadius(e) {
+		v(this, "no-border-radius", e);
+	}
+	get noBorderRadiusMobile() {
+		return this.getAttribute("no-border-radius--mobile");
+	}
+	set noBorderRadiusMobile(e) {
+		v(this, "no-border-radius--mobile", e);
+	}
+	get noBorderRadiusTablet() {
+		return this.getAttribute("no-border-radius--tablet");
+	}
+	set noBorderRadiusTablet(e) {
+		v(this, "no-border-radius--tablet", e);
+	}
+	get noBorderRadiusLaptop() {
+		return this.getAttribute("no-border-radius--laptop");
+	}
+	set noBorderRadiusLaptop(e) {
+		v(this, "no-border-radius--laptop", e);
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		v(this, "background-color", e);
+	}
+	get backgroundColorMobile() {
+		return this.getAttribute("background-color--mobile");
+	}
+	set backgroundColorMobile(e) {
+		v(this, "background-color--mobile", e);
+	}
+	get backgroundColorTablet() {
+		return this.getAttribute("background-color--tablet");
+	}
+	set backgroundColorTablet(e) {
+		v(this, "background-color--tablet", e);
+	}
+	get backgroundColorLaptop() {
+		return this.getAttribute("background-color--laptop");
+	}
+	set backgroundColorLaptop(e) {
+		v(this, "background-color--laptop", e);
+	}
+	get gradient() {
+		return this.getAttribute("background-gradient");
+	}
+	set gradient(e) {
+		v(this, "background-gradient", e);
+	}
+	get gradientMobile() {
+		return this.getAttribute("background-gradient--mobile");
+	}
+	set gradientMobile(e) {
+		v(this, "background-gradient--mobile", e);
+	}
+	get gradientTablet() {
+		return this.getAttribute("background-gradient--tablet");
+	}
+	set gradientTablet(e) {
+		v(this, "background-gradient--tablet", e);
+	}
+	get gradientLaptop() {
+		return this.getAttribute("background-gradient--laptop");
+	}
+	set gradientLaptop(e) {
+		v(this, "background-gradient--laptop", e);
+	}
+	get backgroundImage() {
+		return this.getAttribute("background-image");
+	}
+	set backgroundImage(e) {
+		v(this, "background-image", e);
+	}
+	get backgroundImageMobile() {
+		return this.getAttribute("background-image--mobile");
+	}
+	set backgroundImageMobile(e) {
+		v(this, "background-image--mobile", e);
+	}
+	get backgroundImageTablet() {
+		return this.getAttribute("background-image--tablet");
+	}
+	set backgroundImageTablet(e) {
+		v(this, "background-image--tablet", e);
+	}
+	get backgroundImageLaptop() {
+		return this.getAttribute("background-image--laptop");
+	}
+	set backgroundImageLaptop(e) {
+		v(this, "background-image--laptop", e);
+	}
+	get backgroundSize() {
+		return this.getAttribute("background-size");
+	}
+	set backgroundSize(e) {
+		v(this, "background-size", e);
+	}
+	get backgroundPosition() {
+		return this.getAttribute("background-position");
+	}
+	set backgroundPosition(e) {
+		v(this, "background-position", e);
+	}
+	get boxShadow() {
+		return this.getAttribute("box-shadow");
+	}
+	set boxShadow(e) {
+		v(this, "box-shadow", e);
+	}
+	get anchorOffset() {
+		return this.getAttribute("anchor-offset");
+	}
+	set anchorOffset(e) {
+		v(this, "anchor-offset", e);
+	}
+	get anchorSpacing() {
+		return this.getAttribute("anchor-spacing");
+	}
+	set anchorSpacing(e) {
+		v(this, "anchor-spacing", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		a(this, "inverted", e);
+	}
+	get subgridRows() {
+		return this.getAttribute("subgrid-rows");
+	}
+	set subgridRows(e) {
+		v(this, "subgrid-rows", e);
+	}
+	get subgridGap() {
+		return this.getAttribute("subgrid-gap");
+	}
+	set subgridGap(e) {
+		v(this, "subgrid-gap", e);
+	}
+	get subgridGapMobile() {
+		return this.getAttribute("subgrid-gap--mobile");
+	}
+	set subgridGapMobile(e) {
+		v(this, "subgrid-gap--mobile", e);
+	}
+	get subgridGapTablet() {
+		return this.getAttribute("subgrid-gap--tablet");
+	}
+	set subgridGapTablet(e) {
+		v(this, "subgrid-gap--tablet", e);
+	}
+	get subgridGapLaptop() {
+		return this.getAttribute("subgrid-gap--laptop");
+	}
+	set subgridGapLaptop(e) {
+		v(this, "subgrid-gap--laptop", e);
+	}
 };
-$.nativeName = "div";
-let k = $;
-customElements.get("px-container") || customElements.define("px-container", k);
-const W = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', I = new CSSStyleSheet();
-I.replaceSync(W);
-const Y = [
-  "",
-  "default",
-  "row",
-  "row-reverse",
-  "column",
-  "column-reverse"
-], J = [
-  "",
-  "default",
-  "stretch",
-  "flex-start",
-  "start",
-  "flex-end",
-  "end",
-  "center",
-  "baseline"
-], K = [
-  "",
-  "default",
-  "flex-start",
-  "start",
-  "flex-end",
-  "end",
-  "center",
-  "space-between",
-  "space-around",
-  "space-evenly"
-], Q = ["", "default", "nowrap", "wrap", "wrap-reverse"], U = ["", "visible", "hidden", "scroll", "auto"];
-class A extends m {
-  constructor() {
-    super(I), this.overflowXAttributeDelegate = new G(
-      this,
-      "overflow-x",
-      (t) => t,
-      "--overflow-x"
-    ), this.template = `<div class="flex-container">
-      <slot></slot>
-  </div>`, this.shadowRoot.innerHTML = this.template;
-  }
-  connectedCallback() {
-    this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "direction",
-      "direction--mobile",
-      "direction--tablet",
-      "direction--laptop",
-      "direction--desktop",
-      "gap",
-      "gap--mobile",
-      "gap--tablet",
-      "gap--laptop",
-      "gap--desktop",
-      "justify-content",
-      "justify-content--mobile",
-      "justify-content--tablet",
-      "justify-content--laptop",
-      "justify-content--desktop",
-      "align-items",
-      "align-items--mobile",
-      "align-items--tablet",
-      "align-items--laptop",
-      "align-items--desktop",
-      "wrap",
-      "wrap--mobile",
-      "wrap--tablet",
-      "wrap--laptop",
-      "wrap--desktop",
-      "overflow-x",
-      "overflow-x--mobile",
-      "overflow-x--tablet",
-      "overflow-x--laptop",
-      "overflow-x--desktop"
-    ];
-  }
-  attributeChangedCallback(t, i, e) {
-    switch (t) {
-      case "gap":
-      case "gap--mobile":
-      case "gap--tablet":
-      case "gap--laptop":
-      case "gap--desktop":
-        this.updateFlexProperties(t, i, e, x);
-        break;
-      case "justify-content":
-      case "justify-content--mobile":
-      case "justify-content--tablet":
-      case "justify-content--laptop":
-      case "justify-content--desktop":
-        this.updateFlexProperties(
-          t,
-          i,
-          e,
-          K
-        );
-        break;
-      case "align-items":
-      case "align-items--mobile":
-      case "align-items--tablet":
-      case "align-items--laptop":
-      case "align-items--desktop":
-        this.updateFlexProperties(t, i, e, J);
-        break;
-      case "wrap":
-      case "wrap--mobile":
-      case "wrap--tablet":
-      case "wrap--laptop":
-      case "wrap--desktop":
-        this.updateFlexProperties(t, i, e, Q);
-        break;
-      case "direction":
-      case "direction--mobile":
-      case "direction--tablet":
-      case "direction--laptop":
-      case "direction--desktop":
-        this.updateFlexProperties(t, i, e, Y);
-        break;
-      case "overflow-x":
-      case "overflow-x--mobile":
-      case "overflow-x--tablet":
-      case "overflow-x--laptop":
-      case "overflow-x--desktop":
-        this.updateOverflowX(t, i, e, U);
-        break;
-      default:
-        super.attributeChangedCallback(t, i, e);
-        break;
-    }
-  }
-  updateOverflowX(t, i, e, o) {
-    if (!h(o, e)) {
-      s(
-        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
-      );
-      return;
-    }
-    this.overflowXAttributeDelegate.attributeChangedCallback(
-      t,
-      i,
-      e
-    );
-  }
-  updateFlexProperties(t, i, e, o) {
-    this.checkName(o, e) || s(
-      `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
-    );
-    const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, c = [];
-    if (!r)
-      this.getAttribute(a + "--mobile") || c.push("mobile"), this.getAttribute(a + "--tablet") || c.push("tablet"), this.getAttribute(a + "--laptop") || c.push("laptop"), this.getAttribute(a + "--desktop") || c.push("desktop"), c.forEach((b) => {
-        this.updateStyle(a, b, i, o), this.updateStyle(a, b, e, o);
-      });
-    else {
-      const b = t.split("--")[1];
-      this.updateStyle(a, b, i, o), this.updateStyle(a, b, e, o);
-    }
-  }
-  updateStyle(t, i, e, o) {
-    e && (t === "gap" && o && o.includes(e) ? (this.$el.style.setProperty(
-      `--flex-${t}--${i}-value`,
-      `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
-    ), this.style.setProperty(
-      `--host-gap--${i}`,
-      `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
-    )) : this.$el.style.setProperty(
-      `--flex-${t}--${i}-value`,
-      e
-    ));
-  }
-  get direction() {
-    return this.getAttribute("direction");
-  }
-  set direction(t) {
-    this.setAttribute("direction", t);
-  }
-  get directionMobile() {
-    return this.getAttribute("direction--mobile");
-  }
-  set directionMobile(t) {
-    this.setAttribute("direction--mobile", t);
-  }
-  get directionTablet() {
-    return this.getAttribute("direction--tablet");
-  }
-  set directionTablet(t) {
-    this.setAttribute("direction--tablet", t);
-  }
-  get directionLaptop() {
-    return this.getAttribute("direction--laptop");
-  }
-  set directionLaptop(t) {
-    this.setAttribute("direction--laptop", t);
-  }
-  get directionDesktop() {
-    return this.getAttribute("direction--desktop");
-  }
-  set directionDesktop(t) {
-    this.setAttribute("direction--desktop", t);
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  set gap(t) {
-    this.setAttribute("gap", t);
-  }
-  get gapMobile() {
-    return this.getAttribute("gap--mobile");
-  }
-  set gapMobile(t) {
-    this.setAttribute("gap--mobile", t);
-  }
-  get gapTablet() {
-    return this.getAttribute("gap--tablet");
-  }
-  set gapTablet(t) {
-    this.setAttribute("gap--tablet", t);
-  }
-  get gapLaptop() {
-    return this.getAttribute("gap--laptop");
-  }
-  set gapLaptop(t) {
-    this.setAttribute("gap--laptop", t);
-  }
-  get gapDesktop() {
-    return this.getAttribute("gap--desktop");
-  }
-  set gapDesktop(t) {
-    this.setAttribute("gap--desktop", t);
-  }
-  get justifyContent() {
-    return this.getAttribute("justify-content");
-  }
-  set justifyContent(t) {
-    this.setAttribute("justify-content", t);
-  }
-  get justifyContentMobile() {
-    return this.getAttribute("justify-content--mobile");
-  }
-  set justifyContentMobile(t) {
-    this.setAttribute("justify-content--mobile", t);
-  }
-  get justifyContentTablet() {
-    return this.getAttribute("justify-content--tablet");
-  }
-  set justifyContentTablet(t) {
-    this.setAttribute("justify-content--tablet", t);
-  }
-  get justifyContentLaptop() {
-    return this.getAttribute("justify-content--laptop");
-  }
-  set justifyContentLaptop(t) {
-    this.setAttribute("justify-content--laptop", t);
-  }
-  get justifyContentDesktop() {
-    return this.getAttribute("justify-content--desktop");
-  }
-  set justifyContentDesktop(t) {
-    this.setAttribute("justify-content--desktop", t);
-  }
-  get alignItems() {
-    return this.getAttribute("align-items");
-  }
-  set alignItems(t) {
-    this.setAttribute("align-items", t);
-  }
-  get alignItemsMobile() {
-    return this.getAttribute("align-items--mobile");
-  }
-  set alignItemsMobile(t) {
-    this.setAttribute("align-items--mobile", t);
-  }
-  get alignItemsTablet() {
-    return this.getAttribute("align-items--tablet");
-  }
-  set alignItemsTablet(t) {
-    this.setAttribute("align-items--tablet", t);
-  }
-  get alignItemsLaptop() {
-    return this.getAttribute("align-items--laptop");
-  }
-  set alignItemsLaptop(t) {
-    this.setAttribute("align-items--laptop", t);
-  }
-  get alignItemsDesktop() {
-    return this.getAttribute("align-items--desktop");
-  }
-  set alignItemsDesktop(t) {
-    this.setAttribute("align-items--desktop", t);
-  }
-  get wrap() {
-    return this.getAttribute("wrap");
-  }
-  set wrap(t) {
-    this.setAttribute("wrap", t);
-  }
-  get wrapMobile() {
-    return this.getAttribute("wrap--mobile");
-  }
-  set wrapMobile(t) {
-    this.setAttribute("wrap--mobile", t);
-  }
-  get wrapTablet() {
-    return this.getAttribute("wrap--tablet");
-  }
-  set wrapTablet(t) {
-    this.setAttribute("wrap--tablet", t);
-  }
-  get wrapLaptop() {
-    return this.getAttribute("wrap--laptop");
-  }
-  set wrapLaptop(t) {
-    this.setAttribute("wrap--laptop", t);
-  }
-  get wrapDesktop() {
-    return this.getAttribute("wrap--desktop");
-  }
-  set wrapDesktop(t) {
-    this.setAttribute("wrap--desktop", t);
-  }
-  get overflowX() {
-    return this.getAttribute("overflow-x");
-  }
-  set overflowX(t) {
-    this.setAttribute("overflow-x", t);
-  }
-  get overflowXMobile() {
-    return this.getAttribute("overflow-x--mobile");
-  }
-  set overflowXMobile(t) {
-    this.setAttribute("overflow-x--mobile", t);
-  }
-  get overflowXTablet() {
-    return this.getAttribute("overflow-x--tablet");
-  }
-  set overflowXTablet(t) {
-    this.setAttribute("overflow-x--tablet", t);
-  }
-  get overflowXLaptop() {
-    return this.getAttribute("overflow-x--laptop");
-  }
-  set overflowXLaptop(t) {
-    this.setAttribute("overflow-x--laptop", t);
-  }
-  get overflowXDesktop() {
-    return this.getAttribute("overflow-x--desktop");
-  }
-  set overflowXDesktop(t) {
-    this.setAttribute("overflow-x--desktop", t);
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".flex-container");
-  }
-}
-customElements.get("px-stack") || customElements.define("px-stack", A);
-class V extends A {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
-  }
-}
-customElements.get("px-vstack") || customElements.define("px-vstack", V);
-class tt extends A {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
-  }
-}
-customElements.get("px-hstack") || customElements.define("px-hstack", tt);
-class et extends HTMLElement {
-  constructor() {
-    super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
-  }
-  static get observedAttributes() {
-    return ["grow", "nogap"];
-  }
-  attributeChangedCallback(t, i, e) {
-    t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
-  }
-  connectedCallback() {
-    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
-      this.handleSizeChange();
-    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
-  }
-  disconnectedCallback() {
-    var t;
-    (t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
-  }
-  get grow() {
-    return this.getAttribute("grow");
-  }
-  set grow(t) {
-    this.setAttribute("grow", t);
-  }
-  scheduleRecheck() {
-    this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
-      this.recheckHandle = void 0, this.recalculateVisibility();
-    });
-  }
-  recalculateVisibility() {
-    this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
-  }
-  handleSizeChange() {
-    const t = this.getBoundingClientRect(), i = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
-    this.isZeroSized !== i && (this.isZeroSized = i, this.updateParticipation());
-  }
-  updateParticipation() {
-    this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
-  }
-  get nogap() {
-    return this.hasAttribute("nogap");
-  }
-  set nogap(t) {
-    t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
-  }
-}
-customElements.get("px-spacer") || customElements.define("px-spacer", et);
-const it = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", M = new CSSStyleSheet();
-M.replaceSync(it);
-class ot extends m {
-  constructor() {
-    super(M), this.template = (t) => `
+customElements.get("px-container") || customElements.define("px-container", O);
+//#endregion
+//#region ../Layout/src/Stack.css?inline
+var k = ":host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}", A = new CSSStyleSheet();
+A.replaceSync(k);
+var j = [
+	"",
+	"default",
+	"row",
+	"row-reverse",
+	"column",
+	"column-reverse"
+], M = [
+	"",
+	"default",
+	"stretch",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"baseline"
+], N = [
+	"",
+	"default",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"space-between",
+	"space-around",
+	"space-evenly"
+], P = [
+	"",
+	"default",
+	"nowrap",
+	"wrap",
+	"wrap-reverse"
+], F = [
+	"",
+	"visible",
+	"hidden",
+	"scroll",
+	"auto"
+], I = class extends n {
+	constructor() {
+		super(A), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n      <slot></slot>\n  </div>", this.shadowRoot.innerHTML = this.template;
+	}
+	connectedCallback() {
+		this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"direction",
+			"direction--mobile",
+			"direction--tablet",
+			"direction--laptop",
+			"direction--desktop",
+			"gap",
+			"gap--mobile",
+			"gap--tablet",
+			"gap--laptop",
+			"gap--desktop",
+			"justify-content",
+			"justify-content--mobile",
+			"justify-content--tablet",
+			"justify-content--laptop",
+			"justify-content--desktop",
+			"align-items",
+			"align-items--mobile",
+			"align-items--tablet",
+			"align-items--laptop",
+			"align-items--desktop",
+			"wrap",
+			"wrap--mobile",
+			"wrap--tablet",
+			"wrap--laptop",
+			"wrap--desktop",
+			"overflow-x",
+			"overflow-x--mobile",
+			"overflow-x--tablet",
+			"overflow-x--laptop",
+			"overflow-x--desktop"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		switch (e) {
+			case "gap":
+			case "gap--mobile":
+			case "gap--tablet":
+			case "gap--laptop":
+			case "gap--desktop":
+				this.updateFlexProperties(e, t, n, p);
+				break;
+			case "justify-content":
+			case "justify-content--mobile":
+			case "justify-content--tablet":
+			case "justify-content--laptop":
+			case "justify-content--desktop":
+				this.updateFlexProperties(e, t, n, N);
+				break;
+			case "align-items":
+			case "align-items--mobile":
+			case "align-items--tablet":
+			case "align-items--laptop":
+			case "align-items--desktop":
+				this.updateFlexProperties(e, t, n, M);
+				break;
+			case "wrap":
+			case "wrap--mobile":
+			case "wrap--tablet":
+			case "wrap--laptop":
+			case "wrap--desktop":
+				this.updateFlexProperties(e, t, n, P);
+				break;
+			case "direction":
+			case "direction--mobile":
+			case "direction--tablet":
+			case "direction--laptop":
+			case "direction--desktop":
+				this.updateFlexProperties(e, t, n, j);
+				break;
+			case "overflow-x":
+			case "overflow-x--mobile":
+			case "overflow-x--tablet":
+			case "overflow-x--laptop":
+			case "overflow-x--desktop":
+				this.updateOverflowX(e, t, n, F);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updateOverflowX(e, t, n, r) {
+		if (!d(r, n)) {
+			h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+			return;
+		}
+		this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
+	}
+	updateFlexProperties(e, t, n, r) {
+		this.checkName(r, n) || h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+		let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, o = [];
+		if (!i) this.getAttribute(a + "--mobile") || o.push("mobile"), this.getAttribute(a + "--tablet") || o.push("tablet"), this.getAttribute(a + "--laptop") || o.push("laptop"), this.getAttribute(a + "--desktop") || o.push("desktop"), o.forEach((e) => {
+			this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
+		});
+		else {
+			let i = e.split("--")[1];
+			this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
+		}
+	}
+	updateStyle(e, t, n, r) {
+		n && (e === "gap" && r && r.includes(n) ? (this.$el.style.setProperty(`--flex-${e}--${t}-value`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`), this.style.setProperty(`--host-gap--${t}`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`)) : this.$el.style.setProperty(`--flex-${e}--${t}-value`, n));
+	}
+	get direction() {
+		return this.getAttribute("direction");
+	}
+	set direction(e) {
+		v(this, "direction", e);
+	}
+	get directionMobile() {
+		return this.getAttribute("direction--mobile");
+	}
+	set directionMobile(e) {
+		v(this, "direction--mobile", e);
+	}
+	get directionTablet() {
+		return this.getAttribute("direction--tablet");
+	}
+	set directionTablet(e) {
+		v(this, "direction--tablet", e);
+	}
+	get directionLaptop() {
+		return this.getAttribute("direction--laptop");
+	}
+	set directionLaptop(e) {
+		v(this, "direction--laptop", e);
+	}
+	get directionDesktop() {
+		return this.getAttribute("direction--desktop");
+	}
+	set directionDesktop(e) {
+		v(this, "direction--desktop", e);
+	}
+	get gap() {
+		return this.getAttribute("gap");
+	}
+	set gap(e) {
+		v(this, "gap", e);
+	}
+	get gapMobile() {
+		return this.getAttribute("gap--mobile");
+	}
+	set gapMobile(e) {
+		v(this, "gap--mobile", e);
+	}
+	get gapTablet() {
+		return this.getAttribute("gap--tablet");
+	}
+	set gapTablet(e) {
+		v(this, "gap--tablet", e);
+	}
+	get gapLaptop() {
+		return this.getAttribute("gap--laptop");
+	}
+	set gapLaptop(e) {
+		v(this, "gap--laptop", e);
+	}
+	get gapDesktop() {
+		return this.getAttribute("gap--desktop");
+	}
+	set gapDesktop(e) {
+		v(this, "gap--desktop", e);
+	}
+	get justifyContent() {
+		return this.getAttribute("justify-content");
+	}
+	set justifyContent(e) {
+		v(this, "justify-content", e);
+	}
+	get justifyContentMobile() {
+		return this.getAttribute("justify-content--mobile");
+	}
+	set justifyContentMobile(e) {
+		v(this, "justify-content--mobile", e);
+	}
+	get justifyContentTablet() {
+		return this.getAttribute("justify-content--tablet");
+	}
+	set justifyContentTablet(e) {
+		v(this, "justify-content--tablet", e);
+	}
+	get justifyContentLaptop() {
+		return this.getAttribute("justify-content--laptop");
+	}
+	set justifyContentLaptop(e) {
+		v(this, "justify-content--laptop", e);
+	}
+	get justifyContentDesktop() {
+		return this.getAttribute("justify-content--desktop");
+	}
+	set justifyContentDesktop(e) {
+		v(this, "justify-content--desktop", e);
+	}
+	get alignItems() {
+		return this.getAttribute("align-items");
+	}
+	set alignItems(e) {
+		v(this, "align-items", e);
+	}
+	get alignItemsMobile() {
+		return this.getAttribute("align-items--mobile");
+	}
+	set alignItemsMobile(e) {
+		v(this, "align-items--mobile", e);
+	}
+	get alignItemsTablet() {
+		return this.getAttribute("align-items--tablet");
+	}
+	set alignItemsTablet(e) {
+		v(this, "align-items--tablet", e);
+	}
+	get alignItemsLaptop() {
+		return this.getAttribute("align-items--laptop");
+	}
+	set alignItemsLaptop(e) {
+		v(this, "align-items--laptop", e);
+	}
+	get alignItemsDesktop() {
+		return this.getAttribute("align-items--desktop");
+	}
+	set alignItemsDesktop(e) {
+		v(this, "align-items--desktop", e);
+	}
+	get wrap() {
+		return this.getAttribute("wrap");
+	}
+	set wrap(e) {
+		v(this, "wrap", e);
+	}
+	get wrapMobile() {
+		return this.getAttribute("wrap--mobile");
+	}
+	set wrapMobile(e) {
+		v(this, "wrap--mobile", e);
+	}
+	get wrapTablet() {
+		return this.getAttribute("wrap--tablet");
+	}
+	set wrapTablet(e) {
+		v(this, "wrap--tablet", e);
+	}
+	get wrapLaptop() {
+		return this.getAttribute("wrap--laptop");
+	}
+	set wrapLaptop(e) {
+		v(this, "wrap--laptop", e);
+	}
+	get wrapDesktop() {
+		return this.getAttribute("wrap--desktop");
+	}
+	set wrapDesktop(e) {
+		v(this, "wrap--desktop", e);
+	}
+	get overflowX() {
+		return this.getAttribute("overflow-x");
+	}
+	set overflowX(e) {
+		v(this, "overflow-x", e);
+	}
+	get overflowXMobile() {
+		return this.getAttribute("overflow-x--mobile");
+	}
+	set overflowXMobile(e) {
+		v(this, "overflow-x--mobile", e);
+	}
+	get overflowXTablet() {
+		return this.getAttribute("overflow-x--tablet");
+	}
+	set overflowXTablet(e) {
+		v(this, "overflow-x--tablet", e);
+	}
+	get overflowXLaptop() {
+		return this.getAttribute("overflow-x--laptop");
+	}
+	set overflowXLaptop(e) {
+		v(this, "overflow-x--laptop", e);
+	}
+	get overflowXDesktop() {
+		return this.getAttribute("overflow-x--desktop");
+	}
+	set overflowXDesktop(e) {
+		v(this, "overflow-x--desktop", e);
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(".flex-container");
+	}
+};
+customElements.get("px-stack") || customElements.define("px-stack", I);
+var L = class extends I {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
+	}
+};
+customElements.get("px-vstack") || customElements.define("px-vstack", L);
+var R = class extends I {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
+	}
+};
+customElements.get("px-hstack") || customElements.define("px-hstack", R);
+//#endregion
+//#region ../Layout/src/Spacer.ts
+var z = class extends HTMLElement {
+	constructor() {
+		super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
+	}
+	static get observedAttributes() {
+		return ["grow", "nogap"];
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
+	}
+	connectedCallback() {
+		this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
+			this.handleSizeChange();
+		}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
+	}
+	disconnectedCallback() {
+		this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
+	}
+	get grow() {
+		return this.getAttribute("grow");
+	}
+	set grow(e) {
+		this.setAttribute("grow", `${e}`);
+	}
+	scheduleRecheck() {
+		this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
+			this.recheckHandle = void 0, this.recalculateVisibility();
+		});
+	}
+	recalculateVisibility() {
+		this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
+	}
+	handleSizeChange() {
+		let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
+		this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
+	}
+	updateParticipation() {
+		this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
+	}
+	get nogap() {
+		return this.hasAttribute("nogap");
+	}
+	set nogap(e) {
+		e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
+	}
+};
+customElements.get("px-spacer") || customElements.define("px-spacer", z);
+//#endregion
+//#region ../Layout/src/Page.css?inline
+var B = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", V = new CSSStyleSheet();
+V.replaceSync(B);
+var H = class extends n {
+	constructor() {
+		super(V), this.template = (e) => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -1216,7 +1067,7 @@ class ot extends m {
             <px-spacer></px-spacer>
           </px-hstack>
         </px-container>
-        ${t ? ` <px-hstack>
+        ${e ? ` <px-hstack>
         <px-spacer></px-spacer>
         <px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
           <px-vstack gap="s">
@@ -1282,1041 +1133,940 @@ class ot extends m {
       </px-vstack>
     </px-container>
   `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "background-image",
-      "gap",
-      "background-color",
-      "padding-vertical",
-      "padding-horizontal"
-    ];
-  }
-  get $wideImage() {
-    return this.shadowRoot.querySelector("#image-box");
-  }
-  get $bodyVStackContainer() {
-    return this.shadowRoot.querySelector("#header-vstack-container");
-  }
-  get $bodyContainer() {
-    return this.shadowRoot.querySelector("#body-container");
-  }
-  get $contactContainer() {
-    return this.shadowRoot.querySelector("#contact-container");
-  }
-  get $footerContainer() {
-    return this.shadowRoot.querySelector("#footer-container");
-  }
-  get $headerContainer() {
-    return this.shadowRoot.querySelector("#header-container");
-  }
-  get $imageContainer() {
-    return this.shadowRoot.querySelector("#image-container");
-  }
-  get backgroundImage() {
-    return this.getAttribute("background-image");
-  }
-  get $imageStickySlot() {
-    return this.querySelector('*[slot="image-sticky-container"]');
-  }
-  get $main() {
-    return this.shadowRoot.querySelector("#main");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color") || "none";
-  }
-  get paddingVertical() {
-    return this.getAttribute("padding-vertical");
-  }
-  get paddingHorizontal() {
-    return this.getAttribute("padding-horizontal");
-  }
-  set paddingVertical(t) {
-    this.setAttribute("padding-vertical", t);
-  }
-  set paddingHorizontal(t) {
-    this.setAttribute("padding-horizontal", t);
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  connectedCallback() {
-    this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
-  }
-  attributeChangedCallback(t, i, e) {
-    if (i !== e)
-      switch (t) {
-        case "background-image":
-          this.$imageContainer.setAttribute("background-image", e);
-          break;
-        case "gap":
-          this.$bodyVStackContainer.setAttribute("gap", e);
-          break;
-        case "background-color":
-          this.$bodyContainer.setAttribute(
-            "background-color",
-            u.indexOf(e) > 0 ? e : "none"
-          );
-          break;
-        case "padding-vertical":
-          this.handlePaddingVerticalChange(e);
-          break;
-        case "padding-horizontal":
-          this.handlePaddingHorizontalChange(e);
-          break;
-        default:
-          super.attributeChangedCallback(t, i, e);
-      }
-  }
-  handlePaddingVerticalChange(t) {
-    this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
-  }
-  handlePaddingHorizontalChange(t) {
-    this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
-  }
-}
-customElements.get("px-page") === void 0 && customElements.define("px-page", ot);
-const B = new CSSStyleSheet();
-B.replaceSync(N);
-class rt extends m {
-  constructor() {
-    super(B), this.template = () => `
-    <px-container border-radius="none" padding-inline="none">
-      <div class="content-wrapper">
-        <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.shadowRoot.innerHTML = this.template();
-  }
-  connectedCallback() {
-    var t, i;
-    this.$container.setAttribute("background-color", this.backgroundColor), !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"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), (t = this.$slotHeading) == null || t.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), (i = this.$slotOverlap) == null || i.addEventListener(
-      "slotchange",
-      this.toggleOverlapSpacing
-    );
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "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"
-    ];
-  }
-  attributeChangedCallback(t, i, e) {
-    if (i !== e)
-      switch (t) {
-        case "background-color":
-          this.$container.backgroundColor = u.indexOf(e) > 0 ? e : "none";
-          break;
-        case "background-gradient":
-          this.$container.gradient = this.gradient;
-          break;
-        case "background-image":
-          this.$container.backgroundImage = e;
-          break;
-        case "background-image--mobile":
-          this.$container.backgroundImageMobile = e;
-          break;
-        case "background-image--tablet":
-          this.$container.backgroundImageTablet = e;
-          break;
-        case "background-image--laptop":
-          this.$container.backgroundImageLaptop = e;
-          break;
-        case "background-size":
-          this.$container.backgroundSize = e;
-          break;
-        case "background-position":
-          this.$container.backgroundPosition = e;
-          break;
-        case "padding-block":
-          this.$container.paddingBlock = e;
-          break;
-        case "padding-top":
-          this.$container.paddingTop = e;
-          break;
-        case "padding-bottom":
-          this.$container.paddingBottom = e;
-          break;
-        case "padding-block--mobile":
-          this.$container.paddingBlockMobile = e;
-          break;
-        case "padding-top--mobile":
-          this.$container.paddingTopMobile = e;
-          break;
-        case "padding-bottom--mobile":
-          this.$container.paddingBottomMobile = e;
-          break;
-        case "padding-block--tablet":
-          this.$container.paddingBlockTablet = e;
-          break;
-        case "padding-top--tablet":
-          this.$container.paddingTopTablet = e;
-          break;
-        case "padding-bottom--tablet":
-          this.$container.paddingBottomTablet = e;
-          break;
-        case "padding-block--laptop":
-          this.$container.paddingBlockLaptop = e;
-          break;
-        case "padding-top--laptop":
-          this.$container.paddingTopLaptop = e;
-          break;
-        case "padding-bottom--laptop":
-          this.$container.paddingBottomLaptop = e;
-          break;
-        case "border":
-          this.$container.border = e;
-          break;
-        case "border-side":
-          this.$container.borderSide = e;
-          break;
-        case "border-side--mobile":
-          this.$container.borderSideMobile = e;
-          break;
-        case "border-side--tablet":
-          this.$container.borderSideTablet = e;
-          break;
-        case "border-side--laptop":
-          this.$container.borderSideLaptop = e;
-          break;
-        default:
-          super.attributeChangedCallback(t, i, e);
-          break;
-      }
-  }
-  disconnectedCallback() {
-    var t, i;
-    (t = this.$slotHeading) == null || t.removeEventListener(
-      "slotchange",
-      this.setHeadingSpacing
-    ), (i = this.$slotOverlap) == null || i.removeEventListener(
-      "slotchange",
-      this.toggleOverlapSpacing
-    );
-  }
-  toggleOverlapSpacing() {
-    const t = this.$slotOverlap, i = this.$mainContentWrapper;
-    if (!t || !i) return;
-    const o = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
-    i.classList.toggle("overlapped", o);
-  }
-  isNotEmptyNode(t) {
-    return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
-  }
-  setHeadingSpacing() {
-    var e;
-    const t = this.$slotHeading, i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("px-vstack");
-    t && i && (t.assignedElements().length > 0 ? i.setAttribute("gap", "heading-to-content") : i.setAttribute("gap", "none"));
-  }
-  get $container() {
-    var t;
-    return (t = this.shadowRoot) == null ? void 0 : t.querySelector("px-container");
-  }
-  get $mainContentWrapper() {
-    var t;
-    return (t = this.$container) == null ? void 0 : t.querySelector(".content-wrapper");
-  }
-  get $slotOverlap() {
-    var t;
-    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
-      'slot[name="overlap"]'
-    );
-  }
-  get $slottedOverlap() {
-    return this.querySelector('[slot="overlap"]');
-  }
-  get $slotHeading() {
-    var t;
-    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
-      'slot[name="heading"]'
-    );
-  }
-  get $slottedHeading() {
-    return this.querySelector('[slot="heading"]');
-  }
-  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", rt);
-const at = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (max-width: 47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (min-width: 48rem) and (max-width: 64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (min-width: 64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", z = new CSSStyleSheet();
-z.replaceSync(at);
-const st = [
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12"
-], nt = [
-  "",
-  "start",
-  "end",
-  "center",
-  "space-between",
-  "space-around",
-  "space-evenly",
-  "stretch"
-], dt = ["", "start", "end", "center", "stretch"], lt = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .grid`, gt = "px-spacing", pt = d(
-  "gap",
-  lt,
-  x,
-  gt,
-  "--grid-gap"
-), w = class w extends L {
-  constructor() {
-    super(z, pt), this.template = () => `<div class="grid">
-    <slot></slot>
-    </div>`, this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "grid-cols",
-      "grid-cols--mobile",
-      "grid-cols--tablet",
-      "grid-cols--laptop",
-      "justify-content",
-      "justify-items",
-      "align-content",
-      "align-items",
-      "justify-content--mobile",
-      "justify-items--mobile",
-      "align-content--mobile",
-      "align-items--mobile",
-      "justify-content--tablet",
-      "justify-items--tablet",
-      "align-content--tablet",
-      "align-items--tablet",
-      "justify-content--laptop",
-      "justify-items--laptop",
-      "align-content--laptop",
-      "align-items--laptop",
-      "justify-content--desktop",
-      "justify-items--desktop",
-      "align-content--desktop",
-      "align-items--desktop"
-    ];
-  }
-  connectedCallback() {
-    this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
-  }
-  attributeChangedCallback(t, i, e) {
-    if (i !== e)
-      switch (t) {
-        case "grid-cols":
-        case "grid-cols--mobile":
-        case "grid-cols--tablet":
-        case "grid-cols--laptop":
-          this.updateAttribute(t, i, e, st);
-          break;
-        case "justify-content":
-        case "align-content":
-        case "justify-content--mobile":
-        case "align-content--mobile":
-        case "justify-content--tablet":
-        case "align-content--tablet":
-        case "justify-content--laptop":
-        case "align-content--laptop":
-        case "justify-content--desktop":
-        case "align-content--desktop":
-          this.updateAttribute(
-            t,
-            i,
-            e,
-            nt
-          );
-          break;
-        case "justify-items":
-        case "align-items":
-        case "justify-items--mobile":
-        case "align-items--mobile":
-        case "justify-items--tablet":
-        case "align-items--tablet":
-        case "justify-items--laptop":
-        case "align-items--laptop":
-        case "justify-items--desktop":
-        case "align-items--desktop":
-          this.updateAttribute(
-            t,
-            i,
-            e,
-            dt
-          );
-          break;
-        default:
-          super.attributeChangedCallback(t, i, e);
-          break;
-      }
-  }
-  updateGap(t, i, e) {
-    if (!this.checkName(e, i)) {
-      s(
-        `"${i}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
-      );
-      return;
-    }
-    const o = (r) => {
-      r !== null && r !== "" && r !== "default" && (this.$el.style.setProperty(
-        "--grid-gap--mobile",
-        `var(--px-spacing-${r}-mobile)`
-      ), this.$el.style.setProperty(
-        "--grid-gap--tablet",
-        `var(--px-spacing-${r}-tablet)`
-      ), this.$el.style.setProperty(
-        "--grid-gap--laptop",
-        `var(--px-spacing-${r}-laptop)`
-      ));
-    };
-    o(t), o(i);
-  }
-  updateAttribute(t, i, e, o) {
-    this.checkName(o, e) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, e) : (i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${t}-${i}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) : s(
-      `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
-    );
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  set gap(t) {
-    this.setAttribute("gap", t);
-  }
-  get gapMobile() {
-    return this.getAttribute("gap--mobile");
-  }
-  set gapMobile(t) {
-    this.setAttribute("gap--mobile", t);
-  }
-  get gapTablet() {
-    return this.getAttribute("gap--tablet");
-  }
-  set gapTablet(t) {
-    this.setAttribute("gap--tablet", t);
-  }
-  get gapLaptop() {
-    return this.getAttribute("gap--laptop");
-  }
-  set gapLaptop(t) {
-    this.setAttribute("gap--laptop", t);
-  }
-  get gridCols() {
-    return this.getAttribute("grid-cols");
-  }
-  set gridCols(t) {
-    this.setAttribute("grid-cols", t);
-  }
-  get gridColsMobile() {
-    return this.getAttribute("grid-cols--mobile");
-  }
-  set gridColsMobile(t) {
-    this.setAttribute("grid-cols--mobile", t);
-  }
-  get gridColsTablet() {
-    return this.getAttribute("grid-cols--tablet");
-  }
-  set gridColsTablet(t) {
-    this.setAttribute("grid-cols--tablet", t);
-  }
-  get gridColsLaptop() {
-    return this.getAttribute("grid-cols--laptop");
-  }
-  set gridColsLaptop(t) {
-    this.setAttribute("grid-cols--laptop", t);
-  }
-  get justifyContent() {
-    return this.getAttribute("justify-content");
-  }
-  set justifyContent(t) {
-    this.setAttribute("justify-content", t);
-  }
-  get justifyItems() {
-    return this.getAttribute("justify-items");
-  }
-  set justifyItems(t) {
-    this.setAttribute("justify-items", t);
-  }
-  get alignContent() {
-    return this.getAttribute("align-content");
-  }
-  set alignContent(t) {
-    this.setAttribute("align-content", t);
-  }
-  get alignItems() {
-    return this.getAttribute("align-items");
-  }
-  set alignItems(t) {
-    this.setAttribute("align-items", t);
-  }
-  get justifyContentMobile() {
-    return this.getAttribute("justify-content--mobile");
-  }
-  set justifyContentMobile(t) {
-    this.setAttribute("justify-content--mobile", t);
-  }
-  get justifyItemsMobile() {
-    return this.getAttribute("justify-items--mobile");
-  }
-  set justifyItemsMobile(t) {
-    this.setAttribute("justify-items--mobile", t);
-  }
-  get alignContentMobile() {
-    return this.getAttribute("align-content--mobile");
-  }
-  set alignContentMobile(t) {
-    this.setAttribute("align-content--mobile", t);
-  }
-  get alignItemsMobile() {
-    return this.getAttribute("align-items--mobile");
-  }
-  set alignItemsMobile(t) {
-    this.setAttribute("align-items--mobile", t);
-  }
-  get justifyContentTablet() {
-    return this.getAttribute("justify-content--tablet");
-  }
-  set justifyContentTablet(t) {
-    this.setAttribute("justify-content--tablet", t);
-  }
-  get justifyItemsTablet() {
-    return this.getAttribute("justify-items--tablet");
-  }
-  set justifyItemsTablet(t) {
-    this.setAttribute("justify-items--tablet", t);
-  }
-  get alignContentTablet() {
-    return this.getAttribute("align-content--tablet");
-  }
-  set alignContentTablet(t) {
-    this.setAttribute("align-content--tablet", t);
-  }
-  get alignItemsTablet() {
-    return this.getAttribute("align-items--tablet");
-  }
-  set alignItemsTablet(t) {
-    this.setAttribute("align-items--tablet", t);
-  }
-  get justifyContentLaptop() {
-    return this.getAttribute("justify-content--laptop");
-  }
-  set justifyContentLaptop(t) {
-    this.setAttribute("justify-content--laptop", t);
-  }
-  get justifyItemsLaptop() {
-    return this.getAttribute("justify-items--laptop");
-  }
-  set justifyItemsLaptop(t) {
-    this.setAttribute("justify-items--laptop", t);
-  }
-  get alignContentLaptop() {
-    return this.getAttribute("align-content--laptop");
-  }
-  set alignContentLaptop(t) {
-    this.setAttribute("align-content--laptop", t);
-  }
-  get alignItemsLaptop() {
-    return this.getAttribute("align-items--laptop");
-  }
-  set alignItemsLaptop(t) {
-    this.setAttribute("align-items--laptop", t);
-  }
-  get justifyContentDesktop() {
-    return this.getAttribute("justify-content--desktop");
-  }
-  set justifyContentDesktop(t) {
-    this.setAttribute("justify-content--desktop", t);
-  }
-  get justifyItemsDesktop() {
-    return this.getAttribute("justify-items--desktop");
-  }
-  set justifyItemsDesktop(t) {
-    this.setAttribute("justify-items--desktop", t);
-  }
-  get alignContentDesktop() {
-    return this.getAttribute("align-content--desktop");
-  }
-  set alignContentDesktop(t) {
-    this.setAttribute("align-content--desktop", t);
-  }
-  get alignItemsDesktop() {
-    return this.getAttribute("align-items--desktop");
-  }
-  set alignItemsDesktop(t) {
-    this.setAttribute("align-items--desktop", t);
-  }
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"background-image",
+			"gap",
+			"background-color",
+			"padding-vertical",
+			"padding-horizontal"
+		];
+	}
+	get $wideImage() {
+		return this.shadowRoot.querySelector("#image-box");
+	}
+	get $bodyVStackContainer() {
+		return this.shadowRoot.querySelector("#header-vstack-container");
+	}
+	get $bodyContainer() {
+		return this.shadowRoot.querySelector("#body-container");
+	}
+	get $contactContainer() {
+		return this.shadowRoot.querySelector("#contact-container");
+	}
+	get $footerContainer() {
+		return this.shadowRoot.querySelector("#footer-container");
+	}
+	get $headerContainer() {
+		return this.shadowRoot.querySelector("#header-container");
+	}
+	get $imageContainer() {
+		return this.shadowRoot.querySelector("#image-container");
+	}
+	get backgroundImage() {
+		return this.getAttribute("background-image");
+	}
+	get $imageStickySlot() {
+		return this.querySelector("*[slot=\"image-sticky-container\"]");
+	}
+	get $main() {
+		return this.shadowRoot.querySelector("#main");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color") || "none";
+	}
+	get paddingVertical() {
+		return this.getAttribute("padding-vertical");
+	}
+	get paddingHorizontal() {
+		return this.getAttribute("padding-horizontal");
+	}
+	set paddingVertical(e) {
+		this.setAttribute("padding-vertical", `${e}`);
+	}
+	set paddingHorizontal(e) {
+		this.setAttribute("padding-horizontal", `${e}`);
+	}
+	get gap() {
+		return this.getAttribute("gap");
+	}
+	connectedCallback() {
+		this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-image":
+				this.$imageContainer.setAttribute("background-image", n);
+				break;
+			case "gap":
+				this.$bodyVStackContainer.setAttribute("gap", n);
+				break;
+			case "background-color":
+				this.$bodyContainer.setAttribute("background-color", r.indexOf(n) > 0 ? n : "none");
+				break;
+			case "padding-vertical":
+				this.handlePaddingVerticalChange(n);
+				break;
+			case "padding-horizontal":
+				this.handlePaddingHorizontalChange(n);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	handlePaddingVerticalChange(e) {
+		this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
+	}
+	handlePaddingHorizontalChange(e) {
+		this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
+	}
 };
-w.nativeName = "div";
-let v = w;
-customElements.get("px-grid") || customElements.define("px-grid", v);
-const R = new CSSStyleSheet();
-R.replaceSync(q);
-const j = class j extends L {
-  constructor() {
-    super(R), this.template = () => `<div class="content-header">
-      <div class="contrast-helper"></div>
-      <px-section padding-block="l">
-        <px-grid gap="none">
-          <px-container padding="none" border-radius="none" background-color="none"  >
-            <div class="content-header-content">
-              <px-vstack gap="heading-to-subtitle">
-                <px-h1><slot></slot></px-h1>
-                <slot name="subtitle"></slot>
-              </px-vstack>
-              <px-stack gap="s" direction="row" direction--mobile="column">
-                <slot name="patch" shrink></slot>
-                <slot name="patch-description"></slot>
-              </px-stack>
-            </div>
-          </px-container>
-        </px-grid>
-        <slot name="overlap" slot="overlap"></slot>
-      </px-section>
-    </div>`, this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return [
-      "background-color",
-      "background-gradient",
-      "background-image",
-      "background-image--mobile",
-      "background-image--tablet",
-      "background-image--laptop",
-      "background-size",
-      "background-position",
-      "contrast-helper-gradient",
-      "contrast-helper-overlay",
-      "min-height",
-      "has-gridding",
-      "has-gridding--mobile",
-      "has-gridding--tablet",
-      "has-gridding--laptop",
-      "has-gridding--desktop",
-      "inverted"
-    ];
-  }
-  connectedCallback() {
-    var t, i;
-    this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this), this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this), this.styleSubtitleSlot(), this.stylepatchDescriptionSlotted(), this.createGridding(), (t = this.$subtitleSlot) == null || t.addEventListener("slotchange", this.styleSubtitleSlot), (i = this.$patchDescriptionSlot) == null || i.addEventListener(
-      "slotchange",
-      this.stylepatchDescriptionSlotted
-    );
-  }
-  attributeChangedCallback(t, i, e) {
-    if (i !== e)
-      switch (t) {
-        case "background-color":
-          this.$section.backgroundColor = u.indexOf(e) > 0 ? e : "none";
-          break;
-        case "background-gradient":
-          this.$section.gradient = f.indexOf(e) > 0 ? e : "none";
-          break;
-        case "background-image":
-          this.$section.backgroundImage = e;
-          break;
-        case "background-image--mobile":
-          this.$section.backgroundImageMobile = e;
-          break;
-        case "background-image--tablet":
-          this.$section.backgroundImageTablet = e;
-          break;
-        case "background-image--laptop":
-          this.$section.backgroundImageLaptop = e;
-          break;
-        case "background-size":
-          this.$section.backgroundSize = C.indexOf(e) > 0 ? e : "";
-          break;
-        case "background-position":
-          this.$section.backgroundPosition = e;
-          break;
-        case "has-gridding":
-        case "has-gridding--mobile":
-        case "has-gridding--tablet":
-        case "has-gridding--laptop":
-        case "has-gridding--desktop":
-          this.createGridding(e);
-          break;
-        case "inverted":
-          for (let o = 0; o < this.$children.length; o++)
-            this.$children[o].hasAttribute("inverted") || this.$children[o].toggleAttribute("inverted");
-          this.$h1.toggleAttribute("inverted", e !== null), this.$el.toggleAttribute("inverted", e !== null);
-          break;
-        default:
-          super.attributeChangedCallback(t, i, e);
-          break;
-      }
-  }
-  disconnectedCallback() {
-    var t, i;
-    (t = this.$subtitleSlot) == null || t.removeEventListener(
-      "slotchange",
-      this.styleSubtitleSlot
-    ), (i = this.$patchDescriptionSlot) == null || i.removeEventListener(
-      "slotchange",
-      this.stylepatchDescriptionSlotted
-    );
-  }
-  stylepatchDescriptionSlotted() {
-    this.$patchDescriptionSlotted && (this.$patchDescriptionSlotted.localName === "px-p" && this.$patchDescriptionSlotted.setAttribute("variant", "default"), (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") && (this.$patchDescriptionSlotted.setAttribute("font-size", "body-l"), this.$patchDescriptionSlotted.removeAttribute("font-weight"), this.$patchDescriptionSlotted.removeAttribute("color")), this.$patchDescriptionSlotted.localName === "px-price" && this.$patchDescriptionSlotted.setAttribute("size", "m"));
-  }
-  styleSubtitleSlot() {
-    this.$subtitleSlotted && this.$subtitleSlotted.setAttribute("variant", "subtitle");
-  }
-  createGridding(t) {
-    const i = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
-      {
-        prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
-        attr: "col-span--mobile"
-      },
-      {
-        prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
-        attr: "col-span--tablet"
-      },
-      {
-        prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
-        attr: "col-span--laptop"
-      },
-      {
-        prop: "hasGriddingDesktop",
-        gridAttr: "grid-cols--desktop",
-        attr: "col-span--desktop"
-      }
-    ], e = this.shadowRoot.querySelector(
-      "px-grid > px-container"
-    );
-    t !== null ? i.forEach(({ prop: o, gridAttr: r, attr: a }) => {
-      this[o] && (this.$grid.setAttribute(r, "2"), e == null || e.setAttribute(a, "1"));
-    }) : i.forEach(({ gridAttr: o, attr: r }) => {
-      this.$grid.setAttribute(o, "1"), e == null || e.setAttribute(r, "1");
-    });
-  }
-  get $grid() {
-    return this.shadowRoot.querySelector("px-grid");
-  }
-  get $section() {
-    return this.shadowRoot.querySelector("px-section");
-  }
-  get $h1() {
-    return this.shadowRoot.querySelector("px-h1");
-  }
-  get $subtitleSlot() {
-    var t;
-    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
-      'slot[name="subtitle"]'
-    );
-  }
-  get $subtitleSlotted() {
-    return this.querySelector('[slot="subtitle"]');
-  }
-  get $patchDescriptionSlot() {
-    var t;
-    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
-      'slot[name="patch-description"]'
-    );
-  }
-  get $patchDescriptionSlotted() {
-    return this.querySelector('[slot="patch-description"]');
-  }
-  get $overlapSlot() {
-    return this.querySelector('[slot="overlap"]');
-  }
-  get $children() {
-    return this.querySelectorAll("px-content-header > *");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  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 gradientContrastHelper() {
-    return this.hasAttribute("contrast-helper-gradient");
-  }
-  set gradientContrastHelper(t) {
-    t ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
-  }
-  get overlayContrastHelper() {
-    return this.hasAttribute("contrast-helper-overlay");
-  }
-  set overlayContrastHelper(t) {
-    t ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
-  }
-  get hasGridding() {
-    return this.hasAttribute("has-gridding");
-  }
-  set hasGridding(t) {
-    t ? this.setAttribute("has-gridding", "") : this.removeAttribute("has-gridding");
-  }
-  get hasGriddingMobile() {
-    return this.hasAttribute("has-gridding--mobile");
-  }
-  set hasGriddingMobile(t) {
-    t ? this.setAttribute("has-gridding--mobile", "") : this.removeAttribute("has-gridding--mobile");
-  }
-  get hasGriddingTablet() {
-    return this.hasAttribute("has-gridding--tablet");
-  }
-  set hasGriddingTablet(t) {
-    t ? this.setAttribute("has-gridding--tablet", "") : this.removeAttribute("has-gridding--tablet");
-  }
-  get hasGriddingLaptop() {
-    return this.hasAttribute("has-gridding--laptop");
-  }
-  set hasGriddingLaptop(t) {
-    t ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
-  }
-  get hasGriddingDesktop() {
-    return this.hasAttribute("has-gridding--desktop");
-  }
-  set hasGriddingDesktop(t) {
-    t ? this.setAttribute("has-gridding--desktop", "") : this.removeAttribute("has-gridding--desktop");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get minHeight() {
-    return this.hasAttribute("min-height");
-  }
-  set minHeight(t) {
-    t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
-  }
+customElements.get("px-page") === void 0 && customElements.define("px-page", H);
+//#endregion
+//#region ../Section/src/Section.ts
+var U = new CSSStyleSheet();
+U.replaceSync(b);
+var W = class extends n {
+	constructor() {
+		super(U), this.template = () => "\n    <px-container border-radius=\"none\" padding-inline=\"none\">\n      <div class=\"content-wrapper\">\n        <px-vstack gap=\"heading-to-content\">\n          <slot name=\"heading\"></slot>\n          <px-vstack gap=\"none\">\n            <slot></slot>\n          </px-vstack>\n        </px-vstack>\n      </div>\n    </px-container>\n    <div class=\"content-wrapper\">\n      <slot name=\"overlap\"></slot>\n    </div>\n  ", this.shadowRoot.innerHTML = this.template();
+	}
+	connectedCallback() {
+		v(this.$container, "background-color", this.backgroundColor), !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"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), this.$slotHeading?.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), this.$slotOverlap?.addEventListener("slotchange", this.toggleOverlapSpacing);
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"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"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-color":
+				this.$container.backgroundColor = r.indexOf(n) > 0 ? n : "none";
+				break;
+			case "background-gradient":
+				this.$container.gradient = this.gradient;
+				break;
+			case "background-image":
+				this.$container.backgroundImage = n;
+				break;
+			case "background-image--mobile":
+				this.$container.backgroundImageMobile = n;
+				break;
+			case "background-image--tablet":
+				this.$container.backgroundImageTablet = n;
+				break;
+			case "background-image--laptop":
+				this.$container.backgroundImageLaptop = n;
+				break;
+			case "background-size":
+				this.$container.backgroundSize = n;
+				break;
+			case "background-position":
+				this.$container.backgroundPosition = n;
+				break;
+			case "padding-block":
+				this.$container.paddingBlock = n;
+				break;
+			case "padding-top":
+				this.$container.paddingTop = n;
+				break;
+			case "padding-bottom":
+				this.$container.paddingBottom = n;
+				break;
+			case "padding-block--mobile":
+				this.$container.paddingBlockMobile = n;
+				break;
+			case "padding-top--mobile":
+				this.$container.paddingTopMobile = n;
+				break;
+			case "padding-bottom--mobile":
+				this.$container.paddingBottomMobile = n;
+				break;
+			case "padding-block--tablet":
+				this.$container.paddingBlockTablet = n;
+				break;
+			case "padding-top--tablet":
+				this.$container.paddingTopTablet = n;
+				break;
+			case "padding-bottom--tablet":
+				this.$container.paddingBottomTablet = n;
+				break;
+			case "padding-block--laptop":
+				this.$container.paddingBlockLaptop = n;
+				break;
+			case "padding-top--laptop":
+				this.$container.paddingTopLaptop = n;
+				break;
+			case "padding-bottom--laptop":
+				this.$container.paddingBottomLaptop = n;
+				break;
+			case "border":
+				this.$container.border = n;
+				break;
+			case "border-side":
+				this.$container.borderSide = n;
+				break;
+			case "border-side--mobile":
+				this.$container.borderSideMobile = n;
+				break;
+			case "border-side--tablet":
+				this.$container.borderSideTablet = n;
+				break;
+			case "border-side--laptop":
+				this.$container.borderSideLaptop = n;
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	disconnectedCallback() {
+		this.$slotHeading?.removeEventListener("slotchange", this.setHeadingSpacing), this.$slotOverlap?.removeEventListener("slotchange", this.toggleOverlapSpacing);
+	}
+	toggleOverlapSpacing() {
+		let e = this.$slotOverlap, t = this.$mainContentWrapper;
+		if (!e || !t) return;
+		let n = e.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
+		t.classList.toggle("overlapped", n);
+	}
+	isNotEmptyNode(e) {
+		return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && (e.textContent ?? "").trim().length > 0;
+	}
+	setHeadingSpacing() {
+		let e = this.$slotHeading, t = this.shadowRoot?.querySelector("px-vstack");
+		e && t && (e.assignedElements().length > 0 ? t.setAttribute("gap", "heading-to-content") : t.setAttribute("gap", "none"));
+	}
+	get $container() {
+		return this.shadowRoot?.querySelector("px-container");
+	}
+	get $mainContentWrapper() {
+		return this.$container?.querySelector(".content-wrapper");
+	}
+	get $slotOverlap() {
+		return this.shadowRoot?.querySelector("slot[name=\"overlap\"]");
+	}
+	get $slottedOverlap() {
+		return this.querySelector("[slot=\"overlap\"]");
+	}
+	get $slotHeading() {
+		return this.shadowRoot?.querySelector("slot[name=\"heading\"]");
+	}
+	get $slottedHeading() {
+		return this.querySelector("[slot=\"heading\"]");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color") || "none";
+	}
+	set backgroundColor(e) {
+		v(this, "background-color", e);
+	}
+	get gradient() {
+		return this.getAttribute("background-gradient");
+	}
+	set gradient(e) {
+		v(this, "background-gradient", e);
+	}
+	get backgroundImage() {
+		return this.getAttribute("background-image");
+	}
+	set backgroundImage(e) {
+		v(this, "background-image", e);
+	}
+	get backgroundImageMobile() {
+		return this.getAttribute("background-image--mobile");
+	}
+	set backgroundImageMobile(e) {
+		v(this, "background-image--mobile", e);
+	}
+	get backgroundImageTablet() {
+		return this.getAttribute("background-image--tablet");
+	}
+	set backgroundImageTablet(e) {
+		v(this, "background-image--tablet", e);
+	}
+	get backgroundImageLaptop() {
+		return this.getAttribute("background-image--laptop");
+	}
+	set backgroundImageLaptop(e) {
+		v(this, "background-image--laptop", e);
+	}
+	get backgroundSize() {
+		return this.getAttribute("background-size");
+	}
+	set backgroundSize(e) {
+		v(this, "background-size", e);
+	}
+	get backgroundPosition() {
+		return this.getAttribute("background-position");
+	}
+	set backgroundPosition(e) {
+		v(this, "background-position", e);
+	}
+	get paddingBlock() {
+		return this.getAttribute("padding-block");
+	}
+	set paddingBlock(e) {
+		v(this, "padding-block", e);
+	}
+	get paddingTop() {
+		return this.getAttribute("padding-top");
+	}
+	set paddingTop(e) {
+		v(this, "padding-top", e);
+	}
+	get paddingBottom() {
+		return this.getAttribute("padding-bottom");
+	}
+	set paddingBottom(e) {
+		v(this, "padding-bottom", e);
+	}
+	get paddingBlockMobile() {
+		return this.getAttribute("padding-block--mobile");
+	}
+	set paddingBlockMobile(e) {
+		v(this, "padding-block--mobile", e);
+	}
+	get paddingTopMobile() {
+		return this.getAttribute("padding-top--mobile");
+	}
+	set paddingTopMobile(e) {
+		v(this, "padding-top--mobile", e);
+	}
+	get paddingBottomMobile() {
+		return this.getAttribute("padding-bottom--mobile");
+	}
+	set paddingBottomMobile(e) {
+		v(this, "padding-bottom--mobile", e);
+	}
+	get paddingBlockTablet() {
+		return this.getAttribute("padding-block--tablet");
+	}
+	set paddingBlockTablet(e) {
+		v(this, "padding-block--tablet", e);
+	}
+	get paddingTopTablet() {
+		return this.getAttribute("padding-top--tablet");
+	}
+	set paddingTopTablet(e) {
+		v(this, "padding-top--tablet", e);
+	}
+	get paddingBottomTablet() {
+		return this.getAttribute("padding-bottom--tablet");
+	}
+	set paddingBottomTablet(e) {
+		v(this, "padding-bottom--tablet", e);
+	}
+	get paddingBlockLaptop() {
+		return this.getAttribute("padding-block--laptop");
+	}
+	set paddingBlockLaptop(e) {
+		v(this, "padding-block--laptop", e);
+	}
+	get paddingTopLaptop() {
+		return this.getAttribute("padding-top--laptop");
+	}
+	set paddingTopLaptop(e) {
+		v(this, "padding-top--laptop", e);
+	}
+	get paddingBottomLaptop() {
+		return this.getAttribute("padding-bottom--laptop");
+	}
+	set paddingBottomLaptop(e) {
+		v(this, "padding-bottom--laptop", e);
+	}
+	get border() {
+		return this.getAttribute("border");
+	}
+	set border(e) {
+		v(this, "border", e);
+	}
+	get borderSide() {
+		return this.getAttribute("border-side");
+	}
+	set borderSide(e) {
+		v(this, "border-side", e);
+	}
+	get borderSideMobile() {
+		return this.getAttribute("border-side--mobile");
+	}
+	set borderSideMobile(e) {
+		v(this, "border-side--mobile", e);
+	}
+	get borderSideTablet() {
+		return this.getAttribute("border-side--tablet");
+	}
+	set borderSideTablet(e) {
+		v(this, "border-side--tablet", e);
+	}
+	get borderSideLaptop() {
+		return this.getAttribute("border-side--laptop");
+	}
+	set borderSideLaptop(e) {
+		v(this, "border-side--laptop", e);
+	}
+};
+customElements.get("px-section") || customElements.define("px-section", W);
+//#endregion
+//#region ../Grid/src/grid.css?inline
+var G = ":host{--grid-cols:initial;--grid-cols--mobile:initial;--grid-cols--tablet:initial;--grid-cols--laptop:initial;--grid-cols--desktop:initial;--justify-content:initial;--justify-items:initial;--align-content:initial;--align-items:initial;display:block}.grid{grid-template-columns:repeat(var(--grid-cols), minmax(0, 1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items);display:grid}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (width<=47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (width>=48rem) and (width<=64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (width>=64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", K = new CSSStyleSheet();
+K.replaceSync(G);
+var q = [
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11",
+	"12"
+], J = [
+	"",
+	"start",
+	"end",
+	"center",
+	"space-between",
+	"space-around",
+	"space-evenly",
+	"stretch"
+], Y = [
+	"",
+	"start",
+	"end",
+	"center",
+	"stretch"
+], X = f("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .grid`, p, "px-spacing", "--grid-gap"), Z = class extends t {
+	static {
+		this.nativeName = "div";
+	}
+	constructor() {
+		super(K, X), this.template = () => "<div class=\"grid\">\n    <slot></slot>\n    </div>", this.shadowRoot.innerHTML = this.template();
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"grid-cols",
+			"grid-cols--mobile",
+			"grid-cols--tablet",
+			"grid-cols--laptop",
+			"justify-content",
+			"justify-items",
+			"align-content",
+			"align-items",
+			"justify-content--mobile",
+			"justify-items--mobile",
+			"align-content--mobile",
+			"align-items--mobile",
+			"justify-content--tablet",
+			"justify-items--tablet",
+			"align-content--tablet",
+			"align-items--tablet",
+			"justify-content--laptop",
+			"justify-items--laptop",
+			"align-content--laptop",
+			"align-items--laptop",
+			"justify-content--desktop",
+			"justify-items--desktop",
+			"align-content--desktop",
+			"align-items--desktop"
+		];
+	}
+	connectedCallback() {
+		this.gap ||= "default", this.alignItems ||= "stretch";
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "grid-cols":
+			case "grid-cols--mobile":
+			case "grid-cols--tablet":
+			case "grid-cols--laptop":
+				this.updateAttribute(e, t, n, q);
+				break;
+			case "justify-content":
+			case "align-content":
+			case "justify-content--mobile":
+			case "align-content--mobile":
+			case "justify-content--tablet":
+			case "align-content--tablet":
+			case "justify-content--laptop":
+			case "align-content--laptop":
+			case "justify-content--desktop":
+			case "align-content--desktop":
+				this.updateAttribute(e, t, n, J);
+				break;
+			case "justify-items":
+			case "align-items":
+			case "justify-items--mobile":
+			case "align-items--mobile":
+			case "justify-items--tablet":
+			case "align-items--tablet":
+			case "justify-items--laptop":
+			case "align-items--laptop":
+			case "justify-items--desktop":
+			case "align-items--desktop":
+				this.updateAttribute(e, t, n, Y);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updateGap(e, t, n) {
+		if (!this.checkName(n, t)) {
+			h(`"${t}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
+			return;
+		}
+		let r = (e) => {
+			e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--grid-gap--mobile", `var(--px-spacing-${e}-mobile)`), this.$el.style.setProperty("--grid-gap--tablet", `var(--px-spacing-${e}-tablet)`), this.$el.style.setProperty("--grid-gap--laptop", `var(--px-spacing-${e}-laptop)`));
+		};
+		r(e), r(t);
+	}
+	updateAttribute(e, t, n, r) {
+		this.checkName(r, n) ? e === "grid-cols" || e === "grid-cols--mobile" || e === "grid-cols--tablet" || e === "grid-cols--laptop" || e === "grid-cols--desktop" ? this.$el.style.setProperty(`--${e}`, n) : (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`)) : h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+	}
+	get gap() {
+		return this.getAttribute("gap");
+	}
+	set gap(e) {
+		this._updateAttribute("gap", e);
+	}
+	get gapMobile() {
+		return this.getAttribute("gap--mobile");
+	}
+	set gapMobile(e) {
+		this._updateAttribute("gap--mobile", e);
+	}
+	get gapTablet() {
+		return this.getAttribute("gap--tablet");
+	}
+	set gapTablet(e) {
+		this._updateAttribute("gap--tablet", e);
+	}
+	get gapLaptop() {
+		return this.getAttribute("gap--laptop");
+	}
+	set gapLaptop(e) {
+		this._updateAttribute("gap--laptop", e);
+	}
+	get gridCols() {
+		return this.getAttribute("grid-cols");
+	}
+	set gridCols(e) {
+		this._updateAttribute("grid-cols", e);
+	}
+	get gridColsMobile() {
+		return this.getAttribute("grid-cols--mobile");
+	}
+	set gridColsMobile(e) {
+		this._updateAttribute("grid-cols--mobile", e);
+	}
+	get gridColsTablet() {
+		return this.getAttribute("grid-cols--tablet");
+	}
+	set gridColsTablet(e) {
+		this._updateAttribute("grid-cols--tablet", e);
+	}
+	get gridColsLaptop() {
+		return this.getAttribute("grid-cols--laptop");
+	}
+	set gridColsLaptop(e) {
+		this._updateAttribute("grid-cols--laptop", e);
+	}
+	get justifyContent() {
+		return this.getAttribute("justify-content");
+	}
+	set justifyContent(e) {
+		this._updateAttribute("justify-content", e);
+	}
+	get justifyItems() {
+		return this.getAttribute("justify-items");
+	}
+	set justifyItems(e) {
+		this._updateAttribute("justify-items", e);
+	}
+	get alignContent() {
+		return this.getAttribute("align-content");
+	}
+	set alignContent(e) {
+		this._updateAttribute("align-content", e);
+	}
+	get alignItems() {
+		return this.getAttribute("align-items");
+	}
+	set alignItems(e) {
+		this._updateAttribute("align-items", e);
+	}
+	get justifyContentMobile() {
+		return this.getAttribute("justify-content--mobile");
+	}
+	set justifyContentMobile(e) {
+		this._updateAttribute("justify-content--mobile", e);
+	}
+	get justifyItemsMobile() {
+		return this.getAttribute("justify-items--mobile");
+	}
+	set justifyItemsMobile(e) {
+		this._updateAttribute("justify-items--mobile", e);
+	}
+	get alignContentMobile() {
+		return this.getAttribute("align-content--mobile");
+	}
+	set alignContentMobile(e) {
+		this._updateAttribute("align-content--mobile", e);
+	}
+	get alignItemsMobile() {
+		return this.getAttribute("align-items--mobile");
+	}
+	set alignItemsMobile(e) {
+		this._updateAttribute("align-items--mobile", e);
+	}
+	get justifyContentTablet() {
+		return this.getAttribute("justify-content--tablet");
+	}
+	set justifyContentTablet(e) {
+		this._updateAttribute("justify-content--tablet", e);
+	}
+	get justifyItemsTablet() {
+		return this.getAttribute("justify-items--tablet");
+	}
+	set justifyItemsTablet(e) {
+		this._updateAttribute("justify-items--tablet", e);
+	}
+	get alignContentTablet() {
+		return this.getAttribute("align-content--tablet");
+	}
+	set alignContentTablet(e) {
+		this._updateAttribute("align-content--tablet", e);
+	}
+	get alignItemsTablet() {
+		return this.getAttribute("align-items--tablet");
+	}
+	set alignItemsTablet(e) {
+		this._updateAttribute("align-items--tablet", e);
+	}
+	get justifyContentLaptop() {
+		return this.getAttribute("justify-content--laptop");
+	}
+	set justifyContentLaptop(e) {
+		this._updateAttribute("justify-content--laptop", e);
+	}
+	get justifyItemsLaptop() {
+		return this.getAttribute("justify-items--laptop");
+	}
+	set justifyItemsLaptop(e) {
+		this._updateAttribute("justify-items--laptop", e);
+	}
+	get alignContentLaptop() {
+		return this.getAttribute("align-content--laptop");
+	}
+	set alignContentLaptop(e) {
+		this._updateAttribute("align-content--laptop", e);
+	}
+	get alignItemsLaptop() {
+		return this.getAttribute("align-items--laptop");
+	}
+	set alignItemsLaptop(e) {
+		this._updateAttribute("align-items--laptop", e);
+	}
+	get justifyContentDesktop() {
+		return this.getAttribute("justify-content--desktop");
+	}
+	set justifyContentDesktop(e) {
+		this._updateAttribute("justify-content--desktop", e);
+	}
+	get justifyItemsDesktop() {
+		return this.getAttribute("justify-items--desktop");
+	}
+	set justifyItemsDesktop(e) {
+		this._updateAttribute("justify-items--desktop", e);
+	}
+	get alignContentDesktop() {
+		return this.getAttribute("align-content--desktop");
+	}
+	set alignContentDesktop(e) {
+		this._updateAttribute("align-content--desktop", e);
+	}
+	get alignItemsDesktop() {
+		return this.getAttribute("align-items--desktop");
+	}
+	set alignItemsDesktop(e) {
+		this._updateAttribute("align-items--desktop", e);
+	}
 };
-j.nativeName = "div";
-let y = j;
-customElements.get("px-content-header") || customElements.define("px-content-header", y);
-export {
-  y as ContentHeader
+customElements.get("px-grid") || customElements.define("px-grid", Z);
+//#endregion
+//#region src/ContentHeader.ts
+var Q = new CSSStyleSheet();
+Q.replaceSync(y);
+var $ = class extends t {
+	static {
+		this.nativeName = "div";
+	}
+	constructor() {
+		super(Q), this.template = () => "<div class=\"content-header\">\n      <div class=\"contrast-helper\"></div>\n      <px-section padding-block=\"l\">\n        <px-grid gap=\"none\">\n          <px-container padding=\"none\" border-radius=\"none\" background-color=\"none\"  >\n            <div class=\"content-header-content\">\n              <px-vstack gap=\"heading-to-subtitle\">\n                <px-h1><slot></slot></px-h1>\n                <slot name=\"subtitle\"></slot>\n              </px-vstack>\n              <px-stack gap=\"s\" direction=\"row\" direction--mobile=\"column\">\n                <slot name=\"patch\" shrink></slot>\n                <slot name=\"patch-description\"></slot>\n              </px-stack>\n            </div>\n          </px-container>\n        </px-grid>\n        <slot name=\"overlap\" slot=\"overlap\"></slot>\n      </px-section>\n    </div>", this.shadowRoot.innerHTML = this.template();
+	}
+	static get observedAttributes() {
+		return [
+			"background-color",
+			"background-gradient",
+			"background-image",
+			"background-image--mobile",
+			"background-image--tablet",
+			"background-image--laptop",
+			"background-size",
+			"background-position",
+			"contrast-helper-gradient",
+			"contrast-helper-overlay",
+			"min-height",
+			"has-gridding",
+			"has-gridding--mobile",
+			"has-gridding--tablet",
+			"has-gridding--laptop",
+			"has-gridding--desktop",
+			"inverted"
+		];
+	}
+	connectedCallback() {
+		this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this), this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this), this.styleSubtitleSlot(), this.stylepatchDescriptionSlotted(), this.createGridding(), this.$subtitleSlot?.addEventListener("slotchange", this.styleSubtitleSlot), this.$patchDescriptionSlot?.addEventListener("slotchange", this.stylepatchDescriptionSlotted);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-color":
+				this.$section.backgroundColor = r.indexOf(n) > 0 ? n : "none";
+				break;
+			case "background-gradient":
+				this.$section.gradient = m.indexOf(n) > 0 ? n : "none";
+				break;
+			case "background-image":
+				this.$section.backgroundImage = n;
+				break;
+			case "background-image--mobile":
+				this.$section.backgroundImageMobile = n;
+				break;
+			case "background-image--tablet":
+				this.$section.backgroundImageTablet = n;
+				break;
+			case "background-image--laptop":
+				this.$section.backgroundImageLaptop = n;
+				break;
+			case "background-size":
+				this.$section.backgroundSize = i.indexOf(n) > 0 ? n : "";
+				break;
+			case "background-position":
+				this.$section.backgroundPosition = n;
+				break;
+			case "has-gridding":
+			case "has-gridding--mobile":
+			case "has-gridding--tablet":
+			case "has-gridding--laptop":
+			case "has-gridding--desktop":
+				this.createGridding(n);
+				break;
+			case "inverted":
+				for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") || this.$children[e].toggleAttribute("inverted");
+				this.$h1.toggleAttribute("inverted", n !== null), this.$el.toggleAttribute("inverted", n !== null);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	disconnectedCallback() {
+		this.$subtitleSlot?.removeEventListener("slotchange", this.styleSubtitleSlot), this.$patchDescriptionSlot?.removeEventListener("slotchange", this.stylepatchDescriptionSlotted);
+	}
+	stylepatchDescriptionSlotted() {
+		this.$patchDescriptionSlotted && (this.$patchDescriptionSlotted.localName === "px-p" && this.$patchDescriptionSlotted.setAttribute("variant", "default"), (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") && (this.$patchDescriptionSlotted.setAttribute("font-size", "body-l"), this.$patchDescriptionSlotted.removeAttribute("font-weight"), this.$patchDescriptionSlotted.removeAttribute("color")), this.$patchDescriptionSlotted.localName === "px-price" && this.$patchDescriptionSlotted.setAttribute("size", "m"));
+	}
+	styleSubtitleSlot() {
+		this.$subtitleSlotted && this.$subtitleSlotted.setAttribute("variant", "subtitle");
+	}
+	createGridding(e) {
+		let t = [
+			{
+				prop: "hasGridding",
+				gridAttr: "grid-cols",
+				attr: "col-span"
+			},
+			{
+				prop: "hasGriddingMobile",
+				gridAttr: "grid-cols--mobile",
+				attr: "col-span--mobile"
+			},
+			{
+				prop: "hasGriddingTablet",
+				gridAttr: "grid-cols--tablet",
+				attr: "col-span--tablet"
+			},
+			{
+				prop: "hasGriddingLaptop",
+				gridAttr: "grid-cols--laptop",
+				attr: "col-span--laptop"
+			},
+			{
+				prop: "hasGriddingDesktop",
+				gridAttr: "grid-cols--desktop",
+				attr: "col-span--desktop"
+			}
+		], n = this.shadowRoot.querySelector("px-grid > px-container");
+		e === null ? t.forEach(({ gridAttr: e, attr: t }) => {
+			this.$grid.setAttribute(e, "1"), n?.setAttribute(t, "1");
+		}) : t.forEach(({ prop: e, gridAttr: t, attr: r }) => {
+			this[e] && (this.$grid.setAttribute(t, "2"), n?.setAttribute(r, "1"));
+		});
+	}
+	get $grid() {
+		return this.shadowRoot.querySelector("px-grid");
+	}
+	get $section() {
+		return this.shadowRoot.querySelector("px-section");
+	}
+	get $h1() {
+		return this.shadowRoot.querySelector("px-h1");
+	}
+	get $subtitleSlot() {
+		return this.shadowRoot?.querySelector("slot[name=\"subtitle\"]");
+	}
+	get $subtitleSlotted() {
+		return this.querySelector("[slot=\"subtitle\"]");
+	}
+	get $patchDescriptionSlot() {
+		return this.shadowRoot?.querySelector("slot[name=\"patch-description\"]");
+	}
+	get $patchDescriptionSlotted() {
+		return this.querySelector("[slot=\"patch-description\"]");
+	}
+	get $overlapSlot() {
+		return this.querySelector("[slot=\"overlap\"]");
+	}
+	get $children() {
+		return this.querySelectorAll("px-content-header > *");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		this._updateAttribute("background-color", e);
+	}
+	get gradient() {
+		return this.getAttribute("background-gradient");
+	}
+	set gradient(e) {
+		this._updateAttribute("background-gradient", e);
+	}
+	get backgroundImage() {
+		return this.getAttribute("background-image");
+	}
+	set backgroundImage(e) {
+		this._updateAttribute("background-image", e);
+	}
+	get backgroundImageMobile() {
+		return this.getAttribute("background-image--mobile");
+	}
+	set backgroundImageMobile(e) {
+		this._updateAttribute("background-image--mobile", e);
+	}
+	get backgroundImageTablet() {
+		return this.getAttribute("background-image--tablet");
+	}
+	set backgroundImageTablet(e) {
+		this._updateAttribute("background-image--tablet", e);
+	}
+	get backgroundImageLaptop() {
+		return this.getAttribute("background-image--laptop");
+	}
+	set backgroundImageLaptop(e) {
+		this._updateAttribute("background-image--laptop", e);
+	}
+	get backgroundSize() {
+		return this.getAttribute("background-size");
+	}
+	set backgroundSize(e) {
+		this._updateAttribute("background-size", e);
+	}
+	get backgroundPosition() {
+		return this.getAttribute("background-position");
+	}
+	set backgroundPosition(e) {
+		this._updateAttribute("background-position", e);
+	}
+	get gradientContrastHelper() {
+		return this.hasAttribute("contrast-helper-gradient");
+	}
+	set gradientContrastHelper(e) {
+		this._updateBooleanAttribute("contrast-helper-gradient", e);
+	}
+	get overlayContrastHelper() {
+		return this.hasAttribute("contrast-helper-overlay");
+	}
+	set overlayContrastHelper(e) {
+		this._updateBooleanAttribute("contrast-helper-overlay", e);
+	}
+	get hasGridding() {
+		return this.hasAttribute("has-gridding");
+	}
+	set hasGridding(e) {
+		this._updateBooleanAttribute("has-gridding", e);
+	}
+	get hasGriddingMobile() {
+		return this.hasAttribute("has-gridding--mobile");
+	}
+	set hasGriddingMobile(e) {
+		this._updateBooleanAttribute("has-gridding--mobile", e);
+	}
+	get hasGriddingTablet() {
+		return this.hasAttribute("has-gridding--tablet");
+	}
+	set hasGriddingTablet(e) {
+		this._updateBooleanAttribute("has-gridding--tablet", e);
+	}
+	get hasGriddingLaptop() {
+		return this.hasAttribute("has-gridding--laptop");
+	}
+	set hasGriddingLaptop(e) {
+		this._updateBooleanAttribute("has-gridding--laptop", e);
+	}
+	get hasGriddingDesktop() {
+		return this.hasAttribute("has-gridding--desktop");
+	}
+	set hasGriddingDesktop(e) {
+		this._updateBooleanAttribute("has-gridding--desktop", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		this._updateBooleanAttribute("inverted", e);
+	}
+	get minHeight() {
+		return this.hasAttribute("min-height");
+	}
+	set minHeight(e) {
+		this._updateBooleanAttribute("min-height", e);
+	}
 };
+customElements.get("px-content-header") || customElements.define("px-content-header", $);
+//#endregion
+export { $ as ContentHeader };