@biggive/components 202401301136.0.0 → 202401311504.0.0

package/dist/components/biggive-cookie-banner.js.map

@@ -1 +1 @@
-{"file":"biggive-cookie-banner.js","mappings":"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","names":["BiggiveCookieBanner"],"sources":["src/components/biggive-cookie-banner/biggive-cookie-banner.scss?tag=biggive-cookie-banner&encapsulation=shadow","src/components/biggive-cookie-banner/biggive-cookie-banner.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\nh2:first-child {\n  // padding of the container is enough, a top margin would make the banner unsymmetrical.\n  margin-top: 0;\n}\n\ndiv.cooke-consent-container {\n  @include standard-font();\n  @include font-size-small();\n  border-radius: 10px;\n  background: white;\n  border: 1px solid black;\n  max-width: 500px;\n  padding: 1em;\n}\n\ndiv.button-group {\n  margin-top: 1em;\n  display: flex;\n  justify-content: space-evenly;\n  width: 100%;\n  flex-direction: column;\n  gap: 1em;\n\n  @media screen and (min-width: $screen-mobile-medium) {\n    flex-direction: row-reverse;\n  }\n}\n\nbiggive-popup {\n  @include font-size-medium();\n  div.content {\n    max-height: 95vh;\n    overflow: auto;\n    h5 {\n      border-bottom: 2px solid black;\n      max-width: 25em;\n      margin-bottom: 5px;\n    }\n\n    p {\n      margin-top: 5px;\n      margin-bottom: 8px;\n    }\n\n    div.radio-group {\n      margin-bottom: 30px;\n    }\n  }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-cookie-banner',\n  styleUrl: 'biggive-cookie-banner.scss',\n  shadow: true,\n})\nexport class BiggiveCookieBanner {\n  @Prop() blogUriPrefix!: string;\n  @Element() el: HTMLBiggiveCookieBannerElement;\n\n  /**\n   * Indicates that the user accepts cookies for any purpose, without discrimination.\n   */\n  @Event({\n    eventName: 'cookieBannerAcceptAllSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerAcceptAllSelected: EventEmitter<void>;\n\n  /**\n   * Indicates that the user has made a selection of cookies purpose to accept.\n   *\n   * Event data is an object with boolean properties to say whether the user accepts or refuses each category of optional cookie.\n   */\n  @Event({\n    eventName: 'cookieBannerSavePreferencesSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerSavePreferencesSelected: EventEmitter<{ analyticsAndTesting: Boolean; thirdParty: boolean }>;\n\n  private handleChoosePrefencesClick = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.openFromOutside();\n  };\n\n  private handleAcceptSelectedCookies = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n\n    const analyticsAndTestingRadio = this.el.shadowRoot?.getElementById('a-and-t-on') as HTMLInputElement;\n    const thirdPartyRadio = this.el.shadowRoot?.getElementById('third-party-on') as HTMLInputElement;\n\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: analyticsAndTestingRadio.checked, thirdParty: thirdPartyRadio.checked });\n\n    elementById.closeFromOutside();\n  };\n\n  private handleAcceptAllClick = () => {\n    // We just emit the event - it will be up to the application, e.g. wp or frontend to listen for the event, record the acceptence, and make\n    // and make this component disappear.\n\n    this.cookieBannerAcceptAllSelected.emit();\n  };\n\n  render() {\n    return (\n      <div class=\"cooke-consent-container\">\n        <biggive-popup id=\"cookie-preferences-popup\">\n          <div class=\"content\">\n            <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Manage your cookie preferences</h4>\n            <form>\n              <div class=\"radio-group\">\n                <h5>Essential Cookies</h5>\n                <p>These cookies are necessary to ensure our website functions correctly and include required cookies from third parties.</p>\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-off\" disabled={true} />\n                <label htmlFor=\"necassary-on\">Off</label>\n\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-on\" disabled={true} checked={true} />\n                <label htmlFor=\"necassary-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Analytics & Testing Cookies</h5>\n                <p>\n                  We use analytics cookies to track activity on our website. For example, the pages you’ve visited, the content you’ve engaged with and the search terms you’ve\n                  used. This allows us to personalise and improve our content.\n                </p>\n\n                <p>\n                  We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance\n                  your user experience.\n                </p>\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-off\" checked={true} />\n                <label htmlFor=\"a-and-t-off\">Off</label>\n\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-on\" />\n                <label htmlFor=\"a-and-t-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Third-party Cookies </h5>\n                <p>\n                  These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our\n                  donation experience survey.\n                </p>\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-off\" checked={true} />\n                <label htmlFor=\"third-party-off\">Off</label>\n\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-on\" />\n                <label htmlFor=\"third-party-on\">On</label>\n              </div>\n\n              <biggive-button\n                space-below=\"0\"\n                space-above=\"2\"\n                colour-scheme=\"secondary\"\n                is-past-campaign=\"false\"\n                is-future-campaign=\"false\"\n                label=\"Accept Selected Cookies\"\n                open-in-new-tab=\"false\"\n                full-width=\"false\"\n                size=\"small\"\n                rounded={false}\n                centered={false}\n                button-id=\"accept-selected-button\"\n                onClick={this.handleAcceptSelectedCookies}\n              ></biggive-button>\n            </form>\n          </div>\n        </biggive-popup>\n\n        <h2>Our website uses cookies</h2>\n\n        <p>\n          We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the\n          website and make improvements.\n        </p>\n\n        <p>\n          <a href={this.blogUriPrefix + '/privacy'}>Find out more in our Privacy Policy</a>\n        </p>\n\n        <div class=\"button-group\">\n          <biggive-button\n            onClick={this.handleAcceptAllClick}\n            space-below=\"0\"\n            colour-scheme=\"secondary\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Accept All\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"accept-all-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleChoosePrefencesClick}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Choose Preferences\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-cookie-banner.js","mappings":"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","names":["BiggiveCookieBanner"],"sources":["src/components/biggive-cookie-banner/biggive-cookie-banner.scss?tag=biggive-cookie-banner&encapsulation=shadow","src/components/biggive-cookie-banner/biggive-cookie-banner.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n}\n\nh2:first-child {\n  // padding of the container is enough, a top margin would make the banner unsymmetrical.\n  margin-top: 0;\n}\n\ndiv.cooke-consent-container {\n  @include standard-font();\n  @include font-size-small();\n  border-radius: 10px;\n  background: white;\n  border: 1px solid black;\n  max-width: 500px;\n  padding: 1em;\n}\n\ndiv.button-group {\n  margin-top: 1em;\n  display: flex;\n  justify-content: space-evenly;\n  width: 100%;\n  flex-direction: column;\n  gap: 1em;\n\n  @media screen and (min-width: $screen-mobile-medium) {\n    flex-direction: row-reverse;\n  }\n}\n\nbiggive-popup {\n  @include font-size-medium();\n  div.content {\n    max-height: 95vh;\n    overflow: auto;\n    h5 {\n      border-bottom: 2px solid black;\n      max-width: 25em;\n      margin-bottom: 5px;\n    }\n\n    p {\n      margin-top: 5px;\n      margin-bottom: 8px;\n    }\n\n    div.radio-group {\n      margin-bottom: 30px;\n    }\n  }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-cookie-banner',\n  styleUrl: 'biggive-cookie-banner.scss',\n  shadow: true,\n})\nexport class BiggiveCookieBanner {\n  @Prop() blogUriPrefix!: string;\n  @Element() el: HTMLBiggiveCookieBannerElement;\n\n  /**\n   * Indicates that the user accepts cookies for any purpose, without discrimination.\n   */\n  @Event({\n    eventName: 'cookieBannerAcceptAllSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerAcceptAllSelected: EventEmitter<void>;\n\n  /**\n   * Indicates that the user has made a selection of cookies purpose to accept.\n   *\n   * Event data is an object with boolean properties to say whether the user accepts or refuses each category of optional cookie.\n   */\n  @Event({\n    eventName: 'cookieBannerSavePreferencesSelected',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  cookieBannerSavePreferencesSelected: EventEmitter<{ analyticsAndTesting: Boolean; thirdParty: boolean }>;\n\n  private handleChoosePrefencesClick = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.openFromOutside();\n  };\n\n  private handleAcceptSelectedCookies = () => {\n    const elementById = this.el.shadowRoot?.getElementById('cookie-preferences-popup') as HTMLBiggivePopupElement;\n    elementById.closeFromOutside();\n\n    const analyticsAndTestingRadio = this.el.shadowRoot?.getElementById('a-and-t-on') as HTMLInputElement;\n    const thirdPartyRadio = this.el.shadowRoot?.getElementById('third-party-on') as HTMLInputElement;\n\n    this.cookieBannerSavePreferencesSelected.emit({ analyticsAndTesting: analyticsAndTestingRadio.checked, thirdParty: thirdPartyRadio.checked });\n\n    elementById.closeFromOutside();\n  };\n\n  private handleAcceptAllClick = () => {\n    // We just emit the event - it will be up to the application, e.g. wp or frontend to listen for the event, record the acceptence, and make\n    // and make this component disappear.\n\n    this.cookieBannerAcceptAllSelected.emit();\n  };\n\n  render() {\n    return (\n      <div class=\"cooke-consent-container\">\n        <biggive-popup id=\"cookie-preferences-popup\">\n          <div class=\"content\">\n            <h4 class=\"space-above-0 space-below-3 text-colour-primary\">Manage your cookie preferences</h4>\n            <form>\n              <div class=\"radio-group\">\n                <h5>Essential Cookies</h5>\n                <p>These cookies are necessary to ensure our website functions correctly and include required cookies from third parties.</p>\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-off\" disabled={true} />\n                <label htmlFor=\"necassary-on\">Off</label>\n\n                <input type=\"radio\" name=\"necassary\" id=\"necassary-on\" disabled={true} checked={true} />\n                <label htmlFor=\"necassary-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Analytics & Testing Cookies</h5>\n                <p>\n                  We use analytics cookies to track activity on our website. For example, the pages you’ve visited, the content you’ve engaged with and the search terms you’ve\n                  used. This allows us to personalise and improve our content.\n                </p>\n\n                <p>\n                  We use testing cookies to collect data on how you interact with website features. These insights allow us to update our website and build features that enhance\n                  your user experience.\n                </p>\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-off\" checked={true} />\n                <label htmlFor=\"a-and-t-off\">Off</label>\n\n                <input type=\"radio\" name=\"a-and-t\" id=\"a-and-t-on\" />\n                <label htmlFor=\"a-and-t-on\">On</label>\n              </div>\n\n              <div class=\"radio-group\">\n                <h5>Third-party Cookies </h5>\n                <p>\n                  These cookies are used to track activity, which can help to provide a better experience and improve functionality across various applications. For example, our\n                  donation experience survey.\n                </p>\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-off\" checked={true} />\n                <label htmlFor=\"third-party-off\">Off</label>\n\n                <input type=\"radio\" name=\"third-party\" id=\"third-party-on\" />\n                <label htmlFor=\"third-party-on\">On</label>\n              </div>\n\n              <biggive-button\n                space-below=\"0\"\n                space-above=\"2\"\n                colour-scheme=\"secondary\"\n                is-past-campaign=\"false\"\n                is-future-campaign=\"false\"\n                label=\"Accept Selected Cookies\"\n                open-in-new-tab=\"false\"\n                full-width=\"false\"\n                size=\"small\"\n                rounded={false}\n                centered={false}\n                button-id=\"accept-selected-button\"\n                onClick={this.handleAcceptSelectedCookies}\n              ></biggive-button>\n            </form>\n          </div>\n        </biggive-popup>\n\n        <h2>Our website uses cookies</h2>\n\n        <p>\n          We use some essential cookies to make our website work. We'd also like to share data with our analytics platform and use analytics cookies to understand how you use the\n          website and make improvements.\n        </p>\n\n        <p>\n          <a href={this.blogUriPrefix + '/privacy'}>Find out more in our Privacy Policy</a>\n        </p>\n\n        <div class=\"button-group\">\n          <biggive-button\n            onClick={this.handleAcceptAllClick}\n            space-below=\"0\"\n            colour-scheme=\"secondary\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Accept All\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"accept-all-button\"\n          ></biggive-button>\n\n          <biggive-button\n            onClick={this.handleChoosePrefencesClick}\n            space-below=\"0\"\n            colour-scheme=\"grey-light\"\n            is-past-campaign=\"false\"\n            is-future-campaign=\"false\"\n            label=\"Choose Preferences\"\n            open-in-new-tab=\"false\"\n            full-width=\"true\"\n            size=\"medium\"\n            rounded={false}\n            centered={false}\n            button-id=\"choose-preferences-button\"\n          ></biggive-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-filtered-carousel.js

@@ -86,7 +86,7 @@ const BiggiveFilteredCarousel$1 = /*@__PURE__*/ proxyCustomElement(class Biggive
         }
     }
     render() {
-        return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "filters" }), h("biggive-carousel", { "space-below": "1", "column-count": this.columnCount, "button-background-colour": this.buttonBackgroundColour, "button-icon-colour": this.buttonIconColour })));
+        return (h("div", { key: '291c6780a1f91d24afeaded1822cd91d74a18a78', class: 'container space-below-' + this.spaceBelow }, h("div", { key: 'aed0a314d00a43e56c560462659fad3ce7af17cc', class: "filters" }), h("biggive-carousel", { key: '3ed466578a78ec8b2127f16377fa057ac8b85ea2', "space-below": "1", "column-count": this.columnCount, "button-background-colour": this.buttonBackgroundColour, "button-icon-colour": this.buttonIconColour })));
     }
     get host() { return this; }
     static get style() { return BiggiveFilteredCarouselStyle0; }

