@itcenteratunihelsinki/huds-lib 0.8.56 → 0.8.58

package/dist/cjs/color-box_7.cjs.entry.js

@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-32830401.js');
+const emotion_esm = require('./emotion.esm-aef96835.js');
+
+const colorBoxCss = ":host{display:block}";
+
+const ColorBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+ColorBox.style = colorBoxCss;
+
+const baselineCss = "div.hy-baseline{display:block}";
+
+const createCss = (value) => {
+  return emotion_esm.css `
+    > * + * {
+      margin-top: ${value}rem;
+      display: block;
+    }
+  `;
+};
+const Baseline = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.margin = 1;
+  }
+  render() {
+    return (index.h("div", { class: createCss(this.margin) }, index.h("slot", null)));
+  }
+};
+Baseline.style = baselineCss;
+
+const hyBoxContainerCss = ":host{display:block}";
+
+const HyBoxContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wrap = true;
+    this.maxWidth = true;
+  }
+  render() {
+    return (index.h(index.Host, { style: { width: "100%", display: "flex", flex: "1", justifyContent: "center" } }, index.h("div", { class: emotion_esm.css `
+            display: flex;
+            width: 100%;
+            flex-wrap: ${this.wrap ? "wrap" : "no-wrap"};
+            max-width: ${this.maxWidth ? "90rem" : "100%"};
+          ` }, index.h("slot", null))));
+  }
+};
+HyBoxContainer.style = hyBoxContainerCss;
+
+const colors = {
+  brandMain: "#0e688b",
+  brandMainLight: "#107eab",
+  brandMainActive: "#005379",
+  brandMainDark: "#003146",
+  brandMainNearlyBlack: "#000222",
+  grayscaleWhite: "#fff",
+  grayscaleLight: "#f8f8f8",
+  grayscaleMedium: "#d2d2d2",
+  grayscaleBackgroundBox: "#f5f5f5",
+  grayscaleBackgroundArrow: "#dfdfdf",
+  grayscaleMediumDark: "#979797",
+  grayscaleDark: "#555555",
+  grayscaleBlack: "#000000",
+  additionalRedLight: "#E5053A",
+  additionalRedDark: "#A31621",
+  additionalPurpleLight: "#420039",
+  additionalYellow: "#F9A21A",
+  additionalSkyblue: "#48C5F8",
+  additionalOrange: "#D14600",
+  additionalGreenLight: "#96BA3C",
+  additionalGreenDark: "#006400",
+};
+
+const buttonCss = "@charset \"UTF-8\";: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;-webkit-box-sizing:border-box;box-sizing:border-box}.hy-button__icon{-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-button{display:block;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main);color:var(--grayscale-white);font-family:var(--main-font-family);border:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.9375rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:0.9375rem;margin:0;padding:0;-webkit-transition-duration:0.1s;transition-duration:0.1s;-webkit-transition-property:all;transition-property:all;min-height:44px;position:relative;text-decoration:none}.hy-button.size-large{min-height:48px}.hy-button.primary{background-color:var(--brand-main);color:var(--grayscale-white)}.hy-button.primary .hy-button__icon{padding:8px 13px}.hy-button.primary svg{fill:var(--grayscale-white)}.hy-button.primary:hover{background-color:var(--brand-main-active)}.hy-button.primary:active{background-color:var(--brand-main-dark)}.hy-button.primary:disabled{background-color:var(--grayscale-medium);color:var(--grayscale-dark)}.hy-button.primary:disabled svg{fill:var(--grayscale-dark)}.hy-button.primary:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-button.secondary{background-color:transparent;border:solid 2px var(--brand-main);color:var(--brand-main)}.hy-button.secondary svg{fill:var(--brand-main)}.hy-button.secondary:hover{border:solid 2px var(--brand-main-active);color:var(--brand-main-active)}.hy-button.secondary:hover svg{fill:var(--brand-main-active)}.hy-button.secondary:active{border:solid 2px var(--brand-main-dark);color:var(--brand-main-dark)}.hy-button.secondary:active svg{fill:var(--brand-main-dark)}.hy-button.secondary:disabled{border:solid 2px var(--grayscale-medium-dark);color:var(--grayscale-medium-dark)}.hy-button.secondary:disabled svg{fill:var(--grayscale-medium-dark)}.hy-button::after{content:\"\";display:block;border-bottom:2px solid var(--additional-skyblue);position:absolute;bottom:-3.5px;left:3px;right:3px;z-index:0}.hy-button.primary::after{bottom:-2px}.hy-button:disabled{cursor:not-allowed}.hy-button:disabled::after{border-bottom:2px solid var(--grayscale-medium-dark);bottom:-3.5px}.hy-button:disabled.primary::after{bottom:-2px}.hy-button .hy-button__text{margin:12px 24px}.hy-button .hy-button__icon-right{padding-right:12px}hy-button[icon-right=hy-icon-arrow-right] .primary .hy-button__text{margin:12px 0 12px 16px;padding-right:16px}hy-button[icon-right=hy-icon-arrow-right] .primary:not(disabled) .hy-button__text{border-right:solid 1px var(--additional-skyblue)}hy-button[icon-right=hy-icon-arrow-right] .primary:disabled .hy-button__text{border-right:solid 1px var(--grayscale-dark)}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__text{margin:12px 16px}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__icon{padding-right:1rem;padding-left:0}hy-button[icon=hy-icon-arrow-left] .primary .hy-button__text{margin:12px 16px 12px 0;padding-left:16px}hy-button[icon=hy-icon-arrow-left] .primary:not(disabled) .hy-button__text{border-left:solid 1px var(--additional-skyblue)}hy-button[icon=hy-icon-arrow-left] .primary:disabled .hy-button__text{border-left:solid 1px var(--grayscale-dark)}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__text{margin:12px 16px}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__icon{padding-left:1rem;padding-right:0}";
+
+const fillcolors = {
+  primary: colors.brandMain,
+  secondary: "white",
+};
+const Button = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.buttonType = "submit";
+    this.buttonClasses = "";
+    this.variant = "primary";
+    this.state = "enabled";
+    this.size = "normal";
+    this.disabled = false;
+    this.url = "";
+    this.ariaLabel = "";
+    this.isExternal = false;
+    this.icon = undefined;
+    this.iconRight = undefined;
+    this.attrs = "";
+  }
+  render() {
+    const classAttributes = ["hy-button", this.variant, this.state, "size-" + this.size, this.buttonClasses];
+    const iconFillColor = fillcolors[this.variant];
+    const target = this.isExternal ? "_blank" : "_self";
+    let props = {};
+    if (this.attrs && this.attrs.length > 2) {
+      let attrString = JSON.parse(this.attrs);
+      let attrArray = attrString.split('" ');
+      attrArray.map((item) => {
+        let parts = item.split("=");
+        let key = parts[0];
+        let value = parts[1];
+        key = key.replaceAll('"', " ");
+        key = key.trim();
+        if (key !== "class") {
+          value = value.replaceAll('"', " ");
+          value = value.trim();
+          props[key] = value;
+        }
+      });
+    }
+    return this.url ? (index.h(index.Host, { "icon-right": "hy-icon-arrow-right", "aria-label": this.ariaLabel }, index.h("div", { style: { display: "flex" } }, index.h("a", { class: classAttributes.join(" "), href: this.url, target: target }, index.h("span", { class: "hy-button__text" }, index.h("slot", null)), index.h("span", { class: "hy-button__icon" }, index.h("hy-icon", { icon: "hy-icon-arrow-right", fill: iconFillColor, size: 13 })))))) : (index.h(index.Host, { "aria-label": this.ariaLabel }, index.h("button", Object.assign({ type: this.buttonType, class: classAttributes.join(" "), disabled: this.disabled }, props), !!this.icon && (index.h("span", { class: "hy-button__icon hy-button__icon--left" }, index.h("hy-icon", { icon: this.icon, fill: iconFillColor, size: 13 }))), index.h("span", { class: "hy-button__text" }, index.h("slot", null)), !!this.iconRight && (index.h("span", { class: "hy-button__icon hy-button__icon--right" }, index.h("hy-icon", { icon: this.iconRight, fill: iconFillColor, size: 13 }))))));
+  }
+};
+Button.style = buttonCss;
+
+const docsContainerCss = "div.hy-docs-container{display:block;margin:2rem 0}";
+
+const DocsContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: "hy-docs-container" }, index.h("slot", null)));
+  }
+};
+DocsContainer.style = docsContainerCss;
+
+const sectionContainerCss = ":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-section--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-section--container{width:100%}}@media only screen and (min-width: 60rem){.hy-section--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-section--container{width:100%;max-width:75rem}}";
+
+const SectionContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: "hy-section--container" }, index.h("slot", null)));
+  }
+};
+SectionContainer.style = sectionContainerCss;
+
+const tinyTextCss = ":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-tiny-text{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:12px;letter-spacing:-0.07px;line-height:16px}";
+
+const TinyText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-tiny-text"];
+    return (index.h("div", { class: classAttributes.join(" ") }, index.h("slot", null)));
+  }
+};
+TinyText.style = tinyTextCss;
+
+exports.color_box = ColorBox;
+exports.hy_baseline = Baseline;
+exports.hy_box_container = HyBoxContainer;
+exports.hy_button = Button;
+exports.hy_docs_container = DocsContainer;
+exports.hy_section_container = SectionContainer;
+exports.hy_tiny_text = TinyText;
+
+//# sourceMappingURL=color-box_7.cjs.entry.js.map

