@biggive/components 202401191800.0.0 → 202401231203.0.0

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-626e8c0c.js');
+const index = require('./index-fb5fdee7.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/collection/collection-manifest.json

@@ -57,7 +57,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.10.0",
+    "version": "4.11.0",
     "typescriptVersion": "5.3.3"
   },
   "collections": [],

package/dist/components/biggive-accordion-entry.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 
 const biggiveAccordionEntryCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}";
+const BiggiveAccordionEntryStyle0 = biggiveAccordionEntryCss;
 
 const BiggiveAccordionEntry$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveAccordionEntry extends HTMLElement {
     constructor() {
@@ -13,7 +14,7 @@ const BiggiveAccordionEntry$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveAc
         return null;
     }
     get host() { return this; }
-    static get style() { return biggiveAccordionEntryCss; }
+    static get style() { return BiggiveAccordionEntryStyle0; }
 }, [1, "biggive-accordion-entry", {
         "heading": [1]
     }]);

package/dist/components/biggive-accordion-entry.js.map

@@ -1 +1 @@
-{"file":"biggive-accordion-entry.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,6FAA6F;;MCOjHA,uBAAqB;;;;;uBAGN,EAAE;;IAE5B,MAAM;QACJ,OAAO,IAAI,CAAC;KACb;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveAccordionEntry"],"sources":["src/components/biggive-accordion-entry/biggive-accordion-entry.scss?tag=biggive-accordion-entry&encapsulation=shadow","src/components/biggive-accordion-entry/biggive-accordion-entry.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Prop, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-accordion-entry',\n  styleUrl: 'biggive-accordion-entry.scss',\n  shadow: true,\n})\nexport class BiggiveAccordionEntry {\n  @Element() host: HTMLBiggiveAccordionEntryElement;\n\n  @Prop() heading: string = '';\n\n  render() {\n    return null;\n  }\n}\n"],"version":3}
+{"file":"biggive-accordion-entry.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,6FAA6F,CAAC;AAC/H,oCAAe,wBAAwB;;MCM1BA,uBAAqB;;;;;uBAGN,EAAE;;IAE5B,MAAM;QACJ,OAAO,IAAI,CAAC;KACb;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveAccordionEntry"],"sources":["src/components/biggive-accordion-entry/biggive-accordion-entry.scss?tag=biggive-accordion-entry&encapsulation=shadow","src/components/biggive-accordion-entry/biggive-accordion-entry.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Prop, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-accordion-entry',\n  styleUrl: 'biggive-accordion-entry.scss',\n  shadow: true,\n})\nexport class BiggiveAccordionEntry {\n  @Element() host: HTMLBiggiveAccordionEntryElement;\n\n  @Prop() heading: string = '';\n\n  render() {\n    return null;\n  }\n}\n"],"version":3}

package/dist/components/biggive-accordion.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveAccordionCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .entry h3.heading{position:relative;margin:25px 0 0 0;padding:15px 60px 10px 20px;border-bottom:1px solid #000000;cursor:pointer}.container .entry h3.heading span.arrow{display:block;position:absolute;right:20px;top:10px;width:40px;height:20px;text-align:center}.container .entry .content{overflow:hidden;max-height:0;padding:0 20px}.container .entry.expanded .content{max-height:100%}.container .entry.expanded span.arrow{transform:rotate(-180deg)}.container.heading-colour-primary .entry h3.heading svg path{stroke:#2C089B}.container.heading-colour-primary h3.heading{color:#2C089B}.container.text-colour-primary .content{color:#2C089B}.container.heading-colour-secondary .entry h3.heading svg path{stroke:#2AF135}.container.heading-colour-secondary h3.heading{color:#2AF135}.container.text-colour-secondary .content{color:#2AF135}.container.heading-colour-tertiary .entry h3.heading svg path{stroke:#FF7272}.container.heading-colour-tertiary h3.heading{color:#FF7272}.container.text-colour-tertiary .content{color:#FF7272}.container.heading-colour-brand-1 .entry h3.heading svg path{stroke:#B30510}.container.heading-colour-brand-1 h3.heading{color:#B30510}.container.text-colour-brand-1 .content{color:#B30510}.container.heading-colour-brand-2 .entry h3.heading svg path{stroke:#6E0887}.container.heading-colour-brand-2 h3.heading{color:#6E0887}.container.text-colour-brand-2 .content{color:#6E0887}.container.heading-colour-brand-3 .entry h3.heading svg path{stroke:#50B400}.container.heading-colour-brand-3 h3.heading{color:#50B400}.container.text-colour-brand-3 .content{color:#50B400}.container.heading-colour-brand-4 .entry h3.heading svg path{stroke:#FFE500}.container.heading-colour-brand-4 h3.heading{color:#FFE500}.container.text-colour-brand-4 .content{color:#FFE500}.container.heading-colour-brand-5 .entry h3.heading svg path{stroke:#F07D00}.container.heading-colour-brand-5 h3.heading{color:#F07D00}.container.text-colour-brand-5 .content{color:#F07D00}.container.heading-colour-brand-cc-red .entry h3.heading svg path{stroke:#B30510}.container.heading-colour-brand-cc-red h3.heading{color:#B30510}.container.text-colour-brand-cc-red .content{color:#B30510}.container.heading-colour-brand-wgmf-purple .entry h3.heading svg path{stroke:#6E0887}.container.heading-colour-brand-wgmf-purple h3.heading{color:#6E0887}.container.text-colour-brand-wgmf-purple .content{color:#6E0887}.container.heading-colour-brand-gmf-green .entry h3.heading svg path{stroke:#50B400}.container.heading-colour-brand-gmf-green h3.heading{color:#50B400}.container.text-colour-brand-gmf-green .content{color:#50B400}.container.heading-colour-brand-emf-yellow .entry h3.heading svg path{stroke:#FFE500}.container.heading-colour-brand-emf-yellow h3.heading{color:#FFE500}.container.text-colour-brand-emf-yellow .content{color:#FFE500}.container.heading-colour-brand-c4c-orange .entry h3.heading svg path{stroke:#F07D00}.container.heading-colour-brand-c4c-orange h3.heading{color:#F07D00}.container.text-colour-brand-c4c-orange .content{color:#F07D00}.container.heading-colour-brand-afa-pink .entry h3.heading svg path{stroke:#BF387D}.container.heading-colour-brand-afa-pink h3.heading{color:#BF387D}.container.text-colour-brand-afa-pink .content{color:#BF387D}.container.heading-colour-brand-mhf-turquoise .entry h3.heading svg path{stroke:#62CFC9}.container.heading-colour-brand-mhf-turquoise h3.heading{color:#62CFC9}.container.text-colour-brand-mhf-turquoise .content{color:#62CFC9}.container.heading-colour-brand-grey .entry h3.heading svg path{stroke:#CBC8C8}.container.heading-colour-brand-grey h3.heading{color:#CBC8C8}.container.text-colour-brand-grey .content{color:#CBC8C8}.container.heading-colour-white .entry h3.heading svg path{stroke:#FFFFFF}.container.heading-colour-white h3.heading{color:#FFFFFF}.container.text-colour-white .content{color:#FFFFFF}.container.heading-colour-black .entry h3.heading svg path{stroke:#000000}.container.heading-colour-black h3.heading{color:#000000}.container.text-colour-black .content{color:#000000}.container.heading-colour-grey-extra-light .entry h3.heading svg path{stroke:#D7D7D7}.container.heading-colour-grey-extra-light h3.heading{color:#D7D7D7}.container.text-colour-grey-extra-light .content{color:#D7D7D7}.container.heading-colour-grey-light .entry h3.heading svg path{stroke:#E8E8E8}.container.heading-colour-grey-light h3.heading{color:#E8E8E8}.container.text-colour-grey-light .content{color:#E8E8E8}.container.heading-colour-grey-medium .entry h3.heading svg path{stroke:#8A8A8A}.container.heading-colour-grey-medium h3.heading{color:#8A8A8A}.container.text-colour-grey-medium .content{color:#8A8A8A}.container.heading-colour-grey-dark .entry h3.heading svg path{stroke:#4A4A4A}.container.heading-colour-grey-dark h3.heading{color:#4A4A4A}.container.text-colour-grey-dark .content{color:#4A4A4A}.container.heading-colour-brand-6 .entry h3.heading svg path{stroke:#62CFC9}.container.heading-colour-brand-6 h3.heading{color:#62CFC9}.container.text-colour-brand-6 .content{color:#62CFC9}";
+const BiggiveAccordionStyle0 = biggiveAccordionCss;
 
 const BiggiveAccordion$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveAccordion extends HTMLElement {
     constructor() {
@@ -34,7 +35,7 @@ const BiggiveAccordion$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveAccordi
             : this.children.map(entry => (h("div", { class: "entry" }, h("h3", { class: "heading", onClick: this.toggleSection, title: "Expand section" }, entry.heading, h("span", { class: "arrow" }, h("svg", { width: "15", height: "9", viewBox: "0 0 15 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.1074 0.999859L7.55357 7.55371L0.999718 0.99986", stroke: "black", "stroke-width": "2" })))), h("div", { class: "content", innerHTML: entry.innerHTML })))))));
     }
     get host() { return this; }
