@itcenteratunihelsinki/huds-lib 0.8.58 → 0.8.59

package/readme.md

@@ -4,62 +4,9 @@ HUDS is a library of reusable design tokens, components, patterns and templates
 
 Note: This library is still under _heavy_ development and we are still researching for the best ways to go forward. Please do not consider it to be production ready. We welcome any feedback and ideas on improving both the library and how to document the components.
 
-The library is published in [npm](https://www.npmjs.com/package/@itcenteratunihelsinki/huds-lib) and documentation is hosted at [https://static.helsinki.fi/ds/](https://static.helsinki.fi/ds/)
-
-## Install
-
-HUDS has changed to monorepo using Lerna. Instructions to are being updated.
-
-To be added
-
-## Stencil
-
-1. Have discussions with designers, agree on basic functionality
-2. run `yarn generate` to generate a blanc component and start developing
-3. Review the design with designer and PO or a colleague
-4. Check with basic accessibility tools (TBD which tools?!?)
-5. Build the library with `yarn build`. This will generate a .md file with some technical documentation to the components folder. Add your own desicription and instructions. At least it should
-   1. Have a short introduction
-   2. List all states the component can be in.
-   3. List all variants the component can have
-   4. Include code examples
-6. Write unit tests where it makes sense. We use jest and puppeteer.
-7. Make a merge request and ask a colleague for a review
-
-## Adding documentation to Vuepress
-
-You should install the documentation project from https://version.helsinki.fi/julkiset-sivut/design-system.
-
-To run it with your version of the design system, follow these steps:
-
-1. Clone the repo and install dependencies with `yarn install`
-2. By default the library uses the latest version from npm. To use newer library version, see linking instructions below
-3. Add necessary .md files to VuePress /docs folder and update `.vuepress/config.js`
-
-In case you want to develop and see the component inside documentation right away, you can adapt the following workflow:
-
-Inside the library folder, make a dynamic link of the library:
-
-`yarn link`
-
-`yarn build.watch` (this builds the library on each save, so your changes will be reflected inside VuePress, thanks to the dynamic link)
-
-Inside the Vuepress project
-
-`yarn link <library project name>`
-
-`yarn docs:dev`
-
-Currently you need to manually sync .md files between the library and VuePress code bases. Best workflow could be to write documentation inside VuePress and then finally sync with matching file in library.
-
-## Running with Docker (WIP)
-
-If you don't want or cannot install node and other dependencies, you can run the development setup locally in a container like this:
-
-`docker-compose up`
-
-Image can be rebuilt with `docker-compose build` if needed for example after a node package was added.
-
-## Making a release
+The library is published in 
+- Core library [npm](https://www.npmjs.com/package/@itcenteratunihelsinki/huds-lib)
+- React wrapper [npm](https://www.npmjs.com/package/@itcenteratunihelsinki/huds-lib-react)  
 
+And documentation is hosted at [https://static.helsinki.fi/ds/](https://static.helsinki.fi/ds/)
 

package/components/color-box.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface ColorBox extends Components.ColorBox, HTMLElement {}
-export const ColorBox: {
-  prototype: ColorBox;
-  new (): ColorBox;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/color-box.js

@@ -1,35 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const colorBoxCss = ":host{display:block}";
-
-const ColorBox$1 = /*@__PURE__*/ proxyCustomElement(class ColorBox extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get style() { return colorBoxCss; }
-}, [1, "color-box"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["color-box"];
-  components.forEach(tagName => { switch (tagName) {
-    case "color-box":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ColorBox$1);
-      }
-      break;
-  } });
-}
-
-const ColorBox = ColorBox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ColorBox, defineCustomElement };
-
-//# sourceMappingURL=color-box.js.map

package/components/color-box.js.map

@@ -1 +0,0 @@
-{"file":"color-box.js","mappings":";;AAAA,MAAM,WAAW,GAAG,sBAAsB;;MCO7BA,UAAQ;;;;;;EACnB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["ColorBox"],"sources":["./src/components/color-box/color-box.css?tag=color-box&encapsulation=shadow","./src/components/color-box/color-box.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"],"version":3}

package/components/hy-baseline.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyBaseline extends Components.HyBaseline, HTMLElement {}
-export const HyBaseline: {
-  prototype: HyBaseline;
-  new (): HyBaseline;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-baseline.js

@@ -1,46 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as css } from './emotion.esm.js';
-
-const baselineCss = "div.hy-baseline{display:block}";
-
-const createCss = (value) => {
-  return css `
-    > * + * {
-      margin-top: ${value}rem;
-      display: block;
-    }
-  `;
-};
-const Baseline = /*@__PURE__*/ proxyCustomElement(class Baseline extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.margin = 1;
-  }
-  render() {
-    return (h("div", { class: createCss(this.margin) }, h("slot", null)));
-  }
-  static get style() { return baselineCss; }
-}, [4, "hy-baseline", {
-    "margin": [2]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-baseline"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-baseline":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Baseline);
-      }
-      break;
-  } });
-}
-
-const HyBaseline = Baseline;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyBaseline, defineCustomElement };
-
-//# sourceMappingURL=hy-baseline.js.map