package/dist/cjs/color-box_7.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"color-box.hy-baseline.hy-box-container.hy-button.hy-docs-container.hy-section-container.hy-tiny-text.entry.cjs.js","mappings":"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","names":["h","Host","css"],"sources":["./src/components/color-box/color-box.css?tag=color-box&encapsulation=shadow","./src/components/color-box/color-box.tsx","./src/components/baseline/baseline.css?tag=hy-baseline","./src/components/baseline/baseline.tsx","./src/components/hy-box-container/hy-box-container.css?tag=hy-box-container","./src/components/hy-box-container/hy-box-container.tsx","./src/global/colors.ts","./src/components/button/button.scss?tag=hy-button","./src/components/button/button.tsx","./src/components/docs-container/docs-container.css?tag=hy-docs-container","./src/components/docs-container/docs-container.tsx","./src/components/section-container/section-container.scss?tag=hy-section-container","./src/components/section-container/section-container.tsx","./src/components/tiny-text/tiny-text.scss?tag=hy-tiny-text&encapsulation=shadow","./src/components/tiny-text/tiny-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"color-box\",\n  styleUrl: \"color-box.css\",\n  shadow: true,\n})\nexport class ColorBox implements ComponentInterface {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","div.hy-baseline {\n  display: block;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {css} from \"emotion\";\n\nconst createCss = (value: number) => {\n  return css`\n    > * + * {\n      margin-top: ${value}rem;\n      display: block;\n    }\n  `;\n};\n\n@Component({\n  tag: \"hy-baseline\",\n  styleUrl: \"baseline.css\",\n  shadow: false,\n})\nexport class Baseline {\n  /**\n   * Top margin to be added to all but first element. Amount of rem:s\n   */\n  @Prop() margin: number = 1;\n  render() {\n    return (\n      <div class={createCss(this.margin)}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\nimport {css} from \"emotion\";\n\n@Component({\n  tag: \"hy-box-container\",\n  styleUrl: \"hy-box-container.css\",\n  shadow: false,\n})\nexport class HyBoxContainer {\n  /**\n   * Should the items wrap to new rows.\n   */\n  @Prop() wrap: boolean = true;\n  /**\n   * Should the container have a max width of 90rems\n   */\n  @Prop() maxWidth: boolean = true;\n  render() {\n    return (\n      <Host style={{width: \"100%\", display: \"flex\", flex: \"1\", justifyContent: \"center\"}}>\n        <div\n          class={css`\n            display: flex;\n            width: 100%;\n            flex-wrap: ${this.wrap ? \"wrap\" : \"no-wrap\"};\n            max-width: ${this.maxWidth ? \"90rem\" : \"100%\"};\n          `}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","export default {\n  brandMain: \"#0e688b\",\n  brandMainLight: \"#107eab\",\n  brandMainActive: \"#005379\",\n  brandMainDark: \"#003146\",\n  brandMainNearlyBlack: \"#000222\",\n  grayscaleWhite: \"#fff\",\n  grayscaleLight: \"#f8f8f8\",\n  grayscaleMedium: \"#d2d2d2\",\n  grayscaleBackgroundBox: \"#f5f5f5\",\n  grayscaleBackgroundArrow: \"#dfdfdf\",\n  grayscaleMediumDark: \"#979797\",\n  grayscaleDark: \"#555555\",\n  grayscaleBlack: \"#000000\",\n  additionalRedLight: \"#E5053A\",\n  additionalRedDark: \"#A31621\",\n  additionalPurpleLight: \"#420039\",\n  additionalYellow: \"#F9A21A\",\n  additionalSkyblue: \"#48C5F8\",\n  additionalOrange: \"#D14600\",\n  additionalGreenLight: \"#96BA3C\",\n  additionalGreenDark: \"#006400\",\n};\n",":host {\n  display: block;\n  box-sizing: border-box;\n}\n\n.hy-button__icon  {\n  align-content: center;\n  display: flex;\n}\n\n.hy-button {\n  display: block;\n  align-items: center;\n  background-color: var(--brand-main);\n  color: var(--grayscale-white);\n  font-family: var(--main-font-family);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  font-size: 0.9375rem;\n  justify-content: center;\n  line-height: 0.9375rem;\n  margin: 0;\n  padding: 0;\n  transition-duration: 0.1s;\n  transition-property: all;\n  min-height: 44px;\n  position: relative;\n\n  text-decoration: none;\n\n  &.size-large {\n    min-height: 48px;\n  }\n\n  &.primary {\n    background-color: var(--brand-main);\n    color: var(--grayscale-white);\n    .hy-button__icon  {\n      padding: 8px 13px;\n    }\n    svg {\n      fill: var(--grayscale-white);\n    }\n    &:hover {\n      background-color: var(--brand-main-active);\n    }\n    &:active {\n      background-color: var(--brand-main-dark);\n    }\n    &:disabled {\n      background-color: var(--grayscale-medium);\n      color: var(--grayscale-dark);\n      svg {\n        fill: var(--grayscale-dark);\n      }\n    }\n    &:focus {\n      outline: solid 2px var(--additional-yellow);\n      outline-offset: 2px;\n    }\n  }\n\n  &.secondary {\n    background-color: transparent;\n    border: solid 2px var(--brand-main);\n    color: var(--brand-main);\n\n    svg {\n      fill: var(--brand-main);\n    }\n    &:hover {\n      border: solid 2px var(--brand-main-active);\n      color: var(--brand-main-active);\n\n      svg {\n        fill: var(--brand-main-active);\n      }\n    }\n    &:active {\n      border: solid 2px var(--brand-main-dark);\n      color: var(--brand-main-dark);\n\n      svg {\n        fill: var(--brand-main-dark);\n      }\n    }\n    &:disabled {\n      border: solid 2px var(--grayscale-medium-dark);\n      color: var(--grayscale-medium-dark);\n\n      svg {\n        fill: var(--grayscale-medium-dark);\n      }\n    }\n  }\n  // decorative bottom border/shadow\n  &::after {\n    content: \"\";\n    display: block;\n    border-bottom: 2px solid var(--additional-skyblue);\n    position: absolute;\n    bottom: -3.5px;\n    left: 3px;\n    right: 3px;\n    z-index: 0;\n  }\n  &.primary::after {\n    bottom: -2px;\n  }\n  &:disabled {\n    cursor: not-allowed;\n    &::after {\n      border-bottom: 2px solid var(--grayscale-medium-dark);\n      bottom: -3.5px;\n    }\n    &.primary::after {\n      bottom: -2px;\n    }\n  }\n  //\n\n  .hy-button__text {\n    margin: 12px 24px;\n  }\n  .hy-button__icon-right {\n    padding-right: 12px;\n  }\n}\n\nhy-button[icon-right=\"hy-icon-arrow-right\"] {\n  .primary {\n    .hy-button__text {\n      margin: 12px 0 12px 16px;\n      padding-right: 16px;\n    }\n  }\n  .primary:not(disabled) {\n    .hy-button__text {\n      border-right: solid 1px var(--additional-skyblue);\n    }\n  }\n  .primary:disabled {\n    .hy-button__text {\n      border-right: solid 1px var(--grayscale-dark);\n    }\n  }\n  .secondary {\n    .hy-button__text {\n      margin: 12px 16px;\n    }\n    .hy-button__icon {\n      padding-right: 1rem;\n      padding-left: 0;\n    }\n  }\n}\n\nhy-button[icon=\"hy-icon-arrow-left\"] {\n  .primary {\n    .hy-button__text {\n      margin: 12px 16px 12px 0;\n      padding-left: 16px;\n    }\n  }\n  .primary:not(disabled) {\n    .hy-button__text {\n      border-left: solid 1px var(--additional-skyblue);\n    }\n  }\n  .primary:disabled {\n    .hy-button__text {\n      border-left: solid 1px var(--grayscale-dark);\n    }\n  }\n  .secondary {\n    .hy-button__text {\n      margin: 12px 16px;\n    }\n    .hy-button__icon {\n      padding-left: 1rem;\n      padding-right: 0;\n    }\n  }\n}\n","import {Component, h, Prop, Host} from \"@stencil/core\";\nimport {ButtonVariants} from \"../../utils/utils\";\nimport colors from \"../../global/colors\";\n\nconst fillcolors = {\n  primary: colors.brandMain,\n  secondary: \"white\",\n};\n\n@Component({\n  tag: \"hy-button\",\n  styleUrl: \"button.scss\",\n  shadow: false,\n})\nexport class Button {\n  /**\n   * Button type. Defaults to submit.\n   */\n  @Prop() buttonType: string = \"submit\";\n\n  /**\n   * Custom classes added to button element.\n   */\n  @Prop() buttonClasses: string = \"\";\n\n  /**\n   * The element variant. Defaults to primary\n   */\n  @Prop() variant: ButtonVariants = \"primary\";\n  /**\n   *  deprecated, use disabled boolean value\n   *  */\n  @Prop() state: \"enabled\" | \"disabled\" = \"enabled\";\n  /**\n   * Size (height) of the button. Normal: 44px, large: 48px\n   */\n  @Prop() size: \"normal\" | \"large\" = \"normal\";\n  /**\n   * Use this to programmatically disable the button, matches the native button functionality\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   *  Set this on if an anchor tag is required instead of a button.\n   */\n  @Prop() url?: string = \"\";\n  /**\n   * Aria label for the element\n   */\n  @Prop() ariaLabel: string = \"\";\n  /**\n   * Use only with url property. Sets the\n   */\n  @Prop() isExternal?: boolean = false;\n  /**\n   * Icon to use on the left side\n   */\n  @Prop() icon?: string;\n  /**\n   * Icon to use on the right side\n   */\n  @Prop() iconRight?: string;\n\n  @Prop() attrs: string = \"\";\n\n  render() {\n    const classAttributes = [\"hy-button\", this.variant, this.state, \"size-\" + this.size, this.buttonClasses];\n    const iconFillColor = fillcolors[this.variant];\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n    let props = {};\n\n    if (this.attrs && this.attrs.length > 2) {\n      let attrString = JSON.parse(this.attrs);\n      let attrArray = attrString.split('\" ');\n      attrArray.map((item) => {\n        let parts = item.split(\"=\");\n        let key = parts[0];\n        let value = parts[1];\n        key = key.replaceAll('\"', \" \");\n        key = key.trim();\n        if (key !== \"class\") {\n          value = value.replaceAll('\"', \" \");\n          value = value.trim();\n          props[key] = value;\n        }\n      });\n    }\n\n    return this.url ? (\n      <Host icon-right=\"hy-icon-arrow-right\" aria-label={this.ariaLabel}>\n        <div style={{display: \"flex\"}}>\n          <a class={classAttributes.join(\" \")} href={this.url} target={target}>\n            <span class=\"hy-button__text\">\n              <slot />\n            </span>\n            <span class=\"hy-button__icon\">\n              <hy-icon icon=\"hy-icon-arrow-right\" fill={iconFillColor} size={13} />\n            </span>\n          </a>\n        </div>\n      </Host>\n    ) : (\n      <Host aria-label={this.ariaLabel}>\n        <button type={this.buttonType} class={classAttributes.join(\" \")} disabled={this.disabled} {...props}>\n          {!!this.icon && (\n            <span class=\"hy-button__icon hy-button__icon--left\">\n              <hy-icon icon={this.icon} fill={iconFillColor} size={13} />\n            </span>\n          )}\n          <span class=\"hy-button__text\">\n            <slot />\n          </span>\n          {!!this.iconRight && (\n            <span class=\"hy-button__icon hy-button__icon--right\">\n              <hy-icon icon={this.iconRight} fill={iconFillColor} size={13} />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n","div.hy-docs-container {\n  display: block;\n  margin: 2rem 0;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-docs-container\",\n  styleUrl: \"docs-container.css\",\n  shadow: false,\n})\nexport class DocsContainer {\n  render() {\n    return (\n      <div class=\"hy-docs-container\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-section--container {\n  display: block;\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media only screen and (min-width: $narrow) {\n    width: 100%;\n  }\n\n  @media only screen and (min-width: $wide) {\n    width: 100%;\n    max-width: 60rem;\n  }\n\n  @media only screen and (min-width: $extrawide) {\n    width: 100%;\n    max-width: 75rem;\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-section-container\",\n  styleUrl: \"section-container.scss\",\n  shadow: false,\n})\nexport class SectionContainer {\n  render() {\n    return (\n      <div class=\"hy-section--container\">\n        <slot />\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-tiny-text {\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  font-size: 12px;\n  letter-spacing: -0.07px;\n  line-height: 16px;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-tiny-text\",\n  styleUrl: \"tiny-text.scss\",\n  shadow: true,\n})\nexport class TinyText {\n  render() {\n    const classAttributes = [\"hy-tiny-text\"];\n    return (\n      <div class={classAttributes.join(\" \")}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}