-    static get style() { return biggiveAccordionCss; }
+    static get style() { return BiggiveAccordionStyle0; }
 }, [1, "biggive-accordion", {
         "spaceBelow": [2, "space-below"],
         "textColour": [1, "text-colour"],

package/dist/components/biggive-accordion.js.map

@@ -1 +1 @@
-{"file":"biggive-accordion.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2vOAA2vO;;MCS1wOA,kBAAgB;;;;;0BAGS,CAAC;0BAEH,OAAO;6BAEJ,SAAS;;;IAI9C,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAA4C,CAAC;KAC3F;IAEO,aAAa,CAAC,CAAa;QACjC,MAAM,MAAM,GAAI,CAAC,CAAC,MAAmB,CAAC;QACtC,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAE,CAAC;QACxC,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;QAE7C,IAAI,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACxC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACnC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;SAC/C;aAAM;YACL,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAChC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,kBAAkB,GAAG,IAAI,CAAC,aAAa,IACvI,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,QAAQ,KAAK,SAAS;cACxB,EAAE;cACF,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,KACrB,WAAK,KAAK,EAAC,OAAO,IAChB,UAAI,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,gBAAgB,IACpE,KAAK,CAAC,OAAO,EACd,YAAM,KAAK,EAAC,OAAO,IACjB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,oDAAoD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CAC3F,CACD,CACJ,EACL,WAAK,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAQ,CACnD,CACP,CAAC,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveAccordion"],"sources":["src/components/biggive-accordion/biggive-accordion.scss?tag=biggive-accordion&encapsulation=shadow","src/components/biggive-accordion/biggive-accordion.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n\n  .entry {\n    h3.heading {\n      position: relative;\n      margin: 25px 0 0 0;\n      padding: 15px 60px 10px 20px;\n      border-bottom: 1px solid $colour-black;\n      cursor: pointer;\n      span.arrow {\n        display: block;\n        position: absolute;\n        right: 20px;\n        top: 10px;\n        width: 40px;\n        height: 20px;\n        text-align: center;\n      }\n    }\n    .content {\n      overflow: hidden;\n      max-height: 0;\n      padding: 0 20px;\n    }\n    &.expanded {\n      .content {\n        max-height: 100%;\n      }\n      span.arrow {\n        transform: rotate(-180deg);\n      }\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.heading-colour-#{$key} .entry h3.heading svg path { stroke: $colour; }\n    &.heading-colour-#{$key} h3.heading { color: $colour; }\n    &.text-colour-#{$key} .content { color: $colour; }\n  }\n\n\n}\n\n\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-accordion',\n  styleUrl: 'biggive-accordion.scss',\n  shadow: true,\n})\nexport class BiggiveAccordion {\n  @Element() host: HTMLBiggiveAccordionElement;\n\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() headingColour: brandColour = 'primary';\n\n  @State() children: Array<HTMLBiggiveAccordionEntryElement>;\n\n  componentWillLoad() {\n    this.children = Array.from(this.host.children) as Array<HTMLBiggiveAccordionEntryElement>;\n  }\n\n  private toggleSection(e: MouseEvent) {\n    const target = (e.target as Element)!;\n    const entry = target.closest('.entry')!;\n    const arrow = entry.querySelector('.arrow')!;\n\n    if (entry.classList.contains('expanded')) {\n      entry.classList.remove('expanded');\n      arrow.setAttribute('title', 'Expand section');\n    } else {\n      entry.classList.add('expanded');\n      arrow.setAttribute('title', 'Collapse section');\n    }\n  }\n\n  render() {\n    return (\n      <div class={'container' + ' space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' heading-colour-' + this.headingColour}>\n        <div class=\"sleeve\">\n          {this.children === undefined\n            ? []\n            : this.children.map(entry => (\n                <div class=\"entry\">\n                  <h3 class=\"heading\" onClick={this.toggleSection} title=\"Expand section\">\n                    {entry.heading}\n                    <span class=\"arrow\">\n                      <svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M14.1074 0.999859L7.55357 7.55371L0.999718 0.99986\" stroke=\"black\" stroke-width=\"2\" />\n                      </svg>\n                    </span>\n                  </h3>\n                  <div class=\"content\" innerHTML={entry.innerHTML}></div>\n                </div>\n              ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-accordion.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2vOAA2vO,CAAC;AACxxO,+BAAe,mBAAmB;;MCQrBA,kBAAgB;;;;;0BAGS,CAAC;0BAEH,OAAO;6BAEJ,SAAS;;;IAI9C,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAA4C,CAAC;KAC3F;IAEO,aAAa,CAAC,CAAa;QACjC,MAAM,MAAM,GAAI,CAAC,CAAC,MAAmB,CAAC;QACtC,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAE,CAAC;QACxC,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;QAE7C,IAAI,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACxC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACnC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;SAC/C;aAAM;YACL,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAChC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,kBAAkB,GAAG,IAAI,CAAC,aAAa,IACvI,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,QAAQ,KAAK,SAAS;cACxB,EAAE;cACF,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,KACrB,WAAK,KAAK,EAAC,OAAO,IAChB,UAAI,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,gBAAgB,IACpE,KAAK,CAAC,OAAO,EACd,YAAM,KAAK,EAAC,OAAO,IACjB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,oDAAoD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CAC3F,CACD,CACJ,EACL,WAAK,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAQ,CACnD,CACP,CAAC,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveAccordion"],"sources":["src/components/biggive-accordion/biggive-accordion.scss?tag=biggive-accordion&encapsulation=shadow","src/components/biggive-accordion/biggive-accordion.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n\n\n  .entry {\n    h3.heading {\n      position: relative;\n      margin: 25px 0 0 0;\n      padding: 15px 60px 10px 20px;\n      border-bottom: 1px solid $colour-black;\n      cursor: pointer;\n      span.arrow {\n        display: block;\n        position: absolute;\n        right: 20px;\n        top: 10px;\n        width: 40px;\n        height: 20px;\n        text-align: center;\n      }\n    }\n    .content {\n      overflow: hidden;\n      max-height: 0;\n      padding: 0 20px;\n    }\n    &.expanded {\n      .content {\n        max-height: 100%;\n      }\n      span.arrow {\n        transform: rotate(-180deg);\n      }\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.heading-colour-#{$key} .entry h3.heading svg path { stroke: $colour; }\n    &.heading-colour-#{$key} h3.heading { color: $colour; }\n    &.text-colour-#{$key} .content { color: $colour; }\n  }\n\n\n}\n\n\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-accordion',\n  styleUrl: 'biggive-accordion.scss',\n  shadow: true,\n})\nexport class BiggiveAccordion {\n  @Element() host: HTMLBiggiveAccordionElement;\n\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() headingColour: brandColour = 'primary';\n\n  @State() children: Array<HTMLBiggiveAccordionEntryElement>;\n\n  componentWillLoad() {\n    this.children = Array.from(this.host.children) as Array<HTMLBiggiveAccordionEntryElement>;\n  }\n\n  private toggleSection(e: MouseEvent) {\n    const target = (e.target as Element)!;\n    const entry = target.closest('.entry')!;\n    const arrow = entry.querySelector('.arrow')!;\n\n    if (entry.classList.contains('expanded')) {\n      entry.classList.remove('expanded');\n      arrow.setAttribute('title', 'Expand section');\n    } else {\n      entry.classList.add('expanded');\n      arrow.setAttribute('title', 'Collapse section');\n    }\n  }\n\n  render() {\n    return (\n      <div class={'container' + ' space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' heading-colour-' + this.headingColour}>\n        <div class=\"sleeve\">\n          {this.children === undefined\n            ? []\n            : this.children.map(entry => (\n                <div class=\"entry\">\n                  <h3 class=\"heading\" onClick={this.toggleSection} title=\"Expand section\">\n                    {entry.heading}\n                    <span class=\"arrow\">\n                      <svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M14.1074 0.999859L7.55357 7.55371L0.999718 0.99986\" stroke=\"black\" stroke-width=\"2\" />\n                      </svg>\n                    </span>\n                  </h3>\n                  <div class=\"content\" innerHTML={entry.innerHTML}></div>\n                </div>\n              ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-article-card.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveArticleCardCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.align-right{text-align:right}.container{height:100%;width:100%;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.container .sleeve{height:100%;box-sizing:border-box;background-size:cover;padding:15px 15px 10px 15px}.container .sleeve .content-wrap{height:100%;display:flex;flex-direction:column}.container .meta{margin-bottom:10px}.container .meta .slug{font-size:13px;line-height:17px;margin-bottom:5px}.container .meta .date{font-size:13px;line-height:17px;margin-bottom:5px}.container h3{font-size:20px;line-height:24px;font-weight:bold;padding-bottom:15px;margin-bottom:auto}.container h3 a,.container h3 a:hover{text-decoration:none}.container .main-image-container img{width:100%;height:auto;display:inline-block}.container .image-group{display:flex;margin-bottom:15px}.container .image-group .image-container{margin-right:15px}.container .image-group .image-container .image-wrap{border-radius:50%;width:60px;height:60px;background-size:cover;background-position:center center;margin-bottom:5px}.container .image-group .image-container .image-wrap img{display:none}.container .image-label{font-size:11px;line-height:14px}.container .clip-bottom-left-corner-false.clip-top-right-corner-true{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%)}.container .clip-bottom-left-corner-true.clip-top-right-corner-false{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .clip-bottom-left-corner-true.clip-top-right-corner-true{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .main-title-colour-primary h3{color:#2C089B}.container .slug-colour-primary .slug{color:#2C089B}.container .date-colour-primary .date{color:#2C089B}.container .image-label-colour-primary .image-label{color:#2C089B}.container .main-title-colour-secondary h3{color:#2AF135}.container .slug-colour-secondary .slug{color:#2AF135}.container .date-colour-secondary .date{color:#2AF135}.container .image-label-colour-secondary .image-label{color:#2AF135}.container .main-title-colour-tertiary h3{color:#FF7272}.container .slug-colour-tertiary .slug{color:#FF7272}.container .date-colour-tertiary .date{color:#FF7272}.container .image-label-colour-tertiary .image-label{color:#FF7272}.container .main-title-colour-brand-1 h3{color:#B30510}.container .slug-colour-brand-1 .slug{color:#B30510}.container .date-colour-brand-1 .date{color:#B30510}.container .image-label-colour-brand-1 .image-label{color:#B30510}.container .main-title-colour-brand-2 h3{color:#6E0887}.container .slug-colour-brand-2 .slug{color:#6E0887}.container .date-colour-brand-2 .date{color:#6E0887}.container .image-label-colour-brand-2 .image-label{color:#6E0887}.container .main-title-colour-brand-3 h3{color:#50B400}.container .slug-colour-brand-3 .slug{color:#50B400}.container .date-colour-brand-3 .date{color:#50B400}.container .image-label-colour-brand-3 .image-label{color:#50B400}.container .main-title-colour-brand-4 h3{color:#FFE500}.container .slug-colour-brand-4 .slug{color:#FFE500}.container .date-colour-brand-4 .date{color:#FFE500}.container .image-label-colour-brand-4 .image-label{color:#FFE500}.container .main-title-colour-brand-5 h3{color:#F07D00}.container .slug-colour-brand-5 .slug{color:#F07D00}.container .date-colour-brand-5 .date{color:#F07D00}.container .image-label-colour-brand-5 .image-label{color:#F07D00}.container .main-title-colour-brand-cc-red h3{color:#B30510}.container .slug-colour-brand-cc-red .slug{color:#B30510}.container .date-colour-brand-cc-red .date{color:#B30510}.container .image-label-colour-brand-cc-red .image-label{color:#B30510}.container .main-title-colour-brand-wgmf-purple h3{color:#6E0887}.container .slug-colour-brand-wgmf-purple .slug{color:#6E0887}.container .date-colour-brand-wgmf-purple .date{color:#6E0887}.container .image-label-colour-brand-wgmf-purple .image-label{color:#6E0887}.container .main-title-colour-brand-gmf-green h3{color:#50B400}.container .slug-colour-brand-gmf-green .slug{color:#50B400}.container .date-colour-brand-gmf-green .date{color:#50B400}.container .image-label-colour-brand-gmf-green .image-label{color:#50B400}.container .main-title-colour-brand-emf-yellow h3{color:#FFE500}.container .slug-colour-brand-emf-yellow .slug{color:#FFE500}.container .date-colour-brand-emf-yellow .date{color:#FFE500}.container .image-label-colour-brand-emf-yellow .image-label{color:#FFE500}.container .main-title-colour-brand-c4c-orange h3{color:#F07D00}.container .slug-colour-brand-c4c-orange .slug{color:#F07D00}.container .date-colour-brand-c4c-orange .date{color:#F07D00}.container .image-label-colour-brand-c4c-orange .image-label{color:#F07D00}.container .main-title-colour-brand-afa-pink h3{color:#BF387D}.container .slug-colour-brand-afa-pink .slug{color:#BF387D}.container .date-colour-brand-afa-pink .date{color:#BF387D}.container .image-label-colour-brand-afa-pink .image-label{color:#BF387D}.container .main-title-colour-brand-mhf-turquoise h3{color:#62CFC9}.container .slug-colour-brand-mhf-turquoise .slug{color:#62CFC9}.container .date-colour-brand-mhf-turquoise .date{color:#62CFC9}.container .image-label-colour-brand-mhf-turquoise .image-label{color:#62CFC9}.container .main-title-colour-brand-grey h3{color:#CBC8C8}.container .slug-colour-brand-grey .slug{color:#CBC8C8}.container .date-colour-brand-grey .date{color:#CBC8C8}.container .image-label-colour-brand-grey .image-label{color:#CBC8C8}.container .main-title-colour-white h3{color:#FFFFFF}.container .slug-colour-white .slug{color:#FFFFFF}.container .date-colour-white .date{color:#FFFFFF}.container .image-label-colour-white .image-label{color:#FFFFFF}.container .main-title-colour-black h3{color:#000000}.container .slug-colour-black .slug{color:#000000}.container .date-colour-black .date{color:#000000}.container .image-label-colour-black .image-label{color:#000000}.container .main-title-colour-grey-extra-light h3{color:#D7D7D7}.container .slug-colour-grey-extra-light .slug{color:#D7D7D7}.container .date-colour-grey-extra-light .date{color:#D7D7D7}.container .image-label-colour-grey-extra-light .image-label{color:#D7D7D7}.container .main-title-colour-grey-light h3{color:#E8E8E8}.container .slug-colour-grey-light .slug{color:#E8E8E8}.container .date-colour-grey-light .date{color:#E8E8E8}.container .image-label-colour-grey-light .image-label{color:#E8E8E8}.container .main-title-colour-grey-medium h3{color:#8A8A8A}.container .slug-colour-grey-medium .slug{color:#8A8A8A}.container .date-colour-grey-medium .date{color:#8A8A8A}.container .image-label-colour-grey-medium .image-label{color:#8A8A8A}.container .main-title-colour-grey-dark h3{color:#4A4A4A}.container .slug-colour-grey-dark .slug{color:#4A4A4A}.container .date-colour-grey-dark .date{color:#4A4A4A}.container .image-label-colour-grey-dark .image-label{color:#4A4A4A}.container .main-title-colour-brand-6 h3{color:#62CFC9}.container .slug-colour-brand-6 .slug{color:#62CFC9}.container .date-colour-brand-6 .date{color:#62CFC9}.container .image-label-colour-brand-6 .image-label{color:#62CFC9}";
+const BiggiveArticleCardStyle0 = biggiveArticleCardCss;
 
 const BiggiveArticleCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveArticleCard extends HTMLElement {
     constructor() {
@@ -50,7 +51,7 @@ const BiggiveArticleCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveArtic
                 ' clip-top-right-corner-' +
                 this.clipTopRightCorner, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("div", { class: "content-wrap" }, h("div", { class: "meta" }, this.slug != '' ? h("div", { class: "slug text-colour-primary" }, this.slug) : null, this.date != '' ? h("div", { class: "date" }, this.date) : null), this.mainImageUrl != '' ? (h("div", { class: "main-image-container" }, h("div", { class: "image-wrap" }, h("img", { src: this.mainImageUrl, alt: this.mainImageAltText })))) : null, h("h3", { class: "title" }, h("a", { href: this.buttonUrl }, this.mainTitle)), this.image1Url != '' || this.image2Url != '' ? (h("div", { class: "image-group" }, this.image1Url != '' ? (h("div", { class: "image-container" }, h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.image1Url + "')" } }, h("img", { src: this.image1Url, alt: this.image1AltText })))) : null, this.image2Url != '' ? (h("div", { class: "image-container" }, h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.image2Url + "')" } }, h("img", { src: this.image2Url, alt: this.image2AltText })))) : null)) : null, this.imageLabel != '' ? h("div", { class: "image-label" }, this.imageLabel) : null, this.buttonLabel != null && this.buttonUrl != null ? (h("div", { class: "button-wrap align-right" }, h("biggive-button", { "colour-scheme": 'clear-' + this.buttonColour, url: this.buttonUrl, label: this.buttonLabel }))) : null))));
     }
