@proximus/lavender-layout 1.1.0-alpha.2 → 1.1.0-alpha.20

package/dist/index.es.js

@@ -0,0 +1,598 @@
+import { WithExtraAttributes as c, AttributeBreakpointHandlerDelegate as b, gapValues as u, checkName as h, backgroundColorValues as x } from "@proximus/lavender-common";
+const f = ":host{display:block}.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 only screen and (min-width: 48em) and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.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))}}", d = new CSSStyleSheet();
+d.replaceSync(f);
+const m = [
+  "",
+  "default",
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+], v = [
+  "",
+  "default",
+  "stretch",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline"
+], k = [
+  "",
+  "default",
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], w = ["", "default", "nowrap", "wrap", "wrap-reverse"], y = ["", "visible", "hidden", "scroll", "auto"];
+class l extends c {
+  constructor() {
+    super(d), this.overflowXAttributeDelegate = new b(
+      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, u);
+        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, v);
+        break;
+      case "wrap":
+      case "wrap--mobile":
+      case "wrap--tablet":
+      case "wrap--laptop":
+      case "wrap--desktop":
+        this.updateFlexProperties(t, i, e, w);
+        break;
+      case "direction":
+      case "direction--mobile":
+      case "direction--tablet":
+      case "direction--laptop":
+      case "direction--desktop":
+        this.updateFlexProperties(t, i, e, m);
+        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, y);
+        break;
+      default:
+        super.attributeChangedCallback(t, i, e);
+        break;
+    }
+  }
+  updateOverflowX(t, i, e, o) {
+    if (!h(o, e)) {
+      console.error(`${e} is not an allowed ${t} value`);
+      return;
+    }
+    this.overflowXAttributeDelegate.attributeChangedCallback(
+      t,
+      i,
+      e
+    );
+  }
+  updateFlexProperties(t, i, e, o) {
+    this.checkName(o, e) || console.error(`${e} is not a valid value for ${o}`);
+    const p = t.indexOf("--") > -1, a = p ? t.split("--")[0] : t, r = [];
+    if (!p)
+      this.getAttribute(a + "--mobile") || r.push("mobile"), this.getAttribute(a + "--tablet") || r.push("tablet"), this.getAttribute(a + "--laptop") || r.push("laptop"), this.getAttribute(a + "--desktop") || r.push("desktop"), r.forEach((s) => {
+        this.updateStyle(a, s, i, o), this.updateStyle(a, s, e, o);
+      });
+    else {
+      const s = t.split("--")[1];
+      this.updateStyle(a, s, i, o), this.updateStyle(a, s, 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.$el.style.setProperty(
+      `--flex-${t}--${i}-value`,
+      e
+    ));
+  }
+  checkName(t, i) {
+    return t.includes(i);
+  }
+  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 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", l);
+class A extends l {
+  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", A);
+class C extends l {
+  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", C);
+class $ extends HTMLElement {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["grow"];
+  }
+  attributeChangedCallback(t, i, e) {
+    t === "grow" && (this.style.flexGrow = e);
+  }
+  connectedCallback() {
+    this.style.flexGrow = this.getAttribute("grow") || "1";
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(t) {
+    this.setAttribute("grow", t);
+  }
+}
+customElements.define("px-spacer", $);
+const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", g = new CSSStyleSheet();
+g.replaceSync(j);
+class S extends c {
+  constructor() {
+    super(g), this.template = (t) => `
+    <px-container border-radius="none" padding="none">
+      <px-vstack>
+        <px-container id="header-container" border-radius="none">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="header-vstack-container"
+              gap="1rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="header-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="image-container"
+          border-radius="none"
+          padding="none"
+          padding-top="xl"
+          id="image-box"
+          background-size="cover"
+          background-position="top center"
+          padding-bottom="xl"
+          border-radius="none"
+          bgimg="${this.backgroundImage}"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack grow="${this.grow}" basis="${this.basis}">
+              <slot name="image-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        ${t ? ` <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="1rem">
+            <slot name="image-sticky-container"></slot>
+          </px-vstack>
+        </px-container>
+        <px-spacer></px-spacer>
+      </px-hstack>` : ""}
+        <px-container
+          id="body-container"
+          id="main"
+          background-color="${this.backgroundColor}"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="body-vstack-container"
+              gap="3rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="body-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="contact-container"
+          border-radius="none"
+          id="main"
+          background-color="surface-default"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="contact-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="footer-container"
+          background-color="none"
+          border-radius="none"
+          style="background-color: rgb(108, 66, 156)"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="footer-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+      </px-vstack>
+    </px-container>
+  `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "background-image",
+      "gap",
+      "background-color",
+      "padding-vertical",
+      "padding-horizontal"
+    ];
+  }
+  get $wideImage() {
+    return this.shadowRoot.querySelector("#image-box");
+  }
+  get $bodyVStackContainer() {
+    return this.shadowRoot.querySelector("#header-vstack-container");
+  }
+  get $bodyContainer() {
+    return this.shadowRoot.querySelector("#body-container");
+  }
+  get $contactContainer() {
+    return this.shadowRoot.querySelector("#contact-container");
+  }
+  get $footerContainer() {
+    return this.shadowRoot.querySelector("#footer-container");
+  }
+  get $headerContainer() {
+    return this.shadowRoot.querySelector("#header-container");
+  }
+  get $imageContainer() {
+    return this.shadowRoot.querySelector("#image-container");
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  get $imageStickySlot() {
+    return this.querySelector('*[slot="image-sticky-container"]');
+  }
+  get $main() {
+    return this.shadowRoot.querySelector("#main");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color") || "none";
+  }
+  get paddingVertical() {
+    return this.getAttribute("padding-vertical");
+  }
+  get paddingHorizontal() {
+    return this.getAttribute("padding-horizontal");
+  }
+  set paddingVertical(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",
+            x.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", S);
+export {
+  C as HStack,
+  S as Page,
+  $ as Spacer,
+  l as Stack,
+  A as VStack,
+  v as alignItemsValues,
+  m as directionValues,
+  k as justifyContentValues,
+  y as overflowValues,
+  w as wrapValues
+};

package/package.json

@@ -1,40 +1,20 @@
 {
   "name": "@proximus/lavender-layout",
-  "version": "1.1.0-alpha.2",
+  "version": "1.1.0-alpha.20",
   "description": "",
-  "main": "dist/index.js",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.js"
-    },
-    "./src/*.css": {
-      "development": "src/*.css"
-    }
-  },
+  "main": "dist/index.es.js",
   "files": [
-    "dist/*"
+    "dist"
   ],
   "type": "module",
   "scripts": {
-    "build": "rm -rf dist;tsc; vite build",
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc && NODE_ENV=development vite build && npm run transform-package-json",
     "test": "vitest run --coverage"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "08fb9ddab89cd17f18333bee8be670cf03f369d5",
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "CHANGELOG.md",
-          "package.json",
-          "dist/*.js",
-          "dist/css/**/*.css"
-        ]
-      }
-    }
-  }
+  "gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
 }