package/components/hy-baseline.js.map

@@ -1 +0,0 @@
-{"file":"hy-baseline.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,gCAAgC;;ACGpD,MAAM,SAAS,GAAG,CAAC,KAAa;EAC9B,OAAO,GAAG,CAAA;;oBAEQ,KAAK;;;GAGtB,CAAC;AACJ,CAAC,CAAC;MAOW,QAAQ;;;;kBAIM,CAAC;;EAC1B,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,IAChC,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/baseline/baseline.css?tag=hy-baseline","./src/components/baseline/baseline.tsx"],"sourcesContent":["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"],"version":3}

package/components/hy-box-container.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyBoxContainer extends Components.HyBoxContainer, HTMLElement {}
-export const HyBoxContainer: {
-  prototype: HyBoxContainer;
-  new (): HyBoxContainer;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-box-container.js

@@ -1,45 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as css } from './emotion.esm.js';
-
-const hyBoxContainerCss = ":host{display:block}";
-
-const HyBoxContainer$1 = /*@__PURE__*/ proxyCustomElement(class HyBoxContainer extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.wrap = true;
-    this.maxWidth = true;
-  }
-  render() {
-    return (h(Host, { style: { width: "100%", display: "flex", flex: "1", justifyContent: "center" } }, h("div", { class: css `
-            display: flex;
-            width: 100%;
-            flex-wrap: ${this.wrap ? "wrap" : "no-wrap"};
-            max-width: ${this.maxWidth ? "90rem" : "100%"};
-          ` }, h("slot", null))));
-  }
-  static get style() { return hyBoxContainerCss; }
-}, [4, "hy-box-container", {
-    "wrap": [4],
-    "maxWidth": [4, "max-width"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-box-container"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-box-container":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyBoxContainer$1);
-      }
-      break;
-  } });
-}
-
-const HyBoxContainer = HyBoxContainer$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyBoxContainer, defineCustomElement };
-
-//# sourceMappingURL=hy-box-container.js.map

package/components/hy-box-container.js.map

@@ -1 +0,0 @@
-{"file":"hy-box-container.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,sBAAsB;;MCQnCA,gBAAc;;;;gBAID,IAAI;oBAIA,IAAI;;EAChC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,cAAc,EAAE,QAAQ,EAAC,IAChF,WACE,KAAK,EAAE,GAAG,CAAA;;;yBAGK,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,SAAS;yBAC9B,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,MAAM;WAC9C,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HyBoxContainer"],"sources":["./src/components/hy-box-container/hy-box-container.css?tag=hy-box-container","./src/components/hy-box-container/hy-box-container.tsx"],"sourcesContent":[":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"],"version":3}