-    static get style() { return biggiveArticleCardCss; }
+    static get style() { return BiggiveArticleCardStyle0; }
 }, [1, "biggive-article-card", {
         "spaceBelow": [2, "space-below"],
         "backgroundColour": [1, "background-colour"],

package/dist/components/biggive-article-card.js.map

@@ -1 +1 @@
-{"file":"biggive-article-card.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,ggXAAggX;;MCSjhXA,oBAAkB;;;;;0BACO,CAAC;gCAEG,OAAO;kCAEV,EAAE;;0BAIL,OAAO;;0BAIP,OAAO;;+BAIF,OAAO;;;;;;;;gCAgBN,OAAO;;;4BAMX,OAAO;oCAEH,IAAI;kCAEN,IAAI;;IAE1C,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACpD,WACE,KAAK,EACH,2BAA2B;gBAC3B,IAAI,CAAC,gBAAgB;gBACrB,qBAAqB;gBACrB,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,eAAe;gBACpB,sBAAsB;gBACtB,IAAI,CAAC,gBAAgB;gBACrB,gBAAgB;gBAChB,IAAI,CAAC,YAAY;gBACjB,2BAA2B;gBAC3B,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;gBACzB,IAAI,CAAC,kBAAkB,EAEzB,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,EAAE,IAEvE,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAChF,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,CACzD,EAEL,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACvD,CACF,IACJ,IAAI,EAER,UAAI,KAAK,EAAC,OAAO,IACf,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IAAG,IAAI,CAAC,SAAS,CAAK,CAC1C,EACJ,IAAI,CAAC,SAAS,IAAI,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,IAC3C,WAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,SAAS,IAAI,EAAE,IACnB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,EAAE,IACpF,WAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,GAAI,CACjD,CACF,IACJ,IAAI,EAEP,IAAI,CAAC,SAAS,IAAI,EAAE,IACnB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,EAAE,IACpF,WAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,GAAI,CACjD,CACF,IACJ,IAAI,CACJ,IACJ,IAAI,EAEP,IAAI,CAAC,UAAU,IAAI,EAAE,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAO,GAAG,IAAI,EAE/E,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IACjD,WAAK,KAAK,EAAC,yBAAyB,IAClC,uCAA+B,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CACxH,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveArticleCard"],"sources":["src/components/biggive-article-card/biggive-article-card.scss?tag=biggive-article-card&encapsulation=shadow","src/components/biggive-article-card/biggive-article-card.tsx"],"sourcesContent":["@include backgrounds();\n@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.align-right {\n  text-align: right;\n}\n\n.container {\n  height: 100%;\n  width: 100%;\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  @include lower-shadow();\n  .sleeve {\n    height: 100%;\n    box-sizing: border-box;\n    background-size: cover;\n    padding:  $spacer-3 $spacer-3 $spacer-2 $spacer-3;\n    .content-wrap {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n  .meta {\n    margin-bottom: $spacer-2;\n  }\n  .meta .slug {\n    @include font-size-small();\n    margin-bottom: $spacer-1;\n  }\n  .meta .date {\n    @include font-size-small();\n    margin-bottom: $spacer-1;\n  }\n  h3 {\n    @include heading-4();\n    padding-bottom: $spacer-3;\n    margin-bottom: auto;\n    a,\n    a:hover {\n      text-decoration: none;\n    }\n  }\n  .main-image-container {\n    img {\n      width: 100%;\n      height: auto;\n      display: inline-block;\n    }\n  }\n  .image-group {\n    display: flex;\n    margin-bottom: $spacer-3;\n    .image-container {\n      margin-right: 15px;\n      .image-wrap {\n        border-radius: 50%;\n        width: 60px;\n        height: 60px;\n        background-size: cover;\n        background-position: center center;\n        margin-bottom: $spacer-1;\n        img {\n          display: none;\n        }\n      }\n    }\n  }\n  .image-label {\n    @include font-size-x-small();\n  }\n\n\n  .clip-bottom-left-corner-false.clip-top-right-corner-true {\n    \n      @include corner-clip-medium-top-right();\n    \n  }\n  .clip-bottom-left-corner-true.clip-top-right-corner-false {\n      @include corner-clip-medium-bottom-left();\n  }\n    \n  .clip-bottom-left-corner-true.clip-top-right-corner-true {\n      @include corner-clip-medium-bottom-left-top-right();\n    \n  }\n\n  \n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .main-title-colour-#{$key} h3 { color: $colour; }\n    .slug-colour-#{$key} .slug { color: $colour; }\n    .date-colour-#{$key} .date { color: $colour; }\n    .image-label-colour-#{$key} .image-label { color: $colour; }\n  }\n  \n  \n  \n\n\n}","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-article-card',\n  styleUrl: 'biggive-article-card.scss',\n  shadow: true,\n})\nexport class BiggiveArticleCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() slug: string;\n\n  @Prop() slugColour: brandColour = 'black';\n\n  @Prop() date: string;\n\n  @Prop() dateColour: brandColour = 'black';\n\n  @Prop() mainTitle: string;\n\n  @Prop() mainTitleColour: brandColour = 'black';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() image1Url: string;\n\n  @Prop() image1AltText: string;\n\n  @Prop() image2Url: string;\n\n  @Prop() image2AltText: string;\n\n  @Prop() imageLabel: string;\n\n  @Prop() imageLabelColour: brandColour = 'black';\n\n  @Prop() buttonLabel: string;\n\n  @Prop() buttonUrl: string;\n\n  @Prop() buttonColour: brandColour = 'black';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div\n          class={\n            'sleeve background-colour-' +\n            this.backgroundColour +\n            ' text-colour-black ' +\n            ' slug-colour-' +\n            this.slugColour +\n            ' date-colour-' +\n            this.dateColour +\n            ' main-title-colour-' +\n            this.mainTitleColour +\n            ' image-label-colour-' +\n            this.imageLabelColour +\n            ' button-colour' +\n            this.buttonColour +\n            ' clip-bottom-left-corner-' +\n            this.clipBottomLeftCorner +\n            ' clip-top-right-corner-' +\n            this.clipTopRightCorner\n          }\n          style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n        >\n          <div class=\"content-wrap\">\n            <div class=\"meta\">\n              {this.slug != '' ? <div class=\"slug text-colour-primary\">{this.slug}</div> : null}\n              {this.date != '' ? <div class=\"date\">{this.date}</div> : null}\n            </div>\n\n            {this.mainImageUrl != '' ? (\n              <div class=\"main-image-container\">\n                <div class=\"image-wrap\">\n                  <img src={this.mainImageUrl} alt={this.mainImageAltText} />\n                </div>\n              </div>\n            ) : null}\n\n            <h3 class=\"title\">\n              <a href={this.buttonUrl}>{this.mainTitle}</a>\n            </h3>\n            {this.image1Url != '' || this.image2Url != '' ? (\n              <div class=\"image-group\">\n                {this.image1Url != '' ? (\n                  <div class=\"image-container\">\n                    <div class=\"image-wrap\" style={{ 'background-image': \"url('\" + this.image1Url + \"')\" }}>\n                      <img src={this.image1Url} alt={this.image1AltText} />\n                    </div>\n                  </div>\n                ) : null}\n\n                {this.image2Url != '' ? (\n                  <div class=\"image-container\">\n                    <div class=\"image-wrap\" style={{ 'background-image': \"url('\" + this.image2Url + \"')\" }}>\n                      <img src={this.image2Url} alt={this.image2AltText} />\n                    </div>\n                  </div>\n                ) : null}\n              </div>\n            ) : null}\n\n            {this.imageLabel != '' ? <div class=\"image-label\">{this.imageLabel}</div> : null}\n\n            {this.buttonLabel != null && this.buttonUrl != null ? (\n              <div class=\"button-wrap align-right\">\n                <biggive-button colour-scheme={'clear-' + this.buttonColour} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-article-card.js","mappings":"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","names":["BiggiveArticleCard"],"sources":["src/components/biggive-article-card/biggive-article-card.scss?tag=biggive-article-card&encapsulation=shadow","src/components/biggive-article-card/biggive-article-card.tsx"],"sourcesContent":["@include backgrounds();\n@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.align-right {\n  text-align: right;\n}\n\n.container {\n  height: 100%;\n  width: 100%;\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  @include lower-shadow();\n  .sleeve {\n    height: 100%;\n    box-sizing: border-box;\n    background-size: cover;\n    padding:  $spacer-3 $spacer-3 $spacer-2 $spacer-3;\n    .content-wrap {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n  .meta {\n    margin-bottom: $spacer-2;\n  }\n  .meta .slug {\n    @include font-size-small();\n    margin-bottom: $spacer-1;\n  }\n  .meta .date {\n    @include font-size-small();\n    margin-bottom: $spacer-1;\n  }\n  h3 {\n    @include heading-4();\n    padding-bottom: $spacer-3;\n    margin-bottom: auto;\n    a,\n    a:hover {\n      text-decoration: none;\n    }\n  }\n  .main-image-container {\n    img {\n      width: 100%;\n      height: auto;\n      display: inline-block;\n    }\n  }\n  .image-group {\n    display: flex;\n    margin-bottom: $spacer-3;\n    .image-container {\n      margin-right: 15px;\n      .image-wrap {\n        border-radius: 50%;\n        width: 60px;\n        height: 60px;\n        background-size: cover;\n        background-position: center center;\n        margin-bottom: $spacer-1;\n        img {\n          display: none;\n        }\n      }\n    }\n  }\n  .image-label {\n    @include font-size-x-small();\n  }\n\n\n  .clip-bottom-left-corner-false.clip-top-right-corner-true {\n    \n      @include corner-clip-medium-top-right();\n    \n  }\n  .clip-bottom-left-corner-true.clip-top-right-corner-false {\n      @include corner-clip-medium-bottom-left();\n  }\n    \n  .clip-bottom-left-corner-true.clip-top-right-corner-true {\n      @include corner-clip-medium-bottom-left-top-right();\n    \n  }\n\n  \n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .main-title-colour-#{$key} h3 { color: $colour; }\n    .slug-colour-#{$key} .slug { color: $colour; }\n    .date-colour-#{$key} .date { color: $colour; }\n    .image-label-colour-#{$key} .image-label { color: $colour; }\n  }\n  \n  \n  \n\n\n}","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-article-card',\n  styleUrl: 'biggive-article-card.scss',\n  shadow: true,\n})\nexport class BiggiveArticleCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() slug: string;\n\n  @Prop() slugColour: brandColour = 'black';\n\n  @Prop() date: string;\n\n  @Prop() dateColour: brandColour = 'black';\n\n  @Prop() mainTitle: string;\n\n  @Prop() mainTitleColour: brandColour = 'black';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() image1Url: string;\n\n  @Prop() image1AltText: string;\n\n  @Prop() image2Url: string;\n\n  @Prop() image2AltText: string;\n\n  @Prop() imageLabel: string;\n\n  @Prop() imageLabelColour: brandColour = 'black';\n\n  @Prop() buttonLabel: string;\n\n  @Prop() buttonUrl: string;\n\n  @Prop() buttonColour: brandColour = 'black';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div\n          class={\n            'sleeve background-colour-' +\n            this.backgroundColour +\n            ' text-colour-black ' +\n            ' slug-colour-' +\n            this.slugColour +\n            ' date-colour-' +\n            this.dateColour +\n            ' main-title-colour-' +\n            this.mainTitleColour +\n            ' image-label-colour-' +\n            this.imageLabelColour +\n            ' button-colour' +\n            this.buttonColour +\n            ' clip-bottom-left-corner-' +\n            this.clipBottomLeftCorner +\n            ' clip-top-right-corner-' +\n            this.clipTopRightCorner\n          }\n          style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n        >\n          <div class=\"content-wrap\">\n            <div class=\"meta\">\n              {this.slug != '' ? <div class=\"slug text-colour-primary\">{this.slug}</div> : null}\n              {this.date != '' ? <div class=\"date\">{this.date}</div> : null}\n            </div>\n\n            {this.mainImageUrl != '' ? (\n              <div class=\"main-image-container\">\n                <div class=\"image-wrap\">\n                  <img src={this.mainImageUrl} alt={this.mainImageAltText} />\n                </div>\n              </div>\n            ) : null}\n\n            <h3 class=\"title\">\n              <a href={this.buttonUrl}>{this.mainTitle}</a>\n            </h3>\n            {this.image1Url != '' || this.image2Url != '' ? (\n              <div class=\"image-group\">\n                {this.image1Url != '' ? (\n                  <div class=\"image-container\">\n                    <div class=\"image-wrap\" style={{ 'background-image': \"url('\" + this.image1Url + \"')\" }}>\n                      <img src={this.image1Url} alt={this.image1AltText} />\n                    </div>\n                  </div>\n                ) : null}\n\n                {this.image2Url != '' ? (\n                  <div class=\"image-container\">\n                    <div class=\"image-wrap\" style={{ 'background-image': \"url('\" + this.image2Url + \"')\" }}>\n                      <img src={this.image2Url} alt={this.image2AltText} />\n                    </div>\n                  </div>\n                ) : null}\n              </div>\n            ) : null}\n\n            {this.imageLabel != '' ? <div class=\"image-label\">{this.imageLabel}</div> : null}\n\n            {this.buttonLabel != null && this.buttonUrl != null ? (\n              <div class=\"button-wrap align-right\">\n                <biggive-button colour-scheme={'clear-' + this.buttonColour} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-back-to-top.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, getAssetPath } from '@stencil/core/internal/client';
 
 const biggiveBackToTopCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;margin:30px 0;text-align:center}.container a{display:inline-block}.container a .text{display:block}";
+const BiggiveBackToTopStyle0 = biggiveBackToTopCss;
 
 const BiggiveBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBackToTop extends HTMLElement {
     constructor() {
@@ -11,7 +12,7 @@ const BiggiveBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBackToT
     render() {
         return (h("div", { class: "container" }, h("a", { href: "#" }, h("img", { src: getAssetPath('assets/images/triangles-combined.svg') }), h("span", { class: "text" }, "Back to top"))));
     }
-    static get style() { return biggiveBackToTopCss; }
+    static get style() { return BiggiveBackToTopStyle0; }
 }, [1, "biggive-back-to-top"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/biggive-back-to-top.js.map

@@ -1 +1 @@
-{"file":"biggive-back-to-top.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,0RAA0R;;MCOzSA,kBAAgB;;;;;;IAC3B,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,SAAG,IAAI,EAAC,GAAG,IACT,WAAK,GAAG,EAAE,YAAY,CAAC,sCAAsC,CAAC,GAAI,EAClE,YAAM,KAAK,EAAC,MAAM,kBAAmB,CACnC,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBackToTop"],"sources":["src/components/biggive-back-to-top/biggive-back-to-top.scss?tag=biggive-back-to-top&encapsulation=shadow","src/components/biggive-back-to-top/biggive-back-to-top.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\n.container {\n  @include standard-font();\n  margin: $spacer-4 0;\n  text-align: center;\n  a {\n    display: inline-block;\n    .text {\n      display: block;\n    }\n  }\n}","import { Component, getAssetPath, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-back-to-top',\n  styleUrl: 'biggive-back-to-top.scss',\n  shadow: true,\n})\nexport class BiggiveBackToTop {\n  render() {\n    return (\n      <div class=\"container\">\n        <a href=\"#\">\n          <img src={getAssetPath('assets/images/triangles-combined.svg')} />\n          <span class=\"text\">Back to top</span>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-back-to-top.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,0RAA0R,CAAC;AACvT,+BAAe,mBAAmB;;MCMrBA,kBAAgB;;;;;;IAC3B,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,SAAG,IAAI,EAAC,GAAG,IACT,WAAK,GAAG,EAAE,YAAY,CAAC,sCAAsC,CAAC,GAAI,EAClE,YAAM,KAAK,EAAC,MAAM,kBAAmB,CACnC,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBackToTop"],"sources":["src/components/biggive-back-to-top/biggive-back-to-top.scss?tag=biggive-back-to-top&encapsulation=shadow","src/components/biggive-back-to-top/biggive-back-to-top.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n\n.container {\n  @include standard-font();\n  margin: $spacer-4 0;\n  text-align: center;\n  a {\n    display: inline-block;\n    .text {\n      display: block;\n    }\n  }\n}","import { Component, getAssetPath, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-back-to-top',\n  styleUrl: 'biggive-back-to-top.scss',\n  shadow: true,\n})\nexport class BiggiveBackToTop {\n  render() {\n    return (\n      <div class=\"container\">\n        <a href=\"#\">\n          <img src={getAssetPath('assets/images/triangles-combined.svg')} />\n          <span class=\"text\">Back to top</span>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-basic-card.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 
 const biggiveBasicCardCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-cc-red{fill:#B30510}.fill-brand-wgmf-purple{fill:#6E0887}.fill-brand-gmf-green{fill:#50B400}.fill-brand-emf-yellow{fill:#FFE500}.fill-brand-c4c-orange{fill:#F07D00}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-brand-grey{fill:#CBC8C8}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-brand-6{fill:#CBC8C8}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:center;background-size:cover;background-position:center center;padding:30px;height:100%;white-space:pre-wrap}.container a,.container a:hover{text-decoration:none}.container .sleeve{padding:30px;height:100%;box-sizing:border-box;transition:all 1s ease-in-out}.container.add-animation-true:hover .sleeve{margin:-30px;padding:60px;height:calc(100% + 60px)}.container.clip-bottom-left-corner-false.clip-top-right-corner-true .sleeve{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%)}.container.clip-bottom-left-corner-true.clip-top-right-corner-false .sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container.clip-bottom-left-corner-true.clip-top-right-corner-true .sleeve{clip-path:polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .icon svg{width:50px;height:auto}.container .title{font-size:25px;line-height:32px;font-weight:bold;margin-bottom:15px}.container .subtitle{margin-bottom:15px}.container .main-image-container{margin-bottom:15px}.container .main-image-container img{width:100%;height:auto}.container .button-wrap{text-align:center}.container .button-wrap.align-left{text-align:left}.container .button-wrap.align-right{text-align:right}";
+const BiggiveBasicCardStyle0 = biggiveBasicCardCss;
 
 const BiggiveBasicCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBasicCard extends HTMLElement {
     constructor() {
@@ -43,7 +44,7 @@ const BiggiveBasicCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBasicCa
                 ' add-animation-' +
                 this.addAnimation, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } }, h("a", { href: this.buttonUrl }, h("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour }, h("div", { class: "content-wrap" }, this.icon == true ? (h("div", { class: "icon" }, h("svg", { width: "53", height: "39", viewBox: "0 0 53 39", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z", class: "fill-black" }), h("path", { d: "M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z", class: 'fill-' + this.iconColour })))) : null, this.mainImageUrl != '' ? (h("div", { class: "main-image-container" }, h("div", { class: "image-wrap" }, h("img", { src: this.mainImageUrl, alt: this.mainImageAltText, title: this.mainImageAltText })))) : null, h(HeadingTag, { class: "title" }, this.mainTitle), h("div", { class: "subtitle" }, this.subtitle), h("div", { class: "teaser" }, this.teaser), this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (h("div", { class: 'button-wrap align-' + this.buttonAlign }, h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel }))) : null)))));
     }