package/dist/index.js

@@ -1,607 +0,0 @@
-import { WithFlexAttributes as o, bgColorValues as p } from "@proximus/lavender-common";
-const c = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction-mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content-mobile-value);align-items:var(--flex-align-items-mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction-tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content-tablet-value);align-items:var(--flex-align-items-tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction-laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content-laptop-value);align-items:var(--flex-align-items-laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction-desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content-desktop-value);align-items:var(--flex-align-items-desktop-value)}}", s = new CSSStyleSheet();
-s.replaceSync(c);
-const g = [
-  // Vertical
-  "between-section-vertical",
-  "between-options-vertical",
-  "under-text-vertical",
-  "display-to-subtitle-vertical",
-  "under-display-vertical",
-  "component-default-vertical",
-  "component-expanded-vertical",
-  "between-section-vertical-mobile",
-  "between-options-vertical-mobile",
-  "under-text-vertical-mobile",
-  "display-to-subtitle-vertical-mobile",
-  "under-display-vertical-mobile",
-  "component-default-vertical-mobile",
-  "component-expanded-vertical-mobile",
-  // Horizontal
-  "between-icon-horizontal",
-  "text-to-icon-compact-horizontal",
-  "text-to-icon-horizontal",
-  "component-compact-horizontal",
-  "component-default-horizontal",
-  "component-expanded-horizontal",
-  "between-icon-horizontal-mobile",
-  "text-to-icon-compact-horizontal-mobile",
-  "text-to-icon-horizontal-mobile",
-  "component-compact-horizontal-mobile",
-  "component-default-horizontal-mobile"
-];
-class r extends o {
-  constructor() {
-    super(s), this.template = `<div class="flex-container">
-      <slot></slot>
-  </div>`, this.shadowRoot.innerHTML = this.template;
-  }
-  connectedCallback() {
-    this.hasAttribute("direction") || (this.direction = "row");
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "direction",
-      "direction-mobile",
-      "direction-tablet",
-      "direction-laptop",
-      "direction-desktop",
-      "gap",
-      "gap-mobile",
-      "gap-tablet",
-      "gap-laptop",
-      "gap-desktop",
-      "justify-content",
-      "justify-content-mobile",
-      "justify-content-tablet",
-      "justify-content-laptop",
-      "justify-content-desktop",
-      "align-items",
-      "align-items-mobile",
-      "align-items-tablet",
-      "align-items-laptop",
-      "align-items-desktop",
-      "wrap",
-      "wrap-mobile",
-      "wrap-tablet",
-      "wrap-laptop",
-      "wrap-desktop"
-    ];
-  }
-  attributeChangedCallback(t, i, e) {
-    if (t.indexOf("direction") > -1 && !["column", "row"].includes(e))
-      throw new Error("Invalid direction");
-    switch (t) {
-      case "gap":
-        this.$el.style.getPropertyValue("--flex-gap-mobile-value") || this.$el.style.setProperty(
-          "--flex-gap-mobile-value",
-          this.getGapCSSVariable(e)
-        ), this.$el.style.getPropertyValue("--flex-gap-tablet-value") || this.$el.style.setProperty(
-          "--flex-gap-tablet-value",
-          this.getGapCSSVariable(e)
-        ), this.$el.style.getPropertyValue("--flex-gap-laptop-value") || this.$el.style.setProperty(
-          "--flex-gap-laptop-value",
-          this.getGapCSSVariable(e)
-        ), this.$el.style.getPropertyValue("--flex-gap-desktop-value") || this.$el.style.setProperty(
-          "--flex-gap-desktop-value",
-          this.getGapCSSVariable(e)
-        );
-        break;
-      case "gap-mobile":
-      case "gap-tablet":
-      case "gap-laptop":
-      case "gap-desktop":
-        this.$el.style.setProperty(
-          `--flex-${t}-value`,
-          this.getGapCSSVariable(e)
-        );
-        break;
-      case "direction":
-        this.$el.style.getPropertyValue("--flex-direction-mobile-value") || this.$el.style.setProperty("--flex-direction-mobile-value", e), this.$el.style.getPropertyValue("--flex-direction-tablet-value") || this.$el.style.setProperty("--flex-direction-tablet-value", e), this.$el.style.getPropertyValue("--flex-direction-laptop-value") || this.$el.style.setProperty("--flex-direction-laptop-value", e), this.$el.style.getPropertyValue("--flex-direction-desktop-value") || this.$el.style.setProperty(
-          "--flex-direction-desktop-value",
-          e
-        );
-        break;
-      case "justify-content":
-        this.$el.style.getPropertyValue(
-          "--flex-justify-content-mobile-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content-mobile-value",
-          e
-        ), this.$el.style.getPropertyValue(
-          "--flex-justify-content-tablet-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content-tablet-value",
-          e
-        ), this.$el.style.getPropertyValue(
-          "--flex-justify-content-laptop-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content-laptop-value",
-          e
-        ), this.$el.style.getPropertyValue(
-          "--flex-justify-content-desktop-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content-desktop-value",
-          e
-        );
-        break;
-      case "align-items":
-        this.$el.style.getPropertyValue("--flex-align-items-mobile-value") || this.$el.style.setProperty(
-          "--flex-align-items-mobile-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-align-items-tablet-value") || this.$el.style.setProperty(
-          "--flex-align-items-tablet-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-align-items-laptop-value") || this.$el.style.setProperty(
-          "--flex-align-items-laptop-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-align-items-desktop-value") || this.$el.style.setProperty(
-          "--flex-align-items-desktop-value",
-          e
-        );
-        break;
-      case "wrap":
-        this.$el.style.getPropertyValue("--flex-wrap-mobile-value") || this.$el.style.setProperty("--flex-wrap-mobile-value", e), this.$el.style.getPropertyValue("--flex-wrap-tablet-value") || this.$el.style.setProperty("--flex-wrap-tablet-value", e), this.$el.style.getPropertyValue("--flex-wrap-laptop-value") || this.$el.style.setProperty("--flex-wrap-laptop-value", e), this.$el.style.getPropertyValue("--flex-wrap-desktop-value") || this.$el.style.setProperty("--flex-wrap-desktop-value", e);
-        break;
-      case "direction-mobile":
-      case "direction-tablet":
-      case "direction-laptop":
-      case "direction-desktop":
-      case "justify-content-mobile":
-      case "justify-content-tablet":
-      case "justify-content-laptop":
-      case "justify-content-desktop":
-      case "align-items-mobile":
-      case "align-items-tablet":
-      case "align-items-laptop":
-      case "align-items-desktop":
-      case "wrap-mobile":
-      case "wrap-tablet":
-      case "wrap-laptop":
-      case "wrap-desktop":
-        this.$el.style.setProperty(`--flex-${t}-value`, e);
-        break;
-      default:
-        super.attributeChangedCallback(t, i, e);
-        break;
-    }
-  }
-  getGapCSSVariable(t) {
-    return g.includes(t) ? `var(--px-spacing-${t})` : t;
-  }
-  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 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 $el() {
-    return this.shadowRoot.querySelector(".flex-container");
-  }
-}
-customElements.get("px-stack") || customElements.define("px-stack", r);
-class d extends r {
-  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", d);
-class b extends r {
-  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", b);
-class u extends HTMLElement {
-  constructor() {
-    super();
-  }
-  static get observedAttributes() {
-    return ["grow"];
-  }
-  attributeChangedCallback(t, i, e) {
-    t === "grow" && (this.style.flexGrow = e);
-  }
-  connectedCallback() {
-    this.style.flexGrow = this.getAttribute("grow") || "1";
-  }
-  get grow() {
-    return this.getAttribute("grow");
-  }
-  set grow(t) {
-    this.setAttribute("grow", t);
-  }
-}
-customElements.define("px-spacer", u);
-const h = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}", n = new CSSStyleSheet();
-n.replaceSync(h);
-class m extends o {
-  constructor() {
-    super(n), this.template = `
-  <section>
-    <slot name="heading"></slot>
-    <px-stack direction="column" gap="1rem">
-      <slot></slot>
-    </px-stack>
-  </section>`, this.shadowRoot.innerHTML = this.template;
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "gap"];
-  }
-  attributeChangedCallback(t, i, e) {
-    if (t === "gap" && i !== e) {
-      this.$el.gap = e;
-      return;
-    }
-    super.attributeChangedCallback(t, i, e);
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  set gap(t) {
-    this.setAttribute("gap", t);
-  }
-  get $el() {
-    return this.shadowRoot.querySelector('px-stack[direction="column"]');
-  }
-}
-customElements.define("px-section-damien", m);
-const x = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", l = new CSSStyleSheet();
-l.replaceSync(x);
-class f extends o {
-  constructor() {
-    super(l), this.template = (t) => `
-    <px-container border-radius="none" padding="none">
-      <px-vstack>
-        <px-container id="header-container" border-radius="none">
-          <px-hstack>
-            <px-spacer></px-spacer>
-            <px-vstack
-              id="header-vstack-container"
-              gap="1rem"
-              grow="${this.grow}"
-              basis="${this.basis}"
-            >
-              <slot name="header-container"></slot>
-            </px-vstack>
-            <px-spacer></px-spacer>
-          </px-hstack>
-        </px-container>
-        <px-container
-          id="image-container"
-          border-radius="none"
-          padding="none"
-          padding-top="xl"
-          id="image-box"
-          background-size="cover"
-          background-position="top center"
-          padding-bottom="xl"
-          border-radius="none"
-          bgimg="${this.backgroundImage}"
-        >
-          <px-hstack>
-            <px-spacer></px-spacer>
-            <px-vstack grow="${this.grow}" basis="${this.basis}">
-              <slot name="image-container"></slot>
-            </px-vstack>
-            <px-spacer></px-spacer>
-          </px-hstack>
-        </px-container>
-        ${t ? ` <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="1rem">
-            <slot name="image-sticky-container"></slot>
-          </px-vstack>
-        </px-container>
-        <px-spacer></px-spacer>
-      </px-hstack>` : ""}
-        <px-container
-          id="body-container"
-          id="main"
-          background-color="${this.backgroundColor}"
-          padding="none"
-          padding-top="xl"
-          padding-bottom="xl"
-        >
-          <px-hstack>
-            <px-spacer></px-spacer>
-            <px-vstack
-              id="body-vstack-container"
-              gap="3rem"
-              grow="${this.grow}"
-              basis="${this.basis}"
-            >
-              <slot name="body-container"></slot>
-            </px-vstack>
-            <px-spacer></px-spacer>
-          </px-hstack>
-        </px-container>
-        <px-container
-          id="contact-container"
-          border-radius="none"
-          id="main"
-          background-color="weak"
-          padding="none"
-          padding-top="xl"
-          padding-bottom="xl"
-        >
-          <px-hstack>
-            <px-spacer></px-spacer>
-            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
-              <slot name="contact-container"></slot>
-            </px-vstack>
-            <px-spacer></px-spacer>
-          </px-hstack>
-        </px-container>
-        <px-container
-          id="footer-container"
-          background-color="none"
-          border-radius="none"
-          style="background-color: rgb(108, 66, 156)"
-          padding-top="xl"
-          padding-bottom="xl"
-        >
-          <px-hstack>
-            <px-spacer></px-spacer>
-            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
-              <slot name="footer-container"></slot>
-            </px-vstack>
-            <px-spacer></px-spacer>
-          </px-hstack>
-        </px-container>
-      </px-vstack>
-    </px-container>
-  `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "background-image",
-      "gap",
-      "background-color",
-      "padding-vertical",
-      "padding-horizontal"
-    ];
-  }
-  get $wideImage() {
-    return this.shadowRoot.querySelector("#image-box");
-  }
-  get $bodyVStackContainer() {
-    return this.shadowRoot.querySelector("#header-vstack-container");
-  }
-  get $bodyContainer() {
-    return this.shadowRoot.querySelector("#body-container");
-  }
-  get $contactContainer() {
-    return this.shadowRoot.querySelector("#contact-container");
-  }
-  get $footerContainer() {
-    return this.shadowRoot.querySelector("#footer-container");
-  }
-  get $headerContainer() {
-    return this.shadowRoot.querySelector("#header-container");
-  }
-  get $imageContainer() {
-    return this.shadowRoot.querySelector("#image-container");
-  }
-  get backgroundImage() {
-    return this.getAttribute("background-image");
-  }
-  get $imageStickySlot() {
-    return this.querySelector('*[slot="image-sticky-container"]');
-  }
-  get $main() {
-    return this.shadowRoot.querySelector("#main");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color") || "none";
-  }
-  get paddingVertical() {
-    return this.getAttribute("padding-vertical");
-  }
-  get paddingHorizontal() {
-    return this.getAttribute("padding-horizontal");
-  }
-  set paddingVertical(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-mobile",
-            e
-          );
-          break;
-        case "gap":
-          this.$bodyVStackContainer.setAttribute("gap", e);
-          break;
-        case "background-color":
-          this.$bodyContainer.setAttribute(
-            "background-color",
-            p.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", f);
-export {
-  b as HStack,
-  f as Page,
-  m as Section,
-  u as Spacer,
-  r as Stack,
-  d as VStack,
-  g as gapValues
-};