package/components/hy-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyButton extends Components.HyButton, HTMLElement {}
-export const HyButton: {
-  prototype: HyButton;
-  new (): HyButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-button.js

@@ -1,113 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
-
-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 = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    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 ? (h(Host, { "icon-right": "hy-icon-arrow-right", "aria-label": this.ariaLabel }, h("div", { style: { display: "flex" } }, h("a", { class: classAttributes.join(" "), href: this.url, target: target }, h("span", { class: "hy-button__text" }, h("slot", null)), h("span", { class: "hy-button__icon" }, h("hy-icon", { icon: "hy-icon-arrow-right", fill: iconFillColor, size: 13 })))))) : (h(Host, { "aria-label": this.ariaLabel }, h("button", Object.assign({ type: this.buttonType, class: classAttributes.join(" "), disabled: this.disabled }, props), !!this.icon && (h("span", { class: "hy-button__icon hy-button__icon--left" }, h("hy-icon", { icon: this.icon, fill: iconFillColor, size: 13 }))), h("span", { class: "hy-button__text" }, h("slot", null)), !!this.iconRight && (h("span", { class: "hy-button__icon hy-button__icon--right" }, h("hy-icon", { icon: this.iconRight, fill: iconFillColor, size: 13 }))))));
-  }
-  static get style() { return buttonCss; }
-}, [4, "hy-button", {
-    "buttonType": [1, "button-type"],
-    "buttonClasses": [1, "button-classes"],
-    "variant": [1],
-    "state": [1],
-    "size": [1],
-    "disabled": [4],
-    "url": [1],
-    "ariaLabel": [1, "aria-label"],
-    "isExternal": [4, "is-external"],
-    "icon": [1],
-    "iconRight": [1, "icon-right"],
-    "attrs": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-button", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Button);
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const HyButton = Button;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyButton, defineCustomElement };
-
-//# sourceMappingURL=hy-button.js.map

package/components/hy-button.js.map

@@ -1 +0,0 @@
-{"file":"hy-button.js","mappings":"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","names":[],"sources":["./src/global/colors.ts","./src/components/button/button.scss?tag=hy-button","./src/components/button/button.tsx"],"sourcesContent":["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"],"version":3}

package/components/hy-docs-container.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyDocsContainer extends Components.HyDocsContainer, HTMLElement {}
-export const HyDocsContainer: {
-  prototype: HyDocsContainer;
-  new (): HyDocsContainer;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-docs-container.js

@@ -1,34 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const docsContainerCss = "div.hy-docs-container{display:block;margin:2rem 0}";
-
-const DocsContainer = /*@__PURE__*/ proxyCustomElement(class DocsContainer extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return (h("div", { class: "hy-docs-container" }, h("slot", null)));
-  }
-  static get style() { return docsContainerCss; }
-}, [4, "hy-docs-container"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-docs-container"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-docs-container":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DocsContainer);
-      }
-      break;
-  } });
-}
-
-const HyDocsContainer = DocsContainer;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyDocsContainer, defineCustomElement };
-
-//# sourceMappingURL=hy-docs-container.js.map

package/components/hy-docs-container.js.map

@@ -1 +0,0 @@
-{"file":"hy-docs-container.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,oDAAoD;;MCOhE,aAAa;;;;;EACxB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/docs-container/docs-container.css?tag=hy-docs-container","./src/components/docs-container/docs-container.tsx"],"sourcesContent":["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"],"version":3}

package/components/hy-grid-container.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyGridContainer extends Components.HyGridContainer, HTMLElement {}
-export const HyGridContainer: {
-  prototype: HyGridContainer;
-  new (): HyGridContainer;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-grid-container.js

@@ -1,35 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const gridContainerCss = ":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-grid--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-grid--container{width:100%}}@media only screen and (min-width: 60rem){.hy-grid--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-grid--container{width:100%;max-width:75rem}}@media only screen and (min-width: 1601px){.hy-grid--container{width:100%;max-width:90rem}}";
-
-const GridContainer = /*@__PURE__*/ proxyCustomElement(class GridContainer extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    const classAttributes = ["hy-grid--container"];
-    return (h("div", { class: classAttributes.join(" ") }, h("slot", null)));
-  }
-  static get style() { return gridContainerCss; }
-}, [4, "hy-grid-container"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-grid-container"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-grid-container":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, GridContainer);
-      }
-      break;
-  } });
-}
-
-const HyGridContainer = GridContainer;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyGridContainer, defineCustomElement };
-
-//# sourceMappingURL=hy-grid-container.js.map

package/components/hy-grid-container.js.map