-    static get style() { return biggiveBasicCardCss; }
+    static get style() { return BiggiveBasicCardStyle0; }
 }, [1, "biggive-basic-card", {
         "spaceBelow": [2, "space-below"],
         "backgroundColour": [1, "background-colour"],

package/dist/components/biggive-basic-card.js.map

@@ -1 +1 @@
-{"file":"biggive-basic-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,+gNAA+gN;;MCS9hNA,kBAAgB;;;;;0BACS,CAAC;gCAEG,SAAS;kCAEZ,EAAE;0BAEL,OAAO;0BAEP,OAAO;;;;;;oBAYjB,IAAI;0BAEM,SAAS;2BAEb,QAAQ;2BAER,UAAU;;;kCAMH,eAAe;oCAEZ,IAAI;kCAEN,IAAI;4BAEI,CAAC;4BAEf,KAAK;;IAErC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QAE3C,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;gBAC3B,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;gBACzB,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,EAEnB,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,EAAE,IAEvE,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,WAAK,KAAK,EAAE,2BAA2B,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC3F,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,IAAI,IAAI,IAChB,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YAAM,CAAC,EAAC,2DAA2D,EAAC,KAAK,EAAC,YAAY,GAAG,EACzF,YAAM,CAAC,EAAC,+EAA+E,EAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,GAAI,CACxH,CACF,IACJ,IAAI,EACP,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrF,CACF,IACJ,IAAI,EACR,EAAC,UAAU,IAAC,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAc,EACvD,WAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAO,EAC3C,WAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,EACtC,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,IACzE,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CACnH,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBasicCard"],"sources":["src/components/biggive-basic-card/biggive-basic-card.scss?tag=biggive-basic-card&encapsulation=shadow","src/components/biggive-basic-card/biggive-basic-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  text-align: center;\n  background-size: cover;\n  background-position: center center;\n  padding: $spacer-4;\n  height: 100%;\n  white-space: pre-wrap;\n  a,\n  a:hover {\n    text-decoration: none;\n  }\n  .sleeve {\n    padding: $spacer-4;\n    height: 100%;\n    box-sizing: border-box;\n    transition: all 1s ease-in-out;\n  }\n  &.add-animation-true:hover .sleeve {\n    margin: -30px;\n    padding: 60px;\n    height: calc(100% + 60px);\n  }\n  &.clip-bottom-left-corner-false.clip-top-right-corner-true {\n    .sleeve {\n      @include corner-clip-medium-top-right();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n    .sleeve {\n      @include corner-clip-medium-bottom-left();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n    .sleeve {\n      @include corner-clip-medium-bottom-left-top-right();\n    }\n  }\n\n  .icon {\n    svg {\n      width: 50px;\n      height: auto;\n    }\n  }\n  .title {\n    // these have to be the heading level passed in based on order of headings, but in terms of design we want it look like H3.\n    @include heading-3();\n    margin-bottom: $spacer-3;\n  }\n  .subtitle {\n    margin-bottom: $spacer-3;\n  }\n  .main-image-container {\n    margin-bottom: 15px;\n    img {\n      width: 100%;\n      height: auto;\n    }\n  }\n  .button-wrap {\n    text-align: center;\n    &.align-left {\n      text-align: left;\n    }\n    &.align-right {\n      text-align: right;\n    }\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-basic-card',\n  styleUrl: 'biggive-basic-card.scss',\n  shadow: true,\n})\nexport class BiggiveBasicCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() cardColour: brandColour = 'white';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() mainTitle: string;\n\n  @Prop() subtitle: string;\n\n  @Prop() teaser: string;\n\n  @Prop() icon: boolean = true;\n\n  @Prop() iconColour: brandColour = 'primary';\n\n  @Prop() buttonAlign: string = 'center';\n\n  @Prop() buttonStyle: string = 'standard';\n\n  @Prop() buttonLabel: string;\n\n  @Prop() buttonUrl: string;\n\n  @Prop() buttonColourScheme: string = 'clear-primary';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  @Prop() addAnimation: boolean = false;\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' clip-bottom-left-corner-' +\n          this.clipBottomLeftCorner +\n          ' clip-top-right-corner-' +\n          this.clipTopRightCorner +\n          ' add-animation-' +\n          this.addAnimation\n        }\n        style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n      >\n        <a href={this.buttonUrl}>\n          <div class={'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour}>\n            <div class=\"content-wrap\">\n              {this.icon == true ? (\n                <div class=\"icon\">\n                  <svg width=\"53\" height=\"39\" viewBox=\"0 0 53 39\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z\" class=\"fill-black\" />\n                    <path d=\"M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z\" class={'fill-' + this.iconColour} />\n                  </svg>\n                </div>\n              ) : null}\n              {this.mainImageUrl != '' ? (\n                <div class=\"main-image-container\">\n                  <div class=\"image-wrap\">\n                    <img src={this.mainImageUrl} alt={this.mainImageAltText} title={this.mainImageAltText} />\n                  </div>\n                </div>\n              ) : null}\n              <HeadingTag class=\"title\">{this.mainTitle}</HeadingTag>\n              <div class=\"subtitle\">{this.subtitle}</div>\n              <div class=\"teaser\">{this.teaser}</div>\n              {this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (\n                <div class={'button-wrap align-' + this.buttonAlign}>\n                  <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-basic-card.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,+gNAA+gN,CAAC;AAC5iN,+BAAe,mBAAmB;;MCQrBA,kBAAgB;;;;;0BACS,CAAC;gCAEG,SAAS;kCAEZ,EAAE;0BAEL,OAAO;0BAEP,OAAO;;;;;;oBAYjB,IAAI;0BAEM,SAAS;2BAEb,QAAQ;2BAER,UAAU;;;kCAMH,eAAe;oCAEZ,IAAI;kCAEN,IAAI;4BAEI,CAAC;4BAEf,KAAK;;IAErC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QAE3C,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,2BAA2B;gBAC3B,IAAI,CAAC,oBAAoB;gBACzB,yBAAyB;gBACzB,IAAI,CAAC,kBAAkB;gBACvB,iBAAiB;gBACjB,IAAI,CAAC,YAAY,EAEnB,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,EAAE,IAEvE,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,WAAK,KAAK,EAAE,2BAA2B,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC3F,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,IAAI,IAAI,IAChB,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YAAM,CAAC,EAAC,2DAA2D,EAAC,KAAK,EAAC,YAAY,GAAG,EACzF,YAAM,CAAC,EAAC,+EAA+E,EAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,GAAI,CACxH,CACF,IACJ,IAAI,EACP,IAAI,CAAC,YAAY,IAAI,EAAE,IACtB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrF,CACF,IACJ,IAAI,EACR,EAAC,UAAU,IAAC,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAc,EACvD,WAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAO,EAC3C,WAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,EACtC,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,IACzE,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,IACjD,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB,CACnH,IACJ,IAAI,CACJ,CACF,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBasicCard"],"sources":["src/components/biggive-basic-card/biggive-basic-card.scss?tag=biggive-basic-card&encapsulation=shadow","src/components/biggive-basic-card/biggive-basic-card.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  text-align: center;\n  background-size: cover;\n  background-position: center center;\n  padding: $spacer-4;\n  height: 100%;\n  white-space: pre-wrap;\n  a,\n  a:hover {\n    text-decoration: none;\n  }\n  .sleeve {\n    padding: $spacer-4;\n    height: 100%;\n    box-sizing: border-box;\n    transition: all 1s ease-in-out;\n  }\n  &.add-animation-true:hover .sleeve {\n    margin: -30px;\n    padding: 60px;\n    height: calc(100% + 60px);\n  }\n  &.clip-bottom-left-corner-false.clip-top-right-corner-true {\n    .sleeve {\n      @include corner-clip-medium-top-right();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-false {\n    .sleeve {\n      @include corner-clip-medium-bottom-left();\n    }\n  }\n  &.clip-bottom-left-corner-true.clip-top-right-corner-true {\n    .sleeve {\n      @include corner-clip-medium-bottom-left-top-right();\n    }\n  }\n\n  .icon {\n    svg {\n      width: 50px;\n      height: auto;\n    }\n  }\n  .title {\n    // these have to be the heading level passed in based on order of headings, but in terms of design we want it look like H3.\n    @include heading-3();\n    margin-bottom: $spacer-3;\n  }\n  .subtitle {\n    margin-bottom: $spacer-3;\n  }\n  .main-image-container {\n    margin-bottom: 15px;\n    img {\n      width: 100%;\n      height: auto;\n    }\n  }\n  .button-wrap {\n    text-align: center;\n    &.align-left {\n      text-align: left;\n    }\n    &.align-right {\n      text-align: right;\n    }\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-basic-card',\n  styleUrl: 'biggive-basic-card.scss',\n  shadow: true,\n})\nexport class BiggiveBasicCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() backgroundImageUrl: string = '';\n\n  @Prop() cardColour: brandColour = 'white';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() mainImageUrl: string;\n\n  @Prop() mainImageAltText: string;\n\n  @Prop() mainTitle: string;\n\n  @Prop() subtitle: string;\n\n  @Prop() teaser: string;\n\n  @Prop() icon: boolean = true;\n\n  @Prop() iconColour: brandColour = 'primary';\n\n  @Prop() buttonAlign: string = 'center';\n\n  @Prop() buttonStyle: string = 'standard';\n\n  @Prop() buttonLabel: string;\n\n  @Prop() buttonUrl: string;\n\n  @Prop() buttonColourScheme: string = 'clear-primary';\n\n  @Prop() clipBottomLeftCorner: boolean = true;\n\n  @Prop() clipTopRightCorner: boolean = true;\n\n  @Prop() headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  @Prop() addAnimation: boolean = false;\n\n  render() {\n    const HeadingTag = `h${this.headingLevel}`;\n\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' clip-bottom-left-corner-' +\n          this.clipBottomLeftCorner +\n          ' clip-top-right-corner-' +\n          this.clipTopRightCorner +\n          ' add-animation-' +\n          this.addAnimation\n        }\n        style={{ 'background-image': \"url('\" + this.backgroundImageUrl + \"')\" }}\n      >\n        <a href={this.buttonUrl}>\n          <div class={'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour}>\n            <div class=\"content-wrap\">\n              {this.icon == true ? (\n                <div class=\"icon\">\n                  <svg width=\"53\" height=\"39\" viewBox=\"0 0 53 39\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M38.7009 13.6572L52.3535 38.6959H25.0386L38.7009 13.6572Z\" class=\"fill-black\" />\n                    <path d=\"M20.4789 36.4199L6.36785e-06 5.89713e-05L40.9724 6.61352e-05L20.4789 36.4199Z\" class={'fill-' + this.iconColour} />\n                  </svg>\n                </div>\n              ) : null}\n              {this.mainImageUrl != '' ? (\n                <div class=\"main-image-container\">\n                  <div class=\"image-wrap\">\n                    <img src={this.mainImageUrl} alt={this.mainImageAltText} title={this.mainImageAltText} />\n                  </div>\n                </div>\n              ) : null}\n              <HeadingTag class=\"title\">{this.mainTitle}</HeadingTag>\n              <div class=\"subtitle\">{this.subtitle}</div>\n              <div class=\"teaser\">{this.teaser}</div>\n              {this.buttonLabel != null && this.buttonUrl != null && this.buttonUrl != '' ? (\n                <div class={'button-wrap align-' + this.buttonAlign}>\n                  <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-beneficiary-icon.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { F as FontAwesomeIconsService } from './fontawesome-icons.js';
 
 const biggiveBeneficiaryIconCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-cc-red{fill:#B30510}.fill-brand-wgmf-purple{fill:#6E0887}.fill-brand-gmf-green{fill:#50B400}.fill-brand-emf-yellow{fill:#FFE500}.fill-brand-c4c-orange{fill:#F07D00}.fill-brand-afa-pink{fill:#BF387D}.fill-brand-mhf-turquoise{fill:#62CFC9}.fill-brand-grey{fill:#CBC8C8}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-grey-extra-light{fill:#D7D7D7}.fill-grey-light{fill:#E8E8E8}.fill-grey-medium{fill:#8A8A8A}.fill-grey-dark{fill:#4A4A4A}.fill-brand-6{fill:#CBC8C8}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;display:flex;justify-content:flex-start}.container .label{padding-left:15px;font-size:11px;line-height:14px;width:60px;margin-top:auto;margin-bottom:auto}.beneficiary-icon-item{width:40px;height:40px;border-radius:50%;text-align:center;transition:all ease-in-out 0.5s;display:inline-block;margin-right:10px;width:30px;height:30px}.beneficiary-icon-item.colour-scheme-primary{background-color:#2C089B}.beneficiary-icon-item.colour-scheme-primary svg{fill:#FFFFFF}.beneficiary-icon-item.colour-scheme-secondary{background-color:#2AF135}.beneficiary-icon-item.colour-scheme-secondary svg{fill:#000000}.beneficiary-icon-item.colour-scheme-tertiary{background-color:#FF7272}.beneficiary-icon-item.colour-scheme-tertiary svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-1{background-color:#B30510}.beneficiary-icon-item.colour-scheme-brand-1 svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-2{background-color:#6E0887}.beneficiary-icon-item.colour-scheme-brand-2 svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-3{background-color:#50B400}.beneficiary-icon-item.colour-scheme-brand-3 svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-4{background-color:#FFE500}.beneficiary-icon-item.colour-scheme-brand-4 svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-5{background-color:#F07D00}.beneficiary-icon-item.colour-scheme-brand-5 svg{fill:#000000}.beneficiary-icon-item.colour-scheme-mhf-turquoise{background-color:#62CFC9}.beneficiary-icon-item.colour-scheme-mhf-turquoise svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-grey{background-color:#CBC8C8}.beneficiary-icon-item.colour-scheme-brand-grey svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-6{background-color:#CBC8C8}.beneficiary-icon-item.colour-scheme-brand-6 svg{fill:#000000}.beneficiary-icon-item.colour-scheme-brand-afa-pink{background-color:#BF387D}.beneficiary-icon-item.colour-scheme-brand-afa-pink svg{fill:#000000}.beneficiary-icon-item.colour-scheme-white{background-color:#FFFFFF}.beneficiary-icon-item.colour-scheme-white svg{fill:#000000}.beneficiary-icon-item.colour-scheme-black{background-color:#000000}.beneficiary-icon-item.colour-scheme-black svg{fill:#FFFFFF}.beneficiary-icon-item.colour-scheme-black{background-color:#D7D7D7}.beneficiary-icon-item.colour-scheme-black svg{fill:#D7D7D7}.beneficiary-icon-item.colour-scheme-black{background-color:#E8E8E8}.beneficiary-icon-item.colour-scheme-black svg{fill:#E8E8E8}.beneficiary-icon-item.colour-scheme-black{background-color:#8A8A8A}.beneficiary-icon-item.colour-scheme-black svg{fill:#8A8A8A}.beneficiary-icon-item.colour-scheme-black{background-color:#4A4A4A}.beneficiary-icon-item.colour-scheme-black svg{fill:#4A4A4A}.beneficiary-icon-item:hover{background-color:#FFFFFF}.beneficiary-icon-item:hover svg{fill:#000000}.beneficiary-icon-item a{display:grid;position:relative;padding:10px;box-sizing:border-box;height:100%}.beneficiary-icon-item a svg{width:100%;height:100%}.beneficiary-icon-item a{padding:6px}";
+const BiggiveBeneficiaryIconStyle0 = biggiveBeneficiaryIconCss;
 
 const BiggiveBeneficiaryIcon$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBeneficiaryIcon extends HTMLElement {
     constructor() {
@@ -20,7 +21,7 @@ const BiggiveBeneficiaryIcon$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveB
     render() {
         return (h("div", { class: "container" }, h("div", { class: 'beneficiary-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url }, h("svg", { width: this.getBeneficiaryIcon().icon[0], height: this.getBeneficiaryIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getBeneficiaryIcon().icon[0] + ' ' + this.getBeneficiaryIcon().icon[1] }, h("path", { d: this.getBeneficiaryIcon().icon[4].toString() })))), h("div", { class: "label" }, this.label)));
     }
-    static get style() { return biggiveBeneficiaryIconCss; }
+    static get style() { return BiggiveBeneficiaryIconStyle0; }
 }, [0, "biggive-beneficiary-icon", {
         "backgroundColour": [1, "background-colour"],
         "iconColour": [1, "icon-colour"],

package/dist/components/biggive-beneficiary-icon.js.map

@@ -1 +1 @@
-{"file":"biggive-beneficiary-icon.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,qgMAAqgM;;MCS1hMA,wBAAsB;;;;gCAIE,SAAS;0BAKf,OAAO;oBAIb,OAAO;;mBAUR,GAAG;;IAEjB,kBAAkB;QACxB,IAAI,IAAI,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAE,0CAA0C,GAAG,IAAI,CAAC,gBAAgB,IAC5E,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,WACE,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACzC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAE7F,YAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CACrD,CACJ,CACA,EACN,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBeneficiaryIcon"],"sources":["src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.scss?tag=biggive-beneficiary-icon","src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.beneficiary-icon-item {\n  @include icon-medium();\n}","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-beneficiary-icon',\n  styleUrl: 'biggive-beneficiary-icon.scss',\n  shadow: false,\n})\nexport class BiggiveBeneficiaryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string = 'Other';\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getBeneficiaryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'beneficiary-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getBeneficiaryIcon().icon[0]}\n              height={this.getBeneficiaryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getBeneficiaryIcon().icon[0] + ' ' + this.getBeneficiaryIcon().icon[1]}\n            >\n              <path d={this.getBeneficiaryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-beneficiary-icon.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,qgMAAqgM,CAAC;AACxiM,qCAAe,yBAAyB;;MCQ3BA,wBAAsB;;;;gCAIE,SAAS;0BAKf,OAAO;oBAIb,OAAO;;mBAUR,GAAG;;IAEjB,kBAAkB;QACxB,IAAI,IAAI,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACpB,WAAK,KAAK,EAAE,0CAA0C,GAAG,IAAI,CAAC,gBAAgB,IAC5E,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACf,WACE,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EACzC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAE7F,YAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CACrD,CACJ,CACA,EACN,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACjC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBeneficiaryIcon"],"sources":["src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.scss?tag=biggive-beneficiary-icon","src/components/biggive-beneficiary-icon/biggive-beneficiary-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  display: flex;\n  justify-content: flex-start;\n  .label {\n    padding-left: $spacer-3;\n    @include font-size-x-small();\n    width: 60px;\n    margin-top: auto;\n    margin-bottom: auto;\n  }\n}\n\n.beneficiary-icon-item {\n  @include icon-medium();\n}","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\n\n@Component({\n  tag: 'biggive-beneficiary-icon',\n  styleUrl: 'biggive-beneficiary-icon.scss',\n  shadow: false,\n})\nexport class BiggiveBeneficiaryIcon {\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'primary';\n\n  /**\n   * Background colour\n   */\n  @Prop() iconColour: string = 'white';\n  /**\n   * Icon\n   */\n  @Prop() icon: string = 'Other';\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  /**\n   * Url\n   */\n  @Prop() url: string = '#';\n\n  private getBeneficiaryIcon(): IconDefinition {\n    var icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    return icon;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class={'beneficiary-icon-item background-colour-' + this.backgroundColour}>\n          <a href={this.url}>\n            <svg\n              width={this.getBeneficiaryIcon().icon[0]}\n              height={this.getBeneficiaryIcon().icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + this.getBeneficiaryIcon().icon[0] + ' ' + this.getBeneficiaryIcon().icon[1]}\n            >\n              <path d={this.getBeneficiaryIcon().icon[4].toString()} />\n            </svg>\n          </a>\n        </div>\n        <div class=\"label\">{this.label}</div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-biography-card.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveBiographyCardCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:block}.container{text-align:left}.container.background-colour-primary .image-wrap{background-color:#2C089B}.container.background-colour-secondary .image-wrap{background-color:#2AF135}.container.background-colour-tertiary .image-wrap{background-color:#FF7272}.container.background-colour-brand-1 .image-wrap{background-color:#B30510}.container.background-colour-brand-2 .image-wrap{background-color:#6E0887}.container.background-colour-brand-3 .image-wrap{background-color:#50B400}.container.background-colour-brand-4 .image-wrap{background-color:#FFE500}.container.background-colour-brand-5 .image-wrap{background-color:#F07D00}.container.background-colour-brand-cc-red .image-wrap{background-color:#B30510}.container.background-colour-brand-wgmf-purple .image-wrap{background-color:#6E0887}.container.background-colour-brand-gmf-green .image-wrap{background-color:#50B400}.container.background-colour-brand-emf-yellow .image-wrap{background-color:#FFE500}.container.background-colour-brand-c4c-orange .image-wrap{background-color:#F07D00}.container.background-colour-brand-afa-pink .image-wrap{background-color:#BF387D}.container.background-colour-brand-mhf-turquoise .image-wrap{background-color:#62CFC9}.container.background-colour-brand-grey .image-wrap{background-color:#CBC8C8}.container.background-colour-white .image-wrap{background-color:#FFFFFF}.container.background-colour-black .image-wrap{background-color:#000000}.container.background-colour-grey-extra-light .image-wrap{background-color:#D7D7D7}.container.background-colour-grey-light .image-wrap{background-color:#E8E8E8}.container.background-colour-grey-medium .image-wrap{background-color:#8A8A8A}.container.background-colour-grey-dark .image-wrap{background-color:#4A4A4A}.container.background-colour-brand-6 .image-wrap{background-color:#62CFC9}.container.text-align-center{text-align:center}.container.text-align-right{text-align:right}.container a{text-decoration:none}.container h3.full-name{font-size:font-size-medium();margin:0}.container div.job-title{font-size:font-size-small();margin:0}.container .sleeve{margin-bottom:10px}.container .sleeve.border-width-1.border-colour-primary{border:5px solid #2C089B}.container .sleeve.border-width-2.border-colour-primary{border:10px solid #2C089B}.container .sleeve.border-width-3.border-colour-primary{border:15px solid #2C089B}.container .sleeve.border-width-4.border-colour-primary{border:30px solid #2C089B}.container .sleeve.border-width-5.border-colour-primary{border:45px solid #2C089B}.container .sleeve.border-width-6.border-colour-primary{border:60px solid #2C089B}.container .sleeve.border-width-1.border-colour-secondary{border:5px solid #2AF135}.container .sleeve.border-width-2.border-colour-secondary{border:10px solid #2AF135}.container .sleeve.border-width-3.border-colour-secondary{border:15px solid #2AF135}.container .sleeve.border-width-4.border-colour-secondary{border:30px solid #2AF135}.container .sleeve.border-width-5.border-colour-secondary{border:45px solid #2AF135}.container .sleeve.border-width-6.border-colour-secondary{border:60px solid #2AF135}.container .sleeve.border-width-1.border-colour-tertiary{border:5px solid #FF7272}.container .sleeve.border-width-2.border-colour-tertiary{border:10px solid #FF7272}.container .sleeve.border-width-3.border-colour-tertiary{border:15px solid #FF7272}.container .sleeve.border-width-4.border-colour-tertiary{border:30px solid #FF7272}.container .sleeve.border-width-5.border-colour-tertiary{border:45px solid #FF7272}.container .sleeve.border-width-6.border-colour-tertiary{border:60px solid #FF7272}.container .sleeve.border-width-1.border-colour-brand-1{border:5px solid #B30510}.container .sleeve.border-width-2.border-colour-brand-1{border:10px solid #B30510}.container .sleeve.border-width-3.border-colour-brand-1{border:15px solid #B30510}.container .sleeve.border-width-4.border-colour-brand-1{border:30px solid #B30510}.container .sleeve.border-width-5.border-colour-brand-1{border:45px solid #B30510}.container .sleeve.border-width-6.border-colour-brand-1{border:60px solid #B30510}.container .sleeve.border-width-1.border-colour-brand-2{border:5px solid #6E0887}.container .sleeve.border-width-2.border-colour-brand-2{border:10px solid #6E0887}.container .sleeve.border-width-3.border-colour-brand-2{border:15px solid #6E0887}.container .sleeve.border-width-4.border-colour-brand-2{border:30px solid #6E0887}.container .sleeve.border-width-5.border-colour-brand-2{border:45px solid #6E0887}.container .sleeve.border-width-6.border-colour-brand-2{border:60px solid #6E0887}.container .sleeve.border-width-1.border-colour-brand-3{border:5px solid #50B400}.container .sleeve.border-width-2.border-colour-brand-3{border:10px solid #50B400}.container .sleeve.border-width-3.border-colour-brand-3{border:15px solid #50B400}.container .sleeve.border-width-4.border-colour-brand-3{border:30px solid #50B400}.container .sleeve.border-width-5.border-colour-brand-3{border:45px solid #50B400}.container .sleeve.border-width-6.border-colour-brand-3{border:60px solid #50B400}.container .sleeve.border-width-1.border-colour-brand-4{border:5px solid #FFE500}.container .sleeve.border-width-2.border-colour-brand-4{border:10px solid #FFE500}.container .sleeve.border-width-3.border-colour-brand-4{border:15px solid #FFE500}.container .sleeve.border-width-4.border-colour-brand-4{border:30px solid #FFE500}.container .sleeve.border-width-5.border-colour-brand-4{border:45px solid #FFE500}.container .sleeve.border-width-6.border-colour-brand-4{border:60px solid #FFE500}.container .sleeve.border-width-1.border-colour-brand-5{border:5px solid #F07D00}.container .sleeve.border-width-2.border-colour-brand-5{border:10px solid #F07D00}.container .sleeve.border-width-3.border-colour-brand-5{border:15px solid #F07D00}.container .sleeve.border-width-4.border-colour-brand-5{border:30px solid #F07D00}.container .sleeve.border-width-5.border-colour-brand-5{border:45px solid #F07D00}.container .sleeve.border-width-6.border-colour-brand-5{border:60px solid #F07D00}.container .sleeve.border-width-1.border-colour-brand-cc-red{border:5px solid #B30510}.container .sleeve.border-width-2.border-colour-brand-cc-red{border:10px solid #B30510}.container .sleeve.border-width-3.border-colour-brand-cc-red{border:15px solid #B30510}.container .sleeve.border-width-4.border-colour-brand-cc-red{border:30px solid #B30510}.container .sleeve.border-width-5.border-colour-brand-cc-red{border:45px solid #B30510}.container .sleeve.border-width-6.border-colour-brand-cc-red{border:60px solid #B30510}.container .sleeve.border-width-1.border-colour-brand-wgmf-purple{border:5px solid #6E0887}.container .sleeve.border-width-2.border-colour-brand-wgmf-purple{border:10px solid #6E0887}.container .sleeve.border-width-3.border-colour-brand-wgmf-purple{border:15px solid #6E0887}.container .sleeve.border-width-4.border-colour-brand-wgmf-purple{border:30px solid #6E0887}.container .sleeve.border-width-5.border-colour-brand-wgmf-purple{border:45px solid #6E0887}.container .sleeve.border-width-6.border-colour-brand-wgmf-purple{border:60px solid #6E0887}.container .sleeve.border-width-1.border-colour-brand-gmf-green{border:5px solid #50B400}.container .sleeve.border-width-2.border-colour-brand-gmf-green{border:10px solid #50B400}.container .sleeve.border-width-3.border-colour-brand-gmf-green{border:15px solid #50B400}.container .sleeve.border-width-4.border-colour-brand-gmf-green{border:30px solid #50B400}.container .sleeve.border-width-5.border-colour-brand-gmf-green{border:45px solid #50B400}.container .sleeve.border-width-6.border-colour-brand-gmf-green{border:60px solid #50B400}.container .sleeve.border-width-1.border-colour-brand-emf-yellow{border:5px solid #FFE500}.container .sleeve.border-width-2.border-colour-brand-emf-yellow{border:10px solid #FFE500}.container .sleeve.border-width-3.border-colour-brand-emf-yellow{border:15px solid #FFE500}.container .sleeve.border-width-4.border-colour-brand-emf-yellow{border:30px solid #FFE500}.container .sleeve.border-width-5.border-colour-brand-emf-yellow{border:45px solid #FFE500}.container .sleeve.border-width-6.border-colour-brand-emf-yellow{border:60px solid #FFE500}.container .sleeve.border-width-1.border-colour-brand-c4c-orange{border:5px solid #F07D00}.container .sleeve.border-width-2.border-colour-brand-c4c-orange{border:10px solid #F07D00}.container .sleeve.border-width-3.border-colour-brand-c4c-orange{border:15px solid #F07D00}.container .sleeve.border-width-4.border-colour-brand-c4c-orange{border:30px solid #F07D00}.container .sleeve.border-width-5.border-colour-brand-c4c-orange{border:45px solid #F07D00}.container .sleeve.border-width-6.border-colour-brand-c4c-orange{border:60px solid #F07D00}.container .sleeve.border-width-1.border-colour-brand-afa-pink{border:5px solid #BF387D}.container .sleeve.border-width-2.border-colour-brand-afa-pink{border:10px solid #BF387D}.container .sleeve.border-width-3.border-colour-brand-afa-pink{border:15px solid #BF387D}.container .sleeve.border-width-4.border-colour-brand-afa-pink{border:30px solid #BF387D}.container .sleeve.border-width-5.border-colour-brand-afa-pink{border:45px solid #BF387D}.container .sleeve.border-width-6.border-colour-brand-afa-pink{border:60px solid #BF387D}.container .sleeve.border-width-1.border-colour-brand-mhf-turquoise{border:5px solid #62CFC9}.container .sleeve.border-width-2.border-colour-brand-mhf-turquoise{border:10px solid #62CFC9}.container .sleeve.border-width-3.border-colour-brand-mhf-turquoise{border:15px solid #62CFC9}.container .sleeve.border-width-4.border-colour-brand-mhf-turquoise{border:30px solid #62CFC9}.container .sleeve.border-width-5.border-colour-brand-mhf-turquoise{border:45px solid #62CFC9}.container .sleeve.border-width-6.border-colour-brand-mhf-turquoise{border:60px solid #62CFC9}.container .sleeve.border-width-1.border-colour-brand-grey{border:5px solid #CBC8C8}.container .sleeve.border-width-2.border-colour-brand-grey{border:10px solid #CBC8C8}.container .sleeve.border-width-3.border-colour-brand-grey{border:15px solid #CBC8C8}.container .sleeve.border-width-4.border-colour-brand-grey{border:30px solid #CBC8C8}.container .sleeve.border-width-5.border-colour-brand-grey{border:45px solid #CBC8C8}.container .sleeve.border-width-6.border-colour-brand-grey{border:60px solid #CBC8C8}.container .sleeve.border-width-1.border-colour-white{border:5px solid #FFFFFF}.container .sleeve.border-width-2.border-colour-white{border:10px solid #FFFFFF}.container .sleeve.border-width-3.border-colour-white{border:15px solid #FFFFFF}.container .sleeve.border-width-4.border-colour-white{border:30px solid #FFFFFF}.container .sleeve.border-width-5.border-colour-white{border:45px solid #FFFFFF}.container .sleeve.border-width-6.border-colour-white{border:60px solid #FFFFFF}.container .sleeve.border-width-1.border-colour-black{border:5px solid #000000}.container .sleeve.border-width-2.border-colour-black{border:10px solid #000000}.container .sleeve.border-width-3.border-colour-black{border:15px solid #000000}.container .sleeve.border-width-4.border-colour-black{border:30px solid #000000}.container .sleeve.border-width-5.border-colour-black{border:45px solid #000000}.container .sleeve.border-width-6.border-colour-black{border:60px solid #000000}.container .sleeve.border-width-1.border-colour-grey-extra-light{border:5px solid #D7D7D7}.container .sleeve.border-width-2.border-colour-grey-extra-light{border:10px solid #D7D7D7}.container .sleeve.border-width-3.border-colour-grey-extra-light{border:15px solid #D7D7D7}.container .sleeve.border-width-4.border-colour-grey-extra-light{border:30px solid #D7D7D7}.container .sleeve.border-width-5.border-colour-grey-extra-light{border:45px solid #D7D7D7}.container .sleeve.border-width-6.border-colour-grey-extra-light{border:60px solid #D7D7D7}.container .sleeve.border-width-1.border-colour-grey-light{border:5px solid #E8E8E8}.container .sleeve.border-width-2.border-colour-grey-light{border:10px solid #E8E8E8}.container .sleeve.border-width-3.border-colour-grey-light{border:15px solid #E8E8E8}.container .sleeve.border-width-4.border-colour-grey-light{border:30px solid #E8E8E8}.container .sleeve.border-width-5.border-colour-grey-light{border:45px solid #E8E8E8}.container .sleeve.border-width-6.border-colour-grey-light{border:60px solid #E8E8E8}.container .sleeve.border-width-1.border-colour-grey-medium{border:5px solid #8A8A8A}.container .sleeve.border-width-2.border-colour-grey-medium{border:10px solid #8A8A8A}.container .sleeve.border-width-3.border-colour-grey-medium{border:15px solid #8A8A8A}.container .sleeve.border-width-4.border-colour-grey-medium{border:30px solid #8A8A8A}.container .sleeve.border-width-5.border-colour-grey-medium{border:45px solid #8A8A8A}.container .sleeve.border-width-6.border-colour-grey-medium{border:60px solid #8A8A8A}.container .sleeve.border-width-1.border-colour-grey-dark{border:5px solid #4A4A4A}.container .sleeve.border-width-2.border-colour-grey-dark{border:10px solid #4A4A4A}.container .sleeve.border-width-3.border-colour-grey-dark{border:15px solid #4A4A4A}.container .sleeve.border-width-4.border-colour-grey-dark{border:30px solid #4A4A4A}.container .sleeve.border-width-5.border-colour-grey-dark{border:45px solid #4A4A4A}.container .sleeve.border-width-6.border-colour-grey-dark{border:60px solid #4A4A4A}.container .sleeve.border-width-1.border-colour-brand-6{border:5px solid #62CFC9}.container .sleeve.border-width-2.border-colour-brand-6{border:10px solid #62CFC9}.container .sleeve.border-width-3.border-colour-brand-6{border:15px solid #62CFC9}.container .sleeve.border-width-4.border-colour-brand-6{border:30px solid #62CFC9}.container .sleeve.border-width-5.border-colour-brand-6{border:45px solid #62CFC9}.container .sleeve.border-width-6.border-colour-brand-6{border:60px solid #62CFC9}.container .sleeve.circle-true{overflow:hidden;border-radius:50%}.container .sleeve .image-wrap{position:relative;background-position:center center;background-size:cover;background-repeat:no-repeat}.container .sleeve .image-wrap.image-style-cover{background-size:cover}.container .sleeve .image-wrap.image-style-contain{background-size:contain}.container .sleeve .image-wrap[data-ratio=\"1,1\"]{padding-bottom:100%}.container .sleeve .image-wrap[data-ratio=\"1,1\"].border-width-1{padding-bottom:calc(100% - 10px)}.container .sleeve .image-wrap[data-ratio=\"1,1\"].border-width-2{padding-bottom:calc(100% - 20px)}.container .sleeve .image-wrap[data-ratio=\"1,1\"].border-width-3{padding-bottom:calc(100% - 30px)}.container .sleeve .image-wrap[data-ratio=\"1,1\"].border-width-4{padding-bottom:calc(100% - 60px)}.container .sleeve .image-wrap[data-ratio=\"1,1\"].border-width-5{padding-bottom:calc(100% - 90px)}.container .sleeve .image-wrap[data-ratio=\"1,1\"].border-width-6{padding-bottom:calc(100% - 120px)}.container .sleeve .image-wrap[data-ratio=\"1,1.5\"]{padding-bottom:150%}.container .sleeve .image-wrap[data-ratio=\"1,1.5\"].border-width-1{padding-bottom:calc(150% - 10px)}.container .sleeve .image-wrap[data-ratio=\"1,1.5\"].border-width-2{padding-bottom:calc(150% - 20px)}.container .sleeve .image-wrap[data-ratio=\"1,1.5\"].border-width-3{padding-bottom:calc(150% - 30px)}.container .sleeve .image-wrap[data-ratio=\"1,1.5\"].border-width-4{padding-bottom:calc(150% - 60px)}.container .sleeve .image-wrap[data-ratio=\"1,1.5\"].border-width-5{padding-bottom:calc(150% - 90px)}.container .sleeve .image-wrap[data-ratio=\"1,1.5\"].border-width-6{padding-bottom:calc(150% - 120px)}.container .sleeve .image-wrap[data-ratio=\"1,2\"]{padding-bottom:200%}.container .sleeve .image-wrap[data-ratio=\"1,2\"].border-width-1{padding-bottom:calc(200% - 10px)}.container .sleeve .image-wrap[data-ratio=\"1,2\"].border-width-2{padding-bottom:calc(200% - 20px)}.container .sleeve .image-wrap[data-ratio=\"1,2\"].border-width-3{padding-bottom:calc(200% - 30px)}.container .sleeve .image-wrap[data-ratio=\"1,2\"].border-width-4{padding-bottom:calc(200% - 60px)}.container .sleeve .image-wrap[data-ratio=\"1,2\"].border-width-5{padding-bottom:calc(200% - 90px)}.container .sleeve .image-wrap[data-ratio=\"1,2\"].border-width-6{padding-bottom:calc(200% - 120px)}.container .sleeve .image-wrap.rounded-true{overflow:hidden;border-radius:10px}.container .sleeve .image-wrap .circle{position:absolute;width:30px;height:30px;background-color:#FFFFFF;bottom:15px;right:15px;border-radius:50%;text-align:center;padding:6.5px;box-sizing:border-box}.container .sleeve .image-wrap .circle svg path{stroke:#000000}.container .sleeve .image-wrap .circle.dark{background-color:#000000}.container .sleeve .image-wrap .circle.dark svg path{stroke:#FFFFFF}.container .sleeve .image-wrap .circle svg{position:relative;display:inline-block;top:-1px;height:15px;width:15px}.container .sleeve .image-wrap img{display:none}";
+const BiggiveBiographyCardStyle0 = biggiveBiographyCardCss;
 
 const BiggiveBiographyCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBiographyCard extends HTMLElement {
     constructor() {
@@ -44,7 +45,7 @@ const BiggiveBiographyCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBio
                     this.borderWidth }, this.imageUrl != '' ? (h("div", { "data-ratio": this.ratio, class: 'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString(), style: { 'background-image': "url('" + this.imageUrl + "')" } }, h("img", { src: this.imageUrl, alt: this.fullName, title: this.fullName }))) : null), h("h3", { class: "full-name" }, this.fullName), h("div", { class: "job-title" }, this.jobTitle)));
         }
     }
-    static get style() { return biggiveBiographyCardCss; }
+    static get style() { return BiggiveBiographyCardStyle0; }
 }, [1, "biggive-biography-card", {
         "spaceBelow": [2, "space-below"],
         "borderWidth": [2, "border-width"],

package/dist/components/biggive-biography-card.js.map

@@ -1 +1 @@
-{"file":"biggive-biography-card.js","mappings":"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","names":["BiggiveBiographyCard"],"sources":["src/components/biggive-biography-card/biggive-biography-card.scss?tag=biggive-biography-card&encapsulation=shadow","src/components/biggive-biography-card/biggive-biography-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include backgrounds();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.background-colour-#{$key} .image-wrap { background-color: $colour; }\n  }\n\n  text-align: left;\n  &.text-align-center {\n    text-align: center;\n  }\n  &.text-align-right {\n    text-align: right;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  h3.full-name {\n    font-size: font-size-medium();\n    margin: 0;\n  }\n\n  div.job-title {\n    font-size: font-size-small();\n    margin: 0;    \n  }\n  \n\n  .sleeve {\n\n    \n    @each $key, $colour in $brandColoursIncBrand6Turquoise {\n\n      &.border-width-1.border-colour-#{$key} { border: $spacer-1 solid $colour; }\n      &.border-width-2.border-colour-#{$key} { border: $spacer-2 solid $colour; }\n      &.border-width-3.border-colour-#{$key} { border: $spacer-3 solid $colour; }\n      &.border-width-4.border-colour-#{$key} { border: $spacer-4 solid $colour; }\n      &.border-width-5.border-colour-#{$key} { border: $spacer-5 solid $colour; }\n      &.border-width-6.border-colour-#{$key} { border: $spacer-6 solid $colour; }\n    }\n  \n\n    margin-bottom: $spacer-2;\n\n    &.circle-true {\n      overflow: hidden;\n      border-radius: 50%;\n    }\n\n\n    .image-wrap {\n      position: relative;\n      background-position: center center;\n      background-size: cover;\n      background-repeat: no-repeat;\n  \n      &.image-style-cover {\n        background-size: cover;\n      }\n      &.image-style-contain {\n        background-size: contain;\n      }\n  \n      &[data-ratio=\"1,1\"] { padding-bottom: 100%; }\n      &[data-ratio=\"1,1\"].border-width-1 { padding-bottom: calc(100% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-2 { padding-bottom: calc(100% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-3 { padding-bottom: calc(100% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-4 { padding-bottom: calc(100% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-5 { padding-bottom: calc(100% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-6 { padding-bottom: calc(100% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,1.5\"] { padding-bottom: 150%; }\n      &[data-ratio=\"1,1.5\"].border-width-1 { padding-bottom: calc(150% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-2 { padding-bottom: calc(150% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-3 { padding-bottom: calc(150% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-4 { padding-bottom: calc(150% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-5 { padding-bottom: calc(150% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-6 { padding-bottom: calc(150% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,2\"] { padding-bottom: 200%; }\n      &[data-ratio=\"1,2\"].border-width-1 { padding-bottom: calc(200% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-2 { padding-bottom: calc(200% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-3 { padding-bottom: calc(200% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-4 { padding-bottom: calc(200% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-5 { padding-bottom: calc(200% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-6 { padding-bottom: calc(200% - ( $spacer-6 * 2 )); }\n  \n  \n  \n  \n  \n  \n      &.rounded-true {\n        overflow: hidden;\n        border-radius: 10px;\n      }\n  \n  \n\n  \n      .circle {\n        position: absolute;\n        width: 30px;\n        height: 30px;\n        background-color: #FFFFFF;\n        bottom: 15px;\n        right: 15px;\n        border-radius: 50%;\n        text-align: center;\n        padding: 6.5px;\n        box-sizing: border-box;\n        svg path {\n          stroke: #000000;\n        }\n        &.dark {\n          background-color: #000000;\n          svg path {\n            stroke: #FFFFFF;\n          }\n        }\n        svg {\n          position: relative;\n          display: inline-block;\n          top: -1px;\n          height: 15px;\n          width: 15px;\n        }\n      }\n  \n  \n  \n      img {\n        display: none;\n      }\n\n\n  }\n\n\n\n  }\n\n\n}","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-biography-card',\n  styleUrl: 'biggive-biography-card.scss',\n  shadow: true,\n})\nexport class BiggiveBiographyCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() borderWidth: spacingOption = 0;\n\n  @Prop() imageUrl: string = '';\n\n  @Prop() imageStyle: 'cover' | 'contain' = 'cover';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() fullName: string = '';\n\n  @Prop() jobTitle: string = '';\n\n  @Prop() textAlign: 'center' | 'left' | 'right' = 'left';\n\n  @Prop() ratio: '1,1' | '1,1.5' | '1,2' = '1,1.5';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() circleColour: 'light' | 'dark' = 'light';\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() url: string = '';\n\n  render() {\n    if (this.url != '') {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <a href={this.url}>\n            <div\n              class={\n                'sleeve circle-' +\n                this.circle.toString() +\n                ' border-colour-' +\n                this.backgroundColour +\n                ' background-colour-' +\n                this.backgroundColour +\n                ' border-width-' +\n                this.borderWidth\n              }\n            >\n              {this.imageUrl != '' ? (\n                <div\n                  data-ratio={this.ratio}\n                  class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                  style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n                >\n                  <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n                  <div class={'circle ' + this.circleColour}>\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path stroke-color=\"1\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" />\n                    </svg>\n                  </div>\n                </div>\n              ) : null}\n            </div>\n            <h3 class=\"full-name\">{this.fullName}</h3>\n            <div class=\"job-title\">{this.jobTitle}</div>\n          </a>\n        </div>\n      );\n    } else {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <div\n            class={\n              'sleeve circle-' +\n              this.circle.toString() +\n              ' border-colour-' +\n              this.backgroundColour +\n              ' background-colour-' +\n              this.backgroundColour +\n              ' border-width-' +\n              this.borderWidth\n            }\n          >\n            {this.imageUrl != '' ? (\n              <div\n                data-ratio={this.ratio}\n                class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n              >\n                <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n              </div>\n            ) : null}\n          </div>\n          <h3 class=\"full-name\">{this.fullName}</h3>\n          <div class=\"job-title\">{this.jobTitle}</div>\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}
+{"file":"biggive-biography-card.js","mappings":"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","names":["BiggiveBiographyCard"],"sources":["src/components/biggive-biography-card/biggive-biography-card.scss?tag=biggive-biography-card&encapsulation=shadow","src/components/biggive-biography-card/biggive-biography-card.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include backgrounds();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.background-colour-#{$key} .image-wrap { background-color: $colour; }\n  }\n\n  text-align: left;\n  &.text-align-center {\n    text-align: center;\n  }\n  &.text-align-right {\n    text-align: right;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  h3.full-name {\n    font-size: font-size-medium();\n    margin: 0;\n  }\n\n  div.job-title {\n    font-size: font-size-small();\n    margin: 0;    \n  }\n  \n\n  .sleeve {\n\n    \n    @each $key, $colour in $brandColoursIncBrand6Turquoise {\n\n      &.border-width-1.border-colour-#{$key} { border: $spacer-1 solid $colour; }\n      &.border-width-2.border-colour-#{$key} { border: $spacer-2 solid $colour; }\n      &.border-width-3.border-colour-#{$key} { border: $spacer-3 solid $colour; }\n      &.border-width-4.border-colour-#{$key} { border: $spacer-4 solid $colour; }\n      &.border-width-5.border-colour-#{$key} { border: $spacer-5 solid $colour; }\n      &.border-width-6.border-colour-#{$key} { border: $spacer-6 solid $colour; }\n    }\n  \n\n    margin-bottom: $spacer-2;\n\n    &.circle-true {\n      overflow: hidden;\n      border-radius: 50%;\n    }\n\n\n    .image-wrap {\n      position: relative;\n      background-position: center center;\n      background-size: cover;\n      background-repeat: no-repeat;\n  \n      &.image-style-cover {\n        background-size: cover;\n      }\n      &.image-style-contain {\n        background-size: contain;\n      }\n  \n      &[data-ratio=\"1,1\"] { padding-bottom: 100%; }\n      &[data-ratio=\"1,1\"].border-width-1 { padding-bottom: calc(100% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-2 { padding-bottom: calc(100% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-3 { padding-bottom: calc(100% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-4 { padding-bottom: calc(100% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-5 { padding-bottom: calc(100% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1\"].border-width-6 { padding-bottom: calc(100% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,1.5\"] { padding-bottom: 150%; }\n      &[data-ratio=\"1,1.5\"].border-width-1 { padding-bottom: calc(150% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-2 { padding-bottom: calc(150% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-3 { padding-bottom: calc(150% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-4 { padding-bottom: calc(150% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-5 { padding-bottom: calc(150% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,1.5\"].border-width-6 { padding-bottom: calc(150% - ( $spacer-6 * 2 )); }\n  \n      &[data-ratio=\"1,2\"] { padding-bottom: 200%; }\n      &[data-ratio=\"1,2\"].border-width-1 { padding-bottom: calc(200% - ( $spacer-1 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-2 { padding-bottom: calc(200% - ( $spacer-2 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-3 { padding-bottom: calc(200% - ( $spacer-3 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-4 { padding-bottom: calc(200% - ( $spacer-4 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-5 { padding-bottom: calc(200% - ( $spacer-5 * 2 )); }\n      &[data-ratio=\"1,2\"].border-width-6 { padding-bottom: calc(200% - ( $spacer-6 * 2 )); }\n  \n  \n  \n  \n  \n  \n      &.rounded-true {\n        overflow: hidden;\n        border-radius: 10px;\n      }\n  \n  \n\n  \n      .circle {\n        position: absolute;\n        width: 30px;\n        height: 30px;\n        background-color: #FFFFFF;\n        bottom: 15px;\n        right: 15px;\n        border-radius: 50%;\n        text-align: center;\n        padding: 6.5px;\n        box-sizing: border-box;\n        svg path {\n          stroke: #000000;\n        }\n        &.dark {\n          background-color: #000000;\n          svg path {\n            stroke: #FFFFFF;\n          }\n        }\n        svg {\n          position: relative;\n          display: inline-block;\n          top: -1px;\n          height: 15px;\n          width: 15px;\n        }\n      }\n  \n  \n  \n      img {\n        display: none;\n      }\n\n\n  }\n\n\n\n  }\n\n\n}","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-biography-card',\n  styleUrl: 'biggive-biography-card.scss',\n  shadow: true,\n})\nexport class BiggiveBiographyCard {\n  @Prop() spaceBelow: spacingOption = 0;\n\n  @Prop() borderWidth: spacingOption = 0;\n\n  @Prop() imageUrl: string = '';\n\n  @Prop() imageStyle: 'cover' | 'contain' = 'cover';\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() fullName: string = '';\n\n  @Prop() jobTitle: string = '';\n\n  @Prop() textAlign: 'center' | 'left' | 'right' = 'left';\n\n  @Prop() ratio: '1,1' | '1,1.5' | '1,2' = '1,1.5';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() circleColour: 'light' | 'dark' = 'light';\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() url: string = '';\n\n  render() {\n    if (this.url != '') {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <a href={this.url}>\n            <div\n              class={\n                'sleeve circle-' +\n                this.circle.toString() +\n                ' border-colour-' +\n                this.backgroundColour +\n                ' background-colour-' +\n                this.backgroundColour +\n                ' border-width-' +\n                this.borderWidth\n              }\n            >\n              {this.imageUrl != '' ? (\n                <div\n                  data-ratio={this.ratio}\n                  class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                  style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n                >\n                  <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n                  <div class={'circle ' + this.circleColour}>\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path stroke-color=\"1\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" />\n                    </svg>\n                  </div>\n                </div>\n              ) : null}\n            </div>\n            <h3 class=\"full-name\">{this.fullName}</h3>\n            <div class=\"job-title\">{this.jobTitle}</div>\n          </a>\n        </div>\n      );\n    } else {\n      return (\n        <div class={'container space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' text-align-' + this.textAlign}>\n          <div\n            class={\n              'sleeve circle-' +\n              this.circle.toString() +\n              ' border-colour-' +\n              this.backgroundColour +\n              ' background-colour-' +\n              this.backgroundColour +\n              ' border-width-' +\n              this.borderWidth\n            }\n          >\n            {this.imageUrl != '' ? (\n              <div\n                data-ratio={this.ratio}\n                class={'image-wrap image-style-' + this.imageStyle + ' rounded-' + this.rounded.toString()}\n                style={{ 'background-image': \"url('\" + this.imageUrl + \"')\" }}\n              >\n                <img src={this.imageUrl} alt={this.fullName} title={this.fullName} />\n              </div>\n            ) : null}\n          </div>\n          <h3 class=\"full-name\">{this.fullName}</h3>\n          <div class=\"job-title\">{this.jobTitle}</div>\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/components/biggive-boxed-content.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveBoxedContentCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}:host{display:content}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}";
+const BiggiveBoxedContentStyle0 = biggiveBoxedContentCss;
 
 const BiggiveBoxedContent$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBoxedContent extends HTMLElement {
     constructor() {
@@ -25,7 +26,7 @@ const BiggiveBoxedContent$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBoxe
                 ' shadow-' +
                 this.shadow }, h("slot", null)));
     }
-    static get style() { return biggiveBoxedContentCss; }
+    static get style() { return BiggiveBoxedContentStyle0; }
 }, [1, "biggive-boxed-content", {
         "spaceBelow": [2, "space-below"],
         "verticalPadding": [2, "vertical-padding"],

package/dist/components/biggive-boxed-content.js.map

@@ -1 +1 @@
-{"file":"biggive-boxed-content.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ujGAAujG;;MCOzkGA,qBAAmB;;;;;0BAID,CAAC;+BAII,CAAC;iCAIC,CAAC;gCAIF,OAAO;sBAIhB,IAAI;;IAE9B,MAAM;QACJ,QACE,WACE,KAAK,EACH,8BAA8B;gBAC9B,IAAI,CAAC,gBAAgB;gBACrB,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,oBAAoB;gBACpB,IAAI,CAAC,eAAe;gBACpB,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBoxedContent"],"sources":["src/components/biggive-boxed-content/biggive-boxed-content.scss?tag=biggive-boxed-content&encapsulation=shadow","src/components/biggive-boxed-content/biggive-boxed-content.tsx"],"sourcesContent":["@include backgrounds();\n\n:host {\n  display: content;\n}\n\n.container {\n  @include standard-font();\n  &.shadow-true {\n    @include lower-shadow();\n  }  \n}\n\n.horizontal-padding-1 { padding-left: $spacer-1; padding-right: $spacer-1; }\n.horizontal-padding-2 { padding-left: $spacer-2; padding-right: $spacer-2; }\n.horizontal-padding-3 { padding-left: $spacer-3; padding-right: $spacer-3; }\n.horizontal-padding-4 { padding-left: $spacer-4; padding-right: $spacer-4; }\n.horizontal-padding-5 { padding-left: $spacer-5; padding-right: $spacer-5; }\n.horizontal-padding-6 { padding-left: $spacer-6; padding-right: $spacer-6; }\n\n.vertical-padding-1 { padding-top: $spacer-1; padding-bottom: $spacer-1; }\n.vertical-padding-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; }\n.vertical-padding-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; }\n.vertical-padding-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; }\n.vertical-padding-5 { padding-top: $spacer-5; padding-bottom: $spacer-5; }\n.vertical-padding-6 { padding-top: $spacer-6; padding-bottom: $spacer-6; }","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-boxed-content',\n  styleUrl: 'biggive-boxed-content.scss',\n  shadow: true,\n})\nexport class BiggiveBoxedContent {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Vertical padding\n   */\n  @Prop() verticalPadding: number = 3;\n  /**\n   * Horizontal padding\n   */\n  @Prop() horizontalPadding: number = 3;\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'white';\n  /**\n   * Shadow\n   */\n  @Prop() shadow: boolean = true;\n\n  render() {\n    return (\n      <div\n        class={\n          'container background-colour-' +\n          this.backgroundColour +\n          ' space-below-' +\n          this.spaceBelow +\n          ' horizontal-padding-' +\n          this.horizontalPadding +\n          ' vertical-padding-' +\n          this.verticalPadding +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-boxed-content.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ujGAAujG,CAAC;AACvlG,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;+BAII,CAAC;iCAIC,CAAC;gCAIF,OAAO;sBAIhB,IAAI;;IAE9B,MAAM;QACJ,QACE,WACE,KAAK,EACH,8BAA8B;gBAC9B,IAAI,CAAC,gBAAgB;gBACrB,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,oBAAoB;gBACpB,IAAI,CAAC,eAAe;gBACpB,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBoxedContent"],"sources":["src/components/biggive-boxed-content/biggive-boxed-content.scss?tag=biggive-boxed-content&encapsulation=shadow","src/components/biggive-boxed-content/biggive-boxed-content.tsx"],"sourcesContent":["@include backgrounds();\n\n:host {\n  display: content;\n}\n\n.container {\n  @include standard-font();\n  &.shadow-true {\n    @include lower-shadow();\n  }  \n}\n\n.horizontal-padding-1 { padding-left: $spacer-1; padding-right: $spacer-1; }\n.horizontal-padding-2 { padding-left: $spacer-2; padding-right: $spacer-2; }\n.horizontal-padding-3 { padding-left: $spacer-3; padding-right: $spacer-3; }\n.horizontal-padding-4 { padding-left: $spacer-4; padding-right: $spacer-4; }\n.horizontal-padding-5 { padding-left: $spacer-5; padding-right: $spacer-5; }\n.horizontal-padding-6 { padding-left: $spacer-6; padding-right: $spacer-6; }\n\n.vertical-padding-1 { padding-top: $spacer-1; padding-bottom: $spacer-1; }\n.vertical-padding-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; }\n.vertical-padding-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; }\n.vertical-padding-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; }\n.vertical-padding-5 { padding-top: $spacer-5; padding-bottom: $spacer-5; }\n.vertical-padding-6 { padding-top: $spacer-6; padding-bottom: $spacer-6; }","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-boxed-content',\n  styleUrl: 'biggive-boxed-content.scss',\n  shadow: true,\n})\nexport class BiggiveBoxedContent {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Vertical padding\n   */\n  @Prop() verticalPadding: number = 3;\n  /**\n   * Horizontal padding\n   */\n  @Prop() horizontalPadding: number = 3;\n  /**\n   * Background colour\n   */\n  @Prop() backgroundColour: string = 'white';\n  /**\n   * Shadow\n   */\n  @Prop() shadow: boolean = true;\n\n  render() {\n    return (\n      <div\n        class={\n          'container background-colour-' +\n          this.backgroundColour +\n          ' space-below-' +\n          this.spaceBelow +\n          ' horizontal-padding-' +\n          this.horizontalPadding +\n          ' vertical-padding-' +\n          this.verticalPadding +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-branded-image.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const biggiveBrandedImageCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.image-wrap img{width:100%;height:auto}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative}.container .slug{text-align:center;font-weight:bold;background-color:#2AF135;color:#000000;padding:5px 15px;width:100%;margin:-17px auto 17px auto;transform:translateY(50%);box-sizing:border-box}.container img{width:100%}.container .logo-wrap{border-radius:50%;width:120px;height:120px;transform:translateY(-50%);margin-top:30px;margin-bottom:-30px;background-size:contain;background-position:center center;background-repeat:no-repeat;background-color:#FFFFFF}@media screen and (max-width: 768px){.container .logo-wrap{width:100px;height:100px}}@media screen and (max-width: 576px){.container .logo-wrap{width:70px;height:70px;margin-top:20px}}.container #charityName{color:#2C089B;display:block;margin-bottom:5px;width:fit-content}.container #charityName,.container .charity-info{font-size:17px}@media screen and (max-width: 768px){.container #charityName,.container .charity-info{font-size:16px}}@media screen and (max-width: 576px){.container #charityName,.container .charity-info{font-size:15px}}@media screen and (max-width: 450px){.container #charityName,.container .charity-info{font-size:14px}}";
+const BiggiveBrandedImageStyle0 = biggiveBrandedImageCss;
 
 const BiggiveBrandedImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBrandedImage extends HTMLElement {
     constructor() {
@@ -18,7 +19,7 @@ const BiggiveBrandedImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveBran
     render() {
         return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "slug" }, this.slug), this.imageUrl !== undefined && this.imageUrl !== null ? (h("div", { class: "image-wrap" }, h("img", { src: this.imageUrl }))) : null, this.logoUrl !== undefined && this.logoUrl !== null ? h("div", { class: "logo-wrap", style: { 'background-image': "url('" + this.logoUrl + "')" } }) : null, this.charityName !== undefined && this.charityName !== null ? h("h3", { class: "title" }, this.charityName) : null, this.charityLocation !== undefined && this.charityLocation !== null ? h("div", { class: "charity-info" }, this.charityLocation) : null));
     }
-    static get style() { return biggiveBrandedImageCss; }
+    static get style() { return BiggiveBrandedImageStyle0; }
 }, [1, "biggive-branded-image", {
         "spaceBelow": [2, "space-below"],
         "imageUrl": [1, "image-url"],

package/dist/components/biggive-branded-image.js.map

@@ -1 +1 @@
-{"file":"biggive-branded-image.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6vDAA6vD;;MCO/wDA,qBAAmB;;;;;0BAID,CAAC;wBAIH,EAAE;uBAKH,EAAE;;;;;;IAuB5B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACvB,IACJ,IAAI,EACP,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,GAAQ,GAAG,IAAI,EAExJ,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,UAAI,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,CAAM,GAAG,IAAI,EAC9G,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,eAAe,CAAO,GAAG,IAAI,CAChI,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBrandedImage"],"sources":["src/components/biggive-branded-image/biggive-branded-image.scss?tag=biggive-branded-image&encapsulation=shadow","src/components/biggive-branded-image/biggive-branded-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .slug {\n    text-align: center;\n    font-weight: bold;\n    background-color: $colour-secondary-green;\n    color: $colour-black;\n    padding: $spacer-1 $spacer-3;\n    width: 100%;\n    margin: -17px auto 17px auto;\n    transform: translateY(50%);\n    box-sizing: border-box;\n  }\n\n  img {\n    width: 100%;\n  }\n\n  .logo-wrap {\n    border-radius: 50%;\n    width: 120px;\n    height: 120px;\n    transform: translateY(-50%);\n    margin-top: 30px;\n    margin-bottom: -30px; // Breathing space before charity name etc.\n    background-size: contain;\n    background-position: center center;\n    background-repeat: no-repeat;\n    background-color: #FFFFFF;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      width: 70px;\n      height: 70px;\n      margin-top: 20px;\n    }\n  }\n\n  #charityName {\n    color: $colour-primary-blue;\n    display: block;\n    margin-bottom: 5px;\n    width: fit-content; // so link doesn't go full width\n  }\n\n  #charityName, .charity-info {\n    font-size: 17px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 16px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      font-size: 15px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 14px;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-branded-image',\n  styleUrl: 'biggive-branded-image.scss',\n  shadow: true,\n})\nexport class BiggiveBrandedImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Full URL of the logo.\n   */\n  @Prop() logoUrl: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Charity name\n   */\n  @Prop() charityName: string;\n\n  /**\n   * Charity location\n   */\n  @Prop() charityLocation: string;\n\n  /**\n   * Link to the charity's website\n   * @deprecated We should stop passing this soon, and will link to charity URLs alongside socials.\n   */\n  @Prop() charityUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {<div class=\"slug\">{this.slug}</div>}\n        {this.imageUrl !== undefined && this.imageUrl !== null ? (\n          <div class=\"image-wrap\">\n            <img src={this.imageUrl} />\n          </div>\n        ) : null}\n        {this.logoUrl !== undefined && this.logoUrl !== null ? <div class=\"logo-wrap\" style={{ 'background-image': \"url('\" + this.logoUrl + \"')\" }}></div> : null}\n\n        {this.charityName !== undefined && this.charityName !== null ? <h3 class=\"title\">{this.charityName}</h3> : null}\n        {this.charityLocation !== undefined && this.charityLocation !== null ? <div class=\"charity-info\">{this.charityLocation}</div> : null}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-branded-image.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6vDAA6vD,CAAC;AAC7xD,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;0BAID,CAAC;wBAIH,EAAE;uBAKH,EAAE;;;;;;IAuB5B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IACpD,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACvB,IACJ,IAAI,EACP,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,GAAQ,GAAG,IAAI,EAExJ,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,UAAI,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,CAAM,GAAG,IAAI,EAC9G,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,GAAG,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,eAAe,CAAO,GAAG,IAAI,CAChI,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveBrandedImage"],"sources":["src/components/biggive-branded-image/biggive-branded-image.scss?tag=biggive-branded-image&encapsulation=shadow","src/components/biggive-branded-image/biggive-branded-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  position: relative;\n  .slug {\n    text-align: center;\n    font-weight: bold;\n    background-color: $colour-secondary-green;\n    color: $colour-black;\n    padding: $spacer-1 $spacer-3;\n    width: 100%;\n    margin: -17px auto 17px auto;\n    transform: translateY(50%);\n    box-sizing: border-box;\n  }\n\n  img {\n    width: 100%;\n  }\n\n  .logo-wrap {\n    border-radius: 50%;\n    width: 120px;\n    height: 120px;\n    transform: translateY(-50%);\n    margin-top: 30px;\n    margin-bottom: -30px; // Breathing space before charity name etc.\n    background-size: contain;\n    background-position: center center;\n    background-repeat: no-repeat;\n    background-color: #FFFFFF;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      width: 100px;\n      height: 100px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      width: 70px;\n      height: 70px;\n      margin-top: 20px;\n    }\n  }\n\n  #charityName {\n    color: $colour-primary-blue;\n    display: block;\n    margin-bottom: 5px;\n    width: fit-content; // so link doesn't go full width\n  }\n\n  #charityName, .charity-info {\n    font-size: 17px;\n\n    @media screen and (max-width: $screen-tablet-max) {\n      font-size: 16px;\n    }\n\n    @media screen and (max-width: $screen-mobile-max) {\n      font-size: 15px;\n    }\n\n    @media screen and (max-width: $screen-mobile-small) {\n      font-size: 14px;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-branded-image',\n  styleUrl: 'biggive-branded-image.scss',\n  shadow: true,\n})\nexport class BiggiveBrandedImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Full URL of a image.\n   */\n  @Prop() imageUrl: string = '';\n\n  /**\n   * Full URL of the logo.\n   */\n  @Prop() logoUrl: string = '';\n\n  /**\n   * Slug\n   */\n  @Prop() slug: string;\n\n  /**\n   * Charity name\n   */\n  @Prop() charityName: string;\n\n  /**\n   * Charity location\n   */\n  @Prop() charityLocation: string;\n\n  /**\n   * Link to the charity's website\n   * @deprecated We should stop passing this soon, and will link to charity URLs alongside socials.\n   */\n  @Prop() charityUrl: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {<div class=\"slug\">{this.slug}</div>}\n        {this.imageUrl !== undefined && this.imageUrl !== null ? (\n          <div class=\"image-wrap\">\n            <img src={this.imageUrl} />\n          </div>\n        ) : null}\n        {this.logoUrl !== undefined && this.logoUrl !== null ? <div class=\"logo-wrap\" style={{ 'background-image': \"url('\" + this.logoUrl + \"')\" }}></div> : null}\n\n        {this.charityName !== undefined && this.charityName !== null ? <h3 class=\"title\">{this.charityName}</h3> : null}\n        {this.charityLocation !== undefined && this.charityLocation !== null ? <div class=\"charity-info\">{this.charityLocation}</div> : null}\n      </div>\n    );\n  }\n}\n"],"version":3}