@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.74

package/dist/esm/hy-large-process-flow_2.entry.js

@@ -1,73 +1,73 @@
-import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
-import { f as HeadingVarians } from './utils-2819fd7e.js';
-import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+import { r as registerInstance, h, g as getElement } from './index-e2e165ed.js';
+import { f as HeadingVarians } from './utils-1e7f5184.js';
+import { j as jsonParserWorker } from './globalScript-0c14426d.js';
 
 const hyLargeProcessFlowCss = ":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-large-process-flow{max-width:100%;padding-top:8px;width:100%}@media (min-width: 30rem){.hy-large-process-flow{max-width:calc(87.5% + var(--gutter-narrow));padding-top:0}}@media (min-width: 60rem){.hy-large-process-flow{max-width:calc(66.6666666667% + var(--gutter-wide))}}@media (min-width: 75.0625rem){.hy-large-process-flow{max-width:calc(66.6666666667% + var(--gutter-extrawide))}}.hy-large-process-flow h3.hy-heading{font-size:20px}@media (min-width: 30rem){.hy-large-process-flow h3.hy-heading{font-size:32px}}.hy-large-process-flow__first-phase h3.hy-heading{margin-bottom:8px;padding:24px 0 !important}@media (min-width: 30rem){.hy-large-process-flow__first-phase h3.hy-heading{margin-bottom:24px;margin-top:16px}}.hy-large-process-flow__multi-phase-title{position:relative}.hy-large-process-flow__multi-phase-title:after{background-color:var(--grayscale-background-arrow);bottom:0;content:\" \";display:inline-block;height:100%;left:26.5px;position:absolute;width:8px;z-index:-1}@media (min-width: 30rem){.hy-large-process-flow__multi-phase-title:after{left:calc(12.5% + var(--gutter-narrow) + 26.5px)}}@media (min-width: 60rem){.hy-large-process-flow__multi-phase-title:after{left:calc(8.3333333333% + var(--gutter-wide) + 26.5px)}}@media (min-width: 75.0625rem){.hy-large-process-flow__multi-phase-title:after{left:calc(8.3333333333% + var(--gutter-extrawide) + 26.5px)}}.hy-large-process-flow__multi-phase-title h3.hy-heading{background-color:var(--grayscale-white);margin:1.5rem 0 1.5rem;padding:8px 0 !important}@media (min-width: 30rem){.hy-large-process-flow__multi-phase-title h3.hy-heading{margin:48px 0;padding:16px 0 !important}}";
+const HyLargeProcessFlowStyle0 = hyLargeProcessFlowCss;
 
 const HyLargeProcessFlow = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.headerstyle = "common";
-    this.dataItems = undefined;
-  }
-  async componentWillLoad() {
-    this._dataItems = await jsonParserWorker(this.dataItems);
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.headerstyle = "common";
+        this.dataItems = undefined;
     }
-  }
-  render() {
-    const classAttributes = ["hy-large-process-flow", `hy-large-process-flow__${this.headerstyle}`].join(" ");
-    return [
-      h("div", { class: classAttributes }, this._dataItems.map((x, index) => {
-        let phases = JSON.stringify(x.boxes);
-        const headingClasses = index !== 0 ? "hy-large-process-flow__multi-phase-title" : "hy-large-process-flow__first-phase";
+    async componentWillLoad() {
+        this._dataItems = await jsonParserWorker(this.dataItems);
+    }
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+    }
+    render() {
+        const classAttributes = ["hy-large-process-flow", `hy-large-process-flow__${this.headerstyle}`].join(" ");
         return [
-          h("hy-heading", { class: headingClasses, heading: HeadingVarians.h3 }, x.phaseTitle),
-          h("hy-large-process-flow-phase", { "data-items": phases }),
+            h("div", { key: 'b1394bbfdcf7d4854ca5390697f5067183d9ddc3', class: classAttributes }, this._dataItems.map((x, index) => {
+                let phases = JSON.stringify(x.boxes);
+                const headingClasses = index !== 0 ? "hy-large-process-flow__multi-phase-title" : "hy-large-process-flow__first-phase";
+                return [
+                    h("hy-heading", { class: headingClasses, heading: HeadingVarians.h3 }, x.phaseTitle),
+                    h("hy-large-process-flow-phase", { "data-items": phases }),
+                ];
+            })),
         ];
-      })),
-    ];
-  }
-  get el() { return getElement(this); }
+    }
+    get el() { return getElement(this); }
 };