package/dist/components/biggive-filtered-carousel.js.map

@@ -1 +1 @@
-{"file":"biggive-filtered-carousel.js","mappings":"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","names":["BiggiveFilteredCarousel"],"sources":["src/components/biggive-filtered-carousel/biggive-filtered-carousel.scss?tag=biggive-filtered-carousel&encapsulation=shadow","src/components/biggive-filtered-carousel/biggive-filtered-carousel.tsx"],"sourcesContent":["\n\n\n:host {\n  display: block;\n}\n\n\n.filters {\n  margin-bottom: $spacer-3;\n  .button {\n    cursor: pointer;\n    border-radius: 20px;\n    padding: 5px 20px;\n    margin-right: 15px;\n    @include font-size-small();\n    background-color: $colour-tertiary-coral;\n    color: $colour-black;\n    border-color: $colour-tertiary-coral;\n    &.active {\n      background-color: $colour-black;\n      border-color: $colour-black;\n      color: $colour-white;\n    }\n  }\n  .clear {\n    padding: 5px;\n    height: 26px;\n    width: 26px;\n    text-align: center;\n    svg {\n      top: 3px;\n      left: 0.5px;\n      position: relative;\n      height: 16px;\n      width: 16px;\n      transform: rotate(45deg);\n    }\n  }\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-filtered-carousel',\n  styleUrl: 'biggive-filtered-carousel.scss',\n  shadow: true,\n})\nexport class BiggiveFilteredCarousel {\n  @Element() host: HTMLBiggiveFilteredCarouselElement;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() columnCount: 1 | 2 | 3 | 4 | 5 = 3;\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private children: Array<HTMLElement>;\n\n  componentDidLoad() {\n    const carousel: HTMLBiggiveCarouselElement = this.host.shadowRoot?.querySelector('biggive-carousel')!;\n    const filterWrap = this.host.shadowRoot?.querySelector('.filters')!;\n\n    this.children = new Array<HTMLElement>();\n\n    Array.from(this.host.children).forEach(item => {\n      this.children.push(item as HTMLElement);\n    });\n\n    let filters: string[] = [];\n\n    this.children.forEach(item => {\n      carousel.appendChild(item);\n\n      let itemFilters: string[] = [];\n\n      if (item.getAttribute('filters') != null) {\n        itemFilters = item.getAttribute('filters')?.split('|') ?? [];\n        filters.push(...itemFilters);\n      }\n\n      item.dataset['filters'] = JSON.stringify(itemFilters);\n    });\n\n    filters = [...new Set(filters)];\n\n    filters.forEach(filter => {\n      var button = document.createElement('span');\n      button.innerHTML = filter;\n      button.classList.add('button');\n      button.classList.add('apply');\n      button.setAttribute('data-filter', filter);\n      button.addEventListener('click', e => {\n        const button = e.target as HTMLElement;\n\n        button.classList.toggle('active');\n\n        let appliedFilters: string[] = [];\n        let buttons = this.host.shadowRoot?.querySelectorAll('.filters span.button.active');\n        buttons?.forEach(button => {\n          appliedFilters.push(button.getAttribute('data-filter')!);\n        });\n\n        this.children.forEach(item => {\n          let itemFilters: string[] = JSON.parse(item.dataset['filters']!);\n\n          if (appliedFilters.length == 0 || appliedFilters.filter(x => itemFilters.includes(x)).length > 0) {\n            item.classList.remove('hidden');\n          } else {\n            item.classList.add('hidden');\n          }\n        });\n\n        carousel.resizeToFitContent();\n      });\n\n      filterWrap.appendChild(button);\n    });\n\n    var clear = document.createElement('span');\n    clear.innerHTML =\n      '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-color=\"1\" stroke=\"#000000\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" /></svg>';\n    clear.classList.add('button');\n    clear.classList.add('clear');\n    clear.addEventListener('click', () => {\n      filterWrap.querySelectorAll('.apply').forEach(button => {\n        button.classList.remove('active');\n      });\n\n      this.children.forEach(item => {\n        item.classList.remove('hidden');\n      });\n\n      carousel.resizeToFitContent();\n    });\n\n    filterWrap.appendChild(clear);\n\n    /*\n    Check added to confirm that carousel variable is set with a valid carousel. Ommiting this check fails the npm test - although works fine at runtime in browser.\n    @todo Pass a null fn in the test so it passes without this workaround?\n    */\n    if (typeof carousel.resizeToFitContent === 'function') {\n      carousel.resizeToFitContent();\n    }\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"filters\"></div>\n        <biggive-carousel\n          space-below=\"1\"\n          column-count={this.columnCount}\n          button-background-colour={this.buttonBackgroundColour}\n          button-icon-colour={this.buttonIconColour}\n        ></biggive-carousel>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-filtered-carousel.js","mappings":"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","names":["BiggiveFilteredCarousel"],"sources":["src/components/biggive-filtered-carousel/biggive-filtered-carousel.scss?tag=biggive-filtered-carousel&encapsulation=shadow","src/components/biggive-filtered-carousel/biggive-filtered-carousel.tsx"],"sourcesContent":["\n\n\n:host {\n  display: block;\n}\n\n\n.filters {\n  margin-bottom: $spacer-3;\n  .button {\n    cursor: pointer;\n    border-radius: 20px;\n    padding: 5px 20px;\n    margin-right: 15px;\n    @include font-size-small();\n    background-color: $colour-tertiary-coral;\n    color: $colour-black;\n    border-color: $colour-tertiary-coral;\n    &.active {\n      background-color: $colour-black;\n      border-color: $colour-black;\n      color: $colour-white;\n    }\n  }\n  .clear {\n    padding: 5px;\n    height: 26px;\n    width: 26px;\n    text-align: center;\n    svg {\n      top: 3px;\n      left: 0.5px;\n      position: relative;\n      height: 16px;\n      width: 16px;\n      transform: rotate(45deg);\n    }\n  }\n}","import { Component, Prop, Element, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-filtered-carousel',\n  styleUrl: 'biggive-filtered-carousel.scss',\n  shadow: true,\n})\nexport class BiggiveFilteredCarousel {\n  @Element() host: HTMLBiggiveFilteredCarouselElement;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() columnCount: 1 | 2 | 3 | 4 | 5 = 3;\n\n  @Prop() buttonBackgroundColour: brandColour = 'white';\n\n  @Prop() buttonIconColour: brandColour = 'primary';\n\n  private children: Array<HTMLElement>;\n\n  componentDidLoad() {\n    const carousel: HTMLBiggiveCarouselElement = this.host.shadowRoot?.querySelector('biggive-carousel')!;\n    const filterWrap = this.host.shadowRoot?.querySelector('.filters')!;\n\n    this.children = new Array<HTMLElement>();\n\n    Array.from(this.host.children).forEach(item => {\n      this.children.push(item as HTMLElement);\n    });\n\n    let filters: string[] = [];\n\n    this.children.forEach(item => {\n      carousel.appendChild(item);\n\n      let itemFilters: string[] = [];\n\n      if (item.getAttribute('filters') != null) {\n        itemFilters = item.getAttribute('filters')?.split('|') ?? [];\n        filters.push(...itemFilters);\n      }\n\n      item.dataset['filters'] = JSON.stringify(itemFilters);\n    });\n\n    filters = [...new Set(filters)];\n\n    filters.forEach(filter => {\n      var button = document.createElement('span');\n      button.innerHTML = filter;\n      button.classList.add('button');\n      button.classList.add('apply');\n      button.setAttribute('data-filter', filter);\n      button.addEventListener('click', e => {\n        const button = e.target as HTMLElement;\n\n        button.classList.toggle('active');\n\n        let appliedFilters: string[] = [];\n        let buttons = this.host.shadowRoot?.querySelectorAll('.filters span.button.active');\n        buttons?.forEach(button => {\n          appliedFilters.push(button.getAttribute('data-filter')!);\n        });\n\n        this.children.forEach(item => {\n          let itemFilters: string[] = JSON.parse(item.dataset['filters']!);\n\n          if (appliedFilters.length == 0 || appliedFilters.filter(x => itemFilters.includes(x)).length > 0) {\n            item.classList.remove('hidden');\n          } else {\n            item.classList.add('hidden');\n          }\n        });\n\n        carousel.resizeToFitContent();\n      });\n\n      filterWrap.appendChild(button);\n    });\n\n    var clear = document.createElement('span');\n    clear.innerHTML =\n      '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-color=\"1\" stroke=\"#000000\" d=\"M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z\" /></svg>';\n    clear.classList.add('button');\n    clear.classList.add('clear');\n    clear.addEventListener('click', () => {\n      filterWrap.querySelectorAll('.apply').forEach(button => {\n        button.classList.remove('active');\n      });\n\n      this.children.forEach(item => {\n        item.classList.remove('hidden');\n      });\n\n      carousel.resizeToFitContent();\n    });\n\n    filterWrap.appendChild(clear);\n\n    /*\n    Check added to confirm that carousel variable is set with a valid carousel. Ommiting this check fails the npm test - although works fine at runtime in browser.\n    @todo Pass a null fn in the test so it passes without this workaround?\n    */\n    if (typeof carousel.resizeToFitContent === 'function') {\n      carousel.resizeToFitContent();\n    }\n  }\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        <div class=\"filters\"></div>\n        <biggive-carousel\n          space-below=\"1\"\n          column-count={this.columnCount}\n          button-background-colour={this.buttonBackgroundColour}\n          button-icon-colour={this.buttonIconColour}\n        ></biggive-carousel>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-form-field-select2.js

@@ -45,12 +45,12 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
             console.error('options undefined');
             options = [];
         }
