@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/dist/cjs/hy-anchor-link-list.cjs.entry.js

@@ -2,52 +2,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-32830401.js');
-const globalScript = require('./globalScript-9994473d.js');
+const index = require('./index-579f8aa3.js');
+const globalScript = require('./globalScript-eba122a0.js');
 
 const hyAnchorLinkListCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-anchor-link-list{border:1px solid var(--brand-main);display:block;width:100%}@media (min-width: 30rem){.hy-anchor-link-list{margin-bottom:1.75rem}}@media (min-width: 48rem){.hy-anchor-link-list{margin-bottom:1.75rem}}@media (min-width: 60rem){.hy-anchor-link-list{margin-bottom:2rem}}@media (min-width: 1601px){.hy-anchor-link-list{margin-bottom:2.5rem}}.hy-anchor-link-list.is-open{border:1px solid var(--grayscale-dark)}.hy-anchor-link-list__button{border:none;background:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px 20px;width:100%}@media (min-width: 48rem){.hy-anchor-link-list__button{padding:18px 20px}}.hy-anchor-link-list__button:hover{cursor:pointer}.hy-anchor-link-list__button.is-open .label-close-icon svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-anchor-link-list__button--title{font-size:1.0625rem;line-height:20px;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);font-family:var(--main-font-family);letter-spacing:-0.32px}.hy-anchor-link-list__button--title svg{margin-right:12px}.hy-anchor-link-list__button--label{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);letter-spacing:-0.3px;text-align:right}.hy-anchor-link-list__button--label svg{margin-left:7px}.hy-anchor-link-list__container{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:18px 0;margin:0 20px}.hy-anchor-link-list__container.is-open{display:-webkit-box;display:-ms-flexbox;display:flex;border-top:1px solid var(--grayscale-dark)}.hy-anchor-link-list__item{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);font-size:16px;font-weight:600;letter-spacing:-0.5px;line-height:20px;margin-bottom:16px;text-decoration:none}.hy-anchor-link-list__item:hover{cursor:pointer;text-decoration:underline}.hy-anchor-link-list__item svg{margin-right:12px}";
+const HyAnchorLinkListStyle0 = hyAnchorLinkListCss;
 
 const HyAnchorLinkList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listTitle = undefined;