-HyLargeProcessFlow.style = hyLargeProcessFlowCss;
+HyLargeProcessFlow.style = HyLargeProcessFlowStyle0;
 
 const hyLargeProcessFlowPhaseCss = ":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-large-process-flow__phase-container{padding-left:0;position:relative;max-width:100%;width:100%}@media (min-width: 30rem){.hy-large-process-flow__phase-container{padding-left:calc(12.5% + var(--gutter-narrow))}}@media (min-width: 60rem){.hy-large-process-flow__phase-container{padding-left:calc(8.3333333333% + var(--gutter-wide))}}@media (min-width: 75.0625rem){.hy-large-process-flow__phase-container{padding-left:calc(8.3333333333% + var(--gutter-extrawide))}}.hy-large-process-flow__phase-container__phase{position:relative}.hy-large-process-flow__phase-container__phase:after{background-color:var(--grayscale-background-arrow);bottom:0;content:\" \";display:inline-block;height:24px;left:26.5px;position:absolute;width:8px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase:after{display:inline-block;height:100%}}.hy-large-process-flow__phase-container__phase:last-child:after{display:none}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase:last-child:after{display:inline-block}}.hy-large-process-flow__phase-container__phase:last-child .hy-large-process-flow__phase-container__phase__content{top:0;margin-top:-24px}.hy-large-process-flow__phase-container__phase__number{display:grid;place-items:center;position:relative;width:64px;z-index:2}.hy-large-process-flow__phase-container__phase__number__number{background-color:var(--brand-main-light);color:var(--grayscale-white);display:grid;font-family:var(--main-font-family);font-size:2rem;line-height:36px;font-weight:700;height:48px;letter-spacing:0;margin:0;padding:0;place-items:center;position:relative;width:48px}.hy-large-process-flow__phase-container__phase__number__number::after{content:\"\";height:48px;left:-6px;position:absolute;width:48px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__number__number{font-size:2.25rem;line-height:40px;height:64px;width:64px}.hy-large-process-flow__phase-container__phase__number__number::after{content:\"\";height:64px;left:-6px;position:absolute;width:64px}}.hy-large-process-flow__phase-container__phase__content{background-color:var(--grayscale-background-box);margin:0 -56px;padding:48px 0 24px 0;position:relative;top:-24px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content{margin:0 0 -8px 32px;padding:32px 0;top:-32px}}.hy-large-process-flow__phase-container__phase__content__heading{color:var(--brand-main-nearly-black);font-family:var(--main-font-family);font-size:1.25rem;line-height:30px;font-weight:600;letter-spacing:-0.5px;margin-bottom:24px;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__heading{font-size:1.625rem;line-height:30px;font-weight:700;letter-spacing:-0.65px;padding:0 44px}}.hy-large-process-flow__phase-container__phase__content__description{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:1rem;line-height:24px;letter-spacing:0;margin-bottom:24px;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__description{padding:0 44px}}.hy-large-process-flow__phase-container__phase__content__links{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:0;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__links{margin-right:-6px;padding:0}}.hy-large-process-flow__phase-container__phase__content__links .phase-link{margin-bottom:8px}.hy-large-process-flow__phase-container__phase__content__links .phase-link.last{margin-bottom:0}";
+const HyLargeProcessFlowPhaseStyle0 = hyLargeProcessFlowPhaseCss;
 
 const HyLargeProcessFlowPhase = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dataItems = undefined;