-        return (h("div", { class: "selectWrapper" }, h("label", { class: greyIfRequired }, h("div", { class: 'prompt' + greyIfRequired }, this.prompt), h("div", { class: 'dropdown space-below-' +
+        return (h("div", { key: '8c61a000b390d49c61d2cc39a904b081d02dc97e', class: "selectWrapper" }, h("label", { key: '332afbc6d70acea35a61cf852eab68bc28b257e6', class: greyIfRequired }, h("div", { key: '37466cccb159f8ebaab0fd96b7cb9d9ac48de982', class: 'prompt' + greyIfRequired }, this.prompt), h("div", { key: 'e50addae238a2a9d886a1bd9d57d4cf0c0ac68b8', class: 'dropdown space-below-' +
                 this.spaceBelow +
                 ' select-style-' +
                 this.selectStyle +
                 (this.prompt === null ? '  noprompt' : '') +
-                (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { class: "sleeve" }, h("select", { class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { class: "arrow" }))))));
+                (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: 'ac0bccda5054609a99131b3e78eed47fbb3cb7e5', class: "sleeve" }, h("select", { key: '397439de8ca10ac7807aac3c429765034ce7e5e6', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: 'fb7b32d3e79c00620742c3b96e403626d266c17e', class: "arrow" }))))));
     }
     get el() { return this; }
     static get style() { return BiggiveFormFieldSelectStyle0; }

package/dist/components/biggive-form-field-select2.js.map

@@ -1 +1 @@
-{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,irHAAirH,CAAC;AACptH,qCAAe,yBAAyB;;MCM3B,sBAAsB;;;;;QA0BzB,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;;;2BAd+C,UAAU;;oCAOR,MAAM;0BAY5B,CAAC;;;IAM9B,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAgD,CAAC;QACrD,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YACpC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAY,CAAC;YACjD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;aACjF;YACD,OAAO,GAAG,MAAM,CAAC;SAClB;aAAM;YACL,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACxB;QAED,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,WAAK,KAAK,EAAC,eAAe,IACxB,aAAO,KAAK,EAAE,cAAc,IAC1B,WAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,WACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,WAAK,KAAK,EAAC,QAAQ,IACjB,cAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,WAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include dropdown();\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options: Array<{ label: string; value: string }>;\n    if (typeof this.options === 'string') {\n      let parsed = JSON.parse(this.options) as unknown;\n      if (!Array.isArray(parsed)) {\n        throw new Error('Options should be an Array<{ label: string; value: string }>');\n      }\n      options = parsed;\n    } else {\n      options = this.options;\n    }\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,irHAAirH,CAAC;AACptH,qCAAe,yBAAyB;;MCM3B,sBAAsB;;;;;QA0BzB,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;;;2BAd+C,UAAU;;oCAOR,MAAM;0BAY5B,CAAC;;;IAM9B,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAgD,CAAC;QACrD,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YACpC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAY,CAAC;YACjD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;aACjF;YACD,OAAO,GAAG,MAAM,CAAC;SAClB;aAAM;YACL,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACxB;QAED,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include dropdown();\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of category key/values, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options: Array<{ label: string; value: string }>;\n    if (typeof this.options === 'string') {\n      let parsed = JSON.parse(this.options) as unknown;\n      if (!Array.isArray(parsed)) {\n        throw new Error('Options should be an Array<{ label: string; value: string }>');\n      }\n      options = parsed;\n    } else {\n      options = this.options;\n    }\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-form.js

@@ -10,7 +10,7 @@ const BiggiveForm$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveForm extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '61e42ef8d247441ac261f691293eb1dbf4717c68' }, h("slot", { key: '2ba931b696edce24a081e1118075a9fd5f3fb0dd' })));
     }
     static get style() { return BiggiveFormStyle0; }
 }, [1, "biggive-form"]);

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