-    this.openLabel = undefined;
-    this.closeLabel = undefined;
-    this.anchorItems = undefined;
-    this.isOpen = false;
-  }
-  async componentWillLoad() {
-    this._anchorItems = await globalScript.jsonParserWorker(this.anchorItems);
-  }
-  handleLinkClick(e) {
-    const targetId = e.target.getAttribute("href");
-    if (targetId) {
-      const targetElement = document.getElementById(targetId.substring(1));
-      const targetRect = targetElement.getBoundingClientRect();
-      window.scrollTo({ top: window.scrollY + targetRect.top - 100, behavior: "smooth" });
-      targetElement.setAttribute("tabIndex", "-1");
-      targetElement.focus({ preventScroll: true });
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.listTitle = undefined;
+        this.openLabel = undefined;
+        this.closeLabel = undefined;
+        this.anchorItems = undefined;
+        this.isOpen = false;
+    }
+    async componentWillLoad() {
+        this._anchorItems = await globalScript.jsonParserWorker(this.anchorItems);
+    }
+    handleLinkClick(e) {
+        const targetId = e.target.getAttribute("href");
+        if (targetId) {
+            const targetElement = document.getElementById(targetId.substring(1));
+            const targetRect = targetElement.getBoundingClientRect();
+            window.scrollTo({ top: window.scrollY + targetRect.top - 100, behavior: "smooth" });
+            targetElement.setAttribute("tabIndex", "-1");
+            targetElement.focus({ preventScroll: true });
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    render() {
+        const classAttributes = ["hy-anchor-link-list"].join(" ");
+        const buttonClasses = {
+            "hy-anchor-link-list__button": true,
+            "is-open": this.isOpen,
+        };
+        const containerClasses = {
+            "hy-anchor-link-list__container": true,
+            "is-open": this.isOpen,
+        };
+        const items = this._anchorItems;
+        return (index.h(index.Host, { key: 'aad21d401cf16a915b4374d5de06dd7a180b2a39', class: classAttributes }, index.h("button", { key: '88ef690998135ace4fd534343896fce4916d89dc', "aria-label": this.listTitle, onClick: () => (this.isOpen = !this.isOpen), class: buttonClasses }, index.h("span", { key: 'd0d3b698289c816aa13d94e10035f1e08484cfc8', class: "hy-anchor-link-list__button--title" }, index.h("hy-icon", { key: 'a2542d8c1f451721714023c063d8dd54e7728e19', icon: "hy-icon-bullet-list", size: 18, fill: "var(--brand-main)" }), this.listTitle), index.h("span", { key: '3a7c8104cc425629de58e8c5764f37a277a923a6', class: "hy-anchor-link-list__button--label" }, this.isOpen ? this.closeLabel : this.openLabel, index.h("hy-icon", { key: 'b5d8daa236bff7fbfc00014b92e90d17b6e3c35f', class: "label-close-icon", icon: "hy-icon-caret-down", size: 16, fill: "var(--brand-main)" }))), index.h("div", { key: 'cba23d77f494595e59739f537f12d3ee56cb973a', "aria-hidden": this.isOpen ? "false" : "true", class: containerClasses }, items &&
+            items.map((item) => (index.h("a", { class: "hy-anchor-link-list__item", href: item.url, onClick: this.handleLinkClick }, index.h("hy-icon", { icon: "hy-icon-arrow-down", size: 12, fill: "var(--brand-main)" }), item.title))))));
     }
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  render() {
-    const classAttributes = ["hy-anchor-link-list"].join(" ");
-    const buttonClasses = {
-      "hy-anchor-link-list__button": true,
-      "is-open": this.isOpen,
-    };
-    const containerClasses = {
-      "hy-anchor-link-list__container": true,
-      "is-open": this.isOpen,
-    };
-    const items = this._anchorItems;
-    return (index.h(index.Host, { class: classAttributes }, index.h("button", { "aria-label": this.listTitle, onClick: () => (this.isOpen = !this.isOpen), class: buttonClasses }, index.h("span", { class: "hy-anchor-link-list__button--title" }, index.h("hy-icon", { icon: "hy-icon-bullet-list", size: 18, fill: "var(--brand-main)" }), this.listTitle), index.h("span", { class: "hy-anchor-link-list__button--label" }, this.isOpen ? this.closeLabel : this.openLabel, index.h("hy-icon", { class: "label-close-icon", icon: "hy-icon-caret-down", size: 16, fill: "var(--brand-main)" }))), index.h("div", { "aria-hidden": this.isOpen ? "false" : "true", class: containerClasses }, items &&
-      items.map((item) => (index.h("a", { class: "hy-anchor-link-list__item", href: item.url, onClick: this.handleLinkClick }, index.h("hy-icon", { icon: "hy-icon-arrow-down", size: 12, fill: "var(--brand-main)" }), item.title))))));
-  }
 };
-HyAnchorLinkList.style = hyAnchorLinkListCss;
+HyAnchorLinkList.style = HyAnchorLinkListStyle0;
 
 exports.hy_anchor_link_list = HyAnchorLinkList;
-
-//# sourceMappingURL=hy-anchor-link-list.cjs.entry.js.map

package/dist/cjs/hy-badge.cjs.entry.js

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-32830401.js');
+const index = require('./index-579f8aa3.js');
 
 const hyBadgeCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}span.hy-badge{border-radius:15px;padding:0.25rem 1rem;text-align:center;color:black;font-weight:bold;font-family:var(--main-font-family);font-size:0.6rem}span.hy-badge.primary{background-color:var(--brand-main-light);color:white}span.hy-badge.warn{background-color:var(--additional-red-dark);color:white}span.hy-badge.success{background-color:var(--additional-green-dark);color:white}span.hy-badge.disabled{background-color:var(--grayscale-medium-dark);color:black}";
+const HyBadgeStyle0 = hyBadgeCss;
 
 const HyBadge = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.variant = "primary";
-  }
-  render() {
-    const classAttributes = ["hy-badge", this.variant];
-    return (index.h(index.Host, null, index.h("span", { class: classAttributes.join(" ") }, index.h("slot", null))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = "primary";
+    }
+    render() {
+        const classAttributes = ["hy-badge", this.variant];
+        return (index.h(index.Host, { key: '0b851e3b67f0e669215b8f960f0780e27ab05017' }, index.h("span", { key: '8dcb9d0194b3362aa190f71c3b4a6d8bffdcb150', class: classAttributes.join(" ") }, index.h("slot", { key: 'a07ca166656a6f1cf6baa423dce1c2c24dc151fd' }))));
+    }
 };
-HyBadge.style = hyBadgeCss;
+HyBadge.style = HyBadgeStyle0;
 
 exports.hy_badge = HyBadge;
-
-//# sourceMappingURL=hy-badge.cjs.entry.js.map

package/dist/cjs/hy-banner.cjs.entry.js

@@ -2,50 +2,49 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-32830401.js');
-const utils = require('./utils-56f3464c.js');
+const index = require('./index-579f8aa3.js');
+const utils = require('./utils-8e26d681.js');
 
 const hyBannerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-banner{background-color:var(--brand-main-light);padding:28px 0 24px 0}@media (min-width: 30rem){.hy-banner{padding:40px 0 32px 0}}@media (min-width: 60rem){.hy-banner{padding:48px 0 40px 0;margin-left:8px;margin-right:8px}}@media (min-width: 75.0625rem){.hy-banner{padding-left:20px;padding-right:20px;margin-left:0;margin-right:0}}@media (min-width: 1601px){.hy-banner{padding:64px 32px 48px 32px}}@media (min-width: 1664px){.hy-banner{margin-left:0;margin-right:0}}@media (min-width: 75.0625rem){.hy-banner__large{padding:64px 30px 48px 30px;margin-left:-20px;margin-right:-20px}}@media (min-width: 1344px){.hy-banner__large{margin-left:0;margin-right:0}}@media (min-width: 60rem){.hy-banner__info-container{margin-left:-8px;margin-right:-8px}}@media (min-width: 1601px){.hy-banner__info-container{margin-left:0;margin-right:0}}.hy-banner__info-container__title{font-size:1.5rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.8px;margin-bottom:16px;text-transform:uppercase}@media (min-width: 30rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 1601px){.hy-banner__info-container__title{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title__large{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__title__large{font-size:2.5rem;line-height:40px;letter-spacing:-1.33px;margin-bottom:32px}}.hy-banner__info-container__description{color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:500;font-size:14px;letter-spacing:-0.7px;line-height:20px;margin-bottom:24px}@media (min-width: 30rem){.hy-banner__info-container__description{font-size:1rem;line-height:24px;letter-spacing:-0.08px;margin-bottom:28px;max-width:92%}}@media (min-width: 60rem){.hy-banner__info-container__description{margin-bottom:32px}}@media (min-width: 1601px){.hy-banner__info-container__description{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__description__large{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__description__large{margin-bottom:44px}}";
+const HyBannerStyle0 = hyBannerCss;
 
 const HyBanner = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.textTitle = undefined;
-    this.textDescription = null;
-    this.url = undefined;
-    this.scLabel = undefined;
-    this.urlTitle = undefined;
-    this.headerstyle = "common";
-    this.isExternal = false;
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.textTitle = undefined;
+        this.textDescription = null;
+        this.url = undefined;
+        this.scLabel = undefined;
+        this.urlTitle = undefined;
+        this.headerstyle = "common";
+        this.isExternal = false;
     }
-  }
-  render() {
-    const hyBannerClass = ["hy-banner", `hy-banner__${this.headerstyle}`, this.headerstyle].join(" ");
-    const hyBannerWrapperClass = ["hy-banner__info-container"].join(" ");
-    const hyBannerTitle = [
-      "hy-banner__info-container__title",
-      `hy-banner__info-container__title__${this.headerstyle}`,
-      this.headerstyle,
-    ].join(" ");
-    const hyBannerDescription = [
-      "hy-banner__info-container__description",
-      `hy-banner__info-container__description__${this.headerstyle}`,
-      this.headerstyle,
-    ].join(" ");
-    const variant = utils.CtaLinkButtonVariants.onBlueBkgd;
-    return (index.h(index.Host, null, index.h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }), index.h("div", { class: hyBannerClass }, index.h("hy-main-content-wrapper", null, index.h("div", { class: hyBannerWrapperClass }, index.h("div", { class: hyBannerTitle }, this.textTitle), index.h("div", { class: hyBannerDescription }, this.textDescription), this.url && (index.h("div", { class: "hy-banner__info-container__link" }, index.h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant })))))), index.h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
-  }
-  get el() { return index.getElement(this); }
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+    }
+    render() {
+        const hyBannerClass = ["hy-banner", `hy-banner__${this.headerstyle}`, this.headerstyle].join(" ");
+        const hyBannerWrapperClass = ["hy-banner__info-container"].join(" ");
+        const hyBannerTitle = [
+            "hy-banner__info-container__title",
+            `hy-banner__info-container__title__${this.headerstyle}`,
+            this.headerstyle,
+        ].join(" ");
+        const hyBannerDescription = [
+            "hy-banner__info-container__description",
+            `hy-banner__info-container__description__${this.headerstyle}`,
+            this.headerstyle,
+        ].join(" ");
+        const variant = utils.CtaLinkButtonVariants.onBlueBkgd;
+        return (index.h(index.Host, { key: '22fcaf75d6302de7329b2beaf2c4e22c2d0a062a' }, index.h("hy-box", { key: 'f260ec692240c5c16c1073219415a58812398d58', pt: "1.25, 1.25, 1.5, 2.5" }), index.h("div", { key: '4d05549e3707ad10c0392e8c4f084e72cf89f912', class: hyBannerClass }, index.h("hy-main-content-wrapper", { key: '97e230319b1347e366da305bb2bcb05712d97bb0' }, index.h("div", { key: 'fe84cdca03c1f5b18520a211541420eeae022dbe', class: hyBannerWrapperClass }, index.h("div", { key: 'e7d2fb32a11cdf81434b780df5fbcf3c26b5b10d', class: hyBannerTitle }, this.textTitle), index.h("div", { key: '371185f891f14442ebf6673d7ee21c9bb07de4fb', class: hyBannerDescription }, this.textDescription), this.url && (index.h("div", { key: '7b35f08c05c164061a926664a7845dd8c7cd6df8', class: "hy-banner__info-container__link" }, index.h("hy-cta-button", { key: 'ad35634b4378b044ea006cf03f8f13857acd0036', "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant })))))), index.h("hy-box", { key: '4b4a5e67409a1b0a0000a0958f97031c82354e6a', mb: "1.75, 1.75, 2, 2.5" })));
+    }
+    get el() { return index.getElement(this); }
 };
-HyBanner.style = hyBannerCss;
+HyBanner.style = HyBannerStyle0;
 
 exports.hy_banner = HyBanner;
-
-//# sourceMappingURL=hy-banner.cjs.entry.js.map

package/dist/cjs/hy-box.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-32830401.js');
-const emotion_esm = require('./emotion.esm-aef96835.js');
+const index = require('./index-579f8aa3.js');
+const index_esm = require('./index.esm-2f7250e0.js');
 
 const hyBoxCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}";
+const HyBoxStyle0 = hyBoxCss;
 
 /*
 Example of using hy-box:
@@ -17,7 +18,7 @@ wide, 60rem to 75rem or 60rem to 100.0625rem (depending on hasSidebar) (mb[2])
 xlarge, > 100.0625: 2.5rem (mb[3])
 * */
 const toRemValue = (val) => {
-  return typeof val === "number" ? `${val}rem` : undefined;
+    return typeof val === "number" ? `${val}rem` : undefined;
 };
 const breakpoints = ["30rem", "60rem", "75.0625rem", "100.0625rem"];
 /*
@@ -29,8 +30,8 @@ mq[3] - xlarge, >1600px
 * */
 const mq = breakpoints.map((b) => `@media (min-width: ${b})`);
 const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, width, justify, align, direction }) => {
-  const last = width[width.length - 1];
-  return emotion_esm.css `
+    const last = width[width.length - 1];
+    return index_esm.css `
     padding-top: ${toRemValue(pt[0])};
     padding-right: ${toRemValue(pr[0])};
     padding-bottom: ${toRemValue(pb[0])};
@@ -103,67 +104,65 @@ const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, wid
 };
 const toNumArray = (value) => value === null || value === void 0 ? void 0 : value.split(",").map((v) => `${v.trim()}`).map((v) => parseFloat(v));
 const HyBox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.headerstyle = "common";
-    this.p = undefined;
-    this.pl = undefined;
-    this.pr = undefined;
-    this.pb = undefined;
-    this.pt = undefined;
-    this.m = undefined;
-    this.ml = undefined;
-    this.mr = undefined;
-    this.mb = undefined;
-    this.mt = undefined;
-    this.justify = "flex-start";
-    this.align = "baseline";
-    this.h = undefined;
-    this.bg = "transparent";
-    this.width = "100";
-    this.direction = "row";
-  }
-  componentWillLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.headerstyle = "common";
+        this.p = undefined;
+        this.pl = undefined;
+        this.pr = undefined;
+        this.pb = undefined;
+        this.pt = undefined;
+        this.m = undefined;
+        this.ml = undefined;
+        this.mr = undefined;
+        this.mb = undefined;
+        this.mt = undefined;
+        this.justify = "flex-start";
+        this.align = "baseline";
+        this.h = undefined;
+        this.bg = "transparent";
+        this.width = "100";
+        this.direction = "row";
     }
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    const pt = (_b = (_a = toNumArray(this.pt)) !== null && _a !== void 0 ? _a : toNumArray(this.p)) !== null && _b !== void 0 ? _b : [0];
-    const pb = (_d = (_c = toNumArray(this.pb)) !== null && _c !== void 0 ? _c : toNumArray(this.p)) !== null && _d !== void 0 ? _d : [0];
-    const pr = (_f = (_e = toNumArray(this.pr)) !== null && _e !== void 0 ? _e : toNumArray(this.p)) !== null && _f !== void 0 ? _f : [0];
-    const pl = (_h = (_g = toNumArray(this.pl)) !== null && _g !== void 0 ? _g : toNumArray(this.p)) !== null && _h !== void 0 ? _h : [0];
-    const mt = (_k = (_j = toNumArray(this.mt)) !== null && _j !== void 0 ? _j : toNumArray(this.m)) !== null && _k !== void 0 ? _k : [0];
-    const mb = (_m = (_l = toNumArray(this.mb)) !== null && _l !== void 0 ? _l : toNumArray(this.m)) !== null && _m !== void 0 ? _m : [0];
-    const mr = (_p = (_o = toNumArray(this.mr)) !== null && _o !== void 0 ? _o : toNumArray(this.m)) !== null && _p !== void 0 ? _p : [0];
-    const ml = (_r = (_q = toNumArray(this.ml)) !== null && _q !== void 0 ? _q : toNumArray(this.m)) !== null && _r !== void 0 ? _r : [0];
-    const hasSidebar = this.headerstyle == "common";
-    return (index.h(index.Host, { class: createCssClass({
-        hasSidebar,
-        pt,
-        pl,
-        pr,
-        pb,
-        mt,
-        ml,
-        mr,
-        mb,
-        h: this.h,
-        bg: this.bg,
-        width: this.width.split(",").map((v) => `${v.trim()}%`),
-        justify: this.justify,
-        align: this.align,
-        direction: this.direction,
-      }) }, index.h("slot", null)));
-  }
-  get el() { return index.getElement(this); }
+    componentWillLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const pt = (_b = (_a = toNumArray(this.pt)) !== null && _a !== void 0 ? _a : toNumArray(this.p)) !== null && _b !== void 0 ? _b : [0];
+        const pb = (_d = (_c = toNumArray(this.pb)) !== null && _c !== void 0 ? _c : toNumArray(this.p)) !== null && _d !== void 0 ? _d : [0];
+        const pr = (_f = (_e = toNumArray(this.pr)) !== null && _e !== void 0 ? _e : toNumArray(this.p)) !== null && _f !== void 0 ? _f : [0];
+        const pl = (_h = (_g = toNumArray(this.pl)) !== null && _g !== void 0 ? _g : toNumArray(this.p)) !== null && _h !== void 0 ? _h : [0];
+        const mt = (_k = (_j = toNumArray(this.mt)) !== null && _j !== void 0 ? _j : toNumArray(this.m)) !== null && _k !== void 0 ? _k : [0];
+        const mb = (_m = (_l = toNumArray(this.mb)) !== null && _l !== void 0 ? _l : toNumArray(this.m)) !== null && _m !== void 0 ? _m : [0];
+        const mr = (_p = (_o = toNumArray(this.mr)) !== null && _o !== void 0 ? _o : toNumArray(this.m)) !== null && _p !== void 0 ? _p : [0];
+        const ml = (_r = (_q = toNumArray(this.ml)) !== null && _q !== void 0 ? _q : toNumArray(this.m)) !== null && _r !== void 0 ? _r : [0];
+        const hasSidebar = this.headerstyle == "common";
+        return (index.h(index.Host, { key: 'b3bd1885d34b3f37b0a26e2802f1567f43673789', class: createCssClass({
+                hasSidebar,
+                pt,
+                pl,
+                pr,
+                pb,
+                mt,
+                ml,
+                mr,
+                mb,
+                h: this.h,
+                bg: this.bg,
+                width: this.width.split(",").map((v) => `${v.trim()}%`),
+                justify: this.justify,
+                align: this.align,
+                direction: this.direction,
+            }) }, index.h("slot", { key: '7613027160dbdd5abfd405877c5ee4a75ac3ba61' })));
+    }
+    get el() { return index.getElement(this); }
 };
-HyBox.style = hyBoxCss;
+HyBox.style = HyBoxStyle0;
 
 exports.hy_box = HyBox;
-
-//# sourceMappingURL=hy-box.cjs.entry.js.map