-  }
-  async componentWillLoad() {
-    this._dataItems = await jsonParserWorker(this.dataItems);
-  }
-  render() {
-    const classAttributes = ["hy-large-process-flow__phase-container"].join(" ");
-    return (h("div", { class: classAttributes }, this._dataItems.map((x, index) => {
-      var items;
-      if (x.links && x.links.length > 0) {
-        let linkItems = x.links;
-        let linkItemsCount = x.links.length;
-        items = linkItems.map((item, index) => {
-          let classLinks = index == linkItemsCount - 1 ? "phase-link last" : "phase-link";
-          return item ? (h("hy-cta-link", { class: classLinks, "link-content": item.label, "sc-label": item.ariaLabel, "is-external": item.isExternal, url: item.url })) : null;
-        });
-      }
-      return [
-        h("div", { class: "hy-large-process-flow__phase-container__phase" }, h("div", { class: "hy-large-process-flow__phase-container__phase__number" }, h("h2", { class: "hy-large-process-flow__phase-container__phase__number__number" }, h("div", { class: "hy-large-process-flow__phase-container__phase__number__title" }, index + 1))), h("div", { class: "hy-large-process-flow__phase-container__phase__content" }, h("div", { class: "hy-large-process-flow__phase-container__phase__content__heading" }, x.heading), h("div", { class: "hy-large-process-flow__phase-container__phase__content__description", innerHTML: x.description }), h("div", { class: "hy-large-process-flow__phase-container__phase__content__links" }, items))),
-      ];
-    })));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dataItems = undefined;
+    }
+    async componentWillLoad() {
+        this._dataItems = await jsonParserWorker(this.dataItems);
+    }
+    render() {
+        const classAttributes = ["hy-large-process-flow__phase-container"].join(" ");
+        return (h("div", { key: 'd8c8aabf5a016e79b3d6586c512c0859fc97be85', class: classAttributes }, this._dataItems.map((x, index) => {
+            var items;
+            if (x.links && x.links.length > 0) {
+                let linkItems = x.links;
+                let linkItemsCount = x.links.length;
+                items = linkItems.map((item, index) => {
+                    let classLinks = index == linkItemsCount - 1 ? "phase-link last" : "phase-link";
+                    return item ? (h("hy-cta-link", { class: classLinks, "link-content": item.label, "sc-label": item.ariaLabel, "is-external": item.isExternal, url: item.url })) : null;
+                });
+            }
+            return [
+                h("div", { class: "hy-large-process-flow__phase-container__phase" }, h("div", { class: "hy-large-process-flow__phase-container__phase__number" }, h("h2", { class: "hy-large-process-flow__phase-container__phase__number__number" }, h("div", { class: "hy-large-process-flow__phase-container__phase__number__title" }, index + 1))), h("div", { class: "hy-large-process-flow__phase-container__phase__content" }, h("div", { class: "hy-large-process-flow__phase-container__phase__content__heading" }, x.heading), h("div", { class: "hy-large-process-flow__phase-container__phase__content__description", innerHTML: x.description }), h("div", { class: "hy-large-process-flow__phase-container__phase__content__links" }, items))),
+            ];
+        })));
+    }
 };
-HyLargeProcessFlowPhase.style = hyLargeProcessFlowPhaseCss;
+HyLargeProcessFlowPhase.style = HyLargeProcessFlowPhaseStyle0;
 
 export { HyLargeProcessFlow as hy_large_process_flow, HyLargeProcessFlowPhase as hy_large_process_flow_phase };
-
-//# sourceMappingURL=hy-large-process-flow_2.entry.js.map

package/dist/esm/hy-link-box_2.entry.js

@@ -1,130 +1,130 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './index-f84f2a7d.js';
-import { l as LinkBoxVariants } from './utils-2819fd7e.js';
-import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-e2e165ed.js';
+import { l as LinkBoxVariants } from './utils-1e7f5184.js';
+import { j as jsonParserWorker } from './globalScript-0c14426d.js';
 
 const linkBoxCss = ":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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:\"\";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px;text-wrap:balance}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0;text-wrap:pretty}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