@@ -1 +1 @@
-{"file":"biggive-form.js","mappings":";;AAAA,MAAM,cAAc,GAAG,sBAAsB,CAAC;AAC9C,0BAAe,cAAc;;MCMhBA,aAAW;;;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveForm"],"sources":["src/components/biggive-form/biggive-form.css?tag=biggive-form&encapsulation=shadow","src/components/biggive-form/biggive-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form',\n  styleUrl: 'biggive-form.css',\n  shadow: true,\n})\nexport class BiggiveForm {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-form.js","mappings":";;AAAA,MAAM,cAAc,GAAG,sBAAsB,CAAC;AAC9C,0BAAe,cAAc;;MCMhBA,aAAW;;;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveForm"],"sources":["src/components/biggive-form/biggive-form.css?tag=biggive-form&encapsulation=shadow","src/components/biggive-form/biggive-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form',\n  styleUrl: 'biggive-form.css',\n  shadow: true,\n})\nexport class BiggiveForm {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-formatted-text.js

@@ -13,7 +13,7 @@ const BiggiveFormattedText$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
         this.maxWidth = 100;
     }
     render() {
-        return (h("div", { class: 'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, h("slot", null)));
+        return (h("div", { key: '65fa6b3c1743e95a1b5399ef5fc8867a4be511f2', class: 'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow }, h("slot", { key: 'a83067e64d5bfb14f3ac960491ff5b1dc8ee3c56' })));
     }
     static get style() { return BiggiveFormattedTextStyle0; }
 }, [1, "biggive-formatted-text", {

package/dist/components/biggive-formatted-text.js.map

@@ -1 +1 @@
-{"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH,CAAC;AAC71H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;;;;;0BAIF,CAAC;iCAIM,SAAS;wBAKlB,GAAG;;IAE9B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n  @include standard-font();\n  img {\n    width: 100%;\n    height: auto;\n  }\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n  &.max-width-10 .sleeve { @include max-width-10(); }\n  &.max-width-15 .sleeve { @include max-width-15(); }\n  &.max-width-20 .sleeve { @include max-width-20(); }\n  &.max-width-25 .sleeve { @include max-width-25(); }\n  &.max-width-30 .sleeve { @include max-width-30(); }\n  &.max-width-35 .sleeve { @include max-width-35(); }\n  &.max-width-40 .sleeve { @include max-width-40(); }\n  &.max-width-45 .sleeve { @include max-width-45(); }\n  &.max-width-50 .sleeve { @include max-width-50(); }\n  &.max-width-55 .sleeve { @include max-width-55(); }\n  &.max-width-60 .sleeve { @include max-width-60(); }\n  &.max-width-65 .sleeve { @include max-width-65(); }\n  &.max-width-70 .sleeve { @include max-width-70(); }\n  &.max-width-75 .sleeve { @include max-width-75(); }\n  &.max-width-80 .sleeve { @include max-width-80(); }\n  &.max-width-85 .sleeve { @include max-width-85(); }\n  &.max-width-90 .sleeve { @include max-width-90(); }\n  &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-formatted-text',\n  styleUrl: 'biggive-formatted-text.scss',\n  shadow: true,\n})\nexport class BiggiveFormattedText {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  render() {\n    return (\n      <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-formatted-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,4zHAA4zH,CAAC;AAC71H,mCAAe,uBAAuB;;MCMzBA,sBAAoB;;;;;0BAIF,CAAC;iCAIM,SAAS;wBAKlB,GAAG;;IAE9B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC/H,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveFormattedText"],"sources":["src/components/biggive-formatted-text/biggive-formatted-text.scss?tag=biggive-formatted-text&encapsulation=shadow","src/components/biggive-formatted-text/biggive-formatted-text.tsx"],"sourcesContent":["@include spacers();\n@include text-colours();\n\n:host {\n  display: block;\n}\n\n.container {\n  @include standard-font();\n  img {\n    width: 100%;\n    height: auto;\n  }\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n  &.max-width-10 .sleeve { @include max-width-10(); }\n  &.max-width-15 .sleeve { @include max-width-15(); }\n  &.max-width-20 .sleeve { @include max-width-20(); }\n  &.max-width-25 .sleeve { @include max-width-25(); }\n  &.max-width-30 .sleeve { @include max-width-30(); }\n  &.max-width-35 .sleeve { @include max-width-35(); }\n  &.max-width-40 .sleeve { @include max-width-40(); }\n  &.max-width-45 .sleeve { @include max-width-45(); }\n  &.max-width-50 .sleeve { @include max-width-50(); }\n  &.max-width-55 .sleeve { @include max-width-55(); }\n  &.max-width-60 .sleeve { @include max-width-60(); }\n  &.max-width-65 .sleeve { @include max-width-65(); }\n  &.max-width-70 .sleeve { @include max-width-70(); }\n  &.max-width-75 .sleeve { @include max-width-75(); }\n  &.max-width-80 .sleeve { @include max-width-80(); }\n  &.max-width-85 .sleeve { @include max-width-85(); }\n  &.max-width-90 .sleeve { @include max-width-90(); }\n  &.max-width-95 .sleeve { @include max-width-95(); }\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-formatted-text',\n  styleUrl: 'biggive-formatted-text.scss',\n  shadow: true,\n})\nexport class BiggiveFormattedText {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Default text colour\n   */\n  @Prop() defaultTextColour: string = 'primary';\n\n  /**\n   * Width\n   */\n  @Prop() maxWidth: number = 100;\n\n  render() {\n    return (\n      <div class={'container max-width-' + this.maxWidth + ' text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-generic-icon2.js

@@ -34,7 +34,7 @@ const BiggiveGenericIcon = /*@__PURE__*/ proxyCustomElement(class BiggiveGeneric
         const iconDefinition = this.getIconDefinition();
         return (
         // Note: the icon name prop is set as a css class too for any styling specific to certain icons
-        h("div", { class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, iconDefinition ? (h("svg", { width: iconDefinition.icon[0], height: iconDefinition.icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1] }, h("path", { d: iconDefinition.icon[4].toString() }))) : null)));
+        h("div", { key: 'c2621eea3c827f134c0671100acfda8d5d06feb1', class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { key: '73450b9fe36f1d41a6cbab3c37fd127d615dd62e', href: this.url }, iconDefinition ? (h("svg", { width: iconDefinition.icon[0], height: iconDefinition.icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1] }, h("path", { d: iconDefinition.icon[4].toString() }))) : null)));
     }
     static get style() { return BiggiveGenericIconStyle0; }
 }, [0, "biggive-generic-icon", {

package/dist/components/biggive-generic-icon2.js.map

@@ -1 +1 @@
-{"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q,CAAC;AAC95Q,iCAAe,qBAAqB;;MCSvB,kBAAkB;;;;gCACW,SAAS;0BAEf,OAAO;;;;;IAQjC,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,WAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.generic-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-generic-icon',\n  styleUrl: 'biggive-generic-icon.scss',\n  shadow: false,\n})\nexport class BiggiveGenericIcon {\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() iconColour: brandColour = 'white';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  private getIconDefinition(): IconDefinition | undefined {\n    let iconDefinition;\n    if (this.iconGroup == 'beneficiary') {\n      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    } else if (this.iconGroup == 'misc') {\n      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n    } else if (this.iconGroup == 'social') {\n      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n    } else if (this.iconGroup == 'category') {\n      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    }\n    return iconDefinition;\n  }\n\n  render() {\n    const iconDefinition = this.getIconDefinition();\n\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          {iconDefinition ? (\n            <svg\n              width={iconDefinition.icon[0]}\n              height={iconDefinition.icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n            >\n              <path d={iconDefinition.icon[4].toString()} />\n            </svg>\n          ) : null}\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-generic-icon2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,+3QAA+3Q,CAAC;AAC95Q,iCAAe,qBAAqB;;MCSvB,kBAAkB;;;;gCACW,SAAS;0BAEf,OAAO;;;;;IAQjC,iBAAiB;QACvB,IAAI,cAAc,CAAC;QACnB,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;YACnC,cAAc,GAAG,uBAAuB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,cAAc,GAAG,uBAAuB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnE;aAAM,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;YACvC,cAAc,GAAG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrE;QACD,OAAO,cAAc,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEhD;;QAEE,4DAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAC1F,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IACd,cAAc,IACb,WACE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC,UAAU,EAChC,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvE,YAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI,CAC1C,IACJ,IAAI,CACN,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-generic-icon/biggive-generic-icon.scss?tag=biggive-generic-icon","src/components/biggive-generic-icon/biggive-generic-icon.tsx"],"sourcesContent":["@include backgrounds();\n@include fills();\n\n:host {\n  display: contents;\n}\n\n.generic-icon-item {\n  @include icon-large();\n\n  @media screen and (max-width: $screen-mobile-max) {\n    @include icon-medium();\n    margin: auto;\n\n    a {\n      margin: auto;\n    }\n  }\n}\n\n.CaretRight {\n  height: 10px;\n  width: 10px;\n  margin-right: 0px;\n  a {\n    padding: 0px;\n  }\n}\n\n.MenuClose {\n  a {\n    svg {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n","import { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { Component, Prop, h } from '@stencil/core';\nimport { FontAwesomeIconsService } from '../../util/fontawesome-icons';\nimport { brandColour } from '../../globals/brand-colour';\n\n@Component({\n  tag: 'biggive-generic-icon',\n  styleUrl: 'biggive-generic-icon.scss',\n  shadow: false,\n})\nexport class BiggiveGenericIcon {\n  @Prop() backgroundColour: brandColour = 'primary';\n\n  @Prop() iconColour: brandColour = 'white';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  private getIconDefinition(): IconDefinition | undefined {\n    let iconDefinition;\n    if (this.iconGroup == 'beneficiary') {\n      iconDefinition = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);\n    } else if (this.iconGroup == 'misc') {\n      iconDefinition = FontAwesomeIconsService.getMiscIcon(this.icon);\n    } else if (this.iconGroup == 'social') {\n      iconDefinition = FontAwesomeIconsService.getSocialIcon(this.icon);\n    } else if (this.iconGroup == 'category') {\n      iconDefinition = FontAwesomeIconsService.getCategoryIcon(this.icon);\n    }\n    return iconDefinition;\n  }\n\n  render() {\n    const iconDefinition = this.getIconDefinition();\n\n    return (\n      // Note: the icon name prop is set as a css class too for any styling specific to certain icons\n      <div class={'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon}>\n        <a href={this.url}>\n          {iconDefinition ? (\n            <svg\n              width={iconDefinition.icon[0]}\n              height={iconDefinition.icon[1]}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class={'fill-' + this.iconColour}\n              viewBox={'0 0 ' + iconDefinition.icon[0] + ' ' + iconDefinition.icon[1]}\n            >\n              <path d={iconDefinition.icon[4].toString()} />\n            </svg>\n          ) : null}\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-grid.js

@@ -14,7 +14,7 @@ const BiggiveGrid$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveGrid extends
         this.columnGap = 0;
     }
     render() {
-        return (h("div", { class: 'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '') }, h("slot", null)));
+        return (h("div", { key: 'c66fde1029db1c5a4f9e516e84ca81cf0fa11492', class: 'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '') }, h("slot", { key: '64d67dd5b4dfb600547e3c791f582f62a029fa24' })));
     }
     static get style() { return BiggiveGridStyle0; }
 }, [1, "biggive-grid", {

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

@@ -1 +1 @@
-{"file":"biggive-grid.js","mappings":";;AAAA,MAAM,cAAc,GAAG,63RAA63R,CAAC;AACr5R,0BAAe,cAAc;;MCOhBA,aAAW;;;;;0BACO,CAAC;2BAEA,CAAC;4BAKC,KAAK;yBAEF,CAAC;;IAEpC,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE,CAAC,IACrK,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveGrid"],"sources":["src/components/biggive-grid/biggive-grid.scss?tag=biggive-grid&encapsulation=shadow","src/components/biggive-grid/biggive-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.grid {\n  margin-bottom: $spacer-3;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n.space-between {\n  justify-content: space-between;\n}\n\n.grid ::slotted([slot=grid-item]) {\n  display: block;\n}\n\n.column-count-2 ::slotted(*) {\n  width: calc( 100% / 2 );\n  @include flex-container-column();\n}\n\n.column-count-3 ::slotted(*) {\n  width: calc( 100% / 3 );\n  @include flex-container-column();\n}\n\n.column-count-4 ::slotted(*) {\n  width: calc( 100% / 4 );\n  @include flex-container-column();\n}\n\n.column-count-5 ::slotted(*) {\n  width: calc( 100% / 5 );\n  @include flex-container-column();\n}\n\n.column-count-6 ::slotted(*) {\n  width: calc( 100% / 6 );\n  @include flex-container-column();\n}\n\n\n.column-gap-1 { justify-content: space-between; }\n.column-gap-2 { justify-content: space-between; }\n.column-gap-3 { justify-content: space-between; }\n.column-gap-4 { justify-content: space-between; }\n.column-gap-5 { justify-content: space-between; }\n.column-gap-6 { justify-content: space-between; }\n\n\n.column-count-2.column-gap-1 ::slotted(*) { width: calc( 100% / 2 - (($spacer-1 * 1) / 2) );}\n.column-count-2.column-gap-2 ::slotted(*) { width: calc( 100% / 2 - (($spacer-2 * 1) / 2) );}\n.column-count-2.column-gap-3 ::slotted(*) { width: calc( 100% / 2 - (($spacer-3 * 1) / 2) );}\n.column-count-2.column-gap-4 ::slotted(*) { width: calc( 100% / 2 - (($spacer-4 * 1) / 2) );}\n.column-count-2.column-gap-5 ::slotted(*) { width: calc( 100% / 2 - (($spacer-5 * 1) / 2) );}\n.column-count-2.column-gap-6 ::slotted(*) { width: calc( 100% / 2 - (($spacer-6 * 1) / 2) );}\n\n.column-count-3.column-gap-1 ::slotted(*) { width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2 ::slotted(*) { width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3 ::slotted(*) { width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4 ::slotted(*) { width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5 ::slotted(*) { width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6 ::slotted(*) { width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n.column-count-4.column-gap-1 ::slotted(*) { width: calc( 100% / 4 - (($spacer-1 * 3) / 4) );}\n.column-count-4.column-gap-2 ::slotted(*) { width: calc( 100% / 4 - (($spacer-2 * 3) / 4) );}\n.column-count-4.column-gap-3 ::slotted(*) { width: calc( 100% / 4 - (($spacer-3 * 3) / 4) );}\n.column-count-4.column-gap-4 ::slotted(*) { width: calc( 100% / 4 - (($spacer-4 * 3) / 4) );}\n.column-count-4.column-gap-5 ::slotted(*) { width: calc( 100% / 4 - (($spacer-5 * 3) / 4) );}\n.column-count-4.column-gap-6 ::slotted(*) { width: calc( 100% / 4 - (($spacer-6 * 3) / 4) );}\n\n.column-count-5.column-gap-1 ::slotted(*) { width: calc( 100% / 5 - (($spacer-1 * 4) / 5) );}\n.column-count-5.column-gap-2 ::slotted(*) { width: calc( 100% / 5 - (($spacer-2 * 4) / 5) );}\n.column-count-5.column-gap-3 ::slotted(*) { width: calc( 100% / 5 - (($spacer-3 * 4) / 5) );}\n.column-count-5.column-gap-4 ::slotted(*) { width: calc( 100% / 5 - (($spacer-4 * 4) / 5) );}\n.column-count-5.column-gap-5 ::slotted(*) { width: calc( 100% / 5 - (($spacer-5 * 4) / 5) );}\n.column-count-5.column-gap-6 ::slotted(*) { width: calc( 100% / 5 - (($spacer-6 * 4) / 5) );}\n\n.column-count-6.column-gap-1 ::slotted(*) { width: calc( 100% / 6 - (($spacer-1 * 5) / 6) );}\n.column-count-6.column-gap-2 ::slotted(*) { width: calc( 100% / 6 - (($spacer-2 * 5) / 6) );}\n.column-count-6.column-gap-3 ::slotted(*) { width: calc( 100% / 6 - (($spacer-3 * 5) / 6) );}\n.column-count-6.column-gap-4 ::slotted(*) { width: calc( 100% / 6 - (($spacer-4 * 5) / 6) );}\n.column-count-6.column-gap-5 ::slotted(*) { width: calc( 100% / 6 - (($spacer-5 * 5) / 6) );}\n.column-count-6.column-gap-6 ::slotted(*) { width: calc( 100% / 6 - (($spacer-6 * 5) / 6) );}\n\n.column-count-3.column-gap-1:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n\n\n\n@media screen and (max-width: $screen-tablet-max) {\n\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: calc( 51% - (($spacer-4 * 1) / 2)) };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j} ::slotted(*) { width: calc( 50% - (($spacer-4 * 1) / 2)) };\n    }\n  }\n\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: 100%; };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j}  ::slotted(*) { width: 100%; };\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-grid',\n  styleUrl: 'biggive-grid.scss',\n  shadow: true,\n})\nexport class BiggiveGrid {\n  @Prop() spaceBelow: number = 4;\n\n  @Prop() columnCount: number = 3;\n\n  /**\n   * Deprecated - should use columGap Instead\n   */\n  @Prop() spaceBetween: boolean = false;\n\n  @Prop() columnGap: spacingOption = 0;\n\n  render() {\n    return (\n      <div class={'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '')}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-grid.js","mappings":";;AAAA,MAAM,cAAc,GAAG,63RAA63R,CAAC;AACr5R,0BAAe,cAAc;;MCOhBA,aAAW;;;;;0BACO,CAAC;2BAEA,CAAC;4BAKC,KAAK;yBAEF,CAAC;;IAEpC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE,CAAC,IACrK,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveGrid"],"sources":["src/components/biggive-grid/biggive-grid.scss?tag=biggive-grid&encapsulation=shadow","src/components/biggive-grid/biggive-grid.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n.grid {\n  margin-bottom: $spacer-3;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n.space-between {\n  justify-content: space-between;\n}\n\n.grid ::slotted([slot=grid-item]) {\n  display: block;\n}\n\n.column-count-2 ::slotted(*) {\n  width: calc( 100% / 2 );\n  @include flex-container-column();\n}\n\n.column-count-3 ::slotted(*) {\n  width: calc( 100% / 3 );\n  @include flex-container-column();\n}\n\n.column-count-4 ::slotted(*) {\n  width: calc( 100% / 4 );\n  @include flex-container-column();\n}\n\n.column-count-5 ::slotted(*) {\n  width: calc( 100% / 5 );\n  @include flex-container-column();\n}\n\n.column-count-6 ::slotted(*) {\n  width: calc( 100% / 6 );\n  @include flex-container-column();\n}\n\n\n.column-gap-1 { justify-content: space-between; }\n.column-gap-2 { justify-content: space-between; }\n.column-gap-3 { justify-content: space-between; }\n.column-gap-4 { justify-content: space-between; }\n.column-gap-5 { justify-content: space-between; }\n.column-gap-6 { justify-content: space-between; }\n\n\n.column-count-2.column-gap-1 ::slotted(*) { width: calc( 100% / 2 - (($spacer-1 * 1) / 2) );}\n.column-count-2.column-gap-2 ::slotted(*) { width: calc( 100% / 2 - (($spacer-2 * 1) / 2) );}\n.column-count-2.column-gap-3 ::slotted(*) { width: calc( 100% / 2 - (($spacer-3 * 1) / 2) );}\n.column-count-2.column-gap-4 ::slotted(*) { width: calc( 100% / 2 - (($spacer-4 * 1) / 2) );}\n.column-count-2.column-gap-5 ::slotted(*) { width: calc( 100% / 2 - (($spacer-5 * 1) / 2) );}\n.column-count-2.column-gap-6 ::slotted(*) { width: calc( 100% / 2 - (($spacer-6 * 1) / 2) );}\n\n.column-count-3.column-gap-1 ::slotted(*) { width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2 ::slotted(*) { width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3 ::slotted(*) { width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4 ::slotted(*) { width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5 ::slotted(*) { width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6 ::slotted(*) { width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n.column-count-4.column-gap-1 ::slotted(*) { width: calc( 100% / 4 - (($spacer-1 * 3) / 4) );}\n.column-count-4.column-gap-2 ::slotted(*) { width: calc( 100% / 4 - (($spacer-2 * 3) / 4) );}\n.column-count-4.column-gap-3 ::slotted(*) { width: calc( 100% / 4 - (($spacer-3 * 3) / 4) );}\n.column-count-4.column-gap-4 ::slotted(*) { width: calc( 100% / 4 - (($spacer-4 * 3) / 4) );}\n.column-count-4.column-gap-5 ::slotted(*) { width: calc( 100% / 4 - (($spacer-5 * 3) / 4) );}\n.column-count-4.column-gap-6 ::slotted(*) { width: calc( 100% / 4 - (($spacer-6 * 3) / 4) );}\n\n.column-count-5.column-gap-1 ::slotted(*) { width: calc( 100% / 5 - (($spacer-1 * 4) / 5) );}\n.column-count-5.column-gap-2 ::slotted(*) { width: calc( 100% / 5 - (($spacer-2 * 4) / 5) );}\n.column-count-5.column-gap-3 ::slotted(*) { width: calc( 100% / 5 - (($spacer-3 * 4) / 5) );}\n.column-count-5.column-gap-4 ::slotted(*) { width: calc( 100% / 5 - (($spacer-4 * 4) / 5) );}\n.column-count-5.column-gap-5 ::slotted(*) { width: calc( 100% / 5 - (($spacer-5 * 4) / 5) );}\n.column-count-5.column-gap-6 ::slotted(*) { width: calc( 100% / 5 - (($spacer-6 * 4) / 5) );}\n\n.column-count-6.column-gap-1 ::slotted(*) { width: calc( 100% / 6 - (($spacer-1 * 5) / 6) );}\n.column-count-6.column-gap-2 ::slotted(*) { width: calc( 100% / 6 - (($spacer-2 * 5) / 6) );}\n.column-count-6.column-gap-3 ::slotted(*) { width: calc( 100% / 6 - (($spacer-3 * 5) / 6) );}\n.column-count-6.column-gap-4 ::slotted(*) { width: calc( 100% / 6 - (($spacer-4 * 5) / 6) );}\n.column-count-6.column-gap-5 ::slotted(*) { width: calc( 100% / 6 - (($spacer-5 * 5) / 6) );}\n.column-count-6.column-gap-6 ::slotted(*) { width: calc( 100% / 6 - (($spacer-6 * 5) / 6) );}\n\n.column-count-3.column-gap-1:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-1 * 2) / 3) );}\n.column-count-3.column-gap-2:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-2 * 2) / 3) );}\n.column-count-3.column-gap-3:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-3 * 2) / 3) );}\n.column-count-3.column-gap-4:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-4 * 2) / 3) );}\n.column-count-3.column-gap-5:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-5 * 2) / 3) );}\n.column-count-3.column-gap-6:after { content: \"\"; @include flex-container-column(); width: calc( 100% / 3 - (($spacer-6 * 2) / 3) );}\n\n\n\n\n@media screen and (max-width: $screen-tablet-max) {\n\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: calc( 51% - (($spacer-4 * 1) / 2)) };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j} ::slotted(*) { width: calc( 50% - (($spacer-4 * 1) / 2)) };\n    }\n  }\n\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  @for $i from 1 through 6 {\n    .column-count-#{$i}  ::slotted(*) { width: 100%; };\n    @for $j from 1 through 6 {\n      .column-count-#{$i}.column-gap-#{$j}  ::slotted(*) { width: 100%; };\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-grid',\n  styleUrl: 'biggive-grid.scss',\n  shadow: true,\n})\nexport class BiggiveGrid {\n  @Prop() spaceBelow: number = 4;\n\n  @Prop() columnCount: number = 3;\n\n  /**\n   * Deprecated - should use columGap Instead\n   */\n  @Prop() spaceBetween: boolean = false;\n\n  @Prop() columnGap: spacingOption = 0;\n\n  render() {\n    return (\n      <div class={'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '')}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/biggive-heading.js

@@ -20,7 +20,7 @@ const BiggiveHeading$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeading e
     }
     render() {
         const Tag = this.htmlElement;
-        return (h("div", { class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h(Tag, { class: 'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size }, this.icon ? (h("svg", { viewBox: "0 0 102 88" }, h("path", { class: "st0", d: "M51.2,0l-51,88h102L51.2,0z" }), h("path", { d: "M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z" }))) : null, this.text)));
+        return (h("div", { key: '76099648e37d30f39496f2fda26e7f439e1aafa6', class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h(Tag, { key: '38c757bfa7826bfedba74e6c3b8952a1bdb5c267', class: 'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size }, this.icon ? (h("svg", { viewBox: "0 0 102 88" }, h("path", { class: "st0", d: "M51.2,0l-51,88h102L51.2,0z" }), h("path", { d: "M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z" }))) : null, this.text)));
     }
     static get style() { return BiggiveHeadingStyle0; }
 }, [1, "biggive-heading", {

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

@@ -1 +1 @@
-{"file":"biggive-heading.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,yvHAAyvH,CAAC;AACpxH,6BAAe,iBAAiB;;MCUnBA,gBAAc;;;;;0BACW,CAAC;0BAED,CAAC;sBAEP,SAAS;2BAEL,IAAI;oBAEV,CAAC;qBAEL,MAAM;oBAEP,EAAE;oBAED,KAAK;0BAEK,SAAS;;IAE3C,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,QACE,WAAK,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACjH,EAAC,GAAG,IAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,IACtG,IAAI,CAAC,IAAI,IACR,WAAK,OAAO,EAAC,YAAY,IACvB,YAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,GAAG,EACnD,YACE,CAAC,EAAC,47CAW6C,GAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading"],"sources":["src/components/biggive-heading/biggive-heading.scss?tag=biggive-heading&encapsulation=shadow","src/components/biggive-heading/biggive-heading.tsx"],"sourcesContent":["@include alignments();\n@include headings();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .heading-colour-#{$key} { color: $colour; }\n  }\n  display: flex;\n\n  h1,h2,h3,h4,h5 {\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    svg {\n      height: 0.7em;\n      margin-right: 0.2em;\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .icon-colour-#{$key} svg path { fill: $colour; }\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { headingTag } from '../../globals/heading-tag';\nimport { headingSize } from '../../globals/heading-size';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-heading',\n  styleUrl: 'biggive-heading.scss',\n  shadow: true,\n})\nexport class BiggiveHeading {\n  @Prop() spaceAbove: spacingOption = 2;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() colour: brandColour = 'primary';\n\n  @Prop() htmlElement: headingTag = 'h1';\n\n  @Prop() size: headingSize = 1;\n\n  @Prop() align: string = 'left';\n\n  @Prop() text: string = '';\n\n  @Prop() icon: boolean = false;\n\n  @Prop() iconColour: brandColour = 'primary';\n\n  render() {\n    const Tag = this.htmlElement;\n    return (\n      <div class={'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <Tag class={'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size}>\n          {this.icon ? (\n            <svg viewBox=\"0 0 102 88\">\n              <path class=\"st0\" d=\"M51.2,0l-51,88h102L51.2,0z\" />\n              <path\n                d=\"M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z\"\n              />\n            </svg>\n          ) : null}\n\n          {this.text}\n        </Tag>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-heading.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,yvHAAyvH,CAAC;AACpxH,6BAAe,iBAAiB;;MCUnBA,gBAAc;;;;;0BACW,CAAC;0BAED,CAAC;sBAEP,SAAS;2BAEL,IAAI;oBAEV,CAAC;qBAEL,MAAM;oBAEP,EAAE;oBAED,KAAK;0BAEK,SAAS;;IAE3C,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,QACE,4DAAK,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IACjH,EAAC,GAAG,qDAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,IACtG,IAAI,CAAC,IAAI,IACR,WAAK,OAAO,EAAC,YAAY,IACvB,YAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,4BAA4B,GAAG,EACnD,YACE,CAAC,EAAC,47CAW6C,GAC/C,CACE,IACJ,IAAI,EAEP,IAAI,CAAC,IAAI,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeading"],"sources":["src/components/biggive-heading/biggive-heading.scss?tag=biggive-heading&encapsulation=shadow","src/components/biggive-heading/biggive-heading.tsx"],"sourcesContent":["@include alignments();\n@include headings();\n@include spacers();\n\n:host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .heading-colour-#{$key} { color: $colour; }\n  }\n  display: flex;\n\n  h1,h2,h3,h4,h5 {\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    svg {\n      height: 0.7em;\n      margin-right: 0.2em;\n    }\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    .icon-colour-#{$key} svg path { fill: $colour; }\n  }\n\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { headingTag } from '../../globals/heading-tag';\nimport { headingSize } from '../../globals/heading-size';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-heading',\n  styleUrl: 'biggive-heading.scss',\n  shadow: true,\n})\nexport class BiggiveHeading {\n  @Prop() spaceAbove: spacingOption = 2;\n\n  @Prop() spaceBelow: spacingOption = 4;\n\n  @Prop() colour: brandColour = 'primary';\n\n  @Prop() htmlElement: headingTag = 'h1';\n\n  @Prop() size: headingSize = 1;\n\n  @Prop() align: string = 'left';\n\n  @Prop() text: string = '';\n\n  @Prop() icon: boolean = false;\n\n  @Prop() iconColour: brandColour = 'primary';\n\n  render() {\n    const Tag = this.htmlElement;\n    return (\n      <div class={'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow}>\n        <Tag class={'heading-colour-' + this.colour + ' icon-colour-' + this.iconColour + ' heading-' + this.size}>\n          {this.icon ? (\n            <svg viewBox=\"0 0 102 88\">\n              <path class=\"st0\" d=\"M51.2,0l-51,88h102L51.2,0z\" />\n              <path\n                d=\"M31,68.3c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C32.9,67.5,32.1,68.3,31,68.3z M29.5,79.4h3v-10\n         h-3V79.4z M41,69.4V70c-0.5-0.5-1.4-0.9-2.5-0.9c-2.7,0-4.9,2-4.9,4.9c0,2.9,2.2,4.9,4.9,4.9c1.1,0,2-0.3,2.5-0.9v0.6\n         c0,1.3-1.2,1.9-2.7,1.9c-1.3,0-2.4-0.3-3.5-0.9v3c1.3,0.5,2.7,0.6,3.6,0.6c3,0,5.5-1.3,5.5-4.6v-9.4L41,69.4L41,69.4z M41,75.3\n         c-0.4,0.6-1.2,0.9-1.9,0.9c-1.3,0-2.3-0.8-2.3-2.2c0-1.4,1-2.2,2.3-2.2c0.8,0,1.5,0.4,1.9,0.9V75.3z M52.8,79.7\n         c2.4,0,3.8-0.4,5.1-1.2v-7.7h-6.6v2.9h3.5v2.6c-0.5,0.1-1.1,0.3-1.9,0.3c-3,0-4.4-2-4.4-4.3c0-2.3,1.7-4.3,4.8-4.3\n         c1.3,0,2.6,0.4,3.5,0.9v-3.3c-0.9-0.4-2.1-0.7-3.7-0.7c-4.6,0-7.8,3.3-7.8,7.4C45.2,76.5,48.1,79.7,52.8,79.7z M60.7,68.3\n         c-1,0-1.9-0.9-1.9-1.9c0-1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9C62.6,67.5,61.8,68.3,60.7,68.3z M59.2,79.4h3v-10h-3V79.4z\n          M69,73.9l-2.6-4.5h-3.5l6,10.3l6-10.3h-3.5L69,73.9z M77.5,75.1h7c0-4.4-2.5-6-5.1-6c-2.7,0-5.1,1.6-5.1,5.2c0,3.5,2.5,5.2,5.5,5.2\n         c1.3,0,2.7-0.2,3.8-0.8v-2.8c-1.5,0.9-2.5,0.9-3.3,0.9C78.9,76.9,77.6,76.5,77.5,75.1z M79.4,71.5c0.9,0,1.7,0.4,1.8,1.7h-3.7\n         C77.7,72,78.6,71.5,79.4,71.5z M26,71.6c0.7-0.6,1.1-1.5,1.1-2.5c0-1.9-1.8-3.9-4.4-3.9h-4.8v14.3h6.3c2.4,0,4.3-1.9,4.3-4.2\n         C28.4,73.8,27.8,72.2,26,71.6z M21,68.1h1.4c0.9,0,1.5,0.7,1.5,1.4c0,0.8-0.6,1.4-1.5,1.4H21V68.1z M23.8,76.5H21v-2.9h2.8\n         c0.9,0,1.5,0.6,1.5,1.4C25.3,75.9,24.7,76.5,23.8,76.5z\"\n              />\n            </svg>\n          ) : null}\n\n          {this.text}\n        </Tag>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -30,9 +30,9 @@ const BiggiveHeroImage$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveHeroIma
     render() {
         const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');
         const teaserClasses = 'teaser ' + (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');
-        return (h("div", { class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, this.logo !== undefined && this.logo !== null ? (h("div", { class: 'logo image-wrap logo-height-' + this.logoHeight }, h("img", { src: this.logo, alt: this.logoAltText, title: this.logoAltText }))) : h("div", { class: 'logo-space logo-height-' + this.logoHeight }), h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h1", { class: mainTitleClasses }, this.mainTitle), h("div", { class: teaserClasses }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
+        return (h("div", { key: '51eae2f7639b37e2327eebe0552df24b518dfd96', class: 'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow }, h("div", { key: '8b9e4c4ce89be8143d38ef3d885a270e5b339b76', class: "sleeve" }, h("div", { key: '4d33f3a05b74c4a7631768bfbbd5aba9c8fcd29d', class: "content-wrap" }, this.logo !== undefined && this.logo !== null ? (h("div", { class: 'logo image-wrap logo-height-' + this.logoHeight }, h("img", { src: this.logo, alt: this.logoAltText, title: this.logoAltText }))) : h("div", { class: 'logo-space logo-height-' + this.logoHeight }), h("div", { key: '05a1e4a6916fe0e68a5638d5e0063722ee5759ee', class: 'slug text-colour-' + this.slugColour }, this.slug), h("h1", { key: '7909befe609598ff5d49938f25a6be6c633a8b99', class: mainTitleClasses }, this.mainTitle), h("div", { key: 'd1aafc85095a78e35ad9953c65c902ef19065e4f', class: teaserClasses }, this.teaser), this.buttonLabel != null && this.buttonUrl != null
             ? h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })
-            : null), h("div", { class: "graphic-wrap" }, this.mainImage !== null ? (h("div", { class: "image-wrap", role: "presentation", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } })) : null))));
+            : null), h("div", { key: 'd047cb700bf0762eac923eed2d00098d8b288c73', class: "graphic-wrap" }, this.mainImage !== null ? (h("div", { class: "image-wrap", role: "presentation", style: { 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical } })) : null))));
     }
     static get style() { return BiggiveHeroImageStyle0; }
 }, [1, "biggive-hero-image", {

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

@@ -1 +1 @@
-{"file":"biggive-hero-image.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,k6MAAk6M,CAAC;AAC/7M,+BAAe,mBAAmB;;MCUrBA,kBAAgB;;;;;0BAIS,CAAC;4BAKA,SAAS;;;oBAetB,EAAE;0BAKkB,CAAC;2BAKb,EAAE;yBAKC,IAAI;wCAKM,QAAQ;sCAKV,QAAQ;;;;;;;kCA+BT,SAAS;;IAGnD,MAAM;QACJ,MAAM,gBAAgB,GAAG,aAAa,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QACpK,MAAM,aAAa,GAAG,SAAS,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC;QAEpJ,QACE,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC5F,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAC5C,WAAK,KAAK,EAAE,8BAA8B,GAAC,IAAI,CAAC,UAAU,IACxD,WAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,CAClE,IACJ,WAAK,KAAK,EAAE,yBAAyB,GAAC,IAAI,CAAC,UAAU,GAAQ,EACjE,WAAK,KAAK,EAAE,mBAAmB,GAAC,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClE,UAAI,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAM,EAClD,WAAK,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAO,EAC7C,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI;cAC/C,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB;cACvH,IAAI,CAEJ,EACN,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,SAAS,KAAK,IAAI,IACtB,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,qBAAqB,EAAE,IAAI,CAAC,wBAAwB,GAAG,GAAG,GAAG,IAAI,CAAC,sBAAsB,EAAE,GAC5L,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeroImage"],"sources":["src/components/biggive-hero-image/biggive-hero-image.scss?tag=biggive-hero-image&encapsulation=shadow","src/components/biggive-hero-image/biggive-hero-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include standard-font();\n  overflow: hidden;\n  position: relative;\n  margin-bottom: $spacer-4;\n  min-height: 32.5vw;\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.colour-scheme-#{$key} { color: $colour; }\n  }\n  .sleeve {\n    @include flex-container-row();\n    max-width: $screen-desktop-max;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .content-wrap {\n    width: 40%;\n    position: relative;\n    z-index: 1;\n    white-space: pre-wrap; // helps render out \\n\n    padding: $spacer-8 $spacer-6 $spacer-6 $spacer-0;\n\n    .logo, .logo-space {\n      height: 75px;\n      &.logo-height-1 { height: 50px; }\n      &.logo-height-2 { height: 75px; }\n      &.logo-height-3 { height: 100px; }\n      &.logo-height-4 { height: 125px; }\n      &.logo-height-5 { height: 150px; }\n      &.logo-height-6 { height: 175px; }\n      &.logo-height-7 { height: 200px; }\n      &.logo-height-8 { height: 225px; }\n      &.logo-height-9 { height: 250px; }\n      &.logo-height-10 { height: 275px; }    \n    }\n\n    .logo {\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: left center;\n\n      img {\n        width: auto;\n        height: 100%;\n        position: relative;\n      }\n    }\n    .slug {\n      @include heading-4;\n      min-height: 24px; // Sort layout when there is no slug.\n      margin: 0;\n      padding: 0;\n    }\n    h1 {\n      @include heading-1;\n      margin: 0 0 $spacer-3 0;\n      padding: 0;\n\n      @media (max-width: $screen-desktop-max) {\n        @include heading-2;\n      }\n    }\n    .teaser {\n      margin: 0 0 $spacer-5 0;\n      padding: 0;\n    }\n  }\n\n  .graphic-wrap {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-bottom: 32.5vw;\n    background-color: #F1F1F1;\n    margin-left: 20vw;\n    clip-path: polygon(0 0, 100% 0, 100% 100%);\n    .image-wrap {\n      @include absolute-fill();\n      background-size: cover;\n      img {\n        display: none;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-desktop-max) {\n  .container {\n    min-height: 50vw;\n    .sleeve {\n      flex-wrap: wrap;\n      .content-wrap {\n        width: 60%;\n        padding: 18vw $spacer-3 $spacer-3 $spacer-3;\n        margin-bottom: 50px;\n      }\n      .graphic-wrap {\n        margin-left: 0;\n        bottom: auto;\n        padding-bottom: 50vw;\n      }\n    }\n  }\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 70%;\n        padding-top: $spacer-8;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 80%;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 100%;\n      }\n    }\n  }\n}\n","/* eslint-disable prettier/prettier */\nimport { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n\n@Component({\n  tag: 'biggive-hero-image',\n  styleUrl: 'biggive-hero-image.scss',\n  shadow: true,\n})\nexport class BiggiveHeroImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: spacingOption = 0;\n\n  /**\n   * Colour Scheme\n   */\n   @Prop() colourScheme: brandColour = 'primary';\n\n  /**\n   * Header slug\n   */\n   @Prop() slug: string;\n\n  /**\n   * Header slug colour\n   */\n   @Prop() slugColour: brandColour;\n\n  /**\n   * Full URL of a logo image.\n   */\n   @Prop() logo: string = '';\n\n   /**\n   * Logo container height selection. Numbers are not measurements.\n   */\n   @Prop() logoHeight: 1|2|3|4|5|6|7|8|9|10 = 3;\n\n  /**\n   * Logo alt text\n   */\n    @Prop() logoAltText: string = '';\n\n  /**\n   * Full URL of a main hero image.\n   */\n    @Prop() mainImage: string|null = null;\n\n  /**\n   * Horizontal alignment of image\n   */\n    @Prop() mainImageAlignHorizontal: string = 'center';\n\n      /**\n   * Vertical alignment of image\n   */\n    @Prop() mainImageAlignVertical: string = 'center';\n\n  /**\n   * Hero image title, typically the page.\n   */\n  @Prop() mainTitle: string;\n  /**\n   * Main title colour\n   */\n   @Prop() mainTitleColour?: brandColour;\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n  /**\n   * Teaser colour\n   */\n   @Prop() teaserColour?: brandColour;\n  /**\n   * Button Url\n   */\n   @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n   @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: brandColour = 'primary';\n\n\n  render() {\n    const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');\n    const teaserClasses = 'teaser ' + (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');\n\n    return (\n      <div class={'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            {this.logo !== undefined && this.logo !== null ? (\n              <div class={'logo image-wrap logo-height-'+this.logoHeight}>\n                <img src={this.logo} alt={this.logoAltText} title={this.logoAltText}/>\n              </div>\n            ) : <div class={'logo-space logo-height-'+this.logoHeight}></div>}\n            <div class={'slug text-colour-'+this.slugColour}>{this.slug}</div>\n            <h1 class={mainTitleClasses}>{this.mainTitle}</h1>\n            <div class={teaserClasses}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null\n              ? <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n              : null\n            }\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.mainImage !== null ? (\n              <div class=\"image-wrap\" role=\"presentation\" style={{ 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical }}>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-hero-image.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,k6MAAk6M,CAAC;AAC/7M,+BAAe,mBAAmB;;MCUrBA,kBAAgB;;;;;0BAIS,CAAC;4BAKA,SAAS;;;oBAetB,EAAE;0BAKkB,CAAC;2BAKb,EAAE;yBAKC,IAAI;wCAKM,QAAQ;sCAKV,QAAQ;;;;;;;kCA+BT,SAAS;;IAGnD,MAAM;QACJ,MAAM,gBAAgB,GAAG,aAAa,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QACpK,MAAM,aAAa,GAAG,SAAS,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC;QAEpJ,QACE,4DAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,YAAY,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,IAC5F,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAC5C,WAAK,KAAK,EAAE,8BAA8B,GAAC,IAAI,CAAC,UAAU,IACxD,WAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,CAClE,IACJ,WAAK,KAAK,EAAE,yBAAyB,GAAC,IAAI,CAAC,UAAU,GAAQ,EACjE,4DAAK,KAAK,EAAE,mBAAmB,GAAC,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,IAAI,CAAO,EAClE,2DAAI,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAM,EAClD,4DAAK,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAO,EAC7C,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI;cAC/C,uCAA+B,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAmB;cACvH,IAAI,CAEJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,SAAS,KAAK,IAAI,IACtB,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,qBAAqB,EAAE,IAAI,CAAC,wBAAwB,GAAG,GAAG,GAAG,IAAI,CAAC,sBAAsB,EAAE,GAC5L,IACJ,IAAI,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveHeroImage"],"sources":["src/components/biggive-hero-image/biggive-hero-image.scss?tag=biggive-hero-image&encapsulation=shadow","src/components/biggive-hero-image/biggive-hero-image.tsx"],"sourcesContent":["@include image-alignment();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents;\n  @include standard-font();\n}\n\n.container {\n  @include standard-font();\n  overflow: hidden;\n  position: relative;\n  margin-bottom: $spacer-4;\n  min-height: 32.5vw;\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.colour-scheme-#{$key} { color: $colour; }\n  }\n  .sleeve {\n    @include flex-container-row();\n    max-width: $screen-desktop-max;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .content-wrap {\n    width: 40%;\n    position: relative;\n    z-index: 1;\n    white-space: pre-wrap; // helps render out \\n\n    padding: $spacer-8 $spacer-6 $spacer-6 $spacer-0;\n\n    .logo, .logo-space {\n      height: 75px;\n      &.logo-height-1 { height: 50px; }\n      &.logo-height-2 { height: 75px; }\n      &.logo-height-3 { height: 100px; }\n      &.logo-height-4 { height: 125px; }\n      &.logo-height-5 { height: 150px; }\n      &.logo-height-6 { height: 175px; }\n      &.logo-height-7 { height: 200px; }\n      &.logo-height-8 { height: 225px; }\n      &.logo-height-9 { height: 250px; }\n      &.logo-height-10 { height: 275px; }    \n    }\n\n    .logo {\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: left center;\n\n      img {\n        width: auto;\n        height: 100%;\n        position: relative;\n      }\n    }\n    .slug {\n      @include heading-4;\n      min-height: 24px; // Sort layout when there is no slug.\n      margin: 0;\n      padding: 0;\n    }\n    h1 {\n      @include heading-1;\n      margin: 0 0 $spacer-3 0;\n      padding: 0;\n\n      @media (max-width: $screen-desktop-max) {\n        @include heading-2;\n      }\n    }\n    .teaser {\n      margin: 0 0 $spacer-5 0;\n      padding: 0;\n    }\n  }\n\n  .graphic-wrap {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-bottom: 32.5vw;\n    background-color: #F1F1F1;\n    margin-left: 20vw;\n    clip-path: polygon(0 0, 100% 0, 100% 100%);\n    .image-wrap {\n      @include absolute-fill();\n      background-size: cover;\n      img {\n        display: none;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-desktop-max) {\n  .container {\n    min-height: 50vw;\n    .sleeve {\n      flex-wrap: wrap;\n      .content-wrap {\n        width: 60%;\n        padding: 18vw $spacer-3 $spacer-3 $spacer-3;\n        margin-bottom: 50px;\n      }\n      .graphic-wrap {\n        margin-left: 0;\n        bottom: auto;\n        padding-bottom: 50vw;\n      }\n    }\n  }\n}\n\n\n@media screen and (max-width: $screen-tablet-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 70%;\n        padding-top: $spacer-8;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-max) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 80%;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: $screen-mobile-small) {\n  .container {\n    .sleeve {\n      .content-wrap {\n        width: 100%;\n      }\n    }\n  }\n}\n","/* eslint-disable prettier/prettier */\nimport { Component, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n\n@Component({\n  tag: 'biggive-hero-image',\n  styleUrl: 'biggive-hero-image.scss',\n  shadow: true,\n})\nexport class BiggiveHeroImage {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: spacingOption = 0;\n\n  /**\n   * Colour Scheme\n   */\n   @Prop() colourScheme: brandColour = 'primary';\n\n  /**\n   * Header slug\n   */\n   @Prop() slug: string;\n\n  /**\n   * Header slug colour\n   */\n   @Prop() slugColour: brandColour;\n\n  /**\n   * Full URL of a logo image.\n   */\n   @Prop() logo: string = '';\n\n   /**\n   * Logo container height selection. Numbers are not measurements.\n   */\n   @Prop() logoHeight: 1|2|3|4|5|6|7|8|9|10 = 3;\n\n  /**\n   * Logo alt text\n   */\n    @Prop() logoAltText: string = '';\n\n  /**\n   * Full URL of a main hero image.\n   */\n    @Prop() mainImage: string|null = null;\n\n  /**\n   * Horizontal alignment of image\n   */\n    @Prop() mainImageAlignHorizontal: string = 'center';\n\n      /**\n   * Vertical alignment of image\n   */\n    @Prop() mainImageAlignVertical: string = 'center';\n\n  /**\n   * Hero image title, typically the page.\n   */\n  @Prop() mainTitle: string;\n  /**\n   * Main title colour\n   */\n   @Prop() mainTitleColour?: brandColour;\n  /**\n   * Introductory teaser text\n   */\n  @Prop() teaser: string;\n  /**\n   * Teaser colour\n   */\n   @Prop() teaserColour?: brandColour;\n  /**\n   * Button Url\n   */\n   @Prop() buttonUrl: string;\n\n  /**\n   * Button Label\n   */\n   @Prop() buttonLabel: string;\n\n  /**\n   * Button Colour Scheme\n   */\n  @Prop() buttonColourScheme: brandColour = 'primary';\n\n\n  render() {\n    const mainTitleClasses = 'main-title ' + (typeof this.mainTitleColour === 'string' && this.mainTitleColour.length > 0 ? `text-colour-${this.mainTitleColour}` : '');\n    const teaserClasses = 'teaser ' + (typeof this.teaserColour === 'string' && this.teaserColour.length > 0 ? `text-colour-${this.teaserColour}` : '');\n\n    return (\n      <div class={'container colour-scheme-' + this.colourScheme + ' space-below-' + this.spaceBelow}>\n        <div class=\"sleeve\">\n          <div class=\"content-wrap\">\n            {this.logo !== undefined && this.logo !== null ? (\n              <div class={'logo image-wrap logo-height-'+this.logoHeight}>\n                <img src={this.logo} alt={this.logoAltText} title={this.logoAltText}/>\n              </div>\n            ) : <div class={'logo-space logo-height-'+this.logoHeight}></div>}\n            <div class={'slug text-colour-'+this.slugColour}>{this.slug}</div>\n            <h1 class={mainTitleClasses}>{this.mainTitle}</h1>\n            <div class={teaserClasses}>{this.teaser}</div>\n            {this.buttonLabel != null && this.buttonUrl != null\n              ? <biggive-button colour-scheme={this.buttonColourScheme} url={this.buttonUrl} label={this.buttonLabel}></biggive-button>\n              : null\n            }\n          </div>\n          <div class=\"graphic-wrap\">\n            {this.mainImage !== null ? (\n              <div class=\"image-wrap\" role=\"presentation\" style={{ 'background-image': 'url(' + this.mainImage + ')', 'background-position': this.mainImageAlignHorizontal + ' ' + this.mainImageAlignVertical }}>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -32,7 +32,7 @@ const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconBu
         this.buttonId = undefined;
     }
     render() {
-        return (h("div", { class: 'container space-below-' +
+        return (h("div", { key: '862fcf4cee61f51880320c383e7fc382785a0d8b', class: 'container space-below-' +
                 this.spaceBelow +
                 ' background-colour-' +
                 this.backgroundColour +
@@ -43,7 +43,7 @@ const BiggiveIconButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconBu
                 ' rounded-' +
                 this.rounded +
                 ' shadow-' +
-                this.shadow }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { class: "sleeve", onClick: this.handleButtonClick }, h("div", { class: 'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString() }, h("biggive-generic-icon", { iconGroup: this.iconGroup, icon: this.icon })), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
+                this.shadow }, h("a", { key: '1725180d38ebfce942f8ee48ac1bac322116daa1', href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { key: 'dca904c7e12458e6667d5b49b4e4b537504a8a53', class: "sleeve", onClick: this.handleButtonClick }, h("div", { key: '4801d6d9726fd8ecc158e3bd6810f10d52f4fc93', class: 'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString() }, h("biggive-generic-icon", { key: 'b80b264567f2a1ba637bcbf67c7346b6a0e1ddda', iconGroup: this.iconGroup, icon: this.icon })), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
     }
     static get style() { return BiggiveIconButtonStyle0; }
 }, [1, "biggive-icon-button", {

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

@@ -1 +1 @@
-{"file":"biggive-icon-button.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6sTAA6sT,CAAC;AAC3uT,gCAAe,oBAAoB;;MCQtBA,mBAAiB;;;;;;QA2CpB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;;;4BAQT,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,WAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,WAAK,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IACnF,4BAAsB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAyB,CACrF,EAEL,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconButton"],"sources":["src/components/biggive-icon-button/biggive-icon-button.scss?tag=biggive-icon-button&encapsulation=shadow","src/components/biggive-icon-button/biggive-icon-button.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .icon-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n    .misc-icon-item {\n      width: 100%;\n      height: 100%;\n    }\n\n    .misc-icon-item a {\n      padding: 20%;\n    }\n\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n\n  }\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-icon-button',\n  styleUrl: 'biggive-icon-button.scss',\n  shadow: true,\n})\nexport class BiggiveIconButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div class={'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString()}>\n              <biggive-generic-icon iconGroup={this.iconGroup} icon={this.icon}></biggive-generic-icon>\n            </div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-icon-button.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6sTAA6sT,CAAC;AAC3uT,gCAAe,oBAAoB;;MCQtBA,mBAAiB;;;;;;QA2CpB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;;;4BAQT,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DAAK,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IACnF,6EAAsB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAyB,CACrF,EAEL,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconButton"],"sources":["src/components/biggive-icon-button/biggive-icon-button.scss?tag=biggive-icon-button&encapsulation=shadow","src/components/biggive-icon-button/biggive-icon-button.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .icon-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n    .misc-icon-item {\n      width: 100%;\n      height: 100%;\n    }\n\n    .misc-icon-item a {\n      padding: 20%;\n    }\n\n  }\n\n  @each $key, $colour in $brandColoursIncBrand6Turquoise {\n    &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n\n  }\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-icon-button',\n  styleUrl: 'biggive-icon-button.scss',\n  shadow: true,\n})\nexport class BiggiveIconButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() iconGroup: 'beneficiary' | 'misc' | 'social' | 'category';\n\n  @Prop() icon: string;\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div class={'icon-wrap ' + ' size-' + this.size + ' circle-' + this.circle.toString()}>\n              <biggive-generic-icon iconGroup={this.iconGroup} icon={this.icon}></biggive-generic-icon>\n            </div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -12,7 +12,7 @@ const BiggiveIconGroup$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveIconGro
         this.label = undefined;
     }
     render() {
-        return (h("div", { class: 'container space-below-' + this.spaceBelow }, this.label != null ? h("div", { class: "label" }, this.label) : null, h("div", { class: "sleeve" }, h("slot", null))));
+        return (h("div", { key: 'f1536345e3b8ecbf26cf568121886ce541c46a0f', class: 'container space-below-' + this.spaceBelow }, this.label != null ? h("div", { class: "label" }, this.label) : null, h("div", { key: '80d5d99cf678e09674c0753900313245eaf7735d', class: "sleeve" }, h("slot", { key: 'f32c4d27c005a647b75eb614736512064cc3174c' }))));
     }
     static get style() { return BiggiveIconGroupStyle0; }
 }, [1, "biggive-icon-group", {

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

@@ -1 +1 @@
-{"file":"biggive-icon-group.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8UAA8U,CAAC;AAC3W,+BAAe,mBAAmB;;MCMrBA,kBAAgB;;;;;0BAIE,CAAC;;;IAO9B,MAAM;QACJ,QACE,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,GAAG,IAAI,EAClE,WAAK,KAAK,EAAC,QAAQ,IACjB,eAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconGroup"],"sources":["src/components/biggive-icon-group/biggive-icon-group.scss?tag=biggive-icon-group&encapsulation=shadow","src/components/biggive-icon-group/biggive-icon-group.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  .label {\n    border-bottom: 1px solid $colour-grey-dark;\n    padding-bottom: $spacer-1;\n    margin-bottom: $spacer-2;\n  }\n  .sleeve {\n    display: flex;\n  }\n}\n\n\n::slotted(*) {\n  margin-right: $spacer-3;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-icon-group',\n  styleUrl: 'biggive-icon-group.scss',\n  shadow: true,\n})\nexport class BiggiveIconGroup {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {this.label != null ? <div class=\"label\">{this.label}</div> : null}\n        <div class=\"sleeve\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-icon-group.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8UAA8U,CAAC;AAC3W,+BAAe,mBAAmB;;MCMrBA,kBAAgB;;;;;0BAIE,CAAC;;;IAO9B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,GAAG,IAAI,EAClE,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveIconGroup"],"sources":["src/components/biggive-icon-group/biggive-icon-group.scss?tag=biggive-icon-group&encapsulation=shadow","src/components/biggive-icon-group/biggive-icon-group.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.container {\n  @include standard-font();\n  .label {\n    border-bottom: 1px solid $colour-grey-dark;\n    padding-bottom: $spacer-1;\n    margin-bottom: $spacer-2;\n  }\n  .sleeve {\n    display: flex;\n  }\n}\n\n\n::slotted(*) {\n  margin-right: $spacer-3;\n}","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-icon-group',\n  styleUrl: 'biggive-icon-group.scss',\n  shadow: true,\n})\nexport class BiggiveIconGroup {\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <div class={'container space-below-' + this.spaceBelow}>\n        {this.label != null ? <div class=\"label\">{this.label}</div> : null}\n        <div class=\"sleeve\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -31,7 +31,7 @@ const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage
         this.buttonId = undefined;
     }
     render() {
-        return (h("div", { class: 'container space-below-' +
+        return (h("div", { key: 'ed976c8a12c3ba52c2a458e829ed76a7373dca8f', class: 'container space-below-' +
                 this.spaceBelow +
                 ' background-colour-' +
                 this.backgroundColour +
@@ -42,7 +42,7 @@ const BiggiveImageButton$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImage
                 ' rounded-' +
                 this.rounded +
                 ' shadow-' +
-                this.shadow }, h("a", { href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { class: "sleeve", onClick: this.handleButtonClick }, h("div", { class: 'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString(), style: { backgroundImage: 'url(' + this.imageUrl + ')' } }), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
+                this.shadow }, h("a", { key: '8102ea4712f85790b326d491bcb0ee9a0aefa5bf', href: this.url, target: this.openInNewTab ? '_blank' : '_self', id: this.buttonId }, h("div", { key: '221a7152156fe96634f33386d9c6b3b86b6ad22b', class: "sleeve", onClick: this.handleButtonClick }, h("div", { key: '8ceb2049734f68d3e30d979418eb034f24bd7fcb', class: 'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString(), style: { backgroundImage: 'url(' + this.imageUrl + ')' } }), this.text != '' ? h("div", { class: 'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding }, this.text) : null, this.arrow ? (h("div", { class: 'arrow-wrap arrow-colour-' + this.arrowColour }, h("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174", stroke: "black", "stroke-width": "2" })))) : null))));
     }
     static get style() { return BiggiveImageButtonStyle0; }
 }, [1, "biggive-image-button", {

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

@@ -1 +1 @@
-{"file":"biggive-image-button.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,0jQAA0jQ,CAAC;AACzlQ,iCAAe,qBAAqB;;MCQvBA,oBAAkB;;;;;;QA2CrB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;0BAIZ,OAAO;;4BAIJ,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,WACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,WAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,WACE,KAAK,EAAE,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EACrH,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,GACnD,EAEN,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageButton"],"sources":["src/components/biggive-image-button/biggive-image-button.scss?tag=biggive-image-button&encapsulation=shadow","src/components/biggive-image-button/biggive-image-button.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include spacers();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .image-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.image-style-contain {\n      background-size: contain;\n    }  \n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n  }\n\n\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-image-button',\n  styleUrl: 'biggive-image-button.scss',\n  shadow: true,\n})\nexport class BiggiveImageButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() imageUrl: string;\n\n  @Prop() imageStyle: string = 'cover';\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div\n              class={'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString()}\n              style={{ backgroundImage: 'url(' + this.imageUrl + ')' }}\n            ></div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"biggive-image-button.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,0jQAA0jQ,CAAC;AACzlQ,iCAAe,qBAAqB;;MCQvBA,oBAAkB;;;;;;QA2CrB,sBAAiB,GAAG,CAAC,KAAU;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;SACjF,CAAC;0BApCkC,CAAC;gCAEG,OAAO;iCAEJ,CAAC;;0BAIV,OAAO;;0BAIZ,OAAO;;4BAIJ,KAAK;oBAEiC,QAAQ;qBAErD,KAAK;2BAEK,OAAO;sBAEhB,KAAK;sBAEL,KAAK;wBAEH,KAAK;uBAEN,KAAK;wBAEO,SAAS;;IAMhD,MAAM;QACJ,QACE,4DACE,KAAK,EACH,wBAAwB;gBACxB,IAAI,CAAC,UAAU;gBACf,qBAAqB;gBACrB,IAAI,CAAC,gBAAgB;gBACrB,sBAAsB;gBACtB,IAAI,CAAC,iBAAiB;gBACtB,YAAY;gBACZ,IAAI,CAAC,QAAQ;gBACb,WAAW;gBACX,IAAI,CAAC,OAAO;gBACZ,UAAU;gBACV,IAAI,CAAC,MAAM,IAGb,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAClF,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACjD,4DACE,KAAK,EAAE,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EACrH,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,GACnD,EAEN,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,IAAG,IAAI,CAAC,IAAI,CAAO,GAAG,IAAI,EAE9I,IAAI,CAAC,KAAK,IACT,WAAK,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC,WAAW,IACvD,WAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YAAM,CAAC,EAAC,kDAAkD,EAAC,MAAM,EAAC,OAAO,kBAAc,GAAG,GAAG,CACzF,CACF,IACJ,IAAI,CACJ,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveImageButton"],"sources":["src/components/biggive-image-button/biggive-image-button.scss?tag=biggive-image-button&encapsulation=shadow","src/components/biggive-image-button/biggive-image-button.tsx"],"sourcesContent":["@include backgrounds();\n@include text-colours();\n@include spacers();\n\n:host {\n  display: contents; \n}\n\n.container {\n  @include standard-font();\n  a {\n    display: block;\n    text-decoration: none;\n    &.full-width-true {\n      display: block;\n    }\n  }\n  &.centered-true {\n    text-align: center;\n  }\n  &.shadow-true {\n    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));\n  }\n  &.rounded-true {\n    border-radius: 10px;\n  }\n  &.background-padding-1 { padding: $spacer-1; }\n  &.background-padding-2 { padding: $spacer-2; }\n  &.background-padding-3 { padding: $spacer-3; }\n  &.background-padding-4 { padding: $spacer-4; }\n  &.background-padding-5 { padding: $spacer-5; }\n  &.background-padding-6 { padding: $spacer-6; }\n\n  .sleeve {\n    display: flex;\n    .text-wrap {\n      margin: auto 0;\n      text-decoration: none;\n      &.text-padding-1 { padding: 0 $spacer-1; }\n      &.text-padding-2 { padding: 0 $spacer-2; }\n      &.text-padding-3 { padding: 0 $spacer-3; }\n      &.text-padding-4 { padding: 0 $spacer-4; }\n      &.text-padding-5 { padding: 0 $spacer-5; }\n      &.text-padding-6 { padding: 0 $spacer-6; }\n    }\n\n    .arrow-wrap {\n      margin: auto 0 auto auto;\n      @each $key, $colour in $brandColoursIncBrand6Turquoise {\n        &.arrow-colour-#{$key} .arrow-wrap svg path { stroke: $colour; }\n      }\n    }\n  }\n\n  .image-wrap {\n    background-position: center center;\n    background-size: cover;\n\n    &.image-style-contain {\n      background-size: contain;\n    }  \n\n    &.circle-true {\n      border-radius: 50%;\n      overflow: hidden;\n    }\n\n    &.size-small {\n      width: 30px;\n      height: 30px;\n    }\n    &.size-medium {\n      width: 45px;\n      height: 45px;\n    }  \n    &.size-large {\n      width: 60px;\n      height: 60px;\n    }\n    &.size-x-large {\n      width: 75px;\n      height: 75px;\n    }\n    &.size-xx-large {\n      width: 90px;\n      height: 90px;\n    }\n\n  }\n\n\n  \n\n\n}\n\n\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { brandColour } from '../../globals/brand-colour';\nimport { spacingOption } from '../../globals/spacing-option';\n\n@Component({\n  tag: 'biggive-image-button',\n  styleUrl: 'biggive-image-button.scss',\n  shadow: true,\n})\nexport class BiggiveImageButton {\n  @Event({\n    eventName: 'doButtonClick',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  doButtonClick: EventEmitter<{ event: object; url: string }>;\n\n  @Prop() spaceBelow: spacingOption = 1;\n\n  @Prop() backgroundColour: brandColour = 'white';\n\n  @Prop() backgroundPadding: spacingOption = 0;\n\n  @Prop() text: string;\n\n  @Prop() textColour: brandColour = 'black';\n\n  @Prop() imageUrl: string;\n\n  @Prop() imageStyle: string = 'cover';\n\n  @Prop() url: string;\n\n  @Prop() openInNewTab: boolean = false;\n\n  @Prop() size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' = 'medium';\n\n  @Prop() arrow: boolean = false;\n\n  @Prop() arrowColour: brandColour = 'black';\n\n  @Prop() circle: boolean = false;\n\n  @Prop() shadow: boolean = false;\n\n  @Prop() centered: boolean = false;\n\n  @Prop() rounded: boolean = false;\n\n  @Prop() buttonId: undefined | string = undefined;\n\n  private handleButtonClick = (event: any) => {\n    this.doButtonClick.emit({ event: event, url: event.target.parentElement.href });\n  };\n\n  render() {\n    return (\n      <div\n        class={\n          'container space-below-' +\n          this.spaceBelow +\n          ' background-colour-' +\n          this.backgroundColour +\n          ' background-padding-' +\n          this.backgroundPadding +\n          ' centered-' +\n          this.centered +\n          ' rounded-' +\n          this.rounded +\n          ' shadow-' +\n          this.shadow\n        }\n      >\n        <a href={this.url} target={this.openInNewTab ? '_blank' : '_self'} id={this.buttonId}>\n          <div class=\"sleeve\" onClick={this.handleButtonClick}>\n            <div\n              class={'image-wrap ' + ' image-style-' + this.imageStyle + ' size-' + this.size + ' circle-' + this.circle.toString()}\n              style={{ backgroundImage: 'url(' + this.imageUrl + ')' }}\n            ></div>\n\n            {this.text != '' ? <div class={'text-wrap text-colour-' + this.textColour + ' text-padding-' + this.backgroundPadding}>{this.text}</div> : null}\n\n            {this.arrow ? (\n              <div class={'arrow-wrap arrow-colour-' + this.arrowColour}>\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M0.76912 1.0791L5.73828 6.04826L0.769121 11.0174\" stroke=\"black\" stroke-width=\"2\" />\n                </svg>\n              </div>\n            ) : null}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -26,7 +26,7 @@ const BiggiveImageCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageCa
         this.addAnimation = false;
     }
     render() {
-        return (h("div", { class: 'container space-below-' +
+        return (h("div", { key: '867423df605fab9e18d1d4e03f4a417ecbb0ddd6', class: 'container space-below-' +
                 this.spaceBelow +
                 ' background-colour-' +
                 this.backgroundColour +
@@ -35,7 +35,7 @@ const BiggiveImageCard$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveImageCa
                 ' clip-top-right-corner-' +
                 this.clipTopRightCorner +
                 ' add-animation-' +
-                this.addAnimation }, h("a", { href: this.buttonUrl }, h("div", { class: 'sleeve text-colour-' + this.teaserColour + ' text-align-' + this.textAlign }, h("div", { class: "content-wrap" }, 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("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, label: this.buttonLabel }))) : null)))));
+                this.addAnimation }, h("a", { key: 'b61e8b6afbeb9f6782f39982c13b41df2588e6e1', href: this.buttonUrl }, h("div", { key: '18a73aecfc8be119ef290bf40ada258907edeec5', class: 'sleeve text-colour-' + this.teaserColour + ' text-align-' + this.textAlign }, h("div", { key: '746c80db40e35e4b8572af007c5ebcb64bf6fda1', class: "content-wrap" }, 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("div", { key: '4bcb94c72f567dd3c7c5fe6f2ed27053e1720f57', 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, label: this.buttonLabel }))) : null)))));
     }
     static get style() { return BiggiveImageCardStyle0; }
 }, [1, "biggive-image-card", {