@@ -1 +0,0 @@
-{"file":"hy-grid-container.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mmDAAmmD;;MCO/mD,aAAa;;;;;EACxB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,oBAAoB,CAAC,CAAC;IAE/C,QACE,WAAK,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACnC,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/grid-container/grid-container.scss?tag=hy-grid-container","./src/components/grid-container/grid-container.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-grid--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  @media only screen and (min-width: $xlarge) {\n    width: 100%;\n    max-width: 90rem;\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-grid-container\",\n  styleUrl: \"grid-container.scss\",\n  shadow: false,\n})\nexport class GridContainer {\n  render() {\n    const classAttributes = [\"hy-grid--container\"];\n\n    return (\n      <div class={classAttributes.join(\" \")}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/components/hy-grid-item.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyGridItem extends Components.HyGridItem, HTMLElement {}
-export const HyGridItem: {
-  prototype: HyGridItem;
-  new (): HyGridItem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-grid-item.js

@@ -1,51 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as GridColumns, j as GridColumnsSm, k as GridColumnsLg, l as GridAlignVariants } from './utils.js';
-
-const gridItemCss = ":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-grid-align__left{text-align:left}.hy-grid-align__right{text-align:right}.hy-grid-align__center{text-align:center;margin-left:auto;margin-right:auto}.hy-grid-justify{text-align:justify}.hy-grid-hidden-sm{display:none}.hy-grid__col-1,.hy-grid__col-2,.hy-grid__col-3,.hy-grid__col-4,.hy-grid__col-5,.hy-grid__col-6,.hy-grid__col-7,.hy-grid__col-8,.hy-grid__col-9,.hy-grid__col-10,.hy-grid__col-11,.hy-grid__col-12{width:98%}.hy-grid__col-1-sm{width:6.3333333333%}.hy-grid__col-2-sm{width:14.6666666667%}.hy-grid__col-3-sm{width:23%}.hy-grid__col-4-sm{width:31.3333333333%}.hy-grid__col-5-sm{width:39.6666666667%}.hy-grid__col-6-sm{width:48%}.hy-grid__col-7-sm{width:56.3333333333%}.hy-grid__col-8-sm{width:64.6666666667%}.hy-grid__col-9-sm{width:73%}.hy-grid__col-10-sm{width:81.3333333333%}.hy-grid__col-11-sm{width:89.6666666667%}.hy-grid__col-12-sm{width:98%}@media only screen and (min-width: 48em){.hy-grid__col-1{width:6.3333333333%}.hy-grid__col-2{width:14.6666666667%}.hy-grid__col-3{width:23%}.hy-grid__col-4{width:31.3333333333%}.hy-grid__col-5{width:39.6666666667%}.hy-grid__col-6{width:48%}.hy-grid__col-7{width:56.3333333333%}.hy-grid__col-8{width:64.6666666667%}.hy-grid__col-9{width:73%}.hy-grid__col-10{width:81.3333333333%}.hy-grid__col-11{width:89.6666666667%}.hy-grid__col-12{width:98%}.hidden-sm{display:block}}@media only screen and (min-width: 60em){.hy-grid__col-1-lg{width:6.3333333333%}.hy-grid__col-2-lg{width:14.6666666667%}.hy-grid__col-3-lg{width:23%}.hy-grid__col-4-lg{width:31.3333333333%}.hy-grid__col-5-lg{width:39.6666666667%}.hy-grid__col-6-lg{width:48%}.hy-grid__col-7-lg{width:56.3333333333%}.hy-grid__col-8-lg{width:64.6666666667%}.hy-grid__col-9-lg{width:73%}.hy-grid__col-10-lg{width:81.3333333333%}.hy-grid__col-11-lg{width:89.6666666667%}.hy-grid__col-12-lg{width:98%}}";
-
-const GridItem = /*@__PURE__*/ proxyCustomElement(class GridItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.columns = GridColumns.default;
-    this.columnssm = GridColumnsSm.default;
-    this.columnslg = GridColumnsLg.default;
-    this.contentalign = GridAlignVariants.default;
-  }
-  render() {
-    const classAttributes = [
-      "hy-grid-item",
-      `hy-grid__col-${this.columnssm}-sm`,
-      `hy-grid__col-${this.columns}`,
-      `hy-grid__col-${this.columnslg}-lg`,
-      `hy-grid-align__${this.contentalign}`,
-    ];
-    return (h(Host, { class: classAttributes.join(" ") }, h("slot", null)));
-  }
-  static get style() { return gridItemCss; }
-}, [4, "hy-grid-item", {
-    "columns": [1],
-    "columnssm": [1],
-    "columnslg": [1],
-    "contentalign": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-grid-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-grid-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, GridItem);
-      }
-      break;
-  } });
-}
-
-const HyGridItem = GridItem;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyGridItem, defineCustomElement };
-
-//# sourceMappingURL=hy-grid-item.js.map