+const HyLinkBoxStyle0 = linkBoxCss;
 
 const LinkBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = LinkBoxVariants.default;
-    this.imageUrl = null;
-    this.imageAlt = null;
-    this.disableLazy = false;
-    this.useSlot = false;
-    this.showLogo = false;
-    this.textTitle = undefined;
-    this.textDescription = null;
-    this.url = undefined;
-    this.isExternal = false;
-    this.scLabel = undefined;
-    this.readMoreLabel = undefined;
-    this.headerstyle = "common";
-    this.sourceSet = undefined;
-  }
-  srcSetWatcher(data) {
-    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
-  }
-  componentWillLoad() {
-    this.srcSetWatcher(this.sourceSet);
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = LinkBoxVariants.default;
+        this.imageUrl = null;
+        this.imageAlt = null;
+        this.disableLazy = false;
+        this.useSlot = false;
+        this.showLogo = false;
+        this.textTitle = undefined;
+        this.textDescription = null;
+        this.url = undefined;
+        this.isExternal = false;
+        this.scLabel = undefined;
+        this.readMoreLabel = undefined;
+        this.headerstyle = "common";
+        this.sourceSet = undefined;
     }
-  }
-  render() {
-    const classContainerAttributes = ["hy-link-box-container"].join(" ");
-    const classAttributes = [
-      "hy-link-box",
-      this.variant,
-      `hy-link-box__${this.variant}`,
-      this.headerstyle,
-      `hy-link-box__${this.headerstyle}`,
-      this.imageUrl ? "hy-link-box--with-image" : null,
-    ].join(" ");
-    const classTextContainer = ["hy-link-box__text-container", this.imageUrl ? "hy-link-box--with-image" : null].join(" ");
-    const classTitle = [
-      "hy-link-box__text-container__title",
-      `hy-link-box__text-container__title__${this.variant}`,
-      `hy-link-box__text-container__title__${this.headerstyle}`,
-      this.imageUrl ? "hy-link-box__text-container__title__image" : "",
-      this.imageUrl ? "image" : "",
-    ].join(" ");
-    const classDescription = [
-      "hy-link-box__text-container__description",
-      `hy-link-box__text-container__description__${this.variant}`,
-      `hy-link-box__text-container__description__${this.headerstyle}`,
-    ].join(" ");
-    const target = this.isExternal ? "_blank" : "_self";
-    const aspectRatioWidth = 16;
-    const aspectRatioHeight = 10;
-    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
-    const aspectRatio = {
-      "--aspectRatio": `${aspect}%`,
-    };
-    return [
-      h("article", { class: classContainerAttributes }, h("div", { class: classAttributes }, this.imageUrl &&
-        (this._sourceSet ? (h("figure", { class: "hy-link-box__image-container", style: aspectRatio }, h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))) : (h("figure", { class: "hy-link-box__image-container", style: aspectRatio }, h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))), !this.imageUrl && this.showLogo && (h("div", { "aria-hidden": "true", class: "hy-link-box__image-container is-image-missing" }, h("hy-icon", { class: { "hy-site-logo__icon": true }, icon: "hy-icon-hy-logo" }))), h("div", { class: classTextContainer }, h("h3", { class: classTitle }, this.textTitle), this.textDescription && (h("p", { class: classDescription }, this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + "..." : this.textDescription)))), h("a", { "aria-label": this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, title: this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, href: this.url, target: target, class: `hy-cta-link hy-cta-link--default` }, h("span", { "aria-hidden": "true" }), h("span", null, this.readMoreLabel), h("span", { class: `hy-cta-link__icon ${this.isExternal ? "hy-cta-link__icon--external" : ""}` }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24 })))),
-    ];
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "sourceSet": ["srcSetWatcher"]
-  }; }
+    srcSetWatcher(data) {
+        this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
+    }
+    componentWillLoad() {
+        this.srcSetWatcher(this.sourceSet);
+    }
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+    }
+    render() {
+        const classContainerAttributes = ["hy-link-box-container"].join(" ");
+        const classAttributes = [
+            "hy-link-box",
+            this.variant,
+            `hy-link-box__${this.variant}`,
+            this.headerstyle,
+            `hy-link-box__${this.headerstyle}`,
+            this.imageUrl ? "hy-link-box--with-image" : null,
+        ].join(" ");
+        const classTextContainer = ["hy-link-box__text-container", this.imageUrl ? "hy-link-box--with-image" : null].join(" ");
+        const classTitle = [
+            "hy-link-box__text-container__title",
+            `hy-link-box__text-container__title__${this.variant}`,
+            `hy-link-box__text-container__title__${this.headerstyle}`,
+            this.imageUrl ? "hy-link-box__text-container__title__image" : "",
+            this.imageUrl ? "image" : "",
+        ].join(" ");
+        const classDescription = [
+            "hy-link-box__text-container__description",
+            `hy-link-box__text-container__description__${this.variant}`,
+            `hy-link-box__text-container__description__${this.headerstyle}`,
+        ].join(" ");
+        const target = this.isExternal ? "_blank" : "_self";
+        const aspectRatioWidth = 16;
+        const aspectRatioHeight = 10;
+        const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+        const aspectRatio = {
+            "--aspectRatio": `${aspect}%`,
+        };
+        return [
+            h("article", { key: 'd66398c2e146bdfb114a7df6e9ac9a46e0bb1181', class: classContainerAttributes }, h("div", { key: '034dbd08272bf8d14646c61f100c328643309730', class: classAttributes }, this.imageUrl &&
+                (this._sourceSet ? (h("figure", { class: "hy-link-box__image-container", style: aspectRatio }, h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))) : (h("figure", { class: "hy-link-box__image-container", style: aspectRatio }, h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))), !this.imageUrl && this.showLogo && (h("div", { key: '9bb6d340f5c68d1351e79bc99e50b5a24dde1cc2', "aria-hidden": "true", class: "hy-link-box__image-container is-image-missing" }, h("hy-icon", { key: '8077a642704366f4ecbf951ffc4c9d86edec47cc', class: { "hy-site-logo__icon": true }, icon: "hy-icon-hy-logo" }))), h("div", { key: '69dac608e446585af251ea70e12a6079a80de312', class: classTextContainer }, h("h3", { key: 'ec3a4c3c5468dd8cfa832b32c9b2e5de93dbbccb', class: classTitle }, this.textTitle), this.textDescription && (h("p", { key: '2287836632c27b812675f97c2a326c5c6688ffba', class: classDescription }, this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + "..." : this.textDescription)))), h("a", { key: 'e6a1f88304688d2393174f74a75d6074eec3df88', "aria-label": this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, title: this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, href: this.url, target: target, class: `hy-cta-link hy-cta-link--default` }, h("span", { key: 'bb5b4dd980f55b67dea7c06baca3c56dd08c79d0', "aria-hidden": "true" }), h("span", { key: '9b43019cd8d8a60b54d751144958b76fc021d3fb' }, this.readMoreLabel), h("span", { key: 'ffddc98795e5810d3a05ba593f3063169774f892', class: `hy-cta-link__icon ${this.isExternal ? "hy-cta-link__icon--external" : ""}` }, h("hy-icon", { key: '21accddb6e934ac38507e8fe0b3f6f5990581531', icon: "hy-icon-arrow-to-right", size: 24 })))),
+        ];
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "sourceSet": ["srcSetWatcher"]
+    }; }
 };
-LinkBox.style = linkBoxCss;
+LinkBox.style = HyLinkBoxStyle0;
 
 const linkBoxListCss = ":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-link-box-list{padding:0;margin:0;list-style:none;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-link-box-list{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-link-box-list{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-link-box-list{gap:32px}}";
+const HyLinkBoxListStyle0 = linkBoxListCss;
 
 const LinkBoxList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.headerstyle = "common";
-    this.variant = LinkBoxVariants.default;
-    this.readMoreLabel = undefined;
-    this.dataItems = undefined;
-  }
-  async componentWillLoad() {
-    this._dataItems = await jsonParserWorker(this.dataItems);
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.headerstyle = "common";
+        this.variant = LinkBoxVariants.default;
+        this.readMoreLabel = undefined;
+        this.dataItems = undefined;
     }
-  }
-  render() {
-    const classAttributes = [
-      "hy-link-box-list",
-      this.variant,
-      `hy-link-box-list__${this.variant}`,
-      `hy-link-box-list__${this.headerstyle}`,
-    ].join(" ");
-    /*
-    - Logic:
-    - 3 items: big
-    - 4 items: small
-    - 5 items: big
-    - 6 items: big
-    - 7 items: small
-    - 8 items: small
-    - 9 items: big
-    * */
-    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(" ");
-    return (h(Host, null, h("ul", { class: classAttributes }, this._dataItems.map((x) => {
-      return (h("li", null, h("hy-link-box", { class: classItemAttributes, variant: this.variant, "source-set": x.imageSets, "image-url": x.imageUrl, "image-alt": x.imageAlt, "text-title": x.heading, "text-description": x.description, "show-logo": x.showLogo, url: x.boxUrl, "is-external": x.isExternal, "sc-label": x.ariaLabel, "read-more-label": this.readMoreLabel })));
-    })), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
-  }
-  get el() { return getElement(this); }
+    async componentWillLoad() {
+        this._dataItems = await jsonParserWorker(this.dataItems);
+    }
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+    }
+    render() {
+        const classAttributes = [
+            "hy-link-box-list",
+            this.variant,
+            `hy-link-box-list__${this.variant}`,
+            `hy-link-box-list__${this.headerstyle}`,
+        ].join(" ");
+        /*
+        - Logic:
+        - 3 items: big
+        - 4 items: small
+        - 5 items: big
+        - 6 items: big
+        - 7 items: small
+        - 8 items: small
+        - 9 items: big
+        * */
+        const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(" ");
+        return (h(Host, { key: 'e03e2f8c30348873286da0eee4d71593a04f0f41' }, h("ul", { key: '8d01eac632b7b94df38f38dd029b329b14569ade', class: classAttributes }, this._dataItems.map((x) => {
+            return (h("li", null, h("hy-link-box", { class: classItemAttributes, variant: this.variant, "source-set": x.imageSets, "image-url": x.imageUrl, "image-alt": x.imageAlt, "text-title": x.heading, "text-description": x.description, "show-logo": x.showLogo, url: x.boxUrl, "is-external": x.isExternal, "sc-label": x.ariaLabel, "read-more-label": this.readMoreLabel })));
+        })), h("hy-box", { key: '2ed3ba6e604b1976c2d108584606a295c1a3fdbf', mb: "1.75, 1.75, 2, 2.5" })));
+    }
+    get el() { return getElement(this); }
 };