package/components/hy-grid-item.js.map

@@ -1 +0,0 @@
-{"file":"hy-grid-item.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,y8FAAy8F;;MCQh9F,QAAQ;;;;mBACY,WAAW,CAAC,OAAO;qBACf,aAAa,CAAC,OAAO;qBACrB,aAAa,CAAC,OAAO;wBACd,iBAAiB,CAAC,OAAO;;EAEnE,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,cAAc;MACd,gBAAgB,IAAI,CAAC,SAAS,KAAK;MACnC,gBAAgB,IAAI,CAAC,OAAO,EAAE;MAC9B,gBAAgB,IAAI,CAAC,SAAS,KAAK;MACnC,kBAAkB,IAAI,CAAC,YAAY,EAAE;KACtC,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACpC,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/grid-item/grid-item.scss?tag=hy-grid-item","./src/components/grid-item/grid-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-grid-align__left {\n  text-align: left;\n}\n\n.hy-grid-align__right {\n  text-align: right;\n}\n\n.hy-grid-align__center {\n  text-align: center;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.hy-grid-justify {\n  text-align: justify;\n}\n\n.hy-grid-hidden-sm {\n  display: none;\n}\n\n// grid\n$width: 98%;\n$gutter: 2%;\n\n@media only screen and (min-width: $xlarge) {\n  $gutter: 3.5%;\n}\n\n$narrow: 30em; // 480px\n$medium: 48em; // 768px\n$wide: 60em; // 960px\n\n.hy-grid__col-1,\n.hy-grid__col-2,\n.hy-grid__col-3,\n.hy-grid__col-4,\n.hy-grid__col-5,\n.hy-grid__col-6,\n.hy-grid__col-7,\n.hy-grid__col-8,\n.hy-grid__col-9,\n.hy-grid__col-10,\n.hy-grid__col-11,\n.hy-grid__col-12 {\n  width: $width;\n}\n\n.hy-grid__col-1-sm {\n  width: calc($width / 12) - calc($gutter * 11 / 12);\n}\n.hy-grid__col-2-sm {\n  width: calc($width / 6) - calc($gutter * 10 / 12);\n}\n.hy-grid__col-3-sm {\n  width: calc($width / 4) - calc($gutter * 9 / 12);\n}\n.hy-grid__col-4-sm {\n  width: calc($width / 3) - calc($gutter * 8 / 12);\n}\n.hy-grid__col-5-sm {\n  width: calc($width / calc(12 / 5)) - calc($gutter * 7 / 12);\n}\n.hy-grid__col-6-sm {\n  width: calc($width / 2) - calc($gutter * 6 / 12);\n}\n.hy-grid__col-7-sm {\n  width: calc($width / calc(12 / 7)) - calc($gutter * 5 / 12);\n}\n.hy-grid__col-8-sm {\n  width: calc($width / calc(12 / 8)) - calc($gutter * 4 / 12);\n}\n.hy-grid__col-9-sm {\n  width: calc($width / calc(12 / 9)) - calc($gutter * 3 / 12);\n}\n.hy-grid__col-10-sm {\n  width: calc($width / calc(12 / 10)) - calc($gutter * 2 / 12);\n}\n.hy-grid__col-11-sm {\n  width: calc($width / calc(12 / 11)) - calc($gutter * 1 / 12);\n}\n.hy-grid__col-12-sm {\n  width: $width;\n}\n\n@media only screen and (min-width: $medium) {\n  .hy-grid__col-1 {\n    width: calc($width / 12) - calc($gutter * 11 / 12);\n  }\n  .hy-grid__col-2 {\n    width: calc($width / 6) - calc($gutter * 10 / 12);\n  }\n  .hy-grid__col-3 {\n    width: calc($width / 4) - calc($gutter * 9 / 12);\n  }\n  .hy-grid__col-4 {\n    width: calc($width / 3) - calc($gutter * 8 / 12);\n  }\n  .hy-grid__col-5 {\n    width: calc($width / calc(12 / 5)) - calc($gutter * 7 / 12);\n  }\n  .hy-grid__col-6 {\n    width: calc($width / 2) - calc($gutter * 6 / 12);\n  }\n  .hy-grid__col-7 {\n    width: calc($width / calc(12 / 7)) - calc($gutter * 5 / 12);\n  }\n  .hy-grid__col-8 {\n    width: calc($width / calc(12 / 8)) - calc($gutter * 4 / 12);\n  }\n  .hy-grid__col-9 {\n    width: calc($width / calc(12 / 9)) - calc($gutter * 3 / 12);\n  }\n  .hy-grid__col-10 {\n    width: calc($width / calc(12 / 10)) - calc($gutter * 2 / 12);\n  }\n  .hy-grid__col-11 {\n    width: calc($width / calc(12 / 11)) - calc($gutter * 1 / 12);\n  }\n  .hy-grid__col-12 {\n    width: $width;\n  }\n\n  .hidden-sm {\n    display: block;\n  }\n}\n\n@media only screen and (min-width: $wide) {\n  .hy-grid__col-1-lg {\n    width: calc($width / 12) - calc($gutter * 11 / 12);\n  }\n  .hy-grid__col-2-lg {\n    width: calc($width / 6) - calc($gutter * 10 / 12);\n  }\n  .hy-grid__col-3-lg {\n    width: calc($width / 4) - calc($gutter * 9 / 12);\n  }\n  .hy-grid__col-4-lg {\n    width: calc($width / 3) - calc($gutter * 8 / 12);\n  }\n  .hy-grid__col-5-lg {\n    width: calc($width / calc(12 / 5)) - calc($gutter * 7 / 12);\n  }\n  .hy-grid__col-6-lg {\n    width: calc($width / 2) - calc($gutter * 6 / 12);\n  }\n  .hy-grid__col-7-lg {\n    width: calc($width / calc(12 / 7)) - calc($gutter * 5 / 12);\n  }\n  .hy-grid__col-8-lg {\n    width: calc($width / calc(12 / 8)) - calc($gutter * 4 / 12);\n  }\n  .hy-grid__col-9-lg {\n    width: calc($width / calc(12 / 9)) - calc($gutter * 3 / 12);\n  }\n  .hy-grid__col-10-lg {\n    width: calc($width / calc(12 / 10)) - calc($gutter * 2 / 12);\n  }\n  .hy-grid__col-11-lg {\n    width: calc($width / calc(12 / 11)) - calc($gutter * 1 / 12);\n  }\n  .hy-grid__col-12-lg {\n    width: $width;\n  }\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {GridColumns, GridColumnsSm, GridColumnsLg, GridAlignVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-grid-item\",\n  styleUrl: \"grid-item.scss\",\n  shadow: false,\n})\nexport class GridItem {\n  @Prop() columns: GridColumns = GridColumns.default;\n  @Prop() columnssm: GridColumnsSm = GridColumnsSm.default;\n  @Prop() columnslg: GridColumnsLg = GridColumnsLg.default;\n  @Prop() contentalign: GridAlignVariants = GridAlignVariants.default;\n\n  render() {\n    const classAttributes = [\n      \"hy-grid-item\",\n      `hy-grid__col-${this.columnssm}-sm`,\n      `hy-grid__col-${this.columns}`,\n      `hy-grid__col-${this.columnslg}-lg`,\n      `hy-grid-align__${this.contentalign}`,\n    ];\n\n    return (\n      <Host class={classAttributes.join(\" \")}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/hy-grid-row.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyGridRow extends Components.HyGridRow, HTMLElement {}
-export const HyGridRow: {
-  prototype: HyGridRow;
-  new (): HyGridRow;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;