-LinkBoxList.style = linkBoxListCss;
+LinkBoxList.style = HyLinkBoxListStyle0;
 
 export { LinkBox as hy_link_box, LinkBoxList as hy_link_box_list };
-
-//# sourceMappingURL=hy-link-box_2.entry.js.map

package/dist/esm/hy-link-list.entry.js

@@ -1,44 +1,43 @@
-import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
-import { h as CtaLinkVariants } from './utils-2819fd7e.js';
-import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+import { r as registerInstance, h, g as getElement } from './index-e2e165ed.js';
+import { h as CtaLinkVariants } from './utils-1e7f5184.js';
+import { j as jsonParserWorker } from './globalScript-0c14426d.js';
 
 const hyLinkListCss = ":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-link-list{margin-bottom:32px}.hy-link-list__links{display:grid;gap:16px;list-style:none;margin:0;padding:0}@media (min-width: 30rem){.hy-link-list__links--grid{gap:16px 24px;grid-template-columns:repeat(2, 1fr)}}@media (min-width: 60rem){.without-sidebar .hy-link-list__links--grid.col-3{gap:16px 24px;grid-template-columns:repeat(3, 1fr)}}@media (min-width: 75.0625rem){.without-sidebar .hy-link-list__links--grid.col-3{gap:16px 32px}}@media (min-width: 60rem){.without-sidebar .hy-link-list__links--grid.col-4{gap:16px 24px;grid-template-columns:repeat(4, 1fr)}}@media (min-width: 75.0625rem){.without-sidebar .hy-link-list__links--grid.col-4{gap:16px 32px}}@media (min-width: 75.0625rem){.with-sidebar .hy-link-list__links--grid.col-3{gap:16px 24px;grid-template-columns:repeat(3, 1fr)}}@media (min-width: 1601px){.with-sidebar .hy-link-list__links--grid.col-3{gap:16px 32px}}@media (min-width: 75.0625rem){.with-sidebar .hy-link-list__links--grid.col-4{gap:16px 24px;grid-template-columns:repeat(4, 1fr)}}@media (min-width: 1601px){.with-sidebar .hy-link-list__links--grid.col-4{gap:16px 32px}}.hy-link-list__title{font-weight:700;font-family:var(--main-font-family);margin:0 0 32px;color:var(--brand-main-nearly-black)}.is-content-page h2.hy-link-list__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.82px}@media (min-width: 30rem){.is-content-page h2.hy-link-list__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-content-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-content-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.is-front-page h2.hy-link-list__title,.is-landing-page h2.hy-link-list__title{font-size:1.75rem;line-height:32px;letter-spacing:-0.7px;text-transform:uppercase}@media (min-width: 30rem){.is-front-page h2.hy-link-list__title,.is-landing-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.85px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h2.hy-link-list__title,.without-sidebar .is-landing-page h2.hy-link-list__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}@media (min-width: 1601px){.with-sidebar .is-front-page h2.hy-link-list__title,.with-sidebar .is-landing-page h2.hy-link-list__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}.hy-two-columns h2.hy-link-list__title{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;margin-bottom:16px;text-transform:none}@media (min-width: 75.0625rem){.without-sidebar .hy-two-columns h2.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.with-sidebar .hy-two-columns h2.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.is-content-page h3.hy-link-list__title{font-size:1.3125rem;line-height:28px;letter-spacing:-0.42px}@media (min-width: 30rem){.is-content-page h3.hy-link-list__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.is-front-page h3.hy-link-list__title,.is-landing-page h3.hy-link-list__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.52px}@media (min-width: 30rem){.is-front-page h3.hy-link-list__title,.is-landing-page h3.hy-link-list__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h3.hy-link-list__title,.without-sidebar .is-landing-page h3.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-front-page h3.hy-link-list__title,.with-sidebar .is-landing-page h3.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.hy-two-columns h3.hy-link-list__title{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;margin-bottom:16px;text-transform:none}@media (min-width: 75.0625rem){.without-sidebar .hy-two-columns h3.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.with-sidebar .hy-two-columns h3.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}";
+const HyLinkListStyle0 = hyLinkListCss;
 
 const HyLinkList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.headerstyle = "default";
-    this.dataItems = undefined;
-    this.listHeading = "";
-    this.variation = undefined;
-    this.headingVariant = "h2";
-  }
-  async componentWillLoad() {
-    this._dataItems = await jsonParserWorker(this.dataItems);
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.headerstyle = "default";
+        this.dataItems = undefined;
+        this.listHeading = "";
+        this.variation = undefined;
+        this.headingVariant = "h2";
     }
-  }
-  render() {
-    const linkVariant = CtaLinkVariants.linkList;
-    const HeadingVariant = this.headingVariant.toLowerCase();
-    let columnType = "col-3";
-    if (this._dataItems.length === 7 || this._dataItems.length % 4 === 0) {
-      columnType = "col-4";
+    async componentWillLoad() {
+        this._dataItems = await jsonParserWorker(this.dataItems);
     }
-    return [
-      h("section", { class: `hy-link-list hy-link-list__${this.headerstyle}` }, this.listHeading.length > 0 && (h(HeadingVariant, { class: "hy-link-list__title" }, this.listHeading)), h("ul", { class: `hy-link-list__links hy-link-list__links--${this.variation} ${this.variation === "grid" ? columnType : ""}` }, this._dataItems.map(({ heading, ariaLabel, url, isExternal }) => (h("li", { class: "hy-link-list__links-item" }, h("hy-cta-link", { variant: linkVariant, "link-content": heading, "sc-label": ariaLabel, url: url, "is-external": isExternal })))))),
-    ];
-  }
-  get el() { return getElement(this); }
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+    }
+    render() {
+        const linkVariant = CtaLinkVariants.linkList;
+        const HeadingVariant = this.headingVariant.toLowerCase();
+        let columnType = "col-3";
+        if (this._dataItems.length === 7 || this._dataItems.length % 4 === 0) {
+            columnType = "col-4";
+        }
+        return [
+            h("section", { key: '3b02df7ee1756e2bb68ad47d1a4825b21b6e17fd', class: `hy-link-list hy-link-list__${this.headerstyle}` }, this.listHeading.length > 0 && (h(HeadingVariant, { key: '9a1896d97a2a6faafb166a264d1f35b8dd978a33', class: "hy-link-list__title" }, this.listHeading)), h("ul", { key: '737978fbd1bcdf99f7c8be78bed23dd5bccb3ba2', class: `hy-link-list__links hy-link-list__links--${this.variation} ${this.variation === "grid" ? columnType : ""}` }, this._dataItems.map(({ heading, ariaLabel, url, isExternal }) => (h("li", { class: "hy-link-list__links-item" }, h("hy-cta-link", { variant: linkVariant, "link-content": heading, "sc-label": ariaLabel, url: url, "is-external": isExternal })))))),
+        ];
+    }
+    get el() { return getElement(this); }
 };
-HyLinkList.style = hyLinkListCss;
+HyLinkList.style = HyLinkListStyle0;
 
 export { HyLinkList as hy_link_list };
-
-//# sourceMappingURL=hy-link-list.entry.js.map

package/dist/esm/hy-link.entry.js

@@ -1,25 +1,24 @@
-import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
-import { i as LinkVariants } from './utils-2819fd7e.js';
+import { r as registerInstance, h, H as Host } from './index-e2e165ed.js';
+import { i as LinkVariants } from './utils-1e7f5184.js';
 
 const linkCss = ":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-link{color:var(--brand-main);font-family:var(--main-font-family);font-weight:600;font-size:14px;letter-spacing:-0.47px;margin:theme(\"spacing.8\");line-height:16px;text-decoration:none}.hy-link.within-paragraph{color:var(--brand-main);font-family:var(--main-font-family);font-weight:400;font-size:14px;line-height:20px;text-decoration:underline}";
+const HyLinkStyle0 = linkCss;
 
 const Link = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = LinkVariants.default;
-    this.linkContent = "";
-    this.url = undefined;
-    this.scLabel = undefined;
-    this.isExternal = false;
-  }
-  render() {
-    const classAttributes = ["hy-link", this.variant];
-    const target = this.isExternal ? "_blank" : "_self";
-    return (h(Host, null, h("a", { "aria-label": this.scLabel, class: classAttributes.join(" "), href: this.url, target: target }, this.linkContent)));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = LinkVariants.default;
+        this.linkContent = "";
+        this.url = undefined;
+        this.scLabel = undefined;
+        this.isExternal = false;
+    }
+    render() {
+        const classAttributes = ["hy-link", this.variant];
+        const target = this.isExternal ? "_blank" : "_self";
+        return (h(Host, { key: '8bad315bcbcdac7a941fbd5202a020ac78777f48' }, h("a", { key: '556ecd667b1016254128d779e3aedd13fc607d7b', "aria-label": this.scLabel, class: classAttributes.join(" "), href: this.url, target: target }, this.linkContent)));
+    }
 };
-Link.style = linkCss;
+Link.style = HyLinkStyle0;
 
 export { Link as hy_link };
-
-//# sourceMappingURL=hy-link.entry.js.map